@layer overrides{
/* ── Mode Kids (6-12 ans) : interface VRAIMENT enfantine (pas bébé) ─────────────────────
   Scopé à html[data-mode="kids"]. On va au-delà du simple « coins arrondis » : grandes tuiles
   colorées, fond joueur, typo ronde, mascotte présente, micro-animations. On surcharge les
   TOKENS (cascade partout) PUIS on retravaille les écrans clés (accueil, cartes, nav, Discovery).
   Esprit Duolingo/Scratch : coloré et joyeux, mais lisible et net - jamais « bébé ». */

html[data-mode="kids"]{
  --radius:20px; --radius-sm:14px; --radius-modal:30px;
  --accent:#ff7a59; --accent-h:#ef5d39; --link:#ff8a3d;
  --focus:0 0 0 5px rgba(255,122,89,.38);
  --ok:#36c98d; --warn:#ffb020; --err:#ff5a76;
  /* Palette « bonbon » : couleurs vives qui tournent sur les tuiles (indépendantes de l'accent
     perso, pour rester coloré même si l'utilisateur a choisi une teinte). */
  --k1:#ff7a59; --k2:#ffb020; --k3:#36c98d; --k4:#4cc4ff; --k5:#9b8cff; --k6:#ff6fae;
}
html[data-mode="kids"][data-theme="dark"]{
  --bg:#1a1430; --bg2:#120e24; --card:#241b40; --card2:#2c2150; --line:#3a2d63; --line2:#2c2150;
  --txt:#f6f1ff; --mut:#c4b3ec; --mut2:#9a86c4;
  --header-bg:rgba(26,20,48,.78); --backdrop:rgba(18,14,36,.72);
  --shadow:0 16px 44px rgba(18,14,36,.55);
}
html[data-mode="kids"][data-theme="light"]{
  --bg:#fff6ee; --bg2:#ffffff; --card:#ffffff; --card2:#fff0e3; --line:#ffe2d0; --line2:#fff1e6;
  --txt:#36261e; --mut:#9a7b68; --mut2:#b89a86;
  --header-bg:rgba(255,246,238,.82); --backdrop:rgba(54,38,30,.3);
  --shadow:0 16px 40px rgba(255,122,89,.2);
}

/* Typo ronde et généreuse. ui-rounded → SF Rounded sur Apple ; repli système ailleurs. */
html[data-mode="kids"] body{
  font-size:var(--fs-lg); line-height:var(--lh-normal);
  font-family:ui-rounded,"SF Pro Rounded","Baloo 2","Quicksand","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* Fond joueur : taches de couleur douces, fixes, derrière tout le contenu. */
html[data-mode="kids"] body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(40vw 40vw at 8% 4%, color-mix(in srgb,var(--k4) 35%,transparent), transparent 60%),
    radial-gradient(36vw 36vw at 96% 8%, color-mix(in srgb,var(--k6) 32%,transparent), transparent 60%),
    radial-gradient(44vw 44vw at 88% 96%, color-mix(in srgb,var(--k3) 28%,transparent), transparent 62%),
    radial-gradient(38vw 38vw at 4% 92%, color-mix(in srgb,var(--k5) 28%,transparent), transparent 62%);
}

/* ── En-tête : grand, joyeux, dégradé arc-en-ciel discret ── */
html[data-mode="kids"] header{
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--k1) 20%,var(--header-bg)),
    color-mix(in srgb,var(--k5) 16%,var(--header-bg)) 55%,
    color-mix(in srgb,var(--k4) 18%,var(--header-bg)));
  backdrop-filter:saturate(1.3) blur(8px);
  border-bottom:3px solid color-mix(in srgb,var(--k1) 30%,transparent);
}
html[data-mode="kids"] .brand h1{ font-size:var(--fs-2xl); letter-spacing:.4px }

