/* ══════════════════════════════════════════════════════════════════
   PAGES ANNEXES — la meme grammaire que la home, en plus calme

   La home porte la mise en scene : video, scene epinglee, roue de la
   matiere. Une page de prestation a un autre travail — elle repond a
   une question et elle fait appeler. Les composants ci-dessous reprennent
   donc la matiere de Seve (papier, filets, rayons asymetriques 32/4,
   Fraunces sur les titres) sans en reprendre le spectacle.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fil d'Ariane ── */
.ariane{margin-bottom:22px}
.ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;
  font-size:12px;letter-spacing:.06em;color:var(--encre-doux)}
.ariane li+li::before{content:'/';margin-right:8px;color:rgba(15,42,33,.3)}
.ariane a{color:var(--encre-doux);text-decoration:none;border-bottom:1px solid transparent;
  transition:.3s var(--e)}
.ariane a:hover{color:var(--seve);border-bottom-color:rgba(30,111,76,.4)}
.ariane [aria-current="page"]{color:var(--encre)}

/* ── premier ecran de page annexe ──────────────────────────────────
   Pas de video : le titre doit etre lisible a la premiere image et le
   poids de la page rester bas. Le visuel est pose dans une arche, la
   meme forme que le portrait de l'atelier sur la home. */
.hero-page{position:relative;padding-top:clamp(112px,13vw,168px);
  padding-bottom:clamp(48px,6vw,86px);overflow:hidden}
.hero-page::before{content:'';position:absolute;top:0;right:0;width:min(46vw,720px);
  height:100%;background:linear-gradient(200deg,rgba(30,111,76,.09),rgba(30,111,76,0) 62%);
  pointer-events:none}
.hp-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.72fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.hp-texte h1{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(2.3rem,5.1vw,4.15rem);line-height:1.03;letter-spacing:-.035em;
  margin:16px 0 20px;max-width:16ch}
.hp-texte h1 em{font-style:italic;color:var(--seve)}
.hp-texte .chapeau{font-size:clamp(15px,1.15vw,17px);color:var(--encre-doux);
  max-width:56ch;line-height:1.68}
.hp-texte .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}

.hp-reperes{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--trait)}
.hp-reperes div{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--trait);
  min-width:130px}
.hp-reperes div:last-child{border-right:0;margin-right:0}
.hp-reperes b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.03em;color:var(--seve)}
.hp-reperes span{display:block;margin-top:7px;font-size:12px;line-height:1.4;
  color:var(--encre-doux);max-width:20ch}

.hp-visuel{position:relative}
.hp-arche{position:relative;overflow:hidden;border-radius:999px 999px 28px 28px;
  aspect-ratio:4/4.9;background:var(--creme-2);
  box-shadow:0 40px 80px -50px rgba(15,42,33,.5)}
.hp-arche img{width:100%;height:100%;object-fit:cover;display:block}
.hp-arche::after{content:'';position:absolute;inset:auto 0 0;height:42%;
  background:linear-gradient(to top,rgba(15,42,33,.62),rgba(15,42,33,0))}
.hp-legende{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;
  font-size:11.5px;line-height:1.4;color:rgba(244,241,232,.82)}

/* ── rythme des sections ── */
.pg-sec{padding-block:clamp(56px,7vw,104px)}
.pg-sec+.pg-sec{padding-top:0}
.pg-sec.papier{background:var(--papier);border-block:1px solid var(--trait);
  max-width:none;padding-inline:0}
.pg-sec.papier > *{max-width:1280px;margin-inline:auto;padding-inline:var(--g)}

/* ── prose : deux colonnes de lecture, jamais plus de 68 caracteres ── */
.pg-prose{columns:2;column-gap:clamp(32px,4vw,68px);max-width:96ch}
.pg-prose p{break-inside:avoid;margin-bottom:16px;color:var(--encre-doux);
  font-size:15.5px;line-height:1.72}
.pg-prose p strong{color:var(--encre);font-weight:600}
.pg-prose p:last-child{margin-bottom:0}
@media(max-width:820px){.pg-prose{columns:1}}

/* ── cartes ── */
.pg-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pg-carte{background:var(--papier);border:1px solid var(--trait);padding:26px 24px;
  border-radius:28px 28px 28px 4px;transition:.5s var(--e);position:relative;overflow:hidden}
.pg-carte:nth-child(2n){border-radius:28px 4px 28px 28px}
.pg-carte:nth-child(3n){border-radius:4px 28px 28px 28px}
.pg-carte:hover{transform:translateY(-5px);border-color:rgba(30,111,76,.34);
  box-shadow:0 26px 46px -34px rgba(15,42,33,.45)}
.pg-carte::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:.55s var(--e)}
.pg-carte:hover::after{transform:scaleX(1)}
.pg-carte h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.18rem;
  letter-spacing:-.02em;margin-bottom:11px;line-height:1.22}
.pg-carte p{font-size:14px;color:var(--encre-doux);line-height:1.66}
.pg-carte .tag{display:inline-block;margin-top:16px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--seve);border-top:1px solid var(--trait);padding-top:11px}
@media(max-width:900px){.pg-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pg-cartes{grid-template-columns:1fr}}

/* ── deroule numerote ── */
.pg-etapes{list-style:none;display:grid;gap:0;max-width:92ch}
.pg-etapes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,38px);
  padding-block:clamp(20px,2.4vw,30px);border-top:1px solid var(--trait);align-items:start}
.pg-etapes li:last-child{border-bottom:1px solid var(--trait)}
.pg-num{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.5rem,2.4vw,2.2rem);
  font-weight:400;color:var(--cuivre);line-height:1;min-width:2.4ch;
  font-variant-numeric:tabular-nums}
.pg-etapes h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.24rem;
  letter-spacing:-.02em;margin-bottom:8px}
.pg-etapes p{color:var(--encre-doux);font-size:15px;line-height:1.7;max-width:70ch}

/* ── cartouche cote : la valeur, l'intitule, la conduite entre les deux ── */
.pg-registre{background:var(--encre);color:var(--creme);border-radius:32px 32px 32px 6px;
  padding:clamp(26px,3vw,38px);position:relative;overflow:hidden;align-self:start}
.pg-registre h3{font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic;
  font-size:1.3rem;color:var(--creme);margin-bottom:22px}
.pg-registre dl{display:grid;gap:2px}
.pg-registre dl > div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:12px;padding-block:13px;border-top:1px solid rgba(244,241,232,.13)}
.pg-registre dl > div::after{content:'';grid-column:2;height:0;
  border-bottom:1px dotted rgba(244,241,232,.28);transform:translateY(-4px)}
