/* ============================================================================
   Fenix — habillage
   ----------------------------------------------------------------------------
   Trois partis pris, empruntés à ce qui fonctionne ailleurs :

   - Des boutons « pressables » à ombre portée solide (Duolingo). Le bouton
     s'enfonce au clic : c'est ce détail tactile qui rend le geste satisfaisant,
     et il ne coûte qu'une transformation.
   - Des surfaces calmes et une hiérarchie typographique nette (Perplexity).
     L'exercice de maths est le contenu ; l'interface doit s'effacer devant lui.
   - Un vert affirmé pour l'action et l'or pour la progression (chess.com), afin
     que « ce sur quoi je peux cliquer » et « ce que j'ai gagné » ne se
     confondent jamais.

   Le thème sombre est complet et suit le réglage du système.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --fond: #f4f6f8;
  --carte: #ffffff;
  --carte-creuse: #f7f9fa;
  --bord: #e3e7ec;
  --bord-net: #cfd6de;

  /* Texte */
  --texte: #12151a;
  --doux: #5b6472;

  /* Marque : orange de flamme (Fenix).
     `--sur-marque` est la couleur du texte posé dessus. En thème clair,
     l'orange est assez foncé pour porter du blanc (5,2:1) ; en sombre il
     devient vif et reçoit du texte sombre. Cette bascule fait passer les deux
     thèmes au contraste AA sans dédoubler les règles. Le ton vif habille les
     surfaces sans texte (barres, jauges, calendrier). */
  --marque: #c2410c;
  --sur-marque: #ffffff;
  --marque-vif: #ff7a1a;
  --marque-ombre: #8a2c06;
  /* Voile assez clair pour que l'orange de marque y reste lisible (4,7:1). */
  --marque-voile: #fdf0e6;

  /* Accents */
  --or: #b26a00;
  --or-vif: #ffb020;
  --sur-or: #2a1c05;
  --or-voile: #fdf3e0;
  --rouge: #c23c2c;
  --sur-rouge: #ffffff;
  --rouge-ombre: #8f2b1e;
  --rouge-voile: #fdeeeb;
  --bleu: #2f6fb2;

  /* Rythme */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-plein: 999px;

  --ombre-douce: 0 1px 2px rgba(18, 21, 26, .05), 0 4px 14px rgba(18, 21, 26, .05);
  --ombre-portee: 0 8px 30px rgba(18, 21, 26, .13);

  --police: "Nunito", ui-rounded, "Segoe UI Variable", "Segoe UI",
            system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #101318;
    --carte: #191d24;
    --carte-creuse: #14181e;
    --bord: #29303a;
    --bord-net: #3a4350;

    --texte: #eef2f7;
    --doux: #9aa5b4;

    /* Sur fond sombre, un orange foncé s'éteint. On l'éclaircit franchement
       et on inverse la couleur du texte posé dessus : orange vif + texte
       sombre, plus lisible et plus vivant que l'inverse. */
    --marque: #ff8a3d;
    --sur-marque: #2a1204;
    --marque-vif: #ffa54d;
    --marque-ombre: #b34a12;
    --marque-voile: #2a1a0e;

    --or: #e0a13a;
    --or-vif: #ffbe45;
    --or-voile: #2a2115;
    --rouge: #ff6f5e;
    --sur-rouge: #250c07;
    --rouge-ombre: #a8432f;
    --rouge-voile: #2a1815;
    --bleu: #6aa5e0;

    --ombre-douce: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --ombre-portee: 0 10px 34px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.ecran { max-width: 1080px; margin: 0 auto; padding: 1.25rem 1.25rem 7rem; }
.cache { display: none !important; }

/* --- Typographie ---------------------------------------------------------- */

h1, h2, h3 { margin: 0; letter-spacing: -.02em; }

h1 {
  font-size: 1.45rem; font-weight: 800;
  display: flex; align-items: center; gap: .5rem;
}
h2 { font-size: 1.02rem; font-weight: 800; margin-bottom: .8rem; }
h3 { font-size: .88rem; font-weight: 700; color: var(--doux); margin: 1.4rem 0 .5rem; }

.marque {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--marque-voile);
  border-radius: var(--r-s);
  box-shadow: 0 2px 0 var(--marque-ombre);
}
.marque img { width: 24px; height: 24px; display: block; }

.aide { color: var(--doux); font-size: .85rem; margin: .2rem 0 .8rem; }

.etiquette {
  color: var(--doux); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}

.entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 0 1.1rem;
}

