/* ============================================================
   ketkili-v5.css — à charger APRÈS le CSS de la page,
   avec ketkili-v5.js. Couvre les trois structures de cartes
   du package : .son-card, .submodule-card, .subm-card.

   Page « Les nouveaux sons » : la tuile se colore quand le son
   est maîtrisé. Index Lis : le chapitre replié dit où on en est,
   pas quoi ; il faut le déplier pour voir les modules.

   Code couleur, une fois pour toutes :
     vert   = fait          jaune = en cours (il pulse)
     gris   = à faire       rouge = RÉSERVÉ AUX ERREURS
   ============================================================ */

:root{ --filet-v4: 1px solid rgba(29,53,87,.12); }

@keyframes ketBrille{
  0%   {transform:translateX(-140%) rotate(20deg)}
  55%,100%{transform:translateX(340%) rotate(20deg)}
}
@keyframes ketHalo{
  0%,100%{box-shadow:0 0 0 0 rgba(255,217,61,.85), 0 2px 4px rgba(29,53,87,.06), 0 12px 26px rgba(29,53,87,.10)}
  50%    {box-shadow:0 0 0 12px rgba(255,217,61,0), 0 2px 4px rgba(29,53,87,.06), 0 12px 26px rgba(29,53,87,.10)}
}
@keyframes ketPulseJaune{
  0%,100%{box-shadow:0 0 0 0 rgba(255,217,61,.9), 0 0 0 2px #FFD93D}
  50%    {box-shadow:0 0 0 8px rgba(255,217,61,0), 0 0 0 2px #FFD93D}
}

.lueur{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
.lueur::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:ketBrille 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.tag-jaune{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--jaune);color:var(--bleu-fr);font-family:'Nunito',sans-serif;
  font-size:.62rem;font-weight:900;letter-spacing:.08em;
  padding:.15rem .6rem;border-radius:100px;white-space:nowrap;z-index:4;
}
.coche{
  position:absolute;right:9px;top:9px;width:26px;height:26px;border-radius:50%;
  background:var(--vert);color:#fff;font-family:'Nunito',sans-serif;
  font-size:.85rem;font-weight:900;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--creme);z-index:3;
}

/* ════════ A · LA TUILE QUI SE COLORE ════════ */

.sons-cards{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:.9rem !important; }

.son-card, .submodule-card, .subm-card{
  position:relative;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 2px 4px rgba(29,53,87,.06),0 12px 26px rgba(29,53,87,.10) !important;
  padding:1.25rem .8rem 1rem !important;
  opacity:1 !important;
  overflow:visible;
}

/* Les lettres remplacent le pion : plus de rond, du gros caractère. */
.son-card .son-circle{
  background:transparent !important;
  border:0 !important;
  transform:none !important;
  width:auto !important; height:auto !important;
  margin:0 !important;
  border-radius:0 !important;
  font-size:2.5rem !important;
  line-height:1 !important;
  letter-spacing:-.02em;
  color:var(--son,var(--bleu-fr)) !important;
}
.son-card h3{ font-size:.82rem !important; font-family:'Nunito',sans-serif !important;
  font-weight:800 !important; margin:.5rem 0 0 !important; }
.son-card .son-state{ font-size:.72rem !important; min-height:0 !important; margin:.15rem 0 0 !important; }

/* ── maîtrisé : la tuile prend la couleur du son ── */
.is-termine.son-card, .is-termine.submodule-card, .is-termine.subm-card{ background:var(--son,var(--vert)) !important; }
.son-card.is-termine .son-circle{ color:#fff !important; }
.son-card.is-termine h3{ color:rgba(255,255,255,.92) !important; }
.son-card.is-termine .son-state{ display:none !important; }   /* le ✓ le dit déjà */

/* ── le prochain à faire : jaune, jamais rouge ── */
.is-suivant{ animation:ketHalo 2.4s ease-out infinite; }

/* ── pas encore ouvert : aucun relief ── */
.is-eteint.son-card, .is-eteint.submodule-card, .is-eteint.subm-card{ opacity:.42; box-shadow:none !important; background:rgba(255,255,255,.6) !important; }
.son-card.is-eteint .son-circle{ color:#B9B2A8 !important; }

/* ── le socle de progression ── */
.son-card .socle, .submodule-card .socle, .subm-card .socle{
  display:block;height:5px;border-radius:99px;background:rgba(29,53,87,.12);
  margin-top:.7rem;overflow:hidden;
}
.son-card .socle i, .submodule-card .socle i, .subm-card .socle i{ display:block;height:100%;background:var(--vert);border-radius:99px;transition:width .4s; }
.is-termine .socle{ background:rgba(255,255,255,.35) !important; }
.is-termine .socle i{ background:#fff !important; }

/* ── les deux actions : des liens, pas des boutons encadrés ── */
.son-card .btn-row{
  display:flex !important;gap:.8rem;justify-content:center;
  margin-top:.7rem !important;border:0 !important;padding:0 !important;
}
.mini-btn{
  flex:0 0 auto !important;background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;
  font-size:.73rem !important;font-weight:800 !important;
  color:var(--rouge) !important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
}
.mini-btn:hover:not(:disabled){ transform:none !important;box-shadow:none !important;opacity:.65; }
.mini-btn.done{ color:var(--vert) !important;text-decoration:none; }
.mini-btn.done::after{ display:none !important; }
.son-card.is-termine .mini-btn{ color:#fff !important;opacity:.9; }
.mini-btn.locked{ display:none !important; }
.son-card.is-eteint .btn-row{ display:none !important; }

/* Le bandeau de progression et le mélange, allégés pour aller avec. */
.progress-banner{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:.2rem .2rem 1rem !important;
  border-bottom:var(--filet-v4) !important;margin-bottom:1.4rem;
}
.progress-banner .pb-bar{ border:0 !important;background:rgba(29,53,87,.1) !important;height:6px !important; }
.mix-btn{
  border:0 !important;border-left:5px solid var(--jaune) !important;border-radius:12px !important;
  box-shadow:none !important;
}
.mix-btn:hover:not(:disabled){ transform:none !important;box-shadow:none !important;filter:brightness(1.12); }
.mix-btn:disabled{
  background:rgba(29,53,87,.05) !important;color:var(--gris) !important;
  border-left-color:rgba(29,53,87,.16) !important;opacity:1 !important;
}
.parent-tip{
  background:transparent !important;border:0 !important;border-top:var(--filet-v4) !important;
  border-radius:0 !important;padding:1.4rem .2rem 0 !important;
}

/* ════════ B · INDEX LIS — le chapitre replié ════════
   Le cadre du chapitre ne bouge pas. Replié, il montre un anneau
   et un compte ; les modules n'apparaissent qu'au dépliage. */

/* Le cadre entoure le chapitre ENTIER, pas seulement son en-tête :
   c'est ce qui met les modules « dans » le cadre une fois déplié.
   La couleur du chapitre devient une bande à gauche, à l'intérieur. */
.chapter-acc{
  position:relative;
  background:#fff !important;
  border:2.5px solid var(--bleu-fr) !important;
  border-radius:16px !important;
  box-shadow:4px 4px 0 var(--bleu-fr) !important;
  margin:0 0 1rem !important;
  overflow:hidden;
}
.chapter-acc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--chap,var(--bleu-clair));z-index:1;
}
.chapter-acc summary.chapter-header{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:.85rem 1.1rem .85rem 1.35rem !important;
}
.chapter-acc summary.chapter-header:hover{ transform:none !important;box-shadow:none !important; }
.chapter-acc summary.chapter-header:hover .chapter-title{ color:var(--rouge); }
.chapter-acc[open] .chapter-grid{
  border-left:0 !important;
  border-top:var(--filet-v4) !important;
  padding:.2rem 1.1rem .7rem 1.35rem !important;
  margin:0 !important;
}
.chapter-intro{ display:block !important;font-size:.84rem;color:var(--gris);margin:.1rem 0 0; }

.replie{ display:flex;align-items:center;gap:.7rem;padding:.55rem 0 .15rem;flex-wrap:wrap; }
.chapter-acc[open] .replie{ display:none; }

.cpt-anneau{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.cpt-anneau::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--vert) var(--p,0%),rgba(29,53,87,.12) 0);
}
.cpt-anneau span{
  position:relative;width:30px;height:30px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Nunito',sans-serif;font-size:.68rem;font-weight:900;color:var(--bleu-fr);
}
.replie .quoi2{ font-size:.82rem;color:var(--gris);font-weight:600; }

.pastille-now{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--jaune);border-radius:100px;padding:.18rem .65rem .18rem .2rem;
  font-size:.75rem;font-weight:800;color:var(--bleu-fr);
  animation:ketPulseJaune 2s ease-out infinite;
}
.pastille-now .p{
  width:22px;height:22px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;
}

