/* ==========================================================================
   Brainoko — feuille de style (mobile first)
   Bleu marine  #1B2A6B  couleur principale
   Bleu pastel  #CFE0F7  header
   Gris clair   #F4F5F7  fond du corps
   ========================================================================== */

:root {
  --marine: #1B2A6B;
  --marine-fonce: #142051;
  --bleu-pastel: #CFE0F7;
  --bleu-grise: #8FA3C8;      /* icônes inactives de la barre du bas */
  --gris-fond: #F4F5F7;
  --blanc: #FFFFFF;
  --noir: #000000;
  --gris-texte: #5B6170;
  --bordure: #E6E8EF;
  --ombre: 0 1px 2px rgba(19, 26, 56, .06), 0 4px 12px rgba(19, 26, 56, .05);
  --hauteur-barre: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gris-fond);
  color: var(--noir);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  padding-bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom));
}

.sprite { display: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* ————— Écran de bienvenue (choix du niveau) ————————————————————— */
.corps--bloque { overflow: hidden; }

.ecran-niveau {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bleu-pastel) 0%, var(--gris-fond) 38%);
  animation: apparition .25s ease both;
}
.ecran-niveau[hidden] { display: none; }

.ecran-contenu {
  width: 100%;
  max-width: 440px;
  padding: calc(36px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}

.ecran-logo { display: block; width: 52px; height: 52px; margin-bottom: 16px; }
.ecran-logo svg { display: block; width: 100%; height: 100%; }

.ecran-titre {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--marine);
}
.ecran-texte { margin: 8px 0 0; font-size: 14px; color: var(--gris-texte); }

.groupes-niveaux {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carte-niveau {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
  text-align: left;
  transition: transform .15s ease, border-color .15s ease;
}
.carte-niveau:active { transform: scale(.985); border-color: var(--marine); }
.carte-niveau--active { border-color: var(--marine); }
.carte-niveau-emoji { font-size: 26px; flex: none; }
.carte-niveau-texte { flex: 1; min-width: 0; }
.carte-niveau-nom { display: block; font-size: 16px; font-weight: 700; color: var(--noir); }
.carte-niveau-detail { display: block; margin-top: 2px; font-size: 12px; color: var(--gris-texte); }

.ecran-pied { margin-top: 26px; }
.ecran-pied .bouton-principal { margin-top: 0; }

/* ————— Header ————————————————————————————————————————————————— */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top)) 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--bleu-pastel);
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--noir);
}

.logo { display: block; width: 34px; height: 34px; flex: none; }
.logo svg { display: block; width: 100%; height: 100%; }

.marque-nom {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--marine);
}

.cloche {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  color: var(--marine);
  background: rgba(255, 255, 255, .55);
  transition: background .15s ease, transform .15s ease;
}
.cloche:active { transform: scale(.94); background: rgba(255, 255, 255, .85); }
.cloche svg { width: 22px; height: 22px; }

.cloche-pastille {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E5484D;
  color: var(--blanc);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.cloche-pastille[hidden] { display: none; }

/* ————— Corps ——————————————————————————————————————————————————— */
.corps { padding: 16px 16px 24px; }

.vue { animation: apparition .18s ease both; }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Un élève lit sur un téléphone, souvent en marchant : on ne descend pas
   sous 13 px pour du texte courant, et les titres respirent. */
.titre-categorie {
  margin: 24px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--noir);
}
.vue > .titre-categorie:first-child { margin-top: 2px; }
.titre-categorie--grand { font-size: 20px; letter-spacing: -0.01em; }

.sous-texte {
  margin: -2px 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris-texte);
}

/* ————— Mes fiches : une catégorie par matière ——————————————————— */
.liste-cours { display: flex; flex-direction: column; gap: 10px; }

.dossier {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
  overflow: hidden;
}

.dossier-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--blanc);
}
.dossier-tete:active { background: #EAEDF5; }
.dossier-emoji { font-size: 20px; flex: none; }
.dossier-tete .matiere-chevron { position: static; flex: none; }
.dossier--ouvert .dossier-tete { border-bottom: 1px solid var(--bordure); }
.dossier--ouvert .dossier-tete .matiere-chevron { transform: rotate(-90deg); color: var(--marine); }

.dossier-contenu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 14px;
  background: var(--gris-fond);
  animation: depliage .22s ease both;
}
.dossier-contenu[hidden] { display: none; }
.dossier-vide { margin: 2px 0; font-size: 12px; color: var(--gris-texte); }

.carte-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.carte-actions .bouton-texte { margin-top: 6px; }

.choix-vide {
  padding: 12px;
  background: var(--blanc);
  border: 1px dashed var(--bordure);
  border-radius: 14px;
  text-align: center;
}
.choix-vide .bouton-secondaire { margin-top: 10px; }

.deplie-creer { margin-top: 12px; }

.carte-cours {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
  padding: 14px 14px 16px;
}

.carte-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.carte-titre {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--noir);
}

.carte-jours {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bleu-pastel);
  color: var(--marine);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.carte-date {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--noir);
}

.barre-progression {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: #E7EAF3;
  overflow: hidden;
}
.barre-progression-remplie {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--marine);
  transition: width .6s cubic-bezier(.3, .8, .4, 1);
}
.barre-legende {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gris-texte);
}

.bouton-reviser {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 16px;
  /* pilule : rayon égal à la moitié de la hauteur du bouton */
  border-radius: 50px;
  background: var(--marine);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background .15s ease, transform .15s ease;
}
.bouton-reviser:active { background: var(--marine-fonce); transform: scale(.985); }

/* ————— Carrousel dépliant des thèmes ————————————————————————— */
.carrousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* le carrousel déborde jusqu'aux bords de l'écran */
  margin: 0 -16px;
  padding: 2px 16px 6px;
}
.carrousel::-webkit-scrollbar { display: none; }

.matiere-carte {
  position: relative;
  flex: 0 0 auto;
  width: 126px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.matiere-carte:active { transform: scale(.97); }
.matiere-emoji { font-size: 20px; line-height: 1.4; }
.matiere-nom { font-size: 12px; font-weight: 700; color: var(--noir); }
.matiere-compte { font-size: 12px; color: var(--gris-texte); }

.matiere-chevron {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 14px;
  height: 14px;
  color: var(--bleu-grise);
  transform: rotate(90deg);
  transition: transform .22s ease, color .18s ease;
}

.matiere-carte--active { background: var(--marine); border-color: var(--marine); }
.matiere-carte--active .matiere-chevron { color: var(--blanc); transform: rotate(-90deg); }
.matiere-carte--active .matiere-nom { color: var(--blanc); }
.matiere-carte--active .matiere-compte { color: var(--bleu-pastel); }

.deplie {
  margin-top: 10px;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
  animation: depliage .22s ease both;
}
.deplie[hidden] { display: none; }
@keyframes depliage {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.deplie-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--noir);
}
.deplie-niveau {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bleu-pastel);
  color: var(--marine);
  font-size: 12px;
  font-weight: 700;
}

