/* ==========================================================================
   ESCAPE GAME CITY — IDENTITÉ DU SITE PUBLIC (refonte du 25/09/2026)
   « Carnet d'enquête nocturne »
   --------------------------------------------------------------------------
   ⚠ CETTE FEUILLE N'EST CHARGÉE QUE PAR `base.html.twig`. Le back-office
   charge `escapegamecity.css` mais PAS celle-ci : tout ce qui est redéfini ici
   (jetons, boutons, polices) ne l'atteint jamais. C'est ce qui permet de
   redessiner le site sans toucher d'un pixel l'outil de travail des créateurs.
   Elle est chargée APRÈS `escapegamecity.css` : à spécificité égale, elle gagne.

   LE MONDE DU JEU, PAS CELUI DES SITES DE LOISIRS. La palette vient des objets
   du jeu : la nuit des vieilles villes (encre), le laiton d'un cadenas (seul
   accent), la pierre (fond clair). Une police à chasse fixe est réservée à ce
   qui se DÉCHIFFRE — codes, chronos, coordonnées.

   ACCORD AVEC LE LOGO. Le logo est une épingle bleu marine (#1B2C45) portant un
   cadenas rouge (#C00000). L'encre est donc un marine (et non un bleu-vert, qui
   aurait fait deux bleus côte à côte), et le ROUGE RESTE AU LOGO : aucune
   surface du site ne le reprend, il demeure la seule tache vive de la marque.
   Marine + rouge + laiton : la triade d'un cadenas.

   UN SEUL ACCENT, DEUX VALEURS. Le laiton (#D9A441) est une couleur d'APLAT :
   boutons, filets, pastilles — et du texte seulement sur fond sombre (7,9:1 sur
   l'encre). Sur fond clair, le texte d'accent passe au BRONZE (#8A5A12, 5,9:1
   sur blanc) : c'est `--egc-text-accent`, jamais le laiton lui-même (1,9:1).
   Même règle que `DarkThemeTokensTest` impose à `escapegamecity.css`.
   ========================================================================== */

:root {
    /* --- Nuit : surfaces TOUJOURS sombres (bandeau, studio, appel final) --- */
    --egc-ink: #0E1726;
    --egc-ink-2: #15223A;
    --egc-ink-3: #1D2F4D;
    --egc-night-text: #E9EDF3;
    --egc-night-muted: #A9B4C5;          /* 8,6:1 sur l'encre */
    --egc-night-line: rgba(233, 237, 243, .13);

    /* --- Laiton : l'accent unique --- */
    --egc-brass: #D9A441;
    --egc-brass-hi: #EBBE63;
    --egc-brass-lo: #C08A28;
    --egc-on-brass: #1A1204;             /* 9,4:1 sur le laiton */
    --egc-mint: #6FD1BE;                 /* signal seulement : point GPS, validé */

    /* --- Jour : surfaces qui suivent le thème --- */
    --egc-ground-alt: #EEF1F5;           /* pierre */
    --egc-surface: #FFFFFF;
    --egc-line: #D8DEE7;
    --egc-heading: #111C2E;

    /* --- Familles --- */
    --egc-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --egc-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --egc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* --- Jetons hérités de escapegamecity.css, redirigés vers l'identité ---
       Ils portent déjà la barre, les menus, les pastilles : les redéfinir
       recolore tout le site d'un coup, sans reprendre les règles une à une. */
    --egc-primary: #1E3A66;              /* marine accessible, 11:1 sur blanc */
    --egc-primary-light: #2F5C9E;
    --egc-accent: #D9A441;               /* marque = aplats */
    --egc-text-accent: #8A5A12;          /* 5,9:1 sur blanc · 5,2:1 sur la pierre */
    --egc-text-muted: #56637A;           /* 6,0:1 sur blanc · 5,3:1 sur la pierre */
    --egc-rating: #8A5A12;
    --egc-success: #0F7A63;              /* 5,3:1 sur blanc · 4,7:1 sur la pierre (#10b981 : 2,2:1) */
    --egc-nav-hover-bg: rgba(14, 23, 38, .06);
    --egc-nav-tint-bg: rgba(217, 164, 65, .14);
    --egc-nav-tint-border: rgba(192, 138, 40, .45);
    --egc-radius-sm: 8px;
    --egc-radius: 14px;
    --egc-radius-lg: 22px;
    --egc-shadow-sm: 0 2px 8px rgba(14, 23, 38, .07);
    --egc-shadow: 0 14px 34px -18px rgba(14, 23, 38, .35);
    --egc-shadow-lg: 0 34px 70px -34px rgba(14, 23, 38, .55);

    /* --- Bootstrap --- */
    --bs-font-sans-serif: var(--egc-font-body);
    --bs-body-font-family: var(--egc-font-body);
    --bs-font-monospace: var(--egc-font-mono);
    --bs-body-color: #152033;
    --bs-body-color-rgb: 21, 32, 51;
    --bs-emphasis-color: #0E1726;
    --bs-tertiary-bg: #EEF1F5;
    --bs-tertiary-bg-rgb: 238, 241, 245;
    --bs-border-color: #D8DEE7;
    --bs-link-color: #1E3A66;
    --bs-link-color-rgb: 30, 58, 102;
    --bs-link-hover-color: #8A5A12;
    --bs-link-hover-color-rgb: 138, 90, 18;
    /* `.text-primary`, `.bg-primary`, `.border-primary` lisent ce triplet : le
       bronze reste lisible en texte ET porte un texte blanc en aplat (5,9:1). */
    --bs-primary-rgb: 138, 90, 18;
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --egc-ground-alt: #0F1828;
    --egc-surface: #131E30;
    --egc-line: #26354D;
    --egc-heading: #F1F4F8;

    --egc-primary: #9DBBEA;
    --egc-primary-light: #86A9DD;         /* « décoratif », mais servi en texte par `.offline-badge` : 6:1 */
    --egc-text-accent: #E3B458;          /* 9,4:1 sur #0B1220 */
    --egc-text-muted: #9FACBF;           /* 8,0:1 sur #0B1220 · 7,2:1 sur #131E30 */
    --egc-rating: #E3B458;
    --egc-success: #3FD39F;
    --egc-nav-hover-bg: rgba(233, 237, 243, .08);
    --egc-nav-tint-bg: rgba(217, 164, 65, .16);
    --egc-nav-tint-border: rgba(227, 180, 88, .42);
    --egc-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7);
    --egc-shadow-lg: 0 34px 70px -34px rgba(0, 0, 0, .85);

    --bs-body-bg: #0B1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-body-color: #E9EDF3;
    --bs-body-color-rgb: 233, 237, 243;
    --bs-emphasis-color: #F7F9FC;
    --bs-secondary-color: rgba(233, 237, 243, .74);
    --bs-secondary-bg: #131E30;
    --bs-secondary-bg-rgb: 19, 30, 48;
    --bs-tertiary-bg: #0F1828;
    --bs-tertiary-bg-rgb: 15, 24, 40;
    --bs-border-color: #26354D;
    --bs-link-color: #E3B458;
    --bs-link-color-rgb: 227, 180, 88;
    --bs-link-hover-color: #F0C872;
    --bs-link-hover-color-rgb: 240, 200, 114;
    --bs-primary-rgb: 227, 180, 88;
}

/* `escapegamecity.css` peint en bleu GitHub tous les liens en thème sombre, avec
   une spécificité (0,2,1) qu'aucune classe seule ne bat. On la ramène au laiton,
   et l'on donne aux liens-CARTES une porte de sortie : `.egc-plain-link` hérite
   de la couleur de son contexte (même spécificité, feuille chargée après). */
[data-bs-theme=dark] a:not(.btn) {
    color: var(--bs-link-color);
}

[data-bs-theme=dark] a:not(.btn):hover {
    color: var(--bs-link-hover-color);
}

a.egc-plain-link:not(.btn),
[data-bs-theme] a.egc-plain-link:not(.btn),
[data-bs-theme] a.egc-plain-link:not(.btn):hover {
    color: inherit;
    text-decoration: none;
}

/* Les entrées de menu déroulant sont des <a> : la règle précédente les passait en
   couleur de LIEN (laiton aujourd'hui, bleu GitHub avant la refonte). Un menu se
   lit en couleur de texte ; l'accent reste à l'icône et à l'entrée courante. */
