/* =========================================================
   Jeux de mémoire — feuille de styles
   Principes : texte ≥ 22 px, interligne 1,5, contraste ≥ 7:1,
   cibles ≥ 56 px, aucune information portée par la seule couleur.
   ========================================================= */

:root {
  --echelle: 1;
  --fond: #f6f3ec;
  --carte: #ffffff;
  --texte: #1b1b1b;
  --texte-doux: #3b3b3b;
  --bord: #6b6b6b;
  --bord-leger: #c9c4b8;
  --primaire: #0a4f8a;
  --primaire-fonce: #073a66;
  --primaire-clair: #e2edf8;
  --sur-primaire: #ffffff;
  --succes: #1b6631;
  --succes-clair: #dcf1e1;
  --attention: #8a3700;
  --attention-clair: #fdebdc;
  --accent: #a66a00;
  --accent-clair: #fff3d6;
  --focus: #c2410c;
  --ombre: 0 2px 6px rgba(0, 0, 0, 0.12);
  --rayon: 14px;
  --cible: 3.6rem;
  /* Couleurs de jeu (Simon, Mastermind…) : toujours accompagnées d'un symbole */
  --jeu-rouge: #c62828;
  --jeu-vert: #2e7d32;
  --jeu-bleu: #1565c0;
  --jeu-jaune: #f9a825;
  --jeu-violet: #6a1b9a;
  --jeu-orange: #e65100;
  --jeu-rose: #ad1457;
  --jeu-cyan: #00838f;
  color-scheme: light;
}

html[data-taille="2"] { --echelle: 1.2; }
html[data-taille="3"] { --echelle: 1.4; }

html[data-contraste="eleve"] {
  --fond: #000000;
  --carte: #000000;
  --texte: #ffffff;
  --texte-doux: #ffffff;
  --bord: #ffffff;
  --bord-leger: #ffffff;
  --primaire: #ffe600;
  --primaire-fonce: #ffe600;
  --primaire-clair: #333300;
  --sur-primaire: #000000;
  --succes: #7dff8a;
  --succes-clair: #003b0a;
  --attention: #ffb37d;
  --attention-clair: #4a1f00;
  --accent: #ffe600;
  --accent-clair: #333300;
  --focus: #00e5ff;
  --ombre: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(22px * var(--echelle));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Verdana, Arial, "Helvetica Neue", sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 0.8rem; }
strong { font-weight: 700; }

a { color: var(--primaire); }

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--carte);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.lien-evitement:focus { left: 1rem; }

[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--carte);
  border-bottom: 3px solid var(--bord-leger);
}

.logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texte);
  text-decoration: none;
  margin-right: auto;
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.navigation a, .profil-courant {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--cible);
  padding: 0 0.9rem;
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid transparent;
}

.navigation a:hover, .profil-courant:hover { background: var(--primaire-clair); }
.navigation a[aria-current="page"] {
  background: var(--primaire);
  color: var(--sur-primaire);
}

.profil-courant {
  border-color: var(--bord-leger);
  background: var(--fond);
}

.avatar-mini { font-size: 1.4rem; }

