@charset "utf-8";
/* CSS Document */

/*--RESET--*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, conclusion, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
conclusion, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    animation: fadingbody 1.5s ease-in-out 0s forwards;
}
@keyframes fadingbody {
		0%   { opacity:0; }
		100% { opacity:1; }
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*--FIN RESET--*/

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Montserrat, Arial, "sans-serif";
    font-weight:normal;
    color: #333;
    line-height: 2em;
    background:#f1ece8;

    @media (min-width: 1000px) {
        border: solid 20px white;
    }
}

h1, h2, h3, h4 {
    font-family: "Libre Baskerville", Times New Roman, serif;
    font-weight:400;
    line-height: 1.25;
    margin: 0;
    padding:0;
    color: #000;
    text-transform: none;
}
h1 {
    font-size: 4em;
    margin: 0 0 20px 0;
    word-break: inherit;

    > strong {
        font-weight: normal;
        font-style: italic;
    }
}
h2 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1px;

    &:after {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background: #333;
        margin: 20px 0 30px 0;
    }

    &.center:after {
        margin: 20px auto 30px auto;
    }
}
.secteur {
    > h2 {
        font-family: "Montserrat", Arial, "sans-serif";
        text-align: center;
        font-size: .8em;
        letter-spacing: 2px;

        &:after {
            width:20px;
            margin: 20px auto 0 auto;
        }
    }
}
h3 {
    font-size: 1.5em;
    line-height: 1.5;
    margin-bottom: 10px;
}
h4 {
    font-family: "Montserrat", Arial, "sans-serif";
    line-height: 1.5em;
}
b, strong {
    font-weight: bold;
    color: #000;
}
em {
    font-style: italic;
}
/* a, a:active, a:link, a:visited et a:hover restent des règles globales à
   plat : le sélecteur de base est une liste (a, a:active, a:link, a:visited),
   et imbriquer &:hover dessous changerait sa spécificité (:is() prend la
   spécificité du membre le plus fort de la liste) — donc pas de gain de
   nesting sûr ici, on garde la structure d'origine. */
a, a:active, a:link, a:visited {
    color: inherit;
    background: none;
    text-decoration: none;
    padding: 2px;
    -moz-box-shadow: 0 -4px 0 inset #d8c018;
    -webkit-box-shadow: 0 -4px 0 inset #d8c018;
    box-shadow: 0 -4px 0 inset #d8c018;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    transition: all .5s;
    transition-property: box-shadow;
}
a:hover {
    color: #000;
    -moz-box-shadow: 0 -26px 0 inset #d8c018;
    -webkit-box-shadow: 0 -26px 0 inset #d8c018;
    box-shadow: 0 -26px 0 inset #d8c018;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transition-property: box-shadow;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

/* a.lien est qualifié par une classe : on peut nester sous "a" (sélecteur
   simple), ses variantes &.lien/&.lien:active/... et leurs descendants. */
a {
    &.lien,
    &.lien:active,
    &.lien:link,
    &.lien:visited {
        float: none;
        display:block;
        width:fit-content;
        max-width:90%;
        margin:40px auto 20px auto;
        padding:20px 40px;
        text-align: center;
        text-decoration: none;
        font-weight:bold;
        color: #222;
        line-height: 1.2;
        background: #e5ca19;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        border-radius: 200px;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        -moz-transition-property: background, color, box-shadow;
        -webkit-transition-property: background, color, box-shadow;
        transition-property: background, color, box-shadow;
    }
    &.fondblanc,
    &.fondblanc:active,
    &.fondblanc:link,
    &.fondblanc:visited {
        -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #fff, 10px 10px 0 0 #d8c018;
        -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #fff, 10px 10px 0 0 #d8c018;
        box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #fff, 10px 10px 0 0 #d8c018;
    }
    &.fondbeige,
    &.fondbeige:active,
    &.fondbeige:link,
    &.fondbeige:visited {
        -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #f1ece8, 10px 10px 0 0 #d8c018;
        -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #f1ece8, 10px 10px 0 0 #d8c018;
        box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #f1ece8, 10px 10px 0 0 #d8c018;
    }
    &.lien.fondblanc:hover,
    &.lien.fondbeige:hover {
        color: #fff;
        background:#cc9900;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    &.lien.arrright:after,
    &.lien.arrright:active:after,
    &.lien.arrright:link:after,
    &.lien.arrright:visited:after {
        content: "\2192";
        display: inline-block;
        color:inherit;
        margin-left: 15px;
    }
    &.lien.arrbottom:after,
    &.lien.arrbottom:active:after,
    &.lien.arrbottom:link:after,
    &.lien.arrbottom:visited:after {
        content: "\2193";
        display: inline-block;
        color:inherit;
        margin-left: 15px;
    }
    &.lien:hover:after,
    &.lien.arrbottom:hover:after {
        color:white;
        margin-left: 10px;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        -moz-transition-property: margin;
        -webkit-transition-property: margin;
        transition-property: margin;
    }
    &.lien.arrleft:before,
    &.lien.arrleft:active:before,
    &.lien.arrleft:link:before,
    &.lien.arrleft:visited:before {
        content: "\2190";
        display: inline-block;
        color:inherit;
        margin-right: 15px;
    }
    &.lien.arrleft:hover:before {
        color:white;
        margin-right: 10px;
    }
}

.RS {
	display: inline-block;
	margin:20px auto;

    > a, > a:active, > a:link, > a:visited {
        background: transparent;
        text-align: center;
        padding: 10px 8px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        transition: all .5s;
        transition-property: background;
    }
    > a:hover {
        background: #d8c018;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .icon {
        width:18px;
        height:18px;
    }
}

p {
    margin: 0 0 10px 0;
    display: block;
}
blockquote {
    max-width: 70%;
    margin: 0 auto;
    padding:0;
    font-family: "Libre Baskerville", "Made Dillan", "Cervo Neue", Arial, "sans-serif";
    font-weight:400;
    font-size: 22px;
    color: #000;
    text-transform: none;
    text-align: center;
    line-height: 1.5em;
    position:relative;

    &:before {
        content: "";
        width: 15px;
        height: 15px;
        position: absolute;
        top: -20px;
        left: -20px;
        border-top: solid 2px #d8c018;
        border-left: solid 2px #d8c018;
        animation: blinker 8s step-start infinite;
    }
    &:after {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: -20px;
        right: -20px;
        border-bottom: solid 2px #d8c018;
        border-right: solid 2px #d8c018;
        animation: blinker 8s step-start infinite;
    }
    &.large {
        max-width:80%;
    }
    &.full {
        max-width:none;
    }
    &.right {
        float: right;
    }
    &.left {
        float: left;
    }

    @media (min-width: 800px) {
        max-width: 35%;
    }
    @media (min-width: 1200px) {
        font-size: 28px;
    }
}
@keyframes blinker {
    10% {
        opacity: 1;
    }
    12% {
        opacity: 0;
    }
    13% {
        opacity: 1;
    }
    16% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
}

ul {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}
li {
    margin: 0 0 10px 30px;
    padding: 0;

    &:before {
      content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
      color: #d8c018; /* Change the color */
      font-weight: bold; /* If you want it to be bold */
      display: inline-block; /* Needed to add space between the bullet and the text */
      width: 1em; /* Also needed for space (tweak if needed) */
      margin-left: -1em; /* Also needed for space (tweak if needed) */
    }
}
img {
    touch-action: manipulation;
    width:100%;
}
/* ---------- HEADER ---------- */
.header {
    width: 100%;
    max-width: 90%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 40px 0 0 0;
    margin: 0 auto 40px auto;
	border-bottom: solid 1px #d9cdc6;

    > h1 {
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin: 20px 0;
        display: inline-block;
        z-index: 10;
        background: none;
        padding: 0;
        color: #222;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -moz-text-shadow: none;
        -webkit-text-shadow: none;
        text-shadow: none;
        transition: all .5s;
        transition-property: text-shadow;

        > a,
        > a:active,
        > a:link,
        > a:visited {
            font-size: 18px;
            font-weight: 400;
            text-align: center;
            margin: 20px 0;
            display: inline-block;
            z-index: 10;
            background: none;
            padding: 0;
            color: #222;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            -moz-text-shadow: none;
            -webkit-text-shadow: none;
            text-shadow: none;
            transition: all .5s;
            transition-property: text-shadow;
        }
        a:hover {
            -moz-text-shadow: 0 1px 1px rgba(241, 236, 232, 0.5), 3px 6px 0 #d8c018;
            -webkit-text-shadow: 0 1px 1px rgba(241, 236, 232, 0.5), 3px 6px 0 #d8c018;
            text-shadow: 0 1px 1px rgba(241, 236, 232, 0.5), 3px 6px 0 #d8c018;
            -moz-transition: all .25s;
            -webkit-transition: all .25s;
            transition: all .25s;
            -moz-transition-property: text-shadow;
            -webkit-transition-property: text-shadow;
            transition-property: text-shadow;
        }
        > strong,
        > a > strong {
            display: block;
            font-size: 32px;
        }
        > em,
        > a > em,
        > em > #voyage,
        > a > em > #voyage {
            display: block;
            margin-top: 5px;
        }
        > em > #voyage,
        > a > em > #voyage {
            @media (min-width: 500px) {
                display: inline;
            }
        }

        @media (min-width: 800px) {
            > strong,
            > a > strong {
                font-size: 24px;
            }
        }
    }

    @media (min-width: 800px) {
        flex-flow: row nowrap;
        align-items: center;

        > h1,
        > h1 > a,
        > h1 > a:active,
        > h1 > a:link,
        > h1 > a:visited {
            text-align:  left;
            margin: 0 0 10px 0;
        }
    }
}

