/*
 * Chess Club -- couche graphique MOBILE (espace membre / application).
 *
 * Parti pris (cf. docs/reference/STRATEGIE-ESPACE-MEMBRE.md sec.6) : mobile-first,
 * tuiles larges, typo genereuse, aplats contrastes "a plat".
 *
 * IDENTITE = couleurs OFFICIELLES du club (logo LOE-2021, lion blanc sur damier) :
 *   bleu  #5266A4 (rgb 82,102,164)   -- en-tetes, navigation (comme le site)
 *   rouge #E3352C (rgb 227,53,44)    -- accent, premium/adherents, incitation
 *   blanc #FFFFFF                    -- le lion ; surfaces
 *
 * N1 (LOT-APP-NAV) -- Tokens & themes :
 *   Toute couleur passe par un TOKEN semantique (--app-*). Deux jeux : clair (:root)
 *   et sombre ([data-theme="dark"], indicatif SPEC-REFONTE-NAVIGATION-APP.md sec.9).
 *   Roles de marque SEPARES : --app-blue (accent : liens, actif, icones) est distinct
 *   des fonds structurants --app-bar-bg / --app-primary / --app-hero-bg, ce qui rend
 *   le sombre coherent (un fond ne s'eclaircit pas comme un accent).
 *   Taille de texte reglable : --app-fs (multiplicateur, defaut 1 ; 3 crans en N1c) ;
 *   toute typo est exprimee en calc(px * var(--app-fs)).
 *   Lisibilite (sec.8) : le texte secondaire est ASSOMBRI (AA sur blanc), les meta pales
 *   supprimees/assombries. Le sombre n'est PAS un substitut au contraste : les deux
 *   themes sont haute lisibilite.
 *
 * @since 5.8.x -- Strategie espace membre (couche graphique mobile)
 * @since N1a   -- migration tokens + echafaudage theme sombre + taille de texte
 */

:root {
  /* --- Accents de marque (officiels) ------------------------------------- */
  --app-blue:      #5266A4;   /* accent : liens, nav active, icones, chips actifs */
  --app-blue-dark: #3f5188;
  --app-blue-soft: #b9c4da;   /* texte secondaire pose sur la barre bleue */
  --app-red:       #E3352C;   /* remplissage CTA/accent (texte blanc dessus) */
  --app-red-dark:  #a3261f;   /* rouge en TEXTE sur surface claire (encre) */
  --app-red-soft:  #fdecea;
  --app-red-bord:  #f5c5c1;

  /* --- Fonds structurants (varient selon le theme) ----------------------- */
  --app-bar-bg:    #5266A4;   /* barre du haut + barre du bas */
  --app-on-bar:    #ffffff;   /* texte/icone sur la barre */
  --app-primary:   #5266A4;   /* remplissage bouton primaire / chip actif */
  --app-on-primary:#ffffff;
  --app-hero-bg:   #5266A4;   /* carte "hero" mise en avant */
  --app-on-hero:   #ffffff;
  --app-hero-delta:#aef0cf;   /* delta positif pose sur le hero */

  /* --- Surfaces & texte -------------------------------------------------- */
  --app-bg:        #f4f4f1;   /* fond d'ecran (clair, legerement chaud) */
  --app-tile:      #ffffff;   /* surface de carte / tuile */
  --app-sheet:     #e7e4db;   /* feuille modale (bottom-sheet) : ASSOMBRIE vs page/tuile pour se detacher */
  --app-surface-2: #f1efe9;   /* surface secondaire (bloc doux) */
  --app-border:    #e6e4dd;
  --app-border-soft:#ece7db;
  /* Echiquier du quiz (diagrammes) -- couleurs FIXES, identiques clair/sombre :
     un diagramme d'echecs ne s'adapte pas au theme (une piece blanche reste claire). */
  --app-sq-l:      #f0d9b5;   /* case claire */
  --app-sq-d:      #b58863;   /* case foncee */
  --app-pc-l:      #fafafa;   /* piece blanche */
  --app-pc-d:      #141414;   /* piece noire (et contour) */
  --app-text:      #1c2b3a;   /* texte primaire */
  --app-text-2:    #4a5568;   /* texte secondaire ASSOMBRI (AA sur blanc) */
  --app-text-3:    #64748b;   /* meta (ex-#9aa1a9), assombri */
  --app-ok:        #178a63;   /* progression positive (AA sur blanc) */
  --app-ok-bg:     #e3f2ec;
  --app-warn:      #8a5b00;   /* alerte / a faire (encre ambre, AA sur blanc) */
  --app-warn-bg:   #fdf6e3;
  --app-blue-bg:   #eef1f8;   /* surface bleutee douce (etat selectionne) */
  --app-blue-bord: #d4ddec;   /* bordure bleutee douce */
  --app-skel:      #ece9e2;   /* squelette de chargement */
  --app-upsell-sub:#b14039;

  /* --- Teintes de domaine (fond du disque d'icone ; *-ic = couleur icone). */
  --app-sport-bg:    #e8edf6; --app-sport-ic:    #5266A4;
  --app-club-bg:     #fde7e5; --app-club-ic:     #E3352C;
  --app-progress-bg: #efe9f8; --app-progress-ic: #6f57b0;
  --app-money-bg:    #e3f2ec; --app-money-ic:    #1f8a6b;
  --app-event-bg:    #fbe9e2; --app-event-ic:    #c4623a;
  --app-dispo-bg:    #eaf3de; --app-dispo-ic:    #5c8a1f;

  /* --- Echelle mobile ---------------------------------------------------- */
  --app-fs:          1;        /* multiplicateur de taille de texte (N1c : 3 crans) */
  --app-radius:      16px;
  --app-radius-pill: 999px;
  --app-tap:         48px;     /* cible tactile minimale */
  --app-gap:         11px;
}