/* --- Cartes --------------------------------------------------------------- */

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.15rem 1.3rem;
  margin-bottom: .9rem;
  box-shadow: var(--ombre-douce);
}

.titre-ligne {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .5rem;
}
.titre-ligne h2 { margin-bottom: 0; }
.actions { display: flex; gap: .5rem; flex: 0 0 auto; }

/* --- Boutons -------------------------------------------------------------- */

button {
  font: inherit; font-weight: 700;
  cursor: pointer;
  border-radius: var(--r-m);
  transition: transform .08s ease, box-shadow .08s ease,
              background-color .15s ease, border-color .15s ease;
}
button:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

/* Le bouton « pressable » : une ombre solide sous le bloc, qui se comprime au
   clic. C'est le détail qui donne sa matière à l'interface. */
.principal, .valide, .rate {
  border: 0;
  padding: .72rem 1.5rem;
  box-shadow: 0 4px 0 var(--ombre-bouton, var(--marque-ombre));
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .9rem; font-weight: 800;
}
.principal { background: var(--marque); color: var(--sur-marque); --ombre-bouton: var(--marque-ombre); }
.valide    { background: var(--marque); color: var(--sur-marque); --ombre-bouton: var(--marque-ombre); }
.rate      { background: var(--rouge);  color: var(--sur-rouge);  --ombre-bouton: var(--rouge-ombre); }

.principal:hover, .valide:hover, .rate:hover { filter: brightness(1.07); }

.principal:active, .valide:active, .rate:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ombre-bouton);
}

.secondaire {
  background: var(--carte); color: var(--texte);
  border: 2px solid var(--bord-net);
  padding: .62rem 1.15rem;
  box-shadow: 0 3px 0 var(--bord-net);
  font-size: .88rem;
}
.secondaire:hover { border-color: var(--marque); color: var(--marque); }
.secondaire:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bord-net); }

.lien {
  background: none; border: 0; color: var(--doux);
  padding: .35rem .5rem; border-radius: var(--r-s);
  font-size: .85rem; font-weight: 700;
}
.lien:hover { color: var(--marque); background: var(--marque-voile); }

button:disabled {
  opacity: .45; cursor: not-allowed;
  transform: none !important; filter: none !important;
}

/* --- Choix en pastilles (durées, objectifs) -------------------------------- */

.choix { display: flex; flex-wrap: wrap; gap: .5rem; }

.choix button {
  border: 2px solid var(--bord);
  background: var(--carte-creuse);
  color: var(--doux);
  padding: .55rem 1.1rem;
  border-radius: var(--r-plein);
  font-size: .88rem;
}
.choix button:hover { border-color: var(--bord-net); color: var(--texte); }

.choix button[aria-pressed="true"] {
  background: var(--marque);
  border-color: var(--marque);
  color: var(--sur-marque);
  box-shadow: 0 3px 0 var(--marque-ombre);
}

/* --- Sélection des fiches et chapitres ------------------------------------ */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .4rem;
  max-height: 330px;
  overflow-y: auto;
  padding: .15rem;
  scrollbar-width: thin;
}