.bandeau {
  background: var(--attention-clair);
  color: var(--texte);
  border-bottom: 3px solid var(--attention);
  padding: 0.7rem 1rem;
  font-weight: 600;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
  outline: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--cible);
  min-width: var(--cible);
  padding: 0.4rem 1.2rem;
  border-radius: var(--rayon);
  border: 3px solid var(--primaire);
  background: var(--carte);
  color: var(--primaire);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  user-select: none;
}
.btn:hover { background: var(--primaire-clair); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primaire { background: var(--primaire); color: var(--sur-primaire); }
.btn-primaire:hover { background: var(--primaire-fonce); }
.btn-secondaire { background: var(--carte); }
.btn-succes { background: var(--succes); border-color: var(--succes); color: #fff; }
html[data-contraste="eleve"] .btn-succes { color: #000; }
.btn-discret { border-color: var(--bord-leger); color: var(--texte); }
.btn-grand { font-size: 1.2rem; min-height: 4.4rem; padding: 0.6rem 1.8rem; }
.btn-icone { padding: 0.4rem 0.8rem; }

.ligne-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1rem;
}
.ligne-boutons.centre { justify-content: center; }

/* ---------- Conteneurs ---------- */

.panneau {
  background: var(--carte);
  border: 2px solid var(--bord-leger);
  border-radius: var(--rayon);
  padding: 1.2rem;
  box-shadow: var(--ombre);
  margin-bottom: 1.2rem;
}

.pile > * + * { margin-top: 1rem; }

.texte-doux { color: var(--texte-doux); }
.centre { text-align: center; }

.titre-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1.2rem;
}
.titre-page h1 { margin: 0; }

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

label { font-weight: 700; display: block; margin-bottom: 0.4rem; }

input[type="text"], input[type="number"], select, .saisie {
  font: inherit;
  font-size: 1.1rem;
  min-height: var(--cible);
  padding: 0.4rem 0.8rem;
  border: 3px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  width: 100%;
  max-width: 24rem;
}

.interrupteur {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--cible);
  cursor: pointer;
  font-weight: 600;
  margin: 0;
}
.interrupteur input {
  width: 2rem;
  height: 2rem;
  accent-color: var(--primaire);
  flex: none;
}

.groupe-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.groupe-choix .btn[aria-pressed="true"] {
  background: var(--primaire);
  color: var(--sur-primaire);
}

/* ---------- Profils ---------- */

.grille-profils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}

.carte-profil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 10rem;
  padding: 1rem;
  border: 3px solid var(--bord-leger);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--ombre);
}
.carte-profil:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.carte-profil .avatar { font-size: 3.2rem; line-height: 1; }
.carte-profil.ajout { border-style: dashed; color: var(--primaire); }

.choix-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.8rem, 1fr));
  gap: 0.5rem;
  max-width: 34rem;
}
.choix-avatars button {
  font-size: 2rem;
  min-height: 3.8rem;
  border: 3px solid var(--bord-leger);
  border-radius: var(--rayon);
  background: var(--carte);
  cursor: pointer;
}
.choix-avatars button[aria-pressed="true"] {
  border-color: var(--primaire);
  background: var(--primaire-clair);
  outline: 3px solid var(--primaire);
}

/* ---------- Accueil ---------- */

.resume-jour {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.resume-jour .panneau { margin: 0; }

.jauge {
  height: 1.2rem;
  border-radius: 1rem;
  background: var(--fond);
  border: 2px solid var(--bord);
  overflow: hidden;
  margin: 0.5rem 0;
}
.jauge > span {
  display: block;
  height: 100%;
  background: var(--succes);
}

.bascule-visuels {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
.bascule-visuels .groupe-choix { gap: 0; }
.bascule-visuels .btn { border-radius: 0; }
.bascule-visuels .btn:first-child { border-radius: var(--rayon) 0 0 var(--rayon); }
.bascule-visuels .btn:last-child { border-radius: 0 var(--rayon) var(--rayon) 0; border-left-width: 0; }

.chiffre { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }

.categorie { margin-bottom: 2rem; }
.categorie > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.categorie > header h2 { margin: 0; }

.grille-jeux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.carte-jeu {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 3px solid var(--bord-leger);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
  box-shadow: var(--ombre);
  min-height: 11rem;
}
.carte-jeu:hover { border-color: var(--primaire); }
.carte-jeu .icone { font-size: 2.6rem; line-height: 1; }
.carte-jeu .nom { font-weight: 700; font-size: 1.1rem; }
.carte-jeu .description { color: var(--texte-doux); font-size: 0.9rem; flex: 1; }
.carte-jeu .infos { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; font-weight: 600; }

.pastille {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 1rem;
  background: var(--accent-clair);
  border: 2px solid var(--accent);
  color: var(--texte);
  font-size: 0.85rem;
  font-weight: 700;
}

.jeu-du-jour {
  display: flex;
  flex-direction: row;
  min-height: 0;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-color: var(--accent);
  background: var(--accent-clair);
}
.jeu-du-jour .icone { font-size: 3rem; }
.jeu-du-jour > span:last-child { flex: 1 1 12rem; min-width: 0; }

.etoiles { color: var(--accent); font-size: 1.15em; letter-spacing: 0.05em; white-space: nowrap; }

/* ---------- Écran de jeu ---------- */

.consigne {
  font-size: 1.05rem;
  border-left: 8px solid var(--primaire);
}

.choix-niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.6rem;
}
.choix-niveaux .btn { flex-direction: column; gap: 0; min-height: 4.6rem; padding: 0.3rem; }
.choix-niveaux .btn .etoiles { font-size: 0.8rem; }
.choix-niveaux .btn[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); }
.choix-niveaux .btn[aria-pressed="true"] .etoiles { color: var(--sur-primaire); }

