/* ═══════════════════════════════════════════════════════════════════════
 * OGMA BRICKS OVERRIDES — Surcharges spécifiques Bricks Builder
 * OGMA Systems — Conciergerie IA sur mesure
 * ═══════════════════════════════════════════════════════════════════════
 * Ce fichier surcharge les styles par défaut de Bricks Builder pour
 * intégrer le design system OGMA. Il doit être chargé APRÈS
 * ogma-design-system.css.
 *
 * Important : Bricks Builder utilise des data-attributes et des classes
 * .brxe-* pour ses éléments. Les sélecteurs ci-dessous ciblent ces
 * éléments sans !important (sauf exception documentée).
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
 * 1. HEADER — Navigation principale sticky
 * ───────────────────────────────────────────────────────────────────── */

/* Header sticky avec glassmorphism (C1–C7 plan v1.4) */
#brx-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

#brx-header .brxe-section {
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-3) 0;
}

@supports (backdrop-filter: blur(1px)) {
    #brx-header .brxe-section {
        background: rgba(10, 10, 10, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

/* Container header : override Bricks flex-direction: column (.brxe-container) */
#brx-header .brxe-container {
    flex-direction: row;
}

/* Logo header — détourage CSS (invert + screen = fond transparent, icône blanche) */
#brx-header .brxe-image img {
    height: 48px;
    width: 48px;
    object-fit: cover;
    filter: invert(1);
    mix-blend-mode: screen;
}


/* ─────────────────────────────────────────────────────────────────────
 * 2. NAVIGATION
 * ───────────────────────────────────────────────────────────────────── */

/* Menu principal Bricks */
.brxe-nav-menu .bricks-nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items de navigation */
.brxe-nav-menu .bricks-nav-menu > li > a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary-light);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
    position: relative;
    /* WCAG 2.2 §2.5.8 — cible tactile ≥ 44×44px (rc31) */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Hover — underline animé */
.brxe-nav-menu .bricks-nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-3);
    right: var(--space-3);
    height: 2px;
    background-color: var(--color-accent-cyber);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-normal);
}

.brxe-nav-menu .bricks-nav-menu > li > a:hover::after,
.brxe-nav-menu .bricks-nav-menu > li.current-menu-item > a::after {
    transform: scaleX(1);
}

.brxe-nav-menu .bricks-nav-menu > li > a:hover {
    color: var(--color-accent-cyber);
}

/* Page active */
.brxe-nav-menu .bricks-nav-menu > li.current-menu-item > a {
    color: var(--color-accent-cyber);
}

/* CTA dans la navigation */
.brxe-nav-menu .menu-item-cta > a,
.brxe-nav-menu .bricks-nav-menu > li:last-child > a {
    background-color: var(--color-accent);
    color: var(--color-primary-light) !important; /* Override theme defaults */
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.brxe-nav-menu .menu-item-cta > a:hover,
.brxe-nav-menu .bricks-nav-menu > li:last-child > a:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(26, 82, 118, 0.35);
}