/* --- Theme SOMBRE (indicatif SPEC sec.9) ---------------------------------
   Echafaudage : defini ici mais PAS auto-active (ni bascule ni prefers-color-scheme)
   tant que les blocs peints en dur dans le JS ne sont pas migres (N1b). L'activation
   (@media + bascule) arrive en N1c. Confort ET haute lisibilite (contraste AA). */
[data-theme="dark"] {
  --app-blue:      #8ea3d6;   /* accent eclairci pour texte/actif sur sombre */
  --app-blue-dark: #6f86c0;
  --app-blue-soft: #aab8dd;
  --app-red:       #cf3b32;   /* CTA : reste assez sombre pour du texte blanc (AA) */
  --app-red-dark:  #f2726a;   /* rouge en TEXTE : eclairci pour contraste sur sombre */
  --app-red-soft:  #3a2422;
  --app-red-bord:  #5a3330;

  --app-bar-bg:    #1a2130;   /* barre : bleu-gris sombre (pas l'accent clair) */
  --app-on-bar:    #f1f3f6;
  --app-primary:   #33406b;
  --app-on-primary:#f1f3f6;
  --app-hero-bg:   #33406b;
  --app-on-hero:   #f1f3f6;
  --app-hero-delta:#7ee3b0;

  --app-bg:        #12161d;
  --app-tile:      #1c222c;
  --app-sheet:     #2a3340;   /* feuille modale (bottom-sheet) : ECLAIRCIE vs fond/tuile pour se detacher */
  --app-surface-2: #232a35;
  --app-border:    #2b323d;
  --app-border-soft:#2b323d;
  --app-text:      #f1f3f6;
  --app-text-2:    #aab3c0;
  --app-text-3:    #8994a3;
  --app-ok:        #4ecb93;
  --app-ok-bg:     #17321f;
  --app-warn:      #e3b667;
  --app-warn-bg:   #33291a;
  --app-blue-bg:   #23304a;
  --app-blue-bord: #33415e;
  --app-skel:      #232a35;
  --app-upsell-sub:#f2a29c;

  --app-sport-bg:    #23304a; --app-sport-ic:    #9db4e6;
  --app-club-bg:     #3a2422; --app-club-ic:     #f2726a;
  --app-progress-bg: #2b2740; --app-progress-ic: #b9a6d6;
  --app-money-bg:    #15302a; --app-money-ic:    #58c79a;
  --app-event-bg:    #3a2a22; --app-event-ic:    #e0977a;
  --app-dispo-bg:    #2b3520; --app-dispo-ic:    #a9cc6e;
}

