/* Composition issue du guide d’intégration et de ses maquettes. */
:root{--rayon:6px;--degrade-grain:url('../img/degrade-grain.webp')}
.hero{align-items:flex-start;justify-content:center;text-align:center;min-height:max(760px,100svh);padding-top:clamp(160px,12vw,235px);padding-bottom:40vh}
.hero__contenu{max-width:1200px;width:100%;z-index:1}
.hero h1{font-weight:300;line-height:1.1;letter-spacing:-.02em}
.hero p{margin-inline:auto;font-size:clamp(16px,1.25vw,24px);max-width:39ch}
.hero .eyebrow{font-size:12px;margin-bottom:14px}
.hero__globe{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__fond--substitut{background:#000}
.hero__fond--substitut::before{display:none}
.hero .bouton{background:var(--degrade-grain) center/cover;border-radius:3px}
.hero .bouton:hover{background:var(--degrade-grain) center/cover}
.nav__bar{border-radius:4px;box-shadow:none;gap:18px;padding:12px 20px}
.nav__logo{width:145px;flex-shrink:0}
.nav__logo img,.pied__logo img{height:auto}
.nav__liens{flex:1;justify-content:space-evenly;gap:15px}
.nav__liens a{font-size:11px;letter-spacing:0}
.nav__contact{font-size:11px;letter-spacing:0;position:relative;padding:20px 25px}
.nav__contact::before{content:'';position:absolute;width:24px;height:4px;left:-12px;top:50%;background:#b73227;border-radius:4px}
.nav__burger{width:48px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:5px;background:#efd3d0;border-radius:3px}
.nav__burger span+span{margin:0}
.nav__burger span:not(.sr-only){height:1.5px;flex-shrink:0}
.menu-ouvert .nav__burger span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.menu-ouvert .nav__burger span:nth-child(2){opacity:1;transform:translateY(-3.25px) rotate(-45deg)}
.nav__horloges{position:absolute;right:calc(100% + 45px);top:17px;color:var(--beige);font:300 12px/1.6 var(--f-repere);letter-spacing:.08em;white-space:nowrap;display:grid}
.nav__panneau{margin-top:0;border-radius:0 0 4px 4px;box-shadow:none}
.menu-ouvert .nav__bar{border-radius:4px 4px 0 0}
.menu-ouvert .nav__liens,.menu-ouvert .nav__contact{visibility:hidden}
.nav__panneau-interieur{padding:0 20px 10px}
.nav__menu a{font-size:15px;line-height:2}
.nav__infos{font-size:13px;overflow-wrap:anywhere}
.nav__cartes{gap:5px;padding-top:24px}
.prestation{border-radius:4px;min-height:252px;padding:16px 10px 10px;overflow:visible}
.prestation p{padding-inline:5px;font-size:13px}
.prestation__numero{top:-20px;font-size:10px;letter-spacing:0;white-space:nowrap}
.prestation__image{padding:0;min-height:115px;max-height:155px;overflow:hidden}
.prestation__image video{height:160px;width:100%;object-fit:contain}
.prestation .bouton{font-size:14px;border-radius:2px;min-height:43px;padding-inline:10px;letter-spacing:0}
.prestation--sombre .bouton{background:#303030}.prestation--clair .bouton{background:#e7e7e7}
.prestation--sombre .bouton:hover{background:#303030}.prestation--clair .bouton:hover{background:#e7e7e7;color:#111}
.prestation--appel{background:var(--degrade-grain) center/cover}
.prestation--appel .bouton:hover{background:#ffffff26;color:#fff}
.prestation--appel .prestation__entete{font-size:12px}
.grain::after{display:none}
/* Le flou du menu ouvert est porte par le voile fixe, pas par la page entiere :
   seule la zone visible est floutee, et sur le GPU. Un filter sur <main> obligeait
   le navigateur a rasteriser puis flouter tout le document a chaque repeint. */
.menu-ouvert main,.menu-ouvert .pied{pointer-events:none}
body::after{content:'';position:fixed;inset:0;z-index:50;background:#0005;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;pointer-events:none}
body.menu-ouvert::after{opacity:1;visibility:visible;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.bouton{letter-spacing:-.02em}
.bouton:hover{background:var(--rouge-action)}
.bouton--sombre:hover{background:var(--noir);color:var(--beige)}
.bouton--clair:hover{background:var(--beige);color:var(--noir)}
.bouton--ligne:hover{background:transparent;color:inherit}
.bouton--ligne:hover .bouton__texte{mix-blend-mode:normal}
.approche h2{max-width:20ch;margin-inline:auto;font-weight:500}
.approche h2 em{font-style:normal}
.mot-revele{opacity:.07;transition:opacity .15s linear}
.chiffres h2{background:none;color:#111;align-self:start}
.chiffres h2 span{display:block}
.chiffres h2 span:not(:last-child){background:var(--degrade-grain) center/cover;background-clip:text;color:transparent}
.chiffres__liste{grid-template-columns:1fr}
.methode{text-align:center}.methode__etapes{text-align:left;max-width:1260px;margin:auto}
.etape{background:transparent;border:0;padding:20px}
.etape__visuel{min-height:200px;max-height:320px}
.etape__visuel video{width:100%;height:100%;max-height:300px;object-fit:contain}
.etape h3{font-size:clamp(24px,2vw,38px)}
.accompagnements h2{font-weight:700;max-width:20ch;margin-inline:auto;font-size:clamp(32px,3.8vw,64px)}
.accompagnements__offres,.accompagnements .bandeau{max-width:1030px;margin-inline:auto}
.offre{gap:12px;padding:30px;min-height:650px;border-radius:15px}
.offre--clair{border:0}.offre--orange{background:var(--degrade-grain) center/cover}
.offre__badge{position:absolute;top:30px;left:30px;border-radius:40px;background:#111;color:white;padding:8px 13px;font:400 10px/1 var(--f-repere);z-index:1}
.offre--orange .offre__badge{background:white;color:#111}
.offre__animation{width:100%;height:135px;object-fit:contain;margin-top:8px}
.offre h3{font-size:clamp(30px,2.8vw,42px);font-weight:400;line-height:1.05;white-space:normal}
.offre__description{font-size:12px;max-width:38ch;opacity:.75}
.offre__rythme{font:600 clamp(28px,2.5vw,44px)/1.2 var(--f-titre);padding-bottom:18px;border-bottom:1px solid #8883}
.offre ul{font-size:13px;gap:10px;padding:14px 0 36px}
.offre li::before{content:'●';font-size:10px;opacity:.65}
.offre .bouton{align-self:center}.offre--orange .bouton,.bandeau .bouton{background:#fff;color:#111}
.offre--orange .bouton:hover,.bandeau .bouton:hover{background:#fff;color:#111}
.bandeau{background:var(--degrade-grain) center/cover;min-height:300px}
.bandeau h3{font-weight:400;max-width:18ch;margin-inline:auto}
.cercles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cercles i{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border:1px dotted #ffffff70;border-radius:50%;transform:translate(-50%,-50%);animation:cercles 12s linear infinite}
.cercles i:nth-child(2){animation-delay:-3s}.cercles i:nth-child(3){animation-delay:-6s}.cercles i:nth-child(4){animation-delay:-9s}
@keyframes cercles{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}15%{opacity:.7}90%{opacity:.35}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
.appel{position:relative;overflow:hidden;isolation:isolate}.appel>*:not(.cercles){position:relative}
.appel h2{font-family:var(--f-repere);font-weight:500;font-size:clamp(24px,2.5vw,42px);letter-spacing:0}
.projet-formulaire{position:relative}.projet-formulaire>summary{list-style:none;cursor:pointer}.projet-formulaire>summary::-webkit-details-marker{display:none}
.projet-formulaire[open] .formulaire{margin-top:35px}
.pied{background:var(--beige);color:#77716a}.pied h2{color:#111}.pied__logo{display:block}.pied__bas{border-color:#1111}
.question__bouton{cursor:pointer;list-style:none}.question__bouton::-webkit-details-marker{display:none}
.question__bouton:hover{font-weight:600}.question:hover .question__signe::before{height:4px;width:4px;border-radius:50%;left:5px}.question:hover .question__signe::after{opacity:0}
.question[open]{border-top-color:#888}.question__reponse{display:block}.question__reponse p{padding-top:12px}
.reveal{opacity:1;transform:none}.js-reveal{opacity:0;transform:translateY(20px)}.js-reveal.est-visible{opacity:1;transform:none}
.encre-visible{animation:encre var(--duree-apparition,1.5s) cubic-bezier(.2,.7,.2,1) both}
@keyframes encre{0%{clip-path:inset(0 100% 0 0);color:#ff2a12}35%{color:#ff2a12}100%{clip-path:inset(0 0 0 0)}}
.bouton:disabled,.pastille[aria-disabled=true]{opacity:.5;cursor:default}
@media(min-width:900px){
 .nav__sommaire{grid-template-columns:120px 225px minmax(160px,1fr);margin-left:40%;min-height:190px;margin-bottom:35px;gap:24px}
 .nav__cartes{grid-template-columns:1fr 1fr 1.38fr}
 .chiffres{display:grid;grid-template-columns:1.1fr 1fr;gap:0 9vw}
 .chiffres h2{grid-row:1/3;position:sticky;top:150px;font-size:clamp(36px,4vw,76px)}
 .chiffres__intro{grid-column:2}.chiffres__liste{grid-column:2;gap:80px}
 .faq{display:grid;grid-template-columns:1fr 1.8fr .7fr;gap:5vw;align-items:start}
 .faq__entete{display:contents}.faq__entete>div:first-child{grid-column:1;grid-row:1}.faq__aide{grid-column:3;grid-row:1;text-align:left;justify-items:start}.faq__liste{grid-column:2;grid-row:1}
}
@media(max-width:1500px){.nav__horloges{right:calc(100% + 18px);font-size:10px}.nav{width:min(1000px,calc(100% - 250px))}}
@media(max-width:1100px){.nav__horloges{display:none}.nav{width:calc(100% - 32px)}}
@media(min-width:900px) and (max-width:1100px){.nav__sommaire{margin-left:25%;grid-template-columns:100px 210px minmax(150px,1fr);gap:14px}.nav__infos{font-size:12px}}
@media(max-width:899px){.nav__contact{display:block;margin-left:auto}.nav__logo{margin-right:0}.nav__bar{gap:10px}.nav__sommaire{padding-top:20px}.nav__cartes{gap:32px}.nav__panneau-interieur{padding-bottom:20px}.offre{min-height:560px}.nav__panneau-interieur{overscroll-behavior:contain}}
@media(max-width:767px){
 .hero{text-align:left;min-height:100svh;padding:56svh 22px 45px;align-items:flex-end}
 .hero__contenu{max-width:none}.hero h1{font-weight:800;font-size:9.3vw;line-height:1.2;letter-spacing:-.075em;max-width:10ch}
 .hero p{margin-left:0;max-width:35ch;font-size:14px}.hero .eyebrow{font-size:10px}
 .nav__logo{width:105px}.nav__bar{padding:10px 12px}.nav__contact{font-size:10px;padding-inline:14px}.nav__burger{width:36px;flex-shrink:0}
 .offre{min-height:560px;padding:24px}.offre__badge{top:24px;left:24px}.offre__description{font-size:13px}
 .accompagnements__offres{max-width:420px}.accompagnements h2{font-size:8vw}.bandeau h3{font-size:30px}
 .bandeau{padding-block:55px}.cercles i{width:140%}.etape__visuel{max-height:240px}.etape{min-height:360px}
 .sc-phone h3.sc-real{font-size:max(18px,4.65vw);white-space:normal}.sc-phone .sc-real-body{font-size:max(14px,3.1vw)}
 /* Le voile de la scene cargo reste pilote par mobile.css (opacite 0 au
    repos) et par sa timeline. L'aplat noir a 15 % pose ici le rendait
    permanent : un rectangle sombre en travers de la scene. */
}
@media(prefers-reduced-motion:reduce){.mot-revele{opacity:1}.js-reveal{opacity:1;transform:none}.cercles i{animation:none}}

/* Révision de la composition d'après la référence complète, octobre 2026. */
.approche{position:relative;isolation:isolate;overflow:hidden;padding:40vw var(--marge) 16vw}
.approche::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;top:-15vw;width:132vw;height:46vw;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,#030202 0%,#140703 43%,#4d1c0d 62%,#84634f88 72%,#b4aaa333 80%,transparent 90%);filter:blur(24px)}
.approche h2{font:500 clamp(30px,3.95vw,76px)/1.4 var(--f-titre);letter-spacing:.005em;max-width:24ch;margin:0 auto}
.chiffres__colonne{min-width:0}
.chiffres .approche__textes{margin:0;max-width:none;gap:40px;font-size:clamp(16px,1.4vw,27px);line-height:1.25;font-weight:600}
.chiffres .bouton{margin-top:70px;background:transparent;color:#111;font-size:12px;border-color:#d4d0ca}
.chiffres .bouton:hover{background:transparent;color:#111}
.chiffres__intro{margin:70px 0 18px;font-size:15px}
.chiffres__liste{gap:0}
.chiffre{padding:100px 0 80px;border-top:1px solid #1111}
.chiffre dt{font-weight:800;font-size:clamp(64px,7.29vw,140px);white-space:nowrap;letter-spacing:-.055em}
.chiffre dd{font-size:clamp(12px,.95vw,18px);max-width:none;margin-top:32px}
.methode{padding:80px 10px 0}
.methode h2{font-size:clamp(34px,4.15vw,80px);font-weight:500;max-width:19ch;margin:20px auto 35px;line-height:1.1}
.methode__texte{font-size:clamp(13px,1.1vw,20px);margin-bottom:90px}
.methode__etapes{max-width:none;gap:10px}
.etape{border:1px solid #cac5be;border-radius:18px;min-height:43vw;gap:12px;padding:16px 14px;background:var(--beige)}
.etape__visuel{min-height:26vw;max-height:none;width:100%}
.etape__visuel video{max-height:30vw;height:100%;width:100%;object-fit:contain}
.etape h3{font-size:clamp(25px,2.6vw,50px);font-weight:500;max-width:17ch;line-height:1.05}
.etape p{font-size:clamp(13px,1.05vw,20px);line-height:1.3;max-width:46ch}
.passage-nuages{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden;isolation:isolate;--couverture:0;--fond:0}
.passage-nuages[hidden]{display:none}
.passage-nuages__fond{position:absolute;inset:0;background:#faf8f4;opacity:var(--fond)}
.passage-nuages__image{position:absolute;width:120vw;height:125vh;max-width:none;object-fit:fill;opacity:var(--couverture);filter:grayscale(1) brightness(1.03);will-change:transform,opacity}
.passage-nuages__image--gauche{left:-35vw;top:-15vh;transform:translateX(var(--gauche)) scale(var(--echelle))}
.passage-nuages__image--droite{right:-35vw;top:-12vh;transform:translateX(var(--droite)) scale(var(--echelle))}
.passage-nuages__image--centre{left:-10vw;top:-35vh;transform:translateY(calc(-1 * var(--bas))) scale(var(--echelle));height:160vh}
.passage-nuages__image--bas{left:-15vw;bottom:-45vh;width:130vw;transform:translateY(var(--bas)) scale(var(--echelle))}
@media(min-width:900px){
 .hero{height:57.3vw;min-height:0;padding-top:11.6vw;padding-bottom:0}
 .hero h1{font-size:4.17vw;margin-bottom:28px}
 .hero p{font-size:1.18vw;max-width:40ch;margin-bottom:36px}
 .hero .bouton{font-size:12px;min-height:45px}
 .chiffres{grid-template-columns:1.28fr 1fr;gap:0 10vw;padding-top:0;padding-bottom:100px}
 .chiffres h2{grid-column:1;grid-row:1;font-size:4.05vw;line-height:1.18;letter-spacing:-.045em}
 .chiffres__colonne{grid-column:2;grid-row:1}
 .chiffres__liste{display:block}
}
@media(max-width:899px){
 .approche{padding-top:48vw;padding-bottom:20vw}.approche::before{height:55vw}
 .chiffres .approche__textes{margin-top:35px;gap:24px;font-weight:400;line-height:1.5}
 .chiffres .bouton{margin-top:32px}.chiffres__intro{margin-top:45px}.chiffre{padding:45px 0}.chiffre dd{margin-top:18px}
 .methode{padding:65px 20px 0}.methode__texte{margin-bottom:40px}.methode__etapes{gap:15px}
 .etape{min-height:450px;padding:22px}.etape__visuel{min-height:260px}.etape__visuel video{max-height:280px}.etape h3{font-size:30px}
 .passage-nuages__image{width:180vw}.passage-nuages__image--gauche{left:-70vw}.passage-nuages__image--droite{right:-70vw}.passage-nuages__image--centre{left:-40vw}
}
@media(prefers-reduced-motion:reduce){.passage-nuages{display:none!important}}

/* R?v?lation commune, sans masquer le fond des sections ni leurs transitions. */
.reveal.reveal-individuelle{opacity:1;transform:none;transition:none}
.encre-attente{opacity:0}
.encre-visible{animation:encre var(--duree-apparition,1.5s) cubic-bezier(.2,.7,.2,1) both}
.etape__visuel.encre-visible,.offre__animation.encre-visible{animation-name:encre-visuel}
@keyframes encre-visuel{from{clip-path:inset(0 100% 0 0);opacity:.25}to{clip-path:inset(0);opacity:1}}
.approche.reveal{opacity:1;transform:none;transition:none}
.approche::before{top:-40px;height:calc(35vw + 40px);width:115vw;background:radial-gradient(ellipse at 50% 0%,#050202 0%,#1c0803 38%,#57200e 57%,#8b796966 71%,#b4aaa32b 82%,transparent 96%);filter:blur(18px)}
@media(max-width:767px){
 .hero{padding:58svh 5.3vw 9vw;min-height:100svh;background:#020207}
 .hero h1{font-size:9.3vw;line-height:1.2;max-width:11ch;margin-bottom:20px}
 .hero p{font-size:clamp(14px,3.1vw,20px);max-width:35ch;line-height:1.4}
 .hero .eyebrow{font-size:clamp(9px,1.7vw,11px)}
 .hero__voile{background:linear-gradient(90deg,#02020755,transparent 75%)}
 .approche::before{height:calc(55vw + 40px);width:150vw}
 .chiffre dt{font-size:clamp(48px,12vw,80px)}
}
@media(prefers-reduced-motion:reduce){.encre-attente{opacity:1}.encre-visible{animation:none!important}}

[data-cargo-freeze][hidden]{display:none!important}
@media(max-width:767px){
 #accompagnements{position:relative;z-index:2;scroll-margin-top:90px;overflow:clip}
 .passage-nuages__image{height:125svh;filter:none}
 .passage-nuages__image--centre{height:160svh}
 .passage-nuages__image--gauche{top:-15svh}
 .passage-nuages__image--droite{top:-12svh}
 .passage-nuages__image--centre{top:-35svh}
 .passage-nuages__image--bas{bottom:-45svh}
}
/* F04 : le halo de sortie appartient au hero, sans jointure avec le fond clair. */
.hero-sequence{position:relative;height:calc(var(--hero-height) * 1.8);background:var(--beige);--hero-height:57.3vw;--hero-texte:1;--hero-globe:1;--hero-voile:0}
.hero-sequence .hero{position:sticky;top:0;height:var(--hero-height);min-height:0}
.hero-sequence .hero__contenu{opacity:var(--hero-texte);transition:none}
.hero-sequence .hero__globe{opacity:var(--hero-globe)}
.hero-passage{position:absolute;inset:auto 0 0;height:var(--hero-height);z-index:3;pointer-events:none;opacity:var(--hero-voile);background:radial-gradient(ellipse 85% 92% at 50% -14%,#020102 0%,#080103 36%,#2a0307 52%,#70100d 64%,#ad3822 72%,#d39988 82%,var(--beige) 99%)}
.hero-choreographie .approche{padding-top:13vw}
.hero-choreographie .approche::before{display:none}
@media(min-width:900px){
 .hero-sequence .hero{padding-top:11.3vw}
 .hero .eyebrow{margin-bottom:8px}
 .hero h1{margin-bottom:20px}
 .hero p{max-width:34ch;margin-bottom:22px}
 .hero .bouton{min-height:42px}
}
@media(max-width:899px){.hero-sequence{--hero-height:max(760px,100svh)}}
/* Tablette en portrait : le hero large laisserait un bandeau trop court, on lui rend de la hauteur. */
@media(min-width:900px) and (max-aspect-ratio:1/1){.hero-sequence{--hero-height:max(57.3vw,78svh)}}
@media(max-width:767px){
 .hero-sequence{--hero-height:max(100svh,177.8vw)}
 .hero-sequence .hero{padding-top:0;padding-bottom:9vw;align-items:flex-end;justify-content:flex-start}
 .hero-choreographie .approche{padding-top:18vw}
}
@media(prefers-reduced-motion:reduce){
 .hero-sequence{height:var(--hero-height)}
 .hero-sequence .hero{position:relative}
 .hero-passage{display:none}
}
:root{--duree-apparition:1.5s}
.hero-passage{mask-image:linear-gradient(to bottom,transparent,#000 28%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%)}
/* Barre F03 : deux plaques, joint rouge central et encoches latérales. */
.nav{--logo:clamp(78px,5.35vw,110px);--ecart:clamp(14px,1.7vw,30px);width:min(1170px,61vw);top:clamp(18px,1.3vw,25px)}
.nav__bar{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:4px;padding:0;min-height:0;background:transparent;position:relative}
.nav__principal,.nav__actions{display:flex;align-items:center;background:var(--beige);border-radius:4px;min-height:clamp(44px,2.9vw,56px);padding:0 clamp(14px,1.06vw,20px);min-width:0}
.nav__principal{gap:var(--ecart)}
.nav__actions{position:relative;justify-content:space-between;gap:14px;padding-left:clamp(24px,2.55vw,46px);padding-right:clamp(20px,2.11vw,38px)}
.nav__logo{width:var(--logo);margin:0;flex:none}
.nav__liens{display:flex;justify-content:center;gap:clamp(20px,4.83vw,87px);margin-right:calc(var(--logo) + var(--ecart))}
.nav__liens a{font-size:clamp(8px,.525vw,10px);white-space:nowrap}
.nav__contact{padding:14px 0;border:0;font-size:clamp(8px,.5vw,10px);margin:0;letter-spacing:.03em}
.nav__contact::before{display:none}
.nav__actions::before{content:'';position:absolute;left:-14px;top:calc(50% - 2px);width:20px;height:4px;border-radius:4px;background:#c42d23;z-index:2}
.nav__bar::before,.nav__bar::after{content:'';position:absolute;top:calc(50% - 2px);height:4px;width:20px;background:#08050c;border-radius:4px;z-index:2}
.nav__bar::before{left:-9px}.nav__bar::after{right:-13px}
.nav__burger{width:clamp(38px,2.72vw,52px);height:clamp(23px,1.61vw,31px);flex:none;background:#f1d2cf;border-radius:4px;gap:4px}
.nav__burger span:not(.sr-only){width:clamp(16px,1.22vw,24px);height:2px}
.nav__horloges{top:7px;right:calc(100% + clamp(20px,4.67vw,84px));font:300 clamp(11px,.945vw,17px)/1.6 var(--f-repere)}
.nav__langue-exterieure{position:absolute;left:calc(100% + clamp(18px,3.94vw,71px));top:8px;color:var(--beige);font-size:clamp(10px,.74vw,14px);white-space:nowrap}
.nav__langue-exterieure ul{color:var(--noir)}
.menu-ouvert .nav__bar{background:var(--beige);gap:4px}
.menu-ouvert .nav__principal,.menu-ouvert .nav__actions{border-radius:4px 4px 0 0}
.menu-ouvert .nav__langue-exterieure{visibility:hidden}
@media(max-width:1100px){
 .nav{width:calc(100% - 48px)}.nav__horloges,.nav__langue-exterieure{display:none}
 .nav__principal,.nav__actions{padding-inline:18px}.nav__principal{gap:20px}
}
@media(max-width:767px){
 .nav{width:77%;top:clamp(18px,4.65vw,30px)}
 .nav__bar{grid-template-columns:37% minmax(0,1fr);gap:3px}
 .nav__principal,.nav__actions{min-height:49px;padding:0 16px}
 .nav__liens{display:none}.nav__logo{width:100%;max-width:105px}
 .nav__actions{gap:12px;padding-left:21px;padding-right:14px}
 .nav__contact{font-size:clamp(8px,2.1vw,13px);letter-spacing:.04em}
 .nav__burger{width:30px;height:20px;gap:3px}
 .nav__burger span:not(.sr-only){width:14px;height:1.5px}
 .nav__actions::before{width:25px;left:-15px;height:5px;top:calc(50% - 2.5px)}
 .nav__bar::before,.nav__bar::after{height:5px;top:calc(50% - 2.5px);width:17px}
 .nav__panneau{width:calc(100vw - 24px);margin-left:calc((77vw - 100vw + 24px)/2)}
 .menu-ouvert .nav__contact{visibility:hidden}
}
@media(max-width:360px){.nav{width:calc(100% - 32px)}.nav__panneau{width:calc(100vw - 24px);margin-left:-4px}}
@media(min-width:900px){.nav__sommaire{margin-left:35%;grid-template-columns:90px 200px minmax(130px,1fr);gap:20px}}
.hero-sequence{background:#000}
.nav__drapeau{display:inline-block;width:12px;height:8px;flex:none;background:linear-gradient(90deg,#163c8c 0 33.33%,#fff 33.33% 66.66%,#d42f3c 66.66%)}
.hero-passage{background:radial-gradient(ellipse 105% 95% at 50% -8%,transparent 0%,transparent 38%,#030103b0 48%,#0b0104 56%,#53060c 62%,#be2315 69%,#e68570 75%,var(--beige) 86%);mask-image:none;-webkit-mask-image:none}
sc-ink-group{display:contents}
sc-ink-word{display:inline-block;white-space:nowrap;vertical-align:baseline;color:transparent;background-image:linear-gradient(90deg,var(--ink-final) 0%,var(--ink-final) 30%,#ff2a12 40%,transparent 50%,transparent 100%);background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Non-text visuals keep the same duration, with a feathered edge instead of a hard crop. */
.encre-visible{animation:encre-doux var(--duree-apparition) cubic-bezier(.455,.03,.515,.955) both;mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 52%,transparent);mask-size:250% 100%;mask-repeat:no-repeat}
.etape__visuel.encre-visible,.offre__animation.encre-visible{animation-name:encre-doux}
@keyframes encre-doux{from{mask-position:100% 0;opacity:0}30%{opacity:1}to{mask-position:0 0;opacity:1}}
@media(prefers-reduced-motion:reduce){.encre-visible{mask-image:none;animation:none}sc-ink-word{color:inherit;background:none;-webkit-text-fill-color:inherit}}

/* Hero responsive: keep readable content and a usable globe at every aspect ratio. */
.hero-sequence{--hero-height:clamp(680px,57.3vw,1200px)}
.hero-sequence .hero{padding-inline:clamp(20px,5.3vw,100px);padding-top:clamp(145px,11.3vw,220px);padding-bottom:32px}
.hero h1{font-size:clamp(36px,4.17vw,80px)}
.hero p{font-size:clamp(16px,1.18vw,23px)}
.hero__globe{pointer-events:auto;touch-action:pan-y;cursor:grab}
.hero__globe.is-dragging{cursor:grabbing}
.hero__globe:focus-visible{outline:2px solid #f16a42;outline-offset:-5px}
.hero__contenu{pointer-events:none}
.hero__contenu a,.hero__contenu button{pointer-events:auto}
@media(min-width:768px) and (max-width:899px){
 .hero-sequence{--hero-height:max(760px,100svh)}
 .hero h1{font-size:clamp(42px,5.4vw,50px)}
}
@media(max-width:767px){
 .hero-sequence{--hero-height:max(680px,100svh,177.8vw)}
 .hero-sequence .hero{padding-top:125px;padding-bottom:clamp(32px,9vw,58px)}
 .hero h1{font-size:clamp(30px,9.3vw,60px);line-height:1.18;max-width:11ch}
 .hero p{font-size:clamp(15px,3.1vw,20px);max-width:35ch;margin-left:0}
 .hero .eyebrow{font-size:clamp(9px,1.7vw,11px)}
}
@media(orientation:landscape) and (max-height:600px){
 .hero-sequence{--hero-height:max(540px,100svh)}
 .hero-sequence .hero{align-items:center;justify-content:flex-start;text-align:left;padding-top:115px;padding-bottom:35px}
 .hero__contenu{max-width:58%;width:58%}
 .hero h1{font-size:clamp(30px,4.4vw,52px);max-width:none;line-height:1.12;margin-bottom:18px}
 .hero p{font-size:clamp(14px,1.8vw,18px);margin-left:0;margin-bottom:22px}
 .hero .eyebrow{font-size:10px}
}
/* The first scene fills the viewport: no width-based height cap or empty black strip. */
.hero-sequence{--hero-height:max(600px,100svh)}
.hero-sequence .hero{padding-top:clamp(120px,15svh,220px)}
.hero h1{font-size:clamp(36px,min(4.17vw,7svh),80px)}
@media(max-width:767px){
 .hero-sequence{--hero-height:max(540px,100svh)}
 .hero-sequence .hero{padding-top:110px;padding-bottom:clamp(24px,5svh,58px)}
 .hero h1{font-size:clamp(30px,min(9.3vw,6.5svh),60px)}
 .hero p{font-size:clamp(14px,min(3.1vw,2.5svh),20px);margin-bottom:24px}
}
@media(orientation:landscape) and (max-height:600px){
 .hero-sequence{--hero-height:max(320px,100svh)}
 .hero-sequence .hero{padding-top:95px;padding-bottom:18px;align-items:center}
 .hero__contenu{width:60%;max-width:60%}
 .hero h1{font-size:clamp(24px,min(4.2vw,7svh),40px);margin-bottom:10px;line-height:1.08}
 .hero p{font-size:clamp(12px,3.3svh,16px);line-height:1.35;margin-bottom:12px;max-width:42ch}
 .hero .eyebrow{font-size:9px;margin-bottom:7px}
 .hero .bouton{min-height:36px;padding:10px 14px;font-size:10px}
}
/* Keep the text readable where the globe passes behind it on narrow screens. */
.hero__voile{z-index:1;pointer-events:none;background:none}
.hero__contenu{z-index:2}
@media(max-width:767px){
 .hero__voile{background:linear-gradient(180deg,transparent 30%,#02020718 45%,#02020780 76%,#02020740),linear-gradient(90deg,#02020765,transparent 92%)}
 .hero__contenu{text-shadow:0 2px 12px #0009}
 .hero .bouton{text-shadow:none}
}

.nav__langue-exterieure,.nav__horloges{transition:color .22s ease}
.nav--horloges-fond-clair .nav__horloges{color:#111}
.nav--fond-clair .nav__langue-exterieure{color:#111}
html[lang=en] .nav__drapeau{background:#15376b;position:relative}
html[lang=en] .nav__drapeau::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 38%,#fff 38% 62%,transparent 62%),linear-gradient(transparent 30%,#fff 30% 70%,transparent 70%)}
html[lang^=zh] .nav__drapeau{background:#de2910;position:relative}
html[lang^=zh] .nav__drapeau::after{content:'★';position:absolute;color:#ffde00;font-size:6px;left:1px;top:-1px}
html[lang^=zh]{--f-titre:Arial,'PingFang SC','Microsoft YaHei',sans-serif;--f-repere:Arial,'PingFang SC','Microsoft YaHei',sans-serif}
html[lang^=zh] .hero h1{max-width:none;line-height:1.3;letter-spacing:0}
html[lang^=zh] .sc-real,html[lang^=zh] .sc-editorial{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;line-height:1.5}
html[lang^=zh] .hero p{max-width:28em}
@media(max-width:767px){html[lang=en] .hero h1{font-size:clamp(29px,min(8.2vw,6svh),55px)}html[lang^=zh] .hero h1{font-size:clamp(30px,8.3vw,54px)}html[lang^=zh] .hero p{max-width:26em}}
@media(prefers-reduced-motion:reduce){.nav__langue-exterieure,.nav__horloges{transition:none}}
html[lang=en] .nav__drapeau{background:url('../img/flag-gb.svg') center/cover no-repeat}
html[lang=en] .nav__drapeau::after{display:none}
.carte-media{display:block;position:relative;width:100%;height:100%;min-height:0}
.carte-media>video,.carte-media>img{display:block;width:100%;height:100%;object-fit:contain}
.carte-media>[hidden]{display:none!important}
.etape__visuel .carte-media{height:240px;max-height:300px}
.prestation__image .carte-media{height:150px}
.carte-media.offre__animation{height:135px}
@media(max-width:767px){.etape__visuel .carte-media{height:220px}}
/* Open menu follows the supplied desktop and phone compositions. */
.menu-ouvert .nav{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--beige);border-radius:4px}
.menu-ouvert .nav__bar{position:relative;z-index:3;background:var(--beige)}
.menu-ouvert .nav__bar::before,.menu-ouvert .nav__bar::after,.menu-ouvert .nav__actions::before{display:none}
.menu-ouvert .nav__horloges{display:none}
.menu-ouvert .nav__principal,.menu-ouvert .nav__actions{background:transparent}
.menu-ouvert .nav__panneau{width:100%;margin:0;overflow:visible}
.menu-ouvert .nav__panneau>div{overflow:visible}
.menu-ouvert .nav__panneau-interieur{max-height:none;overflow:visible;padding:0 20px 10px}
.menu-ouvert .nav__sommaire{margin-top:-38px;margin-bottom:112px;margin-left:46%;grid-template-columns:135px minmax(210px,1fr) minmax(180px,1fr);gap:20px;position:relative;z-index:4;pointer-events:none}
.menu-ouvert .nav__sommaire>*{pointer-events:auto}
.menu-ouvert .nav__menu a{font-size:12.2px;line-height:2.05}
.menu-ouvert .nav__infos{font-size:12.4px;line-height:2.26}
.menu-ouvert .nav__cartes{grid-template-columns:1fr 1fr 1.38fr;gap:5px;padding-top:24px}
.menu-ouvert .prestation{min-width:0;min-height:209px}
.menu-ouvert .prestation--clair{border:0}
.menu-ouvert .nav__burger{position:relative;z-index:5}
.menu-ouvert .nav__actions{visibility:hidden}
.menu-ouvert .nav__burger{visibility:visible;opacity:.6}
.menu-ouvert .prestation--appel::before,.menu-ouvert .prestation--appel::after{content:'';position:absolute;bottom:60px;width:16px;height:4px;background:var(--beige);border-radius:4px}
.menu-ouvert .prestation--appel::before{left:0}.menu-ouvert .prestation--appel::after{right:0}
@media(min-width:900px){
 /* Panneau ouvert : largeur de la barre, pas de croix ni de selecteur de langue (cf. capture). */
 .menu-ouvert .nav__sommaire>.nav__langue{display:none}
 /* Les deux colonnes gardent 390px : sinon le sommaire et le courriel se coupent. */
 .menu-ouvert .nav__sommaire{margin-left:min(59.3%,100% - 390px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px}
 .menu-ouvert .nav__burger{visibility:hidden}
 .menu-ouvert .nav__burger:focus-visible{visibility:visible;opacity:1}
 .menu-ouvert .nav__cartes{gap:0}
 .menu-ouvert .nav__panneau-interieur{padding:0 16px 9px}
 .menu-ouvert .prestation .bouton{white-space:nowrap}
}
/* Sous 1500px les cartes retrecissent : le libelle du bouton se resserre et peut passer a deux lignes. */
@media(min-width:900px) and (max-width:1500px){
 .menu-ouvert .prestation .bouton{font-size:clamp(9px,.82vw,12.4px);padding-inline:6px;line-height:1.3;white-space:normal}
 .menu-ouvert .prestation p{font-size:clamp(9px,1.05vw,10.1px)}
}
@media(max-width:899px){
 .menu-ouvert .nav{top:0;left:0;transform:none;width:100%;max-height:100dvh;border-radius:0;padding:clamp(20px,4.65vw,30px);padding-bottom:max(30px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
 .menu-ouvert .nav__bar{display:flex;justify-content:space-between;align-items:flex-start;min-height:34px;padding:10px 0 0;margin-bottom:37px}
 .menu-ouvert .nav__principal{padding:0;min-height:0;display:block}
 .menu-ouvert .nav__logo{width:clamp(100px,27vw,150px);max-width:none;display:block}
 .menu-ouvert .nav__actions{padding:0;min-height:0}.menu-ouvert .nav__contact,.menu-ouvert .nav__liens{display:none}
 .menu-ouvert .nav__burger{opacity:1;width:34px;height:22px;border-radius:2px;position:relative}
 .menu-ouvert .nav__burger::after{content:'';position:absolute;inset:-11px}
 .menu-ouvert .nav__panneau-interieur{padding:0}
 .menu-ouvert .nav__sommaire{display:flex;flex-direction:column;margin:0;padding-top:0;gap:0}
 .menu-ouvert .nav__menu{order:0;margin-bottom:28px}
 .menu-ouvert .nav__menu a{font-size:clamp(12px,3vw,18px);line-height:2.07}
 .menu-ouvert .nav__infos{order:1;margin-bottom:25px;font-size:clamp(12px,3.1vw,18px)}
 .menu-ouvert .nav__sommaire>.nav__langue{order:2;font-size:clamp(14px,3.1vw,20px)}
 .menu-ouvert .nav__cartes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;padding-top:21px}
 .menu-ouvert .prestation{min-height:clamp(120px,31vw,252px);padding:10px}
 .menu-ouvert .prestation p{font-size:clamp(10px,1.9vw,13px);padding:0}
 .menu-ouvert .prestation__numero{font-size:clamp(6px,1.3vw,9px);top:-18px;white-space:normal;line-height:1.2}
 .menu-ouvert .prestation__image{min-height:40px;max-height:50px}
 .menu-ouvert .prestation__image .carte-media{height:44px}
 .menu-ouvert .prestation .bouton{font-size:clamp(7px,1.6vw,11px);min-height:26px;padding:5px 5px;white-space:normal;line-height:1.3}
 .menu-ouvert .prestation--appel{grid-column:1/-1;min-height:170px;margin-top:0}
 .menu-ouvert .prestation--appel .prestation__entete{font-size:clamp(11px,2.3vw,16px)}
 .menu-ouvert .prestation--appel .bouton{min-height:38px;font-size:11px}
 .menu-ouvert .prestation--appel::before,.menu-ouvert .prestation--appel::after{bottom:40px}
}
@media(min-width:900px){
 .menu-ouvert .nav__sommaire{margin-bottom:24px}
 .menu-ouvert .nav__actions{position:static}
 .menu-ouvert .nav__burger{position:absolute;right:5px;top:4px;width:22px;height:22px;background:transparent}
 .menu-ouvert .prestation{height:209px;min-height:209px;padding:14px 8px 8px}
 .menu-ouvert .prestation__image .carte-media{height:105px}
 .menu-ouvert .prestation__image{min-height:84px;max-height:110px}
 .menu-ouvert .prestation p{font-size:10.1px;line-height:1.39;padding-inline:5px}
 .menu-ouvert .prestation__numero{font-size:8.1px;top:-16px}
 .menu-ouvert .prestation .bouton{font-size:12.4px;min-height:36px}
}
@media(max-width:899px){
 .menu-ouvert .prestation__image .carte-media{height:44px}
}
/* Hidden exterior controls must not enlarge the open menu's scrollable area. */
.menu-ouvert .nav__langue-exterieure{display:none}
.menu-ouvert .nav{overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
.menu-ouvert .nav__panneau,.menu-ouvert .nav__panneau-interieur,.menu-ouvert .nav__sommaire,.menu-ouvert .nav__cartes{min-width:0;max-width:100%}

/* Hold the actual animated stage, without cloning canvases or videos. */
#services.is-cloud-pinned-host{z-index:44}
#services .is-cloud-pinned{position:fixed;inset:0;width:100%;height:100%;margin:0;z-index:1}

/* ==================================================================== */
/* Retours d’intégration, séquence 1 — points 01 à 25.                   */
/* Chaque bloc porte le numéro du point auquel il répond.                */
/* ==================================================================== */

/* 02 · Repère commun : la hauteur de la barre sert d’ancre verticale.
       Elle reprend la valeur déjà posée sur les deux plaques, sans y toucher. */
.nav{--barre-h:clamp(44px,2.9vw,56px);--nav-decalage:0px;transform:translateX(-50%) translateY(var(--nav-decalage));transition:opacity .2s ease,transform .2s ease}
@media(max-width:767px){.nav{--barre-h:49px}}

/* 05 · On descend : la barre s’efface en remontant de quelques pixels.
       On remonte : elle revient. En haut de page, elle reste affichée. */
.nav--masquee{--nav-decalage:-10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
/* Le menu ouvert replace la barre : elle ne doit pas glisser pendant ce temps. */
.menu-ouvert .nav{transition:none}

/* 06 · Au-dessus d’une zone claire, le fond de la barre passe en Ink Black
       et le texte comme les icônes passent en clair. Passage en douceur. */
.nav__principal,.nav__actions,.nav__burger{transition:background-color .35s ease,color .35s ease}
.nav__burger span:not(.sr-only){transition:background-color .35s ease}
body:not(.menu-ouvert) .nav--barre-sombre .nav__principal,
body:not(.menu-ouvert) .nav--barre-sombre .nav__actions{background:#111;color:var(--beige)}
body:not(.menu-ouvert) .nav--barre-sombre .nav__burger{background:#faf8f424}
body:not(.menu-ouvert) .nav--barre-sombre .nav__burger span:not(.sr-only){background:var(--beige)}
/* Les deux encoches des extrémités sont de vraies encoches : la page se voit
   au travers, quelle que soit la couleur du fond. Le trait n’est donc plus
   peint ; il est découpé dans les deux plaques par un masque, pour que la
   partie posée sur la plaque soit aussi transparente que celle qui dépasse. */
.nav{--encoche-l:20px;--encoche-h:4px}
@media(max-width:767px){.nav{--encoche-l:17px;--encoche-h:5px}}
.nav__bar::before,.nav__bar::after{background:transparent}
.nav__principal,.nav__actions{
 --plaque:linear-gradient(#000,#000);
 --encoche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='4'%3E%3Crect width='20' height='4' rx='2' fill='%23000'/%3E%3C/svg%3E");
 -webkit-mask-image:var(--plaque),var(--encoche);mask-image:var(--plaque),var(--encoche);
 -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
 /* La première couche déborde largement de la plaque : le joint orange central,
    dessiné hors de celle-ci, reste entier et visible. */
 -webkit-mask-size:calc(100% + 160px) calc(100% + 40px),var(--encoche-l) var(--encoche-h);
 mask-size:calc(100% + 160px) calc(100% + 40px),var(--encoche-l) var(--encoche-h);
 -webkit-mask-composite:xor;mask-composite:exclude}
.nav__principal{-webkit-mask-position:-80px -20px,-9px center;mask-position:-80px -20px,-9px center}
.nav__actions{-webkit-mask-position:-80px -20px,calc(100% + 13px) center;mask-position:-80px -20px,calc(100% + 13px) center}
/* Le joint orange entre « NOUS CONTACTER » et le reste de la barre reste
   visible en toutes circonstances, y compris quand la barre passe en Ink
   Black : c’est un trait plein, pas une encoche. */
.nav__actions::before{background:#c42d23;opacity:1;z-index:3}
/* Menu ouvert : la barre devient un panneau plein, sans encoche. */
.menu-ouvert .nav__principal,.menu-ouvert .nav__actions{-webkit-mask-image:none;mask-image:none}

/* 03 · Survol des liens de la barre : rectangle gris clair aux coins
       arrondis, fondu court (≈ 0,15 s). Le bouton menu fonce au survol.
       Dans le menu ouvert, les liens se soulignent. */
@media(hover:hover) and (min-width:900px){
 .nav__liens{gap:clamp(6px,3.2vw,58px)}
 .nav__liens a,.nav__contact{padding:9px 14px;border:0;border-radius:5px;transition:background-color .15s ease,color .15s ease}
 .nav__liens a:hover,.nav__contact:hover{background:#efedea}
 .nav__burger{transition:background-color .15s ease}
 .nav__burger:hover{background:#e6c3bf}
 .menu-ouvert .nav__burger:hover{background:#0000000f}
 .nav__menu a:hover{color:inherit;transform:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
 body:not(.menu-ouvert) .nav--barre-sombre .nav__liens a:hover,
 body:not(.menu-ouvert) .nav--barre-sombre .nav__contact:hover{background:#2b2b2b}
 body:not(.menu-ouvert) .nav--barre-sombre .nav__burger:hover{background:#faf8f44d}
}
/* Le rectangle de survol déborde du texte de 14 px : la plaque rend ces
   14 px pour que « NOUS CONTACTER » reste là où la maquette le place. */
@media(hover:hover) and (min-width:1101px){.nav__actions{padding-left:calc(clamp(24px,2.55vw,46px) - 14px)}}
@media(hover:hover) and (min-width:900px) and (max-width:1100px){.nav__actions{padding-left:4px}}

/* 04 · Horloges Paris / Guangzhou : Supply Light 15 px, interlettrage 10 %,
       interligne 23 px, les deux lignes centrées sur la barre. */
.nav__horloges{top:calc(var(--barre-h)/2);transform:translateY(-50%);font:300 clamp(11px,.78vw,15px)/1.5333 var(--f-repere);letter-spacing:.1em}
.nav__langue-exterieure{top:calc(var(--barre-h)/2);transform:translateY(-50%)}

/* 11 · Le sélecteur de langue s’ouvre au survol, la flèche se retourne. */
.nav__chevron{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;flex:none;margin-left:5px}
.nav__langue[open] .nav__chevron{transform:translateY(2px) rotate(225deg)}

/* 10 · Le curseur « main » n’apparaît que sur la planète ; ailleurs, le
       curseur normal du système. globe.js pose le curseur au survol. */
.hero__globe{cursor:auto}
.hero__globe.is-dragging{cursor:grabbing}

/* 07 · Bouton principal : fond blanc au repos, #EC622B au survol.
   08 · Le texte garde sa largeur pendant le brouillage. */
:root{--orange-survol:#EC622B}
main .bouton,.projet-formulaire>summary.bouton{
 background:#fff;color:#111;border-color:transparent;
 transition:background-color .4s cubic-bezier(.25,.8,.3,1),color .4s cubic-bezier(.25,.8,.3,1),border-color .4s ease}
main .bouton--sombre{background:#111;color:var(--beige)}
main .bouton--ligne{background:transparent;color:inherit;border-color:#d4d0ca}
main .bouton:hover,main .bouton:focus-visible,
.projet-formulaire>summary.bouton:hover,.projet-formulaire>summary.bouton:focus-visible{
 background:var(--orange-survol);color:#fff;border-color:transparent;transition-duration:.35s}
.bouton__texte.est-brouille{display:inline-block;white-space:pre}

/* 13 · « Vous prenez votre projet au sérieux. Nous aussi. »
       Manrope Bold 80 px, interligne 150 %, interlettrage 2 %,
       et un peu plus d’air sous la phrase. */
.approche h2{font:700 clamp(30px,4.17vw,80px)/1.5 var(--f-titre);letter-spacing:.02em;max-width:24ch;margin:0 auto}
.approche h2 em{color:inherit}
.approche h2 .mot{display:inline-block;color:rgba(17,17,17,.07)}
.approche{padding-bottom:18.1vw}
@media(max-width:899px){.approche{padding-bottom:22.6vw}}

/* 15 · Les chiffres reçoivent la même frange rouge que les autres textes. */
.chiffre dt{--ink-final:#111}
.chiffre dt.encre-chiffre{
 color:transparent;-webkit-text-fill-color:transparent;
 background-image:linear-gradient(90deg,var(--ink-final) 0%,var(--ink-final) 30%,#ff2a12 40%,transparent 50%,transparent 100%);
 background-repeat:no-repeat;background-size:350% 100%;background-position:100% 0;
 background-clip:text;-webkit-background-clip:text}

/* 16 · Plus d’espace avant « Comment se déroule votre projet. »
   18 · Et plus d’air entre les cartes de la méthode et « Nos services ». */
.methode{padding-top:clamp(110px,10vw,190px);padding-bottom:clamp(70px,7vw,135px)}
@media(max-width:899px){.methode{padding-top:clamp(90px,16vw,140px);padding-bottom:clamp(55px,10vw,100px)}}

/* 17 · Les trois cartes : animations ≈ 50 % plus grandes, toujours centrées,
       et les trois titres commencent à la même hauteur quelle que soit la
       longueur du texte. Le fond clair des visuels se fond dans la carte. */
.etape__visuel{flex:0 0 auto;width:100%;height:clamp(220px,25vw,420px);min-height:0;max-height:none}
.etape__visuel .carte-media{height:100%;max-height:none}
.etape__visuel .carte-media>video,.etape__visuel .carte-media>img,
.etape__visuel>video,.etape__visuel>img{height:100%;max-height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:899px){.etape__visuel{height:clamp(240px,42vw,390px)}}
@media(max-width:767px){.etape__visuel{height:clamp(230px,62vw,330px)}}

/* 23 · Section 5 : arrondis de la maquette, et sur téléphone les deux
       cartes ont exactement la même largeur. */
.accompagnements__offres{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.accompagnements__offres{grid-template-columns:minmax(0,450fr) minmax(0,550fr);gap:30px}}
.offre{width:100%;justify-self:stretch;border-radius:20px}
.bandeau{border-radius:20px}

/* 24 · Les deux animations sont plus grandes ; sur les deux mains, un fondu
       blanc à gauche et à droite pour qu’elles se fondent dans la carte. */
.offre__animation,.carte-media.offre__animation{height:clamp(150px,14vw,210px)}
.offre--clair .offre__animation>video,.offre--clair .offre__animation>img{
 mix-blend-mode:multiply;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}

/* 21 · Le voile noir à 15 % sur le paquebot n’est plus nécessaire. */
.sc-phone .m-overlay{opacity:0}

/* 18 · Les trois textes d’entrée de la section animée sont retirés :
       le bandeau qui les portait ne doit plus réserver de hauteur. */
.sc-phone .m-intro:empty{height:0;min-height:0;padding:0;gap:0}

/* Terrain · galerie en trois colonnes, photos de hauteurs libres, comme la
   maquette : le titre et les deux pastilles partagent la même ligne. */
.terrain__entete{grid-template-columns:auto 1fr;align-items:start;gap:clamp(12px,.95vw,18px);margin-bottom:clamp(36px,5.5vw,106px)}
.terrain h2{font-size:clamp(30px,4vw,76px);line-height:.98}
.terrain h2 span{display:block}
.terrain h2 span:last-child{color:#82827e}
/* Un filet clair ferme l'en-tete et court sur toute la largeur de la galerie,
   gouttieres comprises : il est porte par la grille elle-meme. */
.galerie{display:grid;grid-template-columns:500fr 600fr 620fr;gap:10px;align-items:start;border-top:1px solid #eaeae9}
.galerie__colonne{min-width:0;display:grid;gap:0;background:#fff;border-radius:8px;overflow:hidden;padding-top:clamp(14px,1.7vw,32px)}
.galerie figure{margin:0;min-width:0;width:100%}
.galerie__cadre{aspect-ratio:auto;border-radius:8px}
.galerie__cadre img{display:block;width:100%;height:auto;object-fit:cover}
.galerie figcaption{position:relative;margin:0;padding:12px 32px 12px 20px;font-size:12px;line-height:1.5;color:#111}
.galerie figcaption b{display:block;margin-bottom:2px;color:#77716a;font-weight:400}
.galerie figcaption::after{content:'';position:absolute;right:20px;bottom:18px;width:7px;height:7px;border-radius:50%;background:#111}
.terrain__boutons .pastille{background:#111;color:var(--beige);border-color:#111;border-radius:4px;white-space:nowrap;padding:clamp(13px,1.35vw,26px) clamp(16px,1.85vw,34px);font-size:clamp(11px,.9vw,16px)}
.terrain__boutons .pastille:last-child{background:#fff;color:#111;border-color:#fff}
.terrain__boutons .pastille:hover{background:var(--orange-survol);border-color:var(--orange-survol);color:#fff}
/* Maquette telephone : une seule colonne blanche, continue, qui porte les neuf
   photos dans l'ordre du document — ni gouttiere ni filet entre elles. Le fond
   blanc passe donc de la colonne a la grille, et les colonnes s'effacent. */
@media(max-width:899px){
 .terrain__entete{grid-template-columns:1fr;gap:clamp(12px,4vw,20px);margin-bottom:clamp(28px,14.7vw,70px)}
 .terrain__boutons{gap:8px}
 /* Les deux pastilles tiennent sur une seule ligne, comme sur la maquette :
    elles se replient tout de meme si la traduction les allonge. */
 .terrain__boutons .pastille{padding:9px 10px;font-size:clamp(8px,2.2vw,10px);gap:6px;min-width:0}
 .galerie{grid-template-columns:minmax(0,1fr);gap:0;border-top:0;background:#fff;border-radius:8px;overflow:hidden;padding-top:10px}
 .galerie__colonne{display:contents}
}
.offre__rythme small{font:400 11px/1.5 var(--f-texte);white-space:nowrap}
html[lang=en] .accompagnements h2{max-width:25ch;text-wrap:balance}
.offre li{min-width:0}
.offre li::before{content:'✓';display:grid;place-items:center;flex:0 0 15px;width:15px;height:15px;margin-top:2px;border-radius:50%;background:#444;color:#fff;font-size:9px;opacity:1}
.offre--orange li::before{background:#ffffff80}
.offre--orange .bouton:hover,.bandeau .bouton:hover{background:var(--orange-survol);color:#fff}

@media(prefers-reduced-motion:reduce){
 .approche h2 .mot{color:inherit}
 .chiffre dt.encre-chiffre{color:inherit;-webkit-text-fill-color:currentColor;background:none}
 .nav,.nav__principal,.nav__actions,.nav__burger,.nav__chevron{transition:none}
 .nav--masquee{opacity:1;visibility:visible;pointer-events:auto;--nav-decalage:0px}
}

/* 01 · Sur telephone, lombre portee du hero dessinait un fantome du texte
   pendant le balayage : la frange rouge reste seule a lecran. */
sc-ink-word{text-shadow:none}
/* Les pastilles du bloc terrain restent pleines, comme sur la maquette, meme
   tant que les liens ne sont pas renseignes. */
.terrain__boutons .pastille[aria-disabled=true]{opacity:1;cursor:default}

/* Une seule animation pilote le panneau ; la croix reste toujours accessible. */
.nav__panneau{transition:none}
.menu-ouvert .nav__burger{visibility:visible;opacity:1;z-index:6}
.nav__burger span:not(.sr-only){transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s,background-color .35s}
.menu-ouvert .nav__actions{z-index:6}
.nav__menu a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav__menu a::after{content:'↗';font-size:1em;opacity:0;transform:translate(-4px,4px);transition:opacity .18s,transform .18s}
.nav__menu a:hover::after,.nav__menu a:focus-visible::after{opacity:1;transform:none}
.nav__langue summary{align-items:center}
.nav .nav__logo{display:flex;align-items:center;gap:6px}
.nav .nav__logo img:not(.nav__embleme){width:calc(100% - 30px);min-width:0}
.nav .nav__logo .nav__embleme{width:24px;height:24px;flex:none;object-fit:contain}
.menu-ouvert .nav__infos{padding-right:24px}
@media(max-width:899px){.menu-ouvert .nav{min-height:100dvh}.menu-ouvert .nav__infos{padding-right:0}}
@media(hover:none){.nav__menu a::after{opacity:1;transform:none}}
.sc-phone .m-service-label{display:block;white-space:nowrap;font:800 min(calc(204*var(--mu)),calc(.286*var(--mh)))/.75 var(--f-titre);letter-spacing:-.04em}
@media(prefers-reduced-motion:reduce){.nav__burger span:not(.sr-only),.nav__menu a::after{transition:none}}

/* 17 (suite) · La carte de la méthode s’arrête sous son texte : la hauteur
   plancher de 43 vw laissait un grand vide blanc en bas sur grand écran.
   Les trois cartes restent de même hauteur, alignées par la grille. */
.methode__etapes{align-items:stretch}
.etape{min-height:0;padding:16px 14px 22px}
.etape p{margin-bottom:0}
@media(max-width:899px){.etape{min-height:0;padding:22px 22px 26px}}

/* Section 2 · sur grand écran, la phrase occupe 60 % de la largeur de l’écran :
   les retours à la ligne forcés sautent et le texte se répartit tout seul. */
@media(min-width:900px){
 .approche h2{max-width:none;width:60vw;margin-inline:auto}
 .approche h2 br{display:none}
 .approche h2 em{display:inline}
}

/* Carte d’appel du menu (« Présenter votre projet ») : reprise de la maquette.
   Deux lignes en haut, un grand aplat dégradé, un bouton pleine largeur en bas
   et les deux encoches claires juste au-dessus de lui. */
.menu-ouvert .prestation--appel{--cta-h:47px;--cta-marge:10px;padding:12px var(--cta-marge) var(--cta-marge);justify-content:space-between;border-radius:4px}
.menu-ouvert .prestation--appel .prestation__entete{font:400 12px/1.3 var(--f-texte);gap:12px;color:#fff;padding:0 2px;align-items:flex-start}
.menu-ouvert .prestation--appel .bouton{
 width:100%;min-height:var(--cta-h);padding:12px 10px;border:0;border-radius:3px;
 background:#ffffff2e;backdrop-filter:blur(2px);color:#fff;
 font:400 13px/1 var(--f-repere);letter-spacing:.14em;white-space:nowrap}
.menu-ouvert .prestation--appel .bouton:hover,
.menu-ouvert .prestation--appel .bouton:focus-visible{background:#ffffff47;color:#fff}
/* Les deux encoches sont croquées dans la carte, à fleur de bord gauche et
   droit : le dégradé est réellement découpé, la page se voit au travers.
   Un trait beige posé par-dessus n'aurait tenu que sur un fond beige. */
.menu-ouvert .prestation--appel{
 --croc-l:17px;--croc-h:4px;
 --croc-y:calc(100% - var(--cta-h) - var(--cta-marge) - 7px);
 --croc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='4'%3E%3Crect width='20' height='4' rx='2' fill='%23000'/%3E%3C/svg%3E");
 -webkit-mask-image:linear-gradient(#000,#000),var(--croc),var(--croc);
 mask-image:linear-gradient(#000,#000),var(--croc),var(--croc);
 -webkit-mask-repeat:no-repeat,no-repeat,no-repeat;
 mask-repeat:no-repeat,no-repeat,no-repeat;
 -webkit-mask-size:100% 100%,var(--croc-l) var(--croc-h),var(--croc-l) var(--croc-h);
 mask-size:100% 100%,var(--croc-l) var(--croc-h),var(--croc-l) var(--croc-h);
 -webkit-mask-position:0 0,0 var(--croc-y),100% var(--croc-y);
 mask-position:0 0,0 var(--croc-y),100% var(--croc-y);
 -webkit-mask-composite:xor;mask-composite:exclude}
/* Le trait posé n'a plus lieu d'être, et .grain::after ne doit rien ajouter. */
.menu-ouvert .prestation--appel::before,
.menu-ouvert .prestation--appel::after{display:none}
@media(max-width:899px){
 .menu-ouvert .prestation--appel{--cta-h:44px;--cta-marge:10px}
 .menu-ouvert .prestation--appel .bouton{min-height:var(--cta-h);font-size:12px;letter-spacing:.12em}
 .menu-ouvert .prestation--appel .prestation__entete{font-size:clamp(11px,2.3vw,13px)}
}

/* Galerie terrain, finitions.
   Tant que les photos ne sont pas déposées dans img/terrain/, le cadre n'avait
   aucune hauteur et les colonnes blanches apparaissaient vides : le substitut
   porte désormais son propre format. */
.galerie__substitut{aspect-ratio:4/3;height:auto;min-height:150px;border-radius:0;font-size:10px}
/* La carte blanche porte seule l'arrondi : les photos sont à fleur de bord. */
.galerie__cadre{border-radius:0;background:#efece6}
/* La maquette ne separe pas les photos : la colonne blanche est d'un tenant. */
.galerie figcaption{padding:14px 34px 16px 20px}
.galerie figcaption b{font:400 10px/1.8 var(--f-repere);letter-spacing:.06em;color:#77716a;text-transform:uppercase}
.galerie figcaption span{display:block;max-width:36ch}
.galerie figure:hover .galerie__cadre img{transform:scale(1.05)}
.galerie__cadre img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* Galerie terrain sur telephone. Ce bloc vient apres les finitions ci-dessus :
   a specificite egale, c'est la derniere regle qui l'emporte, et les reglages
   telephone etaient jusqu'ici annules par elles. */
@media(max-width:899px){
 /* Le titre occupe presque toute la largeur utile, comme sur la maquette. */
 .terrain h2{font-size:clamp(32px,11.8vw,60px)}
 /* La carte blanche est portee par la grille : les photos n'en ont plus. */
 .galerie figure{background:none;border-radius:0;box-shadow:none}
 .galerie figcaption{padding:12px 26px 14px 14px;font-size:13px;line-height:1.4}
 .galerie figcaption b{font:400 10px/1.6 var(--f-repere);letter-spacing:.04em;margin-bottom:2px;color:#77716a;text-transform:uppercase}
 .galerie figcaption span{max-width:none}
 .galerie figcaption::after{right:14px;bottom:16px;width:6px;height:6px}
 .galerie__substitut{min-height:110px;font-size:9px}
}
@media(max-width:380px){
 .galerie figcaption{padding:10px 22px 12px 11px;font-size:12px}
 .galerie figcaption::after{right:11px;bottom:14px}
}

/* ==================================================================== */
/* Barre de navigation : croix, ouverture et joint orange.               */
/* ==================================================================== */

/* Joint orange entre « Nous contacter » et le reste de la barre.
   Il était dessiné hors de la plaque, donc rogné par le masque des encoches.
   mask-clip:no-clip le sauvait sur Chrome et Firefox mais pas sur Safari, qui
   ne connaît pas cette valeur et revient à border-box. Le joint quitte donc la
   plaque : il est porté par la barre elle-même, qui n'est jamais masquée.
   Sa position est calculée sur la grille : colonnes 3fr / 1fr, gouttière 4 px,
   donc la gouttière commence à 75 % − 3 px et son milieu est à 75 % − 1 px. */
.nav__principal,.nav__actions{-webkit-mask-clip:border-box;mask-clip:border-box}
.nav__actions::before{display:none}
.nav__bar::after{display:none}
.nav__bar::before{
 content:'';display:block;position:absolute;z-index:3;
 top:calc(50% - 2px);left:calc(75% - 11px);right:auto;
 width:20px;height:4px;border-radius:4px;background:#c42d23}
.menu-ouvert .nav__bar::before{display:none}
/* Téléphone : colonnes 37 % / 1fr, gouttière 3 px, trait de 25 px. */
@media(max-width:767px){
 .nav__bar::before{top:calc(50% - 2.5px);left:calc(37% - 11px);width:25px;height:5px}
}

/* Ordinateur : pas de croix dans la barre, le menu se ferme par un clic
   en dehors, par Échap ou en suivant un lien. Elle revient au clavier. */
@media(min-width:900px){
 .menu-ouvert .nav__burger{visibility:hidden;opacity:0;pointer-events:none}
 .menu-ouvert .nav__burger:focus-visible{visibility:visible;opacity:1;pointer-events:auto}
}

/* Téléphone : une vraie croix, deux traits de même longueur qui se croisent
   au centre du bouton, avec une zone tactile confortable. */
@media(max-width:899px){
 .menu-ouvert .nav__burger{width:36px;height:36px;gap:0;border-radius:4px;background:transparent;position:relative;opacity:1;visibility:visible}
 .menu-ouvert .nav__burger span:not(.sr-only){position:absolute;top:50%;left:50%;width:22px;height:2px;margin:-1px 0 0 -11px;border-radius:2px;background:var(--noir)}
 .menu-ouvert .nav__burger span:nth-child(1){transform:rotate(45deg)}
 .menu-ouvert .nav__burger span:nth-child(2){transform:rotate(-45deg);opacity:1}
 .menu-ouvert .nav__burger::after{content:'';position:absolute;inset:-6px}
}

/* Ouverture fluide, ordinateur comme téléphone : le panneau se déplie et son
   contenu suit d'un souffle. */
.nav__panneau{transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1),opacity .26s ease,visibility .42s}
.nav__panneau-interieur>*{opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.menu-ouvert .nav__panneau-interieur>*{opacity:1;transform:none;transition-delay:.06s}
@media(max-width:899px){
 .nav,.menu-ouvert .nav{transition:
  opacity .2s ease,
  transform .42s cubic-bezier(.22,1,.36,1),
  top .42s cubic-bezier(.22,1,.36,1),
  left .42s cubic-bezier(.22,1,.36,1),
  width .42s cubic-bezier(.22,1,.36,1),
  max-height .42s cubic-bezier(.22,1,.36,1),
  padding .42s cubic-bezier(.22,1,.36,1),
  border-radius .3s ease,
  background-color .3s ease}
}
/* Le masquage au défilement garde sa propre cadence (0,3 s / 0,2 s). */
.nav--masquee{transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
@media(prefers-reduced-motion:reduce){
 .nav,.menu-ouvert .nav,.nav__panneau,.nav__panneau-interieur>*{transition:none}
 .nav__panneau-interieur>*{opacity:1;transform:none}
}

/* Mobile : contenu immédiatement lisible, sans fondu ni balayage orange. */
@media(max-width:899px){
 .reveal,.js-reveal,.encre-attente,.encre-visible,.encre-chiffre{
  opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;clip-path:none!important;
 }
 sc-ink-word,.encre-chiffre{
  color:var(--ink-final,inherit)!important;background-image:none!important;-webkit-text-fill-color:currentColor!important;
 }
 /* La phrase de « Notre approche » se noircit mot a mot au defilement, sur
    telephone comme sur grand ecran : ses mots gardent leur teinte propre. */
 .mot-revele{opacity:1;transition:none}
}

/* Une seule scene visible pendant le passage mobile, sans retirer sa hauteur. */
.passage-nuages__support{position:fixed;inset:0;z-index:1;pointer-events:none}
.passage-nuages__support[hidden]{display:none}
@media(max-width:899px){
 #services.is-cloud-covered{visibility:hidden}
 #services.is-cloud-covered *{visibility:hidden!important}
 #accompagnements{isolation:isolate;background:var(--beige,#faf8f4)}
}