/* Ciboulot, prototype : une bibliothèque de jeux.
   Fond neutre, une couleur par jeu, Bricolage Grotesque partout.
   Mise en page : une colonne sur téléphone ; sur ordinateur, contenu + colonne latérale de 300 px. */

:root {
  --fond: #F2F2EF;
  --surface: #FFFFFF;
  --encre: #16171B;
  --encre-2: #4A4E5A;
  --discret: #6B6F7B;
  --bord: #D9DAD4;
  --bord-fort: #16171B;
  --jaune: #FFC83D;
  --jaune-texte: #1B1A17;
  --bleu: #2455E6;
  --bleu-texte: #FFFFFF;
  --rouge: #D9372E;
  --rouge-texte: #FFFFFF;
  --vert: #1E8A55;
  --vert-texte: #FFFFFF;
  --orange: #F47A1F;
  --orange-texte: #1B1A17;
  --violet: #6A48D7;
  --violet-texte: #FFFFFF;
  --turquoise: #08818D;
  --turquoise-texte: #FFFFFF;
  --framboise: #C2346A;
  --framboise-texte: #FFFFFF;
  --couverte: #C9CCC3;
  --panneau: #FAFAF7;
  --panneau-bord: #E3E4DE;
  --n1: #2455E6; --n2: #1E8A55; --n3: #D9372E; --n4: #1B2A7A;
  --n5: #8B2A1E; --n6: #0F7C74; --n7: #16171B; --n8: #6B6F7B;
  --tapis: #1F7A4D;
  --saisie: #2455E6;
  --alerte: #C0392B;
  --accent: #16171B;
  --accent-texte: #FFFFFF;
  --ombre: 0 1px 0 rgba(22, 23, 27, .06), 0 6px 18px rgba(22, 23, 27, .08);
  --rayon: 14px;
  --gouttiere: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #111214;
    --surface: #1B1D21;
    --encre: #EDEEF0;
    --encre-2: #C3C7CF;
    --discret: #9AA0AB;
    --bord: #2C2F35;
    --bord-fort: #EDEEF0;
    --jaune: #FFCF55;
    --jaune-texte: #1B1A17;
    --bleu: #5B83FF;
    --bleu-texte: #0E1220;
    --rouge: #F0605A;
    --rouge-texte: #1A0B0A;
    --vert: #3DBB7A;
    --vert-texte: #06170E;
    --orange: #FF8E3C;
    --orange-texte: #1B1A17;
    --violet: #A48FFF;
    --violet-texte: #140F2A;
    --turquoise: #3CC8D4;
    --turquoise-texte: #06181B;
    --framboise: #FF6FA0;
    --framboise-texte: #1F0A13;
    --couverte: #3A3E47;
    --panneau: #16181B;
    --panneau-bord: #25282E;
    --n1: #8FB0FF; --n2: #5ED39A; --n3: #FF8A7E; --n4: #B9C6FF;
    --n5: #FFB08A; --n6: #5FD6CE; --n7: #EDEEF0; --n8: #9AA0AB;
    --tapis: #155236;
    --saisie: #8FB0FF;
    --alerte: #FF8A7E;
    --accent: #EDEEF0;
    --accent-texte: #111214;
    --ombre: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fond: #111214;
  --surface: #1B1D21;
  --encre: #EDEEF0;
  --encre-2: #C3C7CF;
  --discret: #9AA0AB;
  --bord: #2C2F35;
  --bord-fort: #EDEEF0;
  --jaune: #FFCF55;
  --jaune-texte: #1B1A17;
  --bleu: #5B83FF;
  --bleu-texte: #0E1220;
  --rouge: #F0605A;
  --rouge-texte: #1A0B0A;
  --vert: #3DBB7A;
  --vert-texte: #06170E;
  --orange: #FF8E3C;
  --orange-texte: #1B1A17;
  --violet: #A48FFF;
  --violet-texte: #140F2A;
  --turquoise: #3CC8D4;
  --turquoise-texte: #06181B;
  --framboise: #FF6FA0;
  --framboise-texte: #1F0A13;
  --couverte: #3A3E47;
  --panneau: #16181B;
  --panneau-bord: #25282E;
  --n1: #8FB0FF; --n2: #5ED39A; --n3: #FF8A7E; --n4: #B9C6FF;
  --n5: #FFB08A; --n6: #5FD6CE; --n7: #EDEEF0; --n8: #9AA0AB;
  --tapis: #155236;
  --saisie: #8FB0FF;
  --alerte: #FF8A7E;
  --accent: #EDEEF0;
  --accent-texte: #111214;
  --ombre: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* chaque jeu apporte sa couleur */
[data-jeu="le-mot"] { --accent: var(--turquoise); --accent-texte: var(--turquoise-texte); }
[data-jeu="le-plus-long"] { --accent: var(--jaune); --accent-texte: var(--jaune-texte); }
[data-jeu="le-compte"] { --accent: var(--bleu); --accent-texte: var(--bleu-texte); }
[data-jeu="la-commune"] { --accent: var(--rouge); --accent-texte: var(--rouge-texte); }
[data-jeu="solitaire"] { --accent: var(--vert); --accent-texte: var(--vert-texte); }
[data-jeu="sudoku"] { --accent: var(--orange); --accent-texte: var(--orange-texte); }
[data-jeu="demineur"] { --accent: var(--violet); --accent-texte: var(--violet-texte); }
[data-jeu="freecell"] { --accent: var(--framboise); --accent-texte: var(--framboise-texte); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 6px; }

.app { min-height: 100vh; }
.barre-interieur, .page-accueil, .page-jeu, .pied, .pub-bas {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ------------------------------------------------------------ barre du haut */

.barre { padding-block: 16px; }
.barre-jeu-actif { background: var(--accent); color: var(--accent-texte); margin-bottom: 20px; }
.barre-interieur { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.marque {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
.points-marque { display: inline-flex; gap: 4px; }
.points-marque i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.points-marque i:nth-child(1) { background: var(--jaune); }
.points-marque i:nth-child(2) { background: var(--bleu); }
.points-marque i:nth-child(3) { background: var(--rouge); }
.barre-nav { display: none; gap: 22px; font-weight: 700; font-size: 15.5px; }
.barre-nav a { text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.barre-nav a:hover { border-bottom-color: currentColor; }
.barre-jeu-actif .barre-nav { display: none; }
.barre-date { margin-left: auto; display: inline-flex; align-items: baseline; gap: 12px; font-size: 14.5px; }
.date { font-weight: 500; opacity: .85; }
.marque-archive {
  align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: var(--accent-texte); color: var(--accent);
}
.numero { font-weight: 800; font-variant-numeric: tabular-nums; }
.retour {
  font-weight: 700; text-decoration: none; font-size: 16px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.retour:hover { text-decoration: underline; }

/* ------------------------------------------------------------ accueil */

.page-accueil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 8px 24px; }
.accueil { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.accueil > * { flex-shrink: 0; }
.rayon-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.rayon-tete h1, .rayon-tete h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 800; }
.rayon-tete p { margin: 0; color: var(--discret); font-size: 15px; }
.programme { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.carte-jeu {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 6px;
  min-height: 172px; height: 100%; padding: 18px 18px 16px; border-radius: var(--rayon);
  background: var(--accent); color: var(--accent-texte); text-decoration: none;
  box-shadow: var(--ombre); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.carte-jeu:active { transform: scale(.985); }
.carte-visuel { display: flex; align-items: center; gap: 6px; min-height: 56px; }
.carte-textes { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.carte-nom { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.carte-resume { display: block; font-size: 15.5px; line-height: 1.35; opacity: .92; max-width: 34ch; }
.carte-infos { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.3; opacity: .78; }
.carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.carte-statut {
  font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-texte); color: var(--accent);
}
.carte-statut.fait { background: transparent; color: var(--accent-texte); box-shadow: inset 0 0 0 2px currentColor; }
.carte-jouer { font-weight: 700; font-size: 15px; }

/* couvertures faites avec les pièces de chaque jeu */
.visuel-mot { display: flex; gap: 5px; }
.visuel-mot i {
  position: relative; width: 34px; height: 34px; display: grid; place-items: center; font-style: normal;
  border-radius: 7px; background: #FFFFFF; color: #16171B; box-shadow: inset 0 0 0 2px #16171B;
  font-weight: 800; font-size: 18px;
}
.visuel-mot i.placee { background: #16171B; color: #FFFFFF; }
.visuel-mot i.mal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #FFC83D; }
.visuel-mot i b { position: relative; }
.visuel-lettres i {
  width: 34px; height: 38px; display: grid; place-items: center; font-style: normal;
  background: #FFFFFF; color: #16171B; border: 2px solid #16171B; border-radius: 7px;
  font-weight: 800; font-size: 20px; box-shadow: 0 2px 0 #16171B;
}
.visuel-lettres i:nth-child(2) { transform: translateY(-4px) rotate(-4deg); }
.visuel-lettres i:nth-child(3) { transform: rotate(3deg); }
.visuel-lettres i:nth-child(4) { transform: translateY(-3px) rotate(-2deg); }
.visuel-plaques i, .visuel-plaques b {
  height: 38px; min-width: 38px; padding: 0 8px; display: grid; place-items: center; font-style: normal;
  border-radius: 8px; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums;
}
.visuel-plaques i { background: rgba(255, 255, 255, .95); color: #16171B; }
.visuel-plaques i.op { background: transparent; color: inherit; min-width: 0; padding: 0 2px; font-size: 22px; }
.visuel-plaques b { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.visuel-boussole { display: flex; align-items: center; gap: 10px; }
.visuel-boussole .rond {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .95); color: #16171B;
}
.visuel-boussole svg { width: 26px; height: 26px; transform: rotate(38deg); fill: currentColor; }
.visuel-boussole span { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.visuel-cartes { position: relative; height: 64px; width: 120px; }
.mini-carte {
  position: absolute; top: 0; width: 44px; height: 62px; border-radius: 6px; background: #FFFFFF; color: #16171B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: flex-start;
  padding: 4px 5px; font-weight: 800; font-size: 15px; line-height: 1;
}
.mini-carte svg { width: 14px; height: 14px; margin-top: 3px; fill: currentColor; }
.mini-carte.rouge { color: #CF2A2A; }
.mini-carte.c1 { left: 0; transform: rotate(-10deg); }
.mini-carte.c2 { left: 30px; transform: rotate(-1deg); top: -2px; }
.mini-carte.c3 { left: 60px; transform: rotate(9deg); }
.visuel-freecell { display: flex; align-items: flex-start; gap: 8px; height: 70px; }
.visuel-freecell .escalier, .visuel-freecell .case-libre { position: relative; width: 38px; height: 52px; }
.visuel-freecell .escalier { height: 70px; }
.visuel-freecell .case-libre { border-radius: 6px; outline: 2px dashed rgba(255, 255, 255, .75); outline-offset: -2px; }
.visuel-freecell .mini-carte { left: 0; width: 38px; height: 52px; transform: none; }
.visuel-freecell .e2 { top: 9px; }
.visuel-freecell .e3 { top: 18px; }
.mini-grille {
  display: grid; grid-template-columns: repeat(3, 20px); grid-template-rows: repeat(3, 20px);
  background: #FFFFFF; color: #16171B; border: 2px solid #16171B; border-radius: 6px; overflow: hidden;
}
.mini-grille i {
  display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px;
  border-right: 1px solid #C9C9C3; border-bottom: 1px solid #C9C9C3;
}
.mini-grille i:nth-child(3n) { border-right: 0; }
.mini-grille i:nth-child(n + 7) { border-bottom: 0; }
.mini-demineur {
  display: grid; grid-template-columns: repeat(3, 21px); grid-template-rows: repeat(3, 21px); gap: 2px;
  padding: 3px; border-radius: 6px; background: #16171B;
}
.mini-demineur i {
  display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px;
  border-radius: 2px; background: #FFFFFF; color: #16171B;
}
.mini-demineur i.couverte { background: #CFD2C8; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.mini-demineur i.n1 { color: #2455E6; }
.mini-demineur i.n2 { color: #1E8A55; }
.mini-demineur svg { width: 14px; height: 14px; }

.encart { padding: 18px; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); }
.encart h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.encart p { margin: 0; color: var(--encre-2); }
.journee-lignes { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.journee .bouton { width: 100%; }
.serie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-weight: 500; color: var(--encre-2); margin: 4px 0 14px; }
.serie .points { display: inline-flex; gap: 6px; }
.serie .points i { width: 18px; height: 18px; border-radius: 5px; background: var(--bord); display: inline-block; }
.serie .points i.on:nth-child(3n + 1) { background: var(--jaune); }
.serie .points i.on:nth-child(3n + 2) { background: var(--bleu); }
.serie .points i.on:nth-child(3n) { background: var(--rouge); }
/* réponses de la veille : les objets des jeux (tuiles, plaques, panneau), pas des cartes de chiffres */
.reponses {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 26px 32px; align-items: start;
}
.reponse { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; justify-items: start; min-width: 0; }
.reponse > .piece-mot, .reponse > .piece-calcul, .reponse > .piece-panneau { align-self: center; }
.panneau-reponses { padding: 6px 24px; }
.panneau-reponses .reponses { gap: 0; align-items: stretch; }
.panneau-reponses .piece-panneau { font-size: 20px; letter-spacing: .02em; }
.panneau-reponses .reponse { padding-block: 18px; }
.panneau-reponses .reponse + .reponse { border-top: 1px solid var(--panneau-bord); }
.reponse-legende { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--encre-2); text-decoration: none; }
.reponse-legende i { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }
.reponse-legende b { color: var(--encre); }
.reponse-aussi { margin: 0; font-size: 14.5px; color: var(--discret); }
/* un mot en tuiles ou en cases : les lettres se resserrent dans une colonne étroite au lieu de passer à la ligne
   (--n = nombre de lettres, posé par pieces.js) */
.piece-mot, .piece-cases {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 5px;
  width: min(100%, calc(var(--n) * 41px)); container-type: inline-size;
}
.piece-mot i, .piece-cases i {
  display: grid; place-items: center; font-style: normal; font-weight: 800;
  font-size: min(19px, calc(100cqw / var(--n) * .52)); border-radius: 7px;
}
.piece-mot i {
  aspect-ratio: 34 / 38; background: #FFFFFF; color: #16171B; border: 2px solid #16171B; box-shadow: 0 3px 0 #16171B;
}
.piece-cases i { aspect-ratio: 1; background: var(--accent); color: var(--accent-texte); }
.piece-calcul { display: grid; gap: 8px; }
.piece-etape { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.piece-etape i, .piece-etape b {
  min-width: 40px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px;
  font-style: normal; font-size: 17px;
}
.piece-etape i { background: #FFFFFF; color: #16171B; box-shadow: inset 0 0 0 2px #16171B, 0 3px 0 #16171B; }
.piece-etape b { box-shadow: inset 0 0 0 2px var(--bord-fort); }
.piece-etape b.final { background: var(--bleu); color: var(--bleu-texte); box-shadow: none; }
.piece-etape .op { min-width: 12px; font-size: 19px; text-align: center; }
/* panneau d'entrée d'agglomération : fond blanc, liseré rouge, capitales noires */
.piece-panneau {
  display: inline-block; max-width: 100%; padding: 12px 18px 11px; border-radius: 10px;
  background: #FFFFFF; color: #111111; border: 5px solid #D9372E;
  box-shadow: 0 0 0 3px #FFFFFF, 0 4px 14px rgba(0, 0, 0, .28);
  font-weight: 800; font-size: 22px; line-height: 1.12; letter-spacing: .03em; text-align: center;
}
.cote { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cote > * { flex-shrink: 0; }

.pied { padding-block: 24px 40px; font-size: 14px; color: var(--discret); display: grid; gap: 4px; }
.pied p { margin: 0; }
.credits { font-size: 12.5px; margin-top: 8px !important; }

/* ------------------------------------------------------------ emplacements publicitaires (maquettes) */

.pub {
  width: min(100%, var(--pub-l)); height: var(--pub-h); margin-inline: auto;
  display: grid; place-content: center; gap: 4px; text-align: center;
  border-radius: 10px; border: 1.5px dashed var(--bord); color: var(--discret);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(128, 128, 128, .08) 10px 11px);
}
.pub-etiquette { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pub-format { font-size: 12px; font-variant-numeric: tabular-nums; }
.pub-cote, .pub-cote-jeu { display: none; }
.pub-format-bas { display: none; }
.pub-bas { margin-block: 24px 8px; }

/* ------------------------------------------------------------ pages de jeu */

.page-jeu {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "jeu" "infos";
  gap: 20px; padding-block: 0 8px;
}
.panneau-jeu { grid-area: jeu; min-width: 0; }
.zone-jeu { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 600px; margin-inline: auto; min-width: 0; }
.zone-jeu > * { flex-shrink: 0; }
:is([data-jeu="solitaire"], [data-jeu="freecell"]) .zone-jeu { max-width: 860px; }
.infos-jeu { grid-area: infos; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.cote-jeu { grid-area: rail; display: none; }
.pub-cote-jeu-2 { display: none; }

/* panneaux : un fond à peine différent de la page et un filet fin, pour séparer les zones sans alourdir */
.panneau { padding: 20px; border-radius: 18px; background: var(--panneau); border: 1px solid var(--panneau-bord); }
.panneau h2 { margin: 0 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.stats-vide { margin: 0; color: var(--encre-2); }
.stats-chiffres { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; }
.stats-chiffres div { display: grid; }
.stats-chiffres b { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats-chiffres span { font-size: 13.5px; color: var(--discret); }
.stats h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--encre-2); }
.stats-barres { display: grid; gap: 6px; }
.stats-barre { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; font-size: 14px; color: var(--encre-2); }
.stats-barre i {
  justify-self: start; min-width: 30px; width: calc(var(--part) * 1%); height: 24px; padding: 0 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 40%, var(--surface)); color: var(--encre);
  font-style: normal; font-weight: 800; font-size: 13px; line-height: 24px; text-align: right; font-variant-numeric: tabular-nums;
}
.stats-barre.du-jour span { color: var(--encre); font-weight: 700; }
.stats-barre.du-jour i { background: var(--accent); color: var(--accent-texte); }
.complement-date { margin: 0 0 14px; font-size: 14.5px; color: var(--discret); }
/* réponse cachée tant qu'on n'a pas joué ce jour-là */
.voile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.voile .bouton-2 { min-height: 40px; padding: 0 14px; font-size: 15px; }
.voile a { font-size: 15px; font-weight: 700; }
.reponse > .voile { align-self: center; }
/* les jours précédents d'un jeu du jour */
.jours-passes ul { list-style: none; margin: 0; padding: 0; }
.jours-passes li + li { border-top: 1px solid var(--panneau-bord); }
.jours-passes a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 0; font-size: 15px; text-decoration: none;
}
.jours-passes a[aria-current="page"] { font-weight: 800; }
.jours-passes .statut { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--discret); }
.jours-passes .statut.fait { color: var(--encre); }
.complement .reponse-aussi { margin-top: 12px; }
.titre-jeu { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 800; }
.barre-titre, .barre-jeu { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chrono {
  font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums;
  padding: 4px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--ombre);
  min-width: 78px; text-align: center;
}
.chrono.urgent { color: var(--alerte); }
.regles { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--encre-2); }
.consigne { margin: 0; color: var(--encre-2); }

.bouton, .bouton-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 0; transition: transform .08s ease;
}
.bouton { background: var(--accent); color: var(--accent-texte); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.bouton:active, .bouton-2:active { transform: translateY(2px); }
.bouton-2 { background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 2px var(--bord-fort); }
.bouton:disabled, .bouton-2:disabled, .operateur:disabled { opacity: .45; cursor: default; transform: none; }
.lien-fin, .lien-retour {
  align-self: center; background: none; border: 0; padding: 10px; min-height: 44px;
  color: var(--encre-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .bouton { flex: 1 1 auto; }
.actions-fin { display: flex; flex-direction: column; gap: 10px; }
.message { margin: 0; min-height: 1.5em; font-weight: 600; color: var(--encre-2); }
.erreur { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface); color: var(--alerte); font-weight: 600; }
.chargement { margin: 0; color: var(--discret); }
.discret { color: var(--discret); font-weight: 400; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bilan { padding: 22px 18px; border-radius: var(--rayon); background: var(--accent); color: var(--accent-texte); }
.bilan-chiffre { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bilan-detail { margin: 8px 0 0; font-size: 16.5px; }
.solution { padding: 18px; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); }
.solution h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.solution p { margin: 0 0 6px; }

/* ------------------------------------------------------------ tuiles (Le plus long, Le compte) */

.tuile {
  display: grid; place-items: center; aspect-ratio: 1 / 1.08; min-width: 0;
  background: var(--surface); color: var(--encre);
  border: 2px solid var(--bord-fort); border-radius: 9px; box-shadow: 0 3px 0 var(--bord-fort);
  font-weight: 800; font-size: clamp(20px, 6vw, 28px); line-height: 1; padding: 0;
  transition: transform .08s ease, opacity .12s ease;
}
.tuile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bord-fort); }
.tuile.utilisee { opacity: .25; box-shadow: none; transform: translateY(3px); }
.tirage { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.compo {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; align-items: center;
  padding: 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--bord);
}
.compo-vide { color: var(--discret); font-size: 15.5px; padding-left: 4px; }
.tuile-mot { width: 44px; background: var(--accent); color: var(--accent-texte); font-size: 22px; }
.trouves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trouves li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--bord); font-weight: 600;
}
.trouves li.record { box-shadow: inset 0 0 0 2px var(--encre); }
.trouves .longueur {
  min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: var(--accent-texte); font-size: 13px; font-weight: 800;
}
.cible {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: var(--rayon); background: var(--accent); color: var(--accent-texte);
}
.cible-etiquette { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }
.cible-nombre { font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.plaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plaque { aspect-ratio: auto; min-height: 60px; font-size: clamp(22px, 6.5vw, 30px); font-variant-numeric: tabular-nums; }
.plaque.calculee { border-style: dashed; }
.plaque.choisie { background: var(--accent); color: var(--accent-texte); }
.operateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.operateur {
  min-height: 52px; border-radius: 12px; border: 0; font-size: 28px; font-weight: 800; line-height: 1;
  background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 2px var(--bord-fort);
}
.operateur.choisie { background: var(--accent); color: var(--accent-texte); box-shadow: none; }
.etapes { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.etapes:empty { display: none; }
.plus-pres { margin: 0; color: var(--encre-2); font-weight: 600; min-height: 1.5em; }

/* ------------------------------------------------------------ La commune */

.indices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.indices li {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--ombre); font-weight: 600;
}
.indices li b { font-weight: 800; }
.indices li.cache { box-shadow: inset 0 0 0 1.5px var(--bord); background: transparent; color: var(--discret); font-weight: 500; }
.formulaire { display: flex; gap: 10px; align-items: flex-start; }
.champ-conteneur { position: relative; flex: 1 1 auto; min-width: 0; }
.champ {
  width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; font-size: 17px;
  background: var(--surface); border: 2px solid var(--bord-fort); outline: none;
}
.champ:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  list-style: none; margin: 0; padding: 6px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--ombre), inset 0 0 0 1.5px var(--bord);
}
.suggestions:empty { display: none; }
.suggestions li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.suggestions li.active, .suggestions li:hover { background: var(--accent); color: var(--accent-texte); }
.suggestions li.active .discret, .suggestions li:hover .discret { color: inherit; opacity: .8; }
.reste { margin: 0; font-weight: 700; color: var(--encre-2); }
.essais { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.essai {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--ombre);
}
.essai.trouve { background: var(--vert); color: var(--vert-texte); }
.essai-nom { font-weight: 700; overflow-wrap: anywhere; }
.essai-info { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.essai-direction { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-texte); }
.fleche { width: 20px; height: 20px; fill: currentColor; }
.essai-proximite { width: 54px; height: 8px; border-radius: 99px; background: var(--bord); overflow: hidden; display: inline-block; }
.essai-proximite i { display: block; height: 100%; background: var(--encre); border-radius: 99px; }
.essai-pop { grid-column: 1 / -1; font-size: 14.5px; color: var(--discret); font-weight: 500; }

/* ------------------------------------------------------------ Solitaire */

.infos-partie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-weight: 700; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.infos-partie .mode { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-texte); font-size: 14px; }
.tapis {
  --pas-cache: 12;
  --pas-visible: 30;
  background: var(--tapis); border-radius: 16px; padding: clamp(8px, 2vw, 16px);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .25);
  user-select: none; -webkit-user-select: none;
}
.tapis-haut, .tapis-bas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 12px); }
.tapis-bas { margin-top: clamp(10px, 2vw, 18px); align-items: start; min-height: 55vh; }
.place, .colonne { position: relative; container-type: inline-size; min-width: 0; }
.place { aspect-ratio: 5 / 7; border-radius: 8% / 6%; }
.place.vide { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); display: grid; place-items: center; color: rgba(255, 255, 255, .45); }
.tapis-freecell .tapis-haut, .tapis-freecell .tapis-bas { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.place.cellule-libre.vide { box-shadow: none; outline: 1.5px dashed rgba(255, 255, 255, .45); outline-offset: -1.5px; }
.place.vide svg { width: 38cqw; height: 38cqw; fill: currentColor; }
.place.pioche.vide { cursor: pointer; }
.place .recommencer { font-size: 40cqw; font-weight: 800; line-height: 1; }
.colonne .cale { pointer-events: none; }
.colonne.vide::before { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 5 / 7; border-radius: 7cqw; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.carte {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 5 / 7;
  border-radius: 7cqw; background: #FFFFFF; color: #16171B;
  border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  cursor: pointer; touch-action: manipulation; overflow: hidden;
}
.carte.rouge { color: #CF2A2A; }
.carte .coin { position: absolute; top: 5cqw; left: 7cqw; display: flex; align-items: center; gap: 2cqw; font-weight: 800; font-size: 25cqw; line-height: 1; letter-spacing: -.03em; }
.carte .coin svg { width: 20cqw; height: 20cqw; fill: currentColor; }
.carte .centre { position: absolute; right: 9cqw; bottom: 9cqw; width: 46cqw; height: 46cqw; fill: currentColor; opacity: .92; }
.carte.dos {
  cursor: default;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 5cqw, transparent 5cqw 10cqw),
    #2A4AB8;
  border: 4cqw solid #FFFFFF;
}
.place > .carte { cursor: pointer; }
.carte.secoue-carte { animation: secoue .32s ease-in-out; }
.carte.cachee-drag { opacity: 0; }
.fantome { position: fixed; z-index: 60; pointer-events: none; container-type: inline-size; }
.fantome .carte { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------ Sudoku */

.grille-sudoku {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); aspect-ratio: 1 / 1;
  width: min(100%, 540px); margin-inline: auto;
  border: 3px solid var(--bord-fort); border-radius: 10px; overflow: hidden; background: var(--surface);
}
.case {
  position: relative; border: 0; padding: 0; min-width: 0;
  border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
  background: var(--surface); color: var(--saisie);
  display: grid; place-items: center; font-size: clamp(18px, 5.4vw, 30px); font-weight: 600; line-height: 1;
}
.case.bord-droit { border-right: 2px solid var(--bord-fort); }
.case.bord-bas { border-bottom: 2px solid var(--bord-fort); }
.case.fin-ligne { border-right: 0; }
.case.fin-grille { border-bottom: 0; }
.case.donnee { color: var(--encre); font-weight: 800; }
.case.zone { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.case.meme { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.case.active { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
.case.conflit { color: var(--alerte); }
.case:focus { outline: none; }
.case:focus-visible { outline: 2px solid var(--encre); outline-offset: -4px; }
.notes {
  position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-size: clamp(8px, 1.9vw, 11.5px); font-weight: 700; color: var(--discret); line-height: 1;
}
.notes i { display: grid; place-items: center; font-style: normal; }
.plateau-sudoku, .commandes-sudoku { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.plateau-sudoku > *, .commandes-sudoku > * { flex-shrink: 0; }
.pave { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; width: min(100%, 540px); margin-inline: auto; }
.pave button {
  min-height: 52px; border: 0; border-radius: 10px; font-size: 24px; font-weight: 800;
  background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 2px var(--bord-fort);
}
.pave button.epuise { opacity: .3; }
.pave-actions { display: flex; flex-wrap: wrap; gap: 10px; width: min(100%, 540px); margin-inline: auto; }
.pave-actions .bouton-2[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); box-shadow: none; }
.niveaux { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------ Le mot */

.infos-mot { font-size: 15px; font-weight: 700; color: var(--encre-2); }
.grille-mot { display: grid; gap: 6px; width: 100%; max-width: calc(var(--n) * 62px); margin-inline: auto; }
.rangee-mot { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.case-mot {
  position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 8px; background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 2px var(--bord);
  font-weight: 800; font-size: clamp(17px, 5.4vw, 30px); line-height: 1;
}
.case-mot > span { position: relative; }
.case-mot.saisie { box-shadow: inset 0 0 0 2px var(--bord-fort); }
.case-mot.indice { color: var(--discret); }
/* bien placée : carré plein ; mal placée : rond jaune ; absente : case vide */
.case-mot.placee { background: var(--accent); color: var(--accent-texte); box-shadow: none; }
.case-mot.mal { color: #1B1A17; box-shadow: none; }
.case-mot.mal::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: var(--jaune); }
.case-mot.absente { background: transparent; color: var(--discret); }
.bilan-mot { display: grid; gap: 12px; }
.bilan-mot:empty { display: none; }
.clavier { display: grid; gap: 6px; width: 100%; max-width: 580px; margin-inline: auto; touch-action: manipulation; }
.clavier-rangee { display: flex; gap: 5px; }
.touche {
  flex: 1 1 0; min-width: 0; height: 54px; padding: 0; border: 0; border-radius: 8px;
  background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--bord-fort);
  font-weight: 800; font-size: 18px;
}
.touche.large { flex: 1.7 1 0; font-size: 13px; }
.touche.placee { background: var(--accent); color: var(--accent-texte); box-shadow: none; }
.touche.mal { background: var(--jaune); color: #1B1A17; box-shadow: none; }
.touche.absente { opacity: .32; }
.touche:active { transform: translateY(1px); }

/* ------------------------------------------------------------ Démineur */

.grille-demineur {
  display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); grid-template-rows: repeat(var(--l), minmax(0, 1fr)); gap: 2px;
  width: 100%; aspect-ratio: var(--c) / var(--l); padding: 5px; border-radius: 12px;
  background: var(--bord); container-type: inline-size;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cellule {
  border: 0; padding: 0; min-width: 0; border-radius: 3px; display: grid; place-items: center;
  background: var(--surface); color: var(--encre); font-weight: 800; line-height: 1;
  font-size: calc(100cqw / var(--c) * .52); font-variant-numeric: tabular-nums; cursor: default;
}
.cellule.couverte {
  background: var(--couverte); cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.cellule svg { width: 66%; height: 66%; }
.cellule.mine { color: var(--encre); }
.cellule.explosee { background: var(--rouge); color: #16171B; }
.cellule.faux { background: color-mix(in srgb, var(--rouge) 30%, var(--couverte)); }
.cellule:focus { outline: none; }
.cellule:focus-visible { outline: 2px solid var(--encre); outline-offset: -3px; }
.cellule.n1 { color: var(--n1); }
.cellule.n2 { color: var(--n2); }
.cellule.n3 { color: var(--n3); }
.cellule.n4 { color: var(--n4); }
.cellule.n5 { color: var(--n5); }
.cellule.n6 { color: var(--n6); }
.cellule.n7 { color: var(--n7); }
.cellule.n8 { color: var(--n8); }
.bilan-demineur { display: grid; gap: 12px; }
.bilan-demineur:empty { display: none; }
[data-jeu="demineur"] .actions .bouton-2[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); box-shadow: none; }

/* ------------------------------------------------------------ Ligues */

.intro-ligue { margin: 0; color: var(--encre-2); }
.actions-ligue { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lien-ligues { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 15px; }
.liste-ligues { list-style: none; margin: 0; padding: 0; }
.liste-ligues li + li { border-top: 1px solid var(--panneau-bord); }
.liste-ligues a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 0; text-decoration: none;
}
.liste-ligues b { font-size: 17px; overflow-wrap: anywhere; }
.liste-ligues .rang { grid-column: 1; font-size: 14.5px; color: var(--encre-2); }
.liste-ligues .aller { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-size: 15px; }
.zone-ligue { gap: 18px; }
.bloc-ligue h2 { margin: 0 0 12px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.deux-formulaires { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.formulaire-ligue { display: grid; gap: 12px; max-width: 440px; }
.formulaire-ligue label { display: grid; gap: 6px; font-size: 15px; font-weight: 700; }
.formulaire-ligue .bouton, .formulaire-ligue .bouton-2 { justify-self: start; }
.formulaire-ligue .message { min-height: 0; color: var(--alerte); }
.champ-code { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
.champ-code::placeholder { text-transform: none; letter-spacing: normal; font-weight: 600; }
/* le message de partage n'occupe de place que lorsqu'il a quelque chose à dire */
.zone-ligue > .message:empty { display: none; }
.champ-lien { display: block; width: 100%; margin-top: 8px; font-size: 15px; font-weight: 600; }
.tete-ligue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.code-ligue { letter-spacing: .15em; }
/* classements : un tableau, un petit carré de la couleur de chaque jeu avec ses points */
.classement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.classement th { padding: 0 6px 8px; text-align: left; font-size: 13px; font-weight: 700; color: var(--discret); }
.classement td { padding: 9px 6px; border-top: 1px solid var(--panneau-bord); vertical-align: middle; }
.classement .rang { width: 2.4em; font-weight: 800; }
.classement .pseudo { font-weight: 700; overflow-wrap: anywhere; }
.classement .total { text-align: right; font-size: 18px; font-weight: 800; }
.classement th.total { font-size: 13px; }
.classement tr.toi td { background: color-mix(in srgb, var(--encre) 6%, transparent); }
.points-jeux { display: inline-flex; gap: 4px; }
.point-jeu {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  font-size: 13px; font-weight: 800; background: var(--accent); color: var(--accent-texte);
}
.point-jeu.vide { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bord); }
.point-jeu.mini { width: 12px; height: 12px; border-radius: 3px; }
.legende-jeux { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 10px; font-size: 14px; color: var(--encre-2); }
.legende-jeux > span { display: inline-flex; align-items: center; gap: 6px; }
.classement tr.pas-joue td { color: var(--discret); }
.reste-a-jouer { margin: 12px 0 0; color: var(--encre-2); }
.reste-a-jouer a { font-weight: 700; }
/* écran de fin d'un jeu du jour : ta place dans tes ligues, entre le bilan et la suite */
.encart-ligue { margin: 0; padding: 2px 18px; border-radius: var(--rayon); background: var(--surface); }
.encart-ligue .liste-ligues a { padding: 12px 0; }
.encart-ligue .lien-ligues { margin: 0 0 12px; }
.encart-ligue.vide { padding: 14px 18px; color: var(--encre-2); }
.encart-ligue.vide a { font-weight: 700; }

/* ------------------------------------------------------------ page de texte (confidentialité et mentions légales) */

.retour-texte { margin-left: auto; font-weight: 700; font-size: 15px; text-decoration: none; }
.retour-texte:hover { text-decoration: underline; }
.page-texte { max-width: 760px; margin-inline: auto; padding: 8px var(--gouttiere) 56px; }
.page-texte h1 { margin: 12px 0 6px; font-size: clamp(30px, 6vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.page-texte h2 { margin: 36px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.page-texte p, .page-texte li { color: var(--encre-2); }
.page-texte p { margin: 0 0 12px; }
.page-texte ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.page-texte strong { color: var(--encre); }
.page-texte a { font-weight: 700; overflow-wrap: anywhere; }
.page-texte .mise-a-jour { color: var(--discret); font-size: 14.5px; }
.page-texte .retour-bas { margin-top: 40px; }

/* ------------------------------------------------------------ animations */

.tampon { animation: tampon .18s ease-out; }
@keyframes tampon {
  0% { transform: scale(1.16); }
  60% { transform: scale(.95); }
  100% { transform: scale(1); }
}
.secoue { animation: secoue .32s ease-in-out; }
@keyframes secoue {
  0%, 100% { translate: 0; }
  20% { translate: -7px; }
  40% { translate: 6px; }
  60% { translate: -4px; }
  80% { translate: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .tampon, .secoue, .carte.secoue-carte { animation: none; }
  .carte-jeu, .tuile, .bouton, .bouton-2 { transition: none; }
}

/* ------------------------------------------------------------ écrans plus larges (en fin de feuille) */

@media (hover: hover) {
  .carte-jeu:hover { transform: translateY(-3px); box-shadow: var(--ombre), 0 14px 30px rgba(22, 23, 27, .12); }
  .reponse-legende:hover b { text-decoration: underline; }
  .jours-passes a:hover span:first-child { text-decoration: underline; }
  .cellule.couverte:hover { filter: brightness(1.07); }
}

@media (min-width: 720px) {
  :root { --gouttiere: 28px; }
  .programme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reponses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deux-formulaires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panneau-reponses { padding: 0; }
  .panneau-reponses .reponse { padding: 20px 24px; }
  .panneau-reponses .reponse + .reponse { border-top: 0; }
  .panneau-reponses .reponse:nth-child(even) { border-left: 1px solid var(--panneau-bord); }
  .panneau-reponses .reponse:nth-child(n + 3) { border-top: 1px solid var(--panneau-bord); }
  .actions-fin { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 1080px) {
  :root { --gouttiere: 40px; }
  .barre { padding-block: 22px; }
  .barre-nav { display: flex; }
  .page-accueil { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
  /* la colonne descend jusqu'en bas de la page ; seule la pub reste collée en haut quand on défile */
  .cote { align-self: stretch; }
  .pub-cote { position: sticky; top: 24px; }
  .pub-flux { display: none; }
  .pub-cote { display: grid; }
  .carte-jeu { padding: 24px 22px 20px; }
  .carte-jeu .carte-visuel { zoom: 1.2; }
  .carte-jeu .carte-nom { font-size: 30px; }
  .rayon-tete h1, .rayon-tete h2 { font-size: 34px; }
  .page-jeu {
    grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "jeu rail" "infos rail";
    gap: 20px 40px; align-items: start;
  }
  /* le jeu est posé sur son panneau, qui prend toute la colonne ; le jeu reste centré dedans */
  .panneau-jeu { padding: 28px; border-radius: 20px; background: var(--panneau); border: 1px solid var(--panneau-bord); }
  .infos-jeu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cote-jeu { display: grid; gap: 20px; position: sticky; top: 24px; }
  .pub-cote-jeu { display: grid; }
  .pub-bas { display: none; }

  /* jeux du jour : une colonne plus large et des pièces plus grandes */
  .zone-jeu, [data-jeu] .zone-jeu { max-width: var(--largeur-jeu, 780px); }
  .tirage { gap: 8px; }
  .tuile { font-size: 34px; border-radius: 11px; }
  .tuile-mot { width: 52px; font-size: 26px; }
  .compo { min-height: 78px; }
  .plaque { min-height: 76px; font-size: 34px; }
  .cible-nombre { font-size: 72px; }
  .operateur { min-height: 64px; font-size: 32px; }
  .champ { min-height: 56px; font-size: 18px; }
  .chrono { font-size: 28px; }

  /* solitaire et sudoku : titre, infos et commandes sur une seule ligne, le jeu prend le reste.
     La taille du jeu suit la hauteur de l'écran pour tenir sans défiler, et la ligne du haut s'aligne sur lui. */
  [data-jeu="solitaire"] { --largeur-jeu: max(560px, calc((100vh - 294px) * 1.32 + 104px)); }
  /* freecell : huit colonnes, une carte = (largeur - 84 px) / 8, environ 5,6 hauteurs de carte à loger */
  [data-jeu="freecell"] { --largeur-jeu: max(560px, calc((100vh - 300px) * 1.43 + 116px)); }
  [data-jeu="sudoku"] { --grille: min(620px, max(400px, calc(100vh - 270px))); --largeur-jeu: calc(var(--grille) + 292px); }
  /* démineur : la barre du haut garde 600 px ; la grille tient dans la hauteur de l'écran, sans cases de plus de 46 px
     (--c et --l sont posées par jeux/demineur.js) */
  [data-jeu="demineur"] .panneau-jeu { --largeur-jeu: max(600px, min(100%, calc(46px * var(--c, 12)))); }
  [data-jeu="demineur"] .grille-demineur {
    max-width: min(100%, calc((100vh - 290px) * var(--c) / var(--l)), calc(46px * var(--c))); margin-inline: auto;
  }
  :is([data-jeu="solitaire"], [data-jeu="sudoku"], [data-jeu="demineur"], [data-jeu="freecell"]) .zone-jeu {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 24px; row-gap: 16px;
  }
  :is([data-jeu="solitaire"], [data-jeu="sudoku"], [data-jeu="demineur"], [data-jeu="freecell"]) .zone-jeu > * { grid-column: 1 / -1; }
  :is([data-jeu="solitaire"], [data-jeu="sudoku"], [data-jeu="demineur"], [data-jeu="freecell"]) .zone-jeu > .barre-titre { grid-column: 1; grid-row: 1; }
  :is([data-jeu="solitaire"], [data-jeu="sudoku"], [data-jeu="demineur"], [data-jeu="freecell"]) .zone-jeu > .infos-partie { grid-column: 2; grid-row: 1; }
  :is([data-jeu="solitaire"], [data-jeu="demineur"], [data-jeu="freecell"]) .zone-jeu > .actions { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  /* le démineur est plus étroit : ses infos passent sur une deuxième ligne, sous le titre */
  [data-jeu="demineur"] .zone-jeu > .infos-partie { grid-column: 1 / -1; grid-row: 2; }
  :is([data-jeu="solitaire"], [data-jeu="demineur"], [data-jeu="freecell"]) .actions :is(.bouton, .bouton-2) { flex: 0 1 auto; }
  :is([data-jeu="solitaire"], [data-jeu="freecell"]) .tapis { order: 2; container-type: inline-size; }
  :is([data-jeu="solitaire"], [data-jeu="freecell"]) .tapis ~ :is(.message, .consigne) { order: 3; }
  /* place sous les colonnes : environ quatre hauteurs de carte (largeur d'une carte = (100cqw - 72px) / 7) */
  [data-jeu="solitaire"] .tapis-bas { min-height: calc((100cqw - 72px) * .557); }
  [data-jeu="freecell"] .tapis-bas { min-height: calc((100cqw - 84px) * .5); }

  /* sudoku : grille à gauche, pavé 3 × 3 et commandes à droite */
  .plateau-sudoku { display: grid; grid-template-columns: minmax(0, var(--grille)) 260px; gap: 32px; align-items: start; }
  .plateau-sudoku .grille-sudoku { width: 100%; container-type: inline-size; }
  .plateau-sudoku .case { font-size: 5.2cqw; }
  .plateau-sudoku .notes { font-size: max(8px, 1.85cqw); }
  .commandes-sudoku .pave, .commandes-sudoku .pave-actions { width: 100%; }
  .commandes-sudoku .pave { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .commandes-sudoku .pave button { min-height: 0; aspect-ratio: 1; font-size: 32px; }
  .commandes-sudoku .pave-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .commandes-sudoku .pave-actions > :first-child, .commandes-sudoku .pave-actions > :last-child { grid-column: 1 / -1; }
}

/* très grands écrans : le jeu au centre de l'écran, pour jouer droit devant soi.
   Deux colonnes de même largeur l'encadrent : statistiques et réponse d'hier à gauche, pubs à droite. */
@media (min-width: 1600px) {
  .page-jeu { grid-template-columns: 300px minmax(0, 1fr) 300px; grid-template-areas: "infos jeu rail"; }
  .infos-jeu { grid-template-columns: minmax(0, 1fr); }
}

/* grand écran assez haut : une deuxième pub se range sous la première, hors de la vue du jeu */
@media (min-width: 1600px) and (min-height: 900px) {
  .pub-cote-jeu-2 { display: grid; }
}

/* ordinateur à écran bas (portables) : la pub de l'accueil passe au format de repli pour tenir avec « Ta journée » */
@media (min-width: 1080px) and (max-height: 820px) {
  .pub[data-bas] { height: var(--pub-h-bas); }
  .pub[data-bas] .pub-format { display: none; }
  .pub[data-bas] .pub-format-bas { display: inline; }
}

/* grands écrans : la page s'élargit jusqu'à 1 600 px au lieu de laisser de grandes marges vides */
@media (min-width: 1400px) {
  .barre-interieur, .page-accueil, .page-jeu, .pied, .pub-bas { max-width: 1600px; }
  .programme { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .tirage { gap: 4px; }
  .tuile { border-radius: 7px; }
  .cible-nombre { font-size: 46px; }
  .pave { gap: 4px; }
}