/* À LA DÉCOUVERTE DES SONS — feuille de style
   Même famille que « À la découverte des figures et des solides » (reprise et adaptée) : une barre en haut, puis un
   écran plein cadre. Écran d'activité : la scène à gauche (onglets au-dessus, commandes en dessous), le texte à droite.
   ../commun/scolatools.css, chargé après cette feuille, redéfinit les couleurs communes (fond, encre, accent bleu).
   Jamais la couleur seule : compressions et dilatations se voient à l'écart des traits, le niveau entendu a une barre
   graduée et un mot, les réponses des défis un signe ✓ ou ✗. Pas de thème sombre, comme le site. */
:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --ligne: #dfe5ee;
  --accent: #2f5fe0;
  --accent-fonce: #2569c2;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --bon: #16a34a;
  --bon-fonce: #11743a;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-fonce: #b42318;
  --faux-doux: #fee2e2;
  --or: #b8860b;
  --ocre: #9a5b0b;
  --bulle-fond: #1b2333;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.86);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.05), 0 8px 24px rgba(20, 33, 61, 0.07);

  /* scènes : l'air (tranches), la tranche suivie (rouge foncé, toujours nommée), le signal du micro (bleu) */
  --trait: #1f2937; --construction: #5b6b82; --quadrillage: #e3e9f1; --quadrillage-fort: #cdd7e4;
  --suivie: #b42318; --signal: #1d4ed8; --onde: #7c2d92;
  --principal: #2f5fe0; --principal-fonce: #2148b8;
  --or-ligne: #e1ad21;

  /* fonds des scènes, un par thème */
  --scene-son-1: #f6f8fc; --scene-son-2: #dfe7f3;
  --scene-hauteur-1: #f8f6fc; --scene-hauteur-2: #e6def2;
  --scene-timbre-1: #fcf8f1; --scene-timbre-2: #efe2cc;
  --scene-ondes-1: #f3f9f8; --scene-ondes-2: #d6ebe7;

  /* niveaux */
  --niv-c4: #0f766e; --niv-2de: #1d4ed8; --niv-1re: #7c2d92; --niv-tle: #9f1239; --niv-es: #9a4508;

  --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: 390px;
}

* { 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; }
/* refuge du focus pendant une animation (js/app.js) : le contour à l'intérieur de la zone, qui peut être rognée */
.scene:focus-visible, .commandes:focus-visible { outline-offset: -3px; border-radius: 0; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* commandes et blocs réservés à un niveau (data-niveau-min, voir js/app.js) */
.hors-niveau { display: none !important; }
/* texte lu par les lecteurs d'écran seulement ; ancré en haut à gauche de son bloc, il ne peut pas agrandir la page
   (placé à sa position naturelle, il dépassait du panneau qui défile et faisait défiler toute la page) */
.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; }
.chiffre { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
kbd { font-family: var(--f-mono); font-size: 0.85em; border: 1px solid var(--ligne); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface); }

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

/* ---------- ambiances des thèmes ---------- */
[data-fond] { --scene-1: var(--scene-son-1); --scene-2: var(--scene-son-2); }
[data-fond="hauteur"] { --scene-1: var(--scene-hauteur-1); --scene-2: var(--scene-hauteur-2); }
[data-fond="timbre"] { --scene-1: var(--scene-timbre-1); --scene-2: var(--scene-timbre-2); }
[data-fond="ondes"] { --scene-1: var(--scene-ondes-1); --scene-2: var(--scene-ondes-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);
}
.lien-portail:hover { color: var(--accent); border-color: var(--accent); }
.marque { font-family: var(--f-titre); font-weight: 760; font-size: var(--t-l); color: var(--encre); text-decoration: none; letter-spacing: -0.02em; }
.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); }
.barre nav a:hover { color: var(--encre); background: var(--surface-2); }
.barre nav a[aria-current="page"] { color: var(--accent-encre); background: var(--accent); }
.choix-niveau { margin-left: auto; align-items: center; }
.marque-courte { display: none; }
.choix-niveau .etiquette-niveau { font-size: var(--t-xs); color: var(--encre-2); margin-right: 6px; }
.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); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button.principal { background: var(--principal); border-color: var(--principal); color: #ffffff; font-weight: 700; }
.commandes button.principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
.commandes button:disabled, .bouton:disabled { opacity: 0.45; 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); }
/* Boutons pleins : l'accent #2f5fe0 (texte blanc à 5,5:1). ../commun/scolatools.css (chargé après) les peignait en
   #398cef (3,4:1) ; il emploie lui aussi #2f5fe0 depuis le 15 oct. 2026 : cette règle locale est désormais redondante,
   gardée par sécurité (même couleur, et le survol plus foncé de l'appli). */
