/* Clone de mécanique. Tokens relevés par getComputedStyle sur le site de référence.
   Contenu : textes placeholder + médias Pexels libres. */
:root{
  /* ================================================================
     PALETTE — copiee de l'APP, pas relevee a l'oeil sur le logo.
     Source : REFRESH MYSOUL/CLAUDE/refresh_mysoul/lib/theme/app_theme.dart
     (classe RmsColors). Les anciennes valeurs etaient toutes des « presque » :
     assez proches pour sembler voulues, assez fausses pour ne jamais coller
     a une capture de l'app. AUCUN VERT, jamais.
     ================================================================ */

  /* fonds et encres */
  --bg:#F4F1EA;            /* RmsColors.bg — papier chaud       */
  --bg-deep:#E5E1D7;       /* bgDeep — champ enfonce            */
  --surface:#FCFBF7;       /* surface — carte                   */
  --white:#FFFFFF;         /* surfaceHigh — carte surelevee     */
  --ink:#211F1C;           /* ink1 — texte principal            */
  --ink-2:#5A5750;         /* ink2 — texte secondaire           */
  --ink-3:#8F8B82;         /* ink3 — labels, kickers            */
  --ink-on-dark:#F2F0EB;   /* inkOnDark                         */
  --line:#DCD9D0;          /* separateur discret                */
  --line-strong:#B2AEA4;   /* separateur visible, bordures      */

  /* LES SEPT ACCENTS m1..m7 — il en manquait trois.
     Chacun a sa variante pale (fond d'etiquette) ; deux ont une
     variante foncee, seule lisible en TEXTE sur fond clair. */
  --or:#E0A92E;        --or-soft:#F9EDCB;   --or-ink:#A9831F;
  --corail:#E2604A;    --corail-soft:#FBE2DB;
  --magenta:#B8448C;   --magenta-soft:#F4DEEC; --magenta-ink:#8A2F68;
  --indigo:#5B5BB5;    --indigo-soft:#E4E3F5;
  --rubis:#C03A52;     --rubis-soft:#F6DCE0;
  --amethyste:#8450B0; --amethyste-soft:#EAE0F3;
  --bleu-nuit:#3B5BA5; --bleu-nuit-soft:#DDE3F2;

  /* --y = ACCENT (or), jamais un fond de section.
     Sur fond CLAIR il faut --or-ink : --or seul n'est pas lisible en texte. */
  --y:#E0A92E;
  --y-deep:#A9831F;
  --panel:#F4F1EA;

  /* TYPOGRAPHIE — deux polices, comme l'app.
     Source : app_typography.dart : « Titres = Baloo 2 · Corps = Nunito ».
     Le site n'avait que Nunito : le nom du produit n'etait pas dans sa
     propre typo. */
  --font-titre:"Baloo 2","Nunito","Segoe UI",system-ui,sans-serif;
  --font-corps:"Nunito","Segoe UI",system-ui,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --pill:999px;
  --pad:clamp(16px,2.5vw,36px);
}
*{box-sizing:border-box;margin:0;padding:0}
/* PAS de scroll-behavior:smooth : il entre en conflit avec le scroll lisse JS
   et bloque le defilement. Racine relevee sur la reference : 0.75vw exact. */
/* Racine fluide, mais BORNEE. Sans plancher, 0.75vw donne 2.9px sur un
   telephone de 390px : tout le texte devient illisible. Le mobile est le
   cas principal du site, il ne peut pas etre l'accident de la formule. */
html{font-size:clamp(12px, .75vw, 15px)}
/* regles requises par Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--font-corps);
  font-size:1.167rem;font-weight:400;line-height:1.45;letter-spacing:0;
  background:var(--bg);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* grain */
body::after{
  /* PAS de mix-blend-mode ici : sur un calque fixe plein ecran, il force une
     recomposition complete a chaque image et ecroule le scroll. */
  content:"";position:fixed;inset:0;z-index:300;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='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ================= CURSEUR CUSTOM ================= */
/* 90x90, fixed, pointer-events:none, suit la souris — relevé sur le site de référence */
.cursor{
  position:fixed;top:0;left:0;z-index:250;
  pointer-events:none;
  width:90px;height:90px;
  margin:-45px 0 0 -45px;
  display:grid;place-items:center;
  color:var(--ink);
  opacity:0;
}
.cursor.on{opacity:1}
.cursor-dot{
  width:10px;height:10px;border-radius:50%;
  background:currentColor;
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;
}
.cursor-ring{
  position:absolute;inset:0;
  display:grid;place-items:center;
  opacity:0;transform:scale(.4);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.cursor-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--y);
}
.cursor-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 9s linear infinite}
.cursor-ring text{font-size:8px;font-weight:500;letter-spacing:.14em;fill:var(--ink)}
.cursor-play{position:relative;font-size:15px;color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
/* état "sur une vidéo" : le point disparaît, l'anneau PLAY apparaît */
.cursor.video .cursor-dot{width:0;height:0;opacity:0}
.cursor.video .cursor-ring{opacity:1;transform:scale(1)}
/* thème selon la section survolée */
.cursor.dark{color:var(--white)}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* ================= HEADER ================= */
/* fixed, 71px, fond transparent -> plein au scroll (transition .3s) */
.head{position:fixed;inset:0 0 auto;z-index:120}
.head-bar{
  height:71px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);
  color:var(--white);
  background:transparent;
  transition:background .3s,color .3s;
}
.head.scrolled .head-bar{background:var(--bg);color:var(--ink)}  /* hauteur inchangee : 71px comme la reference */
.head-left{display:flex;gap:2.4rem;font-size:1rem;font-weight:500}
.head-left a{opacity:.9;border-bottom:1.5px solid transparent;padding-bottom:3px;transition:opacity .2s,border-color .2s}
.head-left a:hover,.head-left a.is-active{opacity:1;border-color:currentColor}
.head-logo{display:flex;align-items:center;gap:9px;transition:opacity .3s}
.head-logo-mark{font-size:2.4rem;font-weight:700;letter-spacing:-.01em;line-height:1}
.head-logo-word{font-size:.7rem;font-weight:500;line-height:1.08;letter-spacing:.04em}
.head-right{display:flex;justify-self:end;align-items:center;gap:12px}
/* selecteur de langue, toujours visible en haut (l'OS peut etre dans une
   autre langue que celle du visiteur). */
.head-lang{display:flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:800;letter-spacing:.05em}
.head-lang a{opacity:.5;text-transform:uppercase;transition:opacity .2s,color .2s}
.head-lang a:hover{opacity:1}
.head-lang a[aria-current="page"]{opacity:1;color:var(--or)}
.head.scrolled .head-lang a[aria-current="page"]{color:var(--or-ink)}
.ibtn{
  width:27px;height:27px;display:grid;place-items:center;
  font-size:9.5px;font-weight:700;border:1px solid currentColor;border-radius:50%;opacity:.85;
  transition:background .25s,color .25s;
}
.ibtn:hover{background:currentColor}
.ibtn:hover{color:transparent}

/* ================= BOUTONS À TEXTE DÉFILANT ================= */
/* .btn-fixed réserve la largeur en opacity:0, .btn-track défile en boucle */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  height:41px;padding:0 2.7rem;
  border-radius:var(--pill);
  overflow:hidden;
  font-size:1rem;font-weight:500;letter-spacing:0;
  border:1.5px solid transparent;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn-label{position:relative;display:inline-block;overflow:hidden;height:41px}