[data-bs-theme=dark] a.dropdown-item:not(.btn),
[data-bs-theme=dark] a.dropdown-item:not(.btn):hover,
[data-bs-theme=dark] a.dropdown-item:not(.btn):focus {
    color: var(--bs-emphasis-color);
}

[data-bs-theme=dark] .card {
    --bs-card-bg: var(--egc-surface);
    --bs-card-border-color: var(--egc-line);
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--egc-font-display);
    letter-spacing: -.018em;
    text-wrap: balance;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 800;
    letter-spacing: -.028em;
}

.egc-mono {
    font-family: var(--egc-font-mono);
    font-weight: 700;
    letter-spacing: .02em;
}

/* Les titres en dégradé de l'ancienne identité passent au laiton — en CLAIR
   comme en SOMBRE, chacun sa valeur : un texte peint par `background-clip`
   n'est mesurable par aucun outil (sa `color` vaut `transparent`). */
.text-gradient,
.text-gradient-neon {
    background: linear-gradient(100deg, #8A5A12 0%, #6E470C 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

[data-bs-theme=dark] .text-gradient,
[data-bs-theme=dark] .text-gradient-neon {
    background: linear-gradient(100deg, #F0C872 0%, #D9A441 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ==========================================================================
   BOUTONS
   Le primaire est un aplat de laiton, texte encre (9,4:1). Le secondaire est
   l'encre elle-même en clair, le laiton en sombre. Les variables sont posées
   sur les DEUX sélecteurs parce que `escapegamecity.css` repeint `.btn-primary`
   en indigo sous `[data-bs-theme=dark]`.
   ========================================================================== */
.btn-primary,
[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: var(--egc-on-brass);
    --bs-btn-bg: var(--egc-brass);
    --bs-btn-border-color: var(--egc-brass);
    --bs-btn-hover-color: var(--egc-on-brass);
    --bs-btn-hover-bg: var(--egc-brass-hi);
    --bs-btn-hover-border-color: var(--egc-brass-hi);
    --bs-btn-focus-shadow-rgb: 217, 164, 65;
    --bs-btn-active-color: var(--egc-on-brass);
    --bs-btn-active-bg: var(--egc-brass-lo);
    --bs-btn-active-border-color: var(--egc-brass-lo);
    --bs-btn-disabled-color: var(--egc-on-brass);
    --bs-btn-disabled-bg: var(--egc-brass);
    --bs-btn-disabled-border-color: var(--egc-brass);
    font-weight: 700;
}

.btn-outline-primary {
    --bs-btn-color: #152033;
    --bs-btn-border-color: #152033;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #152033;
    --bs-btn-hover-border-color: #152033;
    --bs-btn-focus-shadow-rgb: 21, 32, 51;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #0E1726;
    --bs-btn-active-border-color: #0E1726;
    font-weight: 600;
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: #E3B458;
    --bs-btn-border-color: rgba(227, 180, 88, .7);
    --bs-btn-hover-color: var(--egc-on-brass);
    --bs-btn-hover-bg: var(--egc-brass);
    --bs-btn-hover-border-color: var(--egc-brass);
    --bs-btn-focus-shadow-rgb: 217, 164, 65;
    --bs-btn-active-color: var(--egc-on-brass);
    --bs-btn-active-bg: var(--egc-brass-lo);
    --bs-btn-active-border-color: var(--egc-brass-lo);
}

/* ⚠ `escapegamecity.css` contient `[data-bs-theme=dark] * { color: inherit }`.
   Même spécificité que `.btn { color: var(--bs-btn-color) }` de Bootstrap, et
   chargée APRÈS : en zone sombre, TOUT bouton prenait la couleur de son parent au
   lieu de la sienne. L'ancien bleu y survivait par hasard (texte blanc, parent
   blanc) ; un bouton laiton y sortait en blanc sur or, 1,9:1 — mesuré par axe.
   On rend au bouton sa couleur, états compris (sans eux, cette règle écraserait
   à son tour le survol de Bootstrap). */
[data-bs-theme=dark] .btn {
    color: var(--bs-btn-color);
}

[data-bs-theme=dark] .btn:hover,
[data-bs-theme=dark] .btn:focus-visible {
    color: var(--bs-btn-hover-color);
}

[data-bs-theme=dark] .btn:active,
[data-bs-theme=dark] .btn.active,
[data-bs-theme=dark] .btn.show {
    color: var(--bs-btn-active-color);
}

[data-bs-theme=dark] .btn:disabled,
[data-bs-theme=dark] .btn.disabled {
    color: var(--bs-btn-disabled-color);
}

/* Corollaire du correctif précédent : rendre au bouton SA couleur révèle les
   variantes que le thème n'a jamais pensées pour le sombre. `btn-outline-secondary`
   (21 emplois côté public) y portait #2B284A, un indigo presque noir : 1,3:1 sur
   l'encre, masqué jusque-là par le `color: inherit`. Les autres contours (succès,
   alerte, danger, info) gardent leur teinte d'origine, lisible sur fond sombre. */
[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: #C9D2DF;
    --bs-btn-border-color: rgba(233, 237, 243, .32);
    --bs-btn-hover-color: #0E1726;
    --bs-btn-hover-bg: #E9EDF3;
    --bs-btn-hover-border-color: #E9EDF3;
    --bs-btn-active-color: #0E1726;
    --bs-btn-active-bg: #FFFFFF;
    --bs-btn-active-border-color: #FFFFFF;
}

/* En sombre, `--bs-primary-rgb` vaut le laiton : un badge `bg-primary` y
   porterait du blanc sur or (1,9:1). Son texte blanc est imposé par le thème ;
   c'est donc le FOND qui passe au bronze, sur lequel le blanc tient à 5,9:1. */
[data-bs-theme=dark] .badge.bg-primary {
    background-color: #8A5A12 !important;
}

/* Dans une zone sombre, le contour clair de Bootstrap tient ; il gagne seulement
   la graisse du reste des boutons. */
.btn-outline-light {
    font-weight: 600;
}

/* `btn-dark` en thème sombre deviendrait un aplat noir sur fond noir. */
[data-bs-theme=dark] .btn-dark {
    --bs-btn-color: var(--egc-on-brass);
    --bs-btn-bg: var(--egc-night-text);
    --bs-btn-border-color: var(--egc-night-text);
    --bs-btn-hover-color: var(--egc-on-brass);
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
}

.egc-btn-pill {
    border-radius: 999px;
    padding-inline: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.egc-btn-pill.btn-lg {
    min-height: 3.25rem;
    font-size: 1.02rem;
}

/* Le gros bouton « créateur » de l'ancienne identité (lueur + dégradé violet) :
   gardé par les gabarits, redessiné ici en bouton laiton. */
.btn-creator-primary {
    display: inline-flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0 1.75rem;
    border-radius: 999px;
    background: var(--egc-brass) !important;
    color: var(--egc-on-brass) !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 26px -12px rgba(217, 164, 65, .8) !important;
    transform: none !important;
}

.btn-creator-primary:hover,
.btn-creator-primary:focus-visible {
    background: var(--egc-brass-hi) !important;
    color: var(--egc-on-brass) !important;
}

.btn-creator-primary .btn-glow-creator {
    display: none;
}

/* ==========================================================================
   BARRE DE NAVIGATION
   Tout son habillage passe par les jetons redéfinis plus haut (voir la note de
   `escapegamecity.css` sur `.egc-navbar`). Ici, seulement ce que les jetons ne
   portent pas : la marque en police de titre, et le fond.
   ========================================================================== */
/* La barre est sombre dans LES DEUX thèmes (`data-bs-theme="dark"` posé sur
   elle) : la nuit du bandeau d'accueil commence dès le haut de l'écran. Le fond
   est peint ici — `[data-bs-theme=dark] .navbar` exige un ANCÊTRE sombre et ne
   voit donc pas une barre qui porte l'attribut elle-même. Un filet la sépare du
   bandeau, lui aussi sombre. */
.egc-navbar {
    background-color: var(--egc-ink) !important;
    border-bottom: 1px solid var(--egc-night-line);
    color: var(--egc-night-text);
}

.egc-navbar .navbar-brand,
.egc-navbar .navbar-brand:hover {
    color: #FFFFFF;
}

/* La marque. Deux défauts la rendaient floue, mesurés au navigateur :
     · le logo, carré, était étiré en 48 × 44 (`.navbar .navbar-brand img
       { width: 3rem }` + `max-height: 44px` dans escapegamecity.css) — une image
       déformée est rééchantillonnée, donc floue. Il est désormais VECTORIEL
       (`logo-nuit.svg`) et dimensionné par sa seule hauteur ;
     · le nom était composé dans la coupe « grands titres » de Bricolage (taille
       optique figée à 96) en graisse 800 et approche négative, à 15 px : les
       lettres s'empâtaient. La police porte désormais son axe optique complet, et
       le nom passe en 700 sans approche serrée, à une taille où il se lit.
   `line-height: 1` et la hauteur entière du logo tiennent la marque sur des
   pixels ronds : un décalage d'un demi-pixel suffit à baver un trait fin. */
.egc-navbar .navbar-brand {
    gap: .65rem;
    line-height: 1;
}

.egc-navbar .navbar-brand img {
    width: auto;
    height: 40px;
    max-height: none;
}

.egc-navbar .navbar-brand span {
    font-family: var(--egc-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1;
    color: #FFFFFF;
}

/* ==========================================================================
   BANDEAU DES PAGES INTERNES (`partial/_header-title.html.twig`)
   L'encre, un quadrillage de plan estompé et un halo de laiton. Plus de photo
   derrière le titre : sous du texte blanc elle imposait un voile à redoser, et
   elle était l'élément LCP de vingt-cinq pages pour un décor.
   ========================================================================== */
.modern-page-header.egc-page-header {
    background:
        radial-gradient(700px 320px at 85% 0%, rgba(217, 164, 65, .16), transparent 65%),
        radial-gradient(600px 300px at 0% 100%, rgba(111, 209, 190, .07), transparent 60%),
        var(--egc-ink);
    color: var(--egc-night-text);
    isolation: isolate;
}

.egc-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(233, 237, 243, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 237, 243, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}

.egc-page-header .egc-page-header-inner {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}

.egc-page-header .egc-eyebrow {
    justify-content: center;
}

/* Le filet bleu → violet de l'ancienne identité devient un fil de laiton. */
.modern-page-header.egc-page-header::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--egc-brass) 30%, var(--egc-brass) 70%, transparent);
    opacity: .7;
}

.egc-page-header .header-title {
    text-shadow: none;
    margin: .9rem auto 0;
    max-width: 22ch;
    color: #FFFFFF;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
}

/* ==========================================================================
   PIED DE PAGE — la même nuit que le bandeau.
   ========================================================================== */
.modern-footer {
    background:
        radial-gradient(800px 360px at 90% 0%, rgba(217, 164, 65, .08), transparent 60%),
        var(--egc-ink) !important;
}

.modern-footer::before {
    display: none;
}

.modern-footer .footer-brand-text {
    font-family: var(--egc-font-display);
    font-weight: 700;
    letter-spacing: -.005em;
}

/* Même logo vectoriel que la barre, dimensionné par sa hauteur (une largeur
   imposée à un logo non carré le déformerait). */
.modern-footer .footer-logo {
    width: auto;
    height: 34px;
}

/* ==========================================================================
   BRIQUES COMMUNES AUX PAGES REDESSINÉES
   ========================================================================== */
.egc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .9rem;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--egc-text-accent);
}

.egc-eyebrow::before {
    content: "";
    width: 1.4rem;
    height: 2px;
    background: currentColor;
}

.egc-section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.egc-section-alt {
    background: var(--egc-ground-alt);
}

.egc-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2.5rem;
}

