/* =========================================================
   HADRY CONSTRUCTION — socle.css
   Langage visuel : géométrie routière (arcs, raccordements
   progressifs, points kilométriques). Aucun angle droit,
   aucune trajectoire linéaire. image
   ========================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  /* Matières du Sahel */
  --nuit:        #1B1916;   /* banco cuit, presque noir chaud */
  --nuit-2:      #262320;
  --poussiere:   #D7CFC0;   /* poussière de chantier */
  --poussiere-2: #E6E0D4;
  --laterite:    #8E4B33;   /* latérite brûlée (routes du Niger) */
  --nappe:       #2F4A50;   /* eau de forage, ardoise humide */
  --laiton:      #A98B53;   /* théodolite, mire, laiton */

  --encre:       rgba(27,25,22,.74);
  --encre-faible:rgba(27,25,22,.46);
  --clair:       rgba(230,224,212,.76);
  --clair-faible:rgba(230,224,212,.44);

  /* Typographies */
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --texte:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --data:"Space Mono","Courier New",monospace;

  /* Échelle */
  --t-geant:clamp(3.2rem,11vw,10rem);
  --t-grand:clamp(2.2rem,6.2vw,5.2rem);
  --t-moyen:clamp(1.5rem,3vw,2.6rem);
  --t-corps:clamp(1rem,1.05vw,1.15rem);
  --t-petit:.8rem;

  /* Courbes de mouvement — aucune n'est linéaire */
  --e-sortie:cubic-bezier(.16,1,.3,1);
  --e-double:cubic-bezier(.76,0,.24,1);
  --e-rebond:cubic-bezier(.34,1.42,.5,1);
  --e-arc:cubic-bezier(.62,.02,.14,1);

  /* Rayons : tout est arc */
  --r-galet:7rem 2.2rem 7rem 2.2rem;
  --r-galet-i:2.2rem 7rem 2.2rem 7rem;
  --r-goutte:9rem 9rem 9rem 1.8rem;
  --r-pilule:999px;

  --marge:clamp(1.2rem,5vw,6rem);
}

/* ---------- 2. Réinitialisation ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{
  background:var(--poussiere);
  color:var(--nuit);
  font-family:var(--texte);
  font-size:var(--t-corps);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{border-radius:var(--r-galet)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;border:0;background:none}
ul{list-style:none}
::selection{background:var(--laterite);color:var(--poussiere-2)}

:focus-visible{
  outline:2px solid var(--laterite);
  outline-offset:4px;
  border-radius:var(--r-pilule);
}

/* Grain : la poussière du chantier, jamais un aplat mort */
body::after{
  content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Défilement piloté (jamais 1:1) ---------- */
#defilement{will-change:transform}
body.pilote #defilement{position:fixed;top:0;left:0;width:100%}
body:not(.pilote) #defilement{transform:none!important}

/* ---------- 4. Typographie ---------- */
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.035em;
  font-variation-settings:"wdth" 92;
}
.geant{font-size:var(--t-geant)}
.grand{font-size:var(--t-grand)}
.moyen{font-size:var(--t-moyen);line-height:1.06}
.pk{
  font-family:var(--data);
  font-size:var(--t-petit);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--laterite);
  display:inline-flex;align-items:center;gap:.7em;
}
.pk::before{
  content:"";width:2.2em;height:2.2em;border-radius:50%;
  border:1px solid currentColor;
  background:radial-gradient(circle at 50% 50%,currentColor 0 14%,transparent 15%);
}
.chapo{max-width:46ch;color:var(--encre);font-size:clamp(1.02rem,1.5vw,1.3rem)}
.sombre .chapo{color:var(--clair)}
.sombre{color:var(--poussiere-2)}
.sombre .pk{color:var(--laiton)}

/* ---------- 5. Trame ---------- */
.bloc{position:relative;padding:clamp(5rem,13vh,11rem) var(--marge)}
.bande-sombre{background:var(--nuit);color:var(--poussiere-2)}
.limite{max-width:1320px;margin-inline:auto}

/* Raccord courbe entre deux bandes : pas de bord droit */
.raccord{display:block;width:100%;height:clamp(60px,9vw,150px);position:relative;z-index:2}
.raccord path{fill:var(--nuit)}
.raccord--clair path{fill:var(--poussiere)}

