:root{
  --noir:#0b0c0e;--noir-2:#131518;--noir-3:#1c1f23;
  --ivoire:#f3eee5;--ivoire-2:#e8e1d4;
  --laiton:#b8925a;--laiton-2:#d9bd8c;
  --gris:#8a8f96;--trait:rgba(243,238,229,.12);
  --serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,system-ui,sans-serif;
  --max:1280px;--ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--noir);color:var(--ivoire);font:300 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--laiton);color:var(--noir)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.serif{font-family:var(--serif)}
.label{font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--laiton-2)}
.label.num::before{content:attr(data-n);color:var(--gris);margin-right:14px}
em{font-style:italic;color:var(--laiton-2)}

/* Grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Intro */
#intro{position:fixed;inset:0;z-index:200;background:var(--noir);display:grid;place-items:center;transition:opacity .9s var(--ease) .2s,visibility 0s 1.1s}
#intro .m{font:500 clamp(40px,8vw,88px)/1 var(--serif);letter-spacing:.02em;overflow:hidden}
#intro .m span{display:inline-block;transform:translateY(110%);animation:up 1s var(--ease) forwards}
#intro .m span.amp{color:var(--laiton);font-style:italic;animation-delay:.12s}
#intro .m span:last-child{animation-delay:.22s}
#intro .ligne{position:absolute;bottom:38%;left:50%;width:160px;height:1px;background:var(--trait);transform:translateX(-50%);overflow:hidden}
#intro .ligne::after{content:"";position:absolute;inset:0;background:var(--laiton);transform:scaleX(0);transform-origin:left;animation:fill 1.1s var(--ease) .3s forwards}
body.pret #intro{opacity:0;visibility:hidden}
@keyframes up{to{transform:none}}
@keyframes fill{to{transform:scaleX(1)}}

