/* ═══════════════════════════════════════════════════════════════════════
   kamagate-portfolio — feuille unique.
   ARCHITECTURE : deux colonnes. La fiche (visage, nom, moyen de joindre)
   tient la gauche pendant toute la lecture ; le contenu défile à droite.
   Aucun des trois sites précédents n'a ce plan de page.
   Dispositif signature : « LE TRAIT » — chaque titre est souligné par un
   trait prune qui se tire de gauche à droite quand il entre ; chaque bloc
   monte d'un demi-pas derrière lui.
   ═════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);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, la hauteur de l'attribut l'emporte
   et `aspect-ratio` est ignoré. Mesuré ici : la trame sortait en 318 × 1200
   au lieu de 318 × 424, soit une image trois fois trop haute à côté d'un
   texte de 420 px — c'est ce qui laissait une image 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.06;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--prune);outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--prune);color:var(--creme);
  padding:.8rem 1.2rem;z-index:99;text-decoration:none}
.saut:focus{left:.6rem;top:.6rem}

/* ── LES DEUX COLONNES ──────────────────────────────────────────────── */
@media (min-width:1000px){
  body{display:grid;grid-template-columns:var(--fiche) 1fr;align-items:start}
  .fiche{position:sticky;top:0;height:100vh;overflow:auto}
  main{grid-column:2}
  .pied{grid-column:1 / -1}
}

/* ── LA FICHE ───────────────────────────────────────────────────────── */
.fiche{background:var(--papier-bas);border-right:1px solid var(--filet);
  padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.15rem}
.fiche__photo{margin:0 0 1.4rem}
.fiche__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--filet)}
@media (min-width:1000px){
  /* La fiche doit tenir ENTIÈREMENT dans 100 vh : sans ce plafond, la photo
     pousse le bouton d'appel sous la ligne de flottaison de sa propre colonne,
     et le seul moyen de joindre devient invisible. */
  .fiche__photo img{aspect-ratio:1/1;max-height:34vh}
  .fiche{padding-block:clamp(1.2rem,2.4vh,2rem)}
  .fiche__nom{font-size:clamp(2rem,2.9vw,3.1rem)}
  .fiche__dire{font-size:1.02rem;margin-bottom:1.2rem}
  .fiche__mention{margin-top:1rem;font-size:.76rem}
}
.fiche__lieu{font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase;
  color:var(--prune);margin:0 0 .6rem;font-weight:600}
.fiche__nom{font-size:var(--t-geant);line-height:.98}
.fiche__role{font-size:var(--t-petit);color:var(--encre-doux);margin:.5rem 0 1.4rem}
.fiche__dire{font-size:var(--t-chapo);line-height:1.5;margin:0 0 1.5rem;max-width:34ch}
.fiche__dire b{font-weight:700}
.fiche__mention{font-size:var(--t-mini);color:var(--encre-doux);line-height:1.5;
  margin:1.6rem 0 0;max-width:38ch}

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

/* ── LE TRAIT — dispositif signature ────────────────────────────────── */
.titre{font-size:var(--t-xxl);max-width:22ch;position:relative;padding-bottom:.6rem}
.titre::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--prune);transform:scaleX(var(--trait,1));transform-origin:left}
.has-js [data-titre]{--trait:0}
.surtitre{font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase;
  color:var(--prune);font-family:var(--lecture);font-weight:700;margin:0 0 2rem}
.chapo{font-size:var(--t-chapo);color:var(--encre-doux);max-width:54ch;margin-top:1.4rem}
.note{margin-top:2rem;max-width:60ch;color:var(--encre-doux);font-size:var(--t-petit)}
.has-js [data-reveal]{opacity:0;transform:translateY(22px)}

main > section{padding:var(--bande) var(--marge)}
main > section + section{border-top:1px solid var(--filet)}

/* ── LES CHIFFRES ───────────────────────────────────────────────────── */
.chiffres{background:var(--encre);color:var(--creme)}
.chiffres .surtitre{color:var(--prune-pale)}
.chiffres .note{color:var(--creme-terne)}
.compteurs{display:grid;gap:1px;margin:0;background:rgba(255,253,249,.2)}
@media (min-width:620px){.compteurs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1320px){.compteurs{grid-template-columns:repeat(4,1fr)}}
.compteur{background:var(--encre);padding:1.5rem 1.3rem 1.7rem}
.compteur dt{margin:0}
.compteur b{font-family:var(--display);font-size:clamp(2.8rem,5vw,4.2rem);line-height:.95;
  display:block;color:var(--creme);font-variant-numeric:tabular-nums}
.compteur dd{margin:.55rem 0 0;font-size:var(--t-petit);line-height:1.5;color:var(--creme-doux);max-width:26ch}