/* ---------- 6. Navigation ---------- */
.barre{
  position:fixed;z-index:50;top:clamp(.7rem,2vh,1.6rem);left:50%;
  transform:translateX(-50%) translateY(0);
  display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem);
  padding:.5rem .6rem .5rem 1.4rem;
  border-radius:var(--r-pilule);
  background:rgba(215,207,192,.72);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 40px -22px rgba(27,25,22,.9);
  transition:transform .9s var(--e-sortie),background .6s var(--e-sortie);
  max-width:calc(100vw - 1.4rem);
}
.barre.repliee{transform:translateX(-50%) translateY(-160%)}
.barre__sceau{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.02rem;white-space:nowrap}
.barre__sceau span{color:var(--laterite)}
.barre__liens{display:flex;gap:.2rem}
.barre__liens a{
  position:relative;padding:.55rem .95rem;border-radius:var(--r-pilule);
  font-size:.9rem;transition:color .5s var(--e-sortie);
}
.barre__liens a::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-pilule);
  background:var(--nuit);transform:scale(.4);opacity:0;
  transition:transform .7s var(--e-rebond),opacity .5s var(--e-sortie);
}
.barre__liens a:hover,.barre__liens a[aria-current="page"]{color:var(--poussiere-2)}
.barre__liens a:hover::before,.barre__liens a[aria-current="page"]::before{transform:scale(1);opacity:1}
.barre__liens a span{position:relative}

/* ---------- 7. Boutons ---------- */
.bouton{
  --fond:var(--nuit);--texte-b:var(--poussiere-2);
  position:relative;display:inline-flex;align-items:center;gap:1rem;
  padding:1.05rem 1.5rem 1.05rem 1.9rem;border-radius:var(--r-pilule);
  color:var(--texte-b);font-weight:600;letter-spacing:-.01em;cursor:pointer;
  isolation:isolate;overflow:hidden;
  transition:color .55s var(--e-sortie);
}
.bouton::before{
  content:"";position:absolute;inset:0;z-index:-2;background:var(--fond);border-radius:inherit;
}
.bouton::after{
  content:"";position:absolute;z-index:-1;left:50%;bottom:-10%;
  width:130%;aspect-ratio:1;border-radius:50%;background:var(--laterite);
  transform:translate(-50%,100%) scale(.6);
  transition:transform .8s var(--e-arc);
}
.bouton:hover::after{transform:translate(-50%,18%) scale(1)}
.bouton--clair{--fond:var(--poussiere-2);--texte-b:var(--nuit)}
.bouton--clair:hover{color:var(--poussiere-2)}
.bouton__fleche{
  width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);transition:transform .8s var(--e-rebond);
}
.bouton:hover .bouton__fleche{transform:rotate(45deg)}

/* ---------- 8. Formes ---------- */
.galet{border-radius:var(--r-galet)}
.galet-i{border-radius:var(--r-galet-i)}
.disque{border-radius:50%;aspect-ratio:1}

/* ---------- 9. Révélations ---------- */
[data-reveler]{
  opacity:0;
  transform:translateY(2.6rem) rotate(var(--rot-depart,-1.6deg));
  transition:opacity 1s var(--e-sortie),transform 1.25s var(--e-sortie);
  transition-delay:calc(var(--i,0) * 105ms);
}
[data-reveler].est-visible{opacity:1;transform:none}
.lettre{display:inline-block;transform-origin:50% 130%}
[data-mots] .lettre{
  opacity:0;transform:translateY(.75em) rotate(9deg);
  transition:opacity .8s var(--e-sortie),transform 1.05s var(--e-rebond);
  transition-delay:calc(var(--l,0) * 26ms);
}
[data-mots].est-visible .lettre{opacity:1;transform:none}

/* ---------- 10. Curseur ---------- */
.curseur,.curseur-anneau{position:fixed;top:0;left:0;z-index:70;pointer-events:none;border-radius:50%}
.curseur{width:7px;height:7px;background:var(--laterite);margin:-3.5px 0 0 -3.5px}
.curseur-anneau{
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border:1px solid var(--encre-faible);
  transition:width .5s var(--e-sortie),height .5s var(--e-sortie),margin .5s var(--e-sortie),border-color .5s;
}
.curseur-anneau.actif{width:78px;height:78px;margin:-39px 0 0 -39px;border-color:var(--laterite)}
.sur-sombre .curseur-anneau{border-color:var(--clair-faible)}
@media (hover:none),(pointer:coarse){.curseur,.curseur-anneau{display:none}}

