/* ═══════════════════════════════════════════════════════════════════════
   kamagate-sommaire — feuille unique.
   ARCHITECTURE : un DOCUMENT chapitré. Couverture pleine hauteur, puis
   sept chapitres numérotés avec un sommaire qui suit la lecture à droite.
   Dispositif signature : « LA COTE » — le numéro de chapitre entre en
   glissant depuis la marge et le filet kaki se tire sous le titre.
   ═════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--lecture);font-size:var(--t-base);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto est obligatoire dès qu'on fixe la largeur en CSS sur une image
   qui porte un attribut height : sans lui l'attribut l'emporte et
   `aspect-ratio` est ignoré (mesuré sur la version précédente : une image
   trois fois trop haute, seule devant du vide). */
img{max-width:100%;display:block;height:auto}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--kaki);outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--kaki);color:var(--creme-haut);
  padding:.8rem 1.2rem;z-index:99;text-decoration:none}
.saut:focus{left:.6rem;top:.6rem}
.has-js [data-reveal]{opacity:0;transform:translateY(22px)}

/* ── LA COUVERTURE ──────────────────────────────────────────────────── */
.couv{min-height:100svh;display:grid;align-items:center;gap:clamp(1.6rem,4vw,3.4rem);
  padding:calc(var(--bande) * .8) var(--marge);background:var(--creme-haut)}
@media (min-width:900px){.couv{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}}
.couv__photo{margin:0}
.couv__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--filet)}
.couv__lieu{font-size:var(--t-mini);letter-spacing:.22em;text-transform:uppercase;
  color:var(--kaki);font-weight:700;margin:0 0 1rem}
.couv__nom{font-size:var(--t-geant);line-height:.94}
.couv__role{font-size:var(--t-petit);color:var(--encre-doux);margin:.8rem 0 1.6rem}
.couv__dire{font-size:var(--t-chapo);max-width:36ch;margin-bottom:1.8rem}
.couv__dire b{font-weight:800}

/* ── LE BOUTON ──────────────────────────────────────────────────────── */
.bouton{display:inline-flex;flex-direction:column;gap:.15rem;align-self:start;
  background:var(--kaki);color:var(--creme-haut);text-decoration:none;
  padding:.95rem 1.7rem;font-weight:700}
.bouton span{font-size:var(--t-mini);font-weight:400;letter-spacing:.12em;opacity:.9}
.bouton--grand{margin-top:1.6rem;font-size:1.06rem;padding:1.1rem 2rem}

/* ── LE CORPS : lecture + sommaire ──────────────────────────────────── */
.corps{display:block}
@media (min-width:1100px){
  .corps{display:grid;grid-template-columns:1fr clamp(210px,17vw,260px);
    align-items:start;gap:clamp(1.6rem,3vw,3rem);padding-right:var(--marge)}
  .sommaire{position:sticky;top:0;padding-block:calc(var(--bande) * .9);order:2}
  .lecture{order:1;min-width:0}
}
.sommaire{display:none}
@media (min-width:1100px){.sommaire{display:block}}
.sommaire__titre{font-size:var(--t-mini);letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-doux);margin:0 0 1rem;font-weight:700}
.sommaire ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sommaire a{display:flex;gap:.6rem;text-decoration:none;font-size:var(--t-petit);
  color:var(--encre-doux);line-height:1.3;padding-block:.4rem}
.sommaire a i{font-style:normal;color:var(--kaki);font-weight:700;font-size:var(--t-mini)}
.sommaire li.ici a{color:var(--encre);font-weight:700}
.sommaire__jauge{display:block;height:2px;background:var(--filet);margin-top:1.4rem}
.sommaire__jauge i{display:block;height:100%;width:0;background:var(--kaki);
  transition:width .14s linear}

/* ── LES CHAPITRES ──────────────────────────────────────────────────── */
.chap{padding:var(--bande) var(--marge)}
.chap + .chap{border-top:1px solid var(--filet)}
.chap__titre{font-size:var(--t-xxl);max-width:24ch;position:relative;padding-bottom:.7rem;
  display:flex;gap:.7rem;align-items:baseline}
.chap__titre i{font-style:normal;font-family:var(--lecture);font-size:var(--t-mini);
  font-weight:800;color:var(--kaki);letter-spacing:.12em;flex:none}
.chap__titre::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--kaki);transform:scaleX(var(--trait,1));transform-origin:left}
.has-js [data-titre]{--trait:0}
.chapo{font-size:var(--t-chapo);color:var(--encre-doux);max-width:56ch;margin-top:1.3rem}
.note{margin-top:1.9rem;max-width:62ch;color:var(--encre-doux);font-size:var(--t-petit)}

/* ── LES COMPTEURS ──────────────────────────────────────────────────── */
.compteurs{display:grid;gap:1px;margin:2.2rem 0 0;background:var(--filet)}
@media (min-width:620px){.compteurs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1500px){.compteurs{grid-template-columns:repeat(4,1fr)}}
.compteur{background:var(--creme-haut);padding:1.4rem 1.3rem 1.6rem}
.compteur dt{margin:0}
.compteur b{font-family:var(--display);font-size:clamp(2.6rem,4.6vw,3.8rem);line-height:.95;
  display:block;color:var(--kaki);font-variant-numeric:tabular-nums}
.compteur dd{margin:.5rem 0 0;font-size:var(--t-petit);line-height:1.5;
  color:var(--encre-doux);max-width:28ch}

