/* Le Défi calcul : les couleurs, les polices et la mise en page communes (reprises de la maquette).
   Les polices sont sur le site (aucun appel à Google) : Andika et Baloo 2, licence SIL Open Font License. */
@font-face { font-family: "Andika"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/andika-400.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/andika-700.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 400 800; font-style: normal; font-display: swap; src: url("../fonts/baloo2-variable.woff2") format("woff2"); }

:root {
  --bg: #F2F4F9;
  --surface: #FFFFFF;
  --ink: #1D2333;
  --muted: #4E5970;
  --line: #D4DBE8;
  --seyes-h: rgba(64, 104, 196, 0.13);
  --seyes-v: rgba(200, 64, 88, 0.16);
  --accent: #1F56B8;
  --on-accent: #FFFFFF;
  --accent-soft: #DCE7FA;
  --field: #FFFFFF;
  --ok: #17703A;
  --ok-bg: #DCF3E3;
  --err: #B3261E;
  --err-bg: #FCE3DF;
  --rev: #874800;
  --rev-bg: #FFE7C7;
  --gold: #C98A00;
  --gold-soft: #FFF1C9;
  --silver: #7E8A9E;
  --silver-soft: #EDF0F5;
  --bronze: #B0622A;
  --bronze-soft: #FBE8DA;
  --paper: #FFFBEF;
  --paper-ink: #2A2414;
  --b1: #FFDCE4;
  --b2: #FFEDAE;
  --b3: #D2EFE1;
  --b4: #D8E5FF;
  --b5: #E7DBFF;
  --b6: #FFDEC5;
  --shadow: 0 2px 0 rgba(29, 35, 51, 0.12), 0 8px 16px rgba(29, 35, 51, 0.08);
  --f-display: "Baloo 2", "Andika", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Andika", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151F; --surface: #1A2130; --ink: #EEF2F8; --muted: #AAB5CA; --line: #2F3A52;
    --seyes-h: rgba(140, 170, 255, 0.09); --seyes-v: rgba(255, 120, 140, 0.12);
    --accent: #8DB4FF; --on-accent: #0B1222; --accent-soft: #22324F; --field: #10151F;
    --ok: #74DD9C; --ok-bg: #12301F; --err: #FF9B90; --err-bg: #3B1713; --rev: #FFC47E; --rev-bg: #3A2710;
    --gold: #FFCF55; --gold-soft: #3A2F10;
    --silver: #C9D2E0; --silver-soft: #262D3B; --bronze: #E59A62; --bronze-soft: #3A2516;
    --paper: #262217; --paper-ink: #F4EBD2;
    --b1: #4A2532; --b2: #463A13; --b3: #163B2D; --b4: #1D2E52; --b5: #32264F; --b6: #4A301D;
    --shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; color: inherit; }

.page { max-width: 1000px; margin: 0 auto; padding-block: 16px 40px; padding-inline: 16px; display: flex; flex-direction: column; gap: 24px; }