.brxe-nav-menu .menu-item-cta > a::after,
.brxe-nav-menu .bricks-nav-menu > li:last-child > a::after {
    display: none; /* Pas d'underline sur le CTA */
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. MENU MOBILE
 * ───────────────────────────────────────────────────────────────────── */

/* Hamburger / Toggle — WCAG 2.2 §2.5.8 cible tactile ≥ 44×44px (rc31) */
.brxe-nav-menu .bricks-mobile-menu-toggle {
    color: var(--color-primary-light);
    font-size: var(--text-2xl);
    cursor: pointer;
    padding: var(--space-3);
    border: none;
    background: none;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu mobile ouvert — seuil 991px = aligné bricks.min.css (DT-30 fix) */
@media (max-width: 991px) {
    .brxe-nav-menu .bricks-nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-6);
        background-color: var(--color-primary);
        z-index: 999;
        padding: var(--space-16) var(--space-4);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-normal),
                    visibility var(--transition-normal);
    }

    .brxe-nav-menu .bricks-nav-menu.open,
    .brxe-nav-menu[data-open="true"] .bricks-nav-menu {
        opacity: 1;
        visibility: visible;
    }

    .brxe-nav-menu .bricks-nav-menu > li > a {
        font-size: var(--text-xl);
        padding: var(--space-3) var(--space-6);
    }

    /* CTA pleine largeur sur mobile */
    .brxe-nav-menu .menu-item-cta > a,
    .brxe-nav-menu .bricks-nav-menu > li:last-child > a {
        width: 100%;
        max-width: 300px;
        text-align: center;
        padding: var(--space-4) var(--space-8);
        margin-top: var(--space-6);
    }

    /* Boutons : wrap texte long sur mobile (override nowrap du .btn base) */
    .btn {
        white-space: normal;
        text-align: center;
    }

    /* ── Bricks mobile slide-in panel (classe .left = panneau gauche) ── */
    .bricks-mobile-menu-wrapper {
        padding: var(--space-16) var(--space-6) var(--space-6);
        box-sizing: border-box;
    }

    .bricks-mobile-menu {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .bricks-mobile-menu > li > a {
        font-size: var(--text-xl);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* CTA dans le menu burger — ne pas étirer pleine largeur */
    .bricks-mobile-menu .menu-item-cta > a,
    .bricks-mobile-menu > li:last-child > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 280px;
        margin-top: var(--space-4);
        padding: var(--space-3) var(--space-6);
        text-align: center;
    }
}

/* Nav desktop — force affichage au seuil Bricks (992px = aligné bricks.min.css, DT-30 fix) */
@media (min-width: 992px) {
    .bricks-nav-menu-wrapper {
        display: flex !important;
    }

    .bricks-mobile-menu-toggle {
        display: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. FOOTER
 * ───────────────────────────────────────────────────────────────────── */

footer.brxe-footer,
.brxe-footer,
footer > footer.brxe-section {
    background-color: var(--color-neutral-dark);
    color: var(--color-text-on-dark);
    padding-top: var(--space-24);
    padding-bottom: var(--space-12);
}

/* Conteneur footer */
footer .brxe-container,
.brxe-footer > .brxe-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    footer .brxe-container,
    .brxe-footer > .brxe-container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* Grille footer 4 colonnes */
.footer-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* Titres de colonnes footer */
.brxe-footer .brxe-heading,
.footer-grid h3 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-6);
}

/* Liens footer — Cyber (#00D4FF) sur charbon : ratio 9.7:1 ✅ AAA
   Pétrole (#1A5276) sur charbon : ratio 1.5:1 ❌ Non conforme */
.brxe-footer a,
.footer-grid a {
    color: var(--color-accent-cyber);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-size: var(--text-sm);
}

.brxe-footer a:hover,
.footer-grid a:hover {
    color: var(--color-primary-light);
}

/* Logo footer — détourage CSS (lighten = fond SVG transparent, contenu blanc) */
.footer-logo,
.footer-logo img,
img.footer-logo {
    border: none;
    outline: none;
    box-shadow: none;
    mix-blend-mode: lighten;
}

img.footer-logo {
    margin-bottom: var(--space-4);
}

/* Listes footer — pas de tirets (design premium FinTech) */
#brx-footer li::before,
.footer-grid li::before {
    content: none;
}

#brx-footer li,
.footer-grid li {
    padding-left: 0;
}

/* Tagline footer */
.footer-tagline {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-on-dark);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Barre copyright */
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-on-dark);
}

/* Icônes footer — cibles tactiles WCAG 2.2 §2.5.8 (44×44px min) */
.brxe-footer .brxe-icon a,
.brxe-footer a[class*="icon"],
footer .brxe-icon a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .footer-copyright {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 5. SECTIONS BRICKS — Intégration design system
 * ───────────────────────────────────────────────────────────────────── */

/* Section wrappers Bricks */
.brxe-section {
    position: relative;
    width: 100%;
    padding: var(--space-16) 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    outline: none;
}

@media (min-width: 768px) {
    .brxe-section {
        padding: var(--space-24) 0;
    }
}

/* Container dans les sections Bricks */
.brxe-section > .brxe-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    .brxe-section > .brxe-container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* Headings Bricks */
.brxe-heading {
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-6);
}

