/* ═══════════════════════════════════════════════════════════════════════
   kamagate-clair — feuille unique.
   PARTI-PRIS : la sobriété. Une seule colonne de 62 rem, la même partout,
   beaucoup d'air, deux couleurs, un seul geste d'entrée. C'est la version
   la plus calme des six — et la lisibilité y est un argument, pas un style.
   Deux motifs étudiés sur 21st.dev et TRANSPOSÉS (leur code est React /
   Tailwind / shadcn, inutilisable ici) : le bloc de chiffres « texte à
   gauche, cartes bordées à droite », et l'en-tête minimal à lettres espacées.
   ═════════════════════════════════════════════════════════════════════ */
*,*::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(--blanc);color:var(--encre);
  font-family:var(--lecture);font-size:var(--t-base);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto obligatoire dès qu'on fixe la largeur en CSS sur une image qui
   porte un attribut height — sinon l'attribut l'emporte et aspect-ratio est
   ignoré (défaut mesuré sur la version précédente). */
img{max-width:100%;display:block;height:auto}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--bleu);color:var(--blanc-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(18px)}

.mesure{max-width:var(--mesure);margin:0 auto;padding-inline:var(--marge)}
.bloc{padding-block:var(--bande)}
.bloc + .bloc{border-top:1px solid var(--filet)}
.bloc--pale{background:var(--bleu-pale);border-top:1px solid var(--filet)}
.bloc--fin{padding-bottom:calc(var(--bande) * 1.3)}

/* ── LE TRAIT sous les titres — le seul ornement de la page ─────────── */
h2{font-size:var(--t-xxl);max-width:24ch;position:relative;padding-bottom:.55rem}
h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:2.6rem;
  background:var(--bleu);transform:scaleX(var(--trait,1));transform-origin:left}
.has-js [data-titre]{--trait:0}
.chapo{font-size:var(--t-chapo);color:var(--gris);max-width:56ch;margin-top:1.2rem}
.note{margin-top:1.8rem;max-width:62ch;color:var(--gris);font-size:var(--t-petit)}

/* ── L'IDENTITÉ ─────────────────────────────────────────────────────── */
.tete{padding-block:calc(var(--bande) * 1.15) var(--bande);background:var(--blanc-haut);
  border-bottom:1px solid var(--filet)}
.tete__grille{display:grid;gap:clamp(1.4rem,3.4vw,2.6rem);align-items:center}
@media (min-width:720px){.tete__grille{grid-template-columns:auto minmax(0,1fr)}}
.tete__photo{margin:0}
.tete__photo img{width:clamp(120px,22vw,190px);aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;background:var(--filet)}
.lieu{font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bleu);font-weight:700;margin:0 0 .7rem}
.tete h1{font-size:var(--t-geant)}
.role{color:var(--gris);margin:.45rem 0 1.1rem}
.phrase{font-size:var(--t-chapo);max-width:46ch;margin-bottom:1.5rem}
.phrase b{font-weight:800}

/* ── LE BOUTON ──────────────────────────────────────────────────────── */
.bouton{display:inline-flex;flex-direction:column;gap:.15rem;text-decoration:none;
  background:var(--bleu);color:var(--blanc-haut);padding:.9rem 1.6rem;font-weight:700}
.bouton span{font-size:var(--t-mini);font-weight:400;letter-spacing:.1em;opacity:.9}
.bouton--grand{margin-top:1.6rem;padding:1.05rem 1.9rem;font-size:1.05rem}