.pg-registre dt{grid-column:1;font-family:'Fraunces',Georgia,serif;font-size:1.5rem;
  font-weight:500;color:var(--pousse);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pg-registre dd{grid-column:3;font-size:13px;color:rgba(244,241,232,.74);text-align:right;
  max-width:24ch}
.pg-registre-pied{margin-top:20px;padding-top:16px;border-top:1px solid rgba(244,241,232,.13);
  font-size:11.5px;color:rgba(244,241,232,.45)}

/* ── grille discours + cartouche ── */
.pg-duo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.pg-duo{grid-template-columns:1fr}}

/* ── questions frequentes ── */
.pg-faq{max-width:88ch}
.pg-faq h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.5rem;
  letter-spacing:-.025em;margin-bottom:8px}
.pg-faq details{border-bottom:1px solid var(--trait)}
.pg-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:19px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:500;
  transition:.3s var(--e)}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary:hover{color:var(--seve)}
.pg-plus{position:relative;width:15px;height:15px;flex:none}
.pg-plus::before,.pg-plus::after{content:'';position:absolute;background:var(--cuivre);
  transition:.4s var(--e)}
.pg-plus::before{left:0;right:0;top:7px;height:1.5px}
.pg-plus::after{top:0;bottom:0;left:6.75px;width:1.5px}
.pg-faq details[open] .pg-plus::after{transform:scaleY(0)}
.pg-rep{padding-bottom:20px}
.pg-rep p{color:var(--encre-doux);font-size:15px;line-height:1.72;max-width:72ch}

/* ── tableau d'ordres de grandeur ── */
.pg-table{width:100%;border-collapse:collapse;font-size:14.5px}
.pg-table caption{text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);padding-bottom:14px}
.pg-table th,.pg-table td{text-align:left;padding:15px 18px 15px 0;
  border-bottom:1px solid var(--trait);vertical-align:top}
.pg-table th{font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-doux)}
.pg-table td:last-child{font-family:'Fraunces',Georgia,serif;font-size:1.06rem;
  color:var(--seve);white-space:nowrap;text-align:right;padding-right:0}
.pg-table-note{margin-top:14px;font-size:12.5px;color:var(--encre-doux);max-width:74ch}

/* ── liste a puces cuivre ── */
.pg-liste{list-style:none;display:grid;gap:11px;max-width:78ch}
.pg-liste li{position:relative;padding-left:26px;color:var(--encre-doux);font-size:15px;
  line-height:1.68}
.pg-liste li::before{content:'';position:absolute;left:0;top:10px;width:11px;height:1.5px;
  background:var(--cuivre)}
.pg-liste li strong{color:var(--encre);font-weight:600}

/* ── bloc d'appel de fin de page ──────────────────────────────────
   Il etait vert nuit, comme le pied : les deux se collaient en un seul
   pave sombre de 700px et l'appel disparaissait dedans. Il reste donc
   sur le papier, cerne d'un filet cuivre, et c'est le pied qui garde
   le passage au sombre. */
.pg-appel{margin-top:clamp(56px,7vw,104px);padding-block:clamp(44px,5vw,72px);
  background:var(--papier);border-top:1px solid var(--trait);position:relative;overflow:hidden}
.pg-appel::before{content:'';position:absolute;top:-60%;right:-6%;width:min(46vw,640px);
  aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(184,115,51,.12),rgba(184,115,51,0) 68%)}
.pg-appel-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(26px,4vw,60px);
  align-items:center}
.pg-appel h2{font-weight:400;font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.14;
  letter-spacing:-.03em;max-width:22ch}
.pg-appel h2 em{font-style:italic;color:var(--seve)}
.pg-appel p{margin-top:14px;color:var(--encre-doux);font-size:15px;max-width:52ch}
.pg-appel-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn-clair{background:var(--seve);color:var(--papier);border:1px solid var(--seve)}
.btn-clair:hover{background:var(--encre);border-color:var(--encre);transform:translateY(-2px)}
@media(max-width:820px){.pg-appel-in{grid-template-columns:1fr}}

/* ── repli du premier ecran ── */
@media(max-width:900px){
  .hp-in{grid-template-columns:1fr;gap:34px}
  .hp-visuel{max-width:420px}
  .hp-arche{aspect-ratio:4/3.6;border-radius:180px 180px 24px 24px}
  .hero-page::before{width:100%;height:46%}
}
@media(max-width:560px){
  .hp-reperes div{padding-right:18px;margin-right:18px;min-width:110px}
  .hp-reperes b{font-size:1.5rem}
}

/* ══ l'objet dessine ════════════════════════════════════════════════
   Une photo de tableau electrique achetee en banque d'images montre le
   tableau de quelqu'un d'autre, souvent americain. Le dessin dit la
   meme chose et il se met sous tension au scroll : les manettes
   basculent en cascade, le peigne se remplit de cuivre. */
.hp-visuel.obj{display:flex;flex-direction:column;gap:16px;align-items:center}
.obj-coffret{width:100%;max-width:420px;height:auto;display:block}
.obj-legende{font-size:11.5px;line-height:1.5;color:var(--encre-doux);max-width:34ch;
  text-align:center}
.oc-boite{fill:var(--papier);stroke:var(--encre);stroke-width:1.4;opacity:.9}
.oc-fond{fill:var(--creme-2);stroke:none}
.oc-rail rect{fill:rgba(15,42,33,.28)}
.oc-peigne path{fill:none;stroke:var(--cuivre);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:322;stroke-dashoffset:322;transition:stroke-dashoffset 1.1s var(--e) .25s}
.rev.vu .oc-peigne path,.hero-page .oc-peigne path{stroke-dashoffset:0}
.oc-peigne path:nth-child(2){transition-delay:.45s}
.oc-peigne path:nth-child(3){transition-delay:.65s}
.oc-mod rect:first-child{fill:var(--papier);stroke:var(--encre);stroke-width:1.1;opacity:.85}
.oc-manette{fill:rgba(15,42,33,.34);transform-box:fill-box;transform-origin:center;
  transform:translateY(9px);transition:transform .5s var(--e) calc(var(--i) * 42ms + .5s),
  fill .5s var(--e) calc(var(--i) * 42ms + .5s)}
