/* À LA DÉCOUVERTE DE LA LANGUE FRANÇAISE — feuille de style
   Même famille que « À la découverte des gènes et de l'évolution » : une barre en haut, puis un écran plein cadre.
   Écran d'activité : la scène à gauche (onglets, commandes, scène), le texte à droite.
   ../commun/scolatools.css, chargé après cette feuille, redéfinit les couleurs communes (fond, encre, accent bleu
   #2f5fe0, 5,5:1 avec le blanc). Pas de thème sombre, comme le site.
   Jamais la couleur seule : chaque bloc dit son état en toutes lettres (✓ se déplace, ✗ ne se déplace pas), chaque
   fonction a son étiquette écrite, une phrase incorrecte a son astérisque et sa pastille « phrase incorrecte ». */
:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --ligne: #dfe5ee;
  --accent: #2f5fe0;
  --accent-fonce: #2449b8;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --bon: #16a34a;
  --bon-fonce: #116b33;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-fonce: #b42318;
  --faux-doux: #fee2e2;
  --ocre: #8a4f0b;
  --surligne: #fff1a8;
  --bulle-fond: #1b2333;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.9);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px rgba(20, 33, 61, 0.07);

  /* fonds des scènes, un par thème */
  --scene-phrase-1: #eef3fb; --scene-phrase-2: #d6e2f5;
  --scene-complexe-1: #eef6ee; --scene-complexe-2: #d3e6d4;
  --scene-verbe-1: #faf4e8; --scene-verbe-2: #eedfc1;
  --scene-accords-1: #f4effa; --scene-accords-2: #ded2ee;

  /* niveaux (texte sur fond clair : 4,5:1 au moins) */
  --niv-5e: #0f766e; --niv-4e3e: #1d4ed8; --niv-lycee: #4338ca; --niv-1re: #7c2d92;

  /* fonctions (bordure du bloc à l'analyse ; l'étiquette écrite dit toujours la fonction) */
  --f-sujet: #1d4ed8; --f-verbe: #b42318; --f-cod: #7c2d92; --f-coi: #8a4f0b; --f-attribut: #0f766e; --f-cc: #116b33; --f-apposition: #4b5563;

  --f-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.78rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.55rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 400px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: var(--t-m)/1.55 var(--f-texte); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.scene:focus-visible, .commandes:focus-visible { outline-offset: -3px; border-radius: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.hors-niveau { display: none !important; }
.visuellement-cache { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code, code { font-family: var(--f-mono); font-size: 0.9em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }

/* ---------- ambiances des thèmes ---------- */
[data-theme] { --scene-1: var(--scene-phrase-1); --scene-2: var(--scene-phrase-2); }
[data-theme="complexe"] { --scene-1: var(--scene-complexe-1); --scene-2: var(--scene-complexe-2); }
[data-theme="verbe"] { --scene-1: var(--scene-verbe-1); --scene-2: var(--scene-verbe-2); }
[data-theme="accords"] { --scene-1: var(--scene-accords-1); --scene-2: var(--scene-accords-2); }

/* ---------- barre ---------- */
.barre { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; padding: 10px var(--gouttiere); background: var(--surface); border-bottom: 1px solid var(--ligne); position: relative; z-index: 5; }
.lien-portail { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: var(--encre-2); text-decoration: none; font-size: var(--t-l); border: 1px solid var(--ligne); }
.marque { font-family: var(--f-titre); font-weight: 760; font-size: var(--t-l); color: var(--encre); text-decoration: none; letter-spacing: -0.02em; }
.marque-courte { display: none; }
.barre nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barre nav a { color: var(--encre-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: var(--t-s); }
.choix-niveau { margin-left: auto; align-items: center; }
.choix-niveau > button { min-width: 3.1em; }
main { position: relative; min-height: 0; }
.ecran { position: absolute; inset: 0; }

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .commandes button, .onglets a {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none; min-height: 34px;
}
.bascule > button { border-radius: 0; margin-left: -1px; }
.bascule > button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bascule > button:last-child { border-radius: 0 999px 999px 0; }
.bascule > button:hover, .commandes button:hover, .onglets a:hover { border-color: var(--accent); }
.commandes button[aria-pressed="true"], .onglets a[aria-current="page"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.app .bascule > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.commandes button.principal { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.commandes button[aria-disabled="true"], .bouton[aria-disabled="true"], .choix-defi[aria-disabled="true"], .place[aria-disabled="true"], .levier[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.bouton { border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block; min-height: 34px; }
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }
.app .bouton.plein, .app .bouton.principal { background: var(--accent); color: var(--accent-encre); }
.app .bouton.plein:hover, .app .bouton.principal:hover { background: var(--accent-fonce); }

/* ---------- pastilles de niveau ---------- */
.niv { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.5; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); white-space: nowrap; font-weight: 500; }
.niv[data-n="5e"] { background: #ddf3f0; color: var(--niv-5e); }
.niv[data-n="4e3e"] { background: #e3ebfd; color: var(--niv-4e3e); }
.niv[data-n="lycee"], .niv[data-n="2de"] { background: #e7e6fb; color: var(--niv-lycee); }
.niv[data-n="1re"] { background: #f3e5f7; color: var(--niv-1re); }

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1180px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 30px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 62ch; }
.surtitre { margin: 0; }
.accueil-intro h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
.accueil-intro p { margin: 0; color: var(--encre-2); font-size: var(--t-l); line-height: 1.5; }
.accueil-dessin { border-radius: 16px; border: 1px solid var(--ligne); box-shadow: var(--ombre); padding: 14px; background: radial-gradient(110% 90% at 50% 35%, var(--scene-phrase-1), var(--scene-phrase-2)); display: grid; gap: 8px; }
.dessin-accueil { width: 100%; height: auto; display: block; }
.acc-bloc { fill: #ffffff; stroke: #64748b; stroke-width: 2; }
.acc-cc { stroke: var(--bon-fonce); stroke-width: 3; stroke-dasharray: 7 4; }
.acc-verbe { stroke: var(--f-verbe); stroke-width: 3; }
.acc-texte { font: 600 17px var(--f-texte); fill: var(--encre); text-anchor: middle; }
.acc-ponct { font: 700 22px var(--f-texte); fill: var(--encre); }
.acc-fleche { fill: none; stroke: var(--bon-fonce); stroke-width: 2.5; stroke-dasharray: 6 5; }
.acc-pointe { fill: none; stroke: var(--bon-fonce); stroke-width: 2.5; }
.acc-coche { font: 700 15px var(--f-texte); fill: var(--bon-fonce); text-anchor: middle; }
.legende-dessin { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
/* Accueil (feuille commune du 17 oct. 2026) : le dessin à droite du surtitre et du titre, à peine plus haut qu'eux (pas de
   vide sous le titre) : largeur limitée, cadre resserré, dessin recadré (viewBox) ; la légende reste sous le dessin. */
@media (min-width: 641px) {
  .accueil-tete > .accueil-dessin { max-width: 380px; width: 100%; justify-self: end; padding: 10px 12px; gap: 4px; }
}
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.carte { display: grid; grid-template-rows: auto 1fr; color: var(--encre); background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); }
.carte-lien { display: block; text-decoration: none; color: inherit; }
.carte-lien:focus-visible { outline-offset: -3px; }
.carte .vignette { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; }
.carte h3 { font-size: var(--t-l); font-weight: 720; }
.carte h3 .numero { font-family: var(--f-mono); font-size: var(--t-s); color: var(--encre-2); font-weight: 500; margin-right: 4px; }
.carte p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte .niveaux { display: flex; flex-wrap: wrap; gap: 4px; }
.liste-activites { list-style: none; margin: 0; padding: 8px 0 0; display: grid; gap: 2px; border-top: 1px solid var(--ligne); }
.liste-activites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-s); min-height: 30px; }
.liste-activites a { color: var(--accent-fonce); font-weight: 600; text-decoration: none; padding: 3px 0; }
.liste-activites a:hover { text-decoration: underline; }
/* étoiles des missions : pleines ★ (faites) et creuses ☆ (à faire) : la forme les distingue, pas seulement la couleur */
.etoiles { letter-spacing: 1px; color: #7a5f0c; white-space: nowrap; font-size: var(--t-xs); }
.etoiles .vide { color: #5f6b7a; }
.sans-mission { font-size: var(--t-xs); color: var(--encre-2); white-space: nowrap; }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bloc-raccourci { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc-raccourci h2 { font-size: var(--t-l); font-weight: 700; }
.bloc-raccourci p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; }
.bloc-lien:hover { border-color: var(--accent); }
.voir { font-weight: 700; color: var(--accent); font-size: var(--t-s); }
.credits { font-size: var(--t-xs); color: var(--encre-2); max-width: 90ch; border-top: 1px solid var(--ligne); padding-top: 18px; display: grid; gap: 6px; }
.credits p { margin: 0; }
.pied-panneau { margin: 0; font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--ligne); padding-top: 12px; }
.pied-panneau a { display: inline-block; min-height: 24px; padding-top: 3px; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.activite.sans-panneau { grid-template-columns: minmax(0, 1fr); }
.activite.sans-panneau .panneau { display: none; }
.colonne-scene { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.tete-scene { display: flex; gap: 8px; align-items: flex-start; padding: 10px var(--gouttiere) 8px; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
.onglets a { background: var(--verre); }
.bouton-panneau { flex: none; width: 36px; height: 34px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--verre); color: var(--encre-2); font-size: 1.05rem; }
.bouton-panneau:hover { border-color: var(--accent); color: var(--accent); }
.scene { position: relative; min-height: 0; overflow: auto; }
.commandes { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px var(--gouttiere) 10px; background: var(--verre); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); font-size: var(--t-s); }
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; min-width: 0; }
.commandes .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.liste { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; min-width: 0; }
.liste span { color: var(--encre-2); font-size: var(--t-xs); }
.liste select { border: 1px solid var(--ligne); border-radius: 8px; background: var(--surface); padding: 5px 8px; min-height: 34px; font-size: var(--t-s); max-width: 100%; min-width: 0; }
.choix-phrase { width: 30em; }

.panneau { position: relative; background: var(--surface); border-left: 1px solid var(--ligne); overflow: auto; min-width: 0; padding: 16px clamp(16px, 2vw, 26px) 32px; display: flex; flex-direction: column; gap: 14px; }
.choix-module { width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); font-size: var(--t-s); font-weight: 700; min-height: 36px; }
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.avis-niveau { margin: 0; padding: 8px 10px; border-left: 4px solid var(--niv-1re); border-radius: 6px; background: #f6eefa; font-size: var(--t-s); color: var(--encre); }
.info { border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; font-size: var(--t-s); }
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent-fonce); }
.info p { margin: 0; }
.encart:empty { display: none; }
.encart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.missions { display: grid; gap: 6px; }
.missions h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin: 0; }
.missions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.missions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); align-items: start; }
.missions li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8a94a6; margin-top: 1px; box-sizing: border-box; }
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon-fonce); background: var(--bon-fonce); color: #ffffff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.missions li.vient::before { animation: tampon 0.6s ease; }
@keyframes tampon { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.niveau { border-left: 3px solid var(--niv-4e3e); padding-left: 10px; }
.texte p.niveau[data-n="lycee"], .texte p.niveau[data-n="2de"] { border-color: var(--niv-lycee); }
.texte p.niveau[data-n="1re"] { border-color: var(--niv-1re); }
.texte p.niveau .niv { margin-right: 2px; vertical-align: 1px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir h2, .savais h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 6px; }
.retenir ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.savais { border: 1.5px dashed var(--ocre); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); display: grid; gap: 8px; }
.savais h2 { color: var(--ocre); margin: 0; }
.savais p { margin: 0; }
.plus-loin-boite { display: grid; gap: 8px; }
.plus-loin { border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.plus-loin > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: var(--t-s); min-height: 44px; }
.plus-loin > summary::-webkit-details-marker { display: none; }
.plus-loin > summary::before { content: "+"; font-family: var(--f-mono); width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-doux); color: var(--accent-fonce); }
.plus-loin[open] > summary::before { content: "\2212"; }
.plus-loin > summary .niv { margin-left: auto; }
.plus-loin > div { padding: 0 14px 14px; display: grid; gap: 8px; font-size: var(--t-s); }
.plus-loin p { margin: 0; }
.programme-niveaux { font-size: var(--t-xs); color: var(--encre-2); }
.programme-niveaux summary { cursor: pointer; font-weight: 700; min-height: 24px; }
.programme-niveaux p { margin: 6px 0 0; }
.suite { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite:empty { display: none; }
.suite a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-s); min-height: 28px; }
.suite a:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }
.erreur-activite { padding: 16px; }

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau th, .tableau td { padding: 6px 8px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.tableau caption { text-align: left; font-weight: 700; padding: 8px 8px 4px; }
.defilant { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }

.mot { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help; text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mot:hover, .mot[aria-expanded="true"] { color: var(--accent-fonce); }
.bulle-mot { position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 32px)); background: var(--bulle-fond); color: var(--bulle-texte); padding: 9px 12px; border-radius: 10px; font-size: var(--t-s); line-height: 1.4; box-shadow: var(--ombre); }
.bulle-mot strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); margin-bottom: 2px; }
/* le toast laisse passer le doigt (pointer-events: none) : il ne bloque jamais le défilement ni un bloc dessous */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--bon-fonce); color: #ffffff; padding: 10px 18px; border-radius: 999px; font-weight: 700; box-shadow: var(--ombre); animation: monter 0.35s ease; max-width: calc(100vw - 32px); text-align: center; width: max-content; pointer-events: none; }
.toast.neutre { background: var(--accent-fonce); }
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1, .page-mise > h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p, .page-mise > p { margin: 0; color: var(--encre-2); max-width: 70ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.choix-defi { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.choix-defi:hover:not([aria-disabled="true"]) { border-color: var(--accent); }
.choix-defi[aria-disabled="true"] { background: var(--surface-2); opacity: 1; }
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent-fonce); }
.medaille { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.grande { width: 46px; height: 46px; }
.medaille.or { background: #8a6c0e; } .medaille.argent { background: #5f6b77; } .medaille.bronze { background: #8a5126; } .medaille.aucune { background: var(--surface-2); color: var(--encre-2); }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; box-shadow: var(--ombre); }
.quiz-entete { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); }
.quiz-progression { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.quiz-progression span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.question h2 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.3; font-family: var(--f-texte); letter-spacing: 0; } /* guillemets : police du texte (espace fine) */
.quiz-choix { display: grid; gap: 8px; }
.quiz-choix button { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); min-height: 44px; }
.quiz-choix button:hover:not([aria-disabled="true"]) { border-color: var(--accent); }
.quiz-choix button[aria-disabled="true"] { cursor: default; }
.quiz-choix button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: var(--bon-fonce); font-weight: 700; }
.quiz-choix button[data-ton="bon"]::before { content: "✓ "; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-fonce); text-decoration: line-through; }
.explication { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: var(--t-s); }
.explication strong.bon { color: var(--bon-fonce); } .explication strong.faux { color: var(--faux-fonce); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-score { margin: 0; font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--accent); }
.serie { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ocre); }