.menu {
    display: inline-block;
    list-style-type: none;
    width: 100%;

    ul,
    li {
        display: flex;
        flex-flow: column wrap;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        list-style-image: none;
        padding: 0;
        margin:0;
        text-align: right;
    }
    li {
        border-top: solid 1px #d9cdc6;
        padding-top:10px;
        width:100%;
        position: relative;

        &:last-child {
            padding-bottom:10px;
        }
        &:before {
            display: none;
        }
        &:after {
            content: "\203A";
            opacity: .66;
            color: inherit;
            position: absolute;
            top: 0;
            right: 7px;
            transition: right .25s;
        }
        &:hover:after {
            opacity:1;
            right: 0;
            color: #d8c018;
        }
        &.active:after {
            display: none;
        }

        > a,
        > a:active,
        > a:link,
        > a:visited {
            margin: 0 5px;
            padding: 0;
            background: none;
            display: block;
            text-align: right;
            line-height: 1em;
            color: #222;
            font-size: .9em;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 1px;
            -moz-text-shadow: none;
            -webkit-text-shadow: none;
            text-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            -moz-transition: all .5s;
            -webkit-transition: all .5s;
            transition: all .5s;
            -moz-transition-property: color, text-shadow;
            -webkit-transition-property: color, text-shadow;
            transition-property: color, text-shadow;
        }
        > a:hover {
            color: #d8c018;
            -moz-text-shadow: 0 1px 1px #fff;
            -webkit-text-shadow: 0 1px 1px #fff;
            text-shadow: 0 1px 1px #fff;
            -moz-transition: all .25s;
            -webkit-transition: all .25s;
            transition: all .25s;
        }
        &.active > a,
        &.active > a:active,
        &.active > a:link,
        &.active > a:visited {
            -moz-text-shadow: 0 1px 1px #fff;
            -webkit-text-shadow: 0 1px 1px #fff;
            text-shadow: 0 1px 1px #fff;
            -moz-box-shadow: 0 -8px 0 inset hsl(53,80%,47%,.5);
            -webkit-box-shadow: 0 -8px 0 inset hsl(53,80%,47%,.5);
            box-shadow: 0 -8px 0 inset hsl(53,80%,47%,.5);
            padding: 0 6px;
        }
    }

    &.small {
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 0;

        > ul {
            display: flex;
            flex-flow: row wrap;
            gap: 0;
            justify-content: center;
            align-items: center;

            @media (min-width: 1100px) {
                justify-content: flex-end;
            }
        }
        li {
            border-top: none;
            padding:0;
            width:auto;

            &:first-child {
                margin-left:0;
            }

            @media (min-width: 1100px) {
                margin-left: 16px;

                &:before {
                    content: "";
                    display: inline-block;
                    width: 1px;
                    height: 7px;
                    background-color: #d9cdc6;
                    position: relative;
                    left: 0;
                    bottom: 0;
                    margin: 0 16px 0 0;
                }
                &:first-child:before,
                &:nth-child(2):before {
                    display: none;
                }
            }
        }
        li,
        li.active {
            display: inline-block;
            letter-spacing: 0;
            text-align: inherit;
            font-family: "Montserrat", "Cervo Neue", Arial, "sans-serif";
            opacity: .8;
            font-size: 10px;
            line-height: 1.5em;
            padding: 0;
            margin: 0 0 0 16px;
            text-transform: none;
        }
        li > a,
        li > a:active,
        li > a:link,
        li > a:visited,
        li.active > a,
        li.active > a:active,
        li.active > a:link,
        li.active > a:visited {
            display: inline-block;
            letter-spacing: 0;
            text-align: inherit;
            font-family: "Montserrat", "Cervo Neue", Arial, "sans-serif";
            opacity: .8;
            font-size: 10px;
            line-height: 1.5em;
            padding: 0;
            margin: 0;
            text-transform: none;
        }
    }

    > ul > li > ul.children {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        line-height: 1.4em;
        left: 0;
        width: 100%;
        background: rgba(216,192,24,.96);
        border-top: solid 1px #fff;
        -moz-border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
        text-align: center;
        -moz-box-shadow: 0 2px 4px rgba(0,0,0,.15);
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.15);
        box-shadow: 0 2px 4px rgba(0,0,0,.15);
        -webkit-transition: opacity .75s ease,visibility 0s ease .75s;
        -o-transition: opacity .75s ease,visibility 0s ease .75s;
        transition: opacity .75s ease,visibility 0s ease .75s;
    }
    > ul > li:hover > ul.children {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        color: #fff;
        -webkit-transition: opacity .25s ease,visibility 0s ease;
        -o-transition: opacity .25s ease,visibility 0s ease;
        transition: opacity .25s ease,visibility 0s ease;
    }
    ul.children > li {
        border-bottom: solid 1px rgba(255,255,255,.25);

        &:hover {
            background: #333;
        }
    }
    ul.children li > a,
    ul.children li > a:active,
    ul.children li > a:link,
    ul.children li > a:visited {
        text-align: center;
        font-size: 18px;
        text-transform: none;
        padding: 14px 6px;
        letter-spacing: 0.025em;
    }
    ul.children li:hover > a,
    ul.children li:hover > a:active,
    ul.children li:hover > a:link,
    ul.children li:hover > a:visited {
        color:white;
        -moz-text-shadow: solid 1px #222;
        -webkit-text-shadow: solid 1px #222;
        text-shadow: solid 1px #222;
    }

    @media (min-width: 800px) {
        width:auto;

        ul {
            margin-bottom: 20px;
        }
        ul,
        li {
            align-items: flex-end;
        }
        li {
            border-top:none;
            padding-top:0;
            width:auto;
            margin-left: 20px;

            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                padding-bottom:0;
            }
            &:after {
                display: none;
            }
            > a,
            > a:active,
            > a:link,
            > a:visited {
                font-family: "Libre Baskerville", "Made Dillan", "Cervo Neue", Arial, "sans-serif";
                font-size: 18px;
                text-transform: none;
            }
        }
    }
    @media (min-width: 1100px) {
        ul,
        li {
            flex-flow: row nowrap;
            gap: 0;
            text-align: center;
            margin-bottom: 0;
        }
        li {
            display: inline-block;
            margin-left: 20px;
            position: relative;
        }
    }
}