.hero-page .oc-manette{transform:translateY(0);fill:var(--seve)}
.oc-diff rect:first-child{fill:#fff}
.hero-page .oc-diff .oc-manette{fill:var(--pousse)}
.oc-jour{stroke:rgba(15,42,33,.2);stroke-width:1;stroke-linecap:round}
.oc-etiquettes path{stroke:rgba(15,42,33,.16);stroke-width:1;stroke-dasharray:3 5}
.oc-cables path{fill:none;stroke:rgba(15,42,33,.32);stroke-width:2;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){
  .oc-peigne path{stroke-dashoffset:0;transition:none}
  .oc-manette{transform:translateY(0);transition:none}
}

/* ── les autres objets dessines ─────────────────────────────────── */
.obj-svg{width:100%;max-width:460px;height:auto;display:block}
.obj-svg text{font-family:'Inter',system-ui,sans-serif;font-size:11px;fill:var(--encre-doux)}
.obj-svg .fort{fill:var(--encre);font-weight:500}

/* schema unifilaire */
.obj-unifilaire{max-width:520px}
.uf-arrivee,.uf-peigne{fill:none;stroke:var(--cuivre);stroke-width:2.2;stroke-linecap:round}
.uf-branchement{fill:var(--papier);stroke:var(--encre);stroke-width:1.3}
.uf-diff{fill:rgba(63,169,113,.14);stroke:var(--seve);stroke-width:1.6}
.uf-titre{font-size:11.5px}
.uf-fil{fill:none;stroke:rgba(15,42,33,.34);stroke-width:1.5;stroke-linecap:round}
.uf-dj{fill:var(--papier);stroke:var(--encre);stroke-width:1.2}
.uf-picto{fill:none;stroke:var(--seve);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.uf-picto .plein{fill:var(--seve);stroke:none}
.uf-lib{font-size:10.5px;text-anchor:middle}
.uf-depart{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--e) calc(var(--i) * 90ms + .3s),transform .6s var(--e) calc(var(--i) * 90ms + .3s)}
.hero-page .uf-depart,.rev.vu .uf-depart{opacity:1;transform:none}

/* courbe de retablissement */
.obj-courbe .cb-grille path{stroke:rgba(15,42,33,.1);stroke-width:1;stroke-dasharray:2 6}
.cb-axe{font-size:10px}
.obj-courbe path[class^="cb-"]:not([class*="grille"]){fill:none;stroke-width:2.6;stroke-linecap:round}
.cb-avant,.cb-apres{stroke:var(--seve)}
.cb-chute,.cb-remonte{stroke:var(--cuivre)}
.cb-panne{stroke:rgba(15,42,33,.34);stroke-dasharray:5 7}
.cb-jalons circle{fill:var(--cuivre)}
.cb-jalons path{stroke:rgba(15,42,33,.28);stroke-width:1;fill:none}
.cb-jalons text{font-size:10.5px;text-anchor:middle;fill:var(--encre)}
.cb-jalons g{opacity:0;transition:opacity .5s var(--e) calc(var(--i) * 220ms + .4s)}
.hero-page .cb-jalons g,.rev.vu .cb-jalons g{opacity:1}
.cb-duree{font-size:10.5px;fill:var(--encre-doux)}

/* toiture solaire */
.sl-course{fill:none;stroke:rgba(217,131,36,.35);stroke-width:1.4;stroke-dasharray:4 7}
.sl-soleil{fill:rgba(217,131,36,.18);stroke:var(--solaire);stroke-width:1.6}
.sl-rayons path{stroke:var(--solaire);stroke-width:1.6;stroke-linecap:round}
.sl-toit{fill:var(--creme-2);stroke:var(--encre);stroke-width:1.4}
.sl-panneau{fill:rgba(30,111,76,.16);stroke:var(--seve);stroke-width:1;
  opacity:0;transition:opacity .5s var(--e) calc(var(--i) * 46ms + .3s)}
.hero-page .sl-panneau,.rev.vu .sl-panneau{opacity:1}
.sl-mur{stroke:var(--encre);stroke-width:1.6}
.sl-borne rect{fill:var(--papier);stroke:var(--encre);stroke-width:1.3}
.sl-borne path{fill:none;stroke:var(--solaire);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sl-cable{fill:none;stroke:var(--cuivre);stroke-width:2;stroke-linecap:round;stroke-dasharray:280;
  stroke-dashoffset:280;transition:stroke-dashoffset 1.2s var(--e) .6s}
.hero-page .sl-cable,.rev.vu .sl-cable{stroke-dashoffset:0}

/* plan de plateau */
.pl-dalle{fill:var(--papier);stroke:var(--encre);stroke-width:1.4}
.pl-cloison{fill:none;stroke:rgba(15,42,33,.3);stroke-width:1.4}
.pl-gaine{fill:none;stroke:var(--cuivre);stroke-width:2.4;stroke-linecap:round}
.pl-lum{fill:rgba(217,131,36,.2);stroke:var(--solaire);stroke-width:1;
  opacity:0;transition:opacity .45s var(--e) calc(var(--i) * 34ms + .3s)}
.hero-page .pl-lum,.rev.vu .pl-lum{opacity:1}
.pl-postes rect{fill:none;stroke:rgba(15,42,33,.34);stroke-width:1.2}
.pl-flux{fill:none;stroke:var(--seve);stroke-width:1.6;stroke-dasharray:4 6}
.pl-lib{font-size:10.5px}

/* annee de maintenance */
.an-derive{fill:none;stroke:var(--seve);stroke-width:2.2;stroke-linecap:round}
.an-seuil{fill:none;stroke:var(--cuivre);stroke-width:1.2;stroke-dasharray:5 6}
.an-mois rect{fill:rgba(15,42,33,.12);opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--e) calc(var(--i) * 55ms + .3s),transform .4s var(--e) calc(var(--i) * 55ms + .3s)}
.hero-page .an-mois rect,.rev.vu .an-mois rect{opacity:1;transform:none}
.an-visite rect{fill:var(--seve)}
.an-mois text{font-size:10px;text-anchor:middle}
.an-reperes path{stroke:rgba(30,111,76,.4);stroke-width:1;stroke-dasharray:3 4}
.an-lib{font-size:10.5px}
@media(prefers-reduced-motion:reduce){
  .uf-depart,.cb-jalons g,.sl-panneau,.pl-lum,.an-mois rect{opacity:1;transform:none;transition:none}
  .sl-cable{stroke-dashoffset:0;transition:none}
}

/* ── fiches de chantier ─────────────────────────────────────────────
   La home epingle les cas et les fait defiler lateralement. Ici on veut
   pouvoir les lire, les comparer et les imprimer : trois fiches posees
   l'une sous l'autre, chacune avec le meme triptyque besoin / solution /
   contrainte et un seul chiffre en resultat. */
.pg-cas{display:grid;gap:clamp(18px,2.4vw,30px)}
.pg-cas-fiche{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,44px);background:var(--papier);border:1px solid var(--trait);
  border-radius:32px 32px 32px 6px;padding:clamp(24px,3vw,38px);transition:.5s var(--e)}
