/* ==========================================================================
   Ifham — Landing design system
   Direction « Manuscrit + IA discret » : crème manuscrit, OR de lecture,
   TEAL de calligraphie, accent INDIGO froid pour l'UI moderne.
   4 ambiances, comme dans l'app — 2 par mode :
     · Clair  : Crème (défaut) · Sépia
     · Sombre : Vert/émeraude  · Bleu nuit
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..700&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Amiri:ital,wght@0,400;0,700;1,400&family=Boldonse&display=swap');

:root {
  /* ── LIGHT — crème manuscrit (thème par défaut) ───────────────── */
  --bg:#FBF6EA; --bg2:#FFFFFF; --bg3:#F4EEDF; --bg4:#EBE2CE;
  --paper:#FFFDF8;

  /* Les 2 couleurs du thème clair : crème → sépia (ambiance de fond) */
  --tone-a:#FBF6EA; --tone-b:#E1C99B;

  /* Encre (texte) */
  --ink:#16302C;
  --w:#16302C;
  --t1:rgba(22,48,44,.94); --t2:rgba(22,48,44,.72); --t3:rgba(22,48,44,.55);
  --t4:rgba(22,48,44,.42); --t5:rgba(22,48,44,.30); --t6:rgba(22,48,44,.62);

  /* OR — accent de lecture (texte arabe, marqueurs) */
  --gold:#9A7B2A;        /* or lisible sur crème (texte) */
  --gold-dec:#c5a94ec9;    /* or décoratif (filets, halos) */
  --gold-soft:rgba(197,169,78,.14);
  --gold-line:rgba(168,137,42,.34);
  --reading:rgba(212,175,55,.34);   /* surligneur de lecture (clair) */
  /* Reflet « ShineText » : profond → glint → or de marque (lisible sur crème) */
  --shine-a:#6E5413; --shine-b:#C9A136; --shine-c:#9A7B2A;

  /* TEAL — calligraphie / identité */
  --teal:#1A4D5C; --teal2:#2A7A6E; --teal-soft:rgba(26,77,92,.08);

  /* Accent froid « IA » (UI moderne, chips, focus) */
  --ai:#5B6CFF; --ai-soft:rgba(91,108,255,.09);

  /* Surfaces & bordures */
  --bord:rgba(22,48,44,.12); --bord2:rgba(22,48,44,.18);
  --card:#FFFDF8; --card2:#FBF6EA;
  --shadow:0 24px 70px rgba(58,46,18,.10), 0 4px 16px rgba(58,46,18,.05);
  --shadow-sm:0 8px 28px rgba(58,46,18,.08);
  --glow:rgba(197,169,78,.20);
  --glass-sheen:rgba(255,255,255,.55);   /* liseré de verre (clair) */
  /* Halo dégradé coloré discret derrière les téléphones (indigo · teal · or) */
  --phone-glow:
    radial-gradient(42% 55% at 27% 40%, rgba(91,108,255,.30), transparent 70%),
    radial-gradient(46% 52% at 77% 34%, rgba(42,122,110,.30), transparent 72%),
    radial-gradient(60% 50% at 52% 88%, rgba(212,175,55,.34), transparent 72%);

  --ok:#1F9D6B; --warn:#C9882B; --err:#C2462F;

  /* Typo */
  --ss:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sf:'Fraunces',Georgia,'Times New Roman',serif;
  --sm:'DM Mono',ui-monospace,'SF Mono',monospace;
  --ar:'Amiri','Scheherazade New',serif;
  --disp:'Boldonse',var(--sf);

  --maxw:1180px;
}

/* ── DARK — nuit émeraude ───────────────────────────────────────── */
[data-theme="dark"] {
  --bg:#0A1716; --bg2:#0C251E; --bg3:#0F3126; --bg4:#153E30;
  --paper:#0C221B;

  /* Les 2 couleurs du thème sombre : vert → bleu nuit (ambiance de fond) */
  --tone-a:#0A1716; --tone-b:#0B1E38;

  --ink:#FFFFFF;
  --w:#FFFFFF;
  --t1:rgba(255,255,255,.94); --t2:rgba(220,236,228,.74); --t3:rgba(220,236,228,.55);
  --t4:rgba(220,236,228,.42); --t5:rgba(220,236,228,.28); --t6:rgba(220,236,228,.64);

  --gold:#E0CA84;
  --gold-dec:#C5A94E;
  --gold-soft:rgba(197,169,78,.16);
  --gold-line:rgba(212,175,55,.40);
  --reading:rgba(224,202,132,.24);   /* surligneur de lecture (sombre) */
  /* Reflet « ShineText » : palette fidèle à l'app (or profond → clair → marque) */
  --shine-a:#B98A2E; --shine-b:#F7E7A6; --shine-c:#D6B855;

  --teal:#86D9C2; --teal2:#4FB89E; --teal-soft:rgba(0,201,167,.08);

  --ai:#8AA0FF; --ai-soft:rgba(138,160,255,.13);

  --bord:rgba(255,255,255,.10); --bord2:rgba(255,255,255,.16);
  --card:#0F3126; --card2:#0C251E;
  --shadow:0 28px 80px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.30);
  --shadow-sm:0 10px 30px rgba(0,0,0,.35);
  --glow:rgba(197,169,78,.22);
  --glass-sheen:rgba(255,255,255,.08);   /* liseré de verre (sombre) */
  --phone-glow:
    radial-gradient(42% 55% at 27% 40%, rgba(138,160,255,.34), transparent 70%),
    radial-gradient(46% 52% at 77% 34%, rgba(79,184,158,.32), transparent 72%),
    radial-gradient(60% 50% at 52% 88%, rgba(224,202,132,.34), transparent 72%);

  --ok:#10C987; --warn:#F0B651; --err:#F0735B;
}

/* ── Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{
  font-family:var(--ss);background:var(--bg);color:var(--w);
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
  line-height:1.6;transition:background .4s,color .4s;
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--gold-dec);border-radius:4px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* Fond ambiant : halos or/IA par-dessus le dégradé des 2 couleurs du thème
   (crème → sépia en clair · vert → bleu nuit en sombre). Fixé : les deux
   teintes restent visibles à l'écran quel que soit le défilement. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%, var(--gold-soft), transparent 60%),
    radial-gradient(760px 480px at 8% 6%, var(--ai-soft), transparent 55%),
    linear-gradient(152deg, var(--tone-a) 0%, var(--tone-a) 38%, var(--tone-b) 100%);
  transition:background .4s;
}

/* ── Typo helpers ───────────────────────────────────────────────── */
.eyb{
  font-family:var(--sm);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:9px;
}
.eyb::before{content:'';width:22px;height:1px;background:var(--gold-line)}
.eyb.center::after{content:'';width:22px;height:1px;background:var(--gold-line)}
.eyb.center{justify-content:center}

/* Titres : Fraunces alourdi + serré pour l'impact « Speechify », identité conservée */
h1,h2,h3{font-family:var(--sf);font-weight:600;letter-spacing:-.025em;line-height:1.04}
h2.sec-h{font-size:clamp(34px,5.2vw,56px);font-weight:600;font-variation-settings:'opsz' 110}
h2.sec-h em{font-style:italic;font-weight:500;color:var(--gold)}
.lead{font-size:clamp(17px,1.9vw,21px);color:var(--t2);max-width:46ch;line-height:1.6}

.ar{font-family:var(--ar);direction:rtl;unicode-bidi:isolate}

/* ── Buttons ────────────────────────────────────────────────────── */
/* Boutons pilule — signature « Speechify » : arrondi total, gras, gros */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ss);font-size:16px;font-weight:700;cursor:pointer;
  border:none;border-radius:999px;padding:15px 30px;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .22s,background .2s;
  white-space:nowrap;letter-spacing:-.01em;
}
.btn-gold{
  color:var(--paper);
  background:#c5a94e;
}
.btn-gold:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 38px rgba(168,137,42,.42), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:active{transform:translateY(0) scale(.99)}
.btn-ghost{
  color:var(--w);background:transparent;border:1.5px solid var(--bord2);
}
.btn-ghost:hover{border-color:var(--gold);background:var(--gold-soft)}
.btn-lg{padding:18px 36px;font-size:17px}
.btn-sm{padding:11px 22px;font-size:14.5px}