.egc-section-title {
    margin: 0;
    max-width: 18ch;
    color: var(--egc-heading);
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.028em;
}

.egc-section-title em {
    font-style: normal;
    color: var(--egc-text-accent);
}

.egc-section-lead {
    max-width: 36rem;
    margin: 0;
    font-size: 1.08rem;
    color: var(--egc-text-muted);
}

.egc-more {
    font-weight: 700;
    white-space: nowrap;
    color: var(--egc-text-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
}

.egc-more:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.egc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(14, 23, 38, .78);
    color: #FFFFFF;
    font-size: .8rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}

.egc-example {
    display: inline-block;
    padding: .2rem .5rem;
    border: 1px solid var(--egc-line);
    border-radius: 6px;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--egc-text-accent);
}

/* ==========================================================================
   ACCUEIL — BANDEAU
   Deux colonnes à partir de 992 px ; en dessous, texte d'abord (l'appel à
   l'action doit rester haut) puis la scène. Pas de hauteur en `vh` : le
   contenu commande — c'est la leçon des cinq paliers de l'ancien bandeau.
   ========================================================================== */
.egc-h-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 88% 12%, rgba(217, 164, 65, .15), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, rgba(111, 209, 190, .07), transparent 60%),
        var(--egc-ink);
    color: var(--egc-night-text);
    isolation: isolate;
}

.egc-h-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(233, 237, 243, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 237, 243, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 15%, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 40%, #000 15%, transparent 70%);
}

.egc-h-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6.5rem);
}

.egc-h-hero-badge {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.4rem;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--egc-night-muted);
}

.egc-h-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--egc-mint);
    box-shadow: 0 0 0 .3rem rgba(111, 209, 190, .18);
    flex: none;
}

.egc-h-hero-title {
    margin: 0 0 1.4rem;
    color: #FFFFFF;
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.026em;
}

.egc-h-hero-title em {
    font-style: normal;
    color: var(--egc-brass);
    white-space: nowrap;
    background: linear-gradient(transparent 86%, rgba(217, 164, 65, .32) 86%, rgba(217, 164, 65, .32) 96%, transparent 96%);
}

.egc-h-hero-lead {
    max-width: 34rem;
    margin: 0 0 2rem;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--egc-night-muted);
}

.egc-h-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.egc-h-proofs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0;
    margin: 2.5rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--egc-night-line);
}

.egc-h-proofs > div {
    display: flex;
    flex-direction: column-reverse;
    padding-right: 1.6rem;
    margin-right: 1.6rem;
    border-right: 1px solid var(--egc-night-line);
}

.egc-h-proofs > div:last-child {
    border: 0;
    margin: 0;
    padding: 0;
}

.egc-h-proofs dt {
    font-size: .82rem;
    font-weight: 400;
    color: var(--egc-night-muted);
}

.egc-h-proofs dd {
    margin: 0;
    font-family: var(--egc-font-display);
    font-size: 1.65rem;
    font-weight: 700;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .egc-h-proofs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .egc-h-proofs > div {
        border: 0;
        margin: 0;
        padding: 0;
    }
}

/* --- La scène : arche + écran de jeu + étiquette --- */
.egc-h-scene {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
}

.egc-h-arch {
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 22px 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(217, 164, 65, .3);
}

.egc-h-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.egc-h-arch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(14, 23, 38, .55));
    pointer-events: none;
}

.egc-h-screen {
    position: absolute;
    left: -2.6rem;
    bottom: 1.6rem;
    width: 13rem;
    padding: .9rem .9rem 1rem;
    border-radius: 1.6rem;
    background: #0A111D;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85), 0 0 0 6px #1E2C44;
    color: var(--egc-night-text);
}

.egc-h-screen-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: .6rem;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .64rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--egc-night-muted);
}

.egc-h-screen-clock {
    margin-bottom: .6rem;
    text-align: center;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--egc-brass);
    font-variant-numeric: tabular-nums;
}

.egc-h-screen-hint {
    margin: 0 0 .75rem;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--egc-night-muted);
}

.egc-h-screen-code {
    display: flex;
    justify-content: center;
    gap: .35rem;
}

.egc-h-screen-code span {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.6rem;
    border-radius: .55rem;
    background: #15223A;
    box-shadow: inset 0 0 0 1px var(--egc-night-line);
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: 1.25rem;
}

.egc-h-screen-code span.is-active {
    box-shadow: inset 0 0 0 2px var(--egc-brass);
}

.egc-h-screen-code span.is-active::after {
    content: "";
    width: 2px;
    height: 1.2rem;
    background: var(--egc-brass);
    animation: egc-caret 1s steps(1) infinite;
}

@keyframes egc-caret {
    50% { opacity: 0; }
}

.egc-h-tag {
    position: absolute;
    right: -1rem;
    top: 18%;
    max-width: 12rem;
    padding: .7rem .9rem;
    border-radius: .8rem;
    background: #F4F6F9;
    color: #152033;
    font-size: .82rem;
    line-height: 1.35;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .65);
}

.egc-h-tag strong {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--egc-font-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8A5A12;
}

@media (max-width: 991.98px) {
    .egc-h-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .egc-h-scene {
        width: min(100%, 400px);
    }
}

