/* ==========================================================================
   Cyane Reyes — site complet, maquette v3

   Direction (catalogue ui-ux-pro-max, styles.csv) :
     #48 Kinetic Typography   — le nom s'étire et s'épaissit au scroll
     #49 Parallax Storytelling — sections figées (pin) pilotées par la molette
     #66 Editorial Grid        — étiquettes, numéros, citations
     #62 Interactive Cursor    — curseur braise, images qui suivent
     #68 Vintage Analog        — grain commun à toutes les photos

   Typo (google-fonts.csv, rang de popularité entre parenthèses) :
     Anybody (#916)      — display ET texte, axes largeur 50→150 et graisse 100→900
     Martian Mono (#1011)— étiquettes
   Écartées : Playfair (#25), Inter (#7), Montserrat (#8), Jost (#60).

   Mouvement : GSAP + ScrollTrigger + Lenis (CDN, ni framework ni build).
   Tout ce qui bouge est posé par le JS SUR la classe html.anime : sans JS,
   ou avec « réduire les animations », la page reste entière et lisible.
   ========================================================================== */

:root {
  --noir:     #060403;
  --noir-2:   #0f0906;
  --noir-3:   #1a100b;

  --feu:      #e8420c;
  --braise:   #ff7b2e;
  --blanc-feu:#ffe2b8;
  --cendre:   #b9977a;

  --papier:   #f3ebe1;
  --papier-2: rgba(243, 235, 225, .72);
  --papier-3: rgba(243, 235, 225, .6);     /* 6,4:1 sur --noir */
  --filet:    rgba(243, 235, 225, .12);

  --affiche: 'Anybody', 'Arial Narrow', Impact, sans-serif;
  --mono:    'Martian Mono', ui-monospace, 'Courier New', monospace;

  --marge: clamp(20px, 5vw, 96px);
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 168px;

  --z-grain: 90; --z-nav: 80; --z-curseur: 100;
}

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

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--papier);
  font-family: var(--affiche);
  font-variation-settings: 'wdth' 100, 'wght' 330;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* « clip » coupe sans créer de zone de défilement, et Safari le respecte mieux
   que « hidden ». Filet de sécurité en plus du correctif du grain. */
@supports (overflow: clip) { body { overflow-x: clip; } }

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.mono {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 100, 'wght' 380;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--papier-3);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: var(--e2); top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--feu); color: var(--noir);
  font-family: var(--mono); font-size: .75rem; text-decoration: none;
}
.evitement:focus { top: var(--e2); }

:focus-visible { outline: 2px solid var(--braise); outline-offset: 4px; }

/* --- Grain argentique (#68) --------------------------------------------- */
/* ⚠️ Le cadre (.grain) fait EXACTEMENT la taille de l'écran et coupe ce qui
   dépasse ; c'est son calque intérieur (::before) qui est agrandi et bouge.
   Avant, .grain lui-même débordait de 50 % de chaque côté : Chrome l'ignorait,
   mais Safari iPhone laisse un élément fixe qui déborde ÉLARGIR la zone
   d'affichage — la barre de navigation s'étirait avec, et « Réserver » sortait
   de l'écran (signalé sur l'iPhone de Jérôme, 30/09). */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  overflow: hidden;
}
.grain::before {
  content: '';
  position: absolute; inset: -50%;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }  20% { transform: translate(-6%,4%); }
  40% { transform: translate(4%,-5%); }   60% { transform: translate(-3%,-4%); }
  80% { transform: translate(5%,3%); }
}

/* Étalonnage commun : c'est lui qui accorde les photos de jour à celles de nuit. */
.etalonne { filter: saturate(.84) contrast(1.1) brightness(.8) sepia(.12); }

/* ==========================================================================
   NAVIGATION — mix-blend difference : lisible sur noir comme sur image
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--marge);
  mix-blend-mode: difference;
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: background-color .45s ease, padding .45s ease, border-color .45s ease;
}

/* Dès qu'on a défilé : fond noir. Le mode « difference » est coupé à ce
   moment-là — il inverserait aussi le fond et la barre deviendrait blanche.
   Posé par un simple écouteur de défilement dans site.js, AVANT la condition
   d'animation : même sans animation, la barre reste lisible. */