.pg-cas-fiche:nth-child(2n){border-radius:32px 6px 32px 32px}
.pg-cas-fiche:hover{border-color:rgba(30,111,76,.3);
  box-shadow:0 30px 56px -42px rgba(15,42,33,.45)}
.pg-cas-num{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.8rem,3vw,2.6rem);
  color:var(--cuivre);line-height:1;font-variant-numeric:tabular-nums}
.pg-cas-corps h3{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.025em;margin:10px 0 18px;max-width:32ch}
.pg-cas-corps dl{display:grid;gap:0;max-width:88ch}
.pg-cas-corps dl > div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;
  padding-block:12px;border-top:1px solid var(--trait)}
.pg-cas-corps dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-doux);padding-top:3px}
.pg-cas-corps dd{font-size:14.5px;line-height:1.66;color:var(--encre-doux)}
.pg-cas-res{display:flex;align-items:baseline;gap:12px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--trait)}
.pg-cas-res b{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.8rem,3vw,2.5rem);color:var(--seve);letter-spacing:-.03em;line-height:1}
.pg-cas-res span{font-size:13px;color:var(--encre-doux);max-width:30ch}
@media(max-width:700px){
  .pg-cas-fiche{grid-template-columns:1fr;gap:10px}
  .pg-cas-corps dl > div{grid-template-columns:1fr;gap:4px}
}

/* ── premier ecran sans objet : le texte ne garde pas une colonne vide ── */
.hp-in.solo{grid-template-columns:minmax(0,1fr)}
.hp-in.solo .hp-texte h1{max-width:20ch}
.hp-in.solo .hp-reperes{max-width:none}
.hp-in.solo .hp-reperes b{font-size:clamp(1.2rem,1.7vw,1.5rem)}

/* ── secteurs de la zone d'intervention ── */
.pg-secteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
.pg-secteur h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.16rem;
  letter-spacing:-.02em;margin-bottom:7px}
.pg-secteur > p{font-size:13px;color:var(--encre-doux);margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--trait)}
.pg-secteur ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.pg-secteur li{font-size:12.5px;color:var(--encre-doux);background:var(--papier);
  border:1px solid var(--trait);border-radius:999px;padding:5px 12px;transition:.3s var(--e)}
.pg-secteur li:hover{border-color:rgba(30,111,76,.4);color:var(--encre)}
@media(max-width:1000px){.pg-secteurs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pg-secteurs{grid-template-columns:1fr}}

/* la carte des 30 km, posee dans un premier ecran de page annexe */
.hp-visuel.zone-carte{background:var(--papier);border:1px solid var(--trait);
  border-radius:32px 32px 32px 6px;padding:clamp(18px,2.4vw,30px)}
.hp-visuel.zone-carte svg{width:100%;height:auto;display:block}

/* ── pages legales ──────────────────────────────────────────────────
   Un tableau de mentions se lit en diagonale : intitule a gauche en
   petites capitales, valeur a droite, un filet par ligne. Les champs
   que seule l'entreprise peut fournir sont marques en cuivre pour
   qu'aucun ne parte en ligne par oubli. */
.pg-legal{max-width:92ch}
.pg-legal dl{display:grid;gap:0}
.pg-legal dl > div{display:grid;grid-template-columns:minmax(200px,.42fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px);padding-block:15px;border-top:1px solid var(--trait)}
.pg-legal dl > div:last-child{border-bottom:1px solid var(--trait)}
.pg-legal dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);padding-top:2px}
.pg-legal dd{font-size:15px;line-height:1.6}
.pg-legal dd a{color:var(--seve);text-decoration:none;border-bottom:1px solid rgba(30,111,76,.3)}
.pg-legal-note{margin-top:18px;font-size:13.5px;line-height:1.7;color:var(--encre-doux);
  max-width:78ch}
.pg-legal-note a{color:var(--seve)}
.a-completer{display:inline-block;font-size:12.5px;letter-spacing:.02em;color:var(--cuivre);
  background:rgba(184,115,51,.09);border:1px dashed rgba(184,115,51,.45);border-radius:6px;
  padding:2px 9px}
@media(max-width:700px){.pg-legal dl > div{grid-template-columns:1fr;gap:4px}}

/* un lien dans une carte garde la couleur de la seve */
.pg-carte p a{color:var(--seve);text-decoration:none;border-bottom:1px solid rgba(30,111,76,.3);
  transition:.3s var(--e)}
.pg-carte p a:hover{border-bottom-color:var(--seve)}

/* ── tableaux : en colonne unique, la grille tombe en blocs ──────────
   Trois colonnes dans 390px de large debordent de 57px, quelle que
   soit la taille de police. Chaque ligne devient donc un bloc : la
   configuration en tete, sa description, et le montant detache. */
@media(max-width:620px){
  .pg-table,.pg-table tbody,.pg-table tr,.pg-table td{display:block;width:100%}
  .pg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pg-table tr{border-top:1px solid var(--trait);padding-block:16px}
  .pg-table tr:last-child{border-bottom:1px solid var(--trait)}
  .pg-table td{border:0;padding:0}
  .pg-table td:first-child{font-weight:600;font-size:15px;margin-bottom:5px}
  .pg-table td:nth-child(2){color:var(--encre-doux);font-size:14px;line-height:1.6}
  .pg-table td:last-child{text-align:left;margin-top:10px;white-space:normal}
}
.sl-lib{font-size:10.5px}

/* ══════════════════════════════════════════════════════════════════
   PAGES ANNEXES — BORD À BORD ET MOUVEMENT

   Défaut signalé : sur grand écran, tout le contenu tenait dans un cadre
   centré de 1280px — 320px vides de chaque côté à 1920, et un déroulé
   qui n'occupait que la moitié gauche de ce cadre. La lecture était
   celle d'une colonne centrée. La landing avait eu le même défaut et la
   même correction : le cadre saute, seule la gouttière de page reste,
   le titre s'ancre à gauche et ce qui l'accompagne va au bord droit.

   Second défaut : un simple fondu par bloc. Chaque composant a
   maintenant son geste, et les sections longues passent en rail — le
   titre reste collé à gauche pendant que le contenu défile à droite.
   ═══════════════════════════════════════════════════════════════════ */