.liste-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.theme {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--gris-fond);
  text-align: left;
}
.theme:active { background: #E4E8F2; }
.theme-numero {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--bleu-pastel);
  color: var(--marine);
  font-size: 12px;
  font-weight: 700;
}
.theme-nom { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--noir); }

.themes-vide {
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
}
.themes-vide-texte { margin: 0; font-size: 12px; color: var(--gris-texte); }
.themes-vide .bouton-principal { margin-top: 12px; }

/* ————— Carte d'accueil : scanner une fiche ————————————————————— */
.carte-scan {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: var(--marine);
  border-radius: 18px;
  box-shadow: var(--ombre);
  text-align: left;
  transition: transform .15s ease, background .15s ease;
}
.carte-scan:active { transform: scale(.985); background: var(--marine-fonce); }

.carte-scan-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: rgba(207, 224, 247, .18);
  color: var(--blanc);
}
.carte-scan-icone svg { width: 24px; height: 24px; }

.carte-scan-texte { flex: 1; min-width: 0; }
.carte-scan-titre { display: block; font-size: 14px; font-weight: 700; color: var(--blanc); }
.carte-scan-detail { display: block; margin-top: 2px; font-size: 12px; color: var(--bleu-pastel); }

.carte-scan-puces { display: flex; flex-direction: column; gap: 4px; flex: none; }
.carte-scan-puces svg { width: 15px; height: 15px; color: var(--bleu-grise); }

/* ————— Feuille d'options de création ————————————————————————— */
.feuille-fond {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(16, 26, 61, .45);
  animation: fondu .2s ease both;
}
.feuille-fond[hidden] { display: none; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.feuille {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--blanc);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(19, 26, 56, .18);
  animation: montee .26s cubic-bezier(.3, .8, .4, 1) both;
}
.feuille[hidden] { display: none; }
@keyframes montee { from { transform: translateY(100%); } to { transform: none; } }

.feuille-poignee {
  width: 42px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #D8DDEA;
}

.feuille-titre {
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bordure);
  font-size: 16px;
  font-weight: 700;
  color: var(--noir);
  text-align: center;
}

.options-creation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.option-creation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px 16px;
  background: var(--gris-fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.option-creation:active { transform: scale(.97); background: #EAEDF5; }

.option-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 14px;
}
.option-icone svg { width: 24px; height: 24px; }
/* Une teinte par façon de créer, reprise de l'icône */
.option-icone--violet { background: #EFE9FE; color: #7C4DFF; }
.option-icone--vert   { background: #E4F6EA; color: #1E9E52; }
.option-icone--bleu   { background: var(--bleu-pastel); color: var(--marine); }
.option-icone--orange { background: #FDEEE0; color: #D9772B; }

.option-nom { font-size: 14px; font-weight: 700; color: var(--noir); }
.option-detail { font-size: 12px; line-height: 1.35; color: var(--gris-texte); }

.feuille .bouton-texte { margin-top: 14px; }

/* Feuille « Nommer ta fiche » */
.nom-aide { margin: 14px 0 4px; }
#feuille-nom { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
#feuille-nom .champ-texte { margin-bottom: 4px; }
#feuille-nom .bouton-principal { margin-top: 16px; }
#nom-suggestions .puce { max-width: 100%; }
#nom-suggestions:empty { display: none; }

@media (min-width: 560px) {
  .feuille { left: 50%; right: auto; width: 440px; transform: translateX(-50%); }
  @keyframes montee {
    from { transform: translate(-50%, 100%); }
    to { transform: translate(-50%, 0); }
  }
}

/* ————— Page de scan ————————————————————————————————————————— */
.scanner { margin-top: 4px; }

.scanner-cadre {
  position: relative;
  display: grid;
  place-items: center;
  /* Assez grand pour cadrer, assez court pour laisser voir le bouton. */
  aspect-ratio: 4 / 5;
  max-height: 42vh;
  transition: aspect-ratio .3s ease;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #101a3d;
}

/* Une fois la photo prise, l'aperçu se réduit pour laisser la place aux actions. */
.scanner--capture .scanner-cadre { aspect-ratio: 16 / 10; }
.scanner--capture .scanner-coin { width: 24px; height: 24px; }

.scanner-apercu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scanner-apercu[hidden] { display: none; }

.scanner-coin {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--bleu-pastel);
  border-radius: 6px;
}
.scanner-coin--hg { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.scanner-coin--hd { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.scanner-coin--bg { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.scanner-coin--bd { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

.scanner-aide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 24px;
  font-size: 12px;
  color: var(--bleu-pastel);
  text-align: center;
}
.scanner-aide svg { width: 30px; height: 30px; opacity: .8; }
.scanner-aide[hidden] { display: none; }

.scanner-balayage {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--bleu-pastel), transparent);
  box-shadow: 0 0 18px 4px rgba(207, 224, 247, .55);
  animation: balayage 1.6s ease-in-out infinite;
}
.scanner-balayage[hidden] { display: none; }
@keyframes balayage {
  0%, 100% { top: 8%; }
  50% { top: 92%; }
}

.scan-etapes {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scan-etapes[hidden] { display: none; }
.scan-etapes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gris-texte);
  transition: color .2s ease;
}
.scan-etapes svg {
  width: 16px;
  height: 16px;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: var(--gris-fond);
  color: #C2CCE2;
  transition: background .2s ease, color .2s ease;
}
.scan-etape--faite { color: var(--noir); font-weight: 600; }
.scan-etape--faite svg { background: var(--marine); color: var(--blanc); }

.scan-capture { margin-top: 16px; }
.scan-capture[hidden] { display: none; }

.bouton-fichier { display: block; cursor: pointer; }
.bouton-secondaire.bouton-fichier { margin-top: 8px; }

.scan-resultat { margin-top: 18px; animation: apparition .22s ease both; }
.scan-resultat[hidden] { display: none; }
.scan-resultat .outils { margin-top: 4px; }

/* Pages ajoutées au document photographié */
.scan-pages {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.scan-pages[hidden] { display: none; }
.scan-pages::-webkit-scrollbar { display: none; }

.scan-page {
  position: relative;
  flex: none;
  width: 54px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  overflow: hidden;
  background: var(--blanc);
}
.scan-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-page-numero {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(27, 42, 107, .85);
  color: var(--blanc);
  font-size: 12px;
  font-weight: 700;
}
.scan-page::after {
  content: "×";
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--blanc);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.scan-lecture {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.scan-lecture[hidden] { display: none; }

.fiche--lue { margin-bottom: 16px; }
.texte-lu {
  max-height: 190px;
  margin: 8px 0 0;
  padding: 10px;
  overflow-y: auto;
  background: var(--gris-fond);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gris-texte);
  white-space: pre-wrap;
}

/* ————— Outils IA ——————————————————————————————————————————————— */
.outils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.outil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 6px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre);
  font-size: 14px;
  color: var(--noir);
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.outil:active { transform: scale(.97); border-color: var(--marine); }
.outil-icone { width: 26px; height: 26px; color: var(--marine); }
.outil-nom { font-size: 14px; line-height: 1.2; }
.outil-detail { font-size: 12px; line-height: 1.2; color: var(--gris-texte); }

/* ————— Communauté et Défis ————————————————————————————————————— */
.bloc-social {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: var(--ombre);
  padding: 12px;
}

.panneau-legende {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gris-texte);
}

/* Les séances d'entraînement, en liste tapable */
.liste-defis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  background: var(--gris-fond);
  text-align: left;
}
.ligne:active { background: #EAEDF5; }

.ligne-pastille {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--bleu-pastel);
  font-size: 16px;
  color: var(--marine);
}
.ligne-pastille svg { width: 18px; height: 18px; }

.ligne-texte { flex: 1; min-width: 0; }
.ligne-nom {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--noir);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne-detail { display: block; font-size: 12.5px; line-height: 1.45; color: var(--gris-texte); }
.ligne-fleche { width: 16px; height: 16px; flex: none; color: var(--bleu-grise); }

/* ————— Page « Créer résumé » ——————————————————————————————— */
.retour {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  font-size: 12px;
  font-weight: 600;
  color: var(--marine);
}
.retour svg { width: 14px; height: 14px; transform: rotate(180deg); }
.retour:active { background: var(--gris-fond); }

.etiquette {
  margin: 20px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--noir);
}