.grille label {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem;
  font-size: .87rem; font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.grille label:hover { background: var(--carte-creuse); }

/* Case à cocher dessinée : la case native ne se met pas au ton du reste. */
.grille input[type="checkbox"] {
  appearance: none; margin: 0;
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 2px solid var(--bord-net);
  border-radius: 6px;
  background: var(--carte);
  display: grid; place-content: center;
  transition: background-color .12s ease, border-color .12s ease;
}
.grille input[type="checkbox"]::after {
  content: ""; width: 10px; height: 6px;
  border: 2.5px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}
.grille input[type="checkbox"]:checked {
  background: var(--marque); border-color: var(--marque);
}
.grille input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.grille input[type="checkbox"]:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.grille label:has(input:checked) {
  background: var(--marque-voile);
  border-color: color-mix(in srgb, var(--marque) 35%, transparent);
}

.compte {
  margin-left: auto;
  color: var(--doux); font-size: .74rem; font-weight: 800;
  background: var(--carte-creuse);
  border: 1px solid var(--bord);
  padding: .05rem .45rem; border-radius: var(--r-plein);
}

/* Record personnel : l'or, réservé aux vraies occasions. */
.record {
  margin: .6rem 0 0;
  padding: .55rem .8rem;
  background: var(--or-voile);
  color: var(--or);
  border: 1px solid color-mix(in srgb, var(--or-vif) 45%, transparent);
  border-radius: var(--r-s);
  font-weight: 800;
}

/* État de la série : chaleureux, jamais alarmant. Le rouge est réservé aux
   erreurs ; une série en jeu reste une bonne nouvelle — il y a quelque chose
   à sauver. La reprise après rupture est plus neutre encore. */
.etat-serie {
  display: flex; align-items: center; gap: 1rem;
  background: var(--or-voile);
  border-color: color-mix(in srgb, var(--or-vif) 50%, transparent);
  border-left: 5px solid var(--or-vif);
}
.etat-serie .flamme-etat { font-size: 2rem; line-height: 1; flex: none; }
.etat-serie strong { font-size: 1rem; }
.etat-serie .aide { margin: .15rem 0 0; }
.etat-serie.rompue {
  background: var(--carte-creuse);
  border-color: var(--bord);
  border-left-color: var(--bord-net);
}
.etat-serie.rompue .flamme-etat { filter: grayscale(1); opacity: .6; }

/* --- Bien démarrer --------------------------------------------------------- */

.etapes-demarrage {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
.etapes-demarrage li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  background: var(--carte-creuse);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  font-weight: 700;
}
.etapes-demarrage li.faite { color: var(--doux); text-decoration: line-through; }
.etapes-demarrage li .lien { margin-left: auto; }
.etapes-demarrage .coche {
  width: 1.4rem; height: 1.4rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--bord-net);
  font-size: .8rem; font-weight: 900;
  color: var(--sur-marque);
}
.etapes-demarrage li.faite .coche {
  background: var(--marque-vif);
  border-color: var(--marque-vif);
}

/* Couronnes de maîtrise : la mémoire du document, résumée en un regard. */
.couronnes {
  font-size: .68rem; letter-spacing: -.2em; padding-right: .2em;
  filter: grayscale(45%) opacity(.8);
}
.couronnes.legendaire {
  filter: none;
  text-shadow: 0 0 8px color-mix(in srgb, var(--or-vif) 60%, transparent);
}

/* --- Barre d'action fixe -------------------------------------------------- */

.barre-bas {
  position: fixed; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .8rem max(1.25rem, calc(50vw - 540px + 1.25rem));
  background: color-mix(in srgb, var(--carte) 88%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bord);
}
.barre-bas .aide { margin: 0; font-weight: 600; }
/* Les deux boutons restent côte à côte, le résumé à gauche. */
.barre-bas #reviser { margin-left: auto; }

/* --- Session : minuteries et score ---------------------------------------- */

.minuteries { display: flex; align-items: center; gap: .7rem; }

#chrono {
  font-size: 1.6rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.badge {
  background: var(--marque-voile);
  color: var(--marque);
  border: 1px solid color-mix(in srgb, var(--marque) 30%, transparent);
  padding: .2rem .7rem; border-radius: var(--r-plein);
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
}

.score { display: flex; align-items: center; gap: .8rem; font-weight: 700; }

/* --- Progression : pastille de niveau et barre d'XP ----------------------- */

.bandeau-profil { display: grid; gap: 1rem; }
.identite { display: flex; align-items: center; gap: .85rem; }
.identite strong { font-size: 1.1rem; font-weight: 800; }
.identite .aide { margin: 0; }

/* Fond plein plutôt que dégradé : un dégradé vers le vert vif ferait passer
   le texte sous le seuil de contraste sur sa partie claire. Le relief vient
   d'un liseré interne, qui ne coûte rien à la lisibilité. */
.pastille-niveau {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  background: var(--marque);
  color: var(--sur-marque); border-radius: 50%;
  font-weight: 900; font-size: 1.25rem;
  box-shadow: 0 3px 0 var(--marque-ombre),
              inset 0 2px 0 rgba(255, 255, 255, .25);
}
.pastille-niveau.petite {
  width: 34px; height: 34px; flex-basis: 34px; font-size: .9rem;
  box-shadow: 0 2px 0 var(--marque-ombre), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pastille-niveau.grande {
  width: 96px; height: 96px; flex-basis: 96px; font-size: 2.4rem;
  box-shadow: 0 5px 0 var(--marque-ombre), inset 0 3px 0 rgba(255, 255, 255, .25);
}

.barre-xp {
  position: relative;
  background: var(--carte-creuse);
  border: 1px solid var(--bord);
  border-radius: var(--r-plein);
  height: 16px;
}
.barre-xp .remplissage {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--marque), var(--marque-vif));
  border-radius: var(--r-plein);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