/* ---------- 11. Jauge d'avancement (arc) ---------- */
.jauge{position:fixed;right:clamp(.8rem,2vw,2rem);bottom:clamp(.8rem,2vw,2rem);z-index:50;width:64px;height:64px}
.jauge svg{transform:rotate(-118deg)}
.jauge__fond{fill:none;stroke:var(--encre-faible);stroke-width:1.5}
.jauge__trait{fill:none;stroke:var(--laterite);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.jauge__pk{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--data);font-size:.62rem;letter-spacing:.04em;color:var(--encre);
}

/* ---------- 12. Rideau de transition ---------- */
.rideau{position:fixed;inset:0;z-index:80;pointer-events:none}
.rideau svg{width:100%;height:100%}
.rideau path{fill:var(--nuit)}

/* ---------- 13. Héros ---------- */
.heros{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(7rem,16vh,12rem) var(--marge) clamp(2.5rem,7vh,5rem);
  overflow:hidden;
}
.heros__fond{position:absolute;inset:0;z-index:-1}
.heros__fond svg{width:100%;height:100%}
.heros__grille{
  position:relative;width:100%;max-width:1320px;margin-inline:auto;
  display:grid;gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:end;
}
.heros__titre{margin:1.6rem 0 0}
.heros__titre em{font-style:normal;color:var(--laterite)}
.heros__aparte{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
.heros__mire{
  position:absolute;right:calc(var(--marge) * -.2);top:14vh;width:min(40vw,420px);
  opacity:.9;pointer-events:none;
}
.defile{
  position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  display:grid;place-items:center;width:96px;height:96px;
  font-family:var(--data);font-size:.58rem;letter-spacing:.2em;color:var(--encre-faible);
}
.defile svg{position:absolute;inset:0;animation:tournoie 26s var(--e-double) infinite}
@keyframes tournoie{0%{transform:rotate(0)}50%{transform:rotate(190deg)}100%{transform:rotate(360deg)}}

/* ---------- 14. Manifeste + chiffres sur arc ---------- */
.manifeste{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.manifeste p + p{margin-top:1.1rem}
.arc-chiffres{position:relative;height:clamp(320px,42vw,460px);margin-top:clamp(2rem,6vw,5rem)}
.arc-chiffres__cercle{
  position:absolute;left:50%;bottom:calc(var(--h,0px) - var(--r,600px));
  width:calc(var(--r,600px) * 2);aspect-ratio:1;
  transform:translate(-50%,50%);border-radius:50%;
  border:1px dashed rgba(230,224,212,.14);pointer-events:none;
}
.chiffre{
  position:absolute;left:50%;bottom:calc(var(--h,0px) - var(--r,600px));width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r)));
}
.chiffre__bulle{
  position:absolute;left:50%;top:50%;width:clamp(120px,15vw,178px);
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  display:grid;place-items:center;gap:.35rem;text-align:center;
  aspect-ratio:1;border-radius:50%;
  background:rgba(38,35,32,.55);border:1px solid rgba(230,224,212,.16);
  backdrop-filter:blur(6px);
}
.chiffre__valeur{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.04em}
.chiffre__libelle{font-family:var(--data);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--clair-faible);max-width:11ch;line-height:1.35}

