/* ============================================================
   CAFÉ INTERVIEW — système de design, version 2
   Aplats pleins, serif éditorial, grain, profondeur par couches.
   Plus de fond photographique flouté, plus de 3D temps réel.
   ============================================================ */

/* ---------- 1. Jetons ---------- */

:root{
  /* Les quatre aplats. Ce sont des couleurs pleines, jamais des dégradés :
     c'est la restraint qui porte le site, pas les effets. */
  --mint:#7FD0B4;          /* le vert des murs, relevé pour tenir en aplat plein */
  --mint-deep:#5AA98F;
  --ink:#0B1512;           /* le noir-vert, jamais du noir pur */
  --ink-deep:#060E0C;
  --cream:#F2EDE1;         /* le papier */
  --cream-warm:#E7E0D0;
  --neon:#FF2E1F;          /* le tube rouge, en dose rare */
  /* Le rouge des aplats clairs. Mesure au rendu : a #C4160A il tenait
     5,1 contre 1 sur le creme mais seulement 3,3 sur la menthe, qui est
     bien plus sombre. Assombri jusqu a passer sur les DEUX. */
  --neon-ink:#9B1208;
  --oak:#6B4226;

  /* Rôles, réassignés par chaque panneau */
  --bg:var(--ink);
  --fg:var(--cream);
  --fg-soft:#9FB3AB;
  --fg-faint:#6C8078;
  --rule:rgba(242,237,225,.16);
  --accent:var(--neon);

  /* Type */
  --display:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --body:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Space Mono','SFMono-Regular',Consolas,monospace;

  /* Mouvement : deux courbes, partout */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.62s;
  --dur-fast:.28s;

  --gut:clamp(20px,4.4vw,80px);
  --shell:min(1520px,100% - 2 * var(--gut));
  --panel-lift:clamp(18px,2.6vw,34px);   /* de combien un panneau recouvre le précédent */

  /* Le voile de lisibilité du comptoir. Il est nommé ici parce que deux
     images le portent : le fond du site et la vidéo d'ouverture, qui
     doivent s'assombrir de la même façon pour que le relais de l'une à
     l'autre ne se voie pas. */
  --voile:
    linear-gradient(to top,rgba(6,14,12,.92) 0%,rgba(6,14,12,.55) 26%,rgba(6,14,12,0) 58%),
    linear-gradient(to right,rgba(6,14,12,.80) 0%,rgba(6,14,12,.44) 26%,rgba(6,14,12,0) 48%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(6,14,12,.5) 100%);
}

/* ---------- 2. Socle ---------- */

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink-deep);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(15px,.4vw + 13.8px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--neon);color:#fff}

/* ---------- 3. Le grain ---------- */

/* Une seule couche, fixe, au-dessus de tout, qui ne bouge pas et ne coûte
   rien. C'est elle qui donne l'épaisseur de pellicule que les aplats purs
   n'ont pas, et elle empêche les grands aplats de paraître plastiques. */