@media(min-width:1160px){
  .page-annexe main .wrap{max-width:none;padding-inline:var(--g)}

  /* le duo s'écarte aux deux bords, comme sur la landing */
  .page-annexe .titre-bloc.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,6vw,120px);row-gap:0}
  .page-annexe .titre-bloc.duo .sous{justify-self:end}

  /* premier écran : le texte tient l'angle gauche, l'objet l'angle droit */
  .hp-in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(40px,6vw,140px)}
  .hp-visuel{justify-self:end;width:100%;max-width:640px}
  .hp-texte h1{max-width:18ch}

  /* discours + cartouche : le cartouche va au bord droit et reste
     visible pendant la lecture du texte qu'il résume */
  .pg-duo{grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:clamp(40px,6vw,140px)}
  .pg-duo > .pg-registre{justify-self:end;width:100%;position:sticky;top:112px}
  .pg-prose{max-width:none;columns:2}
  .pg-cartes{gap:clamp(16px,1.4vw,24px)}
  .pg-carte p{max-width:52ch}
  .pg-cas-corps dl{max-width:none}
  .pg-appel-in{grid-template-columns:minmax(0,1fr) auto}
  .pg-appel h2{max-width:26ch}
}

/* ── le rail : titre collé, contenu qui défile ──────────────────── */
.pg-rail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,6vw,140px);align-items:start}
.pg-rail-g{align-self:stretch}       /* sans hauteur, rien a coller */
.pg-rail-colle{position:sticky;top:120px}
.pg-rail .titre-bloc{margin-bottom:0;max-width:none}
.pg-rail .titre-bloc h2{max-width:14ch}
.pg-rail .titre-bloc .sous{margin-top:22px;max-width:44ch}
.pg-rail .pg-etapes,.pg-rail .pg-faq,.pg-rail .pg-legal{max-width:none}
@media(max-width:1000px){
  .pg-rail{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .pg-rail-colle{position:static}
}

/* la jauge du déroulé : compteur, étape en cours, barre */
.pg-jauge{margin-top:clamp(32px,4vw,56px);padding-top:22px;border-top:1px solid var(--trait);
  max-width:420px}
.pg-jauge-compte{display:flex;align-items:baseline;gap:10px}
.pg-jauge-n{font-family:'Fraunces',Georgia,serif;font-size:clamp(3.4rem,6vw,5.6rem);line-height:.9;
  letter-spacing:-.05em;color:var(--seve);font-variant-numeric:tabular-nums}
.pg-jauge-sur{font-size:13px;letter-spacing:.14em;color:var(--encre-doux)}
.pg-jauge-titre{margin-top:10px;font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:1.2rem;color:var(--encre);min-height:1.5em}
.pg-jauge.pg-bascule .pg-jauge-n,.pg-jauge.pg-bascule .pg-jauge-titre{animation:pg-bascule .55s var(--e)}
@keyframes pg-bascule{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pg-jauge-barre{margin-top:18px;height:2px;background:var(--trait);border-radius:2px;overflow:hidden}
.pg-jauge-barre i{display:block;height:100%;background:var(--cuivre);transform:scaleX(0);
  transform-origin:left;transition:transform .6s var(--e)}
@media(max-width:1000px){.pg-jauge{display:none}}

/* le déroulé suivi : un câble de cuivre relie les numéros et se remplit
   jusqu'à l'étape lue ; les étapes à venir restent en retrait */
.pg-suivi{position:relative}
.pg-cable{position:absolute;left:calc(1.2ch + 1px);top:34px;bottom:34px;width:2px;
  background:var(--trait);border-radius:2px;pointer-events:none}
.pg-cable i{display:block;height:100%;background:linear-gradient(var(--cuivre-clair),var(--cuivre));
  transform:scaleY(0);transform-origin:top;border-radius:2px;
  box-shadow:0 0 12px rgba(184,115,51,.35)}
.pg-suivi .pg-num{position:relative;z-index:1;background:var(--creme);padding-block:6px;
  transition:color .45s var(--e),transform .45s var(--e)}
.pg-suivi li{padding-block:clamp(26px,3vw,40px)}
.pg-suivi li h3,.pg-suivi li p{transition:opacity .5s var(--e),transform .5s var(--e)}
.pg-suivi li:not(.pg-atteint) h3,.pg-suivi li:not(.pg-atteint) p{opacity:.34}
.pg-suivi li:not(.pg-atteint) .pg-num{color:rgba(184,115,51,.45)}
.pg-suivi li.pg-actif .pg-num{color:var(--seve)}
.pg-suivi li.pg-actif p{color:var(--encre)}
.pg-suivi li h3{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.pg-suivi li p{font-size:15.5px;max-width:62ch}

/* ── entrées élément par élément (pages.js) ─────────────────────────
   Préfixe .page-annexe : ces règles passent devant la cascade générique
   de seve.css, qui animait déjà les enfants d'une grille en bloc. */
.page-annexe .pg-entre{opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--e) calc(var(--r,0) * 70ms),
             transform .9s var(--e) calc(var(--r,0) * 70ms)}
.page-annexe .pg-entre.pg-vu{opacity:1;transform:none}

/* cartes : elles basculent en se posant, par vague de rangée */
.page-annexe .pg-carte.pg-entre{transform:translateY(46px) rotate(-1.4deg) scale(.96);
  transform-origin:left bottom;transition-delay:calc(var(--r,0) * 90ms)}
.page-annexe .pg-carte.pg-entre:nth-child(3n+2){transform:translateY(58px) scale(.96)}
.page-annexe .pg-carte.pg-entre:nth-child(3n){transform:translateY(46px) rotate(1.4deg) scale(.96);
  transform-origin:right bottom}
.page-annexe .pg-carte.pg-entre.pg-vu{transform:none}
.page-annexe .pg-carte.pg-vu:hover{transform:translateY(-5px)}
/* la lueur qui suit le pointeur */
.pg-carte::before,.pg-cas-fiche::before{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .4s var(--e);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(63,169,113,.13),transparent 70%)}
.pg-carte:hover::before,.pg-cas-fiche:hover::before{opacity:1}
.pg-cas-fiche{position:relative;overflow:hidden}
.pg-carte > *,.pg-cas-fiche > *{position:relative}

/* cartouche : les lignes arrivent de la droite, la conduite se trace */
.page-annexe .pg-registre dl > div.pg-entre{transform:translateX(26px)}
.page-annexe .pg-registre dl > div.pg-entre.pg-vu{transform:none}
.pg-registre dl > div::after{transform-origin:left;transform:translateY(-4px) scaleX(0);
  transition:transform .8s var(--e) calc(var(--r,0) * 70ms + .3s)}
.pg-registre dl > div.pg-vu::after,.pg-registre dl > div:not(.pg-entre)::after{transform:translateY(-4px) scaleX(1)}

/* tableau : chaque ligne glisse depuis la gauche */
.page-annexe .pg-table tbody tr.pg-entre{transform:translateX(-24px)}
.page-annexe .pg-table tbody tr.pg-entre.pg-vu{transform:none}

/* questions : une entrée plus courte, le trait du bas se dessine */
.pg-faq details{position:relative}
.pg-faq details::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.pg-faq details:hover::after,.pg-faq details[open]::after{transform:scaleX(1)}

/* ── mouvement lié au défilement (Chrome, Edge) ── */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* l'objet du premier écran remonte moins vite que la page */
    .hp-visuel{animation:pg-flotte linear both;animation-timeline:scroll(root);
      animation-range:0 90svh}
    @keyframes pg-flotte{to{transform:translateY(-9%)}}
    .hp-arche img{animation:pg-glisse linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes pg-glisse{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
    /* le halo cuivre de l'appel final traverse le bloc */
    .pg-appel::before{animation:pg-halo linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes pg-halo{from{transform:translate(18%,-10%)}to{transform:translate(-42%,24%)}}
    /* les numéros de fiche de chantier grossissent en passant */
    .pg-cas-num{animation:pg-pouls linear both;animation-timeline:view();
      animation-range:entry 10% cover 50%}
    @keyframes pg-pouls{from{transform:scale(.7);opacity:.3}to{transform:none;opacity:1}}
  }
}

@media(prefers-reduced-motion:reduce){
  .page-annexe .pg-entre{opacity:1;transform:none;transition:none}
  .pg-suivi li h3,.pg-suivi li p{opacity:1!important}
  .pg-cable i{transform:scaleY(1)!important}
  .pg-registre dl > div::after{transform:translateY(-4px)}
  .pg-rail-colle{position:static}
}

/* la conduite pointillée tombait sur une seconde rangée : le pseudo-élément
   est généré après dd, le placement automatique l'envoyait à la ligne */
.pg-registre dt,.pg-registre dd,.pg-registre dl > div::after{grid-row:1}
.pg-registre dl > div{align-items:center}

/* le fil mesure les blocs colles a leur place de mise en page (seve.js) */
.fc-mesure .pg-rail-colle,.fc-mesure .pg-duo > .pg-registre{position:static!important}

/* ══════════════════════════════════════════════════════════════════
   L'INDEX ET LA PLAQUE

   Remplacent le texte en deux colonnes serré contre un cartouche
   vertical : trois colonnes de lecture à hauteurs inégales, et un grand
   vide sous la plus courte. Chaque idée a maintenant sa ligne sur toute
   la largeur, et les chiffres passent en bandeau, comme la plaque
   signalétique vissée sur un tableau.
   ═══════════════════════════════════════════════════════════════════ */
.pg-index{list-style:none;counter-reset:ix;border-bottom:1px solid var(--trait)}
.pg-ix{position:relative;display:grid;align-items:baseline;
  grid-template-columns:clamp(56px,6vw,110px) minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(20px,3vw,56px);padding-block:clamp(26px,3vw,40px)}
/* le filet du haut : un trait gris, que le vert parcourt à l'entrée. Pas
   de cuivre : le fil de cuivre passe dans la marge, et deux orangés qui
   se croisent ne se distinguent plus */
.pg-ix::before,.pg-ix::after{content:'';position:absolute;left:0;right:0;top:0;height:1px}
.pg-ix::before{background:var(--trait)}
.pg-ix::after{background:linear-gradient(90deg,var(--seve),var(--pousse) 55%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e)}
.pg-ix.pg-vu::after{transform:scaleX(1)}
.pg-ix-n{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1;
  color:rgba(184,115,51,.5);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  transition:color .5s var(--e)}
.pg-ix-t{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.12;color:var(--encre);max-width:22ch}
.pg-ix-p{font-size:clamp(15.5px,.95vw,17px);line-height:1.75;color:var(--encre-doux);max-width:66ch}
.pg-ix-p strong{color:var(--encre);font-weight:600}
.pg-ix:hover .pg-ix-n,.pg-ix.pg-vu .pg-ix-n{color:var(--cuivre)}
.pg-ix:hover .pg-ix-t{color:var(--seve)}
.pg-ix-t{transition:color .4s var(--e)}
/* entrée : la ligne s'écrit de gauche à droite, le trait vert d'abord,
   puis le numéro, l'accroche et le texte. Un simple fondu de 26 px ne se
   voyait pas sur des lignes aussi larges. */
.page-annexe .pg-ix.pg-entre{opacity:1;transform:none}
.page-annexe .pg-ix.pg-entre > *{opacity:0;transform:translateX(-36px);
  transition:opacity .7s var(--e),transform .9s var(--e)}
.page-annexe .pg-ix.pg-entre > .pg-ix-n{transition-delay:.12s}
.page-annexe .pg-ix.pg-entre > .pg-ix-t{transition-delay:.22s}
.page-annexe .pg-ix.pg-entre > .pg-ix-p{transition-delay:.34s}
.page-annexe .pg-ix.pg-vu > *{opacity:1;transform:none}
@media(max-width:900px){
  .pg-ix{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .pg-ix-p{grid-column:2}
}

.pg-plaque{position:relative;margin-top:clamp(40px,5vw,72px);background:var(--encre);
  color:var(--creme);border-radius:22px;padding:clamp(24px,2.6vw,36px) clamp(26px,3.4vw,52px);
  overflow:hidden;isolation:isolate}
.pg-plaque::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 220px at 12% 0%,rgba(63,169,113,.16),transparent 70%),
             radial-gradient(520px 260px at 100% 100%,rgba(184,115,51,.14),transparent 70%)}
/* les quatre vis */
.pq-vis{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(244,241,232,.34),rgba(244,241,232,.08));
  box-shadow:inset 0 0 0 1px rgba(244,241,232,.16)}