.barre-jeu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.barre-jeu h1 { font-size: 1.3rem; margin: 0 auto 0 0; }

.compteur {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.8rem;
  min-height: 2.4rem;
  border-radius: 2rem;
  border: 2px solid var(--bord-leger);
  background: var(--carte);
  font-weight: 700;
}

.zone-jeu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.message {
  min-height: 2.8rem;
  width: 100%;
  max-width: 44rem;
  padding: 0.5rem 1rem;
  border-radius: var(--rayon);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  border: 3px solid transparent;
}
.message:empty { visibility: hidden; }
.message.info { background: var(--primaire-clair); border-color: var(--primaire); }
.message.succes { background: var(--succes-clair); border-color: var(--succes); }
.message.erreur { background: var(--attention-clair); border-color: var(--attention); }

/* Plateau générique : style="--colonnes: 4" */
.plateau {
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr));
  gap: var(--ecart, 0.6rem);
  width: 100%;
  max-width: var(--largeur-max, 42rem);
}

.tuile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0;
  border: 3px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: var(--taille-tuile, 2.2rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.15s, background-color 0.15s;
}
.tuile:hover:not([disabled]) { border-color: var(--primaire); }
.tuile.selection { background: var(--primaire-clair); border-color: var(--primaire); outline: 4px solid var(--primaire); outline-offset: -1px; }
.tuile.correct { background: var(--succes-clair); border-color: var(--succes); }
.tuile.incorrect { background: var(--attention-clair); border-color: var(--attention); }
.tuile.cachee { background: var(--primaire); color: var(--sur-primaire); }
.tuile.vide { visibility: hidden; }
.tuile[disabled] { cursor: default; }
.tuile.retrouvee { opacity: 0.55; }

/* Choix de réponses */
.choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.7rem;
  width: 100%;
  max-width: 44rem;
}
.btn-choix {
  min-height: 4rem;
  font-size: 1.1rem;
  text-align: center;
  white-space: normal;
}
.btn-choix.correct { background: var(--succes-clair); border-color: var(--succes); color: var(--texte); }
.btn-choix.incorrect { background: var(--attention-clair); border-color: var(--attention); color: var(--texte); }
/* La réponse donnée reste parfaitement lisible une fois les choix désactivés. */
.btn-choix.correct[disabled], .btn-choix.incorrect[disabled] { opacity: 1; }

