/* ═══════════════════════════════════════════════════════════════════════
   kamagate-conseil — feuille unique.
   Dispositif signature : « LA LEVÉE » — rien n'apparaît en fondu ; tout
   monte depuis sa propre ligne de base, sous un bord net, comme une plaque
   qu'on soulève. Le portrait, lui, n'ouvre pas le site : il arrive au
   milieu, après la méthode, et se dévoile au défilement.
   ═════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nuit);color:var(--texte);
  font-family:var(--lecture);font-size:var(--t-base);line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--lagune);outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--lagune);color:var(--nuit);
  padding:.8rem 1.2rem;z-index:99;text-decoration:none}
.saut:focus{left:.6rem;top:.6rem}

section{padding:var(--bande) var(--marge)}
/* Le rythme n'est pas uniforme : l'adresse et le visage prennent l'air, le
   métier est dense, le pied de raisonnement est serré (sonde compo-probe). */
.mots{padding-block:calc(var(--bande) * .72)}
.metier{padding-block:calc(var(--bande) * 1.25) var(--bande)}
.visage{padding-block:calc(var(--bande) * 1.5)}
.promets{padding-block:calc(var(--bande) * .8)}
.ecrire{padding-block:calc(var(--bande) * 1.35)}
.titre{font-size:var(--t-xxl);max-width:20ch}
.chapo{font-size:var(--t-chapo);color:var(--texte-doux);max-width:52ch;margin-top:1.2rem}
.note{margin-top:2.2rem;max-width:60ch;color:var(--texte-doux)}
.legende{font-size:var(--t-mini);color:var(--craie-doux);max-width:42ch;line-height:1.55}

/* ── LA LEVÉE — geste d'entrée, porté par l'élément qui porte l'attribut ─
   `.has-js` n'est posée qu'en dehors de ?audit et du mouvement réduit : hors
   de ces cas la page est complète, donc les preuves ne peuvent pas mentir. */
.has-js [data-reveal]{opacity:0;transform:translateY(26px)}
.has-js [data-mot]{opacity:0;transform:translateY(105%)}
/* Deux gestes portés par le CSS et basculés par une classe : la COULEUR qui se
   fixe et la DÉCOUPE qui s'ouvre. Ils vivent sous .has-js, donc absents de la
   passe ?audit — la capture montre l'état final, jamais un état de départ. */
.has-js .mot span{color:var(--lagune-fonce)}
.has-js .mot.vu span{color:var(--craie)}
.has-js .visage__cadre{clip-path:inset(13% 0 13% 0)}
.has-js .visage__cadre.vu{clip-path:inset(0 0 0 0)}
.visage__cadre{transition:clip-path 1.1s var(--ease-out)}

/* ═══ 01 · L'ADRESSE — ni bandeau, ni image : ce qu'elle a à dire ═════ */
.ouverture{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.6rem,4vh,3rem);
  background:radial-gradient(120% 80% at 12% 0%,var(--nuit-haut) 0%,var(--nuit) 62%)}
.lieu{font-family:var(--display);font-size:var(--t-mini);letter-spacing:.28em;
  text-transform:uppercase;color:var(--lagune);margin:0;
  display:flex;align-items:center;gap:1rem}
.lieu::after{content:"";height:1px;flex:1;max-width:14rem;background:var(--filet)}
.dire{font-size:var(--t-geant);max-width:19ch}
.dire__l{display:block;overflow:hidden}
.dire__l--accent{color:var(--lagune)}
.dire__suite{font-size:var(--t-chapo);color:var(--texte-doux);max-width:44ch;margin:0}
.dire__suite b{color:var(--craie);font-weight:600}
.cinq{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem clamp(1rem,3vw,2.6rem);border-top:1px solid var(--filet);padding-top:1.3rem}
.cinq li{font-family:var(--display);font-size:var(--t-petit);color:var(--craie-doux);
  display:flex;align-items:baseline;gap:.5rem}
.cinq i{font-style:normal;font-size:var(--t-mini);color:var(--lagune)}

/* ═══ 02 · LES SIX MOTS ══════════════════════════════════════════════ */
.mots{background:var(--nuit-haut)}
.mots__liste{list-style:none;margin:2.6rem 0 0;padding:0;border-top:1px solid var(--filet)}
.mot{border-bottom:1px solid var(--filet);padding:clamp(.7rem,1.8vw,1.1rem) 0}
.mot span{display:inline-block;font-family:var(--display);font-size:var(--t-xxl);
  line-height:1.05;color:var(--craie)}
/* 5ᵉ micro-interaction — celle de CETTE direction, pas du socle. */
.mot:hover span{color:var(--lagune);transform:translateX(14px)}
.mot:active span{color:var(--lagune);transform:translateX(6px)}
.mot span{transition:transform var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out)}