/* Espacement texte → heading suivant */
.brxe-text + .brxe-heading {
    margin-top: var(--space-12);
}

/* Texte Bricks */
.brxe-text {
    font-family: var(--font-body);
    line-height: var(--leading-normal);
}

/* Rich text Bricks */
.brxe-text-basic {
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
}

/* Sections below-the-fold — transition fluide sans artefact */
.section-charcoal {
    content-visibility: visible;
}


/* ─────────────────────────────────────────────────────────────────────
 * 6. BOUTONS BRICKS — Match design system
 * ───────────────────────────────────────────────────────────────────── */

.brxe-button {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

/* Style "primary" appliqué aux boutons Bricks */
.brxe-button.bricks-background-primary,
.brxe-button[data-style="primary"] {
    background-color: var(--color-accent);
    color: var(--color-primary-light);
    border: 2px solid var(--color-accent);
}

.brxe-button.bricks-background-primary:hover,
.brxe-button[data-style="primary"]:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(26, 82, 118, 0.35);
}


/* ─────────────────────────────────────────────────────────────────────
 * 7. Z-INDEX — Hiérarchie globale
 * ───────────────────────────────────────────────────────────────────── */

/*
 * Couches z-index standardisées :
 * 1     — Éléments de base
 * 10    — Éléments élevés (tooltips inline)
 * 100   — Overlays de contenu
 * 999   — Menu mobile
 * 1000  — Header sticky
 * 10000 — Skip-to-content link
 */

/* #brx-header z-index déjà déclaré en §1 Header (sticky) */

/* Compensation header fixe — scroll-padding pour ancres, pas de padding-top sur body */
html {
    scroll-padding-top: var(--header-height, 80px);
}


/* ─────────────────────────────────────────────────────────────────────
 * 8. FORMULAIRES — Intégration avec le design system
 * ───────────────────────────────────────────────────────────────────── */

/* Champs de formulaire Bricks */
.brxe-form input[type="text"],
.brxe-form input[type="email"],
.brxe-form input[type="tel"],
.brxe-form input[type="url"],
.brxe-form textarea,
.brxe-form select {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    width: 100%;
}

.brxe-form input:focus,
.brxe-form textarea:focus,
.brxe-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

/* État d'erreur */
.brxe-form .field-error input,
.brxe-form .field-error textarea {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Message d'erreur */
.brxe-form .error-message {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

/* Message de succès */
.brxe-form .success-message {
    color: var(--color-success);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

/* Labels */
.brxe-form label,
.wpcf7-form label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary-light);
    margin-bottom: var(--space-2);
    display: block;
}

.section-light .brxe-form label,
.section-light .wpcf7-form label {
    color: var(--color-primary);
}

/* Formulaire audit sur fond clair dans section sombre */
.form--audit label,
.form--audit .wpcf7-form label {
    color: var(--color-neutral-dark);
}

/* Checkbox RGPD — consentement */
.brxe-form .consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.brxe-form .consent-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}

.brxe-form .consent-checkbox label {
    font-size: var(--text-xs);
    color: var(--color-text-on-dark);
    font-weight: 400;
    margin-bottom: 0;
}

/* Formulaire sur fond sombre */
.section-dark .brxe-form input,
.section-dark .brxe-form textarea,
.section-dark .brxe-form select,
.section-dark .wpcf7-form input,
.section-dark .wpcf7-form textarea,
.section-dark .wpcf7-form select,
.section-charcoal .brxe-form input,
.section-charcoal .brxe-form textarea,
.section-charcoal .brxe-form select,
.section-charcoal .wpcf7-form input,
.section-charcoal .wpcf7-form textarea,
.section-charcoal .wpcf7-form select {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-primary-light);
}