/* Le chevron se cale sur le titre, pas au milieu du résumé. */
.chapter-acc summary.chapter-header{ align-items:flex-start !important; }
.chapter-chevron{ margin-top:.3rem; }

/* Les pastilles de module : rondes, et leur état se lit à la couleur. */
.mod-badge{
  border:0 !important;border-radius:50% !important;
  flex:0 0 38px !important;height:38px !important;
  font-size:.9rem !important;position:relative;
}
.mod-row:not(.done):not(.current) .mod-badge{
  background:#fff !important;color:var(--gris) !important;
  box-shadow:inset 0 0 0 2.5px rgba(29,53,87,.2) !important;
}
.mod-row.current .mod-badge{
  background:var(--jaune) !important;color:var(--bleu-fr) !important;
  animation:ketPulseJaune 2s ease-out infinite;
}
.mod-row.done .mod-badge::after{
  content:"✓";position:absolute;right:-3px;bottom:-3px;
  width:17px;height:17px;border-radius:50%;background:var(--vert);color:#fff;
  font-family:'Nunito',sans-serif;font-size:.6rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}

/* Les lignes de module, une fois le chapitre déplié. */
.chapter-grid{ display:block !important;background:transparent !important;box-shadow:none !important; }
.chapter-grid .mod-row{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;transform:none !important;
  padding:.6rem 0 !important;margin:0 !important;
}
.chapter-grid .mod-row + .mod-row{ border-top:var(--filet-v4) !important; }
.chapter-grid .mod-row:hover{
  background:transparent !important;transform:none !important;box-shadow:none !important;
}
.chapter-grid .mod-row:hover .mod-title{ color:var(--rouge); }
.mod-bar{ max-width:170px !important; }

