/* =========================================================
   corentin-lambert.com
   DA "Le Témoin" : noir, blanc mat, cuivre structurel.
   Zéro dépendance. Tout est composé sur le GPU.
   ========================================================= */

:root{
  --black:#0A0A0A;
  --burnt:#1C1812;
  --white:#EFEFEF;
  --copper:#A0522D;
  --sand:#8A8A8A;

  --ease-in:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.65,0,.35,1);

  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1240px;

  --t-hero:clamp(3.05rem,14vw,9.5rem);
  --t-h2:clamp(2.1rem,7vw,5.2rem);
  --t-body:clamp(1rem,.95rem + .35vw,1.2rem);
  --t-punch:clamp(1.35rem,1.1rem + 1.1vw,2.1rem);
  --t-small:clamp(.72rem,.7rem + .12vw,.82rem);
}

*,*::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(--black);
  color:var(--white);
  font-family:Spectral,Georgia,serif;
  font-size:var(--t-body);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--copper);color:var(--white)}

/* width:100% est indispensable : sans lui, dans le hero qui est une colonne flex,
   margin-inline:auto empêche l'étirement et recentre le bloc sur la largeur de
   son texte au lieu de le caler à gauche. */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

h1,h2{
  font-family:Outfit,system-ui,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.92;
  margin:0;
  text-wrap:balance;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:Outfit,system-ui,sans-serif;
  font-weight:600;
  font-size:var(--t-small);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sand);
  margin:0 0 1.6rem;
}

/* ---------- INTRO : la lumière dans le noir ----------
   Un point de lumière cuivre naît, s'ouvre, révèle le visage,
   puis balaye vers la droite et l'emporte. */
.intro{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--black);
  transition:opacity .55s var(--ease-out);
}
.intro__reveal{
  position:absolute;inset:0;
  background:url(assets/portrait-cut2-1200.webp) 50% 44% / auto 76% no-repeat;
  filter:contrast(1.08);
  will-change:mask-image;
}
.intro__glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at var(--lx,50%) 44%,
    rgba(160,82,45,.34) 0%, rgba(160,82,45,.10) 26%, transparent 58%);
  opacity:var(--glow,0);
  mix-blend-mode:screen;
  will-change:opacity;
}
/* Le nom inscrit par la lumière pendant le balayage.
   Positionné en JS exactement sur le titre du hero, donc aucun saut
   au moment où l'intro se lève. */
.intro__name{
  position:absolute;margin:0;
  font-family:Outfit,system-ui,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.92;
  color:var(--white);
  clip-path:inset(0 100% 0 0);
  white-space:pre-wrap;
}
.intro--out{opacity:0}
.intro--done{display:none}

/* Le trait cuivre de l'ouverture devient la barre de progression. */
.progress--intro{animation:threadIn .55s var(--ease-in) forwards}
@keyframes threadIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:639px){
  .intro__reveal{background-size:auto 52%;background-position:50% 40%}
}

/* ---------- PROGRESSION ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:150;
  background:var(--copper);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ---------- REVEALS ---------- */
[data-reveal]{
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .75s var(--ease-in),transform .75s var(--ease-in);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}

.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform .9s var(--ease-in);
  transition-delay:var(--d,0ms);
}
[data-split].in .word>i{transform:none}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,14vh,9rem) 0 clamp(7rem,12vh,8rem);
  position:relative;
}
.hero__name{font-size:var(--t-hero);margin-bottom:clamp(1.6rem,4vh,3rem)}
/* Aucune contrainte de largeur : les trois lignes doivent tenir
   chacune sur une seule ligne dès qu'il y a la place.
   Quand elles doivent casser, elles cassent à parts égales. */
.hero__lines{max-width:none;text-wrap:balance}
.hero__line{
  position:relative;padding-left:1.9em;
  font-family:Outfit,system-ui,sans-serif;
  font-weight:200;font-size:clamp(1.05rem,.95rem + .7vw,1.6rem);
  line-height:1.45;margin:0 0 .28em;color:var(--white);
}
/* Un filet cuivre devant chaque ligne, pas une icône : c'est le même trait
   que les séparateurs de sections, donc ça appartient déjà à la page. */
.hero__line::before{
  content:"";position:absolute;left:0;top:.72em;
  width:1.1em;height:1px;background:var(--copper);
}
.hero__line:nth-child(1){--d:120ms}
.hero__line:nth-child(2){--d:220ms}
.hero__line:nth-child(3){--d:320ms}