.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #E9ECF4;
}
.segment {
  padding: 8px 4px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texte);
  transition: background .18s ease, color .18s ease;
}
.segment--actif { background: var(--blanc); color: var(--marine); box-shadow: var(--ombre); }

.source { margin-top: 10px; }
.source--masque { display: none; }

.choix-cours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.choix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  text-align: left;
  transition: border-color .15s ease;
}
.choix-texte { flex: 1; min-width: 0; }
.choix-nom { display: block; font-size: 12px; font-weight: 700; color: var(--noir); }
.choix-detail { display: block; font-size: 12px; color: var(--gris-texte); }
.choix-marque {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid #C9D0E0;
  border-radius: 50%;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.choix--actif { border-color: var(--marine); }
.choix--actif .choix-marque {
  border-color: var(--marine);
  background: var(--marine);
  box-shadow: inset 0 0 0 3.5px var(--blanc);
}

.zone-texte {
  width: 100%;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  color: var(--noir);
  resize: vertical;
}
.zone-texte:focus { outline: 2px solid var(--marine); outline-offset: -1px; }
.compteur { margin: 6px 0 0; font-size: 12px; color: var(--gris-texte); }

.depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  background: var(--blanc);
  border: 1.5px dashed #C2CCE2;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
}
.depot:active { border-color: var(--marine); }
.depot svg { width: 26px; height: 26px; color: var(--marine); margin-bottom: 2px; }
.depot-titre { font-size: 14px; font-weight: 600; color: var(--noir); }
.depot-detail { font-size: 12px; color: var(--gris-texte); }
.nom-fichier { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--marine); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texte);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.puce--active { background: var(--marine); border-color: var(--marine); color: var(--blanc); }

.bouton-principal {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 50px;
  background: var(--marine);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.bouton-principal:active { background: var(--marine-fonce); transform: scale(.985); }
.bouton-principal:disabled { opacity: .6; }

.bouton-secondaire {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 50px;
  background: var(--blanc);
  border: 1px solid var(--marine);
  color: var(--marine);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.bouton-secondaire:active { background: var(--bleu-pastel); }

.mention { margin: 10px 0 0; font-size: 12px; color: var(--gris-texte); text-align: center; }

.chargement {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
}
.chargement[hidden] { display: none; }
.chargement-texte { margin: 0; font-size: 12px; color: var(--gris-texte); }
.spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2.5px solid var(--bleu-pastel);
  border-top-color: var(--marine);
  border-radius: 50%;
  animation: rotation .8s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

.fiche {
  display: block;
  margin-top: 16px;
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
  animation: apparition .22s ease both;
}
.fiche[hidden] { display: none; }
.fiche-etiquette {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bleu-pastel);
  color: var(--marine);
  font-size: 12px;
  font-weight: 700;
}
.fiche-titre { margin: 0; font-size: 16px; font-weight: 700; color: var(--noir); }
.fiche-soustexte { margin: 2px 0 0; font-size: 12px; color: var(--gris-texte); }
.fiche-accroche {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--marine);
  border-radius: 0 8px 8px 0;
  background: var(--gris-fond);
  font-size: 12px;
  color: var(--noir);
}
.fiche-section { margin-top: 14px; }
.fiche-soustitre { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--marine); }
.fiche-section ul { margin: 0; padding-left: 18px; }
.fiche-section li { font-size: 12px; line-height: 1.55; color: var(--noir); margin-bottom: 6px; }
.fiche-section--formules li,
.fiche-section--reperes li {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
}

/* Fiche lue sur l'appareil : les repères sont des égalités, on les pose à plat. */
.fiche--lue .fiche-section--reperes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.fiche--lue .fiche-section--reperes li {
  margin: 0;
  padding: 4px 9px;
  background: var(--gris-fond);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--marine);
}
/* Sections titrées d'une fiche lue sur un document */
.fiche-partie { margin-top: 18px; }
.fiche-partie + .fiche-partie { padding-top: 16px; border-top: 1px dashed var(--bordure); }
.fiche-partie-titre {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--marine);
}
.fiche-partie-numero {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--bleu-pastel);
  font-size: 12px;
}
.fiche-partie-texte { margin: 0; font-size: 12px; line-height: 1.6; color: var(--noir); }
.fiche-partie-points { margin: 8px 0 0; padding-left: 18px; }
.fiche-partie-points li { font-size: 12px; line-height: 1.55; color: var(--noir); margin-bottom: 5px; }

.fiche-sommaire { margin: 12px 0 0; padding-left: 18px; }
.fiche-sommaire li { font-size: 12px; line-height: 1.7; color: var(--marine); font-weight: 600; }

.fiche-actions { margin-top: 18px; }
.fiche-actions .bouton-principal { margin-top: 0; }

/* ————— La fiche en pleine page ————————————————————————————————
   Une page de lecture, pas un formulaire : texte plus grand, marges
   plus larges, une partie par bloc et le sommaire en tête.
   ———————————————————————————————————————————————————————————— */
.page-fiche { display: block; }

.page-fiche-entete {
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--marine), #2b3f8f);
  color: var(--blanc);
}
.page-fiche-matiere {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-fiche-titre {
  margin: 10px 0 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--blanc);
}
.page-fiche-meta { margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.page-fiche-jauge {
  margin-top: 12px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.page-fiche-jauge-remplie {
  height: 100%;
  border-radius: 999px;
  background: var(--blanc);
  transition: width 0.5s ease;
}

.page-fiche-avis {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--bleu-grise);
  border-radius: 10px;
  background: var(--bleu-pastel);
  font-size: 13px;
  line-height: 1.6;
  color: var(--marine);
}

.page-fiche-sommaire {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  background: var(--blanc);
}
.page-fiche-sommaire h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.page-fiche-sommaire ol { margin: 0; padding-left: 18px; }
.page-fiche-sommaire li { margin-bottom: 5px; font-size: 13px; line-height: 1.5; }
.page-fiche-sommaire a { color: var(--marine); font-weight: 600; text-decoration: none; }

.page-fiche-corps {
  margin-top: 16px;
  padding: 4px 16px 16px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--blanc);
}
.page-fiche-corps .fiche-partie-titre { font-size: 15px; }
.page-fiche-corps .fiche-partie-texte,
.page-fiche-corps .fiche-partie-points li { font-size: 13.5px; line-height: 1.65; }