.btn-fixed{display:block;line-height:41px;opacity:0;white-space:nowrap}
.btn-marquee{position:absolute;inset:0;overflow:hidden}
.btn-track{
  display:flex;height:100%;align-items:center;width:max-content;
}  /* defilement pilote en JS */
.btn-item{padding-right:1.1em;white-space:nowrap;line-height:1}
/* la piste contient 8 copies : -50% = 4 copies => boucle sans couture */
@keyframes track{to{transform:translateX(-50%)}}
.btn:hover .btn-track{}
.btn-plus{font-size:15px;line-height:1}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--light{background:var(--white);color:var(--ink)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--y)}
.btn--outline-y{border-color:var(--y);color:var(--y)}
.btn--outline-y:hover{background:var(--y);color:var(--ink)}

/* ================= HERO VIDÉO ================= */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;color:var(--white);
  background:#000;
}
.hero-video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.42) 45%,rgba(0,0,0,.74)),
    linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.35) 40%,rgba(0,0,0,.5));
}
.hero-side{
  position:absolute;bottom:38%;max-width:22rem;
  font-size:1.25rem;line-height:1.4;font-weight:400;
}
.hero-side--l{left:var(--pad)}
.hero-side--r{right:var(--pad);text-align:right}
.hero-mark{
  position:relative;
  width:34rem;height:34rem;
  display:grid;place-items:center;
  color:var(--y-deep);
  text-shadow:0 24px 70px rgba(0,0,0,.5);
}
/* chaque fragment est centre puis decale par JS (orbite + convergence) */
.hm-piece,.hm-core{
  position:absolute;
  font-size:9rem;font-weight:700;line-height:.85;letter-spacing:-.02em;
  will-change:transform,opacity;
}
.hm-core{font-size:9rem}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;translate:-50% 0;
  width:30px;color:var(--white);opacity:.85;
  animation:bob 1.7s var(--ease) infinite;
}
@keyframes bob{50%{translate:-50% 9px}}

/* ================= BANDEAUX DÉFILANTS ================= */
.band{
  overflow:hidden;contain:paint;background:var(--ink);color:var(--white);
  padding:15px 0;border-block:1px solid rgba(29,29,27,.16);
}
.band--dark{background:var(--ink);color:var(--white)}
.band-track{
  display:flex;align-items:center;gap:26px;width:max-content;
  will-change:transform;backface-visibility:hidden;transform:translateZ(0);
  font-size:2rem;font-weight:500;letter-spacing:.02em;
}  /* defilement pilote en JS (reagit au scroll) */
.band-track--rev{}
.band-track i{font-style:normal;opacity:1;color:var(--or)}

/* ================= PANNEAUX ================= */
.panel{
  position:relative;
  padding:clamp(56px,5.5vw,80px) var(--pad) clamp(40px,4.5vw,64px);
}
.panel--yellow{background:var(--panel)}
.panel--dark{background:var(--ink);color:var(--white)}
.grid3{max-width:none;margin:0;display:grid;grid-template-columns:30rem 1fr 56px;gap:20px;align-items:start;padding-bottom:38px}
.grid3--tight{align-items:center;padding-bottom:30px}
.grid2{max-width:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end}
.kicker{font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1.3}
.kicker--y{color:var(--y)}
.idx{text-align:right;font-size:1.167rem;font-weight:500;font-variant-numeric:tabular-nums}
.idx--y{color:var(--y);text-align:left}
.lead{font-size:1.167rem;font-weight:400;line-height:1.4;max-width:30rem}
.lead--sm{font-size:1.167rem}
.lead--yellow{color:var(--white)}
.lead--dim{color:rgba(255,255,255,.72)}
.btn-row{display:flex;gap:12px;justify-self:end}