/* ── Boutons : gros, ronds, en relief avec rebond ── */
html[data-mode="kids"] button.primary,
html[data-mode="kids"] .primary,
html[data-mode="kids"] .disco-btn{
  border-radius:var(--radius-pill); font-weight:var(--fw-bold); padding:var(--sp-10) var(--sp-20); font-size:var(--fs-base);
  box-shadow:0 6px 0 0 color-mix(in srgb,var(--accent) 55%,#000), 0 12px 26px rgba(0,0,0,.16);
}
html[data-mode="kids"] button.primary:hover,
html[data-mode="kids"] .primary:hover{ transform:translateY(-1px) }
html[data-mode="kids"] button.primary:active,
html[data-mode="kids"] .primary:active{ transform:translateY(3px); box-shadow:0 3px 0 0 color-mix(in srgb,var(--accent) 55%,#000) }
html[data-mode="kids"] .icon{ border-radius:var(--radius-modal); width:42px; height:42px }

/* ── Colonnes : on allège les panneaux latéraux, le centre respire ── */
html[data-mode="kids"] .split{ grid-template-columns:250px minmax(0,1fr) 300px; gap:var(--sp-26)}
@media(max-width:1320px){ html[data-mode="kids"] .split{ grid-template-columns:220px minmax(0,1fr) 280px } }

/* ── Titres de section : grands et joueurs ── */
html[data-mode="kids"] .section-title{ font-size:var(--fs-3xl); font-weight:var(--fw-bold); letter-spacing:.2px; line-height:1.1 }
html[data-mode="kids"] .section-sub{ font-size:var(--fs-base)}

/* ════════ GRANDES TUILES PROJET ════════
   La liste devient une grille de tuiles colorées (couleur qui tourne). */
html[data-mode="kids"] .plist{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-18); max-width:none;
}
html[data-mode="kids"] .prow{
  flex-direction:column; align-items:flex-start; gap:var(--sp-14); min-height:150px;
  padding:var(--sp-20); border-radius:26px; border:2px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--kc) 16%,var(--card)), var(--card));
  box-shadow:0 8px 0 0 color-mix(in srgb,var(--kc) 28%,var(--line)), 0 14px 30px rgba(0,0,0,.08);
  position:relative; overflow:hidden;
}
/* Couleur de tuile (var --kc) qui tourne sur 6 teintes. */
html[data-mode="kids"] .prow:nth-child(6n+1){ --kc:var(--k1) }
html[data-mode="kids"] .prow:nth-child(6n+2){ --kc:var(--k4) }
html[data-mode="kids"] .prow:nth-child(6n+3){ --kc:var(--k3) }
html[data-mode="kids"] .prow:nth-child(6n+4){ --kc:var(--k6) }
html[data-mode="kids"] .prow:nth-child(6n+5){ --kc:var(--k5) }
html[data-mode="kids"] .prow:nth-child(6n){ --kc:var(--k2) }
html[data-mode="kids"] .prow:hover{
  transform:translateY(-3px) rotate(-1deg); border-color:color-mix(in srgb,var(--kc) 55%,var(--line));
  background:linear-gradient(180deg, color-mix(in srgb,var(--kc) 26%,var(--card)), var(--card));
}
/* Grosse icône ronde teintée. */
html[data-mode="kids"] .prow .picon{
  width:64px; height:64px; border-radius:var(--radius-modal);
  box-shadow:0 6px 16px color-mix(in srgb,var(--kc) 45%,transparent);
  outline:3px solid color-mix(in srgb,var(--kc) 30%,#fff);
}
html[data-mode="kids"] .prow .picon-mono{ font-size:var(--fs-2xl) }
html[data-mode="kids"] .prow .pname{ font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.01em; white-space:normal }
html[data-mode="kids"] .prow .pmain{ width:100% }
/* Flèche : pastille ronde colorée en bas à droite. */
html[data-mode="kids"] .prow .chev{
  position:absolute; right:16px; bottom:16px; color:var(--on-solid);
  width:34px; height:34px; border-radius:var(--radius-pill); display:grid; place-items:center;
  background:color-mix(in srgb,var(--kc) 80%,#000); box-shadow:var(--elev-1);
}
html[data-mode="kids"] .prow:hover .chev{ transform:translateX(2px) }

/* ── Navigation latérale : grosses pastilles à icône ── */
html[data-mode="kids"] .snav-b{
  border-radius:var(--radius-modal); font-weight:var(--fw-bold); font-size:var(--fs-base); padding:var(--sp-12) var(--sp-14); gap:var(--sp-12);
  border:2px solid transparent;
}
html[data-mode="kids"] .snav-b .ic{ width:24px; height:24px }
html[data-mode="kids"] .snav-b.on{
  background:color-mix(in srgb,var(--k1) 18%,transparent);
  border-color:color-mix(in srgb,var(--k1) 45%,var(--line));
  box-shadow:0 5px 0 0 color-mix(in srgb,var(--k1) 26%,var(--line));
}

/* ── Carte profil + report (« Mes créations ») : rondeur + relief doux ── */
html[data-mode="kids"] .profile,
html[data-mode="kids"] .report,
html[data-mode="kids"] .card,
html[data-mode="kids"] .shared-empty{ border-radius:26px }
html[data-mode="kids"] .report .kpi{
  border-radius:var(--radius-modal); background:color-mix(in srgb,var(--k3) 14%,var(--card));
}
html[data-mode="kids"] .report .kpi .n{ font-size:34px; font-weight:var(--fw-bold); color:color-mix(in srgb,var(--k3) 70%,var(--txt)) }

/* ════════ HERO D'ACCUEIL « ATELIER » ════════ */
.kids-hero{ display:flex; align-items:center; gap:var(--sp-20); margin:0 0 var(--sp-22);
  padding:var(--sp-24) var(--sp-26); border-radius:34px; position:relative; overflow:hidden;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--k1) 22%,var(--card)),
    color-mix(in srgb,var(--k6) 16%,var(--card)) 50%,
    color-mix(in srgb,var(--k4) 20%,var(--card)));
  border:3px solid color-mix(in srgb,var(--k1) 30%,var(--line));
  box-shadow:var(--elev-2); }
