/* Liberta Press — refonte 2026-07 (v2, palette claire éditoriale) */
:root {
    --lp-bg: #F7F8F6;
    --lp-card: #FFFFFF;
    --lp-border: #DDE2DD;
    --lp-text: #14231B;
    --lp-text-muted: #5B6B62;
    --lp-accent: #1A3A2A;
    --lp-accent-2: #2D6A4F;
    --lp-mono: "IBM Plex Mono", monospace;
}

/* ─── Signature : barre de "mise en lumière" sous les titres de section ─── */
.lp-eyebrow {
    display: inline-block;
    font-family: var(--lp-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-accent-2);
    margin-bottom: 6px;
}
.lp-section-heading {
    margin: 0 0 4px;
    padding: 0;
}
.lp-rule {
    width: 48px;
    height: 5px;
    background: var(--lp-accent);
    border-radius: 2px;
    margin: 10px 0 20px;
}

/* ─── Cartes d'articles ─── */
.lp-card {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    display: flex;
    flex-direction: column;
}
.lp-card:hover {
    border-color: var(--lp-accent-2);
    box-shadow: 0 6px 20px rgba(20, 35, 27, 0.08);
    transform: translateY(-2px);
}
.lp-card img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; }
.lp-card .lp-card-body { padding: 14px 16px 18px; }

/* ─── Badges de catégorie ─── */
.lp-card-top,
.lp-hero-rail-item .lp-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--lp-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
}
.lp-card h3, .lp-card h4 {
    font-family: "Source Serif 4", Georgia, serif;
    line-height: 1.3;
    margin: 0 0 6px;
}
.lp-card h3 a, .lp-card h4 a { color: var(--lp-text); text-decoration: none; }
.lp-card h3 a:hover, .lp-card h4 a:hover { color: var(--lp-accent-2); }
.lp-meta {
    font-family: var(--lp-mono);
    font-size: 11px;
    color: var(--lp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Grilles ─── */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }

/* ─── Hero "à la une" : article vedette + rail de titres secondaires ─── */
.lp-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.lp-hero-main img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; }
.lp-hero-main h2 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1.15;
    margin: 16px 0 8px;
}
.lp-hero-main h2 a { color: var(--lp-text); text-decoration: none; }
.lp-hero-main h2 a:hover { color: var(--lp-accent-2); }
.lp-hero-rail { display: flex; flex-direction: column; gap: 18px; }
.lp-hero-rail-item { padding-bottom: 18px; border-bottom: 1px solid var(--lp-border); }
.lp-hero-rail-item:last-child { border-bottom: none; }
.lp-hero-rail-item h4 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; line-height: 1.3; margin: 0 0 4px; }
.lp-hero-rail-item h4 a { color: var(--lp-text); text-decoration: none; }
.lp-hero-rail-item h4 a:hover { color: var(--lp-accent-2); }

@media (max-width: 782px) {
    .lp-hero { grid-template-columns: 1fr; }
}

/* ─── Formulaires ─── */
.lp-form-wrap input[type="text"],
.lp-form-wrap input[type="email"],
.lp-form-wrap input[type="password"] {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    color: var(--lp-text);
    border-radius: 6px;
    padding: 10px 12px;
    width: 100%;
    max-width: 360px;
    margin-bottom: 12px;
}
.lp-form-wrap .wp-element-button,
.lp-form-wrap button,
.lp-form-wrap input[type="submit"] {
    background: var(--lp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
}
.lp-form-wrap .wp-element-button:hover,
.lp-form-wrap button:hover,
.lp-form-wrap input[type="submit"]:hover { background: var(--lp-accent-2); }

/* ─── Bandeau Liberta Local ─── */
.lp-banner { background: var(--lp-accent); color: #fff; padding: 10px 16px; text-align: center; font-size: 14px; }
.lp-banner a { color: #fff; font-weight: 600; text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   Menu mobile — correctif de contraste explicite (bug de la v1 : icône et
   overlay hérités de currentColor/du blanc par défaut de WordPress, invisibles
   sur fond sombre). Ici le fond est clair donc le risque est moindre, mais on
   fixe les couleurs explicitement plutôt que de compter sur l'héritage.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    color: var(--lp-text) !important;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: var(--lp-card) !important;
    color: var(--lp-text) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
    color: var(--lp-text) !important;
}

/* ─── Sous-menu "Catégories" repliable dans l'overlay mobile ───
   WordPress fournit déjà le bouton + l'état aria-expanded (interactivité
   native), mais affiche le sous-menu grand ouvert par défaut dans l'overlay
   mobile. On le masque et on ne l'affiche que quand le bouton associé est
   dans l'état "ouvert". */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}
