/* AMCS Dakar — refonte de style, mode ATELIER.
   Dispositif signature : L'INCIDENCE — l'ombre portée dans chaque casier suit un angle
   d'incidence commun (--inc), piloté par la position du pointeur en X. Perpendiculaire à
   l'axe de lecture, donc visible ; jamais une progression de scroll (famille saturée). */

:root{
  /* Palette EXTRAITE des six photographies servies — voir charte.md */
  --poussiere:#E8DFCC;
  --ombre:#221A10;
  --laterite:#6F3323;
  --beton:#5A4526;
  --brume:#C6B692;

  --f-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --f-corps:"Public Sans", "Helvetica Neue", Arial, sans-serif;

  --inc:.5;                       /* angle d'incidence, 0 → 1 */
  --e1:.35rem; --e2:.7rem; --e3:1.15rem; --e4:1.9rem; --e5:3.1rem; --e6:5rem; --e7:8rem;
  --large:min(92rem, 100% - 2.4rem);
  --filet:1px solid color-mix(in oklab, var(--ombre) 22%, transparent);
  --pose:cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; background:var(--poussiere); color:var(--ombre);
  font-family:var(--f-corps); font-size:clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height:1.62; text-underline-offset:.22em;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:.98; margin:0}
p{margin:0 0 var(--e3)}
a{color:inherit}

.evitement{position:absolute; left:-999px}
.evitement:focus{left:var(--e3); top:var(--e3); z-index:9; background:var(--ombre);
  color:var(--poussiere); padding:var(--e2) var(--e3)}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.entete{
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5); align-items:baseline;
  justify-content:space-between;
  width:var(--large); margin:var(--e3) auto var(--e4);
}
.sigle{text-decoration:none; display:flex; align-items:baseline; gap:var(--e2); flex-wrap:wrap}
.sigle__lettres{font-family:var(--f-display); font-size:1.5rem; letter-spacing:.06em}
.sigle__glose{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--beton)}
.nav{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4); font-size:.86rem;
  letter-spacing:.04em}
.nav a{text-decoration:none; padding-bottom:.15em;
  border-bottom:1px solid transparent; transition:border-color .3s var(--pose), color .3s var(--pose)}
.nav a:hover,.nav a:active,.nav a:focus-visible{color:var(--laterite); border-bottom-color:var(--laterite)}

/* ── 1. LA FAÇADE ────────────────────────────────────────────────────────── */
.facade{position:relative; width:var(--large); margin:0 auto var(--e7);
  min-height:min(86vh, 48rem); display:grid; grid-template-rows:minmax(min(86vh,48rem),auto);
  /* grille INÉGALE : la parole tient 7 colonnes sur 12, la façade déborde à droite */
  grid-template-columns:repeat(12,1fr); align-items:end}
.facade__fond{grid-column:6 / -1; grid-row:1; position:relative; overflow:hidden;
  min-block-size:0; align-self:stretch;
  /* RUPTURE : l'image sort du conteneur par la droite */
  margin-inline-end:calc(-1 * var(--e5))}
.facade__fond img{width:100%; height:100%; object-fit:cover; object-position:38% 30%;
  filter:saturate(.86) contrast(1.06)}
.facade__fond::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--poussiere) 0%,
    color-mix(in oklab, var(--poussiere) 55%, transparent) 26%, transparent 62%)}
.facade__fond::after{content:""; position:absolute; inset:0;
  background:linear-gradient(calc(90deg + (var(--inc) - .5) * 46deg),
    color-mix(in oklab, var(--ombre) 74%, transparent) 0%,
    transparent calc(38% + var(--inc) * 26%),
    color-mix(in oklab, var(--ombre) 30%, transparent) 100%);
  transition:background .5s linear}

.grille{grid-column:6 / -1; grid-row:1; align-self:stretch; z-index:1; min-block-size:0;
  display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:1fr;
  margin-inline-end:calc(-1 * var(--e5));
  gap:clamp(3px,.5vw,7px); padding:clamp(3px,.5vw,7px);
  pointer-events:none}