.section-dark .brxe-form input:focus,
.section-dark .brxe-form textarea:focus,
.section-dark .wpcf7-form input:focus,
.section-dark .wpcf7-form textarea:focus,
.section-charcoal .brxe-form input:focus,
.section-charcoal .brxe-form textarea:focus,
.section-charcoal .wpcf7-form input:focus,
.section-charcoal .wpcf7-form textarea:focus {
    border-color: var(--color-accent-cyber);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

.section-dark .brxe-form label,
.section-dark .wpcf7-form label,
.section-charcoal .brxe-form label,
.section-charcoal .wpcf7-form label {
    color: var(--color-primary-light);
}

/* ═══════════════════════════════════════════
   ACCORDÉON BRICKS (DEP8 / brxe-accordion)
   ═══════════════════════════════════════════ */

.brxe-accordion {
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
}

.brxe-accordion .accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brxe-accordion .accordion-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.brxe-accordion .accordion-title-wrapper {
    padding: var(--space-6) 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.brxe-accordion .accordion-title-wrapper:hover {
    color: var(--color-accent-cyber);
}

.brxe-accordion .accordion-title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-primary-light);
    line-height: var(--leading-snug);
}

.brxe-accordion .accordion-icon {
    color: var(--color-accent-cyber);
    transition: transform var(--transition-normal);
}

.brxe-accordion .accordion-content-wrapper {
    padding-bottom: var(--space-6);
    color: var(--color-text-on-dark);
    line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════
   CONTACT FORM 7 — INTÉGRATION BRICKS
   ═══════════════════════════════════════════ */

/* Container CF7 */
.wpcf7 {
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
}

.wpcf7-form p {
    margin-bottom: var(--space-5);
}

/* Base : fond clair (section-light / défaut) */
.wpcf7-form label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    background-color: var(--color-primary-light);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

/* CF7 sur fond sombre */
.section-dark .wpcf7-form label,
.section-charcoal .wpcf7-form label {
    color: var(--color-primary-light);
}

.section-dark .wpcf7-form input[type="text"],
.section-dark .wpcf7-form input[type="email"],
.section-dark .wpcf7-form input[type="tel"],
.section-dark .wpcf7-form select,
.section-dark .wpcf7-form textarea,
.section-charcoal .wpcf7-form input[type="text"],
.section-charcoal .wpcf7-form input[type="email"],
.section-charcoal .wpcf7-form input[type="tel"],
.section-charcoal .wpcf7-form select,
.section-charcoal .wpcf7-form textarea {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-primary-light);
}

.section-dark .wpcf7-form input:focus,
.section-dark .wpcf7-form select:focus,
.section-dark .wpcf7-form textarea:focus,
.section-charcoal .wpcf7-form input:focus,
.section-charcoal .wpcf7-form select:focus,
.section-charcoal .wpcf7-form textarea:focus {
    border-color: var(--color-accent-cyber);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

/* Formulaire audit : labels sombres sur fond clair (DT-54 contrast fix) */
.form--audit .wpcf7-form label {
    color: var(--color-neutral-dark);
}

.form--audit .wpcf7-form input[type="text"],
.form--audit .wpcf7-form input[type="email"],
.form--audit .wpcf7-form input[type="tel"],
.form--audit .wpcf7-form select,
.form--audit .wpcf7-form textarea {
    background-color: var(--color-primary-light);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-primary);
}

.form--audit .wpcf7-form input:focus,
.form--audit .wpcf7-form select:focus,
.form--audit .wpcf7-form textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

.form--audit .wpcf7-form .consent-row label {
    color: var(--color-neutral-mid);
}

.form--audit .wpcf7-form .consent-row a {
    color: var(--color-accent);
}

.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Fix: espacement sous les inputs, pas au-dessus des labels (Gestalt proximity) */
.form--audit .form-group > p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Espacement éléments hors du grid (.form-grid-2) */
.form--audit .form-group--full {
    margin-top: var(--space-6);
}

.form--audit .form-group--consent {
    margin-top: var(--space-4);
}

.wpcf7-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
}

/* Checkbox RGPD CF7 */
.wpcf7-form .consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
}

.wpcf7-form .consent-row .wpcf7-acceptance {
    flex-shrink: 0;
    margin-top: 2px;
}

.wpcf7-form .consent-row .wpcf7-acceptance input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}

.wpcf7-form .consent-row label {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-neutral-mid);
}

