/* ═══════════════════════════════════════════════════════════════════════
   madama-kamagate — feuille unique
   Dispositif signature : « LE TAMPON ET LE REGISTRE ».
   Tout ce qui entre s'imprime (descente courte + relâchement d'échelle,
   comme un tampon encreur qu'on presse puis qu'on relève) ; les visuels
   s'ouvrent par un volet clip-path ; une colonne de registre tient la
   marge gauche et se remplit à mesure qu'on descend.
   ═════════════════════════════════════════════════════════════════════ */

*,*::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(--papier);
  color:var(--texte);
  font-family:var(--texte-fam);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.015em}
p{margin:0 0 1.05em}
a{color:inherit}

.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--texte-clair);
  padding:.8rem 1.2rem;z-index:99;text-decoration:none}
.saut:focus{left:.5rem;top:.5rem}

:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:var(--rayon)}

/* ── La mesure : une seule colonne de lecture, partout la même ──────── */
.mesure{max-width:74rem;margin:0 auto;padding-inline:var(--marge)}

/* ═══ LE REGISTRE — colonne de marge fixe ══════════════════════════════ */
.registre{display:none}
@media (min-width:1100px){
  .registre{
    display:flex;flex-direction:column;align-items:center;gap:1.4rem;
    position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:20;
    padding-block:8.5rem 3rem;pointer-events:none;
    mix-blend-mode:normal;
  }
  .registre__filet{position:relative;flex:1;width:1px;background:var(--filet)}
  .registre__filet i{position:absolute;inset:0 0 auto 0;display:block;height:0;
    background:var(--bronze);box-shadow:0 0 0 1px rgba(154,107,47,.22);
    transition:height .12s linear}
  .registre__mot{
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase;
    color:var(--texte-doux);white-space:nowrap;
    transition:color .4s var(--sortie),opacity .35s var(--sortie);
  }
  body{padding-left:var(--rail)}
}

/* Jauge de tête, seul repère de progression sous 1100 px */
.entete::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--avance,0%);
  background:var(--bronze);transition:width .12s linear;
}
@media (min-width:1100px){.entete::after{display:none}}

/* ═══ ENTÊTE ═══════════════════════════════════════════════════════════ */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem var(--marge);
  background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--sortie),border-color .45s var(--sortie),
             padding .45s var(--sortie),color .45s var(--sortie);
}
@media (min-width:1100px){.entete{padding-left:calc(var(--rail) + var(--marge))}}
.entete.est-pose{border-bottom-color:var(--filet);padding-block:.7rem}
.entete__nom{margin:0;font-family:var(--display);font-size:1.18rem;letter-spacing:.01em}
.entete__nav{display:flex;gap:clamp(.9rem,2.4vw,1.9rem);font-size:var(--t-petit)}
.entete__nav a{position:relative;text-decoration:none;padding-block:.2rem;color:var(--texte-doux)}
.entete__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--bronze);transition:right .42s var(--tampon)}
.entete__nav a:hover{color:var(--texte)}
.entete__nav a:hover::after{right:0}

/* ═══ LE TAMPON — geste d'entrée commun ═══════════════════════════════ */
.js [data-reveal]{
  opacity:0;transform:translateY(16px) scale(1.028);
  transition:opacity .62s var(--sortie),transform .78s var(--tampon);
}
.js [data-reveal].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ═══ PIÈCES VERSÉES AU DOSSIER — cadre + volet ═══════════════════════ */
.piece{margin:0}
.piece__cadre{
  position:relative;overflow:hidden;border-radius:var(--rayon);
  background:var(--craie);
  box-shadow:0 1px 0 rgba(26,22,17,.10), 0 22px 44px -30px rgba(26,22,17,.55);
  clip-path:inset(0 0 0 0);
}
/* Le volet est porté par l'élément QUI PORTE data-reveal, jamais par un
   enfant : sinon les instruments qui neutralisent les reveals (capture,
   juge) rouvrent le texte et laissent les visuels fermés — des cadres
   vides dans les preuves, alors que le site, lui, va bien. */
