/* ════════════════════════════════════════════════════════════════════════
   TFA — LE MODE CLAIR, HARMONISÉ (17/10/2026)
   Yann : « améliore le mode clair, trop de mauvais contrastes. Garde le bleu
   ciel du bas de page (réseaux sociaux), inspire-toi d'Apple : simple, qui
   préserve notre design et nos couleurs, parfaitement lisible. »

   Chargé EN DERNIER sur chaque page. Tout est sous body:not(.dark) : le mode
   sombre ne bouge pas d'un pixel.

   Trois principes :
   1. Le texte est sombre sur fond clair. Les couleurs de marque (les teintes
      des formules, des niveaux, des rubriques) restent, mais leur TEXTE est
      foncé de ~40 % vers le bleu nuit, pour être lisible. Les fonds teintés
      ne changent pas.
   2. Les « îlots sombres » (bandeaux bleu nuit, héros, TFA TV…) gardent leur
      texte clair. assets/clair.js les repère et leur rend les couleurs du
      mode sombre (classe .tfa-ilot).
   3. Une barre du haut en verre blanc, façon Apple.
   ════════════════════════════════════════════════════════════════════════ */

/* ── les variables qui n'existaient qu'en sombre (repli sombre = texte invisible) ── */
body:not(.dark) {
  --tx: #15273D;
  --tx2: #4B5A6B;
  --panel: #FFFFFF;
  --panel2: #F4F7FB;
  --soft2: #4E5A68;
}

