/* ==========================================================================
   Purelec - sections et pages
   ========================================================================== */

@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --w{syntax:"<percentage>";inherits:false;initial-value:100%}

/* ------------------------------------------------------------------- Hero
   Un aplat pétrole et le symbole. Rien d'autre ne bouge : le courant parcourt le P. */
.hero,.entete{position:relative;isolation:isolate;overflow:clip;padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px))}
.hero{padding-bottom:clamp(64px,9vw,140px)}
.hero__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,40px);grid-template-areas:"titre" "symbole" "corps"}
.hero__titre{grid-area:titre;font-size:clamp(3.1rem,.9rem + 9.6vw,7.4rem);line-height:.92;letter-spacing:-.05em;text-wrap:initial}
.ligne{display:block;overflow:hidden;padding:.17em 0 .12em;margin:-.17em 0 -.12em}
.ligne > span{display:block}
.hero__titre-suite{margin-top:.3em;font-size:.33em;line-height:1.15;letter-spacing:-.022em;color:var(--doux);font-family:var(--f-texte);font-weight:500}
.hero__corps{grid-area:corps}
.hero__accroche,.entete__accroche{max-width:50ch;font-size:clamp(1.06rem,1rem + .4vw,1.24rem);line-height:1.5;color:var(--doux)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px 8px;margin-top:clamp(24px,3vw,36px)}
.hero__actions .btn{flex:1 1 auto}
@media (min-width:560px){.hero__actions .btn{flex:0 0 auto}}
.hero__symbole{grid-area:symbole;width:min(74%,320px);justify-self:start}
@media (min-width:1000px){
  .hero__grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"titre symbole" "corps symbole";align-content:center;column-gap:clamp(32px,5vw,80px);row-gap:clamp(24px,3vw,40px)}
  .hero__symbole{width:min(100%,560px);justify-self:end;align-self:center}
  .hero__titre{align-self:end}
  .hero__corps{align-self:start}
}

/* Symbole : tracé, enclenchement de la barre jaune, remplissage, puis courant.
   Les trois barres réagissent au pointeur à des profondeurs différentes. */