.casier{position:relative; overflow:hidden}
.casier::before{content:""; position:absolute; inset:-30% -60%;
  background:linear-gradient(90deg, transparent 0%,
    color-mix(in oklab, var(--ombre) 46%, transparent) 34%,
    color-mix(in oklab, var(--ombre) 46%, transparent) 66%, transparent 100%);
  /* LE GESTE : l'ombre translate DANS le casier selon l'incidence — perpendiculaire au scroll */
  translate:calc((var(--inc) - .5) * 128%) 0;
  transition:translate .55s var(--pose)}

.facade__dire{grid-column:1 / 8; grid-row:1; align-self:center; z-index:2;
  padding:var(--e5) var(--e4) var(--e5) 0}
.sur-titre{font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--beton);
  margin-bottom:var(--e4)}
h1{font-size:clamp(2.9rem, 1.4rem + 6.4vw, 7.2rem); letter-spacing:-.018em}
h1 em{font-style:italic; color:var(--laterite)}
.chapo{margin-top:var(--e4); max-width:34rem; font-size:1.06em; color:var(--beton)}
.fiche{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:var(--e3); margin:var(--e5) 0 0; padding-top:var(--e3); border-top:var(--filet)}
.fiche dt{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--beton)}
.fiche dd{margin:.2em 0 0; font-family:var(--f-display); font-size:1.16rem}

/* ── 2. LE CHIFFRAGE ─────────────────────────────────────────────────────── */
.chiffrage{background:var(--ombre); color:var(--poussiere);
  padding:var(--e6) 0; margin-bottom:var(--e7); position:relative; overflow:hidden}
.chiffrage::before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px),
    color-mix(in oklab, var(--brume) 16%, transparent) calc(100% / 12 - 1px) calc(100% / 12));
  translate:calc((var(--inc) - .5) * 3%) 0; transition:translate .7s var(--pose)}
.etiquette{position:relative; width:var(--large); margin:0 auto var(--e3);
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brume)}
.nombre{position:relative; width:var(--large); margin:0 auto;
  font-size:clamp(2.4rem, .6rem + 7.6vw, 8.4rem); line-height:.94; letter-spacing:-.03em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .28em}
.nombre__tiret{color:var(--laterite); font-size:.6em}
.nombre__conteste{color:var(--laterite);
  text-decoration:underline; text-decoration-thickness:.045em;
  text-decoration-color:color-mix(in oklab, var(--laterite) 55%, transparent)}
.chiffrage__glose{position:relative; width:var(--large); margin:var(--e4) auto 0;
  max-width:44rem; color:var(--brume)}
.chiffrage__glose strong{color:var(--poussiere); font-weight:500}
.ventilation{position:relative; width:var(--large); margin:var(--e4) auto 0; padding:0;
  list-style:none; display:grid; gap:var(--e3);
  /* grille INÉGALE assumée : les deux montants tiennent moins de place que leur glose */
  grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.6fr)}
.ventilation li{border-top:1px solid color-mix(in oklab, var(--brume) 34%, transparent);
  padding-top:var(--e2)}
.ventilation b{display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:400}
.ventilation span{font-size:.86rem; color:var(--brume)}

/* ── 3. LES CASIERS ──────────────────────────────────────────────────────── */
.casiers{width:var(--large); margin:0 auto var(--e7)}
.casiers h2,.registre h2,.controles h2,.reserves h2,.signature h2{
  font-size:clamp(1.9rem, 1rem + 3.4vw, 4rem); letter-spacing:-.014em; margin-bottom:var(--e5)}
.casiers__liste{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.metier{background:var(--poussiere); padding:var(--e4);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ombre) 20%, transparent);
  transition:background .4s var(--pose), translate .4s var(--pose)}
.metier:hover,.metier:active{background:var(--brume); translate:0 -5px}
.metier__rang{font-family:var(--f-display); font-size:.9rem; color:var(--laterite);
  display:block; margin-bottom:var(--e3)}
.metier h3{font-size:1.5rem; margin-bottom:var(--e2)}
.metier p{font-size:.94rem; color:var(--beton); margin:0}

/* ── 4. LE REGISTRE ──────────────────────────────────────────────────────── */
.registre{width:var(--large); margin:0 auto var(--e7)}
.registre__tete{display:grid; gap:var(--e4);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end}
.registre__tete p{color:var(--beton); margin:0}
.lignes{list-style:none; margin:var(--e5) 0 0; padding:0}
.ligne{display:grid; gap:var(--e2) var(--e4); align-items:baseline;
  grid-template-columns:5.5rem minmax(0,1fr) 12rem 9rem;
  padding:var(--e3) var(--e2); border-top:var(--filet);
  transition:background .35s var(--pose), padding-inline-start .35s var(--pose)}