/* révélation typographique ligne par ligne */
.big-reveal{max-width:1120px;font-size:3.8rem;font-weight:500;line-height:1.15;letter-spacing:0}
.big-reveal--sm{font-size:2.6rem}
.big-reveal--md{font-size:5rem;color:var(--white);max-width:68rem}
.big-reveal .l{display:block;overflow:hidden}
.big-reveal .l>span{display:inline-block;transform:translateY(112%);will-change:transform}
.rv{opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ================= RÉALISATIONS ================= */
.works{max-width:none;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.work-media{aspect-ratio:4/3;border-radius:5px;overflow:hidden;background:#111}
.work-media video{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work:hover .work-media video{transform:scale(1.05)}
.work h3{margin-top:16px;font-size:2rem;font-weight:400;line-height:1.2}
.work-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(29,29,27,.2);font-size:1.05rem;font-weight:400;opacity:.72}
.work-meta b{font-weight:500;opacity:1}
.logos{max-width:none;margin:54px 0 0;display:flex;flex-wrap:wrap;border-top:1px solid rgba(29,29,27,.18)}
.logos span{flex:1;min-width:140px;text-align:center;padding:26px 10px;border-right:1px solid rgba(29,29,27,.18);font-size:1.05rem;font-weight:500;letter-spacing:0;opacity:.5}
.logos span:last-child{border-right:0}

/* ================= AU-DELÀ DE L'ÉCRAN ================= */
.beyond{max-width:none;margin:60px 0 0;display:grid;grid-template-columns:auto auto;justify-content:center;gap:clamp(48px,9vw,130px);align-items:center}
.phone{position:relative;width:32rem;aspect-ratio:9/17;border-radius:34px;overflow:hidden;border:2px solid rgba(255,255,255,.24);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.phone video{width:100%;height:100%;object-fit:cover}
.phone-notch{
  position:absolute;top:1.1rem;left:50%;translate:-50% 0;
  width:9rem;height:2.5rem;border-radius:999px;background:#000;z-index:3;
}
.phone-status{
  position:absolute;top:1.5rem;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;color:#fff;font-size:1.15rem;font-weight:600;
}
.phone-status b{font-weight:600}
.phone-status i{display:inline-block;background:#fff;border-radius:2px;margin-left:.4rem}
.phone-status .sig{width:1.5rem;height:1rem;clip-path:polygon(0 100%,20% 100%,20% 60%,0 60%,0 100%,35% 100%,35% 40%,55% 40%,55% 100%,70% 100%,70% 20%,90% 20%,90% 100%,100% 100%,100% 0,100% 100%)}
.phone-status .wifi{width:1.4rem;height:1rem;clip-path:polygon(50% 100%,0 30%,50% 0,100% 30%)}
.phone-status .bat{width:2.2rem;height:1.05rem;border-radius:3px}
/* bulles de reaction : pastilles blanches rondes, nombreuses */
.react{
  position:absolute;z-index:2;
  width:3.4rem;height:3.4rem;border-radius:50%;
  background:#fff;color:#1D1D1B;
  display:grid;place-items:center;
  font-size:1.5rem;opacity:0;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  animation:up 3.4s ease-in infinite;
}
.react.r1{bottom:16%;right:8%}
.react.r2{bottom:13%;right:26%;animation-delay:.42s}
.react.r3{bottom:19%;right:16%;animation-delay:.85s}
.react.r4{bottom:14%;right:34%;animation-delay:1.27s}
.react.r5{bottom:21%;right:24%;animation-delay:1.7s}
.react.r6{bottom:12%;right:10%;animation-delay:2.12s}
.react.r7{bottom:17%;right:32%;animation-delay:2.55s}
.react.r8{bottom:15%;right:20%;animation-delay:2.97s}
@keyframes up{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translateY(-170px) scale(1.05)}}
.stats{display:grid;grid-template-columns:1fr;gap:2.6rem;min-width:26rem}
.stat-k{display:block;font-size:1.167rem;font-weight:500;color:var(--y);margin-bottom:6px}
.stat-v{display:block;font-size:5rem;font-weight:500;letter-spacing:0;color:var(--y);font-variant-numeric:tabular-nums;line-height:1}

/* ================= SERVICES — EMPILEMENT COLLANT =================
   Mécanique relevée sur la référence : une longue piste de scroll contient un
   bloc sticky ; l'élément actif se déplie (pleine hauteur, opacité 1), les
   autres se replient sur leur seul titre et tombent à ~0.1 d'opacité. */
.stack{position:relative;background:var(--ink);color:var(--white)}
.stack-sticky{
  /* epingle par GSAP (pin:true), pas par position:sticky : le sticky CSS laisse
     une trainee ou le dernier bloc reste affiche = scroll mort */
  display:flex;flex-direction:column;justify-content:center;
  min-height:74vh;
  padding:96px var(--pad) 40px;
  overflow:hidden;
}
.star{position:absolute;top:74px;font-size:26px;color:var(--y-deep);opacity:.65;animation:spin 8s linear infinite}
.star--l{left:22px}
.star--r{right:22px}
.stack-items{max-width:none;margin:0;width:100%}
.srv{
  border-top:1px solid rgba(255,255,255,.14);
  padding:12px 0;
  text-align:center;              /* releve sur la reference */
  opacity:.1;
}
.srv.is-active{padding:20px 0}
.srv-head{display:flex;align-items:center;justify-content:center;gap:18px}
.srv-head h3{
  font-size:5rem;font-weight:500;letter-spacing:0;line-height:1.12;
  color:var(--white);
  max-width:64rem;               /* force le retour a la ligne comme la reference */
}
.arrow{
  font-style:normal;width:36px;height:36px;flex-shrink:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;transition:transform .4s var(--ease),background .35s,color .35s,border-color .35s;
}
.srv.is-active .arrow{background:var(--y);color:var(--ink);border-color:var(--y);transform:rotate(45deg)}
/* le corps se déplie : grid-template-rows 0fr -> 1fr (animable, contrairement à height:auto) */
.srv-body{overflow:hidden}
.srv-inner{min-height:0}
.srv-txt{max-width:34rem;margin:18px auto 0;font-size:1.25rem;line-height:1.6;color:rgba(255,255,255,.9)}
.srv-txt b{color:#fff}
.srv-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px auto 6px;max-width:77rem}
.srv-thumbs img{aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.stack-progress{
  max-width:none;margin:26px 0 0;width:100%;
  height:2px;background:rgba(255,255,255,.14);
}
.stack-progress span{display:block;height:100%;width:0;background:var(--y)}

/* ================= RÉVÉLATION LETTRE PAR LETTRE ================= */
/* .w = mot (insécable), .c = caractère animé individuellement */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;will-change:transform,opacity}

/* ================= CONTACT ================= */
.connect{display:grid;grid-template-columns:6rem 24rem 1fr;gap:3rem;align-items:center;padding-bottom:clamp(70px,7vw,110px)}
.connect-idx{align-self:start;padding-top:1rem}
.connect-box{aspect-ratio:1;max-width:none;border:1px solid rgba(255,255,255,.28);border-radius:28px;display:grid;place-items:center;font-size:26px;color:var(--y)}

.connect-badge{
  position:relative;width:15rem;height:15rem;display:grid;place-items:center;
  color:var(--y);will-change:transform;
}
.connect-badge svg{position:absolute;inset:0;width:100%;height:100%}
.connect-badge text{font-size:7.6px;font-weight:500;letter-spacing:.14em;fill:currentColor}
.connect-badge b{font-size:2.4rem;font-weight:500}
.connect-copy p.connect-second{margin-top:2.4rem;font-size:5rem;font-weight:500;line-height:1.15;color:var(--y)}
.connect-copy .btn{margin-top:26px}

/* ================= FOOTER ================= */
.foot{background:var(--ink);color:rgba(255,255,255,.75);padding:54px var(--pad) 26px;border-top:1px solid rgba(255,255,255,.12);font-size:1.167rem;line-height:1.4}
.foot-grid{max-width:none;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot .kicker{display:block;margin-bottom:8px}
.foot-legal{max-width:none;margin:34px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:1rem;opacity:.5}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .head-left{display:none}
  .grid3,.grid2,.connect{grid-template-columns:1fr}
  .btn-row{justify-self:start}
  .works{grid-template-columns:1fr}
  .beyond{grid-template-columns:1fr;justify-items:center}
  .phone{width:min(330px,80vw)}
  .stats{width:100%}
  .srv-thumbs{grid-template-columns:repeat(2,1fr)}
  .srv-txt{margin-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-side{max-width:44vw;font-size:12.5px;bottom:96px}
}
@media(max-width:560px){
  .hero-side{max-width:70vw;position:static;text-align:left;margin:14px 0 0}
  .hero-side--r{text-align:left}
  .hero{place-content:center;padding:96px var(--pad) 70px}
  .stats{grid-template-columns:1fr}
}

/* ================= MOUVEMENT RÉDUIT ================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .big-reveal .l>span{transform:none!important}
  .hm-piece,.hm-core{transform:none!important;opacity:1!important}
  .cursor{display:none}
}

/* ================================================================
   TREMOLO — composants ajoutes au squelette
   ================================================================ */

/* ---- logo dans le header ---- */
.head-logo-img{width:34px;height:34px;border-radius:8px;flex:none}
.head-logo-word{font-size:.78rem;font-weight:600;line-height:1.12;letter-spacing:.06em}
.head-logo-word b{font-weight:800;letter-spacing:.02em}

/* ---- bloc central du hero ---- */
.hero-core{
  position:relative;z-index:2;
  display:grid;justify-items:center;gap:1.4rem;
  text-align:center;padding:0 var(--pad);max-width:62rem;
}
.hero-kicker{
  font-size:1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or);
}
.hero-core h1{
  font-size:5.4rem;font-weight:800;line-height:1.06;letter-spacing:-.02em;max-width:16ch;
}
.hero-sub{
  font-size:1.5rem;font-weight:400;line-height:1.45;
  color:rgba(244,240,234,.84);max-width:42ch;
}
.hero-note{font-size:1rem;font-weight:600;color:rgba(244,240,234,.6)}

/* ---- badges des magasins ----
   EMPLACEMENTS aux bonnes proportions. Les visuels officiels doivent etre
   telecharges depuis les pages de marque Google et Apple : leurs regles
   interdisent de les redessiner ou de les recolorer. */
.stores{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.store-badge{display:block}
.store-slot{
  display:grid;place-items:center;
  width:15.5rem;aspect-ratio:2.58/1;      /* proportion officielle Google Play */
  border:1.5px dashed rgba(244,240,234,.45);border-radius:8px;
  font-size:1rem;font-weight:700;color:rgba(244,240,234,.75);
  transition:border-color .25s,color .25s,background .25s;
}
.store-slot[data-store="apple"]{aspect-ratio:3/1}
.store-badge:hover .store-slot{border-color:var(--or);color:var(--or)}
.stores--lg .store-slot{width:18rem}

/* ---- personas : grille 3 colonnes, emplacement video 9/16 ---- */
.works{grid-template-columns:repeat(3,1fr);gap:1.6rem}
.work-media{
  position:relative;aspect-ratio:9/16;         /* ratio impose : changer le media ne bouge rien */
  border-radius:14px;overflow:hidden;background:var(--ink);
}
.work--sub .work-media{aspect-ratio:1/1}       /* secondaires : format carre, moins de place */
.work-num{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-size:1.1rem;font-weight:800;color:var(--bg);
  background:rgba(29,27,24,.55);border-radius:var(--pill);
  padding:.35rem .9rem;backdrop-filter:blur(6px);
}
.work h3{margin-top:1.2rem;font-size:2rem;font-weight:700;line-height:1.15}
.work-line{margin-top:.5rem;font-size:1.167rem;line-height:1.45;color:var(--ink);opacity:.78;max-width:34ch}
.work-line b{font-weight:800;opacity:1}
.work-meta{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid rgba(29,27,24,.18);font-size:1rem;font-weight:600;opacity:.7;
}
.work-meta span{
  border:1px solid rgba(29,27,24,.22);border-radius:var(--pill);padding:.25rem .8rem;
}
.work-meta span:nth-child(1){border-color:var(--or);color:#8A6410}
.work-meta span:nth-child(2){border-color:var(--corail);color:#A6382A}
.work-meta span:nth-child(3){border-color:var(--magenta);color:#8E2F65}

/* ---- deux facons de filmer ---- */
.ways{display:grid;gap:2.4rem;align-content:center;max-width:44rem}
.way{display:grid;grid-template-columns:4rem 1fr;gap:1.2rem;align-items:start}
.way-num{
  width:3.4rem;height:3.4rem;display:grid;place-items:center;
  border-radius:var(--pill);background:var(--or);color:var(--ink);
  font-size:1.4rem;font-weight:800;
}
.way h3{font-size:2.2rem;font-weight:700;line-height:1.15;color:var(--y)}
.way p{margin-top:.5rem;font-size:1.167rem;line-height:1.5;color:rgba(255,255,255,.74)}
.way-close{
  grid-column:1/-1;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:1.167rem;font-weight:700;color:var(--y);
}

/* ---- comment ca marche : 3 etapes ---- */
.steps{
  max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1rem;
}
.step{
  padding-top:1.4rem;border-top:2px solid rgba(255,255,255,.18);
}
.step-n{
  display:inline-grid;place-items:center;width:3rem;height:3rem;margin-bottom:1rem;
  border-radius:var(--pill);background:var(--y);color:var(--ink);
  font-size:1.3rem;font-weight:800;
}
.step h3{font-size:2rem;font-weight:700;line-height:1.2;color:var(--white)}
.step p{margin-top:.5rem;font-size:1.167rem;line-height:1.5;color:rgba(255,255,255,.72)}

/* ---- responsive ---- */
@media(max-width:900px){
  .hero-core h1{font-size:4rem}
  .hero-sub{font-size:1.4rem}
  .hero-mark{height:22rem}
  .works{grid-template-columns:1fr}
  .work-media,.work--sub .work-media{aspect-ratio:9/16}
  .steps{grid-template-columns:1fr}
  .way{grid-template-columns:3rem 1fr}
}


/* ================================================================
   CORRECTIFS — logo fidele, dosage de l'or, tailles, mise en valeur
   ================================================================ */

/* ---- LOGO DANS LE HERO : 7 barres, positions/couleurs/hauteurs relevees
   sur logo-tremolo.svg, barrees par la diagonale. Plus d'approximation. ---- */
/* ---- LA MARQUE — le glyphe seul, tel qu'il est livre.
   Fichier : AUTOMASTER/tremolo-content/motion/public/logo_mark.svg, extrait de
   logo_tremolo-new.svg (16/08) — meme extraction que l'icone de lancement.
   Deux erreurs corrigees ici : la marque etait redessinee a la main en sept
   <span> CSS au lieu d'utiliser le fichier, et la version employee contenait
   deja son carre creme, posee dans une pastille blanche : pastille sur pastille.
   Le glyphe est colore : on ne le teinte jamais, on ne joue que l'opacite. ---- */
.hero-mark{
  position:absolute;z-index:1;pointer-events:none;
  width:auto;height:30rem;opacity:.16;
}

/* ---- LE LOGO REAPPARAIT ---- */
.stack-watermark{
  position:absolute;right:-6rem;top:50%;translate:0 -50%;
  width:34rem;opacity:.05;pointer-events:none;
}
.foot-logo{
  --cote:5.4rem;
  width:var(--cote);height:var(--cote);margin-bottom:2.4rem;
  border-radius:calc(var(--cote) * .286);
  padding:calc(var(--cote) * .14);
  background:var(--white);
}

/* ---- PERSONAS : le 9/16 donnait 777px de haut. On passe en 4/5 pour les
   prioritaires (~546px) et en rangee compacte 16/9 pour les secondaires. ---- */
.works--lead{grid-template-columns:repeat(3,1fr);gap:1.8rem}
.works--lead .work-media{aspect-ratio:4/5}
.works--sub{
  grid-template-columns:repeat(3,1fr);gap:1.4rem;
  margin-top:3rem;padding-top:2.4rem;border-top:1px solid rgba(29,27,24,.16);
}
.works--sub .work-media{aspect-ratio:16/9}
.works--sub h3{font-size:1.5rem;margin-top:.9rem}
.works--sub .work-line{font-size:1rem;margin-top:.3rem}

/* ---- TEXTE A COTE DU TELEPHONE : aligne en haut, plus flottant ---- */
.beyond{align-items:start}
.ways{align-content:start;padding-top:1rem}
.way-num{background:var(--or)}
.way:nth-child(2) .way-num{background:var(--corail)}
.way h3{color:var(--white)}

/* ---- COMMENT CA MARCHE : c'est un argument central, il doit peser ---- */
#roll{padding-bottom:clamp(56px,6vw,90px)}
.steps{gap:2.6rem;margin-top:2.4rem}
.step{
  padding:2.2rem 1.8rem;border-top:none;
  background:rgba(255,255,255,.04);border-radius:18px;
  border-left:4px solid var(--or);
}
.step:nth-child(2){border-left-color:var(--corail)}
.step:nth-child(3){border-left-color:var(--magenta)}
.step-n{
  width:auto;height:auto;background:none;border-radius:0;
  font-size:4.4rem;font-weight:800;line-height:.9;color:var(--or);margin-bottom:.6rem;
}
.step:nth-child(2) .step-n{color:var(--corail)}
.step:nth-child(3) .step-n{color:var(--magenta)}
.step h3{font-size:2.2rem;font-weight:800}
.step p{font-size:1.25rem;color:rgba(255,255,255,.8)}

/* ---- BADGES OFFICIELS : hauteur commune, proportions d'origine ---- */
.store-badge img{width:13rem;height:auto;display:block}
.stores--lg .store-badge img{width:15rem}
.store-badge{transition:transform .25s var(--ease),opacity .25s}
.store-badge:hover{transform:translateY(-2px);opacity:.88}

@media(max-width:900px){
  .hero-mark{height:17rem;opacity:.11}
  .works--lead,.works--sub{grid-template-columns:1fr}
  .works--sub .work-media{aspect-ratio:16/9}
  .stack-watermark{display:none}
}

/* ================================================================
   CORRECTIFS MESURES — 3 defauts confirmes au banc de mesure
   ================================================================ */

/* ---- 1. « Deux facons de filmer » : le paragraphe tombait en colonne 1.
   .way est une grille 2 colonnes (pastille | contenu) avec TROIS enfants ;
   le placement automatique envoyait le <p> dans la colonne de 4rem,
   soit 48px de large -> 20 lignes d'un mot. Mesure : 48px bureau, 36px mobile. ---- */
.way h3,
.way p{grid-column:2}

/* ---- 2. ECHELLE MOBILE.
   La racine clamp(12px,.75vw,15px) vaut 12px de 0 a 1600px de large :
   le mobile recevait donc exactement les tailles du bureau. Un titre de 5rem
   (60px) tombait sur 269px de large = 7 lignes de 6 caracteres.
   Les tailles d'affichage deviennent fluides ; le corps reste en rem. ---- */
@media(max-width:900px){
  html{font-size:13px}                       /* corps a 15px, lisible */

  .hero-core h1{font-size:clamp(30px,8.4vw,44px);max-width:14ch}
  .hero-sub{font-size:clamp(15px,3.9vw,18px)}

  .big-reveal{font-size:clamp(26px,6.8vw,36px)}
  .big-reveal--sm{font-size:clamp(22px,5.6vw,30px)}
  .big-reveal--md{font-size:clamp(26px,6.8vw,36px)}

  .srv-head h3{font-size:clamp(23px,6vw,32px);max-width:18ch}
  .connect-copy p.connect-second{font-size:clamp(23px,6vw,32px)}
  .stat-v{font-size:clamp(30px,7.6vw,42px)}

  .way h3{font-size:clamp(19px,5vw,24px)}
  .step h3{font-size:clamp(19px,5vw,24px)}
  .work h3{font-size:clamp(19px,5vw,24px)}
  .works--sub h3{font-size:clamp(17px,4.4vw,21px)}
}

/* ---- 3. Ancres : le haut de section passait sous l'en-tete fixe (71px).
   Filet de securite si le JS ne s'execute pas. ---- */
:target{scroll-margin-top:80px}
#hero,#pourquoi,#works,#beyond,#services,#roll,#connect,#who{scroll-margin-top:80px}

/* ================================================================
   CORRECTIFS — releves sur les captures apres le premier lot
   ================================================================ */

/* ---- 4. En-tete : le texte defilant coupait le mot sur le bouton principal
   (« Telechargı »). Un appel a l'action doit toujours se lire. Le defilement
   reste sur les boutons secondaires. ---- */
.btn .btn-fixed{opacity:1}
.btn .btn-marquee{display:none}

@media(max-width:900px){
  /* ---- 5. Personas : la vignette occupait la moitie de l'ecran (448px de haut
     sur 844) et la page mobile atteignait 9983px, soit douze ecrans. ---- */
  .works--lead .work-media{aspect-ratio:3/2}
  .works--sub .work-media{aspect-ratio:16/9}
  .work-media,.work--sub .work-media{aspect-ratio:3/2}

  /* ---- 6. Hero : les barres du logo traversaient le sous-titre.
     Elles restent comme texture, sans manger la lisibilite. ---- */
  .hero-mark{opacity:.11}
  .hero-core h1,.hero-sub,.hero-kicker{text-shadow:0 2px 18px rgba(0,0,0,.55)}
}

@media(max-width:560px){
  /* ---- 7. Hero : en passant en flux, les deux phrases laterales remontaient
     AVANT le titre. Le visiteur lisait un detail avant la promesse. ---- */
  .hero{display:grid}
  .hero-core{order:1}
  .hero-side--l{order:2}
  .hero-side--r{order:3}
  .hero-side{max-width:none;opacity:.82;font-size:1.05rem}
}

/* ---- 8. Les reperes « [ 05 ] » se coupaient en deux lignes sur mobile. ---- */
.idx{white-space:nowrap}

/* ================================================================
   LOT A — SOCLE D'IDENTITE : les valeurs viennent de l'app, pas du clone
   ================================================================ */

/* ---- Les titres passent en Baloo 2. Le corps reste en Nunito.
   C'est la regle de l'app (app_typography.dart), pas un choix graphique. ---- */
h1,h2,h3,
.hero-core h1,.big-reveal,.srv-head h3,.work h3,.way h3,.step h3,
.stat-v,.connect-copy p.connect-second,.head-logo-word,.brand-word{
  font-family:var(--font-titre);
}

/* ---- VERROU DU LOGO — releve dans motion/src/BlocA3.tsx (Signature).
   Pastille blanche, rayon = 28,6 % du cote, marge interne = 14 %,
   puis « TREMOLO » en encre et « CUT » en or. Le rapport est fixe :
   changer la taille du bloc ne deforme rien. ---- */
.head-logo{gap:.9rem}
.head-logo-img{
  --cote:34px;
  width:var(--cote);height:var(--cote);
  border-radius:calc(var(--cote) * .286);
  padding:calc(var(--cote) * .14);
  background:var(--white);
  border:1px solid var(--line-strong);
  flex:none;
}
.head-logo-word{
  font-family:var(--font-titre);
  font-size:1.15rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;
}
.head-logo-word b{font-weight:800;letter-spacing:-.02em}
/* « CUT » en or. Le sens depend du fond, et il etait inverse :
   en haut l'en-tete est transparent sur la video sombre -> --or (clair) ;
   une fois scrolle le fond passe au papier -> --or-ink, le seul or lisible
   sur fond clair (--or donne 2,0:1, --or-ink 3,6:1). */
.head-logo-word i{font-style:normal;font-weight:600;color:var(--or)}
.head.scrolled .head-logo-word i{color:var(--or-ink)}

/* ---- En-tete mobile : le nom se coupait en « TREMOLO / CUT ».
   Le verrou du logo ne se casse jamais sur deux lignes. Les deux pastilles
   sociales pointent sur « # » et n'ont rien a faire dans 390px. ---- */
.head-logo-word{white-space:nowrap}
@media(max-width:560px){
  .head-right .ibtn{display:none}
  .head-logo-word{font-size:1.02rem}
  .head .btn{padding:0 1.6rem}
}

@media(max-width:560px){
  /* le menu etant masque, la grille 1fr/auto/1fr collait le nom au bouton */
  .head-bar{grid-template-columns:auto 1fr;gap:14px}
  .head-right{justify-self:end}
}

/* ================================================================
   LOT B — GRILLE PERSONA, reprise de motion/src/BlocA3.tsx
   ----------------------------------------------------------------
   La composition des maquettes est : ETIQUETTE (categorie, coloree)
   -> FILET -> ENONCE -> COMPLEMENT. On la transpose telle quelle.
   Rien n'est ajoute : le <h3> devient l'etiquette, .work-line devient
   l'enonce, et les trois pastilles de .work-meta redeviennent une ligne
   de texte — dix-huit pastilles cerclees sur la page, c'etait le bruit
   que la grille est censee supprimer.
   Rapports releves sur BlocA3 (canevas 1080) et conserves :
     enonce / etiquette = 2,95   complement / etiquette = 1,53
   ================================================================ */

/* chaque persona porte sa couleur, prise dans les sept accents de l'app.
   L'ordre suit la priorite de CHARTE_CONTENU.md : musiciens en tete. */
.work[data-persona="musiciens"]   {--acc:var(--or);        --acc-soft:var(--or-soft);        --acc-ink:var(--or-ink)}
.work[data-persona="videastes"]   {--acc:var(--indigo);    --acc-soft:var(--indigo-soft);    --acc-ink:var(--indigo)}
.work[data-persona="mouvement"]   {--acc:var(--magenta);   --acc-soft:var(--magenta-soft);   --acc-ink:var(--magenta-ink)}
.work[data-persona="marque-perso"]{--acc:var(--corail);    --acc-soft:var(--corail-soft);    --acc-ink:#A6382A}
.work[data-persona="commerces"]   {--acc:var(--bleu-nuit); --acc-soft:var(--bleu-nuit-soft); --acc-ink:var(--bleu-nuit)}
.work[data-persona="agences"]     {--acc:var(--amethyste); --acc-soft:var(--amethyste-soft); --acc-ink:var(--amethyste)}

/* 1 — L'ETIQUETTE : la categorie, pas le titre. Uppercase, interlettrage
   0,14em, fond pale de l'accent — comme « ECOLE DE DANSE » sur la maquette. */
.work h3{
  display:inline-block;margin-top:1.4rem;
  font-family:var(--font-corps);
  font-size:.95rem;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--acc-soft);color:var(--acc-ink);
  padding:.55rem 1.05rem;border-radius:6px;
}

/* 2 — LE FILET : il ouvre l'espace du texte. Il prend l'accent du persona,
   pas l'or systematique — c'est ce qui distingue les categories d'un coup d'oeil. */
.work h3::after{content:none}
.work-line{
  position:relative;
  margin-top:1.1rem;padding-top:1.1rem;
  font-family:var(--font-titre);
  font-size:2.05rem;font-weight:700;line-height:1.2;letter-spacing:-.012em;
  color:var(--ink);opacity:1;max-width:24ch;
}
.work-line::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--acc);border-radius:2px;
}
.work-line b{font-weight:800;color:var(--acc-ink)}

/* 3 — LE COMPLEMENT : une ligne discrete, plus dix-huit pastilles. */
.work-meta{
  display:block;margin-top:.9rem;padding-top:0;border-top:none;
  font-size:1.05rem;font-weight:600;line-height:1.5;
  color:var(--ink-3);opacity:1;
}
.work-meta span{border:none;border-radius:0;padding:0}
.work-meta span:nth-child(1),
.work-meta span:nth-child(2),
.work-meta span:nth-child(3){border:none;color:var(--ink-3)}
.work-meta span + span::before{content:" · ";color:var(--acc);font-weight:800}

/* la pastille numerotee reprend l'accent du persona au lieu du gris */
.work-num{background:var(--acc);color:var(--ink)}
.work[data-persona="videastes"] .work-num,
.work[data-persona="commerces"] .work-num,
.work[data-persona="agences"] .work-num{color:var(--ink-on-dark)}

/* rangee secondaire : meme grammaire, un cran plus bas */
.works--sub .work h3{font-size:.85rem;padding:.45rem .9rem;margin-top:1.1rem}
.works--sub .work-line{font-size:1.5rem;margin-top:.85rem;padding-top:.85rem;max-width:22ch}

@media(max-width:900px){
  .work h3{font-size:.9rem}
  .work-line{font-size:clamp(21px,5.6vw,27px);max-width:none}
  .works--sub .work-line{font-size:clamp(19px,4.8vw,23px)}
}



/* ================================================================
   CAPTURES DE L'APPLICATION
   Le site n'en montrait aucune : impossible de comprendre le produit
   ni d'en avoir un apercu avant de telecharger.
   ================================================================ */

/* ---- « Comment ca marche » : un ecran par etape. La section n'avait
   aucun visuel alors que la facilite d'usage est l'argument central. ---- */
.step{display:flex;flex-direction:column}

/* ---- LES REFUS : une seule image, grande.
   Il y avait douze vignettes — d'abord du materiel camera qui ne disait rien,
   puis des captures d'application posees la faute de mieux. Une phrase forte
   n'a pas besoin d'une bande de miniatures : elle a besoin d'UNE image qui la
   traduit. Les captures de l'app sont regroupees ailleurs, a leur place. ---- */
.srv-visuel{
  /* vraie capture de l'app, en portrait comme un telephone. */
  max-width:min(300px,72vw);margin:26px auto 0;
}
.srv-visuel img{
  width:100%;height:auto;display:block;
  border-radius:22px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 55px rgba(0,0,0,.5);
}


/* Chargement non differe dans la section epinglee : ScrollTrigger mesure la
   hauteur avant le chargement et l'image s'ecrase en filet. */


/* ---- Le mock telephone contient desormais des ECRANS DE L'APP, qui portent
   deja leur propre barre d'etat. L'encoche et la fausse barre du mock faisaient
   doublon, et les emojis de reaction — pertinents sur une video de concert —
   sont du bruit par-dessus une interface. ---- */
.phone-notch,.phone-status,.phone .react{display:none}

/* ================================================================
   « COMMENT CA MARCHE » — LE SEUL ENDROIT OU L'APP SE MONTRE
   L'interface etait posee sur des cartes sombres alors que l'app est
   claire : elle flottait au lieu d'etre mise en avant. La carte prend
   maintenant la surface de l'app, donc l'ecran est chez lui, et le
   contraste avec le panneau sombre fait ressortir le bloc.
   ================================================================ */
#roll .step{
  background:var(--surface);
  border-left:none;border-radius:18px;
  padding:1.5rem 1.5rem 1.8rem;
  border-top:4px solid var(--or);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
#roll .step:nth-child(2){border-top-color:var(--corail)}
#roll .step:nth-child(3){border-top-color:var(--magenta)}


/* le numero redevient une pastille discrete : c'est l'ecran qui doit peser */
#roll .step-n{
  display:inline-grid;place-items:center;
  width:2.4rem;height:2.4rem;border-radius:var(--pill);
  font-size:1.25rem;font-weight:800;line-height:1;
  background:var(--or);color:var(--ink);margin-bottom:.9rem;
}
#roll .step:nth-child(2) .step-n{background:var(--corail)}
#roll .step:nth-child(3) .step-n{background:var(--magenta);color:var(--white)}

#roll .step h3{color:var(--ink);font-size:1.9rem;line-height:1.2}
#roll .step p{color:var(--ink-2);margin-top:.5rem}

@media(max-width:900px){
    #roll .step h3{font-size:clamp(19px,5vw,24px)}
}

/* ================================================================
   PRÉ-LANCEMENT — l'app n'est pas encore publiée.
   Quatre boutons de store menaient vers « # » : le visiteur le plus
   chaud du parcours tombait dans le vide. On lui donne l'action que
   la phase permet réellement : être prévenu, et suivre.
   ================================================================ */
.prelaunch{display:grid;justify-items:center;gap:.7rem;margin-top:.4rem}
.prelaunch-note{
  font-size:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(244,240,234,.62);
}
.btn--go{
  background:var(--or);color:var(--ink);
  height:auto;padding:1.05rem 2.4rem;font-size:1.25rem;font-weight:800;
  border-radius:var(--pill);
}
.btn--go:hover{background:var(--corail);color:var(--white)}

/* Les badges restent visibles — ils disent SUR QUOI ça sortira — mais ils ne
   sont plus cliquables tant qu'il n'y a rien au bout. */
.stores--attente{opacity:.42;filter:grayscale(1)}
.store-badge.is-attente{display:block;cursor:default;pointer-events:none}

/* ---- Formulaire ---- */
.prevenir{margin-top:2.2rem;max-width:34rem}
.prevenir-label{
  display:block;margin-bottom:.8rem;
  font-size:1.167rem;font-weight:700;color:var(--white);
}
.prevenir-ligne{display:flex;gap:.7rem;flex-wrap:nowrap;align-items:stretch}
.prevenir-ligne .btn--go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.prevenir-champ{
  flex:1 1 16rem;min-width:0;
  padding:1.05rem 1.3rem;border-radius:var(--pill);
  border:1.5px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.06);color:var(--white);
  /* >=16px : sinon iOS Safari zoome/saute a la selection du champ. */
  font-family:var(--font-corps);font-size:max(16px,1.167rem);
}
.prevenir-champ::placeholder{color:rgba(255,255,255,.45)}
.prevenir-champ:focus{border-color:var(--or);background:rgba(255,255,255,.1)}
.prevenir-note{margin-top:.8rem;font-size:1rem;color:rgba(255,255,255,.55)}
.prevenir-retour{margin-top:.7rem;font-size:1.05rem;font-weight:700;color:var(--or);min-height:1.4em}
.prevenir-retour[data-erreur]{color:var(--corail)}

.prelaunch-suivre{margin-top:1.8rem;font-size:1.167rem;color:rgba(255,255,255,.7)}
.prelaunch-suivre a{color:var(--or);border-bottom:1px solid currentColor}

/* ================================================================
   FOCUS CLAVIER — il n'existait AUCUNE règle :focus dans la feuille.
   Le site était inutilisable au clavier. C'est un manquement WCAG,
   pas un détail esthétique.
   ================================================================ */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--or);
  outline-offset:3px;
  border-radius:4px;
}
[data-theme="dark"] :where(a,button,input):focus-visible,
.panel--dark :where(a,button,input):focus-visible{outline-color:var(--or)}

/* Lien d'évitement : premier arrêt du clavier, invisible à la souris. */
.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--ink);color:var(--white);
  padding:.9rem 1.4rem;border-radius:0 0 10px 0;font-weight:700;
}
.saut-contenu:focus{left:0}

