@layer overrides{
/* ── Mode Ado (12-18 ans) : reskin « Studio Jeune » ────────────────────────────────────
   Scopé à html[data-mode="teen"]. Registre plus mûr et créatif que le mode Kids : pas de
   « tout rond » enfantin, palette électrique (violet/cyan), surfaces nettes, accents en
   dégradé. Comme Kids, on surcharge surtout les TOKENS pour que ça cascade partout. */

html[data-mode="teen"]{
  --radius:12px; --radius-sm:8px; --radius-modal:18px;
  --accent:#7c5cff; --accent-h:#653ff0; --link:#22d3ee;
  --focus:0 0 0 3px rgba(124,92,255,.45);
  --ok:#2dd4bf; --warn:#fbbf24; --err:#fb7185;
}
html[data-mode="teen"][data-theme="dark"]{
  --bg:#0b0e1a; --bg2:#070a14; --card:#131829; --card2:#1a2138; --line:#26304d; --line2:#1a2138;
  --txt:#e9edff; --mut:#9aa6cc; --mut2:#6b7699;
  --header-bg:rgba(11,14,26,.78); --backdrop:rgba(7,10,20,.72);
  --shadow:0 14px 40px rgba(5,8,18,.6);
}
html[data-mode="teen"][data-theme="light"]{
  --bg:#f4f5fb; --bg2:#ffffff; --card:#ffffff; --card2:#f2f1fe; --line:#e2e1f5; --line2:#eeedfb;
  --txt:#1b1d2e; --mut:#5b6280; --mut2:#8086a3;
  --header-bg:rgba(244,245,251,.82); --backdrop:rgba(27,29,46,.34);
  --shadow:0 14px 36px rgba(124,92,255,.16);
}

/* En-tête : fine ligne de dégradé sous la barre (vibe « créatif »). */
html[data-mode="teen"] header{
  background:var(--header-bg); backdrop-filter:saturate(1.15) blur(8px);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--accent),var(--link)) 1;
}

/* Boutons primaires : dégradé électrique, coins nets, pas de pilule. */
html[data-mode="teen"] button.primary,
html[data-mode="teen"] .primary{
  background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--link) 55%,var(--accent)));
  border:none; font-weight:var(--fw-strong); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent);
}
html[data-mode="teen"] button.primary:hover,
html[data-mode="teen"] .primary:hover{ filter:brightness(1.06) }

/* Item de nav actif : liseré dégradé à gauche. */
html[data-mode="teen"] .snav-b.on{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:inset 3px 0 0 0 var(--accent);
}

/* Titres : compacts et affirmés. */
html[data-mode="teen"] .section-title{ font-size:var(--fs-xl); font-weight:var(--fw-bold); letter-spacing:-.2px }

/* ── Hero d'accueil en mode Ado : on masque la mascotte enfantine et on adopte un bandeau
   plus sobre, marqué d'une barre d'accent dégradée. ── */
html[data-mode="teen"] .kids-mascot{ display:none }
html[data-mode="teen"] .kids-hero{
  border-radius:var(--radius-modal);
  border:1px solid var(--line);
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--card)),
                            color-mix(in srgb,var(--link) 10%,var(--card)));
  position:relative; overflow:hidden;
}
html[data-mode="teen"] .kids-hero::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--accent),var(--link));
}
html[data-mode="teen"] .kids-hero-txt{ padding-left:var(--sp-6)}
html[data-mode="teen"] .kids-hero-txt strong{ font-size:var(--fs-lg); font-weight:var(--fw-bold) }

}