.proof{
  position:absolute;left:0;right:0;bottom:clamp(3.2rem,9vh,5rem);
  --d:520ms;
}
.proof__list{
  list-style:none;margin:0;padding:0 var(--pad);
  max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:.6rem clamp(1.2rem,3.5vw,3.4rem);
  border-top:1px solid rgba(239,239,239,.14);
  padding-top:1.15rem;
}
.proof__list li{
  display:flex;align-items:baseline;gap:.42em;
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--t-small);letter-spacing:.02em;color:var(--sand);
  text-transform:uppercase;font-weight:500;
}
.proof__list b{
  font-weight:800;font-size:clamp(1rem,.9rem + .45vw,1.35rem);
  color:var(--white);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Icônes sur mesure : trait cuivre, même graisse que les filets de la page. */
.ico{
  width:1.15em;height:1.15em;flex:none;
  align-self:center;
  fill:none;stroke:var(--copper);
  stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;
  opacity:.9;
}
.ico__dot{fill:var(--copper);stroke:none}
.scrollcue{
  position:absolute;left:50%;bottom:1.1rem;width:1px;height:clamp(20px,4vh,34px);
  background:linear-gradient(var(--copper),transparent);
  transform:translateX(-50%);opacity:.85;
  animation:cue 2.4s var(--ease-out) infinite;
}
@keyframes cue{0%,100%{transform:translateX(-50%) scaleY(.35);opacity:.3}50%{transform:translateX(-50%) scaleY(1);opacity:.9}}

/* Mobile : on remonte le bloc et on range les preuves en deux colonnes. */
@media (max-width:639px){
  .hero{justify-content:flex-start;padding-top:clamp(4.5rem,16vh,8rem)}
  /* Une preuve par ligne : chacune tient sur une seule ligne, l'oeil descend. */
  .proof__list{display:grid;grid-template-columns:1fr;gap:.5rem}
  .proof__list li{white-space:nowrap}
}
/* ÉCRANS COURTS : téléphone en paysage, webview Facebook, petit portable.
   Le bandeau de preuve sort du positionnement absolu et repasse dans le flux :
   il ne peut alors plus recouvrir le texte du hero, quelle que soit la hauteur. */
@media (max-height:560px){
  .hero{
    min-height:0;
    justify-content:flex-start;
    padding:2.4rem 0 2.8rem;
  }
  .proof{position:static;margin-top:1.4rem}
  .proof__list{padding-top:1rem}
  .scrollcue{display:none}
}
/* Sur ces mêmes écrans, le nom ne doit pas manger toute la hauteur. */
@media (max-height:560px){
  :root{--t-hero:clamp(2.2rem,min(11vw,13vh),9.5rem)}
}

/* ---------- PRESENTATION ---------- */
.about{padding:clamp(5rem,14vh,11rem) 0 clamp(3rem,8vh,6rem)}
.about__grid{display:grid;gap:clamp(2.2rem,6vw,5rem);align-items:center}
.about__text p{max-width:62ch}
.about__punch{
  font-family:Outfit,system-ui,sans-serif;font-weight:800;
  font-size:var(--t-punch);line-height:1.2;letter-spacing:-.02em;
  margin-top:1.5em;
}
.lead-in{
  max-width:var(--maxw);margin:clamp(4rem,12vh,9rem) auto 0;
  padding-inline:var(--pad);
  font-family:Outfit,system-ui,sans-serif;font-weight:800;
  font-size:var(--t-punch);letter-spacing:-.02em;
}

/* Portrait : révélé par la lumière */
/* Pas de filter ici : il créerait un groupe d'isolation
   qui casserait le mix-blend-mode de l'image. */
.portrait{
  position:relative;margin:0;
  width:min(78vw,420px);justify-self:start;
}
/* La photo est DÉTOURÉE : fond réellement transparent.
   Donc aucun mode de fusion, aucun masque de rattrapage, et surtout
   plus aucun rectangle possible, quel que soit le noir de la page. */
.portrait img{
  width:100%;
  filter:contrast(1.06);
}
.portrait__light{
  position:absolute;inset:-12%;pointer-events:none;
  /* closest-side garantit que la lumière s'éteint AVANT les bords du cadre,
     sinon elle laisse une bande claire qui se lit comme un rectangle. */
  background:radial-gradient(circle closest-side at var(--mx,50%) var(--my,38%),
    rgba(239,239,239,.15) 0%,rgba(160,82,45,.09) 30%,transparent 78%);
  opacity:0;transition:opacity .7s var(--ease-in);
  mix-blend-mode:screen;
}
.portrait.in .portrait__light{opacity:1}

@media (min-width:860px){
  .about__grid{grid-template-columns:minmax(280px,38%) 1fr}
  .portrait{width:100%}
}

/* ---------- ACTIVITES ---------- */
.work{padding:clamp(2rem,6vh,4rem) 0 0}
.item{
  padding:clamp(3.4rem,9vh,7rem) 0;
  border-top:1px solid rgba(239,239,239,.11);
}
.item:first-child{border-top:0}
.item__grid{display:grid;gap:clamp(1.1rem,3vw,2.4rem)}
.item__num{
  font-family:Outfit,system-ui,sans-serif;font-weight:800;
  font-size:var(--t-small);letter-spacing:.2em;color:var(--copper);
  margin:0;
}
.item__head h2{font-size:var(--t-h2)}
.item__body{max-width:62ch}
.item__body p{margin-bottom:1.1em}
.item__punch{
  font-family:Outfit,system-ui,sans-serif;font-weight:800;
  font-size:var(--t-punch);line-height:1.22;letter-spacing:-.02em;
}
.book__sub{
  font-style:italic;color:var(--sand);
  font-size:clamp(1rem,.95rem + .3vw,1.18rem);
  max-width:46ch;
}
.book__cover{margin:0;width:min(58vw,240px)}
.book__cover img{
  box-shadow:0 24px 60px rgba(0,0,0,.75);
  border:1px solid rgba(239,239,239,.08);
}

@media (min-width:860px){
  .item__grid{
    grid-template-columns:5.5rem 1fr;
    grid-template-areas:"num head" ". body";
    column-gap:clamp(2rem,4vw,4rem);
  }
  .item__num{grid-area:num;padding-top:.7rem}
  .item__head{grid-area:head}
  .item__body{grid-area:body}
  .item--book .item__grid{
    grid-template-columns:5.5rem 1fr minmax(180px,240px);
    grid-template-areas:
      "num head head"
      ".   body cover"
      ".   cta  cover";
  }
  .item--book .item__cta{grid-area:cta;align-self:start}
  .book__cover{grid-area:cover;width:100%;align-self:start}
}

/* ---------- CTA ---------- */
.cta{
  display:inline-flex;align-items:center;gap:.7em;
  margin-top:1.9rem;
  font-family:Outfit,system-ui,sans-serif;font-weight:700;
  font-size:clamp(.9rem,.86rem + .2vw,1.02rem);
  letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;color:var(--white);
  padding-bottom:.5em;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.cta::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--copper);transform:scaleX(1);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.cta i{
  width:.62em;height:.62em;border-right:2px solid var(--copper);
  border-top:2px solid var(--copper);transform:rotate(45deg);
  transition:transform .45s var(--ease-in);
}
@media (hover:hover) and (pointer:fine){
  .cta:hover::after{animation:swipe .6s var(--ease-out)}
  .cta:hover i{transform:rotate(45deg) translate(3px,-3px)}
}
@keyframes swipe{0%{transform:scaleX(1);transform-origin:100% 50%}49%{transform:scaleX(0);transform-origin:100% 50%}51%{transform:scaleX(0);transform-origin:0 50%}100%{transform:scaleX(1);transform-origin:0 50%}}

/* ---------- PRESSE ---------- */
.press{padding:clamp(3.4rem,9vh,6rem) 0;border-top:1px solid rgba(239,239,239,.11)}
.press__list{list-style:none;margin:0;padding:0;max-width:760px}
.press__list li+li{border-top:1px solid rgba(239,239,239,.07)}
.press__list a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem;
  padding:.85rem 0;text-decoration:none;color:var(--sand);
  font-size:clamp(.85rem,.82rem + .15vw,.95rem);
  transition:color .35s var(--ease-in),padding-left .45s var(--ease-in);
}
.press__list b{
  font-family:Outfit,system-ui,sans-serif;font-weight:700;
  color:var(--white);letter-spacing:.01em;min-width:11ch;
}
@media (hover:hover) and (pointer:fine){
  .press__list a:hover{color:var(--white);padding-left:.6rem}
  .press__list a:hover b{color:var(--copper)}
}