/* Navigation */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .5s,border-color .5s,transform .5s var(--ease);border-bottom:1px solid transparent}
header.plein{background:rgba(11,12,14,.82);backdrop-filter:blur(14px);border-color:var(--trait)}
header.cache{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{font:500 26px/1 var(--serif);letter-spacing:.02em}
.logo i{color:var(--laiton);font-weight:400}
.nav ul{display:flex;gap:40px;list-style:none}
.nav ul a{font:400 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-2);position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--laiton);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.cta{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:16px 26px;border:1px solid var(--laiton);color:var(--ivoire);position:relative;overflow:hidden;transition:color .5s var(--ease)}
.cta::before{content:"";position:absolute;inset:0;background:var(--laiton);transform:translateY(101%);transition:transform .5s var(--ease)}
.cta:hover{color:var(--noir)}
.cta:hover::before{transform:none}
.cta>*{position:relative}
.cta svg{width:14px;transition:transform .5s var(--ease)}
.cta:hover svg{transform:translateX(4px)}
.burger{display:none;background:none;border:0;color:var(--ivoire);width:40px;height:40px;cursor:pointer}
.burger span{display:block;height:1px;background:currentColor;margin:7px 6px;transition:transform .4s var(--ease)}
#menu{position:fixed;inset:0;z-index:49;background:var(--noir);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 24px;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
#menu a{font:500 44px/1.3 var(--serif)}
body.menu #menu{opacity:1;visibility:visible;transition:opacity .5s}
body.menu .burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:zoom 14s var(--ease) forwards}
@keyframes zoom{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,12,14,.55) 0%,rgba(11,12,14,.15) 35%,rgba(11,12,14,.35) 60%,var(--noir) 100%),radial-gradient(ellipse at 20% 80%,rgba(11,12,14,.75),transparent 60%)}
.hero .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(48px,9vh,110px)}
.hero h1{font:400 clamp(48px,9.4vw,148px)/.92 var(--serif);letter-spacing:-.02em;margin:26px 0 34px}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l>span{display:block;transform:translateY(110%)}
body.pret .hero h1 .l>span{animation:up 1.3s var(--ease) forwards}
body.pret .hero h1 .l:nth-child(2)>span{animation-delay:.12s}
body.pret .hero h1 .l:nth-child(3)>span{animation-delay:.24s}
.hero-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.hero-bas p{max-width:460px;color:var(--ivoire-2);font-size:17px}
.apparait{opacity:0;transform:translateY(20px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
body.pret .hero .apparait{opacity:1;transform:none;transition-delay:.7s}
.defile{position:absolute;right:clamp(16px,4vw,48px);top:50%;z-index:2;writing-mode:vertical-rl;font:400 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:16px}
.defile::after{content:"";width:1px;height:70px;background:linear-gradient(var(--laiton),transparent);animation:goutte 2.4s ease-in-out infinite}
@keyframes goutte{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Trois portes */
.portes{padding:clamp(40px,6vw,80px) 0 clamp(70px,9vw,120px)}
.portes .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait)}
.porte{background:var(--noir);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;min-height:400px;position:relative;overflow:hidden;transition:color .6s var(--ease)}
.porte::before{content:"";position:absolute;inset:0;background:var(--laiton);transform:translateY(101%);transition:transform .7s var(--ease)}
.porte>*{position:relative}
.porte .n{font:italic 400 18px/1 var(--serif);color:var(--laiton-2);transition:color .6s}
.porte small{display:block;margin-top:auto;font:500 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gris);transition:color .6s}
.porte h3{font:400 clamp(30px,3vw,42px)/1.05 var(--serif);margin:14px 0 16px}
.porte h3 em{transition:color .6s}
.porte p{color:var(--gris);font-size:15px;margin-bottom:30px;transition:color .6s}
.porte .fl{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.porte .fl svg{width:14px;transition:transform .5s var(--ease)}
.porte:hover{color:var(--noir)}
.porte:hover::before{transform:none}
.porte:hover .n,.porte:hover small,.porte:hover p,.porte:hover h3 em{color:var(--noir)}
.porte:hover .fl svg{transform:translateX(6px)}

/* Fournisseurs */
.fournisseurs .grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.fournisseurs h2{font:400 clamp(40px,5.4vw,84px)/1 var(--serif);letter-spacing:-.02em;margin:22px 0 26px}
.fournisseurs .texte>p{color:var(--ivoire-2);font-size:17px;max-width:480px}

/* Bandeau défilant */
.bandeau{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);overflow:hidden;padding:26px 0;white-space:nowrap}
.bandeau .piste{display:inline-flex;animation:defil 40s linear infinite}
.bandeau span{font:italic 400 clamp(24px,3vw,38px)/1 var(--serif);color:var(--ivoire-2);padding:0 34px;display:inline-flex;align-items:center;gap:68px}
.bandeau span::after{content:"✦";font-style:normal;font-size:14px;color:var(--laiton)}
@keyframes defil{to{transform:translateX(-50%)}}

section{padding:clamp(90px,14vw,180px) 0;position:relative}

/* Manifeste */
.manifeste .grille{display:grid;grid-template-columns:1fr 2.2fr;gap:60px}
.manifeste h2{font:400 clamp(32px,4.6vw,64px)/1.12 var(--serif);letter-spacing:-.01em}
.manifeste h2 .mot{opacity:.16;transition:opacity .4s}
.manifeste h2 .mot.on{opacity:1}
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(70px,10vw,130px);border-top:1px solid var(--trait)}
.chiffres div{padding:34px 24px 0 0;border-right:1px solid var(--trait);padding-left:24px}
.chiffres div:first-child{padding-left:0}
.chiffres div:last-child{border:0}
.chiffres b{display:block;font:400 clamp(44px,5vw,72px)/1 var(--serif);color:var(--ivoire)}
.chiffres b sup{font-size:.45em;color:var(--laiton-2);margin-left:4px}
.chiffres small{display:block;margin-top:12px;color:var(--gris);font-size:14px;line-height:1.5}