@media (max-width: 575.98px) {
    .egc-h-screen {
        left: -.4rem;
        width: 11.5rem;
        bottom: 1rem;
    }

    .egc-h-tag {
        right: -.4rem;
        max-width: 10rem;
    }
}

/* ==========================================================================
   ACCUEIL — AIGUILLAGE (deux portes de même poids)
   Il chevauche le bas du bandeau : c'est ce qui le lie visuellement à la
   décision que le bandeau vient de poser.
   ========================================================================== */
.egc-h-paths {
    position: relative;
    z-index: 2;
    margin-top: -2.4rem;
}

.egc-h-paths .container-xl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.egc-h-path {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--egc-line);
    border-radius: var(--egc-radius);
    background: var(--egc-surface);
    box-shadow: var(--egc-shadow);
    transition: border-color .15s, transform .15s;
}

.egc-h-path:hover,
.egc-h-path:focus-visible {
    border-color: var(--egc-brass);
    transform: translateY(-2px);
}

.egc-h-path strong {
    display: block;
    font-family: var(--egc-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--egc-heading);
}

.egc-h-path span span {
    display: block;
    font-size: .92rem;
    color: var(--egc-text-muted);
}

.egc-h-path-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .8rem;
    background: var(--egc-ground-alt);
    font-size: 1.6rem;
    color: var(--egc-heading);
}

.egc-h-path-create .egc-h-path-icon {
    background: var(--egc-ink);
    color: var(--egc-brass);
}

.egc-h-path-arrow {
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--egc-text-accent);
}

@media (max-width: 767.98px) {
    .egc-h-paths .container-xl {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ACCUEIL — DEUX FAÇONS DE JOUER
   ========================================================================== */
.egc-h-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.egc-h-mode {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--egc-radius-lg);
    overflow: hidden;
    isolation: isolate;
    color: #FFFFFF;
}

.egc-h-mode img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s;
}

.egc-h-mode:hover img {
    transform: scale(1.04);
}

/* Voile sous le TEXTE seulement : la carte protège ce qu'elle porte, le haut
   de la photo reste lisible (règle des écrans de fin de l'application). */
.egc-h-mode::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 30%, rgba(10, 17, 29, .92) 88%);
}

.egc-h-mode-body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.egc-h-mode-title {
    font-family: var(--egc-font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.egc-h-mode-text {
    max-width: 30rem;
    color: rgba(255, 255, 255, .86);
}

.egc-h-mode-cta {
    margin-top: .3rem;
    font-weight: 700;
    color: var(--egc-brass);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

@media (max-width: 767.98px) {
    .egc-h-modes {
        grid-template-columns: 1fr;
    }

    .egc-h-mode {
        aspect-ratio: 5 / 4;
    }
}

@media (max-width: 420px) {
    .egc-h-mode {
        aspect-ratio: 4 / 5;
    }
}

/* ==========================================================================
   ACCUEIL — COMMENT ON JOUE
   ========================================================================== */
.egc-h-how {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.egc-h-how-figure,
.egc-h-pros-figure {
    margin: 0;
    aspect-ratio: 1;
    border-radius: var(--egc-radius-lg);
    overflow: hidden;
}

.egc-h-how-figure img,
.egc-h-pros-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.egc-h-how-steps {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.egc-h-how-steps li {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: 1rem;
    padding-block: 1.15rem;
    border-top: 1px solid var(--egc-line);
}

.egc-h-how-steps li:last-child {
    border-bottom: 1px solid var(--egc-line);
}

.egc-h-how-num {
    padding-top: .3rem;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .9rem;
    color: var(--egc-text-accent);
}

.egc-h-how-steps h3 {
    margin: 0 0 .25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--egc-heading);
}

.egc-h-how-steps p {
    margin: 0;
    color: var(--egc-text-muted);
}

@media (max-width: 859.98px) {
    .egc-h-how,
    .egc-h-pros,
    .egc-h-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .egc-h-how-figure,
    .egc-h-pros-figure {
        max-width: 26rem;
    }
}

/* ==========================================================================
   STUDIO (partial/_studio.html.twig) — toujours sombre
   ========================================================================== */
.egc-studio {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background:
        radial-gradient(800px 420px at 100% 0%, rgba(217, 164, 65, .13), transparent 60%),
        var(--egc-ink);
    color: var(--egc-night-text);
}

.egc-studio .egc-eyebrow {
    color: var(--egc-brass);
}

.egc-studio .egc-section-title {
    max-width: 20ch;
    color: #FFFFFF;
}

.egc-studio .egc-section-title em {
    color: var(--egc-brass);
}

.egc-studio .egc-section-lead {
    color: var(--egc-night-muted);
}

.egc-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 1.75rem;
    align-items: start;
}

.egc-studio-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}

.egc-studio-steps li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: .9rem;
    padding: 1.05rem 1.2rem;
    border: 1px solid var(--egc-night-line);
    border-radius: var(--egc-radius);
    background: var(--egc-ink-2);
}

.egc-studio-steps h3 {
    margin: 0 0 .2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
}

.egc-studio-steps p {
    margin: 0;
    font-size: .93rem;
    color: var(--egc-night-muted);
}

.egc-studio-step-num {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(217, 164, 65, .16);
    color: var(--egc-brass);
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .85rem;
}

.egc-studio-promises {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .93rem;
    color: var(--egc-night-muted);
}

.egc-studio-promises i {
    margin-right: .35rem;
    color: var(--egc-mint);
    font-size: 1.1rem;
    vertical-align: -.15em;
}

.egc-studio-bench {
    border: 1px solid var(--egc-night-line);
    border-radius: var(--egc-radius-lg);
    background: #0A111D;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85);
    overflow: hidden;
}

.egc-studio-tabs {
    display: flex;
    gap: .25rem;
    padding: .5rem;
    background: var(--egc-ink-2);
    overflow-x: auto;
}

.egc-studio-tabs [role="tab"] {
    flex: none;
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    border-radius: .65rem;
    background: transparent;
    color: var(--egc-night-muted);
    font-weight: 600;
    font-size: .95rem;
}

.egc-studio-tabs [role="tab"]:hover {
    color: #FFFFFF;
}

.egc-studio-tabs [role="tab"][aria-selected="true"] {
    background: #0A111D;
    color: var(--egc-brass);
}

.egc-studio-panel {
    padding: clamp(1.1rem, 3vw, 1.75rem);
}

.egc-studio-label {
    display: block;
    margin: 0 0 .5rem;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--egc-night-muted);
}

/* 16 px au moins : en dessous, iOS zoome sur le champ au premier appui. */
.egc-studio-input {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--egc-night-line);
    border-radius: .65rem;
    background: #15223A;
    color: #FFFFFF;
    font: 500 1rem/1.4 var(--egc-font-body);
    resize: vertical;
}

.egc-studio-input:focus {
    outline: 2px solid var(--egc-brass);
    outline-offset: 0;
}

.egc-studio-shift {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.1rem 0 1.4rem;
}

.egc-studio-shift input {
    flex: 1;
    accent-color: var(--egc-brass);
    min-height: 44px;
}

.egc-studio-shift output {
    min-width: 2ch;
    text-align: right;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--egc-brass);
}

/* Le « papier » : ce que lit le joueur. Il reste clair dans les deux thèmes,
   comme un indice texte de l'application sur son papier. */
.egc-studio-paper-label {
    display: inline-block;
    margin: 0 0 -.65rem 1rem;
    position: relative;
    z-index: 1;
    padding: .3rem .55rem;
    border-radius: 6px;
    background: var(--egc-brass);
    color: var(--egc-on-brass);
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.egc-studio-paper {
    min-height: 5.5rem;
    margin: 0;
    padding: 1.4rem 1.3rem 1.2rem;
    border-radius: .8rem;
    background: #EDE4CF;
    color: #2A1D0B;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.5;
    letter-spacing: .06em;
    word-break: break-word;
}

.egc-studio-note {
    margin: 1rem 0 0;
    font-size: .88rem;
    color: var(--egc-night-muted);
}

.egc-studio-note strong {
    color: #FFFFFF;
}

.egc-studio-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.egc-studio-types li {
    padding: .85rem .9rem;
    border: 1px solid var(--egc-night-line);
    border-radius: .8rem;
    background: #15223A;
}

.egc-studio-types i {
    display: block;
    margin-bottom: .45rem;
    font-size: 1.4rem;
    color: var(--egc-brass);
}

.egc-studio-types strong {
    display: block;
    font-size: .95rem;
    color: #FFFFFF;
}

.egc-studio-types span {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--egc-night-muted);
}