/* Reflet clair sur la moitié haute : la barre paraît bombée plutôt que plate. */
.barre-xp .remplissage::after {
  content: ""; position: absolute; inset: 3px 6px auto 6px; height: 4px;
  background: rgba(255, 255, 255, .4); border-radius: var(--r-plein);
}

.indicateurs { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.indicateur {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 .45rem;
}
.indicateur .icone { grid-row: 1 / 3; font-size: 1.5rem; line-height: 1; }
.indicateur .valeur { font-size: 1.3rem; font-weight: 900; line-height: 1.1; }
.indicateur .etiquette { grid-column: 2; }

/* Série en cours : mise en avant chaleureuse, jamais alarmante. */
.serie-active .valeur { color: var(--or); }

/* Hero de profil : la carte devient un bandeau coloré, le premier regard de
   l'écran. Les couleurs sont figées (orange sombre + texte blanc) plutôt que
   prises au thème : un dégradé au thème passerait le texte sous le seuil de
   contraste sur son extrémité claire en mode sombre. Blanc sur ces deux
   oranges reste au-dessus de 5:1 dans les deux thèmes. */
.carte.bandeau-profil {
  background: linear-gradient(135deg, #9a3409, #c2410c 70%, #d9530e);
  border: none;
  color: #fff;
  box-shadow: 0 6px 20px rgba(154, 52, 9, .3);
}
.carte.bandeau-profil .aide { color: rgba(255, 255, 255, .85); }
.carte.bandeau-profil .identite strong { color: #fff; }
/* Pastille inversée : fond blanc, chiffre orange — elle ressort du bandeau. */
.carte.bandeau-profil .pastille-niveau {
  background: #fff; color: #c2410c;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .5);
}
.carte.bandeau-profil .barre-xp {
  background: rgba(255, 255, 255, .22); border-color: transparent;
}
.carte.bandeau-profil .barre-xp .remplissage { background: #fff; }
.carte.bandeau-profil .indicateur .valeur { color: #fff; }
.carte.bandeau-profil .serie-active .valeur { color: #ffe08a; }

/* --- Barre d'XP en session ------------------------------------------------ */

.bandeau-xp {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.4rem;
}
.bandeau-xp .barre-xp { flex: 1; }
.bandeau-xp .aide { margin: 0; font-weight: 800; white-space: nowrap; }

.gains {
  position: absolute; right: 0; bottom: 100%;
  opacity: 0; pointer-events: none; white-space: nowrap;
  font-weight: 900; font-size: 1rem; color: var(--marque);
  text-shadow: 0 1px 0 var(--carte);
}
.gains.anime { animation: envol 1.15s cubic-bezier(.22, 1, .36, 1); }
@keyframes envol {
  0%   { opacity: 0; transform: translateY(8px) scale(.85); }
  22%  { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-28px) scale(1); }
}

/* L'or reste vif dans les deux thèmes : le texte posé dessus est donc sombre
   partout, ce qui évite un couple blanc-sur-jaune illisible. */
.combo {
  background: var(--or-vif);
  color: var(--sur-or);
  padding: .22rem .8rem; border-radius: var(--r-plein);
  font-size: .78rem; font-weight: 900;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.combo.anime { animation: pulse .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes pulse { 45% { transform: scale(1.28) rotate(-2deg); } }

/* --- Exercice ------------------------------------------------------------- */

.zone { display: flex; gap: 1rem; align-items: flex-start; }
#panneau-exercice { flex: 1; min-width: 0; }

#contexte {
  font-weight: 800; color: var(--texte); font-size: .92rem;
  margin-bottom: .7rem;
}

#images img, #images-reponse img, #corrige-detaille img {
  max-width: 100%; display: block;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  margin-bottom: .5rem;
  box-shadow: var(--ombre-douce);
}

#revele, #corrige-genere {
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 2px dashed var(--bord);
}

.avertissement {
  background: var(--or-voile);
  border-left: 4px solid var(--or-vif);
  color: var(--texte);
  padding: .7rem 1rem; border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: .86rem; margin: 0 0 1rem;
}

.actions-exercice {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--bord);
}
.separateur { flex: 1; }

#panneau-cours {
  width: 46%; min-width: 340px;
  display: flex; flex-direction: column;
  height: calc(100vh - 9rem);
  position: sticky; top: 1rem;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.entete-panneau {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--bord);
  font-weight: 800;
}
#pdf-cours { flex: 1; width: 100%; border: 0; }

/* --- Corrigé en markdown -------------------------------------------------- */

.markdown { font-size: .95rem; }
.markdown h2, .markdown h3 { margin: 1.3rem 0 .5rem; color: var(--texte); }
.markdown code {
  background: var(--carte-creuse);
  border: 1px solid var(--bord);
  padding: .08rem .35rem; border-radius: 5px; font-size: .88em;
}
.markdown pre {
  background: var(--carte-creuse); border: 1px solid var(--bord);
  padding: .85rem; border-radius: var(--r-s); overflow-x: auto;
}
.markdown table { border-collapse: collapse; }
.markdown td, .markdown th { border: 1px solid var(--bord); padding: .35rem .65rem; }

/* --- Passage de niveau ---------------------------------------------------- */

.voile {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--fond) 78%, transparent);
  backdrop-filter: blur(6px);
  animation: fondu .25s ease-out;
}
@keyframes fondu { from { opacity: 0; } }