/* ── LES CHIFFRES (motif transposé de 21st) ─────────────────────────── */
.chiffres__grille{display:grid;gap:clamp(1.6rem,3.4vw,2.8rem)}
@media (min-width:900px){.chiffres__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.cartes{display:grid;gap:.7rem;margin:0;grid-template-columns:repeat(2,1fr)}
.carte{border:1px solid var(--filet);background:var(--blanc-haut);padding:1.1rem 1.1rem 1.2rem;
  transition:border-color var(--dur-med) var(--ease-out)}
.carte:hover{border-color:var(--bleu)}
.carte:active{border-color:var(--bleu)}
.carte dt{margin:0}
.carte b{font-family:var(--display);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;
  display:block;color:var(--bleu);font-variant-numeric:tabular-nums}
.carte dd{margin:.4rem 0 0;font-size:var(--t-petit);color:var(--gris);line-height:1.45}

/* ── LES SIX MOTS ───────────────────────────────────────────────────── */
.mots{list-style:none;margin:1.9rem 0 0;padding:0;border-top:1px solid var(--filet)}
.mots li{display:flex;align-items:baseline;gap:1.2rem;padding:.75rem 0;
  border-bottom:1px solid var(--filet);font-family:var(--display);font-weight:700;
  font-size:var(--t-xl);transition:padding-left var(--dur-med) var(--ease-out),
  color var(--dur-med) var(--ease-out)}
.mots i{font-style:normal;font-family:var(--lecture);font-size:var(--t-mini);
  font-weight:700;color:var(--bleu);min-width:2.1em}
.mots li:hover{padding-left:.8rem;color:var(--bleu)}
.mots li:active{padding-left:.4rem;color:var(--bleu)}

/* ── LA PLANCHE ─────────────────────────────────────────────────────── */
.planche{margin:0;position:relative;overflow:hidden}
.planche img{width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--filet)}
.planche figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem var(--marge);
  background:linear-gradient(0deg,rgba(22,32,42,.78),transparent);
  color:var(--blanc-haut);font-size:var(--t-petit)}

/* ── LE MÉTIER — compact, deux colonnes de lignes ───────────────────── */
.dom{margin-top:clamp(1.7rem,3vw,2.4rem)}
.dom h3{font-size:var(--t-xl);padding-bottom:.5rem;border-bottom:2px solid var(--encre)}
.dom dl{display:grid;gap:0;margin:0}
@media (min-width:760px){.dom dl{grid-template-columns:1fr 1fr;column-gap:2rem}}
.dom dl > div{padding:.85rem 0;border-bottom:1px solid var(--filet)}
.dom dt{font-size:var(--t-mini);letter-spacing:.11em;text-transform:uppercase;
  color:var(--bleu);font-weight:700;margin-bottom:.3rem}
.dom dd{margin:0;color:var(--gris);font-size:var(--t-petit);line-height:1.6}

/* ── LE PARCOURS ────────────────────────────────────────────────────── */
.etapes{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem}
@media (min-width:760px){.etapes{grid-template-columns:repeat(2,1fr);gap:1.8rem 2.4rem}}
.etapes li{position:relative;padding-left:3rem}
.etapes span{position:absolute;left:0;top:0;width:2rem;height:2rem;display:grid;
  place-items:center;border-radius:50%;background:var(--bleu);color:var(--blanc-haut);
  font-weight:700;font-size:var(--t-petit)}
.etapes h3{font-family:var(--lecture);font-weight:800;font-size:1.06rem;margin-bottom:.3rem}
.etapes p{margin:0;color:var(--gris);font-size:var(--t-petit);line-height:1.6}

/* ── LES LIMITES ────────────────────────────────────────────────────── */
.limites{list-style:none;margin:1.9rem 0 0;padding:0;border-top:1px solid var(--filet)}
.limites li{padding:1.05rem 0;border-bottom:1px solid var(--filet);max-width:74ch;color:var(--gris)}
.limites b{color:var(--encre)}

/* ── DEUX COLONNES ──────────────────────────────────────────────────── */
.deux{display:grid;gap:clamp(1.6rem,3.4vw,2.8rem)}
@media (min-width:900px){.deux{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);align-items:start}}
.deux p{max-width:56ch;color:var(--gris)}
.deux__image{margin:0}
.deux__image img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--filet)}
.deux__image figcaption{margin-top:.5rem;font-size:var(--t-mini);color:var(--gris);max-width:42ch}

/* ── PIED ───────────────────────────────────────────────────────────── */
.pied{background:var(--encre);color:var(--blanc-terne);padding-block:2.8rem 3.2rem;font-size:var(--t-petit)}
.pied p{max-width:78ch}
.pied strong{color:var(--blanc-haut)}
.pied__ligne{margin-top:1.3rem;font-size:var(--t-mini);letter-spacing:.12em;text-transform:uppercase}

/* ── 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(--bleu-pale);outline-offset:3px}
.bouton:hover{transform:translateY(-2px)}
.bouton:active{transform:translateY(0)}
.lien-nav,.bouton,.mots li{transition:transform var(--dur-med) var(--ease-out),
  background-size var(--dur-med) var(--ease-out)}
@media (hover:none){
  .bouton:hover{transform:none}
  .mots li:hover{padding-left:0;color:inherit}
}