.icon {
  width: 11px;
  height: 11px;
  display: inline-block;
  vertical-align: middle;
  color: #333;
  fill: currentColor;

  &.big {
    width:32px;
    height:32px;
  }
}

/* ---------- PILE PHOTOS (bandeau animé sous le header) ---------- */
/*
   100% CSS, sans JavaScript. Chaque <figure class="print print--pN"> se
   dimensionne selon le ratio propre de SA photo (width:auto/height:auto,
   borné par --print-max-w / --print-max-h) : portrait reste portrait,
   paysage reste paysage. Chaque tirage a une position/rotation de repos
   FIXE (non animée) : seule son OPACITÉ change, d'un coup, sans fondu ni
   rotation à l'arrivée ni au départ (pas de transition animée du tout).
   - p1 et p2 forment la pile de départ : toujours affichées, immobiles.
   - p3 à p10 apparaissent l'une après l'autre (instantanément, à leur
     position finale), restent affichées jusqu'à la fin du cycle, puis
     DISPARAISSENT TOUTES D'UN COUP pour revenir à la pile de départ
     (p1+p2) au moment où le cycle boucle, et ça recommence.
   Rythme strictement régulier : le cycle est divisé en 9 tranches ÉGALES
   (pile de départ + une par photo ajoutée) — voir le commentaire au-dessus
   des @keyframes pour le détail des pourcentages.
   Pour ajuster la vitesse globale : changer --cycle ci-dessous.
   Pour ajouter un 11e tirage : dupliquer un bloc "&.print--pN" (nouveau
   z-index, nouvelle rotation de repos) + son @keyframes pile-N, et recaler
   TOUS les pourcentages d'arrivée sur 10 tranches égales au lieu de 9
   (voir le commentaire au-dessus des @keyframes).
   Important : en CSS natif, "&--p1" n'est PAS interprété comme ".print--p1"
   (contrairement à Sass/Less) — il faut écrire "&.print--p1" pour former le
   sélecteur composé ".print.print--p1".
*/
.pilephotos {
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    margin: 0 auto 40px auto;
    --cycle: 7s;
    --print-max-w: 240px;
    --print-max-h: 300px;

    .stack {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        /* pas de largeur/hauteur : c'est un simple point d'ancrage */
    }

    .print {
        position: absolute;
        top: 0;
        left: 0;
        width: fit-content;
        border-radius: 2px;
        transform: translate(-50%, -50%);
        animation-duration: var(--cycle);
        animation-iteration-count: infinite;
        animation-timing-function: linear;

        img {
            display: block;
            width: auto;
            height: auto;
            max-width: var(--print-max-w);
            max-height: var(--print-max-h);
        }

        /* p1 et p2 : pile de départ, toujours affichée, sans animation */
        &.print--p1  { z-index: 1;  opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) translate(-8%, -5%); }
        &.print--p2  { z-index: 2;  opacity: 1; transform: translate(-50%, -50%) rotate(6deg) translate(9%, 3%); }
        /* p3 à p10 : position finale fixe dès le départ, seule l'opacité
           est animée (apparition/disparition instantanées, sans fondu) */
        &.print--p3  { z-index: 3;  opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) translate(-4%, 7%);   animation-name: pile-3; }
        &.print--p4  { z-index: 4;  opacity: 1; transform: translate(-50%, -50%) rotate(8deg) translate(5%, -7%);    animation-name: pile-4; }
        &.print--p5  { z-index: 5;  opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) translate(-3%, 9%);   animation-name: pile-5; }
        &.print--p6  { z-index: 6;  opacity: 1; transform: translate(-50%, -50%) rotate(4deg) translate(-10%, 8%);   animation-name: pile-6; }
        &.print--p7  { z-index: 7;  opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) translate(11%, -4%);  animation-name: pile-7; }
        &.print--p8  { z-index: 8;  opacity: 1; transform: translate(-50%, -50%) rotate(3deg) translate(-3%, -9%);   animation-name: pile-8; }
        &.print--p9  { z-index: 9;  opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) translate(8%, 9%);    animation-name: pile-9; }
        &.print--p10 { z-index: 10; opacity: 1; transform: translate(-50%, -50%) rotate(-1.5deg) translate(0%, 0%);  animation-name: pile-10; }

        @media (prefers-reduced-motion: reduce) {
            animation: none; /* toutes les photos restent affichées, figées (opacity:1 de base) */
        }
    }

    @media (min-width: 700px) {
        min-height: 70vh;

        .print img {
            --print-max-w: 70vh;
            --print-max-h: 70vh;
        }
    }
}