.carte-niveau {
  display: grid; gap: .7rem; justify-items: center;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 26px;
  padding: 2.2rem 3.4rem;
  text-align: center;
  box-shadow: var(--ombre-portee);
  animation: surgir .5s cubic-bezier(.34, 1.56, .64, 1);
}
.carte-niveau strong { font-size: 1.5rem; font-weight: 900; }
@keyframes surgir { from { opacity: 0; transform: scale(.8) translateY(16px); } }

/* --- Notifications de badge ----------------------------------------------- */

.pile-notifs {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: flex; flex-direction: column; gap: .55rem;
}
.notif {
  max-width: 310px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-left: 5px solid var(--or-vif);
  border-radius: var(--r-m);
  padding: .7rem 1rem;
  box-shadow: var(--ombre-portee);
  animation: entree .4s cubic-bezier(.34, 1.56, .64, 1);
}
.notif strong { display: block; font-size: .92rem; font-weight: 800; }
.notif span { color: var(--doux); font-size: .8rem; }
@keyframes entree { from { opacity: 0; transform: translateX(28px) scale(.95); } }

/* --- Bilan de session ----------------------------------------------------- */

.recap { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.recap-xp {
  display: grid; justify-items: center;
  background: var(--marque-voile);
  border: 1px solid color-mix(in srgb, var(--marque) 25%, transparent);
  border-radius: var(--r-l);
  padding: .8rem 1.5rem;
}
.recap-xp span:first-child {
  font-size: 2.6rem; font-weight: 900; color: var(--marque);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
#resume-bilan { margin: 0; font-weight: 600; }
.rangee-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.rangee-badges:empty { display: none; }

/* --- Galerie de badges ---------------------------------------------------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: .6rem;
}
.badge-carte {
  position: relative;
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  padding: .7rem .8rem .7rem 2.6rem;
  background: var(--carte);
}
/* Pastille en lieu et place d'une icône : elle dit « obtenu » d'un coup d'œil. */
.badge-carte::before {
  content: "★";
  position: absolute; left: .7rem; top: .72rem;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .8rem;
  background: var(--bord); color: var(--doux);
}
.badge-carte strong { display: block; font-size: .87rem; font-weight: 800; }
.badge-carte span { color: var(--doux); font-size: .76rem; }

.badge-carte.obtenu {
  border-color: color-mix(in srgb, var(--marque) 45%, transparent);
  background: var(--marque-voile);
}
.badge-carte.obtenu::before { background: var(--marque); color: var(--sur-marque); }
.badge-carte.verrouille { opacity: .55; }

/* --- Calendrier d'activité ------------------------------------------------ */

.calendrier {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  overflow-x: auto; padding-bottom: .35rem;
}
.case-jour { width: 14px; height: 14px; border-radius: 4px; }
.case-jour[data-niveau="0"] { background: var(--carte-creuse); border: 1px solid var(--bord); }
.case-jour[data-niveau="1"] { background: color-mix(in srgb, var(--marque-vif) 28%, var(--carte)); }
.case-jour[data-niveau="2"] { background: color-mix(in srgb, var(--marque-vif) 52%, var(--carte)); }
.case-jour[data-niveau="3"] { background: color-mix(in srgb, var(--marque-vif) 76%, var(--carte)); }
.case-jour[data-niveau="4"] { background: var(--marque-vif); }

/* --- Statistiques par chapitre -------------------------------------------- */

.ligne-stat {
  display: grid; grid-template-columns: 1fr 120px 48px;
  gap: .9rem; align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bord);
  font-size: .88rem; font-weight: 600;
}
.ligne-stat:last-child { border-bottom: 0; }
.ligne-stat span:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.jauge {
  background: var(--carte-creuse);
  border: 1px solid var(--bord);
  border-radius: var(--r-plein);
  height: 10px; overflow: hidden;
}
.jauge div {
  height: 100%;
  background: linear-gradient(90deg, var(--marque), var(--marque-vif));
  border-radius: var(--r-plein);
}

/* --- Partage et comparaison ----------------------------------------------- */

.ligne-partage { display: flex; gap: .5rem; margin-bottom: .55rem; }
.ligne-partage input {
  flex: 1; min-width: 0;
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: .6rem .85rem;
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--carte-creuse);
  color: var(--texte);
}
.ligne-partage input:focus {
  outline: none; border-color: var(--marque);
  background: var(--carte);
}
.ligne-partage input::placeholder { color: var(--doux); font-weight: 500; }