.egc-studio-locks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.egc-studio-locks li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: #15223A;
    border: 1px solid var(--egc-night-line);
    font-size: .88rem;
}

.egc-studio-locks i {
    color: var(--egc-mint);
    font-size: 1.1rem;
}

.egc-studio-example {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .25rem .5rem;
    border: 1px solid rgba(111, 209, 190, .45);
    border-radius: 6px;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--egc-mint);
}

.egc-studio-brief {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.egc-studio-brief dl {
    display: grid;
    gap: .6rem;
    margin: 0;
}

.egc-studio-brief dt {
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--egc-night-muted);
}

.egc-studio-brief dd {
    margin: .25rem 0 0;
    padding: .5rem .7rem;
    border-radius: .5rem;
    background: #15223A;
    font-size: .9rem;
}

.egc-studio-plan {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: egc-plan;
}

.egc-studio-plan li {
    position: relative;
    padding: .6rem .75rem .6rem 2.6rem;
    border-radius: .6rem;
    background: var(--egc-ink-2);
    font-size: .9rem;
    line-height: 1.35;
    counter-increment: egc-plan;
}

.egc-studio-plan li::before {
    content: counter(egc-plan);
    position: absolute;
    left: .8rem;
    top: .6rem;
    font-family: var(--egc-font-mono);
    font-weight: 700;
    color: var(--egc-brass);
}

.egc-studio-plan small {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--egc-night-muted);
}

@media (max-width: 991.98px) {
    .egc-studio-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .egc-studio-brief {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   ACCUEIL — STATISTIQUES DU CRÉATEUR (exemple)
   ========================================================================== */
.egc-h-stats {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.egc-h-stats .egc-section-title {
    margin-bottom: 1rem;
}

.egc-h-stats-list,
.egc-h-pros-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.egc-h-stats-list li {
    display: flex;
    gap: .5rem;
    padding-block: .35rem;
    color: var(--bs-body-color);
}

.egc-h-stats-list i {
    color: var(--egc-text-accent);
    font-size: 1.25rem;
}

.egc-h-funnel {
    margin: 0;
    padding: clamp(1.2rem, 3vw, 1.75rem);
    border: 1px solid var(--egc-line);
    border-radius: var(--egc-radius-lg);
    background: var(--egc-surface);
    box-shadow: var(--egc-shadow);
}

.egc-h-funnel figcaption {
    display: grid;
    gap: .35rem;
    justify-items: start;
    margin-bottom: 1.2rem;
}

.egc-h-funnel figcaption strong {
    font-family: var(--egc-font-display);
    font-size: 1.15rem;
    color: var(--egc-heading);
}

.egc-h-funnel figcaption span:last-child {
    font-size: .88rem;
    color: var(--egc-text-muted);
}

.egc-h-funnel ol {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.egc-h-funnel li {
    display: grid;
    grid-template-columns: 4.5rem 1fr 3.2rem;
    gap: .75rem;
    align-items: center;
    font-size: .88rem;
}

.egc-h-funnel li > span:first-child {
    font-family: var(--egc-font-mono);
    font-weight: 700;
    font-size: .76rem;
    color: var(--egc-text-muted);
}

.egc-h-funnel b {
    text-align: right;
    font-family: var(--egc-font-mono);
    font-variant-numeric: tabular-nums;
}

.egc-h-funnel-track {
    height: .8rem;
    border-radius: 4px;
    background: var(--egc-ground-alt);
    overflow: hidden;
}

.egc-h-funnel-track span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--egc-primary);
}

.egc-h-funnel li.is-alert .egc-h-funnel-track span {
    background: var(--egc-brass);
}

.egc-h-funnel-note {
    margin: 1.1rem 0 0;
    font-weight: 600;
    font-size: .9rem;
    color: var(--egc-text-accent);
}

/* ==========================================================================
   ACCUEIL — STRUCTURES
   ========================================================================== */
.egc-h-pros {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.egc-h-pros .egc-section-title {
    margin-bottom: 1rem;
}

.egc-h-pros-list {
    margin-bottom: 1.75rem;
}

.egc-h-pros-list a {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: .9rem;
    align-items: center;
    padding-block: 1rem;
    border-top: 1px solid var(--egc-line);
}

.egc-h-pros-list li:last-child a {
    border-bottom: 1px solid var(--egc-line);
}

.egc-h-pros-list i {
    font-size: 1.4rem;
    color: var(--egc-text-accent);
}

.egc-h-pros-list strong {
    display: block;
    font-family: var(--egc-font-display);
    font-size: 1.15rem;
    color: var(--egc-heading);
}

.egc-h-pros-list span span {
    display: block;
    font-size: .92rem;
    color: var(--egc-text-muted);
}

.egc-h-pros-list a:hover strong {
    color: var(--egc-text-accent);
}

/* ==========================================================================
   ACCUEIL — AVIS
   ========================================================================== */
.egc-h-reviews-score {
    display: grid;
    margin: 0;
    text-align: right;
}

.egc-h-reviews-score strong {
    font-family: var(--egc-font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--egc-heading);
}

.egc-h-reviews-score span {
    font-size: .9rem;
    color: var(--egc-text-muted);
}

.egc-h-reviews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.egc-h-review {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin: 0;
    padding: 1.4rem;
    border: 1px solid var(--egc-line);
    border-radius: var(--egc-radius);
    background: var(--egc-surface);
}

.egc-h-review blockquote {
    flex: 1;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--bs-body-color);
}

.egc-h-review figcaption {
    display: grid;
    gap: .1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--egc-line);
    font-size: .9rem;
}

.egc-h-review figcaption strong {
    color: var(--egc-heading);
}

.egc-h-review figcaption a {
    display: inline-block;
    padding-block: .2rem;
    color: var(--egc-text-accent);
}

@media (max-width: 991.98px) {
    .egc-h-reviews {
        grid-template-columns: minmax(0, 1fr);
    }

    .egc-h-reviews-score {
        text-align: left;
    }
}

/* ==========================================================================
   ACCUEIL — APPEL FINAL (sombre, photo du bureau de création en fond)
   La photo est derrière un dégradé qui part de l'encre PLEINE sous le texte :
   c'est la règle « jamais de photo sous du texte blanc » tenue au pixel.
   ========================================================================== */
.egc-h-final {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(4rem, 9vw, 7.5rem);
    background: var(--egc-ink);
    color: var(--egc-night-text);
}

.egc-h-final > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
    z-index: -2;
    opacity: .55;
}

.egc-h-final::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--egc-ink) 38%, rgba(14, 23, 38, .55) 70%, rgba(14, 23, 38, .2));
}

@media (max-width: 767.98px) {
    .egc-h-final::before {
        background: linear-gradient(180deg, rgba(14, 23, 38, .85), var(--egc-ink) 60%);
    }
}

.egc-h-final .egc-eyebrow {
    color: var(--egc-brass);
}

.egc-h-final-title {
    max-width: 13ch;
    margin: 0 0 1.2rem;
    color: #FFFFFF;
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
}

.egc-h-final-text {
    max-width: 32rem;
    margin: 0 0 2rem;
    font-size: 1.12rem;
    color: var(--egc-night-muted);
}

/* ==========================================================================
   PAGE « CRÉER UNE ÉNIGME »
   ========================================================================== */
.egc-c-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 90% 10%, rgba(217, 164, 65, .14), transparent 60%),
        var(--egc-ink);
    color: var(--egc-night-text);
}

.egc-c-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.egc-c-hero .egc-eyebrow {
    color: var(--egc-brass);
}

.egc-c-hero-title {
    margin: 0 0 1.3rem;
    color: #FFFFFF;
    font-size: clamp(2.4rem, 5vw, 4.1rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.034em;
}

.egc-c-hero-title em {
    font-style: normal;
    color: var(--egc-brass);
}

.egc-c-hero-lead {
    max-width: 34rem;
    margin: 0 0 2rem;
    font-size: 1.12rem;
    color: var(--egc-night-muted);
}

.egc-c-hero-login {
    margin: 1rem 0 0;
    font-size: .95rem;
}

.egc-c-hero-login a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
}

.egc-c-scene {
    position: relative;
}

.egc-c-figure {
    aspect-ratio: 3 / 2;
    border-radius: var(--egc-radius-lg);
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(217, 164, 65, .28);
}