/* ---------- Le cadre de l'activité (ce que montre ONE) ---------- */
.app {
  height: 640px; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
.ecran { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Pendant une partie, sur un écran moins haut que le cadre (petit téléphone, téléphone couché, zoom),
   le cadre prend la hauteur de l'écran : la barre du haut, les bulles et le bouton « Vérifier » restent visibles. */
.app.en-jeu { height: 640px; height: min(640px, calc(100vh - 32px)); height: min(640px, calc(100dvh - 32px)); min-height: 288px; }
.cahier {
  background-image:
    linear-gradient(var(--seyes-h) 1px, transparent 1px),
    linear-gradient(90deg, var(--seyes-v) 1px, transparent 1px);
  background-size: 100% 32px, 128px 100%;
}

/* Boutons */
.btn {
  min-height: 52px; min-width: 52px;
  padding: 10px 22px;
  border-radius: 14px;
  border: 2px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font-weight: 700; font-size: 18px; line-height: 1.2;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.btn:active { transform: translateY(2px); }
.btn-principal { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18); }
.btn-discret { border-color: var(--line); color: var(--muted); font-weight: 700; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Accueil ---------- */
.accueil { align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; }
.logo { height: 72px; width: auto; display: block; }
.titre { font-family: var(--f-display); font-weight: 800; font-size: clamp(38px, 8vw, 56px); line-height: 1; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.titre span { color: var(--accent); }
.etiquette { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 700; letter-spacing: 0.02em; }
.modes { display: flex; gap: 8px; padding: 4px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.mode { min-height: 52px; padding: 8px 20px; border-radius: 12px; border: 2px solid transparent; background: transparent; font-weight: 700; font-size: 18px; color: var(--muted); cursor: pointer; }
.mode[aria-pressed="true"] { background: var(--surface); border-color: var(--accent); color: var(--ink); box-shadow: var(--shadow); }
.mode-texte { margin: 0; max-width: 34ch; color: var(--muted); min-height: 3em; }
.regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; text-align: left; }
.regles li { display: flex; gap: 10px; align-items: baseline; }
.regles b { color: var(--accent); min-width: 1.2em; text-align: center; }

/* ---------- Jeu ---------- */
.barre { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 12px; border-bottom: 1px solid var(--line); }
.barre .logo-petit { height: 34px; width: auto; }
.barre .ou { font-weight: 700; font-size: 18px; white-space: nowrap; }
.barre .badge-mode { font-size: 16px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); font-weight: 700; white-space: nowrap; }
.barre .chrono { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; white-space: nowrap; }
.progres { height: 6px; background: var(--line); }
.progres i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 0.3s ease; }
.aire { flex: 1; min-height: 0; position: relative; overflow: hidden; }
/* Dernier recours (petit écran et longues écritures) : l'aire défile, la barre du bas reste libre. */
.aire.defile { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.aire .fond-defile { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* Quand l'aire défile : un bouton montre qu'il reste des bulles plus bas (et y descend si on le touche). */
.indice-defile {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  min-height: 48px; padding: 6px 18px; border-radius: 999px;
  border: 2px solid var(--accent); background: var(--surface); color: var(--accent);
  font-weight: 700; font-size: 16px; box-shadow: var(--shadow); cursor: pointer; white-space: nowrap;
}
.indice-defile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bulle {
  position: absolute;
  border-radius: 22px 16px 24px 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transform: rotate(var(--rot, 0deg));
  color: var(--ink);
}
.bulle.c1 { background: var(--b1); } .bulle.c2 { background: var(--b2); } .bulle.c3 { background: var(--b3); }
.bulle.c4 { background: var(--b4); } .bulle.c5 { background: var(--b5); } .bulle.c6 { background: var(--b6); }
.eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; font-weight: 700; font-size: 22px; line-height: 1.25; text-align: center; }
.eq input {
  /* largeur = la réponse la plus longue de la page (--car caractères) : aucune case ne trahit sa réponse */
  width: calc(var(--car, 3) * 0.56em + 22px); max-width: 100%; min-width: 48px; height: 48px;
  border: 2px dashed var(--muted); border-radius: 12px;
  background: var(--field); color: var(--ink);
  text-align: center; font-weight: 700; font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.eq input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-style: solid; border-color: var(--accent); }
.aire.compact .eq { font-size: 18px; }
.aire.compact .bulle { padding: 8px 8px; }
.aire.compact .eq input { width: calc(var(--car, 3) * 0.56em + 16px); font-size: 22px; }
.aire.serre .eq { font-size: 16px; gap: 2px 4px; line-height: 1.15; }
.aire.serre .bulle { padding: 6px 6px; }
.aire.serre .eq input { width: calc(var(--car, 3) * 0.56em + 14px); font-size: 20px; }

.pastille {
  position: absolute; top: -12px; right: -8px;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 30px; text-align: center;
  border: 2px solid currentColor; background: var(--surface);
}
.bulle.juste { background: var(--ok-bg); border-color: var(--ok); }
.bulle.juste .pastille { color: var(--ok); }
.bulle.juste input { border-style: solid; border-color: var(--ok); }
.bulle.faux { border-color: var(--err); }
.bulle.faux .pastille { color: var(--err); }
.bulle.faux input.barree { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--err); border-style: solid; border-color: var(--err); }
.bulle.reponse { background: var(--rev-bg); border-color: var(--rev); }
.bulle.reponse .pastille { color: var(--rev); }
.bulle.reponse input { border-style: solid; border-color: var(--rev); color: var(--rev); }
.bulle.vide { border-color: var(--err); border-style: dashed; }
.bulle.vide .pastille { color: var(--err); }
.secoue { animation: secoue 0.35s ease; }
@keyframes secoue {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateX(0); }
  25% { transform: rotate(var(--rot, 0deg)) translateX(-6px); }
  75% { transform: rotate(var(--rot, 0deg)) translateX(6px); }
}
.pied { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--line); min-height: 72px; }
.message { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.35; }

