/* ═══════════════════════════════════════════════════════════════════════
   css/dictees.css — Module Orthographe : Dictées préparées.
   Chargé uniquement sur les pages du module — dictees-catalogue.html,
   dictee.html, dictees-enseignant.html, et dashboard-eleve.html (carnet de
   badges partagé) — jamais sur le reste du site. La vignette d'entrée sur
   français-orthographe.html est un bandeau statique indépendant
   (.dic-entry-banner, CSS scopée dans cette page).

   Comme pour css/jogging.css (voir son en-tête), les valeurs visuelles de
   carte sont recopiées de .skill-card/.jog-card plutôt que centralisées
   (décision déjà actée pour ce projet) : pas d'import cross-module de
   jogging.css depuis les pages Orthographe.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Pastille "point grammatical" — couleur attribuée par hash déterministe
   du libellé (js/dictees-colors.js), jamais de badge de niveau sur la
   dictée elle-même (le niveau ne s'applique qu'aux mots, §1). Contrairement
   à .ls-pastille (libellés courts et fixes "Niveau X"), le texte est libre
   et peut être long : pas de white-space:nowrap. ──────────────────────── */
.dic-point-pastille {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  padding: 3px 10px;
  border-radius: 20px;
  color: #ffffff;
  background: var(--dic-color);
}

/* ─── Catalogue (français-orthographe.html) : grille des cartes ──────────
   4 colonnes par défaut en desktop, 5 seulement au-delà de 1400px (largeur
   au-delà de laquelle .page-content plafonne — cf. styles.css — donc la
   carte ne fait que rétrécir jusqu'à une taille confortable au lieu de
   grandir indéfiniment), 2 en tablette, 1 en mobile. */
.dic-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (min-width: 1400px) { .dic-cards-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px) { .dic-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dic-cards-grid { grid-template-columns: 1fr; } }

/* Carte dictée — hauteur fixe identique pour toutes les cartes (retour
   utilisateur : un titre court ne doit pas "flotter" avec un vide en
   dessous — cf. .dic-card-title-wrap, centré verticalement dans l'espace
   restant entre l'en-tête et le bouton). Bordure fine + liseré coloré en
   haut (4px, rotation navy/gold/turquoise ci-dessous). */
.dic-card {
  height: 230px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-top: 4px solid var(--color-brand-navy);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms;
  position: relative;
}
.dic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(16,43,106,0.18);
}

/* ─── Alternance cyclique navy/gold/turquoise sur le liseré, la bulle emoji
   et le bouton "Écouter" (cf. renderDicteeCard, CARD_COLOR_CYCLE dans
   dictees-catalogue.html) : couleur purement visuelle selon la position de
   la carte dans la grille, jamais stockée en base. Texte/icône navy (pas
   blanc) sur gold et turquoise : le blanc n'atteint pas le contraste
   minimum sur ces deux fonds — navy passe largement sur les deux. */
.dic-card--gold { border-top-color: var(--color-brand-gold); }
.dic-card--turquoise { border-top-color: var(--color-niveau-cm1); }

.dic-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dic-card-emoji-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(26,45,107,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.dic-card--gold .dic-card-emoji-bubble { background: rgba(245,166,35,0.18); }
.dic-card--turquoise .dic-card-emoji-bubble { background: rgba(29,191,160,0.14); }

.dic-card-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
}

/* Le bloc titre occupe tout l'espace disponible entre l'en-tête et le
   bouton (flex:1) et centre le titre verticalement en son sein
   (display:flex + align-items:center) — nécessaire car -webkit-line-clamp
   sur .dic-card-title exige display:-webkit-box, incompatible avec un
   centrage flex sur le même élément : d'où les deux niveaux. Le clamp à 3
   lignes n'est qu'un filet de sécurité (hauteur de carte fixe, cf.
   .dic-card) pour les titres vraiment très longs — en pratique aucun titre
   actuel de la banque ne l'atteint. */