.page-fiche-bloc { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--bordure); }
.page-fiche-bloc h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marine);
}
.page-fiche-bloc ul { margin: 0; padding-left: 18px; }
.page-fiche-bloc li { font-size: 13.5px; line-height: 1.6; margin-bottom: 6px; }
.page-fiche-bloc--reperes ul { padding-left: 0; list-style: none; }
.page-fiche-bloc--reperes li {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--gris-fond);
  font-size: 13px;
}
/* La chasse fixe est réservée à ce qui se calcule. */
.page-fiche-bloc--reperes li.calcul {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.page-fiche-vide {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px dashed var(--bordure);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-texte);
  background: var(--blanc);
}

.page-fiche-actions { margin-top: 20px; }
.page-fiche-actions .bouton-principal { margin-top: 0; }
.page-fiche-actions .bouton-secondaire { margin-top: 10px; }

/* ————— Le parcours du chapitre ————————————————————————————————
   Un chapitre se révise notion par notion : chacune porte sa jauge de
   maîtrise, son lexique et ses deux gestes (réviser, se tester).
   ———————————————————————————————————————————————————————————— */
.page-fiche-reprise {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--marine);
  border-radius: 14px;
  background: var(--blanc);
  text-align: left;
  cursor: pointer;
}
.page-fiche-reprise-titre { display: block; font-size: 14px; font-weight: 700; color: var(--marine); }
.page-fiche-reprise-detail { display: block; margin-top: 2px; font-size: 12px; color: var(--gris-texte); }

.page-fiche-objectifs {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  background: var(--blanc);
}
.page-fiche-objectifs h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.page-fiche-objectifs ul { margin: 0; padding-left: 18px; }
.page-fiche-objectifs li { font-size: 13.5px; line-height: 1.6; margin-bottom: 5px; }

.page-fiche-sommaire li button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--marine);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sommaire-note { flex: none; font-size: 12px; font-weight: 700; color: var(--gris-texte); }

.notion { padding: 16px 0 4px; }
.notion + .notion { border-top: 1px dashed var(--bordure); }
.notion-entete { display: flex; align-items: flex-start; gap: 8px; }
.notion-numero {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: var(--bleu-pastel);
  font-size: 12px;
  font-weight: 700;
  color: var(--marine);
}
.notion-titre { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--marine); }

.notion-jauge {
  margin-top: 10px;
  height: 5px;
  border-radius: 999px;
  background: var(--gris-fond);
  overflow: hidden;
}
.notion-jauge-remplie {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--marine);
  transition: width 0.5s ease;
}
.notion-etat { margin: 6px 0 0; font-size: 11.5px; color: var(--gris-texte); }

.notion-texte { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--noir); }
.notion-points { margin: 8px 0 0; padding-left: 18px; }
.notion-points li { font-size: 13.5px; line-height: 1.6; margin-bottom: 5px; }
.notion-reperes { margin: 10px 0 0; padding-left: 0; list-style: none; }
.notion-reperes li {
  padding: 7px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--gris-fond);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* Le lexique : le mot, puis sa définition — c'est ce que les cartes testent. */
.lexique { margin: 12px 0 0; }
.lexique dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--marine);
}
.lexique dd {
  margin: 2px 0 10px;
  padding-left: 10px;
  border-left: 2px solid var(--bleu-pastel);
  font-size: 13px;
  line-height: 1.55;
  color: var(--noir);
}
.lexique--tout dd { margin-bottom: 12px; }

.notion-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bouton-notion {
  flex: 1 1 auto;
  padding: 9px 12px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 13px;
  font-weight: 600;
  color: var(--marine);
  cursor: pointer;
}
.bouton-notion--test { background: var(--bleu-pastel); border-color: var(--bleu-pastel); }

.carte-reprise { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--marine); }

/* ————— La page de tarif ——————————————————————————————————————
   Elle dit ce qu'on obtient, combien, et rien d'autre : pas de compte à
   rebours, pas de prix barré, pas de « plus que 2 places ».
   ———————————————————————————————————————————————————————————— */
.tarif {
  margin-top: 4px;
  padding: 22px 18px 18px;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--marine), #2b3f8f);
  color: var(--blanc);
  text-align: center;
}
.tarif-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tarif-titre {
  margin: 12px 0 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--blanc);
}
.tarif-raison {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.tarif-prix {
  margin: 18px 0 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--blanc);
}
.tarif-periode { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.tarif-note { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }

.tarif .bouton-principal {
  margin-top: 18px;
  background: var(--blanc);
  color: var(--marine);
}
.tarif .bouton-principal:disabled { background: rgba(255, 255, 255, 0.35); color: var(--blanc); }
.tarif .mention { margin-top: 10px; color: rgba(255, 255, 255, 0.78); }
.tarif .ia-message { margin-top: 12px; }

.offre { list-style: none; margin: 10px 0 0; padding: 0; }
.offre li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--noir);
}
.offre li svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--marine);
}

/* Un tableau de comparaison tient sur un téléphone s'il reste court. */
.comparatif {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  overflow: hidden;
  font-size: 13px;
}
.comparatif th, .comparatif td { padding: 10px 12px; text-align: center; }
.comparatif thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-texte);
  background: var(--gris-fond);
}
.comparatif tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--noir);
}
.comparatif tbody tr + tr th, .comparatif tbody tr + tr td { border-top: 1px solid var(--bordure); }
.comparatif-oui { font-weight: 700; color: var(--marine); }

.tarif-reponse { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--noir); }

#vue-abonnement .bouton-texte { margin-top: 18px; }
#form-licence { margin-top: 12px; }

