/* =================================================================
   BRIGHT — Landing one-page · refonte "SALLE DE MONTAGE"
   DA : dark cinématique + pilier rouge-orange incandescent.
   Concept : la page se lit comme un montage vidéo — ● REC,
   timecodes, séquences (SEQ.01 → finale), le pilier est le fil
   rouge du montage. Générique de fin : wordmark qui s'embrase.
   ================================================================= */

/* ---------- VARIABLES ---------- */
:root{
  /* Fonds */
  --bg-0:#0a0a0c;          /* charbon le plus sombre */
  --bg-1:#0f0d0e;
  --bg-2:#15100f;          /* charbon chaud (bas d'écran) */

  /* Accent incandescent (réservé : pilier, chiffres clés, CTA) */
  --ember-core:#ff3b1f;    /* cœur */
  --ember-glow:#ff6a3d;    /* halo */
  --ember-soft:#ff8a5c;
  --ember-hot:#ffd9c2;     /* centre blanc-chaud du pilier */

  /* Texte */
  --ink:#f4efec;
  --ink-dim:#9a928d;
  --ink-faint:#8a817b;   /* ≥ 4.5:1 sur fond charbon (WCAG AA) */

  /* Divers */
  --line-faint:rgba(255,255,255,.07);
  --maxw:1180px;

  /* Largeurs du pilier (cœur + halo diffus) — TRAIT LARGE */
  --beam-core-w:clamp(46px,5.4vw,86px);
  --beam-glow-w:clamp(200px,22vw,360px);
  /* Dégagement central : aucun texte n'entre dans cette zone */
  --beam-clearance:clamp(110px,12vw,190px);

  /* Glow réutilisable */
  --beam-shadow:
    0 0 22px rgba(255,59,31,.85),
    0 0 60px rgba(255,106,61,.55),
    0 0 120px rgba(255,106,61,.30);
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg-0);
  color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* sélection de texte & scrollbar aux couleurs de la marque */
::selection{background:var(--ember-core);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2a201d,#1c1513);
  border-radius:6px;border:2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--ember-core),#7a2415)}

/* Fond global : dégradés radiaux rouge sombre en bas (ciel orageux) */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 60% at 50% 118%, rgba(255,59,31,.22), transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(255,106,61,.12), transparent 70%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
}

/* =================================================================
   PRÉLOADER — "chargement du projet" dans la salle de montage.
   main.js anime le compteur puis remonte le panneau. Failsafe :
   si main.js ne charge pas, l'animation CSS l'efface à 4 s.
   ================================================================= */
.loader{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg-0);
  display:flex;align-items:center;justify-content:center;
  animation:loaderFailsafe .5s ease 4s forwards;
}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader__inner{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  text-align:center;
}
.loader__brand{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Anton",sans-serif;font-size:1.5rem;letter-spacing:.06em;
}
.loader__spark{
  width:13px;height:13px;border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--ember-glow),var(--ember-core));
  box-shadow:0 0 14px rgba(255,59,31,.8);
}
.loader__pct{
  font-family:"JetBrains Mono",monospace;font-size:.9rem;
  letter-spacing:.3em;color:var(--ember-soft);
}
.loader__bar{
  width:min(280px,60vw);height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.loader__fill{
  display:block;width:100%;height:100%;
  background:linear-gradient(90deg,var(--ember-core),var(--ember-hot));
  box-shadow:0 0 12px rgba(255,59,31,.8);
  transform:scaleX(0);transform-origin:left center;
}
.loader__hint{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- GRAIN / NOISE OVERLAY ----------
   Couche volontairement légère : pas de mix-blend-mode (compositing
   coûteux en continu) et débord limité à 10% pour les translations. */
.noise{
  position:fixed;inset:-10%;z-index:1000;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(4%,-2%)}
}

/* Ciel orageux derrière le pilier (référence visuelle du client).
   Fixe, sous le pilier (z 2 < 5) et sous les sections (z 10).
   Bien présent (cf. référence) + dérive lente pour un ciel vivant. */
.scene-clouds{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=70&w=1600&auto=format&fit=crop");
  background-size:cover;background-position:center 75%;
  opacity:.34;
  filter:grayscale(.3) contrast(1.28) brightness(.58) sepia(.18);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 100%);
  animation:cloudDrift 55s ease-in-out infinite alternate;
}
/* scale ≥ 1.06 : couvre le translateX (pas de bord nu) */
@keyframes cloudDrift{
  from{transform:translateX(-2%) scale(1.06)}
  to{transform:translateX(2%) scale(1.1)}
}

/* Halo de chaleur AU-DESSUS des nuages (z 3) : la base du pilier
   éclaire la masse nuageuse, comme sur l'image de référence. */
.scene-heat{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(42% 36% at 50% 97%, rgba(255,126,64,.48), transparent 70%),
    radial-gradient(95% 60% at 50% 110%, rgba(255,59,31,.30), transparent 72%);
}

/* Nuages de PREMIER PLAN (z 6 > pilier z 5) : masses sombres aux
   coins bas, miroir du ciel de fond. Le pilier passe derrière. */
.scene-clouds--front{
  z-index:6;
  opacity:.55;
  background-position:center 92%;
  filter:grayscale(.4) contrast(1.3) brightness(.4) sepia(.12);
  -webkit-mask-image:
    radial-gradient(56% 52% at 6% 100%, #000 32%, transparent 74%),
    radial-gradient(56% 52% at 94% 100%, #000 32%, transparent 74%);
          mask-image:
    radial-gradient(56% 52% at 6% 100%, #000 32%, transparent 74%),
    radial-gradient(56% 52% at 94% 100%, #000 32%, transparent 74%);
  animation:cloudDriftFront 45s ease-in-out infinite alternate;
}
/* scale(-…) : image miroir, pour ne pas dupliquer le ciel de fond */
@keyframes cloudDriftFront{
  from{transform:translateX(2%) scale(-1.06,1.06)}
  to{transform:translateX(-2%) scale(-1.1,1.1)}
}

/* Barre de progression du fil rouge (sommet de l'écran) —
   la tête de lecture de la timeline */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:950;
  background:linear-gradient(90deg,var(--ember-core),var(--ember-soft));
  box-shadow:0 0 12px rgba(255,59,31,.7);
  transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}

/* Halos d'ambiance flottants */
.ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(80px)}
.ambient--bottom{
  left:50%;bottom:-25vh;width:90vw;height:60vh;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,59,31,.30), transparent 65%);
}
.ambient--top{
  left:50%;top:-30vh;width:60vw;height:50vh;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,106,61,.10), transparent 70%);
}

/* ---------- TYPOGRAPHIE UTILITAIRE ---------- */
.kicker{
  font-family:"JetBrains Mono",monospace;
  font-size:.72rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-dim);
}
/* padding + marges négatives : background-clip:text ne peint que la
   boîte de l'élément — sans ce débord, la pointe du dernier glyphe
   en ITALIQUE (em penché) sortait de la boîte et était coupée */
.accent{
  color:transparent;
  background:linear-gradient(180deg,var(--ember-soft),var(--ember-core));
  -webkit-background-clip:text;background-clip:text;
  padding:.1em .22em .1em .08em;
  margin:-.1em -.22em -.1em -.08em;
}

/* masque générique pour les révélations de lignes de titre.
   padding-top + marge négative : laisse la place aux accents (É)
   sans changer la position du texte ni l'interlignage serré. */
.line-mask{
  display:block;overflow:hidden;
  padding:.3em .35em .3em;
  margin:-.3em -.35em -.3em;
}
/* lettres découpées par main.js (révélation char par char) */
.char{display:inline-block;will-change:transform}

/* focus clavier : visible et cohérent avec la DA */
:focus-visible{
  outline:2px solid var(--ember-glow);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:"JetBrains Mono",monospace;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:.85em 1.5em;border-radius:2px;
  transition:transform .25s ease, box-shadow .3s ease, background .3s ease;
  will-change:transform;
}
.btn--ghost{border:1px solid rgba(255,255,255,.18);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ember-glow);color:#fff;box-shadow:0 0 24px rgba(255,59,31,.35)}
.btn--solid{
  background:linear-gradient(180deg,var(--ember-glow),var(--ember-core));
  color:#1a0a06;font-weight:600;
  box-shadow:0 0 0 1px rgba(255,138,92,.4), 0 8px 30px rgba(255,59,31,.45);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,138,92,.6), 0 14px 50px rgba(255,59,31,.65)}

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-faint);
}
.nav__logo{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Anton",sans-serif;font-size:1.35rem;letter-spacing:.04em;
}
.nav__spark{
  width:13px;height:13px;border-radius:2px;
  background:linear-gradient(135deg,var(--ember-glow),var(--ember-core));
  box-shadow:0 0 14px rgba(255,59,31,.8);transform:rotate(45deg);
}
.nav__links{display:flex;gap:1.8rem}
.nav__links a{
  font-family:"JetBrains Mono",monospace;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  transition:color .2s ease;position:relative;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--ember-core);transition:width .25s ease;box-shadow:0 0 8px var(--ember-core);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after{width:100%}
/* lien actif (scrollspy — classe posée par main.js) */
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{width:100%}
/* CTA du menu mobile : masqué sur desktop (le bouton nav__cta suffit) */
.nav__menu-cta{display:none !important;color:var(--ember-soft) !important}
.nav__burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav__burger span{width:24px;height:2px;background:var(--ink);display:block;transition:transform .25s ease}
/* état ouvert : les deux barres forment une croix */
.nav__burger.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* =================================================================
   LE PILIER CENTRAL FIXE — large colonne incandescente
   (mécanique validée : NE PAS déplacer ces détails dans le stack)
   ================================================================= */