.grand-texte {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.enonce {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  max-width: 44rem;
}

.lettres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.lettre {
  width: 3.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bord);
  border-radius: 10px;
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.lettre.vide { border-style: dashed; color: var(--texte-doux); }
.lettre[disabled] { opacity: 0.35; cursor: default; }

/* ---------- Fin de partie ---------- */

.fin-partie { text-align: center; }
.fin-partie .grand-icone { font-size: 4rem; line-height: 1.1; }
.fin-partie .etoiles { font-size: 3rem; display: block; margin: 0.4rem 0; }
.liste-bilan { list-style: none; padding: 0; margin: 1rem auto; max-width: 34rem; }
.liste-bilan li { padding: 0.5rem 0.8rem; border-radius: var(--rayon); margin-bottom: 0.4rem; background: var(--fond); font-weight: 600; }

/* ---------- Progrès ---------- */

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.grille-stats .panneau { margin: 0; text-align: center; }

.graphique { width: 100%; height: auto; display: block; }
.graphique text { fill: var(--texte); font-family: inherit; }
.graphique .axe { stroke: var(--bord); stroke-width: 2; }
.graphique .grille { stroke: var(--bord-leger); stroke-width: 1; stroke-dasharray: 4 4; }
.graphique .courbe { fill: none; stroke: var(--primaire); stroke-width: 4; stroke-linejoin: round; }
.graphique .point { fill: var(--carte); stroke: var(--primaire); stroke-width: 3; }
.graphique .barre { fill: var(--primaire); }

.tableau-jeux { width: 100%; border-collapse: collapse; }
.tableau-jeux th, .tableau-jeux td { text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--bord-leger); }
.tableau-jeux th { font-size: 0.9rem; }
.defilement-horizontal { overflow-x: auto; }

.grille-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.8rem;
}
.badge {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem;
  border-radius: var(--rayon);
  border: 2px solid var(--accent);
  background: var(--accent-clair);
}
.badge .icone { font-size: 2.2rem; }
.badge.verrouille { border-color: var(--bord-leger); background: var(--fond); }
.badge.verrouille .icone { filter: grayscale(1); opacity: 0.45; }
.badge .nom { font-weight: 700; }
.badge .desc { font-size: 0.85rem; color: var(--texte-doux); }

/* ---------- Modales et notifications ---------- */

.modale {
  border: 3px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  padding: 1.4rem;
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}
.modale::backdrop { background: rgba(0, 0, 0, 0.55); }