.ligne:last-child{border-bottom:var(--filet)}
.ligne:hover,.ligne:active{background:color-mix(in oklab, var(--brume) 52%, transparent);
  padding-inline-start:var(--e4)}
.ligne__an{font-family:var(--f-display); font-size:1.25rem}
.ligne__objet{font-size:.94rem}
.ligne__bailleur{font-size:.8rem; color:var(--beton); letter-spacing:.03em}
.ligne__etat{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--beton)}
.ligne--ouverte .ligne__etat{color:var(--laterite)}
.fuite{margin:var(--e6) 0 0; position:relative}
.fuite img{width:100%; aspect-ratio:16/7; object-fit:cover}
.fuite figcaption{font-size:.82rem; color:var(--beton); margin:var(--e2) 0 var(--e5);
  max-width:38rem}

/* ── 5. LES CONTRÔLES ────────────────────────────────────────────────────── */
.controles{width:var(--large); margin:0 auto var(--e7)}
.controles__chapo{max-width:40rem; color:var(--beton); margin-top:calc(-1 * var(--e3));
  margin-bottom:var(--e5)}
.controles__liste{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:color-mix(in oklab, var(--ombre) 18%, transparent)}
.controle{background:var(--poussiere); padding:var(--e4);
  display:grid; gap:var(--e2) var(--e4);
  grid-template-columns:3.2rem minmax(0,1.7fr) minmax(0,1fr);
  transition:background .4s var(--pose)}
.controle:hover,.controle:active{background:var(--brume)}
.controle__rang{font-family:var(--f-display); font-size:2rem; color:var(--laterite);
  grid-row:span 2; line-height:1}
.controle h3{font-size:1.18rem; font-family:var(--f-corps); font-weight:500; line-height:1.35}
.controle p{margin:0; font-size:.92rem; color:var(--beton)}
.controle__ou{grid-column:3; grid-row:1 / span 2; font-size:.8rem; align-self:center;
  border-left:var(--filet); padding-left:var(--e3)}

/* ── 6. LES RÉSERVES ─────────────────────────────────────────────────────── */
.reserves{position:relative; background:var(--ombre); color:var(--brume);
  padding:var(--e7) 0; margin-bottom:var(--e7); overflow:hidden}
.reserves__brume{position:absolute; inset:0}
.reserves__brume img{width:100%; height:100%; object-fit:cover; opacity:.3;
  filter:blur(calc(var(--inc) * 3px + 1px)) grayscale(.3);
  transition:filter .8s linear}
.reserves__dire{position:relative; width:var(--large); margin:0 auto}
.reserves h2{color:var(--poussiere)}
.reserve{border-top:1px solid color-mix(in oklab, var(--brume) 30%, transparent);
  padding-top:var(--e3); margin-bottom:var(--e4); max-width:46rem}
.reserve h3{font-family:var(--f-corps); font-weight:500; font-size:1.05rem;
  color:var(--poussiere); margin-bottom:var(--e2)}
.reserve p{margin:0; font-size:.94rem}
.question{max-width:46rem; margin-top:var(--e5); padding:var(--e4);
  border:1px solid color-mix(in oklab, var(--brume) 30%, transparent);
  font-family:var(--f-display); font-size:1.24rem; line-height:1.4; color:var(--poussiere)}

/* ── 7. LA SIGNATURE ─────────────────────────────────────────────────────── */
.signature{width:var(--large); margin:0 auto var(--e7)}
.signature__pour{font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--beton); margin-bottom:var(--e2)}
.signature__nom{font-family:var(--f-display); font-size:clamp(1.6rem, 1rem + 2vw, 2.6rem);
  margin-bottom:var(--e1)}
.signature__qualite{color:var(--beton); font-size:.92rem}
.joindre{list-style:none; margin:var(--e5) 0 0; padding:0; display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); border-top:var(--filet);
  padding-top:var(--e4)}
.joindre span{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--beton); margin-bottom:var(--e1)}
.joindre a{font-family:var(--f-display); font-size:1.14rem;
  text-decoration:underline; text-decoration-thickness:1px;
  transition:text-decoration-thickness .3s var(--pose), color .3s var(--pose)}