/* ---------- RESEAUX ---------- */
.social{padding:clamp(3.4rem,9vh,6rem) 0;border-top:1px solid rgba(239,239,239,.11)}
.social__list{list-style:none;margin:0;padding:0}
.social__list li{border-top:1px solid rgba(239,239,239,.07)}
.social__list li:first-child{border-top:0}
.social__list a{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:clamp(1rem,2.4vh,1.5rem) 0;
  text-decoration:none;position:relative;
}
.social__list strong{
  font-family:Outfit,system-ui,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.5rem,1.1rem + 2.6vw,2.9rem);line-height:1;
  transition:color .4s var(--ease-in),transform .5s var(--ease-in);
}
.social__list em{
  font-style:normal;color:var(--sand);text-align:right;
  font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;
  font-family:Outfit,system-ui,sans-serif;
}
@media (hover:hover) and (pointer:fine){
  .social__list a:hover strong{color:var(--copper);transform:translateX(.5rem)}
}

/* ---------- CONTACT ---------- */
.contact{padding:clamp(4rem,11vh,8rem) 0;border-top:1px solid rgba(239,239,239,.11)}
.contact h2{font-size:var(--t-h2);margin-bottom:1rem}
.contact__intro{color:var(--sand);max-width:44ch;margin-bottom:clamp(2rem,5vh,3.4rem)}