/* ── 1. LA BARRE DU HAUT : verre blanc, lien foncé, le rouge pour la page active ── */
body:not(.dark) .site .topnav.collante,
body:not(.dark) .tv .topnav,
body:not(.dark) .site .tv .topnav {
  background: rgba(251, 252, 254, .84);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(9, 45, 89, .08);
  color: var(--ink);
}
body:not(.dark) .tv .topnav b,
body:not(.dark) .tv .topnav a.lg b { color: var(--navy); }
body:not(.dark) .tv .topnav .lk { color: #2A3B52; }
body:not(.dark) .tv .topnav .lk:hover { color: var(--navy); }
body:not(.dark) .tv .topnav .lk.act { color: var(--crimson); }
body:not(.dark) .tv .topnav .i18n-bouton,
body:not(.dark) .tv .topnav .i18n-bouton b { color: var(--ink); }
body:not(.dark) .tv .topnav .lgin { color: var(--ink); }
body:not(.dark) .tv .topnav .audsw a:not(.on) { color: var(--soft); }

/* ── 2. LES TARIFS : titres, sous-titres, prix et remises dans la couleur de la
      formule, mais foncée ; les gris « sombres » (#9FB0C8) deviennent lisibles ── */
body:not(.dark) .card.glow h3,
body:not(.dark) .card.glow .subt,
body:not(.dark) .card.glow .mini .bm b,
body:not(.dark) .card.glow .reduc,
body:not(.dark) .card.glow .ck li .incpx,
body:not(.dark) .card.glow .ck li b.manuel {
  color: color-mix(in srgb, var(--glow, var(--acc, #3C77BE)) 58%, #0B1B33) !important;
}
body:not(.dark) .card[style*="--acc"] h3,
body:not(.dark) .card[style*="--acc"] .subt {
  color: color-mix(in srgb, var(--acc) 58%, #0B1B33);
}
body:not(.dark) .card.glow .reduc { border-color: color-mix(in srgb, var(--glow, #888) 45%, transparent); }
body:not(.dark) .hlab,
body:not(.dark) .hnote,
body:not(.dark) .mini .loc { color: #46566A; }
body:not(.dark) .hnote b { color: var(--ink); }
body:not(.dark) .seg button { color: #46566A; }
body:not(.dark) .seg button small { opacity: .9; }
/* (17/10) la pastille glissante reste celle du design (arrondie) : on fonce seulement sa teinte.
   Les boutons eux-mêmes restent transparents — jamais de fond carré. */
body:not(.dark) .seg-hi {
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow, #3C77BE) 74%, #0B1B33), color-mix(in srgb, var(--glow, #3C77BE) 84%, #0B1B33));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--glow, #3C77BE) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
}
body:not(.dark) .seg button.hot { color: #fff; }
body:not(.dark) .seg button.hot small { opacity: .95; }
body:not(.dark) .site .billbadge { color: #24603A; }
/* les cartes atténuées (formule déjà prise, etc.) restent lisibles */
body:not(.dark) .card .ck li[style*="opacity"],
body:not(.dark) .card[style*="opacity"] { opacity: 1 !important; }

/* ── 3. LES TEINTES DE NIVEAU, DE RUBRIQUE, DE CATÉGORIE (texte foncé, fond teinté gardé) ── */
body:not(.dark) .site .lvniv { color: color-mix(in srgb, var(--tc) 55%, #0B1B33); opacity: 1 !important; }
body:not(.dark) .en-pr-et,
body:not(.dark) .en-pr-go { color: color-mix(in srgb, var(--pr) 62%, #0B1B33); }
body:not(.dark) .site .lvacc,
body:not(.dark) .site .lvmeta { opacity: 1 !important; }
body:not(.dark) .site .lvlien { opacity: 1 !important; }
body:not(.dark) .eyebrow,
body:not(.dark) .site .eyebrow,
body:not(.dark) .ba-kick { color: #A50832; }
body:not(.dark) .mc-eyebrow { color: var(--crimson) !important; }
/* pastilles colorées à texte blanc (salons du Club, bouton vert) : fond un peu plus profond */
body:not(.dark) .clubwrap.ig .ig-av,
body:not(.dark) .vt-lien.ac { box-shadow: inset 0 0 0 100px rgba(8, 20, 40, .16); }

/* ── 4. LES ÎLOTS SOMBRES : leur texte reste clair (classe posée par clair.js) ── */
body:not(.dark) .tfa-ilot {
  --ink: #E9EEF6;
  --soft: #B9C6D8;
  --soft2: #9DADC2;
  --tx: #EEF2F8;
  --tx2: #AEBBD0;
  --brd: rgba(255, 255, 255, .16);
  --brd2: rgba(255, 255, 255, .10);
  --sand2: rgba(255, 255, 255, .18);
}
body:not(.dark) .tfa-ilot .btn.gh,
body:not(.dark) .tfa-ilot .btn.lg.gh {
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .06);
}
body:not(.dark) .tfa-ilot .btn.gh:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
/* textes écrits « en bleu nuit » à la main dans un bandeau sombre (prix des licences, duo Kids…) */
body:not(.dark) .tfa-ilot [style*="color:var(--navy)"],
body:not(.dark) .site .b2b [style*="color:var(--navy)"],
body:not(.dark) .site .kidsband [style*="color:var(--navy)"] { color: #fff !important; }
body:not(.dark) .leveltest .btn.gh,
body:not(.dark) .kidshero .btn.gh,
body:not(.dark) .hero .btn.gh { color: #fff; border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .06); }
body:not(.dark) .leveltest .lb { color: rgba(255, 255, 255, .78); }
body:not(.dark) .leveltest p { color: #D6E2F1; }
/* un îlot clair DANS un îlot sombre (une carte blanche, un tableau) reprend les couleurs claires */
body:not(.dark) .tfa-ilot .tfa-ilot-clair {
  --navy: #092D59;
  --ink: #15273D;
  --soft: #4B5A6B;
  --soft2: #4E5A68;
  --tx: #15273D;
  --tx2: #4B5A6B;
  --brd: #B9D3EF;
  --brd2: #CBDFF5;
}
/* TFA TV : la page est un îlot sombre ; ses puces et descriptions */
body:not(.dark) .tv .ftab:not(.on),
body:not(.dark) .tv .tvchips .ftab:not(.on) { color: #B9C6D8; }
body:not(.dark) .tv .lvacc { color: #B9C6D8; }
/* bandeau « TFA · les lives » */
body:not(.dark) .tfa-ilot b[style*="opacity"] { opacity: .75 !important; }

/* ── 5. RÉSERVER UN COURS (cours.html) : le jour choisi, les créneaux, les flèches ── */
body:not(.dark) .day2.on {
  background: linear-gradient(160deg, var(--facc, #3C77BE), var(--facc2, #1B4A85));
  border-color: transparent;
}
body:not(.dark) .day2.on .dw,
body:not(.dark) .day2.on .dd,
body:not(.dark) .day2.on .dm { color: #fff; }
body:not(.dark) .day2.dis { opacity: .5; }
body:not(.dark) .weeknav .warrow:disabled { opacity: .45; }
body:not(.dark) .weeknav .warrow.pulse { color: var(--navy); }
body:not(.dark) .rv2 .slot.past { opacity: .5; background: #F1F4F8; border-color: #E1E7EF; }
body:not(.dark) .steps2 .arr { opacity: .7 !important; }
body:not(.dark) #cta.btn:disabled,
body:not(.dark) .ctarow .btn:disabled { opacity: .62; }

/* ── 6. LES FORMULAIRES : listes déroulantes, calendrier, boutons désactivés ── */
body:not(.dark) .cq-ind-liste { background: #fff; color: var(--ink); box-shadow: 0 22px 48px -18px rgba(9, 45, 89, .35); }
body:not(.dark) .cq-ind-rang { color: var(--ink); }
body:not(.dark) .cq-cal-j:disabled { opacity: .42; }
body:not(.dark) .btn:disabled,
body:not(.dark) .btn[disabled] { opacity: .6; }

/* ── 7. LE JOURNAL (TFA NEWS) ── */
body:not(.dark) .jr { --encre3: #5E6B7D; }
body:not(.dark) .jr-libre { color: #17633F; }

/* ── 8. LE PAIEMENT (style Apple) : gris plus soutenus ── */
body:not(.dark) .pw-secure { color: #6E6E73; }
body:not(.dark) .pw-reca .kick,
body:not(.dark) .pw-badge { color: #5E5E63; }

/* ── 9. RECRUTEMENT / REJOINDRE ── */
body:not(.dark) .rj-bascule a:not(.on) { color: #33445A; }
body:not(.dark) .rj-marques,
body:not(.dark) .rj-marques a { color: #4B5A6B; }