/* ==========================================================================
   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{ max-width:1000px; --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-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(34px,6vw,52px); 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:210px minmax(0,1fr); gap:28px; 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(9,minmax(0,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(30px,5vw,42px); 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; }
.gm-more{ margin-top:28px; }
.gm-more-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.gm .gm-more-a{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:18px; background:#fff; border:1px solid var(--pg-line); }
.gm .gm-more-a:hover{ background:#fffaf8; border-color:var(--pg-tint-bd); }
.gm-more-t{ font-weight:700; font-size:15.5px; }
.gm-more-d{ font-size:13.5px; color:var(--pg-muted); }

/* ---------- Animations ---------- */
@keyframes gm-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@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:1fr; }
	.gm-ill{ height:110px; }
}
@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; }
}