/* Pôles */
.poles{padding-top:0}
.pole{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;margin-bottom:clamp(90px,12vw,160px)}
.pole:last-child{margin-bottom:0}
.pole.inverse{grid-template-columns:1fr 1.25fr}
.pole.inverse .media{order:2}
.media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--noir-2)}
.media.large{aspect-ratio:5/4}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.6s var(--ease)}
.media.vu video{transform:scale(1)}
.media .rideau{position:absolute;inset:0;background:var(--noir);transform-origin:top;transition:transform 1.4s var(--ease);z-index:2}
.media.vu .rideau{transform:scaleY(0)}
.media .legende{position:absolute;left:20px;bottom:18px;z-index:3;font:400 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ivoire);display:flex;align-items:center;gap:10px}
.media .legende::before{content:"";width:7px;height:7px;border-radius:50%;background:#e2483d;box-shadow:0 0 0 0 rgba(226,72,61,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(226,72,61,0)}100%{box-shadow:0 0 0 0 rgba(226,72,61,0)}}
.media .petit{position:absolute;width:42%;aspect-ratio:1;right:-1px;bottom:-1px;z-index:3;border-top:10px solid var(--noir);border-left:10px solid var(--noir);overflow:hidden}
.media .petit video{transform:none}
.texte h3{font:400 clamp(40px,5vw,72px)/1 var(--serif);margin:22px 0 26px;letter-spacing:-.01em}
.texte>p{color:var(--ivoire-2);font-size:17px;max-width:460px}
.liste{list-style:none;margin:38px 0 44px;border-top:1px solid var(--trait)}
.liste li{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--trait);font-size:15px;transition:padding .5s var(--ease),color .3s}
.liste li span:last-child{font:italic 400 18px/1 var(--serif);color:var(--gris)}
.liste li:hover{padding-left:12px;color:var(--laiton-2)}

/* Film plein écran */
.film{height:120vh;padding:0;position:relative}
.film .colle{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film .voile{position:absolute;inset:0;background:rgba(11,12,14,.55)}
.film blockquote{position:relative;z-index:2;text-align:center;max-width:980px;padding:0 24px}
.film blockquote p{font:400 clamp(32px,5.4vw,78px)/1.08 var(--serif);letter-spacing:-.01em}
.film blockquote footer{margin-top:34px}

/* Méthode */
.methode .tete{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(60px,8vw,100px)}
.methode h2,.routes h2,.contact h2{font:400 clamp(40px,6vw,92px)/1 var(--serif);letter-spacing:-.02em;margin-top:22px}
.methode .tete p{max-width:380px;color:var(--ivoire-2)}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--trait)}
.etape{padding:40px 28px 48px;border-right:1px solid var(--trait);position:relative;overflow:hidden;min-height:360px;display:flex;flex-direction:column;transition:background .6s var(--ease)}
.etape:first-child{padding-left:0}
.etape:last-child{border-right:0}
.etape .n{font:italic 400 15px/1 var(--serif);color:var(--laiton-2)}
.etape h4{font:400 32px/1.1 var(--serif);margin:auto 0 16px}
.etape p{color:var(--gris);font-size:15px}
.etape::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--laiton);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.etape:hover::before,.etapes.vu .etape::before{transform:scaleX(1)}
.etapes.vu .etape:nth-child(2)::before{transition-delay:.25s}
.etapes.vu .etape:nth-child(3)::before{transition-delay:.5s}
.etapes.vu .etape:nth-child(4)::before{transition-delay:.75s}

/* Routes */
.routes{background:var(--noir-2);overflow:hidden}
.routes .grille{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:center}
.routes p{color:var(--ivoire-2);margin-top:26px;max-width:420px}
.carte{position:relative;aspect-ratio:16/10}
.carte svg{width:100%;height:100%;overflow:visible}
.carte .pt{fill:rgba(243,238,229,.18)}
.carte .arc{fill:none;stroke:var(--laiton);stroke-width:1.2;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 2.6s var(--ease)}
.carte.vu .arc{stroke-dashoffset:0}
.carte .ville{fill:var(--laiton-2)}
.carte .halo{fill:none;stroke:var(--laiton);opacity:0;transform-box:fill-box;transform-origin:center}
.carte.vu .halo{animation:halo 2.6s ease-out infinite}
@keyframes halo{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
.carte .paris{fill:var(--ivoire)}

/* Conseil */
.conseil .bloc{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.conseil .bloc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.conseil .bloc::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,12,14,.94) 0%,rgba(11,12,14,.7) 45%,rgba(11,12,14,.2) 100%)}
.conseil .contenu{position:relative;z-index:2;padding:clamp(40px,7vw,96px);max-width:720px}
.conseil h3{font:400 clamp(44px,6vw,96px)/.98 var(--serif);margin:22px 0 26px;letter-spacing:-.02em}
.conseil p{color:var(--ivoire-2);font-size:17px;max-width:520px;margin-bottom:38px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:42px}
.badges span{font-size:13px;border:1px solid var(--trait);padding:9px 16px;border-radius:999px;color:var(--ivoire-2);backdrop-filter:blur(6px)}