.js .piece[data-reveal]{clip-path:inset(0 0 100% 0)}
.js .piece[data-reveal].vu{clip-path:inset(0 0 0 0);
  transition:opacity .62s var(--sortie),transform .78s var(--tampon),
             clip-path 1.05s var(--tampon) .05s}
.piece__cadre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(26,22,17,.14);
  border-radius:inherit;
}
/* La dérive écrit un `transform` en ligne : le survol passe donc par
   `filter`, sinon le geste lié au scroll serait écrasé au premier hover. */
.piece__img{width:100%;height:100%;object-fit:cover;
  will-change:transform;transition:filter .7s var(--sortie)}
.piece__cadre:hover .piece__img{filter:saturate(1.14) brightness(1.05) contrast(1.03)}
.piece__legende{
  margin-top:.7rem;font-size:var(--t-mini);line-height:1.5;letter-spacing:.02em;
  color:var(--texte-doux);max-width:34ch;
}

/* ═══ 01 · OUVERTURE ══════════════════════════════════════════════════ */
.ouverture{
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(154,107,47,.13) 0%, transparent 55%),
    linear-gradient(180deg,var(--papier-haut) 0%,var(--papier) 100%);
  padding:calc(var(--bande) + 3.2rem) 0 var(--bande);
}
.ouverture__grille{
  max-width:74rem;margin:0 auto;padding-inline:var(--marge);
  display:grid;gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .ouverture__grille{
    grid-template-columns:minmax(0,1.28fr) minmax(0,.9fr);
    grid-template-areas:"titre piece" "adresse piece";
    align-items:end;gap:clamp(2rem,4vw,3.6rem);
  }
  .ouverture__titre{grid-area:titre;align-self:end}
  .piece--portrait{grid-area:piece}
  .ouverture__adresse{grid-area:adresse}
}

.surlignage{
  font-size:var(--t-mini);letter-spacing:.3em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:1.4rem;
  display:flex;align-items:center;gap:.85rem;
}
.surlignage::after{content:"";height:1px;flex:1;max-width:9rem;background:var(--filet)}

.nom{font-size:var(--t-geant);line-height:.86;letter-spacing:-.03em}
.nom__l{display:block}
.nom__l--decale{padding-left:.14em;font-style:italic;color:var(--bois)}

.fonction{
  margin:1.5rem 0 0;font-size:var(--t-chapo);color:var(--texte-doux);
  letter-spacing:.005em;
}

.ouverture__adresse{max-width:38ch}
.adresse__texte{font-size:var(--t-chapo);line-height:1.55}

.piece--portrait .piece__cadre{aspect-ratio:4/5}
@media (min-width:900px){.piece--portrait .piece__cadre{aspect-ratio:3/4}}

/* ═══ LE BOUTON ═══════════════════════════════════════════════════════ */
.bouton{
  position:relative;display:inline-flex;flex-direction:column;gap:.14rem;
  padding:1rem 1.7rem;text-decoration:none;overflow:hidden;
  border:1px solid var(--encre);border-radius:var(--rayon);
  color:var(--encre);isolation:isolate;
  transition:color .42s var(--sortie),transform .42s var(--tampon);
}
.bouton__fond{
  position:absolute;inset:0;z-index:-1;background:var(--encre);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--tampon);
}
.bouton__mot{font-size:1.02rem;font-weight:600;letter-spacing:.005em}
.bouton__num{font-size:var(--t-mini);letter-spacing:.16em;opacity:.72}
.bouton:hover{color:var(--papier-haut);transform:translateY(-2px)}
.bouton:hover .bouton__fond{transform:scaleY(1)}
.bouton--final{border-color:var(--bronze-clair);color:var(--texte-clair)}
.bouton--final .bouton__fond{background:var(--bronze-clair)}
.bouton--final:hover{color:var(--encre)}
.ouverture__adresse .bouton{margin-top:.5rem}