.comparaison { display: flex; gap: .9rem; margin-top: 1.1rem; }
.colonne-comparaison {
  flex: 1;
  display: grid; justify-items: center; gap: .1rem;
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  padding: .9rem .7rem;
  text-align: center;
}
.colonne-comparaison strong { font-size: 1rem; font-weight: 800; }
.colonne-comparaison .aide { margin: 0; }
.colonne-comparaison .valeur { font-size: 1.7rem; font-weight: 900; line-height: 1.15; }
.colonne-comparaison.gagnant {
  border-color: var(--marque);
  background: var(--marque-voile);
}

/* --- Écran de connexion --------------------------------------------------- */

.accueil-compte {
  max-width: 420px;
  margin: 6vh auto 0;
  display: grid; gap: .9rem;
}
/* Féni accueille : le premier regard se pose sur elle, pas sur un formulaire. */
.mascotte-accueil {
  width: 140px; height: 140px;
  margin: 0 auto;
  filter: drop-shadow(0 6px 14px rgba(194, 65, 12, .25));
}
.mascotte-voile { width: 120px; height: 120px; }
.mascotte-vide {
  width: 96px; height: 96px;
  margin: .4rem auto;
  display: block;
  opacity: .9;
}
.accueil-compte h1 { justify-content: center; font-size: 1.6rem; }
.accueil-compte > .aide { text-align: center; margin: 0 0 .5rem; }
.accueil-compte .choix { margin-bottom: 1.2rem; }
.accueil-compte .choix button { flex: 1; }

/* --- Parcours d'accueil (nouveau compte) ---------------------------------- */

.accueil { max-width: 580px; margin: 4vh auto 0; text-align: center; }

.dia { display: none; }
.dia.active {
  display: grid; gap: 1.1rem; justify-items: center;
  animation: apparition .35s ease;
}
.dia h1 { justify-content: center; font-size: 1.7rem; }
.mascotte-accueil.grande {
  width: 168px; height: 168px;
}
.accroche {
  font-size: 1.05rem; color: var(--doux);
  margin: 0; max-width: 46ch; line-height: 1.6;
}
.accroche strong { color: var(--texte); }

.grand { padding: .9rem 2rem; font-size: 1rem; }

/* Les trois pictos de la boucle : chacun sa teinte, pour un écran vivant. */
.pictos { display: grid; gap: .9rem; width: 100%; margin: .4rem 0; }
@media (min-width: 620px) { .pictos { grid-template-columns: repeat(3, 1fr); } }
.picto {
  display: grid; gap: .35rem; justify-items: center;
  padding: 1.2rem .9rem;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-douce);
}
.picto .rond {
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 2rem; margin-bottom: .2rem;
}
.picto strong { font-size: 1rem; }
.picto .aide { margin: 0; font-size: .82rem; }
.picto-bleu .rond { background: color-mix(in srgb, var(--bleu) 20%, transparent); }
.picto-orange .rond { background: var(--marque-voile); }
.picto-or .rond { background: var(--or-voile); }

.accueil-bas {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 1.8rem;
}
.points { display: flex; gap: .45rem; }
.point {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bord-net);
  transition: background .2s ease, transform .2s ease;
}
.point.actif { background: var(--marque); transform: scale(1.3); }

@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dia.active { animation: none; }
}

/* --- Parcours : le circuit ------------------------------------------------ */

.circuit { list-style: none; margin: 0; padding: 0 0 0 1.2rem; position: relative; }

/* Le fil qui relie les étapes : c'est lui qui fait lire la suite comme un
   chemin plutôt que comme une liste. */
.circuit::before {
  content: ""; position: absolute;
  left: 1.2rem; top: 1.4rem; bottom: 1.4rem;
  width: 3px; border-radius: 3px;
  background: var(--bord);
}