/* --- Taille de texte : 3 crans (N1c) ------------------------------------
   L'attribut est pose sur <html> ; --app-fs multiplie toute la typo (classes + inline). */
[data-textsize="grand"] { --app-fs: 1.14; }
[data-textsize="xl"]    { --app-fs: 1.30; }

/* Conteneur d'ecran ------------------------------------------------------- */
.cclub-app {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: calc(16px * var(--app-fs));
  -webkit-font-smoothing: antialiased;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* EA-32 : barre du haut + barre du bas FIXES, seul le contenu central defile.
   La coquille occupe toute la hauteur visible ; #cclub-screen est la seule zone scrollable. */
.cclub-app--shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.cclub-app--shell .cclub-app-bar,
.cclub-app--shell .cclub-app-checker,
.cclub-app--shell .cclub-fbar,
.cclub-app--shell .cclub-bottomnav { flex: 0 0 auto; }
.cclub-app__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Barre superieure -------------------------------------------------------- */
.cclub-app-bar { background: var(--app-bar-bg); padding: 14px 16px 10px; }
.cclub-app-bar__title { color: var(--app-on-bar); font-size: calc(20px * var(--app-fs)); font-weight: 600; margin: 10px 0 0; }
.cclub-app-bar__sub   { color: var(--app-blue-soft); font-size: calc(13px * var(--app-fs)); }
/* N6 : marque de marque -- echo du logo SANS damier. Le bleu/rouge a parts egales ne tient que
   grace au lion blanc central (absent des surfaces de l'app) ; hors logo il vibre -> abandonne.
   Bleu = seule couleur structurante ; tuile bleue en degrade. */
.cclub-app-mark {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--app-blue) 0%, var(--app-blue-dark) 100%);
}

/* N6 : filet bleu de liaison (remplace le bandeau damier abandonne). */
.cclub-app-checker {
  height: 3px;
  background: var(--app-blue);
}

/* N6 : bichromie bleue des photos de membres (EA-39) -- filtre A L'AFFICHAGE, zero stockage,
   reversible. Ressort d'appartenance sans typo fine. Rendu a calibrer sur les photos reelles (SPEC 12.5). */
.cclub-bichromie { filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(0.55) brightness(1.05) contrast(1.02); }

/* N6 : bandeau MOSAIQUE de portraits (public, ecran de connexion). TRICHROMIE Rouge/Bleu/Blanc =
   rythme identitaire du club, applique en FILTRE a l'affichage (zero stockage, reversible ; source =
   endpoint public regenere 1x/jour). Visages seuls, AUCUN nom (RGPD ; adultes consentants uniquement).
   Rendu des filtres a calibrer sur photos reelles (comme la bichromie). */
.cclub-portraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, 4.4vh);   /* cellules carrees ~4.4% de la hauteur d'ecran */
  grid-auto-rows: 4.4vh;
  justify-content: center;                            /* mosaique centree horizontalement */
  align-content: start;
  gap: 2px; padding: 2px;
  max-height: 10vh;                                   /* 2 rangs -> JAMAIS plus de 10% de la hauteur d'ecran */
  overflow: hidden;
  background: var(--app-bar-bg);
}
.cclub-portraits__cell { overflow: hidden; border-radius: 4px; background: var(--app-skel); }
.cclub-portraits__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cclub-tri-b img { filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(1.25) brightness(0.95); }        /* bleu */
.cclub-tri-r img { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(-25deg) brightness(1.02); }           /* rouge */
.cclub-tri-w img { filter: grayscale(1) brightness(1.12) contrast(0.96); }                                    /* blanc/neutre */
/* Fallback identitaire quand aucune photo consentie n'est disponible : carres pleins aux couleurs
   OFFICIELLES du club (fixes, hors thematisation -- c'est une marque, pas une surface d'UI). */