.module-review-btn, .mod-review{
  background:none !important;border:0 !important;box-shadow:none !important;
  color:var(--bleu-clair) !important;text-decoration:underline;text-underline-offset:3px;
  padding:.1rem 0 !important;width:auto !important;
}

@media (max-width:560px){
  .sons-cards{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) !important; }
  .son-card .son-circle{ font-size:2.1rem !important; }
  .replie{ gap:.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .son-card.is-suivant{ animation:none; box-shadow:0 0 0 4px var(--jaune),0 12px 26px rgba(29,53,87,.1) !important; }
  .pastille-now, .mod-row.current .mod-badge{ animation:none; }
  .lueur{ display:none; }
}

/* Deux détails de finition */
.son-card .btn-row{ flex-wrap:wrap; }
.mix-btn .mix-title{ display:block; }   /* sinon « Mélange des sons15 exercices » se colle */
@media (max-width:560px){
  .mini-btn{ font-size:.68rem !important; }
  .son-card{ padding:1.1rem .6rem .9rem !important; }
}


/* ════════ C · LES DEUX AUTRES STRUCTURES DE CARTES ════════
   .submodule-card : lis-mots-frequents, lis-lettres-muettes, lis-liaisons
   .subm-card      : ecris-homophones
   Même traitement que la tuile : surface douce, remplissage à la
   couleur quand c'est terminé, halo jaune sur la suivante. */

.submodule-card, .subm-card{
  border:0 !important;
  box-shadow:0 2px 4px rgba(29,53,87,.06),0 12px 26px rgba(29,53,87,.10) !important;
  border-radius:18px !important;
  overflow:visible;
}
.submodule-card:hover, .subm-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 2px 4px rgba(29,53,87,.08),0 16px 32px rgba(29,53,87,.14) !important;
}
.is-eteint.submodule-card:hover, .is-eteint.subm-card:hover{ transform:none !important; }

/* Terminé : la carte prend sa couleur, le texte passe en blanc. */
.is-termine.submodule-card h3, .is-termine.subm-card h3,
.is-termine.submodule-card .sm-word, .is-termine.subm-card .subm-sub,
.is-termine.submodule-card .sm-words, .is-termine.subm-card .subm-count{
  color:#fff !important;
}
.is-termine .submodule-step{
  background:rgba(255,255,255,.22) !important;color:#fff !important;
}
.is-termine.submodule-card .sm-word{
  background:rgba(255,255,255,.18) !important;border-color:rgba(255,255,255,.35) !important;
}
/* Le ✓ remplace l'étoile : elle ferait doublon. */
.is-termine .submodule-stars, .is-termine .subm-stars{ display:none !important; }
/* Pas de filtre sur l'emoji d'une carte terminée : il devenait un carré blanc.
   Un emoji en couleur sur fond coloré reste plus lisible. */
.is-termine .subm-emoji{ filter:none; }

/* Les étoiles vides sont un signal faible : on les garde discrètes. */
.submodule-stars .star.empty, .subm-stars .star.empty{ opacity:.28; }

/* ════════ D · L'APERÇU DES JEUX (onglet « Jouer ») ════════
   Rendu par KetjeXP.renderGameCards, donc styles injectés à l'exécution :
   il faut !important pour passer devant, quel que soit l'ordre de chargement.
   Même langage que les tuiles de module : surface douce, pas de bord 3px. */
.xp-game-card{
  border:0 !important;
  border-radius:16px !important;
  box-shadow:0 2px 4px rgba(29,53,87,.06),0 12px 26px rgba(29,53,87,.1) !important;
  transition:transform .14s ease, box-shadow .14s ease !important;
}
.xp-game-card:not(.locked):not(.prereq-locked):hover{
  transform:translateY(-2px) !important;
  box-shadow:0 2px 4px rgba(29,53,87,.08),0 16px 32px rgba(29,53,87,.14) !important;
}
/* Pas encore débloqué : aucun relief, comme un son fermé. */
.xp-game-card.locked, .xp-game-card.prereq-locked{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  opacity:.55;
}
/* Un prérequis n'est pas une erreur : le rouge sort d'ici aussi. */
.xp-game-card .game-prereq-msg{
  color:var(--gris,#6B6660) !important;
  font-weight:600 !important;
}
.xp-game-card .game-prereq-tag{
  background:rgba(29,53,87,.07) !important;
  color:var(--gris,#6B6660) !important;
  border:0 !important;
}

/* Un jeu qu'on peut s'offrir avec ses XP reste plus lisible qu'un jeu
   bloqué par un prérequis : le prix doit se lire. */
.xp-game-card.locked{ opacity:.72; }
.xp-game-card.prereq-locked{ opacity:.52; }