.etape-circuit {
  position: relative;
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: .9rem;
}

.pastille-circuit {
  flex: 0 0 48px; width: 48px; height: 48px;
  margin-left: -1.2rem;
  display: grid; place-items: center;
  font-size: 1.35rem;
  border-radius: 50%;
  background: var(--marque);
  border: 3px solid var(--fond);
  box-shadow: 0 3px 0 var(--marque-ombre);
  position: relative; z-index: 1;
}
.etape-circuit.valide .pastille-circuit {
  background: var(--or-vif);
  box-shadow: 0 3px 0 var(--or);
}
.etape-circuit.verrouille .pastille-circuit {
  background: var(--carte-creuse);
  border-color: var(--fond);
  box-shadow: 0 3px 0 var(--bord-net);
  filter: grayscale(1);
}

.corps-etape {
  flex: 1;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1rem 1.15rem;
  box-shadow: var(--ombre-douce);
}
.etape-circuit.verrouille .corps-etape { opacity: .6; }
.corps-etape strong { font-size: 1.02rem; }
.corps-etape .aide { margin: .2rem 0 0; }

.actions-etape { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.actions-etape .secondaire.faite { color: var(--marque); border-color: var(--marque); }

/* --- Parcours : cours, question et correction ----------------------------- */

.enonce { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }

.choix-reponses { display: grid; gap: .6rem; }
@media (min-width: 560px) { .choix-reponses { grid-template-columns: 1fr 1fr; } }

/* Des cibles larges : sur un téléphone, une réponse se choisit au pouce. */
.reponse {
  min-height: 56px;
  padding: .8rem 1rem;
  background: var(--carte);
  color: var(--texte);
  border: 2px solid var(--bord-net);
  border-radius: var(--r-m);
  box-shadow: 0 3px 0 var(--bord-net);
  font-size: 1.05rem; font-weight: 700;
}
.reponse:hover:not(:disabled) { border-color: var(--marque); color: var(--marque); }
.reponse:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--bord-net); }
.reponse:disabled { opacity: .55; cursor: default; }

.verdict { display: block; font-size: 1.15rem; margin-bottom: .5rem; }
.verdict.juste { color: var(--marque); }
.verdict.faux { color: var(--rouge); }

#panneau-fin-lecon .barre-xp { margin: .8rem 0 .4rem; }

/* --- Pictos de titre et réglages repliés ---------------------------------- */

.picto-titre { font-size: 1.1em; margin-right: .15rem; }

.reglages summary {
  display: flex; align-items: center; gap: .6rem;
  cursor: pointer; list-style: none;
  font-weight: 800; font-size: 1.02rem;
}
.reglages summary::-webkit-details-marker { display: none; }
.reglages summary::after {
  content: "▾"; margin-left: auto; color: var(--doux);
  transition: transform .2s ease;
}
.reglages[open] summary::after { transform: rotate(180deg); }
.reglages summary .aide { margin: 0; font-weight: 600; }
.reglages summary .somme-titre { margin-right: .3rem; }
.bloc-reglage { margin-top: 1.2rem; }
.bloc-reglage h3 { margin: .2rem 0 .55rem; color: var(--texte); }

#formulaire-compte { display: grid; gap: .8rem; }

.champ { display: grid; gap: .3rem; }
.champ input {
  font: inherit; font-weight: 600;
  padding: .68rem .9rem;
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--carte-creuse);
  color: var(--texte);
}
.champ input:focus {
  outline: none;
  border-color: var(--marque);
  background: var(--carte);
}
.champ input::placeholder { color: var(--doux); font-weight: 500; }

#formulaire-compte .principal { width: 100%; margin-top: .3rem; }
#note-compte { text-align: center; margin: .9rem 0 0; }

.entete .actions { align-items: center; }

/* --- Informations légales ------------------------------------------------- */

.liste-infos { margin: 0 0 .8rem; padding-left: 1.2rem; }
.liste-infos li { margin-bottom: .4rem; font-size: .9rem; }

#editeur-site { font-style: italic; }

/* --- Quêtes --------------------------------------------------------------- */

.liste-quetes { display: grid; gap: .75rem; }

.quete {
  display: grid; gap: .35rem;
  padding: .7rem .85rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--carte-creuse);
}
.quete .barre-xp { height: 10px; }
.quete .aide { margin: 0; font-variant-numeric: tabular-nums; }

