/* PROSYB v6 — gabarit ACCUEIL (index.html) : sections propres à la page d'accueil.
Le socle (jetons, typo, en-tête, contact, pied, entrées) est dans site-v6.css. */
/* ========================================================================== */
/* 4. HERO — le site livré */
/* ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
padding:120px 0 clamp(28px,4vw,48px);overflow:hidden;background:var(--nuit-0)}
.hero__photo{position:absolute;inset:0;z-index:0}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__voile{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,rgba(10,15,34,.94) 0%,rgba(10,15,34,.78) 34%,rgba(10,15,34,.18) 66%,rgba(10,15,34,.05) 100%),
linear-gradient(0deg,rgba(10,15,34,.96) 0%,rgba(10,15,34,0) 42%)}
.hero .wrap{position:relative;z-index:2}
.hero__eyebrow{font-family:var(--mono);font-size:12.5px;color:var(--t-64);margin:0 0 26px;display:flex;align-items:center;gap:14px}
.hero__eyebrow::before{content:"";width:40px;height:1px;background:var(--filet)}
.hero h1{max-width:17ch}
.hero .lead{margin:28px 0 36px}
.hero__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(48px,7vh,84px) 0 0;border-top:1px solid var(--t-20)}
.hero__meta div{padding:18px 24px 0 0;font-size:14px;color:var(--t-64);line-height:1.5}
.hero__meta div+div{padding-left:24px;border-left:1px solid var(--t-10)}
.hero__meta strong{display:block;font-family:var(--titre);font-weight:700;font-size:17px;color:var(--t);margin-bottom:4px}
/* Nomenclature : l'ancienne « carte architecture système », lue comme une légende de plan */
.nomen{margin-top:clamp(34px,5vh,56px);border:1px solid var(--t-20);background:rgba(10,15,34,.82)}
.nomen__tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 18px;border-bottom:1px solid var(--t-20)}
.nomen__tete h3{font-size:14px;font-family:var(--sans);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nomen__tete span{font-family:var(--mono);font-size:12px;color:var(--t-40)}
.nomen ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.nomen li{padding:14px 18px 16px;border-right:1px solid var(--t-10);position:relative}
.nomen li:last-child{border-right:0}
.nomen .label{font-family:var(--mono);font-size:12.5px;color:var(--cyan);margin-bottom:6px;display:flex;gap:8px}
.nomen .label i{font-style:normal;color:var(--t-40)}
.nomen .desc{font-size:13.5px;line-height:1.5;color:var(--t-80)}
.nomen__pied{padding:10px 18px;border-top:1px solid var(--t-20);font-family:var(--mono);font-size:12px;color:var(--t-64)}
@media (max-width:1024px){.nomen ol{grid-template-columns:repeat(2,minmax(0,1fr))}.nomen li{border-bottom:1px solid var(--t-10)}.nomen li:nth-child(2n){border-right:0}}
@media (max-width:640px){
.hero{padding-top:calc(72px + 17svh);justify-content:flex-start}
.hero .lead{margin:20px 0 26px}
.hero__eyebrow{margin-bottom:16px}
.hero__photo{bottom:auto;height:calc(72px + 34svh)}
.hero__voile{bottom:auto;height:calc(72px + 34svh);background:linear-gradient(0deg,rgba(10,15,34,1) 0%,rgba(10,15,34,.72) 34%,rgba(10,15,34,.1) 70%,rgba(10,15,34,.35) 100%)}
.hero__photo img{object-position:64% 50%}
.hero__meta{grid-template-columns:1fr}
.hero__meta div,.hero__meta div+div{padding:14px 0;border-left:0;border-bottom:1px solid var(--t-10)}
.nomen ol{grid-template-columns:1fr}.nomen li{border-right:0}
.nomen__tete{flex-direction:column;gap:2px}
}
/* ========================================================================== */
/* 5. CLIENTS — signatures fixes */
/* ========================================================================== */
.clients{padding-block:clamp(44px,6vw,72px)}
.clients .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;align-items:center}
.clients h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--e)}
.clients h2 small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--e-56);margin-top:6px}
.clients ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid var(--bord)}
.clients li{display:flex;align-items:center;justify-content:center;min-height:84px;padding:12px 18px;border-right:1px solid var(--bord)}
.clients img{max-height:30px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:860px){
.clients .wrap{grid-template-columns:1fr}
.clients ul{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--bord)}
.clients li{border-bottom:1px solid var(--bord);min-height:72px}
}
@media (max-width:480px){.clients ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ========================================================================== */
/* 6. MANIFESTE — trois piquages sur un même jeu de barres */
/* ========================================================================== */
.manifeste{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:start}
.manifeste__quote{font-family:var(--titre);font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.18;letter-spacing:-.022em;margin:0;max-width:20ch}
.manifeste__quote .accent{color:var(--indigo)}
.barres{position:relative;margin:0;padding:0 0 0 44px;list-style:none}
.barres::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--cuivre);transform-origin:50% 0;transform:scaleY(var(--jdb,1))}
.barres li{position:relative;padding:4px 0 34px}
.barres li:last-child{padding-bottom:0}
.barres li::before{content:"";position:absolute;left:-44px;top:15px;width:34px;height:1px;background:var(--e-56);transform-origin:0 50%;transform:scaleX(var(--pq,1))}
.barres li::after{content:"";position:absolute;left:-12px;top:11px;width:9px;height:9px;border:1px solid var(--e-56);background:var(--clair);opacity:var(--pq,1)}
.barres .num{font-family:var(--mono);font-size:12.5px;color:var(--indigo);display:block;margin-bottom:6px}
.barres h3{font-size:20px;margin-bottom:8px}
.barres p{color:var(--e-72);max-width:46ch}
@media (max-width:860px){.manifeste{grid-template-columns:1fr}}
/* ========================================================================== */
/* 7. EXPERTISES — nomenclature des lots */
/* ========================================================================== */
.lots{list-style:none;margin:0;padding:0;border-top:1px solid var(--t-20)}
.lot-l{position:relative;display:grid;grid-template-columns:76px minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:20px clamp(18px,3vw,48px);
padding:30px 0;border-bottom:1px solid var(--t-20);align-items:start}
.lot-l__code{font-family:var(--mono);font-size:12.5px;color:var(--cyan);padding-top:6px}
.lot-l h3{font-size:clamp(21px,1.9vw,27px)}
.lot-l h3 small{display:block;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0;color:var(--t-40);margin-top:8px}
.lot-l p{color:var(--t-80);max-width:52ch}
.lot-l .lien{margin-top:16px}
.lot-l__img{aspect-ratio:3/2;overflow:hidden;background:var(--nuit)}
.lot-l__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){.lot-l:hover .lot-l__img img{transform:scale(1.04)}}
.lot-l__branche{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--filet);transform-origin:0 50%;transform:scaleX(0);opacity:0}
.js .lot-l__branche{opacity:1}
.lots-assoc{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(18px,3vw,48px)}
.lots-assoc h3{font-size:18px}
.lots-assoc h3 + p{color:var(--t-64);font-size:15px;margin-top:10px;max-width:40ch}
.lots-assoc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lots-assoc li{border-top:1px solid var(--t-20);padding-top:14px}
.lots-assoc li figure{margin:0 0 14px;aspect-ratio:3/2;overflow:hidden}
.lots-assoc li img{width:100%;height:100%;object-fit:cover}
.lots-assoc li b{display:block;font-family:var(--titre);font-size:17px;margin-bottom:4px}
.lots-assoc li span{font-size:14px;color:var(--t-64);display:block}
.lots-assoc li .mono{font-size:12px;color:var(--cyan);display:block;margin-bottom:6px}
.lots-assoc li .lien{margin-top:10px;font-size:13.5px}
@media (max-width:1024px){
.lot-l{grid-template-columns:60px minmax(0,1fr) minmax(0,1fr)}
.lot-l__img{grid-column:2 / -1;max-width:520px}
}
@media (max-width:640px){
.lot-l{grid-template-columns:1fr;gap:12px;padding:26px 0}
.lot-l__img{grid-column:auto;order:-1;max-width:none}
.lots-assoc,.lots-assoc ul{grid-template-columns:1fr}
}
/* ========================================================================== */
/* 8. SÉQUENCE — lot par lot (la scène filmée de v4/v5, devenue métier) */
/* Par défaut : empilement statique lisible. .seq--film (posée par le JS sur */
/* grand écran sans mouvement réduit) transforme l'empilement en scène fixe. */
/* ========================================================================== */
.seq{position:relative;background:var(--nuit-0)}
.seq__intro{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.lot{position:relative;margin:0 0 clamp(56px,8vw,96px)}
.lot__plan{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--nuit)}
.lot__plan img{width:100%;height:100%;object-fit:cover}
.lot__hud{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:3/2;pointer-events:none;overflow:visible}
.lot__texte{padding:26px 0 0;max-width:62ch}
.lot__meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-family:var(--mono);font-size:12px;color:var(--t-64)}
.lot__meta b{font-weight:400;color:var(--cyan)}
.lot__meta hr{width:48px;height:1px;border:0;margin:0;background:var(--filet)}
.lot__texte h2,.lot__texte h3{font-size:clamp(28px,3.4vw,50px);line-height:1.08;letter-spacing:-.026em;margin-bottom:18px}
.lot__texte p{color:var(--t-80);font-size:16.5px;max-width:46ch}
/* habillage technique (SVG) : traits fins, aucun halo */
.hud-t{fill:none;stroke:rgba(233,236,245,.72);stroke-width:1.2}
.hud-f{fill:none;stroke:rgba(233,236,245,.32);stroke-width:1;stroke-dasharray:3 4}
.hud-c{fill:none;stroke:var(--cyan);stroke-width:1.4}
.hud-cu{fill:none;stroke:var(--cuivre);stroke-width:2.2}
.hud-p{fill:var(--nuit-0);stroke:rgba(233,236,245,.8);stroke-width:1.2}
.hud-on{fill:var(--cuivre);stroke:var(--cuivre)}
.hud-txt{font-family:var(--mono);font-size:11px;fill:rgba(233,236,245,.78);letter-spacing:.02em}
.hud-txt--c{fill:var(--cyan)}
.hud-cadre{fill:none;stroke:rgba(233,236,245,.85);stroke-width:1.4}
.seq__voile{display:none}
.lot__legende{margin:10px 0 0;padding-inline:var(--gut);font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--t-64)}
.lot__legende b{font-weight:400;color:var(--cyan)}
@media (min-width:1025px){.seq--film .lot__legende{display:none}.seq:not(.seq--film) .lot__legende{padding-inline:0}}
@media (min-width:1025px){
.seq--film .seq__scene{position:sticky;top:0;height:100svh;overflow:hidden}
.seq--film .lot{position:absolute;inset:0;margin:0;visibility:hidden}
.seq--film .lot.vu{visibility:visible}
.seq--film .lot__plan{position:absolute;inset:0;aspect-ratio:auto}
.seq--film .lot.vu .lot__plan{will-change:clip-path}
.seq--film .seq__voile{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(90deg,rgba(10,15,34,.9) 0%,rgba(10,15,34,.66) 30%,rgba(10,15,34,.1) 60%,rgba(10,15,34,0) 100%)}
.seq--film .lot__hud{z-index:3;left:auto;right:0;width:54%;height:100%;aspect-ratio:auto;opacity:0}
.seq--film .lot__texte{position:absolute;z-index:4;left:var(--gut);top:50%;transform:translateY(calc(-50% + var(--ty,0px)));
max-width:min(44ch,40vw);padding:0;opacity:0}
.seq--film .lot__texte h2,.seq--film .lot__texte h3{font-size:clamp(34px,3.9vw,60px)}
.seq__jalons{position:absolute;right:var(--gut);bottom:40px;z-index:5;display:flex;gap:6px;font-family:var(--mono);font-size:11px;color:var(--t-40)}
.seq__jalons i{display:block;width:22px;height:1px;background:var(--t-20);margin-top:7px;transition:background-color .3s}
.seq__jalons i.on{background:var(--t)}
}
.seq__jalons{display:none}
@media (min-width:1025px){.seq--film .seq__jalons{display:flex}}
/* en empilement, l'habillage est montré dans son état final, plus discret */
.seq:not(.seq--film) .lot__texte{padding-inline:var(--gut)}
@media (min-width:1025px){.seq:not(.seq--film) .lot{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}.seq:not(.seq--film) .lot__texte{padding-inline:0}.seq:not(.seq--film) .lot__hud{left:var(--gut);width:calc(100% - 2*var(--gut))}}
@media (max-width:1024px){.hud-txt{font-size:13px}}
@media (max-width:640px){
.lot__plan,.lot__hud{aspect-ratio:4/3}
.lot__hud text{display:none} /* trop petit pour être lu : on garde le trait */
}
/* ========================================================================== */
/* 9. CONVERGENCE — topologie */
/* ========================================================================== */
.conv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
.conv p{color:var(--t-80);max-width:52ch}
.conv__schema{position:relative;aspect-ratio:1/1;max-width:620px;width:100%;justify-self:end}
.conv__schema svg{width:100%;height:100%;overflow:visible}
.c-lien{fill:none;stroke:rgba(233,236,245,.55);stroke-width:1.2}
.c-lien--ssi{stroke-dasharray:5 5;stroke:var(--cuivre)}
.c-noeud{fill:var(--nuit-1);stroke:rgba(233,236,245,.6);stroke-width:1.2;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.c-noeud.on{fill:var(--indigo);stroke:var(--indigo)}
.c-centre{fill:var(--indigo);stroke:none}
.c-nom{font-family:var(--titre);font-weight:700;font-size:13px;fill:#fff}
.c-proto{font-family:var(--mono);font-size:10.5px;fill:rgba(233,236,245,.66)}
.c-proto--ssi{fill:var(--cuivre)}
.conv__legende{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font-family:var(--mono);font-size:12px;color:var(--t-64)}
.conv__legende span{display:inline-flex;align-items:center;gap:10px}
.conv__legende i{display:inline-block;width:26px;height:0;border-top:1px solid rgba(233,236,245,.7)}
.conv__legende i.ssi{border-top:1px dashed var(--cuivre)}
@media (max-width:860px){.conv{grid-template-columns:1fr}.conv__schema{justify-self:center}}
@media (max-width:640px){.c-nom{font-size:17px}.c-proto{font-size:13px}}
/* ========================================================================== */
/* 10. MÉTHODE — cartouche qui se remplit */
/* ========================================================================== */
.methode{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.cartouche{position:sticky;top:104px;border:1px solid var(--e);background:#fff;font-family:var(--mono);font-size:12px;color:var(--e)}
.cartouche__titre{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--e)}
.cartouche__titre img{width:118px;height:auto;aspect-ratio:3120/681}
.cartouche__titre span{color:var(--e-56)}
.cartouche dl{display:grid;grid-template-columns:1fr 1fr 1fr;margin:0}
.cartouche dl div{padding:9px 12px;border-bottom:1px solid var(--bord);border-right:1px solid var(--bord)}
.cartouche dl div:nth-child(3n){border-right:0}
.cartouche dt{font-size:10.5px;color:var(--e-56);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.cartouche dd{margin:0;font-size:14px;color:var(--e);min-height:1.4em}
.cartouche dd.flash{color:var(--indigo)}
.cartouche__code{padding:14px 16px;border-bottom:1px solid var(--e);font-size:clamp(12px,1.05vw,14px);word-break:break-all;line-height:1.55}
.cartouche__code b{font-weight:400;color:var(--indigo)}
.cartouche__objet{padding:12px 16px;font-family:var(--sans);font-size:14px;color:var(--e-72);min-height:3.4em}
.etapes{list-style:none;margin:0;padding:0}
.etape{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px 32px;padding:0 0 clamp(36px,5vw,64px);align-items:start}
.etape figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--clair-2)}
.etape figure img{width:100%;height:100%;object-fit:cover}
.etape__num{font-family:var(--mono);font-size:12.5px;color:var(--indigo);display:block;margin-bottom:8px}
.etape h3{font-size:24px;margin-bottom:10px}
.etape p{color:var(--e-72)}
.etape__piece{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--e-56)}
.etape__num{transition:background-color .3s var(--ease),color .3s var(--ease),padding .3s var(--ease)}
.js-methode .etape.actif .etape__num{background:var(--indigo);color:#fff;padding:2px 7px;display:inline-block}
.js-methode .etape figure{outline:1px solid transparent;outline-offset:6px;transition:outline-color .3s var(--ease)}
.js-methode .etape.actif figure{outline-color:var(--indigo)}
@media (max-width:1024px){.methode{grid-template-columns:1fr}.cartouche{position:relative;top:0}}
@media (max-width:640px){.etape{grid-template-columns:1fr}.cartouche dl{grid-template-columns:1fr 1fr}.cartouche dl div:nth-child(3n){border-right:1px solid var(--bord)}.cartouche dl div:nth-child(2n){border-right:0}}
/* Méthode documentaire */
.doc{margin-top:clamp(56px,7vw,110px);padding-top:22px;border-top:1px solid var(--bord);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,5vw,88px)}
.doc h3{font-size:clamp(22px,2vw,30px);margin-bottom:14px}
.doc > div > p{color:var(--e-72);max-width:48ch}
.regles{list-style:none;margin:24px 0 0;padding:0}
.regles li{padding:12px 0 12px 26px;border-top:1px solid var(--bord);position:relative;font-size:15px;color:var(--e)}
.regles li::before{content:"";position:absolute;left:0;top:20px;width:12px;height:1px;background:var(--indigo)}
.nommage{border:1px solid var(--e);background:#fff}
.nommage__ligne{display:flex;flex-wrap:wrap;font-family:var(--mono);font-size:clamp(13px,1.25vw,17px);border-bottom:1px solid var(--e)}
.nommage__seg{flex:1 1 auto;padding:14px 10px 10px;text-align:center;border-right:1px solid var(--bord);position:relative}
.nommage__seg:last-child{border-right:0}
.nommage__seg b{display:block;font-weight:400;color:var(--e)}
.nommage__seg small{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--e-56)}
.nommage__seg.on b{color:var(--indigo)}
.livrables{width:100%;border-collapse:collapse;font-size:14.5px}
.livrables caption{text-align:left;padding:14px 16px;font-family:var(--mono);font-size:12px;color:var(--e-56);caption-side:top}
.livrables th,.livrables td{text-align:left;padding:10px 16px;border-top:1px solid var(--bord);vertical-align:top}
.livrables th{font-family:var(--mono);font-weight:400;color:var(--indigo);width:84px}
.livrables td span{display:block;font-size:13px;color:var(--e-56)}
@media (max-width:1024px){.doc{grid-template-columns:1fr}}
@media (max-width:640px){.nommage__seg{flex:1 1 33%;border-bottom:1px solid var(--bord)}}
/* ========================================================================== */
/* 11. LE GESTE — à dix millimètres */
/* ========================================================================== */
.geste__tete{max-width:70ch;margin:0 auto clamp(44px,6vw,80px);text-align:center}
.geste__tete .ref{justify-content:center}
.geste__tete p{color:var(--t-80);font-size:17px;max-width:62ch;margin:22px auto 0}
.dipt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.dipt figure{margin:0}
.dipt__img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--nuit)}
.dipt__img img{width:100%;height:100%;object-fit:cover}
.regle{display:block;width:100%;height:22px;margin-top:12px;overflow:visible}
.regle line{stroke:var(--t-40);stroke-width:1}
.regle .maj{stroke:var(--t-80)}
.dipt figcaption{margin-top:6px;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12px;color:var(--t-64)}
.dipt figcaption b{font-weight:400;color:var(--cyan);white-space:nowrap}
@media (max-width:860px){.dipt{grid-template-columns:1fr}}
/* ========================================================================== */
/* 12. RÉALISATIONS — dossiers */
/* ========================================================================== */
.dossiers{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(48px,6vw,96px) clamp(18px,2.4vw,36px)}
.dossier{grid-column:span 6}
.dossier:nth-child(1){grid-column:1 / span 7}
.dossier:nth-child(2){grid-column:9 / span 4;margin-top:clamp(60px,10vw,160px)}
.dossier:nth-child(3){grid-column:2 / span 4}
.dossier:nth-child(4){grid-column:7 / span 6;margin-top:clamp(40px,6vw,96px)}
.dossier__img{position:relative;margin:0 0 22px;overflow:hidden;background:var(--nuit);aspect-ratio:16/10}
.dossier__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:saturate(.78) contrast(1.04) brightness(.92)}
@media (hover:hover) and (pointer:fine){.dossier:hover .dossier__img img{transform:scale(1.03)}}
.dossier__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--mono);font-size:12px;color:var(--t-64);margin-bottom:12px}
.dossier__meta b{font-weight:400;color:var(--cyan)}
.dossier h3{font-size:clamp(24px,2.2vw,32px);margin-bottom:6px}
.dossier__sous{font-family:var(--titre);font-weight:700;font-size:16px;color:var(--t-64);margin-bottom:14px}
.dossier p{color:var(--t-80);max-width:54ch}
.dossier__pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--t-20)}
.dossier__pied .loc{font-family:var(--mono);font-size:12px;color:var(--t-64)}
.dossier__pied a{font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--t-40)}
.dossier__pied a:hover{border-bottom-color:var(--t)}
.dossier .specs{margin-top:14px}
@media (max-width:860px){
.dossiers{grid-template-columns:1fr}
.dossier,.dossier:nth-child(n){grid-column:auto;margin-top:0}
}
.registre{margin-top:clamp(72px,9vw,140px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(32px,5vw,88px)}
.registre h3{font-size:clamp(22px,2vw,30px);margin-bottom:12px}
.registre > div > p{color:var(--t-64);font-size:15px;max-width:40ch}
.registre figure{margin:28px 0 0}
.registre figure div{aspect-ratio:3/2;overflow:hidden}
.registre figure img{width:100%;height:100%;object-fit:cover}
.registre figcaption{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--t-40)}
.registre table{width:100%;border-collapse:collapse}
.registre th,.registre td{text-align:left;vertical-align:top;padding:18px 16px 18px 0;border-top:1px solid var(--t-20)}
.registre thead th{font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--t-40);padding-top:0;border-top:0;padding-bottom:10px}
.registre tbody th{font-family:var(--titre);font-weight:700;font-size:17px;width:30%}
.registre tbody th small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--cyan);margin-top:6px}
.registre td{color:var(--t-80);font-size:15px}
@media (max-width:860px){
.registre{grid-template-columns:1fr}
.registre thead{display:none}
.registre tr{display:block;border-top:1px solid var(--t-20);padding:16px 0}
.registre th,.registre td{display:block;border:0;padding:4px 0;width:auto}
.registre tbody th{width:auto}
}
/* ========================================================================== */
/* 13. TRAPPE — faux-plafond déposé */
/* ========================================================================== */
.trappe{position:relative;background:var(--clair-2)}
.trappe__cadre{position:relative;height:clamp(420px,86svh,900px);overflow:hidden}
.trappe__cadre picture,.trappe__cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trappe__panneau{position:absolute;left:3%;top:0;width:50%;height:60%;z-index:1;pointer-events:none;background:#646373;display:none;
box-shadow:inset 0 0 0 1px rgba(233,236,245,.16),0 1px 0 rgba(10,15,34,.6)}
.trappe__panneau span{position:absolute;left:24px;bottom:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(233,236,245,.62)}
.trappe__panneau span::after{content:"TRAPPE DE VISITE · FAUX-PLAFOND"}
@media (max-width:640px){.trappe__panneau{left:0;width:64%;height:52%}}
.js-trappe .trappe__panneau{display:block}
.trappe figcaption{position:absolute;left:var(--gut);right:var(--gut);bottom:28px;z-index:2;display:flex;justify-content:space-between;gap:20px;
font-family:var(--mono);font-size:12px;color:var(--t-80)}
.trappe figcaption span:first-child{max-width:52ch}
.trappe__voile{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(10,15,34,.85),rgba(10,15,34,0));pointer-events:none}
@media (max-width:640px){.trappe figcaption{flex-direction:column;bottom:18px}}
/* ========================================================================== */
/* 14. ENGAGEMENTS — procès-verbal d'autocontrôle */
/* ========================================================================== */
.pv{width:100%;border-collapse:collapse;border:1px solid var(--e);background:#fff}
.pv caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:12px;color:var(--e-56);padding:0 0 12px}
.pv th,.pv td{text-align:left;vertical-align:top;padding:20px 18px;border-top:1px solid var(--bord)}
.pv thead th{font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--e-56);text-transform:uppercase;letter-spacing:.06em;padding:12px 18px;border-top:0;border-bottom:1px solid var(--e)}
.pv tbody th{width:22%}
.pv tbody th span{display:block;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--indigo);margin-bottom:6px}
.pv tbody th b{font-family:var(--titre);font-size:20px}
.pv td{color:var(--e-72);font-size:15px}
.pv td.ctrl{font-family:var(--mono);font-size:12.5px;color:var(--e-56);width:30%}
.pv td.statut{width:132px;white-space:nowrap;font-family:var(--mono);font-size:12.5px;color:var(--e)}
.coche{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:8px}
.coche rect{fill:none;stroke:var(--e);stroke-width:1.2}
.coche path{fill:none;stroke:var(--indigo);stroke-width:2;stroke-linecap:square}
@media (max-width:860px){
.pv thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pv td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:11px;color:var(--e-56);text-transform:uppercase;letter-spacing:.06em;margin:8px 0 2px}
.pv tr{display:block;border-top:1px solid var(--bord);padding:16px 18px}
.pv tbody th,.pv td,.pv td.ctrl,.pv td.statut{display:block;width:auto;border:0;padding:4px 0}
}
.compteurs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--e)}
.compteur{padding:22px 22px 0 0}
.compteur+.compteur{padding-left:22px;border-left:1px solid var(--bord)}
.afficheur{display:flex;align-items:flex-end;gap:10px;font-family:var(--mono);color:var(--e);line-height:1}
.afficheur__val{display:inline-flex;font-size:clamp(46px,5vw,72px);letter-spacing:-.02em;height:1em;overflow:hidden}
.tambour{display:block;height:1em;overflow:hidden}
.tambour span{display:block;height:1em;line-height:1;text-align:center}
.afficheur__u{font-size:14px;color:var(--e-56);padding-bottom:8px}
.compteur p{margin-top:14px;color:var(--e-72);font-size:14.5px;max-width:30ch}
@media (max-width:1024px){.compteurs{grid-template-columns:1fr 1fr}.compteur:nth-child(3){padding-left:0;border-left:0}.compteur{padding-bottom:22px}}
@media (max-width:480px){.compteurs{grid-template-columns:1fr}.compteur,.compteur+.compteur{padding-left:0;border-left:0;border-bottom:1px solid var(--bord)}}
.qse{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(32px,5vw,88px)}
.qse h3{font-size:clamp(22px,2vw,28px);margin-bottom:12px}
.qse > div > p{color:var(--e-72);max-width:42ch}
.qse ul{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.qse li{break-inside:avoid;padding:10px 0;border-top:1px solid var(--bord);font-size:14.5px;color:var(--e)}
.qse li .mono{display:block;font-size:11.5px;color:var(--indigo);margin-bottom:2px}
@media (max-width:860px){.qse{grid-template-columns:1fr}.qse ul{columns:1}}
/* ========================================================================== */
/* 15. ENTREPRISE */
/* ========================================================================== */
.ent{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:center}
.ent h2{margin-bottom:22px}
.ent p{color:var(--t-80);max-width:56ch}
.ent blockquote{margin:32px 0 0;padding:4px 0 4px 26px;border-left:1px solid var(--cuivre)}
.ent blockquote p{font-family:var(--titre);font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1.4;color:var(--t)}
.ent figure{margin:0}
.ent__img{aspect-ratio:4/5;overflow:hidden;background:var(--nuit-1)}
.ent__img img{width:100%;height:100%;object-fit:cover}
.ent figcaption{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--t-40)}
@media (max-width:860px){.ent{grid-template-columns:1fr}.ent__img{aspect-ratio:3/2}}
/* Hero : mise en place en CSS, indépendante du moteur JS */
@keyframes poser{from{transform:scale(1.06)}to{transform:none}}
@keyframes monter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes filer{from{transform:scaleX(0)}to{transform:none}}
@keyframes repere{0%{color:var(--t)}100%{color:var(--t-40)}}
/* Intro resserrée : tout le premier écran est lisible en moins d'une seconde */
.hero__photo img{animation:poser 2.2s var(--ease) both}
.hero__eyebrow::before{transform-origin:0 50%;animation:filer .7s .1s var(--ease) both}
.hero [data-hero]{animation:monter .6s var(--ease) both}
.hero h1[data-hero]{animation-delay:.06s}
.hero .lead[data-hero]{animation-delay:.12s}
.hero .actions[data-hero]{animation-delay:.18s}
.hero .hero__meta[data-hero]{animation-delay:.26s}
.hero .nomen[data-hero]{animation-delay:.34s}
.nomen li{animation:monter .5s var(--ease) both}
.nomen li:nth-child(1){animation-delay:.42s}.nomen li:nth-child(2){animation-delay:.48s}.nomen li:nth-child(3){animation-delay:.54s}
.nomen li:nth-child(4){animation-delay:.6s}.nomen li:nth-child(5){animation-delay:.66s}