/* Atelio : anneaux, verre et couleur. Voir « direction-visuelle-atelio ». */
:root {
  --fr: #FF5A4E; --fr-texte: #C2271C; --fr-doux: rgba(255, 90, 78, 0.12);
  --ma: #2563EB; --ma-texte: #2563EB; --ma-doux: rgba(37, 99, 235, 0.10);
  --ev: #12A15E; --ev-texte: #0E7C47; --ev-doux: rgba(18, 161, 94, 0.12);
  --fete: #FFC83D;
  --encre: #0E1222;
  --texte-2: #4A5068;
  --texte-3: #5B6178;
  --fond: #EEF1F7;
  --verre: rgba(255, 255, 255, 0.55);
  --verre-fort: rgba(255, 255, 255, 0.9);
  --liseré: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  --ombre: 0 30px 60px -32px rgba(14, 18, 34, 0.35);
  --logo-texte: #4A5E4E;
  --rayon: 28px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ma); }
:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }

/* Fond : grandes taches de couleur floues */
.fond { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.tache { position: absolute; border-radius: 50%; filter: blur(100px); }
.t1 { width: 620px; height: 620px; left: -160px; top: -220px; background: #7FA6FF; opacity: .72; }
.t2 { width: 520px; height: 520px; right: -140px; top: 140px; background: #FF9A8B; opacity: .6; }
.t3 { width: 560px; height: 440px; left: 30%; bottom: -280px; background: #7BE0AE; opacity: .6; }

.app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; padding: 24px 32px 40px; max-width: 1240px; margin: 0 auto; }
.powered { position: relative; z-index: 1; margin: -28px auto 0; max-width: 1240px; padding: 0 32px 12px; text-align: right; font-size: 11px; color: var(--texte-3); }

.verre {
  background: var(--verre);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--liseré), var(--ombre);
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo span { font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--logo-texte); }
.logo.grand { flex-direction: column; gap: 12px; }
.logo.grand span { font-size: 40px; letter-spacing: -0.045em; }
.anneau-logo { animation: pousse 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.anneau-logo:nth-child(2) { animation-delay: .12s; }
.anneau-logo:nth-child(3) { animation-delay: .24s; }
.anneau-logo:nth-child(4) { animation-delay: .36s; }

/* Boutons */
.btn {
  border: none; border-radius: 999px; height: 52px; padding: 0 24px;
  font-size: 17px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-encre { background: var(--encre); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 30px -16px rgba(14,18,34,.8); }
.btn-verre { background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(14,18,34,.08); color: var(--encre); }
.btn-petit { height: 40px; padding: 0 16px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: default; }

/* Connexion */
.connexion { min-height: calc(100dvh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.carte-connexion { width: min(420px, 100%); padding: 32px; border-radius: 34px; display: flex; flex-direction: column; gap: 16px; background: rgba(255,255,255,.6); }
.carte-connexion h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.03em; text-align: center; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
.champ input {
  height: 56px; border-radius: 16px; border: none; padding: 0 18px; font-size: 19px;
  background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(14,18,34,.1);
}
.erreur { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FFF1EF; color: #A31F15; font-size: 15px; font-weight: 500; }
.lien-discret { font-size: 15px; font-weight: 500; color: #3B4158; }
.bandeau-demo { margin: 0; padding: 10px 14px; border-radius: 14px; background: #FFF4D6; color: #6B4A00; font-size: 14px; line-height: 1.4; }

/* En-tête */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pastille-eleve { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255,255,255,.55); }
.pastille-eleve strong { font-size: 15px; font-weight: 500; }

/* Résumé de la semaine */
.resume { display: flex; align-items: center; gap: 32px; padding: 20px 28px; border-radius: 30px; margin-bottom: 18px; }
.resume-texte { flex: 1; min-width: 0; }
.resume-texte p { margin: 0; font-size: 16px; color: var(--texte-2); }
.resume-texte h1 { margin: 4px 0 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.04em; }
.compteurs { display: flex; gap: 24px; margin-top: 12px; }
.compteurs b { display: block; white-space: nowrap; font-size: 26px; letter-spacing: -0.03em; }
.compteurs b small { font-size: 16px; color: var(--texte-2); font-weight: 500; }
.compteurs span { font-size: 14px; color: var(--texte-2); }
.propose {
  width: 250px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 22px;
  background: var(--fr); color: #fff; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 30px -16px rgba(255,90,78,.8);
}
.propose small { font-size: 13px; font-weight: 600; opacity: .95; }
.propose strong { font-size: 20px; letter-spacing: -0.02em; }
.propose.maths { background: var(--ma); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 30px -16px rgba(37,99,235,.8); }
.propose.eveil { background: var(--ev); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 30px -16px rgba(18,161,94,.8); }

.anneau { animation: pousse 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.anneau.a2 { animation-delay: .15s; } .anneau.a3 { animation-delay: .3s; }
@keyframes pousse { from { stroke-dashoffset: var(--long); } to { stroke-dashoffset: 0; } }

/* Colonnes par matière */
.outils { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.colonne { border-radius: 26px; padding: 14px; display: flex; flex-direction: column; gap: 6px; animation: monte .6s cubic-bezier(.2,.8,.2,1) both; }
.colonne:nth-child(2) { animation-delay: .08s; } .colonne:nth-child(3) { animation-delay: .16s; }
.colonne h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 4px 8px 8px; font-size: 20px; letter-spacing: -0.03em; }
.colonne h2 small { font-size: 15px; font-weight: 600; color: var(--texte-2); letter-spacing: 0; }
.colonne.francais h2 { color: var(--fr-texte); }
.colonne.maths h2 { color: var(--ma-texte); }
.colonne.eveil h2 { color: var(--ev-texte); }
.vide { margin: 0; padding: 8px; font-size: 14px; color: var(--texte-2); }

.tache-ligne {
  display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px; border-radius: 16px;
  text-decoration: none; color: var(--encre);
  background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(14,18,34,.06), 0 10px 20px -16px rgba(14,18,34,.35);
  transition: transform .15s ease;
}
.tache-ligne:hover { transform: translateY(-1px); }
.tache-ligne.faite { background: transparent; box-shadow: none; opacity: .72; }
.tache-ligne .titre { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tache-ligne .meta { display: block; margin-top: 1px; font-size: 13px; color: var(--texte-2); }
.tache-ligne .etat { font-size: 13px; font-weight: 600; color: var(--texte-2); white-space: nowrap; }
.tache-ligne.faite .etat { color: var(--ev-texte); }
.tache-ligne > span:nth-child(2) { flex: 1; min-width: 0; }
.rond { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.francais .rond { box-shadow: inset 0 0 0 2.5px var(--fr); } .francais .faite .rond { background: var(--fr); box-shadow: none; } .francais .bonus .rond { background: var(--fr-doux); box-shadow: none; }
.maths .rond { box-shadow: inset 0 0 0 2.5px var(--ma); } .maths .faite .rond { background: var(--ma); box-shadow: none; } .maths .bonus .rond { background: var(--ma-doux); box-shadow: none; }
.eveil .rond { box-shadow: inset 0 0 0 2.5px var(--ev); } .eveil .faite .rond { background: var(--ev); box-shadow: none; } .eveil .bonus .rond { background: var(--ev-doux); box-shadow: none; }
.francais .etoile { fill: var(--fr); } .maths .etoile { fill: var(--ma); } .eveil .etoile { fill: var(--ev); }

@keyframes monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Exercice */
.exercice { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.barre-exercice { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.rond-verre { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.65); box-shadow: var(--liseré); }
.segments { flex: 1; display: flex; gap: 6px; }
.segments span { flex: 1; height: 8px; border-radius: 4px; background: rgba(14,18,34,.12); transition: background .3s ease; }
.segments span.ok { background: var(--ev); }
.segments span.ko { background: #F3A9A2; }
.segments span.en-cours { background: var(--encre); }
.compte { min-width: 64px; text-align: right; font-size: 15px; font-weight: 600; color: var(--texte-2); }
.titre-exercice { margin: 0; font-size: 16px; color: var(--texte-2); }
.consigne { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
.zone-item { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 30px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--liseré), var(--ombre); }
.enonce { font-size: clamp(24px, 3vw, 32px); line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; }
.carte-mot { align-self: center; padding: 22px 40px; border-radius: 26px; background: #fff; font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -0.04em; box-shadow: 0 1px 2px rgba(14,18,34,.08), 0 24px 40px -26px rgba(14,18,34,.45); text-align: center; }
.carte-mot.phrase { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.choix { display: grid; grid-template-columns: 1fr; gap: 12px; }
.choix.deux { grid-template-columns: 1fr 1fr; }
.choix-btn {
  min-height: 68px; padding: 10px 18px; border-radius: 20px; border: none; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600;
  background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(14,18,34,.08), 0 12px 24px -18px rgba(14,18,34,.45);
  transition: transform .12s ease, background .2s ease;
}
.choix-btn:active { transform: scale(.98); }
.choix-btn.choisi { box-shadow: inset 0 0 0 3px var(--encre); }
.choix-btn.juste, .ligne-ordre.juste { background: var(--ev); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 28px -14px rgba(18,161,94,.9); }
.choix-btn.faux { background: #FFE4E1; color: #A31F15; box-shadow: inset 0 0 0 2px var(--fr); }
.choix-btn.montre { outline: 3px dashed rgba(18,161,94,.5); outline-offset: 3px; }
.choix-btn:disabled { cursor: default; }
.choix-btn:disabled:not(.juste):not(.faux) { opacity: .55; }
.retour { margin: 0; min-height: 26px; font-size: 18px; font-weight: 600; }
.retour.ok { color: var(--ev-texte); }
.retour.ko { color: var(--fr-texte); }
.suite { min-height: 60px; display: flex; justify-content: flex-end; }
.suivant { height: 58px; padding: 0 30px; }

.ligne-ordre { min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 2px rgba(14,18,34,.08); }
.ligne-ordre.montre { box-shadow: inset 0 0 0 2px var(--ev); }
.ligne-vide { color: var(--texte-2); font-size: 17px; padding: 0 8px; }
.pioche { display: flex; flex-wrap: wrap; gap: 10px; min-height: 10px; }
.tuile { min-height: 52px; padding: 0 18px; border: none; border-radius: 14px; font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; background: #fff; box-shadow: 0 1px 2px rgba(14,18,34,.1), 0 8px 16px -10px rgba(14,18,34,.4); }
.tuile:disabled { opacity: .25; }
.tuile.posee { background: var(--encre); color: #fff; }
.ligne-ordre.juste .tuile, .ligne-ordre.montre .tuile { background: rgba(255,255,255,.9); color: var(--encre); opacity: 1; }
.actions-item { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.texte-trous { line-height: 1.9; }
.trou { height: 50px; margin: 0 4px; padding: 0 10px; border: none; border-radius: 12px; font-size: inherit; font-weight: 600; text-align: center; background: #fff; box-shadow: inset 0 0 0 2px rgba(37,99,235,.35); vertical-align: baseline; max-width: 100%; }
.trou:focus { outline: none; box-shadow: inset 0 0 0 3px var(--ma); }
.trou.juste { background: #E7F6EE; color: #0E6B3E; box-shadow: inset 0 0 0 2px var(--ev); }
.trou.faux { background: #FFF1EF; color: #A31F15; box-shadow: inset 0 0 0 2px var(--fr); }
.trou.montre { background: #E7F6EE; color: #0E6B3E; box-shadow: inset 0 0 0 2px var(--ev); }
.touches { display: flex; flex-wrap: wrap; gap: 6px; }
.touche { width: 46px; height: 46px; border: none; border-radius: 12px; background: rgba(14,18,34,.06); font-size: 20px; font-weight: 600; }

.associer { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.col-assoc { display: flex; flex-direction: column; gap: 10px; }
.aide-assoc { margin: 0; color: var(--texte-2); font-size: 16px; }

@keyframes rebond { 0% { transform: scale(.92); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.rebond { animation: rebond .4s cubic-bezier(.2,.8,.2,1); }
.secoue { animation: secoue .4s ease; }

/* Fin d'exercice */
.finale { min-height: calc(100dvh - 120px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.finale h1 { margin: 6px 0 0; font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.045em; }
.finale p { margin: 0; font-size: 18px; color: var(--texte-2); }
.anneau-finale { position: relative; width: 220px; height: 220px; }
.score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score b { font-size: 64px; letter-spacing: -0.05em; line-height: 1; }
.score span { font-size: 17px; color: var(--texte-2); }
.eclat { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; animation: eclat 1s cubic-bezier(.2,.8,.2,1) .6s both; }
@keyframes eclat { from { transform: translate(0,0) scale(.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
.actions-finale { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* Écran d'une tâche sans exercice */
.bientot { min-height: calc(100dvh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.bientot h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.04em; }
.bientot p { margin: 0; font-size: 18px; color: var(--texte-2); max-width: 520px; }

.chargement { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--texte-2); font-size: 17px; }

@media (max-width: 900px) {
  .app { padding: 16px 16px 40px; }
  .resume { flex-wrap: wrap; gap: 18px; padding: 18px; }
  .resume svg { width: 110px; height: 110px; }
  .propose { width: 100%; }
  .colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .zone-item { padding: 18px; }
  .choix.deux, .associer { grid-template-columns: 1fr; }
  .resume svg { width: 92px; height: 92px; }
  .resume-texte { flex-basis: 100%; }
  .compteurs { gap: 18px; }
  .powered { padding: 0 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .anneau, .anneau-logo, .colonne, .rebond, .secoue, .eclat { animation: none; }
  .eclat { display: none; }
  .tache-ligne, .btn { transition: none; }
}

/* ——— Espace enseignant ——— */
body.mode-ens .app { max-width: none; padding: 16px; }
body.mode-ens > .powered { display: none; }
.ens-pied .powered-ens { margin: 10px 0 0; font-size: 11px; color: var(--texte-3); }
.ens { display: flex; gap: 16px; min-height: calc(100dvh - 32px); align-items: stretch; }
.ens-menu { width: 220px; flex: none; border-radius: 26px; padding: 20px 12px; display: flex; flex-direction: column; gap: 18px; background: rgba(255,255,255,.45); box-shadow: var(--liseré); position: sticky; top: 16px; height: calc(100dvh - 32px); }
.ens-menu .logo { padding: 0 8px; }
.ens-liens { display: flex; flex-direction: column; gap: 2px; }
.ens-liens a { height: 42px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; text-decoration: none; color: #3B4158; font-size: 15px; }
.ens-liens a.actif { background: rgba(255,255,255,.88); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(14,18,34,.08); }
.ens-pied { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 8px; font-size: 14px; }
.ens-pied .lien-discret, .lien-discret { background: none; border: none; padding: 0; text-align: left; font-size: 14px; color: #3B4158; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ens-pied .bandeau-demo { font-size: 13px; }
.ens-contenu { flex: 1; min-width: 0; border-radius: 26px; padding: 24px 28px; background: rgba(255,255,255,.72); }

.ens-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ens-entete h1 { margin: 0; font-size: 28px; letter-spacing: -0.04em; }
.ens-entete p { margin: 4px 0 0; font-size: 15px; color: var(--texte-2); max-width: 640px; }
.actions-entete { display: flex; gap: 8px; flex-wrap: wrap; }
.discret { color: var(--texte-2); } .petit { font-size: 13px; }
.rouge { color: #C2271C; } .vert { color: #0E7C47; }
.vide-ens { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.vide-ens h1 { margin: 0; font-size: 30px; letter-spacing: -0.04em; }
.vide-ens p { margin: 0; color: var(--texte-2); font-size: 17px; }

.onglets { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(14,18,34,.05); margin-bottom: 14px; }
.onglets button { height: 34px; padding: 0 14px; border-radius: 10px; border: none; background: transparent; font-size: 14px; color: #3B4158; }
.onglets button[aria-selected="true"] { background: #fff; color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(14,18,34,.1); }
.onglets.pleins { display: flex; } .onglets.pleins button { flex: 1; }

.encart { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.encart.rouge { background: #FFF1EF; color: #5A2A25; } .encart.rouge b { color: #A31F15; }
.encart.vert { background: #E7F6EE; color: #1F4D36; } .encart.vert b { color: #0E6B3E; }
.encart.bleu { background: #EAF1FF; color: #1E3A8A; }
.encart code { font-size: 15px; font-weight: 700; }

/* La classe */
.ens-classe { display: flex; gap: 20px; align-items: flex-start; }
.ens-principal { flex: 1; min-width: 0; }
.tableau-eleves { display: flex; flex-direction: column; gap: 2px; }
.ligne-titres, .ligne-eleve { display: grid; grid-template-columns: 40px minmax(0, 1.1fr) 80px minmax(0, 1.6fr) 140px; column-gap: 14px; align-items: center; padding: 0 12px; }
.ligne-titres { font-size: 13px; color: var(--texte-2); padding-bottom: 8px; border-bottom: 1px solid rgba(14,18,34,.08); }
.ligne-eleve { height: 54px; border: none; border-radius: 14px; background: transparent; text-align: left; font-size: 14px; }
.ligne-eleve:hover { background: rgba(255,255,255,.6); }
.ligne-eleve.choisie { background: #fff; box-shadow: 0 1px 2px rgba(14,18,34,.08), 0 8px 20px -12px rgba(14,18,34,.25); }
.ligne-eleve .nom { font-size: 16px; font-weight: 600; } .ligne-eleve .nom small { font-weight: 400; color: var(--texte-2); }
.ens-fiche { width: 320px; flex: none; border-radius: 22px; padding: 20px; background: rgba(255,255,255,.75); box-shadow: var(--liseré); position: sticky; top: 16px; }
.fiche-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fiche-tete h2 { margin: 0; font-size: 24px; letter-spacing: -0.03em; } .fiche-tete p { margin: 2px 0 0; font-size: 14px; color: var(--texte-2); }
.fiche-taches { list-style: none; margin: 0 0 12px; padding: 0; }
.fiche-taches li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(14,18,34,.07); font-size: 14px; }
.fiche-taches small { color: var(--texte-2); }

/* Plans */
.nouveau-plan { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: end; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.75); margin-bottom: 18px; }
.nouveau-plan h2 { grid-column: 1 / -1; margin: 0; font-size: 18px; }
.nouveau-plan input[type=date] { height: 48px; border-radius: 12px; border: none; padding: 0 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); font-size: 16px; }
.depart { border: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.depart legend { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.option { flex: 1; min-width: 220px; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.08); cursor: pointer; }
.option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--encre); }
.option b { display: block; font-size: 15px; } .option small { display: block; font-size: 13px; color: var(--texte-2); margin-top: 2px; }
.liste-plans { display: flex; flex-direction: column; gap: 8px; }
.carte-plan { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 0; }
.carte-plan a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #fff; text-decoration: none; color: var(--encre); box-shadow: 0 1px 2px rgba(14,18,34,.06); font-size: 16px; }
.pastille { height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
.pastille.gris { background: rgba(14,18,34,.07); color: #3B4158; } .pastille.vert { background: #E7F6EE; color: #0E6B3E; }
.pastille.bleu { background: #EAF1FF; color: #1E40AF; } .pastille.discret { background: transparent; color: var(--texte-2); }

/* Éditeur de plan */
.editeur { display: flex; gap: 18px; align-items: flex-start; }
.editeur-plan { flex: 1; min-width: 0; }
.vue-eleve { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: #3B4158; }
.vue-eleve > span { flex: none; }
.puces { display: flex; gap: 4px; flex-wrap: wrap; }
.vue-eleve .puces { flex-wrap: nowrap; overflow-x: auto; padding: 2px; }
.puce { height: 30px; padding: 0 11px; flex: none; border-radius: 999px; border: none; background: rgba(14,18,34,.06); font-size: 13px; font-weight: 600; color: #3B4158; white-space: nowrap; }
.puce.petite { height: 26px; padding: 0 9px; font-weight: 500; }
.puce.active { background: var(--encre); color: #fff; }
.puce.colore { background: var(--doux, rgba(37,99,235,.1)); color: var(--texte, #2563EB); }
.puce.colore-plein { background: var(--couleur, #2563EB); color: #fff; }
.puce.bonus { background: #FFF4D6; color: #8A5A00; }
.puce.avant { background: var(--fr); color: #fff; }
.puce.pointillee { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(14,18,34,.25); }
.colonnes-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.col-plan { border-radius: 20px; padding: 10px; background: var(--doux); display: flex; flex-direction: column; gap: 8px; }
.col-plan h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 4px 6px; font-size: 18px; letter-spacing: -0.03em; color: var(--texte); }
.col-plan h2 small { font-size: 13px; color: var(--texte-2); font-weight: 500; }
.carte-tache { border-radius: 14px; padding: 10px 10px 8px 12px; background: #fff; box-shadow: 0 1px 2px rgba(14,18,34,.06), 0 8px 18px -14px rgba(14,18,34,.35); transition: opacity .2s ease; }
.carte-tache.en-avant { box-shadow: inset 0 0 0 2px var(--fr), 0 10px 20px -14px rgba(255,90,78,.7); }
.carte-tache.ouverte { box-shadow: inset 0 0 0 2px var(--encre); }
.carte-haut { display: flex; gap: 6px; align-items: flex-start; }
.carte-haut > span:first-child { flex: 1; min-width: 0; }
.carte-haut b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.carte-haut small { display: block; font-size: 12px; color: var(--texte-2); margin-top: 1px; }
.carte-haut small.rouge { color: #C2271C; font-weight: 600; } .carte-haut small.vert { color: #0E7C47; font-weight: 600; }
.fleches { display: flex; gap: 2px; flex: none; }
.fleches button { width: 26px; height: 26px; border: none; border-radius: 8px; background: transparent; color: #7A8098; font-size: 13px; }
.fleches button:hover:not(:disabled) { background: rgba(14,18,34,.06); }
.fleches button:disabled { opacity: .3; }
.carte-bas { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.carte-bas .puce { height: 26px; font-size: 12px; }
.carte-bas .espace { flex: 1; }
.choix-qui { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(14,18,34,.08); display: flex; flex-direction: column; gap: 8px; }
.choix-qui > .puce { align-self: flex-start; }
.ok-qui { display: flex; justify-content: space-between; align-items: center; }
.ajouter { height: 40px; border-radius: 12px; border: 1.5px dashed var(--couleur); background: transparent; font-size: 14px; font-weight: 600; color: var(--texte); }
.banque-plan { width: 320px; flex: none; position: sticky; top: 16px; max-height: calc(100dvh - 72px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.75); box-shadow: var(--liseré); }
.banque-plan h2 { margin: 0; font-size: 19px; letter-spacing: -0.03em; }
.banque-plan input[type=search], .tache-libre input { height: 42px; border-radius: 12px; border: none; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.08); font-size: 15px; }
.banque-plan .onglets { margin-bottom: 0; }
.banque-liste { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.notion p { margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.notion p small { color: var(--texte-2); }
.ex-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: #fff; margin-bottom: 4px; font-size: 14px; }
.ex-ligne > span:first-child { flex: 1; } .ex-ligne small { display: block; font-size: 12px; color: var(--texte-2); }
.plus { width: 32px; height: 32px; flex: none; border: none; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 600; line-height: 1; }
.tache-libre { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(14,18,34,.08); }
.tache-libre p { margin: 0; font-size: 14px; } .tache-libre small { display: block; color: var(--texte-2); font-size: 12px; }
.tache-libre .btn { align-self: flex-start; }

/* Élèves et groupes */
.ens-eleves { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ajout-eleve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.75); margin-bottom: 14px; }
.ajout-eleve .btn { grid-column: 1 / -1; justify-self: start; }
.ajout-eleve .erreur { grid-column: 1 / -1; }
.ajout-eleve .champ input, .ajout-eleve select, .groupe-edition input { width: 100%; min-width: 0; height: 46px; border-radius: 12px; border: none; padding: 0 12px; font-size: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); }
.liste-eleves { display: flex; flex-direction: column; }
.liste-eleves > div { display: grid; grid-template-columns: 1fr 40px 1fr 1.4fr; gap: 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid rgba(14,18,34,.07); font-size: 14px; }
.liste-eleves small { color: var(--texte-2); }
.groupe-edition { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.75); }
.groupe-edition p { margin: 0; font-size: 14px; }
.grille-eleves { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.grille-eleves button { height: 44px; border: none; border-radius: 12px; background: rgba(14,18,34,.05); font-size: 15px; }
.grille-eleves button.dedans { background: #6CCBCA; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -10px rgba(108,203,202,.9); }
.lien-discret.rouge { color: #C2271C; }

/* Bulle de confirmation */
.bulle { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--encre); color: #fff; font-size: 15px; font-weight: 500; box-shadow: 0 18px 40px -16px rgba(14,18,34,.6); animation: monte .25s ease both; max-width: calc(100vw - 32px); }
.bulle.attention { background: #A31F15; }

@media (max-width: 1100px) {
  .ens { flex-direction: column; }
  .ens-menu { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ens-liens { flex-direction: row; flex-wrap: wrap; }
  .ens-pied { margin-top: 0; margin-left: auto; flex-direction: row; align-items: center; gap: 12px; }
  .ens-classe, .editeur { flex-direction: column; }
  .ens-fiche, .banque-plan { width: 100%; position: static; max-height: none; }
  .ens-eleves { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ens-contenu { padding: 16px; }
  .colonnes-plan { grid-template-columns: 1fr; }
  .ligne-titres { display: none; }
  .ligne-eleve { grid-template-columns: 40px 1fr auto; height: auto; padding: 8px 12px; }
  .ligne-eleve > span:nth-child(4) { grid-column: 2 / -1; }
  .ligne-eleve > span:nth-child(5) { display: none; }
  .nouveau-plan, .ajout-eleve { grid-template-columns: 1fr; }
}

.detail-technique { max-width: 640px; word-break: break-word; font-family: ui-monospace, Menlo, monospace; }

/* Banque d'exercices en grand */
.banque { display: flex; flex-direction: column; gap: 14px; min-height: 0; height: 100%; }
.banque-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.banque-filtres .onglets { margin: 0; }
.banque-filtres input { flex: 1; min-width: 220px; height: 42px; border-radius: 12px; border: none; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.08); font-size: 15px; }
.banque-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 18px; }
.banque-notions { overflow: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.banque-notions h3 { margin: 0 0 6px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-2); }
.notion-ligne { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: none; border-radius: 14px; background: transparent; text-align: left; margin-bottom: 2px; }
.notion-ligne:hover { background: rgba(255,255,255,.6); }
.notion-ligne.choisie { background: #fff; box-shadow: inset 0 0 0 2px var(--couleur), 0 8px 18px -14px rgba(14,18,34,.4); }
.notion-ligne > span:first-child { flex: 1; min-width: 0; }
.notion-ligne b { display: block; font-size: 16px; } .notion-ligne small { display: block; font-size: 12px; color: var(--texte-2); }
.barres { display: flex; gap: 3px; flex: none; }
.barres i { width: 18px; height: 6px; border-radius: 3px; background: rgba(14,18,34,.1); }
.barres i.plein { background: var(--couleur); }
.banque-apercu { overflow: auto; border-radius: 20px; padding: 20px 22px; background: rgba(255,255,255,.8); box-shadow: var(--liseré); display: flex; flex-direction: column; gap: 12px; }
.banque-apercu h2 { margin: 0; font-size: 26px; letter-spacing: -0.035em; }
.banque-apercu .discret { margin: 0; font-size: 14px; }
.banque-apercu .onglets { margin: 0; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes span { height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(14,18,34,.06); display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: #3B4158; }
.vue-eleve-apercu { border-radius: 16px; padding: 14px 16px; background: var(--fond); }
.vue-eleve-apercu .petit { margin: 0 0 6px; }
.consigne-apercu { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.items-apercu { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.items-apercu li { padding-left: 4px; }
.items-apercu li > span:first-child { display: block; }
.items-apercu small { color: var(--texte-2); font-size: 12px; }
.reps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rep, .rep-ok { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 8px; font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.08); }
.rep-ok { background: #E7F6EE; color: #0E6B3E; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(18,161,94,.35); }
.items-apercu .rep-ok { margin: 0 2px; }
.boites-apercu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.boites-apercu > div { border-radius: 14px; padding: 10px; background: #fff; }
.boites-apercu b { display: block; margin-bottom: 6px; color: var(--texte); }
.boites-apercu span { display: flex; flex-wrap: wrap; gap: 4px; }
.actions-apercu { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.dans-plan { font-weight: 700; color: #0E7C47; padding: 0 12px; }
.banque-page { height: calc(100dvh - 190px); min-height: 520px; }
.cible-plan select { height: 42px; border-radius: 12px; border: none; padding: 0 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); font-size: 15px; }

/* Fenêtre par-dessus l'écran (banque dans l'éditeur) */
.fenetre-fond { position: fixed; inset: 0; z-index: 15; background: rgba(14,18,34,.28); display: flex; align-items: center; justify-content: center; padding: 24px; animation: monte .2s ease both; }
.fenetre { width: min(1180px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; border-radius: 28px; background: rgba(238,241,247,.97); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 40px 80px -30px rgba(14,18,34,.55); }
.fenetre > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fenetre h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.fenetre-corps { flex: 1; min-height: 0; }

/* Essai d'un exercice par l'enseignant */
.essai { position: fixed; inset: 0; z-index: 30; overflow: auto; background: var(--fond); padding: 24px; }
.essai::before { content: ""; position: fixed; width: 620px; height: 620px; left: -160px; top: -220px; border-radius: 50%; background: #7FA6FF; filter: blur(100px); opacity: .6; pointer-events: none; }
.essai-scene { position: relative; max-width: 1240px; margin: 0 auto; }

.discret-ajout { border-color: rgba(14,18,34,.18); color: var(--texte-2); font-weight: 500; }
.col-plan .tache-libre { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #fff; border-top: none; }
.col-plan .tache-libre input { height: 40px; border-radius: 10px; border: none; padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); font-size: 14px; }
.col-plan .tache-libre div { display: flex; gap: 10px; align-items: center; }

@media (max-width: 900px) {
  .banque-corps { grid-template-columns: 1fr; }
  .banque-page { height: auto; }
  .fenetre { height: 100%; padding: 16px; }
}

/* Créer un exercice */
.creation { max-width: 980px; display: flex; flex-direction: column; gap: 16px; }
.bloc { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.75); display: flex; flex-direction: column; gap: 12px; }
.bloc h2 { margin: 0; font-size: 18px; letter-spacing: -0.02em; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.bloc .champ input, .bloc .champ select, .items-edition input, .items-edition select, .boite-champ input {
  height: 44px; width: 100%; min-width: 0; border-radius: 12px; border: none; padding: 0 12px; font-size: 15px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1);
}
.bloc .champ .onglets { margin: 0; }
.formes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.forme { text-align: left; padding: 12px 14px; border: none; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.08); }
.forme b { display: block; font-size: 15px; } .forme small { display: block; margin-top: 3px; font-size: 13px; color: var(--texte-2); }
.forme.choisie { box-shadow: inset 0 0 0 2px var(--encre); }
.items-edition { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.items-edition li { display: flex; align-items: center; gap: 8px; }
.items-edition li > input { flex: 1; }
.items-edition li.item-qcm { flex-wrap: wrap; align-items: flex-start; }
.items-edition li.item-qcm > input { flex: 1 1 calc(100% - 44px); }
.reponses { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; order: 3; }
.reponses input { flex: 1 1 140px; }
.reponses input.bonne { box-shadow: inset 0 0 0 2px var(--ev); background: #F3FBF6; }
.item-paire span { color: var(--texte-2); }
.items-edition .onglets { margin: 0; flex: none; }
.items-edition select { width: 200px; flex: none; }
.retirer-item { width: 34px; height: 34px; flex: none; border: none; border-radius: 10px; background: transparent; color: #7A8098; }
.retirer-item:hover { background: rgba(14,18,34,.06); }
.ajout-item { display: flex; align-items: center; gap: 14px; }
.ajout-item .ajouter { --couleur: var(--encre); --texte: var(--encre); padding: 0 16px; }
.boites-edition { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.boite-champ { display: inline-flex; gap: 4px; align-items: center; }
.boite-champ input { width: 180px; }
.boite-champ button { border: none; background: transparent; color: #7A8098; width: 28px; height: 28px; }
.case { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.case input { width: 18px; height: 18px; }
.souplesse { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.souplesse p { margin: 0; font-size: 14px; }
.bloc .option { min-width: 0; }
.pied-creation { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; background: linear-gradient(to top, rgba(246,248,252,.96) 70%, rgba(246,248,252,0)); }
.pied-creation > div { display: flex; gap: 10px; }
.encart.rouge span { display: block; }

/* Importer un fichier */
.fenetre.petite { width: min(720px, 100%); height: auto; max-height: 100%; }
.fenetre-corps.import { overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.fenetre-corps.import p { margin: 0; font-size: 15px; }
.liste-import { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.liste-import li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: #fff; font-size: 14px; }
.liste-import li.vert span { color: #0E7C47; } .liste-import li.rouge span { color: #A31F15; } .liste-import b { color: var(--encre); }
.cible { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.cible-plan { flex-direction: row; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .grille-2, .formes { grid-template-columns: 1fr; }
  .items-edition select { width: 120px; }
}

/* Images dessinées par Atelio */
.image-item { display: flex; justify-content: center; }
.image-item .dessin { width: min(100%, 280px); height: auto; filter: drop-shadow(0 24px 30px rgba(14,18,34,.18)); }
@media (min-width: 761px) {
  .zone-item:has(> .image-item) { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); column-gap: 36px; row-gap: 16px; align-items: center; }
  .zone-item:has(> .image-item) > .image-item { grid-row: 1 / span 5; }
  .zone-item:has(> .image-item) > :not(.image-item) { grid-column: 2; }
}
.choix-btn.avec-image { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 8px; }
.choix-btn.avec-image .dessin { width: 104px; height: 104px; }
.col-assoc { justify-content: center; }
.mini-image .dessin { width: 76px; height: 76px; }
.items-apercu .mini-image { float: right; margin-left: 8px; }
.items-apercu li { overflow: hidden; }
.associer:has(.avec-image) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.associer .col-assoc:has(.avec-image) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.items-edition li .image-edition, .items-edition li .ajout-image { order: 4; }
.items-edition li { flex-wrap: wrap; }
.items-edition li > input { flex: 1 1 60%; }
.image-edition { flex: 1 1 100%; display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 14px; background: rgba(37,99,235,.06); }
.image-edition .dessin { width: 92px; height: 92px; flex: none; }
.image-edition > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; }
.heure-choix { display: inline-flex; align-items: center; gap: 6px; }
.items-edition .heure-choix select { width: 72px; height: 38px; }
@media (max-width: 760px) { .associer .col-assoc:has(.avec-image) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lecture avec un texte : d'abord le texte seul, puis le texte à gauche et les questions à droite. */
.exercice { --taille-texte: 22px; }
.exercice.lecture, .exercice.avec-texte { max-width: 1240px; }
.lecture-tete { flex: 1; min-width: 0; }
.consigne-lecture { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.taille-texte { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.55); box-shadow: var(--liseré); flex: none; }
.taille-texte button { width: 44px; height: 40px; border: none; border-radius: 10px; background: transparent; font: inherit; font-weight: 600; font-size: 15px; color: var(--encre); cursor: pointer; }
.taille-texte button + button { font-size: 21px; background: #fff; box-shadow: 0 1px 2px rgba(14,18,34,.1); }
.texte-lecture { box-sizing: border-box; padding: 28px 30px; border-radius: 28px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--liseré); color: #232840; }
.texte-lecture h1, .texte-lecture h2 { margin: 0 0 14px; letter-spacing: -0.03em; color: var(--encre); }
.texte-lecture h1 { font-size: 34px; }
.texte-lecture h2 { font-size: 22px; }
.texte-lecture p { margin: 0 0 12px; font-size: max(15px, calc(var(--taille-texte) - 4px)); line-height: 1.6; }
.texte-lecture.grand { width: 100%; max-width: 760px; align-self: center; padding: 40px 56px; border-radius: 34px; background: rgba(255,255,255,.72); box-shadow: var(--liseré), var(--ombre); }
.texte-lecture.grand p { font-size: var(--taille-texte); line-height: 1.65; margin-bottom: 16px; }
.suite.centre { justify-content: center; }
.lecture-colonnes { display: grid; grid-template-columns: minmax(300px, 470px) 1fr; gap: 20px; align-items: start; }
.lecture-colonnes .texte-lecture { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.lecture-questions { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 860px) {
  .lecture-colonnes { grid-template-columns: 1fr; }
  .lecture-colonnes .texte-lecture { position: static; max-height: 38vh; }
  .texte-lecture.grand { padding: 26px 22px; }
  .barre-exercice { flex-wrap: wrap; }
}

/* Création : le texte à lire */
.texte-edition { display: flex; flex-direction: column; gap: 10px; }
.texte-edition textarea { min-height: 220px; font: inherit; font-size: 16px; line-height: 1.55; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(14,18,34,.15); background: #fff; resize: vertical; }
/* Aperçu dans la banque */
.texte-apercu { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.7); max-height: 220px; overflow: auto; font-size: 14px; line-height: 1.5; }
.texte-apercu b { display: block; margin-bottom: 6px; }
.texte-apercu p { margin: 0 0 8px; }

/* ——— Dictées ——— */
.pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--fr); color: #fff; font-size: 12px; font-weight: 700; }
.liste-dictees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ligne-dictee { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.75); box-shadow: var(--liseré); }
.corps-dictee { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.corps-dictee b { font-size: 17px; letter-spacing: -0.01em; }
.corps-dictee small { font-size: 14px; color: var(--texte-2); }
.nouvelle-dictee { margin-bottom: 16px; max-width: 640px; }
.nouvelle-dictee > div { display: flex; gap: 12px; align-items: center; }

.dictee-reglage { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.titre-dictee { display: block; width: 100%; margin: 6px 0 2px; padding: 2px 6px; margin-left: -6px; border: none; border-radius: 10px; background: transparent; font: inherit; font-size: 28px; font-weight: 700; letter-spacing: -0.04em; color: var(--encre); }
.titre-dictee:hover, .titre-dictee:focus { background: rgba(255,255,255,.8); }
.phrases-dictee { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.phrase-dictee { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.8); box-shadow: var(--liseré); }
.phrase-dictee.enreg { box-shadow: inset 0 0 0 2px var(--fr); }
.phrase-dictee .num, .lignes-copie .num { width: 24px; flex: none; font-size: 15px; font-weight: 700; color: var(--texte-2); text-align: center; }
.phrase-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.phrase-corps input { height: 44px; width: 100%; border: none; border-radius: 12px; padding: 0 12px; font: inherit; font-size: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); }
.phrase-son { display: flex; align-items: center; gap: 12px; }
.phrase-son small { font-size: 13px; color: var(--texte-2); }
.onde { display: inline-flex; align-items: center; gap: 2px; height: 30px; flex: none; }
.onde i { display: block; width: 3px; border-radius: 2px; }
.phrase-dictee.enreg .onde i { animation: onde .9s ease-in-out infinite; transform-origin: center; }
.phrase-dictee.enreg .onde i:nth-child(2n) { animation-delay: .15s; } .phrase-dictee.enreg .onde i:nth-child(3n) { animation-delay: .3s; }
@keyframes onde { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(5); } }
@media (prefers-reduced-motion: reduce) { .phrase-dictee.enreg .onde i { animation: none; } }
.phrase-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.rond-son { height: 44px; min-width: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; background: var(--fr); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rond-son.rec { background: var(--encre); }
.rond-son.ecoute { padding: 0; width: 44px; background: rgba(37,99,235,.12); color: #2563EB; }
.rond-son[disabled] { opacity: .4; cursor: default; }

.dictee-cote { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: var(--liseré); }
.dictee-cote section { display: flex; flex-direction: column; gap: 8px; }
.dictee-cote h2 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.dictee-cote .onglets { margin: 0; }
.dictee-cote p { margin: 0; }
.dictee-cote select { height: 42px; border-radius: 12px; border: none; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); }
.regles-ecoute { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.regles-ecoute li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.regles-ecoute .onglets button { height: 30px; min-width: 34px; padding: 0 8px; }
.retirer-regle { border: none; background: transparent; color: #7A8098; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.ajout-plan .btn { width: 100%; }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; cursor: pointer; }
.interrupteur b { display: block; font-size: 15px; } .interrupteur small { display: block; font-size: 13px; color: var(--texte-2); }
.interrupteur input { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; flex: none; margin: 0; border-radius: 16px; background: rgba(14,18,34,.2); position: relative; cursor: pointer; transition: background .2s ease; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14,18,34,.3); transition: left .2s ease; }
.interrupteur input:checked { background: var(--ev); }
.interrupteur input:checked::after { left: 23px; }
.interrupteur input:disabled { opacity: .45; cursor: default; }
.interrupteur input:focus-visible { outline: 3px solid rgba(37,99,235,.4); outline-offset: 2px; }
.petite-fenetre { width: min(640px, 100%); height: auto; max-height: min(760px, 100%); }
.petite-fenetre .fenetre-corps { overflow: auto; }

.correction { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.copies { display: flex; flex-direction: column; gap: 4px; }
.copies p { margin: 4px 0 8px; }
.copie-ligne { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px; border: none; border-radius: 12px; background: transparent; font: inherit; font-size: 15px; color: var(--encre); text-align: left; cursor: pointer; }
.copie-ligne.choisie { background: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(14,18,34,.08), 0 8px 20px -12px rgba(14,18,34,.25); }
.copie-ligne small { font-size: 13px; font-weight: 600; }
.copie-ligne small.rouge { color: var(--fr-texte); } .copie-ligne small.vert { color: #0E7C47; }
.copie { padding: 22px 26px; border-radius: 24px; background: rgba(255,255,255,.8); box-shadow: var(--liseré); display: flex; flex-direction: column; gap: 14px; }
.copie header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.copie h1 { margin: 0; font-size: 30px; letter-spacing: -0.04em; }
.copie header p, .copie > p { margin: 0; }
.btn-vert-doux { background: #E7F6EE; color: #0E6B3E; }
.lignes-copie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lignes-copie li { display: flex; gap: 12px; }
.lignes-copie .num { padding-top: 10px; }
.mots-copie { display: flex; flex-wrap: wrap; gap: 4px 4px; }
.mot-copie { padding: 3px 8px; border: 2.5px solid transparent; border-radius: 999px; background: transparent; font: inherit; font-size: 26px; line-height: 1.3; color: var(--encre); cursor: pointer; }
.mot-copie:hover:not([disabled]) { background: rgba(14,18,34,.05); }
.mot-copie.entoure { border-color: var(--fr); background: rgba(255,90,78,.08); color: #A31F15; transform: rotate(-3deg); }
.mot-copie[disabled] { cursor: default; }
.ref-ligne { margin: 6px 0 0 8px; font-size: 17px; color: #0E7C47; }
.copie-cote { position: sticky; top: 16px; min-height: 420px; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: var(--liseré); }
.copie-cote .espace { flex: 1; }
.copie-cote textarea { resize: vertical; padding: 12px 14px; border: none; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.1); font: inherit; font-size: 15px; line-height: 1.45; }
.compte-erreurs { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.compte-erreurs b { font-size: 60px; line-height: 1; letter-spacing: -0.05em; color: var(--fr-texte); }
.compte-erreurs span { font-size: 16px; color: #3B4158; }
.btn.grand { height: 58px; font-size: 17px; }
@media (max-width: 1100px) {
  .dictee-reglage, .correction { grid-template-columns: 1fr; }
  .dictee-cote, .copie-cote { position: static; min-height: 0; }
  .copies { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .phrase-dictee { flex-wrap: wrap; }
  .phrase-actions { width: 100%; justify-content: flex-end; }
}

/* Banque : le choix du domaine, entre la matière et les notions */
.onglets.domaines { margin: 0; align-self: flex-start; background: var(--doux, rgba(14,18,34,.05)); }
.onglets.domaines button { height: 38px; padding: 0 16px; font-size: 15px; }
.onglets.domaines button[aria-selected="true"] { color: var(--texte, var(--encre)); }
.onglets.domaines small { margin-left: 4px; font-size: 12px; font-weight: 600; opacity: .6; }
.autres-formes summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--texte-2); padding: 4px 0; }
.autres-formes .puces { margin-top: 8px; }

/* Images larges (droite graduée, diagramme, frise, bande) : plus grandes, et au-dessus de la question */
.image-item .dessin-large, .image-item .dessin-quadrillage { width: min(100%, 460px); }
.zone-item:has(> .image-item .dessin-large) { display: flex; }
.mini-image .dessin-large, .mini-image .dessin-quadrillage { width: 120px; height: auto; }
.image-edition .dessin-large, .image-edition .dessin-quadrillage { width: 200px; height: auto; }
.choix-btn.avec-image .dessin-large, .choix-btn.avec-image .dessin-quadrillage { width: 180px; height: auto; }
/* Réglages d'une image dans le formulaire de création */
.image-edition { align-items: flex-start; }
.apercu-image { flex: none; display: flex; align-items: center; justify-content: center; min-width: 120px; min-height: 92px; }
.reglages-image { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; font-size: 14px; flex: 1; min-width: 0; }
.reglages-image > b { flex: 1 1 100%; }
.reglages-image p { margin: 0; flex: 1 1 100%; }
.mini-champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texte-2); }
.mini-champ input, .mini-champ select { height: 36px; min-width: 0; width: 96px; border: none; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--encre); background: #fff; box-shadow: inset 0 0 0 1px rgba(14,18,34,.12); }
.mini-champ select { width: auto; }
.mini-champ.large { flex: 1 1 100%; }
.mini-champ.large input { width: 100%; }
.case.petite { font-size: 14px; }
.choix-sorte { flex-direction: column; align-items: flex-start; gap: 8px; }
.image-item:has(.dessin-large) { width: 100%; }
/* Image de l'enseignant */
.dessin-photo { display: block; max-width: 100%; height: auto; max-height: 340px; border-radius: 16px; object-fit: contain; background: #fff; }
.image-item .dessin-photo { width: auto; max-width: min(100%, 460px); }
.zone-item:has(> .image-item .dessin-photo) { display: flex; }
.image-item:has(.dessin-photo) { width: 100%; }
.mini-image .dessin-photo { width: auto; height: 64px; max-height: 64px; border-radius: 8px; }
.image-edition .dessin-photo { width: auto; max-width: 200px; max-height: 140px; }
.choix-btn.avec-image .dessin-photo { max-height: 110px; }