/* ---------- lexique et crédits ---------- */
.lexique-tete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.lexique-tete h1 { font-size: var(--t-xxl); font-weight: 780; }
.recherche input { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 8px 14px; min-width: min(300px, 100%); }
.liste-lexique { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }
.liste-lexique > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; scroll-margin-top: 16px; }
.liste-lexique dt { font-family: var(--f-titre); font-weight: 720; font-size: var(--t-l); }
.liste-lexique dd { margin: 0; font-size: var(--t-s); }
.liste-lexique dd a { font-size: var(--t-xs); font-weight: 700; display: inline-block; min-height: 24px; padding-top: 3px; }
#compte-lexique:empty { display: none; }
.page-credits section { display: grid; gap: 8px; }
.page-credits h2 { font-size: var(--t-xl); }
.page-credits ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.page-credits li { max-width: 80ch; overflow-wrap: anywhere; }
.page-credits .droits { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px; }

/* =================================================================
   LA VUE DES BLOCS (js/vue-blocs.js)
   ================================================================= */
.scene-blocs, .scene-leviers { padding: 16px var(--gouttiere) 24px; display: grid; gap: 14px; align-content: start; max-width: 980px; }
.source-phrase { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.aide-geste { margin: 0; font-size: var(--t-xs); color: var(--encre-2); }
.vue-blocs { display: grid; gap: 10px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--ligne); border-radius: 16px; padding: 12px; }
.rail { display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: flex-start; }
.lien { font-size: 1.5rem; line-height: 44px; font-weight: 700; margin-left: -6px; color: var(--encre); }
.lien-tete { margin-left: 0; }
.bloc {
  display: inline-grid; gap: 2px; justify-items: start; text-align: left; min-height: 44px; padding: 8px 12px;
  border: 2px solid #64748b; border-radius: 10px; background: var(--surface); color: var(--encre); font-size: 1.08rem; line-height: 1.3;
  max-width: 100%; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.08);
}
.bloc-texte { font-weight: 600; overflow-wrap: anywhere; }
.bloc-etat { font-size: var(--t-xs); font-weight: 700; }
.bloc-fonction { font-size: var(--t-xs); font-family: var(--f-mono); color: var(--encre); background: var(--surface-2); border-radius: 6px; padding: 0 6px; }
.bloc:hover { border-color: var(--accent); }
.bloc[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); outline: 3px solid var(--accent); outline-offset: 2px; }
.bloc[data-marque="ok"] { border-color: var(--bon-fonce); border-style: dashed; }
.bloc[data-marque="ok"] .bloc-etat { color: var(--bon-fonce); }
.bloc[data-marque="non"] .bloc-etat { color: var(--faux-fonce); }
.bloc[data-marque="autres"] .bloc-etat { color: var(--ocre); }
/* analyse : bordure par fonction, toujours avec l'étiquette écrite */
.bloc[data-f="sujet"] { border-color: var(--f-sujet); border-style: solid; }
.bloc[data-f="verbe"] { border-color: var(--f-verbe); border-style: double; border-width: 4px; }
.bloc[data-f="cod"] { border-color: var(--f-cod); border-style: solid; }
.bloc[data-f="coi"] { border-color: var(--f-coi); border-style: solid; }
.bloc[data-f="attribut"], .bloc[data-f="attribut-cod"] { border-color: var(--f-attribut); border-style: solid; }
.bloc[data-f="cc"] { border-color: var(--f-cc); border-style: dashed; }
.bloc[data-f="apposition"] { border-color: var(--f-apposition); border-style: dotted; border-width: 3px; }
.bloc.surligne { background: var(--surligne); }
/* seuls les blocs captent le doigt : la page défile partout ailleurs */
.avec-places .bloc, .jeton-glisse { touch-action: none; -webkit-user-select: none; user-select: none; }
.bloc.en-glisse { opacity: 0.35; }
.fantome-bloc { position: fixed; z-index: 50; pointer-events: none; margin: 0; box-shadow: 0 10px 28px rgba(20, 33, 61, 0.25); border-color: var(--accent); background: var(--surface); }
.place {
  min-height: 44px; padding: 8px 16px; border: 2px dashed #8a94a6; border-radius: 10px; background: rgba(255, 255, 255, 0.7);
  color: var(--encre-2); font-weight: 700; font-size: var(--t-s); justify-self: start;
}
.place-fin { justify-self: end; }
.en-choix .place:not([aria-disabled="true"]), .en-glisser .place { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-doux); }
.place.survolee { border-style: solid; background: #d4e0ff; color: var(--accent-fonce); }
.resultat-blocs, .resultat-levier { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); border-left-width: 5px; font-size: var(--t-s); display: grid; gap: 6px; }
.resultat-blocs[data-ton="bon"], .resultat-levier[data-ton="bon"] { border-left-color: var(--bon-fonce); }
.resultat-blocs[data-ton="refus"], .resultat-levier[data-ton="refus"] { border-left-color: var(--faux-fonce); background: #fff8f7; }
.resultat-blocs[data-ton="neutre"], .resultat-levier[data-ton="neutre"] { border-left-color: var(--accent); }
.resultat-levier p { margin: 0; }
.resultat-blocs { display: block; line-height: 1.6; }
.etoile { color: var(--faux-fonce); font-weight: 800; }
.phrase-obtenue { font-size: var(--t-m); }
.phrase-obtenue.incorrecte { text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, 0.55); }
.pastille-faux { display: inline-block; text-decoration: none; font-size: var(--t-xs); font-family: var(--f-mono); color: var(--faux-fonce); background: var(--faux-doux); border-radius: 999px; padding: 0 8px; }
.pastille-autre { display: inline-block; font-size: var(--t-xs); font-family: var(--f-mono); color: var(--encre); background: var(--surface); border: 1px dashed var(--encre-2); border-radius: 999px; padding: 0 8px; margin-left: 6px; }
mark.change { background: var(--surligne); color: var(--encre); font-weight: 700; border-bottom: 2px solid #8a6c0e; padding: 0 2px; border-radius: 3px; }
.note-resultat { color: var(--encre-2); font-size: var(--t-s); }
.bilan-blocs { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); display: grid; gap: 6px; }
.bilan-blocs h2 { font-size: var(--t-l); }
.bilan-blocs ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.bilan-blocs p { margin: 0; }