.cclub-portraits__cell.cclub-sq--w { background: #ffffff; }
.cclub-portraits__cell.cclub-sq--b { background: #5266A4; }
.cclub-portraits__cell.cclub-sq--r { background: #E3352C; }

/* Carte "hero" (resume mis en avant) ------------------------------------- */
.cclub-hero {
  background: var(--app-hero-bg); color: var(--app-on-hero);
  border-radius: var(--app-radius);
  padding: 14px 16px; margin: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.cclub-hero__num { font-size: calc(26px * var(--app-fs)); font-weight: 600; }
.cclub-hero__delta { font-size: calc(14px * var(--app-fs)); color: var(--app-hero-delta); font-weight: 400; }

/* Mur de tuiles ----------------------------------------------------------- */
.cclub-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--app-gap);
  padding: 0 14px;
}
.cclub-tile {
  background: var(--app-tile); border: 1px solid var(--app-border);
  border-radius: var(--app-radius); padding: 14px; min-height: 96px;
  display: block; text-decoration: none; color: inherit;
}
.cclub-tile:active { transform: scale(.98); }
.cclub-tile__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(24px * var(--app-fs)); margin-bottom: 10px;
}
.cclub-tile__title { font-size: calc(16px * var(--app-fs)); font-weight: 600; color: var(--app-text); }
.cclub-tile__sub   { font-size: calc(12px * var(--app-fs)); color: var(--app-text-2); }
.cclub-tile--wide { grid-column: 1 / -1; }

/* Teintes de domaine appliquees au disque d'icone */
.cclub-tile--sport    .cclub-tile__icon { background: var(--app-sport-bg);    color: var(--app-sport-ic); }
.cclub-tile--club     .cclub-tile__icon { background: var(--app-club-bg);     color: var(--app-club-ic); }
.cclub-tile--progress .cclub-tile__icon { background: var(--app-progress-bg); color: var(--app-progress-ic); }
.cclub-tile--money    .cclub-tile__icon { background: var(--app-money-bg);    color: var(--app-money-ic); }
.cclub-tile--event    .cclub-tile__icon { background: var(--app-event-bg);    color: var(--app-event-ic); }
.cclub-tile--dispo    .cclub-tile__icon { background: var(--app-dispo-bg);    color: var(--app-dispo-ic); }

/* Marqueur "reserve adherents" (freemium) -> rouge de marque */
.cclub-lock { font-size: calc(12px * var(--app-fs)); color: var(--app-red-dark); font-weight: 600; }

/* Bandeau d'incitation a l'adhesion (premium) ----------------------------- */
.cclub-upsell {
  background: var(--app-red-soft); border: 1px solid var(--app-red-bord);
  border-radius: var(--app-radius); padding: 13px 14px; margin: 12px 14px 0;
  display: flex; align-items: center; gap: 12px;
}
.cclub-upsell__title { font-size: calc(14px * var(--app-fs)); font-weight: 600; color: var(--app-red-dark); }
.cclub-upsell__sub   { font-size: calc(12px * var(--app-fs)); color: var(--app-upsell-sub); }

/* Barre de navigation basse ---------------------------------------------- */
.cclub-bottomnav {
  display: flex; justify-content: space-around; align-items: center;
  background: var(--app-bar-bg); padding: 9px 6px 11px; margin-top: auto;
}
.cclub-bottomnav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--app-blue-soft); text-decoration: none; font-size: calc(10px * var(--app-fs)); min-width: var(--app-tap);
}
.cclub-bottomnav a.is-active { color: var(--app-on-bar); }
.cclub-bottomnav i { font-size: calc(23px * var(--app-fs)); }

/* Boutons d'action plein contraste --------------------------------------- */
.cclub-app-btn {            /* primaire (bleu de marque) */
  display: block; width: 100%; box-sizing: border-box;
  background: var(--app-primary); color: var(--app-on-primary);
  border: 0; border-radius: var(--app-radius-pill);
  padding: 14px 18px; font-size: calc(16px * var(--app-fs)); font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  min-height: var(--app-tap);
}
.cclub-app-btn--accent { background: var(--app-red); color: var(--app-on-primary); }  /* CTA energique (s'inscrire, adherer) */
.cclub-app-btn--ghost  { background: transparent; color: var(--app-blue); border: 1.5px solid var(--app-blue); }