.joindre a:hover,.joindre a:active,.joindre a:focus-visible{
  text-decoration-thickness:3px; color:var(--laterite)}

/* ── Pied ────────────────────────────────────────────────────────────────── */
.pied{background:var(--ombre); color:var(--brume); padding-bottom:var(--e5)}
.pied__vue{width:100%; aspect-ratio:16/6; object-fit:cover; object-position:50% 62%;
  filter:saturate(.9)}
.pied__mention,.pied__raison{width:var(--large); margin:var(--e4) auto 0; font-size:.84rem;
  padding-inline-end:max(0px, calc(100% - 44rem))}
.pied__raison{color:color-mix(in oklab, var(--brume) 72%, transparent)}

/* ── Gestes : quatre familles qui CHANGENT, plus la découpe des titres ───── */
@keyframes leve      {from{translate:0 26px; opacity:0} to{translate:0 0; opacity:1}}
@keyframes decoupe   {from{clip-path:inset(0 0 102% 0)} to{clip-path:inset(0 0 -2% 0)}}
@keyframes dilate    {from{scale:.955} to{scale:1}}
@keyframes redresse  {from{rotate:-1.6deg} to{rotate:0deg}}
@keyframes eclaircit {from{filter:blur(9px) opacity(.2)} to{filter:blur(0) opacity(1)}}

[data-decoupe]{animation:decoupe .82s var(--pose) both}
.facade__dire{animation:leve .8s var(--pose) both}
.facade__fond{animation:dilate 1.1s var(--pose) both}
.fiche{animation:leve .9s .12s var(--pose) both}
.ventilation li{animation:leve .7s var(--pose) both}
.ventilation li:nth-child(2){animation-delay:.09s}
.ventilation li:nth-child(3){animation-delay:.18s}
.metier{animation:leve .7s var(--pose) both}
.metier:nth-child(2){animation-delay:.07s}
.metier:nth-child(3){animation-delay:.14s}
.metier:nth-child(4){animation-delay:.21s}
.fuite img{animation:eclaircit 1s var(--pose) both}
.question{animation:redresse .9s var(--pose) both}
.signature__nom{animation:dilate .8s var(--pose) both}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:64rem){
  /* Mesure du 2026-08-29 (cdp-mobile, 390 px) : 13 textes sous 12 px et 8 cibles
     tactiles a 25 px de haut. Aucune gate ne mesure la lisibilite — il faut la regler. */
  .sur-titre,.etiquette,.signature__pour{font-size:.82rem; letter-spacing:.16em}
  .fiche dt,.joindre span{font-size:.8rem; letter-spacing:.1em}
  .ligne__etat{font-size:.8rem}
  .sigle__glose{font-size:.8rem; letter-spacing:.1em}
  .ventilation span,.fuite figcaption,.pied__mention,.pied__raison{font-size:.92rem}
  .nav{gap:0 var(--e3)}
  .nav a{min-height:44px; display:flex; align-items:center; padding-inline:.15rem;
    font-size:.95rem}
  .joindre a,.controle__ou{font-size:1rem}
  /* Telephone et courriel restaient a 21 px de haut : ce sont les deux liens qu'on
     touche vraiment sur un telephone. */
  .joindre a{display:inline-flex; align-items:center; min-height:44px}
  .facade{min-height:0; grid-template-columns:1fr}
  .facade__fond,.grille{grid-column:1; grid-row:1; margin-inline-end:calc(-1 * var(--e3));
    aspect-ratio:4/5; max-height:none}
  .facade__dire{grid-column:1; grid-row:2; padding:var(--e4) 0 0; background:none}
  .ventilation,.registre__tete{grid-template-columns:1fr}
  .ligne{grid-template-columns:4.5rem 1fr}
  .ligne__bailleur,.ligne__etat{grid-column:2}
  .controle{grid-template-columns:2.6rem 1fr}
  .controle__ou{grid-column:2; grid-row:auto; border-left:0; padding-left:0;
    border-top:var(--filet); padding-top:var(--e2)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .casier::before{translate:0 0}
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — mêmes jetons, même dispositif, autres assemblages.
   Le motif directeur reste le CASIER : un contenu tenu dans une cellule, un
   filet qui sépare, une ombre qui suit l'incidence.
   ═════════════════════════════════════════════════════════════════════════ */

/* Fil d'Ariane */
.fil{width:var(--large); margin:0 auto var(--e4)}
.fil ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5em;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--beton)}
.fil li+li::before{content:"·"; margin-inline-end:.5em}
.fil a{text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .3s var(--pose), color .3s var(--pose)}
.fil a:hover,.fil a:active,.fil a:focus-visible{color:var(--laterite); border-bottom-color:var(--laterite)}
.fil [aria-current]{color:var(--ombre)}

