/* ============================================================
   PF. — socle de la charte graphique v1.0 (octobre 2026)
   Fichier commun à pokemon-france.com (thème pf2026, assets/brand/pf-brand.css)
   et à passlord.net (style/pf_brand.css) : garder les deux copies identiques.

   Palette (p. 10) : Noir PF, Blanc PF, Jaune électrique, Jaune ombre,
   Graphite, Acier, Filet, Blanc pur — aucune autre couleur d'identité.
   Typographie (p. 12) : Unbounded 900/700 pour les titres, Inter 400/500/700
   pour le texte. Mode sombre automatique (prefers-color-scheme) : fond Noir PF,
   surfaces Graphite, texte Blanc PF, texte secondaire Acier.
   Le jaune n'est jamais du texte sur fond clair (p. 11) : sur fond clair,
   liens et accents de texte restent en Noir PF.
   ============================================================ */

:root {
    --pfb-noir: #0A0A0A;
    --pfb-blanc: #F5F3EE;
    --pfb-jaune: #FFCC00;
    --pfb-jaune-ombre: #E0A800;
    --pfb-graphite: #2A2A2C;
    --pfb-acier: #9A9AA0;
    --pfb-filet: #E6E4DD;
    --pfb-blanc-pur: #FFFFFF;

    --pfb-font-titre: 'Unbounded', 'Arial Black', sans-serif;
    --pfb-font-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Thème clair : fond Blanc pur, texte Noir PF, séparateurs Filet. */
    --pfb-fond: var(--pfb-blanc-pur);
    --pfb-surface: var(--pfb-blanc-pur);
    --pfb-surface-2: var(--pfb-blanc);
    --pfb-encre: var(--pfb-noir);
    --pfb-encre-2: var(--pfb-graphite);
    --pfb-encre-corps: var(--pfb-graphite);   /* texte courant : Graphite sur clair, Blanc PF sur sombre */
    --pfb-ligne: var(--pfb-filet);
    --pfb-lien: var(--pfb-noir);
    --pfb-accent-texte: var(--pfb-noir);

    /* Têtière (p. 15) : blanche en clair (alternative), noire en sombre (recommandée). */
    --pfb-tetiere-fond: var(--pfb-blanc-pur);
    --pfb-tetiere-encre: var(--pfb-noir);
    --pfb-tetiere-filet: var(--pfb-filet);
    --pfb-tetiere-h: 64px;
    --pfb-tetiere-logo-h: 36px;
    --pfb-tetiere-marge: 16px;

    /* Pied de page : Noir PF (proportions p. 10 : noir 65 %). */
    --pfb-pied-fond: var(--pfb-noir);
    --pfb-pied-encre: var(--pfb-blanc);
    --pfb-pied-encre-2: var(--pfb-acier);
    --pfb-pied-filet: var(--pfb-graphite);

    color-scheme: light;
}

@media (min-width: 1024px) {
    :root {
        --pfb-tetiere-h: 80px;
        --pfb-tetiere-logo-h: 44px;
        --pfb-tetiere-marge: 32px;
    }
}