.offre-etat {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--blanc);
}
.offre-etiquette {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gris-fond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.offre-etiquette--actif { background: var(--bleu-pastel); color: var(--marine); }
.offre-detail { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--noir); }
.offre-etat .bouton-secondaire { margin-top: 12px; }
.offre-etat .bouton-texte { margin-top: 8px; }
.offre-etat .champ-texte {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* ————— Atelier « Générer par l'IA » ————————————————————————— */
.precision {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
}

.precision-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.precision-note { font-size: 12px; font-weight: 700; color: var(--noir); }
.precision-score { font-size: 12px; font-weight: 600; color: var(--gris-texte); }

.precision-barre {
  height: 6px;
  border-radius: 999px;
  background: #E7EAF3;
  overflow: hidden;
}
.precision-jauge {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #D8863C;
  transition: width .25s ease, background .25s ease;
}
/* La jauge vire au vert dès que la demande tient la route. */
.precision[data-niveau="moyenne"] .precision-jauge { background: var(--marine); }
.precision[data-niveau="haute"] .precision-jauge { background: #2E9E57; }
.precision[data-niveau="haute"] .precision-note { color: #17632F; }

.precision-criteres {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.precision-criteres li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gris-texte);
  transition: color .2s ease;
}
.precision-criteres svg {
  width: 16px;
  height: 16px;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: var(--gris-fond);
  color: #C2CCE2;
  transition: background .2s ease, color .2s ease;
}
.critere--rempli { color: var(--noir); font-weight: 600; }
.critere--rempli svg { background: #2E9E57; color: var(--blanc); }

.ia-moteur {
  margin: -6px 0 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--gris-fond);
  font-size: 12px;
  color: var(--gris-texte);
}
.ia-moteur[hidden] { display: none; }
.ia-moteur--actif { background: var(--bleu-pastel); color: var(--marine); font-weight: 600; }

.ia-message {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gris-fond);
  font-size: 12px;
  color: var(--noir);
}
.ia-message[hidden] { display: none; }
.ia-message--erreur { background: #FDECEC; color: #96201F; }

.ia-exemple {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--marine);
  border-radius: 0 8px 8px 0;
  background: var(--gris-fond);
  font-size: 12px;
  line-height: 1.45;
  color: var(--noir);
}
#ia-utiliser-exemple { margin-top: 10px; }

/* ————— Pages « Créer quiz » et « FlashCards » ————————————————— */
.puces--filtres { margin-bottom: 10px; }

form[hidden], .jeu[hidden], .bilan[hidden] { display: none; }

.jeu {
  margin-top: 4px;
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: var(--ombre);
  animation: apparition .2s ease both;
}
.jeu-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.jeu-position { font-size: 12px; font-weight: 700; color: var(--noir); }
.jeu-score { font-size: 12px; font-weight: 600; color: var(--marine); }

.question {
  margin: 16px 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--noir);
  line-height: 1.35;
}

.reponses { display: flex; flex-direction: column; gap: 8px; }
.reponse {
  width: 100%;
  padding: 12px 14px;
  background: var(--gris-fond);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  color: var(--noir);
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.reponse:active { background: #E4E8F2; }
.reponse:disabled { opacity: 1; }
.reponse--juste { background: #E7F6EC; border-color: #2E9E57; color: #17632F; font-weight: 600; }
.reponse--faux { background: #FDECEC; border-color: #D84A4A; color: #96201F; font-weight: 600; }

.explication {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  background: var(--gris-fond);
  color: var(--noir);
}
.explication[hidden] { display: none; }
.explication--juste { background: #E7F6EC; }
.explication--faux { background: #FDECEC; }

.bouton-texte[hidden] { display: none; }
.bouton-texte {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texte);
  text-align: center;
}

.bilan {
  margin-top: 4px;
  padding: 18px 16px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: var(--ombre);
  text-align: center;
  animation: apparition .22s ease both;
}
.bilan-score { margin: 0; font-size: 32px; font-weight: 700; color: var(--marine); line-height: 1.1; }
.bilan-pourcentage { margin: 2px 0 0; font-size: 12px; color: var(--gris-texte); }
.bilan-message { margin: 10px 0 0; font-size: 14px; color: var(--noir); }
.bilan-soustitre { margin: 18px 0 8px; font-size: 12px; font-weight: 700; color: var(--marine); text-align: left; }
.bilan-erreurs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bilan-erreurs li {
  padding: 10px 12px;
  background: var(--gris-fond);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bilan-question { font-size: 12px; font-weight: 700; color: var(--noir); }
.bilan-mauvaise { font-size: 12px; color: #96201F; }
.bilan-bonne { font-size: 12px; font-weight: 600; color: #17632F; }
.bilan-explication { font-size: 12px; color: var(--gris-texte); }
.bilan-actions { margin-top: 18px; }
.bilan-actions .bouton-principal { margin-top: 0; }

/* Carte à retourner */
.carte-flip {
  display: block;
  width: 100%;
  height: 240px;
  margin-top: 16px;
  padding: 0;
  background: none;
  perspective: 1200px;
}
.carte-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.3, .8, .4, 1);
  transform-style: preserve-3d;
}
.carte-flip--retournee .carte-inner { transform: rotateY(180deg); }

.carte-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--bordure);
  background: var(--blanc);
  box-shadow: var(--ombre);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.carte-face--verso { transform: rotateY(180deg); background: var(--marine); border-color: var(--marine); }
.carte-etiquette {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
.carte-face--verso .carte-etiquette { color: var(--bleu-pastel); }
.carte-contenu { font-size: 16px; font-weight: 600; color: var(--noir); text-align: center; line-height: 1.35; }
.carte-face--verso .carte-contenu { color: var(--blanc); }
.carte-aide { font-size: 12px; color: var(--gris-texte); }

.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.verdicts[hidden] { display: none; }
.bouton-verdict {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid;
}
.verdict-nom { font-size: 14px; font-weight: 700; }
.verdict-detail { font-size: 12px; font-weight: 400; opacity: .8; line-height: 1.25; }
.bouton-verdict--revoir  { background: #FDECEC; border-color: #E8A9A9; color: #96201F; }
.bouton-verdict--presque { background: #FDF3E3; border-color: #E8C98F; color: #8A5B12; }
.bouton-verdict--su      { background: #E7F6EC; border-color: #9CD3B0; color: #17632F; }
.bouton-verdict:active { transform: scale(.98); }

/* ————— Accueil : la révision du jour ————————————————————————— */
/* ————— L'état de la journée ————————————————————————————————————
   Le premier bloc de l'accueil : où on en est, et le geste qui suit.
   ———————————————————————————————————————————————————————————— */
.salut { margin: 2px 0 18px; }
.salut-titre { margin: 0; font-size: 22px; font-weight: 800; color: var(--noir); line-height: 1.2; }
.salut-phrase { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--gris-texte); }
.salut-serie { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--marine); }
.salut .bouton-principal { margin-top: 14px; }

.dossiers-separateur {
  margin: 22px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bleu-grise);
}

.aujourdhui {
  margin-bottom: 20px;
  padding: 14px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: var(--ombre);
}
.aujourdhui[hidden] { display: none; }

.aujourdhui-entete { display: flex; align-items: center; gap: 8px; }
.aujourdhui-titre { margin: 0; font-size: 15px; font-weight: 700; color: var(--noir); }
.aujourdhui-compte {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--marine);
  color: var(--blanc);
  font-size: 12px;
  font-weight: 700;
}
.aujourdhui-detail { margin: 4px 0 10px; font-size: 13px; color: var(--gris-texte); }
.aujourdhui .barre-progression { margin-top: 0; }
.aujourdhui-vide { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--noir); }
.aujourdhui .bouton-secondaire, .aujourdhui .bouton-texte { margin-top: 10px; }

.aujourdhui-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.aujourdhui-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--bordure);
}
/* Un titre de fiche ne doit pas être coupé : c'est ce qu'on vient lire. */
.aujourdhui-liste .ligne-nom { white-space: normal; overflow: visible; }
.aujourdhui-liste .ligne-detail { font-size: 12px; }

.bouton-reviser--petit {
  width: auto;
  flex: none;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 12px;
}

/* Champs libres du quiz (sujet + complément) */
.etiquette--sous {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texte);
}

.champ-libelle {
  display: block;
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--noir);
}
.champ-option {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gris-fond);
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texte);
}