/* Sélecteur de profils "famille" (parent + enfants, F2) ------------------- */
.cclub-fbar {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 0;
  -webkit-overflow-scrolling: touch;
}
.cclub-fchip {
  flex: 0 0 auto; padding: 7px 14px; border-radius: var(--app-radius-pill);
  background: var(--app-tile); border: 1px solid var(--app-border); color: var(--app-text);
  font-size: calc(14px * var(--app-fs)); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cclub-fchip.is-on { background: var(--app-primary); color: var(--app-on-primary); border-color: var(--app-primary); }

/* Etat de chargement (squelette) ----------------------------------------- */
.cclub-skel { background: var(--app-skel); border-radius: 8px; }

/* Menu sandwich (N3) : overlay plein ecran, panneau lateral gauche -------- */
.cclub-menu-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(10,14,20,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.cclub-menu-ov.is-open { opacity: 1; pointer-events: auto; }
.cclub-menu-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 86%; max-width: 400px; background: var(--app-bg); transform: translateX(-100%); transition: transform .24s ease; display: flex; flex-direction: column; box-shadow: 2px 0 24px rgba(0,0,0,.25); }
.cclub-menu-ov.is-open .cclub-menu-panel { transform: translateX(0); }
.cclub-menu-head { background: var(--app-bar-bg); color: var(--app-on-bar); display: flex; align-items: center; justify-content: space-between; padding: 16px; flex: 0 0 auto; }
.cclub-menu-title { font-size: calc(18px * var(--app-fs)); font-weight: 600; }
.cclub-menu-x { color: var(--app-on-bar); cursor: pointer; display: inline-flex; align-items: center; justify-content: flex-end; min-width: var(--app-tap); min-height: var(--app-tap); }
.cclub-menu-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 10px 24px; }
.cclub-menu-grp { font-size: calc(12px * var(--app-fs)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--app-text-3); padding: 14px 8px 4px; }
.cclub-menu-it { display: flex; align-items: center; gap: 12px; padding: 10px 8px; min-height: var(--app-tap); text-decoration: none; color: var(--app-text); border-radius: 12px; }
.cclub-menu-it:active { background: var(--app-blue-bg); }
.cclub-menu-tx { display: flex; flex-direction: column; min-width: 0; }
.cclub-menu-t { font-size: calc(15px * var(--app-fs)); font-weight: 600; color: var(--app-text); }
.cclub-menu-d { font-size: calc(12px * var(--app-fs)); color: var(--app-text-2); }
.cclub-menu-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: calc(20px * var(--app-fs)); background: var(--app-surface-2); color: var(--app-text-2); }
.cclub-menu-ic.c-sport    { background: var(--app-sport-bg);    color: var(--app-sport-ic); }
.cclub-menu-ic.c-club     { background: var(--app-club-bg);     color: var(--app-club-ic); }
.cclub-menu-ic.c-progress { background: var(--app-progress-bg); color: var(--app-progress-ic); }
.cclub-menu-ic.c-money    { background: var(--app-money-bg);    color: var(--app-money-ic); }
.cclub-menu-ic.c-dispo    { background: var(--app-dispo-bg);    color: var(--app-dispo-ic); }

/* Carte de membre plein ecran (N3d) : geste avatar ----------------------- */
.cclub-carte-panel { position: absolute; inset: 0; background: var(--app-bg); display: flex; flex-direction: column; }
.cclub-carte-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 12px 28px; color: var(--app-text); text-align: center; font-size: calc(20px * var(--app-fs)); }

/* Mode enfant (N5) : bandeau discret + accueil ludique ------------------- */
.cclub-kid-band { position: sticky; top: 0; z-index: 50; background: var(--app-primary); color: var(--app-on-primary); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: calc(15px * var(--app-fs)); font-weight: 600; }
.cclub-kid-hand { background: var(--app-on-primary); color: var(--app-primary); border-radius: var(--app-radius-pill); padding: 7px 14px; font-size: calc(13px * var(--app-fs)); font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center; }
.cclub-kid-hi { font-size: calc(26px * var(--app-fs)); font-weight: 700; color: var(--app-text); padding: 16px 16px 2px; }