/* ── NAV ────────────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--bord);transition:background .4s,border-color .4s;
}
.nlogo{display:flex;align-items:center;cursor:pointer}
.nlogo img{height:30px;width:auto}
.nlinks{display:flex;align-items:center;gap:28px;margin-left:42px;margin-right:auto}
.nlink{font-size:14px;color:var(--t2);cursor:pointer;background:none;border:none;font-family:var(--ss);transition:color .15s}
.nlink:hover{color:var(--w)}
.ntools{display:flex;align-items:center;gap:10px}
.icobtn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bord);border-radius:10px;background:var(--card2);
  color:var(--t2);cursor:pointer;font-family:var(--sm);font-size:12px;font-weight:500;
  transition:all .18s;
}
.icobtn:hover{color:var(--gold);border-color:var(--gold-line)}
.icobtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-sun{display:none}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* Sélecteur de langue */
.langsel{position:relative}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:158px;background:var(--card);
  border:1px solid var(--bord2);border-radius:12px;padding:6px;box-shadow:var(--shadow);
  display:none;flex-direction:column;gap:2px;z-index:300;
}
.lang-menu.open{display:flex}
.lang-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
  border-radius:8px;font-size:14px;color:var(--t2);cursor:pointer;background:none;border:none;
  font-family:var(--ss);text-align:left;width:100%;transition:background .15s,color .15s;
}
.lang-opt:hover{background:var(--gold-soft);color:var(--w)}
.lang-opt.act{color:var(--gold)}
.lang-opt .code{font-family:var(--sm);font-size:11px;color:var(--t4)}
.lang-opt.act .code{color:var(--gold)}

.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;border:1px solid var(--bord);border-radius:10px;background:var(--card2);cursor:pointer;align-items:center;justify-content:center}
.hamburger span{width:17px;height:1.6px;background:var(--w);transition:.2s}

.mobile-menu{
  position:fixed;top:64px;left:0;right:0;z-index:190;background:var(--bg);
  border-bottom:1px solid var(--bord);padding:14px 28px 22px;display:none;flex-direction:column;gap:6px;
}
.mobile-menu.open{display:flex}
.mobile-menu .nlink{padding:11px 0;border-bottom:1px solid var(--bord);font-size:15px}

/* ── HERO ───────────────────────────────────────────────────────── */
.hero{padding:136px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero-h1{font-size:clamp(44px,6.6vw,76px);font-weight:600;font-variation-settings:'opsz' 144;margin:22px 0 24px;letter-spacing:-.035em;line-height:1}
.hero-h1 em{font-style:italic;font-weight:500;color:var(--gold)}
/* « ShineText » : un reflet doré traverse le mot en boucle. Le texte sert de
   masque (background-clip:text) ; le dégradé périodique fait 2× la largeur et
   se décale d'exactement une période → boucle sans couture (cf. ShineText.tsx). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-h1 em{
    background-image:linear-gradient(90deg,
      var(--shine-a),var(--shine-b),var(--shine-c),
      var(--shine-a),var(--shine-b),var(--shine-c),var(--shine-a));
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:heroShine 6s linear infinite;
  }
}
@keyframes heroShine{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .hero-h1 em{animation:none;background:none;-webkit-text-fill-color:var(--gold)}
}
.hero-sub{font-size:clamp(17px,1.9vw,20px);color:var(--t2);max-width:46ch;line-height:1.6}
/* Bureau (hero sur deux colonnes) : titre et accroche plus contenus */
@media (min-width:941px){
  .hero-h1{font-size:clamp(40px,4.5vw,58px);margin:20px 0 20px}
  .hero-sub{font-size:17px;max-width:48ch}
}

/* Waitlist form */
.wl{margin-top:30px;max-width:540px}
.wl-form{display:flex;gap:9px;background:var(--card);border:1px solid var(--bord2);border-radius:14px;padding:7px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s;border-radius:50px}
.wl-form:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft); border-radius:50px}
.wl-form input{flex:1 1 auto;min-width:0;border:none;background:none;outline:none;font-family:var(--ss);font-size:15px;color:var(--w);padding:9px 12px; }
.wl-form input::placeholder{color:var(--t4)}
.wl-form .btn{border-radius:50px}
.wl-note{margin-top:12px;font-size:13px;color:var(--t3);display:flex;align-items:center;gap:8px}
.wl-note svg{width:14px;height:14px;stroke:var(--teal2);fill:none;stroke-width:2}
.wl-ok{display:none;align-items:center;gap:10px;padding:16px 18px;border-radius:14px;background:var(--teal-soft);border:1px solid var(--bord);color:var(--w);font-size:15px}
.wl-ok.show{display:flex}
.wl-ok svg{width:20px;height:20px;stroke:var(--teal2);fill:none;stroke-width:2;flex-shrink:0}
.wl.sent .wl-form,.wl.sent .wl-note{display:none}

/* Hero visual — page manuscrit + popin dico qui émerge dessous */
.hero-visual{position:relative;padding:26px 14px 192px}
.paper{
  position:relative;z-index:1;background:var(--paper);border:1px solid var(--bord);
  border-radius:28px;padding:52px 40px 58px;box-shadow:var(--shadow);text-align:center;
}
.paper::after{content:'';position:absolute;inset:0;border-radius:28px;box-shadow:inset 0 0 70px rgba(168,137,42,.05);pointer-events:none}
.paper-corner{position:absolute;width:46px;height:46px;opacity:.45;z-index:2}
.paper-corner svg{width:100%;height:100%;stroke:var(--gold-dec);fill:none;stroke-width:1.1}
.paper-corner.tl{top:16px;left:16px}
.paper-corner.br{bottom:16px;right:16px;transform:rotate(180deg)}
.matn{font-family:var(--ar);direction:rtl;color:var(--teal);font-size:clamp(28px,3.8vw,40px);line-height:1.9;letter-spacing:0}
[data-theme="dark"] .matn{color:#CFE9DF}
.matn .word{cursor:pointer;transition:color .2s,background-color .22s ease,box-shadow .22s ease;padding:0 .04em;position:relative;border-radius:8px}
.matn .word.hot{color:var(--gold)}
.matn .word.hot::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:2px;background:var(--gold-dec);border-radius:2px;opacity:.7}
.matn .word.hot::before{
  content:'';position:absolute;left:50%;top:50%;width:1.7em;height:1.7em;border-radius:50%;
  border:2px solid var(--gold-dec);transform:translate(-50%,-50%) scale(.4);opacity:0;
  pointer-events:none;animation:tap 2.8s ease-in-out infinite;
}
@keyframes tap{0%,68%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}80%,92%{opacity:.85;transform:translate(-50%,-50%) scale(1)}}
.matn-tr{margin-top:18px;font-family:var(--sf);font-style:italic;font-size:15px;color:var(--t3);letter-spacing:.01em}
.matn-more{margin-top:22px;padding-top:20px;border-top:1px solid var(--gold-line);direction:rtl;font-family:var(--ar);color:var(--teal)}
.matn-more p{font-size:clamp(20px,2.6vw,26px);line-height:1.95}
.matn-more .word{cursor:pointer;border-radius:8px;padding:0 .04em;opacity:.34;transition:opacity .45s ease,background-color .22s ease,box-shadow .22s ease}
.matn-more .word.read,.matn-more .word.reading{opacity:1}
[data-theme="dark"] .matn-more{color:#CFE9DF}
[data-theme="dark"] .matn-more .word{opacity:.26}
[data-theme="dark"] .matn-more .word.read,[data-theme="dark"] .matn-more .word.reading{opacity:1}

/* ── Surligneur de lecture « façon Speechify » : il balaie le texte mot à mot ──
   Fusion avec le concept Ifham : arrivé sur le mot-clé, la popin dico s'ouvre. */
.matn .word.read,.matn-more .word.read{color:var(--teal2)}
.matn .word.reading,.matn-more .word.reading{
  background:var(--reading);
  box-shadow:0 0 0 .16em var(--reading);   /* étend le surligneur autour du mot, sans décaler la mise en page */
  color:var(--teal);
}
[data-theme="dark"] .matn .word.reading,[data-theme="dark"] .matn-more .word.reading{color:#EAF6F0}

/* Lecteur : bouton play/pause + barre de progression (motif Speechify) */
.reader{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--gold-line)}
.reader-btn{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#E3CD86,var(--gold-dec) 55%,#B8923A);color:#231a05;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(168,137,42,.32);transition:transform .18s cubic-bezier(.16,1,.3,1)
}
.reader-btn:hover{transform:scale(1.07)}
.reader-btn:active{transform:scale(.96)}
.reader-btn svg{width:20px;height:20px;fill:currentColor}
.reader-btn .ic-pause{display:none}
.reader.playing .reader-btn .ic-play{display:none}
.reader.playing .reader-btn .ic-pause{display:block}
.reader-track{flex:1;height:6px;border-radius:99px;background:var(--gold-line);overflow:hidden}
.reader-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold-dec),var(--teal2));transition:width .25s linear}
.reader-lbl{font-family:var(--sm);font-size:11px;letter-spacing:.06em;color:var(--t3);white-space:nowrap}