/* ── LE PARCOURS ────────────────────────────────────────────────────── */
.etapes{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1px;background:var(--filet)}
@media (min-width:700px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1400px){.etapes{grid-template-columns:repeat(4,1fr)}}
.etape{background:var(--papier);padding:1.6rem 1.4rem 1.8rem;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:700;color:var(--prune)}
.dessin{width:50px;height:50px;display:block;margin-bottom:1.1rem}
.dessin .tr{fill:none;stroke:var(--encre);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dessin .pl{fill:var(--prune);stroke:none}
.dessin .pl2{fill:none;stroke:var(--prune);stroke-width:2.4;stroke-linecap:round}
.etape h3{font-family:var(--lecture);font-weight:700;font-size:1.1rem;margin-bottom:.45rem}
.etape p{margin:0;color:var(--encre-doux);font-size:var(--t-petit);line-height:1.6}

/* ── L'IMAGE PLEINE MESURE ──────────────────────────────────────────── */
.pleine{margin:0;overflow:hidden;position:relative}
.pleine img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--filet)}
.pleine figcaption{position:absolute;left:0;bottom:0;right:0;padding:1.2rem var(--marge);
  background:linear-gradient(0deg,rgba(36,28,34,.82),transparent);
  color:var(--creme);font-size:var(--t-petit)}

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

/* ── LE MÉTIER ──────────────────────────────────────────────────────── */
.metier .chapo{margin-bottom:2.8rem}
.dom{margin-top:clamp(2rem,4vw,3rem)}
.dom__nom{font-size:var(--t-xl);display:flex;align-items:baseline;gap:.8rem;
  padding-bottom:.8rem;border-bottom:2px solid var(--encre)}
.dom__nom i{font-style:normal;font-family:var(--lecture);font-size:var(--t-mini);
  font-weight:700;color:var(--prune);letter-spacing:.14em}
.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:1360px){.crois{grid-template-columns:repeat(3,1fr)}}
.carte{background:var(--creme);padding:1.15rem 1.25rem 1.3rem}
.carte dt{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;
  color:var(--prune);font-weight:700;margin-bottom:.5rem}
.carte__media{margin:0;color:var(--encre-doux);font-size:var(--t-petit);line-height:1.62}

/* ── LA CITATION ────────────────────────────────────────────────────── */
.citation{background:var(--papier-bas)}
.phrase{font-size:var(--t-xxl);max-width:20ch;position:relative;padding-bottom:.6rem}
.phrase::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--prune);transform:scaleX(var(--trait,1));transform-origin:left}
.citation__image{margin:2.4rem 0 0;overflow:hidden}
.citation__image img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--filet)}

/* ── LES LIMITES ────────────────────────────────────────────────────── */
.limites__liste{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--filet)}
.limites__liste li{padding:1.2rem 0;border-bottom:1px solid var(--filet);
  max-width:72ch;color:var(--encre-doux)}
.limites__liste b{color:var(--encre);box-shadow:inset 0 -.4em 0 rgba(122,46,78,.16)}

/* ── POURQUOI ───────────────────────────────────────────────────────── */
.pourquoi__corps{display:grid;gap:clamp(1.8rem,4vw,3rem);margin-top:2.4rem}
@media (min-width:1200px){.pourquoi__corps{grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr)}}
.pourquoi__texte p{max-width:56ch;color:var(--encre-doux)}
/* Une image en regard du texte, à la hauteur du texte — et l'autre en bande
   pleine mesure sous les deux colonnes. Deux images empilées dans la colonne
   étroite laissaient la seconde seule devant une demi-page vide. */
.pourquoi__cote{margin:0;align-self:start}
.pourquoi__cote img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--filet)}
.pourquoi__cote figcaption,.pourquoi__bande figcaption{margin-top:.55rem;
  font-size:var(--t-mini);color:var(--encre-doux);max-width:46ch}
.pourquoi__bande{margin:clamp(1.6rem,3vw,2.6rem) 0 0}
.pourquoi__bande img{width:100%;aspect-ratio:2/1;object-fit:cover;
  object-position:center 42%;background:var(--filet)}
@media (min-width:900px){.pourquoi__bande img{aspect-ratio:21/9}}

/* ── ÉCRIRE ─────────────────────────────────────────────────────────── */
.ecrire__image{margin:2.6rem 0 0;overflow:hidden}
.ecrire__image img{width:100%;aspect-ratio:2/1;object-fit:cover;background:var(--filet)}

/* ── PIED ───────────────────────────────────────────────────────────── */
.pied{background:var(--encre);color:var(--creme-terne);padding:3rem var(--marge) 3.6rem;font-size:var(--t-petit)}
.pied p{max-width:78ch}
.pied strong{color:var(--creme)}
.pied__ligne{margin-top:1.5rem;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:focus-visible{outline:2px solid var(--prune-pale);outline-offset:3px}
.lien-nav:active{background-size:100% 1px}
.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}
  .mot:hover span{transform:none}
}