/* ---------- 15. Roue des métiers ---------- */
.piste{position:relative;background:var(--nuit);color:var(--poussiere-2)}
.piste__scene{position:absolute;top:0;left:0;width:100%;height:100svh;overflow:hidden}
.piste__entete{position:absolute;top:clamp(2rem,7vh,4.5rem);left:var(--marge);z-index:3;max-width:30ch}
.piste__jalons{
  position:absolute;left:50%;bottom:clamp(1.4rem,4vh,3rem);transform:translateX(-50%);
  display:flex;gap:.6rem;z-index:3;
}
.jalon{width:2.4rem;height:.28rem;border-radius:var(--r-pilule);background:rgba(230,224,212,.22);overflow:hidden}
.jalon i{display:block;height:100%;width:100%;background:var(--laiton);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-sortie)}
.jalon.est-actif i{transform:scaleX(1)}
.roue{position:absolute;left:50%;bottom:calc(-1 * var(--r) * .34);width:0;height:0}
.roue__cercle{
  position:absolute;left:50%;top:0;width:calc(var(--r) * 2);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px dashed rgba(230,224,212,.13);
}
.metier{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--r)))}
.metier__carte{
  position:absolute;left:0;top:0;width:var(--largeur,min(78vw,420px));
  transform:translate(-50%,-50%) rotate(var(--contre,0deg)) scale(var(--echelle,1));
  opacity:var(--presence,1);
  padding:clamp(1.6rem,3vw,2.6rem);
  border-radius:var(--r-goutte);
  background:linear-gradient(160deg,rgba(47,74,80,.9),rgba(27,25,22,.94));
  border:1px solid rgba(230,224,212,.12);
  box-shadow:0 40px 80px -50px #000;
  will-change:transform,opacity;
}
.metier__carte h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:600;letter-spacing:-.03em;margin:.8rem 0 .6rem}
.metier__carte p{color:var(--clair);font-size:.98rem}
.metier__liste{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.metier__liste li{
  font-family:var(--data);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.42rem .85rem;border-radius:var(--r-pilule);
  border:1px solid rgba(230,224,212,.18);color:var(--clair-faible);
}

/* ---------- 16. Orbite des chantiers ---------- */
.orbite{position:relative;height:clamp(480px,64vw,660px);overflow:hidden;cursor:grab;touch-action:pan-y}
.orbite.tire{cursor:grabbing}
.orbite__moyeu{position:absolute;left:50%;bottom:calc(-1 * var(--r) * .46);width:0;height:0}
.orbite__anneau{
  position:absolute;left:50%;top:0;width:calc(var(--r) * 2);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(27,25,22,.12);
}
.chantier-orbe{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--r)))}
.chantier-orbe__vignette{
  position:absolute;left:0;top:0;width:var(--largeur,min(62vw,270px));
  transform:translate(-50%,-50%) rotate(var(--contre,0deg)) scale(var(--echelle,1));
  opacity:var(--presence,1);text-align:center;will-change:transform,opacity;
}
.chantier-orbe__image{
  aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -40px rgba(27,25,22,.8);
}
.chantier-orbe__image span{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--data);font-size:.6rem;letter-spacing:.16em;color:var(--poussiere-2);
  background:linear-gradient(150deg,var(--nappe),var(--laterite));
}
.chantier-orbe__titre{margin-top:1rem;font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.chantier-orbe__lieu{font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-faible)}

/* ---------- 17. Le tracé (processus) ---------- */
.trace{position:relative;padding-block:clamp(4rem,10vh,8rem)}
.trace__ligne{position:absolute;inset:0;z-index:0;pointer-events:none}
.trace__ligne path{fill:none;stroke:var(--laterite);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.trace__etapes{position:relative;z-index:1;display:grid;gap:clamp(3rem,9vh,7rem)}
.etape{max-width:min(30rem,80vw)}
.etape:nth-child(odd){justify-self:start}
.etape:nth-child(even){justify-self:end;text-align:right}
.etape:nth-child(even) .pk{flex-direction:row-reverse}
.etape h3{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.03em;margin:.7rem 0 .5rem}
.etape p{color:var(--encre)}

/* ---------- 18. Bandeau courbe ---------- */
.bandeau{position:relative;overflow:hidden;padding-block:clamp(1rem,3vw,2rem)}
.bandeau svg{width:100%;height:auto;overflow:visible}
.bandeau text{font-family:var(--display);font-size:44px;font-weight:600;letter-spacing:-.02em;fill:var(--laterite)}

/* ---------- 19. Contact ---------- */
.devis{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.champ{position:relative;margin-bottom:1.1rem}
.champ input,.champ textarea,.champ select{
  width:100%;padding:1.45rem 1.6rem .75rem;border-radius:var(--r-pilule);
  background:rgba(230,224,212,.06);border:1px solid rgba(230,224,212,.18);
  transition:border-color .6s var(--e-sortie),background .6s var(--e-sortie);
}
.champ textarea{border-radius:2.6rem;min-height:9rem;resize:vertical}
.champ label{
  position:absolute;left:1.6rem;top:1.1rem;font-size:.95rem;color:var(--clair-faible);
  pointer-events:none;transform-origin:left top;
  transition:transform .6s var(--e-rebond),color .5s var(--e-sortie);
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--laiton);background:rgba(230,224,212,.1);
}
.champ input:focus + label,.champ textarea:focus + label,
.champ input:not(:placeholder-shown) + label,.champ textarea:not(:placeholder-shown) + label{
  transform:translateY(-.72rem) scale(.72);color:var(--laiton);
}
.champ select + label{transform:translateY(-.72rem) scale(.72);color:var(--laiton)}
.champ select{padding-top:1.55rem;-webkit-appearance:none;appearance:none}
.champ select option{background:var(--nuit)}
.reponse{
  margin-top:1rem;font-family:var(--data);font-size:.72rem;letter-spacing:.08em;
  color:var(--laiton);min-height:1.2em;
}
.coordonnees li{padding:1.1rem 0;border-bottom:1px solid rgba(230,224,212,.14)}
.coordonnees li:last-child{border-bottom:0}
.coordonnees strong{display:block;font-family:var(--data);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin-bottom:.3rem;font-weight:400}

/* ---------- 20. Pied de page ---------- */
.pied{position:relative;background:var(--nuit);color:var(--poussiere-2);padding:clamp(3rem,8vh,6rem) var(--marge) clamp(2rem,5vh,3rem);overflow:hidden}
.pied__sceau{font-family:var(--display);font-size:clamp(3rem,13vw,10rem);font-weight:700;letter-spacing:-.05em;line-height:.85;opacity:.14;white-space:nowrap}
.pied__bas{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;justify-content:space-between;align-items:center;margin-top:2.4rem;font-family:var(--data);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clair-faible)}

