/* Le Ludopathe — habillage de base, direction « chaleureux ».
   Fond crème, formes arrondies, pastels en nombre limité (ciel, jaune,
   pêche) et une seule touche de rouge. Les teintes vives viennent du logo :
   le bleu du fou, le rouge et le dégradé orangé des lettres.
   Aucune police ni ressource extérieure : rien ne part vers un tiers. */

:root {
  --creme: #fbf5ea;
  --papier: #fffdf8;
  --encre: #1d2b36;
  --encre-douce: #51616d;
  --trait: #eadfcb;
  --bleu: #0a6a96;
  --bleu-fonce: #084c6e;
  --rouge: #b81c1c;
  --ciel: #d3e9f4;
  --jaune: #fbe6a2;
  --peche: #fbd5bb;
  --rayon: 22px;
  --rayon-petit: 12px;
  --ombre: 0 1px 0 rgba(29, 43, 54, .04), 0 10px 28px -18px rgba(29, 43, 54, .35);
  --titres: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", "Quicksand", "Varela Round", "Segoe UI", system-ui, sans-serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  color: var(--encre);
  font: 1.0625rem/1.65 var(--texte);
}
main { flex: 1; }

h1, h2, h3 { font-family: var(--titres); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

a { color: var(--bleu); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--bleu-fonce); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--encre); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--rayon-petit) var(--rayon-petit); }
.skip:focus { top: 0; color: #fff; }

/* ── Mise en page ─────────────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.wrap.etroit { width: min(100% - 2.5rem, 30rem); }
.page { padding-block: clamp(2rem, 1rem + 4vw, 4rem); }

/* ── En-tête ──────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 15; background: var(--papier); border-bottom: 2px solid var(--trait); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: clamp(4.75rem, 3.9rem + 3.6vw, 6.5rem); padding-block: .5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--encre); text-decoration: none; }
.brand:hover { color: var(--encre); }
.brand-logo { display: block; height: clamp(3.75rem, 2.9rem + 3.6vw, 5.25rem); width: auto; }

/* Le menu. Sur grand écran : deux lignes à droite du logo, chacune annoncée
   par son titre (« Jeux », « Articles »), pour que l'en-tête ne soit pas plus
   haut que le logo. Sur petit écran : un seul bouton (les trois traits) à
   droite du logo, qui ouvre sous l'en-tête un panneau avec les trois
   sections (blog/static/blog/entete.js). */
.header-inner { justify-content: flex-start; column-gap: clamp(1.5rem, 4vw, 3rem); }
.menu { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .6rem; row-gap: .1rem; }
.menu-ligne { display: contents; }
.menu-titre { grid-column: 1; font: 800 .72rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); white-space: nowrap; }
.menu ul { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.menu a { display: block; padding: .4rem .75rem; border-radius: 999px; font: 700 .98rem/1.2 var(--titres); color: var(--encre); text-decoration: none; white-space: nowrap; }
.menu a:hover { background: var(--ciel); color: var(--encre); }
.menu a[aria-current="page"] { background: var(--bleu); color: #fff; }
/* Les pages qui présentent le blog : à l'écart, tout à droite, plus discrètes. */
.menu-blog { display: block; grid-column: 3; grid-row: 1 / span 2; }
.menu-blog .menu-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-blog ul { flex-direction: column; align-items: flex-end; gap: 0; }
.menu-blog a { font-weight: 600; font-size: .9rem; color: var(--encre-douce); padding-block: .3rem; }
/* La recherche : une loupe au bout de l'en-tête ; le champ s'ouvre à sa gauche, par-dessus le menu. */
.menu-recherche { grid-column: 4; grid-row: 1 / span 2; position: relative; display: flex; align-items: center; margin: 0 0 0 .4rem; }
.menu .menu-recherche button { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; padding: 0; border: 2px solid var(--trait); border-radius: 50%; background: var(--creme); color: var(--encre); cursor: pointer; }
.menu .menu-recherche button:hover { background: var(--ciel); border-color: var(--ciel); }
.menu-recherche input { position: absolute; z-index: 2; right: calc(100% + .4rem); top: 50%; transform: translateY(-50%); width: 0; min-width: 0; padding: .55rem 0; border-width: 0; opacity: 0; transition: width .2s ease, opacity .15s ease; }
.menu-recherche.ouverte input, .menu-recherche input:focus { width: min(19rem, 60vw); padding: .55rem .9rem; border-width: 2px; opacity: 1; box-shadow: 0 6px 18px rgba(29, 43, 54, .14); }
@media (prefers-reduced-motion: reduce) { .menu-recherche input { transition: none; } }
/* Pendant la frappe : la liste des pages proposées, sous le champ (blog/static/blog/entete.js). */
.recherche-suggestions { position: absolute; z-index: 30; margin: 0; padding: .3rem; list-style: none; max-height: min(40rem, calc(100vh - 8rem)); overflow-y: auto; background: #fff; border: 2px solid var(--bleu); border-radius: var(--rayon-petit); box-shadow: 0 10px 24px rgba(29, 43, 54, .16); text-align: left; }
.recherche-suggestions a, .menu .recherche-suggestions a { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .35rem .6rem; border: 0; border-radius: .45rem; background: none; font: 400 .98rem/1.25 var(--texte); color: var(--encre); text-align: left; text-decoration: none; white-space: normal; }
.recherche-suggestions li[aria-selected="true"] a, .recherche-suggestions a:hover { background: var(--ciel); color: var(--encre); }
.recherche-suggestions img { flex: none; width: 40px; height: 40px; object-fit: contain; border-radius: .35rem; background: #fff; }
.recherche-suggestions .suggestion-nom { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.recherche-suggestions small { flex: none; max-width: 40%; color: var(--encre-douce); font-size: .8rem; text-align: right; }
.recherche-suggestions .suggestion-acteur a, .recherche-suggestions .suggestion-article a, .recherche-suggestions .suggestion-gamme a { padding-left: .75rem; }
.recherche-suggestions .suggestion-tout { margin-top: .3rem; padding-top: .3rem; border-top: 2px solid var(--trait); }
.recherche-suggestions .suggestion-tout:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.recherche-suggestions .suggestion-tout .suggestion-nom { color: var(--bleu-fonce); }
/* Dans l'en-tête : sous le champ ouvert, à gauche de la loupe, un peu plus large que lui. */
/* (« .menu ul » range les liens du menu en ligne ou en deux colonnes : pas cette liste-ci.) */
.menu-recherche ul.recherche-suggestions { display: block; right: calc(100% + .4rem); top: calc(50% + 1.65rem); width: min(24rem, 80vw); }
/* Tant que l'écran est juste assez large pour le menu complet, la loupe prend sa place sur les marges des liens. */
@media (min-width: 66.01rem) and (max-width: 74rem) { .menu:not(.menu-gestion) a { padding-inline: .5rem; } .menu-recherche { margin-left: .1rem; } }
.menu-bouton { display: none; }

@media (max-width: 66rem) {
  .header-inner { justify-content: space-between; }
  /* Le bouton : trois traits, qui se croisent quand le menu est ouvert. */
  .site-header.js .menu-bouton { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; padding: 0; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: var(--creme); color: var(--encre); cursor: pointer; }
  .menu-barres, .menu-barres::before, .menu-barres::after { display: block; width: 1.35rem; height: .17rem; border-radius: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
  .menu-barres { position: relative; }
  .menu-barres::before, .menu-barres::after { content: ""; position: absolute; left: 0; }
  .menu-barres::before { top: -.42rem; }
  .menu-barres::after { top: .42rem; }
  .menu-ouvert .menu-bouton { background: var(--bleu); border-color: var(--bleu); color: #fff; }
  .menu-ouvert .menu-barres { background: transparent; }
  .menu-ouvert .menu-barres::before { transform: translateY(.42rem) rotate(45deg); }
  .menu-ouvert .menu-barres::after { transform: translateY(-.42rem) rotate(-45deg); }

  /* Le panneau : sur toute la largeur, sous l'en-tête, les trois sections
     l'une sous l'autre. Il défile s'il dépasse l'écran. */
  .site-header.js .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; padding: .5rem 1.25rem 1.25rem; background: var(--papier); border-bottom: 2px solid var(--trait); box-shadow: 0 10px 24px rgba(29, 43, 54, .12); }
  .site-header.js.menu-ouvert .menu { display: block; }
  .menu-ligne, .menu-blog { display: block; }
  /* Sur petit écran, le champ est toujours là, en tête du panneau. */
  .menu-recherche { margin: .75rem 0 .25rem; gap: .5rem; }
  .menu-recherche input, .menu-recherche.ouverte input, .menu-recherche input:focus { position: static; transform: none; flex: 1; width: auto; padding: .7rem .9rem; border-width: 2px; opacity: 1; box-shadow: none; }
  .menu .menu-recherche button { width: 3rem; height: 3rem; border-radius: var(--rayon-petit); }
  /* Dans le panneau, la liste se glisse sous le champ et pousse le reste du menu. */
  .menu-recherche { flex-wrap: wrap; }
  .menu-recherche ul.recherche-suggestions { position: static; flex: 1 0 100%; width: auto; max-height: none; box-shadow: none; }
  .menu-titre, .menu-blog .menu-titre { display: block; position: static; width: auto; height: auto; clip-path: none; margin: 1rem 0 .5rem; font-size: .78rem; }
  .menu ul, .menu-blog ul { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .menu a, .menu-blog a { padding: .75rem .8rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: var(--creme); font: 700 1rem/1.2 var(--titres); color: var(--encre); text-align: center; white-space: normal; }

  .menu-blog a { padding-inline: .3rem; font-size: .95rem; white-space: nowrap; }

  /* Sans JavaScript, le bouton ne pourrait rien ouvrir : le menu s'affiche
     d'office sous le logo. */
  .site-header:not(.js) .header-inner { flex-wrap: wrap; }
  .site-header:not(.js) .menu { flex-basis: 100%; display: block; padding-bottom: .6rem; }
  .site-header:not(.js) .menu-titre { margin-top: .5rem; }
  .site-header:not(.js) .menu ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem; }
  .site-header:not(.js) .menu a { padding: .4rem .7rem; font-size: .95rem; }
}

/* Pendant le défilement (blog/static/blog/entete.js) : le même en-tête, en
   plus bas, pour laisser la place à la lecture. */
.header-inner, .brand-logo, .menu a, .menu-bouton { transition: min-height .2s ease, height .2s ease, width .2s ease, padding .2s ease, font-size .2s ease; }
.site-header.reduit { box-shadow: 0 4px 16px rgba(29, 43, 54, .08); }
.site-header.reduit .header-inner { min-height: 0; padding-block: .3rem; }
.site-header.reduit .brand-logo { height: 3rem; }
.site-header.reduit .menu { row-gap: 0; }
@media (min-width: 66.01rem) { .site-header.reduit .menu a { padding-block: .22rem; font-size: .9rem; } }
@media (max-width: 66rem) {
  .site-header.reduit .brand-logo { height: 2.5rem; }
  .site-header.reduit.js .menu-bouton { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .header-inner, .brand-logo, .menu a, .menu-bouton, .menu-barres, .menu-barres::before, .menu-barres::after { transition: none; } }
/* Un titre visé par le sommaire ne doit pas se cacher sous l'en-tête. */
.prose h2, .prose h3 { scroll-margin-top: 6.5rem; }

.bandeau-dev { position: fixed; z-index: 20; right: -2.6rem; top: .9rem; transform: rotate(45deg); background: var(--rouge); color: #fff; font: 700 .72rem/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; padding: .35rem 3rem; pointer-events: none; }

/* ── Pied de page ─────────────────────────────────────────────────── */
.site-footer { margin-top: 3rem; background: var(--papier); border-top: 2px solid var(--trait); color: var(--encre-douce); font-size: .9rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; padding-block: 1.4rem; }
/* Quel que soit le texte : les lignes s'équilibrent, pour qu'un mot ou un
   signe de ponctuation ne se retrouve jamais seul sur la dernière. */
.footer-inner > span { text-wrap: balance; }
.version { font-variant-numeric: tabular-nums; }

/* ── Cartes et pastels ────────────────────────────────────────────── */
.carte { background: var(--papier); border: 2px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.ciel { background: var(--ciel); border-color: transparent; }
.jaune { background: var(--jaune); border-color: transparent; }
.peche { background: var(--peche); border-color: transparent; }

/* Accueil provisoire : une annonce et trois tuiles, pour poser le ton de
   la future mosaïque. */
.annonce { display: grid; gap: 1.25rem; grid-template-columns: repeat(6, 1fr); }
.annonce > .carte { grid-column: span 6; }
.annonce .principale { padding: clamp(1.75rem, 1rem + 4vw, 3.5rem); }
.annonce .principale p { font-size: 1.15rem; max-width: 38rem; margin-bottom: 0; }
.annonce .tuile-annonce { box-shadow: none; }
.annonce .tuile-annonce h2 { font-size: 1.15rem; margin-bottom: .3em; }
.annonce .tuile-annonce p { margin: 0; font-size: .98rem; }
@media (min-width: 46rem) { .annonce .tuile-annonce { grid-column: span 2; } }

.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Accueil : la une et la mosaïque ──────────────────────────────── */
.tuile { padding: 0; overflow: hidden; box-shadow: none; }
.tuile-lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tuile-lien:hover { color: inherit; }
.tuile-lien:hover .tuile-titre { color: var(--bleu); }
/* Le cadre rogne l'image : au survol de la tuile (image ou texte), elle
   grossit très légèrement sans déborder sur le texte. */
.tuile-cadre { overflow: hidden; background: var(--trait); }
.tuile-image { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.tuile-lien:hover .tuile-image, .tuile-lien:focus-visible .tuile-image { transform: scale(1.035); }
.tuile-texte { padding: 1.15rem 1.35rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tuile-titre { margin: 0; font-size: 1.25rem; }
.tuile-type, .surtitre { margin: 0; font: 800 .74rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.surtitre { margin-bottom: .6rem; }
.liste-entete { margin-bottom: 2rem; }
.liste-entete h1 { margin-bottom: .4em; }
.liste-entete.avec-photo { display: flex; gap: 1.5rem; align-items: flex-start; }
.liste-photo { width: 6rem; height: 6rem; flex: none; border-radius: 50%; object-fit: cover; }
@media (max-width: 40rem) { .liste-entete.avec-photo { flex-direction: column; gap: .9rem; } .liste-photo { width: 4.5rem; height: 4.5rem; } }

/* Rubriques et étiquettes d'un article : des pastilles cliquables. */
/* La page de résultats de la recherche. */
.recherche-page { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 38rem; margin-top: 1.1rem; }
.recherche-page input { flex: 1 1 14rem; }
.recherche-page { position: relative; }
.recherche-page .recherche-suggestions { left: 0; right: 0; top: calc(100% + .3rem); }
.recherche-bloc { margin-top: 2.25rem; }
.recherche-bloc > h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.recherche-jeux { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.recherche-jeux a { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: var(--papier); color: var(--encre); text-decoration: none; }
.recherche-jeux a:hover { border-color: var(--bleu); }
.recherche-jeux img { width: 64px; height: 64px; object-fit: contain; border-radius: .5rem; background: #fff; flex: none; }
.recherche-jeux span { display: grid; min-width: 0; }
.recherche-jeux strong { font: 800 1.02rem/1.25 var(--titres); }
.recherche-jeux small { color: var(--encre-douce); font-size: .88rem; }
/* À la fin d'un article sur une gamme entière : ses boîtes, dans les mêmes petites fiches. */
.gamme-suite { margin: 1rem 0 0; font-weight: 700; }
/* Page d'une gamme : les boîtes viennent sous les tuiles des articles. */
.mosaique + .etagere-suite { margin-top: 2.2rem; }
.gamme-fiches { margin-top: 1rem; }
.fiche-numero { margin: 0 0 .2rem; }
.fiche-articles { margin-top: .9rem; max-width: 34rem; }
.recherche-proposition { font-size: 1.15rem; }
.tuile-extrait { font-size: .93rem; color: var(--encre-douce); }
/* Le mot trouvé : en gras, sur un trait de surligneur clair qui se voit sur toutes les couleurs de tuile. */
mark { background: none; color: var(--encre); font-weight: 800; box-shadow: inset 0 -.5em rgba(255, 255, 255, .8); }
.rubriques, .etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.etiquettes { margin: 2rem 0 0; }
.rubrique { display: inline-block; padding: .35rem .75rem; border-radius: 999px; background: var(--papier); border: 2px solid var(--trait); font: 700 .82rem/1.1 var(--texte); color: var(--encre); text-decoration: none; }
.rubrique:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.rubrique.type { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.rubrique.type:hover { background: #981616; border-color: #981616; color: #fff; }
.tuile-chapo { margin: 0; font-size: .98rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tuile .meta { margin: auto 0 0; padding-top: .3rem; }

.mosaique { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
/* Les pastels tournent, toujours les trois mêmes : jamais de « sapin de Noël ». */
.mosaique > .tuile:nth-child(4n + 1) { background: var(--jaune); border-color: transparent; }
.mosaique > .tuile:nth-child(4n + 2) { background: var(--papier); }
.mosaique > .tuile:nth-child(4n + 3) { background: var(--peche); border-color: transparent; }
.mosaique > .tuile:nth-child(4n + 4) { background: var(--ciel); border-color: transparent; }

.tuile.une { background: var(--ciel); border-color: transparent; margin-bottom: 1.25rem; box-shadow: var(--ombre); }
.tuile.une .tuile-titre { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
/* Toute la tuile est déjà le lien : « Lire la suite » le dit, sans en être un second. */
.tuile-suite { margin: 0; font: 700 .92rem/1.2 var(--texte); color: var(--bleu-fonce); }
.tuile-lien:hover .tuile-suite { text-decoration: underline; }
.tuile.une .tuile-chapo { font-size: 1.1rem; -webkit-line-clamp: 5; }
.tuile.une .tuile-texte { padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); justify-content: center; }
@media (min-width: 52rem) {
  .tuile.une .tuile-lien { flex-direction: row; }
  .tuile.une .tuile-cadre { width: 58%; flex: none; }
  .tuile.une .tuile-image { height: 100%; aspect-ratio: auto; min-height: 22rem; }
}

.suite { display: flex; justify-content: center; margin: 2rem 0 0; }
.suite.charge a { opacity: .5; pointer-events: none; }

/* ── Un article ───────────────────────────────────────────────────── */
.article-entete { max-width: 46rem; margin-inline: auto; }
.chapo { font-size: 1.25rem; line-height: 1.55; color: var(--encre-douce); }
.article-tete { display: block; width: 100%; max-width: 56rem; height: auto; margin: 1.5rem auto 2rem; border-radius: var(--rayon); }
.article-colonne { max-width: 46rem; margin-inline: auto; }
/* Commentaires : sous l'article, les réponses des rédacteurs en retrait. */
.commentaires { margin-top: 3rem; }
.commentaires > h2 { font-size: 1.5rem; }
.commentaire { margin: 0 0 1rem; padding: 1rem 1.25rem; border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--papier); }
.commentaire.reponse { margin: 1rem 0 0 1.25rem; background: var(--creme); }
.commentaire-tete { margin: 0 0 .4rem; font-size: .92rem; color: var(--encre-douce); }
.commentaire-tete strong { color: var(--encre); }
.commentaire-texte p { margin: 0 0 .6em; }
.commentaire-texte p:last-child { margin: 0; }
.pastille { display: inline-block; padding: .15rem .5rem; border-radius: 999px; background: var(--bleu); color: #fff; font: 700 .7rem/1.3 var(--texte); letter-spacing: .03em; }
#formulaire-commentaire { margin-top: 1.5rem; box-shadow: none; scroll-margin-top: 6.5rem; }
#formulaire-commentaire h3 { margin: 0; }
.commentaires, .commentaire, .confirmation { scroll-margin-top: 6.5rem; }
/* Juste après l'envoi : la confirmation, à la place du formulaire. */
.confirmation { margin-top: 1.5rem; padding: 1.5rem; border: 3px solid var(--bleu); background: var(--ciel); box-shadow: none; }
.confirmation h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1.3rem; }
.confirmation h3 svg { flex: none; color: var(--bleu); }
.confirmation > p { margin: 0 0 1rem; }
.confirmation > p:last-child { margin: 0; font-weight: 700; }
.commentaire.en-attente { margin-bottom: .5rem; border-style: dashed; }
.pastille.attente { background: var(--jaune); color: var(--encre); }
.captcha img { display: block; margin: .3rem 0 .5rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); }
.captcha input { max-width: 12rem; text-transform: uppercase; letter-spacing: .15em; }
/* Le champ piège : invisible pour un humain, rempli par un robot. */
.piege { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
/* La page Contact : le formulaire des commentaires, seul sur sa page. */
.contact-formulaire, .contact-merci, .contact-texte { max-width: 44rem; }
.contact-texte { margin-bottom: 1.5rem; }
.contact-merci h2 { margin-top: 0; }
.g-commentaire .commentaire-texte { margin: .3rem 0 .6rem; }
.g-commentaire form { margin: 0; }
.g-commentaire .g-boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.g-commentaire details { margin-top: .6rem; }
.g-commentaire textarea { width: 100%; margin: .5rem 0; }
.bouton.petit { padding: .45rem .9rem; font-size: .9rem; }
.rappel { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--rayon-petit); background: var(--jaune); font-size: .98rem; }
.transparence { background: var(--papier); border: 2px dashed var(--trait); border-radius: var(--rayon-petit); padding: .8rem 1rem; font-size: .95rem; color: var(--encre-douce); }
.sommaire { background: var(--jaune); border-radius: var(--rayon); padding: 1.1rem 1.4rem; margin: 1.5rem 0 2rem; }
.sommaire-titre { font: 800 1.05rem/1.2 var(--titres); margin: 0 0 .5rem; }
.sommaire ol { margin: 0; padding-left: 1.2rem; }
.sommaire a { color: var(--encre); }

.prose { font-size: 1.125rem; line-height: 1.75; overflow-wrap: break-word; }
.prose h2 { margin: 2.2em 0 .6em; }
.prose h3 { margin: 1.8em 0 .5em; font-size: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.5em 0; padding: .9rem 1.2rem; background: var(--ciel); border-radius: var(--rayon-petit); font-size: 1.15rem; }
.prose blockquote p { margin: 0; }
.prose figure { margin: 1.75em 0; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: var(--rayon-petit); background: var(--trait); }
.prose figcaption { margin-top: .5rem; font-size: .92rem; color: var(--encre-douce); text-align: center; }
.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin: 1.75em 0; }
.galerie figure { margin: 0; }
.galerie figure img { aspect-ratio: 1; object-fit: cover; }

/* La fiche d'un jeu : la boîte à gauche, les caractéristiques à droite. */
.fiches { margin: 2.5rem 0; }
.fiches > h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.fiches .fiche + .fiche { margin-top: 1.25rem; }
.fiche { display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem 1.75rem; align-items: start; box-shadow: none; }
/* La boîte dans son cadre : un carré blanc au liseré arrondi, voulu comme tel
   sur le fond de l'encadré. La boîte y garde ses proportions, avec un peu d'air. */
.fiche-boite { width: 200px; height: 200px; object-fit: contain; padding: 8px; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: #fff; }
.fiche-texte { min-width: 0; grid-column: 2; }
.fiche-nom { margin: 0 0 .5rem; font-size: 1.25rem; }
.fiche-nom a { color: var(--encre); text-decoration: none; }
.fiche-nom a:hover { color: var(--bleu); text-decoration: underline; }
/* Les chiffres clés : une étiquette de couleur chacun, précédée de son pictogramme. */
.fiche-cles { display: flex; flex-wrap: wrap; gap: .5rem; margin: .1rem 0 .9rem; padding: 0; list-style: none; }
.fiche-cles li { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; font: 800 1rem/1.3 var(--titres); white-space: nowrap; }
.fiche-cles li::before { font-weight: 400; }
.fiche-cles small { font: 600 .78rem/1 var(--texte); color: var(--encre-douce); }
.cle-joueurs { background: var(--ciel); } .cle-joueurs::before { content: "👥"; }
.cle-duree { background: var(--jaune); } .cle-duree::before { content: "⏳"; }
.cle-age { background: var(--peche); } .cle-age::before { content: "🎂"; }
.cle-prix { background: #dff1e1; } .cle-prix::before { content: "💶"; }
/* Une étiquette à précision : un petit « + », et une bulle au survol, au focus ou à l'appui.
   La bulle s'ouvre sous la rangée d'étiquettes, calée à gauche : elle ne peut pas déborder de l'encadré. */
.fiche-cles { position: relative; }
.fiche-cles .a-precision { cursor: help; }
.fiche-cles .a-precision:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.cle-plus { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .1rem; border-radius: 50%; background: rgba(29, 43, 54, .14); font: 800 .8rem/1 var(--texte); align-self: center; }
.bulle { position: absolute; z-index: 10; left: 0; top: calc(100% + .35rem); width: max-content; max-width: 100%; padding: .55rem .8rem; border-radius: var(--rayon-petit); background: var(--encre); color: #fff; font: 500 .9rem/1.4 var(--texte); white-space: normal; box-shadow: 0 8px 20px rgba(29, 43, 54, .25); opacity: 0; visibility: hidden; transform: translateY(-.2rem); transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.a-precision:hover .bulle, .a-precision:focus .bulle { opacity: 1; visibility: visible; transform: none; }
.a-precision:hover, .a-precision:focus { box-shadow: 0 0 0 2px var(--encre); }
@media (prefers-reduced-motion: reduce) { .bulle { transition: none; } }
.fiche-phrases { display: grid; gap: .35rem; }
.fiche-phrases p { margin: 0; }
.fiche-liens { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.fiche-page { max-width: 52rem; }
.fiche-extensions { margin-top: 1.25rem; }
.fiche-articles { margin: 2.5rem 0 1.25rem; font-size: 1.5rem; }
@media (max-width: 36rem) {
  .fiche { grid-template-columns: 1fr; }
  .fiche-boite { width: 150px; height: 150px; padding: 6px; justify-self: center; }
  .fiche-texte { grid-column: 1; }
  .fiche-cles li { white-space: normal; }
}
.note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin: 2.5rem 0 0; padding: 1.25rem 1.6rem; box-shadow: none; }
.note p { margin: 0; }
.note-titre { font: 700 .8rem/1.2 var(--titres); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.note-jeu { margin-top: .3rem; font: 800 1.3rem/1.2 var(--titres); }
.note-valeur { display: flex; align-items: center; gap: 1rem; }
.etoiles { display: block; flex: none; width: 10.5rem; height: auto; overflow: visible; }
.note-chiffre { font: 800 2.4rem/1 var(--titres); white-space: nowrap; }
.note-chiffre small { font: 600 1.05rem/1 var(--titres); color: var(--encre-douce); }
.bilan.apres-note { margin-top: 1.25rem; }
@media (max-width: 30rem) { .etoiles { width: 8.5rem; } .note-chiffre { font-size: 2rem; } }
.g-note-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.g-note-ligne input[type="range"] { flex: 1 1 14rem; max-width: 26rem; min-height: 2.5rem; margin: 0; accent-color: var(--bleu); }
.g-note { max-width: 6.5rem; font-weight: 700; }
.g-note-sur { color: var(--encre-douce); font-weight: 650; }
.g-note-niveau { display: block; font: 800 1.15rem/1.3 var(--titres); }
.bilan { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 2.5rem 0; }
.bilan .carte { box-shadow: none; border-color: transparent; }
.bilan h2 { font-size: 1.2rem; }
.bilan ul { margin: 0; padding-left: 1.2rem; }
.bilan li { margin-bottom: .4em; }
.bilan-plus { background: #dff1e1; }
.bilan-moins { background: var(--peche); }

/* Les jeux du moment d'un rédacteur. Sur sa page, des cartes couchées, deux
   par ligne : la boîte à gauche ; à droite le nom, son mot en bulle et les
   boutons (l'article, et la boutique par sa seule icône). Sous ses articles,
   un seul jeu, tiré au hasard, dans la même disposition mais sans carte. */
.etagere-bloc { margin-bottom: 2.5rem; }
.etagere-bloc h2, .etagere-suite { font-size: 1.4rem; margin: 0 0 1rem; }
.etagere { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.etagere li, .moment-un { display: flex; gap: 1.25rem; align-items: stretch; }
.etagere li { padding: 1rem; background: var(--papier); border: 2px solid var(--trait); border-radius: var(--rayon); }
.moment-pose { flex: none; width: 150px; align-self: flex-start; }
.moment-boite { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 8px; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: #fff; transition: transform .15s ease; }
.moment-pose:hover .moment-boite { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .moment-boite { transition: none; } }
.moment-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.moment-texte p { margin: 0; }
.moment-nom { font: 800 1.2rem/1.25 var(--titres); }
.moment-nom a { color: inherit; text-decoration: none; }
.moment-nom a:hover { text-decoration: underline; }
.moment-mot { padding: .5rem .9rem; border-radius: 4px 14px 14px 14px; background: var(--ciel); font-size: .95rem; line-height: 1.4; }
.moment-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto !important; padding-top: .25rem; }
.moment-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--trait); border-radius: 999px; background: var(--papier); color: var(--encre); font: 700 .9rem/1 var(--texte); text-decoration: none; }
.moment-bouton:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.moment-bouton.achat { padding: 0; width: 2.75rem; border-color: var(--bleu); background: var(--bleu); color: #fff; }
.moment-bouton.achat:hover { border-color: var(--bleu-fonce); background: var(--bleu-fonce); color: #fff; }
@media (max-width: 52rem) { .etagere { grid-template-columns: 1fr; } }
@media (max-width: 36rem) { .etagere li, .moment-un { gap: .9rem; } .moment-pose { width: 110px; } .moment-boite { padding: 6px; } }

/* La page d'un éditeur, d'un auteur, d'un illustrateur : ses jeux dans les
   mêmes cartes, et sous chaque nom ses articles, en lignes cliquables. */
.acteur-compte { margin-left: .5rem; font: 500 .95rem/1 var(--texte); color: var(--encre-douce); letter-spacing: 0; }
.acteur-jeux .surtitre { margin: 0; }
.acteur-jeux .moment-nom { margin: 0; }
.acteur-articles { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .4rem; align-self: stretch; }
.acteur-articles a { display: grid; gap: .1rem; padding: .5rem .8rem; border-radius: var(--rayon-petit); background: var(--creme); color: var(--encre); text-decoration: none; }
.acteur-articles a:hover { background: var(--ciel); }
.acteur-articles strong { font: 700 .95rem/1.3 var(--texte); }
.acteur-articles small { color: var(--encre-douce); font-size: .82rem; }
.fiche-phrases a { color: inherit; text-decoration-color: var(--bleu); }
.fiche-phrases a:hover { color: var(--bleu-fonce); }

.signature > div { flex: 1; min-width: 0; }
.moment { margin-top: 1.1rem; padding-top: 1rem; border-top: 2px solid var(--trait); min-width: 0; }
.moment-titre { margin: 0 0 .7rem; }
.moment-un .moment-pose { width: 110px; }
.moment-un .moment-boite { padding: 6px; }

/* « Qui sommes-nous ? » : un portrait par rédacteur, tiré de son profil. */
.portrait { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--trait); }
.portrait-entete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.portrait-entete h2 { margin: 0; font-size: 1.6rem; }
.portrait-entete h2 a { color: inherit; text-decoration: none; }
.portrait-entete h2 a:hover { color: var(--bleu); text-decoration: underline; }
.portrait-titre-etagere { margin: 1.5rem 0 .75rem; font-size: 1.15rem; }
/* L'étagère dans la colonne de lecture : mêmes cartes, en plus petit. */
.portrait-etagere { gap: .75rem; }
.portrait-etagere li { gap: .9rem; padding: .75rem; border-radius: var(--rayon-petit); }
.portrait-etagere .moment-pose { width: 84px; }
.portrait-etagere .moment-boite { padding: 5px; }
.portrait-etagere .moment-nom { font-size: 1.02rem; }
.portrait-etagere .moment-mot { font-size: .88rem; padding: .4rem .7rem; }
.portrait-etagere .moment-bouton { min-height: 2.25rem; font-size: .85rem; }
.portrait-suite { margin-top: 1rem; font-weight: 700; }
.portrait-fin { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--trait); }

/* « À lire aussi » : trois tuiles sous l'article, sur toute la largeur du site. */
.a-lire-aussi { margin: 3rem 0 1rem; }
.a-lire-aussi > h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.a-lire-aussi .mosaique { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.signature { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2.5rem; box-shadow: none; }
.signature-photo { width: 5rem; height: 5rem; flex: none; border-radius: 50%; object-fit: cover; }
.signature-nom { font: 800 1.1rem/1.2 var(--titres); margin: 0 0 .3rem; }
.signature p:last-child { margin: 0; }
/* Sur téléphone : la photo à côté du nom seulement, et la présentation sur
   toute la largeur dessous (à côté de la photo, elle tenait en trois mots
   par ligne et laissait un grand vide au-dessus et au-dessous de la photo). */
@media (max-width: 40rem) {
  .signature { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem 1rem; }
  .signature > div { display: contents; }
  .signature-photo { width: 3.5rem; height: 3.5rem; }
  .signature .signature-nom { margin: 0; }
  .signature > div > p:not(.signature-nom) { grid-column: 1 / -1; }
  .signature > div > .moment { grid-column: 1 / -1; margin-top: 0; }
}
.alerte.apercu { margin-top: 1rem; background: var(--jaune); }

/* Une image de l'article en grand, par-dessus la page (blog/article.js).
   La page reste visible derrière, assombrie : l'image n'occupe donc pas tout
   l'écran. Sa légende s'affiche dessous. Un clic n'importe où, ou la touche
   Échap, ramène à l'article. */
.prose figure a { display: block; cursor: zoom-in; overflow: hidden; border-radius: var(--rayon-petit); background: var(--trait); }
.prose figure a img { border-radius: 0; }
.prose figure a:hover img, .prose figure a:focus-visible img { transform: scale(1.035); }
/* Sur téléphone, les photos prennent toute la largeur de l'écran, d'un bord à
   l'autre (la marge de la page est de 1,25rem de chaque côté), et celles
   d'une galerie s'empilent. Elles sont déjà aussi grandes que possible : on
   ne peut donc pas cliquer dessus. L'agrandissement est pour la tablette et
   l'ordinateur (même seuil dans blog/article.js). */
@media (max-width: 47.99rem) {
  .prose figure, .galerie, .article-tete { margin-inline: -1.25rem; }
  .article-tete { width: calc(100% + 2.5rem); max-width: none; border-radius: 0; }
  .galerie { grid-template-columns: 1fr; gap: .5rem; }
  .galerie figure { margin-inline: 0; }
  .galerie figure img { aspect-ratio: auto; }
  .prose figure a { pointer-events: none; cursor: default; border-radius: 0; }
  .prose figure img { border-radius: 0; }
  .prose figcaption { padding-inline: 1.25rem; }
}
.visionneuse { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: transparent; cursor: zoom-out; overflow: hidden; }
.visionneuse::backdrop { background: rgba(20, 28, 36, .6); }
.visionneuse[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
.visionneuse img { display: block; max-width: min(100vw - 2.5rem, 68rem); max-height: calc(100dvh - 11rem); width: auto; height: auto; border-radius: var(--rayon-petit); box-shadow: 0 18px 60px rgba(0, 0, 0, .45); background: var(--trait); }
.visionneuse p { margin: 0; padding: .55rem 1.1rem; max-width: min(100vw - 2.5rem, 46rem); color: #fff; background: rgba(20, 28, 36, .86); border-radius: var(--rayon-petit); text-align: center; font-size: .98rem; line-height: 1.45; text-wrap: balance; }
.visionneuse p:empty { display: none; }
.visionneuse-fermer { position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(20, 28, 36, .8); color: #fff; font: 400 1.6rem/1 var(--texte); cursor: pointer; }
.visionneuse-fermer:hover { background: rgba(20, 28, 36, 1); }

/* ── Formulaires ──────────────────────────────────────────────────── */
.formulaire { display: grid; gap: 1.1rem; }
.champ { margin: 0; display: grid; gap: .35rem; }
.champ label { font-weight: 650; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], textarea, select {
  width: 100%; font: inherit; color: inherit; background: #fff; border: 2px solid var(--trait); border-radius: var(--rayon-petit); padding: .7rem .9rem;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--ciel); outline-offset: 0; border-color: var(--bleu); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 700 1rem/1.2 var(--titres); color: #fff; background: var(--bleu); border: 0; border-radius: 999px; padding: .85rem 1.6rem; cursor: pointer; text-decoration: none; justify-self: start; }
.bouton:hover { background: var(--bleu-fonce); color: #fff; }

.alerte { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--rayon-petit); background: var(--ciel); }
.alerte.error { background: #fbe3df; color: #7f1414; }
.alerte.success { background: #dff1e1; color: #1c5a2a; }
.erreur { color: #9a1818; font-size: .92rem; }
.meta { color: var(--encre-douce); font-size: .92rem; }

textarea { resize: vertical; min-height: 7rem; }
.aide { display: block; color: var(--encre-douce); font-size: .9rem; }
.requis { color: var(--rouge); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.bouton.secondaire { background: transparent; color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.bouton.secondaire:hover { background: var(--ciel); color: var(--bleu-fonce); }

/* ── Espace de gestion ────────────────────────────────────────────── */
/* Le menu de la gestion prend la place de celui du blog, dans l'en-tête. */
.menu button { display: block; width: 100%; padding: .4rem .75rem; border: 0; border-radius: 999px; background: none; font: 700 .98rem/1.2 var(--titres); color: var(--encre); white-space: nowrap; cursor: pointer; }
.menu button:hover { background: var(--ciel); }
.menu form { margin: 0; }
.menu .compteur, .tuiles .compteur { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: var(--rouge); color: #fff; font: 700 .75rem/1.4 var(--texte); vertical-align: middle; }
@media (min-width: 66.01rem) { .site-header.reduit .menu button { padding-block: .22rem; font-size: .9rem; } }
@media (max-width: 66rem) {
  .site-header.js .menu button { padding: .75rem .8rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: var(--creme); font-size: 1rem; white-space: normal; }
  .site-header:not(.js) .menu button { width: auto; padding: .4rem .7rem; font-size: .95rem; }
}
/* Deux lignes (le blog, les jeux), un peu plus serrées que le menu du blog, et davantage tant que l'écran est juste assez large. */
@media (min-width: 66.01rem) { .menu-gestion a, .menu-gestion button { padding-inline: .4rem; font-size: .92rem; } }
@media (min-width: 66.01rem) and (max-width: 76rem) { .menu-gestion { column-gap: .25rem; } .menu-gestion a, .menu-gestion button { padding-inline: .3rem; font-size: .88rem; } .menu-gestion .compteur { margin-left: .15rem; padding-inline: .35rem; } }
/* Le compte du rédacteur : au bout de l'en-tête, un bouton rond à son nom
   qui déplie ses liens au survol, au clavier ou d'un appui. Sur téléphone,
   c'est un groupe du menu comme les autres, et le bouton n'en est que le titre. */
.menu-gestion .compte-bouton img, .compte-initiale { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover; }
.compte-initiale { display: grid; place-items: center; background: var(--bleu); color: #fff; font: 800 1rem/1 var(--titres); }
@media (min-width: 66.01rem) {
  .menu-gestion { grid-template-columns: auto 1fr auto; }
  .menu-compte { grid-column: 3; grid-row: 1 / span 2; position: relative; margin-left: .5rem; }
  .menu-gestion .compte-bouton { display: flex; align-items: center; gap: .5rem; width: auto; padding: .2rem .8rem .2rem .2rem; border: 2px solid var(--trait); background: var(--creme); font-size: .95rem; }
  .menu-gestion .compte-bouton:hover, .menu-compte:focus-within .compte-bouton { background: var(--ciel); border-color: var(--ciel); }
  .menu-compte ul { display: none; position: absolute; z-index: 20; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: .1rem; min-width: 13rem; padding: .4rem; background: var(--papier); border: 2px solid var(--trait); border-radius: var(--rayon-petit); box-shadow: 0 10px 24px rgba(29, 43, 54, .16); }
  .menu-compte:hover ul, .menu-compte:focus-within ul { display: flex; }
  .menu-compte ul a, .menu-compte ul button { padding: .5rem .8rem; border-radius: .5rem; font-size: .95rem; text-align: left; }
}
@media (min-width: 66.01rem) and (max-width: 80rem) { .menu-gestion .compte-bouton { padding: .2rem; } .compte-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 66rem) {
  /* Même poids que la règle des boutons du menu sur téléphone, qu'elle doit défaire : ici le bouton n'est qu'un titre. */
  .site-header.js .menu-gestion .compte-bouton, .site-header:not(.js) .menu-gestion .compte-bouton { display: flex; align-items: center; gap: .5rem; width: auto; margin: 1rem 0 .5rem; padding: 0; border: 0; background: none; font: 800 .78rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); cursor: default; }
  .menu-gestion .compte-bouton img, .compte-initiale { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
}
.tuiles .a-traiter { border-color: var(--rouge); }
/* Fiches de jeu */
.g-trois { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: start; }
.g-trois .large { grid-column: span 2; }
@media (max-width: 30rem) { .g-trois .large { grid-column: auto; } }
.g-jeux { display: grid; gap: .5rem; max-width: 34rem; }
.g-moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem; margin-top: .6rem; }
@media (max-width: 40rem) { .g-moment { grid-template-columns: 1fr; } .g-moment input:nth-child(even) { margin-bottom: .6rem; } }
.g-boite { width: 100px; height: 100px; object-fit: contain; border-radius: var(--rayon-petit); background: #fff; border: 2px solid var(--trait); }
.g-liste .carte.avec-boite { grid-template-columns: auto 1fr auto; }
.g-liste .carte.avec-boite .g-vignette { grid-column: 1; grid-row: 1 / span 2; width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .5rem; background: #fff; }
.g-liste .carte.avec-boite .g-liste-titre { grid-column: 2; grid-row: 1; }
.g-liste .carte.avec-boite .etat { grid-column: 3; grid-row: 1; justify-self: end; }
.g-liste .carte.avec-boite .meta { grid-column: 2; grid-row: 2; }
.g-liste .carte.avec-boite .g-liste-actions { grid-column: 3; grid-row: 2; }
@media (max-width: 36rem) { .g-liste .carte.avec-boite { grid-template-columns: auto 1fr; } .g-liste .carte.avec-boite .g-vignette { grid-row: 1 / span 4; align-self: start; } .g-liste .carte.avec-boite .etat { grid-column: 2; grid-row: 2; justify-self: start; } .g-liste .carte.avec-boite .meta { grid-row: 3; } .g-liste .carte.avec-boite .g-liste-actions { grid-column: 2; grid-row: 4; justify-content: flex-start; } }
.g-sous-menu { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: -.5rem 0 1.25rem; font-size: .95rem; }
.etat-a-verifier { background: #f8d7d2; color: #8a1c12; }
.etat-relue { background: #dff1e1; color: #1c5a2a; }
/* Saisie assistée (suggestions.js) : la liste s'ouvre sous le champ. */
.suggestions { position: relative; display: block; }
.suggestions-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .25rem); margin: 0; padding: .3rem; list-style: none; max-height: 18rem; overflow-y: auto; background: #fff; border: 2px solid var(--bleu); border-radius: var(--rayon-petit); box-shadow: 0 10px 24px rgba(29, 43, 54, .16); }
.suggestions-liste[hidden] { display: none; }
.suggestions-liste li { padding: .5rem .7rem; border-radius: .45rem; cursor: pointer; }
.suggestions-liste li:hover, .suggestions-liste li[aria-selected="true"] { background: var(--ciel); }
.g-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1.25rem; }
.g-recherche input[type="search"] { flex: 1 1 14rem; max-width: 28rem; }
.g-recherche select { width: auto; max-width: 100%; }
.g-liste-note { color: var(--encre); font-weight: 700; }
.g-liste-note.sans { padding: .1rem .5rem; border-radius: 999px; background: #f8d7d2; color: #8a1c12; }
.alerte.redaction { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
/* La gestion occupe toute la largeur du site, comme son menu. */

.g-titre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.g-titre h1 { margin: 0; }
.etat { display: inline-block; font: 700 .8rem/1 var(--texte); letter-spacing: .02em; padding: .4rem .7rem; border-radius: 999px; background: var(--trait); white-space: nowrap; }
.etat-publie { background: #dff1e1; color: #1c5a2a; }
.etat-relecture { background: var(--jaune); }
.g-onglets { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--trait); }
.g-onglets a { padding: .6rem 1rem; margin-bottom: -2px; border-bottom: 3px solid transparent; font: 700 .98rem/1.2 var(--texte); color: var(--encre-douce); text-decoration: none; }
.g-onglets a:hover { color: var(--encre); }
.g-onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--bleu); }
.g-onglets span { display: inline-block; margin-left: .25rem; padding: .1rem .5rem; border-radius: 999px; background: var(--trait); font-size: .8rem; color: var(--encre); }
.g-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.g-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.g-liste .carte { display: grid; gap: .3rem 1rem; grid-template-columns: 1fr auto; align-items: center; padding: 1rem 1.25rem; box-shadow: none; }
.g-liste-titre { font: 800 1.1rem/1.3 var(--titres); color: var(--encre); text-decoration: none; }
.g-liste-titre:hover { color: var(--bleu); }
.g-liste .meta { grid-column: 1; }
.g-liste-actions { grid-column: 2; display: flex; gap: 1rem; font-size: .92rem; justify-content: flex-end; }
@media (max-width: 36rem) { .g-liste .carte { grid-template-columns: 1fr; } .g-liste-actions { grid-column: 1; justify-content: flex-start; } }

.g-article textarea#id_corps { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: .98rem; line-height: 1.6; min-height: 28rem; }
.g-bloc { margin: 0; padding: 1rem 1.25rem 1.25rem; border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--papier); display: grid; gap: .9rem; min-width: 0; }
.g-bloc legend, .g-bloc summary { font: 800 1.05rem/1.2 var(--titres); padding: 0 .4rem; }
.g-bloc summary { cursor: pointer; padding: 0; }
/* Mise en forme d'un texte : la barre de boutons au-dessus, l'aide-mémoire dessous. */
.g-forme { display: flex; flex-wrap: wrap; gap: .35rem; }
.g-forme[hidden] { display: none; }
.g-forme button { min-height: 2.5rem; padding: .35rem .75rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: var(--papier); color: var(--encre); font: 600 .92rem/1.2 var(--texte); cursor: pointer; }
.g-forme button:hover { background: var(--ciel); border-color: var(--bleu); }
.g-forme button:focus-visible { outline: 3px solid var(--ciel); border-color: var(--bleu); }
.g-forme button strong { font-weight: 800; }
.g-forme .a-part { margin-left: .5rem; }
.g-forme .g-forme-aide { margin-left: auto; color: var(--bleu); border-color: var(--ciel); }
.g-aide-forme { width: min(100vw - 1.5rem, 44rem); max-height: min(100dvh - 1.5rem, 46rem); padding: 0; border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--papier); color: var(--encre); font-size: .95rem; box-shadow: 0 18px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.g-aide-forme[open] { display: flex; flex-direction: column; }
.g-aide-forme::backdrop { background: rgba(20, 28, 36, .6); }
.g-aide-forme > * { margin-inline: 1.25rem; }
.g-aide-forme > :last-child { margin-bottom: 1.25rem; }
.g-aide-forme .g-aide-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .8rem .8rem .8rem 1.25rem; border-bottom: 2px solid var(--trait); }
.g-aide-tete h2 { margin: 0; font: 800 1.15rem/1.2 var(--titres); }
.g-aide-fermer { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: none; color: var(--encre); font: 400 1.6rem/1 var(--texte); cursor: pointer; }
.g-aide-fermer:hover { background: var(--ciel); }
.g-aide-corps { margin: 0; padding: 0 1.25rem 1.25rem; overflow-y: auto; }
.g-aide-forme p { margin: .6rem 0; }
.g-aide-forme table { width: 100%; margin: .6rem 0; border-collapse: collapse; }
.g-aide-forme th, .g-aide-forme td { padding: .45rem .9rem .45rem 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.g-aide-forme th { color: var(--encre-douce); font-weight: 650; }
.g-aide-forme code { display: block; width: fit-content; padding: .05rem .35rem; border-radius: .35rem; background: var(--creme); font: .88rem/1.5 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.g-aide-forme td ul, .g-aide-forme td ol { margin: 0; padding-left: 1.2rem; }
.g-aide-corps > ul { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.g-aide-forme .ex-titre { font: 800 1.2rem/1.2 var(--titres); }
.g-aide-forme .ex-sous-titre { font: 800 1.02rem/1.2 var(--titres); }
.g-aide-forme .ex-lien { color: var(--bleu); text-decoration: underline; }
.g-aide-forme .ex-citation { display: block; padding-left: .7rem; border-left: 4px solid var(--jaune); font-style: italic; }
@media (max-width: 36rem) {
  .g-forme .a-part, .g-forme .g-forme-aide { margin-left: 0; }
  .g-forme button { flex: 1 1 auto; }
  /* Sur téléphone, ce qu'on obtient passe sous ce qu'on tape. */
  .g-aide-forme thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .g-aide-forme tr { display: grid; gap: .3rem; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
  .g-aide-forme td { padding: 0; border: 0; }
}
.g-deux { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.g-apercu { display: block; width: 12rem; max-width: 100%; height: auto; border-radius: var(--rayon-petit); }
.g-apercu.rond { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.libelle { font-weight: 650; }
.cases > div { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.cases-nombreuses { max-height: 13rem; overflow-y: auto; padding: .6rem .8rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: #fff; }
#filtre-etiquettes { max-width: 22rem; }
.cases [hidden] { display: none; }
.liste-etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.liste-etiquettes small { font-weight: 400; color: var(--encre-douce); }
.site-footer a { color: inherit; }
.cases label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.case label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; }
label.case { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
input[type="file"] { font: inherit; max-width: 100%; }

.vignettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.vignettes li { display: grid; gap: .4rem; align-content: start; }
.vignette { position: relative; display: block; padding: 0; border: 2px solid var(--trait); border-radius: var(--rayon-petit); overflow: hidden; background: var(--trait); cursor: copy; }
.vignette:hover { border-color: var(--bleu); }
.vignette img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vignette-numero { position: absolute; left: .35rem; bottom: .35rem; background: rgba(29, 43, 54, .82); color: #fff; font: 600 .75rem/1 ui-monospace, Consolas, monospace; padding: .3rem .45rem; border-radius: 6px; }
.vignettes input[type="text"] { padding: .4rem .6rem; font-size: .9rem; }

.g-actions { position: sticky; bottom: 0; padding: .9rem 0; background: linear-gradient(to top, var(--creme) 75%, transparent); }
.bouton.publier { background: #1f7a3a; }
.bouton.publier:hover { background: #17602d; }
.bouton.danger { background: var(--rouge); }
a.danger { color: var(--rouge); }
.alerte.a-relire ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alerte.warning { background: var(--jaune); }

.tuiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tuiles .carte { display: block; color: inherit; text-decoration: none; box-shadow: none; }
.tuiles a.carte:hover { border-color: var(--bleu); color: inherit; }
.tuiles h2 { font-size: 1.2rem; margin-bottom: .3em; }
.tuiles p { margin: 0; font-size: .98rem; }
.g-chiffres { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.g-chiffres li { padding: .9rem 1.1rem; border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--papier); }
.g-groupes { display: grid; gap: .25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); margin-bottom: .5rem; }
.g-groupes .surtitre { margin: 0 0 .5rem; }
.g-chiffres strong.long { font-size: 1.3rem; line-height: 1.45; }
.g-chiffres strong { display: block; font: 800 1.9rem/1.1 var(--titres); color: var(--encre); }
.g-chiffres span { font-size: .92rem; color: var(--encre-douce); }
.g-suite { margin: -1rem 0 1.75rem; font-weight: 650; }
/* Statistiques : des barres dessinées en CSS, sans bibliothèque. */
.g-graphiques { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.g-graphique { margin: 0; padding: 1.1rem 1.25rem 1.25rem; border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--papier); min-width: 0; }
.g-graphique.large { grid-column: 1 / -1; }
.g-graphique h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.colonnes { display: flex; align-items: flex-end; gap: clamp(.1rem, .6vw, .35rem); margin: 0; padding: 0; list-style: none; }
.colonnes li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* La barre monte dans une zone de hauteur fixe ; le nombre est posé dessus. */
.colonnes .zone { position: relative; width: 100%; height: 9rem; }
.colonnes .barre { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--part) * .85%); min-height: 2px; border-radius: .35rem .35rem 0 0; background: var(--bleu); }
.colonnes .nombre { position: absolute; left: 0; right: 0; bottom: calc(var(--part) * .85% + 2px); text-align: center; font: 700 .8rem/1.3 var(--texte); }
.colonnes .nom { margin-top: .3rem; font-size: .72rem; color: var(--encre-douce); white-space: nowrap; }
.colonnes.serrees .nom { writing-mode: vertical-rl; transform: rotate(180deg); height: 3.4rem; text-align: right; }
@media (max-width: 40rem) { .colonnes.serrees .nombre { font-size: .62rem; } .colonnes.serrees .nom { font-size: .62rem; } }
.g-graphiques + .meta { margin-top: 1.25rem; }
.lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.lignes li { display: grid; grid-template-columns: minmax(6rem, 38%) 1fr auto; align-items: center; gap: .6rem; font-size: .92rem; }
.lignes .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lignes .piste { height: .8rem; border-radius: 999px; background: var(--creme); overflow: hidden; }
.lignes .barre { display: block; height: 100%; border-radius: 999px; background: var(--bleu); }
.lignes .nombre { font-weight: 700; min-width: 2ch; text-align: right; }
.tuiles .a-venir { border-style: dashed; color: var(--encre-douce); }

@media (prefers-reduced-motion: no-preference) {
  .bouton, a { transition: background-color .15s ease, color .15s ease; }
  .tuile-image, .prose figure a img { transition: transform .45s ease; }
}

/* ── Pied de page : les liens d'information ───────────────────────── */
.footer-liens { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.footer-liens a { color: inherit; }

/* ── Connexion : le code ──────────────────────────────────────────── */
/* Un bouton qui se présente comme un lien (« Envoyer un nouveau code »). */
button.lien { padding: 0; border: 0; background: none; font: inherit; color: var(--bleu); text-decoration: underline; cursor: pointer; }
button.lien:hover { color: var(--bleu-fonce); }

/* ── Page introuvable ─────────────────────────────────────────────── */
.introuvable { max-width: 46rem; }
.introuvable code { padding: .1rem .4rem; border-radius: .4rem; background: var(--papier); border: 1px solid var(--trait); overflow-wrap: anywhere; }
.introuvable-suite { margin-top: 2.5rem; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); text-wrap: balance; }
.introuvable-article { max-width: 26rem; }