/* ── LE PARCOURS ────────────────────────────────────────────────────── */
.etapes{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1px;background:var(--filet)}
@media (min-width:680px){.etapes{grid-template-columns:repeat(2,1fr)}}
.etape{background:var(--creme-haut);padding:1.5rem 1.4rem 1.7rem;position:relative;
  transition:background-color var(--dur-med) var(--ease-out)}
.etape:hover{background:var(--creme)}
.etape:active{background:var(--creme)}
.etape__num{position:absolute;top:1rem;right:1.1rem;font-size:var(--t-mini);
  font-weight:800;color:var(--kaki)}
.dessin{width:48px;height:48px;display:block;margin-bottom:1rem}
.dessin .tr{fill:none;stroke:var(--encre);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dessin .pl{fill:var(--kaki);stroke:none}
.dessin .pl2{fill:none;stroke:var(--kaki);stroke-width:2.4;stroke-linecap:round}
.etape h3{font-family:var(--lecture);font-weight:800;font-size:1.08rem;margin-bottom:.4rem}
.etape p{margin:0;color:var(--encre-doux);font-size:var(--t-petit);line-height:1.6}

/* ── LES PLANCHES ───────────────────────────────────────────────────── */
.planche{margin:0;position:relative;overflow:hidden}
.planche img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--filet)}
.planche--serree img{aspect-ratio:21/9}
.planche--basse{margin-top:clamp(1.4rem,3vw,2.4rem)}
.planche--basse img{aspect-ratio:2/1;object-position:center 45%}
.planche figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem var(--marge);
  background:linear-gradient(0deg,rgba(27,29,22,.8),transparent);
  color:var(--creme-haut);font-size:var(--t-petit)}

/* ── LES SIX MOTS ───────────────────────────────────────────────────── */
.mots{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--filet)}
.mots li{display:flex;align-items:baseline;gap:clamp(.9rem,3vw,2.2rem);
  padding:clamp(.6rem,1.4vw,.95rem) 0;border-bottom:1px solid var(--filet)}
.mots i{font-style:normal;font-size:var(--t-mini);font-weight:800;color:var(--kaki);min-width:2.2em}
.mots span{font-family:var(--display);font-size:var(--t-xxl);line-height:1.1;display:inline-block;
  transition:transform var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out)}
.has-js .mots li span{color:var(--filet)}
.has-js .mots li.vu span{color:var(--encre)}
.mots li:hover span{transform:translateX(14px);color:var(--kaki)}
.mots li:active span{transform:translateX(6px);color:var(--kaki)}

/* ── LE MÉTIER ──────────────────────────────────────────────────────── */
.dom{margin-top:clamp(1.8rem,3.4vw,2.8rem)}
.dom__nom{font-size:var(--t-xl);padding-bottom:.7rem;border-bottom:2px solid var(--encre)}
.crois{display:grid;gap:1px;margin:1px 0 0;background:var(--filet)}
@media (min-width:660px){.crois{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1500px){.crois{grid-template-columns:repeat(3,1fr)}}
.carte{background:var(--creme-haut);padding:1.1rem 1.2rem 1.25rem}
.carte dt{font-size:var(--t-mini);letter-spacing:.13em;text-transform:uppercase;
  color:var(--kaki);font-weight:800;margin-bottom:.45rem}
.carte__media{margin:0;color:var(--encre-doux);font-size:var(--t-petit);line-height:1.6}

/* ── LES LIMITES ────────────────────────────────────────────────────── */
.limites{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--filet)}
.limites li{padding:1.15rem 0;border-bottom:1px solid var(--filet);max-width:74ch;color:var(--encre-doux)}
.limites b{color:var(--encre);box-shadow:inset 0 -.4em 0 rgba(62,75,36,.16)}

/* ── DEUX COLONNES DANS UN CHAPITRE ─────────────────────────────────── */
.deux{display:grid;gap:clamp(1.6rem,3.4vw,2.8rem);margin-top:2.2rem}
@media (min-width:1000px){.deux{grid-template-columns:minmax(0,1.1fr) minmax(0,.75fr)}}
.deux__texte p{max-width:56ch;color:var(--encre-doux)}
.deux__image{margin:0;align-self:start}
.deux__image img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--filet)}
.deux__image--large{margin-top:2.2rem}
.deux__image--large img{aspect-ratio:2/1}
.deux__image figcaption{margin-top:.5rem;font-size:var(--t-mini);color:var(--encre-doux);max-width:44ch}

/* ── PIED ───────────────────────────────────────────────────────────── */
.pied{background:var(--encre);color:var(--creme-terne);padding:3rem var(--marge) 3.4rem;font-size:var(--t-petit)}
.pied p{max-width:78ch}
.pied strong{color:var(--creme-haut)}
.pied__ligne{margin-top:1.4rem;font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase}

/* ── Socle de micro-interactions + parité tactile ───────────────────── */
.lien-nav{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px}
.lien-nav:hover{background-size:100% 1px}
.lien-nav:active{background-size:100% 1px}
.lien-nav:focus-visible{outline:2px solid var(--kaki);outline-offset:3px}
.bouton:hover{transform:translateY(-2px)}
.bouton:active{transform:translateY(0)}
.carte:hover .carte__media{transform:translateY(-3px)}
.carte:active .carte__media{transform:translateY(-1px)}
.lien-nav,.bouton,.carte__media{transition:transform var(--dur-med) var(--ease-out),
  background-size var(--dur-med) var(--ease-out)}
@media (hover:none){
  .bouton:hover{transform:none}
  .carte:hover .carte__media{transform:none}
  .mots li:hover span{transform:none}
}