.wpcf7-form .consent-row a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Consent row sur fond sombre */
.section-dark .wpcf7-form .consent-row label,
.section-charcoal .wpcf7-form .consent-row label {
    color: var(--color-text-on-dark);
}

.section-dark .wpcf7-form .consent-row a,
.section-charcoal .wpcf7-form .consent-row a {
    color: var(--color-accent-cyber);
}

/* Bouton submit CF7 — spécificité élevée (0-3-0) pour écraser .btn-primary */
.form--audit .wpcf7-form .wpcf7-submit {
    margin-top: var(--space-6);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: var(--space-4) var(--space-8);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    background-color: var(--color-accent);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: all var(--transition-normal);
    width: 100%;
    text-align: center;
}

.form--audit .wpcf7-form .wpcf7-submit:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(26, 82, 118, 0.35);
}

/* Messages de validation CF7 */
.wpcf7 .wpcf7-response-output {
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}

.wpcf7 .wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: var(--color-error);
    color: var(--color-error);
    background-color: rgba(239, 68, 68, 0.08);
}

.wpcf7 .wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--color-success);
    color: var(--color-success);
    background-color: rgba(16, 185, 129, 0.12);
}

.wpcf7-not-valid-tip {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* Spinner CF7 */
.wpcf7-spinner {
    display: none;
}

/* ═══════════════════════════════════════════
   HÉROS BRICKS — INTÉGRATION
   ═══════════════════════════════════════════ */

.brxe-section.hero,
.brxe-section.hero-inner {
    padding-left: 0;
    padding-right: 0;
}

.brxe-section.section-cta {
    padding-left: 0;
    padding-right: 0;
}

/* ═══════════════════════════════════════════
   PRICING — INTÉGRATION BRICKS
   ═══════════════════════════════════════════ */

.brxe-section .pricing-grid .brxe-container {
    max-width: var(--container-xl);
}

/* ═══════════════════════════════════════════
   RESPONSIVE BRICKS — AJUSTEMENTS FINAUX
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {
    .brxe-section.hero {
        min-height: 90vh;
        padding-top: var(--space-24);
    }

    .brxe-section.hero-inner {
        min-height: 50vh;
    }

    .brxe-accordion .accordion-title {
        font-size: var(--text-base);
    }
}


/* ═══════════════════════════════════════════
   WCAG 2.2 AA — CIBLES TACTILES (rc31)
   ═══════════════════════════════════════════ */

/* CF7 checkbox — agrandir zone tactile ≥ 24×24px (WCAG 2.5.8 Level AA) */
.wpcf7 input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
}


/* ═══════════════════════════════════════════
   HERO BACKGROUND IMAGE — rc65
   ═══════════════════════════════════════════ */

/* Module overlay pour sections hero avec background-image (Bricks _background).
 * Overlay = mêmes valeurs que homepage (rc60b calibré, 5 itérations).
 * LESSONS: Overlay + Glow = couple validé — ne pas modifier indépendamment. */
.brxe-section.hero--bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

/* Page-specific hero images */
.brxe-section.hero--bg-solutions {
    background-image: url(/wp-content/uploads/2026/04/solutions-hero.webp);
    background-position: center 35%;
}

.brxe-section.hero--bg-offres {
    background-image: url(/wp-content/uploads/2026/04/offres-hero.webp);
    background-position: center 25%;
}

.brxe-section.hero--bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.40) 0%,
        rgba(10, 10, 10, 0.22) 40%,
        rgba(10, 10, 10, 0.50) 100%
    );
}