/* p3 à p10 : chaque tirage est invisible, puis passe à opacity:1 d'un coup
   (sans transition, grâce à un écart de seulement 0.05% entre les deux
   paliers) à son tour d'arrivée, puis reste affiché jusqu'à la fin du
   cycle (100%). La disparition groupée de p3-p10 n'est PAS un palier
   explicite : elle se produit automatiquement, d'un coup, exactement au
   point de bouclage de l'animation (100% -> 0% de l'itération suivante),
   sans transition non plus — CSS ne fait jamais d'interpolation entre la
   fin d'une boucle et le début de la suivante.
   Rythme strictement régulier : le cycle est découpé en 9 tranches ÉGALES
   de 100/9 % chacune (≈ 11,111 %) — la pile de départ (p1+p2 seules) tient
   une tranche, puis chaque photo p3 à p10 arrive au début d'une nouvelle
   tranche et tient jusqu'à la fin du cycle. Toutes les tranches (pile de
   départ comprise) ont donc exactement la même durée. */
@keyframes pile-3 {
    0%      { opacity: 0; }
    11.061% { opacity: 0; }
    11.111% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-4 {
    0%      { opacity: 0; }
    22.172% { opacity: 0; }
    22.222% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-5 {
    0%      { opacity: 0; }
    33.283% { opacity: 0; }
    33.333% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-6 {
    0%      { opacity: 0; }
    44.394% { opacity: 0; }
    44.444% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-7 {
    0%      { opacity: 0; }
    55.506% { opacity: 0; }
    55.556% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-8 {
    0%      { opacity: 0; }
    66.617% { opacity: 0; }
    66.667% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-9 {
    0%      { opacity: 0; }
    77.728% { opacity: 0; }
    77.778% { opacity: 1; }
    100%    { opacity: 1; }
}
@keyframes pile-10 {
    0%      { opacity: 0; }
    88.839% { opacity: 0; }
    88.889% { opacity: 1; }
    100%    { opacity: 1; }
}

/* ---------- HOME ---------- */
body.home {
    overflow: inherit;

    @media (min-width:700px) {
        width: 100%;
        overflow: hidden;
    }
}
.home-wrapper {
    width:100%;
    padding: 40px 0 0 0;

    > h2 {
        font-size: 32px;
        color: #fff;
        padding: 0 0 0 20px;
        display: block;
        position: absolute;
        top: 295px;
        left: 0;
        z-index: 10;
        text-align: left;

        > strong {
            color: #f1ece8;
            -webkit-text-stroke: 2px #d8c018;
            text-stroke: 2px #d8c018;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
        }
        &:after {
            display: none;
        }

        @media (min-width:450px) {
            font-size: 44px;
            top: 315px;
        }
        @media (min-width:600px) {
            font-size: 62px;
            top: 335px;
            padding-left: 30px;
        }
        @media (min-width:700px) {
            color: #000;
            top: 270px;
            left: 100px;
            padding: 0 30px;

            > strong {
                -webkit-text-stroke: 1px #d8c018;
                text-stroke: 1px #d8c018;
            }
        }
        @media (min-width:950px) {
            font-size: 90px;
            top: 240px;
        }
        @media (min-width:1520px) {
            top: 300px;
            left: 100px;
            /* The typing effect */
            width: fit-content;
            overflow: hidden; /* Ensures the content is not revealed until the animation */
            min-height: 95px;
            padding-right: 10px;
            border-right: 3px solid #d8c018; /* The typwriter cursor */
            white-space: nowrap; /* Keeps the content on a single line */
            margin: 0 auto 20px auto; /* Gives that scrolling effect as the typing happens */
            animation: typing 2.5s steps(40, end), blink-caret .75s step-end infinite;
        }
    }
    > .couv {
        z-index: 1;
        width: 100%;

        @media (min-width:700px) {
            z-index: 1;
            position: relative;
            left: 437px;
            top: auto;
            width: auto;
        }
    }
    > p {
        display: block;
        width: 100%;
        margin: 40px 0 80px 0;
        padding: 0 40px;
        font-family: "Montserrat", "Cervo Neue", Arial, "sans-serif";
        font-size: 16px;
        font-weight:600;
        line-height: 2em;

        @media (min-width:700px) {
            display: block;
            position: absolute;
            top: 440px;
            z-index: 2;
            width: 420px;
            margin: 0;
            padding: 0 0 0 40px;
        }
    }

    @media (min-width:700px) {
        padding: 40px 100px 0 100px;
    }
}
@media (min-width:1520px) {
    /* The typing effect */
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
    /* The typewriter cursor effect */
    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: #d8c018; }
    }
}

/*---------- PROJETS ----------*/
.wrapper {
    width:80%;
    overflow-x:hidden;
    margin:0 auto;

    @media (min-width: 1100px) {
        width:90%;
    }
}
h1 {
    font-size: 2.1em;
    overflow-wrap:break-word;

    @media (min-width: 500px) {
        font-size: 3.1em;
    }
    @media (min-width: 1100px) {
        font-size: 4em;
    }
}
@media (min-width: 1100px) {
    .anim {
        width:100%;
        display:flex;
        flex-flow: row nowrap;
        align-items: stretch;
        align-content: space-between;

        h1 {
            overflow-wrap:normal;
            /* The typing effect */
            width: fit-content;
            overflow: hidden; /* Ensures the content is not revealed until the animation */
            min-height: 72px;
            padding-right: 10px;
            white-space: nowrap;  /* Keeps the content on a single line */
            -webkit-animation: typing 2.5s ease-out;
            animation: typing 2.5s ease-out;
        }
        h2 {
            font-size: 1em;
            text-transform: uppercase;
            letter-spacing: 1px;
            overflow-wrap:normal;
            /* The typing effect */
            width: fit-content;
            overflow: hidden; /* Ensures the content is not revealed until the animation */
            min-height: 18px;
            padding-right: 10px;
            white-space: nowrap;  /* Keeps the content on a single line */
            opacity:0;
            -webkit-animation: typing 2.5s ease-out 2.5s forwards;
            animation: typing 2.5s ease-out 2.5s forwards;
        }
    }
    /* The typing effect */
    @-webkit-keyframes typing {
        from { width: 0; opacity:0; }
        to { width: 25%; opacity:1; }
        to { width: 100%; }
    }
    @keyframes typing {
        from { width: 0; opacity:0; }
        to { width: 25%; opacity:1; }
        to { width: 100%; }
    }
}

.txt {
    display:block;
	width: 80%;
    margin:40px auto;

    &.secteur {
        display:block;
        width:100%;
        margin:100px auto 20px auto;

        @media (min-width: 1000px) {
            margin:40px auto 0 auto;
        }
    }
    &.centre {
        text-align: center;
    }

    @media (min-width: 1000px) {
        width: 66%;
    }
}
.intro {
    margin-top: 80px;
}
.deuxcol {
	display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;

    > h3,
    > p {
        width:100%;
        flex-grow: 1;
    }

    @media (min-width: 1000px) {
        flex-flow: row nowrap;
        gap: 30px;

        > h3:nth-child(2),
        > p:nth-child(2) {
            margin-top: 20px;
        }
    }
}
.centrvertic {
    align-items: center !important;
}
.contacter {
    margin: 20px auto 0 auto;
    padding-top: 15px;
    font-size: .95em;
    font-weight: 500;
    line-height: 1.7em;
    max-width: 90%;
    text-align: center;
    border-top:solid 1px #d9cdc6;

    > em {
        font-style: normal;
        display: block;
    }
    a,
    a:active,
    a:link,
    a:visited {
        font-weight: bold;
    }

    @media (min-width: 1000px) {
        max-width: 80%;
    }
}

.wide,
.xwide,
.full {
	display:block;
	width:100%;
	margin:0 auto;

    @media (min-width: 1000px) {
        width:50%;
    }
}
.xwide {
    @media (min-width: 1000px) {
        width:66%;
    }
}
.full {
    @media (min-width: 1000px) {
        width:96%;
    }
}
.overlayleft,
.overlayright {
    margin: 3px auto;

    @media (min-width: 1000px) {
        position: relative;
        margin:0;
    }
}
.overlayleft {
    @media (min-width: 1000px) {
        right: -10px;
    }
}
.overlayright {
    @media (min-width: 1000px) {
        top: 25px;
        left: -10px;
    }
}
.couv.overlayleft {
    z-index:10;
}
.rotation {
    transform: rotate(-1deg);
}
.scotch {
    position: relative;

    &:after {
        content: "";
        display: block;
        position: absolute;
        width: 60px;
        height: 25px;
        top:-10px;
        left: calc(50% - 30px);
        margin:0 auto;
        background-color: #d8c018;
        opacity: .5;
        transform: rotate(-5deg);
        box-shadow: 0 1px 2px rgba(0,0,0,.25);
    }
    > .wide,
    > .xwide,
    > .full {
        width:92%;
    }
    > .wide {
        @media (min-width: 1000px) {
            width:50%;
        }
    }
    > .xwide {
        @media (min-width: 1000px) {
            width:66%;
        }
    }
    > .full {
        @media (min-width: 1000px) {
            width:96%;
        }
    }
}
.paysage {
    width:100%;
    max-width:80%;
    height:600px;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
}
.couvtarifs {
    display: block;
    background-image: url(../img/photographe-tourisme-voyage-outdoor/photographe-tourisme-voyage-outdoor-reportage-portrait-kalao-studio-54.jpg);
}
.diptyque {
    width:100%;
    max-width:90%;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: space-between;
}
.triptyque {
    width:100%;
    max-width:90%;
    margin: 0 auto;
    display: flex;
    flex-flow: column wrap;
	gap:20px;
    align-items: center;
    align-content: space-between;
	@media (min-width: 1200px) {
		flex-flow: row nowrap;
	}
}
.couv {
    background-color: black;
    position: relative;
    overflow:hidden;

    > .lienrubrique {
        > img {
            width:100%;
            opacity: .6;
            transform: scale(1.08);
            transition: transform 1s;
        }
    }
    &:hover > .lienrubrique > img {
        transform: scale(1.16);
    }
}
/* .rubrique/.lienrubrique ne sont pas imbriquées sous .couv dans le fichier
   d'origine (sélecteurs indépendants, avec un mélange de combinateurs directs
   ">" et descendants " ") : on conserve cette structure telle quelle pour ne
   pas changer les éléments ciblés. */
.couv .lienrubrique {
    box-shadow: none;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border:0;
}
.lienrubrique .rubrique {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    color: #ccc;
    font-family: "Libre Baskerville", "Made Dillan", "Cervo Neue", Arial, "sans-serif";
    text-transform: uppercase;
    font-size:12px;
    line-height:1.25;
    letter-spacing: 3px;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    transition: all .5s;
    transition-property: color, letter-spacing;

    @media (min-width: 1000px) {
        font-size:18px;
    }
}
.rubrique {
    > em {
        display: block;
        color: white;
        font-size:18px;
        font-style: italic;
        letter-spacing: 1px;
        margin-top: 5px;
        transition: all .5s;
        transition-property: color, letter-spacing;

        @media (min-width: 500px) {
            font-size:24px;
        }
        @media (min-width: 1000px) {
            font-size:32px;
            margin-top:0;
        }
    }
    &:after {
        content: "→";
        display: inline-block;
        color: inherit;
        opacity: .5;
        position: absolute;
        top: 35%;
        right: -30px;
        transition-duration: .5s;
        transition-property: right, opacity;
    }
}
.couv:hover > .lienrubrique > .rubrique,
.couv:hover > .lienrubrique > .rubrique > em {
    color:#e5ca19;
    letter-spacing: 5px;
}
.couv:hover > .lienrubrique > .rubrique:after {
    right:-40px;
    opacity:1;
}

.imgscroll {
    display: block;
    width:100%;
    max-width:500px;
    height:400px;
    position: relative;

    > .blog,
    > .livre {
        display: block;
        width: 100%;
        height: 100%;
        background: url(../img/livre-coulisses-photo-30-photos-decryptees-clement-racineux-tonton-photo-couv-3D.png) no-repeat;
        background-size: contain;
        z-index: 0;
        position: absolute;
        top: 0;
        left: 0;
        background-position: center-top;
        background-position-x: 50%;
        background-position-y: 0%;
    }
    > .blog {
        background: url(../img/apprendre-photo-blog-tonton-photo.jpg) no-repeat;
        -webkit-background-size:cover;
        background-size: cover;
        -webkit-animation: animatedBackground 20s 1;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
}
@-webkit-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 0 100%; }
		}

/*---------- ICONOGRAPHIE ----------*/
.icono {
    width:90%;
    padding: 0;
    margin: 0 auto;
    display:block;

    > a {
        padding: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
    }
    /* redondant avec ">picture,>img,>a,>picture>a>img,>a>img{width:100%}"
       ci-dessous (même valeur), conservé pour coller à l'origine */
    a > img {
        @media (min-width: 1000px) {
            width: 100%;
        }
    }
    > picture,
    > img,
    > a,
    > picture > a > img,
    > a > img {
        width: 100%;
        display: block;
        margin: 2px auto;
        position: relative;
    }
    > blockquote {
        width: 100%;
        max-width: 80%;
        flex-grow:1;
        margin: 120px auto;
        text-align: left;

        /* même condition (min-width:1000px) déclarée deux fois dans l'origine
           avec 40% puis 35% : la seconde gagne (même spécificité, ordre
           source) — on ne garde que la valeur finale, 35%, ce qui reproduit
           exactement le même rendu. */
        @media (min-width: 1000px) {
            max-width: 35%;
            margin: 0 auto;
        }
    }

    .petite,
    a .petite {
        @media (min-width: 1000px) {
            max-width: 45%;
        }
    }
    .tiers,
    a .tiers {
        @media (min-width: 1000px) {
            max-width: 30%;
            display: block;
        }
    }
    .quart,
    a .quart {
        @media (min-width: 1000px) {
            max-width: 22%;
        }
    }
    .remontegauche,
    a .remontegauche {
        @media (min-width: 1000px) {
            margin: 20px auto 20px 40px;
            position: relative;
            top: -70px;
        }
    }
    .remontedroite,
    a .remontedroite {
        @media (min-width: 1000px) {
            margin: 20px 40px 20px auto;
            position: relative;
            top: -100px;
        }
    }
    .remontecentre,
    a .remontecentre {
        @media (min-width: 1000px) {
            margin: 20px auto 20px auto;
            position: relative;
            top: -80px;
        }
    }
    img.petite .remontegauche,
    a img.petite .remontegauche {
        @media (min-width: 1000px) {
            top: -100px;
        }
    }
    img.petite .remontedroite,
    a img.petite .remontedroite {
        @media (min-width: 1000px) {
            top: -240px;
        }
    }
    img.petite .remontecentre,
    a img.petite .remontecentre {
        @media (min-width: 1000px) {
            top: -120px;
        }
    }

    @media (min-width: 1000px) {
        width:90%;
        padding: 25px 0;
        margin: 0 auto;
        display:flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: space-between;

        > picture,
        > img,
        > a {
            width: 100%;
            max-width: 37%;
            margin: 40px auto;
            flex-grow:1;
            display: inline-flex;
        }
    }
}
.ombredecalee {
    -moz-box-shadow: 3px 5px 10px rgba(0,0,0,.25);
    -webkit-box-shadow: 3px 5px 10px rgba(0,0,0,.25);
    box-shadow: 3px 5px 10px rgba(0,0,0,.25);
}

.halfheight {
	width: 96%;
    height: 800px;
	margin: 0 auto;
    overflow: hidden;
    position: relative;

    > picture {
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}
.decalagedroite {
    @media (min-width: 1000px) {
        margin:0 5% 0 auto;
    }
}
.decalagegauche {
    @media (min-width: 1000px) {
        margin:0 auto 0 5%;
    }
}
.bordurevide {
    @media (min-width: 1000px) {
        -moz-box-shadow: 18px 18px 0 -1px #f1ece8, 18px 18px 0 0 #d8c018;
        -webkit-box-shadow: 18px 18px 0 -1px #f1ece8, 18px 18px 0 0 #d8c018;
        box-shadow: 18px 18px 0 -1px #f1ece8, 18px 18px 0 0 #d8c018;
    }
}
.bordurevide-ombre {
    @media (min-width: 1000px) {
        -moz-box-shadow: 1px 3px 5px rgba(0,0,0,.2), 18px 18px 0 -1px #f1ece8, 18px 18px 0 0 #d8c018;
        -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,.2), 18px 18px 0 -1px #f1ece8, 18px 18px 0 0 #d8c018;
        box-shadow: 1px 3px 5px rgba(0,0,0,.2), 18px 18px 0 -1px #f1ece8, 18px 18px 0 0 #d8c018;
    }
}
.bordurepleine {
    @media (min-width: 1000px) {
        -moz-box-shadow: -14px 14px 0 0 #d9cdc6;
        -webkit-box-shadow: -14px 14px 0 0 #d9cdc6;
        box-shadow: -14px 14px 0 0 #d9cdc6;
    }
}
.bordurepleine-ombre {
    @media (min-width: 1000px) {
        -moz-box-shadow: 1px 3px 5px rgba(0,0,0,.2), -14px 14px 0 0 #d9cdc6;
        -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,.2), -14px 14px 0 0 #d9cdc6;
        box-shadow: 1px 3px 5px rgba(0,0,0,.2), -14px 14px 0 0 #d9cdc6;
    }
}
.ombre {
    @media (min-width: 1000px) {
        -moz-box-shadow: 0 3px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.3);
        box-shadow: 0 3px 10px rgba(0,0,0,.3);
    }
}

/*---------- FORMULAIRE CONTACT ----------*/
.descriptif-formulaire {
    display: block;
    margin: 0 auto;
    padding: 60px 0;

    > .contenu {
        padding: 20px 0 0 0;
        display:flex;
        flex-flow: column wrap;
        justify-content: space-between;
        gap:40px;
        align-items: center;

        > img {
            width:100%;
            max-width: 300px;
            -ms-border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
        }

        @media (min-width: 1000px) {
            flex-flow: row nowrap;
        }
    }

    @media (min-width: 1000px) {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    @media (min-width: 1200px) {
        width: 66%;
    }
}
.formulaire {
    width: 80%;
    display: block;
    margin: 0 auto 40px auto;
    padding: 0;
    position: relative;

    > .conception {
        width:auto;
        position: absolute;
        bottom: -40px;
        left:50%;
        transform:translate(-50%, -50%);
        max-width:none;
        margin:40px auto 0 auto;
        padding-bottom: 3px;
        border-bottom: solid 1px transparent;
        font-size:11px;
        color: #a69a92;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.25;
        -webkit-box-shadow:none;
        box-shadow:none;
        transition: all .5s;
        transition-property: color, border-bottom-color;

        &:hover {
            color:#bfa915;
            border-bottom-color: #bfa915;
        }
    }

    @media (min-width: 1200px) {
        width: 100%;
        max-width: 66vw;
        padding: 0;
    }
}
.champ {
    display:flex;
    flex-flow: column wrap;
    width:100%;
    justify-content: space-between;
    align-items: flex-end;
    /*gap: 20px;*/
    margin: 40px 0;
    /*border-bottom: solid 1px #d9cdc6;*/

    > label {
        position: relative;

        &:after {
            content: "";
            display: block;
            width: 1px;
            height: 18px;
            position: absolute;
            right: 0;
            top:8px;
            /*background-color: #d9cdc6;*/ /* The typwriter cursor */
            margin-left: 10px;
            /*animation: blink-cursor .75s step-end infinite;*/
        }
    }

    @media (min-width: 1000px) {
        flex-flow: row nowrap;
    }
}
.merci {
    display: block;
    text-align: center;
    margin:160px auto 0 auto;
    line-height: 1.3em;
    font-weight: bold;
    font-size:16px;
}
form {
    padding: 0 0 20px 0;
    margin: 0;

    .mel {
        display: none;
    }
}
dt,
dd {
    padding: 0;
    margin: 0;
}
.titre {
    margin: 60px auto 20px auto;
}
label {
    line-height: 1.3em;
    display: block;
    width: 100%;
    padding: 0 20px 10px 0;

    > em {
        display: block;
    }

    @media (min-width: 1000px) {
        width: 40%;
        border-bottom: solid 1px #d9cdc6;
    }
}
/* The typewriter cursor effect */
@keyframes blink-cursor {
     from, to { background-color: transparent; }
    50% { background-color: #d9cdc6; }
}
.nousconnaitre {
    margin-top:40px;

    > dt > label:after {
        display: none;
    }
}
.budgetclient {
    margin: 0 auto;
    text-align: center;

    > label,
    > select {
        display: block;
        text-align: center;
        margin: 0 auto;

        @media (min-width: 1000px) {
            display: inline;
            text-align: left;
        }
    }
    > label:after {
        display: none;
    }
    > select#field-budgetmin {
        margin-right:auto;

        @media (min-width: 1000px) {
            margin-right: 20px;
        }
    }
}

input,
textarea,
select,
button {
    font-family: Montserrat, "Cervo Neue", Arial, "sans-serif";
    font-size: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0;
    width: 100%;
    /*background:transparent;*/
    border:0;
    border-bottom: solid 1px #d9cdc6;
    transition: all .5s;
    transition-property: border-bottom;
    position: relative;
    background: url(blink10.gif) no-repeat center left transparent;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-bottom: solid 3px #d8c018;
    background: none;
    -moz-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
    transition-property: border-bottom;
}
input:selected,
input:visited,
textarea:selected,
textarea:visited,
select:selected,
select:visited {
    outline: none;
    border-bottom: solid 3px #d8c018;
    background: none;
    -moz-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
    transition-property: border-bottom;
}
button {
    width: 100%;
    display: block;
    background:#e5ca19;
    padding: 20px;
    margin: 40px auto 0 auto;
    border: none;
    cursor: pointer;
    font-family: Montserrat, "Cervo Neue", Arial, "sans-serif";
    font-size: 16px;
    font-weight: bold;
    color: inherit;
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #f1ece8, 10px 10px 0 0 #e5ca19;
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #f1ece8, 10px 10px 0 0 #e5ca19;
    box-shadow: 1px 2px 3px rgba(0,0,0,.2), 10px 10px 0 -1px #f1ece8, 10px 10px 0 0 #e5ca19;
    -ms-border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    border-radius: 200px;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all .5s;
    -moz-transition-property: background-color, box-shadow;
    -webkit-transition-property: background-color, box-shadow;
    transition-property: background-color, box-shadow;

    &:focus {
        outline:none;
    }
    &:after {
        content: "→";
        display: inline-block;
        position: relative;
        left: 10px;
        -moz-transition: left .5s;
        -webkit-transition: left .5s;
        transition: left .5s;
    }
    &:hover {
        background: #d8c018;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;

        &:after {
            left: 20px;
            -moz-transition: left .25s;
            -webkit-transition: left .25s;
            transition: left .25s;
        }
    }
}
input#budgetmin,
input#budgetmax {
    width: auto;
    min-width: 50%;
    text-align: center;

    @media (min-width: 700px) {
        min-width:inherit;
        max-width: 30%;
    }
}
input#budgetmin {
    margin-right: auto;

    @media (min-width: 700px) {
        margin-right: 20px;
    }
}

textarea {
    width: 100%;
    line-height: 1.5em;
    padding: 20px 0;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
}
textarea#message {
    /*min-height:200px;*/
}
select {
    display: inline;
    text-align: left;
    margin: 0 20px 0 0;
	color: #333;

    option {
        /*text-align: center;*/
    }
}
.etoile { /*asterisque de champ obligatoire*/
    display: inline;
    color: red;
    margin-left: 5px;
}