@media(max-width:560px){
  .prevenir-ligne{flex-direction:column}
  .prevenir-ligne .btn--go{width:100%;justify-content:center}
  /* en colonne, flex-grow:1 etirait le champ en un pave vertical geant. */
  .prevenir-champ{flex:0 0 auto;width:100%}
}

/* ---- La preuve remonte dans la page. Elle etait en mention legale, sous
   « Maquette de travail » — l'endroit ou personne ne la lit, accolee a une
   phrase qui disait au visiteur que le site est un brouillon. ---- */
.works-note{
  margin-top:2rem;padding-top:1.2rem;
  border-top:1px solid rgba(29,27,24,.16);
  font-size:1.05rem;line-height:1.5;color:var(--ink-3);max-width:52ch;
}

/* ---- Les deux magasins sont prevus ; seule la date change. On l'ecrit sous
   chaque badge : deux pastilles grises identiques ne disaient pas laquelle
   arrive en premier, et un iPhone qui ne voit pas sa plateforme s'en va. ---- */
.store-badge{display:grid;justify-items:center;gap:.5rem}
.store-quand{
  font-size:.92rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,240,234,.55);
}

/* ================================================================
   [ 01 ] ET [ 02 ] — HIERARCHIE DANS L'ARGUMENT
   Les deux sections portaient le meilleur texte du site sous la forme
   d'un pave gris uniforme : meme corps, meme couleur, rien pour
   accrocher l'oeil. Personne ne lit un pave. On alterne desormais
   prose courte (en retrait) et affirmation (en grand) : meme contenu,
   trois points d'entree pour qui balaie la page au lieu de zero.
   ================================================================ */