.egc-c-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.egc-c-checklist {
    position: absolute;
    left: -1.5rem;
    bottom: -1.5rem;
    width: 15rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: #F4F6F9;
    color: #152033;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
}

.egc-c-checklist strong {
    display: block;
    margin-bottom: .5rem;
    font-family: var(--egc-font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A5A12;
}

.egc-c-checklist ul {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
}

.egc-c-checklist li {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.egc-c-checklist i {
    font-size: 1.1rem;
    color: #0F7A63;
}

.egc-c-checklist li.is-todo {
    color: #56637A;
}

.egc-c-checklist li.is-todo i {
    color: #8A5A12;
}

@media (max-width: 991.98px) {
    .egc-c-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .egc-c-scene {
        margin-bottom: 1.5rem;
    }

    .egc-c-checklist {
        left: .5rem;
    }
}

/* Les sections conservées de la page « Créer » reprennent l'identité sans
   changer de balisage : cartes sur la surface du thème, filets fins, icônes au
   laiton. */
.enigma-type-card,
.monetize-card,
.revenue-split,
.global-cta-card {
    border: 1px solid var(--egc-line) !important;
    border-radius: var(--egc-radius-lg) !important;
    background: var(--egc-surface) !important;
    box-shadow: var(--egc-shadow) !important;
}

.enigma-type-card::before,
.enigma-type-card::after,
.global-cta-card::before {
    display: none !important;
}

.enigma-type-card .type-icon,
.monetize-card .monetize-icon {
    background: var(--egc-ink) !important;
    color: var(--egc-brass) !important;
    box-shadow: none !important;
}

.enigma-type-card .type-badge {
    background: var(--egc-nav-tint-bg) !important;
    color: var(--egc-text-accent) !important;
    border: 1px solid var(--egc-nav-tint-border) !important;
}

.enigma-type-card .type-title,
.global-cta-card .cta-title {
    font-family: var(--egc-font-display);
    color: var(--egc-heading);
}

.enigma-type-card .feature-item i {
    color: var(--egc-text-accent) !important;
}

/* ==========================================================================
   MOUVEMENT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .egc-h-path,
    .egc-h-mode img,
    .egc-h-screen-code span.is-active::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Sur téléphone la scène arrive APRÈS le texte et les chiffres : pleine largeur,
   elle ajoutait près de 500 px à un bandeau déjà long. Elle reste présente — c'est
   l'image qui montre le jeu — mais à la taille d'une illustration. */
@media (max-width: 575.98px) {
    .egc-h-scene {
        width: min(100%, 300px);
        margin-top: .5rem;
    }
}

/* ==========================================================================
   ÉCRANS DE COMPTE (`.egc-auth` : connexion, inscription, adresse à confirmer,
   mot de passe oublié, réinitialisation) — alignés sur l'identité le 25/09/2026.

   Le balisage et la mécanique ne changent pas (voir `escapegamecity.css` et
   docs/ecrans-de-compte.md) : seul l'habillage passe à l'encre et au laiton.
     · le panneau d'argumentaire quitte le dégradé bleu → violet pour la NUIT du
       bandeau d'accueil — quadrillage de plan, halo de laiton, pastilles au
       laiton ;
     · le bouton d'envoi était un dégradé `--egc-primary` → `--egc-accent` : la
       refonte ayant redéfini ces deux jetons, il était devenu un marine → or à
       texte blanc, illisible sur sa moitié dorée. Il devient un aplat de laiton,
       texte encre, comme tous les boutons principaux du site ;
     · le focus des champs suit l'accent (anneau de laiton) au lieu de l'indigo.
   ========================================================================== */
.egc-auth {
    background:
        radial-gradient(circle at 12% 16%, rgba(217, 164, 65, .10) 0%, transparent 42%),
        radial-gradient(circle at 90% 86%, rgba(30, 58, 102, .10) 0%, transparent 45%),
        var(--egc-ground-alt);
}

[data-bs-theme=dark] .egc-auth {
    background:
        radial-gradient(circle at 12% 16%, rgba(217, 164, 65, .08) 0%, transparent 42%),
        radial-gradient(circle at 90% 86%, rgba(111, 209, 190, .05) 0%, transparent 45%),
        var(--bs-body-bg);
}

.egc-auth-shell {
    background: var(--egc-surface);
    border-color: var(--egc-line);
}

.egc-auth-aside {
    background:
        radial-gradient(520px 340px at 100% 0%, rgba(217, 164, 65, .20), transparent 65%),
        var(--egc-ink);
    color: var(--egc-night-text);
}

.egc-auth-aside::before {
    background-image:
        linear-gradient(rgba(233, 237, 243, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 237, 243, .06) 1px, transparent 1px);
}

.egc-auth-aside::after {
    background: radial-gradient(circle at 10% 100%, rgba(111, 209, 190, .10) 0%, transparent 50%);
}

.egc-auth-brand,
.egc-auth-brand:hover {
    color: #FFFFFF !important;
    font-family: var(--egc-font-display);
    font-size: 1.05rem;
    letter-spacing: -.005em;
}

/* Logo vectoriel, non carré : dimensionné par sa hauteur. */
.egc-auth-brand img {
    width: auto;
    height: 34px;
}

.egc-auth-aside .egc-auth-aside-title {
    font-family: var(--egc-font-display);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    color: #FFFFFF;
}

.egc-auth-aside-lead,
.egc-auth-perks span,
.egc-auth-proof-label {
    color: var(--egc-night-muted);
}

.egc-auth-perks strong {
    color: #FFFFFF;
}

.egc-auth-perks i {
    border-radius: .6rem;
    background: rgba(217, 164, 65, .14);
    border: 1px solid rgba(217, 164, 65, .3);
    color: var(--egc-brass);
}

.egc-auth-proof {
    border-top-color: var(--egc-night-line);
}

.egc-auth-proof-value {
    font-family: var(--egc-font-display);
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

.egc-auth-title {
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--egc-heading);
}

/* --- Champs : l'anneau de focus suit l'accent ---------------------------- */
.egc-auth .form-control,
.egc-auth .form-select {
    border-color: var(--egc-line);
    background: var(--egc-surface);
}

.egc-auth .form-control:hover:not(:focus),
[data-bs-theme=dark] .egc-auth .form-control:hover:not(:focus) {
    border-color: rgba(192, 138, 40, .55);
}

.egc-auth .form-control:focus,
.egc-auth .form-select:focus,
[data-bs-theme=dark] .egc-auth .form-control:focus,
[data-bs-theme=dark] .egc-auth .form-select:focus {
    border-color: var(--egc-text-accent);
    box-shadow: 0 0 0 4px rgba(217, 164, 65, .22);
}

/* --- Bouton d'envoi : l'aplat de laiton des boutons principaux ------------ */
.egc-auth-submit,
.egc-auth-submit:hover:not(:disabled),
[data-bs-theme=dark] .egc-auth-submit {
    color: var(--egc-on-brass);
    background: var(--egc-brass);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 10px 24px -14px rgba(217, 164, 65, .85);
}

.egc-auth-submit:hover:not(:disabled) {
    background: var(--egc-brass-hi);
    filter: none;
}

.egc-auth-submit:focus-visible {
    outline: 3px solid var(--egc-text-accent);
    outline-offset: 3px;
}

/* Le fil du compte à rebours reprend l'encre : sur le laiton, le blanc ne se
   voyait pas davantage que le libellé qu'il accompagne. */
.egc-auth-submit .egc-auth-spinner {
    border-color: rgba(26, 18, 4, .3);
    border-top-color: var(--egc-on-brass);
}

.egc-auth-steps li::before {
    background: var(--egc-ink);
    color: var(--egc-brass);
    font-family: var(--egc-font-mono);
}

/* ==========================================================================
   CASES À COCHER ET BOUTONS RADIO DU SITE PUBLIC
   Le bleu Bootstrap (#2196f3) était la dernière trace de l'ancienne identité
   dans les formulaires. Marine en clair (coche blanche, 11:1), laiton en sombre
   avec une coche ENCRE — la coche blanche de Bootstrap tomberait à 2,2:1 sur l'or.
   ========================================================================== */
.form-check-input:checked {
    background-color: #1E3A66;
    border-color: #1E3A66;
}

.form-check-input:focus {
    border-color: var(--egc-text-accent);
    box-shadow: 0 0 0 .25rem rgba(217, 164, 65, .25);
}

[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--egc-brass);
    border-color: var(--egc-brass);
}

[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231A1204' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231A1204'/%3e%3c/svg%3e");
}

/* ==========================================================================
   FIL D'ARIANE (`partial/_breadcrumb.html.twig`)
   Il vit DANS le bandeau, au-dessus du titre (variante `-night`) : la bande grise
   qu'il occupait sous le bandeau se lisait comme un morceau de page égaré entre la
   nuit du bandeau et le contenu. Seul sur fond clair (page de téléchargement), il
   reste une ligne discrète, sans fond ni bordure.
   Les cibles sont des LIENS dans une ligne de texte : 24 px de haut au moins
   (WCAG 2.5.8), obtenus par le remplissage, jamais en grossissant le texte.
   ========================================================================== */
.egc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    line-height: 1.3;
}