.dic-card-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.dic-card-title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dic-card-badge-done {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: 20px;
  background: #E3F6E8;
  color: #1B7A3D;
}

.dic-card-btn-listen {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-brand-navy);
  color: #ffffff;
  transition: background 200ms;
}
.dic-card--gold .dic-card-btn-listen { background: var(--color-brand-gold); color: #1A2D6B; }
.dic-card--turquoise .dic-card-btn-listen { background: var(--color-niveau-cm1); color: #1A2D6B; }

/* .dic-card-btn — réutilisé tel quel pour les boutons "Continuer"/"Retour"
   du parcours d'exercice (js/dictees-engine.js), pas la carte du catalogue
   ci-dessus. */
.dic-card-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--blue);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin-top: 4px;
  transition: background 200ms, transform 200ms;
}
.dic-card-btn:hover { background: #0d2255; transform: translateY(-1px); }

.dic-empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--muted);
  font-size: 14px;
}

/* ─── Choix libre du niveau (dictee.html) — pas de déblocage séquentiel ni
   de score minimum, contrairement à .ls-card (level-select.css) : l'élève
   choisit n'importe quel niveau à tout moment, redemandé à chaque nouvelle
   dictée (voir js/dictees-engine.js, showNiveauChoice). Pastilles .ls-
   pastille réutilisées telles quelles (level-select.css) pour rester
   visuellement identique au reste du site. ──────────────────────────────── */
.dic-niveau-choice-intro {
  text-align: center;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 22px;
}
.dic-niveau-choice-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dic-niveau-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 30px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
  font: inherit;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.dic-niveau-choice-btn:hover,
.dic-niveau-choice-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

/* Écran "que veux-tu travailler en premier ?" — mêmes boutons que le choix de
   niveau, coloration reprise du code couleur lexical (bleu) / grammatical
   (ambre) déjà établi ailleurs dans le module. */
.dic-ordre-choice-btn { font-size: 16px; font-weight: 700; min-width: 210px; }
.dic-ordre-choice-btn[data-ordre="lexical"] { color: var(--blue); }
.dic-ordre-choice-btn[data-ordre="lexical"]:hover,
.dic-ordre-choice-btn[data-ordre="lexical"]:focus-visible { border-color: var(--blue); }
.dic-ordre-choice-btn[data-ordre="grammatical"] { color: #7A4D0A; }
.dic-ordre-choice-btn[data-ordre="grammatical"]:hover,
.dic-ordre-choice-btn[data-ordre="grammatical"]:focus-visible { border-color: #F5A623; }

/* Badge de niveau — pastille pleine + texte foncé, toujours lisible quelle
   que soit la couleur de niveau (contrairement à .ls-pastille, texte blanc
   sans repli si --ls-color ne résout pas — cause du bug "n°NaN en blanc sur
   blanc" signalé par l'élève). Classe dédiée au module Dictées plutôt qu'une
   modification de .ls-pastille (level-select.css), réutilisée telle quelle
   par d'autres pages (algèbre, dictees-enseignant) qu'on ne veut pas
   affecter. Couleur reprise de --ls-color-N (level-select.css, mêmes
   valeurs que --color-niveau-cm1/cm2/6e). Réservée à l'écran de choix
   (boutons réellement cliquables, dic-niveau-choice-btn) — pour le rappel de
   niveau affiché pendant l'exercice, voir .dic-niveau-indicator ci-dessous,
   volontairement sans forme de bouton. */
.dic-niveau-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  padding: 7px 18px;
  border-radius: 20px;
  white-space: nowrap;
  background: var(--ls-color, var(--blue));
  color: var(--text, #1E2532);
}

/* Rappel de niveau pendant l'exercice — élément séparé de .dic-tab-bar (voir
   renderStepBanner, js/dictees-engine.js) : ni bordure ni fond plein comme
   les onglets, juste un texte discret + une pastille de couleur, pour ne
   plus être confondu avec une 4e option cliquable (retour utilisateur). */
.dic-niveau-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.dic-niveau-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ls-color, var(--blue));
  flex-shrink: 0;
}
.dic-niveau-indicator:empty { display: none; }

