/* Refonte de lisibilité (maquette) : chargée après les feuilles historiques, avant la personnalisation admin.
   Chaque bloc renvoie au numéro de la revue design. Les halos bronze des boutons sont volontairement conservés. */
:root { --page-inner:1068px; }

/* 1-2. Seul le bandeau du logo reste fixé ; la barre d'infos défile avec la page. */
.site-header { position:sticky; top:0; z-index:50; }
.bandeau { z-index:40; }

/* 3. Rouge lisible sur le bandeau sombre (5,6:1). 11. L'adresse / « Comment rejoindre » se lit comme un lien. */
.bandeau b, .bandeau .ip { color:var(--accent-clair); }
.bandeau a.ip { font-weight:700; letter-spacing:.04em; text-decoration:none; }
.bandeau a.ip:not([href="#"]) { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.status-pill { font-size:.8125rem; letter-spacing:.02em; text-transform:none; }

/* 10. Menu à six entrées autour du logo. */
.nav--wide { grid-template-columns:repeat(3,minmax(0,1fr)) 140px repeat(3,minmax(0,1fr)); }
.nav--wide .nav-link { font-size:1.05rem; }
@media (max-width:1000px) and (min-width:801px) { .nav--wide .nav-link { font-size:.8125rem; letter-spacing:0; } .nav--wide { grid-template-columns:repeat(3,minmax(0,1fr)) 110px repeat(3,minmax(0,1fr)); } .nav--wide .nav-logo img { width:80px; } }

/* 28. Un seul couple de marges : tout s'aligne sur le contenu (1100px moins 16px de chaque côté). */
.nav, .footer-grid, .footer-legal { max-width:var(--page-inner); }
.top-strip-inner { padding-left:16px; padding-right:16px; }
.home-hero .hero-in, .page-hero--game .hero-in { max-width:1100px; padding-left:16px; padding-right:16px; }

/* 4. Le titre rouge sur la photo a été retiré des bannières ; celui des fiches de jeu passe en clair. */
/* Plus grand pour que le titre domine le premier écran. */
.page-hero:not(.page-hero--game) h1 { font-size:clamp(2.25rem,5.6vw,4.5rem); }
.page-hero:not(.page-hero--game) h1.is-long { font-size:clamp(2rem,4vw,3.25rem); }
.page-hero--game .kicker { color:#f5c99d; font-size:.875rem; letter-spacing:.02em; text-transform:none; } /* taste-skill-ignore : étiquettes du contenu éditorial, adoucies */

/* 30. Étiquettes au-dessus des titres : casse normale, taille lisible, sans trait décoratif. */
.eyebrow { font-size:.875rem; text-transform:none; letter-spacing:0; margin:0 0 8px; } /* taste-skill-ignore : étiquettes du contenu éditorial, adoucies */
.eyebrow::before, .space-accent .jeu-cat::before { display:none; }
.home-hero .kicker { font-size:.875rem; letter-spacing:.02em; text-transform:none; } /* taste-skill-ignore : étiquettes du contenu éditorial, adoucies */
.jeu-cat { font-size:.8125rem; text-transform:none; letter-spacing:0; }
.availability { font-size:.8125rem; text-transform:none; letter-spacing:0; }
.hero-meta { font-size:.8125rem; text-transform:none; letter-spacing:0; }

/* 5. Rien de ce qui se lit sous 13px. */
.ip-hint, .quick-links small, .ranking-heading span, .ranking-list small, .article-date, .age-information span,
.space-game-heading .eyebrow, .space-wallet dt, .space-table thead th, /* taste-skill-ignore : étiquettes du contenu éditorial, adoucies */
.is-overview .space-games .player-metrics dt, .is-overview .space-games .player-metrics small, .tag { font-size:.8125rem; }
.account-chip, .account-chip-copy strong, .language-switch { font-size:.8125rem; }
.hero-footnote, .featured-game .text-link, .ranking-card>.text-link, .age-information strong, .footer-grid h2 { font-size:.875rem; }
.featured-game p, .footer-grid nav, .footer-legal, .footer .small { font-size:.9375rem; }
.ranking-list a, .ranking-empty, .game-notes p { font-size:.9375rem; }
.game-notes p { color:var(--texte); }
/* Zones tactiles un peu plus grandes dans la barre du haut et le pied de page. */
.account-chip, .language-switch a { min-height:40px; }
.language-switch a { min-width:40px; }
.footer-legal nav a { display:inline-block; padding:6px 4px; }

/* 7. Moins de tailles : 13 · 14 · 16 · 18 · 24 · 32px, plus les grands titres de bannière. */
.section-heading h1, .section-heading h2, .catalog-heading h2, .project-identity h2, .home-story h2, .community-band h2 { font-size:clamp(1.5rem,3vw,2rem); }
.memory-layout h3 { font-size:1.5rem; }
.ranking-heading h3, .jeu h3, .card h3, .game-notes h2 { font-size:1.125rem; }
.page-hero--game .lead, .home-hero .lead { font-size:1.125rem; }
.quick-links span { font-size:1rem; }
h1, h2, h3 { text-wrap:balance; }

/* 8. Des lignes de 75 caractères au plus dans le texte courant. */
main.wrap p:not(.empty-state):not(.jeux-intro):not(.bientot):not(.notice), main.wrap li { max-width:75ch; }

/* 29. Titres de section alignés à gauche, comme sur l'accueil, sans traits de part et d'autre. */
.titre { justify-content:flex-start; margin:56px 0 22px; font-size:1.5rem; font-weight:800; text-transform:none; letter-spacing:-.02em; }
.titre::before, .titre::after { display:none; }

/* 32. Pas d'ombre sur ce qui ne bouge pas : la différence de fond suffit. Les boutons gardent leur halo. */
.panel, .jeu, .featured-game, .quick-links, .home-space, .card, .status-card, .account-promise>div, .space-game-card, .space-profile-hero { box-shadow:none; }

/* Étiquettes colorées lisibles sur fond clair : la couleur du jeu est assombrie. */
.space-accent .eyebrow, .space-accent .jeu-cat, .game-notes .eyebrow, .memory-layout .eyebrow { color:color-mix(in srgb, var(--space-accent, var(--accent)) 45%, #241812); } /* taste-skill-ignore : étiquettes du contenu éditorial, adoucies */

/* 31. Accès rapides sans numérotation. */
.quick-links>a { transition:background .15s; }
.quick-links>a:hover { background:var(--fond); }

/* 16. Le filtre des classements devient une action secondaire. */
.btn-outline { background:#fff; color:var(--accent-texte); border-color:var(--accent); border-width:2px; border-style:solid; }
.btn-outline:hover, .btn-outline:focus-visible { background:var(--accent); color:#fff; }
/* 17. La recherche de joueur a un vrai titre. */
.stats-search { flex-wrap:wrap; }
.stats-search-title { flex-basis:100%; margin:0; font-size:1.125rem; }

/* 12. Page d'erreur : des suites possibles plutôt que le message répété. */
.error-links { display:flex; flex-wrap:wrap; gap:16px 32px; }

/* 22. « À découvrir aussi » occupe toute la largeur. */
.jeux--related { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* 34. État des services : les mini-jeux en liste compacte. */
.status-card { border:0; }
section[aria-labelledby="games-heading"] .status-grid { gap:4px 32px; padding:12px 24px; background:#fff; border-radius:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
section[aria-labelledby="games-heading"] .status-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; padding:12px 0; border-radius:0; background:none; }
section[aria-labelledby="games-heading"] .status-card h3 { margin:0; font-size:1rem; }
section[aria-labelledby="games-heading"] .service-state { margin:0; font-size:.875rem; }
section[aria-labelledby="games-heading"] .status-time { grid-column:1/-1; margin:0; font-size:.8125rem; }
.status-explanation { background:var(--creme); }

/* Passe du skill (lint + inspecteur) : texte courant à l'encre pleine, sous-titres sous les titres,
   séparations par l'espace plutôt que par des traits, section « Bientôt disponibles » sur toute la largeur. */
.section-heading p, .catalog-heading > p, .home-space p, .project-identity > p, .account-promise p, .jeu p, .home-story p { color:var(--texte); }
.section-note { margin:8px 0 16px; color:var(--muted); font-size:.875rem; font-weight:700; }
.catalog-heading .section-note { margin:0 0 8px; }
.jeu p { font-size:1rem; }
.top-strip { border-bottom:0; }
.footer-legal { border-top:0; padding-top:8px; margin-top:16px; }
.home-story { border:0; padding:0; }
.community-links a { border-bottom:0; padding:14px 0; }
.catalog-group--upcoming { border-top:0; padding-top:0; }
.catalog-group--upcoming .jeux { grid-template-columns:1fr; }
.catalog-group--upcoming .jeu { display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 24px; align-items:center; text-align:left; }
.catalog-group--upcoming .jeu img { grid-row:1 / span 5; margin:0; }

/* 37. Sommaire du règlement : le numéro reste sur la première ligne. */
.rules-nav a { display:inline; }

/* 36. Retour visuel sur les liens et apparition douce des sections (seulement si le script tourne). */
.text-link { transition:color .15s; }
.text-link:hover { color:var(--accent-vif); }
.faq summary { transition:color .15s; }
.faq summary:hover { color:var(--accent-texte); }
.has-reveal [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.has-reveal [data-reveal].is-visible { opacity:1; transform:none; }
.has-reveal [data-reveal]:focus-within { opacity:1; transform:none; transition:none; }

@media (max-width:800px) {
  .nav--wide { grid-template-columns:1fr auto 1fr; }
}
@media (max-width:520px) {
  /* 9. Titres sur deux lignes au plus. 18. Bannières plus basses pour que les formulaires remontent. */
  .page-hero .hero-in { padding:40px 16px 32px; }
  .page-hero h1, .page-hero:not(.page-hero--game) h1 { font-size:clamp(1.625rem,7.4vw,2rem); margin:0 0 12px; }
  .page-hero h1.is-long, .page-hero:not(.page-hero--game) h1.is-long { font-size:clamp(1.375rem,6vw,1.75rem); }
  .panel h2 { font-size:1.25rem; }
  .titre { font-size:1.25rem; margin-top:40px; }
  section[aria-labelledby="games-heading"] .status-grid { padding:4px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .has-reveal [data-reveal] { opacity:1; transform:none; transition:none; }
}