/* Engagements */
.engagements .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);margin-top:70px}
.engagement{background:var(--noir);padding:clamp(32px,4vw,56px);transition:background .6s var(--ease)}
.engagement:hover{background:var(--noir-3)}
.engagement svg{width:38px;height:38px;stroke:var(--laiton);stroke-width:1;fill:none;margin-bottom:60px}
.engagement h4{font:400 34px/1.1 var(--serif);margin-bottom:14px}
.engagement p{color:var(--gris)}
.engagements h2{font:400 clamp(36px,5vw,72px)/1.05 var(--serif);max-width:900px;margin-top:22px;letter-spacing:-.01em}

/* Contact */
.contact{background:var(--ivoire);color:var(--noir)}
.contact .label{color:var(--laiton)}
.contact em{color:var(--laiton)}
.contact .grille{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(48px,8vw,120px)}
.contact .intro p{color:#4a4d52;font-size:17px;margin:28px 0 48px;max-width:420px}
.coord{display:block;border-top:1px solid rgba(11,12,14,.14);padding:22px 0;transition:padding .5s var(--ease)}
.coord:last-of-type{border-bottom:1px solid rgba(11,12,14,.14)}
.coord small{display:block;font:500 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#7b7e83;margin-bottom:10px}
.coord span{font:400 clamp(24px,2.6vw,34px)/1.1 var(--serif)}
.coord:hover{padding-left:14px}
form{display:grid;gap:34px;align-content:start}
.champ{position:relative}
.champ input,.champ textarea,.champ select{width:100%;font:400 18px/1.4 var(--sans);color:var(--noir);background:transparent;border:0;border-bottom:1px solid rgba(11,12,14,.25);padding:28px 0 12px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.champ textarea{resize:none;min-height:110px}
.champ label{position:absolute;left:0;top:28px;font-size:16px;color:#7b7e83;pointer-events:none;transition:all .4s var(--ease)}
.champ input:focus+label,.champ input:not(:placeholder-shown)+label,.champ textarea:focus+label,.champ textarea:not(:placeholder-shown)+label{top:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--laiton)}
.champ::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--noir);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.champ:focus-within::after{transform:scaleX(1)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.choix{display:flex;gap:10px;flex-wrap:wrap}
.choix input{position:absolute;opacity:0}
.choix label{font-size:14px;border:1px solid rgba(11,12,14,.2);padding:12px 20px;border-radius:999px;cursor:pointer;transition:all .3s}
.choix input:checked+label{background:var(--noir);color:var(--ivoire);border-color:var(--noir)}
.choix input:focus-visible+label{outline:2px solid var(--laiton);outline-offset:2px}
.contact .cta{color:var(--noir);border-color:var(--noir);justify-self:start;cursor:pointer;background:none}
.contact .cta::before{background:var(--noir)}
.contact .cta:hover{color:var(--ivoire)}

/* Pied */
.pied{background:var(--noir);padding:clamp(70px,10vw,120px) 0 36px;overflow:hidden}
.pied .geant{font:500 clamp(70px,19vw,300px)/.8 var(--serif);letter-spacing:-.04em;white-space:nowrap;color:var(--noir-3);margin-bottom:60px;user-select:none}
.pied .geant i{color:rgba(184,146,90,.35)}
.pied .bas{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--gris);border-top:1px solid var(--trait);padding-top:28px}
.pied .bas a:hover,.lien:hover{color:var(--laiton-2)}
.pied .infos{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:44px;font-size:14px;color:var(--ivoire-2);line-height:1.8}
.pied .infos small{display:block;font:500 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--laiton-2);margin-bottom:12px}
.lien{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0}
dialog{margin:auto;max-width:720px;width:calc(100% - 32px);max-height:86vh;background:var(--noir-2);color:var(--ivoire);border:1px solid var(--trait);padding:clamp(28px,5vw,56px);overflow:auto}
dialog::backdrop{background:rgba(5,6,7,.78);backdrop-filter:blur(6px)}
dialog h2{font:400 clamp(36px,5vw,54px)/1 var(--serif);margin:16px 0 30px}
dialog h3{font:400 24px/1.2 var(--serif);color:var(--laiton-2);margin:28px 0 8px}
dialog p{color:var(--ivoire-2);font-size:15px;margin-bottom:12px}
dialog .fermer{position:sticky;top:0;float:right;background:none;border:1px solid var(--trait);color:var(--ivoire);width:42px;height:42px;font-size:24px;line-height:1;cursor:pointer;border-radius:50%}
dialog .fermer:hover{border-color:var(--laiton);color:var(--laiton-2)}
@media (max-width:860px){.pied .infos{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pied .infos{grid-template-columns:1fr}}

/* Révélations au défilement */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.vu{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* Curseur */
#curseur{position:fixed;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--laiton-2);pointer-events:none;z-index:150;mix-blend-mode:difference;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s}
#curseur.gros{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--ivoire)}
@media (hover:none){#curseur{display:none}}

@media (max-width:980px){
  .nav ul,.nav .cta{display:none}
  .burger{display:block}
  .manifeste .grille,.pole,.pole.inverse,.routes .grille,.contact .grille,.fournisseurs .grille,.portes .grille{grid-template-columns:1fr}
  .porte{min-height:300px}
  .pole.inverse .media{order:0}
  .chiffres{grid-template-columns:1fr 1fr}
  .chiffres div{padding:28px 16px 28px 0;border-bottom:1px solid var(--trait)}
  .chiffres div:nth-child(2n){border-right:0;padding-left:16px}
  .chiffres div:nth-child(3){padding-left:0}
  .etapes{grid-template-columns:1fr 1fr}
  .etape{min-height:260px;padding-left:20px;border-bottom:1px solid var(--trait)}
  .etape:nth-child(odd){padding-left:0}
  .etape:nth-child(2){border-right:0}
  .engagements .grille{grid-template-columns:1fr}
  .defile{display:none}
}
@media (max-width:560px){
  .etapes,.duo{grid-template-columns:1fr}
  .etape{border-right:0;padding-left:0;min-height:200px}
  .media{aspect-ratio:4/5}
  .hero-bas .cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .bandeau .piste{animation:none}
}

/* Pages dédiées */
.hero.court{height:86svh;min-height:600px}
.hero.court h1{font-size:clamp(44px,7.6vw,120px)}

/* Choix de la langue */
.langue{display:inline-flex;gap:6px;font:500 12px/1 var(--sans);letter-spacing:.14em;margin-left:18px}
.langue a{color:var(--gris);padding:6px 4px}
.langue a.on{color:var(--laiton-2)}
.langue a:hover{color:var(--ivoire)}
.nav .droite{display:flex;align-items:center;gap:6px}
#menu .langue{margin:30px 0 0;font-size:15px}

/* Bouton WhatsApp */
.wa{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:60;display:flex;align-items:center;gap:0;height:58px;padding:0 17px;border-radius:999px;background:var(--noir-2);border:1px solid var(--laiton);color:var(--ivoire);box-shadow:0 10px 40px rgba(0,0,0,.45);transition:gap .5s var(--ease),background .4s,transform .4s var(--ease);opacity:0;transform:translateY(20px)}
body.pret .wa{opacity:1;transform:none;transition-delay:1.2s}
.wa svg{width:24px;height:24px;flex:none;fill:var(--laiton-2)}
.wa span{max-width:0;overflow:hidden;white-space:nowrap;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:max-width .6s var(--ease)}
.wa:hover{gap:12px;background:var(--laiton);color:var(--noir)}
.wa:hover svg{fill:var(--noir)}
.wa:hover span{max-width:200px}

/* Formulaire : envoi et remerciement */
form.envoi{opacity:.6;pointer-events:none}
.merci{padding:40px 0}
.merci h3{font:400 clamp(36px,4vw,56px)/1.05 var(--serif);margin:18px 0 16px}
.merci p{color:#4a4d52;font-size:17px;max-width:440px}
.cache-pot{position:absolute;left:-9999px}
@media (min-width:561px){.hero-bas{padding-right:84px}}