/* Étoiles/bulles décoratives flottantes. */
.kids-hero::before,.kids-hero::after{ content:""; position:absolute; border-radius:var(--radius-pill); pointer-events:none; opacity:.5 }
.kids-hero::before{ width:90px; height:90px; right:-20px; top:-26px; background:radial-gradient(circle at 40% 40%,var(--k2),transparent 70%) }
.kids-hero::after{ width:60px; height:60px; right:120px; bottom:-24px; background:radial-gradient(circle at 40% 40%,var(--k4),transparent 70%) }
.kids-hero-txt{ display:flex; flex-direction:column; gap:var(--sp-4); flex:1; min-width:0; z-index:1 }
.kids-hero-txt strong{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:.2px }
.kids-hero-txt span{ color:var(--mut); font-size:var(--fs-base) }
.kids-hero-cta{ flex:none; z-index:1 }

/* Mascotte : plus grande, rebondit ; petits reflets pour la rendre « vivante ». */
.kids-mascot{ flex:none; width:92px; height:92px; display:grid; place-items:center; z-index:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.2)); animation:kidsBob 3s ease-in-out infinite }
.kids-mascot svg{ width:92px; height:92px; overflow:visible }
.km-face{ fill:color-mix(in srgb,var(--k1) 78%,#fff) }
.km-eye{ fill:#2a1c2e }
.km-cheek{ fill:color-mix(in srgb,var(--k6) 75%,#fff); opacity:.8 }
.km-smile{ stroke:#2a1c2e; stroke-width:3.4; stroke-linecap:round }
@keyframes kidsBob{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-7px) rotate(3deg)} }
@media(prefers-reduced-motion:reduce){ .kids-mascot{animation:none} }

/* ── Empty state plus chaleureux ── */
html[data-mode="kids"] .empty{ border-radius:30px }
html[data-mode="kids"] .empty h2{ font-size:var(--fs-2xl); font-weight:var(--fw-bold) }

/* ════════ DISCOVERY : grandes tuiles d'univers colorées ════════ */
html[data-mode="kids"] .disco-hero{ border-radius:30px }
html[data-mode="kids"] .disco-hero h2{ font-size:var(--fs-2xl); font-weight:var(--fw-bold) }
html[data-mode="kids"] .disco-grid{ gap:var(--sp-18)}
html[data-mode="kids"] .disco-card{
  border-radius:26px; padding:var(--sp-20); border:2px solid var(--line); align-items:flex-start;
  background:linear-gradient(180deg, color-mix(in srgb,var(--kc) 16%,var(--card)), var(--card));
  box-shadow:0 8px 0 0 color-mix(in srgb,var(--kc) 26%,var(--line)), 0 12px 26px rgba(0,0,0,.07);
}
html[data-mode="kids"] .disco-card:nth-child(6n+1){ --kc:var(--k1) }
html[data-mode="kids"] .disco-card:nth-child(6n+2){ --kc:var(--k4) }
html[data-mode="kids"] .disco-card:nth-child(6n+3){ --kc:var(--k3) }
html[data-mode="kids"] .disco-card:nth-child(6n+4){ --kc:var(--k6) }
html[data-mode="kids"] .disco-card:nth-child(6n+5){ --kc:var(--k5) }
html[data-mode="kids"] .disco-card:nth-child(6n){ --kc:var(--k2) }
html[data-mode="kids"] .disco-card:hover{ transform:translateY(-3px) rotate(-1deg) }
html[data-mode="kids"] .disco-card .dc-ico{
  width:58px; height:58px; border-radius:var(--radius-modal); color:var(--on-solid);
  background:color-mix(in srgb,var(--kc) 82%,#000);
  box-shadow:0 6px 14px color-mix(in srgb,var(--kc) 45%,transparent);
}
html[data-mode="kids"] .disco-card .dc-ico .ic{ width:30px; height:30px }
html[data-mode="kids"] .disco-card .dc-name{ font-size:var(--fs-lg); font-weight:var(--fw-bold) }
html[data-mode="kids"] .disco-card .dc-bar span{ background:var(--kc) }

}