.nav.nav-pleine {
  mix-blend-mode: normal;
  background-color: rgba(6, 4, 3, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--filet);
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav-marque {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; color: #fff;
}
.nav-liens { display: flex; gap: clamp(14px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav-liens a {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; color: #fff;
  padding: 12px 0;                          /* cible tactile ≥ 44 px */
  position: relative;
}
.nav-liens a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-liens a:hover::after, .nav-liens a.actif::after { transform: scaleX(1); }
/* Téléphone : pas de place pour tout. On garde les deux entrées marquées .nav-mobile :
   le livre d'or (demande de Julia, 01/10) — ou le workshop s'il n'y a encore aucun
   message publié — et Réserver. Sous 360 px, seul
   Réserver reste : les deux ensemble ne tiennent plus avec « Cyane Reyes ». */
@media (max-width: 760px) {
  .nav-liens li:not(.nav-mobile) { display: none; }
  .nav-liens { gap: 18px; }
}
@media (max-width: 359px) { .nav-liens li:not(:last-child) { display: none; } }
/* « Livre d'or » est plus long que « Workshop » : sur les petits téléphones
   (360–400 px) la barre passait sur deux lignes. On resserre l'espacement. */
@media (max-width: 400px) {
  .nav-liens { gap: 12px; }
  .nav-liens a { letter-spacing: .12em; }
  .nav-marque { letter-spacing: .14em; }
}
/* Tablette : les six liens (avec le livre d'or) ne tenaient pas sur une ligne. */
@media (min-width: 761px) and (max-width: 1100px) {
  .nav-liens { gap: 16px; }
  .nav-liens a { letter-spacing: .1em; }
}

/* ==========================================================================
   1–2. OUVERTURE + PLONGÉE DANS LE NOM
   ========================================================================== */
.ouverture { position: relative; }

.ouverture-scene {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--noir);
}

.ouverture-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Sans animation : la vidéo sert de fond, voilée. */
.ouverture-voile {
  position: absolute; inset: 0; z-index: 1;
  /* Assombri en bas : c'est là que se pose le texte, par-dessus le feu. */
  background: linear-gradient(to top, rgba(6,4,3,.94) 0%, rgba(6,4,3,.5) 50%, rgba(6,4,3,.55) 100%);
}

/* Le nom, partagé par les deux couches. */
.nom {
  margin: 0;
  font-family: var(--affiche);
  font-size: clamp(4.2rem, 16.5vw, 16rem);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: center;
  --wdth: 100; --wght: 900;
  font-variation-settings: 'wdth' var(--wdth), 'wght' var(--wght);
}
.nom .mot { display: block; white-space: nowrap; }
/* Pas de will-change permanent sur les lettres : c'est le script qui le pose
   le temps de l'ouverture, puis le retire (voir site.js, bug Android du 30/09). */
.nom .l   { display: inline-block; }

/* Couche 1 : le nom en feu (gradient vertical par lettre = chaque lettre
   brûle depuis sa base, et le dégradé reste cohérent d'une lettre à l'autre). */
.ouverture-nom { position: relative; z-index: 3; }
/* Avec animation, le titre reste dans la page (moteurs, lecteurs d'écran)
   mais on ne le voit pas : c'est la fenêtre sur la vidéo qui porte le nom. */
html.anime .ouverture-nom { opacity: 0; }
.ouverture-nom .l {
  background: linear-gradient(to bottom, var(--blanc-feu) 0%, var(--braise) 46%, var(--feu) 78%, #8f1d04 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Couche 2 : la fenêtre. Fond noir + texte blanc en multiply par-dessus la
   vidéo : on ne voit le feu QU'À TRAVERS les lettres. Puis on zoome dedans. */
.ouverture-fenetre {
  position: absolute; inset: 0; z-index: 2;
  display: none;
  place-items: center;
  background: #000;
  color: #fff;
  mix-blend-mode: multiply;
  will-change: transform;
  pointer-events: none;
}
html.anime .ouverture-fenetre { display: grid; opacity: 0; }

.ouverture .braises { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* Couvre la scène ; ses enfants (en-tête, invite) s'y placent comme avant. */
.ouverture-habillage { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.ouverture-ours, .ouverture-indice {
  position: absolute; z-index: 5; left: var(--marge); right: var(--marge);
  display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
}
.ouverture-ours   { top: calc(var(--e6) - 16px); border-top: 1px solid var(--filet); padding-top: var(--e2); }
.ouverture-indice { bottom: var(--e4); justify-content: center; }
/* Page statique (sans animation) : l'invite chevaucherait l'accroche, qui est
   alors visible d'emblée en bas d'écran — et sans pin, défiler va de soi. */
html:not(.anime) .ouverture-indice { display: none; }
.ouverture-indice span::after {
  content: ''; display: block; width: 1px; height: 46px; margin: 12px auto 0;
  background: linear-gradient(var(--braise), transparent);
  animation: filet 2.2s cubic-bezier(.16,1,.3,1) infinite; transform-origin: top;
}
@keyframes filet { 0% { transform: scaleY(0); opacity: 0 } 40% { transform: scaleY(1); opacity: 1 } 100% { opacity: 0 } }

/* Ce qu'on lit une fois tombé dans la vidéo. */
.ouverture-apres {
  position: absolute; z-index: 6; left: var(--marge); right: var(--marge); bottom: var(--e5);
  display: grid; gap: var(--e3); max-width: 1180px;
}
html.anime .ouverture-apres { opacity: 0; }
.ouverture-apres p { margin: 0; }
/* Même famille que tout le site (Anybody), droite et serrée. Le Kalnia large
   d'origine faisait « collage » (retour de Romain, 29/09). */
.ouverture-accroche {
  font-variation-settings: 'wdth' 82, 'wght' 700;
  font-size: clamp(2rem, 5.4vw, 4.8rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-shadow: 0 4px 40px rgba(0,0,0,.8);
}
.ouverture-accroche em { font-style: normal; color: var(--braise); }

/* ==========================================================================
   3. MANIFESTE — la phrase s'allume mot à mot
   ========================================================================== */
.manifeste {
  padding: var(--e7) var(--marge);
  min-height: 120vh;
  display: grid; align-content: center;
}
.manifeste .mono { margin: 0 0 var(--e4); }
/* Petit écran : pas de hauteur minimale ni de centrage vertical. Sur un
   téléphone, 120 vh centrés + 168 px de marge laissaient un trou noir de
   plusieurs centaines de pixels sous l'accroche (retour du 29/09). L'allumage
   des mots ne dépend que du paragraphe lui-même : rien n'est perdu. */
@media (max-width: 860px) {
  .manifeste { min-height: 0; align-content: start; padding-top: var(--e5); }
}
.manifeste-texte {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.3rem, 6.4vw, 6.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: 'wdth' 78, 'wght' 520;
}
/* La mise en valeur passe par la couleur et la graisse, JAMAIS par un
   changement de police ni de largeur : la phrase doit se lire d'un trait.
   (Avant : Kalnia large en plein milieu, jugé « pas fou » par Romain.) */
.manifeste-texte em {
  font-style: normal;
  font-variation-settings: 'wdth' 78, 'wght' 820;
  color: var(--braise);
}
.manifeste-texte .m { display: inline-block; }   /* posé par le JS */

/* ==========================================================================
   4. UNIVERS — défilement horizontal piloté par le scroll vertical
   ========================================================================== */
.univers { position: relative; }

.univers-piste {
  display: flex;
  flex-direction: column;       /* mobile et sans animation : empilé */
}
html.anime .univers-piste.horizontal {
  flex-direction: row;
  width: max-content;
  height: 100svh;
}

.panneau {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--e5);
  padding: var(--e6) var(--marge);
  overflow: hidden;
}
html.anime .univers-piste.horizontal .panneau { width: 100vw; height: 100svh; flex: 0 0 100vw; }
@media (max-width: 860px) {
  .panneau { grid-template-columns: 1fr; gap: var(--e4); padding: var(--e6) var(--marge); }
}

.panneau-media {
  position: relative; overflow: hidden;
  height: min(76svh, 720px);
  width: 100%;
  background: var(--noir-2);
}
.panneau:nth-child(even) .panneau-media { order: 2; }
@media (max-width: 860px) {
  .panneau-media { height: 62svh; }
  .panneau:nth-child(even) .panneau-media { order: 0; }
}
.panneau-media img, .panneau-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Cadrage réglable par média (style="--cadrage: …") : sur ordinateur le cadre est
     horizontal et les médias verticaux, le centre coupait les têtes (05/10/2026). */
  object-position: var(--cadrage, 50% 50%);
}

.panneau-num {
  position: absolute; z-index: 0;
  top: var(--e5); right: var(--marge);
  margin: 0;
  font-size: clamp(7rem, 22vw, 22rem);
  line-height: .8;
  font-variation-settings: 'wdth' 50, 'wght' 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 66, 12, .32);
  pointer-events: none;
}
.panneau:nth-child(even) .panneau-num { right: auto; left: var(--marge); }

.panneau-corps { position: relative; z-index: 2; }
.panneau-corps .mono { margin: 0 0 var(--e3); }
.panneau-titre {
  margin: 0 0 var(--e4);
  font-size: clamp(3.4rem, 10vw, 10rem);
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
  --wdth: 100;
  font-variation-settings: 'wdth' var(--wdth), 'wght' 880;
}
/* Petit écran : les quatre titres restent dans la même typo et la même
   taille, on resserre seulement la LARGEUR des lettres (axe wdth d'Anybody).
   « EFFEUILLAGE », 11 lettres, débordait sinon de l'écran. Sur grand écran
   c'est le JS qui pilote --wdth pendant le défilement horizontal. */
@media (max-width: 860px) {
  .panneau-titre { --wdth: 78; }   /* = la largeur où se posent les titres sur grand écran */
}
.panneau-texte { margin: 0; max-width: 40ch; color: var(--papier-2); font-size: 1.08rem; }

/* ==========================================================================
   5. GALERIE EN TUNNEL — on avance dans la profondeur
   ========================================================================== */
.tunnel { position: relative; }
.tunnel-scene {
  position: relative;
  height: 100svh;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
  display: grid; place-items: center;
}
.tunnel-titre {
  position: absolute; z-index: 0; margin: 0;
  font-size: clamp(3rem, 12vw, 12rem);
  line-height: .85; text-align: center; text-transform: uppercase;
  font-variation-settings: 'wdth' 140, 'wght' 200;
  color: transparent; -webkit-text-stroke: 1px rgba(243,235,225,.22);
}
.tunnel-item {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: clamp(170px, 22vw, 360px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.tunnel-item img { width: 100%; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.tunnel-item figcaption { margin-top: 10px; }

/* Sans animation : une simple grille. */
html:not(.anime) .tunnel-scene {
  height: auto; perspective: none; display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: var(--e6) var(--marge);
}
html:not(.anime) .tunnel-item { position: static; width: auto; }
html:not(.anime) .tunnel-titre { position: static; grid-column: 1 / -1; -webkit-text-stroke: 0; color: var(--papier); }

/* ==========================================================================
   6. BANDEAU — la vitesse de scroll étire les lettres
   ========================================================================== */
.bandeau {
  padding: var(--e6) 0;
  overflow: hidden;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.bandeau-ligne {
  display: flex; width: max-content; white-space: nowrap;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: .95;
  text-transform: uppercase;
  --wdth: 70;
  font-variation-settings: 'wdth' var(--wdth), 'wght' 850;
  will-change: transform;
}
.bandeau-ligne span { padding-right: .35em; }
/* Les deux lignes se touchaient : l'interligne serré (.95) plus l'inclinaison
   due à la vitesse faisaient mordre la ligne en contour sur la ligne pleine. */
.bandeau-ligne + .bandeau-ligne { margin-top: .22em; }
.bandeau-ligne b { color: var(--feu); font-weight: inherit; }
.bandeau-ligne.contour { color: transparent; -webkit-text-stroke: 1px var(--papier-3); }

/* ==========================================================================
   6b. LIVRE D'OR — citations en colonnes, façon livre
   ========================================================================== */
.livre-dor { padding: var(--e7) var(--marge) var(--e6); border-top: 1px solid var(--filet); }
.livre-dor > .mono { margin: 0 0 var(--e3); }
.livre-dor-titre {
  margin: 0 0 var(--e5);
  font-size: clamp(2.8rem, 8.5vw, 8rem);
  line-height: .84;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 78, 'wght' 880;
}
/* Carrousel (01/10/2026, demande de Romain) : on fait glisser les messages.
   Défilement horizontal natif + aimantation (scroll-snap) : fluide au doigt,
   sans JavaScript. Sur mobile, le bord du message suivant dépasse à droite
   pour inviter à glisser ; sur ordinateur, trois messages côte à côte. */
.livre-dor-liste {
  list-style: none; margin: 0; padding: 0 0 var(--e2);
  display: flex; align-items: flex-start; gap: var(--e4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.livre-dor-liste::-webkit-scrollbar { display: none; }
.livre-dor-liste:focus-visible { outline: 2px solid var(--braise); outline-offset: 6px; }
.livre-dor-avis {
  flex: 0 0 min(84%, 440px); scroll-snap-align: start;
  margin: 0; padding-top: var(--e3); border-top: 1px solid var(--filet);
}
@media (min-width: 861px) {
  .livre-dor-avis { flex-basis: calc((100% - 2 * var(--e4)) / 3); }
}
.livre-dor-nav { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e3); }
.livre-dor-nav[hidden] { display: none; }
.livre-dor-fleche {
  width: 48px; height: 48px;                      /* cible tactile ≥ 44 px */
  border: 1px solid rgba(243,235,225,.28); background: transparent; color: var(--papier);
  font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s, opacity .2s;
}
.livre-dor-fleche:hover, .livre-dor-fleche:focus-visible { border-color: var(--braise); color: var(--braise); }
.livre-dor-fleche:disabled { opacity: .3; cursor: default; border-color: rgba(243,235,225,.28); color: var(--papier); }
.livre-dor-compte { min-width: 4.5em; text-align: center; color: var(--papier-2); }
.livre-dor-avis blockquote { margin: 0 0 var(--e2); position: relative; }
.livre-dor-avis blockquote::before {
  content: '«';
  display: block;
  margin-bottom: 4px;
  font-size: 2.6rem; line-height: .7;
  font-variation-settings: 'wdth' 100, 'wght' 800;
  color: var(--braise);
}
.livre-dor-avis blockquote p {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  font-variation-settings: 'wdth' 84, 'wght' 450;
}
.livre-dor-signature { margin: 0; }
.livre-dor-signature strong { color: var(--papier); font-weight: 500; }
.livre-dor-signature span { color: var(--braise); }


/* ==========================================================================
   7a. PRESTATIONS — la ligne s'étire, la photo suit le curseur
   ========================================================================== */
.prestations { padding: var(--e7) var(--marge) var(--e6); }
.prestations > .mono { margin: 0 0 var(--e4); }
.prestations-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.prestation {
  display: grid; grid-template-columns: 4ch 1fr auto; gap: var(--e3); align-items: baseline;
  padding: clamp(14px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--filet);
  cursor: default;
}
.prestation-nom {
  font-size: clamp(2rem, 6.4vw, 6.2rem);
  line-height: .9; text-transform: uppercase; letter-spacing: -.02em;
  font-variation-settings: 'wdth' 62, 'wght' 760;
  transition: font-variation-settings .7s cubic-bezier(.16,1,.3,1), color .4s;
}
.prestation:hover .prestation-nom {
  font-variation-settings: 'wdth' 128, 'wght' 900;
  color: var(--braise);
}
.prestation .mono:last-child { text-align: right; }
@media (max-width: 700px) { .prestation { grid-template-columns: 3ch 1fr; } .prestation .mono:last-child { display: none; } }

.apercu {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: clamp(200px, 20vw, 320px); aspect-ratio: 4/5;
  pointer-events: none; overflow: hidden;
  opacity: 0;
  transition: opacity .35s;       /* position, échelle, rotation : GSAP */
}
.apercu.visible { opacity: 1; }
.apercu img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.apercu img.courant { opacity: 1; }

.prestations-format {
  margin: calc(-1 * var(--e2)) 0 var(--e4);
  max-width: 40ch;
  color: var(--papier-2);
  font-size: 1.08rem;
}

/* ==========================================================================
   7c. WORKSHOP EFFEUILLAGE — texte à gauche, vidéo portrait à droite
   ========================================================================== */
.workshop {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--e5);
  align-items: center;
  padding: var(--e7) var(--marge);
  border-top: 1px solid var(--filet);
}
@media (max-width: 860px) {
  .workshop { grid-template-columns: 1fr; gap: var(--e4); padding: var(--e6) var(--marge); }
}
.workshop-texte > .mono { margin: 0 0 var(--e3); }
.workshop-titre {
  margin: 0 0 var(--e4);
  font-size: clamp(2.8rem, 8.5vw, 8rem);
  line-height: .84;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 78, 'wght' 880;
}
/* La fiche pratique, façon étiquettes de magazine. */
.workshop-infos {
  list-style: none; margin: 0 0 var(--e5); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 0;
  color: var(--papier);
}
.workshop-infos li { padding-right: var(--e2); margin-right: var(--e2); border-right: 1px solid var(--filet); }
.workshop-infos li:last-child { border-right: 0; color: var(--braise); }
/* Petit écran : les séparateurs restaient orphelins en bout de ligne au
   passage à la ligne ; en liste verticale il n'y en a plus besoin. */
@media (max-width: 600px) {
  .workshop-infos { flex-direction: column; gap: 6px; }
  .workshop-infos li { border-right: 0; padding-right: 0; margin-right: 0; }
}

/* « Tu n'as pas besoin… » ×3, puis la chute en orange : le rythme de son texte. */
.workshop-pasbesoin { margin: 0 0 var(--e4); }
.workshop-pasbesoin p {
  margin: 0 0 6px;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  font-variation-settings: 'wdth' 82, 'wght' 500;
  color: var(--papier-2);
}
.workshop-pasbesoin .workshop-envie {
  margin-top: var(--e2);
  color: var(--papier);
  font-variation-settings: 'wdth' 82, 'wght' 750;
}
.workshop-envie em { font-style: normal; color: var(--braise); }

.workshop-description { margin: 0 0 var(--e2); max-width: 46ch; color: var(--papier-2); font-size: 1.08rem; }

.workshop-programme-titre { margin: var(--e4) 0 var(--e2); }
.workshop-programme { list-style: none; margin: 0; padding: 0; max-width: 46ch; border-top: 1px solid var(--filet); }
.workshop-programme li {
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--filet);
  position: relative;
  font-size: 1.05rem;
}
.workshop-programme li::before {             /* une braise, pas une puce */
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--braise); box-shadow: 0 0 10px 2px rgba(255,123,46,.55);
}

.workshop-cta { display: inline-block; margin-top: var(--e5); text-decoration: none; }
.livre-dor-action { margin: var(--e5) 0 0; }
.livre-dor-action .bouton { display: inline-block; text-decoration: none; }

.workshop-video { margin: 0; justify-self: center; width: min(100%, 420px); }
/* Grand écran : la vidéo reste à côté du texte pendant qu'on le lit. */
@media (min-width: 861px) {
  .workshop { align-items: start; }
  .workshop-video { position: sticky; top: 96px; }
}
.workshop-video video {
  display: block; width: 100%;
  aspect-ratio: 9 / 16;              /* réservé d'avance : aucun saut de page */
  max-height: 82svh;
  object-fit: cover;
  background: var(--noir-2);
}
.workshop-video figcaption { margin-top: var(--e2); }

/* ==========================================================================
   7b. CONTACT
   ========================================================================== */
.contact { padding: var(--e7) var(--marge) var(--e6); border-top: 1px solid var(--filet); }
.contact-titre {
  margin: 0 0 var(--e5);
  font-size: clamp(3.6rem, 15vw, 15rem);
  line-height: .8; letter-spacing: -.03em; text-transform: uppercase;
  font-variation-settings: 'wdth' 88, 'wght' 900;
  /* Le remplissage de feu : un dégradé à bord franc, poussé par le scroll. */
  background: linear-gradient(90deg, var(--feu) 0%, var(--braise) 48%, transparent 50%);
  background-size: 205% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243,235,225,.3);
}
html:not(.anime) .contact-titre { background-position: 0 0; }

.contact-grille { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--e5); }
@media (max-width: 860px) { .contact-grille { grid-template-columns: 1fr; } }
.contact-intro p { margin: 0 0 var(--e3); max-width: 36ch; color: var(--papier-2); font-size: 1.1rem; }

.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3) var(--e4); }
.champ { display: grid; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
@media (max-width: 600px) { .formulaire { grid-template-columns: 1fr; } }
.champ label { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--papier-3); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px;
  padding: 10px 0;
  background: transparent; color: var(--papier);
  border: 0; border-bottom: 1px solid rgba(243,235,225,.28);
  font: inherit; font-size: 1.05rem;
  transition: border-color .3s;
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ select option { background: var(--noir-2); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--braise); }
.champ-rgpd { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--papier-2); }
.champ-rgpd input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--feu); }
.champ-rgpd a { color: inherit; text-decoration-color: var(--braise); text-underline-offset: 3px; }