/* ═══ 03 · LE MÉTIER ═════════════════════════════════════════════════ */
.metier .chapo{margin-bottom:3.4rem}
.dom{margin-top:clamp(2.4rem,6vw,4rem)}
.dom__nom{font-size:var(--t-xl);display:flex;align-items:baseline;gap:.9rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--filet)}
.dom__nom i{font-style:normal;font-size:var(--t-mini);color:var(--lagune);letter-spacing:.18em}
.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:1080px){.crois{grid-template-columns:repeat(3,1fr)}}
.carte{background:var(--ardoise);padding:1.2rem 1.3rem 1.35rem}
.carte dt{font-family:var(--display);font-size:var(--t-mini);letter-spacing:.16em;
  text-transform:uppercase;color:var(--lagune);margin-bottom:.55rem}
.carte__media{margin:0;color:var(--texte-doux);font-size:var(--t-petit);line-height:1.62}

/* ═══ 04 · LE VISAGE ═════════════════════════════════════════════════ */
.visage{display:grid;gap:clamp(1.8rem,5vw,4rem);align-items:center;
  background:linear-gradient(180deg,var(--nuit) 0%,var(--lagune-fonce) 100%)}
@media (min-width:880px){.visage{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}}
.visage__cadre{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--ardoise)}
@media (min-width:880px){
  /* Le seul bloc qui sorte du conteneur : le visage déborde par la gauche,
     jusqu'au bord de l'écran. C'est lui l'événement de la page. */
  .visage__cadre{margin-left:calc(var(--marge) * -1);aspect-ratio:5/6}
}
.visage__cadre img{width:100%;height:100%;object-fit:cover}
.phrase{font-size:var(--t-xxl);max-width:17ch}
.visage__mot .legende{margin-top:2rem}

/* ═══ 05 · CE QUE JE NE PROMETS PAS ══════════════════════════════════ */
.promets__liste{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--filet)}
.promets__liste li{padding:1.3rem 0;border-bottom:1px solid var(--filet);
  max-width:74ch;color:var(--texte-doux)}
.promets__liste b{color:var(--craie);font-weight:600;
  box-shadow:inset 0 -.4em 0 rgba(78,158,133,.22)}

/* ═══ 06 · POURQUOI UNE PAGE ═════════════════════════════════════════ */
.page{background:var(--nuit-haut)}
.page__corps{display:grid;gap:clamp(2rem,5vw,3.6rem);margin-top:2.6rem}
@media (min-width:880px){.page__corps{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr)}}
.page__texte p{max-width:54ch;color:var(--texte-doux)}
.page__matieres{display:grid;gap:1.4rem}
@media (min-width:520px){.page__matieres{grid-template-columns:1fr 1fr;align-items:start}}
@media (min-width:880px){.page__matieres{grid-template-columns:1fr}
  .page__matieres figure:last-child{margin-left:clamp(1rem,4vw,3.4rem)}}
.page__matieres figure{margin:0}
.page__matieres img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ardoise)}
.page__matieres .legende{margin-top:.6rem}

/* ═══ 07 · ÉCRIRE ════════════════════════════════════════════════════ */
.ecrire{display:grid;gap:clamp(1.8rem,5vw,3.4rem);align-items:center}
@media (min-width:820px){.ecrire{grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr)}}
.ecrire__image{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--ardoise)}
.ecrire__image img{width:100%;height:100%;object-fit:cover}
.bouton{display:inline-flex;flex-direction:column;gap:.2rem;text-decoration:none;
  background:var(--lagune);color:var(--nuit);padding:1rem 1.8rem;margin-top:2rem;
  font-family:var(--display);font-weight:600}
.bouton span{font-size:var(--t-mini);letter-spacing:.14em;opacity:.85}
.bouton--grand{font-size:1.08rem}

/* ═══ LE BOUTON PERSISTANT — le seul chrome de la page ═══════════════ */
.appel{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:.7rem;text-decoration:none;
  background:var(--craie);color:var(--nuit);padding:.7rem 1.2rem;
  font-family:var(--display);font-weight:600;font-size:var(--t-petit);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.72);max-width:calc(100vw - 2rem)}
.appel__jauge{width:26px;height:2px;background:var(--lagune);flex:none;
  transform-origin:left;transform:scaleX(var(--part,0))}
.appel:hover{background:var(--lagune)}
.appel:active{background:var(--lagune)}

/* ═══ PIED ═══════════════════════════════════════════════════════════ */
.pied{padding:3.4rem var(--marge) 6.5rem;background:var(--nuit);
  border-top:1px solid var(--filet);color:var(--craie-doux);font-size:var(--t-petit)}
.pied p{max-width:76ch}
.pied strong{color:var(--craie)}
.pied__ligne{font-family:var(--display);font-size:var(--t-mini);letter-spacing:.14em;
  text-transform:uppercase;margin-top:1.6rem}
.pied__ligne a{display:inline-block;padding-block:.75rem}  /* 44 px au doigt */

/* ── Socle de micro-interactions (squelette) + 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(--lagune);outline-offset:3px}
.bouton:hover{transform:translateY(-2px)}
.bouton:active{transform:translateY(0)}
.carte:hover .carte__media{transform:translateY(-4px)}
.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),background-color var(--dur-med) var(--ease-out)}
@media (hover:none){
  .bouton:hover{transform:none}
  .carte:hover .carte__media{transform:none}
  .mot:hover span{transform:none}
}