/* ==========================================================================
   Mon Quiz — charte graphique
   Polices système uniquement : rien n'est chargé depuis l'extérieur.
   Tons papier et encre, contrastes doux, aucune couleur criarde.
   ========================================================================== */

:root {
  --papier: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f4f2ed;
  --surface-3: #eceae3;
  --encre: #262c31;
  --encre-douce: #5c666e;
  --encre-tres-douce: #8b959c;
  --trait: #e5e1d9;
  --trait-fort: #cec8bc;
  --accent: #4f6d62;
  --accent-clair: #e8efeb;
  --accent-sombre: #3b544b;
  --alerte: #99503f;
  --alerte-claire: #f7ece8;
  --or: #a98a3d;
  --argent: #8d959a;
  --bronze: #9a7048;

  --rayon: 12px;
  --rayon-s: 7px;
  --ombre: 0 1px 1px rgba(38, 44, 49, .04), 0 4px 14px rgba(38, 44, 49, .05);
  --ombre-haute: 0 -1px 0 var(--trait), 0 -8px 24px rgba(38, 44, 49, .06);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Couleurs d'équipes — sourdes, lisibles au vidéoprojecteur. */
  --eq-sauge: #4f6d62;
  --eq-bleu: #566878;
  --eq-argile: #9a6a51;
  --eq-prune: #6c597a;
  --eq-miel: #8d7130;
  --eq-brique: #96503f;
  --eq-ocean: #3e6280;
  --eq-mousse: #5b7840;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #17191b;
    --surface: #1f2325;
    --surface-2: #262b2e;
    --surface-3: #2e3437;
    --encre: #e8e5df;
    --encre-douce: #a9b1b6;
    --encre-tres-douce: #7d868c;
    --trait: #333a3e;
    --trait-fort: #454d52;
    --accent: #8fb3a5;
    --accent-clair: #243029;
    --accent-sombre: #a9c8bb;
    --alerte: #d3907f;
    --alerte-claire: #33241f;
    --or: #c2a25a;
    --argent: #a3abb0;
    --bronze: #b98d63;
    --ombre: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 14px rgba(0, 0, 0, .22);
    --ombre-haute: 0 -1px 0 var(--trait), 0 -8px 24px rgba(0, 0, 0, .3);

    --eq-sauge: #8fb3a5;
    --eq-bleu: #9db0be;
    --eq-argile: #cf9f87;
    --eq-prune: #b5a1c0;
    --eq-miel: #cbab5e;
    --eq-brique: #d28f7e;
    --eq-ocean: #8db0c7;
    --eq-mousse: #a6c27e;
  }
}

* { box-sizing: border-box; }

/* L'attribut hidden doit toujours l'emporter sur les display: des composants. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .4rem;
  letter-spacing: -.012em;
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-sombre); text-underline-offset: 3px; }

::selection { background: var(--accent-clair); }

/* --- Structure ---------------------------------------------------------- */

.enveloppe { max-width: 1120px; margin: 0 auto; padding: 0 1.15rem 6rem; }
.etroit { max-width: 440px; }
.moyen { max-width: 760px; }

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bandeau .dedans {
  max-width: 1120px; margin: 0 auto; padding: .6rem 1.15rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.marque {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: .005em;
}
.bandeau nav { display: flex; gap: .1rem; margin-left: auto; flex-wrap: wrap; }

.onglet {
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--encre-douce);
  padding: .35rem .7rem; border-radius: 100px; display: inline-flex; align-items: center; gap: .35rem;
  transition: background .12s ease, color .12s ease;
}
.onglet:hover { background: var(--surface-2); color: var(--encre); }
.onglet[aria-current="page"] { background: var(--accent-clair); color: var(--accent-sombre); font-weight: 600; }
.onglet.retour { padding-left: .3rem; }