/* Mode enfant (N5) -- palette ludique NON genree, CHOISIE par l'enfant (localStorage cote client ;
   zero donnee serveur, zero RGPD : le sexe n'est jamais lu ni expose). data-kid="1" est pose sur
   <html> pendant la "main a l'enfant" ; data-kid-color porte la teinte. On ne surcharge QUE les tokens
   --app-* -> recolore bandeau/boutons/accents et arrondit les coins, sans toucher au reste de l'app.
   Place APRES [data-theme="dark"] (specificite egale) pour l'emporter dans les deux themes. */
[data-kid="1"] {
  --kid-1:  #6b4de6;  --kid-2:  #ff6f91;  --kid-bg: #f4f1ff;   /* defaut : violet */
  --app-radius: 22px;                       /* coins plus ronds, plus doux */
  --app-blue:       var(--kid-1);
  --app-bar-bg:     var(--kid-1);
  --app-primary:    var(--kid-1);
  --app-on-primary: #ffffff;
  --app-hero-bg:    var(--kid-1);
  --app-on-hero:    #ffffff;
  --app-red:        var(--kid-2);           /* CTA "jouer" en teinte secondaire vive */
  --app-bg:         var(--kid-bg);
  /* Le mode enfant est une surface claire ASSUMEE (texte fonce sur clair), meme si l'appareil du
     parent est en theme sombre -> on re-force les surfaces/texte/teintes clairs pour garantir le
     contraste AA en mode enfant quel que soit data-theme. */
  --app-tile:       #ffffff;
  --app-surface-2:  #f4f2fb;
  --app-border:     #e7e3f5;
  --app-border-soft:#e7e3f5;
  --app-text:       #26324a;
  --app-text-2:     #4a5568;
  --app-text-3:     #64748b;
  --app-ok:         #178a63;  --app-ok-bg:   #e3f2ec;
  --app-warn:       #8a5b00;  --app-warn-bg: #fdf6e3;
  --app-sport-bg:   #e8edf6;  --app-sport-ic:    #5266a4;
  --app-club-bg:    #fde7e5;  --app-club-ic:     #e3352c;
  --app-progress-bg:#efe9f8;  --app-progress-ic: #6f57b0;
  --app-money-bg:   #e3f2ec;  --app-money-ic:    #1f8a6b;
  --app-event-bg:   #fbe9e2;  --app-event-ic:    #c4623a;
  --app-dispo-bg:   #eaf3de;  --app-dispo-ic:    #5c8a1f;
}
[data-kid="1"][data-kid-color="ocean"]  { --kid-1: #1f9bd6; --kid-2: #ff8a3d; --kid-bg: #ecf7fd; }
[data-kid="1"][data-kid-color="jungle"] { --kid-1: #1fa971; --kid-2: #ff6f91; --kid-bg: #edfaf3; }
[data-kid="1"][data-kid-color="sun"]    { --kid-1: #e8930c; --kid-2: #5266a4; --kid-bg: #fff6e6; }
[data-kid="1"][data-kid-color="berry"]  { --kid-1: #d6336c; --kid-2: #7048e8; --kid-bg: #fdeff4; }

/* Selecteur de couleur ludique (apercu de teinte = fond litteral assume, ce n'est pas un badge d'etat) */
.cclub-kid-colors { display: flex; gap: 12px; padding: 8px 16px 2px; }
.cclub-kid-sw {
  width: 34px; height: 34px; border-radius: var(--app-radius-pill);
  border: 3px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.cclub-kid-sw.is-on { border-color: var(--app-on-primary); outline: 2px solid var(--kid-1); }
.cclub-kid-sw--violet { background: #6b4de6; }
.cclub-kid-sw--ocean  { background: #1f9bd6; }
.cclub-kid-sw--jungle { background: #1fa971; }
.cclub-kid-sw--sun    { background: #e8930c; }
.cclub-kid-sw--berry  { background: #d6336c; }