.pq-vis::after{content:'';position:absolute;left:2px;right:2px;top:5px;height:1px;
  background:rgba(15,42,33,.9);transform:rotate(-35deg)}
.pq-vis-0{top:14px;left:14px}.pq-vis-1{top:14px;right:14px}
.pq-vis-2{bottom:14px;left:14px}.pq-vis-3{bottom:14px;right:14px}
.pq-vis-1::after{transform:rotate(20deg)}.pq-vis-3::after{transform:rotate(70deg)}
/* le jeu de barres qui se remplit de cuivre à l'entrée */
.pq-bus{position:absolute;left:clamp(26px,3.4vw,52px);right:clamp(26px,3.4vw,52px);top:0;height:3px;
  background:linear-gradient(90deg,var(--cuivre-clair),var(--cuivre));border-radius:0 0 3px 3px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e) .2s;
  box-shadow:0 0 14px rgba(224,162,100,.5)}
.pg-plaque.pg-vu .pq-bus{transform:scaleX(1)}
.pq-tete{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid rgba(244,241,232,.13)}
.pq-tete h3{font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--creme)}
.pq-tete p{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,232,.45)}
.pq-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pq-case{padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,28px) 6px 0;position:relative}
.pq-case + .pq-case{padding-left:clamp(16px,1.8vw,28px);border-left:1px solid rgba(244,241,232,.13)}
.pq-case dt{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.2rem,3.4vw,3.4rem);color:var(--pousse);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pq-mots .pq-case dt{font-size:clamp(1.35rem,1.8vw,1.9rem);letter-spacing:-.02em;white-space:normal;
  line-height:1.15}