.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); }
.petit-bouton {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 8px; padding: 3px 9px;
  font-size: var(--t-xs); line-height: 1.3; min-height: 28px;
}
.petit-bouton:hover { border-color: var(--accent); color: 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="c4"] { background: #ddf3f0; color: var(--niv-c4); }
.niv[data-n="2de"] { background: #e3ebfd; color: var(--niv-2de); }
.niv[data-n="1re"] { background: #f3e5f7; color: var(--niv-1re); }
.niv[data-n="tle"] { background: #fde4ea; color: var(--niv-tle); }
.niv[data-n="es"] { background: #fdf0dc; color: var(--niv-es); }
/* « prolongement » : notion au-delà du programme (bord en tirets et mot écrit, jamais la couleur seule) */
.niv.prolongement { background: #f1f2f4; color: #3f4652; border: 1px dashed #6b7280; line-height: 1.35; }

/* ---------- 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, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 62ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-fonce); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.3rem, 6vw, 4rem); 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 {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 10;
  background: radial-gradient(110% 90% at 50% 35%, var(--scene-son-1), var(--scene-son-2));
}
.accueil-dessin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.accueil-dessin .legende-dessin {
  position: absolute; z-index: 1; margin: 0; left: 12px; top: 10px; max-width: 34%; font-size: var(--t-xs); line-height: 1.35; color: var(--encre-2); pointer-events: none;
}
.citation {
  margin: 0; padding: 14px 18px; border-left: 4px solid var(--or-ligne); background: var(--surface); border-radius: 0 12px 12px 0; box-shadow: var(--ombre);
  display: grid; gap: 6px; max-width: 90ch;
}
.citation blockquote { margin: 0; font-family: var(--f-titre); font-size: var(--t-l); line-height: 1.4; color: var(--encre); }
.citation figcaption { font-size: var(--t-xs); color: var(--encre-2); }
.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); }
/* quatre thèmes : deux colonnes sur grand écran, une sur téléphone */
.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: 0; display: grid; gap: 2px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.liste-activites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-s); }
.liste-activites a { color: var(--accent-fonce); font-weight: 600; text-decoration: none; padding: 3px 0; }
.liste-activites a:hover { text-decoration: underline; }
.liste-activites .etoiles { font-size: var(--t-xs); }
.liste-activites .note-niveau { color: var(--encre-2); font-size: var(--t-xs); font-weight: 400; }
/* étoiles des missions : pleines (★) faites, creuses (☆) à faire — la forme, pas seulement la couleur ; les deux à plus
   de 4,5:1 sur le blanc (5,54:1 et 5,89:1, comme « À la découverte des marches ») */
.etoiles { letter-spacing: 1px; color: #8a6100; white-space: nowrap; }
/* étoiles des missions à faire : un repère graphique, au moins 3:1 sur le blanc (#e3e8f0 ne faisait que 1,23:1) */
.etoiles .vide { color: #5b6576; }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc h2 { font-size: var(--t-l); font-weight: 700; }
.bloc p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; transition: border-color 0.2s ease; }
.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; }
/* liens du pied de l'accueil : #1d4ed8 (6:1 sur le fond) au lieu de l'accent foncé commun (4,35:1) */
.app .credits a { color: #1d4ed8; }
.pied-panneau { margin: 0; font-size: var(--t-xs); color: var(--encre-2); border-top: 1px solid var(--ligne); padding-top: 12px; }

/* ---------- é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 minmax(0, 1fr) auto; 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) 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.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: hidden; }
.commandes {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px var(--gouttiere) 12px;
  background: var(--verre); border-top: 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; }
.commandes .libelle { color: var(--encre-2); font-size: var(--t-xs); }
.curseur { display: grid; grid-template-columns: auto minmax(90px, 160px) auto; gap: 8px; align-items: center; }
.curseur span:first-child { color: var(--encre-2); }
.curseur output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 4.5em; }
.curseur input { width: 100%; accent-color: var(--accent); min-height: 24px; margin: 0; } /* cible de 24 px au moins (le curseur seul en fait 16 : WCAG 2.5.8) */
.case { display: inline-flex; gap: 6px; align-items: center; }
.case input { accent-color: var(--accent); width: 18px; height: 18px; }

.panneau {
  position: relative; /* bloc conteneur de ses textes masqués : ils restent dans la zone qui défile */
  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); }
/* activité d'un thème qui commence après le niveau choisi (texte, pas seulement une couleur) */
.avis-niveau { margin: 0; padding: 8px 12px; border-left: 4px solid #b45309; border-radius: 8px; background: #fff7ed; color: #7c2d12; font-size: var(--t-s); }
.avis-niveau[hidden] { display: none; }
.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); animation: apparaitre 0.25s ease;
}
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent-fonce); }
.info p { margin: 0; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.encart:empty { display: none; }
.encart { display: grid; gap: 10px; }
.missions { display: grid; gap: 6px; }
.missions h2, .titre-mono { 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 #b7c2d3; margin-top: 1px; box-sizing: border-box;
}
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon); background: var(--bon); 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(--accent); padding-left: 10px; }
.texte p.niveau[data-n="2de"] { border-color: var(--niv-2de); }
.texte p.niveau[data-n="1re"] { border-color: var(--niv-1re); }
.texte p.niveau[data-n="tle"] { border-color: var(--niv-tle); }
.texte p.niveau[data-n="es"] { border-color: var(--niv-es); }
.texte p.niveau .niv { margin-right: 6px; vertical-align: 1px; }
.texte p.niveau.prolongement { border-left-style: dashed; border-left-color: #6b7280; }
.plus-loin > summary .niv + .niv { margin-left: 4px; }
.texte h3 { font-size: var(--t-m); font-weight: 700; margin-top: 4px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty, .plus-loin-boite:empty { display: none; }
.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; }
.savais blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--or-ligne); font-style: italic; }
.savais .source { font-size: var(--t-xs); color: var(--encre-2); }
.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);
}
.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; padding: 3px 0; } /* cible de 24 px au moins */
.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); }
.suite a:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