/* Ouverture de page */
.entree{width:var(--large); margin:0 auto var(--e6)}
.entree__dire{display:grid; gap:var(--e4);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:end}
.entree h1{grid-column:1; font-size:clamp(2.2rem, 1.1rem + 4.2vw, 5rem); letter-spacing:-.016em}
.entree__chapo{grid-column:1; margin:0; font-size:1.08em; color:var(--beton); max-width:44rem}
.entree__note{grid-column:2; grid-row:1 / span 2; margin:0; align-self:center;
  border-left:var(--filet); padding-left:var(--e4); font-size:.9rem; color:var(--beton)}
.entree__vue{margin-top:var(--e5); position:relative; overflow:hidden;
  aspect-ratio:var(--ratio, 16/9);
  /* RUPTURE : le bandeau sort de la colonne des deux côtés */
  margin-inline:calc(-1 * var(--e4))}
.entree__vue img{width:100%; height:100%; object-fit:cover; filter:saturate(.88)}
.entree__voile{position:absolute; inset:0;
  background:linear-gradient(calc(90deg + (var(--inc) - .5) * 40deg),
    color-mix(in oklab, var(--ombre) 46%, transparent), transparent 58%);
  transition:background .5s linear}

/* Bloc courant */
.bloc{width:var(--large); margin:0 auto var(--e6)}
.bloc h2{font-size:clamp(1.7rem, 1rem + 2.6vw, 3.1rem); letter-spacing:-.012em;
  margin-bottom:var(--e4); max-width:24ch}
.bloc h3{font-family:var(--f-corps); font-weight:500; font-size:1.08rem;
  margin:var(--e4) 0 var(--e2)}
.bloc__corps>p,.bloc__corps>h3,.bloc__corps>ul:not([class]),.bloc__corps>ol:not([class]){
  max-width:62rem}
.bloc--prose .bloc__corps>p,.bloc--prose .bloc__corps>h3{max-width:46rem}
.bloc--prose{margin-bottom:var(--e5)}
.bloc--prose h2{font-size:clamp(1.35rem, 1rem + 1.2vw, 1.9rem); margin-bottom:var(--e3)}
.bloc--sombre{max-width:none; width:100%; background:var(--ombre); color:var(--brume);
  padding:var(--e6) 0}
.bloc--sombre>*{width:var(--large); margin-inline:auto}
.bloc--sombre h2{max-width:none; padding-inline-end:max(0px, calc(100% - 24ch))}
.bloc--sombre .bloc__corps>p{max-width:none; padding-inline-end:max(0px, calc(100% - 62rem))}
.bloc--sombre h2{color:var(--poussiere)}
.bloc--sombre strong{color:var(--poussiere); font-weight:500}
.grades{margin:0 0 var(--e3); padding-left:1.1em}
.grades li{margin-bottom:.3em}

/* Relevé d'identité — des casiers, pas un tableau */
.releve{display:grid; gap:1px; margin:var(--e5) 0 0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.releve__casier{background:var(--poussiere); padding:var(--e3) var(--e4) var(--e4);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ombre) 18%, transparent);
  transition:background .4s var(--pose)}
.releve__casier:hover,.releve__casier:active{background:var(--brume)}
.releve dt{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--beton)}
.releve dd{margin:.35em 0 0; font-family:var(--f-display); font-size:1.18rem; line-height:1.25}
.bloc--sombre .releve{background:color-mix(in oklab, var(--brume) 26%, transparent)}
.bloc--sombre .releve__casier{background:var(--ombre)}