.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 100px; background: var(--alerte); color: #fff;
  font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .pastille { color: #2a1a16; } }

section.vue { padding-top: 1.5rem; }
section.aere { padding-top: 2.6rem; }
.cache { display: none !important; }
li.cliquable { cursor: pointer; }

.entete-vue {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.entete-vue.serre { margin: 1.6rem 0 .7rem; align-items: center; }
.entete-vue h1, .entete-vue h2 { margin: 0; }
.entete-vue p { margin: .15rem 0 0; font-size: .92rem; }

.entete-carte {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap;
}
.entete-carte h2, .entete-carte h3 { margin: 0; }

/* --- Cartes ------------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--ombre);
  margin-bottom: .9rem;
}
.carte.plate { box-shadow: none; background: transparent; border-style: dashed; }
.grille-cartes { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.grille-champs { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.deux-colonnes { display: grid; gap: 1rem; grid-template-columns: minmax(260px, 340px) 1fr; align-items: start; }

.rangee { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.rangee.haut { align-items: flex-start; }
.rangee.fin { justify-content: flex-end; }
.rangee.serree { gap: .35rem; }
.rangee.centre-rangee { justify-content: center; }
.espace { flex: 1 1 auto; min-width: 0; }

.rangee > input[type="text"],
.rangee > input[type="number"],
.rangee > select { width: auto; flex: 1 1 10rem; min-width: 6rem; }
.rangee > input[type="checkbox"],
.rangee > input[type="radio"] { flex: 0 0 auto; width: auto; accent-color: var(--accent); }
.rangee > label { margin: 0; }
.rangee > select { max-width: 22rem; }
.rangee > input.mini { flex: 0 0 4.5rem; min-width: 4.5rem; }

/* --- Texte utilitaire --------------------------------------------------- */

.doux { color: var(--encre-douce); }
.mini { font-size: .85rem; }
.centre { text-align: center; }
.aide { font-size: .85rem; color: var(--encre-tres-douce); margin: .2rem 0 .6rem; }
.aide:last-child { margin-bottom: 0; }

.etat-vide {
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon);
  padding: 2.2rem 1.4rem;
  text-align: center;
  color: var(--encre-douce);
  display: grid; gap: .9rem; justify-items: center;
}

/* --- Formulaires -------------------------------------------------------- */

label { display: block; font-size: .84rem; color: var(--encre-douce); margin-bottom: .2rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
textarea, select {
  width: 100%;
  font: inherit;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-s);
  padding: .5rem .65rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover:not(:disabled), textarea:hover, select:hover { border-color: var(--encre-tres-douce); }
textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input::placeholder, textarea::placeholder { color: var(--encre-tres-douce); }
.champ { margin-bottom: .8rem; }
.code-saisie {
  font-family: var(--mono); font-size: 1.55rem; letter-spacing: .32em;
  text-align: center; text-transform: uppercase; padding: .65rem .4rem .65rem .72rem;
}

details.repli { margin-top: .8rem; border-top: 1px solid var(--trait); padding-top: .7rem; }
details.repli summary {
  cursor: pointer; color: var(--accent-sombre); font-size: .92rem;
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
details.repli summary::before { content: '+'; font-family: var(--mono); }
details.repli[open] summary::before { content: '–'; }
details.repli > form { margin-top: .8rem; }
details.repli.discrete { margin-top: 2.2rem; border-top-style: dashed; }
details.repli.discrete > summary { color: var(--encre-tres-douce); font-size: .88rem; }
details.repli.discrete[open] > summary { color: var(--accent-sombre); }

/* --- Boutons ------------------------------------------------------------ */

button, .bouton {
  font: inherit; cursor: pointer; border-radius: var(--rayon-s);
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
  padding: .45rem .85rem; display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover:not(:disabled), .bouton:hover { background: var(--surface-2); }
button:active:not(:disabled) { background: var(--surface-3); }
button:disabled { opacity: .45; cursor: not-allowed; }
.principal { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.principal:hover:not(:disabled) { background: var(--accent-sombre); border-color: var(--accent-sombre); }
@media (prefers-color-scheme: dark) { .principal { color: #10201a; } }
.discret { border-color: transparent; background: transparent; color: var(--encre-douce); }
.discret:hover:not(:disabled) { background: var(--surface-2); color: var(--encre); }
.danger { color: var(--alerte); }
.danger:hover:not(:disabled) { background: var(--alerte-claire); }
.large { width: 100%; justify-content: center; padding: .65rem; }

/* Barre d'actions collée en bas de l'écran, toujours accessible. */
.barre-actions {
  position: sticky; bottom: 0; z-index: 15;
  margin: 1.4rem -1.15rem 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--ombre-haute);
}
.barre-actions .dedans {
  max-width: 1120px; margin: 0 auto; padding: .7rem 1.15rem;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}

/* --- Étiquettes et jetons ----------------------------------------------- */

.etiquette {
  display: inline-block; font-size: .72rem; letter-spacing: .045em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 100px; border: 1px solid var(--trait-fort);
  color: var(--encre-douce); background: var(--surface-2); white-space: nowrap;
}
.etiquette.vert { color: var(--accent-sombre); background: var(--accent-clair); border-color: transparent; }
.etiquette.rouge { color: var(--alerte); background: var(--alerte-claire); border-color: transparent; }

.jeton {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .16rem .6rem .16rem .5rem; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--trait);
  font-size: .85rem;
}
.jeton-equipe {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--eq, var(--accent)); flex: 0 0 auto;
}

.eq-sauge { --eq: var(--eq-sauge); }
.eq-bleu { --eq: var(--eq-bleu); }
.eq-argile { --eq: var(--eq-argile); }
.eq-prune { --eq: var(--eq-prune); }
.eq-miel { --eq: var(--eq-miel); }
.eq-brique { --eq: var(--eq-brique); }
.eq-ocean { --eq: var(--eq-ocean); }
.eq-mousse { --eq: var(--eq-mousse); }

.minuteur {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; padding: .18rem .6rem; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--trait);
  color: var(--encre-douce);
}
.minuteur.urgent { color: var(--alerte); background: var(--alerte-claire); border-color: transparent; }

/* --- Listes ------------------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface);
  padding: .8rem 1rem; margin-bottom: .55rem;
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
}
.liste.compacte > li { padding: .5rem .7rem; margin-bottom: .35rem; border-radius: var(--rayon-s); }
.liste > li .titre { font-weight: 600; }
/* Les champs insérés dans une ligne de liste restent sur la même ligne. */
.liste > li > select,
.liste > li > input[type="text"] { width: auto; flex: 0 1 11rem; min-width: 7rem; }

.membres { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.membres li {
  font-size: .84rem; background: var(--surface-2); border-radius: 100px; padding: .1rem .55rem;
}

.grille-equipes { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.carte.equipe { margin: 0; padding: .8rem .85rem; box-shadow: none; }
.carte.equipe input { font-weight: 600; border-color: transparent; background: transparent; padding: .2rem .3rem; }
.carte.equipe input:hover, .carte.equipe input:focus { border-color: var(--trait-fort); background: var(--surface); }

.carte-code { position: sticky; top: 5rem; }

/* --- Classement --------------------------------------------------------- */

.classement { list-style: none; margin: 0; padding: 0; }
.classement li {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .7rem;
  padding: .5rem .6rem; border-bottom: 1px solid var(--trait);
}
.classement li:last-child { border-bottom: 0; }
.classement .rang { font-family: var(--mono); color: var(--encre-tres-douce); text-align: right; font-size: .9rem; }
.classement .score { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.classement li.moi { background: var(--accent-clair); border-radius: var(--rayon-s); border-bottom-color: transparent; }
.medaille { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
.medaille.or { background: var(--or); }
.medaille.argent { background: var(--argent); }
.medaille.bronze { background: var(--bronze); }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; align-items: end; margin: 1rem 0 1.2rem; }
.podium .marche {
  background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .85rem .6rem; text-align: center;
}
.podium .marche .nom { font-weight: 600; }
.podium .marche .pts { font-family: var(--mono); color: var(--encre-douce); font-size: .88rem; }
.podium .m1 { padding-bottom: 2.2rem; }
.podium .m2 { padding-bottom: 1.4rem; }
.podium .m3 { padding-bottom: .95rem; }

/* --- Activités ---------------------------------------------------------- */

.enonce { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; margin-bottom: 1rem; }
.choix { display: grid; gap: .45rem; }
.choix label {
  display: flex; gap: .6rem; align-items: flex-start; color: var(--encre);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-s);
  padding: .55rem .8rem; cursor: pointer; font-size: 1rem; margin: 0;
  transition: border-color .12s ease, background .12s ease;
}
.choix label:hover { background: var(--surface-2); }
.choix input { margin-top: .28rem; accent-color: var(--accent); }
.choix label.retenu { border-color: var(--accent); background: var(--accent-clair); }

.paires { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.paires .gauche { display: flex; align-items: center; min-height: 2.3rem; }

.ordre { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ordre li {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-s);
  padding: .45rem .65rem; background: var(--surface);
}
.ordre li .poignee { color: var(--encre-tres-douce); font-family: var(--mono); font-size: .85rem; }

.trous { font-size: 1.05rem; line-height: 2.3; }
.trous input {
  display: inline-block; width: auto; min-width: 5rem; padding: .15rem .45rem;
  border-width: 0 0 1px; border-radius: 0; background: transparent;
}
.trous input:focus-visible { outline-offset: 4px; }

.grille-croisee { display: grid; gap: 2px; justify-content: start; margin: .5rem 0 1.2rem; overflow-x: auto; }
.case-croisee { position: relative; width: 2.1rem; height: 2.1rem; }
.case-croisee input {
  width: 100%; height: 100%; text-align: center; text-transform: uppercase;
  font-family: var(--mono); font-size: 1rem; padding: 0; border-radius: 3px;
}
.case-croisee .num {
  position: absolute; top: 1px; left: 3px; font-size: .54rem;
  color: var(--encre-tres-douce); pointer-events: none; line-height: 1;
}
.case-noire { width: 2.1rem; height: 2.1rem; background: var(--surface-3); border-radius: 3px; }

.grille-melee { display: grid; gap: 1px; justify-content: start; user-select: none; overflow-x: auto; }
.grille-melee .l {
  width: 1.85rem; height: 1.85rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); border: 1px solid var(--trait); border-radius: 3px;
  background: var(--surface); cursor: pointer;
}
.grille-melee .l:hover { background: var(--surface-2); }
.grille-melee .l.sel { background: var(--accent-clair); border-color: var(--accent); }
.grille-melee .l.ok { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (prefers-color-scheme: dark) { .grille-melee .l.ok { color: #10201a; } }
.mots-a-trouver { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0; }
.mots-a-trouver span {
  border: 1px solid var(--trait-fort); border-radius: 100px; padding: .08rem .6rem; font-size: .88rem;
}
.mots-a-trouver span.trouve {
  text-decoration: line-through; color: var(--encre-tres-douce); border-color: var(--trait);
}

.pendu-mot { font-family: var(--mono); font-size: 1.7rem; letter-spacing: .18em; margin: 1rem 0 .4rem; }
.clavier { display: flex; flex-wrap: wrap; gap: .28rem; max-width: 440px; }
.clavier button { width: 2.15rem; justify-content: center; padding: .3rem 0; font-family: var(--mono); }
.clavier button.rate { opacity: .3; }
.clavier button.bonne { background: var(--accent-clair); border-color: var(--accent); opacity: 1; }

/* --- Retours et messages ------------------------------------------------ */

.retour {
  border-radius: var(--rayon-s); padding: .65rem .85rem; margin-top: 1rem;
  border: 1px solid var(--trait);
}
.retour.juste { background: var(--accent-clair); border-color: transparent; }
.retour.faux { background: var(--alerte-claire); border-color: transparent; }

.message { border-radius: var(--rayon-s); padding: .55rem .8rem; margin: .6rem 0; font-size: .92rem; }
.message.info { background: var(--surface-2); }
.message.erreur { background: var(--alerte-claire); color: var(--alerte); }
.message.succes { background: var(--accent-clair); color: var(--accent-sombre); }

#alertes {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 60;
  display: grid; gap: .4rem; width: min(92vw, 420px);
}
#alertes div {
  background: var(--encre); color: var(--papier); padding: .55rem .9rem;
  border-radius: var(--rayon-s); box-shadow: var(--ombre); font-size: .92rem;
}
#alertes div.erreur { background: var(--alerte); color: #fff; }

/* --- Progression et codes ----------------------------------------------- */

.jauge { height: 3px; background: var(--surface-2); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--trait-fort); width: 0; transition: width .3s ease; }

.code-affiche {
  font-family: var(--mono); font-size: 2.5rem; letter-spacing: .26em; line-height: 1.15;
  padding: .2rem 0 .2rem .26em; color: var(--encre);
}
.code-affiche.petit { font-size: 1.6rem; letter-spacing: .2em; }

.qr { background: #fff; padding: 9px; border-radius: var(--rayon-s); display: inline-block; border: 1px solid var(--trait); }
.qr canvas { display: block; image-rendering: pixelated; }

table.tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.tableau th, table.tableau td {
  text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--trait);
}
table.tableau tbody tr:last-child td { border-bottom: 0; }
table.tableau th {
  color: var(--encre-tres-douce); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .05em;
}
table.tableau td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Éditeur ------------------------------------------------------------ */

.activite {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); margin-bottom: .7rem; box-shadow: var(--ombre);
}
.activite > header {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem;
  border-bottom: 1px solid var(--trait); background: var(--surface-2);
  border-radius: var(--rayon) var(--rayon) 0 0; flex-wrap: wrap;
}
.activite > .corps { padding: .85rem .9rem; }
.activite .numero {
  font-family: var(--mono); color: var(--encre-tres-douce); font-size: .85rem;
  min-width: 1.2rem; text-align: right;
}
.sous-champ { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.sous-champ .retirer { padding: .25rem .5rem; }

.carte.modele h3 { margin-bottom: .1rem; }
.carte.modele { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.carte.modele .rangee { margin-top: auto; padding-top: .4rem; }

/* --- Projection --------------------------------------------------------- */

.projection { text-align: center; padding: 1.6rem 1rem; }
.projection .code-affiche { font-size: min(15vw, 5rem); }
.projection .enonce { font-size: min(4.6vw, 2rem); margin-bottom: 1.2rem; }
.projection-choix { max-width: 720px; margin: 0 auto; text-align: left; }
.projection .proposition {
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-s);
  padding: .5rem .9rem; font-size: min(3.2vw, 1.15rem);
}

/* --- Adaptation aux petits écrans --------------------------------------- */

@media (max-width: 900px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .carte-code { position: static; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .paires { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium .m1, .podium .m2, .podium .m3 { padding-bottom: .9rem; }
  .enveloppe { padding-bottom: 7rem; }
  .barre-actions .dedans { padding: .6rem .9rem; }
  .barre-actions .espace { display: none; }
  .bandeau nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .liste > li { padding: .7rem .8rem; }
  .code-affiche { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .bandeau, #alertes, .barre-actions, button, .bouton { display: none !important; }
  body { background: #fff; }
  .carte { box-shadow: none; border-color: #ccc; }
}

/* --- Import de questions ------------------------------------------------- */

.invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.liste-import { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; }
.question-import { margin: 0; }
.question-import textarea { font-family: var(--serif); font-size: 1rem; margin-bottom: .4rem; }
.question-import .choix { margin-top: .2rem; }
.question-import .numero {
  font-family: var(--mono); font-size: .8rem; color: var(--encre-tres-douce);
}