/* ---------- 21. Cadran des métiers (metiers.html) ---------- */
.cadran{position:relative;display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
.cadran__disque{position:relative;aspect-ratio:1;width:min(100%,540px);margin-inline:auto}
.cadran__rotor{position:absolute;inset:0;transition:transform 1.35s var(--e-rebond)}
.cadran__rotor svg{width:100%;height:100%}
.secteur{cursor:pointer;transition:opacity .6s var(--e-sortie)}
.secteur path{transition:fill .7s var(--e-sortie)}
.secteur:hover path{fill:rgba(142,75,51,.22)}
.secteur.est-actif path{fill:rgba(142,75,51,.34)}
.secteur text{font-family:var(--data);font-size:9px;letter-spacing:.18em;fill:var(--encre);text-transform:uppercase;transform-box:fill-box;transform-origin:center;transition:transform 1.35s var(--e-rebond)}
.cadran__aiguille{position:absolute;inset:0;pointer-events:none}
.cadran__centre{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--nuit);color:var(--poussiere-2);padding:1.4rem;
}
.cadran__centre b{font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.cadran__centre em{font-style:normal;font-family:var(--data);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--laiton);display:block;margin-top:.5rem}
.fiche{min-height:22rem}
.fiche__contenu{opacity:0;transform:translateY(1.6rem);transition:opacity .8s var(--e-sortie),transform 1s var(--e-sortie)}
.fiche__contenu.est-visible{opacity:1;transform:none}
.fiche__liste{margin-top:1.6rem;display:grid;gap:.7rem}
.fiche__liste li{display:flex;gap:.9rem;align-items:baseline}
.fiche__liste li::before{content:"";flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;border:1.5px solid var(--laterite)}