/* tableau des effectifs (encart du panneau) */
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau caption { text-align: left; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); padding-bottom: 6px; }
.tableau th, .tableau td { padding: 4px 6px; border-bottom: 1px solid var(--ligne); text-align: right; font-variant-numeric: tabular-nums; }
.tableau th:first-child, .tableau td:first-child { text-align: left; }
.tableau thead th { font-size: var(--t-xs); color: var(--encre-2); font-weight: 600; }
.tableau td { font-family: var(--f-mono); font-size: 0.82rem; }
.tableau td:first-child { font-family: var(--f-texte); font-size: var(--t-s); }
.tableau tr.suivie td { background: var(--accent-doux); }
.tableau tfoot td { font-weight: 700; border-bottom: 0; }
.pastille-couleur { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.25); }
.ligne-suivi { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.ligne-suivi strong { color: var(--encre); }

.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; }
.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; /* sans cela, « left: 50% » ne lui laisse que la moitié de l'écran sur téléphone */
  /* message seulement : le doigt et la souris passent au travers (défilement de la figure, boutons des commandes dessous) */
  pointer-events: none;
}
@media (max-width: 600px) {
  /* sur deux lignes ou plus, un rectangle aux coins arrondis plutôt qu'un grand ovale */
  .toast { border-radius: 16px; padding: 10px 14px; }
}
@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(:disabled) { border-color: var(--accent); }
.choix-defi:disabled { cursor: default; background: var(--surface-2); border-style: dashed; border-color: #a3adbd; } /* sans transparence : textes à au moins 4,5: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.or { background: #9c7a10; } .medaille.argent { background: #687480; } .medaille.bronze { background: #95582b; } .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); font-variant-numeric: tabular-nums; }
.quiz-entete .auto { color: var(--niv-3e); background: #fdf0dc; border-radius: 999px; padding: 0 8px; }
.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.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.3; }
.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(:disabled) { border-color: var(--accent); }
.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="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux-fonce); }
.quiz-choix button:disabled { cursor: default; }
.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: #9a3412; }

/* ---------- 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 > div:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
.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; }
.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; }

/* ---------- 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; }
  .choix-niveau { margin-left: 0; }
  .bouton-panneau { display: none; }
  .activite.sans-panneau .panneau { display: flex; }
}
@media (max-width: 860px) {
  /* téléphone et tablette : les commandes passent au-dessus de la scène, juste sous les onglets */
  .colonne-scene { display: flex; flex-direction: column; }
  .colonne-scene > .commandes { order: 1; border-top: 0; border-bottom: 1px solid var(--ligne); }
  .colonne-scene > .scene { order: 2; }
}
@media (max-width: 520px) {
  /* « .app » : plus précis que la barre commune (../commun/scolatools.css, chargée après cette feuille) */
  .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 8px; min-height: 30px; font-size: 0.82rem; }
  .curseur { grid-template-columns: minmax(0, 1fr) auto; }
  .curseur span:first-child { grid-column: 1 / -1; }
  .commandes { padding: 10px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .info, .toast, .missions li.vient::before { animation: none; }
  .quiz-progression span, .bloc-lien { transition: none; }
}