/* Mot actif (révélé) + arrêt du halo */
.matn .word.hot.active{color:var(--gold);background:var(--gold-soft);border-radius:7px}
.matn .word.hot.active::before{animation:none;opacity:0}

/* Indice de survol */
.tap-hint{
  position:absolute;z-index:4;top:138px;left:50%;transform:translateX(-50%);
  font-family:var(--sm);font-size:11px;letter-spacing:.04em;color:var(--t3);
  background:var(--card);border:1px solid var(--bord);border-radius:99px;padding:6px 13px;
  box-shadow:var(--shadow-sm);white-space:nowrap;transition:opacity .3s;
  display:flex;align-items:center;gap:7px;animation:hintbob 2.6s ease-in-out infinite;
}
.tap-hint::before{content:'';width:8px;height:8px;border-radius:50%;border:1.6px solid var(--gold-dec)}
@keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
.tap-hint.hide{opacity:0;pointer-events:none}

/* Popin dictionnaire enrichie — révélée au survol/tap du mot */
.dictcard{
  position:absolute;z-index:6;left:50%;margin-left:-138px;top:142px;width:336px;
  background:var(--card);border:1px solid var(--bord2);border-radius:18px;box-shadow:var(--shadow);
  padding:16px 18px;text-align:left;direction:ltr;
  opacity:0;transform:translateY(-16px) scale(.97);transform-origin:50% 0;pointer-events:none;
  transition:opacity .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1);
}
.dictcard.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.dictcard::before{
  content:'';position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;
  background:var(--card);border-left:1px solid var(--bord2);border-top:1px solid var(--bord2);
  transform:rotate(45deg);
}
.dc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--bord)}
.dc-word{font-family:var(--ar);direction:rtl;font-size:30px;color:var(--gold);line-height:1.1}
.dc-translit{font-family:var(--sm);font-size:11px;color:var(--t3);margin-top:3px;letter-spacing:.03em}
.dc-type{font-family:var(--sm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal2);background:var(--teal-soft);padding:5px 10px;border-radius:99px;white-space:nowrap}
.dc-k{font-family:var(--sm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:4px}
.dc-v{color:var(--t1);font-size:14px}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord);margin:13px 0;border:1px solid var(--bord);border-radius:11px;overflow:hidden}
.dc-cell{background:var(--card);padding:10px 12px}
.dc-root{font-family:var(--ar);direction:rtl;color:var(--teal);letter-spacing:.22em;font-size:18px}
.dc-arword{font-family:var(--ar);direction:rtl;color:var(--teal);font-size:18px}
.dc-sub{display:block;font-size:11px;color:var(--t3);margin-top:5px;line-height:1.4}
.dc-sub [lang=ar]{font-family:var(--ar);color:var(--teal2)}
.dc-trans{padding:2px 2px 12px;border-bottom:1px solid var(--bord)}
.dc-trans-v{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dc-trans-v .dc-v{font-weight:600;color:var(--gold)}
.dc-ar{font-family:var(--ar);direction:rtl;color:var(--teal);font-size:17px}
.dc-ctx{padding:12px 2px;border-bottom:1px solid var(--bord)}
.dc-ctx-ar{font-family:var(--ar);direction:rtl;font-size:18px;color:var(--teal);line-height:1.7;margin-top:2px}
.dc-ctx-ar em{font-style:normal;color:var(--gold)}
.dc-ctx-src{font-family:var(--sm);font-size:10px;color:var(--t4);margin-top:4px;display:block}
.dc-ai{margin-top:12px;display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--t2);line-height:1.5}
.dc-ai b{color:var(--ai);font-family:var(--sm);font-size:10px;letter-spacing:.06em}
.dc-ai .dot{width:7px;height:7px;border-radius:50%;background:var(--ai);box-shadow:0 0 8px var(--ai);flex-shrink:0;margin-top:4px}

/* Petits badges flottants « surfaces » — au-dessus du papier */
.hbadge{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bord);border-radius:99px;padding:7px 13px;box-shadow:var(--shadow-sm);font-size:12px;font-weight:600;color:var(--t1)}
.hbadge svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.8}
.hb-1{top:0;left:2px;animation:floaty 7s ease-in-out infinite}
.hb-2{top:30px;right:-4px;animation:floaty 5.4s ease-in-out infinite .6s}

/* ── Fond animé : vagues de gradient épaisses du hero ───────────── */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}          /* contenu au-dessus des vagues */
.hero-ripple{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --rx:72%; --ry:44%;        /* origine — recalée sur le mot par JS */
  --wave:16s;                  /* cadence des vagues */
  transition:opacity 1.8s ease;
  /* Teintes des anneaux : or sur crème (clair) — surchargées en vert en sombre */
  --ring-soft:var(--gold-soft);
  --ring-mid:var(--gold-line);
  --ring-strong:var(--gold-dec);
}
[data-theme="dark"] .hero-ripple{
  --ring-soft:rgba(79, 184, 158, 0.021);    /* teal2 ténu */
  --ring-mid:rgba(134, 217, 194, 0.084);    /* menthe (--teal) */
  --ring-strong:rgba(79, 184, 158, 0.064);  /* teal2 marqué */
}

/* Vagues : larges bandes de gradient qui se propagent dans tout le hero */
.hero-ripple .ring{
  position:absolute;left:var(--rx);top:var(--ry);
  width:420px;height:420px;margin:-200px 0 0 -200px;border-radius:50%;
  background:radial-gradient(circle,
    transparent 24%,
     var(--ring-soft) 14%,
    var(--ring-soft) 20%,
    transparent 28%,
    var(--ring-strong) 34%,
    var(--ring-mid) 45%,
    transparent 56%,
    var(--ring-soft) 64%,
    var(--ring-soft) 70%,
    transparent 80%);
  opacity:0;transform:scale(.05) translateZ(0);
  animation:rwave var(--wave) ease-out infinite;
  will-change:transform,opacity;
  backface-visibility:hidden;   /* fixe une couche GPU stable, évite les re-rasters */
}
.hero-ripple .ring:nth-child(2){animation-delay:calc(var(--wave) * .166)}
.hero-ripple .ring:nth-child(3){animation-delay:calc(var(--wave) * .333)}
.hero-ripple .ring:nth-child(4){animation-delay:calc(var(--wave) * .500)}
.hero-ripple .ring:nth-child(5){animation-delay:calc(var(--wave) * .666)}
.hero-ripple .ring:nth-child(6){animation-delay:calc(var(--wave) * .833)}
@keyframes rwave{
  /* L'onde est déjà invisible (opacity 0) bien avant l'ancien scale(9) : on plafonne
     à scale(6) — couvre tout le hero, mais texture GPU bien plus petite → fluide. */
  0%  {opacity:0;   transform:scale(.45) translateZ(0)}
  14% {opacity:.45}
  80% {opacity:0}
  100%{opacity:0;   transform:scale(6) translateZ(0)}
}

/* Survol du mot : les vagues disparaissent totalement, puis arrêt complet */
.hero-ripple.calm{opacity:0}
.hero-ripple.frozen .ring{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  .hero-ripple{display:none}
}

/* ── Vagues dorées au bas du hero : transition vers la section suivante ── */
.hero-waves{
  position:absolute;left:0;right:0;bottom:0px;z-index:0;pointer-events:none; opacity: 0.5;
  height:clamp(70px,12vh,120px);
}
.hero-waves .waves{display:block;width:100%;height:100%}
.hero-waves .parallax > use{
  /* linéaire : une boucle de translation infinie ne doit pas ralentir/accélérer
     aux extrémités, sinon elle « saccade » à chaque raccord */
  animation:wave-move 25s linear infinite;
  will-change:transform;
  transform:translate3d(0,0,0);   /* promotion GPU dès le départ */
}
/* Vitesses + opacités décalées → parallaxe (couches de plus en plus marquées).
   Le remplissage doré #goldShine glisse en travers → reflet de « tranche ». */