/* =================================================================
   LES QUATRE LEVIERS
   ================================================================= */
.groupe-choisi { margin: 0; font-size: var(--t-s); }
.leviers, .choix-encadrer, .choix-fonctions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.levier, .choix-encadrer button, .choix-fonctions button {
  min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700;
}
.levier:hover, .choix-encadrer button:hover, .choix-fonctions button:hover { background: var(--accent-doux); }
.choix-encadrer .libelle { font-size: var(--t-s); color: var(--encre-2); }
.cadre-tests { max-width: 100%; }
.tableau-tests tr.a-faire th { color: var(--encre-2); }
.a-faire-texte { color: var(--encre-2); font-style: italic; }
.verdict { font-weight: 700; white-space: nowrap; }
.verdict[data-v="oui"] { color: var(--bon-fonce); }
.verdict[data-v="non"] { color: var(--faux-fonce); }
.verdict[data-v="sens"], .verdict[data-v="rare"], .verdict[data-v="autres"], .verdict[data-v="deja"] { color: var(--ocre); }
.raisonnement, .nommer, .rediger { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
/* titres qui contiennent des guillemets : police du texte (la police des titres n'a pas l'espace fine) */
.raisonnement h2, .nommer h2, .rediger h2 { font-size: var(--t-l); font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; }
.raisonnement p, .nommer p, .rediger p { margin: 0; }
.texte-raisonnement { font-size: var(--t-m); line-height: 1.6; }
.voile .conclusion { display: none; }
.raisonnement .bouton, .rediger .bouton { justify-self: start; min-height: 44px; }
.verdict-nom { padding: 8px 12px; border-radius: 10px; font-weight: 700; }
.verdict-nom[data-ton="bon"] { background: var(--bon-doux); color: var(--bon-fonce); }
.verdict-nom[data-ton="bon"]::before { content: "✓ "; }
.verdict-nom[data-ton="refus"] { background: var(--faux-doux); color: var(--faux-fonce); }
.verdict-nom[data-ton="refus"]::before { content: "✗ "; }
.libelle-rediger { font-size: var(--t-s); color: var(--encre-2); }
.zone-rediger { width: 100%; border: 1px solid #8a94a6; border-radius: 10px; padding: 8px 10px; font-size: var(--t-m); background: var(--surface); resize: vertical; }
.modele { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.modele h3 { font-size: var(--t-m); }

/* =================================================================
   LE GROUPE NOMINAL QUI GRANDIT
   Le cadre (bordure pleine) entoure le groupe nominal ; chaque morceau dit sa fonction en toutes lettres (étiquette) ;
   le nom noyau a une bordure épaisse, les expansions une bordure tiretée (on peut les détacher), l'apposition une
   bordure pointillée, hors du cadre.
   ================================================================= */
.scene-gn, .scene-tf { padding: 16px var(--gouttiere) 24px; display: grid; gap: 14px; align-content: start; max-width: 980px; }
.boite-gn { display: grid; gap: 12px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--ligne); border-radius: 16px; padding: 12px; }
.phrase-gn { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; font-size: 1.08rem; line-height: 1.4; }
.hors-gn { color: var(--encre); padding: 0 2px; }
.colle-gn { display: inline-flex; align-items: flex-end; gap: 2px; max-width: 100%; min-width: 0; }
.colle-gn > .cadre-gn { min-width: 0; }
.ponct-gn { font-weight: 700; padding-bottom: 6px; }
.cadre-gn { position: relative; display: inline-flex; flex-direction: column; gap: 4px; border: 2px solid var(--accent-fonce); border-radius: 12px; padding: 4px 8px 8px; background: var(--accent-doux); max-width: 100%; }
.titre-cadre { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent-fonce); }
.morceaux { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.lien-gn { font-size: 1.3rem; font-weight: 700; line-height: 44px; margin-left: -4px; }
.morceau {
  display: inline-grid; gap: 2px; justify-items: start; text-align: left; min-height: 44px; padding: 6px 10px;
  border: 2px dashed var(--f-cc); border-radius: 10px; background: var(--surface); color: var(--encre); font-size: 1.02rem; line-height: 1.3; max-width: 100%;
}
.morceau:hover { border-color: var(--accent); }
.morceau-texte { font-weight: 600; overflow-wrap: anywhere; }
.morceau-etiquette { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre); background: var(--surface-2); border-radius: 6px; padding: 0 6px; }
.morceau[data-f="det"] { border-style: solid; border-color: #64748b; }
.morceau[data-f="noyau"] { border-style: solid; border-width: 3px; border-color: var(--f-sujet); }
.morceau[data-f="relative"] { border-color: var(--f-cod); }
.morceau[data-f="cdn"] { border-color: var(--f-coi); }
.morceau[data-f="apposition"] { border-style: dotted; border-width: 3px; border-color: var(--f-apposition); }
.morceau-fantome { position: fixed; z-index: 50; pointer-events: none; margin: 0; }
.palette-gn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px dashed var(--ligne); padding-top: 10px; }
.palette-gn .libelle { font-size: var(--t-s); color: var(--encre-2); }
.ajout-gn { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700; text-align: left; }
.ajout-gn:hover { background: var(--accent-doux); }
.ajout-gn[aria-disabled="true"] { opacity: 0.6; cursor: default; border-style: dashed; }
.resultat-gn, .resultat-tf { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); border-left-width: 5px; font-size: var(--t-s); display: grid; gap: 6px; line-height: 1.55; }
.resultat-gn { display: block; }
.resultat-gn[data-ton="bon"], .resultat-tf[data-ton="bon"] { border-left-color: var(--bon-fonce); }
.resultat-gn[data-ton="refus"], .resultat-tf[data-ton="refus"] { border-left-color: var(--faux-fonce); background: #fff8f7; }
.resultat-gn[data-ton="neutre"], .resultat-tf[data-ton="neutre"] { border-left-color: var(--accent); }
.resultat-tf p { margin: 0; }
.formule-gn { margin: 0; font-size: var(--t-s); color: var(--encre); }
.pastille-gn { display: inline-block; font-family: var(--f-mono); font-size: var(--t-xs); background: var(--surface); border: 1px solid var(--accent-fonce); color: var(--accent-fonce); border-radius: 999px; padding: 0 8px; margin-right: 4px; }

/* =================================================================
   TYPES ET FORMES DE PHRASE
   ================================================================= */
.courbe-tf { margin: 0; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ligne); border-radius: 14px; padding: 8px 10px 6px; }
.courbe-tf svg { display: block; width: 100%; height: 120px; } /* le dessin s'étire (preserveAspectRatio="none"), le trait garde son épaisseur */
.courbe-tf .axe { stroke: #8a94a6; stroke-width: 1.5; stroke-dasharray: 4 4; }
.cadre-courbe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.echelle-courbe { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); padding: 4px 0 6px; }
.courbe-tf .trace { fill: none; stroke: var(--accent-fonce); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.courbe-tf figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.phrase-tf { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 600; line-height: 1.4; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; }
.nom-etat { margin: 0; font-weight: 700; color: var(--accent-fonce); }
.leviers-tf { display: grid; gap: 10px; }
.choix-tf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.choix-tf .libelle { font-size: var(--t-s); color: var(--encre-2); min-width: 4.5em; }
.levier-tf { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700; }
.levier-tf:hover { background: var(--accent-doux); }
.levier-tf[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); }
.levier-tf.interrupteur[aria-pressed="true"]::before { content: "✓ "; }
.levier-tf.interrupteur[aria-pressed="false"]::before { content: "○ "; }
.levier-tf[aria-disabled="true"] { opacity: 0.6; cursor: default; border-style: dashed; }

