/**
 * EurêCard — Harmonisation sitewide des containers de page
 *
 * Objectif : que TOUTES les pages aient le même container visuel :
 *   - max-width : 1680px (canonique idd-design)
 *   - padding-inline : 14px desktop / 8px mobile
 *   - box-sizing : border-box
 *
 * Stratégie :
 *  - Cible les wrappers top-level identifiés sur chaque template du site
 *  - Utilise les tokens centraux --idd-container-* (via aliases ils tirent
 *    de l'admin idd-design)
 *  - Chargé en priorité 999, après TOUT autre CSS, pour gagner la cascade
 *  - Mobile-first
 *
 * @package Pokeboard
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. WRAPPERS TOP-LEVEL — alignement sur le container canonique
   Liste exhaustive des wrappers principaux de tous les templates.
   ═══════════════════════════════════════════════════════════════════════════ */
.pkbh-v2,                                        /* front-page hero v2 */
.pkdx-global-archive,                             /* archive-pokemon */
.pkdx-global-wrap,                                /* archive-pokemon inner */
.pbc-main,                                        /* /cote/ (pokeboard-cote) */
.pkb-ds-page,                                     /* design system pages (agenda + plus) */
.ecm-app,                                         /* eurecard-maps app wrapper */
.pkb-account-app,                                 /* account pages (logged-in) */
.pkb-card-archive,                                /* archive-carte_pokemon */
.pkb-collection-page,                             /* pkb-collection template */
.pkb-favoris-page,                                /* pkb-favoris template */
.pkb-progression-page,                            /* pkb-progression template */
.pkb-pdx-single,                                  /* single-pokemon */
.pkb-card-single,                                 /* single-carte_pokemon */
body > main.pbcs-main {                           /* coming-soon (last fallback) */
    width: 100% !important;
    max-width: var(--idd-container-width, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--idd-container-padding, 14px) !important;
    padding-right: var(--idd-container-padding, 14px) !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .pkbh-v2,
    .pkdx-global-archive,
    .pkdx-global-wrap,
    .pbc-main,
    .pkb-ds-page,
    .ecm-app,
    .pkb-account-app,
    .pkb-card-archive,
    .pkb-collection-page,
    .pkb-favoris-page,
    .pkb-progression-page,
    .pkb-pdx-single,
    .pkb-card-single,
    body > main.pbcs-main {
        padding-left: var(--idd-container-padding-mobile, 8px) !important;
        padding-right: var(--idd-container-padding-mobile, 8px) !important;
    }
}

/* Exception : coming-soon landing — son design est intentionnellement
   plus étroit (1140px) avec hero centré. On préserve son look UNIQUEMENT
   en mode anonyme (où il intercepte). Cette page est temporaire et sera
   décommissionnée à l'ouverture publique. */
body.pbcs-active main.pbcs-main {
    max-width: 1140px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

@media (max-width: 720px) {
    body.pbcs-active main.pbcs-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET LARGEURS LEGACY — neutralise les max-width random
   Les anciens templates ont parfois des max-width 1100px, 1200px, 1280px,
   1400px à des wrappers internes qui empêchent l'expansion vers 1680px.
   On garantit que les sections intérieures peuvent prendre toute la largeur
   du container parent (qui lui-même limite à 1680px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pages dashboard / account : section main */
.pkb-account-page .pkb-dash-main {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Theme content wrapper natif WordPress */
.site-content,
.entry-content,
.page-content {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. NORMALISATION DES IMAGES — pas de débordement
   ═══════════════════════════════════════════════════════════════════════════ */
.pkbh-v2 img,
.pkdx-global-archive img,
.pbc-main img,
.pkb-ds-page img,
.ecm-app img,
.pkb-account-page img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. TYPOGRAPHIE BASE — uniformisation sur les vrais containers
   On définit la base typo dans les containers principaux pour éviter qu'un
   template hérite de styles random (Tailwind par ex.). Tokens centralisés.
   ═══════════════════════════════════════════════════════════════════════════ */
.pkbh-v2,
.pkdx-global-archive,
.pbc-main,
.pkb-ds-page,
.ecm-app,
.pkb-account-page,
.pkb-card-archive {
    font-family: var(--idd-font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: var(--idd-font-size-base, 16px);
    line-height: var(--idd-line-height-base, 1.55);
    color: var(--idd-color-text, #1a1a2e);
}

/* H1 / H2 / H3 dans les containers de page : taille + poids harmonisés
   (sans casser les selectors plus spécifiques de chaque template) */
.pkbh-v2 h1,
.pkdx-global-archive h1,
.pbc-main h1,
.pkb-ds-page h1,
.pkb-card-archive h1,
.pkb-account-page h1 {
    font-family: var(--idd-font-family-heading, inherit);
    color: var(--idd-color-text, #1a1a2e);
    line-height: var(--idd-line-height-heading, 1.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CONTRACTS NATIFS — gap, margins, sections intérieures
   Espacement vertical cohérent entre sections d'une même page.
   ═══════════════════════════════════════════════════════════════════════════ */
.pkb-ds-page > section,
.pkb-ds-page > article,
.pkb-ds-page > .pkb-ds-section,
.pkbh-v2 > section,
.pbc-main > section,
.ecm-app > section {
    margin-bottom: var(--idd-gap-xl, 40px);
}

@media (max-width: 768px) {
    .pkb-ds-page > section,
    .pkb-ds-page > article,
    .pkb-ds-page > .pkb-ds-section,
    .pkbh-v2 > section,
    .pbc-main > section,
    .ecm-app > section {
        margin-bottom: var(--idd-gap-lg, 24px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. LIENS GÉNÉRIQUES — couleur brand cohérente dans tous les containers
   ═══════════════════════════════════════════════════════════════════════════ */
.pkbh-v2 p a:not([class]),
.pkdx-global-archive p a:not([class]),
.pbc-main p a:not([class]),
.pkb-ds-page p a:not([class]),
.pkb-card-archive p a:not([class]) {
    color: var(--idd-color-primary, #fe0201);
    text-decoration: underline;
    text-decoration-color: rgba(254, 2, 1, 0.35);
    text-underline-offset: 3px;
    font-weight: 600;
}

.pkbh-v2 p a:not([class]):hover,
.pkdx-global-archive p a:not([class]):hover,
.pbc-main p a:not([class]):hover,
.pkb-ds-page p a:not([class]):hover,
.pkb-card-archive p a:not([class]):hover {
    text-decoration-color: var(--idd-color-primary, #fe0201);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. FIX OVERFLOW HORIZONTAL — anti-scroll-bar accidental
   Certains templates héritent d'éléments larges qui causent un scroll
   horizontal indésirable. On contraint au container.

   ⚠️ IMPORTANT : utiliser `overflow-x: clip` PAS `hidden`.
   `overflow-x: hidden` crée un scrolling context qui CASSE position: sticky
   du header (.pb-site-header devient sticky par rapport au body au lieu du
   viewport → décalage visuel ~78px du haut). `clip` empêche le scroll
   horizontal mais préserve le sticky natif. Bug identifié 2026-05-21.
   ═══════════════════════════════════════════════════════════════════════════ */
body {
    overflow-x: clip;
}

.pkbh-v2,
.pkdx-global-archive,
.pbc-main,
.pkb-ds-page,
.ecm-app,
.pkb-account-page,
.pkb-card-archive {
    overflow-x: clip;
}