.champ-texte {
  width: 100%;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  color: var(--noir);
}
.champ-texte::placeholder, .zone-texte::placeholder { color: #9AA1B2; }
.champ-texte:focus { outline: 2px solid var(--marine); outline-offset: -1px; }

.jeu-contexte {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bleu-pastel);
  color: var(--marine);
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}
.jeu-contexte[hidden] { display: none; }

.bilan--info { text-align: left; }
.bilan--info .bilan-message { margin-top: 0; }
.bilan--info .bilan-pourcentage { margin-top: 8px; }

.demande {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px;
  background: var(--gris-fond);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demande li { display: flex; gap: 10px; align-items: baseline; }
.demande-cle { flex: none; width: 80px; font-size: 12px; font-weight: 700; color: var(--marine); }
.demande-valeur { flex: 1; font-size: 12px; color: var(--noir); word-break: break-word; }

/* ————— Repli des réglages ————————————————————————————————————— */
.reglages {
  margin-top: 16px;
  padding: 0 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
}
.reglages > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--noir);
  cursor: pointer;
  list-style: none;
}
.reglages > summary::-webkit-details-marker { display: none; }
.reglages > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--bleu-grise);
  border-bottom: 2px solid var(--bleu-grise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.reglages[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.reglages[open] > summary { border-bottom: 1px solid var(--bordure); }
.reglages-resume { font-weight: 400; color: var(--gris-texte); }
.reglages .etiquette--sous:first-of-type { margin-top: 12px; }
.reglages > *:last-child { margin-bottom: 14px; }

/* ————— Révision espacée ——————————————————————————————————————— */
.liste-echeances { display: flex; flex-direction: column; gap: 10px; }

.echeance {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre);
}
.echeance-palier {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--bleu-pastel);
  color: var(--marine);
  font-size: 12px;
  font-weight: 700;
}
.echeance-titre { display: block; font-size: 12px; font-weight: 700; color: var(--noir); }
.echeance-detail { display: block; font-size: 12px; color: var(--gris-texte); }
.echeance--aujourdhui { border-color: var(--marine); }
.echeance--aujourdhui .echeance-palier { background: var(--marine); color: var(--blanc); }

/* ————— Profil ————————————————————————————————————————————————— */
.carte-profil {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
}
.avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--marine);
  color: var(--blanc);
  font-size: 16px;
  font-weight: 700;
}
.profil-nom { margin: 0; font-size: 16px; font-weight: 700; }
.profil-detail { margin: 6px 0 0; font-size: 12.5px; color: var(--gris-texte); }

/* Le prénom se saisit sur place : personne n'est nommé à sa place. */
.carte-profil-texte { flex: 1; min-width: 0; }
.champ-libelle--discret { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--gris-texte); }
.champ-texte--prenom { padding: 8px 10px; font-size: 15px; font-weight: 700; }
.stats + .stats { margin-top: 10px; }
.vue#vue-profil .bouton-secondaire { margin-top: 16px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 6px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: var(--ombre);
}
.stat-valeur { font-size: 16px; font-weight: 700; color: var(--marine); }
.stat-nom { font-size: 12px; color: var(--gris-texte); text-align: center; }

/* ————— Barre du bas ——————————————————————————————————————————— */
.barre-bas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--marine);
  padding-bottom: env(safe-area-inset-bottom);
}

.onglet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--hauteur-barre);
  color: var(--bleu-grise);
  transition: color .18s ease;
}
.onglet-icone { width: 22px; height: 22px; }
.onglet-nom { font-size: 11px; font-weight: 600; }

.onglet-trait {
  position: absolute;
  bottom: 6px;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--blanc);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

.onglet--actif { color: var(--blanc); }
.onglet--actif .onglet-trait { opacity: 1; transform: none; }

/* ————— Toast ——————————————————————————————————————————————————— */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom) + 14px);
  z-index: 40;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20, 32, 81, .95);
  color: var(--blanc);
  font-size: 12px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast--visible { opacity: 1; transform: translate(-50%, 0); }