/* Panneaux posés par-dessus (quitter, infos parents) : jamais de fenêtre surgissante */
.panneau { position: absolute; inset: 0; z-index: 5; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 18px; text-align: center; }
.panneau p { margin: 0; max-width: 40ch; }
.panneau .gros { font-size: 20px; font-weight: 700; max-width: 26ch; }
.panneau ul { margin: 0; padding-left: 1.2em; text-align: left; max-width: 44ch; display: grid; gap: 4px; }
/* Le choix de l'école et du concours (version 0.9) : la liste défile dans le panneau s'il y a beaucoup de concours */
#choix-concours { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
#choix-concours > :first-child { margin-top: auto; }
#choix-concours > :last-child { margin-bottom: auto; }
.ce-partie { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 26rem); }
.ce-partie[hidden] { display: none; }
.ce-partie .champ { width: 100%; text-align: left; }
.ce-partie select { width: 100%; }
.ce-liste { display: grid; gap: 10px; width: 100%; }
.ce-liste .btn { width: 100%; white-space: normal; text-align: left; justify-content: flex-start; line-height: 1.25;
  padding-block: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ce-liste .btn small { font-weight: 400; color: var(--muted); font-size: 16px; }

/* ---------- Fin ---------- */
.fin { align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.fin h2 { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1.1; margin: 0; text-wrap: balance; }
.record { margin: 0; font-weight: 700; font-size: 20px; color: var(--accent); }
.score { font-family: var(--f-display); font-weight: 800; font-size: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
.score small { font-size: 26px; color: var(--muted); }
.temps { margin: 0; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.recompenses { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.carte { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); text-align: left; max-width: 320px; }
.carte svg { flex: none; }
/* Médailles (entrainement) et coupes (concours) : or, argent, bronze — toujours avec leur nom écrit */
.carte .metal { fill: var(--line); }
.carte.niveau-or { background: var(--gold-soft); border-color: var(--gold); }
.carte.niveau-argent { background: var(--silver-soft); border-color: var(--silver); }
.carte.niveau-bronze { background: var(--bronze-soft); border-color: var(--bronze); }
.carte.niveau-or .metal { fill: var(--gold); }
.carte.niveau-argent .metal { fill: var(--silver); }
.carte.niveau-bronze .metal { fill: var(--bronze); }
.carte-diplome { background: var(--accent-soft); border-color: var(--accent); }
.pop { animation: pop 0.5s ease; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Enregistrer ---------- */
.formulaire { padding: 16px 18px; gap: 10px; overflow: hidden; }
.formulaire h2, .classement h2, .ecran-code h2 { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0; }
/* le nom du concours du top 20 (version 0.9), sur une ligne */
.cl-concours { margin: 0; font-weight: 700; font-size: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rappel { margin: 0; color: var(--muted); }
.champ { display: grid; gap: 4px; }
.champ label { font-weight: 700; }
.champ input, .champ select {
  min-height: 48px; width: 100%; max-width: 360px;
  padding: 8px 12px; border-radius: 12px;
  border: 2px solid var(--muted); background: var(--field); color: var(--ink); font-size: 18px;
}
.aide { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.3; }
.erreur { margin: 0; color: var(--err); font-weight: 700; font-size: 16px; line-height: 1.3; }
.champ.en-erreur input, .champ.en-erreur select { border-color: var(--err); }
.grille3 { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formulaire .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ---------- Code ---------- */
.ecran-code { align-items: center; justify-content: center; gap: 14px; padding: 20px 18px; text-align: center; }
.code { font-family: var(--f-display); font-weight: 800; font-size: 52px; letter-spacing: 0.08em; padding: 6px 22px; border: 3px dashed var(--accent); border-radius: 16px; background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.ecran-code p { margin: 0; max-width: 36ch; }

/* ---------- Diplôme ---------- */
.ecran-diplome { align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; text-align: center; }
.diplome { width: 100%; max-width: 500px; background: var(--paper); color: var(--paper-ink); border: 4px double var(--gold); border-radius: 8px; box-shadow: var(--shadow); padding: 12px 18px 14px; display: grid; gap: 4px; justify-items: center; }
.diplome p { margin: 0; }
.diplome .logo-diplome { height: 46px; width: auto; }
.dip-sur { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 16px; }
.dip-titre { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 0; text-wrap: balance; }
.dip-niveau { font-weight: 700; font-size: 20px; }
.dip-faits { font-size: 16px; line-height: 1.35; max-width: 40ch; }
.dip-lignes { margin: 6px 0 0; width: 100%; max-width: 360px; display: grid; gap: 4px; text-align: left; }
.dip-lignes div { display: flex; gap: 8px; align-items: baseline; }
.dip-lignes dt { font-weight: 700; min-width: 4.5em; }
.dip-lignes dd { margin: 0; flex: 1; }
.dip-lignes dd.a-remplir { border-bottom: 2px dotted var(--paper-ink); min-height: 1.4em; }
.ecran-diplome .aide { min-height: 1.3em; max-width: 44ch; }

/* ---------- Mes diplômes ---------- */
#form-dip { display: grid; gap: 10px; align-content: start; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cases li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 12px; min-height: 52px; }
.cases li b { min-width: 5.5em; }
.cases li span { flex: 1; color: var(--muted); }
.cases li.obtenu { background: var(--gold-soft); border-color: var(--gold); }
.cases li.obtenu span { color: var(--ink); font-weight: 700; }
.cases .btn { min-height: 48px; padding: 6px 16px; font-size: 17px; }

/* ---------- Classement ---------- */
.classement { padding: 14px 16px 12px; gap: 8px; }
.onglets { display: flex; gap: 8px; flex-wrap: wrap; }
.onglet { min-height: 48px; padding: 6px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; color: var(--muted); cursor: pointer; }
.onglet[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.ta-place { margin: 0; font-weight: 700; color: var(--accent); min-height: 1.5em; line-height: 1.3; }
.tableau { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tableau table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th { text-align: left; font-size: 16px; color: var(--muted); font-weight: 700; padding: 2px 6px; border-bottom: 2px solid var(--line); }
.tableau td { padding: 3px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tableau td.pseudo { white-space: normal; overflow-wrap: anywhere; font-weight: 700; }
.tableau tr.moi td { background: var(--gold-soft); font-weight: 700; }
.tableau tr.moi td:first-child { box-shadow: inset 5px 0 0 var(--accent); }
.tableau .num { text-align: right; }
.classement .bas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.classement .bas .pages { display: flex; gap: 8px; }
.classement .bas .retour { margin-left: auto; }

/* ---------- Partie enseignant et page de Paul (hors du cadre ONE) ---------- */
.prof { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.prof section, .admin { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.prof h2, .admin h2 { font-family: var(--f-display); font-weight: 800; font-size: 22px; margin: 0 0 6px; }
.admin h3 { font-size: 18px; margin: 14px 0 6px; }
.prof p, .prof ul, .admin p { margin: 0 0 8px; }
.prof ul { padding-left: 1.2em; }
.outils { display: flex; gap: 8px; flex-wrap: wrap; }
/* Partager dans ONE */
.prof section.partage { grid-column: 1 / -1; }
.partage fieldset { border: 0; padding: 0; margin: 0 0 10px; display: flex; gap: 8px 18px; flex-wrap: wrap; }
.partage legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.partage .radio { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
.partage .radio input { width: 22px; height: 22px; accent-color: var(--accent); }
.partage .reglages { margin-bottom: 10px; }
.partage .sortie { display: grid; gap: 10px; }
.partage textarea, .partage input[readonly] {
  width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--muted);
  background: var(--field); color: var(--ink); font: 15px/1.4 ui-monospace, Menlo, Consolas, monospace; resize: vertical;
}
.partage .resume { font-weight: 700; }
.partage .champ input[readonly], .partage .reglages .champ select { max-width: none; }
.partage .reglages .champ select { width: auto; min-width: 120px; }
.legende { display: grid; gap: 8px; }
.legende div { display: flex; align-items: center; gap: 10px; }
.legende .ech { width: 44px; height: 30px; border-radius: 10px; border: 2px solid; display: grid; place-items: center; font-weight: 700; flex: none; }
.ech.e-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.ech.e-err { background: var(--b4); border-color: var(--err); color: var(--err); }
.ech.e-rev { background: var(--rev-bg); border-color: var(--rev); color: var(--rev); }
.note { color: var(--muted); }
.admin .defile { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 640px; }
.admin th, .admin td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin th { color: var(--muted); font-size: 16px; }
.admin tr.masque td { color: var(--muted); text-decoration: line-through; }
.admin tr.masque td.actions-admin { text-decoration: none; }
.admin .actions-admin { display: flex; gap: 8px; flex-wrap: wrap; }
.admin .btn { font-size: 16px; padding: 8px 14px; min-height: 48px; }
.reglages { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.reglages .champ input, .reglages .champ select { max-width: 200px; }
.journal { margin: 0; padding-left: 1.2em; color: var(--muted); }
.alerte { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--err); background: var(--err-bg); }
.admin .liste-ecoles { margin: 0 0 8px; padding-left: 1.2em; }
.admin table.petit { min-width: 0; max-width: 520px; }

/* ---------- Problème entre deux pages de calculs (étape 5) ---------- */
.barre .pb-pause[hidden] + .btn { margin-left: auto; }
.barre .chrono[hidden] + .btn { margin-left: auto; }        /* entraînement : pas de chrono, « Quitter » reste à droite */
.barre .pb-pause { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; white-space: nowrap; color: var(--muted); }
.ic-pause { fill: currentColor; flex: none; }
.pb-pause-court { display: none; }
.insec { white-space: nowrap; }
.prob { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 10px 14px; overflow: hidden; }
.prob.defile { overflow-y: auto; justify-content: flex-start; overscroll-behavior: contain; }
.pb-vue { flex: 1 1 0; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.pb-vue[hidden] { display: none !important; }
.prob.defile .pb-vue { flex: none; min-height: 0; overflow: visible; }
.pb-titre-pouce { margin: 0; flex: none; font-weight: 700; font-size: 17px; color: var(--accent); }
.pb-texte { flex: none; width: 100%; max-width: 36em; align-self: center; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); }
.pb-texte:focus { outline: none; }
.pb-texte:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pb-enonce, .pb-question { margin: 0; font-size: 20px; line-height: 1.4; }
.pb-question { font-weight: 700; margin-top: 6px; }
.mot-serie { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prob.nombres .nb { font-weight: 800; font-size: 1.15em; }
.pb-phrase { flex: none; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; text-align: center; text-wrap: balance; }
.pb-phrase input {
  width: calc(var(--car, 3) * 0.62em + 28px); min-width: 64px; max-width: 100%; height: 52px; margin: 2px 4px; vertical-align: middle;
  border: 2px dashed var(--muted); border-radius: 12px; background: var(--field); color: var(--ink);
  text-align: center; font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums;
}
.pb-phrase input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-style: solid; border-color: var(--accent); }
.pb-phrase.juste input { border-style: solid; border-color: var(--ok); background: var(--ok-bg); color: var(--ink); }
.pb-phrase.faux input { border-style: solid; border-color: var(--err); color: var(--err); text-decoration: line-through; text-decoration-thickness: 3px; }
.pb-phrase.reponse input { border-style: solid; border-color: var(--rev); background: var(--rev-bg); color: var(--rev); }
.pb-ecouter { flex: none; font-size: 22px; padding: 6px 12px; }
.pb-ecouter[aria-pressed="true"] { background: var(--accent-soft); }
.prob.compact { gap: 6px; padding: 8px 10px; }
.prob.compact .pb-enonce, .prob.compact .pb-question, .prob.compact .pb-phrase { font-size: 18px; }
.prob.compact .pb-texte { padding: 8px 10px; }
.prob.serre { gap: 4px; padding: 6px 8px; }
.prob.serre .pb-enonce, .prob.serre .pb-question, .prob.serre .pb-phrase { font-size: 16px; line-height: 1.3; }
.prob.serre .pb-texte { padding: 6px 8px; border-radius: 12px; }
.prob.serre .pb-phrase input { height: 48px; font-size: 22px; }
.prob.serre .pb-vue { min-height: 80px; }

/* La scène dessinée (palier 1) : la collection du problème, rangée par 5 */
.scene { --ic: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; max-width: 100%; }
/* avec une flèche ou un « + » : tout sur une ligne, sinon la flèche ne montre plus rien */
.scene.une-ligne { flex-wrap: nowrap; gap: 8px; }
.scene.empile { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.sc-groupe { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 12px; background: var(--bg); border: 2px solid var(--line); }
.sc-groupe.ajoute { border-style: dashed; border-color: var(--accent); }
.sc-legende { font-size: 15px; font-weight: 700; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.sc-signe { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.sc-icones { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--ic)); gap: 2px; }
.sc-ic { position: relative; display: block; width: var(--ic); height: var(--ic); }
.sc-ic img { display: block; width: 100%; height: 100%; }
.sc-ic.barre img { opacity: 0.42; }
.sc-ic.barre::after { content: ""; position: absolute; left: 4%; right: 4%; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: var(--err); transform: rotate(-38deg); }
.sc-lignes { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 8px; }
.sc-nom { font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap; }
.sc-ligne { padding: 4px 6px; border-radius: 10px; background: var(--bg); border: 2px solid var(--line); justify-self: start; }
.sc-boites { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sc-boite { padding: 4px; border-radius: 10px; border: 3px solid var(--muted); background: var(--surface); }
.sc-part { width: calc(var(--ic) * 1.2); height: calc(var(--ic) * 1.2); display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 3px dashed var(--accent); background: var(--surface); color: var(--accent); font-weight: 800; font-size: 20px; }
.sc-article { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-article .sc-ic { width: calc(var(--ic) * 1.6); height: calc(var(--ic) * 1.6); }
.sc-prix { padding: 0 10px; border-radius: 8px; border: 2px solid var(--gold); background: var(--gold-soft); color: var(--ink); font-weight: 800; font-size: 18px; white-space: nowrap; }
.sc-billet { width: calc(var(--ic) * 2.4); height: calc(var(--ic) * 1.25); display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 3px double var(--ok); background: var(--ok-bg); color: var(--ink); font-weight: 800; font-size: 20px; white-space: nowrap; }

/* L'image de l'objet (palier 2) */
.pb-image { width: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; height: 100%; max-height: 150px; min-height: 0; }
.pb-image img { height: 100%; max-height: 150px; width: auto; min-height: 0; max-width: 45%; object-fit: contain; }
.prob.defile .pb-image { height: 120px; }

/* Le coup de pouce : le schéma en barres */
.schema { display: block; flex: 0 1 auto; max-width: 100%; max-height: 100%; min-height: 0; }
.schema text { font-family: var(--f-body); font-weight: 700; fill: var(--ink); }
.sch-p1 { fill: var(--b4); stroke: var(--ink); stroke-width: 2; }
.sch-p2 { fill: var(--b2); stroke: var(--ink); stroke-width: 2; }
.sch-p3 { fill: var(--b3); stroke: var(--ink); stroke-width: 2; }
.sch-tout { fill: var(--b1); stroke: var(--ink); stroke-width: 2; }
.sch-q { fill: var(--surface); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 5; }
.sch-ecart { fill: var(--surface); stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 4; }
.schema text.sch-q-txt { fill: var(--accent); }
.schema text.sch-nom { fill: var(--muted); }
.sch-ligne { stroke: var(--muted); stroke-width: 2; fill: none; }
.sch-guide { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 4; fill: none; }
.sch-grille { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.sch-entete { fill: var(--accent-soft); stroke: var(--ink); stroke-width: 2; }
.sch-table-zone { max-width: 100%; overflow-x: auto; }
.sch-table { border-collapse: collapse; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface); }
.sch-table th, .sch-table td { border: 2px solid var(--ink); padding: 4px 12px; text-align: center; white-space: nowrap; }
.sch-table th { background: var(--accent-soft); font-size: 16px; white-space: normal; max-width: 9em; line-height: 1.2; }
.sch-table td.q { color: var(--accent); border: 3px dashed var(--accent); }
.sch-table td.aide { border-style: dotted; min-width: 48px; }

/* Outils de la maquette : choisir un problème à essayer */
.petit-choix { min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--muted); background: var(--field); color: var(--ink); max-width: 100%; }
.banc-pb { align-items: center; margin-top: 8px; }
.banc-pb select { min-width: 0; }
#t-modele { flex: 1 1 260px; }

@media (max-width: 520px) {
  .barre .badge-mode, .barre .logo-petit { display: none; }
  .barre { padding: 4px 6px 4px 12px; gap: 8px; }
  .barre .ou, .barre .chrono, .barre .pb-pause { font-size: 17px; }
  .pb-pause-long { display: none; }
  .pb-pause-court { display: inline; }
  .prob { padding: 8px 10px; }
  .pb-ecouter { padding: 6px 10px; }
  .pied { padding: 6px 8px 6px 12px; }
  .message { line-height: 1.3; }
  .btn { padding: 10px 14px; font-size: 17px; }
  .mode { padding: 8px 14px; }
  .aire.compact .bulle { padding: 6px 6px; }
  .aire.compact .eq { gap: 2px 4px; line-height: 1.1; }
  .logo { height: 60px; }
  .grille3 { grid-template-columns: 1fr; gap: 6px; }
  .formulaire { padding: 12px 14px; gap: 6px; }
  .formulaire h2, .classement h2, .ecran-code h2 { font-size: 24px; }
  .tableau td, .tableau th { padding: 2px 4px; }
  .tableau .col-temps { display: none; }
  .code { font-size: 40px; }
  .dip-titre { font-size: 24px; }
  .diplome { padding: 10px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .secoue, .pop { animation: none; }
  .progres i, .btn { transition: none; }
}

/* ---------- Ajouts de l'application ---------- */
img { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
/* La page montrée dans un cahier ONE (/cadre) : l'activité seule, sans marge, à la hauteur du cadre (640 px au plus) */
body.seul { background: var(--surface); }
body.seul .app, body.seul .app.en-jeu { height: 100vh; height: 100dvh; max-height: 640px; min-height: 288px; border-radius: 0; border: 0; }
/* sur un écran moins haut que l'accueil (téléphone couché, zoom), hors partie : la page s'allonge et défile */
body.seul .app:not(.en-jeu) { height: auto; min-height: 100vh; min-height: min(640px, 100dvh); max-height: none; }
/* Choisir sa classe (entrée générale, quand le lien ne donne pas le niveau) */
.niveaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 420px; }
.niveaux .btn { font-family: var(--f-display); font-size: 24px; font-weight: 800; }
.question { margin: 0; font-weight: 700; font-size: 20px; }
/* Page d'erreur */
.page-erreur .numero { font-family: var(--f-display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--accent); margin: 0; }
.lien-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; min-width: 52px; padding: 10px 22px; border-radius: 14px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 18px; text-decoration: none;
}
.texte-attente { margin: 0; max-width: 34ch; color: var(--muted); }
/* Partie enseignant : les sections l'une sous l'autre, des lignes de texte pas trop longues */
.prof { grid-template-columns: minmax(0, 1fr); }
.prof section > p, .prof section > ul, .bloc-contenu > p, .bloc-contenu > ul { max-width: 72ch; }
.prof li + li { margin-top: 2px; }
.contenu .reglages { margin: 4px 0 10px; }
.contenu .reglages .champ select { width: auto; max-width: 100%; min-width: 120px; }
.bloc-contenu { border-top: 1px solid var(--line); padding-top: 8px; }
.bloc-contenu h3 { font-family: var(--f-display); font-weight: 800; font-size: 20px; margin: 0 0 6px; }
.bloc-contenu h4 { font-size: 17px; margin: 12px 0 2px; }
.prof .series { list-style: none; padding-left: 0; }
.prof a { color: var(--accent); text-underline-offset: 3px; }
.prof .version { margin: 0; }
.partage select:disabled { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.espace-haut { margin-top: 6px; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* ---------- La page de Paul (6b-6) ---------- */
.page-admin { gap: 16px; }
.page-admin h1 { font-family: var(--f-display); font-weight: 800; font-size: 28px; margin: 0; }
.tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nav-admin { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 10px 0 6px; }
.nav-admin a { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 12px; border-radius: 12px;
  border: 2px solid var(--line); color: var(--accent); font-weight: 700; text-decoration: none; }
.nav-admin a:focus-visible, .nav-admin a:hover { border-color: var(--accent); }
.messages-admin { display: grid; gap: 8px; }
.message-admin { margin: 0; padding: 10px 14px; border-radius: 12px; border: 2px solid; font-weight: 700; }
.message-admin.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ink); }
.message-admin.erreur { border-color: var(--err); background: var(--err-bg); color: var(--ink); }
.formulaire-admin { display: grid; gap: 12px; justify-items: start; margin: 4px 0 10px; }
.formulaire-admin.reglages { display: flex; }
.choix-admin { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.choix-admin legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.admin .radio { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.admin .radio input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.admin .champ-large input { max-width: 420px; width: 100%; }
.admin .champ-large { flex: 1 1 260px; }
.admin .etat { color: var(--muted); font-weight: 400; }
.admin td.pseudo { font-weight: 700; overflow-wrap: anywhere; }
.admin td.num, .admin th.num { text-align: right; }
.admin code { font-size: 17px; letter-spacing: 0.06em; }
/* Les concours (version 0.9) : le formulaire montre seulement ce qui sert (manuel ou automatique, écoles cochées) ;
   sans :has() (navigateurs anciens), tout reste visible et le formulaire marche pareil */
.form-concours:has(input[name="mode"][value="auto"]:checked) .si-manuel,
.form-concours:has(input[name="mode"][value="manuel"]:checked) .si-auto,
.form-concours:has(input[name="ecoles_toutes"][value="oui"]:checked) .cases-ecoles { display: none; }
.form-concours .si-manuel, .form-concours .si-auto, .form-concours .cases-ecoles { padding-left: 32px; }
.form-concours .si-auto .note { max-width: 62ch; }
.admin .cases { display: flex; flex-wrap: wrap; gap: 0 18px; }
.admin .cases-ecoles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 18px; }
.admin .liste-concours { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.admin .carte-concours { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
  align-content: start; min-width: 0; }
.admin .carte-concours h3 { margin: 0; overflow-wrap: anywhere; }
.admin .carte-concours.ferme h3 { color: var(--muted); }
.admin .carte-concours dl { margin: 0; display: grid; gap: 2px; }
.admin .carte-concours dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; }
.admin .carte-concours dt { color: var(--muted); }
.admin .carte-concours dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.admin .etat-concours { margin: 0; }
.admin .etat-concours.etat-ouvert { font-weight: 700; }
.code-neuf { border: 3px dashed var(--accent); background: var(--accent-soft); border-radius: 16px; padding: 12px 16px; margin: 0 0 12px; }
.code-neuf p { margin: 0 0 4px; }
.code-neuf .code { display: inline-block; font-size: 40px; margin: 4px 0 8px; }
.fiche-prete { border-top: 1px solid var(--line); padding-top: 10px; }
.zone-danger { border: 2px solid var(--err); border-radius: 14px; padding: 12px 14px; }
.btn-danger { border-color: var(--err); color: var(--err); }
.btn-danger:hover, .btn-danger:focus-visible { background: var(--err-bg); }
.journal li { margin: 2px 0; }
.journal .quand { font-variant-numeric: tabular-nums; }
.connexion { max-width: 520px; }
.connexion .champ input { max-width: 320px; }
/* ---------- Infos parents et mentions (6b-7) ---------- */
:lang(ar) { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif; }
:lang(zh-Hans) { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; }
.panneau-parents { gap: 10px; overflow-y: auto; justify-content: flex-start; }
/* centré quand il y a la place ; sinon il défile depuis le haut (rien d'inaccessible au-dessus) */
.panneau-parents > :first-child { margin-top: auto; }
.panneau-parents > :last-child { margin-bottom: auto; }
.langues-panneau { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lang { min-height: 48px; min-width: 48px; padding: 4px 12px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.lang[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.texte-parents { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.texte-parents[hidden] { display: none; }
.panneau .texte-parents[dir="rtl"] ul { text-align: right; padding-left: 0; padding-right: 1.2em; }
.courriel { display: inline-block; font-weight: 700; white-space: nowrap; unicode-bidi: isolate; direction: ltr; user-select: all; }
.page-texte { max-width: 820px; }
.tete-texte { display: flex; align-items: center; gap: 10px; }
.titre-site { font-family: var(--f-display); font-weight: 800; font-size: 24px; margin: 0; }
.langues { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.langues a { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 14px; border-radius: 12px;
  border: 2px solid var(--line); color: var(--accent); font-weight: 700; text-decoration: none; }
.langues a:hover, .langues a:focus-visible { border-color: var(--accent); }
.langues .imprimer { margin-left: auto; }
section.langue { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; scroll-margin-top: 12px; }
section.langue h1 { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
section.langue:lang(ar) h1, section.langue:lang(zh-Hans) h1 { font-family: inherit; }
section.langue h2 { font-size: 19px; margin: 16px 0 4px; }
section.langue p, section.langue ul { max-width: 70ch; margin: 0 0 8px; }
section.langue ul { padding-left: 1.2em; }
section.langue[dir="rtl"] ul { padding-left: 0; padding-right: 1.2em; }
section.langue li + li { margin-top: 4px; }
.page-texte a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pied-texte { color: var(--muted); }
.liens-bas { margin: 0; color: var(--muted); }
@media print {
  .langues, .imprimer { display: none !important; }
  body, section.langue { background: #fff !important; color: #000 !important; }
  section.langue { border: 0; padding: 0; }
  section.langue + section.langue { break-before: page; }
}
.liens-bas a { display: inline-flex; align-items: center; min-height: 48px; color: var(--accent); text-underline-offset: 3px; }
.page-texte a[href^="mailto:"] { white-space: nowrap; overflow-wrap: normal; }

/* Page de Paul : la fiche d'un pseudo (« Voir ou corriger un pseudo »), le rappel du 31 juillet */
.fiche-joueur { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.fiche-joueur h3 { margin: 6px 0 0; }
.fiche-joueur th[scope=row] { text-align: left; font-weight: 700; padding-right: 12px; white-space: nowrap; }
.rappel-admin a { font-weight: 700; }
.reglages .champ select#k-choix { width: min(100%, 26rem); max-width: 100%; }
.reglages .champ select#v-concours { width: min(100%, 24rem); max-width: 100%; }