.beam{
  position:fixed;inset:0;z-index:5;
  pointer-events:none;
}
.beam__stack{
  position:absolute;inset:0;
  transform-origin:top center;
  /* état de repos (sans JS) : pilier court sous le texte du héro */
  transform:translateY(70%) scaleY(.3);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
}
.beam__glow{
  position:absolute;left:50%;top:0;height:100%;
  width:var(--beam-glow-w);
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,59,31,.30) 20%,
    rgba(255,106,61,.75) 50%,
    rgba(255,59,31,.30) 80%,
    transparent 100%);
  filter:blur(14px);
  animation:emberPulse 3.4s ease-in-out infinite;
}
.beam__core{
  position:absolute;left:50%;top:0;height:100%;
  width:var(--beam-core-w);
  transform:translateX(-50%);
  /* bords plus francs : le pilier de la référence est presque net */
  background:linear-gradient(90deg,
    rgba(255,59,31,0) 0%,
    var(--ember-core) 8%,
    var(--ember-glow) 30%,
    var(--ember-hot) 50%,
    var(--ember-glow) 70%,
    var(--ember-core) 92%,
    rgba(255,59,31,0) 100%);
  box-shadow:var(--beam-shadow);
}
@keyframes emberPulse{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

/* ----- SURCOUCHE STABLE DU PILIER -----
   Le stack est étiré par scaleY au scroll : tout détail vertical
   placé dedans s'étire avec lui (le haut du trait « bouge »).
   Ces couches vivent donc à côté, en pixels écran : main.js cale
   leur translateY sur le sommet réel du cœur à chaque frame.
   Uniquement des transforms/opacités : aucun layout. */
.beam__overlay{
  position:absolute;left:50%;top:0;height:100%;
  width:var(--beam-core-w);
  transform:translateX(-50%);
  /* façonnage horizontal commun, suit le dégradé du cœur */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
}
/* pointe chaude : SUIT le sommet du pilier sans jamais s'étirer */
.beam__cap{
  position:absolute;left:0;top:0;width:100%;height:24vh;
  opacity:.7;
  background:linear-gradient(180deg,
    rgba(255,235,215,0) 0%, rgba(255,235,215,.6) 14%,
    rgba(255,196,150,.25) 45%, transparent 100%);
}
/* braise sombre du pied (le pilier sort de la masse nuageuse).
   scaleY ajusté par main.js quand le pilier est plus court que 20vh */
.beam__base{
  position:absolute;left:0;bottom:0;width:100%;height:20vh;
  transform-origin:center bottom;
  background:linear-gradient(0deg, rgba(96,8,0,.45), transparent 100%);
}
/* EFFET DE VITESSE : nappes de lumière douces qui parcourent le
   cœur dans le sens du scroll (opacité + défilement par main.js). */
.beam__flow{
  position:absolute;left:0;top:0;width:100%;height:160vh;
  background-repeat:repeat-y;
  background-size:100% 58vh;
  opacity:0;
  /* fondu relatif au sommet du pilier (l'élément suit le cœur) */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10vh,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 10vh,#000 100%);
}
/* descente : surchauffe blanc-chaud */
.beam__flow--down{
  background-image:linear-gradient(180deg,
    rgba(255,244,222,0) 0%, rgba(255,244,222,.5) 50%, rgba(255,244,222,0) 100%);
}
/* remontée : la même nappe, en braise profonde (palette ember) */
.beam__flow--up{
  background-image:linear-gradient(180deg,
    rgba(255,128,58,0) 0%, rgba(255,128,58,.55) 50%, rgba(255,128,58,0) 100%);
}

/* =================================================================
   CHAPITRES — cartons de séquence (SEQ.01 → 04)
   ================================================================= */
.chapter{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:clamp(3rem,7vh,5rem);
  max-width:min(440px, calc(50% - var(--beam-clearance)));
  position:relative;z-index:2;
}
.chapter__num{
  font-family:"JetBrains Mono",monospace;font-size:.95rem;
  color:var(--ember-soft);letter-spacing:.14em;
}
.chapter__line{
  width:54px;height:1px;flex:none;
  background:linear-gradient(90deg,var(--ember-core),transparent);
  box-shadow:0 0 10px rgba(255,59,31,.6);
  transform-origin:left center;
}
.chapter__name{
  font-family:"JetBrains Mono",monospace;font-size:.74rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;
}
.chapter--center{
  max-width:none;justify-content:center;margin-bottom:1.4rem;
}

/* NUMÉROS DE SÉQUENCE FANTÔMES — chiffres géants en contour qui
   flottent au bord du cadre (parallaxe légère via main.js).
   Toujours collés aux bords : jamais sur le trait central. */
.seq-ghost{
  position:absolute;top:0;z-index:0;pointer-events:none;
  font-family:"Anton",sans-serif;font-size:clamp(8rem,22vw,19rem);
  line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(255,106,61,.16);
  user-select:none;
}
.seq-ghost--left{left:clamp(-2rem,-1vw,0rem)}
.seq-ghost--right{right:clamp(-2rem,-1vw,0rem)}

/* =================================================================
   SECTIONS — gabarit
   ================================================================= */
section{position:relative;z-index:10}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:clamp(5.5rem,13vh,9rem) 1.2rem 3rem;
}
.hero__title{
  font-family:"Anton",sans-serif;
  font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,8.6vw,6.6rem);
  line-height:.86;letter-spacing:.005em;
}
.hero__title .line{display:block;color:var(--ink)}
.hero__title .line--accent{
  color:transparent;
  /* couche 1 : reflet lumineux qui balaie le mot (anim shine)
     couche 2 : dégradé incandescent permanent */
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,235,224,.95) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg,var(--ember-soft),var(--ember-core));
  background-size:260% 100%,100% 100%;
  background-position:230% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 28px rgba(255,59,31,.45));
  animation:shine 7s ease-in-out 3.2s infinite;
  /* étend la zone de fond pour que les accents (É, À…) soient peints */
  padding:.3em .2em;margin:-.3em -.2em;
}
/* balayage lumineux : passe une fois, puis pause jusqu'au cycle suivant */
@keyframes shine{
  0%{background-position:230% 0,0 0}
  14%{background-position:-90% 0,0 0}
  100%{background-position:-90% 0,0 0}
}

/* éruption de lumière à l'ignition du pilier (top fixé en JS) */
.hero__flare{
  position:absolute;left:50%;top:70%;
  width:min(420px,80vw);height:min(420px,80vw);
  margin:-210px 0 0 0;transform:translateX(-50%);
  background:radial-gradient(circle,
    rgba(255,217,194,.95) 0%,
    rgba(255,106,61,.5) 30%,
    rgba(255,59,31,.18) 50%,
    transparent 70%);
  mix-blend-mode:screen;
  opacity:0;pointer-events:none;
}
/* ---------- SEQ.01 : LE CONSTAT ---------- */
.constat{
  padding:16vh clamp(1.2rem,5vw,3rem) 6vh;
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;gap:7vh;
}
/* manifesto : les mots passent de l'ombre à la lumière au scroll
   (main.js découpe en .mword et scrubbe l'opacité) */
.manifesto{
  max-width:min(520px, calc(50% - var(--beam-clearance)));
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.12;letter-spacing:.01em;
}
.manifesto[data-side="left"]{align-self:flex-start}
.manifesto .mword{display:inline-block}
.manifesto .accent{filter:drop-shadow(0 0 20px rgba(255,59,31,.4))}

/* carte symptôme — POSÉE sur son socle de nuages (.perch dedans) :
   l'ombre portée tombe sur la masse, le liseré incandescent regarde
   toujours le pilier (côté intérieur). */
.pain{
  position:relative;
  max-width:460px;width:100%;
  padding:1.7rem 1.9rem;
  border:1px solid var(--line-faint);
  border-left:3px solid var(--ember-core);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(22,17,18,.82),rgba(15,12,13,.68));
  backdrop-filter:blur(3px);
  box-shadow:0 28px 54px rgba(0,0,0,.48);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.pain:hover{
  border-color:rgba(255,106,61,.4);
  border-left-color:var(--ember-core);
  box-shadow:0 32px 60px rgba(0,0,0,.5), 0 0 30px rgba(255,59,31,.18);
  transform:translateY(-3px);
}
.strate--flip .pain{
  border-left:1px solid var(--line-faint);
  border-right:3px solid var(--ember-core);
}
.strate--flip .pain:hover{border-right-color:var(--ember-core)}
.pain__label{
  display:block;margin-bottom:.7rem;
  font-family:"JetBrains Mono",monospace;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ember-soft);
}
.pain__title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,2.8vw,1.9rem);letter-spacing:.01em;
  margin-bottom:.5rem;
}
.pain__text{color:var(--ink-dim);font-size:.97rem}

/* punchlines : pivot du constat, conclusion de la méthode */
.punchline{
  max-width:min(480px, calc(50% - var(--beam-clearance)));
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.05;letter-spacing:.01em;
  margin-top:3vh;
}
.punchline[data-side="right"]{align-self:flex-end;text-align:right;margin-left:auto}
.punchline .accent{filter:drop-shadow(0 0 20px rgba(255,59,31,.4))}
.services .punchline{margin-top:6vh}

/* ---------- SEQ.02 : LA MÉTHODE ---------- */
.services{
  padding:10vh clamp(1.2rem,5vw,3rem) 14vh;max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;gap:4vh;
}
/* étape de méthode — même logique : une carte de verre POSÉE sur
   son socle de nuages, liseré chaud en tête (comme un clip nommé
   sur la timeline) */
.service{
  position:relative;
  max-width:460px;width:100%;
  padding:2rem 1.9rem 1.9rem;
  border:1px solid var(--line-faint);
  border-top:2px solid rgba(255,106,61,.55);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(22,17,18,.82),rgba(15,12,13,.68));
  backdrop-filter:blur(3px);
  box-shadow:0 28px 54px rgba(0,0,0,.48);
  text-align:left;
}
/* numéro géant en contour derrière chaque étape — toujours côté
   extérieur (jamais vers le pilier) */