.toasts {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 50;
  width: min(30rem, calc(100vw - 2rem));
}
.toast {
  background: var(--texte);
  color: var(--fond);
  padding: 0.8rem 1.2rem;
  border-radius: var(--rayon);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---------- Animations ---------- */

@keyframes apparition { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes secousse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.anim-apparition { animation: apparition 0.25s ease-out; }
.anim-secousse { animation: secousse 0.3s; }

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

/* ---------- Petits écrans ---------- */

@media (max-width: 640px) {
  html { font-size: calc(19px * var(--echelle)); }
  main { padding: 0.8rem 0.7rem 2rem; }
  .entete { padding: 0.5rem 0.7rem; }
  .logo { font-size: 1rem; }
  .navigation { width: 100%; order: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
  .navigation a { flex-direction: column; justify-content: center; gap: 0; padding: 0.2rem; font-size: 0.8rem; text-align: center; line-height: 1.2; }
  .barre-jeu h1 { width: 100%; }
  .panneau { padding: 0.9rem; }
  .grand-texte { font-size: 1.6rem; }
}

/* Palettes des salons : le contraste élevé garde toujours la priorité. */
html[data-theme="1950"]:not([data-contraste]) { --fond: #f4ede1; --primaire: #71362e; --primaire-fonce: #54261f; --primaire-clair: #f3e3da; --bord-leger: #cabcaa; }
html[data-theme="1960"]:not([data-contraste]) { --fond: #f2efdf; --primaire: #20565d; --primaire-fonce: #173e44; --primaire-clair: #dfeeed; --bord-leger: #c5c2a8; }
html[data-theme="1970"]:not([data-contraste]) { --fond: #f7ecdc; --primaire: #793b19; --primaire-fonce: #56280f; --primaire-clair: #f8e1ca; --bord-leger: #cfb798; }
html[data-theme="1980"]:not([data-contraste]) { --fond: #f4ebed; --primaire: #6c3550; --primaire-fonce: #4d2338; --primaire-clair: #f1e0e9; --bord-leger: #cbb6c0; }
html[data-theme="1990"]:not([data-contraste]) { --fond: #eaf0ef; --primaire: #294f72; --primaire-fonce: #1b3853; --primaire-clair: #e0eaf4; --bord-leger: #b3c4c5; }
.salon { padding: 0; overflow: hidden; margin-bottom: 1.3rem; }
.salon-entete { padding: 1rem 1.1rem 0; }
.themes-choix { padding: 1rem 1.1rem; }
.choix-theme { flex: 1 1 145px; }
.salon-apercu { display: grid; grid-template-columns: 1.8fr 1fr; background: var(--primaire-clair); }
.salon-apercu img { display: block; width: 100%; height: 100%; min-height: 230px; max-height: 390px; object-fit: cover; }
.salon-legende { padding: 1.3rem; align-self: center; }
.salon-epoque { display: block; color: var(--primaire); font-weight: bold; margin-bottom: .6rem; }
.salon-legende p { margin: 0; }
.salon-apercu.sans-decor { grid-template-columns: 1fr; }
.salon-note { padding: .65rem 1.1rem; margin: 0; font-size: .8rem; }
html[data-contraste="eleve"] .salon-apercu { background: var(--carte); }
html[data-contraste="eleve"] .salon-apercu img { display: none; }
html[data-contraste="eleve"] .salon-apercu { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .salon-apercu { grid-template-columns: 1fr; }
  .salon-apercu img { min-height: 0; aspect-ratio: 16 / 9; }
  .salon-legende { padding: 1rem; }
  .choix-theme { flex-basis: 130px; }
}
/* Les liens du menu restent contenus, même avec le texte très agrandi. */
.navigation { min-width: 0; max-width: 100%; }
.navigation a { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .panneau { overflow-wrap: anywhere; }
  .ligne-boutons > .btn { min-width: 0; max-width: 100%; white-space: normal; }
  .interrupteur { min-width: 0; overflow-wrap: anywhere; }
}

/* Sur ordinateur, le salon reste ancré à la fenêtre pendant le défilement. */
html[data-theme="1950"] { --salon-fond: url("../img/themes/salon-1950.png"); }
html[data-theme="1960"] { --salon-fond: url("../img/themes/salon-1960.png"); }
html[data-theme="1970"] { --salon-fond: url("../img/themes/salon-1970.png"); }
html[data-theme="1980"] { --salon-fond: url("../img/themes/salon-1980.png"); }
html[data-theme="1990"] { --salon-fond: url("../img/themes/salon-1990.png"); }
@media (min-width: 1024px) {
  html[data-theme]:not([data-theme="classique"]):not([data-contraste]) body {
    background-image: var(--salon-fond);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  html[data-theme]:not([data-theme="classique"]):not([data-contraste]) main {
    background: var(--fond);
    /* Seul le fond s'atténue : les cartes et le texte restent opaques. */
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    border-radius: var(--rayon);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .22);
  }
}

/* Activités du quotidien : listes lisibles et boutons adaptables. */
.quotidien-jeu { width: 100%; max-width: 48rem; }
.courses-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem; padding-left: 1.5rem; }
.courses-liste li, .ordre-liste li { padding: .5rem; background: var(--carte); border-radius: .4rem; }
.ordre-liste li { margin-bottom: .5rem; }
.ordre-choix { display: flex; flex-direction: column; align-items: stretch; }
.quotidien-jeu .btn { white-space: normal; overflow-wrap: anywhere; }
.quotidien-jeu .btn:disabled { opacity: 1; }

/* Le panier garde une sélection visible, même après déplacement du focus. */
.courses-produit { flex-direction: column; gap: .25rem; }
.courses-produit[aria-pressed="true"],
.courses-produit[aria-pressed="true"]:hover {
  background: var(--primaire);
  color: var(--sur-primaire);
  border-color: var(--primaire);
}
.courses-selection { font-size: .8em; }
.courses-actions { margin-top: 1.25rem; padding-top: .75rem; border-top: 2px solid var(--bord-leger); }