.pq-case dd{margin-top:12px;font-size:13px;line-height:1.55;color:rgba(244,241,232,.72);max-width:26ch}
.page-annexe .pg-plaque .pq-case.pg-entre{transform:translateY(22px)}
.page-annexe .pg-plaque .pq-case.pg-entre.pg-vu{transform:none}
@media(max-width:700px){
  .pq-case + .pq-case{padding-left:0;border-left:0;border-top:1px solid rgba(244,241,232,.13)}
  .pq-case{padding-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .pg-ix::after,.pq-bus{transform:scaleX(1);transition:none}
  .page-annexe .pg-ix.pg-entre > *{opacity:1;transform:none;transition:none}
}

/* ══ LES COMMUNES : le cadran et les secteurs ═══════════════════════
   Cinq grilles d'étiquettes posées côte à côte ne disaient rien de la
   géographie. Le cadran reste en vue pendant qu'on lit la liste, et le
   secteur lu s'allume dessus. */
.pg-rail-zone .titre-bloc .sous{max-width:40ch}
.zn-cadran{margin-top:clamp(24px,3vw,40px);max-width:440px}
.zn-svg{display:block;width:100%;height:auto;max-height:calc(100svh - 430px);min-height:260px;overflow:visible}
.zn-svg text{font-family:'Inter',system-ui,sans-serif;font-size:12px;fill:var(--encre);
  text-anchor:middle;font-weight:500;pointer-events:none}
.zn-svg .zn-nb{font-size:9.5px;font-weight:400;fill:var(--encre-doux);letter-spacing:.04em}
.zn-halo{fill:none;stroke:var(--trait);stroke-dasharray:2 6}
.zn-graduation path{stroke:rgba(184,115,51,.45);stroke-width:1.2}
.zn-sect path,.zn-sect circle{fill:rgba(30,111,76,.06);stroke:rgba(30,111,76,.22);stroke-width:1;
  transition:fill .5s var(--e),stroke .5s var(--e)}
.zn-sect text{transition:fill .4s var(--e)}
.zn-sect.on path,.zn-sect.on circle{fill:var(--seve);stroke:var(--seve)}
.zn-sect.on text{fill:var(--creme)}
.zn-sect.on .zn-nb{fill:rgba(244,241,232,.75)}
.zn-sect{cursor:pointer}
.zn-sect:not(.on):hover path,.zn-sect:not(.on):hover circle{fill:rgba(30,111,76,.16)}
.zn-loire{fill:none;stroke:rgba(90,150,190,.55);stroke-width:5;stroke-linecap:round;pointer-events:none;
  mix-blend-mode:multiply}
.zn-svg .zn-loire-lib{font-size:10px;font-style:italic;font-weight:400;fill:rgba(60,110,150,.9)}
.zn-atelier{fill:var(--cuivre)}
.zn-onde{fill:none;stroke:var(--cuivre);stroke-width:1.5;transform-origin:230px 230px;
  animation:zn-onde 2.8s var(--e) infinite}
@keyframes zn-onde{from{transform:scale(1);opacity:.9}to{transform:scale(6);opacity:0}}
.zn-svg .zn-olivet{font-size:10.5px;font-weight:600;fill:var(--cuivre)}
.zn-sect.on ~ .zn-olivet{fill:var(--cuivre-clair)}
.zn-svg .zn-echelle{font-size:10px;font-weight:400;fill:var(--cuivre);letter-spacing:.12em}

.pg-zns{border-bottom:1px solid var(--trait)}
.pg-zn{position:relative;padding-block:clamp(28px,3.2vw,44px);border-top:1px solid var(--trait)}
.pg-zn::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--seve),var(--pousse) 50%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.pg-zn.on::before{transform:scaleX(1)}
.pg-zn-tete{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.pg-zn-n{font-family:'Fraunces',Georgia,serif;font-size:1.4rem;color:rgba(184,115,51,.55);
  font-variant-numeric:tabular-nums;transition:color .4s var(--e)}
.pg-zn h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.1;transition:color .4s var(--e)}
.pg-zn-nb{margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-doux)}
.pg-zn > p{margin-top:8px;font-size:15px;color:var(--encre-doux)}
.pg-zn ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pg-zn li{font-size:13px;color:var(--encre-doux);background:var(--papier);border:1px solid var(--trait);
  border-radius:99px;padding:6px 14px;transition:border-color .3s var(--e),color .3s var(--e),background .3s var(--e)}
.pg-zn.on .pg-zn-n{color:var(--cuivre)}
.pg-zn.on h3{color:var(--seve)}
.pg-zn.on li{border-color:rgba(30,111,76,.3);color:var(--encre)}
.pg-zn li:hover{background:var(--seve);border-color:var(--seve);color:var(--creme)}
.page-annexe .pg-zn.pg-entre li{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--e),transform .6s var(--e)}
.page-annexe .pg-zn.pg-vu li{opacity:1;transform:none}
@media(max-width:1000px){
  .zn-cadran{max-width:360px;margin-inline:auto}
  .zn-svg{max-height:none}
}
@media(prefers-reduced-motion:reduce){.zn-onde{animation:none;opacity:0}}