/* ---------- 22. Galerie chantiers (chantiers.html) ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filtre{
  padding:.6rem 1.2rem;border-radius:var(--r-pilule);cursor:pointer;
  border:1px solid rgba(27,25,22,.18);font-size:.88rem;
  transition:background .6s var(--e-sortie),color .6s var(--e-sortie),transform .7s var(--e-rebond);
}
.filtre:hover{transform:translateY(-3px) rotate(-1.2deg)}
.filtre.est-actif{background:var(--nuit);color:var(--poussiere-2);border-color:var(--nuit)}
.grille-chantiers{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  display:grid;gap:clamp(1.6rem,3.4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.fiche-chantier{
  position:relative;overflow:hidden;cursor:pointer;
  border-radius:var(--r-galet);background:var(--nuit-2);color:var(--poussiere-2);
  transition:transform 1s var(--e-sortie),border-radius 1s var(--e-sortie);
}
.fiche-chantier:nth-child(even){border-radius:var(--r-galet-i)}
.fiche-chantier:hover{transform:translateY(-8px) rotate(.8deg)}
.fiche-chantier__visuel{aspect-ratio:4/3.4;position:relative;overflow:hidden;border-radius:inherit}
.fiche-chantier__visuel i{
  position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-family:var(--data);font-size:.6rem;letter-spacing:.18em;color:rgba(230,224,212,.5);
  background:linear-gradient(150deg,var(--nappe),var(--laterite));
  transform:scale(1.06);transition:transform 1.4s var(--e-sortie);
}
.fiche-chantier:hover .fiche-chantier__visuel i{transform:scale(1)}
.fiche-chantier__corps{padding:1.5rem 1.8rem 2rem}
.fiche-chantier__corps h3{font-family:var(--display);font-size:1.32rem;font-weight:600;letter-spacing:-.025em;margin:.5rem 0 .4rem}
.fiche-chantier__corps p{color:var(--clair);font-size:.92rem}
.fiche-chantier[hidden]{display:none}

.hublot{
  position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:var(--marge);
  background:rgba(27,25,22,.62);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .7s var(--e-sortie);
}
.hublot.est-ouvert{opacity:1;pointer-events:auto}
.hublot__panneau{
  width:min(760px,100%);max-height:84svh;overflow:auto;padding:clamp(2rem,5vw,3.6rem);
  border-radius:var(--r-goutte);background:var(--poussiere-2);
  transform:scale(.82) rotate(-2deg);opacity:0;
  transition:transform 1.1s var(--e-rebond),opacity .7s var(--e-sortie);
}
.hublot.est-ouvert .hublot__panneau{transform:none;opacity:1}
.hublot__fermer{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:3.2rem;height:3.2rem;border-radius:50%;cursor:pointer;
  background:var(--poussiere-2);color:var(--nuit);display:grid;place-items:center;
  transition:transform .8s var(--e-rebond);
}
.hublot__fermer:hover{transform:rotate(135deg)}
.hublot__grille{display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:1.8rem}
.hublot__grille strong{display:block;font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laterite);font-weight:400;margin-bottom:.25rem}

/* ---------- 23. Adaptations ---------- */
@media (max-width:960px){
  .heros__grille,.manifeste,.devis,.cadran{grid-template-columns:1fr}
  .heros__mire{display:none}
  .etape:nth-child(even){justify-self:start;text-align:left}
  .etape:nth-child(even) .pk{flex-direction:row}
  .piste__entete{position:static;padding:clamp(3rem,9vh,5rem) var(--marge) 0}
  .barre__liens a{padding:.5rem .7rem;font-size:.82rem}
  .barre{padding-left:1rem;gap:.4rem}
  .barre__sceau{font-size:.9rem}
}
@media (max-width:520px){
  .barre__sceau span{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveler],[data-mots] .lettre{opacity:1;transform:none}
  .curseur,.curseur-anneau{display:none}
}
/* =========================================================
   INDEX — CORRECTIONS RESPONSIVE + IMAGES DE FOND
   ---------------------------------------------------------
   Ces règles sont volontairement limitées à <body class="page-index">
   pour ne pas modifier metiers.html ou chantiers.html.
   Remplace les deux URLs ci-dessous par tes images.
   ========================================================= */