/* ─── Écran de dictée (dictee.html) — bandeau d'étape et consigne ──────── */
/* Fond légèrement teinté + icône (::before) + texte plus grand/gras/foncé —
   remplace l'ancien style gris clair 15px trop peu contrasté (retour
   utilisateur, valable pour toutes les consignes du module puisqu'un seul
   élément #dic-intro-consigne est réutilisé par tous les paliers, voir
   js/dictees-engine.js). `:empty` masque le cadre (icône comprise) pour les
   quelques écrans qui vident volontairement la consigne (ex.
   renderRedoOrSkipChoice). */
.dic-intro-consigne {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(16,43,106,0.06);
  border: 1.5px solid rgba(16,43,106,0.14);
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
  /* Épouse la largeur de son texte (jusqu'à 640px, au-delà de quoi il
     retombe sur 2 lignes) au lieu de s'étirer sur toute la largeur de la
     page — page-content bien plus large que ce bandeau depuis
     l'élargissement de la carte à trous (retour utilisateur : le bandeau
     grisé ne doit pas suivre cet élargissement). Centré via margin auto,
     ce qui exige width:fit-content ici (un flex en display:flex reste sinon
     block, donc plein-largeur par défaut). */
  width: fit-content;
  max-width: min(640px, 100%);
  margin: 0 auto 18px;
  text-align: left;
}
.dic-intro-consigne::before {
  content: "💡";
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.dic-intro-consigne:empty { display: none; }

/* Bandeau d'étape — UN SEUL groupe affiché à la fois (lexical OU
   grammatical, voir renderStepBanner dans js/dictees-engine.js) : les 2
   groupes empilés en permanence faisaient trop d'éléments à scanner d'un
   coup (retour utilisateur). Le switcher ci-dessous (.dic-section-switcher)
   permet de prévisualiser l'autre section sans lancer d'exercice ; s'il n'y
   a qu'un seul volet actif pour la dictée, pas de switcher, juste
   l'étiquette .dic-section-label comme avant. */
.dic-tab-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

/* Switcher de section — délibérément plus discret que .dic-tab (retour
   utilisateur) : "segmented control" gris, le segment actif se détache en
   blanc avec la couleur de sa catégorie (bleu lexical / ambre grammatical,
   même code couleur que .dic-section-label ci-dessous et .dic-tab--gram).
   Change uniquement previewSection et redessine le bandeau — ne touche
   jamais l'exercice en cours. */
.dic-section-switcher {
  display: inline-flex;
  background: var(--border);
  border-radius: 100px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 14px;
}
.dic-section-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.dic-section-switch-btn--active.dic-section-switch-btn--lexical { background: var(--card-bg); color: var(--blue); box-shadow: var(--shadow-sm); }
.dic-section-switch-btn--active.dic-section-switch-btn--gram { background: var(--card-bg); color: #7A4D0A; box-shadow: var(--shadow-sm); }

@media (max-width: 480px) {
  .dic-section-switch-btn { padding: 6px 12px; font-size: 11.5px; }
}

.dic-tab-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* .dic-tab est un vrai <button> (navigation libre entre paliers, voir
   renderStepBanner dans js/dictees-engine.js) — reset des styles par défaut
   du navigateur (font, curseur) en plus des styles visuels. Couleur portée
   par --dic-tab-color (posée en inline-style, reprend les variables
   --color-niveau-cm1/cm2/6e déjà utilisées ailleurs sur le site plutôt que
   d'introduire une nouvelle couleur) : à l'état actif, fond plein + texte
   clair (repère fort pour un élève dys) ; à l'état fait, contour coloré.
   Paliers grammaticaux : toujours ambre (dic-tab--gram), même code couleur
   que .dic-section-label--gram. */
.dic-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  border: 2px solid var(--border);
  color: var(--muted);
  background: var(--card-bg);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.dic-tab:hover { transform: translateY(-2px); }
.dic-tab:focus-visible { outline: 2px solid var(--dic-tab-color, var(--blue)); outline-offset: 2px; }
.dic-tab-icon { font-size: 17px; line-height: 1; }
.dic-tab--done { border-color: var(--dic-tab-color, var(--blue)); color: var(--dic-tab-color, var(--blue)); }
.dic-tab--active { background: var(--dic-tab-color, var(--blue)); border-color: var(--dic-tab-color, var(--blue)); color: #fff; }
.dic-tab--gram.dic-tab--done { border-color: #F5A623; color: #7A4D0A; }
.dic-tab--gram.dic-tab--active { background: #F5A623; border-color: #F5A623; color: #fff; }

/* Chaque groupe ne montre que ses 3 tuiles (labels longs : "Effacement
   progressif"…) qui dépassent la largeur utile de .page-content une fois
   ses marges latérales retirées (720px de colonne − 2×64px de padding
   desktop, styles.css) — le bandeau récupère donc ce padding en pleine
   largeur desktop (>768px, seuil où styles.css réduit le padding de
   .page-content à 24px, cf. media query juste après) pour que les 3 tuiles
   de chaque groupe tiennent sur une seule ligne. */
@media (min-width: 769px) {
  .dic-tab-bar { margin-left: -64px; margin-right: -64px; }
}

@media (max-width: 480px) {
  .dic-tab { padding: 10px 16px; font-size: 13px; }
}

/* Étiquette "Orthographe lexicale" / "Orthographe grammaticale" — en-tête du
   groupe d'onglets affiché quand la dictée n'a qu'un seul volet actif (pas
   de switcher dans ce cas, voir renderStepBanner). Mêmes couleurs que
   .dic-section-switch-btn--active ci-dessus. */
.dic-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.dic-section-label--lexical { background: rgba(16,43,106,0.08); color: var(--blue); }
.dic-section-label--gram { background: rgba(245,166,35,0.16); color: #7A4D0A; }

.dic-progress-msg {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3F4552;
  margin-bottom: 20px;
}

/* ─── Item de dictée : capsule sonore + saisie (adapté de l'exercice
   "mots invariables" d'exercise.html, mécanique de dictée déjà éprouvée) ── */
.dic-counters { text-align: center; margin-bottom: 20px; }

/* Barre de progression — remplace l'ancien texte brut "Il reste X mots…"
   (tous les paliers scorés, voir progressBarHTML() dans js/dictees-engine.js
   qui génère ce bloc). Valeurs reprises visuellement de .ex-bar-fill
   (styles.css) plutôt qu'importées, même convention que le reste de ce
   fichier (voir en-tête). */
.dic-progress { max-width: 520px; margin: 0 auto 14px; }
.dic-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
}
.dic-progress-track {
  height: 10px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.dic-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-niveau-cm1), var(--color-niveau-cm2));
  border-radius: 100px;
  transition: width 400ms ease;
}

.dic-listen-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.dic-listen-btn {
  background: rgba(16,43,106,0.06);
  border: 1.5px solid rgba(16,43,106,0.20);
  border-radius: 100px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  transition: background 180ms, transform 180ms;
}
.dic-listen-btn:hover { background: rgba(16,43,106,0.12); transform: translateY(-1px); }
.dic-listen-btn:disabled { opacity: 0.5; cursor: default; }

.dic-input-row {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 18px;
}
.dic-input {
  flex: 1;
  min-height: 56px;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  background: var(--card-bg);
  outline: none;
  transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
.dic-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,43,106,0.10); }
.dic-input.is-correct { border-color: #16a34a; background: rgba(22,163,74,0.07); color: #15803d; }
.dic-input.is-wrong   { border-color: var(--red); background: rgba(214,40,57,0.07); color: var(--red); }
.dic-input:disabled   { cursor: default; }

.dic-validate-btn {
  min-height: 56px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 0 28px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms;
}
.dic-validate-btn:hover:not(:disabled) { background: #0d2255; }
.dic-validate-btn:disabled { opacity: 0.5; cursor: default; }

.dic-feedback-area {
  max-width: 520px;
  margin: 0 auto 8px;
  text-align: center;
  min-height: 26px;
}
.dic-feedback-correct { font-size: 18px; font-weight: 800; color: #16a34a; }
.dic-feedback-wrong { font-size: 16px; font-weight: 600; color: var(--red); line-height: 1.5; }
.dic-feedback-wrong .dic-correct-word { font-size: 19px; font-weight: 800; }
.dic-diff-char { background: rgba(214,40,57,0.16); border-radius: 3px; padding: 0 1px; }

/* ─── Exercice 0 "Photographie le mot" — le mot s'affiche en grand puis
   disparaît complètement (aucune lettre, aucun indice), l'élève l'écrit de
   mémoire puis compare lui-même sa réponse au mot correct (auto-déclaration,
   jamais de comparaison automatique caractère par caractère). ─────────────── */
.dic-flash-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  margin-bottom: 18px;
}
.dic-flash-word {
  max-width: 90%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.3;
  color: var(--text);
  text-align: center;
  word-break: break-word;
  padding: 26px 36px;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 16px;
}

@media (max-width: 480px) {
  .dic-flash-word { font-size: 24px; padding: 16px 20px; }
}

/* ─── Palier 0.5 "Effacement progressif" — mot affiché à trous sur 2 passages
   (lettres masquées tirées au hasard à chaque passage, .dic-mask-word), pas
   d'audio dans ce palier (pour rester distinct du palier 1, dictée audio).
   Réutilise .dic-flash-word ci-dessus pour l'affichage ; correction
   automatique, pas de boutons dédiés. ────────────────────────────────────── */
.dic-mask-word {
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
}
.dic-passage-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 4px;
}

@media (max-width: 480px) {
  .dic-mask-word { font-size: 22px; letter-spacing: 2px; }
}

/* ─── Résultats de fin d'exercice ───────────────────────────────────────── */
.dic-final-message {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--blue);
  margin-bottom: 10px;
}
.dic-final-detail {
  text-align: center;
  font-size: 16px;
  color: #3F4552;
  margin-bottom: 22px;
}
.dic-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Orthographe grammaticale (paliers 2/3/4) ──────────────────────────── */

/* Palier 2 — classification par nature grammaticale : mots restants affichés
   en tokens cliquables, puis choix de la nature une fois un mot sélectionné
   (même famille d'interaction que classification-etapes d'exercise.html). */
.dic-classify-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 16px;
}
.dic-classify-word {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.dic-classify-word:hover:not(:disabled) { border-color: var(--blue); }
.dic-classify-word.is-selected { border-color: var(--blue); background: rgba(16,43,106,0.08); color: var(--blue); }
.dic-classify-word.is-correct { border-color: #16a34a; background: rgba(22,163,74,0.10); color: #15803d; }
.dic-classify-word.is-wrong { border-color: var(--red); background: rgba(214,40,57,0.10); color: var(--red); }
.dic-classify-word:disabled { cursor: default; }

.dic-classify-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 16px;
}
.dic-classify-choice {
  border: 1.5px solid rgba(16,43,106,0.25);
  border-radius: 100px;
  padding: 7px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(16,43,106,0.05);
  cursor: pointer;
  transition: background 150ms, transform 150ms;
}
.dic-classify-choice:hover:not(:disabled) { background: rgba(16,43,106,0.12); transform: translateY(-1px); }
.dic-classify-choice.is-correct { border-color: #16a34a; background: rgba(22,163,74,0.15); color: #15803d; }
.dic-classify-choice.is-wrong { border-color: var(--red); background: rgba(214,40,57,0.15); color: var(--red); }
.dic-classify-choice:disabled { cursor: default; }

/* Tableau de synthèse cumulatif — voir classificationTableHtml() dans
   js/dictees-engine.js pour la logique de regroupement. */
.dic-classify-table-wrap { margin-top: 24px; padding-top: 18px; border-top: 1.5px solid var(--border); }
.dic-classify-table-title { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.dic-classify-table { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dic-classify-col { flex: 1 1 120px; max-width: 170px; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card-bg); }
.dic-classify-col-header { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #7A4D0A; margin-bottom: 8px; text-align: center; }
.dic-classify-col-body { display: flex; flex-direction: column; gap: 5px; align-items: center; min-height: 20px; }
.dic-classify-chip { font-size: 12px; font-weight: 600; color: var(--text); background: rgba(245,166,35,0.12); border-radius: 8px; padding: 4px 9px; }
.dic-classify-col-empty { font-size: 12px; color: var(--muted); }

.dic-trou-hint { text-align: center; font-size: 14.5px; line-height: 1.5; color: #3F4552; margin: 0 0 18px; }
.dic-trou-missed-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0; }

/* Palier 3 — texte à trous : phrase en flux avec des inputs inline aux
   positions masquées, un bouton haut-parleur par trou comme seul support
   (aucun indice de règle). Présentation en carte aérée, fort contraste et
   interlignage/espacement généreux — pensée pour un élève dyslexique
   (retour utilisateur) ; pas de police "dys" dédiée introduite, aucune n'est
   utilisée ailleurs sur le site (vérifié).
   Carte élargie (retour utilisateur : trop de marge blanche perdue de
   chaque côté sur desktop/tablette, phrases compressées, à 2 reprises) —
   voir aussi dictee.html, page-content passé de 720 à 1280px pour lui
   laisser la place. max-width posé ici volontairement au-dessus de la
   largeur utilisable réelle à l'intérieur de page-content (1280 - 2×64 de
   padding = 1152px) : c'est page-content qui reste le vrai plafond, ce
   max-width n'est qu'un garde-fou si son padding venait à changer. Sur
   mobile/tablette la largeur reste pilotée par le viewport (pas de media
   query dédiée nécessaire, ce plafond ne joue déjà plus sous ~1280px). */
.dic-trou-card {
  max-width: 1150px;
  margin: 0 auto 20px;
  padding: 34px 40px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.dic-trou-sentence {
  font-size: 22px;
  font-weight: 600;
  line-height: 3.1;
  letter-spacing: 0.01em;
  word-spacing: 0.2em;
  text-align: center;
  color: var(--text);
}
.dic-trou-blank-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin: 0 8px;
}
/* Trou de conjugaison : infinitif affiché en clair juste avant le trou (seul
   indice fourni en plus du haut-parleur) — teinté gold pour rester
   distinguable d'un simple mot de la phrase, cf. renderTrousExercise. */
.dic-trou-conj-hint {
  font-weight: 700;
  color: #7A4D0A;
  font-size: 0.86em;
}
.dic-trou-blank-input {
  vertical-align: middle;
  text-align: center;
  border: 2.5px solid var(--blue);
  border-radius: 12px;
  padding: 9px 12px;
  min-height: 46px;
  min-width: 70px;
  /* Élargissement natif à la saisie, là où le navigateur le supporte (Chrome
     ≥123 à ce jour) — la largeur posée en JS (sizeTrouInput, mesure réelle
     du texte) reste la garantie qui fonctionne partout ailleurs, cf.
     js/dictees-engine.js/renderTrousExercise. Sans ça (et sans ce JS), la
     largeur fixe calculée sur le mot attendu tronquait le texte dès que la
     saisie dépassait (retour utilisateur). */
  field-sizing: content;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
}
.dic-trou-blank-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,43,106,0.15); }
.dic-trou-blank-input.is-correct { border-color: #16a34a; background: rgba(22,163,74,0.08); color: #15803d; }
.dic-trou-blank-input.is-wrong { border-color: var(--red); background: rgba(214,40,57,0.08); color: var(--red); }
.dic-trou-blank-input:disabled { cursor: default; opacity: 1; }

/* Haut-parleur par trou — lit le mot attendu à voix haute
   (DicteesSpeech.speak). Compact : à côté d'un input plutôt qu'un gros
   bouton pilule comme .dic-listen-btn (réservé au palier "dictée audio"). */
.dic-trou-speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(16,43,106,0.22);
  background: rgba(16,43,106,0.06);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms;
}
.dic-trou-speak-btn:hover:not(:disabled) { background: rgba(16,43,106,0.12); }
.dic-trou-speak-btn:disabled { opacity: 0.5; cursor: default; }

/* Palier 4 — transformation de phrase : réutilise .dic-input/.dic-input-row,
   juste plus large (phrase entière, pas un seul mot). Consigne ("Réécris
   cette phrase au pluriel.") mise en évidence — remplace l'ancien
   .dic-trou-hint (13px, gris sur clair) trop peu contrasté/trop petit,
   notamment pour un·e élève dys. Couleur ambre : même famille que le reste
   du volet grammatical (voir .dic-tab--gram plus haut). Affichée AVANT la
   phrase à transformer (voir renderTransformation, js/dictees-engine.js) :
   l'élève doit savoir ce qu'on lui demande avant de lire la phrase. */
.dic-transfo-consigne {
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 14px 26px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: #7A4D0A;
  background: rgba(245,166,35,0.16);
  border: 1.5px solid rgba(245,166,35,0.4);
  border-radius: 12px;
}
.dic-transfo-input-row { max-width: 680px; }
.dic-transfo-input { font-size: 17px; }

@media (max-width: 480px) {
  .dic-input { font-size: 18px; min-height: 52px; }
  .dic-trou-card { padding: 22px 16px; }
  .dic-trou-sentence { font-size: 18px; }
}

/* ─── "Mes dictées" (dashboard-eleve.html) — une ligne par dictée faite, avec
   le résultat lexical et les résultats grammaticaux tentés, plutôt qu'une
   moyenne globale. ──────────────────────────────────────────────────────── */
.dic-mydictees-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.dic-mydictees-title { font-weight: 700; font-size: 13.5px; color: var(--text); flex: 1; min-width: 140px; }
/* Pastille de niveau global de la dictée (BUG 3, 2026-08-16) — dot coloré
   réutilisé tel quel depuis .dic-niveau-dot (rappel de niveau pendant
   l'exercice, même variable --ls-color-N), sous le titre plutôt qu'après
   chaque pastille d'exercice grammatical (trompeur : le niveau est choisi
   une fois pour toute la dictée, pas par exercice). */
.dic-mydictees-niveau {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* Colonne de 2 lignes maxi (lexique / grammaire) plutôt qu'un seul flux de
   pastilles mélangées — retour utilisateur : les 2 volets doivent se
   distinguer d'un coup d'œil, pas seulement par la couleur de fond. */
.dic-mydictees-pills { display: flex; flex-direction: column; gap: 4px; }
.dic-mydictees-pillrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dic-mydictees-catlabel {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); min-width: 54px;
}
/* Fond fixe par catégorie (bleu lexical / ambre grammatical — mêmes
   couleurs que .dic-section-label, retour utilisateur : distinguer
   visuellement orthographe lexicale et grammaticale) ; le score ne joue
   plus sur le fond mais sur un point coloré devant le nom de l'exercice
   (retour utilisateur : la bordure se voyait mal / se confondait avec
   l'ambre grammatical). Vert repris de .dic-input.is-correct (même code
   couleur "juste" que partout ailleurs sur ce module). */
.dic-mydictees-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.dic-mydictees-pill--lexical { background: rgba(16,43,106,0.08); color: var(--blue); }
.dic-mydictees-pill--gram    { background: rgba(245,166,35,0.16); color: #7A4D0A; }
.dic-mydictees-pill--good::before { content: '●'; color: #16a34a; margin-right: 4px; }
.dic-mydictees-pill--ok::before   { content: '●'; color: #F5A623; margin-right: 4px; }
.dic-mydictees-pill--low::before  { content: '●'; color: var(--red); margin-right: 4px; }
/* Retour "erreurs les plus fréquentes" (js/dictees-word-stats.js) — texte
   simple, pas une pastille (une liste de mots, pas un score isolé). */
.dic-mydictees-freqtext { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ─── Mon évolution (dashboard-eleve.html, onglet "Mes dictées préparées") —
   valeurs recopiées de .jog-evo-bars (css/jogging.css) : même composant
   visuel, jamais importé cross-module (§ convention déjà actée). ────────── */
.dic-evo-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
  padding: 8px 4px 0;
  overflow-x: auto;
}
.dic-evo-bar-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 22px; }
.dic-evo-bar { width: 14px; border-radius: 4px 4px 0 0; background: var(--blue); min-height: 2px; }
.dic-evo-bar-label { font-size: 9px; color: var(--muted); margin-top: 4px; }

/* ─── Compteur "niveau de difficulté travaillé" — 3 segments/pastilles (une
   par niveau 1/2/3), nombre de dictées (ou couples élève/dictée côté
   enseignant) où ce niveau est le niveau AFFICHÉ actuel (dernière session
   complète, cf. js/dictees-engine.js/isFullSessionComplete). Réutilisé tel
   quel côté élève (dashboard-eleve.html, js/dictees-student-space.js) et
   côté enseignant, vue globale ET fiche élève (resultats-dictees-
   enseignant.html) — même couleurs --color-niveau-cm1/cm2/6e que le reste du
   site (rappel de niveau pendant l'exercice, sélecteur de niveau, etc.). ── */
.dic-niveau-counter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dic-niveau-counter-seg {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 12px;
  min-width: 92px;
}
.dic-niveau-counter-count {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.dic-niveau-counter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
/* Teintes posées en classes fixes plutôt qu'avec color-mix() (3 niveaux
   seulement, mêmes couleurs que --color-niveau-cm1/cm2/6e) — cohérent avec
   le reste du site, qui mélange ses teintes en rgba() à la main plutôt
   qu'avec color-mix() (cf. css/champ-lexical.css/.cl-chip-front). */
.dic-niveau-counter-seg--1 { background: rgba(29,191,160,0.12); border: 1.5px solid rgba(29,191,160,0.4); }
.dic-niveau-counter-seg--1 .dic-niveau-counter-count { color: var(--color-niveau-cm1); }
.dic-niveau-counter-seg--2 { background: rgba(74,144,217,0.12); border: 1.5px solid rgba(74,144,217,0.4); }
.dic-niveau-counter-seg--2 .dic-niveau-counter-count { color: var(--color-niveau-cm2); }
.dic-niveau-counter-seg--3 { background: rgba(245,166,35,0.12); border: 1.5px solid rgba(245,166,35,0.4); }
.dic-niveau-counter-seg--3 .dic-niveau-counter-count { color: var(--color-niveau-6e); }

/* ─── Bloc "niveau global" en tête de la vue enseignant (resultats-dictees-
   enseignant.html) — vue classe entière (renderReportList) ET fiche élève
   (renderStudentFiche), même compteur, contexte différent en titre. ────── */
.dic-report-niveau-section { margin-bottom: 20px; }
.dic-report-niveau-title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px;
}