/* Repères chiffrés */
.reperes{list-style:none; margin:var(--e5) 0 0; padding:0; display:grid; gap:var(--e4);
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.reperes li{border-top:1px solid color-mix(in oklab, var(--brume) 38%, transparent);
  padding-top:var(--e2)}
.reperes b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem, 1rem + 1.6vw, 2.3rem); line-height:1.1}
.reperes span{font-size:.82rem; letter-spacing:.04em}

/* Déroulé numéroté */
.temps{list-style:none; margin:var(--e5) 0 0; padding:0; display:grid; gap:1px;
  background:color-mix(in oklab, var(--ombre) 18%, transparent)}
.temps__etape{background:var(--poussiere); padding:var(--e4);
  display:grid; gap:var(--e2) var(--e4);
  grid-template-columns:3.4rem minmax(0,1fr) minmax(0,1.5fr); align-items:baseline;
  transition:background .4s var(--pose)}
.temps__etape:hover,.temps__etape:active{background:var(--brume)}
.temps__rang{font-family:var(--f-display); font-size:1.5rem; color:var(--laterite); line-height:1}
.temps__etape h3{margin:0; font-size:1.12rem}
.temps__etape p{margin:0; font-size:.92rem; color:var(--beton)}

/* Questions */
.questions{display:grid; gap:var(--e4); margin-top:var(--e5)}
.question__item{border-top:var(--filet); padding-top:var(--e3); max-width:52rem}
.question__item h3{margin:0 0 var(--e2); font-size:1.1rem; font-family:var(--f-display);
  font-weight:400}
.question__item p{margin:0; font-size:.94rem; color:var(--beton)}

/* Notes de marge */
.notes{display:grid; gap:var(--e3); margin:var(--e4) 0;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.note{border-left:var(--filet); padding-left:var(--e3)}
.note h3{margin:0 0 .3em; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--beton); font-family:var(--f-corps); font-weight:500}
.note p{margin:0; font-size:.88rem}
.bloc--sombre .note{border-left-color:color-mix(in oklab, var(--brume) 30%, transparent)}

/* Domaines (index Expertises) */
.domaines{width:var(--large); margin:0 auto var(--e6); list-style:none; padding:0;
  display:grid; gap:1px; background:color-mix(in oklab, var(--ombre) 18%, transparent)}
.domaine{background:var(--poussiere); padding:var(--e5) var(--e4);
  display:grid; gap:var(--e2) var(--e5);
  grid-template-columns:4rem minmax(0,1.4fr) minmax(0,1fr);
  transition:background .4s var(--pose), padding-inline-start .4s var(--pose)}
.domaine:hover,.domaine:active{background:var(--brume); padding-inline-start:var(--e5)}
.domaine__rang{font-family:var(--f-display); font-size:1.6rem; color:var(--laterite)}
.domaine h2{margin:0; font-size:clamp(1.4rem, 1rem + 1.4vw, 2.1rem)}
.domaine h2 a{text-decoration:none; border-bottom:1px solid color-mix(in oklab, var(--ombre) 30%, transparent);
  transition:border-color .3s var(--pose)}
.domaine h2 a:hover,.domaine h2 a:focus-visible{border-bottom-color:var(--laterite)}
.domaine p{margin:0; font-size:.94rem; color:var(--beton)}
.domaine__pourqui{grid-column:3; grid-row:2}
.domaine__pourqui span{display:block; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; margin-bottom:.25em}