.hero-waves .parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s; opacity:.35}
.hero-waves .parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s;opacity:.55}
.hero-waves .parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s;opacity:.8}
.hero-waves .parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s;opacity:1}
@keyframes wave-move{
  0%  {transform:translate3d(-90px,0,0)}
  100%{transform:translate3d(85px,0,0)}
}
/* Arrêts du reflet #goldShine : or sur fond crème (clair) → vert sur fond nuit (sombre) */
.hero-waves .ws-deep  {stop-color:#8e5d21}
.hero-waves .ws-bright{stop-color:#f1de91}
.hero-waves .ws-brand {stop-color:#b79e49}
[data-theme="dark"] .hero-waves .ws-deep  {stop-color:#155245}
[data-theme="dark"] .hero-waves .ws-bright{stop-color:#bff0e2}
[data-theme="dark"] .hero-waves .ws-brand {stop-color:#4fb89e}
@media (prefers-reduced-motion: reduce){
  /* ni défilement ni reflet : vagues statiques (le dégradé animé n'est plus référencé) */
  .hero-waves .parallax > use{animation:none;fill:var(--gold-dec)}
  [data-theme="dark"] .hero-waves .parallax > use{fill:var(--teal2)}
}

/* ── SECTIONS ───────────────────────────────────────────────────── */
.sec{padding:112px 0}
.sec-head{max-width:680px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .lead{margin-top:18px}
.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* Le geste — 4 étapes */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding:30px 26px;background:var(--card);border:1px solid var(--bord);border-radius:24px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .2s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.step-n{font-family:var(--sm);font-size:12px;color:var(--gold);letter-spacing:.1em}
.step-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;margin:14px 0 16px}
.step-ico svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:14px;color:var(--t2);line-height:1.6}
.steps-arrow{display:none}

/* 3 surfaces */
.surfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.surf{position:relative;border:1px solid var(--bord);border-radius:26px;overflow:hidden;background:var(--card);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s}
.surf:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.surf-img{height:180px;overflow:hidden;position:relative}
.surf-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.surf:hover .surf-img img{transform:scale(1.05)}
.surf-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--card) 92%,transparent))}
.surf-body{padding:22px 22px 26px}
.surf-tag{font-family:var(--sm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal2)}
.surf h3{font-size:23px;margin:9px 0 9px}
.surf p{font-size:14.5px;color:var(--t2);line-height:1.6}
.surf-soon{position:absolute;top:14px;right:14px;font-family:var(--sm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--ai-soft);color:var(--ai);padding:4px 10px;border-radius:99px;border:1px solid var(--bord)}

/* Dictionnaire — section cœur */
.dict-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.dict-list{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.dict-feat{display:flex;gap:15px;--fc:var(--teal2);--fcs:var(--teal-soft)}
/* Code couleur par sous-catégorie — repris de la palette du site */
.dict-feat:nth-child(1){--fc:var(--ai);--fcs:var(--ai-soft)}                                     /* indigo */
.dict-feat:nth-child(2){--fc:var(--teal2);--fcs:var(--teal-soft)}                                /* teal */
.dict-feat:nth-child(3){--fc:var(--gold);--fcs:var(--gold-soft)}                                 /* or */
.dict-feat:nth-child(4){--fc:var(--err);--fcs:color-mix(in srgb,var(--err) 12%,transparent)}     /* terracotta */
.dict-feat .di{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:var(--fcs);display:flex;align-items:center;justify-content:center}
.dict-feat .di svg{width:20px;height:20px;stroke:var(--fc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dict-feat h4{font-size:16px;font-family:var(--ss);font-weight:600;margin-bottom:3px}
.dict-feat p{font-size:14px;color:var(--t2);line-height:1.55}

/* Grande carte dico (détaillée) */
.dictbig{background:var(--card);border:1px solid var(--bord2);border-radius:28px;box-shadow:var(--shadow);padding:30px 30px 32px;position:relative;overflow:hidden}
.dictbig::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-dec),var(--teal2))}
.db-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--bord)}
.db-word{font-family:var(--ar);direction:rtl;font-size:46px;color:var(--gold);line-height:1.1}
.db-translit{font-family:var(--sm);font-size:12px;color:var(--t3);letter-spacing:.04em;margin-top:4px}
.db-type{font-family:var(--sm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal2);background:var(--teal-soft);padding:6px 12px;border-radius:99px;white-space:nowrap}
.db-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord);margin:18px 0;border:1px solid var(--bord);border-radius:12px;overflow:hidden}
.db-cell{background:var(--card);padding:13px 15px}
.db-cell .k{font-family:var(--sm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.db-cell .v{font-size:15px;color:var(--t1)}
.db-cell .v.ar{font-family:var(--ar);font-size:20px;color:var(--teal);letter-spacing:.2em}
.db-sense{font-size:15px;color:var(--t2);line-height:1.6}
.db-sense b{color:var(--gold);font-weight:600}
.db-ai{margin-top:18px;display:flex;gap:11px;align-items:center;padding:12px 14px;background:var(--ai-soft);border:1px solid var(--bord);border-left:2px solid var(--ai);border-radius:8px}
.db-ai .dot{width:7px;height:7px;border-radius:50%;background:var(--ai);box-shadow:0 0 9px var(--ai);flex-shrink:0}
.db-ai span{font-size:12.5px;color:var(--t2);font-family:var(--sm);line-height:1.5}

/* Pour qui */
.pourqui{position:relative;overflow:hidden;background:var(--bg2);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
[data-theme="dark"] .pourqui{background:var(--bg2)}
.pourqui>.wrap{position:relative;z-index:1}
.pq-bg{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ar);direction:rtl;font-weight:700;
  font-size:clamp(180px,34vw,560px);line-height:1;letter-spacing:.04em;
  color:var(--teal);opacity:.06;
  white-space:nowrap;pointer-events:none;user-select:none;
  -webkit-mask-image:radial-gradient(ellipse 78% 92% at 50% 50%,transparent 0%,transparent 22%,#000 72%);
          mask-image:radial-gradient(ellipse 78% 92% at 50% 50%,transparent 0%,transparent 22%,#000 72%);
}
[data-theme="dark"] .pq-bg{opacity:.08}
.pq-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pq-points{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.pq-point{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--t1)}
.pq-point svg{width:21px;height:21px;stroke:var(--teal2);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px}
.pq-not{margin-top:22px;padding:16px 18px;border-radius:14px;background:var(--gold-soft);border:1px solid var(--gold-line);font-size:14.5px;color:var(--t1);line-height:1.6}
.pq-not b{color:var(--gold)}
.pq-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.statc{background:var(--card);border:1px solid var(--bord);border-radius:24px;padding:30px 24px;text-align:center;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.statc:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.statc .n{font-family:var(--disp);font-size:clamp(26px,3.1vw,40px);color:var(--gold);line-height:1;letter-spacing:-.02em}
.statc .l{font-size:13.5px;color:var(--t2);margin-top:10px;line-height:1.45}

/* CTA waitlist */
.cta{padding:104px 0}
.cta-card{position:relative;background:var(--teal);border-radius:30px;padding:64px 40px;text-align:center;overflow:hidden;box-shadow:var(--shadow)}
[data-theme="dark"] .cta-card{background:linear-gradient(150deg,#0F3A30,#0C2A23)}
.cta-card::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 320px at 50% -30%,rgba(197,169,78,.30),transparent 65%);pointer-events:none}
.cta-card .ar-deco{position:absolute;font-family:var(--ar);font-size:160px;color:rgba(255,255,255,.05);top:-30px;right:30px;direction:rtl;line-height:1;pointer-events:none}
.cta-h{font-family:var(--sf);font-size:clamp(32px,4.6vw,52px);color:#FBF6EA;position:relative;line-height:1.1}
.cta-h em{font-style:italic;color:var(--gold-dec)}
/* Même reflet « ShineText » que .hero-h1 em. La carte CTA est toujours sur fond
   teal sombre (les deux thèmes) → palette dorée claire fixe pour rester lisible,
   plutôt que les --shine-* qui s'assombrissent en thème clair. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cta-h em{
    background-image:linear-gradient(90deg,
      #B98A2E,#F7E7A6,#D6B855,
      #B98A2E,#F7E7A6,#D6B855,#B98A2E);
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:heroShine 6s linear infinite;
  }
}
@media (prefers-reduced-motion:reduce){
  .cta-h em{animation:none;background:none;-webkit-text-fill-color:var(--gold-dec)}
}
.cta-sub{color:rgba(251,246,234,.82);font-size:17px;margin:18px auto 30px;max-width:46ch;position:relative}
.cta .wl{margin:0 auto;position:relative}
.cta .wl-form{background:rgba(255,255,255,.95);border-color:transparent}
.cta .wl-form input{color:#16302C}
.cta .wl-note{color:rgba(251,246,234,.7);justify-content:center}
.cta .wl-note svg{stroke:var(--gold-dec)}

/* FAQ */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--bord);border-radius:20px;background:var(--card);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.qa[open]{border-color:var(--gold-line);box-shadow:var(--shadow-sm)}
.qa summary{list-style:none;cursor:pointer;padding:22px 26px;font-size:17.5px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{width:22px;height:22px;flex-shrink:0;position:relative;transition:transform .25s}
.qa summary .plus::before,.qa summary .plus::after{content:'';position:absolute;background:var(--gold);border-radius:2px;left:50%;top:50%}
.qa summary .plus::before{width:13px;height:1.7px;transform:translate(-50%,-50%)}
.qa summary .plus::after{width:1.7px;height:13px;transform:translate(-50%,-50%)}
.qa[open] summary .plus{transform:rotate(135deg)}
.qa-body{padding:0 22px 20px;font-size:15px;color:var(--t2);line-height:1.65}

/* ── FOOTER ─────────────────────────────────────────────────────── */
footer{position:relative;border-top:1px solid var(--bord);padding:56px 0 40px;background:var(--bg2)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--shine-a),var(--shine-b),var(--shine-c),var(--shine-b),var(--shine-a));
  background-size:200% 100%;animation:footGold 4s linear infinite}
@keyframes footGold{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){footer::before{animation:none}}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:38px}
.foot-brand img{height:30px;margin-bottom:16px}
.foot-brand p{font-size:14px;color:var(--t3);max-width:34ch;line-height:1.6;font-family:var(--sf);font-style:italic}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h5{font-family:var(--sm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--t2);padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--gold)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:26px;border-top:1px solid var(--bord);flex-wrap:wrap}
.foot-bot p{font-size:13px;color:var(--t4)}
.foot-bot .ar{font-family:var(--ar);color:var(--t3);font-size:16px}

/* ════════════════════════════════════════════════════════════════════════
   GRANDES CARTES — sections « façon Speechify »
   En-tête à gauche (+ CTA à droite) puis grandes cartes arrondies :
   étiquette · gros titre · visuel intégré. Palette Ifham conservée.
   ════════════════════════════════════════════════════════════════════════ */
.sec-head-row{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:44px;flex-wrap:wrap}
.sec-head-row .shr-l{max-width:660px}
.sec-head-row .shr-l .lead{margin-top:16px}
.sec-head-row .shr-cta{flex-shrink:0;margin-bottom:4px}

.bgrid{display:grid;gap:22px}
.bgrid.cols-2{grid-template-columns:1fr 1fr}
.bgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.bgrid + .bgrid{margin-top:22px}

.bcard{
  position:relative;display:flex;flex-direction:column;
  border-radius:30px;border:0px solid var(--bord);background:var(--card);
  padding:32px;overflow:hidden;
  transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s,border-color .2s;
}
.bcard:hover{box-shadow:var(--shadow)}
.bcard-eyb{font-family:var(--sm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal2);margin-bottom:14px;display:block}
.bcard-h{font-family:var(--sf);font-weight:600;font-size:clamp(22px,2.5vw,32px);letter-spacing:-.025em;line-height:1.08}
.bcard-h em{font-style:italic;color:var(--gold)}
.bcard-p{color:var(--t2);font-size:15.5px;line-height:1.62;margin-top:14px;max-width:48ch}
.bcard-visual{margin-top:28px;flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0}

/* Carte accent (mise en avant) — fond teal, comme la carte « hero » de Speechify */
.bcard.accent{background:var(--teal);border-color:transparent;color:#FBF6EA}
[data-theme="dark"] .bcard.accent{background:linear-gradient(150deg,#0F3A30,#0C2A23)}
.bcard.accent .bcard-eyb{color:rgba(251,246,234,.7)}
.bcard.accent .bcard-h{color:#FBF6EA}
.bcard.accent .bcard-h em{color:var(--gold-dec)}
.bcard.accent .bcard-p{color:rgba(251,246,234,.82)}
.bcard.accent::before{content:'';position:absolute;inset:0;background:radial-gradient(640px 320px at 50% -25%,rgba(197,169,78,.26),transparent 65%);pointer-events:none}
.bcard.center{text-align:center;align-items:center}
.bcard.center .bcard-p{margin-left:auto;margin-right:auto}

/* ── « Le geste » : carte accent + démo tap ───────────────────────── */
.gdemo{position:relative;width:100%;max-width:440px;margin-top:8px;background:var(--paper);border-radius:22px;padding:30px 26px 24px;box-shadow:0 22px 50px rgba(0,0,0,.18);text-align:center}
.gdemo-line{font-family:var(--ar);direction:rtl;color:var(--teal);font-size:clamp(24px,3vw,34px);line-height:1.7}
.gdemo-line .hot{color:var(--gold);position:relative;border-radius:8px;padding:0 .06em;background:var(--reading);box-shadow:0 0 0 .14em var(--reading)}
.gdemo-line .hot::before{content:'';position:absolute;left:50%;top:50%;width:1.9em;height:1.9em;border-radius:50%;border:2px solid var(--gold-dec);transform:translate(-50%,-50%) scale(.4);opacity:0;animation:tap 2.8s ease-in-out infinite;pointer-events:none}
.gdemo-chip{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:12px 18px;background:var(--card);border:1px solid var(--bord);border-radius:16px;box-shadow:var(--shadow-sm)}
.gdemo-chip .ga{font-family:var(--ar);direction:rtl;font-size:22px;color:var(--gold)}
.gdemo-chip .gt{font-size:14px;color:var(--t1);font-weight:600}
.gdemo-chip .gd{width:7px;height:7px;border-radius:50%;background:var(--ai);box-shadow:0 0 8px var(--ai)}

.gsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:22px}
.gstep{position:relative;background:var(--card);border:1px solid var(--bord);border-radius:24px;padding:28px 24px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .2s}
.gstep:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold-line)}
.gstep .gi{width:46px;height:46px;border-radius:13px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;margin:14px 0 16px}
.gstep .gi svg{width:23px;height:23px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gstep h3{font-size:20px;margin-bottom:7px}
.gstep p{font-size:14px;color:var(--t2);line-height:1.6}

/* ── Maquette téléphone (captures réelles de l'app) ───────────────── */
.phone{position:relative;isolation:isolate;width:230px;flex-shrink:0;border-radius:42px;padding:7px}

/* Châssis métallique = couche dédiée (::before), pour que les boutons placés
   en dessous (.keys) passent DERRIÈRE la tranche et n'en laissent dépasser
   qu'un fin liseré sur le côté.
   Dégradé : reflets clairs en haut-gauche / bas-droite, cœur sombre. */
.phone::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(155deg,#3a3d46 0%,#1f2128 30%,#0a0b0e 70%,#2c2f37 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.42),  /* éclat de lumière en haut de la tranche */
    inset 0 0 0 1.5px rgba(255,255,255,.06),  /* fin liseré intérieur */
    inset 0 -2px 5px rgba(0,0,0,.55);         /* ombre interne basse (donne du volume) */
}
.phone img{position:relative;width:100%;display:block;border-radius:35px;box-shadow:0 0 0 1px rgba(0,0,0,.6)}

/* ── Boutons physiques, glissés DERRIÈRE le châssis ───────────────────
   .keys occupe tout le téléphone ; ses boutons débordent sur les côtés mais,
   posés sous la tranche (z-index:-2 < ::before:-1), seul leur bord extérieur
   reste visible — comme sur un vrai iPhone. Proportions calées sur un vrai
   cadre (≈ 2,16× plus haut que large). */
.phone .keys{position:absolute;inset:0;z-index:-2;pointer-events:none}
.phone .keys::before,.phone .keys::after{content:'';position:absolute}
.phone .keys::before{                 /* volume + et volume − (clone) à gauche */
  left:-2.5px;top:24%;width:4px;height:36px;border-radius:3px 0 0 3px;
  background:linear-gradient(to right,#41444c,#15171c);  /* face éclairée vers l'extérieur */
  box-shadow:
    0 48px 0 0 #2a2d34,               /* volume − : clone décalé vers le bas */
    inset 0 1px 0 rgba(255,255,255,.22);
}
.phone .keys::after{                  /* bouton veille / marche à droite */
  right:-2.5px;top:30%;width:4px;height:74px;border-radius:0 3px 3px 0;
  background:linear-gradient(to left,#41444c,#15171c);   /* face éclairée vers l'extérieur */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
[data-theme="dark"] .phone::before{
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.34),
    inset 0 0 0 1.5px rgba(255,255,255,.07),
    inset 0 -2px 5px rgba(0,0,0,.6);
}

/* ── « Surfaces » : 3 grandes cartes, téléphone qui dépasse en bas ── */
.surfcard{padding-bottom:0}
.surfcard .bcard-tag{position:absolute;top:18px;right:18px;font-family:var(--sm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--ai-soft);color:var(--ai);padding:5px 11px;border-radius:99px;border:1px solid var(--bord);z-index:3}
.surfcard .bcard-p{margin-bottom:6px}
.surfcard .bcard-visual{margin:24px -32px 0;margin-top:auto;min-height:300px;align-items:flex-end;justify-content:center;overflow:hidden;position:relative}
.surfcard .phone{width:212px;margin-bottom:-154px;transition:transform .35s cubic-bezier(.16,1,.3,1);position:relative;z-index:1}
.surfcard:hover .phone{transform:translateY(-10px)}

/* Halo coloré discret derrière chaque téléphone */
.gphone,.dphone{position:relative}
.gphone::before,.dphone::before,.surfcard .bcard-visual::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:6%;transform:translateX(-50%);
  width:120%;height:74%;background:var(--phone-glow);
  filter:blur(38px);opacity:.8;
}
.gphone .phone,.dphone .phone{position:relative;z-index:1;}

/* ── Halo PRONONCÉ derrière le téléphone — UNE teinte par carte ───────
   Fini le halo tricolore générique : chaque capture a sa couleur, bien
   marquée, qui déborde franchement autour du téléphone. */
.bgrid .surfcard:nth-child(1){--pg:222,164,44}   /* Maktaba — OR ambré profond */
.bgrid .surfcard:nth-child(2){--pg:96,112,205}   /* Scan — INDIGO */
.bgrid .surfcard:nth-child(3){--pg:24,170,114}   /* Mushaf — ÉMERAUDE (Coran) */
.dphone{--pg:96,112,205}                          /* Dictionnaire — INDIGO (IA) */
.surfcard .bcard-visual::before,.dphone::before{
  bottom:-4%;width:142%;height:108%;
  background:radial-gradient(58% 58% at 50% 52%, rgba(var(--pg),.82), rgba(var(--pg),.44) 42%, transparent 70%);
  filter:blur(38px);opacity:1;
}
[data-theme="dark"] .surfcard .bcard-visual::before,[data-theme="dark"] .dphone::before{
  background:radial-gradient(58% 58% at 50% 52%, rgba(var(--pg),.9), rgba(var(--pg),.52) 42%, transparent 70%);
}
/* Surfaces uniquement : halo descendu vers le bas du téléphone */
.surfcard .bcard-visual::before{bottom:-50%}

/* « Le geste » : grand téléphone dans la carte accent */
.gphone{display:flex;justify-content:center;width:100%;margin-top:8px}
.bcard.accent .gphone .phone{width:250px}

/* « Le geste » : flux du geste — 2 étapes de chaque côté du téléphone.
   Les étapes sont « à plat » (sans carte) directement sur le fond accent. */
.gflow{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(28px,5vw,76px);width:100%;margin-top:44px;
}
.gflow .gphone{margin-top:0}
.gflow-col{display:flex;flex-direction:column;gap:54px}
.gflow-left{align-items:flex-end}
.gflow-right{align-items:flex-start}

/* « Le geste » : gradient prononcé sous le téléphone.
   Halo de base élargi + un dégradé chaud (or → teal) bien présent en dessous. */
.gflow .gphone::before{
  width:152%;height:94%;bottom:-10%;
  filter:blur(52px);opacity:.95;
}
.gflow .gphone::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:-15%;transform:translateX(-50%);
  width:130%;height:60%;
  background:
    radial-gradient(58% 72% at 50% 100%, rgba(212,175,55,.5), rgba(212,175,55,.2) 46%, transparent 72%),
    radial-gradient(84% 64% at 50% 92%, rgba(79,184,158,.4), transparent 70%);
  filter:blur(46px);opacity:1;
}

/* Grand dégradé chaud (or → teal) qui remonte du bas de la carte, bien présent.
   Placé au-dessus du fond teal mais SOUS le contenu : isolation + z-index négatif,
   pour ne pas nuire à la lisibilité du texte des étapes. */
.gcard{isolation:isolate}
.gcard::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-14%;transform:translateX(-50%);
  width:100%;height: 100%;
  background:
    radial-gradient(44% 60% at 50% 100%, rgba(255, 223, 116, 0.706), transparent 98%),
    radial-gradient(114% 60% at 50% 100%, rgb(84, 195, 167), transparent 100%),
     radial-gradient(84% 100% at 50% 100%, rgba(59, 131, 123, 0.726), transparent 100%);
  filter:blur(40px);
}

/* étapes « à plat » : cartes RÉELLEMENT transparentes — on neutralise le fond,
   la bordure ET le verre (backdrop-filter + ombre) hérités de .gstep.
   Elles sont aussi agrandies pour occuper davantage la carte. */
.gflow .gstep{
  background:none;border:0;border-radius:0;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  display:flex;flex-direction:row;align-items:center;gap:clamp(14px,1.6vw,24px);
}
.gflow .gstep:hover{transform:none;box-shadow:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.gflow .gbody{display:flex;flex-direction:column;max-width:280px}
/* Colonne gauche : grand numéro à gauche, contenu calé vers le téléphone (droite) */
.gflow-left .gstep{flex-direction:row}
.gflow-left .gbody{text-align:right;align-items:flex-end}
/* Colonne droite : grand numéro à droite, contenu calé vers le téléphone (gauche) */
.gflow-right .gstep{flex-direction:row-reverse}
.gflow-right .gbody{text-align:left;align-items:flex-start}

/* Numéro d'étape : grande typo Boldonse, décorative */
.gflow .gstep .gn{
  font-family:var(--disp);
  font-size:clamp(24px,3.4vw,46px);
  line-height:1.4;letter-spacing:.02em;
  color:var(--gold-dec);
  flex:0 0 auto;
}
.gflow .gstep .gi{
  width:54px;height:54px;border-radius:16px;margin:0 0 18px;
  background:rgba(251,246,234,.10);
  box-shadow:0 0 0 1px rgba(251,246,234,.16) inset;
}
.gflow .gstep .gi svg{width:27px;height:27px;stroke:#FBF6EA}
.gflow .gstep h3{color:#FBF6EA;font-size:23px;margin-bottom:9px}
.gflow .gstep p{color:rgba(251,246,234,.82);font-size:15.5px;line-height:1.62;max-width:30ch}

/* « Dictionnaire » : téléphone centré (vraie popin du dico) */
.dphone{display:flex;justify-content:center;width:100%}
.dphone .phone{width:252px}

/* ── « La même, partout. » : le téléphone glisse depuis la gauche ──── */
.dphone{
  opacity:0;
  transform:translateX(72px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay:.18s;
  will-change:transform,opacity;
}
.reveal.in .dphone{opacity:1;transform:translateX(0)}

/* ── Effet « glass card » sur toutes les cartes ──────────────────────
   Fond translucide + flou d'arrière-plan : le fond ambiant coloré et les
   halos derrière les téléphones transparaissent légèrement. */
.bcard,.gstep,.statc,.qa{
  background:color-mix(in srgb,var(--card) 58%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
  border-color:color-mix(in srgb,var(--w) 13%,transparent);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-sheen);
}
.bcard.accent{background:color-mix(in srgb,var(--teal) 76%,transparent)}
[data-theme="dark"] .bcard.accent{background:color-mix(in srgb,#0F3A30 80%,transparent)}
.bcard.dim{background:color-mix(in srgb,var(--bg3) 55%,transparent)}
/* Conserver le liseré de verre au survol (l'élévation reste gérée par les règles existantes) */
.bcard:hover,.gstep:hover,.statc:hover{box-shadow:var(--shadow), inset 0 1px 0 var(--glass-sheen)}

/* ── Glasscard dans le hero : page manuscrit, popin dico, badges ─────
   La page garde une bonne opacité (lisibilité du texte arabe) mais gagne
   le verre dépoli : les vagues animées et le fond ambiant transparaissent. */
.paper{
  background:color-mix(in srgb,var(--paper) 58%,transparent);
  -webkit-backdrop-filter:blur(42px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-color:color-mix(in srgb,var(--w) 12%,transparent);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-sheen);
}
.dictcard{
  background:color-mix(in srgb,var(--card) 72%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-color:color-mix(in srgb,var(--w) 14%,transparent);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-sheen);
}
.dictcard::before{background:color-mix(in srgb,var(--card) 72%,transparent)}
.hbadge{
  background:color-mix(in srgb,var(--card) 62%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-color:color-mix(in srgb,var(--w) 14%,transparent);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-sheen);
}

/* ── « Pour qui » : comparatif (carte estompée vs carte mise en avant) ─ */
.cmp-rows{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.cmp-row{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5}
.cmp-row svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Carte « Sans Ifham » : fond dégradé rouge bien visible (lecture qui cale) */
.bcard.dim{
  background:linear-gradient(150deg,color-mix(in srgb,var(--err) 30%,var(--card)),color-mix(in srgb,var(--err) 10%,var(--card)));
  border-color:color-mix(in srgb,var(--err) 34%,transparent);
}
[data-theme="dark"] .bcard.dim{background:linear-gradient(150deg,color-mix(in srgb,var(--err) 28%,var(--card)),color-mix(in srgb,var(--err) 9%,var(--card)))}
.bcard.dim::before{content:'';position:absolute;inset:0;background:radial-gradient(640px 320px at 50% -25%,color-mix(in srgb,var(--err) 26%,transparent),transparent 65%);pointer-events:none}
.bcard.dim .cmp-row{color:var(--t2)}
.bcard.dim .cmp-row svg{stroke:var(--err)}
.bcard.accent .cmp-row{color:rgba(251,246,234,.92)}
.bcard.accent .cmp-row svg{stroke:var(--gold-dec)}
.cmp-meter{display:flex;align-items:center;gap:14px;margin-top:26px}
.cmp-meter .mlbl{font-family:var(--sm);font-size:12px;letter-spacing:.04em}
.bcard.dim .cmp-meter .mlbl{color:var(--t3)}
.bcard.accent .cmp-meter .mlbl{color:rgba(251,246,234,.8)}
.cmp-meter .mbar{flex:1;height:8px;border-radius:99px;background:var(--bord2);overflow:hidden}
.bcard.accent .cmp-meter .mbar{background:rgba(255,255,255,.18)}
.cmp-meter .mfill{display:block;height:100%;border-radius:99px}
.bcard.dim .cmp-meter .mfill{width:28%;background:var(--t4)}
.bcard.accent .cmp-meter .mfill{width:100%;background:linear-gradient(90deg,var(--gold-dec),#FBF6EA)}

/* Rangée de stats (réutilise .statc) sous le comparatif */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}

/* ── Reveal au scroll ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.dphone{opacity:1;transform:none;transition:none}.tap-dot,.dictcard,.hbadge{animation:none}}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .hero-visual{max-width:480px;margin:0 auto;width:100%}
  .dict-wrap{grid-template-columns:1fr;gap:42px}
  .pq-grid{grid-template-columns:1fr;gap:38px}
  .steps{grid-template-columns:1fr 1fr}
  .surfaces{grid-template-columns:1fr}
  .surf-img{height:200px}
  /* Grandes cartes */
  .bgrid.cols-3{grid-template-columns:1fr}
  .gsteps{grid-template-columns:1fr 1fr}
  .statrow{grid-template-columns:1fr 1fr}
  /* « Le geste » : téléphone en haut, étapes empilées dessous */
  .gflow{grid-template-columns:1fr;gap:30px;max-width:420px;margin-left:auto;margin-right:auto}
  .gflow .gphone{order:-1}
  .gflow-col{gap:30px}
  .gflow-left,.gflow-right{align-items:stretch}
  /* Mobile : tout aligné à gauche, grand numéro toujours à gauche du contenu */
  .gflow-left .gstep,.gflow-right .gstep{flex-direction:row;align-items:center}
  .gflow-left .gbody,.gflow-right .gbody{text-align:left;align-items:flex-start;max-width:none}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  nav{padding:0 18px}
  .nlinks{display:none}
  .hamburger{display:flex}
  .ntools .nlink-cta{display:none}
  .hero{padding:104px 0 48px}
  .sec{padding:72px 0}
  .cta{padding:72px 0}
  .steps{grid-template-columns:1fr}
  .pq-stats{grid-template-columns:1fr 1fr}
  .db-grid{grid-template-columns:1fr}
  /* Waitlist — empilage propre : champ + bouton distincts (fin de la pilule imbriquée) */
  .wl-form{flex-direction:column;background:none;border-color:transparent;box-shadow:none;padding:0;gap:10px}
  .wl-form:focus-within{box-shadow:none}
  .wl-form input{flex:none;width:100%;text-align:center;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--bord2);box-shadow:var(--shadow-sm)}
  .wl-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  .cta .wl-form{background:none}
  .cta .wl-form input{background:rgba(255,255,255,.95);border-color:transparent}
  .wl-form .btn{width:100%;padding:16px 24px;border-radius:14px}
  .cta-card{padding:48px 22px}
  .foot-cols{gap:40px}
  .hbadge{font-size:11px;padding:6px 11px}
  .hb-1{left:6px;top:2px}
  .hb-2{right:6px;top:22px}
  .dictcard{width:280px;margin-left:-140px}
  /* Grandes cartes */
  .bgrid.cols-2{grid-template-columns:1fr}
  .gsteps{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .bcard{padding:26px}
  /* Téléphone qui descend davantage : on masque le bas du châssis (bezel
     + indicateur d'accueil), on garde le haut (notch). */
  .surfcard .bcard-visual{margin:22px -126px 0;min-height:320px}
  .surfcard .phone{width:216px;margin-bottom:-118px}
}

/* ── « Lire partout » : cartes canal (grand écran · extension · texte libre) ── */
.chancard{padding:28px 28px 30px}
.chancard .ch-ico{width:52px;height:52px;border-radius:15px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.chancard .ch-ico svg{width:25px;height:25px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bgrid .chancard:nth-child(1) .ch-ico{background:var(--ai-soft)}   .bgrid .chancard:nth-child(1) .ch-ico svg{stroke:var(--ai)}
.bgrid .chancard:nth-child(2) .ch-ico{background:var(--teal-soft)} .bgrid .chancard:nth-child(2) .ch-ico svg{stroke:var(--teal2)}
.chancard .bcard-p{max-width:none}

/* ── « Vocabulaire » : 3 étapes en cartes ── */
.gsteps.cols-3{grid-template-columns:repeat(3,1fr);margin-top:0}
.gsteps.cols-3 .gstep{padding:30px 28px 32px;overflow:hidden;min-height:400px}
.gsteps.cols-3 .gstep .gi{margin-top:0}
.gsteps.cols-3 .gstep > :not(.gshot){position:relative;z-index:1}
/* Texte côté début, image côté fin, comme dans les cartes de l'app : le
   paragraphe ne mord que sur l'amorce du fondu (image à .25 au plus). */
.gsteps.cols-3 .gstep p{font-size:15px;max-width:min(50%,46ch)}
/* Capture réelle de l'app en arrière-plan, sur le modèle des cartes « Mes
   documents » de l'app (LibraryHeroCard, LireHomeScreen.tsx) : image sur toute
   la hauteur de la carte, calée côté fin, en « cover », fondue depuis le côté
   texte. Les cartes du site étant en verre translucide, le fondu est un masque
   sur l'image plutôt qu'un voile en aplat. L'image occupe 56 % de la carte (70 %
   dans l'app, où le texte est plus court). Repères du fondu (--gshot-fade, en %
   de l'image) : clair 0 → 0 · 10 → .25 · 28 → 1, soit 44 / 50 / 60 % de la carte ;
   sombre (capture nuit sur carte nuit, raccord plus doux) 0 → 0 · 10 → .15 ·
   30 → .6 · 52 → 1, soit 44 / 50 / 61 / 73 % de la carte.
   Capture claire ou nuit selon le thème : data-light / data-dark + classe .ph
   (applyPhoneTheme dans main.js), comme les maquettes téléphone. */
.gshot{
  --gshot-fade:transparent 0,rgba(0,0,0,.25) 10%,#000 28%;
  position:absolute;z-index:0;top:0;bottom:0;inset-inline-end:0;
  width:min(56%,340px);height:100%;object-fit:cover;object-position:100% 50%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,var(--gshot-fade));
          mask-image:linear-gradient(to right,var(--gshot-fade));
}
[data-theme="dark"] .gshot{--gshot-fade:transparent 0,rgba(0,0,0,.15) 10%,rgba(0,0,0,.6) 30%,#000 52%}
[dir="rtl"] .gshot{
  object-position:0 50%;
  -webkit-mask-image:linear-gradient(to left,var(--gshot-fade));
          mask-image:linear-gradient(to left,var(--gshot-fade));
}
.vocab-note{margin-top:22px;font-family:var(--sm);font-size:12.5px;letter-spacing:.03em;color:var(--t3);text-align:center}
@media (max-width:980px){.gsteps.cols-3{grid-template-columns:1fr}}

/* ── « Vocabulaire » : tableau de révision (maquette fidèle au PDF de l'app) ── */
.tbl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tbl-chip{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:#c5a94e;color:var(--paper);font-weight:700;font-size:13.5px}
.tbl-chip.alt{background:transparent;color:var(--w);border:1.5px solid var(--bord2)}
.rtable-card{padding:24px 24px 18px}
.rtable-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--gold-line)}
.rtable-title{font-family:var(--sf);font-weight:600;font-size:19px}
.rtable-course{font-family:var(--sm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.rtable-sec{font-family:var(--sm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal2);margin:16px 0 8px}
.rtable-sec b{color:var(--gold);font-weight:500;margin-left:4px}
.rtable{width:100%;border-collapse:collapse;font-family:var(--ar);font-size:16px;color:var(--t1);table-layout:fixed}
.rtable th{font-size:14px;font-weight:700;color:var(--gold);background:var(--gold-soft);padding:7px 8px;text-align:center;border:1px solid var(--bord)}
.rtable td{padding:7px 8px;text-align:center;border:1px solid var(--bord);line-height:1.5}
.rtable td.w{color:var(--teal);font-weight:700}
.rtable td.fr{font-family:var(--ss);font-size:12.5px;color:var(--t2);text-align:left}
.rtable tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--card2) 60%,transparent)}
.rtable th:first-child,.rtable td:first-child{width:30px;color:var(--t4);font-size:12px}
.rtable-foot{margin-top:14px;font-family:var(--sm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);text-align:center}
@media (max-width:680px){.rtable{font-size:14px}.rtable th{font-size:12px}.rtable td.fr{font-size:11.5px}.rtable th,.rtable td{padding:6px 5px}}

/* ── PAGES LÉGALES (confidentialité, conditions d'utilisation) ───── */
.legal{padding:128px 0 96px}
.legal-wrap{max-width:820px}
.legal-head{margin-bottom:36px}
.legal-head .sec-h{margin-top:16px}
.legal-meta{margin-top:18px;font-family:var(--sm);font-size:12px;letter-spacing:.04em;color:var(--t3)}
.legal-note{margin-top:14px;font-size:14px;color:var(--t3);font-style:italic}
.legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal-intro{font-size:18px;color:var(--t1);line-height:1.65}
.legal-toc{list-style:decimal inside;columns:2;column-gap:32px;margin:32px 0 48px;padding:22px 26px;
  border:1px solid var(--bord);border-radius:16px;background:var(--card);font-size:14px;color:var(--t3)}
.legal-toc li{padding:4px 0;break-inside:avoid}
.legal-toc a{color:var(--t2);text-decoration:none}
.legal-toc a:hover{color:var(--gold)}
.legal-body section{margin-bottom:40px}
.legal-body h2{font-size:clamp(21px,2.4vw,26px);line-height:1.2;letter-spacing:-.015em;margin-bottom:14px}
.legal-body section p,.legal-body li{font-size:16px;color:var(--t2);line-height:1.7}
.legal-body section p+p,.legal-body section ul+p,.legal-body section p+ul{margin-top:12px}
.legal-body section ul{padding-inline-start:22px}
.legal-body section li+li{margin-top:8px}
.legal-body b{color:var(--t1);font-weight:600}
@media (max-width:680px){
  .legal{padding:104px 0 64px}
  .legal-toc{columns:1;padding:18px 20px}
}

/* ── REPÈRES PREMIUM ─────────────────────────────────────────────── */
.prem{display:inline-flex;align-items:center;gap:5px;font-family:var(--sm);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);padding:4px 10px;border-radius:99px;white-space:nowrap;vertical-align:middle}
/* Icône « sparkles » d'Ionicons, celle du premium dans l'app. En masque : elle suit la couleur du texte. */
.prem::before{content:'';flex:none;width:11px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M208 512a24.84 24.84 0 01-23.34-16l-39.84-103.6a16.06 16.06 0 00-9.19-9.19L32 343.34a25 25 0 010-46.68l103.6-39.84a16.06 16.06 0 009.19-9.19L184.66 144a25 25 0 0146.68 0l39.84 103.6a16.06 16.06 0 009.19 9.19l103 39.63a25.49 25.49 0 0116.63 24.1 24.82 24.82 0 01-16 22.82l-103.6 39.84a16.06 16.06 0 00-9.19 9.19L231.34 496A24.84 24.84 0 01208 512zM88 176a14.67 14.67 0 01-13.69-9.4l-16.86-43.84a7.28 7.28 0 00-4.21-4.21L9.4 101.69a14.67 14.67 0 010-27.38l43.84-16.86a7.31 7.31 0 004.21-4.21L74.16 9.79A15 15 0 0186.23.11a14.67 14.67 0 0115.46 9.29l16.86 43.84a7.31 7.31 0 004.21 4.21l43.84 16.86a14.67 14.67 0 010 27.38l-43.84 16.86a7.28 7.28 0 00-4.21 4.21l-16.86 43.84A14.67 14.67 0 0188 176zM400 256a16 16 0 01-14.93-10.26l-22.84-59.37a8 8 0 00-4.6-4.6l-59.37-22.84a16 16 0 010-29.86l59.37-22.84a8 8 0 004.6-4.6l22.67-58.95a16.45 16.45 0 0113.17-10.57 16 16 0 0116.86 10.15l22.84 59.37a8 8 0 004.6 4.6l59.37 22.84a16 16 0 010 29.86l-59.37 22.84a8 8 0 00-4.6 4.6l-22.84 59.37A16 16 0 01400 256z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M208 512a24.84 24.84 0 01-23.34-16l-39.84-103.6a16.06 16.06 0 00-9.19-9.19L32 343.34a25 25 0 010-46.68l103.6-39.84a16.06 16.06 0 009.19-9.19L184.66 144a25 25 0 0146.68 0l39.84 103.6a16.06 16.06 0 009.19 9.19l103 39.63a25.49 25.49 0 0116.63 24.1 24.82 24.82 0 01-16 22.82l-103.6 39.84a16.06 16.06 0 00-9.19 9.19L231.34 496A24.84 24.84 0 01208 512zM88 176a14.67 14.67 0 01-13.69-9.4l-16.86-43.84a7.28 7.28 0 00-4.21-4.21L9.4 101.69a14.67 14.67 0 010-27.38l43.84-16.86a7.31 7.31 0 004.21-4.21L74.16 9.79A15 15 0 0186.23.11a14.67 14.67 0 0115.46 9.29l16.86 43.84a7.31 7.31 0 004.21 4.21l43.84 16.86a14.67 14.67 0 010 27.38l-43.84 16.86a7.28 7.28 0 00-4.21 4.21l-16.86 43.84A14.67 14.67 0 0188 176zM400 256a16 16 0 01-14.93-10.26l-22.84-59.37a8 8 0 00-4.6-4.6l-59.37-22.84a16 16 0 010-29.86l59.37-22.84a8 8 0 004.6-4.6l22.67-58.95a16.45 16.45 0 0113.17-10.57 16 16 0 0116.86 10.15l22.84 59.37a8 8 0 004.6 4.6l59.37 22.84a16 16 0 010 29.86l-59.37 22.84a8 8 0 00-4.6 4.6l-22.84 59.37A16 16 0 01400 256z'/%3E%3C/svg%3E") center/contain no-repeat}
.prem-tag{position:absolute;top:18px;right:18px;z-index:3}
[dir="rtl"] .prem-tag{right:auto;left:18px}
.prem-note{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--t3)}
.prem-note .prem,.vocab-note .prem{margin-inline-end:6px}