.grain{
  position:fixed;inset:-50%;
  z-index:400;pointer-events:none;
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  will-change:transform;
  animation:grainshift 1.1s steps(1,end) infinite;
}
@keyframes grainshift{
  0%  {transform:translate3d(0,0,0)}
  20% {transform:translate3d(-3%,2%,0)}
  40% {transform:translate3d(2%,-3%,0)}
  60% {transform:translate3d(-2%,-2%,0)}
  80% {transform:translate3d(3%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ---------- 4. Les panneaux d'aplat ---------- */

/* Chaque section est un aplat plein qui vient recouvrir le précédent.
   La profondeur naît de l'empilement, pas d'une ombre ni d'une perspective. */
.panel{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  border-radius:var(--panel-lift) var(--panel-lift) 0 0;
  margin-top:calc(-1 * var(--panel-lift));
  padding-bottom:clamp(72px,10vw,164px);
  isolation:isolate;
}
.panel:first-of-type{margin-top:0;border-radius:0}

/* Les gris discrets sont mesurés, pas choisis à l'œil : chacun tient
   au moins 4,5:1 sur SON aplat. Les valeurs plus pâles essayées d'abord
   tombaient entre 3,0 et 3,8, donc sous le seuil, sur les quatre fonds. */
.panel--ink   { --bg:var(--ink);      --fg:var(--cream); --fg-soft:#9FB3AB; --fg-faint:#6C8078; --rule:rgba(242,237,225,.16); --accent:var(--neon) }
.panel--deep  { --bg:var(--ink-deep); --fg:var(--cream); --fg-soft:#93A79F; --fg-faint:#6F847C; --rule:rgba(242,237,225,.13); --accent:var(--neon) }
.panel--mint  { --bg:var(--mint);     --fg:#07241B;      --fg-soft:#1F5546; --fg-faint:#2A5245; --rule:rgba(7,36,27,.22);     --accent:var(--neon-ink) }
.panel--cream { --bg:var(--cream);    --fg:#0B1512;      --fg-soft:#4A5D56; --fg-faint:#5C6C66; --rule:rgba(11,21,18,.16);    --accent:var(--neon-ink) }

.shell{width:var(--shell);margin-inline:auto}

/* ---------- 5. Typographie ---------- */

/* Le serif porte les titres, et lui seul. Fort contraste, très serré,
   comme une une de magazine. Le reste du site se tait. */
.display{
  font-family:var(--display);
  font-weight:700;
  font-optical-sizing:auto;
  line-height:.94;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
.display--xl{font-size:clamp(52px,10.5vw,190px);line-height:.88;letter-spacing:-.03em}
.display--l {font-size:clamp(38px,6.2vw,104px)}
.display--m {font-size:clamp(26px,3.2vw,52px);line-height:1.02}

.italic{font-style:italic}

/* Le libellé de locuteur, la voix de la transcription */
.spk{
  display:inline-flex;align-items:center;gap:.7em;
  font:700 clamp(9.5px,.72vw,11px)/1 var(--mono);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);
  margin:0 0 clamp(16px,1.8vw,26px);
}
.spk::before{content:"";width:clamp(16px,2.2vw,30px);height:1px;background:currentColor;opacity:.6}
.spk .t{color:var(--fg-faint);letter-spacing:.18em;font-weight:400}

.lede{
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.55;
  color:var(--fg-soft);
  margin:0;
  max-width:44ch;
}

.reply{
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.56;
  margin:0;
  max-width:50ch;
  color:var(--fg);
}
.reply em{font-family:var(--display);font-style:italic;font-size:1.06em}
.reply .cite{color:var(--fg-soft)}

/* ---------- 6. Boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75em;
  font:700 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  padding:17px 28px;border:1px solid var(--accent);
  background:var(--accent);color:var(--cream);
  text-decoration:none;cursor:pointer;border-radius:999px;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--fg);background:transparent}
.btn .ar{width:15px;height:9px;flex:none;transition:transform var(--dur-fast) var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- 7. Titres de section ---------- */

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:clamp(16px,3vw,60px);
  padding-block:clamp(72px,10vw,150px) clamp(28px,3.6vw,52px);
  border-bottom:1px solid var(--rule);
}
.sec-note{
  font:400 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-faint);margin:0;text-align:right;white-space:nowrap;
}
@media (max-width:640px){
  .sec-head{grid-template-columns:1fr}
  .sec-note{text-align:left}
}

/* ---------- 8. Accessibilité et mouvement ---------- */

.vh{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:fixed;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:999;padding:14px 24px;background:var(--neon);color:#fff;
  font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-radius:0 0 6px 6px;
  transition:transform var(--dur-fast) var(--ease);
}
.skip:focus-visible{transform:translate(-50%,0)}

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

/* Entrées : une seule idée, la montée douce, échelonnée */
.rv .rv-i{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.rv.in .rv-i{opacity:1;transform:none}
.rv.in .rv-i:nth-child(1){transition-delay:0ms}
.rv.in .rv-i:nth-child(2){transition-delay:90ms}
.rv.in .rv-i:nth-child(3){transition-delay:180ms}
.rv.in .rv-i:nth-child(4){transition-delay:270ms}
.rv.in .rv-i:nth-child(5){transition-delay:360ms}
.rv.in .rv-i:nth-child(6){transition-delay:450ms}

/* Les décalages sont retirés une fois l'entrée jouée, sinon chaque survol
   des éléments suivants traîne pour toujours. Même spécificité, sinon
   la règle de nettoyage ne s'applique jamais. */
.rv.done .rv-i:nth-child(1),
.rv.done .rv-i:nth-child(2),
.rv.done .rv-i:nth-child(3),
.rv.done .rv-i:nth-child(4),
.rv.done .rv-i:nth-child(5),
.rv.done .rv-i:nth-child(6){transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .rv .rv-i{opacity:1;transform:none}
  .grain{animation:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}