/* Fiches publiques */
.fiches{list-style:none; margin:var(--e5) 0 0; padding:0; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.fiche__carte{box-shadow:0 0 0 1px color-mix(in oklab, var(--ombre) 18%, transparent)}
.fiche__carte a{background:var(--poussiere); display:flex; flex-direction:column; gap:.3em;
  padding:var(--e4); height:100%; text-decoration:none;
  transition:background .4s var(--pose), translate .4s var(--pose)}
.fiche__carte a:hover,.fiche__carte a:active,.fiche__carte a:focus-visible{
  background:var(--brume); translate:0 -4px}
.fiche__quoi{font-family:var(--f-display); font-size:1.2rem}
.fiche__ou{font-size:.8rem; color:var(--beton)}

/* Ligne de registre : nature de la mission en seconde ligne */
.ligne__nature{display:block; font-size:.8rem; color:var(--beton); margin-top:.25em}
.lignes--dossier .ligne{grid-template-columns:6rem minmax(0,1fr) 13rem 10rem}

/* Suite / appel */
.suite{width:var(--large); margin:0 auto var(--e7); border-top:var(--filet);
  padding-top:var(--e5)}
.suite h2{font-size:clamp(1.7rem, 1rem + 2.4vw, 2.9rem); margin-bottom:var(--e3)}
.suite p{max-width:44rem; color:var(--beton)}
.suite__lien{display:inline-flex; align-items:center; gap:.6em; min-height:44px;
  margin-top:var(--e2); font-family:var(--f-display); font-size:1.2rem;
  text-decoration:underline; text-decoration-thickness:1px;
  transition:text-decoration-thickness .3s var(--pose), color .3s var(--pose)}
.suite__lien::after{content:"→"; transition:translate .3s var(--pose)}
.suite__lien:hover,.suite__lien:active,.suite__lien:focus-visible{
  color:var(--laterite); text-decoration-thickness:3px}
.suite__lien:hover::after,.suite__lien:active::after{translate:.3em 0}
.controles .suite__lien{margin-top:var(--e4)}

/* Le ratio du bandeau photo est piloté par la page */
.fuite img{aspect-ratio:var(--ratio, 16/7)}

/* Gestes des pages intérieures — mêmes familles, appliquées aux blocs neufs */
.entree__dire{animation:leve .8s var(--pose) both}
.entree__vue{animation:dilate 1.1s var(--pose) both}
.releve__casier,.temps__etape,.domaine,.fiche__carte{animation:leve .7s var(--pose) both}
.releve__casier:nth-child(2),.temps__etape:nth-child(2),.domaine:nth-child(2),.fiche__carte:nth-child(2){animation-delay:.07s}
.releve__casier:nth-child(3),.temps__etape:nth-child(3),.domaine:nth-child(3),.fiche__carte:nth-child(3){animation-delay:.14s}
.releve__casier:nth-child(4),.temps__etape:nth-child(4),.domaine:nth-child(4),.fiche__carte:nth-child(4){animation-delay:.21s}
.question__item{animation:eclaircit .9s var(--pose) both}
.note{animation:redresse .8s var(--pose) both}

@media (max-width:64rem){
  .entree__dire{grid-template-columns:1fr}
  .entree h1,.entree__chapo{grid-column:1}
  .entree__note{grid-column:1; grid-row:auto; border-left:0; padding-left:0;
    border-top:var(--filet); padding-top:var(--e2); font-size:.95rem}
  .temps__etape{grid-template-columns:2.8rem 1fr}
  .temps__etape p{grid-column:2}
  .domaine{grid-template-columns:3rem 1fr}
  .domaine__pourqui{grid-column:2; grid-row:auto}
  .lignes--dossier .ligne{grid-template-columns:5rem 1fr}
  .lignes--dossier .ligne__bailleur,.lignes--dossier .ligne__etat{grid-column:2}
  .fil ol{font-size:.82rem}
  .note p,.question__item p{font-size:.95rem}
  .releve dt{font-size:.8rem}
}

/* Navigation de pied — présente dans le gabarit depuis la reprise des 13 pages. */
.pied__nav{width:var(--large); margin:var(--e4) auto 0; display:flex; flex-wrap:wrap;
  gap:var(--e2) var(--e4); font-size:.86rem}
.pied__nav a{text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
  padding-bottom:.15em; border-bottom:1px solid transparent;
  transition:border-color .3s var(--pose), color .3s var(--pose)}
.pied__nav a:hover,.pied__nav a:active,.pied__nav a:focus-visible{
  color:var(--poussiere); border-bottom-color:var(--brume)}

/* Cibles tactiles — mesuré à 390 px le 2026-08-29 : titres de casier à 31 px,
   renvois « Ouvrir le registre » à 17 px. Ce sont des cibles AUTONOMES, pas des
   liens au fil du texte : elles doivent tenir sous le pouce. */
@media (max-width:64rem){
  .metier h3 a,.domaine h2 a,.controle__ou a,.releve dd a,.note p a,.fil a{
    display:inline-flex; align-items:center; min-height:44px}
  .fil li{display:inline-flex; align-items:center}
  .note h3{font-size:.84rem; letter-spacing:.1em}
  .fiche__ou,.domaine__pourqui span{font-size:.82rem}
}