/* WordPress cache ce bouton par défaut dans l'overlay mobile (il ne sert
   qu'au dropdown desktop) — on le réaffiche ici pour permettre le repli. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    display: block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
    transition: transform .15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ─── Icônes du menu ─── */
.wp-block-navigation-item__label .lp-menu-icon { margin-right: 5px; }

/* ─── Masthead : bande dégradée reprenant les couleurs de catégories ─── */
header.wp-block-template-part {
    position: relative;
}
header.wp-block-template-part::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        #2563EB, #7C3AED, #DB2777, #B91C1C, #C2410C,
        #CA8A04, #4D7C0F, #16A34A, #059669, #0891B2,
        #0369A1, #1E3A8A, #92400E, #57534E, #991B1B
    );
}

/* ─── Accents colorés des éléments principaux du menu (desktop ET mobile) ─── */
.lp-nav-item > .wp-block-navigation-item__content,
.lp-nav-cats > a.wp-block-navigation-item__content {
    border-radius: 100px;
    padding: 6px 14px !important;
    font-weight: 600;
    border: 1px solid transparent;
}
.lp-nav-accueil > .wp-block-navigation-item__content {
    background: color-mix(in srgb, #1A3A2A 10%, white);
    color: #1A3A2A !important;
    border-color: color-mix(in srgb, #1A3A2A 25%, white);
}
.lp-nav-articles > .wp-block-navigation-item__content {
    background: color-mix(in srgb, #2563EB 10%, white);
    color: #2563EB !important;
    border-color: color-mix(in srgb, #2563EB 25%, white);
}
.lp-nav-cats > a.wp-block-navigation-item__content {
    background: color-mix(in srgb, #CA8A04 10%, white);
    color: #CA8A04 !important;
    border-color: color-mix(in srgb, #CA8A04 25%, white);
}
.lp-nav-contact > .wp-block-navigation-item__content {
    background: color-mix(in srgb, #0891B2 10%, white);
    color: #0891B2 !important;
    border-color: color-mix(in srgb, #0891B2 25%, white);
}
.lp-nav-accueil:hover > .wp-block-navigation-item__content,
.lp-nav-articles:hover > .wp-block-navigation-item__content,
.lp-nav-cats:hover > a.wp-block-navigation-item__content,
.lp-nav-contact:hover > .wp-block-navigation-item__content {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(20,35,27,0.12);
}
.lp-nav-donation > .wp-block-navigation-item__content {
    background: #EA580C;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 100px;
}
.lp-nav-donation:hover > .wp-block-navigation-item__content { background: #C2410C; }
.wp-block-navigation-item__content { transition: color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; }

/* ─── Sous-menu Catégories : grille de cartes colorées (dropdown desktop) ─── */
.lp-nav-cats .wp-block-navigation__submenu-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px;
    padding: 16px !important;
    min-width: 560px;
    background: var(--lp-card) !important;
    border: 1px solid var(--lp-border) !important;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20,35,27,0.12);
}
.lp-cat-card {
    list-style: none;
    width: 100%;
}
.lp-cat-card > a.wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--card-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--card-color) 30%, white);
    color: var(--card-color) !important;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 12px !important;
    border-radius: 8px;
    white-space: normal;
    line-height: 1.25;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lp-cat-card > a.wp-block-navigation-item__content:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--card-color) 25%, transparent);
}

/* Mobile : réaffirmer le repli par défaut (la règle grid ci-dessus ne doit
   PAS casser le correctif de repli déjà en place) puis grille 2 colonnes
   uniquement une fois déplié. */
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats .wp-block-navigation__submenu-container {
    display: none !important;
    box-shadow: none;
    border: none;
    background: transparent !important;
    padding: 8px 0 !important;
    min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
  .lp-nav-cats .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

/* ─── Cohérence mobile : tout aligné à gauche, largeur pleine ───
   Le bloc Navigation core est configuré en justifyContent:right (desktop),
   ce qui se propage à l'overlay mobile et donne des éléments dispersés à
   droite, incohérents avec la grille de cartes alignée à gauche. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start !important;
    width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-donation {
    width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-donation > .wp-block-navigation-item__content {
    width: auto;
}

/* Neutralise la variable CSS "justified-right" héritée du desktop, dans l'overlay mobile */
.wp-block-navigation__responsive-container.is-menu-open .items-justified-right {
    --navigation-layout-justification-setting: flex-start !important;
    --navigation-layout-justify: flex-start !important;
    --navigation-layout-align: flex-start !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* ─── Sélecteur de langue discret (header) ─── */
.lp-lang-switcher { display: flex; align-items: center; }
.lp-lang-switcher .gtranslate_wrapper { display: inline-flex; align-items: center; gap: 6px; }
.lp-lang-flag {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--lp-border);
}
.lp-lang-switcher select.gt_selector {
    font-family: var(--lp-sans, inherit);
    font-size: 12px;
    color: var(--lp-text-muted);
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    padding: 5px 12px;
    max-width: 120px;
    cursor: pointer;
    appearance: auto;
    transition: border-color .15s ease, color .15s ease;
}
.lp-lang-switcher select.gt_selector:hover,
.lp-lang-switcher select.gt_selector:focus {
    border-color: var(--lp-accent-2);
    color: var(--lp-text);
}

/* ─── Compacité du header sur mobile ─── */
@media (max-width: 600px) {
    .lp-banner { font-size: 12px; padding: 6px 12px; }
    header.wp-block-template-part .wp-block-site-logo img,
    header.wp-block-template-part .wp-block-site-logo {
        max-width: 130px !important;
        width: 130px !important;
        height: auto !important;
    }
    header.wp-block-template-part {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .lp-lang-switcher select.gt_selector {
        font-size: 11px;
        padding: 3px 10px;
        max-width: 90px;
    }

    /* Logo centré entre le hamburger (gauche) et le sélecteur de langue (droite).
       Grille à 3 colonnes plutôt que flex : le logo reste au centre exact de la
       barre même si les deux éléments latéraux n'ont pas la même largeur. */
    .lp-header-row {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
    }
    .lp-header-controls {
        display: contents !important;
    }
    .lp-header-controls .wp-block-navigation {
        order: 1;
        justify-self: start;
    }
    .lp-header-logo {
        order: 2;
        justify-self: center;
        flex-shrink: 0;
    }
    .lp-lang-switcher {
        order: 3;
        justify-self: end;
    }
}

/* ─── Menu mobile : chaque élément en bouton arrondi (comme Donation) ─── */
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats > a.wp-block-navigation-item__content {
    display: flex !important;
    align-items: center;
    border-radius: 100px !important;
    padding: 10px 18px !important;
    font-weight: 600;
    width: auto !important;
    margin-bottom: 4px;
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-accueil > .wp-block-navigation-item__content {
    background: color-mix(in srgb, #1A3A2A 10%, white);
    color: #1A3A2A !important;
    border: 1px solid color-mix(in srgb, #1A3A2A 25%, white);
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-articles > .wp-block-navigation-item__content {
    background: color-mix(in srgb, #2563EB 10%, white);
    color: #2563EB !important;
    border: 1px solid color-mix(in srgb, #2563EB 25%, white);
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats > a.wp-block-navigation-item__content {
    background: color-mix(in srgb, #CA8A04 10%, white);
    color: #CA8A04 !important;
    border: 1px solid color-mix(in srgb, #CA8A04 25%, white);
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-contact > .wp-block-navigation-item__content {
    background: color-mix(in srgb, #0891B2 10%, white);
    color: #0891B2 !important;
    border: 1px solid color-mix(in srgb, #0891B2 25%, white);
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-donation > .wp-block-navigation-item__content {
    width: auto !important;
}

/* La bascule de Catégories : intégrée dans le bouton, pas une case séparée */
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats {
    position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats .wp-block-navigation-submenu__toggle {
    position: static;
    background: none !important;
    border: none !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 6px;
    color: #CA8A04 !important;
}

/* Forcer le bouton + la flèche de Catégories sur la même ligne que le texte */
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
}

/* Retirer l'anneau de focus par défaut du navigateur sur la bascule (cosmétique) */
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats .wp-block-navigation-submenu__toggle {
    outline: none !important;
}
/* La grille dépliée doit occuper toute la largeur, peu importe la largeur
   du <li> "Catégories" lui-même (redevenu "auto" pour la pilule). */
.wp-block-navigation__responsive-container.is-menu-open
  .lp-nav-cats .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    flex-basis: 100%;
    position: relative !important;
    left: 0 !important;
}

/* ─── Version finale, plus simple : bascule positionnée en absolu dans la pilule ─── */
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats {
    display: block !important;
    position: relative !important;
    width: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats > a.wp-block-navigation-item__content {
    display: inline-flex !important;
    padding-right: 34px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .lp-nav-cats .wp-block-navigation-submenu__toggle {
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .lp-nav-cats .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    margin-top: 8px;
}