.service__ghost{
  position:absolute;top:.4rem;right:0;z-index:0;pointer-events:none;
  font-family:"Anton",sans-serif;font-size:clamp(4.5rem,9vw,8rem);
  line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(255,106,61,.22);
  user-select:none;
}
.strate--flip .service__ghost{right:auto;left:0}
/* timecode / métadonnées de l'étape, comme sur une timeline */
.service__chip{
  position:relative;z-index:1;
  display:inline-block;margin-bottom:.8rem;
  font-family:"JetBrains Mono",monospace;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ember-soft);
  border:1px solid rgba(255,106,61,.35);
  border-radius:999px;padding:.45em 1.1em;
  background:rgba(255,59,31,.07);
}
.service__title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:.95;margin:.4rem 0 .8rem;
  letter-spacing:.01em;
  position:relative;display:inline-block;z-index:1;
}
/* soulignement lumineux au survol */
.service__title::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;
  background:linear-gradient(90deg,var(--ember-core),transparent);
  box-shadow:0 0 12px rgba(255,59,31,.7);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s ease;
}
.service:hover .service__title::after{transform:scaleX(1)}
.service__text{color:var(--ink-dim);font-size:1rem;position:relative;z-index:1}

/* =================================================================
   STRATES — la descente dans les nuages (SEQ.01 + SEQ.02).
   Chaque idée est posée sur son banc de nuages : visuel illustratif
   d'un côté du pilier, carte texte de l'autre. La colonne centrale
   de la grille = le couloir du trait, toujours vide.
   ================================================================= */
.strate{
  position:relative;
  display:grid;
  grid-template-columns:1fr calc(var(--beam-clearance)*2) 1fr;
  align-items:center;
  min-height:44vh;
  padding:4vh 0;
}
.strate .viz{grid-column:1;grid-row:1;justify-self:center}
.strate .pain,
.strate .service{grid-column:3;grid-row:1;justify-self:start}
.strate--flip .viz{grid-column:3}
.strate--flip .pain,
.strate--flip .service{grid-column:1;justify-self:end}

/* ----- le banc de nuages porteur -----
   2 nappes (texture du ciel, déjà préchargée) aux masques ORGANIQUES
   (blobs radiaux, union) : aucun bord rectiligne possible. La dérive
   continue est sur la nappe (.puff), la parallaxe GSAP sur le banc
   (.strate__bank) : jamais les deux transforms sur le même élément. */