/*---------- RENVOI HAUT DE PAGE ----------*/
.backtotop {
    display:block;
    width:90%;
    text-align: center;
    padding:40px 0 20px 0;
    margin:0 auto;
    opacity: .7;
    transition: opacity .75s;

    &:hover {
        opacity:1;
        transition-duration: .25s;
    }
    > a {
        font-size:32px;
        -webkit-box-shadow:0 0 0 inset #d8c018;
        box-shadow:0 -2px 0 inset #d8c018;

        &:hover {
            -webkit-box-shadow:0 -36px 0 inset #d8c018;
            box-shadow:0 -12px 0 inset #d8c018;

            > .icon {
                transform: translateY(-10px);
                transition-duration: .25s;
            }
        }
        > .icon {
            width:18px;
            height:18px;
            transform: translateY(0px);
            transition: transform .75s;
        }
    }
}
/*---------- LIEN RETOUR ----------*/
.back {
    display:block;
    width:90%;
    text-align: center;
    padding:40px 0 20px 0;
    margin:0 auto;

    > a {
        font-size:14px;
        color: #999;
        padding:10px;
        background-color:transparent;
        box-shadow: none;
        border-radius: 200px;
        transition: color, background-color .25s;

        &:before {
            content: "\2190";
            display: inline-block;
            color: inherit;
            margin-right: 10px;
            transition: margin .25s;
        }
    }
    &:hover > a {
        color: white;
        background-color:#d8c018;

        &:before {
            margin-right: 15px;
        }
    }
}