/* ═══ 02 · SIX MOTS ═══════════════════════════════════════════════════ */
.mots{padding:var(--bande) 0}
.titre-section{font-size:var(--t-xxl)}
.titre-section--clair{color:var(--texte-clair)}
.chapo{font-size:var(--t-chapo);color:var(--texte-doux);max-width:46ch;margin-top:1.3rem}
.chapo--clair{color:var(--texte-clair-doux)}

/* ── LE DÉFILÉ — bande pleine largeur, vitesse pilotée au scroll ────── */
.defile{
  margin:clamp(2.4rem,5vw,3.8rem) 0 clamp(2.2rem,4vw,3rem);
  overflow:hidden;display:flex;width:100%;
  border-block:1px solid var(--filet);
  padding-block:clamp(.7rem,1.6vw,1.1rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.defile__piste{
  display:flex;flex:none;align-items:center;gap:clamp(1.6rem,4vw,3.4rem);
  margin:0;padding:0 clamp(.8rem,2vw,1.7rem) 0 0;list-style:none;
  will-change:transform;
}
.defile__piste li{
  display:flex;align-items:baseline;gap:.7rem;white-space:nowrap;
  font-family:var(--display);font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:1.06;
  transition:color .45s var(--sortie),opacity .45s var(--sortie);
}
.defile__piste li:hover{color:var(--bronze)}
.defile__num{font-family:var(--texte-fam);font-size:var(--t-mini);
  letter-spacing:.2em;color:var(--bronze);transform:translateY(-.7em)}

.note{margin-top:0;max-width:58ch;color:var(--texte-doux);font-size:var(--t-base)}
.note--serree{margin-top:2rem}

/* ═══ 03 · LE MÉTIER — aplat encre ════════════════════════════════════ */
.metier{
  background:var(--encre);color:var(--texte-clair);
  padding:var(--bande) 0 calc(var(--bande) + 1rem);
}
.metier .chapo{margin-bottom:3rem}
.dossiers{margin-top:0;border-top:1px solid rgba(239,231,216,.18)}

.dossier{border-bottom:1px solid rgba(239,231,216,.18)}
.dossier__onglet{
  display:flex;align-items:center;gap:clamp(.9rem,3vw,2.2rem);
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;cursor:pointer;list-style:none;
  transition:padding-left .5s var(--tampon),color .4s var(--sortie);
}
.dossier__onglet::-webkit-details-marker{display:none}
.dossier__onglet:hover{padding-left:1rem;color:var(--bronze-clair)}
.dossier__num{font-size:var(--t-mini);letter-spacing:.2em;color:var(--bronze-clair);min-width:2.4em}
.dossier__nom{font-family:var(--display);font-size:var(--t-xl);line-height:1;flex:1}
.dossier__signe{position:relative;width:16px;height:16px;flex:none}
.dossier__signe::before,.dossier__signe::after{
  content:"";position:absolute;background:var(--bronze-clair);
  transition:transform .5s var(--tampon),opacity .4s var(--sortie);
}
.dossier__signe::before{inset:7px 0 auto 0;height:1.5px}
.dossier__signe::after{inset:0 7px auto 7px;width:1.5px;height:16px}
.dossier[open] .dossier__signe::after{transform:scaleY(0)}
.dossier[open] .dossier__signe::before{transform:rotate(180deg)}
.dossier[open] .dossier__nom{color:var(--bronze-clair)}

.dossier__corps{overflow:hidden;padding-bottom:1.6rem}
.js .dossier__corps{display:grid;grid-template-rows:1fr}

.croisements{
  display:grid;gap:1px;margin:0;
  grid-template-columns:1fr;
  background:rgba(239,231,216,.14);
  border:1px solid rgba(239,231,216,.14);border-radius:var(--rayon);
}
@media (min-width:700px){.croisements{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.croisements{grid-template-columns:repeat(3,1fr)}}
.crois{background:var(--encre);padding:1.15rem 1.25rem;
  transition:background-color .45s var(--sortie)}
.crois:hover{background:var(--bois)}
.crois dt{
  font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze-clair);margin-bottom:.5rem;
}
.crois dd{margin:0;font-size:.965rem;line-height:1.62;color:var(--texte-clair-doux)}

/* ═══ 04 · POURQUOI UNE PAGE ══════════════════════════════════════════ */
.page{padding:var(--bande) 0}
.page__grille{
  max-width:74rem;margin:0 auto;padding-inline:var(--marge);
  display:grid;gap:clamp(2.2rem,5vw,4rem);grid-template-columns:1fr;
}
@media (min-width:900px){
  .page__grille{grid-template-columns:minmax(0,1.06fr) minmax(0,.78fr);align-items:start}
}
.page__texte p{max-width:52ch;color:var(--texte-doux)}
.page__texte .titre-section{margin-bottom:1.8rem;
  font-size:clamp(2.2rem,4.1vw,3.5rem)}  /* colonne plus étroite : le titre s'y range en 2 lignes */
.signature{
  font-family:var(--display);font-style:italic;font-size:1.5rem;
  color:var(--texte);margin-top:2rem;
}
.page__pieces{display:grid;gap:clamp(1.2rem,3vw,2rem)}
@media (min-width:520px){.page__pieces{grid-template-columns:1fr 1fr;align-items:start}}
@media (min-width:900px){
  .page__pieces{grid-template-columns:1fr;padding-top:1.2rem}
  .piece--basse{margin-left:clamp(1.5rem,5vw,4.5rem)}
}
.piece--haute .piece__cadre{aspect-ratio:3/4}
.piece--basse .piece__cadre{aspect-ratio:4/3}

/* ═══ 05 · RESPIRATION — aplat forêt ══════════════════════════════════ */
.respiration{
  background:var(--foret);color:var(--texte-clair);
  padding:calc(var(--bande) + 1rem) 0;
  border-block:1px solid var(--filet-sombre);
}
.phrase{font-size:clamp(2.2rem,4.4vw,3.9rem);max-width:36ch}  /* la coupe voulue tient en 2 lignes */
.phrase__suite{
  margin-top:1.6rem;font-size:var(--t-chapo);color:var(--texte-clair-doux);
  max-width:44ch;
}

/* ═══ 06 · CE QUE JE NE PROMETS PAS ═══════════════════════════════════ */
.promets{padding:var(--bande) 0}
.promets__liste{list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid var(--filet)}
.promets__liste li{
  padding:1.35rem 0;border-bottom:1px solid var(--filet);
  max-width:72ch;color:var(--texte-doux);
  transition:padding-left .5s var(--tampon)}
.promets__liste li:hover{padding-left:.9rem}
.promets__liste b{color:var(--texte);font-weight:600;
  box-shadow:inset 0 -.42em 0 rgba(154,107,47,.16)}

/* ═══ 07 · CONTACT — aplat bois ═══════════════════════════════════════ */
.contact{background:var(--bois);color:var(--texte-clair);padding:var(--bande) 0}
.contact__grille{
  max-width:74rem;margin:0 auto;padding-inline:var(--marge);
  display:grid;gap:clamp(2rem,5vw,3.6rem);grid-template-columns:1fr;align-items:center;
}
@media (min-width:820px){
  .contact__grille{grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr)}
}
.contact .chapo{margin-bottom:2.2rem;max-width:42ch}
.piece--bureau .piece__cadre{aspect-ratio:3/4}

/* ═══ PIED ════════════════════════════════════════════════════════════ */
.pied{background:var(--encre);color:var(--texte-clair-doux);padding:3.6rem 0 4.4rem;
  border-top:1px solid rgba(239,231,216,.14)}
.pied__mention{font-size:var(--t-petit);line-height:1.66;max-width:74ch}
.pied__mention strong{color:var(--texte-clair)}
.pied__ligne{margin:1.8rem 0 0;font-size:var(--t-mini);letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-clair-doux)}
.pied__ligne a{text-decoration:none;border-bottom:1px solid transparent;
  transition:color .4s var(--sortie),border-color .4s var(--sortie)}