.egc-crumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.egc-crumbs li + li::before {
    content: "/";
    padding: 0 .45rem;
    color: var(--egc-text-muted);
    opacity: .7;
}

.egc-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 24px;
    padding-block: .15rem;
    color: var(--egc-text-muted) !important;
    text-decoration: none;
}

.egc-crumbs a:hover,
.egc-crumbs a:focus-visible {
    color: var(--egc-text-accent) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.egc-crumbs a i {
    font-size: 1rem;
}

/* La page courante : un titre peut être long (une énigme), il se coupe au lieu de
   pousser la ligne sur trois rangs. */
.egc-crumbs [aria-current] span {
    display: inline-block;
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-weight: 600;
    color: var(--egc-heading);
}

/* Dans un bandeau sombre. */
.egc-crumbs-night {
    margin-bottom: 1rem;
}

.egc-crumbs-night li + li::before {
    color: var(--egc-night-muted);
    opacity: .6;
}

.egc-crumbs-night a {
    color: var(--egc-night-muted) !important;
}

.egc-crumbs-night a:hover,
.egc-crumbs-night a:focus-visible {
    color: var(--egc-brass) !important;
}

.egc-crumbs-night [aria-current] span {
    color: #FFFFFF;
}

/* Le bandeau des pages internes est centré : le fil aussi. */
.egc-page-header .egc-crumbs ol {
    justify-content: center;
}

@media (max-width: 575.98px) {
    .egc-crumbs [aria-current] span {
        max-width: 20ch;
    }
}

/* ==========================================================================
   VESTIGES DE L'ANCIENNE IDENTITÉ — passe du 25/09/2026
   --------------------------------------------------------------------------
   Relevés en MESURANT les couleurs réellement peintes sur 24 pages publiques
   (script de passe, cartes d'énigme exclues), pas en lisant la feuille : environ
   150 couleurs de l'ancienne palette y sont écrites en dur, dont une partie
   seulement s'affiche encore. Quatre causes, corrigées à la source :

   1. `--bs-primary` n'avait jamais été redéfini — seule sa variante RGB l'était.
      Tout ce qui lit `var(--bs-primary)` (icônes, chiffres, pagination active,
      intertitres) restait en bleu #2196f3.
   2. Les couleurs SÉMANTIQUES de Bootstrap servaient de décoration multicolore
      (icônes vertes, orange, cyan) : `text-success` à 1,95:1 et `text-warning` à
      1,84:1 sur blanc. Ramenées à la palette, lisibles comme texte.
   3. Le fond secondaire et les fonds « subtils » étaient LAVANDE (#EDECF5,
      #efeeff) : cartes « Retour à l'accueil », pastilles, accordéons de FAQ.
   4. Des décors en dur : halos violets, badge bleu, titres et boutons en dégradé
      marine → or (deux jetons redéfinis mélangés), carte de /villes en indigo.
   ========================================================================== */
:root {
    --bs-primary: #8A5A12;
    --bs-primary-text-emphasis: #6E470C;
    --bs-primary-bg-subtle: #F7EEDB;
    --bs-primary-border-subtle: #E6CC98;
    --bs-secondary-bg: #EEF1F5;
    --bs-secondary-bg-rgb: 238, 241, 245;
    --bs-gray-200: #E6EAF0;
    --bs-success: #0F7A63;
    --bs-success-rgb: 15, 122, 99;             /* 5,3:1 sur blanc, texte ET aplat */
    --bs-warning: #8A5A12;
    --bs-warning-rgb: 138, 90, 18;             /* bronze : les étoiles, les alertes douces */
    --bs-info: #2F5C9E;
    --bs-info-rgb: 47, 92, 158;                /* 6,4:1 sur blanc */
    --bs-info-bg-subtle: #EEF3FA;
    --bs-info-border-subtle: #C9D8EE;
    --bs-info-text-emphasis: #1E3A66;
}

[data-bs-theme=dark] {
    --bs-primary: #E3B458;
    --bs-primary-text-emphasis: #F0C872;
    --bs-primary-bg-subtle: #2A2210;
    --bs-primary-border-subtle: #6B5220;
    --bs-gray-200: #1B2840;
    --bs-success: #3FD39F;
    --bs-success-rgb: 63, 211, 159;
    --bs-warning: #E3B458;
    --bs-warning-rgb: 227, 180, 88;
    --bs-info: #9DBBEA;
    --bs-info-rgb: 157, 187, 234;
    --bs-info-bg-subtle: #13223A;
    --bs-info-border-subtle: #2A4166;
    --bs-info-text-emphasis: #BFD3F2;
}

/* Les aplats sémantiques portent un texte blanc dans le balisage : en sombre, les
   couleurs claires ci-dessus le rendraient illisible. L'aplat garde donc sa valeur
   foncée, lisible sous du blanc, dans les deux thèmes. */
[data-bs-theme=dark] .bg-success {
    background-color: #0F7A63 !important;
}

[data-bs-theme=dark] .bg-info {
    background-color: #2F5C9E !important;
}

/* Pagination : l'aplat actif prend l'encre (le bleu y tenait le blanc). */
.pagination {
    --bs-pagination-active-bg: #1E3A66;
    --bs-pagination-active-border-color: #1E3A66;
    --bs-pagination-color: var(--egc-primary);
    --bs-pagination-hover-color: var(--egc-text-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(217, 164, 65, .25);
}

[data-bs-theme=dark] .pagination {
    --bs-pagination-active-bg: var(--egc-brass);
    --bs-pagination-active-border-color: var(--egc-brass);
    --bs-pagination-active-color: var(--egc-on-brass);
}

/* Accordéons (FAQ) : l'entrée ouverte était lavande, son anneau de focus bleu. */
.accordion {
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(217, 164, 65, .25);
}

/* --- Surcapitales de section : le filet bleu → violet devient laiton ------ */
.section-eyebrow .eyebrow-line,
.section-eyebrow.eyebrow-light .eyebrow-line {
    background: var(--egc-brass);
}

.section-eyebrow.eyebrow-light {
    color: var(--egc-brass);
}

/* --- Halos décoratifs des bandes sombres : l'or remplace le violet -------- */
.create-glow-1 {
    background: radial-gradient(circle, rgba(217, 164, 65, .55), transparent 70%);
}

.create-glow-2 {
    background: radial-gradient(circle, rgba(111, 209, 190, .35), transparent 70%);
}

/* Bande finale des pages éditoriales et pro : la nuit du site, pas l'indigo. */
.final-cta-band {
    background:
        radial-gradient(900px 420px at 50% 110%, rgba(217, 164, 65, .14), transparent 60%),
        var(--egc-ink);
}

/* --- Gros boutons des bandes : laiton plein, texte encre ------------------ */
.btn-hero-play,
.btn-hero-play:hover,
.btn-hero-play:focus-visible {
    background: var(--egc-brass);
    color: var(--egc-on-brass);
    box-shadow: 0 10px 26px -12px rgba(217, 164, 65, .8);
}

.btn-hero-play:hover {
    background: var(--egc-brass-hi);
}

.btn-hero-create:hover {
    border-color: var(--egc-brass);
}

/* --- Titres peints en dégradé marine → or : couleur de titre, sans dégradé - */
.cta-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--egc-heading) !important;
}

/* --- « Comment ça marche » et pages éditoriales --------------------------- */
.stats-number {
    color: var(--egc-text-accent);
}

.gaming-badge,
[data-bs-theme=dark] .gaming-badge {
    background: rgba(14, 23, 38, .82);
    color: #FFFFFF;
}

.ideal-title {
    color: var(--egc-text-accent);
}