/*---------- CONCLUSION ----------*/
.silhouette {
    display: block;
    width: 80px;
    height: 80px;
    background: url(../img/photographe-06.svg) no-repeat center center;
    background-size: contain;
    margin: 40px auto 20px auto;
    padding:0;
    border: none;
    outline: none;
}
/*---------- VAGUE ----------*/
.vague {
    display: block;
    width: 100%;
    min-height: 50px;
    background: url(../img/wave2.svg) no-repeat bottom center;
    background-size: 100%;
    margin: 0;
    padding-top: 80px;
    border: none;
    outline: none;
    position: relative;
    bottom: -1px;

    @media (min-width: 800px) {
        min-height: 147px;
        padding-top: 40px;
    }
}
.reverse {
    -ms-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin-top: 0;
    bottom: 0;
    top: -1px;
}
.vague-ligne {
    display: block;
    width: 100%;
    min-height: 260px;
    background: url(../img/wave-line.svg) no-repeat center center;
    background-size: 100%;
    margin: 0;
    border: none;
    outline: none;
    position: relative;
    bottom: -1px;
}
.separation {
    width:100%;
    max-width: 80%;
    height:1px;
    background-color:#d9cdc6;
    padding:0;
    margin:120px auto;

    @media (min-width:1200px) {
        max-width:70%;
    }
}
.separationpetite {
    width:100%;
    height:20px;
    padding:0;
    margin:0 auto;
}
.separationmoyenne {
    width:100%;
    height:40px;
    padding:0;
    margin:0 auto;
}
/*---------- conclusion ----------*/
.conclusion {
    background:#fff;
    margin: 0;
    padding: 80px 0 10px 0;
    position: relative;
	text-align: center;

    h1 {
        text-align: center;
        margin-bottom: 40px;

        &:after {
            content: "";
            display: block;
            width: 40px;
            height: 1px;
            background: #333;
            margin: 20px auto 0 auto;
        }
    }
    > .wrapper {
        width:100%;
        margin:0 auto;
        padding: 25px 40px 60px 40px;
        background:#fff;
        display: flex;
        flex-flow: column wrap;
        align-items: flex-start;
        align-content: space-between;
        gap:40px;

        @media (min-width: 1000px) {
            max-width: 90%;
        }
        @media (min-width: 1200px) {
            flex-flow: row nowrap;
            align-items: center;
        }
    }
    picture {
        border:solid 10px #f2f2f2;
        transform: rotate(-1deg);
    }
    picture,
    a {
        max-width:100%;
        display:flex;
    }
    a:hover {
        color:#bfa915;
        border-bottom-color: #bfa915;
    }
    > ul {
        display:flex;
        flex-flow: column wrap;
        align-items: flex-start;
        align-content: space-between;
        width: 100%;
        max-width:80%;
        margin: 60px auto 0 auto;
        list-style-type: none;

        > li {
            width: 100%;
            margin: 0 30px 15px 0;
            font-size: .95em;
            line-height: 1.5;
            text-align: center;

            &:before { display: none; }

            > a,
            > a:active,
            > a:link,
            > a:visited {
                font-family: "Libre Baskerville", "Made Dillan", "Cervo Neue", Arial, "sans-serif";
                font-size: 16px;
                text-transform: none;
                text-decoration: none;
                box-shadow: none;
                transition: all .25s;
                transition-property: color;
            }

            @media (min-width: 1200px) {
                margin: 0 10px;
                text-align: left;

                &:first-child { margin-left: 0; }
                &:last-child { text-align: right; margin-right: 0; border-bottom: 0; }
            }
        }

        @media (min-width: 1000px) {
            flex-flow: row wrap;
        }
        @media (min-width: 1200px) {
            flex-flow: row nowrap;
        }
    }
    > .conditions {
        @media (min-width: 800px) {
            max-width: 35%;
        }
    }
    > .conception {
        display: inline-block;
        max-width: 70%;
        margin: 10px auto 40px auto;
        padding-bottom: 3px;
        text-decoration:none;
        font-size:11px;
        color: #a69a92;
        text-align: center;
        letter-spacing: 1px;
        line-height: 1.25;
        -webkit-box-shadow:none;
        box-shadow:none;
        transition: all .5s;
        transition-property: color, border-bottom-color;

        &:hover {
            color:#bfa915;
        }
    }

    @media (min-width: 1200px) {
        margin: 0 auto;

        picture,
        > a {
            width: 100%;
            max-width: 37%;
            flex-grow: 1;
            display: inline-flex;
        }
    }
}
/*---------- FOOTER ----------*/
.footer {
    max-width:70%;
    margin:0 auto;
    text-align: center;
    color: #a69a92;

    > .menu {
        margin:0 auto 20px auto;

        ul,
        li {
            align-items: center;
            justify-content: center;
        }
        li {
            margin-left:0;

            &:last-child {
                border-bottom: solid 1px #d9cdc6;
                padding-bottom: 10px;

                @media (min-width: 800px) {
                    border-bottom: none;
                    padding-bottom: 0;
                }
            }
            > a {
                display: inline-block;
                text-align: inherit;
                font-family: "Montserrat", "Cervo Neue", Arial, "sans-serif";
                opacity: .8;
                font-size: 11px;
                line-height: 1.5em;
                padding: 0;
                margin: 0;
                text-transform: uppercase;
                letter-spacing: 1px;

                &:hover {
                    color: #bfa915;
                }
            }

            @media (min-width: 1100px) {
                margin-left:20px;

                &:first-child {
                    margin-left: 0;
                }
                &:before {
                    content: "";
                    display: inline-block;
                    width: 1px;
                    height: 7px;
                    background-color: #d9cdc6;
                    position: relative;
                    left: 0;
                    bottom: 0;
                    margin: 0 16px 0 0;
                }
                &:first-child:before {
                    display:none;
                }
            }
        }
    }
    > .conditions {
        display: block;
        max-width: 70%;
        margin:0 auto;
        font-size:11px;
        color: #a69a92;
        text-align: left;
        letter-spacing: 1px;
        line-height: 1.5;

        > a {
            color: #bfa915;
            -moz-box-shadow: 0 -1px 0 inset #d8c018;
            -webkit-box-shadow: 0 -1px 0 inset #d8c018;
            box-shadow: 0 -1px 0 inset #d8c018;
            -moz-transition: box-shadow .25s;
            -webkit-transition: box-shadow .25s;
            transition: box-shadow .25s;

            &:hover {
                -moz-box-shadow: 0 -2px 0 inset #bfa915;
                -webkit-box-shadow: 0 -2px 0 inset #bfa915;
                box-shadow: 0 -2px 0 inset #bfa915;
            }
        }
    }
    > .conception {
        display: inline-block;
        max-width: 70%;
        margin: 10px auto 40px auto;
        padding-bottom: 3px;
        text-decoration:none;
        font-size:11px;
        color: #a69a92;
        text-align: center;
        letter-spacing: 1px;
        line-height: 1.25;
        -webkit-box-shadow:none;
        box-shadow:none;
        transition: all .5s;
        transition-property: color, border-bottom-color;

        &:hover {
            color:#bfa915;
        }
    }
    > .menu {
        li > a {
            @media (min-width: 1100px) {
                margin: 0 0 0 10px;
            }
        }
    }
}