/* Pot de miel : hors de l'écran, jamais atteint au clavier (tabindex -1). */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire-erreurs {
  grid-column: 1 / -1;
  padding: var(--e3); border-left: 3px solid var(--feu); background: rgba(232, 66, 12, .08);
}
.formulaire-erreurs p { margin: 0 0 6px; }
.formulaire-erreurs ul { margin: 0; padding-left: 1.2em; color: var(--papier-2); }

.contact-merci { padding: var(--e4); border: 1px solid var(--filet); align-self: start; }
.contact-merci-titre {
  margin: 0 0 var(--e2);
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1;
  font-variation-settings: 'wdth' 82, 'wght' 800; color: var(--braise);
}
.contact-merci p:last-child { margin: 0; color: var(--papier-2); }

/* Contacts directs : e-mail et réseaux, en plus du formulaire. */
.contact-directs { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.contact-directs a {
  display: inline-block; padding: 10px 0;                  /* cible tactile ≥ 44 px */
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--papier); text-decoration: underline; text-decoration-color: var(--braise); text-underline-offset: 4px;
}
.contact-directs a:hover, .contact-directs a:focus-visible { color: var(--braise); }
.contact-directs li:first-child a { text-transform: none; letter-spacing: .06em; }

.bouton {
  grid-column: 1 / -1; justify-self: start;
  position: relative; overflow: hidden;
  padding: 18px 34px; min-height: 52px;
  background: var(--feu); color: var(--noir);
  border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
}
.bouton::before {
  content: ''; position: absolute; inset: 0; background: var(--blanc-feu);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.bouton:hover::before, .bouton:focus-visible::before { transform: none; }
.bouton span { position: relative; }

.pied {
  display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e4) var(--marge);
  border-top: 1px solid var(--filet);
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied a { display: inline-block; padding: 6px 0; }
.pied a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--braise); transition: color .2s; }
.pied a:hover, .pied a:focus-visible { color: var(--braise); }