body.page-index{
  --hero-image:url("im/A.jpg");
  --metiers-image:url("im/B.jpg");
  --display:"Times New Roman",Times,serif;
  --texte:"Times New Roman",Times,serif;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
body.page-index #defilement{width:100%;max-width:100vw;min-width:0}
body.page-index.pilote #defilement{width:100vw;max-width:100vw}

body.page-index .heros,
body.page-index .bloc,
body.page-index .piste,
body.page-index .bandeau,
body.page-index .orbite,
body.page-index .trace,
body.page-index .pied{min-width:0;max-width:100%}

/* Image de fond du hero : l'image est sous la forme organique SVG. */
body.page-index .heros{
  isolation:isolate;
  background-image:
    linear-gradient(rgba(215,207,192,.58),rgba(215,207,192,.58)),
    var(--hero-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
body.page-index .heros__fond{z-index:-1;background:transparent}
body.page-index .heros__fond svg{opacity:.30}
body.page-index .heros__fond path{fill:rgba(142,75,51,.16)}

/* Cartes métiers : image sous un voile transparent. */
body.page-index .metier__carte{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:rgba(27,25,22,.76);
}
body.page-index .metier__carte::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(27,25,22,.48),rgba(27,25,22,.68)),
    var(--carte-image,var(--metiers-image));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.72;
}
body.page-index .metier__carte > *{position:relative;z-index:1}

/* Navigation : centrage réel dans le viewport utile. */
body.page-index .barre{
  width:max-content;
  max-width:calc(100vw - 1rem);
}

@media (max-width:960px){
  body.page-index .heros__grille{gap:2.2rem}
  body.page-index .heros__titre{max-width:15ch}
  body.page-index .chapo{max-width:60ch}

  /* Sur tablette/téléphone, les chiffres quittent le grand arc hors écran
     et passent en grille pour éviter la compression. */
  body.page-index .arc-chiffres{
    height:auto;
    margin-top:2.5rem;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    align-items:stretch;
  }
  body.page-index .arc-chiffres__cercle{display:none}
  body.page-index .chiffre{
    position:relative;
    inset:auto;
    left:auto;
    bottom:auto;
    width:auto;
    height:auto;
    transform:none !important;
  }
  body.page-index .chiffre__bulle{
    position:relative;
    left:auto;
    top:auto;
    transform:none !important;
    width:min(100%,180px);
    min-width:0;
    margin-inline:auto;
    padding:1rem;
  }
  body.page-index .chiffre__valeur{font-size:clamp(1.7rem,7vw,2.5rem)}
  body.page-index .chiffre__libelle{font-size:.56rem;max-width:14ch}

  body.page-index .metier__carte{
    width:min(88vw,420px);
    padding:1.5rem;
  }
}

@media (max-width:600px){
  body.page-index{
    --marge:1rem;
    --t-geant:clamp(2.65rem,12.5vw,4.4rem);
    --t-grand:clamp(2rem,10vw,3.3rem);
    --t-moyen:clamp(1.35rem,6.5vw,2rem);
    --t-corps:1rem;
  }

  body.page-index .barre{
    left:50%;
    width:calc(100vw - 1rem);
    max-width:calc(100vw - 1rem);
    justify-content:center;
    gap:.15rem;
    padding:.35rem .35rem .35rem .65rem;
  }
  body.page-index .barre__sceau{font-size:.82rem;flex:0 0 auto}
  body.page-index .barre__liens{min-width:0;gap:0}
  body.page-index .barre__liens a{padding:.48rem .46rem;font-size:.72rem;white-space:nowrap}

  body.page-index .heros{
    min-height:100svh;
    padding:6.6rem var(--marge) 2.8rem;
    align-items:flex-end;
  }
  body.page-index .heros__grille{gap:1.6rem}
  body.page-index .heros__titre{margin-top:1rem;max-width:none}
  body.page-index .heros__aparte{gap:1.1rem}
  body.page-index .heros__fond svg{opacity:.24}

  body.page-index .arc-chiffres{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem;
    margin-top:1.8rem;
  }
  body.page-index .chiffre__bulle{
    width:100%;
    max-width:none;
    min-height:142px;
    padding:.75rem .45rem;
  }
  body.page-index .chiffre__libelle{max-width:13ch;letter-spacing:.08em}

  body.page-index .piste__scene{height:auto;min-height:100svh}
  body.page-index .piste__entete{padding:2.5rem var(--marge) 0}
  body.page-index .piste__entete .moyen{max-width:14ch}
  body.page-index .metier__carte{width:calc(100vw - 2rem);max-width:420px;padding:1.35rem}
  body.page-index .metier__carte h3{font-size:1.55rem}
  body.page-index .metier__carte p{font-size:.96rem}
  body.page-index .metier__liste{gap:.35rem}
  body.page-index .metier__liste li{font-size:.58rem;padding:.38rem .65rem}

  body.page-index .jauge{width:52px;height:52px;right:.55rem;bottom:.55rem}
  body.page-index .jauge__pk{font-size:.52rem}
  body.page-index.pilote #defilement{left:0;right:0}
}

@media (max-width:380px){
  body.page-index .barre__sceau{font-size:.76rem}
  body.page-index .barre__liens a{padding-inline:.34rem;font-size:.68rem}
  body.page-index .barre{padding-left:.45rem}
  body.page-index .arc-chiffres{gap:.55rem}
  body.page-index .chiffre__bulle{min-height:132px}
}

/* Le mouvement du texte circulaire reste lent. */
body.page-index .defile svg{animation-duration:60s}

/*
   NOTE SUR LA FORME DU HERO : data-masse est alimenté par moteur.js.
   Le fichier moteur.js n'a pas été fourni dans les pièces jointes, donc
   sa fréquence exacte ne peut pas être modifiée ici sans risquer de casser
   le moteur de défilement. Le voile SVG reste volontairement très discret.
*/