* {
    box-sizing: border-box;
    vertical-align: baseline;
}

html {
    font-size: 0.9vw;
    font-family: "tosustain";
    line-height: 1.3em;
    scroll-behavior: smooth;
}

body {
    font-size: 1.3rem;
    line-height: 1.3em;
    position: relative;
    /* -webkit-text-fill-color: transparent; */
}

/* ----------------------------------------------------------------------------------------- grid complements */
.gap {
    /* padding-left: var(--pad);
	padding-right: var(--pad); */
    grid-column-gap: calc(var(--pad) * 2);
    /* background-color: yellow */
}

.gridPad {
    padding-left: calc(var(--pad) * 12);
    padding-right: calc(var(--pad) * 12);
}

.vGapHalf {
    grid-row-gap: calc(var(--pad) * 0.5);
}

.vGap {
    grid-row-gap: var(--pad);
}

.vGapDouble {
    grid-row-gap: calc(var(--pad) * 4);
}

.vGapQuad {
    grid-row-gap: calc(var(--pad) * 8);
}

.spacer {
    padding-top: var(--pad);
    padding-bottom: var(--pad);
}

/* ----------------------------------------------------------------------------------------- sections */
#nav {
    font-size: 1.8rem;
    line-height: 1em;
    position: relative;
    background-color: var(--color);
    color: var(--light);
    padding-top: calc(var(--pad) * 1);
    padding-bottom: calc(var(--pad) * 1.2);
    border: 1px solid var(--light);
    border-width: 0px 0px 1px 0px;
    position: fixed;
    z-index: 1;
}

#main {
    padding-top: calc(var(--pad) * 4);
    min-height: 80vh;
    color: var(--light);
    background-color: var(--color);
    /* border: 1px solid var(--light); */
    /* border-width: 1px 0px 1px 0px; */
    /* background: linear-gradient(0deg, var(--color) 0%, var(--light) 50%); */
}

#footer {
    padding-top: calc(var(--pad) * 2);
    padding-bottom: calc(var(--pad) * 28);
    background-color: var(--color);
    color: var(--light);
    border: 1px solid var(--light);
    border-width: 1px 0px 0px 0px;
}

/* ----------------------------------------------------------------------------------------- logo */
#logo {
    height: 4rem;
    position: absolute;
    transform: translateY(-25%);
}

.symbol {
    display: inline;
    /* float: right; */
    height: 1em;
    padding-left: 0em;
    /* position: absolute; */
    transform: translateY(15%);
}

section {
    padding-top: calc(var(--pad) * 2);
    padding-bottom: calc(var(--pad) * 2);
}

section+section {
    border: 1px solid var(--light);
    border-width: 1px 0px 0px 0px;
}

/* ----------------------------------------------------------------------------------------- sections */
.center {
    text-align: center;
}

.right {
    text-align: right;
}

sup {
    /* position: absolute; */
    line-height: 0em;
    vertical-align: super;
    font-size: 0.75em;
}

a {
    color: var(--dark);
    text-decoration: none;
}

a:hover {
    color: var(--light);
}

h1 {
    font-size: 2.8rem;
    line-height: 1.3em;
}

h2 {
    font-size: 1.8rem;
    line-height: 1.3em;
    text-transform: uppercase;
}

h3 {
    font-size: 1.3rem;
    line-height: 1.3em;
    text-transform: uppercase;
}

p+p,
h1+h1, h1+h2, h1+h3, h1+h4, h1+h5, h1+h6,
h2+h1, h2+h2, h2+h3, h2+h4, h2+h5, h2+h6,
h3+h1, h3+h2, h3+h3, h3+h4, h3+h5, h3+h6,
h4+h1, h4+h2, h4+h3, h4+h4, h4+h5, h4+h6,
h5+h1, h5+h2, h5+h3, h5+h4, h5+h5, h5+h6,
h6+h1, h6+h2, h6+h3, h6+h4, h6+h5, h6+h6,
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p,
p+h1, p+h2, p+h3, p+h4, p+h5, p+h6 {
    padding-top: var(--pad);
}

.picto {
    padding: 0.2em 0.2em 0.05em 0.2em;
    height: 1em;
    display: inline;
    stroke: #e2e1dc !important;
    margin-left: 0.5em;
}
.appMore .arrowUp {
    display: none;
}
.appMore.open .arrowUp {
    display: inline;
}
.appMore .arrowDown {
    display: inline;
}
.appMore.open .arrowDown {
    display: none;
}
.appMoreButton {
cursor: pointer;

}
.appMoreToResize {
    overflow-y: hidden;
    transition: height 0.25s;
}

.map {
    margin-top: calc(var(--pad) * 7.6);
    padding-top: 100%;
    position: sticky !important;
    top: calc(var(--pad) * 6);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}

.bgg {
    background-color: var(--light);
    padding: 1rem;
    color: var(--color);
}

.format-trick-container {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
    cursor: grab;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}

.format-trick {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}

.slider {
    height: 100%;
}

.img-wrapper {
    height: 100%;
}

.img-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dots {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0.5em 0px;
    /* background-color: blue; */
    text-align: center;
}

.dot {
    display: inline-block;
    margin: 0px 0.25em;
    width: 0.5em;
    height: 0.5em;
    background-color: var(--color);
    border: 2px solid var(--color);
    border-radius: 2em;
    cursor: pointer;
}

.dot.dot--active {
    background-color: var(--color);
    border: 2px solid var(--light);
}

.img-wrapper img {
    position: absolute;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transition: transform 0.5s;
    top: 0px;
}

.selected .img-wrapper img {
    transform: scale(1.1);
    transition: transform 0.5s;
}

.data {
    border: 1px solid var(--light);
    border-width: 0px 0px 0px 1px;
    font-size: 0.9rem;
    line-height: 1.3em;
    text-transform: uppercase;
    /* background-color: blue; */
}

.data>div:nth-of-type(2n+1) {
    padding-left: var(--pad);
}

.leaflet-marker-icon {
    width: 1.3rem !important;
    height: 1.3rem !important;
    margin-left: -0.65rem !important;
    margin-top: -0.65rem !important;
}

.object {
    position: relative;
}

.anchor {
    content: "";
    position: absolute;
    top: calc(var(--pad) * -6);
}

.selected {
    /* background-color: white; */
}

/* ------------------------------------------------------------------------------------- form */
input, textarea, button {
    font-size: 1.3rem;
    line-height: 1.3em;
    padding: 0.25em 0.5em;
    font-family: "tosustain";
    border: 0px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
    color: var(--contrast);
    /* box-sizing: border-box; */
}

button:hover, input[type=button]:hover, input[type=submit]:hover {
    cursor: pointer;
}

textarea, input {
    width: 100%;
}

textarea {
    resize: none;
}

form #email {
    display: none;
}

form #wrap_email {
    display: none;
}

form li {
    padding-bottom: 1em;
}

input:focus, textarea:focus, button:focus {
    outline: 4px solid var(--contrast);
}

form .error {
    /* content: "Veuillez renseigner le champs"; */
    border: 4px solid var(--error);
}

@media screen and (orientation: portrait) {
    html {
        font-size: 2.7vw;
    }

    .gridPad {
        padding-left: calc(var(--pad) * 2);
        padding-right: calc(var(--pad) * 2);
    }
}