/* ==========================================================================
   CURSEUR BRAISE (#62) — seulement souris fine, jamais au tactile
   ========================================================================== */
.curseur { display: none; }
@media (pointer: fine) {
  html.anime.curseur-actif, html.anime.curseur-actif * { cursor: none !important; }
  /* Dans un champ de saisie on garde le curseur texte du système : un
     curseur décoratif n'a rien à faire là où l'on doit viser une lettre. */
  html.anime.curseur-actif :is(input, textarea, select, video) { cursor: auto !important; }
  html.anime .curseur {
    display: block; position: fixed; left: 0; top: 0; z-index: var(--z-curseur);
    pointer-events: none;
    /* Invisible tant que la souris n'a pas bougé : sinon l'anneau reste collé
       en (0, 0) et on voit un demi-cercle dans le coin, comme un bug. */
    opacity: 0;
    transition: opacity .3s;
  }
  html.anime .curseur.pret { opacity: 1; }
  .curseur-point {
    position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%; background: var(--blanc-feu);
    box-shadow: 0 0 12px 3px rgba(255,123,46,.8);
  }
  .curseur-anneau {
    position: fixed; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; border: 1px solid rgba(255,123,46,.55);
    transition: width .35s, height .35s, margin .35s, background .35s, border-color .35s;
  }
  .curseur.survol .curseur-anneau {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    background: rgba(232,66,12,.14); border-color: var(--braise);
  }
  html.anime .etincelles { display: block; }
}

/* Hors de tout @media : sur écran tactile le bloc (pointer: fine) ne
   s'applique pas, et ce canvas redevenait un élément ordinaire de 300×150 px
   en tête de page — il repoussait tout le site de 150 px vers le bas. */
.etincelles {
  display: none;
  position: fixed; inset: 0; z-index: calc(var(--z-curseur) - 1);
  pointer-events: none;
}

/* ==========================================================================
   RÉDUIRE LES ANIMATIONS — la page complète, immobile
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .grain::before { animation: none; }
  .ouverture-indice span::after { animation: none; }
  .prestation-nom, .bouton::before { transition: none; }
}

/* Bouton d'envoi pendant l'envoi (désactivé par site.js contre le double clic). */
.bouton:disabled { opacity: .55; cursor: progress; }