/* ————— Écrans larges : on garde le format mobile centré ————————— */
@media (min-width: 560px) {
  body {
    max-width: 440px;
    margin: 0 auto;
    background: var(--gris-fond);
    box-shadow: 0 0 0 1px var(--bordure);
  }
  .header { max-width: 440px; margin: 0 auto; }
  .barre-bas { left: 50%; right: auto; width: 440px; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Les passages que la lecture n'a pas su déchiffrer. Un ton d'alerte douce :
   ce n'est pas une erreur de l'élève, c'est une limite qu'on lui signale. */
.fiche-section--verifier {
  border-left: 3px solid #D9A441;
  background: #FDF8EE;
}
.fiche-section--verifier .fiche-soustitre { color: #8A6214; }

/* Une formule en bloc ne doit pas élargir la page sur un téléphone. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; }
.fiche-partie-texte .katex, .fiche-partie-points .katex { font-size: 1em; }

/* ————— Les trois offres ————————————————————————————————————————
   En colonne sur téléphone : trois cartes côte à côte sur 390 px seraient
   illisibles, et c'est l'écran de presque tous les élèves. */
.offres { display: grid; gap: 0.9rem; margin: 1rem 0 1.4rem; }

.offre-carte {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 1.1rem 1rem 1rem;
  background: #fff;
}
.offre-carte--conseillee { border-color: var(--marine); border-width: 2px; }
.offre-carte--actuelle { background: var(--gris-fond); }

.offre-ruban {
  position: absolute; top: -0.65rem; left: 1rem;
  background: var(--marine); color: #fff;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.18rem 0.55rem; border-radius: 999px;
}
.offre-ruban--actuelle { background: #2F7A4D; }

.offre-nom { margin: 0.2rem 0 0.3rem; font-size: 1.05rem; }
.offre-prix { margin: 0 0 0.35rem; font-size: 1.5rem; line-height: 1.1; }
.offre-prix .tarif-periode { font-size: 0.85rem; font-weight: 400; color: var(--gris-texte); }
.offre-volume { margin: 0 0 0.25rem; font-weight: 600; }
.offre-argument { margin: 0 0 0.8rem; color: var(--gris-texte); font-size: 0.92rem; }
.offre-loyaute { margin: -0.4rem 0 0.8rem; font-size: 0.8rem; color: var(--gris-texte); }
.offre-carte button { width: 100%; }

/* Cinq colonnes sur 390 px : plutôt que de laisser glisser latéralement —
   un défilement que personne ne devine, donc deux offres invisibles — on
   resserre tout pour que le tableau tienne en entier. */
.comparatif { width: 100%; table-layout: fixed; }
.comparatif th, .comparatif td { padding: 0.45rem 0.2rem; font-size: 0.78rem; }
.comparatif th[scope="row"] {
  width: 27%;                      /* juste assez pour deux mots par ligne */
  white-space: normal;             /* le libellé passe à la ligne, pas le tableau */
  text-align: left;
  font-size: 0.76rem;
}
.comparatif thead th {
  font-size: 0.66rem;
  letter-spacing: 0;               /* l'interlettrage des titres collait les colonnes */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  white-space: nowrap;             /* « ESSENTIE / L » coupé en deux : non */
}

/* ————— Le solde de crédits, dans l'en-tête ————————————————————— */
.credits {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: auto;
  margin-right: 0.5rem;
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: #fff;
  color: var(--marine);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.credits svg { width: 16px; height: 16px; }
.credits-nombre { font-variant-numeric: tabular-nums; }

/* Il reste une fiche ou moins : on prévient avant le mur, pas pendant. */
.credits--bas { border-color: #D9A441; background: #FDF8EE; color: #8A6214; }
.credits--vide { border-color: #B4232C; background: #FBEDEE; color: #B4232C; }

/* La marque pousse déjà vers la gauche : sans cela, les deux se battent. */
.header .marque { margin-right: 0; }

.offre-equivalent {
  margin: -0.15rem 0 0.3rem;
  font-size: 0.82rem;
  color: var(--gris-texte);
}
.comparatif small { font-weight: 400; color: var(--gris-texte); }

/* ————— Les bulles d'activité ————————————————————————————————————
   En bas à gauche, au-dessus de la barre de navigation. Elles glissent,
   s'attardent, s'effacent — et ne prennent jamais le clic : l'élève doit
   pouvoir toucher ce qu'il y a dessous. */
.bulles {
  position: fixed;
  left: 0.75rem;
  bottom: calc(var(--barre-hauteur, 68px) + 0.75rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
  max-width: min(78vw, 310px);
}

.bulle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: rgba(27, 42, 107, 0.94);
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.25;
  box-shadow: 0 8px 22px rgba(15, 23, 60, 0.26);
  opacity: 0;
  transform: translateX(-14px) scale(0.97);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.bulle--entree { opacity: 1; transform: translateX(0) scale(1); }
.bulle--sortie { opacity: 0; transform: translateX(-10px) scale(0.98); }

.bulle-icone { font-size: 1rem; flex: 0 0 auto; }
.bulle-texte { font-weight: 500; }

/* Un réglage système qui demande moins d'animation est un réglage, pas une
   suggestion : le module ne démarre même pas, ceci n'est qu'un filet. */
@media (prefers-reduced-motion: reduce) {
  .bulle { transition: none; }
}


/* ————— Les chiffres de l'élève ————————————————————————————————
   La série de jours était une ligne de texte perdue entre deux phrases,
   alors que c'est ce qui donne envie de revenir demain. En tuiles, elle se
   lit en un regard — et le chiffre, pas la phrase, est ce qu'on retient. */
.chiffres {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  margin: 0.9rem 0 1rem;
}

.chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.65rem 0.4rem 0.55rem;
  border-radius: 14px;
  background: var(--blanc);
  box-shadow: var(--ombre);
}
.chiffre-emoji { font-size: 1.05rem; line-height: 1; }
.chiffre-valeur {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--marine);
  font-variant-numeric: tabular-nums;
}
.chiffre-libelle {
  font-size: 0.72rem;
  color: var(--gris-texte);
  text-align: center;
  line-height: 1.15;
}

/* ————— L'anneau de progression ————————————————————————————————
   Il remplace « 30 % maîtrisé » en fin de ligne, que personne ne lisait.
   Sa couleur est celle de la matière : la ligne se repère avant d'être lue. */
.anneau { flex: 0 0 auto; }
.anneau circle:last-of-type { transition: stroke-dasharray 0.6s cubic-bezier(0.2, 0.8, 0.3, 1); }
.anneau-texte {
  font-size: 11px;
  font-weight: 700;
  fill: var(--marine);
  font-family: inherit;
}

/* ————— L'étiquette d'échéance ——————————————————————————————————
   « J+3 » et « en retard de 2 j » étaient noyés dans du gris. En pastille,
   le retard se voit avant d'être lu — c'est lui qui doit alerter. */
.etiquette {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--gris-fond);
  color: var(--gris-texte);
  font-size: 0.74rem;
  font-weight: 600;
}
.etiquette--retard { background: #FBEDEE; color: #B4232C; }

/* La pastille de la ligne prend la teinte de sa matière. */
.aujourdhui-liste li { --teinte: var(--marine); }
.aujourdhui-liste .ligne-pastille {
  background: color-mix(in srgb, var(--teinte) 14%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teinte) 22%, transparent);
}

/* ————— Pas encore de cartes ———————————————————————————————————— */
.entrainement-vide { list-style: none; padding: 0.3rem 0 0; }
.entrainement-vide-ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
}
.entrainement-vide-emoji { font-size: 1.5rem; line-height: 1.2; flex: none; }
.entrainement-vide-texte { font-size: 0.87rem; color: var(--gris-texte); }
.entrainement-vide-texte strong { display: block; color: var(--noir); font-size: 0.95rem; }

/* ————— La réponse au doigt ————————————————————————————————————
   Sur un téléphone il n'y a pas de survol : sans retour au contact, on ne
   sait pas si l'appui a été pris. Un enfoncement bref suffit. */
@media (prefers-reduced-motion: no-preference) {
  .bouton-principal,
  .bouton-secondaire,
  .bouton-reviser,
  .carte-action,
  .dossier-tete,
  .chiffre { transition: transform 0.12s ease; }

  .bouton-principal:active,
  .bouton-secondaire:active,
  .bouton-reviser:active,
  .carte-action:active,
  .dossier-tete:active { transform: scale(0.975); }
}

/* ————— Les cartes de matière ————————————————————————————————
   Elles étaient dix rectangles blancs identiques, distingués par un seul
   emoji. Un liseré de couleur en tête suffit à les rendre repérables sans
   les transformer en confettis. */
.matiere-carte {
  --teinte: var(--marine);
  position: relative;
  overflow: hidden;
}
.matiere-carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--teinte);
}
.matiere-carte .matiere-emoji {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--teinte) 12%, white);
}

/* ————— La file terminée ————————————————————————————————————
   La barre atteignait 100 % et rien ne se passait. Finir sa file est le
   moment de la journée qu'il faut marquer : c'est ce qui donne envie de
   recommencer demain. */