/* =================================================================
   PROPRE À « À LA DÉCOUVERTE DES SONS »
   ================================================================= */
.toast[data-ton="neutre"] { background: var(--accent-fonce); }
/* bouton « Couper le son » de la barre : l'icône change ET le texte (jamais l'icône seule) */
.bouton-son {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  border-radius: 999px; padding: 4px 12px 4px 9px; min-height: 34px; font-size: var(--t-s); font-weight: 600;
}
.bouton-son:hover { border-color: var(--accent); }
.bouton-son[aria-pressed="true"] { background: #fff3cd; border-color: #b7791f; color: #6b4f00; }
.icone-son path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone-son .hp { fill: currentColor; }
.bouton-son .croix { display: none; }
.bouton-son[aria-pressed="true"] .croix { display: inline; }
.bouton-son[aria-pressed="true"] .ondes { display: none; }

/* parcours de l'accueil */
.grille-parcours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.carte-parcours { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 14px; display: grid; gap: 8px; align-content: start; box-shadow: var(--ombre); }
.carte-parcours h3 { font-size: var(--t-l); font-weight: 720; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.carte-parcours p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte-parcours ol.liste-activites { padding-left: 1.4em; list-style: decimal; }
.carte-parcours ol.liste-activites li { display: list-item; }
.carte-parcours ol.liste-activites li > * { margin-right: 6px; }
.lien-defi { font-weight: 700; font-size: var(--t-s); color: var(--accent-fonce); display: inline-block; padding: 2px 0; } /* cible de 24 px au moins */

/* défis : jamais la couleur seule (signe ✓ ou ✗ devant la réponse) */
.titre-section-defis { font-size: var(--t-xl); margin-top: 6px; }
.quiz-choix button[data-ton="bon"]::before { content: "✓ "; font-weight: 700; }
.quiz-choix button[data-ton="faux"]::before { content: "✗ "; font-weight: 700; }
.savais .traduction { font-size: var(--t-s); }

/* ---------- scènes des activités (canvas) ---------- */
.scene-son {
  position: absolute; inset: 0; padding: 10px var(--gouttiere) 12px; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr) auto;
}
.scene-son.une-toile { grid-template-rows: minmax(0, 1fr) auto; }
.bloc-toile {
  position: relative; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(31, 41, 55, 0.12); box-shadow: var(--ombre);
}
.bloc-toile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legende-toile {
  position: absolute; left: 10px; top: 8px; margin: 0; font-size: var(--t-xs); color: var(--encre-2); pointer-events: none;
  background: rgba(255, 255, 255, 0.85); border-radius: 6px; padding: 1px 6px;
}
.lecture-son { margin: 0; font-size: var(--t-s); color: var(--encre); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; min-height: calc(2.9em + 6px); }
.lecture-son .m { font-family: var(--f-mono); font-weight: 600; white-space: nowrap; }
/* lignes de calcul longues (« Les décibels », « De plus en plus loin », « L'oreille ») : elles passent à la ligne */
.lecture-son .m.long { white-space: normal; }
.lecture-son .note { flex-basis: 100%; font-size: var(--t-xs); color: var(--encre-2); }
.lecture-son .etat-son { flex-basis: 100%; font-size: var(--t-xs); color: var(--encre); background: #fff3cd; border-left: 3px solid #b7791f; padding: 2px 8px; border-radius: 4px; }
.lecture-son .etat-son[hidden] { display: none; }

/* « La vitesse du son » : le chronomètre au centième, en grands chiffres (vidéoprojecteur) */
.commandes .chrono-affichage {
  font-family: var(--f-mono); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; min-width: 5.4em;
  text-align: right; padding: 0 10px; border: 2px solid #374151; border-radius: 8px; background: #ffffff; color: #1f2937;
}
.commandes .chrono-affichage.marche { border-style: dashed; }

/* niveau entendu : une barre de 5 graduations ET un mot */
.jauge-son { display: inline-flex; gap: 3px; align-items: flex-end; vertical-align: middle; margin: 0 4px; }
.jauge-son span { width: 9px; border: 1.5px solid #374151; border-radius: 2px; background: #ffffff; }
.jauge-son span:nth-child(1) { height: 8px; } .jauge-son span:nth-child(2) { height: 11px; } .jauge-son span:nth-child(3) { height: 14px; }
.jauge-son span:nth-child(4) { height: 17px; } .jauge-son span:nth-child(5) { height: 20px; }
.jauge-son span.pleine { background: #374151; }
.mot-niveau { font-weight: 700; }

.commandes .groupe-son { margin-left: auto; }
.commandes .curseur.volume { grid-template-columns: auto minmax(70px, 110px) auto; }
.commandes .note-commande { font-size: var(--t-xs); color: var(--encre-2); }

@media (max-width: 860px) {
  .scene-son { position: relative; inset: auto; grid-template-rows: auto auto auto; }
  .scene-son .bloc-toile.tube { height: min(42vh, 300px); min-height: 220px; }
  .scene-son .bloc-toile.trace { height: min(30vh, 220px); min-height: 170px; }
  .scene-son.une-toile .bloc-toile { height: min(58vh, 420px); min-height: 300px; }
  .commandes .groupe-son { margin-left: 0; }
}
@media (max-width: 520px) {
  .scene-son { padding: 10px 10px 12px; }
  .app .bouton-son { padding: 3px 8px; min-height: 30px; font-size: 0.82rem; }
  .lecture-son .m { white-space: normal; }
  .app .bouton-son .etiquette-son { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* thème 2 : « Mon micro » (deux tracés), choix du son d'exemple, avertissement sur l'audition */
.scene-son.micro { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; }
.commandes .choix-exemple { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; max-width: 100%; min-width: 0; }
.commandes .choix-exemple span { color: var(--encre-2); }
/* la taille du texte vient de la feuille (16 px au doigt, règle en fin de feuille) : pas de « font: inherit » ici */
.commandes .choix-exemple select { min-height: 34px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); font-family: inherit; max-width: 100%; min-width: 0; }
.commandes .avertissement { flex-basis: 100%; color: var(--encre); border-left: 3px solid #b7791f; padding-left: 8px; }
.lecture-son .detection { font-size: var(--t-m); }
@media (max-width: 860px) {
  .scene-son.micro .bloc-toile { height: min(34vh, 240px); min-height: 190px; }
  .scene-son .bloc-toile.axe-audition { height: min(64vh, 460px); min-height: 360px; }
}
@media print {
  .scene-son.micro .bloc-toile { height: 6cm; }
}

/* thème 2, seconde moitié : « L'oreille » (coupe et audiogramme), compteur de durée d'exposition */
.commandes .compteur-expo {
  font-family: var(--f-mono); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; min-width: 6.5em;
  text-align: center; padding: 0 10px; border: 2px solid #374151; border-radius: 8px; background: #ffffff; color: #1f2937;
}
@media (max-width: 860px) {
  .scene-son.oreille .bloc-toile { height: min(78vh, 600px); min-height: 480px; }
}

/* thème 3 : « Le timbre » (huit curseurs d'harmoniques, sur deux colonnes au téléphone) */
@media (max-width: 520px) {
  .commandes .groupe.harmoniques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; width: 100%; }
  .commandes .groupe.harmoniques .curseur { grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; }
  .commandes .groupe.harmoniques .curseur output { min-width: 2.6em; }
}

/* thème 3, seconde moitié : « Les gammes » (monocorde ou clavier de deux octaves) et « Numériser » (loupe et spectre) */
.scene-son.gammes .bloc-toile[hidden] { display: none; }
.bloc-clavier { display: flex; align-items: center; justify-content: center; padding: 14px 12px; }
.clavier { display: flex; width: 100%; max-width: 980px; height: min(100%, 240px); min-height: 180px; }
.clavier .rangee { position: relative; display: flex; flex: 7 1 0; min-width: 0; }
.clavier .rangee + .rangee { flex-grow: 8; }
.touche {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 6px 0 8px;
  font: inherit; cursor: pointer; border: 1.5px solid #374151; min-width: 0; overflow: hidden;
}
.touche.blanche { position: relative; flex: 1 1 0; background: #ffffff; color: #1f2937; border-radius: 0 0 8px 8px; margin-right: -1.5px; z-index: 1; }
.clavier .rangee .touche.blanche:last-child { margin-right: 0; }
.touche.noire { position: absolute; top: 0; height: 60%; background: #1f2937; color: #ffffff; border-radius: 0 0 6px 6px; z-index: 2; padding-bottom: 6px; gap: 4px; }
.touche .freq-touche { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-mono); font-size: 11.5px; white-space: nowrap; }
.touche .nom-touche { font-size: 12px; font-weight: 700; white-space: nowrap; }
.touche.noire .nom-touche { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; }
.touche.blanche.jouee { background: #dbeafe; }
.touche.noire.jouee { background: #1e3a8a; }
.touche:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; border-radius: 0 0 8px 8px; }
/* le contour du focus ne fait pas passer une touche blanche par-dessus les noires */
.touche.noire:focus-visible { z-index: 3; }
.scene-son.numeriser { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
.scene-son.numeriser .lecture-son { min-height: calc(5.8em + 6px); }
@media (max-width: 860px) {
  .scene-son.gammes .bloc-clavier { height: auto; min-height: 0; }
  .scene-son.numeriser { grid-template-rows: auto auto auto; }
  .clavier { height: 240px; }
}
@media (max-width: 560px) {
  .clavier { flex-direction: column; gap: 14px; height: auto; }
  .clavier .rangee { flex: none; height: 210px; }
}
@media print {
  .bloc-clavier { break-inside: avoid; }
  .clavier { height: 6cm; }
}

/* dessin de l'accueil */
.dessin-accueil { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc-tube { fill: rgba(47, 95, 224, 0.06); stroke: #5b6b82; stroke-width: 2; }
.acc-tranches line { stroke: #1f2937; stroke-width: 2; }
.acc-rouge { stroke: #b42318; stroke-width: 4; }
.acc-diapason { fill: none; stroke: #374151; stroke-width: 7; stroke-linecap: round; }
.acc-vibre { fill: none; stroke: #5b6b82; stroke-width: 2; }
.acc-micro { fill: #374151; }
.acc-trace { fill: none; stroke: #1d4ed8; stroke-width: 3; }
.acc-legende { font-family: var(--f-texte); font-size: 14px; fill: #1f2937; text-anchor: middle; }
.accueil-dessin .legende-dessin { top: auto; bottom: 10px; max-width: 60%; }

/* =================================================================
   MOUVEMENT RÉDUIT, IMPRESSION, CHAMPS SUR TÉLÉPHONE
   ================================================================= */
@media print {
  html, body { height: auto; background: #ffffff; }
  .app { display: block; height: auto; }
  .barre, .tete-scene, .commandes, .bouton-panneau, .toast, .bulle-mot, .choix-module, .suite, .raccourcis, .abandon, .quiz-actions { display: none !important; }
  main, .ecran { position: static; overflow: visible; }
  .ecran[hidden] { display: none !important; }
  .activite { display: block; }
  .colonne-scene { background: none; }
  .scene, .scene-son { position: relative; overflow: visible; }
  .scene-son .bloc-toile { height: 7cm; box-shadow: none; break-inside: avoid; }
  .scene-son.une-toile .bloc-toile { height: 10cm; }
  .panneau { border: 0; overflow: visible; padding: 0; }
  .plus-loin > div { display: grid !important; }
  .carte, .carte-parcours, .bloc, .question { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}

/* Écrans moyens en largeur (861 à 1 180 px, comme 1 024 × 768) : la colonne de la scène ne tient plus en hauteur quand
   les commandes et la lecture s'allongent (thème 4 : la figure tombait à quelques pixels). La scène garde au moins
   560 px de haut (la figure environ 300 px, la lecture dessous) et la colonne défile. */
@media screen and (min-width: 861px) and (max-width: 1180px) {
  .colonne-scene { grid-template-rows: auto minmax(560px, 1fr) auto; overflow-y: auto; }
}

/* Au doigt : les curseurs (24 px de haut ailleurs) offrent une cible de 32 px de haut, au-dessus des 24 px
   demandés (WCAG 2.5.8) ; les cases à cocher le sont déjà par leur étiquette (24 px de haut au moins). */
@media (pointer: coarse) {
  .curseur input[type=range] { min-height: 32px; }
}

/* Téléphones et tablettes : tous les champs de saisie et toutes les listes à 16 px au moins (en dessous, Safari sur
   iPhone et iPad agrandit la page dès qu'on touche le champ). Rien ne change sur ordinateur. */
@media (max-width: 860px), (pointer: coarse) {
  .app select, .app textarea, .app input:not([type=range]):not([type=checkbox]):not([type=radio]) { font-size: 16px; }
}

/* Accueil : l'illustration est à hauteur du titre, donc plus étroite (commun/scolatools.css) ; la légende passe sous
   le dessin au lieu de le recouvrir */
.accueil-dessin { aspect-ratio: auto; display: grid; gap: 2px; padding-bottom: 12px; }
.dessin-accueil { position: static; display: block; height: auto; }
.accueil-dessin .legende-dessin { position: static; max-width: none; padding: 0 14px; }