/* Mode sombre : choix du système (par défaut) ou choix explicite (data-theme sur <html>, posé par le site :
   bouton de la têtière sur pokemon-france.com, réglage « Apparence » du profil sur passlord.net). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pfb-fond: var(--pfb-noir);
        --pfb-surface: var(--pfb-graphite);
        --pfb-surface-2: var(--pfb-graphite);
        --pfb-encre: var(--pfb-blanc);
        --pfb-encre-2: var(--pfb-acier);
        --pfb-encre-corps: var(--pfb-blanc);
        --pfb-ligne: var(--pfb-graphite);
        --pfb-lien: var(--pfb-jaune);
        --pfb-accent-texte: var(--pfb-jaune);
        --pfb-tetiere-fond: var(--pfb-noir);
        --pfb-tetiere-encre: var(--pfb-blanc);
        --pfb-tetiere-filet: var(--pfb-graphite);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --pfb-fond: var(--pfb-noir);
    --pfb-surface: var(--pfb-graphite);
    --pfb-surface-2: var(--pfb-graphite);
    --pfb-encre: var(--pfb-blanc);
    --pfb-encre-2: var(--pfb-acier);
    --pfb-encre-corps: var(--pfb-blanc);
    --pfb-ligne: var(--pfb-graphite);
    --pfb-lien: var(--pfb-jaune);
    --pfb-accent-texte: var(--pfb-jaune);
    --pfb-tetiere-fond: var(--pfb-noir);
    --pfb-tetiere-encre: var(--pfb-blanc);
    --pfb-tetiere-filet: var(--pfb-graphite);
    color-scheme: dark;
}

/* ---------- Logo : la bonne version selon le fond ----------
   <span class="pfb-logo"> avec deux images : .pfb-logo__clair (positif) et .pfb-logo__sombre (négatif),
   commutées selon le thème effectif. Fond toujours noir (pied de page) : le négatif seul. */
.pfb-logo { display: inline-flex; line-height: 0; }
.pfb-logo img { display: block; width: auto; height: 100%; max-width: none; }
.pfb-logo .pfb-logo__sombre { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pfb-logo .pfb-logo__clair { display: none; }
    :root:not([data-theme="light"]) .pfb-logo .pfb-logo__sombre { display: block; }
}
:root[data-theme="dark"] .pfb-logo .pfb-logo__clair { display: none; }
:root[data-theme="dark"] .pfb-logo .pfb-logo__sombre { display: block; }

/* ---------- Échelle typographique (p. 12) — corps / interlignage en px ---------- */
.pfb-accroche { font-family: var(--pfb-font-titre); font-weight: 900; font-size: 32px; line-height: 36px; letter-spacing: -.02em; }
.pfb-h1 { font-family: var(--pfb-font-titre); font-weight: 900; font-size: 28px; line-height: 32px; letter-spacing: -.02em; }
.pfb-h2 { font-family: var(--pfb-font-titre); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -.01em; }
.pfb-h3 { font-family: var(--pfb-font-titre); font-weight: 700; font-size: 17px; line-height: 24px; letter-spacing: 0; }
.pfb-chapo { font-family: var(--pfb-font-texte); font-weight: 500; font-size: 17px; line-height: 27px; }
.pfb-texte { font-family: var(--pfb-font-texte); font-weight: 400; font-size: 16px; line-height: 26px; }
.pfb-legende { font-family: var(--pfb-font-texte); font-weight: 500; font-size: 13px; line-height: 20px; }
.pfb-surtitre { font-family: var(--pfb-font-texte); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
.pfb-bouton { font-family: var(--pfb-font-texte); font-weight: 700; font-size: 15px; line-height: 20px; letter-spacing: .01em; }

@media (min-width: 1024px) {
    .pfb-accroche { font-size: 48px; line-height: 52px; }
    .pfb-h1 { font-size: 36px; line-height: 40px; }
    .pfb-h2 { font-size: 26px; line-height: 32px; }
    .pfb-h3 { font-size: 19px; line-height: 26px; }
    .pfb-chapo { font-size: 19px; line-height: 30px; }
    .pfb-texte { font-size: 17px; line-height: 28px; }
}

/* Le point jaune (p. 13) : clôt une accroche de quatre mots au plus, un seul par écran. */
.pfb-point { color: var(--pfb-jaune); }

/* Pastille Premium (p. 15) : pastille Jaune, étoile Noir PF. */
.pfb-premium {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 9999px;
    background: var(--pfb-jaune);
    color: var(--pfb-noir) !important;
    font-family: var(--pfb-font-texte);
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: .01em;
    text-decoration: none !important;
    white-space: nowrap;
}
.pfb-premium:hover { background: var(--pfb-jaune-ombre); }
.pfb-premium svg { width: 16px; height: 16px; flex: none; }