/* l'affirmation avance : titre, pleine opacite, colonne etroite */
.coup{
  margin-top:1.1rem;
  font-family:var(--font-titre);
  font-size:clamp(23px,3.2vw,2.4rem);font-weight:800;line-height:1.12;
  letter-spacing:-.015em;color:var(--white);max-width:19ch;
}
.coup--y{margin-top:0;color:var(--y)}

/* le credit d'artisanat se detache : c'est une signature, pas un paragraphe */
.sign{
  margin-top:1.6rem;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:1.05rem;font-weight:700;line-height:1.5;
  color:var(--y);max-width:34ch;
}

/* une ligne de titre qui recule — l'opacite plutot qu'une couleur, pour que
   la regle serve aussi bien sur fond papier que sur fond encre */
.big-reveal .l--mineur>span{font-size:.52em;font-weight:600;opacity:.62}

@media(max-width:900px){
}


/* ================================================================
   LES ETAPES — DES MORCEAUX D'INTERFACE, PAS DES CAPTURES
   Une capture d'ecran reduite en vignette ne montre ni ce que fait
   l'app ni pourquoi c'est difficile. Ces trois apercus reprennent les
   VRAIS composants des maquettes, a l'identique :
     1. .listen / .eq            — ANALYSIS_SCREEN.html
     2. .mp-item + .sg-timeline  — CAMERA_SCREEN.html (etats fait/actif/attente)
     3. .cut-strip / .cut-block  — RESULT_SCREEN.html
   Ils vivent sur la surface claire de la carte : l'interface est chez elle.
   ================================================================ */
