/* ══════════════════════════════════════════════════════════════
   PUNCH — Override brutaliste des blocs ACF génériques du parent
   Hérite de revalice/assets/css/blocs.css (chargé en amont).
   Ici, on ne (re)définit que les variables et finitions spécifiques
   à l'identité PUNCH (rouge brutaliste, accent noir-encadré, fontes).
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Override des variables des blocs génériques avec les couleurs PUNCH */
    --bloc-accent       : var(--punch-rouge);
    --bloc-blanc        : var(--punch-blanc);
    --bloc-noir         : var(--punch-noir);
    --bloc-font-display : var(--punch-font-display);
    --bloc-font-base    : var(--punch-font-base);
}

/* ── Hero bandeau : logo blanc inversé sur fond rouge ───────── */
.bloc-hero-bandeau .bloc-hero-bandeau__logo-img {
    filter: brightness(0) invert(1);
}

/* ── Bloc citation : encadré tampon noir brutaliste sur l'accent ─ */
.bloc-citation .bloc-citation__legende {
    /* Effet "estampille" brutaliste avec contour blanc */
    border: 1px solid var(--punch-blanc);
    padding: 6px 14px;
}

/* ── Intro / Cards / Liste : accent rouge dans le titre brutaliste ─ */
.bloc-intro-bandeau .bloc-intro-bandeau__accent,
.bloc-cards-numerotees .bloc-cards-numerotees__accent,
.bloc-liste-cta .bloc-liste-cta__accent {
    color: var(--punch-rouge);
}

/* ── Entête de page : fond rouge brutaliste ───────────────── */
/* Rendu hors de .form-left dans les templates form (page-contact, page-formulaire)
   donc le bloc s'étend naturellement sur 100% de son conteneur (<main>). */
/* Sélecteur header.bloc-entete-page → spécificité 0,1,1 pour battre les
   règles génériques du parent Litho sur le tag <header>. */
header.bloc-entete-page {
    background : var(--punch-rouge);
    color      : var(--punch-blanc);
    padding    : 0;
    margin     : 0;
}
.bloc-entete-page__inner {
    padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 80px) clamp(40px, 6vh, 80px);
}
.bloc-entete-page__legende {
    color  : var(--punch-blanc);
    opacity: 1;
}
.bloc-entete-page__titre {
    color      : var(--punch-blanc);
    line-height: 0.75;
}
.bloc-entete-page__accent {
    color: var(--punch-noir);
}
.bloc-entete-page__accroche {
    color: var(--punch-blanc);
}

/* ══════════════════════════════════════════════════════════════
   Bloc liste-cta : styles boutons (manquaient dans parent !)
   Le parent ne définissait QUE les hovers (transform + shadow) en
   laissant un commentaire "→ utilitaires dans style.css" qui ne
   pointait sur rien. Résultat : sur desktop, les boutons s'affichaient
   en texte rouge sans fond ni contour. On corrige avec un design
   brutaliste cohérent (primary rouge plein / ghost outline).
   ══════════════════════════════════════════════════════════════ */
.bloc-liste-cta .bloc-liste-cta__btn {
    display        : inline-block;
    font-family    : var(--punch-font-base, 'Roboto', sans-serif);
    font-size      : 14px;
    font-weight    : 700;
    letter-spacing : 0.08em;
    text-transform : uppercase;
    text-decoration: none;
    padding        : 14px 28px;
    border         : 2px solid var(--punch-rouge);
    cursor         : pointer;
    text-align     : center;
    line-height    : 1.2;
    transition     : transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bloc-liste-cta .bloc-liste-cta__btn--primary {
    background  : var(--punch-rouge);
    color       : var(--punch-blanc);
    border-color: var(--punch-rouge);
}
/* Hover : rouge plein → blanc avec texte rouge (inverse de l'idle).
   Le primary passe au look "ghost" et inversement → cross-swap visuel
   bien lisible sur le fond noir de la section. */
.bloc-liste-cta .bloc-liste-cta__btn--primary:hover,
.bloc-liste-cta .bloc-liste-cta__btn--primary:focus-visible {
    background  : var(--punch-blanc);
    color       : var(--punch-rouge);
    border-color: var(--punch-rouge);
}
.bloc-liste-cta .bloc-liste-cta__btn--ghost {
    background: var(--punch-blanc);
    color     : var(--punch-rouge);
}
.bloc-liste-cta .bloc-liste-cta__btn--ghost:hover,
.bloc-liste-cta .bloc-liste-cta__btn--ghost:focus-visible {
    background: var(--punch-rouge);
    color     : var(--punch-blanc);
}

/* ── Bouton hover : ombre noire brutaliste (offset + ombre PUNCH) ── */
.bloc-citation .bloc-citation__btn:hover,
.bloc-liste-cta .bloc-liste-cta__btn--primary:hover,
.bloc-liste-cta .bloc-liste-cta__btn--ghost:hover {
    transform : translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--punch-noir);
}

/* ══════════════════════════════════════════════════════════════
   Responsive : bloc-liste-cta (REJOIGNEZ, PUNCH !)
   Sur tablet/mobile, le grid 5fr/2fr/5fr du parent rend la colonne
   titre tellement étroite que le mot REJOIGNEZ se brise lettre par
   lettre (1 par ligne). On stack en colonne unique en dessous de
   991px pour laisser de la place au titre horizontal.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .bloc-liste-cta .bloc-liste-cta__inner {
        grid-template-columns: 1fr !important;
        gap                  : 32px;
        padding              : 60px clamp(24px, 5vw, 60px);
    }
    .bloc-liste-cta .bloc-liste-cta__inner > :nth-child(1),
    .bloc-liste-cta .bloc-liste-cta__inner > :nth-child(2) {
        grid-column: 1 !important;
    }
    .bloc-liste-cta .bloc-liste-cta__titre {
        font-size: clamp(48px, 9vw, 88px);
        line-height: 0.92;
    }
}
@media (max-width: 575.98px) {
    .bloc-liste-cta .bloc-liste-cta__inner {
        padding: 48px 20px;
        gap    : 24px;
    }
    .bloc-liste-cta .bloc-liste-cta__titre {
        font-size: clamp(40px, 11vw, 64px);
    }
    .bloc-liste-cta .bloc-liste-cta__items li span {
        font-size: 16px;
    }
    .bloc-liste-cta .bloc-liste-cta__pitch {
        font-size: 16px;
    }
}