.barre-progression--pleine .barre-progression-remplie { background: #2E9E5B; }
.aujourdhui-fini {
  margin: 0.55rem 0 0;
  font-weight: 600;
  color: #22734A;
}
@media (prefers-reduced-motion: no-preference) {
  .aujourdhui-fini { animation: surgit 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
  @keyframes surgit {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
}

/* ————— Les trois reprises ——————————————————————————————————
   Résumé, cartes, quiz : les trois façons de revenir sur une fiche, sous
   la même forme en bibliothèque et en tête de fiche. Avant, « Réviser
   maintenant » lançait un quiz sans le dire, et les cartes ne
   s'atteignaient qu'au bas d'une longue page. */
.reprises {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.45rem;
  margin: 0.8rem 0 0.4rem;
}

.reprise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0.3rem 0.55rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--blanc);
  text-align: center;
}
.reprise-emoji { font-size: 1.05rem; line-height: 1.2; }
.reprise-nom { font-weight: 700; color: var(--marine); font-size: 0.88rem; }
.reprise-detail { font-size: 0.72rem; color: var(--gris-texte); line-height: 1.2; }

@media (prefers-reduced-motion: no-preference) {
  .reprise { transition: transform 0.12s ease, border-color 0.12s ease; }
  .reprise:active { transform: scale(0.97); border-color: var(--marine); }
}

/* En tête de fiche, le fond est déjà blanc : on détache par le gris. */
#page-fiche .reprise { background: var(--gris-fond); border-color: transparent; }

/* Supprimer n'est plus à côté des trois portes : il se fait discret. */
.carte-cours .carte-actions { justify-content: flex-end; margin-top: 0.2rem; }

/* ————— La fiche : des formules, pas du code ————————————————————
   Les repères étaient rendus en chasse fixe, dans la même liste grise que
   les dates. Sur une fiche de sciences, la formule est le contenu qu'on
   vient chercher : elle mérite sa carte, au large, avec ses hypothèses
   détachées — « une formule sans ses conditions est fausse » doit se voir,
   pas seulement s'écrire. */
#page-fiche { --teinte: var(--marine); }

.notion-soustitre {
  margin: 1rem 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}

.formule {
  margin: 0 0 0.6rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teinte) 7%, white);
  border-left: 3px solid var(--teinte);
}
.formule-nom {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teinte);
}
.formule-corps {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  overflow-x: auto;        /* une longue expression glisse, la page ne s'élargit pas */
}
.formule-conditions {
  margin: 0.45rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed color-mix(in srgb, var(--teinte) 30%, transparent);
  font-size: 0.82rem;
  color: var(--gris-texte);
}
.formule-conditions span { color: #C07A17; font-weight: 700; }

/* Le vocabulaire : le terme en tête, lisible, pas noyé dans le gris. */
.lexique dt {
  font-weight: 700;
  color: var(--teinte);
  font-size: 0.92rem;
}
.lexique dd { margin: 0.1rem 0 0.6rem; }

/* Le numéro de la notion prend la couleur de la matière. */
.notion-numero {
  background: color-mix(in srgb, var(--teinte) 14%, white);
  color: var(--teinte);
}
.notion-jauge-remplie { background: var(--teinte); }

/* ————— Le parcours du chapitre ————————————————————————————————
   Un pourcentage aligné à droite ne se lit pas au premier regard. */
/* L'anneau porte déjà le rang et la maîtrise : le numéro de liste faisait
   doublon et se télescopait avec lui. */
.page-fiche-sommaire ol { list-style: none; padding-left: 0; margin: 0; counter-reset: none; }
.page-fiche-sommaire ol li::marker { content: none; }

.page-fiche-sommaire ol li button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
}
.page-fiche-sommaire .sommaire-nom { flex: 1; font-weight: 600; }
.page-fiche-sommaire .sommaire-note {
  font-size: 0.74rem;
  color: var(--gris-texte);
  white-space: nowrap;
}

/* ————— Ce que la lecture n'a pas su déchiffrer ————————————————— */
.page-fiche-verifier {
  margin: 0.9rem 0;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border-left: 3px solid #D9A441;
  background: #FDF8EE;
}
.page-fiche-verifier h3 { margin: 0 0 0.2rem; font-size: 0.95rem; color: #8A6214; }
.page-fiche-verifier-intro { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--gris-texte); }
.page-fiche-verifier ul { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }

/* ————— La feuille « reprendre » ————————————————————————————— */
.feuille-surtitre {
  margin: 0 0 0.1rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texte);
}
#feuille-reprise .feuille-titre { margin-top: 0; }
#feuille-reprise .reprises { margin-bottom: 0.6rem; }
#feuille-reprise .reprise { padding: 0.8rem 0.35rem 0.7rem; }

/* ————— Mon accès (le compte) ————————————————————————————————————
   Le même habillage que le bloc d'abonnement juste au-dessus : ce sont
   deux faces d'une même chose — ce que l'élève a chez nous.
   ———————————————————————————————————————————————————————————— */
.compte {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--blanc);
  box-shadow: var(--ombre);
}
.compte-titre { margin: 0 0 8px; font-size: 15px; color: var(--marine); }
.compte-google { display: flex; justify-content: center; margin-bottom: 4px; }
.compte-ou {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  color: var(--gris-texte); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.compte-ou::before, .compte-ou::after { content: ""; flex: 1; border-top: 1px solid var(--bordure); }
.compte-texte { margin: 0 0 14px; color: var(--gris-texte); font-size: 13.5px; line-height: 1.5; }
.compte-form { display: grid; gap: 8px; }
.compte-form .bouton-principal { margin-top: 4px; }

.compte-adresse {
  margin: 0; font-weight: 700; color: var(--marine); font-size: 15px;
  overflow-wrap: anywhere;
}
.compte-etat { margin: 6px 0 14px; color: var(--gris-texte); font-size: 13px; min-height: 1.2em; }
.compte-actions {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--bordure);
}
/* Sans largeur libre, chaque bouton prend toute la ligne (.bouton-texte est
   en pleine largeur ailleurs) et les trois actions s'empilent en colonne. */
.compte-actions .bouton-texte { width: auto; flex: 0 1 auto; padding: 6px 0; }
.bouton-texte--danger { color: #B4232C; }
/* Armé : le prochain clic supprime pour de bon, et ça doit se voir. */
.bouton-texte--arme {
  color: var(--blanc); background: #B4232C; border-radius: 999px; padding: 6px 14px;
}

.compte-message {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--bleu-pastel); color: var(--marine); font-size: 13px; line-height: 1.5;
}
.compte-mention { margin: 12px 0 0; color: var(--gris-texte); font-size: 12px; line-height: 1.5; }
.compte-mention a { color: var(--marine); }

/* ————— Le filet de « hidden » ————————————————————————————————————
   L'attribut `hidden` ne masque rien dès qu'une règle donne un `display`
   explicite à l'élément : celle du navigateur perd, et l'élément reste à
   l'écran. Le compteur de crédits s'affichait ainsi à « — » alors qu'il
   n'avait rien à compter, et #quiz-suivant n'attendait qu'un parent
   visible pour faire pareil.

   Les règles `.machin[hidden]` plus haut traitaient le problème cas par
   cas ; celle-ci le traite une fois pour toutes, et vaut pour tout ce
   qu'on ajoutera ensuite. Elle est en dernier, et en !important, parce
   que c'est la seule façon de gagner contre une classe plus spécifique.
   ———————————————————————————————————————————————————————————— */
[hidden] { display: none !important; }