/* ==========================================================================
   Jeux prénoms (design "Corail") : accueil des jeux, courbe mystère, pendu, plus ou moins
   Templates : templates/games*.tpl ; comportements : theme/js/games.js
   S'appuie sur les variables et remises à zéro de .pg (theme/css/pages.css, chargé aussi sur ces pages).
   Contour des boutons en box-shadow : le thème force border-color:#fff !important sur button:focus.
   ========================================================================== */

body[class*="tpl-games"]{ background:#fbf8f6; }

.pg.gm{ --gm-ok:#2f8f5b; --gm-ok-bg:#e7f6ed; --gm-ok-ink:#1d6b3f; }

/* ---------- En-tête de page ---------- */
.gm-head{ margin:18px 0 24px; }
.gm .gm-h1{ font-size:clamp(30px,5vw,44px); letter-spacing:-.03em; }
.gm .gm-lead{ margin-top:10px !important; max-width:700px; font-size:17px; line-height:1.55; color:var(--pg-text2); text-wrap:pretty; }

/* ---------- Boutons ---------- */
.gm .gm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:11px 20px;
	font-weight:700; font-size:15px; line-height:1.2; white-space:nowrap; cursor:pointer; }
.gm .gm-btn-coral, .gm .gm-btn-coral:focus{ background:var(--pg-coral-d); color:#fff; }
.gm .gm-btn-coral:hover{ background:var(--pg-coral-dd); color:#fff; }
.gm .gm-btn-dark, .gm .gm-btn-dark:focus{ background:var(--pg-ink); color:#fff; }
.gm .gm-btn-dark:hover{ background:#000; color:#fff; }
.gm .gm-btn-ghost, .gm .gm-btn-ghost:focus{ background:#fff; color:var(--pg-ink); box-shadow:inset 0 0 0 1.5px var(--pg-line2); }
.gm .gm-btn-ghost:hover{ background:#fffaf8; color:var(--pg-ink); box-shadow:inset 0 0 0 1.5px var(--pg-tint-bd); }
.gm .gm-btn:disabled{ opacity:.4; cursor:default; }
.gm .gm-link{ font-weight:700; color:var(--pg-coral-d); }
.gm .gm-link:hover{ color:var(--pg-coral-dd); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Plateau de jeu ---------- */
.gm-board{ position:relative; background:#fff; border:1px solid var(--pg-line); border-radius:28px; box-shadow:var(--pg-shadow);
	padding:22px 24px 26px; min-height:320px; }
.gm .gm-empty{ padding:60px 10px; text-align:center; color:var(--pg-muted); }

.gm-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.gm-bar-end{ margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gm-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--pg-field); border-radius:999px; padding:6px 12px;
	font-size:13px; font-weight:600; color:var(--pg-text2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.gm-chip b{ color:var(--pg-ink); font-weight:800; }
.gm-chip-accent{ background:var(--pg-tint); color:var(--pg-coral-dd); }
.gm-chip-accent b{ color:var(--pg-coral-dd); }
.gm-chip-f{ background:#fbe8f1; color:#8f2356; }
.gm-chip-m{ background:#e3f0fb; color:#0e5a91; }
.gm-chip-x{ background:#efe9f8; color:#5b3f8c; }

/* Choix de la difficulté */
.gm-seg{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--pg-field); }
.gm-seg-l{ font-size:12px; font-weight:700; color:var(--pg-muted); padding:0 8px 0 6px; }
.gm .gm-seg-b{ border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700; color:var(--pg-text2); cursor:pointer; }
.gm .gm-seg-b:hover{ color:var(--pg-ink); }
.gm .gm-seg-b.is-on{ background:var(--pg-ink); color:#fff; }

.gm .gm-q{ margin:2px 0 14px !important; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:22px; line-height:1.2; letter-spacing:-.02em; }

/* Retour après une réponse */
.gm-reveal{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; padding:14px 16px; border-radius:18px;
	background:var(--pg-paper); border:1px solid var(--pg-line); animation:gm-in .25s ease-out both; }
.gm-reveal[hidden]{ display:none; }
.gm .gm-reveal-t{ font-size:15.5px; }
.gm-reveal-t strong{ font-weight:800; }
.gm-ok{ color:var(--gm-ok-ink); font-weight:800; }
.gm-ko{ color:var(--pg-coral-dd); font-weight:800; }
.gm-reveal-a{ margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }

/* Fin de partie */
.gm-end{ padding:30px 8px 14px; text-align:center; animation:gm-in .3s ease-out both; }
.gm .gm-end-score{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(26px,4.4vw,40px); line-height:1.05; letter-spacing:-.03em; }
.gm .gm-end-msg{ margin:10px auto 4px !important; max-width:520px; font-size:17px; color:var(--pg-text2); }
.gm-end-actions{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.gm .gm-end-best{ margin-top:16px !important; font-size:13.5px; color:var(--pg-muted); }
.gm .gm-end-copied{ margin-top:10px !important; font-size:13.5px; color:var(--gm-ok-ink); font-weight:600; min-height:1.3em; }
.gm-end-year{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; color:var(--pg-text2); }
.gm .gm-end-year select{ border:1px solid var(--pg-line2); border-radius:12px; padding:8px 10px; font:inherit; background:#fff; color:var(--pg-ink); }

/* ---------- Courbe mystère ---------- */
.gm-chart{ position:relative; height:260px; margin:0 0 20px; }
.gm-plot{ position:absolute; left:0; right:0; top:8px; bottom:24px; }
.gm-plot svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gm-plot svg.is-drawing{ animation:gm-draw 1.1s ease-out both; }
.gm-area{ fill:rgba(232,96,79,.14); }
.gm-line{ fill:none; stroke:var(--pg-coral); stroke-width:3px; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.gm-grid{ position:absolute; left:0; right:0; border-top:1px dashed var(--pg-line2); pointer-events:none; }
.gm-grid span{ position:absolute; left:0; top:-18px; font-size:11px; color:var(--pg-muted); font-variant-numeric:tabular-nums; background:rgba(255,255,255,.85); padding:0 4px 0 0; border-radius:4px; }
.gm-grid-0{ border-top:1px solid var(--pg-line2); }
.gm-ticks{ position:absolute; left:0; right:0; bottom:0; height:18px; }
.gm-ticks span{ position:absolute; transform:translateX(-50%); font-size:11px; color:var(--pg-muted); }
.gm-peak{ position:absolute; inset:0; pointer-events:none; animation:gm-in .25s ease-out both; }
.gm-peak-dot{ position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--pg-coral); transform:translate(-50%,-50%); }
.gm-peak-tip{ position:absolute; transform:translate(-50%,-165%); background:var(--pg-ink); color:#fff; font-size:12px; font-weight:600;
	padding:4px 9px; border-radius:9px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.gm-peak-tip.is-l{ transform:translate(-12%,-165%); }
.gm-peak-tip.is-r{ transform:translate(-88%,-165%); }

.gm-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.gm-choices.is-6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.gm .gm-choice{ min-height:54px; border-radius:16px; padding:12px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--pg-line2);
	font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--pg-ink); cursor:pointer;
	transition:background .15s, box-shadow .15s, opacity .15s; }
.gm .gm-choice:hover:not(:disabled){ background:#fffaf8; box-shadow:inset 0 0 0 1.5px var(--pg-coral); }
.gm .gm-choice:disabled{ cursor:default; }
.gm .gm-choice.is-right{ background:var(--gm-ok-bg); box-shadow:inset 0 0 0 2px var(--gm-ok); color:var(--gm-ok-ink); }
.gm .gm-choice.is-wrong{ background:var(--pg-tint); box-shadow:inset 0 0 0 2px var(--pg-coral-d); color:var(--pg-coral-dd); }
.gm .gm-choice.is-dim{ opacity:.5; }
.gm-kbd{ display:inline-block; margin-right:8px; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; color:var(--pg-muted);
	border:1px solid var(--pg-line2); border-radius:6px; padding:0 5px; vertical-align:2px; }
@media (hover:none){ .gm-kbd{ display:none; } }

/* ---------- Pendu ---------- */
.gm-hm{ display:grid; grid-template-columns:clamp(140px,22%,210px) minmax(0,1fr); gap:24px; align-items:start; }
.gm-hm-art svg{ display:block; width:100%; height:auto; }
.gm-gallows{ fill:none; stroke:#d9cbc3; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.gm-part{ fill:none; stroke:var(--pg-ink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .25s; }
.gm-part.is-on{ opacity:1; }
.gm-hm.is-lost .gm-part{ stroke:var(--pg-coral-d); }
.gm-hm-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
/* Le prénom tient toujours sur une ligne : les cases rétrécissent (jusqu'à 12 lettres + trait d'union) */
.gm-word{ display:flex; flex-wrap:nowrap; align-items:flex-end; gap:8px; margin:10px 0 16px; }
.gm-slot{ flex:0 1 42px; min-width:0; height:clamp(38px,7.4vw,54px); border-bottom:3px solid var(--pg-ink); display:grid; place-items:center;
	font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(19px,4.2vw,32px); line-height:1; }
.gm-slot.is-hyph{ flex:0 0 auto; border-bottom:0; }
.gm-slot.is-new{ animation:gm-pop .3s ease-out both; }
.gm-slot.is-missed{ color:var(--pg-coral-d); }
.gm .gm-hint{ display:inline-block; margin-bottom:14px !important; padding:8px 12px; border-radius:12px; background:var(--pg-tint); color:var(--pg-coral-dd);
	font-size:14.5px; font-weight:600; animation:gm-in .25s ease-out both; }
.gm .gm-hint[hidden]{ display:none; }
.gm-keys{ display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:6px; }
.gm .gm-key{ height:44px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--pg-line2); font-weight:700; font-size:16px; color:var(--pg-ink); cursor:pointer; }
.gm .gm-key:hover:not(:disabled){ background:#fffaf8; box-shadow:inset 0 0 0 1.5px var(--pg-coral); }
.gm .gm-key:disabled{ cursor:default; }
.gm .gm-key.is-hit{ background:var(--gm-ok-bg); box-shadow:inset 0 0 0 1.5px var(--gm-ok); color:var(--gm-ok-ink); }
.gm .gm-key.is-miss{ background:var(--pg-field); box-shadow:none; color:#b8aba3; text-decoration:line-through; }

/* ---------- Plus ou moins ---------- */
.gm .gm-hl-q{ margin:0 auto 16px !important; max-width:620px; text-align:center; font-size:16px; color:var(--pg-text2); }
.gm-hl-q strong{ color:var(--pg-ink); }
.gm-duel{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:stretch; }
.gm-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:240px; padding:24px 16px 20px;
	border-radius:24px; background:var(--pg-paper); box-shadow:inset 0 0 0 1px var(--pg-line); text-align:center; transition:box-shadow .2s, background .2s; }
.gm-card.is-new{ animation:gm-in .3s ease-out both; }
.gm-card-f{ background:#fdf1f6; }
.gm-card-m{ background:#eef6fd; }
.gm-card-x{ background:#f5f1fb; }
.gm-card.is-right{ box-shadow:inset 0 0 0 3px var(--gm-ok); }
.gm-card.is-wrong{ box-shadow:inset 0 0 0 3px var(--pg-coral-d); }
.gm-card-sex{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pg-muted); }
.gm-card-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,38px); line-height:1.05; letter-spacing:-.03em; overflow-wrap:anywhere; }
.gm .gm-card-name a:hover{ color:var(--pg-coral-d); }
.gm-card-n{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums; }
.gm-card-u{ font-size:13px; color:var(--pg-muted); }
.gm-card-btns{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:220px; margin-top:8px; }
.gm-vs{ align-self:center; width:48px; height:48px; border-radius:50%; background:var(--pg-ink); color:#fff; display:grid; place-items:center;
	font-weight:800; font-size:14px; letter-spacing:.02em; }

/* ---------- Accueil des jeux ---------- */
.gm-h2{ margin:0 0 12px !important; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.02em; }
.gm-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.gm .gm-hub-card{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; border-radius:24px; background:#fff; border:1px solid var(--pg-line);
	box-shadow:var(--pg-shadow); transition:transform .15s, border-color .15s; }
.gm .gm-hub-card:hover{ transform:translateY(-2px); border-color:var(--pg-tint-bd); }
.gm-ill{ height:128px; margin-bottom:6px; border-radius:18px; background:var(--pg-tint); display:grid; place-items:center; }
.gm-ill svg{ width:62%; height:auto; overflow:visible; }
.gm-ill-line{ fill:none; stroke:var(--pg-coral-d); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.gm-ill-fill{ fill:rgba(232,96,79,.18); }
.gm-ill-ink{ fill:var(--pg-ink); }
.gm-ill-coral{ fill:var(--pg-coral); }
.gm-ill-dot{ fill:#fff; stroke:var(--pg-coral-d); stroke-width:3; }
.gm-ill-text{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:18px; fill:var(--pg-ink); text-anchor:middle; }
.gm-hub-t{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em; }
.gm-hub-d{ color:var(--pg-text2); font-size:15px; }
.gm-hub-go{ margin-top:auto; padding-top:6px; font-weight:700; color:var(--pg-coral-d); }

/* ---------- Règles, source, autres jeux ---------- */
.gm-info{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
.gm-box{ padding:20px 22px; border-radius:22px; background:#fff; border:1px solid var(--pg-line); }
.gm-box p{ color:var(--pg-text2); font-size:15.5px; line-height:1.6; text-wrap:pretty; }
.gm-solo{ margin-top:28px; }

/* ---------- Colonne latérale (templates/includes/games_aside.tpl) ----------
   Mise en page .pg-cols / .pg-aside de pages.css ; ici la colonne suit la page (elle est haute)
   et seul son dernier encadré reste collé sous le header : la colonne s'étire donc sur toute la hauteur. */
.gm .gm-cols{ align-items:stretch; }
.gm .gm-aside{ position:static; }
@media (min-width:1000px){
	.gm-aside-stick{ position:sticky; top:140px; }
}
.gm-rec-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 2px; border-top:1px solid var(--pg-line3); font-size:14px; }
.gm-rec-list li:first-child{ border-top:0; }
.gm .gm-rec-list a{ font-weight:600; }
.gm .gm-rec-list a:hover{ color:var(--pg-coral-d); }
.gm-rec-v{ flex:none; font-weight:800; color:var(--pg-coral-dd); font-variant-numeric:tabular-nums; }
.gm .gm-side-a{ display:flex; align-items:center; gap:12px; padding:8px; margin:0 -8px; border-radius:14px; }
.gm .gm-side-a:hover{ background:var(--pg-tint); }
.gm-side-ill{ flex:none; width:62px; height:38px; border-radius:10px; background:var(--pg-tint); display:grid; place-items:center; }
.gm-side-a:hover .gm-side-ill{ background:#fff; }
.gm-side-ill svg{ width:82%; height:auto; overflow:visible; }
.gm-side-t{ display:block; font-weight:700; font-size:14.5px; line-height:1.25; }
.gm-side-d{ display:block; margin-top:1px; font-size:12.5px; line-height:1.3; color:var(--pg-muted); }
/* Colonne principale plus étroite quand la colonne latérale est à côté (1000 à 1180 px) */
@media (min-width:1000px) and (max-width:1180px){
	.gm-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.gm-info{ grid-template-columns:1fr; }
}

/* ---------- Commun aux jeux à saisie / chrono ---------- */
.gm [hidden]{ display:none !important; }
.gm-start{ padding:26px 8px 12px; text-align:center; animation:gm-in .25s ease-out both; }
.gm .gm-start-big{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(30px,5vw,42px); letter-spacing:-.03em; line-height:1.1; }
.gm .gm-start-q{ margin:8px 0 18px !important; font-size:17px; color:var(--pg-text2); }
.gm-letter{ width:96px; height:96px; margin:0 auto 6px; border-radius:26px; background:var(--pg-coral-d); color:#fff; display:grid; place-items:center;
	font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:60px; line-height:1; }
.gm-letter.gm-letter-s{ flex:none; width:50px; height:50px; margin:0; border-radius:14px; font-size:28px; }
.gm-type{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.gm .gm-input{ flex:1 1 auto; min-width:0; height:50px; margin:0; padding:0 16px; border:0; border-radius:14px; background:#fff;
	box-shadow:inset 0 0 0 1.5px var(--pg-line2); font:600 17px 'DM Sans',sans-serif; color:var(--pg-ink); outline:none; }
.gm .gm-input:focus{ box-shadow:inset 0 0 0 2px var(--pg-coral); }
.gm .gm-input:disabled{ background:var(--pg-paper); }
.gm-chip-timer{ font-size:14px; }
.gm-chip-timer.is-low{ background:var(--pg-coral-d); color:#fff; }
.gm .gm-feedback{ min-height:1.5em; margin:0 0 10px !important; font-weight:700; font-size:15px; }
.gm .gm-feedback.is-ok{ color:var(--gm-ok-ink); }
.gm .gm-feedback.is-ko{ color:var(--pg-coral-dd); }
.gm-found{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px !important; }
.gm-found-i{ padding:6px 12px; border-radius:999px; font-size:14px; font-weight:600; background:var(--pg-field); animation:gm-pop .2s ease-out both; }
.gm-found-i b{ color:var(--pg-coral-dd); }
.gm-found-2{ background:#e3f0fb; }
.gm-found-3{ background:var(--pg-tint); }
.gm-found-x{ color:var(--pg-muted); }
.gm-found-i a:hover{ text-decoration:underline; }
.gm-range{ display:block; width:100%; max-width:560px; height:28px; margin:0 auto; accent-color:var(--pg-coral-d); cursor:pointer; }
.gm .gm-reveal-sub{ display:block; margin-top:2px; font-size:13.5px; color:var(--pg-muted); }
.gm .gm-choice-sub{ display:block; margin-top:3px; font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--pg-muted); }
.gm .gm-choice.is-right .gm-choice-sub{ color:var(--gm-ok-ink); }

/* ---------- Devine l'année ---------- */
.gm-yr-lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.gm-yr-list{ padding:12px 16px 8px; border-radius:18px; background:var(--pg-paper); }
.gm-yr-list.is-f{ background:#fdf1f6; }
.gm-yr-list.is-m{ background:#eef6fd; }
.gm .gm-yr-h{ margin-bottom:4px !important; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pg-muted); }
.gm-yr-list ol{ counter-reset:gm-r; }
.gm-yr-list li{ counter-increment:gm-r; display:flex; align-items:baseline; gap:10px; padding:6px 0; border-top:1px solid rgba(43,36,33,.07); }
.gm-yr-list li:first-child{ border-top:0; }
.gm-yr-list li::before{ content:counter(gm-r); width:14px; font-size:12.5px; font-weight:700; color:var(--pg-muted); }
.gm-yr-name{ flex:1; font-weight:700; font-size:16.5px; }
.gm-yr-n{ font-size:13px; color:var(--pg-muted); font-variant-numeric:tabular-nums; }
.gm-yr-pick, .gm-pr-pick{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:18px; }
.gm-yr-row{ display:flex; align-items:center; gap:16px; }
.gm-yr-val{ min-width:3.2ch; text-align:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:46px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.gm .gm-yr-step{ width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px var(--pg-line2); font-size:22px; font-weight:700; cursor:pointer; }
.gm .gm-yr-step:hover:not(:disabled){ box-shadow:inset 0 0 0 1.5px var(--pg-coral); }

/* ---------- Juste prix ---------- */
.gm .gm-pr-val{ flex:none; width:100%; max-width:260px; height:60px; text-align:center; font:800 30px 'Bricolage Grotesque',sans-serif; letter-spacing:-.02em; }

/* ---------- Top 10 chrono ---------- */
.gm-t10{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto); grid-auto-flow:column; gap:8px; }
.gm-t10-slot{ display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 14px; border-radius:14px; background:var(--pg-paper); box-shadow:inset 0 0 0 1px var(--pg-line); }
.gm-t10-rank{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--pg-ink); color:#fff; display:grid; place-items:center; font-size:12.5px; font-weight:800; }
.gm-t10-name{ flex:1; min-width:0; font-weight:700; font-size:17px; }
.gm-t10-n{ font-size:12.5px; color:var(--pg-muted); font-variant-numeric:tabular-nums; }
.gm-t10-slot.is-found{ background:var(--gm-ok-bg); box-shadow:inset 0 0 0 1.5px var(--gm-ok); animation:gm-pop .25s ease-out both; }
.gm-t10-slot.is-found .gm-t10-rank{ background:var(--gm-ok); }
.gm-t10-slot.is-missed .gm-t10-name{ color:var(--pg-coral-dd); }
.gm-t10-slot a:hover{ text-decoration:underline; }

/* ---------- Anagrammes ---------- */
.gm-tiles{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:8px 0 18px; }
.gm-tile{ width:48px; height:56px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--pg-line2), 0 3px 0 var(--pg-line2);
	display:grid; place-items:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:28px; animation:gm-pop .2s ease-out both; }

/* ---------- Prénom du jour ---------- */
.gm-wd-grid{ display:grid; gap:6px; width:min(100%, calc(var(--gm-wd-n) * 62px)); margin:4px auto 10px; }
.gm-wd-row{ display:grid; grid-template-columns:repeat(var(--gm-wd-n),minmax(0,1fr)); gap:6px; }
.gm-wd-row.is-shake{ animation:gm-shake .4s ease-in-out; }
.gm-wd-tile{ aspect-ratio:1; display:grid; place-items:center; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 2px var(--pg-line2);
	font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(20px,5vw,30px); line-height:1; color:var(--pg-ink); }
.gm-wd-tile.is-typed{ box-shadow:inset 0 0 0 2px var(--pg-ink); animation:gm-pop .12s ease-out both; }
.gm-wd-tile.is-ok, .gm-wd-tile.is-near, .gm-wd-tile.is-no{ color:#fff; box-shadow:none; animation:gm-flip .5s ease var(--d, 0s) both; }
.gm-wd-tile.is-ok{ background:var(--gm-ok); }
.gm-wd-tile.is-near{ background:#d99a1e; }
.gm-wd-tile.is-no{ background:#8a7f78; }
.gm-wd-tile.no-anim{ animation:none; }
.gm .gm-wd-msg{ min-height:1.5em; margin:0 0 10px !important; text-align:center; font-weight:700; color:var(--pg-coral-dd); }
.gm-wd-kb{ display:flex; flex-direction:column; gap:6px; max-width:560px; margin:0 auto; }
.gm-wd-kr{ display:flex; justify-content:center; gap:5px; }
.gm .gm-wd-key{ flex:1 1 0; min-width:0; max-width:48px; height:54px; border-radius:10px; background:var(--pg-field); font-weight:700; font-size:15px; color:var(--pg-ink); cursor:pointer; }
.gm .gm-wd-key.gm-wd-wide{ flex:1.6 1 0; max-width:78px; font-size:12.5px; }
.gm .gm-wd-key:hover{ background:#ece3dd; }
.gm .gm-wd-key.is-ok{ background:var(--gm-ok); color:#fff; }
.gm .gm-wd-key.is-near{ background:#d99a1e; color:#fff; }
.gm .gm-wd-key.is-no{ background:#d6ccc6; color:#8a7f78; }
.gm-wd-end{ margin-top:6px; text-align:center; animation:gm-in .3s ease-out both; }
.gm .gm-wd-res{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; }
.gm .gm-wd-info{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; margin:6px 0 18px !important; }
.gm-wd-peak{ color:var(--pg-muted); }
.gm-wd-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px; margin-bottom:18px; }
.gm-wd-stat b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:30px; line-height:1.1; }
.gm-wd-stat span{ font-size:12px; color:var(--pg-muted); }
.gm .gm-wd-h{ margin-bottom:8px !important; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pg-muted); }
.gm-wd-dist{ display:flex; flex-direction:column; gap:4px; max-width:360px; margin:0 auto 18px; }
.gm-wd-dr{ display:flex; align-items:center; gap:8px; }
.gm-wd-dk{ width:12px; font-size:13px; font-weight:700; }
.gm-wd-db{ min-width:26px; padding:2px 8px; border-radius:6px; background:#8a7f78; color:#fff; font-size:12px; font-weight:700; text-align:right; }
.gm-wd-db.is-cur{ background:var(--gm-ok); }
.gm .gm-wd-next{ margin-top:14px !important; font-size:14px; color:var(--pg-text2); font-variant-numeric:tabular-nums; }

/* ---------- Animations ---------- */
@keyframes gm-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes gm-shake{ 20%, 60%{ transform:translateX(-6px); } 40%, 80%{ transform:translateX(6px); } }
/* Retournement d'une case du prénom du jour : blanche jusqu'à mi-course, puis sa couleur (ok / near / no) */
@keyframes gm-flip{
	0%{ transform:rotateX(0); background:#fff; color:var(--pg-ink); box-shadow:inset 0 0 0 2px var(--pg-ink); }
	45%{ transform:rotateX(90deg); background:#fff; color:var(--pg-ink); box-shadow:inset 0 0 0 2px var(--pg-ink); }
	55%{ transform:rotateX(90deg); }
	100%{ transform:rotateX(0); }
}
@keyframes gm-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes gm-draw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:reduce){
	.gm *, .gm *::before, .gm *::after{ animation:none !important; transition:none !important; }
}

/* ---------- Tablette / mobile ---------- */
@media (max-width:860px){
	.gm-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.gm-ill{ height:110px; }
}
@media (max-width:520px){
	.gm-cards{ grid-template-columns:1fr; }
}
@media (max-width:760px){
	.gm-info{ grid-template-columns:1fr; }
}
@media (max-width:700px){
	.gm-hm{ grid-template-columns:1fr; gap:10px; }
	.gm-hm-art{ width:120px; margin:0 auto; }
}
@media (max-width:640px){
	.gm-head{ margin:12px 0 16px; }
	.gm .gm-lead{ font-size:15.5px; }
	.gm-board{ padding:16px 14px 20px; border-radius:22px; }
	.gm-bar{ margin-bottom:12px; }
	.gm-seg-l{ display:none; }
	/* Plus ou moins : cartes compactes et boutons côte à côte pour tout voir sans défiler */
	.gm .gm-hl-q{ font-size:15px; margin-bottom:12px !important; }
	.gm-duel{ grid-template-columns:1fr; gap:0; }
	.gm-card{ min-height:0; padding:14px 12px; gap:2px; }
	.gm-card-name{ font-size:28px; }
	.gm-card-n{ font-size:24px; }
	.gm-card-btns{ flex-direction:row; max-width:none; margin-top:10px; }
	.gm-card-btns .gm-btn{ flex:1; }
	.gm-vs{ position:relative; z-index:1; justify-self:center; width:36px; height:36px; font-size:12px; margin:-8px 0; }
	.gm-chart{ height:210px; }
	.gm-choices.is-6{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.gm .gm-choice{ font-size:16.5px; min-height:50px; }
	.gm .gm-q{ font-size:19px; }
	.gm-reveal-a{ margin-left:0; }
	.gm-keys{ grid-template-columns:repeat(7,minmax(0,1fr)); }
	.gm-word{ gap:4px; }
	.gm .gm-key{ height:42px; }
	/* Jeux à saisie : le champ garde la ligne, les boutons passent dessous */
	.gm-type{ flex-wrap:wrap; }
	.gm .gm-input{ flex:1 1 180px; }
	.gm-type .gm-btn{ flex:1 1 auto; }
	.gm-t10{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; gap:6px; }
	.gm-t10-slot{ min-height:42px; padding:6px 12px; }
	.gm-tile{ width:40px; height:48px; font-size:24px; }
	.gm-yr-list{ padding:10px 12px 6px; }
	.gm-yr-name{ font-size:15px; }
	.gm-yr-val{ font-size:40px; }
	.gm-letter{ width:84px; height:84px; font-size:52px; }
	.gm .gm-wd-key{ height:50px; font-size:14px; }
	.gm-wd-kr{ gap:4px; }
	/* Grille plus petite pour garder le clavier visible sur un écran de téléphone */
	.gm-wd-grid{ width:min(100%, calc(var(--gm-wd-n) * 50px)); gap:5px; }
	.gm-wd-row{ gap:5px; }
}