.pied__ligne a:hover{color:var(--bronze-clair);border-bottom-color:var(--bronze-clair)}

/* ── Sans JS : rien n'est caché ─────────────────────────────────────── */
.no-js [data-reveal]{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   MOMENTS FORTS (2026-08-17)
   Le motion tenait en micro-gestes dispersés : des reveals partout, aucun
   événement nulle part. Ces quatre-là sont des moments, pas des détails.
   ═════════════════════════════════════════════════════════════════════ */

/* ── 1 · LE RIDEAU ─────────────────────────────────────────────────── */
.rideau{
  position:fixed;inset:0;z-index:90;background:var(--encre);
  display:grid;place-items:center;will-change:transform;
}
.rideau__mot{
  font-family:var(--display);font-size:clamp(3.4rem,11vw,8rem);
  color:var(--craie);display:flex;letter-spacing:.01em;line-height:1;
}
.rideau__mot i{font-style:italic;color:var(--bronze-clair);margin-left:.04em}
.rideau__fil{
  position:absolute;left:50%;bottom:26%;width:min(48vw,440px);height:1px;
  background:var(--bronze);transform:translateX(-50%) scaleX(0);transform-origin:left;
}
html.rideau-actif,html.rideau-actif body{overflow:hidden}

/* ── 2 · LE MASQUE DE LIGNE — les titres montent depuis leur propre bas ── */
.ligne{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js .ligne__i[data-reveal]{
  display:block;opacity:1;transform:translateY(115%);
  transition:transform 1s var(--tampon);
}
.js .ligne__i[data-reveal].vu{transform:none}

/* ── 3 · LE HÉROS ÉPINGLÉ — la suite du site glisse par-dessus lui ──── */
@media (min-width:760px){
  .ouverture{padding-bottom:0;min-height:152svh}
  .ouverture__grille{
    position:sticky;top:0;min-height:100svh;align-content:center;
    padding-block:7.5rem 3.5rem;will-change:transform,opacity;
  }
}
.mots{
  position:relative;z-index:3;background:var(--papier);
  border-radius:clamp(16px,2.6vw,34px) clamp(16px,2.6vw,34px) 0 0;
  box-shadow:0 -34px 76px -36px rgba(26,22,17,.62);
  margin-top:-1.5svh;
}

/* ── 4 · LE GRAIN — la page a la matière d'un papier, pas d'un écran ── */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23b)'/></svg>");
}
@media (prefers-reduced-motion:reduce){.grain{display:none}}

/* ── 5 · LE BOUTON AIMANTÉ ─────────────────────────────────────────── */
.bouton{--mx:0px;--my:0px;overflow:visible;
  transform:translate3d(var(--mx),var(--my),0)}
.bouton__fond{border-radius:inherit}
.bouton:hover{transform:translate3d(var(--mx),calc(var(--my) - 3px),0)}
.bouton::after{
  content:"";position:absolute;inset:-40%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(154,107,47,.35),transparent 72%);
  opacity:0;transform:scale(.6);
  transition:opacity .5s var(--sortie),transform .6s var(--tampon);
}
.bouton:hover::after{opacity:1;transform:scale(1)}
.bouton--final::after{background:radial-gradient(closest-side,rgba(199,154,85,.42),transparent 72%)}

/* ── 6 · LE DÉFILÉ s'arrête net quand on le survole ─────────────────── */
.defile:hover .defile__piste{filter:contrast(1.05)}