.form{max-width:720px}
.form__row{display:grid;gap:0}
@media (min-width:640px){.form__row{grid-template-columns:1fr 1fr;gap:0 1.4rem}}

.field{position:relative;display:block;margin-bottom:1.5rem}
.field input,.field textarea,.field select{
  width:100%;background:transparent;color:var(--white);
  border:0;border-bottom:1px solid rgba(239,239,239,.22);
  padding:1.5rem 0 .55rem;font:inherit;font-size:1rem;
  border-radius:0;appearance:none;
  transition:border-color .4s var(--ease-in);
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.55}
.field select{cursor:pointer;color:var(--white)}
.field select option{background:var(--black);color:var(--white)}
.field>span{
  position:absolute;left:0;top:1.5rem;
  font-family:Outfit,system-ui,sans-serif;font-size:1rem;color:var(--sand);
  pointer-events:none;transform-origin:0 50%;
  transition:transform .4s var(--ease-in),color .4s var(--ease-in);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none}
/* Au focus, le filet cuivre se trace de gauche à droite sous le champ. */
.field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--copper);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-in);
}
.field:focus-within::after{transform:scaleX(1)}
.field input:focus~span,.field textarea:focus~span,
.field input:not(:placeholder-shown)~span,
.field textarea:not(:placeholder-shown)~span,
.field select:focus~span,.field select:valid~span{
  transform:translateY(-1.45rem) scale(.72);color:var(--copper);
}
/* Chevron porté par le champ lui-même, pour laisser ::after au filet cuivre. */
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A8A8A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .15rem center;
  background-size:.68rem auto;
  padding-right:1.6rem;
}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:#8c3a3a}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.submit{
  margin-top:.8rem;display:inline-flex;align-items:center;gap:.75em;
  background:transparent;border:1px solid var(--copper);color:var(--white);
  font-family:Outfit,system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;
  padding:1.05em 2.2em;cursor:pointer;border-radius:0;
  transition:background .45s var(--ease-in),color .45s var(--ease-in),transform .18s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.submit i{
  width:.55em;height:.55em;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);
  transition:transform .4s var(--ease-in);
}
@media (hover:hover) and (pointer:fine){
  .submit:hover{background:var(--copper)}
  .submit:hover i{transform:rotate(45deg) translate(3px,-3px)}
}
.submit:active{transform:scale(.985)}
.submit[disabled]{opacity:.5;cursor:wait}
.submit.is-ok{background:var(--copper);animation:pop .5s cubic-bezier(.18,.89,.32,1.28)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}

.form__note{margin-top:1.2rem;font-size:.92rem;color:var(--sand);min-height:1.4em}
.form__note.is-err{color:#c76b6b}
.form__note.is-ok{color:var(--white)}

/* ---------- PIED DE PAGE ---------- */
.foot{
  border-top:1px solid rgba(239,239,239,.11);
  padding:2.2rem 0 2.6rem;
  font-family:Outfit,system-ui,sans-serif;
  font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sand);
}
.foot__grid{display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;justify-content:space-between}
.foot p{margin:0}
.foot a{text-decoration:none;transition:color .35s var(--ease-in)}
.foot__lang{display:flex;align-items:center;gap:.55rem}
.foot__lang button{
  background:none;border:0;padding:0;cursor:pointer;color:var(--sand);
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  transition:color .35s var(--ease-in);
}
.foot__lang button.is-on{color:var(--white)}
@media (hover:hover) and (pointer:fine){
  .foot a:hover,.foot__lang button:hover{color:var(--copper)}
}

/* ---------- FOCUS VISIBLE ---------- */
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* =========================================================
   LES CINQ GESTES QUI PROLONGENT L'INTRO
   ========================================================= */

/* 1. LA LAMPE : la lumière de l'ouverture, promenée sur toute la page.
      Un disque déplacé en transform, jamais un dégradé repeint. */