/* Hero bg — tous les textes en blanc (pas le gris --color-text-on-dark) */
.brxe-section.hero--bg p,
.brxe-section.hero--bg .brxe-text,
.brxe-section.hero--bg .brxe-text-basic {
    color: #fff !important;
    text-shadow:
        0 0 4px  rgba(255, 255, 255, 0.45),
        0 0 10px rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Glow blanc — Approche néon 4 couches (LESSONS: max 16px blur)
 * Couche 1: noyau blanc   (3px)  — lisibilité bords
 * Couche 2: glow serré    (8px)  — halo immédiat
 * Couche 3: halo doux     (16px) — profondeur (max OGMA)
 * Couche 4: ombre portée  (4px)  — ancrage */
.glow-white {
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow:
        0 0 3px  rgba(255, 255, 255, 0.9),
        0 0 8px  rgba(255, 255, 255, 0.7),
        0 0 16px rgba(255, 255, 255, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Accessibilité — Contraste élevé */
@media (prefers-contrast: more) {
    .brxe-section.hero--bg::before {
        background: linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.75) 0%,
            rgba(10, 10, 10, 0.65) 40%,
            rgba(10, 10, 10, 0.80) 100%
        );
    }
    .glow-white {
        text-shadow: none !important;
    }
    .brxe-section.hero--bg p,
    .brxe-section.hero--bg .brxe-text,
    .brxe-section.hero--bg .brxe-text-basic {
        text-shadow: none !important;
    }
}


/* ── Blockquotes — lisibilité renforcée (toutes pages) ── */
blockquote {
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-left-width: 4px;
    padding-left: var(--space-8);
    margin: var(--space-10) auto;
    max-width: 52ch;
}
blockquote p,
.section-dark blockquote p,
.section-charcoal blockquote p {
    color: rgba(255, 255, 255, 0.92);
    font-size: inherit;
    line-height: 1.8;
}

/* ── Trust-bar bandeau — texte blanc pour lisibilité ── */
p.trust-bar,
.section-dark p.trust-bar,
.section-charcoal p.trust-bar {
    color: #ffffff;
}

/* ── Hero CTA primary — texte blanc pour lisibilité sur fond pétrole ── */
.hero .btn-primary.btn-shine,
.hero .brxe-button.btn-primary {
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE — Atténuation intensité Cyan (rc65c)
 * Sur mobile le stacking vertical rend les accents cyan omniprésents.
 * On réduit border-width, opacity et glow SANS supprimer le cyan.
 * Desktop (≥ 768px) n'est PAS affecté.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Boutons secondaires (fond sombre / hero) ──
     * Desktop : 2px solid cyan + glow triple couche → OK en side-by-side
     * Mobile  : 1px + border adouci + glow supprimé */
    .section-dark .btn-secondary,
    .section-charcoal .btn-secondary,
    .hero .btn-secondary,
    .pricing-card .btn-secondary,
    .btn-secondary.btn-border-glow {
        border-width: 1px;
        border-color: rgba(0, 212, 255, 0.45);
    }

    /* Glow hero btn-secondary → supprimé sur mobile (trop large plein écran) */
    .hero .btn-secondary,
    .hero .brxe-button:not([style*="background"]) {
        box-shadow: none;
    }

    /* ── Trust-bar pleine largeur ──
     * Desktop : 2px border + double glow → accent fort contrôlé
     * Mobile  : 1px + border adouci + glow réduit */
    .trust-bar {
        border-width: 1px;
        border-color: rgba(0, 212, 255, 0.3);
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.08);
    }

    /* ── Trust-bar / badges dans les cartes ──
     * Desktop : glow 8px sur cartes 33% → subtil
     * Mobile  : glow supprimé, border adouci */
    .card .trust-bar {
        border-color: rgba(0, 212, 255, 0.45);
        box-shadow: none;
    }

    .card .badge,
    .pricing-card .badge,
    .section-charcoal .badge,
    .badge-cyber {
        box-shadow: none;
        border-color: rgba(0, 212, 255, 0.45);
    }

    /* ── Pricing card featured (TARANIS) ──
     * Desktop : border cyan solide + scale(1.05) → se distingue entre 3 cartes
     * Mobile  : border adouci (pas de scale, cards empilées) */
    .pricing-card--featured {
        border-color: rgba(0, 212, 255, 0.35);
    }

    /* Recommandé pill — légèrement adouci */
    .pricing-card--featured::before {
        background-color: rgba(0, 212, 255, 0.75);
    }

    /* ── Blockquotes dans cartes — border-left adouci ── */
    .card blockquote {
        border-left-color: rgba(0, 212, 255, 0.35);
    }

    /* ── Primary CTA glow — atténué sur mobile ── */
    .hero .btn-primary.btn-shine,
    .hero .brxe-button.btn-primary {
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
    }
}