/* --- Tuiles d'icône des cartes « Pour qui » (pro, pages éditoriales) ------ */
.how-step-icon,
[data-bs-theme=dark] .how-step-icon {
    background: var(--egc-ink);
    color: var(--egc-brass);
}

/* --- Bandeau clair des pages pro et de téléchargement ----------------------
   Il était LAVANDE (bleu 10 % + violet 10 %) sous le bandeau sombre : deux
   bandeaux d'identités différentes empilés. La pierre du site le rattache au
   contenu ; la pastille d'en-tête prend le vocabulaire des cartes. */
.creator-background {
    background:
        radial-gradient(700px 360px at 90% 10%, rgba(217, 164, 65, .10), transparent 60%),
        var(--egc-ground-alt);
}

[data-bs-theme=dark] .creator-background {
    background:
        radial-gradient(700px 360px at 90% 10%, rgba(217, 164, 65, .08), transparent 60%),
        var(--egc-ground-alt);
}

.creator-badge {
    background: var(--egc-surface);
    border-color: var(--egc-line);
    color: var(--egc-heading);
}

.creator-badge:hover {
    box-shadow: var(--egc-shadow);
}

.creator-badge i {
    color: var(--egc-text-accent) !important;
}

.creator-badge .badge-glow {
    display: none;
}

/* --- Carte de /villes : l'indigo passe au marine, les pastilles à l'encre --- */
:root {
    --egc-map-sea: #F3F5F8;
    --egc-map-land: #E4E9F0;
    --egc-map-land-main: #CAD3E0;
    --egc-map-stroke: #C4CCD8;
    --egc-map-stroke-main: #8C9AB0;
    --egc-map-grid: rgba(30, 58, 102, .12);
    --egc-map-border: rgba(30, 58, 102, .14);
    --egc-map-pin: #1E3A66;
    --egc-map-pin-ink: #FFFFFF;
    --egc-map-name: #111C2E;
    --egc-map-name-bg: rgba(255, 255, 255, .92);
    --egc-map-vignette: rgba(14, 23, 38, .10);
}

[data-bs-theme=dark] {
    --egc-map-sea: #0A111D;
    --egc-map-land: #15203A;
    --egc-map-land-main: #1E2D4A;
    --egc-map-stroke: #2A3A58;
    --egc-map-stroke-main: #46597D;
    --egc-map-grid: rgba(217, 164, 65, .14);
    --egc-map-border: rgba(217, 164, 65, .16);
    --egc-map-pin: #D9A441;
    --egc-map-pin-ink: #1A1204;
    --egc-map-name: #E9EDF3;
    --egc-map-name-bg: rgba(10, 17, 29, .88);
    --egc-map-vignette: rgba(0, 0, 0, .45);
}

/* ==========================================================================
   PAGE « CRÉER » — deux sections sombres consécutives
   Le bandeau et le Studio ont chacun leur halo : posés bout à bout, la couture se
   voyait comme une marche de teinte au milieu de la nuit. Un filet la nomme, et le
   Studio perd une part de son retrait haut (le bandeau a déjà le sien).
   ========================================================================== */
.egc-c-hero + .egc-studio {
    border-top: 1px solid var(--egc-night-line);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* --- Derniers bleus écrits en dur (filtres du catalogue, encadré d'info) --- */
.form-label-modern i,
.info-header,
.color-primary {
    color: var(--egc-text-accent);
}

.label-primary {
    background-color: var(--egc-primary);
}

.border-primary-clue {
    border-color: var(--egc-brass);
}

/* ⚠ L'arche du bandeau d'accueil garde la classe `.hero-figure` — le test de
   l'image LCP (SeoTest) la cherche — et héritait donc de TOUTE l'ancienne carte
   photo : largeur plafonnée (250 → 400 px), liseré en dégradé indigo → cyan,
   reflet, et surtout une inclinaison 3D de −7° avec une animation de flottement
   au-delà de 992 px. L'arche paraissait de biais. Tout est neutralisé ici. */
.egc-h-arch.hero-figure {
    max-width: none;
    margin-inline: 0;
    padding: 0;
    line-height: normal;
    background: none;
    transform: none;
    animation: none;
}

.egc-h-arch.hero-figure::after {
    background: linear-gradient(180deg, transparent 55%, rgba(14, 23, 38, .55));
}

.egc-h-arch.hero-figure img {
    border-radius: 0;
}

/* ⚠ ORDRE DES BLOCS DE JETONS. Un `:root` déclaré APRÈS un `[data-bs-theme=dark]`
   l'emporte sur lui pour l'élément <html> (même spécificité, le dernier gagne) :
   tout jeton redéclaré dans le `:root` du bloc « vestiges » DOIT l'être aussi dans
   son `[data-bs-theme=dark]`. Oublié pour `--bs-secondary-bg` : les pastilles de
   chiffres de /pro sortaient BLANCHES sous un texte blanc, en thème sombre. */
[data-bs-theme=dark] {
    --bs-secondary-bg: #131E30;
    --bs-secondary-bg-rgb: 19, 30, 48;
}

/* --- Dégradés marine → laiton restants (relevés dans escapegamecity.css) ---
   Les deux jetons ayant été redéfinis, chaque dégradé `--egc-primary(-light)` →
   `--egc-accent` était devenu un bleu → or à texte blanc. Les BOUTONS prennent
   l'aplat de laiton ; les PASTILLES (numéros, icônes) l'encre avec le laiton. */
.btn-modern-search,
.btn-modern-search:hover,
.story-cta-btn,
.story-cta-btn:hover {
    background: var(--egc-brass) !important;
    color: var(--egc-on-brass) !important;
    box-shadow: 0 10px 24px -14px rgba(217, 164, 65, .85) !important;
}

.btn-modern-search:hover,
.story-cta-btn:hover {
    background: var(--egc-brass-hi) !important;
}

.step-item .step-number,
.process-step .step-number,
.how-step-num,
.stats-icon {
    background: var(--egc-ink) !important;
    color: var(--egc-brass) !important;
}

.btn-glow,
.badge-glow {
    display: none;
}

.image-glow {
    background: radial-gradient(circle, rgba(217, 164, 65, .35), transparent 70%) !important;
}

/* Le grand code de la page d'erreur (404) : bronze en clair, laiton en sombre. */
.egc-error-code {
    background: linear-gradient(100deg, #8A5A12, #6E470C) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

[data-bs-theme=dark] .egc-error-code {
    background: linear-gradient(100deg, #F0C872, #D9A441) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Le titre en dégradé « néon » portait une ombre violette (drop-shadow indigo) :
   sur la nouvelle couleur, elle le rendait terne et flou. */
.text-gradient,
.text-gradient-neon {
    filter: none !important;
    -webkit-text-fill-color: transparent;
}

/* --- Catalogue (/recherche) : filtres et compteur --------------------------- */
.stats-decoration {
    background: radial-gradient(circle, rgba(217, 164, 65, .14), transparent 70%);
}

.filter-icon {
    background: var(--bs-primary-bg-subtle);
    color: var(--egc-text-accent);
}

.form-select-modern {
    border-color: var(--egc-line);
    background-color: var(--egc-surface);
}

.form-select-modern:focus {
    border-color: var(--egc-text-accent);
    box-shadow: 0 0 0 4px rgba(217, 164, 65, .22);
}

.nature-type {
    background: #0F7A63;
}

.hero-trust-bar .trust-item:hover {
    border-color: var(--egc-brass);
}

/* Un texte peint par un dégradé a une couleur TRANSPARENTE : une ombre portée
   transparaît à travers ses lettres. Le thème sombre en posait une noire à 90 %
   sur les titres de bandeau clair (/pro, téléchargement) — ils sortaient ternes. */
.text-gradient,
.text-gradient-neon,
[data-bs-theme=dark] .creator-title,
[data-bs-theme=dark] .creator-title .text-gradient {
    text-shadow: none !important;
}

/* Bleu GitHub (#58a6ff) resté sur deux règles du thème sombre : focus des champs,
   icônes des filtres du catalogue. */
[data-bs-theme=dark] .form-control:focus {
    border-color: var(--egc-text-accent);
    box-shadow: 0 0 0 .25rem rgba(217, 164, 65, .25);
}

[data-bs-theme=dark] .form-label-modern i {
    color: var(--egc-text-accent);
}

/* Mention sous chaque choix de /j-ai-un-code : #8b8a97 en dur, 3,4:1 sur blanc. */
.code-choice-format {
    color: var(--egc-text-muted);
}