.sym{display:block;width:100%;height:auto;overflow:visible}
/* --px/--py : pointeur. --so : avancée du défilement dans le hero (0 à 1), le symbole s'ouvre. */
.sym__g--p{translate:calc(var(--px,0)*-9px + var(--so,0)*-30px) calc(var(--py,0)*-6px + var(--so,0)*-44px)}
.sym__g--o{translate:calc(var(--px,0)*18px + var(--so,0)*150px) calc(var(--py,0)*6px)}
.sym__g--f{translate:calc(var(--px,0)*-14px + var(--so,0)*-70px) calc(var(--py,0)*9px + var(--so,0)*56px)}
.hero__titre{translate:0 calc(var(--so,0)*-46px)}
.hero__corps{opacity:calc(1.45 - var(--so,0)*2.2);translate:0 calc(var(--so,0)*-18px)}
.sym__trait{fill:none;stroke:var(--epure);stroke-opacity:.55;stroke-width:5;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.sym__plein{fill:var(--epure);--k:47%;clip-path:polygon(0 0,calc(var(--w) + var(--k)) 0,var(--w) 100%,0 100%)}
.sym__plein--f{--k:27%}
.sym__orange{fill:var(--energie)}
.sym__eclat{fill:#fff;fill-opacity:.5;transform:translateX(-160px)}
.sym__pouls{fill:none;stroke:var(--energie);stroke-width:9;stroke-linejoin:round;stroke-dasharray:5 95;stroke-dashoffset:0;opacity:0}
.sym__pouls--f{stroke-dasharray:9 91}
html.js .sym__trait{animation:sym-trace 1.35s var(--aise) .2s forwards,sym-efface .4s ease 2.05s forwards}
html.js .sym__trait--f{animation:sym-trace 1s var(--aise) .5s forwards,sym-efface .4s ease 2.15s forwards}
html.js .sym__plein{opacity:0;animation:sym-allume .62s steps(1) 1.62s forwards}
html.js .sym__plein--f{animation-delay:1.74s}
html.js .sym__barre{animation:sym-barre 1.1s var(--ressort-doux) 1.05s both}
html.js .sym__g--o{animation:sym-respire 7s ease-in-out 2.4s infinite alternate}
html.js .sym__eclat{animation:sym-eclat 7s var(--aise-sortie) 3.4s infinite}
html.js .sym__pouls{animation:sym-pouls 5.2s linear 2.8s infinite}
html.js .sym__pouls--f{animation-delay:4.4s;animation-duration:4s}
@keyframes sym-trace{to{stroke-dashoffset:0}}
@keyframes sym-efface{to{stroke-opacity:0}}
@keyframes sym-allume{0%{opacity:0}14%{opacity:.9}26%{opacity:.18}42%{opacity:1}54%{opacity:.5}66%,100%{opacity:1}}
@keyframes sym-barre{0%{transform:translateX(-300px);opacity:0}18%{opacity:1}}
@keyframes sym-respire{to{transform:translateX(12px)}}
@keyframes sym-eclat{0%{transform:translateX(-160px)}36%,100%{transform:translateX(760px)}}
@keyframes sym-pouls{0%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:-100;opacity:1}73%,100%{stroke-dashoffset:-100;opacity:0}}

/* ------------------------------------------------------------- Manifeste
   Un texte que le courant traverse : le défilement fait avancer un curseur jaune (la barre
   du symbole) sous les mots. Le mot atteint s'allume en jaune, puis refroidit vers l'encre.
   Au bout de la phrase, le curseur se branche dans une prise T13. */
.manifeste{padding-block:clamp(88px,17vw,210px)}
.manifeste__texte{position:relative;max-width:20.5em;font-family:var(--f-titre);font-weight:650;font-size:clamp(1.8rem,.95rem + 4.3vw,4.1rem);line-height:1.12;letter-spacing:-.036em;text-wrap:initial}
.manifeste__fin{white-space:nowrap}
.manifeste__prise{display:inline-block;width:.9em;height:.9em;margin-left:.06em;vertical-align:-.1em;stroke-width:1.9;transition:color .5s var(--aise-sortie),transform .7s var(--ressort)}
.manifeste__texte.est-pret .m{color:color-mix(in srgb,var(--encre) 20%,transparent);transition:color 1s var(--aise-sortie)}
.manifeste__texte.est-pret .m.on{color:var(--encre)}
.manifeste__texte.est-pret .m.tete{color:var(--energie);transition-duration:.1s}
.manifeste__texte.est-pret .manifeste__prise{color:color-mix(in srgb,var(--encre) 20%,transparent)}
.manifeste__texte.est-branche .manifeste__prise{color:var(--energie);transform:scale(1.14)}
.manifeste__curseur{position:absolute;left:0;top:0;height:.085em;min-height:4px;margin-top:-.1em;background:var(--energie);pointer-events:none;transition:opacity .35s}
.manifeste__texte.est-branche .manifeste__curseur{opacity:0}

/* --------------------------------------------- Le tableau : de quoi avez-vous besoin ?
   Un coffret de distribution : porte en verre (le cadre), plastron gris clair, modules sur rail.
   À gauche l'interrupteur différentiel et son bouton de test ; puis huit disjoncteurs, un par
   situation. Celui qu'on enclenche alimente le câble (phase brune, neutre bleu, terre vert-jaune)
   qui descend jusqu'à la réponse. Les couleurs des conducteurs n'existent qu'ici. */
.tableau{--brun:#B37E55;--bleu:#6DB6EA;--terre-v:#3DB35C;--terre-j:#F2D43A;--u:calc((100% - 0px)/5)}
.tableau__corps{position:relative;margin-top:clamp(28px,4vw,52px)}
.tableau__corps > .coffret,.tableau__corps > .tableau__lecture{position:relative;z-index:1}
.coffret{padding:9px;border-radius:24px;--ta:.3}
.coffret__porte{display:none}
/* Plaque signalétique, gravée en bas du plastron */
.coffret__plaque{display:flex;justify-content:flex-end;gap:12px;margin:10px 4px 0;font:700 .54rem/1 var(--f-texte);letter-spacing:.03em;color:#6B7888}
.coffret__plastron{position:relative;padding:18px 9px 12px;border-radius:16px;color:var(--petrole);
  background:linear-gradient(180deg,#E6EAE7,#D3D9D6);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0/.12),inset 0 0 0 1px rgb(11 36 71/.1),0 10px 24px -14px rgb(0 0 0/.7)}
/* Vis quart de tour du plastron */
.coffret__vis{position:absolute;top:6px;width:8px;height:8px;border-radius:50%;background:#B4BDB9;box-shadow:inset 0 1px 1px rgb(0 0 0/.35),0 1px 0 #fff}
.coffret__vis::after{content:"";position:absolute;left:1px;right:1px;top:3.25px;height:1.5px;background:#6E7B79;transform:rotate(-28deg)}
.coffret__vis:nth-of-type(1){left:8px}
.coffret__vis:nth-of-type(2){right:8px}
.coffret__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:12px}
.coffret__departs{display:contents}
.mod{position:relative;display:grid;grid-template-rows:auto auto;justify-items:stretch;gap:9px;padding:0;text-align:center;-webkit-tap-highlight-color:transparent}
/* La face du module, vue par la fenêtre du plastron : la gorge sombre court au-dessus et au-dessous. */
.mod__face{position:relative;display:grid;justify-items:center;align-content:end;height:98px;margin-block:5px;padding-bottom:10px;
  background:linear-gradient(180deg,#F6F8F6 0,#ECEFEC 60%,#DFE4E1 100%);
  box-shadow:0 -5px 0 #98A5A2,0 5px 0 #A9B4B1,inset -1px 0 0 rgb(11 36 71/.16),inset 1px 0 0 rgb(255 255 255/.8),inset 0 1px 0 #fff}
.mod__marque{position:absolute;left:0;right:0;top:8px;font:700 .58rem/1 var(--f-texte);letter-spacing:.02em;color:#5B6A6F}
.mod__voyant{position:absolute;top:22px;left:50%;width:14px;height:6px;margin-left:-7px;border-radius:1.5px;background:#152947;box-shadow:inset 0 1px 1px rgb(0 0 0/.5);transition:background-color .15s .1s}
.mod__fente{position:relative;display:block;width:24px;height:46px;border-radius:5px;background:#0F192A;box-shadow:inset 0 2px 5px rgb(0 0 0/.7),0 1px 0 #fff}
.mod__fente::before,.mod__fente::after{position:absolute;left:calc(100% + 5px);font:700 .56rem/1 var(--f-texte);color:#5B6A6F}
.mod__fente::before{content:"I";top:4px}
.mod__fente::after{content:"O";bottom:4px}
.mod__manette{position:absolute;left:2.5px;right:2.5px;bottom:2.5px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,#304564,#192941);box-shadow:inset 0 1px 0 rgb(255 255 255/.35),inset 0 -3px 0 rgb(0 0 0/.3),0 3px 5px rgb(0 0 0/.55);
  transform:translateY(var(--tire,0px));transition:transform .42s var(--ressort),background .2s}
.mod__manette::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:rgb(255 255 255/.22)}
.mod.tire .mod__manette{transition:none}
/* Étiquette : la bandelette de papier glissée sous chaque module. */
.mod__etiquette{display:block;height:22px;margin-inline:1.5px;padding:0;border-radius:2px;background:#FBFCFB;box-shadow:inset 0 0 0 1px rgb(11 36 71/.14);
  font:600 .64rem/22px var(--f-texte);letter-spacing:-.022em;color:#324157;white-space:nowrap;overflow:hidden;transition:color .2s,box-shadow .2s}
.mod--vide .mod__face{background:repeating-linear-gradient(180deg,transparent 0 13px,rgb(11 36 71/.09) 13px 14px),linear-gradient(180deg,#DCE1E4,#CFD5DA);box-shadow:0 -5px 0 #98A5A2,0 5px 0 #A9B4B1,inset 1px 0 0 rgb(255 255 255/.6)}
.mod--vide .mod__etiquette{background:transparent;box-shadow:none}

/* États. Sous tension = pas en attente (essai d'arrivée) et différentiel enclenché. */
:is(.tableau__corps:not(.en-attente) .disj[aria-selected="true"],.disj.essai) .mod__manette{--tire:-19px}
.tableau__corps:not(.en-attente):not(.est-coupe) .disj[aria-selected="true"] .mod__voyant,.disj.essai .mod__voyant{background:var(--energie)}
.tableau__corps:not(.en-attente) .disj[aria-selected="true"] .mod__etiquette{color:var(--petrole);box-shadow:inset 0 0 0 1px rgb(11 36 71/.14),inset 0 -3px 0 var(--energie)}
.disj:active .mod__face{filter:brightness(.97)}
/* Tant que personne n'a touché au tableau, une manette libre se soulève de temps en temps. */
.disj.invite .mod__manette{animation:invite .8s var(--aise-sortie)}
@keyframes invite{0%,100%{translate:0 0}35%{translate:0 -9px}60%{translate:0 -7px}}
.disj:focus-visible{outline-offset:-2px}
@media (hover:hover){
  .disj{cursor:grab}
  .disj .mod__face{transition:background .2s,filter .2s}
  .disj:not([aria-selected="true"]):hover .mod__manette{--tire:-7px}
  .disj:not([aria-selected="true"]):hover .mod__face{filter:brightness(1.035)}
  .disj:not([aria-selected="true"]):hover .mod__voyant{background:color-mix(in srgb,var(--energie) 45%,#1E3C45)}
  .disj:hover .mod__etiquette{color:var(--petrole);box-shadow:inset 0 0 0 1px rgb(11 36 71/.3)}
}

/* Interrupteur différentiel */
.mod--fi .mod__face{background:linear-gradient(180deg,#F1F4F1 0,#E4E9E5 60%,#D6DDD9 100%)}
.mod__commande{display:block;padding:0;border-radius:6px}
.mod--fi .mod__fente{width:30px}
.mod--fi .mod__manette{background:linear-gradient(180deg,#FFE066,#EBB800)}
.tableau__corps:not(.est-coupe) .mod--fi .mod__manette{--tire:-19px}
.mod__test{position:absolute;top:20px;left:50%;z-index:1;width:22px;height:14px;margin-left:-11px;border-radius:3px;background:linear-gradient(180deg,#8CC4F2,#4F97D6);color:#06203F;
  font:800 .56rem/14px var(--f-texte);box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 1px 2px rgb(0 0 0/.45);transition:transform .12s}
.mod__test::after{content:"";position:absolute;inset:-12px -14px -8px}
.mod__test:active{transform:translateY(1.5px);box-shadow:inset 0 1px 2px rgb(0 0 0/.4)}
.tableau__corps.est-coupe .coffret__departs .mod__face{filter:saturate(.6) brightness(.94)}

/* Le câblage : trois conducteurs, tracés par app.js. Ils sortent du coffret par un presse-étoupe
   sous le disjoncteur enclenché et rejoignent un bornier au bord de la réponse. */
.tableau__cablage{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cond{fill:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.cond--l{stroke:var(--brun)}
.cond--n{stroke:var(--bleu)}
.cond--pe{stroke:var(--terre-v)}
.cond--pe2{stroke:var(--terre-j);stroke-dasharray:7 7;stroke-dashoffset:0;opacity:0}
.cond-flux{fill:none;stroke:#FFF8DB;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:2 16;opacity:0;animation:flux 1.2s linear infinite}
.presse{fill:#AEB7C1;stroke:#7C8896;stroke-width:1}
.bornier{fill:#DDE2E8;stroke:#7C8896;stroke-width:1;transition:opacity .2s}
.tableau__cablage:not(.est-tire) .bornier{opacity:0}
.tableau__cablage.est-tire .cond{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--aise-sortie)}
.tableau__cablage.est-tire .cond--n{transition-delay:.06s}
.tableau__cablage.est-tire .cond--pe{transition-delay:.12s}
.tableau__cablage.est-tire .cond--pe2{opacity:1;transition:opacity .2s .62s}
.tableau__cablage.est-tire .cond-flux{opacity:.9;transition:opacity .3s .6s}
.tableau__corps:is(.en-attente,.est-coupe) .tableau__cablage .cond-flux{opacity:0}
.tableau__corps.en-attente .tableau__cablage{visibility:hidden}

/* La réponse : la situation dans les mots du visiteur, puis une phrase et une action. */
.tableau__lecture{display:grid;margin-top:58px;padding-left:2px}
.lecture{grid-area:1/1;display:grid;gap:14px;align-content:start;padding-top:10px;opacity:0;visibility:hidden;transition:opacity .2s var(--aise-sortie),visibility 0s .2s}
.lecture.est-active{opacity:1;visibility:visible;transition:opacity .01s,visibility 0s}
/* Mise sous tension : la réponse s'allume comme un tube, deux battements puis stable. */
.tableau__corps:not(.en-attente) .lecture.est-active{animation:tube .5s steps(1) both}
@keyframes tube{0%{opacity:0}18%{opacity:.85}30%{opacity:.25}46%{opacity:1}58%{opacity:.6}70%,100%{opacity:1}}
.tableau__corps.en-attente .lecture{opacity:0}
.lecture__situation{font-family:var(--f-titre);font-weight:700;font-size:clamp(1.75rem,1.1rem + 3.2vw,3.3rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.lecture__reponse p{max-width:50ch;font-size:clamp(1.04rem,1rem + .3vw,1.2rem);line-height:1.5;color:var(--doux)}
.lecture__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:20px}
.lecture__faits{display:grid;margin:16px 0 0;max-width:30rem}
.lecture__faits > div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-top:1px solid var(--trait);font-size:.96rem}
.lecture__faits > div:last-child{border-bottom:1px solid var(--trait)}
.lecture__faits dt{color:var(--doux)}
.lecture__faits dd{font-weight:600;text-align:right}
html.sans-anim .lecture:not(.lecture--coupe){grid-area:auto;opacity:1!important;visibility:visible;padding-bottom:22px}
@media (max-width:559px){.lecture__actions .btn{flex:1 1 100%}}
@media (min-width:1000px){
  /* Sur grand écran le coffret garde ses proportions d'armoire (deux rails), la réponse vient
     à côté, et le câble passe sous le coffret avant de remonter le long de la réponse. */
  .tableau__corps{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);column-gap:clamp(56px,7vw,120px);align-items:center;padding-bottom:70px}
  .coffret{padding:12px;border-radius:30px}
  .coffret__plastron{padding:26px 16px 14px;border-radius:20px}
  .coffret__vis{top:9px;width:10px;height:10px}
  .coffret__vis::after{top:4.25px}
  .coffret__vis:nth-of-type(1){left:12px}
  .coffret__vis:nth-of-type(2){right:12px}
  .coffret__rail{row-gap:16px}
  .coffret__plaque{font-size:.6rem;gap:16px;margin-top:14px}
  .mod__face{height:150px;padding-bottom:18px}
  .mod__marque{top:11px;font-size:.66rem}
  .mod__voyant{top:32px;width:18px;height:7px;margin-left:-9px}
  .mod__fente{width:32px;height:70px}
  .mod--fi .mod__fente{width:42px}
  .mod__manette{height:33px}
  :is(.tableau__corps:not(.en-attente) .disj[aria-selected="true"],.disj.essai) .mod__manette,.tableau__corps:not(.est-coupe) .mod--fi .mod__manette{--tire:-32px}
  .mod__test{top:30px;width:30px;height:18px;margin-left:-15px;font-size:.64rem;line-height:18px}
  .mod__etiquette{height:28px;font-size:.86rem;line-height:28px;letter-spacing:-.01em;margin-inline:3px}
  .tableau__lecture{margin-top:0;padding-left:64px}
  .lecture{padding-top:0;gap:18px}
}
/* La porte vitrée, ouverte sur sa charnière : c'est elle qui dit « coffret ». */
@media (min-width:1280px){
  .tableau__corps{grid-template-columns:minmax(0,500px) minmax(0,1fr);padding-left:150px}
  .coffret__porte{display:block;position:absolute;top:0;bottom:0;right:100%;width:100%;border-radius:30px;--ta:.14;
    transform-origin:100% 50%;transform:perspective(2600px) rotateY(69deg);pointer-events:none}
  .coffret__porte::after{left:14px;right:auto;top:50%;bottom:auto;width:8px;height:74px;margin-top:-37px;border-radius:4px;background:rgb(255 255 255/.5);z-index:3}
}
@media (prefers-reduced-motion:reduce){.tableau__corps .lecture.est-active{animation:none}.cond{stroke-dashoffset:0}.cond--pe2{opacity:1}}

/* ----------------------------------------------- En-tête des pages internes
   Deux barres du symbole, à plat, passent derrière le titre et se posent à l'ouverture. */
.entete{padding-bottom:clamp(56px,7vw,104px)}
.entete__grille{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px)}
.entete > .wrap{position:relative}
.entete__titre{font-size:clamp(2.3rem,1.15rem + 4.8vw,4.5rem);line-height:1;letter-spacing:-.04em;max-width:17em}
.entete--court{padding-bottom:clamp(56px,6vw,96px)}
.entete--court .entete__titre{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.6rem)}
@media (min-width:1000px){
  .entete__grille{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);align-items:end}
  .entete__grille--plan{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
}
.fil{margin-bottom:clamp(20px,3vw,32px);font-size:.875rem;color:var(--doux)}
.fil ol{display:flex;flex-wrap:wrap;gap:.2em .6em;margin:0}
.fil li + li::before{content:"/";margin-right:.6em;opacity:.5}
.fil a{text-decoration:none;display:inline-block;padding:6px 0}
.fil a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:.25em}
.fil li{display:inline-flex;align-items:center}

/* Fiche en bref : verre posé sur la scène, texte seul, séparé par des filets. */
.bref{padding:8px 24px;border-radius:var(--r-l);--ta:.34}
.bref ul{margin:0}
.bref li{padding:15px 0;border-top:1px solid var(--trait);font-size:1rem;line-height:1.42}
.bref li:first-child{border-top:0}
.bref--fiche{padding:10px 24px}
.bref--fiche dl > div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--trait);font-size:.96rem}
.bref--fiche dl > div:first-child{border-top:0}
.bref--fiche dt{color:var(--doux)}
.bref--fiche dd{font-weight:600;text-align:right}

/* --------------------------------------------- Scène : du réseau à la dernière prise
   Mobile d'abord : la scène reste collée en haut de l'écran, une caméra zoome sur la partie
   qui s'allume, et le texte défile dessous. Sur grand écran, texte à gauche, scène à droite. */
.batiment{padding-block:clamp(64px,9vw,136px) clamp(72px,9vw,150px)}
.batiment__grille{display:grid;gap:28px}
.batiment__intro{max-width:34rem}
.batiment__intro .tete__texte{margin-top:20px}
.batiment__piste,.batiment__pin{display:contents}
.batiment__scene{order:2}
.batiment__intro{order:1}
.batiment__etapes{order:3}
.scene-carte{position:relative;overflow:hidden;border-radius:var(--r-xl);background:#010813;aspect-ratio:1/.92;box-shadow:inset 0 0 0 1px rgb(238 241 244/.1),0 24px 50px -24px rgb(0 0 0/.7)}
.scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.scene-pas{position:absolute;left:16px;bottom:14px;display:flex;gap:6px;margin:0;padding:0;list-style:none;z-index:2}
/* Cinq segments : celui de l'étape en cours se remplit avec le défilement (--avance, 0 à 1). */
.scene-pas li{position:relative;width:26px;height:5px;overflow:hidden;background:rgb(238 241 244/.26);transform:skewX(var(--pente))}
.scene-pas li i{position:absolute;inset:0;background:var(--energie);transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--avance,0)*5 - var(--k)),1))}
.batiment__guide{display:none}
.batiment__etapes{display:grid;gap:0;margin:0}
.batiment__etape{position:relative;min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 0;transition:opacity .5s}
.batiment__etape::before{content:"";display:block;width:16px;height:6px;margin-bottom:16px;background:rgb(238 241 244/.3);transform:skewX(var(--pente));transform-origin:0 100%;transition:width .6s var(--ressort),background-color .3s}
.batiment__etape.est-active::before{width:44px;background:var(--energie)}
.batiment__etape h3{font-family:var(--f-titre);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem);line-height:1.08;letter-spacing:-.034em;opacity:.5;transition:opacity .5s}
.batiment__etape.est-active h3{opacity:1}
.batiment__etape p{margin-top:12px;max-width:44ch;color:var(--doux);opacity:.7;transition:opacity .5s}
.batiment__etape.est-active p{opacity:1}
.batiment__liens{display:flex;flex-wrap:wrap;gap:2px 24px;margin-top:10px}
@media (min-width:1000px){
  .batiment__grille{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start;gap:clamp(32px,5vw,72px)}
  .batiment__scene{position:sticky;top:calc(var(--nav-h) + 32px);grid-column:2;grid-row:1 / span 2;order:0;margin-inline:0}
  .batiment__intro{grid-column:1;grid-row:1}
  .batiment__etapes{grid-column:1;grid-row:2}
  .scene-carte{aspect-ratio:760/600;border-radius:var(--r-xl)}
  .scene-pas{display:none}
  .batiment__etape{min-height:60vh}
}

/* Caméra : sur mobile, la scène zoome sur la partie active. */
.scene .cam{--cx:380;--cy:300;--cz:1;transform-origin:0 0;
  transform:translate(calc(380px - var(--cx)*var(--cz)*1px),calc(300px - var(--cy)*var(--cz)*1px)) scale(var(--cz));
  transition:transform 1.4s var(--ressort-doux)}
.scene--suivie .cam{transition:none}
@media (min-width:1000px){
  .scene .cam{--cx:330;--cy:346;--cz:1.3}
  .scene[data-etape="2"] .cam{--cx:300;--cy:384;--cz:1.5}
  .scene[data-etape="3"] .cam{--cx:444;--cy:360;--cz:1.22}
  .scene[data-etape="4"] .cam{--cx:404;--cy:300;--cz:1.26}
  .scene[data-etape="5"] .cam{--cx:306;--cy:336;--cz:1.44}
}
@media (max-width:999px){
  .scene[data-etape="1"] .cam{--cx:270;--cy:392;--cz:1.36}
  .scene[data-etape="2"] .cam{--cx:262;--cy:404;--cz:1.5}
  .scene[data-etape="3"] .cam{--cx:432;--cy:404;--cz:1.2}
  .scene[data-etape="4"] .cam{--cx:432;--cy:292;--cz:1.2}
  .scene[data-etape="5"] .cam{--cx:300;--cy:340;--cz:1.5}
}

/* La maison en coupe. Aplats, pas de halo : la lumière est une teinte de mur, pas un flou.
   Cuivre = fil au repos. Orange = fil sous tension. Lampe = pièce éclairée, production solaire.
   Arc = données. */
.scene .ciel{fill:url(#sc-nuit)}
.scene .ciel-jour{fill:url(#sc-aube);opacity:0;transition:opacity 1.4s var(--aise-sortie)}
.scene .etoiles circle{fill:#EEF1F4;opacity:.55;transition:opacity 1s}
.scene .soleil{opacity:0;transform:translateY(110px);transition:opacity 1s,transform 2s var(--aise)}
.scene .soleil circle{fill:#FFE7C2}
.scene .soleil path{fill:none;stroke:#FFE7C2;stroke-width:3;stroke-linecap:round}
.scene .terrain{fill:#030B17;transition:fill 1.4s}
.scene .terrain-ligne{stroke:rgb(238 241 244/.24);stroke-width:2}
.scene .terrain-strate{fill:none;stroke:rgb(238 241 244/.07);stroke-width:1.5;stroke-dasharray:3 10}
.scene .cone-rue{fill:var(--lampe);opacity:.13;transition:opacity 1s}
.scene .mobilier{stroke:#2C4467;stroke-width:4;stroke-linecap:round}
.scene .mobilier-p{fill:#FFE7C2;transition:fill 1s}
.scene .coffret-reseau{fill:#2F476B;stroke:rgb(238 241 244/.3);stroke-width:1}
.scene .eclair{fill:var(--energie)}
.scene .haie{fill:#0E3430}
.scene .comble{fill:#041021}
.scene .fond-piece{fill:#061327}
.scene .lueur{fill:url(#sc-lampe);opacity:0;transition:opacity .7s var(--aise-sortie)}
.scene .piece.on .lueur{opacity:1}
.scene .piece--buanderie .lueur{transition-delay:.12s}
.scene .piece--sejour .lueur{transition-delay:.3s}
.scene .piece--cuisine .lueur{transition-delay:.42s}
.scene .piece--chambre .lueur{transition-delay:.6s}
.scene .piece--bureau .lueur{transition-delay:.72s}
.scene .clarte{fill:url(#sc-jour);opacity:0;transition:opacity 1.4s var(--aise-sortie)}
.scene .meubles > *{fill:#0B1E3C}
.scene .meubles path{stroke:#0B1E3C;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.scene .meubles .cadre-mur{fill:none;stroke:#0B1E3C;stroke-width:2.6}
.scene .meubles .detail{fill:none;stroke:#061327;stroke-width:1.4}
.scene .meubles .hublot{fill:#061327;stroke:#233A5E;stroke-width:2.5}
.scene .structure rect{fill:#2D4467;transition:fill 1.4s}
.scene .toit{fill:none;stroke:#1D3251;stroke-width:11;stroke-linejoin:round;stroke-linecap:round;transition:stroke 1.4s}
.scene .toit-arete{fill:none;stroke:rgb(238 241 244/.34);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.scene .panneau{fill:#0A2146;stroke:#5BA4B7;stroke-width:1;transition:fill .8s,stroke .8s}
.scene .solaire.on .panneau{fill:#1F55A7;stroke:var(--arc)}
.scene .rayon{fill:none;stroke:#FFE7C2;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 9;opacity:0;transition:opacity .8s .6s;animation:flux 2.4s linear infinite}
.scene .solaire.on .rayon{opacity:.85}

.scene .fil{fill:none;stroke:var(--cuivre);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:stroke .5s,opacity .5s}
.scene .fil--gros{stroke-width:3.2}
.scene .grp.on .fil{stroke:var(--energie);opacity:1}
.scene .flux{fill:none;stroke:#FFF8DB;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 18;opacity:0;transition:opacity .5s .3s;animation:flux 1.6s linear infinite}
.scene .grp.on .flux{opacity:.95}
@keyframes flux{to{stroke-dashoffset:-20}}
.scene .grp.on .fil--solaire{stroke:var(--lampe)}
.scene .flux--solaire{stroke:#FFF6E4}
.scene .appareil{fill:var(--coffret);stroke:#8FA09F;stroke-width:1}
.scene .appareil--onduleur{fill:#C1CBC8}
.scene .modules rect{fill:#182D4D;transition:transform .5s var(--ressort),fill .3s}
.scene .cadran{fill:none;stroke:#4A5B75;stroke-width:1.5}
.scene .detail-clair{fill:none;stroke:#4A5B75;stroke-width:1.5;stroke-linecap:round}
.scene .prise{fill:#EEF1F4;stroke:#4A5B75;stroke-width:1}
.scene .plaque{fill:#182D4D;transition:fill .5s .5s}
.scene .plaque.on{fill:var(--energie)}
.scene .suspension{fill:none;stroke:#0B1E3C;stroke-width:1.5}
.scene .ampoule{fill:#182D4D;transition:fill .35s}
.scene .lampe.on .ampoule{fill:#FFF6E4}
.scene .lampe .cone{fill:#FFE9C8;opacity:0;transition:opacity .6s}
.scene .lampe.on .cone{opacity:.17}

/* 2. Contrôle */
.scene .controle{opacity:0;transition:opacity .35s}
.scene .controle.on{opacity:1}
.scene .mesureur{fill:var(--energie)}
.scene .mesureur-ecran{fill:#030E1E}
.scene .cordon{fill:none;stroke:#EEF1F4;stroke-width:1.5;stroke-linecap:round}
.scene .valide{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.scene .valide circle{fill:var(--energie)}
.scene .valide path{fill:none;stroke:var(--petrole);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scene .controle.on .valide{animation:badge .7s var(--ressort) .15s both}
.scene .controle.on .valide:nth-of-type(2){animation-delay:.4s}
.scene .controle.on .valide:nth-of-type(3){animation-delay:.65s}
.scene .controle.on .valide:nth-of-type(4){animation-delay:.9s}
@keyframes badge{from{transform:scale(0)}to{transform:scale(1)}}

/* 3. Panne : le rez s'éteint en deux battements, le disjoncteur tombe, le véhicule arrive. */
.scene[data-etape="3"] :is(.piece--sejour,.piece--cuisine) .lueur{animation:coupure 1s steps(1) both}
@keyframes coupure{0%{opacity:1}14%{opacity:.2}24%{opacity:.85}36%{opacity:.1}48%{opacity:.5}58%,100%{opacity:0}}
.scene[data-etape="3"] .module-rez{transform:translateY(5px);fill:var(--energie)}
.scene .alerte{fill:none;stroke:var(--energie);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.scene .panne.on .alerte{animation:alerte 1.8s ease-out infinite}
.scene .panne.on .alerte--2{animation-delay:.9s}
@keyframes alerte{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.scene .vehicule{opacity:0;transform:translateX(190px);transition:transform .5s var(--aise-entree),opacity .2s .3s}
.scene .vehicule.on{opacity:1;transform:none;transition:transform 1.7s var(--aise) .7s,opacity .2s .7s}
.scene .carrosserie{fill:var(--petrole);stroke:rgb(238 241 244/.55);stroke-width:1.5;stroke-linejoin:round}
.scene .vitre{fill:#061327}
.scene .logo-o{fill:var(--energie)}
.scene .logo-b{fill:#EEF1F4}
.scene .roue{fill:#020A17;stroke:#4A5B75;stroke-width:2}
.scene .moyeu{fill:#8FA09F}
.scene .phare{fill:#FFF6E4;opacity:.22}

/* 4. Jour : le ciel s'éclaire, les pièces prennent la lumière du dehors, le toit produit. */
.scene[data-etape="4"] .ciel-jour{opacity:1}
.scene[data-etape="4"] .etoiles circle,.scene[data-etape="4"] .cone-rue{opacity:0}
.scene[data-etape="4"] .mobilier-p{fill:#2C4467}
.scene[data-etape="4"] .soleil{opacity:1;transform:none}
.scene[data-etape="4"] .terrain{fill:#0F3330}
.scene[data-etape="4"] .clarte{opacity:.94}
.scene[data-etape="4"] .structure rect{fill:#677B98}
.scene[data-etape="4"] .toit{stroke:#2F4A73}
.scene .carrosserie-v{fill:#1F3759;stroke:rgb(238 241 244/.4);stroke-width:1.5;stroke-linejoin:round}
.scene .borne{fill:var(--coffret);stroke:#8FA09F;stroke-width:1}
.scene .temoin{fill:#4A5B75;transition:fill .4s}
.scene .recharge.on .temoin{fill:var(--energie)}
.scene .jauge{fill:#030E1E;stroke:rgb(238 241 244/.55);stroke-width:1;opacity:0;transition:opacity .5s}
.scene .jauge-niveau{fill:var(--energie);opacity:0;transform-box:fill-box;transform-origin:left center;transform:scaleX(.1);transition:opacity .5s}
.scene .recharge.on :is(.jauge,.jauge-niveau){opacity:1}
.scene[data-etape="4"] .jauge-niveau{animation:recharge 5s var(--aise-sortie) .4s infinite}
.scene[data-etape="5"] .jauge-niveau{transform:scaleX(1)}
.scene[data-etape="5"] .recharge .flux{opacity:0}
@keyframes recharge{0%{transform:scaleX(.1)}80%,100%{transform:scaleX(1)}}

/* 5. Soir : l'éclairage passe en scène tamisée, le réseau relie les pièces. */
.scene[data-etape="5"] .piece.on .lueur{opacity:.6}
.scene[data-etape="5"] .piece--bureau.on .lueur{opacity:.92}
.scene[data-etape="5"] .lampe.on .cone{opacity:.09}
.scene .reseau-data{opacity:0;transition:opacity .5s}
.scene .reseau-data.on{opacity:1}
.scene .routeur,.scene .commande{fill:#EEF1F4}
.scene .antenne{fill:none;stroke:#EEF1F4;stroke-width:1.6;stroke-linecap:round}
.scene .data{fill:none;stroke:var(--arc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--aise-sortie) .25s}
.scene .reseau-data.on .data{stroke-dashoffset:0}
.scene .onde{fill:none;stroke:var(--arc);stroke-width:1.6;stroke-linecap:round;opacity:0}
.scene .reseau-data.on .onde{animation:onde-wifi 2.4s ease-out infinite}
.scene .reseau-data.on .onde--2{animation-delay:.45s}
@keyframes onde-wifi{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
html.js main h2:not(.sr):not([data-coupe]){visibility:hidden}
html.sans-anim main h2{visibility:visible!important}

/* --------------------------------------------------------------- Urgence */
.urgence{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(64px,8vw,120px)}
.urgence::before{content:"";position:absolute;z-index:-1;right:-6%;top:0;bottom:0;width:30%;background:var(--flamme);transform:translateX(calc((1 - var(--u,.5))*46%)) skewX(var(--pente));pointer-events:none}
.urgence__grille{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.urgence h2{max-width:13em}
.urgence p{margin-top:18px;max-width:50ch;font-size:1.12rem}
.urgence__actions{display:grid;gap:10px;justify-items:start}
.urgence__tel{--h:clamp(76px,6vw + 40px,104px);background:var(--petrole);color:var(--epure);font-family:var(--f-titre);font-weight:700;font-size:clamp(1.9rem,1rem + 4.2vw,3.2rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.urgence__tel:hover{background:var(--nuit)}
@media (min-width:900px){.urgence__grille{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:72px}}

/* ------------------------------------------------ Étapes : le fil conducteur */
.fil-conducteur{--prog:0;position:relative;display:grid;gap:36px;margin:clamp(44px,5vw,72px) 0 0;padding-left:56px}
.fil-conducteur::before,.fil-conducteur::after{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--cuivre) 55%,transparent)}
.fil-conducteur::after{background:var(--energie);transform-origin:top;transform:scaleY(var(--prog))}
.fil-conducteur__etape{position:relative}
.fil-conducteur__num{position:absolute;left:-56px;top:-4px;z-index:1;display:grid;place-items:center;width:42px;height:34px;background:rgb(11 36 71/.1);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font-weight:700;font-size:.95rem;color:var(--encre);transition:background-color .4s,transform .6s var(--ressort)}
.fil-conducteur__etape.est-active .fil-conducteur__num{background:var(--energie);color:var(--petrole)}
.fil-conducteur__etape h3{font-family:var(--f-titre);font-weight:700;font-size:1.4rem;letter-spacing:-.024em}
.fil-conducteur__etape p{margin-top:8px;color:var(--doux);max-width:42ch}
@media (min-width:920px){
  .fil-conducteur{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:68px 0 0}
  .fil-conducteur::before,.fil-conducteur::after{left:19px;right:calc((100% - 120px)/4 - 19px);top:18px;bottom:auto;width:auto;height:2px}
  .fil-conducteur::after{transform-origin:left;transform:scaleX(var(--prog))}
  .fil-conducteur__num{left:0;top:-68px}
}

/* ------------------------------------------------------------------ Zones */
.zones{position:relative;isolation:isolate;overflow:clip}
.zones__grille,.local__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px)}
.zones__liens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:34px 0 20px}
.zones__liens li:nth-child(-n+2) a{border-top:1px solid var(--trait)}
.zones__liens li a.zone{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:58px;padding:14px 0;border-bottom:1px solid var(--trait);font-size:1.12rem;font-weight:500;letter-spacing:-.014em;text-decoration:none;transition:padding .6s var(--ressort),color .3s}
.zones__liens li a.zone span{font-size:.86rem;color:var(--doux);letter-spacing:0}
.zones__liens li a.zone:hover{padding-left:14px;color:var(--at)}
.local .zones__liens{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.zones__plan{justify-self:center;width:100%;max-width:560px}
@media (min-width:1000px){
  .zones__grille{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center}
  .local__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
}
.plan{width:100%;height:auto;overflow:visible;font-family:var(--f-texte)}
.plan text{fill:var(--encre);font-size:13.5px;font-weight:500}
.plan__lac{fill:rgb(56 110 184/.12);stroke:rgb(56 110 184/.35);stroke-width:1}
.plan .plan__lac-nom{fill:#7A93B4;font-size:12px;font-style:italic;font-weight:400;letter-spacing:.08em}
.plan__lignes path{fill:none;stroke:var(--cuivre);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.js .plan__lignes:not(.plan__lignes--loin) path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--aise) .2s}
html.js .plan.vu .plan__lignes:not(.plan__lignes--loin) path{stroke-dashoffset:0}
.plan__lignes--loin path{stroke-dasharray:2 7;stroke:color-mix(in srgb,var(--encre) 30%,transparent)}
.plan__point{fill:var(--nuit-2);stroke:var(--brume);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ressort),fill .3s}
.plan__point--page{fill:var(--energie);stroke:var(--nuit-2);stroke-width:2.5}
html.js .plan__noeud{opacity:0;transition:opacity .7s .9s}
html.js .plan.vu .plan__noeud{opacity:1}
a.plan__noeud,a.plan__base{cursor:pointer;text-decoration:none}
a.plan__noeud:hover .plan__point,a.plan__noeud:focus-visible .plan__point{transform:scale(1.5)}
a.plan__noeud:hover text,a.plan__noeud:focus-visible text{fill:var(--ambre)}
.plan__base circle{fill:var(--nuit-2);stroke:var(--energie);stroke-width:2.5}
.plan__base .plan__base-coeur{fill:var(--energie);stroke:none}
.plan .plan__base text{font-size:16px;font-weight:700;font-family:var(--f-titre)}
.plan .plan__base .plan__sous{font-size:11.5px;font-weight:400;fill:var(--brume);font-family:var(--f-texte)}
.plan__onde{fill:none;stroke:var(--energie);stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:onde 5s cubic-bezier(.2,.6,.3,1) infinite}
.plan__onde--2{animation-delay:2.5s}
@keyframes onde{0%{transform:scale(1);opacity:.7}100%{transform:scale(12);opacity:0}}
.plan .plan__loin text{fill:#909DAE;font-size:12px;font-weight:400}

.regions{display:grid;gap:44px}
@media (min-width:760px){.regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 44px}}
@media (min-width:1100px){.regions{grid-template-columns:repeat(3,minmax(0,1fr))}}
.region{border-top:1px solid var(--trait);padding-top:22px}
.region h3{font-family:var(--f-titre);font-weight:700;font-size:1.5rem;letter-spacing:-.026em}
.region p{margin-top:8px;color:var(--doux)}
.region ul{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:14px;font-weight:500}
.region li{display:inline-flex;align-items:center;min-height:36px}
.region a{text-decoration:underline;text-decoration-color:var(--at);text-decoration-thickness:2px;text-underline-offset:.25em}
.region a:hover{text-decoration-color:currentColor}

/* ----------------------------------------------------------------- Terrain */
.terrain__grille{display:grid;gap:clamp(44px,6vw,88px)}
@media (min-width:1000px){.terrain__grille{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center}}
.terrain__texte .prose{margin-top:28px}
.terrain__liens{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:26px}
.terrain__images{position:relative;padding-bottom:16%}
.cadre{position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--petrole)}
.cadre img{width:100%;height:100%;object-fit:cover;scale:1.14}
.cadre--1{aspect-ratio:16/10;width:86%}
.cadre--2{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:4/3;border-radius:var(--r-s);box-shadow:0 0 0 8px var(--epure)}
/* Dévoilement : une lame de lumière balaie l'image, à l'angle du symbole. */
html.js .cadre{-webkit-mask-image:linear-gradient(53deg,#000 var(--p),transparent calc(var(--p) + 14%));mask-image:linear-gradient(53deg,#000 var(--p),transparent calc(var(--p) + 14%));--p:-14%;transition:--p 1.5s var(--aise)}
html.js .cadre.vu{--p:100%}
html.js .cadre--2{transition-delay:.18s}

/* À propos : même composition que l'accueil. */
.principes__grille{display:grid;gap:clamp(44px,6vw,88px)}
@media (min-width:1000px){.principes__grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.principes__texte .tete{margin-bottom:28px}

/* -------------------------------------------------------------------- FAQ */
.faq__grille{display:grid;gap:clamp(32px,4vw,64px)}
@media (min-width:1000px){.faq__grille{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:start}.faq .tete{position:sticky;top:calc(var(--nav-h) + 48px)}}
.faq__item{border-top:1px solid var(--trait)}
.faq__item:last-child{border-bottom:1px solid var(--trait)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:20px 0;cursor:pointer;list-style:none;transition:padding .6s var(--ressort)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{padding-left:8px}
.faq__item summary h3{font-size:1.12rem;font-weight:600;text-wrap:pretty}
.faq__signe{position:relative;flex:none;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--trait);transition:background-color .4s,box-shadow .4s,transform .8s var(--ressort),color .3s}
.faq__signe::before,.faq__signe::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:currentColor;transition:transform .6s var(--ressort)}
.faq__signe::after{transform:rotate(90deg)}
.faq__item[open] .faq__signe{background:var(--energie);box-shadow:none;color:var(--petrole);transform:rotate(180deg)}
.faq__item[open] .faq__signe::after{transform:rotate(0deg)}
.faq__item summary:hover .faq__signe{box-shadow:inset 0 0 0 1.5px currentColor}
.faq__reponse{padding:0 60px 28px 0;max-width:66ch;color:var(--doux)}
.faq__item::details-content{height:0;overflow:clip;transition:height .55s var(--aise),content-visibility .55s allow-discrete}
.faq__item[open]::details-content{height:auto}

/* ---------------------------------------------------------------- Contact */
.contact-bloc{position:relative;isolation:isolate;overflow:clip}
.contact-bloc__grille{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,80px)}
@media (min-width:1000px){.contact-bloc__grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.grand-tel{display:inline-flex;flex-direction:column;margin-top:clamp(30px,4vw,48px);text-decoration:none}
.grand-tel__precision{order:2;margin-top:10px;font-size:1rem;color:var(--doux)}
.grand-tel__num{font-family:var(--f-titre);font-weight:700;font-size:clamp(2.3rem,1.3rem + 4.2vw,4rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--at);text-decoration-thickness:3px;text-underline-offset:.14em;padding-bottom:10px;transition:background-size .8s var(--aise)}

.coord{display:grid;gap:0;margin:30px 0 0;color:var(--doux)}
.coord > div{display:grid;grid-template-columns:7.5rem 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--trait)}
.coord > div:last-child{border-bottom:1px solid var(--trait)}
.coord dt{font-size:.92rem}
.coord dd a{text-decoration:none;color:var(--encre)}
.coord dd a:hover{text-decoration:underline;text-decoration-color:var(--at);text-decoration-thickness:2px;text-underline-offset:.25em}
.coord dd{color:var(--encre)}

.contact-bloc__form{padding:clamp(22px,3vw,40px);border-radius:28px;--ta:.4}
.formulaire{display:grid;gap:18px}
.formulaire__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.champ-duo{display:grid;gap:18px}
@media (min-width:560px){.champ-duo{grid-template-columns:1fr 1fr}}
.champ{display:grid;gap:8px}
.champ label{font-size:.92rem;font-weight:500}
.champ__option{font-weight:400;color:var(--doux)}
.champ input,.champ select,.champ textarea{width:100%;min-height:54px;padding:14px 16px;border:0;border-radius:16px;background:color-mix(in srgb,var(--encre) 7%,transparent);color:var(--encre);font:inherit;font-size:1rem;
  box-shadow:inset 0 0 0 1px var(--trait),inset 0 2px 5px rgb(0 0 0/.1),0 1px 0 rgb(255 255 255/.14);transition:box-shadow .3s var(--aise-sortie),background-color .3s;appearance:none}
.champ textarea{min-height:132px;resize:vertical;line-height:1.5}
.champ select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA3A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.champ input::placeholder,.champ textarea::placeholder{color:var(--doux);opacity:.75}
.champ select option{background:#fff;color:#0B2447}
.champ input:hover,.champ select:hover,.champ textarea:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--encre) 45%,transparent),inset 0 2px 5px rgb(0 0 0/.1),0 1px 0 rgb(255 255 255/.14)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;background:color-mix(in srgb,var(--encre) 3%,transparent);box-shadow:inset 0 0 0 2px var(--at),inset 0 2px 5px rgb(0 0 0/.1)}
.champ [aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--encre),inset 0 2px 5px rgb(0 0 0/.1)}
.champ__erreur,.formulaire__alerte{font-size:.9rem;font-weight:600;color:var(--encre)}
.champ__erreur::before{content:"";display:inline-block;width:14px;height:5px;margin-right:8px;vertical-align:middle;background:var(--energie);transform:skewX(var(--pente))}
.formulaire__alerte{padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--at)}
.precisions summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;font-weight:600;font-size:.96rem;text-decoration:underline;text-decoration-color:var(--at);text-decoration-thickness:2px;text-underline-offset:.32em}
.precisions summary::-webkit-details-marker{display:none}
.precisions[open] summary{text-decoration-color:var(--trait)}
.precisions__in{display:grid;gap:18px;padding-top:10px}
.precisions::details-content{height:0;overflow:clip;transition:height .5s var(--aise),content-visibility .5s allow-discrete}
.precisions[open]::details-content{height:auto}
.champ textarea[rows="2"]{min-height:84px}
.formulaire__pied{display:grid;gap:14px;margin-top:2px}
.formulaire__pied .btn{justify-self:stretch}
.formulaire__note{font-size:.88rem;line-height:1.5;color:var(--doux)}
@media (max-width:559px){.formulaire__pied .btn{justify-self:stretch}}
.entete--contact{padding-bottom:clamp(64px,7vw,112px)}

/* --------------------------------------------- Pages de service et locales */
.expose__grille{display:grid;gap:clamp(44px,5vw,80px)}
@media (min-width:1000px){.expose__grille{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}.expose__intro{position:sticky;top:calc(var(--nav-h) + 48px)}}
.expose__intro{font-size:1.1rem}
.expose__intro h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.7em}
.expose__liste > h2,.lies h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem)}
.lies > .wrap > h2{margin-bottom:clamp(28px,4vw,48px)}
.lots{display:grid;margin:clamp(26px,3vw,40px) 0 0}
@media (min-width:640px){.lots{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}.lots--trois{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lot{padding:24px 0;border-top:1px solid var(--trait)}
.lot p{margin-top:6px;color:var(--doux);font-size:.98rem}

.encart__grille{display:grid;gap:clamp(36px,4vw,64px)}
@media (min-width:1000px){.encart__grille{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}}
.grille-donnees{width:100%;border-collapse:collapse;text-align:left}
.grille-donnees th,.grille-donnees td{padding:20px 0;border-top:1px solid var(--trait);vertical-align:baseline}
.grille-donnees thead th{padding:0 0 12px;border-top:0;font-size:.86rem;font-weight:500;color:var(--doux)}
.grille-donnees tbody th{width:34%;padding-right:20px;font-family:var(--f-titre);font-weight:700;font-size:1.4rem;letter-spacing:-.024em;white-space:nowrap}
.grille-donnees tbody tr:last-child > *{border-bottom:1px solid var(--trait)}
.grille-donnees td{color:var(--doux)}
.grille-donnees:not(:has(thead)) tbody th{font-family:var(--f-texte);font-size:1rem;font-weight:600;letter-spacing:0;white-space:normal}
.encart__note{margin-top:18px;font-size:.95rem;color:var(--doux)}
.encart__source{margin-top:10px;font-size:.88rem;color:var(--doux)}
.encart__source a{display:inline-flex;align-items:center;gap:.35em}
.pas,.reperes{display:grid;margin:0}
.pas__item,.repere{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--trait)}
.pas__item:last-child,.reperes:not(.reperes--quatre) .repere:last-child{border-bottom:1px solid var(--trait)}
.pas__num{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--petrole);color:var(--epure);font-weight:700;font-size:.95rem}
.pas__item p,.repere p{margin-top:5px;color:var(--doux);font-size:.98rem}
[data-ton="energie"] .pas__item p{color:var(--petrole)}
[data-ton="energie"] .pas__num{box-shadow:inset 0 1px 0 rgb(255 255 255/.25)}
.repere .barre{margin-top:.6em}
@media (min-width:640px){.reperes--quatre{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}}
@media (min-width:1100px){.reperes--quatre{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Prestations liées : du texte et une lentille au survol, sans icône. */
.lies__liste{display:grid;gap:14px;margin:0}
@media (min-width:720px){.lies__liste{grid-template-columns:repeat(3,minmax(0,1fr))}.lies__liste--huit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.lies__liste--huit{grid-template-columns:repeat(4,minmax(0,1fr))}}
.carte-lien{display:block;height:100%;min-height:148px;padding:26px 26px 24px;border-radius:var(--r-xl);text-decoration:none;--ta:.34}
.carte-lien:hover{--ta:.72}
.carte-lien:active{transform:scale(.98)}
.carte-lien__nom{display:block;font-family:var(--f-titre);font-weight:700;font-size:1.3rem;line-height:1.12;letter-spacing:-.026em}
.carte-lien__resume{display:block;margin-top:10px;font-size:.96rem;line-height:1.45;color:var(--doux)}

.segments{display:grid;gap:16px}
@media (min-width:860px){.segments{grid-template-columns:repeat(2,minmax(0,1fr))}}
.segment{padding:clamp(26px,3vw,40px);border-radius:var(--r-xl);--ta:.36}
.segment li{display:flex;align-items:baseline;gap:12px}
.segment li .barre{translate:0 -.18em}
.segment h3{font-family:var(--f-titre);font-weight:700;font-size:1.6rem;letter-spacing:-.028em}
.segment > p{margin-top:10px;color:var(--doux)}
.segment ul{display:grid;gap:0;margin:22px 0 0;font-weight:500;font-size:.98rem}
.segment li{padding:12px 0;border-top:1px solid var(--trait)}

/* ------------------------------------------------------------------ Pied */
.pied{position:relative;isolation:isolate;overflow:clip;padding:clamp(64px,8vw,104px) 0 calc(112px + env(safe-area-inset-bottom,0px));color:#C1C9D3;font-size:.96rem}
@media (min-width:1000px){.pied{padding-bottom:48px}}
.pied__grille{display:grid;gap:44px}
@media (min-width:680px){.pied__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.pied__grille{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:52px}}
.pied__logo{display:inline-flex;align-items:center;gap:14px;color:var(--epure);text-decoration:none}
.pied__symbole{height:46px;width:auto}
.pied__mots{display:grid;gap:7px}
.pied__mot{height:21px;width:auto}
.pied__signature{height:8px;width:auto;opacity:.8}
.pied__nap{margin-top:26px;line-height:1.7}
.pied__nap strong{color:var(--epure)}
.pied a{text-decoration:none}
.pied a:hover{color:var(--epure);text-decoration:underline;text-decoration-color:var(--at);text-underline-offset:.28em;text-decoration-thickness:2px}
.pied__piquet{margin-top:18px;color:var(--epure);font-weight:600}
.pied__titre{margin-bottom:12px;font-weight:600;color:var(--epure)}
.pied__col ul{margin:0}
.pied__col li a{display:inline-flex;align-items:center;min-height:38px}
.pied__geant{margin:clamp(40px,6vw,80px) 0 0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 90%);mask-image:linear-gradient(180deg,#000 10%,transparent 90%);height:clamp(54px,11.5vw,170px);overflow:hidden}
.pied__geant svg{width:100%;height:auto;color:rgb(238 241 244/.07)}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:1px solid rgb(238 241 244/.12);font-size:.88rem;color:#8C98A9}

/* ------------------------------------------------------------- Mouvement
   Trois moments orchestrés : le titre et le symbole à l'ouverture, la scène du bâtiment,
   la carte. Le reste répond aux gestes (menu, liste de besoins, FAQ). */
@keyframes monte{from{transform:translateY(108%)}}
@keyframes entree{from{opacity:0;transform:translateY(14px)}}
@keyframes verre-entre{from{opacity:0;transform:translateY(-22px) scale(.97)}}

html.js .ligne > span{animation:monte 1.15s var(--aise) both}
html.js .ligne:nth-child(2) > span{animation-delay:.09s}
html.js .ligne:nth-child(3) > span{animation-delay:.2s}
html.js [data-entree]{animation:entree .9s var(--aise) both;animation-delay:calc(.12s + var(--e,0)*.09s)}
[data-entree="1"]{--e:1}[data-entree="2"]{--e:2}[data-entree="3"]{--e:3}
html.js .hero [data-entree]{animation-delay:calc(1.1s + var(--e,0)*.1s)}
html.js .nav{animation:verre-entre 1s var(--aise) .05s both}

/* Mots des titres : ils montent d'un masque, à l'arrivée dans l'écran. */
html.js .mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .02em .1em;margin:-.16em -.02em -.1em}
html.js .mot > span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--aise);transition-delay:calc(var(--w,0)*38ms)}
html.js .vu .mot > span,html.js .mot.vu > span{transform:none}

/* Le texte courant ne glisse pas : il se pose, sans déplacement. Le mouvement est réservé
   aux titres, aux images et aux fils. */
html.js [data-rev]{opacity:0;transition:opacity .7s var(--aise-sortie);transition-delay:var(--rd,0ms)}
html.js [data-rev].vu{opacity:1}
html.js h2[data-rev],html.js .tete[data-rev]{opacity:1}
/* Sécurité : si app.js ne s'exécute pas, tout le contenu reste visible. */
html.sans-anim [data-rev],html.sans-anim .cadre{opacity:1!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html.sans-anim .mot > span{transform:none!important}
html.sans-anim .plan__noeud{opacity:1!important}
html.sans-anim .plan__lignes path{stroke-dashoffset:0!important}

@view-transition{navigation:auto}
::view-transition-old(root){animation:.24s var(--aise-sortie) both vt-sort}
::view-transition-new(root){animation:.55s var(--aise) both vt-entre}
@keyframes vt-sort{to{opacity:0}}
@keyframes vt-entre{from{opacity:0;transform:translateY(14px)}}
::view-transition-group(navigation){animation-duration:.45s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js [data-rev]{opacity:1}
  html.js .cadre{-webkit-mask-image:none;mask-image:none}
  html.js .mot > span{transform:none}
  .plan__onde{display:none}
  .sym__g{translate:none}
  .sym__trait{stroke-dashoffset:0}
  .sym__plein{clip-path:none;opacity:1}
  .sym__pouls,.sym__eclat{display:none}
  .scene .flux{animation:none}
  @view-transition{navigation:none}
}

@media print{
  .nav-ancre,.dock,.nav-voile,.hero__symbole,.contact-bloc__form,.pied__col,.scene-carte{display:none!important}
  [data-ton]{background:#fff!important;color:#000!important}
  html.js [data-rev],html.js [data-entree],html.js .ligne > span,html.js .mot > span{opacity:1!important;transform:none!important;animation:none!important}
  .section{padding-block:24px}
  .hero,.entete{padding-top:24px}
}

.entete__accroche{margin-top:clamp(20px,2.6vw,30px)}
.entete__titre + *,.entete h1 + p{margin-top:clamp(20px,2.6vw,30px)}


/* ============================================================ Mobile d'abord
   Scène épinglée : l'écran se fige, la caméra se déplace dans le bâtiment et la légende,
   une feuille de verre posée sur le bas du schéma, change à chaque étape. */
@media (max-width:999px){
  .batiment{padding-bottom:0}
  .batiment__grille{display:block}
  .batiment__intro{margin-bottom:26px}
  .batiment__piste{display:block;position:relative;height:calc(100svh + 5*46svh)}
  .batiment__pin{display:grid;grid-template-rows:auto minmax(0,1fr);position:sticky;top:0;height:100svh;padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px))}
  .batiment__scene{position:relative;z-index:1;margin-inline:calc(var(--gouttiere)*-.55)}
  .scene-carte{aspect-ratio:auto;height:min(96vw,46svh)}
  .scene-pas{left:50%;bottom:52px;translate:-50% 0;gap:5px}
  .batiment__etapes{position:relative;z-index:2;display:block;margin:-40px 0 0;border-radius:24px;--ta:.42;overflow:hidden}
  .batiment__etape{position:absolute;inset:0;min-height:0;justify-content:flex-start;padding:22px 20px 16px;opacity:0;visibility:hidden;translate:0 22px;
    transition:opacity .3s var(--aise-sortie),translate .5s var(--aise),visibility 0s .3s}
  .batiment__etape.est-active{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s var(--aise) .12s,translate .7s var(--ressort-doux) .12s,visibility 0s}
  .batiment__etape::before{width:44px;background:var(--energie);margin-bottom:14px}
  .batiment__etape h3,.batiment__etape p{opacity:1}
  .batiment__etape h3{font-size:clamp(1.45rem,5.6vw,1.8rem)}
  .batiment__etape p{margin-top:10px;font-size:1rem;line-height:1.5;color:var(--doux)}
  .batiment__liens{margin-top:auto;padding-top:8px;gap:0 22px}
  .batiment__etape{padding-bottom:74px}
  /* Pied de la légende : sur toute sa largeur, séparé par un filet. À gauche le geste et la
     consigne, à droite la sortie. Il fait partie du cadre, il ne flotte pas dessus. */
  .batiment__guide{position:absolute;left:20px;right:20px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center;gap:12px;height:58px;margin:0;
    border-top:1px solid rgb(255 255 255/.16);color:var(--epure);font-size:.95rem;font-weight:500;white-space:nowrap}
  .batiment__consigne{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .batiment__guide a{display:inline-flex;align-items:center;height:44px;padding:0 4px 0 12px;font-weight:600;text-decoration:underline;text-decoration-color:var(--energie);text-decoration-thickness:2px;text-underline-offset:.32em}
  /* Le geste : un trait qui descend dans une fente, en boucle. */
  .batiment__geste{position:relative;flex:none;width:5px;height:26px;border-radius:3px;background:rgb(255 255 255/.18);overflow:hidden}
  .batiment__geste i{position:absolute;left:0;top:0;width:100%;height:10px;border-radius:3px;background:var(--energie);animation:geste 1.5s var(--aise-sortie) infinite}
  /* Pendant la scène, les commandes se retirent : rien ne distrait. */
  html.scene-pin .dock{transform:translate(-50%,calc(100% + 40px))}
  html.scene-pin .nav:not([data-ouvert]){transform:translateY(calc(-100% - 90px))}

  /* Hero : le symbole prend la largeur et sort du cadre, le titre tient en deux lignes pleines. */
  .hero{padding-top:calc(var(--nav-h) + 34px);padding-bottom:56px;min-height:100svh;display:grid}
  .hero__grille{grid-template-rows:auto 1fr auto;gap:18px}
  .hero__titre{font-size:clamp(3.2rem,15.2vw,5.4rem);line-height:.9}
  .hero__symbole{width:min(104%,460px);justify-self:end;align-self:center;margin-right:calc(var(--gouttiere)*-1.6)}
  .hero__accroche{font-size:1.06rem;line-height:1.5;max-width:34ch}
  .hero__actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
  .hero__actions .btn{--h:56px;width:100%}

  .section{padding-block:clamp(64px,16vw,96px)}
  .urgence{padding-block:64px}
  .urgence__tel{--h:72px;width:100%;font-size:clamp(1.7rem,8.4vw,2.4rem)}
  .urgence__actions{justify-items:stretch}
  .urgence::before{width:46%;right:-22%}
  .fil-conducteur__etape h3{font-size:1.28rem}
  .zones__liens{gap:0 20px}
  .zones__liens li a.zone{font-size:1.02rem}
  .faq__reponse{padding-right:8px}
  .faq__item summary{min-height:64px;padding:16px 0}
  .contact-bloc__form{margin-inline:calc(var(--gouttiere)*-.4);border-radius:24px}
  .grand-tel__num{font-size:clamp(2.2rem,11vw,3rem)}
}
@keyframes geste{0%{transform:translateY(-10px)}70%,100%{transform:translateY(24px)}}
@media (max-width:999px) and (max-height:700px){
  .scene-carte{height:40svh}
  .batiment__liens .lien-fleche{min-height:36px}
  .batiment__etape p{font-size:.94rem}
}
@media (min-width:1000px){.hero__titre{font-size:clamp(3.6rem,7.3vw,7.4rem)}}