.strate__bank{
  position:absolute;left:-4%;right:-4%;bottom:-8vh;height:120%;
  z-index:0;pointer-events:none;
}
.puff{
  position:absolute;
  background-image:url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=70&w=1600&auto=format&fit=crop");
  background-size:cover;
  filter:grayscale(.35) brightness(.5) contrast(1.25) sepia(.15);
}
.puff--a{
  left:2%;right:24%;top:32%;bottom:0;
  background-position:30% 64%;
  opacity:.46;
  -webkit-mask-image:
    radial-gradient(36% 52% at 26% 62%, #000 28%, transparent 72%),
    radial-gradient(30% 46% at 54% 52%, #000 26%, transparent 70%),
    radial-gradient(26% 40% at 78% 66%, #000 26%, transparent 68%);
          mask-image:
    radial-gradient(36% 52% at 26% 62%, #000 28%, transparent 72%),
    radial-gradient(30% 46% at 54% 52%, #000 26%, transparent 70%),
    radial-gradient(26% 40% at 78% 66%, #000 26%, transparent 68%);
  animation:puffDrift 42s ease-in-out infinite alternate;
}
.puff--b{
  left:38%;right:0;top:10%;bottom:26%;
  background-position:68% 30%;
  opacity:.32;
  -webkit-mask-image:
    radial-gradient(34% 50% at 64% 58%, #000 26%, transparent 70%),
    radial-gradient(26% 42% at 30% 64%, #000 24%, transparent 66%);
          mask-image:
    radial-gradient(34% 50% at 64% 58%, #000 26%, transparent 70%),
    radial-gradient(26% 42% at 30% 64%, #000 24%, transparent 66%);
  animation:puffDrift 56s ease-in-out infinite alternate-reverse;
}
/* le banc du visuel se décale du côté du visuel */
.strate--flip .puff--a{left:24%;right:2%;background-position:62% 60%}
.strate--flip .puff--b{left:0;right:38%;background-position:24% 34%}
/* dérive douce mais VISIBLE : drift horizontal + léger ballottement
   vertical (le point 50% casse la ligne droite — trajet organique) */
@keyframes puffDrift{
  from{transform:translate(-2.6%,.9%)}
  50%{transform:translate(.3%,-1.1%)}
  to{transform:translate(2.6%,.7%)}
}
/* on descend : les bancs de la méthode sont plus denses, plus sombres */
.services .puff--a{opacity:.58;filter:grayscale(.35) brightness(.44) contrast(1.3) sepia(.15)}
.services .puff--b{opacity:.42;filter:grayscale(.35) brightness(.44) contrast(1.3) sepia(.15)}

/* NUAGES ÉPARS — masses libres semées à des positions irrégulières
   (la mer de nuages ne doit pas être alignée sur les seuls blocs).
   Toujours à ≥1% du bord de la section : jamais coupés par l'écran.
   Les delays négatifs désynchronisent les dérives (effet aléatoire). */
.stray{
  position:absolute;z-index:0;pointer-events:none;
  background-image:url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=70&w=1600&auto=format&fit=crop");
  background-size:cover;
  filter:grayscale(.35) brightness(.5) contrast(1.25) sepia(.15);
  -webkit-mask-image:
    radial-gradient(38% 48% at 38% 56%, #000 28%, transparent 70%),
    radial-gradient(30% 40% at 68% 62%, #000 24%, transparent 66%);
          mask-image:
    radial-gradient(38% 48% at 38% 56%, #000 28%, transparent 70%),
    radial-gradient(30% 40% at 68% 62%, #000 24%, transparent 66%);
}
.constat .stray--1{top:3%;right:4%;width:36%;height:250px;background-position:64% 38%;opacity:.30;animation:puffDrift 48s ease-in-out infinite alternate}
.constat .stray--2{top:44%;left:1%;width:30%;height:220px;background-position:20% 60%;opacity:.24;animation:puffDrift 58s ease-in-out -20s infinite alternate-reverse}
.constat .stray--3{bottom:4%;right:12%;width:26%;height:190px;background-position:80% 70%;opacity:.20;animation:puffDrift 44s ease-in-out -40s infinite alternate}
.services .stray--1{top:6%;left:3%;width:32%;height:230px;background-position:30% 30%;opacity:.30;animation:puffDrift 52s ease-in-out -10s infinite alternate-reverse}
.services .stray--2{top:46%;right:2%;width:34%;height:240px;background-position:74% 52%;opacity:.26;animation:puffDrift 46s ease-in-out -30s infinite alternate}
.services .stray--3{bottom:6%;left:10%;width:27%;height:200px;background-position:46% 76%;opacity:.22;animation:puffDrift 60s ease-in-out -55s infinite alternate-reverse}

/* =================================================================
   VISUELS ILLUSTRATIFS — de vrais artefacts d'interface (reel,
   dashboard de campagne, table de montage, encaissements) en
   panneaux de verre sombre + braise. CSS/SVG pur, palette ember.
   Le flottement vit sur .viz__float (enfant) : l'entrée GSAP
   anime .viz sans conflit de transform.
   ================================================================= */
.viz{position:relative;z-index:2;margin:0}
.viz__float{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  animation:vizFloat 7s ease-in-out infinite alternate;
}
@keyframes vizFloat{
  from{transform:translateY(-5px)}
  to{transform:translateY(6px)}
}
.viz__tag{
  display:block;margin-top:1.05rem;text-align:center;
  font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
}

/* ----- SOCLE DE NUAGES : le contenu REPOSE dessus -----
   back = la masse porteuse derrière/dessous · front = la lèvre qui
   passe DEVANT le bas du bloc (c'est ce chevauchement qui vend le
   « posé sur le nuage »). Le bloc porte une vraie ombre portée qui
   tombe sur la masse. Blobs organiques, jamais de bord droit. */
/* débord de base prudent (mobile / petits écrans) ; sur desktop le
   débord redevient GRAND mais uniquement côté pilier (intérieur) —
   côté bord d'écran il reste petit : c'est l'overflow-x du body qui
   tranchait net les nuages des blocs proches du bord de la fenêtre */
.perch{
  position:absolute;left:-6%;right:-6%;bottom:-4.4rem;height:11.5rem;
  pointer-events:none;
}
@media (min-width:881px){
  /* viz par défaut = colonne gauche → intérieur à droite */
  .strate:not(.strate--flip) .viz .perch{left:-6%;right:-28%}
  .strate:not(.strate--flip) .pain .perch,
  .strate:not(.strate--flip) .service .perch{left:-28%;right:-6%}
  /* strate inversée : miroir */
  .strate--flip .viz .perch{left:-28%;right:-6%}
  .strate--flip .pain .perch,
  .strate--flip .service .perch{left:-6%;right:-28%}
}
.perch i{
  position:absolute;
  background-image:url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=70&w=1600&auto=format&fit=crop");
  background-size:cover;
}
.perch__back{
  z-index:-1;inset:0;
  background-position:34% 60%;
  filter:grayscale(.3) brightness(.56) contrast(1.25) sepia(.16);
  opacity:.85;
  -webkit-mask-image:
    radial-gradient(42% 46% at 30% 64%, #000 32%, transparent 74%),
    radial-gradient(38% 42% at 62% 58%, #000 30%, transparent 72%),
    radial-gradient(30% 38% at 84% 70%, #000 26%, transparent 68%);
          mask-image:
    radial-gradient(42% 46% at 30% 64%, #000 32%, transparent 74%),
    radial-gradient(38% 42% at 62% 58%, #000 30%, transparent 72%),
    radial-gradient(30% 38% at 84% 70%, #000 26%, transparent 68%);
  animation:puffDrift 46s ease-in-out infinite alternate;
}
.perch__front{
  z-index:3;left:4%;right:8%;top:46%;bottom:-10%;
  background-position:66% 38%;
  filter:grayscale(.3) brightness(.44) contrast(1.3) sepia(.16);
  opacity:.92;
  -webkit-mask-image:
    radial-gradient(40% 52% at 26% 58%, #000 30%, transparent 72%),
    radial-gradient(36% 46% at 58% 66%, #000 28%, transparent 70%),
    radial-gradient(28% 40% at 86% 56%, #000 24%, transparent 66%);
          mask-image:
    radial-gradient(40% 52% at 26% 58%, #000 30%, transparent 72%),
    radial-gradient(36% 46% at 58% 66%, #000 28%, transparent 70%),
    radial-gradient(28% 40% at 86% 56%, #000 24%, transparent 66%);
  animation:puffDrift 38s ease-in-out infinite alternate-reverse;
}
/* les visuels PLONGENT dans la masse : la lèvre avant remonte
   nettement plus haut sur eux que sur les cartes texte — le bas du
   téléphone / du panneau disparaît DANS le nuage */
.viz .perch__front{
  left:-4%;right:-2%;top:22%;bottom:-16%;
  opacity:.97;
}
/* …mais leurs légendes restent lisibles, posées SUR la masse */
.viz__tag,.hookbar{position:relative;z-index:4}
.viz__tag{text-shadow:0 1px 10px rgba(0,0,0,.85)}

/* ----- PANNEAU DE VERRE (système commun des visuels) ----- */
.panel{
  position:relative;
  width:clamp(250px,24vw,330px);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(27,21,22,.88),rgba(15,11,12,.80));
  backdrop-filter:blur(6px);
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 50px rgba(255,59,31,.10),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.panel__head{
  display:flex;align-items:center;gap:.55em;
  padding:.7rem .9rem .62rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:"JetBrains Mono",monospace;font-size:.56rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;
}
.panel__dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--ember-core);
  box-shadow:0 0 8px rgba(255,59,31,.9);
  animation:recBlink 1.8s ease-in-out infinite;
}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.35}}
.panel__badge{
  margin-left:auto;
  font-size:.92em;letter-spacing:.14em;font-weight:500;
  color:var(--ember-hot);
  background:rgba(255,59,31,.12);
  border:1px solid rgba(255,106,61,.4);
  border-radius:999px;padding:.25em .75em;
}
.panel__badge--live{
  color:#fff;background:rgba(255,59,31,.28);
  animation:recBlink 1.6s ease-in-out infinite;
}

/* courbes SVG (lignes tracées par main.js à l'entrée à l'écran) */
.viz__svg{display:block;width:100%;height:auto;padding:.6rem .55rem .15rem}
.chart__grid{stroke:rgba(255,255,255,.13);stroke-width:1;stroke-dasharray:3 6}
.chart__area{opacity:.95}
.chart__lbl{
  font-family:"JetBrains Mono",monospace;font-size:9px;
  fill:rgba(154,146,141,.85);letter-spacing:.1em;
}
.draw{
  fill:none;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.draw--down{stroke:var(--ember-glow);filter:drop-shadow(0 0 7px rgba(255,59,31,.55))}
.draw--up{stroke:var(--ember-soft);filter:drop-shadow(0 0 7px rgba(255,59,31,.55))}

/* ----- téléphone générique (S01 + M01) ----- */
.phone{
  position:relative;
  width:clamp(170px,16.5vw,220px);aspect-ratio:9/18.5;
  padding:7px;
  border-radius:clamp(22px,2.2vw,30px);
  border:1px solid rgba(255,255,255,.16);
  background:#0d0b0c;
  box-shadow:
    0 30px 64px rgba(0,0,0,.58),
    0 0 46px rgba(255,59,31,.13),
    inset 0 0 0 3px #060505;
}
.phone__notch{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:34%;height:8px;border-radius:999px;background:#060505;z-index:3;
}
.phone__screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:clamp(16px,1.7vw,23px);
  background:linear-gradient(180deg,#1c1417 0%,#251319 55%,#150d0e 100%);
}
/* la « vidéo » : lueur ember + très léger balayage de scanlines */
.phone__scene{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    radial-gradient(70% 46% at 50% 38%, rgba(255,106,61,.32), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%);
}
/* rangée expéditeur, en haut : avatar + handle + Suivre */
.phone__user{
  position:absolute;left:8%;top:9.5%;z-index:2;
  display:flex;align-items:center;gap:.45em;
  font-family:"JetBrains Mono",monospace;font-size:.52rem;letter-spacing:.06em;
}
.phone__user i{
  width:15px;height:15px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--ember-soft),var(--ember-core));
  box-shadow:0 0 8px rgba(255,59,31,.5);
}
.phone__user b{color:var(--ink);font-weight:500}
.phone__user em{
  font-style:normal;color:var(--ember-soft);
  border:1px solid rgba(255,106,61,.5);border-radius:999px;
  padding:.12em .6em;font-size:.9em;
}
/* barres de légende, en bas à gauche */
.phone__cap{
  position:absolute;left:8%;right:32%;bottom:7.5%;z-index:2;
  display:flex;flex-direction:column;gap:5px;
}
.phone__cap i{height:4px;border-radius:2px;background:rgba(255,255,255,.26)}
.phone__cap i:last-child{width:62%;background:rgba(255,255,255,.14)}
/* rail d'actions à droite (cœur, commentaire, partage) */
.rail{
  position:absolute;right:7%;bottom:16%;z-index:2;
  display:flex;flex-direction:column;gap:.85rem;align-items:center;
}
.rail__item{display:flex;flex-direction:column;align-items:center;gap:.22rem}
.rail__item b{
  font-family:"JetBrains Mono",monospace;font-size:.5rem;
  font-weight:500;color:var(--ink-dim);letter-spacing:.04em;
}
.ico{display:block;width:13px;height:13px;position:relative}
.ico--heart{
  background:var(--ember-core);transform:rotate(45deg) scale(.82);
  filter:drop-shadow(0 0 5px rgba(255,59,31,.7));border-radius:1px;
}
.ico--heart::before,.ico--heart::after{
  content:"";position:absolute;width:13px;height:13px;
  border-radius:50%;background:inherit;
}
.ico--heart::before{left:-6.5px}
.ico--heart::after{top:-6.5px}
.ico--bubble{
  border:1.6px solid rgba(255,255,255,.6);
  border-radius:50% 50% 50% 6px;
}
.ico--share{
  width:0;height:0;background:none;
  border:6px solid transparent;
  border-left:11px solid rgba(255,255,255,.6);
  transform:rotate(-24deg);margin-left:4px;
}

/* les deux CHIPS de stats posées sur le cadre : tout le symptôme
   tient dans ce contraste — vues qui flambent / ventes à plat */
.chip{
  position:absolute;z-index:4;
  display:flex;flex-direction:column;gap:.12rem;
  padding:.6rem 1.5rem .55rem .85rem;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(27,21,22,.94),rgba(15,11,12,.88));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,59,31,.12);
}
.chip em{
  font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-dim);
}
.chip b{
  font-family:"Anton",sans-serif;font-weight:400;
  font-size:1.35rem;line-height:1;letter-spacing:.02em;color:#fff;
}
.chip--views{right:-3rem;top:15%}
.chip--views b{text-shadow:0 0 18px rgba(255,138,92,.65)}
.chip--views em{color:var(--ember-soft)}
.chip--sales{left:-3.2rem;bottom:19%}
.chip--sales b{color:var(--ink-dim);text-shadow:none}
/* tendances : flèche qui monte / ligne plate */
.trend{position:absolute;top:.6rem;right:.55rem}
.trend--up{
  width:9px;height:9px;
  border-top:2px solid var(--ember-soft);
  border-right:2px solid var(--ember-soft);
  transform:rotate(-45deg);
  filter:drop-shadow(0 0 5px rgba(255,106,61,.7));
  animation:trendUp 2.2s ease-out infinite;
}
@keyframes trendUp{
  0%{transform:rotate(-45deg) translate(0,0);opacity:1}
  70%{transform:rotate(-45deg) translate(3px,-3px);opacity:.2}
  100%{transform:rotate(-45deg) translate(0,0);opacity:1}
}
.trend--flat{
  top:1.05rem;width:12px;height:2px;border-radius:2px;
  background:rgba(154,146,141,.6);
}

/* cœurs qui flottent (l'attention monte… pas les ventes) */
.heart{
  position:absolute;right:15%;bottom:32%;z-index:2;
  width:11px;height:11px;background:var(--ember-core);
  transform:rotate(45deg);opacity:0;
  filter:drop-shadow(0 0 6px rgba(255,59,31,.7));
  animation:heartRise 3.6s ease-in infinite;
}
.heart::before,.heart::after{
  content:"";position:absolute;width:11px;height:11px;
  border-radius:50%;background:inherit;
}
.heart::before{left:-5.5px}
.heart::after{top:-5.5px}
.heart--2{right:22%;animation-delay:1.2s;scale:.78}
.heart--3{right:10%;animation-delay:2.4s;scale:.62}
@keyframes heartRise{
  0%{opacity:0;transform:rotate(45deg) translate(0,0) scale(.6)}
  12%{opacity:.95}
  60%{opacity:.55}
  100%{opacity:0;transform:rotate(45deg) translate(-44px,-44px) scale(1.05)}
}

/* cœurs qui flottent (l'attention monte… pas les ventes) */
.heart{
  position:absolute;right:15%;bottom:32%;
  width:11px;height:11px;background:var(--ember-core);
  transform:rotate(45deg);opacity:0;
  filter:drop-shadow(0 0 6px rgba(255,59,31,.7));
  animation:heartRise 3.6s ease-in infinite;
}
.heart::before,.heart::after{
  content:"";position:absolute;width:11px;height:11px;
  border-radius:50%;background:inherit;
}
.heart::before{left:-5.5px}
.heart::after{top:-5.5px}
.heart--2{right:22%;animation-delay:1.2s;scale:.78}
.heart--3{right:10%;animation-delay:2.4s;scale:.62}
@keyframes heartRise{
  0%{opacity:0;transform:rotate(45deg) translate(0,0) scale(.6)}
  12%{opacity:.95}
  60%{opacity:.55}
  100%{opacity:0;transform:rotate(45deg) translate(-44px,-44px) scale(1.05)}
}

/* ----- S02 : le feed défile en boucle, cinq comptes, LE MÊME reel.
   Le marqueur « toi ? » attend… ton reel ne se distingue jamais. ----- */
.feedscroll{
  position:relative;overflow:hidden;
  padding:2.35rem .9rem 1.05rem;
}
.feedscroll__track{
  display:flex;gap:10px;width:max-content;
  animation:feedSlide 17s linear infinite;
}
@keyframes feedSlide{
  to{transform:translateX(calc(-50% - 5px))}
}
.minireel{
  position:relative;width:clamp(48px,4.6vw,60px);aspect-ratio:9/16;flex:none;
  border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#241c1f,#161113);
  filter:grayscale(.92) brightness(.84);
}
/* le même « visage » générique sur chacun… */
.minireel::before{
  content:"";position:absolute;left:20%;right:20%;top:13%;height:32%;
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(62% 62% at 50% 36%, rgba(255,255,255,.32), rgba(255,255,255,.07) 72%);
}
/* …les mêmes barres de texte, le même play */
.minireel::after{
  content:"";position:absolute;left:14%;right:14%;bottom:9%;height:26%;
  background:
    linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)) 0 0/88% 3px no-repeat,
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) 0 8px/60% 3px no-repeat,
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) 0 16px/72% 3px no-repeat;
}
/* le marqueur qui cherche ton reel dans le défilement */
.youmark{
  position:absolute;top:.5rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:"JetBrains Mono",monospace;font-size:.56rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember-soft);
  background:rgba(10,10,12,.78);
  border:1px solid rgba(255,106,61,.5);
  border-radius:999px;padding:.32em .85em;
  box-shadow:0 0 16px rgba(255,59,31,.25);
}
.youmark::after{
  content:"";position:absolute;top:100%;left:50%;
  width:1px;height:.95rem;
  background:linear-gradient(180deg,rgba(255,106,61,.7),transparent);
}

/* ----- S03 : dashboard de campagne — budget consumé + braises ----- */
.burn{
  display:flex;align-items:center;gap:.7em;
  padding:.2rem .95rem .95rem;
  font-family:"JetBrains Mono",monospace;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
}
.burn em{font-style:normal}
.burn__state{color:var(--ember-soft)}
.burn__bar{
  position:relative;flex:1;height:5px;
  border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;
}
.burn__bar b{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--ember-core),var(--ember-glow));
  box-shadow:0 0 10px rgba(255,59,31,.7);
  transform-origin:left center;
  animation:burnDown 7s ease-in-out infinite alternate;
}
@keyframes burnDown{
  from{transform:scaleX(1)}
  to{transform:scaleX(.16)}
}
.spark{
  position:absolute;bottom:1rem;width:4px;height:4px;border-radius:50%;
  background:var(--ember-glow);box-shadow:0 0 8px rgba(255,59,31,.85);
  opacity:0;animation:sparkRise 3.4s ease-out infinite;
}
.spark--1{left:30%}
.spark--2{left:56%;animation-delay:1.7s}
.spark--3{left:78%;animation-delay:.9s;scale:.7}
@keyframes sparkRise{
  0%{opacity:0;transform:translate(0,0)}
  15%{opacity:.9}
  100%{opacity:0;transform:translate(9px,-64px)}
}

/* ----- M01 : le doomscroll s'arrête NET sur le reel hook.
   Le feed défile dans l'écran (4 cartes), fige sur la nôtre avec
   un flash, et la barre des 3 premières secondes se remplit. ----- */
.hookfeed{
  position:absolute;left:0;top:0;width:100%;height:400%;
  display:flex;flex-direction:column;
  animation:hookScroll 5.6s cubic-bezier(.65,0,.25,1) infinite;
}
.hf{
  position:relative;flex:1;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#1e1719,#141012);
}
/* contenus génériques des reels qu'on zappe */
.hf::before{
  content:"";position:absolute;left:24%;right:24%;top:18%;height:30%;
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(62% 62% at 50% 36%, rgba(255,255,255,.18), rgba(255,255,255,.04) 72%);
}
.hf::after{
  content:"";position:absolute;left:12%;right:30%;bottom:14%;height:18%;
  background:
    linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.20)) 0 0/85% 3px no-repeat,
    linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) 0 9px/58% 3px no-repeat;
}
/* LE NÔTRE : il crève l'écran */
.hf--ours{
  background:
    radial-gradient(85% 64% at 50% 42%, rgba(255,59,31,.46), rgba(22,12,11,.94) 82%);
}
.hf--ours::before,.hf--ours::after{content:none}
.hf--ours b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:.05em;
  color:transparent;
  background:linear-gradient(180deg,var(--ember-hot),var(--ember-core));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 18px rgba(255,59,31,.7));
}
/* défilement : zap, zap… ARRÊT sur le hook (longue tenue), reset */
@keyframes hookScroll{
  0%,8%{transform:translateY(0)}
  16%{transform:translateY(-25%)}
  24%{transform:translateY(-25%)}
  31%{transform:translateY(-50.6%)}
  34%{transform:translateY(-50%)}
  93%{transform:translateY(-50%)}
  100%{transform:translateY(0)}
}
/* flash à l'arrêt */
.hook__flash{
  position:absolute;inset:0;z-index:2;opacity:0;
  background:radial-gradient(70% 55% at 50% 45%, rgba(255,235,215,.55), transparent 72%);
  animation:hookFlash 5.6s linear infinite;
}
@keyframes hookFlash{
  0%,30%{opacity:0}
  33%{opacity:1}
  42%,100%{opacity:0}
}
/* le pouce : deux swipes, puis il S'ARRÊTE */
.touch{
  position:absolute;right:14%;bottom:22%;z-index:3;
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.12);
  opacity:0;
  animation:touchStop 5.6s ease-in-out infinite;
}
@keyframes touchStop{
  0%,6%{transform:translateY(0);opacity:0}
  9%{opacity:.9}
  16%{transform:translateY(-34px)}
  24%{transform:translateY(-34px);opacity:.9}
  31%{transform:translateY(-62px)}
  36%{transform:translateY(-56px)}     /* …stoppé net par le hook */
  60%{transform:translateY(-56px);opacity:.85}
  72%,100%{transform:translateY(-56px);opacity:0}
}
/* la barre des 3 secondes, sous le téléphone */
.hookbar{
  display:flex;align-items:center;gap:.65em;
  width:min(100%,260px);margin-top:1rem;
  font-family:"JetBrains Mono",monospace;font-size:.56rem;
  letter-spacing:.12em;color:var(--ink-dim);
}
.hookbar em{font-style:normal}
.hookbar__track{
  flex:1;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.hookbar__track b{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--ember-core),var(--ember-hot));
  box-shadow:0 0 10px rgba(255,59,31,.8);
  transform:scaleX(0);transform-origin:left center;
  animation:hookFill 5.6s linear infinite;
}
/* se remplit pendant la tenue du hook (3 s ≈ 34% → 88%) */
@keyframes hookFill{
  0%,34%{transform:scaleX(0)}
  88%{transform:scaleX(1)}
  94%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}

/* ----- M02 : la VRAIE table de montage — piste vidéo en clips,
   piste audio en waveform, tête de lecture, cuts qui flashent ----- */
.nle{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:7px 9px;
  padding:.85rem .95rem 1rem;
}
.nle__rail{
  align-self:center;
  font-family:"JetBrains Mono",monospace;font-size:.5rem;
  letter-spacing:.1em;color:var(--ink-faint);
}
.nle__track{position:relative;display:flex;gap:3px;height:27px}
.nle__track--a{height:20px}
.clip{
  flex:var(--g,2);border-radius:4px;
  background:linear-gradient(180deg,rgba(255,106,61,.50),rgba(255,59,31,.20));
  border:1px solid rgba(255,138,92,.35);
  animation:clipFlash 3.4s linear infinite;
}
.clip--b{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.14);
}
.clip--c{
  background:linear-gradient(180deg,rgba(255,138,92,.34),rgba(96,8,0,.30));
  border-color:rgba(255,106,61,.25);
}
.clip:nth-child(1){animation-delay:.15s}
.clip:nth-child(2){animation-delay:.75s}
.clip:nth-child(3){animation-delay:1.30s}
.clip:nth-child(4){animation-delay:1.95s}
.clip:nth-child(5){animation-delay:2.45s}
.clip:nth-child(6){animation-delay:2.95s}
@keyframes clipFlash{
  0%,3%{filter:brightness(1.85)}
  10%,100%{filter:brightness(1)}
}
.wave{flex:1;display:flex;align-items:flex-end;gap:3px}
.wave i{
  flex:1;height:36%;border-radius:1.5px;
  background:linear-gradient(180deg,rgba(255,138,92,.55),rgba(255,59,31,.22));
  transform-origin:center bottom;
  animation:waveEq 1.7s ease-in-out infinite alternate;
}
.wave i:nth-child(2n){height:62%;animation-delay:.25s}
.wave i:nth-child(3n){height:48%;animation-delay:.5s}
.wave i:nth-child(4n){height:74%;animation-delay:.7s}
.wave i:nth-child(5n){height:55%;animation-delay:.95s}
@keyframes waveEq{
  from{transform:scaleY(.72)}
  to{transform:scaleY(1.08)}
}
.nle__head{
  position:absolute;top:6px;bottom:8px;left:16%;width:2px;z-index:2;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.85);
  animation:headSweep 3.4s linear infinite;
}
@keyframes headSweep{
  from{left:15%}
  to{left:97%}
}

/* ----- M03 : les encaissements tombent en direct ----- */
.toast{
  display:flex;align-items:center;gap:.65rem;
  margin:.5rem .85rem 0;padding:.55rem .7rem;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  animation:toastPing 6s ease-in-out infinite;
}
.toast--2{animation-delay:3s}
.toast i{
  width:27px;height:27px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:"Anton",sans-serif;font-size:.9rem;color:#1a0a06;
  background:linear-gradient(135deg,var(--ember-hot),var(--ember-core));
  box-shadow:0 0 14px rgba(255,59,31,.5);
}
.toast__txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.toast__txt b{font-size:.78rem;font-weight:700;color:var(--ink)}
.toast__txt em{
  font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.toast__amt{
  font-family:"Anton",sans-serif;font-weight:400;font-size:1.05rem;
  color:var(--ember-soft);text-shadow:0 0 14px rgba(255,106,61,.5);
}
/* la vente « tombe » : petit saut + liseré ember qui s'allume */
@keyframes toastPing{
  0%,12%,100%{transform:translateY(0);border-color:rgba(255,255,255,.09);box-shadow:none}
  4%{transform:translateY(-3px);border-color:rgba(255,106,61,.6);box-shadow:0 0 24px rgba(255,59,31,.28)}
}
.sales__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem .95rem .85rem;
}
.sales__total em{
  font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);
}
.sales__total b{
  font-family:"Anton",sans-serif;font-weight:400;
  font-size:1.5rem;line-height:1;color:#fff;
  text-shadow:0 0 18px rgba(255,138,92,.55);
}

/* =================================================================
   LA PLONGÉE — la masse nuageuse se referme avant la révélation.
   3 nappes aux masques organiques (blobs) : aucun bord droit ne peut
   apparaître (c'est ce qui créait le « reflet » de l'ancien banc).
   z 20 > pilier (z 5) : le trait passe DERRIÈRE et s'y éteint
   (fondu piloté par main.js), puis tout fond vers le noir du stage.
   ================================================================= */
.plunge{
  position:relative;z-index:20;height:90vh;
  pointer-events:none;
}
.plunge__layer{
  position:absolute;
  background-image:url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=70&w=1600&auto=format&fit=crop");
  background-size:cover;
  filter:grayscale(.3) brightness(.5) contrast(1.3) sepia(.15);
}
.plunge__layer--a{
  left:-6%;right:26%;top:-4vh;height:54vh;
  background-position:24% 58%;
  opacity:.55;
  -webkit-mask-image:
    radial-gradient(42% 54% at 30% 64%, #000 30%, transparent 74%),
    radial-gradient(34% 48% at 66% 76%, #000 26%, transparent 70%),
    radial-gradient(30% 44% at 6% 86%, #000 28%, transparent 68%);
          mask-image:
    radial-gradient(42% 54% at 30% 64%, #000 30%, transparent 74%),
    radial-gradient(34% 48% at 66% 76%, #000 26%, transparent 70%),
    radial-gradient(30% 44% at 6% 86%, #000 28%, transparent 68%);
  animation:puffDrift 50s ease-in-out infinite alternate;
}
.plunge__layer--b{
  left:30%;right:-6%;top:6vh;height:56vh;
  background-position:72% 34%;
  opacity:.5;
  -webkit-mask-image:
    radial-gradient(40% 52% at 64% 58%, #000 28%, transparent 72%),
    radial-gradient(32% 46% at 92% 74%, #000 26%, transparent 68%),
    radial-gradient(28% 40% at 36% 72%, #000 24%, transparent 66%);
          mask-image:
    radial-gradient(40% 52% at 64% 58%, #000 28%, transparent 72%),
    radial-gradient(32% 46% at 92% 74%, #000 26%, transparent 68%),
    radial-gradient(28% 40% at 36% 72%, #000 24%, transparent 66%);
  animation:puffDrift 60s ease-in-out infinite alternate-reverse;
}
.plunge__layer--c{
  left:-4%;right:-4%;top:22vh;height:62vh;
  background-position:center 46%;
  opacity:.62;
  filter:grayscale(.3) brightness(.42) contrast(1.32) sepia(.15);
  -webkit-mask-image:
    radial-gradient(46% 50% at 32% 52%, #000 32%, transparent 76%),
    radial-gradient(44% 48% at 70% 58%, #000 30%, transparent 74%),
    radial-gradient(60% 44% at 50% 84%, #000 36%, transparent 78%);
          mask-image:
    radial-gradient(46% 50% at 32% 52%, #000 32%, transparent 76%),
    radial-gradient(44% 48% at 70% 58%, #000 30%, transparent 74%),
    radial-gradient(60% 44% at 50% 84%, #000 36%, transparent 78%);
  animation:puffDrift 55s ease-in-out infinite alternate;
}
/* halo chaud à l'entrée du trait dans la masse */
.plunge__glow{
  position:absolute;left:50%;top:10vh;
  width:min(46vw,560px);height:36vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,106,61,.26), transparent 72%);
}
/* fondu final vers le noir du stage (#0b0a0c) : opaque bien avant le
   bas — aucune zone où le trait pourrait transparaître */
.plunge::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    transparent 0%, rgba(11,10,12,.45) 30%,
    rgba(11,10,12,.92) 55%, #0b0a0c 68%, #0b0a0c 100%);
}

/* =================================================================
   SEQ.03 : RÉVÉLATION — rideau bordé du trait incandescent
   ================================================================= */
.reveal{height:100vh;overflow:hidden}
.reveal__stage{
  position:relative;height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#0b0a0c,var(--bg-2));
}
.reveal__vbeam{
  position:absolute;left:50%;top:0;height:100%;
  width:var(--beam-core-w);   /* même largeur que le pilier fixe */
  transform:translateX(-50%);
  transform-origin:center;
  background:linear-gradient(90deg,
    rgba(255,59,31,0) 0%, var(--ember-core) 16%, var(--ember-glow) 38%,
    var(--ember-hot) 50%, var(--ember-glow) 62%, var(--ember-core) 84%,
    rgba(255,59,31,0) 100%);
  box-shadow:var(--beam-shadow);z-index:6;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.reveal__vbeam::before{
  content:"";position:absolute;left:50%;top:0;height:100%;
  width:var(--beam-glow-w);transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,106,61,.55) 50%,transparent);
  filter:blur(12px);
}
.reveal__hbeam{
  position:absolute;left:0;top:50%;
  width:100%;height:16px;margin-top:-8px;
  transform:scaleX(0);transform-origin:center;
  background:linear-gradient(180deg,
    rgba(255,59,31,0) 0%, var(--ember-core) 22%, var(--ember-hot) 50%,
    var(--ember-core) 78%, rgba(255,59,31,0) 100%);
  box-shadow:var(--beam-shadow);z-index:7;
}
.reveal__hbeam::before{
  content:"";position:absolute;left:0;top:50%;width:100%;height:70px;
  transform:translateY(-50%);
  background:linear-gradient(180deg,transparent,rgba(255,106,61,.5) 50%,transparent);
  filter:blur(14px);
}
.curtain{
  position:absolute;left:0;width:100%;height:50%;z-index:5;
}
.curtain--top{top:0;
  background:linear-gradient(180deg,var(--bg-0) 55%,var(--bg-1));}
.curtain--bottom{bottom:0;
  background:linear-gradient(0deg,var(--bg-2) 40%,var(--bg-1));}
/* liseré incandescent attaché au bord de chaque rideau */
.curtain__edge{
  position:absolute;left:0;width:100%;height:16px;
  background:linear-gradient(180deg,
    rgba(255,59,31,0) 0%, var(--ember-core) 22%, var(--ember-hot) 50%,
    var(--ember-core) 78%, rgba(255,59,31,0) 100%);
  box-shadow:var(--beam-shadow);
  opacity:0;visibility:hidden;   /* révélé au moment de l'ouverture (main.js) */
}
.curtain--top .curtain__edge{bottom:-8px}
.curtain--bottom .curtain__edge{top:-8px}

/* volutes résiduelles de la plongée : balayent l'écran au tout début
   du noir (scrubées par la timeline du rideau), puis disparaissent */
.reveal__wisp{
  position:absolute;z-index:6;width:68vw;height:46vh;
  background-image:url("https://images.unsplash.com/photo-1534088568595-a066f410bcda?q=70&w=1600&auto=format&fit=crop");
  background-size:cover;
  filter:grayscale(.4) brightness(.4) contrast(1.3) sepia(.12);
  opacity:0;visibility:hidden;   /* pilotées par main.js */
  pointer-events:none;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 26%, transparent 72%);
          mask-image:radial-gradient(50% 50% at 50% 50%, #000 26%, transparent 72%);
}
.reveal__wisp--l{left:-16vw;top:34%;background-position:26% 42%}
.reveal__wisp--r{right:-16vw;top:4%;background-position:72% 62%}

/* interlude dans le noir : cartons scrubbés au swipe (main.js),
   au-dessus des rideaux fermés (z 8 > 5), tous effacés avant
   l'ouverture du trait horizontal */
.reveal__interlude{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.reveal__line{
  position:absolute;
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1;letter-spacing:.01em;
  text-align:center;padding:0 1.2rem;
  opacity:0;visibility:hidden;   /* révélées par la timeline (main.js) */
}
.reveal__line .accent{filter:drop-shadow(0 0 26px rgba(255,59,31,.45))}

.reveal__content{
  position:relative;z-index:4;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem);
  text-align:center;opacity:0;
}
.reveal__title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem);line-height:.95;margin-bottom:2.5rem;letter-spacing:.01em;
}

/* ---------- GRILLE RÉALISATIONS (vignettes 9:16) ---------- */
.grid{
  display:grid;gap:clamp(.6rem,1.4vw,1.1rem);
  grid-template-columns:repeat(6,1fr);
  /* perspective commune pour le tilt 3D des vignettes (main.js) */
  perspective:900px;
}
/* chaque vignette = un ÉCRAN DE TÉLÉPHONE allumé dans le noir de la
   salle de montage : cadre arrondi, encoche, lueur d'écran ember */
.tile{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:clamp(14px,1.3vw,20px);
  display:flex;align-items:flex-end;
  background:#100d0d;             /* visible pendant le chargement de l'image */
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 22px 50px rgba(0,0,0,.5),
    0 0 38px rgba(255,59,31,.10),
    inset 0 0 0 2px #060505;
  transition:box-shadow .4s ease, border-color .4s ease;
  will-change:transform;
}
/* l'encoche du téléphone */
.tile::after{
  content:"";position:absolute;z-index:3;top:7px;left:50%;
  transform:translateX(-50%);
  width:30%;height:7px;border-radius:999px;
  background:rgba(5,4,5,.95);
  border:1px solid rgba(255,255,255,.07);
}
/* visuel de la vidéo (placeholder Unsplash → vraie vignette ensuite) */
.tile__media{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) contrast(1.08) brightness(.82);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
/* voile unificateur : teinte ember en bas + assombrissement
   progressif pour la lisibilité des légendes */
.tile::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(85% 55% at 50% 115%, rgba(255,59,31,.38), transparent 62%),
    linear-gradient(180deg, rgba(10,10,12,.18) 30%, rgba(10,10,12,.55) 70%, rgba(10,10,12,.92) 100%);
}
/* métadonnées de la vidéo : format en haut-gauche, durée en haut-droite */
.tile__tag{
  position:absolute;z-index:2;top:1.25rem;left:.7rem;
  font-family:"JetBrains Mono",monospace;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember-hot);
  border:1px solid rgba(255,106,61,.45);
  border-radius:999px;padding:.3em .8em;
  background:rgba(10,10,12,.5);backdrop-filter:blur(3px);
}
.tile__time{
  position:absolute;z-index:2;top:1.4rem;right:.8rem;
  font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.14em;color:var(--ink-dim);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.tile__caption{
  position:relative;z-index:2;padding:1rem;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.25rem);line-height:1;letter-spacing:.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.tile__play{
  position:absolute;z-index:2;top:50%;left:50%;
  width:54px;height:54px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.8);opacity:0;
  background:rgba(10,10,12,.45);backdrop-filter:blur(4px);
  border:1px solid rgba(255,138,92,.6);
  transition:opacity .35s ease, transform .35s ease;
}
.tile__play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.tile:hover,
.tile:focus-visible{
  border-color:rgba(255,59,31,.6);
  box-shadow:
    0 22px 56px rgba(0,0,0,.55),
    0 0 48px rgba(255,59,31,.42),
    inset 0 0 0 2px #060505;
}
.tile:hover .tile__play,
.tile:focus-visible .tile__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* zoom cinétique de l'image au survol */
.tile:hover .tile__media,
.tile:focus-visible .tile__media{transform:scale(1.07)}
/* lift au survol en CSS UNIQUEMENT quand le tilt 3D JS est inactif
   (pointeur grossier / no-anim) — sinon le JS pilote le transform */
html:not(.js-tilt) .tile{transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease}
html:not(.js-tilt) .tile:hover,
html:not(.js-tilt) .tile:focus-visible{transform:translateY(-6px) scale(1.02)}

/* =================================================================
   BANDEAU DÉFILANT (transition cinétique) — légèrement incliné
   dans l'autre sens (+), comme un chutier qui défile
   ================================================================= */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line-faint);
  border-bottom:1px solid var(--line-faint);
  padding:1.3rem 0;
  position:relative;z-index:10;
  background:rgba(10,10,12,.4);
  transform:rotate(1.4deg) scale(1.02);
  margin:1.5rem 0;
}
.marquee__track{
  display:flex;width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee__group{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem}
.marquee__item{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;
}
.marquee__item--ghost{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,106,61,.65);
}
.marquee__sep{color:var(--ember-core);font-size:1rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =================================================================
   SEQ.04 : ILS EN PARLENT (avis + métriques)
   ================================================================= */
.avis{padding:10vh clamp(1.2rem,5vw,3rem) 6vh;max-width:var(--maxw);margin:0 auto}
.avis .chapter{max-width:none}
.avis__grid{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
}
/* carte « message reçu » : la preuve sociale telle qu'elle arrive
   vraiment — un DM. En-tête expéditeur, bulle, réaction métrique. */
.quote{
  padding:1.5rem 1.4rem 1.3rem;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--line-faint);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.quote:hover{
  border-color:rgba(255,106,61,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 34px rgba(255,59,31,.15);
}
/* guillemet géant en filigrane */
.quote::before{
  content:"“";position:absolute;top:-.14em;right:.05em;z-index:0;
  font-family:"Anton",sans-serif;font-size:6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,106,61,.14);
  pointer-events:none;
}
/* cadence visuelle : les cartes 2 et 3 descendent en escalier */
.quote:nth-child(2){margin-top:2.4rem}
.quote:nth-child(3){margin-top:4.8rem}
/* en-tête : expéditeur + accusé de lecture */
.quote__head{
  display:flex;align-items:center;gap:.75rem;
  position:relative;z-index:1;
}
.quote__avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(255,106,61,.45);
  box-shadow:0 0 12px rgba(255,59,31,.25);
}
.quote__id{
  display:flex;flex-direction:column;gap:.18rem;
  flex:1;min-width:0;line-height:1.2;
}
.quote__name{
  font-family:"JetBrains Mono",monospace;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.quote__id em{
  font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.quote__check{
  font-family:"JetBrains Mono",monospace;font-size:.72rem;
  letter-spacing:-.08em;color:var(--ember-soft);flex:none;
}
/* la bulle du message */
.quote__bubble{
  position:relative;z-index:1;flex:1;
  font-size:.99rem;color:var(--ink);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-faint);
  border-radius:14px 14px 14px 4px;
  padding:.95rem 1.05rem;
}
/* la réaction : le résultat, épinglé sous le message */
.quote__metric{
  align-self:flex-start;position:relative;z-index:1;
  font-family:"JetBrains Mono",monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember-hot);
  background:rgba(255,59,31,.12);
  border:1px solid rgba(255,106,61,.35);
  border-radius:999px;padding:.4em 1em .4em .9em;
}
.quote__metric::before{
  content:"♥";margin-right:.55em;
  color:var(--ember-core);
}

/* =================================================================
   SÉQUENCE FINALE — CTA (conversion)
   ================================================================= */
.cta{
  text-align:center;padding:9vh clamp(1.2rem,5vw,3rem) 14vh;
  position:relative;overflow:hidden;
}
/* halo d'énergie derrière le bloc */
.cta::before{
  content:"";position:absolute;left:50%;top:55%;z-index:0;
  width:min(900px,120vw);height:min(620px,90vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,59,31,.16),transparent 75%);
  pointer-events:none;
}
/* ré-embrasement : braises qui montent doucement derrière le bloc */
.cta__embers{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.cta__embers i{
  position:absolute;bottom:-3vh;
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,var(--ember-hot) 0%,var(--ember-core) 70%);
  box-shadow:0 0 10px rgba(255,59,31,.8);
  opacity:0;
  animation:emberFloat 9s linear infinite;
}
.cta__embers i:nth-child(1){left:12%;--sway:34px;animation-duration:8.5s;animation-delay:0s}
.cta__embers i:nth-child(2){left:24%;--sway:-26px;animation-duration:10.5s;animation-delay:2.1s;scale:.7}
.cta__embers i:nth-child(3){left:35%;--sway:22px;animation-duration:9.5s;animation-delay:4.4s}
.cta__embers i:nth-child(4){left:44%;--sway:-30px;animation-duration:8s;animation-delay:1.2s;scale:.8}
.cta__embers i:nth-child(5){left:53%;--sway:28px;animation-duration:11s;animation-delay:3.6s;scale:.6}
.cta__embers i:nth-child(6){left:63%;--sway:-22px;animation-duration:9s;animation-delay:.7s}
.cta__embers i:nth-child(7){left:74%;--sway:32px;animation-duration:10s;animation-delay:5.2s;scale:.75}
.cta__embers i:nth-child(8){left:84%;--sway:-28px;animation-duration:8.8s;animation-delay:2.9s}
.cta__embers i:nth-child(9){left:92%;--sway:20px;animation-duration:11.5s;animation-delay:6.1s;scale:.65}
@keyframes emberFloat{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  8%{opacity:.85}
  60%{opacity:.45}
  100%{opacity:0;transform:translate(var(--sway,28px),-74vh) scale(.45)}
}
.cta__inner{position:relative;z-index:1}
.cta__kicker{color:var(--ember-soft)}
.cta__title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.8rem,9.5vw,7.4rem);line-height:.92;margin:1.4rem 0;letter-spacing:.01em;
}
.cta-line{display:block}
.cta-line--accent{
  color:transparent;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,235,224,.95) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg,var(--ember-soft),var(--ember-core));
  background-size:260% 100%,100% 100%;
  background-position:230% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(255,59,31,.45));
  animation:shine 8s ease-in-out 2s infinite;
  /* étend la zone de fond pour que les accents (É, À…) soient peints */
  padding:.3em .2em;margin:-.3em -.2em;
}
.cta__sub{max-width:46ch;margin:0 auto 2rem;color:var(--ink-dim)}
.cta__points{
  list-style:none;display:flex;justify-content:center;gap:2.2rem;
  flex-wrap:wrap;margin-bottom:2.6rem;
}
.cta__points li{
  font-family:"JetBrains Mono",monospace;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:.6em;
}
.cta__points li::before{
  content:"";width:8px;height:8px;flex:none;
  background:linear-gradient(135deg,var(--ember-hot),var(--ember-core));
  transform:rotate(45deg);border-radius:1px;
  box-shadow:0 0 10px rgba(255,59,31,.8);
}
/* la personne derrière le service */
.cta__host{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin-bottom:2rem;
}
.cta__host-pic{
  width:46px;height:46px;border-radius:50%;flex:none;
  object-fit:cover;
  border:2px solid var(--ember-core);
  box-shadow:0 0 18px rgba(255,59,31,.55);
}
.cta__host-id{display:flex;flex-direction:column;text-align:left;line-height:1.3}
.cta__host-id strong{font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem}
.cta__host-id em{
  font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
}

.cta__btn{
  font-size:.9rem;padding:1.15em 2.4em;
  position:relative;
}
/* onde lumineuse qui pulse autour du bouton */
.cta__btn::after{
  content:"";position:absolute;inset:-4px;border-radius:4px;
  border:1px solid rgba(255,106,61,.75);
  animation:ring 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes ring{
  0%{transform:scale(1);opacity:.9}
  70%,100%{transform:scale(1.15,1.6);opacity:0}
}
.cta__note{
  margin-top:1.6rem;
  font-family:"JetBrains Mono",monospace;font-size:.74rem;
  letter-spacing:.1em;color:var(--ink-dim);
}
.cta__note a{color:var(--ember-soft)}
.cta__note a:hover{color:var(--ember-hot)}

/* =================================================================
   FOOTER — générique de fin : wordmark géant qui s'embrase
   ================================================================= */
.footer{
  border-top:1px solid var(--line-faint);
  position:relative;z-index:10;
  padding:clamp(2rem,6vh,4rem) clamp(1.2rem,5vw,3rem) 2.6rem;
  overflow:hidden;
}
/* deux copies superposées : contour + remplissage embrasé révélé
   par clip-path au scroll (main.js) */
.wordmark{
  position:relative;
  display:flex;justify-content:center;
  margin-bottom:clamp(2rem,6vh,4rem);
  user-select:none;line-height:.82;
}
.wordmark__stroke,
.wordmark__fill{
  font-family:"Anton",sans-serif;font-weight:400;
  font-size:clamp(4.5rem,19vw,17rem);
  letter-spacing:.02em;
  white-space:nowrap;
}
.wordmark__stroke{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,106,61,.28);
}
.wordmark__fill{
  position:absolute;inset:0;
  display:flex;justify-content:center;
  color:transparent;
  background:linear-gradient(180deg,var(--ember-soft),var(--ember-core));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 36px rgba(255,59,31,.4));
  clip-path:inset(0 100% 0 0);   /* révélé au scroll par main.js */
}
.footer__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
.footer__links{display:flex;gap:1.6rem}
.footer__links a{
  font-family:"JetBrains Mono",monospace;font-size:.76rem;
  letter-spacing:.12em;color:var(--ink-dim);transition:color .2s ease;
}
.footer__links a:hover{color:var(--ember-soft)}
.footer__mentions{font-size:.72rem;color:var(--ink-faint);font-family:"JetBrains Mono",monospace}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:880px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__links.is-open{
    display:flex;flex-direction:column;gap:1.4rem;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(10,10,12,.96);backdrop-filter:blur(14px);
    padding:1.8rem;border-bottom:1px solid var(--line-faint);
  }
  /* dans le menu mobile ouvert, le CTA de conversion est visible */
  .nav__links.is-open .nav__menu-cta{display:block !important}
  /* grain statique sur mobile (économie GPU) */
  .noise{animation:none}
  .grid{grid-template-columns:repeat(3,1fr)}
  .avis__grid{grid-template-columns:1fr}
  .quote:nth-child(2),.quote:nth-child(3){margin-top:0}

  /* ----- MOBILE : le fil rouge devient un RAIL à gauche -----
     (timeline verticale : le pilier longe le bord gauche, les
     cartes prennent toute la largeur — aucun texte ne le croise) */
  :root{
    --beam-core-w:14px;
    --beam-glow-w:64px;
    --beam-clearance:0px;
  }
  .beam{opacity:.9}
  .beam__glow,.beam__core,.beam__overlay{left:28px}
  .hero__flare{left:28px}
  /* ciel statique + premier plan adouci (économie GPU, rail lisible) */
  .scene-clouds{animation:none}
  .scene-clouds--front{opacity:.38}
  /* le halo d'entrée de la barre suit le rail (left:28px) */
  .plunge__glow{
    left:35px;width:min(70vw,360px);
    transform:translate(-50%,-50%);
  }
  .reveal__vbeam{left:28px}
  .reveal__hbeam{transform-origin:28px center}

  /* sections rythmées par le rail : contenu décalé à droite du rail */
  .constat,.services{padding-left:3.6rem}
  .chapter,.pain,.service,.punchline,.manifesto{max-width:none}

  /* les numéros fantômes passent au bord droit, discrets */
  .seq-ghost{font-size:clamp(6rem,26vw,9rem);opacity:.7}
  .seq-ghost--left{left:auto;right:-1rem}

  /* ----- STRATES en colonne : le visuel au-dessus de sa carte -----
     (plus de grille : tout longe le rail, le banc reste derrière) */
  .strate{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:1.8rem;min-height:0;padding:3.5vh 0;
  }
  .strate .viz,
  .strate--flip .viz{align-self:center;max-width:100%}
  .strate__bank{left:-3.6rem;right:-1.2rem;bottom:-4vh}
  /* bancs et socles allégés : dérive coupée, opacité réduite (GPU) ;
     nuages épars retirés sur mobile */
  .puff,.perch i{animation:none}
  .puff--a{opacity:.34}
  .puff--b{opacity:.22}
  .stray{display:none}
  .perch{left:-4%;right:-4%;bottom:-3.6rem;height:8.6rem}
  /* panneaux et chips dans la largeur de l'écran */
  .panel{width:min(84vw,330px)}
  .chip--views{right:-.9rem}
  .chip--sales{left:-1.1rem}
  .hookbar{width:min(100%,220px)}
  .strate--flip .pain{
    border-right:1px solid var(--line-faint);
    border-left:3px solid var(--ember-core);
  }
  .strate--flip .service__ghost{left:auto;right:0}
  .plunge__layer{animation:none}
  .plunge{height:74vh}
  .plunge__layer--c{top:16vh;height:56vh}
  /* tout s'aligne à gauche le long du rail */
  .punchline[data-side="right"]{align-self:flex-start;text-align:left;margin-left:0}
  /* braises du CTA coupées (économie GPU) */
  .cta__embers{display:none}

  .constat{gap:6vh}
  .manifesto{font-size:clamp(1.5rem,6.8vw,2.2rem)}
  .service__title{font-size:clamp(1.8rem,8vw,2.6rem)}
  .service__ghost{font-size:clamp(3.5rem,15vw,5rem)}
  .punchline{font-size:clamp(1.4rem,6.5vw,2rem)}
  .marquee{transform:rotate(1.4deg) scale(1.04);margin:1.2rem 0}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero__title{font-size:clamp(2.6rem,15vw,4.6rem)}
  .cta__points{flex-direction:column;align-items:center;gap:.9rem}
  .wordmark__stroke,.wordmark__fill{font-size:clamp(3.4rem,21vw,5.5rem)}
}

/* =================================================================
   FALLBACK STATIQUE — deux portes d'entrée, mêmes règles :
   1. prefers-reduced-motion (réglage utilisateur)
   2. .no-anim posé par main.js (reduced-motion détecté en JS,
      ou GSAP/ScrollTrigger non chargés — CDN bloqué)
   Tout le contenu reste visible, rideau ouvert, zéro animation.
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto}
  .loader,.beam,.hero__flare{display:none}
  .reveal{height:auto}
  .reveal__stage{height:auto;padding:12vh 0}
  .curtain,.curtain__edge,.reveal__vbeam,.reveal__hbeam,
  .reveal__interlude,.reveal__wisp{display:none}
  .reveal__content{opacity:1}
  .marquee__track{animation:none}
  .cta__btn::after{display:none}
  .wordmark__fill{clip-path:none}
  /* visuels des strates : figés dans un état final lisible */
  .heart,.spark,.touch,.nle__head,.hook__flash,.cta__embers{display:none}
  .hookfeed{transform:translateY(-50%)}      /* le reel HOOK affiché */
  .hookbar__track b{transform:scaleX(1)}
  .burn__bar b{transform:scaleX(.3)}
  .feedscroll__track{transform:none}
}
.no-anim .loader,
.no-anim .beam,.no-anim .hero__flare{display:none}
.no-anim .reveal{height:auto}
.no-anim .reveal__stage{height:auto;padding:12vh 0}
.no-anim .curtain,.no-anim .curtain__edge,
.no-anim .reveal__vbeam,.no-anim .reveal__hbeam,
.no-anim .reveal__interlude,.no-anim .reveal__wisp{display:none}
.no-anim .reveal__content{opacity:1}
.no-anim .marquee__track,.no-anim .noise,.no-anim .scene-clouds{animation:none}
.no-anim .cta__btn::after{display:none}
.no-anim .progress{display:none}
.no-anim .wordmark__fill{clip-path:none}
/* visuels des strates sans GSAP : statiques, état final lisible */
.no-anim .heart,.no-anim .spark,.no-anim .touch,
.no-anim .nle__head,.no-anim .hook__flash,.no-anim .cta__embers{display:none}
.no-anim .viz__float,.no-anim .puff,.no-anim .plunge__layer,
.no-anim .perch i,.no-anim .stray,.no-anim .feedscroll__track,.no-anim .youmark,
.no-anim .clip,.no-anim .wave i,.no-anim .panel__dot,
.no-anim .panel__badge--live,.no-anim .trend--up,.no-anim .toast,
.no-anim .hookfeed,.no-anim .burn__bar b,.no-anim .hookbar__track b{animation:none}
.no-anim .hookfeed{transform:translateY(-50%)}
.no-anim .hookbar__track b{transform:scaleX(1)}
.no-anim .burn__bar b{transform:scaleX(.3)}