.lamp{
  position:fixed;top:0;left:0;width:720px;height:720px;margin:-360px 0 0 -360px;
  border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(160,82,45,.115) 0%,rgba(160,82,45,.05) 34%,transparent 66%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .8s var(--ease-in);
  will-change:transform;
}
.lamp.on{opacity:1}

/* 2. LA SIGNATURE : le nom ne quitte jamais l'écran. */
.sig{
  position:fixed;top:1.4rem;left:var(--pad);z-index:145;
  margin:0;pointer-events:none;
  font-family:Outfit,system-ui,sans-serif;font-weight:800;
  font-size:var(--t-small);letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);
  opacity:0;transform:translate3d(0,-8px,0);
  transition:opacity .6s var(--ease-in),transform .6s var(--ease-in);
}
.sig.on{opacity:.92;transform:none}
/* Sur mobile la colonne de texte occupe toute la largeur : une signature
   fixe passerait par-dessus les phrases. Le fil cuivre y tient déjà le rôle. */
@media (max-width:859px){ .sig{display:none} }

/* 3. LES FILETS QUI SE DESSINENT */
.item,.press,.social,.contact{border-top:0;position:relative}
[data-rule]::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(239,239,239,.13);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.05s var(--ease-in);
}
[data-rule].in::before{transform:scaleX(1)}
.item:first-child::before{display:none}

/* 4. LES NUMÉROS FANTÔMES : de la profondeur, pas de la couleur. */
.item{overflow:hidden}
.item::after{
  content:attr(data-ghost);
  position:absolute;right:-.06em;top:50%;transform:translateY(-50%);
  font-family:Outfit,system-ui,sans-serif;font-weight:900;
  font-size:min(30vw,24rem);line-height:.8;letter-spacing:-.04em;
  color:#141414;pointer-events:none;user-select:none;z-index:0;
}
.item__grid{position:relative;z-index:1}

/* 5. LA TYPO QUI PREND DE LA CHAIR EN ARRIVANT
      Outfit est une vraie police variable : la graisse se transitionne. */
[data-split]{
  font-variation-settings:"wght" 620;
  transition:font-variation-settings 1s var(--ease-in);
}
[data-split].in{font-variation-settings:"wght" 900}

/* ---------- MOBILE : LE FIL CUIVRE ----------
   Un trait qui se dessine le long du bord gauche et relie les blocs. */
.thread{display:none}
@media (max-width:859px){
  .thread{
    display:block;position:fixed;left:0;top:0;bottom:0;width:2px;z-index:140;
    pointer-events:none;
  }
  .thread span{
    display:block;width:100%;height:100%;
    background:linear-gradient(var(--copper),rgba(160,82,45,.25));
    transform:scaleY(0);transform-origin:50% 0;
    will-change:transform;
  }
  .progress{display:none}
}

/* ---------- MOBILE : PORTRAIT PLEIN ÉCRAN ---------- */
@media (max-width:859px){
  /* Plein cadre sans 100vw : on annule simplement la gouttière du conteneur,
     donc aucun risque de débordement lié à la barre de défilement. */
  .portrait{
    width:auto;
    margin-inline:calc(var(--pad) * -1);
    margin-block:clamp(1rem,4vh,3rem);
  }
  .portrait__light{inset:-6%}
  .about__grid{gap:0}
}

/* ---------- MOBILE : LES TITRES QUI DÉBORDENT ---------- */
@media (max-width:859px){
  .item{overflow:hidden}
  /* Très grande échelle et léger débordement dans la gouttière,
     mais jamais de mot coupé : un titre tronqué n'est pas un effet. */
  .item__head h2{
    font-size:clamp(2.4rem,11.5vw,4rem);
    margin-left:-.06em;
    will-change:transform;
  }
  .item--book .item__head h2{font-size:clamp(2.1rem,9.5vw,3.4rem)}
  /* Ordre voulu : le texte, puis la couverture, puis le bouton. C'est l'ordre
     du code, donc rien a forcer ici. */
  .item--book .book__cover{margin-top:.6rem}
  .item--book .item__cta{margin-top:1.6rem}
}

/* ---------- MODE QA ----------
   ?qa=1 fige l'état final : captures déterministes, zéro animation. */
.qa .intro{display:none}
.qa [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
.qa .word>i{transform:none !important;transition:none !important}
.qa .portrait__light{opacity:1}
.qa .scrollcue{display:none}
.qa [data-rule]::before{transform:none !important;transition:none !important}
.qa [data-split]{font-variation-settings:"wght" 900 !important;transition:none !important}
.qa .lamp{display:none}
.qa .sig{opacity:.92;transform:none}
.qa .intro__name{display:none}

/* ---------- MOUVEMENT REDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .word>i{transform:none}
  .scrollcue{display:none}
}