/* =================================================================
   THÈME 2 : L'ASSEMBLEUR, LES POUPÉES RUSSES, LA RELATIVE
   Un cadre par proposition ; l'étage est écrit dans le cadre (« étage 2 ») et se lit aussi à la bordure (pleine,
   tiretée, pointillée, double) et au décalage vers le bas : jamais la couleur seule.
   ================================================================= */
.scene-as, .scene-pr, .scene-rel, .scene-qi, .scene-int, .scene-neg { padding: 16px var(--gouttiere) 24px; display: grid; gap: 14px; align-content: start; max-width: 980px; }
.contexte-as { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.atelier-as, .boite-pr { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--ligne); border-radius: 16px; padding: 12px; }
.depart-as { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.prop-depart { margin: 0; display: grid; gap: 2px; align-content: start; padding: 8px 12px; border: 2px solid #475569; border-radius: 10px; background: var(--surface); font-size: 1.05rem; flex: 1 1 13em; }
.prop-etiquette { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.prop-texte { font-weight: 600; }
.joint-as { min-height: 44px; padding: 8px 14px; border: 2px dashed #6b7280; border-radius: 10px; background: rgba(255, 255, 255, 0.8); color: var(--encre-2); font-weight: 700; font-size: var(--t-s); }
.en-glisser .zone-depot { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-fonce); }
.zone-depot.survolee { border-style: solid; background: #d4e0ff; }
.palette-as { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.palette-as .libelle, .compte-pr .libelle, .jauge-pr .libelle, .reste-pr .libelle, .seule-pr .libelle { font-size: var(--t-s); color: var(--encre-2); }
.jeton { min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700; font-size: 1rem; }
.jeton:hover { background: var(--accent-doux); }
.jeton.en-glisse { opacity: 0.35; }
.fantome-jeton { position: fixed; z-index: 50; pointer-events: none; margin: 0; box-shadow: 0 10px 28px rgba(20, 33, 61, 0.25); }
.jeton-pr { justify-self: start; border-radius: 10px; border-style: dashed; text-align: left; }
/* cadres emboîtés (js/vue-propositions.js) */
.phrase-props, .prop-corps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 5px; }
.phrase-props { font-size: 1.06rem; line-height: 1.4; }
.prop { display: inline-flex; flex-direction: column; gap: 3px; border: 2px solid #475569; border-radius: 10px; padding: 3px 7px 7px; background: var(--surface); max-width: 100%; min-width: 0; }
.prop-tete { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.prop[data-etage="1"] { border-style: dashed; border-color: var(--accent-fonce); background: #f3f6ff; margin-top: 1.1em; }
.prop[data-etage="2"] { border-style: dotted; border-width: 3px; border-color: var(--f-cod); background: #fbf5ff; margin-top: 1.1em; }
.prop[data-etage="3"] { border-style: double; border-width: 4px; border-color: var(--f-coi); background: #fff8ef; margin-top: 1.1em; }
.prop.choisie { outline: 3px solid var(--accent); outline-offset: 2px; }
.mot-p { white-space: nowrap; }
.lie-p { white-space: nowrap; }
.verbe-vu { text-decoration: underline double; text-underline-offset: 4px; font-weight: 700; }
.mot-liaison { font-weight: 800; background: var(--surligne); border-radius: 4px; padding: 0 3px; }
.place-x { display: inline-grid; place-items: center; min-width: 1.8em; border: 2px dashed var(--faux-fonce); border-radius: 6px; font-family: var(--f-mono); font-weight: 700; color: var(--faux-fonce); }
.colle-p { display: inline-flex; align-items: flex-end; gap: 2px; max-width: 100%; min-width: 0; }
/* l'arbre */
.arbre-as { margin: 0; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--ligne); border-radius: 14px; padding: 8px 10px; display: grid; gap: 6px; }
.arbre-dessin { overflow-x: auto; }
.arbre-svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.arbre-noeud rect { fill: #ffffff; stroke: #475569; stroke-width: 2; }
.arbre-noeud[data-etage="2"] rect { stroke: var(--accent-fonce); stroke-dasharray: 6 4; }
.arbre-noeud[data-etage="3"] rect { stroke: var(--f-cod); stroke-dasharray: 2 3; stroke-width: 3; }
.noeud-phrase rect { fill: var(--accent-doux); stroke: var(--accent-fonce); }
.arbre-etiquette { font: 700 12.5px var(--f-texte); fill: var(--encre); }
.arbre-texte { font: 12px var(--f-texte); fill: #4b5563; }
.arbre-arete { fill: none; stroke: #64748b; stroke-width: 2; }
.arbre-lien { stroke: var(--bon-fonce); stroke-width: 2.5; stroke-dasharray: 5 4; }
.arbre-mot { font: 700 12px var(--f-texte); fill: var(--bon-fonce); }
.arbre-as figcaption { font-size: var(--t-xs); color: var(--encre-2); }
/* résultats et questions */
.resultat-as, .resultat-pr { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ligne); border-left-width: 5px; font-size: var(--t-s); line-height: 1.55; }
.resultat-as[data-ton="bon"], .resultat-pr[data-ton="bon"] { border-left-color: var(--bon-fonce); }
.resultat-as[data-ton="refus"], .resultat-pr[data-ton="refus"] { border-left-color: var(--faux-fonce); background: #fff8f7; }
.resultat-as[data-ton="neutre"], .resultat-pr[data-ton="neutre"] { border-left-color: var(--accent); }
.relation-as, .nommer-pr, .etabli-pr, .etape-rel { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.relation-as h2, .nommer-pr h2, .etabli-pr h2, .etape-rel h2 { font-size: var(--t-l); font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; }
.choix-relation, .choix-nommer, .choix-compte { display: flex; flex-wrap: wrap; gap: 8px; }
.levier-pr, .choix-relation button { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700; text-align: left; }
.levier-pr:hover, .choix-relation button:hover { background: var(--accent-doux); }
.levier-pr[aria-disabled="true"], .choix-relation button[aria-disabled="true"], .candidat-rel[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.mini-pr { min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--accent-fonce); background: var(--surface); color: var(--accent-fonce); font-size: var(--t-xs); font-weight: 700; }
.mini-pr:hover { background: var(--accent-doux); }
.auteur-as { margin: 0; padding: 10px 14px; border-left: 4px solid var(--niv-lycee); background: #f1f0fd; border-radius: 6px; font-size: var(--t-s); }
.compte-pr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jauge-pr { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etage-jauge { font-family: var(--f-mono); font-size: var(--t-xs); padding: 0 8px; border: 1px solid #8a94a6; border-radius: 999px; background: var(--surface); color: var(--encre-2); }
.etage-jauge[data-etat="ouvert"] { border-color: var(--accent-fonce); color: var(--accent-fonce); font-weight: 700; }
.reste-pr, .seule-pr, .explication-rel { margin: 0; font-size: var(--t-s); }
/* la relative et sa flèche */
.deux-phrases { display: grid; gap: 8px; }
.phrase-depart { margin: 0; padding: 8px 12px; border: 2px solid #475569; border-radius: 10px; background: var(--surface); font-size: 1.08rem; }
.rep-rel { background: var(--surligne); border-bottom: 2px solid #8a6c0e; font-weight: 700; padding: 0 3px; border-radius: 3px; }
.ant-rel.vu { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 700; }
.obtenue-rel { position: relative; padding-top: 44px; }
.obtenue-rel:empty { display: none; }
.phrase-rel { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 2.5; }
.phrase-rel.incorrecte .rel-cadre { text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, 0.6); }
.rel-cadre { border: 2px dashed var(--accent-fonce); border-radius: 8px; padding: 2px 6px; background: #f3f6ff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rel-etiquette { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent-fonce); margin-right: 4px; }
.pro-rel { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.couche-fleche { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fleche-trait { fill: none; stroke: var(--bon-fonce); stroke-width: 2.5; }
.fleche-trait.brisee { stroke: var(--faux-fonce); }
.fleche-pointe { fill: none; stroke: var(--bon-fonce); stroke-width: 2.5; }
.fleche-croix { font: 800 18px var(--f-texte); fill: var(--faux-fonce); }
.candidat-rel { font: inherit; line-height: 1.4; border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--encre); padding: 0 6px; min-height: 32px; cursor: pointer; }
.candidat-rel:hover { background: var(--accent-doux); }
.candidat-rel.vu { background: var(--accent-doux); font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; }

/* =================================================================
   THÈME 2, SECONDE MOITIÉ : QUESTION INDIRECTE, TROIS VISAGES DE L'INTERROGATION, PORTÉE DE LA NÉGATION
   Marques surlignées ET en gras ; crochets de la négation dessinés par des traits verticaux ET écrits en gras ;
   ce qui est nié assombri, ce que « ne… que » garde éclairé, le préfixe d'une négation lexicale souligné de vagues :
   chaque style a sa légende écrite (jamais la couleur seule).
   ================================================================= */
.question-qi, .phrase-neg { margin: 0; padding: 10px 12px; border: 2px dashed #6b7280; border-radius: 10px; background: var(--surface); font-size: clamp(1.08rem, 2.3vw, 1.25rem); line-height: 1.9; }
.cadre-qi { font-weight: 700; color: var(--encre-2); }
.marque-qi { background: var(--surligne); font-weight: 700; border-bottom: 2px solid #8a6c0e; border-radius: 3px; padding: 0 2px; }
.t-euph { background: #fde68a; border-radius: 3px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }
.changements-qi { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; }
.changements-qi h2 { font-size: var(--t-l); font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; margin: 0 0 4px; }
.changements-qi ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-s); }
.libelle-temps, .portee-int .libelle { font-size: var(--t-s); color: var(--encre-2); align-self: center; }
.levier-pr[aria-pressed="true"], .levier-pr[aria-pressed="true"]:hover, .choix-relation .levier-pr[aria-pressed="true"], .choix-relation .levier-pr[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-encre); }
.levier-pr[aria-pressed="true"]::before { content: "✓ "; }
.bouton-verifier { justify-self: start; min-height: 44px; padding: 8px 18px; border-radius: 10px; border: 2px solid var(--accent-fonce); background: var(--accent); color: var(--accent-encre); font-weight: 700; }
.boite-int, .reco-int, .reco-neg, .leviers-int { display: grid; gap: 10px; }
.depart-int { margin: 0; font-size: 1.05rem; }
.questionne-int { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.portee-int { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.question-int, .phrase-reco-neg { margin: 0; font-size: clamp(1.12rem, 2.4vw, 1.32rem); font-weight: 600; line-height: 1.7; }
.jauge-int { margin: 0; padding: 10px 16px 8px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; display: grid; gap: 6px; }
.jauge-barre { position: relative; height: 56px; margin: 0 6px; }
.jauge-barre::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #cbd5e1, #64748b); }
.jauge-graduation { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); white-space: nowrap; }
.jauge-curseur { position: absolute; top: 34px; transform: translateX(-50%); font-size: 18px; line-height: 1; color: var(--accent-fonce); transition: left 0.45s ease; }
.jauge-int figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.verdict-int { display: grid; gap: 6px; }
.texte-neg { line-height: 2.1; }
.crochet-neg { font-weight: 800; border-left: 3px solid currentColor; border-right: 3px solid currentColor; border-radius: 2px; padding: 0 4px; margin: 0 1px; background: var(--surligne); color: var(--encre); }
.nie-neg { background: #3b4252; color: #ffffff; border-radius: 4px; padding: 1px 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nie-neg.crochet-neg { background: var(--surligne); color: var(--encre); }
.garde-neg { background: var(--surligne); color: var(--encre); font-weight: 700; outline: 2px solid #8a6c0e; border-radius: 3px; padding: 0 2px; }
.reste-neg { background: #e5e7eb; color: #4b5563; }
.reste-neg.crochet-neg { background: var(--surligne); color: var(--encre); }
.lexicale-neg { color: var(--niv-1re); font-weight: 800; text-decoration: underline wavy; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.legende-neg { margin: 6px 0 0; font-size: var(--t-xs); color: var(--encre-2); }
.leviers-neg { display: flex; flex-wrap: wrap; gap: 8px; }
.crochet-portee { font-weight: 800; font-size: 1.35em; line-height: 1; color: var(--accent-fonce); padding: 0 2px; }
.cible-neg { background: var(--accent-doux); color: var(--encre); border-bottom: 2px solid var(--accent-fonce); padding: 0 2px; }

/* =================================================================
   THÈME 3, PREMIÈRE MOITIÉ : LA MACHINE À CONJUGUER, LA FRISE DES TEMPS, PREMIER PLAN ET ARRIÈRE-PLAN
   Les morceaux d'une forme ont chacun leur bordure (radical pleine et épaisse, marque de temps tiretée, marque de
   personne pointillée, auxiliaire double) ET leur étiquette écrite ; la frise dit en toutes lettres ce que dessine la
   barre (ouverte, fermée « ✓ achevée », entre crochets « en entier ») ; les deux plans ont leur bordure (pleine et
   ombrée, ou tiretée et en retrait) ET leur étiquette : jamais la couleur seule.
   ================================================================= */
.scene-vb { padding: 16px var(--gouttiere) 24px; display: grid; gap: 14px; align-content: start; max-width: 980px; }
.cible-vb { margin: 0; font-size: 1.05rem; }
.cible-etiquette { color: var(--encre-2); }
.roues-vb, .curseurs-vb { display: flex; flex-wrap: wrap; gap: 10px; }
.roue-vb { display: inline-grid; grid-template-columns: auto minmax(5.5em, auto) auto; align-items: center; gap: 4px 6px; padding: 6px 8px; border: 2px solid #475569; border-radius: 12px; background: var(--surface); }
.curseurs-vb .roue-vb { grid-template-columns: auto auto; }
.roue-titre { grid-column: 1 / -1; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.roue-bouton { min-width: 44px; min-height: 44px; border-radius: 10px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700; }
.roue-bouton:hover { background: var(--accent-doux); }
.roue-valeur { font-weight: 700; text-align: center; font-size: 1.05rem; }
.interrupteur-vb, .levier-frise { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.machine-vb { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ligne); }
.boite-vb { display: inline-grid; gap: 2px; align-content: start; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 2px solid #475569; min-width: 3.2em; text-align: center; }
.boite-texte { font-family: var(--f-mono); font-size: 1.35rem; font-weight: 700; color: var(--encre); }
.boite-etiquette { font-size: var(--t-xs); color: var(--encre-2); }
.boite-pronom { border: 0; background: transparent; font-size: 1.35rem; font-weight: 700; align-self: start; padding: 8px 2px 0; min-width: 0; }
.boite-radical { border: 3px solid var(--f-sujet); }
.boite-radical.change { outline: 3px dashed var(--faux-fonce); outline-offset: 2px; }
.boite-temps { border: 2px dashed var(--f-cod); }
.boite-personne { border: 3px dotted var(--f-coi); }
.boite-vb.vide .boite-texte { color: var(--encre-2); }
.boite-aux { border: 4px double var(--f-cc); }
.boite-pp { border: 2px solid var(--f-attribut); }
.boite-soudee { border: 2px solid #475569; background: var(--surface-2); }
.forme-vb { flex-basis: 100%; margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; }
.nom-forme { font-weight: 400; font-size: var(--t-s); color: var(--encre-2); }
.radicaux-vb { margin: 0; font-size: var(--t-s); }
.radical-vb { font-family: var(--f-mono); padding: 0 4px; border-radius: 4px; }
.radical-vb.actuel { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: var(--accent-doux); }
.radical-vb.vu { font-style: italic; }
.radicaux-fin.colle { margin-left: -4px; }
.verifier-vb { display: flex; flex-wrap: wrap; gap: 8px; }
/* la frise */
.reserve-frise { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jeton-frise { border-radius: 10px; }
.jeton-frise[aria-pressed="true"], .verbe-jeton[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); }
.jeton-frise[aria-pressed="true"]::before, .verbe-jeton[aria-pressed="true"]::before { content: "✓ "; }
.frise-vb { position: relative; border: 1px solid var(--ligne); border-radius: 14px; background: rgba(255, 255, 255, 0.8); }
.frise-svg { display: block; width: 100%; height: auto; }
.zones-frise { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etiquettes-frise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.zone-bouton { min-height: 44px; padding: 6px 8px; border-radius: 10px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent-fonce); font-weight: 700; line-height: 1.25; }
.zone-bouton:hover { background: var(--accent-doux); }
.zone-bouton[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); }
.zone-bouton[aria-pressed="true"]::before { content: "✓ "; }
.zone-frise { border: 2px dashed transparent; border-radius: 12px; cursor: pointer; }
.zone-frise:hover, .en-glisser .zone-frise { border-color: var(--accent); background: rgba(234, 240, 255, 0.35); }
.zone-frise.occupee { border: 2px solid var(--accent-fonce); }
.zone-nom { font-weight: 800; font-size: var(--t-s); }
.frise-axe { stroke: #475569; stroke-width: 3; fill: none; }
.frise-maintenant { stroke: var(--encre); stroke-width: 4; }
.frise-repere { stroke: #64748b; stroke-width: 2; stroke-dasharray: 4 3; }
.frise-mot { font: 12px var(--f-texte); fill: #4b5563; }
.frise-mot.fort { font-weight: 700; fill: var(--encre); }
.barre-corps { fill: var(--accent-fonce); }
.barre-pointilles { stroke: var(--accent-fonce); stroke-width: 4; stroke-dasharray: 3 5; }
.barre-crochet { stroke: var(--encre); stroke-width: 3; fill: none; }
.barre-fin { stroke: var(--encre); stroke-width: 4; }
.tiretee .barre-corps { fill: var(--accent-doux); stroke: var(--accent-fonce); stroke-width: 2; stroke-dasharray: 6 4; }
.voie-imagine { fill: rgba(255, 255, 255, 0.7); stroke: var(--niv-1re); stroke-width: 2; stroke-dasharray: 8 5; }
.leviers-frise { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.phrase-frise { margin: 0; padding: 10px 12px; border: 2px solid #475569; border-radius: 10px; background: var(--surface); font-size: clamp(1.08rem, 2.3vw, 1.25rem); font-weight: 600; }
.verbe-frise { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.fiche-frise { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; }
.fiche-frise:empty { display: none; }
.temps-frise { margin: 0 0 4px; font-weight: 700; }
.aspect-frise { margin: 0; padding-left: 1.2em; font-size: var(--t-s); display: grid; gap: 2px; }
/* premier plan, arrière-plan */
.atelier-plan, .choisir-plan, .comparer-plan, .nuances-plan { display: grid; gap: 10px; }
/* interligne large : entre deux lignes, le doigt touche le texte (la page défile), pas un verbe à glisser */
.texte-plan { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; font-size: 1.05rem; line-height: 2.7; }
.paragraphe-plan { margin: 0 0 6px; }
.verbe-jeton { min-height: 28px; min-width: 0; padding: 0 10px; border-radius: 8px; font-size: 1rem; line-height: 1.4; vertical-align: baseline; }
.verbe-range { font-weight: 700; padding: 0 2px; }
.verbe-range.plan-premier { border-bottom: 3px solid var(--encre); }
.verbe-range.plan-arriere { border-bottom: 3px dotted #4b5563; }
/* les deux zones restent visibles en bas de l'écran pendant qu'on parcourt le texte (on peut toujours y glisser un verbe) */
.plans-vb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; position: sticky; bottom: 0; z-index: 3; padding: 8px 0; background: linear-gradient(rgba(250, 244, 232, 0), var(--scene-verbe-1) 14px); }
.zone-plan { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 88px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--encre); }
.zone-plan.plan-premier { border: 3px solid var(--encre); box-shadow: 0 6px 16px rgba(20, 33, 61, 0.18); }
.zone-plan.plan-arriere { border: 3px dashed #6b7280; background: #f3f4f6; }
.zone-desc { font-size: var(--t-xs); color: var(--encre-2); }
.zone-liste { font-size: var(--t-s); font-style: italic; }
.ligne-plan { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 2px dotted #94a3b8; transition: margin 0.35s ease, box-shadow 0.35s ease; }
.ligne-plan.plan-premier { border: 3px solid var(--encre); box-shadow: 0 8px 20px rgba(20, 33, 61, 0.18); }
.ligne-plan.plan-arriere { border: 2px dashed #6b7280; background: #f3f4f6; margin-left: 28px; }
.etiquette-plan { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); }
.phrase-plan { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.case-plan { font-family: var(--f-mono); color: var(--accent-fonce); background: var(--accent-doux); padding: 0 4px; border-radius: 4px; }
.verbe-plan { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.choix-plan { display: flex; flex-wrap: wrap; gap: 8px; }
.note-plan { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.liste-comparer { margin: 0; padding-left: 1.2em; font-size: var(--t-s); display: grid; gap: 4px; }
.liste-comparer:empty { display: none; }
.question-plan { margin: 0; font-weight: 700; }


/* =================================================================
   THÈME 3, SECONDE MOITIÉ : ACTIF ⇄ PASSIF, INDICATIF, SUBJONCTIF, IMPÉRATIF
   Chaque groupe a sa bordure (sujet pleine, COD pointillée, complément d'agent double, complément circonstanciel
   tiretée, verbe pleine et épaisse sur fond clair, COI et attribut avec leur couleur) ET son étiquette écrite (fonction ·
   rôle) ; dans le verbe passif, « être » est encadré et la marque d'accord du participe soulignée en double et écrite à
   part ; les attitudes des modes sont des boutons écrits. Jamais la couleur seule.
   ================================================================= */
.atelier-pa, .atelier-mo, .conj-mo { display: grid; gap: 12px; }
.phrase-pa { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--ligne); font-size: clamp(1.05rem, 2.3vw, 1.2rem); }
.groupe-pa { display: inline-grid; gap: 3px; justify-items: center; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 3px solid #475569; }
.groupe-texte { font-weight: 700; color: var(--encre); }
.groupe-etiquette { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); text-align: center; }
.groupe-pa.role-a, .groupe-pa.role-s, .groupe-pa.role-p.passif { border-style: solid; border-color: var(--f-sujet); }
.groupe-pa.role-p, .groupe-pa.role-o { border-style: dotted; border-color: var(--f-cod); }
.groupe-pa.role-p.passif { border-style: solid; border-color: var(--f-sujet); }
.groupe-pa.role-a.passif { border-style: double; border-width: 5px; border-color: var(--f-sujet); }
.groupe-pa.role-v { border-color: var(--f-verbe); border-width: 4px; background: #fff7f6; }
.groupe-pa.role-c { border-style: dashed; border-color: var(--f-cc); }
.groupe-pa.role-i { border-style: dashed; border-color: var(--f-coi); }
.groupe-pa.role-t { border-style: solid; border-width: 2px; border-color: var(--f-attribut); }
.aux-pa { padding: 0 4px; border: 2px solid var(--f-verbe); border-radius: 6px; }
.accord-pa { text-decoration: underline double; text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--faux-fonce); }
.ponct-pa { align-self: center; font-weight: 700; margin-left: -4px; }
.refus-pa { margin: 0; font-size: 1.05rem; }
.leviers-pa { display: grid; gap: 10px; }
.levier-pa { justify-self: start; min-height: 48px; padding: 10px 18px; border-radius: 12px; border: 3px solid var(--accent-fonce); background: var(--accent); color: var(--accent-encre); font-weight: 800; font-size: 1.05rem; }
.levier-pa[aria-pressed="true"] { background: var(--surface); color: var(--accent-fonce); border-style: double; border-width: 5px; }
.rangee-pa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.verbe-pa, .valeur-mo { margin: 0; font-size: var(--t-s); }
.cible-pa { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.zones-mo { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 8px; padding: 8px; border: 2px dashed #94a3b8; border-radius: 14px; background: rgba(255, 255, 255, 0.6); }
.en-glisser.zones-mo .zone-mo, .zone-mo.survolee { border-style: dashed; background: var(--accent-doux); }
.principale-mo { margin: 0; font-weight: 700; }
.palette-mo { display: flex; flex-wrap: wrap; gap: 8px; }
.bilan-mo { margin: 0; padding-left: 1.2em; font-size: var(--t-s); display: grid; gap: 2px; }
/* =================================================================
   THÈME 4, PREMIÈRE MOITIÉ : LA CHAÎNE DU GROUPE NOMINAL, LE SUJET ET LE VERBE À DISTANCE
   Un mot de la chaîne « allumé » a une bordure pleine et épaisse, un fond surligné, un repère « ● » et son étiquette
   écrite (« adjectif épithète · féminin pluriel ») ; un mot hors de la chaîne, une bordure tiretée, le repère « ○ » et
   l'étiquette « hors de la chaîne » ; la marque d'accord est soulignée deux fois et en gras. Le fil du verbe : plein avec
   une pointe (juste), brisé avec une croix écrite (piège), en pointillés (presque), et toujours décrit en mots sous la
   phrase. Jamais la couleur seule.
   ================================================================= */
.scene-ac, .scene-sv { padding: 16px var(--gouttiere) 24px; display: grid; gap: 14px; align-content: start; max-width: 980px; }
.atelier-ac, .boite-ac, .atelier-sv, .accord-sv { display: grid; gap: 10px; }
.interrupteurs-ac { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--ligne); }
.interrupteur-ac { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.interrupteur-ac .levier-pr[aria-disabled="true"] { border-style: dashed; }
.phrase-ac { margin: 0; padding: 12px; border: 2px solid #475569; border-radius: 12px; background: var(--surface); font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.5; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 6px; }
.maillon { display: inline-grid; justify-items: start; gap: 2px; min-height: 44px; padding: 4px 8px; border-radius: 10px; border: 2px solid #94a3b8; background: var(--surface); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.maillon:hover { border-color: var(--accent); }
.maillon-mot { font-weight: 700; }
.maillon-etiquette { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--encre-2); line-height: 1.3; }
.maillon.dans-chaine { border: 3px solid var(--ocre); background: var(--surligne); }
.maillon.dans-chaine .maillon-etiquette { color: var(--encre); }
.maillon.hors-chaine { border: 2px dashed #6b7280; background: #f3f4f6; }
.maillon.chaine-genre { border: 2px dotted var(--ocre); }
.marque-ac { text-decoration: underline double; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }
.maillon-simple { min-height: 44px; }
.maillon-casse { border: 3px solid var(--faux-fonce); }
.phrase-reparer .etoile, .phrase-reparer .pastille-faux { align-self: center; }
.resume-ac, .note-ac, .fils-sv { margin: 0; font-size: var(--t-s); }
.resume-ac { font-weight: 700; }
.note-ac { color: var(--encre-2); }
.phrase-juste { margin: 0; font-weight: 700; }
.phrase-relever { display: block; line-height: 2.6; }
.mot-releve { min-height: 32px; min-width: 24px; padding: 0 6px; border-radius: 8px; border: 2px solid #94a3b8; background: var(--surface); color: var(--encre); font: inherit; }
.mot-releve:hover { border-color: var(--accent); }
.mot-releve[aria-pressed="true"] { border: 3px solid var(--ocre); background: var(--surligne); font-weight: 700; }
.mot-releve[aria-pressed="true"]::before { content: "● "; }
.noyau-ac { padding: 0 6px; border-radius: 8px; border: 3px solid var(--encre); }
/* le sujet et le verbe */
.cadre-sv { position: relative; padding: 52px 12px 12px; border: 2px solid #475569; border-radius: 12px; background: var(--surface); }
.couche-sv { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ligne-sv { position: relative; margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 3.4; }
.groupe-sv { display: inline-grid; justify-items: start; gap: 0; vertical-align: middle; line-height: 1.3; text-align: left; font-weight: 600; color: var(--encre); border-color: #64748b; }
.groupe-sv.lie { border: 3px solid var(--bon-fonce); }
.groupe-sv.piege { border: 3px dashed var(--faux-fonce); background: #fff8f7; }
.etiquette-piege { color: var(--faux-fonce); font-weight: 700; }
.verbe-sv { display: inline-grid; justify-items: start; vertical-align: middle; line-height: 1.3; border-radius: 10px; }
.verbe-sv[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); }
.verbe-sv[aria-pressed="true"]::before { content: "✓ "; }
.verbe-sv.allume { border: 3px solid var(--bon-fonce); background: var(--surligne); color: var(--encre); }
.verbe-sv.allume .maillon-etiquette { color: var(--encre); }
.fil-sv { fill: none; stroke: var(--bon-fonce); stroke-width: 2.5; }
.fil-sv.brise { stroke: var(--faux-fonce); }
.fil-sv.presque { stroke: var(--ocre); stroke-dasharray: 2 5; }
.fil-pointe { fill: none; stroke: var(--bon-fonce); stroke-width: 2.5; }
.fil-croix { font: 800 18px var(--f-texte); fill: var(--faux-fonce); }
.faute-sv { margin: 0; font-size: var(--t-s); }
.phrase-trou { display: block; font-weight: 600; }

/* =================================================================
   THÈME 4, SECONDE MOITIÉ : OÙ EST LE COD ?, MES FAUTES
   Les places du COD sont des boutons (glisser doublé du toucher et du clavier) ; la place occupée est pressée (« ✓ ») et
   pleine ; le COD qu'on peut glisser a une bordure tiretée ; le participe accordé, sa marque soulignée deux fois. Dans
   « Mes fautes », le mot à accorder est un cadre pointillé « … », puis, juste, la chaîne s'allume avec ses étiquettes
   écrites (« ● donneur d'accord », « ● accordé avec … »). Jamais la couleur seule.
   ================================================================= */
.cadre-cod { display: grid; gap: 10px; padding: 10px 12px; border: 2px solid #475569; border-radius: 12px; background: var(--surface); }
.places-cod { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.place-cod { min-width: 9em; }
.place-cod[aria-pressed="true"] { border-width: 3px; background: var(--accent-doux); color: var(--accent-fonce); }
.place-cod[aria-pressed="true"]::before { content: "✓ "; }
.place-cod.survolee { background: var(--surligne); border-style: dashed; }
.phrase-cod { border: 0; padding: 4px 0; background: none; align-items: center; }
.maillon.jeton-cod { border-style: dashed; border-width: 3px; cursor: grab; }
.maillon.jeton-cod[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); }
.maillon.jeton-cod[aria-pressed="true"] .maillon-etiquette { color: var(--accent-encre); }
.maillon.jeton-cod[aria-pressed="true"] .maillon-mot::before { content: "✓ "; }
.manieres-cod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aucun-cod { display: flex; }
.aucun-bouton { display: inline-grid; justify-items: start; text-align: left; }
.aucun-bouton.lie { border: 3px solid var(--bon-fonce); }
.aucun-bouton.piege { border: 3px dashed var(--faux-fonce); background: #fff8f7; }
.aucun-bouton.survolee, .groupe-sv.survolee { background: var(--surligne); }
/* forme tolérée aux examens (arrêté du 28 décembre 1976) : ni « ✓ » ni « ✗ », une bordure double et le mot écrit */
.aucun-bouton.tolere, .groupe-sv.tolere { border: 4px double var(--ocre); background: #fffaf0; }
.etiquette-tolere { color: var(--ocre); font-weight: 700; }
.pastille-tolere { display: inline-block; font-size: var(--t-xs); font-family: var(--f-mono); color: #6b3d06; background: #fdf0d8; border: 1px dashed var(--ocre); border-radius: 999px; padding: 0 8px; }
.verdict-nom[data-ton="tolere"] { background: #fdf0d8; color: #6b3d06; border: 1px dashed var(--ocre); }
.phrase-tolere { margin: 0; font-weight: 700; }
/* Mes fautes : le donneur d'accord s'écrit comme le reste de la phrase tant que la bonne forme n'est pas trouvée */
.donneur-mf { display: inline-block; padding: 4px 0; }
.donneur-mf .maillon-mot { font-weight: inherit; } /* ni cadre ni gras : rien ne désigne le donneur avant la réponse */
.probleme-mf { border-left-color: var(--faux-fonce); background: #fff8f7; }
.probleme-mf p, .probleme-mf ul { margin: 0; }
.probleme-mf ul { padding-left: 1.2em; }
/* Mes fautes */
.liste-mf, .bilan-mf { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.erreur-mf { padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--surface); display: grid; gap: 4px; }
.case-mf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; cursor: pointer; font-weight: 700; }
.coche-mf { width: 24px; height: 24px; margin: 0; accent-color: var(--accent-fonce); flex: none; }
.faute-mf { margin: 0 0 0 34px; color: var(--encre-2); }
.revoir-mf, .compte-mf, .titre-erreur-mf { margin: 0; font-size: var(--t-s); }
.revoir-mf a { display: inline-block; min-height: 24px; padding: 3px 0; }
.titre-erreur-mf { font-weight: 700; }
.phrase-mf { align-items: center; }
.maillon-mf { cursor: default; }
.maillon-mf.cible-mf { border: 2px dotted var(--encre-2); min-width: 3em; }
.maillon-mf.dans-chaine { border: 3px solid var(--ocre); }
.titre-bilan-mf { margin: 8px 0 0; font-size: var(--t-m); }
.bilan-mf li { padding: 6px 10px; border-left: 4px solid var(--ligne); background: var(--surface); }
.detail-mf { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }

/* ---------- petits écrans ---------- */
@media (max-width: 980px) {
  .raccourcis { grid-template-columns: minmax(0, 1fr); }
  .accueil-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ecran.activite { overflow: auto; display: block; }
  .scene { overflow: visible; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .bouton-panneau { display: none; }
  .activite.sans-panneau .panneau { display: flex; }
  .choix-phrase { width: 100%; }
  .commandes .groupe:first-child, .commandes .groupe:first-child .liste { width: 100%; }
}
@media (max-width: 520px) {
  .app .barre { gap: 4px 8px; padding: 6px 12px; min-height: 0; }
  .app .barre .marque { font-size: 1rem; }
  /* le titre court sur téléphone : le titre complet reste lu par les lecteurs d'écran */
  .marque-longue { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .marque-courte { display: inline; }
  .app .barre nav { gap: 0; }
  .app .barre nav a { padding: 4px 6px; font-size: 0.82rem; }
  .app .choix-niveau { margin-left: auto; }
  .app .choix-niveau > button { padding: 3px 7px; min-height: 32px; font-size: 0.8rem; min-width: 0; }
  .commandes { padding: 8px 10px 10px; }
  .scene-blocs, .scene-leviers, .scene-gn, .scene-tf, .scene-as, .scene-pr, .scene-rel, .scene-qi, .scene-int, .scene-neg, .scene-vb, .scene-ac, .scene-sv { padding-left: 10px; padding-right: 10px; }
  .phrase-ac { padding: 8px; gap: 6px 4px; }
  .maillon { padding: 3px 6px; }
  .cadre-sv { padding: 48px 8px 8px; }
  .phrase-pa { padding: 8px; gap: 8px 4px; }
  .groupe-pa { padding: 4px 6px; }
  .zones-mo { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; }
  .roue-vb { grid-template-columns: auto minmax(4.6em, auto) auto; }
  .boite-vb { padding: 6px 8px; }
  .boite-texte, .boite-pronom { font-size: 1.15rem; }
  .ligne-plan.plan-arriere { margin-left: 14px; }
  .zone-plan { min-height: 64px; padding: 6px 8px; }
  .zone-plan .zone-desc { display: none; }
  .frise-mot { font-size: 19px; }
  .atelier-as, .boite-pr { padding: 10px 8px; }
  .prop { padding: 3px 5px 6px; }
  .boite-gn { padding: 10px 8px; }
  .morceau { font-size: 0.98rem; padding: 6px 8px; }
  .vue-blocs { padding: 10px 8px; }
  .bloc { font-size: 1rem; padding: 7px 10px; }
  .liste { flex-wrap: wrap; }
  .toast { border-radius: 16px; padding: 10px 14px; }
  .tableau th, .tableau td { padding: 5px 6px; }
}
/* téléphone et tablette : listes et champs à 16 px (Safari n'agrandit pas la page au toucher) */
@media (max-width: 860px), (pointer: coarse) {
  .app select, .app input:not([type=range]):not([type=checkbox]):not([type=radio]), .app textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .missions li.vient::before { animation: none; }
  .jauge-curseur { transition: none; }
  .ligne-plan { transition: none; }
  .quiz-progression span { transition: none; }
}

/* ---------- impression ---------- */
@media print {
  html, body, .app { height: auto; }
  body { background: #ffffff; }
  .app { display: block; }
  .ecran { position: static; }
  .ecran.activite, .ecran.page-texte, .accueil { display: block; overflow: visible; height: auto; }
  .colonne-scene { display: block; background: none; }
  .scene, .panneau { overflow: visible; }
  .panneau { border: 0; padding-top: 8px; }
  .commandes, .onglets, .bouton-panneau, .barre nav, .choix-niveau, .lien-portail, .toast, .bulle-mot, .abandon, .choix-module, .suite,
  .place, .aide-geste, .leviers, .choix-encadrer, .choix-fonctions, .raisonnement .bouton, .rediger .bouton,
  .palette-gn, .leviers-tf, .choix-tf, .palette-as, .compte-pr, .mini-pr, .choix-relation, .choix-nommer, .joint-as,
  .leviers-neg, .bouton-verifier, .portee-int,
  .roues-vb, .interrupteur-vb, .verifier-vb, .reserve-frise, .zones-frise, .etiquettes-frise, .leviers-frise, .choix-plan, .plans-vb,
  .leviers-pa, .zones-mo, .palette-mo, .interrupteurs-ac, .places-cod, .manieres-cod, .aucun-cod { display: none !important; }
  .plans-vb { position: static; }
  .boite-gn, .courbe-tf { background: none; }
  .vue-blocs { background: none; }
  .bloc { box-shadow: none; }
  .missions li, .plus-loin, .programme-niveaux, .carte, .tableau-tests, .raisonnement, .bilan-blocs, .boite-gn, .courbe-tf, .arbre-as, .boite-pr, .atelier-as, .machine-vb, .frise-vb, .ligne-plan, .phrase-pa, .fiche-pa, .fiche-mo, .phrase-ac, .cadre-sv, .cadre-cod, .erreur-mf { break-inside: avoid; }
  .plus-loin:not([open]) > div { display: block; }
  /* Chromium récent cache le contenu d'un <details> fermé par ::details-content : on l'affiche (js/app.js ouvre aussi
     tous les <details> le temps de l'impression) */
  details::details-content { content-visibility: visible; }
  :focus, :focus-visible { outline: none !important; box-shadow: none !important; }
}