hr {
	border-top:solid 1px #d9cdc6;
}
/*---------- FAQ ----------*/
.FAQ {}
.FAQ h1 {
    text-align: center;
    margin-bottom: 80px;

    &:after {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background: #333;
        margin: 20px auto 0 auto;
    }
}
.qr {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    align-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 40px 0;
    border-bottom: solid 1px #d9cdc6;

    &:before {
        display: none;
    }
    &:first-child {
        padding-top:0;
    }
    > h2 {
        line-height: 1.5;
        margin-right: 20px;
        text-transform: none;
        letter-spacing: 0;
        font-style: italic;
        font-size: 20px;

        &:after {
            width:25px;
            margin: 10px 0 5px 0;

            @media (min-width: 1100px) {
                display:none;
            }
        }

        @media (min-width: 1100px) {
            min-width: 25%;
            max-width: 25%;
            font-weight: normal;
        }
    }
    > .answer {
        width:100%;
        flex-grow: 1;
        margin:0;
    }

    @media (min-width: 1100px) {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        align-content: space-between;
        gap: 20px;
        border-bottom: solid 1px #d9cdc6;
    }
}


/*--------PERSONNALISATION FANCYBOX----------*/
iframe {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 720px;
    max-height: 405px;
    border: none;
}
.fancybox-slide--iframe .fancybox-content {
    background: #fff;
    max-height: 414px;
    max-width: 720px;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden!important;
    -moz-box-shadow:0 0 100px rgba(0,0,0,.6);
    -webkit-box-shadow:0 0 100px rgba(0,0,0,.6);
    box-shadow:0 0 100px rgba(0,0,0,.6);
}