.entete-quete { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.entete-quete strong { font-size: .9rem; font-weight: 800; }

.gain-quete {
  font-size: .75rem; font-weight: 900;
  color: var(--or); white-space: nowrap;
}

/* Une quête accomplie s'efface : elle a joué son rôle, elle ne doit plus
   attirer l'œil au détriment de celles qui restent à faire. */
.quete.accomplie {
  border-color: color-mix(in srgb, var(--marque) 40%, transparent);
  background: var(--marque-voile);
}
.quete.accomplie .gain-quete { color: var(--marque); font-size: 1rem; }
.quete.accomplie strong { opacity: .75; }

/* --- Classement entre amis ------------------------------------------------ */

.ligne-classement {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--bord);
}
.ligne-classement:last-child { border-bottom: 0; }
.ligne-classement.moi {
  background: var(--marque-voile);
  border-radius: var(--r-s);
  border-bottom-color: transparent;
}

.place {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--carte-creuse);
  border: 1px solid var(--bord);
  font-size: .8rem; font-weight: 900;
}
.ligne-classement.moi .place {
  background: var(--marque); color: var(--sur-marque); border-color: var(--marque);
}

.qui { flex: 1; min-width: 0; }
.qui strong { display: block; font-size: .92rem; font-weight: 800; }
.qui .aide { margin: 0; }

.xp-semaine {
  font-weight: 900; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#carte-defi .barre-xp { height: 18px; margin-top: .4rem; }

/* --- Bibliothèque de documents -------------------------------------------- */

.zone-depot {
  border: 2px dashed var(--bord-net);
  border-radius: var(--r-l);
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--carte-creuse);
  transition: border-color .15s ease, background-color .15s ease;
}
.zone-depot.survol {
  border-color: var(--marque);
  background: var(--marque-voile);
}
.zone-depot p { margin: .2rem 0; }
.zone-depot .aide { margin: .4rem 0; }

.ligne-document {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 0;
  border-bottom: 1px solid var(--bord);
}
.ligne-document:last-child { border-bottom: 0; }
.infos-document { flex: 1; min-width: 200px; }
.infos-document strong { display: block; font-size: .95rem; font-weight: 800; }
.infos-document .aide { margin: 0; }

.etat {
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .18rem .65rem; border-radius: var(--r-plein);
  background: var(--carte-creuse); color: var(--doux);
  border: 1px solid var(--bord);
}
.etat.pret { background: var(--marque-voile); color: var(--marque);
             border-color: color-mix(in srgb, var(--marque) 30%, transparent); }
.etat.echec { background: var(--or-voile); color: var(--or);
              border-color: color-mix(in srgb, var(--or) 35%, transparent); }
.etat.en-cours { background: var(--or-voile); color: var(--or); }

/* --- Relecture des découpes ----------------------------------------------- */

.carte-apercu { padding: .8rem 1rem; }
.carte-apercu img {
  max-width: 100%; display: block;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  margin-top: .6rem;
}
.carte-apercu.ecarte { opacity: .45; }
.carte-apercu.ecarte img { filter: grayscale(1); }

.garder { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.garder input[type="checkbox"] {
  appearance: none; margin: 0;
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 2px solid var(--bord-net);
  border-radius: 6px;
  background: var(--carte);
  display: grid; place-content: center;
}
.garder input[type="checkbox"]::after {
  content: ""; width: 10px; height: 6px;
  border: 2.5px solid var(--sur-marque); border-top: 0; border-right: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}
.garder input[type="checkbox"]:checked {
  background: var(--marque); border-color: var(--marque);
}
.garder input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.garder span { font-size: .85rem; font-weight: 700; }

#choix-profil {
  flex: 1; font: inherit; font-weight: 600; font-size: .85rem;
  padding: .6rem .8rem;
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--carte-creuse);
  color: var(--texte);
}

/* --- Adaptations ---------------------------------------------------------- */

@media (max-width: 880px) {
  .ecran { padding: 1rem 1rem 7rem; }
  .zone { flex-direction: column; }
  #panneau-cours { width: 100%; min-width: 0; height: 70vh; position: static; }
  .indicateurs { gap: 1.1rem; }
  .recap { gap: 1rem; }
  .barre-bas { padding: .7rem 1rem; }
  h1 { font-size: 1.25rem; }
  #chrono { font-size: 1.35rem; }
}

@media (max-width: 560px) {
  .grille { grid-template-columns: 1fr; }
  .comparaison { flex-direction: column; }
  .actions-exercice > button { flex: 1 1 auto; }
  .separateur { display: none; }
}

/* Le système peut demander moins de mouvement : les animations se réduisent
   alors à leur état final, sans rien retirer de l'information. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}