.appui{
  order:-1;                      /* l'apercu passe avant le numero */
  display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;
  min-height:9.6rem;
  margin:0 0 1.4rem;padding:1rem 1.1rem 1.05rem;
  background:var(--bg-deep);border-radius:10px;
  outline:1px solid var(--line);outline-offset:-1px;
}
.appui-k{
  font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.appui-pied{
  display:flex;justify-content:space-between;gap:.8rem;
  font-size:.85rem;font-weight:700;letter-spacing:.05em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.appui-pied .ici{color:var(--or-ink);font-weight:800}

/* 1 — l'onde : les temps forts ressortent, le reste recule */
.onde{display:flex;align-items:center;gap:3px;height:4.4rem}
.onde i{
  flex:1;min-width:0;height:var(--h);border-radius:2px;
  background:var(--line-strong);
}
.onde i.fort{background:var(--or)}

/* 2 — les pastilles d'angle : fait · en cours · en attente */
.angles{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 0 .2rem}
.angles::before{
  content:"";position:absolute;
}
.ang{
  position:relative;flex:none;
  width:1.7rem;height:1.7rem;border-radius:var(--pill);
  display:grid;place-items:center;
  font-size:.8rem;font-weight:900;line-height:1;
}
.ang.fait{background:var(--mc);color:#fff}
.ang.actif{background:var(--mc);box-shadow:0 0 0 .32rem color-mix(in srgb,var(--mc) 22%,transparent)}
.ang.attente{background:var(--surface);border:1.5px solid var(--line-strong)}
/* le connecteur, comme dans .mp-item + .mp-item::before */
.ang + .ang::before{
  content:"";position:absolute;top:50%;right:100%;
  width:100%;height:1.5px;margin-top:-.75px;background:var(--line-strong);
}

/* 2 bis — le guide de section : la fenetre de chanson en cours */
.piste{position:relative;height:6px;border-radius:var(--pill);background:var(--line)}
.fenetre{position:absolute;inset:0 auto 0 34%;width:29%;border-radius:var(--pill);background:var(--corail)}


@media(max-width:900px){
  .appui{margin-bottom:1.1rem;min-height:8.8rem}
}

/* ================================================================
   CORRECTIFS RELEVES DANS CHROME, 2536 x 1298
   ================================================================ */

/* ---- 9. Le texte de [ 01 ] ne s'alignait sur rien.
   Le titre vit dans .grid3, donc decale de 30rem ; le corps vivait dans
   .grid2, deux moities de la largeur TOTALE. Resultat sur grand ecran :
   un paragraphe colle au bord gauche, l'autre au milieu, un vide de
   450 px entre le titre et son propre texte. Le corps reprend la grille
   du titre : meme depart, deux colonnes dans l'espace restant. ---- */

/* ---- 10. Tailles : 15,75 px de prose face a un titre de 60 px sur un
   ecran de 2536 px, c'etait illisible. L'affirmation suit la largeur de
   l'ecran, la prose remonte d'un cran. ---- */
.coup{font-size:clamp(23px,2.1vw,3.1rem)}
.sign{font-size:1.15rem}

/* ---- 11. Le defilement coupait les mots sur TOUS les boutons, pas
   seulement dans l'en-tete : « re prevenu », « rche Comment ca ».
   Le correctif n°4 n'avait ete applique qu'a .head. Un bouton qu'on ne
   peut pas lire n'est pas un bouton. Les bandeaux gardent le defilement,
   c'est la qu'il veut dire quelque chose. ---- */

/* ---- [ 01 ] : une colonne, calee sous son titre. Deux blocs, pas cinq.
   Le reste etait du commentaire sur le message au lieu du message. ---- */
.dit{display:grid;gap:1.8rem}
@media(min-width:901px){
  .dit{grid-template-columns:30rem minmax(0,26rem) minmax(0,1fr);gap:20px}
  .dit > p{grid-column:2}
  .dit > .dit-mark{
    position:absolute;
    top:50%;translate:0 -50%;
    left:calc(var(--pad) + 56rem + 40px);right:var(--pad);
    margin-inline:auto;
  }
}
.coup{max-width:26ch;font-size:clamp(21px,1.75vw,2.1rem);margin-top:0}
.sign{margin-top:0;max-width:38ch}

/* ---- 3 — l'ecran de fin : c'est un partage, pas une timeline.
   Repris de EXPORT_SCREEN.html (.btn-share « Partager » + .btn-gallery).
   Le bouton de l'app est en degrade ; ici c'est un aplat, la charte du
   site interdit les degrades. ---- */
.appui--fin{align-items:center;text-align:center;gap:.7rem}
.partage{width:3.6rem;height:3.6rem;color:var(--or);flex:none}
.btn-partage{
  display:block;width:100%;padding:.66rem 1rem;border-radius:10px;
  background:var(--or);color:var(--ink);
  font-size:1.05rem;font-weight:900;letter-spacing:.02em;
}
.btn-galerie{
  display:block;font-size:.92rem;font-weight:800;color:var(--ink-3);
}

/* ---- La colonne de gauche de [ 01 ] etait vide : 450 px de rien a cote
   du message. Le brief demandait justement que le logo vive DANS la page
   et pas seulement dans un coin de l'en-tete — il tient la colonne et
   ancre la section. Le glyphe porte deja ses couleurs : aucun filtre. ---- */
.dit-mark{
  --cote:clamp(10rem, 17vw, 24rem);
  width:var(--cote);height:var(--cote);
  border-radius:calc(var(--cote) * .286);
  padding:calc(var(--cote) * .14);
  background:var(--white);
  align-self:start;
}
@media(max-width:900px){
  .dit-mark{--cote:6.5rem;margin-bottom:.6rem}
}

/* ---- Les marques sociales, pas « ig » et « tt » en texte ---- */
.ibtn svg{width:14px;height:14px;display:block}
.ibtn:hover{background:none}
.ibtn:hover{color:var(--or)}
.ibtn{border-color:currentColor}

.prelaunch-suivre{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem}
.suivre-lien{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--or);border-bottom:1px solid currentColor;padding-bottom:1px;
}
.suivre-lien svg{width:1.15em;height:1.15em;flex:none}

/* ---- Le carre du bas etait un cadre vide. La marque prend le centre de
   l'anneau « SUR LE RYTHME » : l'anneau tourne, la marque reste. ---- */
.connect-mark{
  --cote:5.6rem;
  position:relative;z-index:1;
  width:var(--cote);height:var(--cote);
  border-radius:calc(var(--cote) * .286);
  padding:calc(var(--cote) * .14);
  background:var(--white);
}
.connect-badge b{display:none}

/* ================================================================
   PIED DE PAGE — LA MARQUE N'EST PAS UNE ETIQUETTE DE COLONNE
   « TREMOLO CUT » etait un .kicker : meme corps, meme graisse, meme
   couleur que « Pour qui » et « Disponibilite ». Le nom du produit
   pesait autant qu'un intitule de liste, et le glyphe flottait tout
   seul au-dessus sans rapport avec lui. On reprend le verrou de
   l'en-tete — pastille claire, nom en Baloo 2, CUT en or — et la
   marque prend sa propre colonne.
   ================================================================ */
.foot{
  display:grid;
  grid-template-columns:minmax(0,24rem) minmax(0,1fr);
  gap:clamp(2.4rem,4vw,4rem) clamp(2.5rem,6vw,7rem);
  align-items:start;
}
.foot-marque{display:flex;align-items:center;gap:1rem}
.foot-logo{--cote:4.4rem;margin-bottom:0;flex:none}
.foot-mot{
  font-family:var(--font-titre);
  font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--white);white-space:nowrap;
}
.foot-mot i{font-style:normal;font-weight:700;color:var(--or)}
.foot-baseline{
  margin-top:1.2rem;font-size:1.15rem;line-height:1.5;
  color:rgba(255,255,255,.7);max-width:30ch;
}
.foot-grid{grid-template-columns:repeat(3,1fr)}
.foot-legal{grid-column:1/-1;margin-top:0}

@media(max-width:900px){
  .foot{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-mot{font-size:1.8rem}
  .foot-logo{--cote:3.6rem}
}