/* ══ dessins des pages Réalisations et L'atelier ══ */
.obj-chantiers,.obj-multimetre{max-width:500px}
.ch-sol{stroke:rgba(15,42,33,.35);stroke-width:1.4}
.ch-mur{fill:var(--papier);stroke:var(--encre);stroke-width:1.4}
.ch-porte{fill:rgba(15,42,33,.1)}
.ch-fen rect{fill:rgba(15,42,33,.14);transition:fill .4s var(--e) calc(var(--i) * 40ms + .4s)}
.hero-page .ch-fen rect:nth-child(3n+1),.hero-page .ch-fen rect:nth-child(5n){fill:var(--cuivre-clair)}
.ch-pv rect{fill:var(--seve);opacity:0;transform:translateY(-6px);
  transition:opacity .5s var(--e) calc(var(--i) * 70ms + .5s),transform .6s var(--e) calc(var(--i) * 70ms + .5s)}
.hero-page .ch-pv rect{opacity:1;transform:none}
.ch-bornes rect{fill:var(--papier);stroke:var(--encre);stroke-width:1.3}
.ch-bornes path{fill:none;stroke:var(--pousse);stroke-width:1.8;stroke-linejoin:round}
.ch-cable{fill:none;stroke:var(--cuivre);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:ch-trace 1.8s var(--e) .3s forwards;
  filter:drop-shadow(0 0 4px rgba(224,162,100,.6))}
@keyframes ch-trace{to{stroke-dashoffset:0}}
.obj-chantiers .ch-res text{text-anchor:middle;font-size:10.5px}
.obj-chantiers .ch-res .fort{font-family:'Fraunces',Georgia,serif;font-size:19px;fill:var(--seve);font-weight:500}
.obj-chantiers .ch-num text{text-anchor:middle;font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:var(--cuivre)}
.ch-res text{opacity:0;animation:ch-monte .7s var(--e) forwards}
.ch-res text:nth-child(n+3){animation-delay:.25s}.ch-res text:nth-child(n+5){animation-delay:.5s}
@keyframes ch-monte{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.mm-coque{fill:var(--encre)}
.mm-face{fill:#16372c}
.mm-ecran{fill:#cfe3c9;stroke:rgba(15,42,33,.4)}
.obj-multimetre .mm-chiffre{font-family:'Fraunces',Georgia,serif;font-size:50px;font-weight:500;fill:var(--encre);
  letter-spacing:-.04em}
.obj-multimetre .mm-unite{font-size:12px;font-weight:600;fill:var(--encre);letter-spacing:.1em}
.obj-multimetre .mm-mini{font-size:9px;fill:rgba(15,42,33,.6);letter-spacing:.08em}
.mm-grad path{stroke:rgba(244,241,232,.45);stroke-width:1.4}
.mm-bague{fill:none;stroke:rgba(244,241,232,.18);stroke-width:1.2}
.mm-molette{fill:#244a3d;stroke:rgba(244,241,232,.25)}
.mm-index{stroke:var(--cuivre-clair);stroke-width:4;stroke-linecap:round;transform-origin:230px 248px;
  animation:mm-tourne 1.6s var(--e) .3s both}
@keyframes mm-tourne{from{transform:rotate(-80deg)}to{transform:rotate(0)}}
.obj-multimetre .mm-lib text{fill:rgba(244,241,232,.7);font-size:11px;font-weight:600}
.mm-bornes circle{fill:#0a1f18;stroke:rgba(244,241,232,.3)}
.mm-bornes circle:first-child{stroke:var(--cuivre)}
.mm-cordon{fill:none;stroke-width:5;stroke-linecap:round}
.mm-rouge{stroke:var(--cuivre)}
.mm-noir{stroke:var(--encre)}
.mm-pointe rect{fill:var(--papier);stroke:var(--encre);stroke-width:1.3}
.mm-pointe path{stroke:var(--encre);stroke-width:2.2;stroke-linecap:round}
.mm-ecran{animation:mm-allume 1.2s steps(1) .2s both}
@keyframes mm-allume{0%{fill:#9fb39a}30%{fill:#cfe3c9}45%{fill:#9fb39a}60%{fill:#cfe3c9}}
@media(prefers-reduced-motion:reduce){
  .ch-cable,.ch-res text,.mm-index,.mm-ecran{animation:none;stroke-dashoffset:0;opacity:1}
  .ch-pv rect{opacity:1;transform:none;transition:none}
}

/* ══ CONTACT : le formulaire dans le premier écran ═════════════════
   Il était en bas de page, sous les coordonnées : on arrivait sur une
   page de contact sans voir par où écrire. Il prend la colonne de
   droite du hero, le dessin passe sous les boutons. */
.hp-in:has(.hp-form){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:start;gap:clamp(36px,4.4vw,80px)}
.hp-in:has(.hp-form) .hp-texte h1{max-width:15ch}
.hp-form{background:var(--papier);border:1px solid var(--trait);border-radius:20px;
  padding:clamp(22px,2.2vw,32px);box-shadow:0 18px 48px -34px rgba(15,42,33,.4);
  position:relative}
.hp-form::before{content:'';position:absolute;left:clamp(22px,2.2vw,32px);right:clamp(22px,2.2vw,32px);
  top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cuivre),var(--pousse) 60%,transparent)}
.hf-tete{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--trait)}
.hf-tete h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.15;color:var(--encre)}
.hf-tete span{display:block;margin-top:7px;font-size:13.5px;color:var(--encre-doux)}
.hp-form .form{grid-template-columns:1fr 1fr}

@media(max-width:1100px){
  .hp-in:has(.hp-form){grid-template-columns:1fr}
}
@media(max-width:620px){
  .hp-form{padding:20px 16px;border-radius:16px}
  .hp-form .form{grid-template-columns:1fr}
}

/* Contact : la page n'a plus de dessin a gauche, et le formulaire donne
   sa hauteur au premier ecran. Sans ce rapprochement, la colonne de
   gauche se termine sur un grand vide avant la section suivante. */
.hero-page:has(.hp-form){padding-bottom:clamp(24px,2.6vw,38px)}
.hero-page:has(.hp-form) + .pg-sec{padding-top:clamp(30px,3.4vw,52px)}