/* ═══════════════════════════════════════════════════════════════════════
 * OGMA FRONTEND REMEDIATION rc108 — Sprint 1bis A11y + Performance 2026-05-14
 *
 * Mission 1 (A11y) : remédier au finding DR-08 (#00D4FF FAIL WCAG 2.2
 *                    SC 1.4.3 AA · ratio 1.85:1 sur blanc) sans dénaturer
 *                    l'identité visuelle OGMA.
 *
 * Mission 2 (Performance) : remédier aux findings Lighthouse 2026-05-14
 *                          (CLS 0.966 /offres/ #brxe-of0006 · TBT 1020 ms /rgpd/)
 *                          via réservation espace tarteaucitron + content-visibility.
 *
 * Pattern : PdP-A11Y-B « contrainte transformée en signature de marque »
 *           (focus-visible cyan halo W3C C40 double-anneau).
 *
 * Cadres respectés :
 *   - WCAG 2.2 AA (SC 1.4.3 · 2.4.7 · 2.4.11 · 2.5.8 · 3.3.2 · 4.1.2)
 *   - RGAA 4.1.2 DINUM
 *   - EAA 28 juin 2025
 *   - web.dev Core Web Vitals 2026 (CLS · TBT · LCP)
 *   - Lexique v1.7+ · #222 · #279
 *
 * Charge : APRÈS ogma-design-system.css (priorité enqueue 99 · cascade override propre)
 * Volume estimé : ~5 KB minifié · ~7 KB brut
 *
 * AC mesurables (post-déploiement) :
 *   - Score Lighthouse Accessibility 4 pages light-mode ≥ 95
 *   - Score Lighthouse Performance 4 pages light-mode ≥ 80 (gain +15 à +25 attendu)
 *   - CLS /offres/ ≤ 0.1 (vs 0.966 baseline)
 *   - TBT /rgpd/ ≤ 300 ms (vs 1020 ms baseline)
 *   - 0 violation contrast axe-core
 *   - Skip link first focusable opérationnel (test Tab)
 *   - Focus visible 100 % éléments focusables
 *
 * Path : 03_THEME/ogma-child-theme/assets/css/ogma-a11y-remediation-v1.css
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
 * 1. NOUVEAUX TOKENS A11Y AA STRICT (cohérent PdP-A11Y-B DR-08)
 * ───────────────────────────────────────────────────────────────────── */

:root {
    /* TOKENS EXISTANTS CONSERVÉS (cf ogma-design-system.css) :
     *   --color-accent-cyber:  #00D4FF  (décoratif + fond sombre · 11.3:1 AAA)
     *   --color-accent-dark:   #0891B2  (3.56:1 · texte large uniquement)
     *   --color-primary:       #0A0A0A  (texte fond clair · 19.8:1 AAA)
     *   --color-primary-light: #FFFFFF  (texte fond sombre · 19.8:1 AAA)
     *   --color-accent:        #0E2B47  (Navy CTA · 12+:1 AAA)
     */

    /* NOUVEAUX TOKENS A11Y · cohérent DR-08 PdP-A11Y-B */
    --color-link-on-light:        #006689;   /* 6.03:1 AA · texte normal sur blanc */
    --color-link-on-light-strong: #00475C;   /* 8.5:1 AAA · hover/active sur blanc */

    /* TOKENS SÉMANTIQUES PAR RÔLE (pas par valeur) */
    --color-link:              var(--color-link-on-light);
    --color-link-hover:        var(--color-link-on-light-strong);
    --color-link-dark-bg:      var(--color-accent-cyber);
    --color-accent-decorative: var(--color-accent-cyber);

    /* Focus halo · fond sombre par défaut */
    --color-focus-halo:        var(--color-primary);
}


/* ─────────────────────────────────────────────────────────────────────
 * 2. LIENS DANS CONTENU LIGHT-MODE (sortie A11Y-AP-1)
 *    Cible : pages light-mode (/, /offres/, /audit-offert/, /rgpd/, etc.)
 *    Préservé : pages dark-first (3 Agents) via scope `.ogma-agent-page`
 * ───────────────────────────────────────────────────────────────────── */

.brxe-text-basic a:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
.brxe-rich-text a:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
.entry-content a:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
.brxe-paragraph a:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
p a:not(.btn):not(.brxe-button):not([class*="ogma-agent"]) {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 200ms ease, text-decoration-thickness 200ms ease;
}

.brxe-text-basic a:hover:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
.brxe-rich-text a:hover:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
.entry-content a:hover:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
.brxe-paragraph a:hover:not(.btn):not(.brxe-button):not([class*="ogma-agent"]),
p a:hover:not(.btn):not(.brxe-button):not([class*="ogma-agent"]) {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. FOCUS VISIBLE CYAN HALO (PdP-A11Y-B · pattern W3C C40)
 *    SC 2.4.7 AA + SC 2.4.11 AA + vise SC 2.4.13 AAA
 * ───────────────────────────────────────────────────────────────────── */

/* Reset focus standard (pointeur · mouse click) */
:focus {
    outline: none;
}

/* Focus visible (clavier · Tab key) · double-anneau W3C C40 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
details:focus-visible {
    outline: 3px solid var(--color-accent-cyber);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-focus-halo);
    border-radius: inherit;
}

/* Bricks buttons · cascade !important nécessaire pour override Bricks specificity */
.brxe-button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 2px var(--color-primary-light),
        0 0 0 5px var(--color-accent-cyber) !important;
}

/* Mode sombre · inverser halo en blanc */
@media (prefers-color-scheme: dark) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        box-shadow: 0 0 0 5px var(--color-primary-light);
    }
}

/* Windows High Contrast mode · neutraliser box-shadow au profit outline natif */
@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Sticky header offset · cohérent navigation rc88+ menu RGPD slot 3 */
html {
    scroll-padding-top: 6rem;
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. SKIP LINK FIRST FOCUSABLE (A11Y-003 · SC 2.4.1 A)
 *    Pattern WAI-ARIA G1 · GOV.UK + DSFR
 * ───────────────────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);       /* fond sombre #0A0A0A */
    color: var(--color-accent-cyber);       /* texte cyan #00D4FF · 11.3:1 sur sombre */
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
    transform: translateY(-110%);
    transition: transform 200ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 5. INPUTS ANTI-ZOOM iOS (MO-005)
 *    Empêche Safari iOS de zoomer au focus sur inputs < 16px
 * ───────────────────────────────────────────────────────────────────── */

input,
select,
textarea {
    font-size: max(16px, 1rem);
}


/* ─────────────────────────────────────────────────────────────────────
 * 6. TARGETS TACTILES MINIMUM (MO-009 + A11Y-008 · SC 2.5.8 AA)
 *    WCAG 2.2 SC 2.5.8 AA · 24×24 CSS px minimum
 *    OGMA recommandé 44×44 pour boutons primaires (cohérent Apple HIG + Material 3)
 * ───────────────────────────────────────────────────────────────────── */

button,
a[role="button"],
.btn,
input[type="checkbox"],
input[type="radio"],
.pagination a {
    min-width: 24px;
    min-height: 24px;
}

.brxe-button,
.btn-primary,
.btn-secondary,
.btn-cta {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
}

.icon-btn,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}


/* ─────────────────────────────────────────────────────────────────────
 * 7. VISUALLY-HIDDEN MODERNE (A11Y-015)
 *    Pattern CSS 2026 · clip-path (vs clip: rect() déprécié retiré Tailwind)
 * ───────────────────────────────────────────────────────────────────── */

.visually-hidden:not(:focus):not(:active),
.sr-only:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}


/* ─────────────────────────────────────────────────────────────────────
 * 8. PREFERS-REDUCED-MOTION RESPECT GLOBAL (A11Y-007 · MO-AP-6)
 *    SC 2.3.3 AAA + SC 2.2.2 A · honore préférence utilisateur
 * ───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 9. ANTI-PATTERNS PRÉVENTIFS (sortie A11Y-AP-4, AP-5)
 *    Bloque les viewport non-zoomable + placeholder-as-label patterns
 * ───────────────────────────────────────────────────────────────────── */

/* Empêche placeholder de servir de label (signale via .visually-hidden si label absent) */
input[placeholder]:not([aria-label]):not([aria-labelledby]):invalid {
    /* Pas de remediation CSS pure · à corriger côté HTML (audit Bricks templates) */
}

/* Empêche outline: 0 inline d'override sans focus visible custom · cascade !important */
/* Déjà géré section 3 via :focus-visible spécifique */


/* ─────────────────────────────────────────────────────────────────────
 * 10. CLS PREVENTION — Cumulative Layout Shift (Lighthouse 0.966 → ≤ 0.1)
 *     Cible : /offres/ section #brxe-of0006 + tarteaucitron banner shift
 *     Pattern : reserve space + position fixed + font-display optional
 * ───────────────────────────────────────────────────────────────────── */

/* Tarteaucitron banner — position fixed pour éviter content shift au chargement async */
#tarteaucitronRoot,
#tarteaucitronAlertBig,
#tarteaucitronAlertSmall {
    position: fixed !important;
    z-index: 2147483645;
    contain: layout style;
}

/* Tarteaucitron banner bottom — pas de layout shift via padding-bottom dynamique */
#tarteaucitronAlertBig {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Réserve espace bandeau cookie au premier chargement (CLS prevention) */
body:has(#tarteaucitronAlertBig:not([style*="display: none"])) {
    padding-bottom: 0; /* tarteaucitron fixed n'impacte pas le flow */
}

/* Sections Bricks — réserve espace minimal pour éviter shifts */
.brxe-section {
    contain: layout style;
}

/* Cards hover-lift — éviter shifts sur hover via transform au lieu de margin */
.card.hover-lift {
    will-change: transform;
    transform: translateZ(0);
    contain: layout style;
}


/* ─────────────────────────────────────────────────────────────────────
 * 11. CONTENT-VISIBILITY BELOW-FOLD (Lighthouse FCP/LCP/TBT gain)
 *     Pattern : skip rendering off-screen sections jusqu'au scroll
 *     Compat : Chromium 85+ · Firefox 124+ · Safari 18+
 * ───────────────────────────────────────────────────────────────────── */

/* Below-fold sections — content-visibility auto pour skip render initial */
.brxe-section:not(:first-of-type):not(.section-hero):not([id="brxe-of0001"]) {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}


/* ─────────────────────────────────────────────────────────────────────
 * 12. IMAGE ASPECT-RATIO PRESERVATION (CLS prevention)
 *     Pattern : img sans width/height inline → aspect-ratio CSS fallback
 * ───────────────────────────────────────────────────────────────────── */

img:not([width]):not([height]) {
    aspect-ratio: attr(width) / attr(height);
}

/* Images Bricks hero/lcp — réserve dimensions explicites */
.brxe-image img,
img.brxe-image {
    max-width: 100%;
    height: auto;
}


/* ─────────────────────────────────────────────────────────────────────
 * 13. FONT-DISPLAY OPTIMIZATION (FOUT prevention · CLS gain)
 *     Pattern : size-adjust pour aligner fallback avec font finale
 * ───────────────────────────────────────────────────────────────────── */

/* Override pour fonts theme — display:swap est OK · ajout size-adjust */
@supports (size-adjust: 100%) {
    @font-face {
        font-family: 'system-fallback';
        src: local('Arial');
        size-adjust: 100%;
        ascent-override: 90%;
        descent-override: 22%;
        line-gap-override: 0%;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 14. ANTI-OVERSCROLL HORIZONTAL (mobile UX · MO-005)
 *     Pattern : empêche scroll horizontal involontaire sur mobile
 * ───────────────────────────────────────────────────────────────────── */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}


/* ─────────────────────────────────────────────────────────────────────
 * 15. SPRINT 2 LIVRABLE 5 — Bandeau souverain talisman (DR-04 PR-012 + DR-09 ED-008)
 *     Phrase 10-12 mots juste après Hero · positionnement souverain immédiat
 * ───────────────────────────────────────────────────────────────────── */

.bandeau-souverain {
    background: linear-gradient(180deg, #0E2B47 0%, #061a32 100%);
    color: var(--color-primary-light, #ffffff);
    padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1rem, 3vw, 2rem);
    text-align: center;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.bandeau-souverain__phrase {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.bandeau-souverain__phrase strong {
    color: var(--color-accent-cyber, #00D4FF);
    font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────────────
 * 16. SPRINT 2 LIVRABLE 5 — Pricing cards container queries (DR-07 MO-003 + PdP-MO-B)
 *     Responsive intrinsèque cards selon largeur du conteneur (vs viewport)
 * ───────────────────────────────────────────────────────────────────── */

.pricing-grid {
    container-type: inline-size;
    container-name: pricing-grid;
}

.pricing-card {
    contain: layout style;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

@container pricing-grid (min-width: 28rem) {
    .pricing-card {
        padding: clamp(1.5rem, 2.5cqi, 2.25rem);
    }
}

@container pricing-grid (min-width: 48rem) {
    .pricing-card {
        padding: 2.5rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 17. SPRINT 2 LIVRABLE 5 — Featured card visual reinforcement (DR-04 PR-003)
 *     Signal triple sans scale transform (sobriété 2024-2026)
 *     Signal 1 : badge pill · Signal 2 : fond luminance +3-5% · Signal 3 : border 2px
 * ───────────────────────────────────────────────────────────────────── */

.pricing-card--featured {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.06) 0%, rgba(0, 212, 255, 0.02) 100%);
    border: 2px solid var(--color-accent-cyber, #00D4FF);
    position: relative;
    z-index: 1;
}

.pricing-card--featured .badge,
.pricing-card--featured .badge-cyber {
    background: var(--color-accent-cyber, #00D4FF);
    color: var(--color-primary, #0A0A0A);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    text-transform: uppercase;
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
}

/* Pricing card hover state — élévation subtile sans CLS */
.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}

.pricing-card--featured:hover {
    border-color: var(--color-link-on-light-strong, #00475C);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.25);
}


/* ─────────────────────────────────────────────────────────────────────
 * 18. SPRINT 2 LIVRABLE 5 — Targets tactiles 48×48 boutons primaires (DR-07 MO-009)
 *     WCAG 2.2 SC 2.5.8 + Apple HIG + Material 3 · cohérent avec rc108 §6 24/44
 * ───────────────────────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-cta,
.btn-border-glow,
.btn-shine {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}


/* ─────────────────────────────────────────────────────────────────────
 * 19. SPRINT 2 LIVRABLE 5 — Fluid typography clamp() (DR-07 MO-004)
 *     Évite media queries hard-coded pour H1/H2/H3/price
 *     Override partiel theme · respect cascade ogma-design-system
 * ───────────────────────────────────────────────────────────────────── */

.pricing-card h3 {
    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.pricing-card .price {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin: 0.5rem 0 1rem 0;
}

.pricing-card .price small {
    font-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);
    font-weight: 400;
    opacity: 0.8;
}


/* ─────────────────────────────────────────────────────────────────────
 * 20. SPRINT 3 LIVRABLE 5 — Founders banner dismissible (DR-04 PR-015)
 *     Position pleine largeur pré-grille pricing · localStorage dismissal
 *     Anti-pattern PR-AP-008 évité : architecture distincte cards principales
 * ───────────────────────────────────────────────────────────────────── */

.founders-banner {
    background: linear-gradient(135deg, #c54a00 0%, #8a3500 100%);
    color: #ffffff;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
    border-radius: 0;
    position: relative;
    margin: 2rem 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 300ms ease, max-height 300ms ease, margin 300ms ease, padding 300ms ease;
    overflow: hidden;
    max-height: 400px;
}

.founders-banner--dismissed {
    opacity: 0;
    transform: translateY(-12px);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.founders-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-right: 3rem;
}

.founders-eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    opacity: 0.9;
}

.founders-headline {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.founders-headline strong {
    color: var(--color-accent-cyber, #00D4FF);
    font-weight: 700;
}

.founders-sub {
    font-size: 0.9375rem;
    margin: 0 0 1rem 0;
    opacity: 0.95;
}

.founders-cta {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    min-height: 48px;
    transition: background 200ms ease;
}

.founders-cta:hover {
    background: rgba(255, 255, 255, 0.25);
    text-decoration: none;
}

.founders-dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px;
    transition: background 200ms ease;
}

.founders-dismiss:hover,
.founders-dismiss:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}


/* ─────────────────────────────────────────────────────────────────────
 * 21. SPRINT 3 LIVRABLE 5 — Toggle Mensuel/Annuel (DR-04 PR-004 + DR-09 ED-014)
 *     Calibrage FR -15 % zone basse · default monthly · animation 200 ms
 * ───────────────────────────────────────────────────────────────────── */

.pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    padding: 0.35rem 0.5rem;
    margin: 1.5rem auto;
    flex-wrap: wrap;
    justify-content: center;
}

.pricing-toggle__label {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
    padding-left: 0.5rem;
}

.pricing-toggle__btn {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 999px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.pricing-toggle__btn small {
    font-size: 0.75rem;
    color: var(--color-accent-cyber, #00D4FF);
    font-weight: 700;
    background: rgba(0, 212, 255, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
}

.pricing-toggle__btn--active {
    background: var(--color-primary, #0A0A0A);
    color: var(--color-primary-light, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pricing-toggle__btn--active small {
    background: var(--color-accent-cyber, #00D4FF);
    color: var(--color-primary, #0A0A0A);
}

/* État body[data-pricing-mode=annual] : Show .price em (annual hint already inline) */
body[data-pricing-mode="annual"] .pricing-card .price + p em {
    color: var(--color-accent-cyber, #00D4FF);
    font-weight: 600;
    font-style: normal;
    background: rgba(0, 212, 255, 0.08);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 0.25rem;
}

body[data-pricing-mode="monthly"] .pricing-card .price + p em {
    color: var(--color-text-secondary, #6b7280);
    font-weight: 400;
    opacity: 0.85;
}


/* ─────────────────────────────────────────────────────────────────────
 * 22. SPRINT 3 LIVRABLE 5 — Matrice 12 critères collapsable (DR-04 PR-002 + DR-09 ED-013 + A11Y-013)
 *     Pattern <details>/<summary> natif HTML · 0 JavaScript pour collapse
 *     A11y excellence : focus/aria native browser-handled
 * ───────────────────────────────────────────────────────────────────── */

.criteres-matrice {
    max-width: 1200px;
    margin: 2.5rem auto;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 212, 255, 0.03);
}

.criteres-matrice__summary {
    cursor: pointer;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
    font-size: 1.0625rem;
    font-weight: 600;
    color: inherit;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: background 200ms ease;
    min-height: 48px;
}

.criteres-matrice__summary::-webkit-details-marker {
    display: none;
}

.criteres-matrice__summary:hover,
.criteres-matrice__summary:focus-visible {
    background: rgba(0, 212, 255, 0.08);
}

.criteres-matrice__summary strong {
    color: var(--color-accent-cyber, #00D4FF);
}

.criteres-matrice__chevron {
    font-size: 1.25rem;
    transition: transform 200ms ease;
    color: var(--color-accent-cyber, #00D4FF);
}

.criteres-matrice[open] .criteres-matrice__chevron {
    transform: rotate(-180deg);
}

.criteres-matrice__content {
    padding: 0 clamp(1rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
}

.criteres-matrice__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9375rem;
}

.criteres-matrice__table th,
.criteres-matrice__table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
    line-height: 1.55;
}

.criteres-matrice__table thead th {
    background: rgba(0, 212, 255, 0.06);
    font-weight: 700;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3);
}

.criteres-matrice__table tbody th[scope="row"] {
    font-weight: 600;
    color: inherit;
    width: clamp(140px, 22%, 220px);
    background: rgba(0, 0, 0, 0.02);
}

.criteres-matrice__table tbody tr:last-child th,
.criteres-matrice__table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 47.99rem) {
    .criteres-matrice__table {
        font-size: 0.875rem;
    }
    .criteres-matrice__table th[scope="row"] {
        width: 35%;
    }
    .criteres-matrice__table th,
    .criteres-matrice__table td {
        padding: 0.6rem 0.75rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 23. SPRINT 4 LIVRABLE 5 — Quality stamps trust signal (DR-09 ED-007 + ED-010)
 *     4 stamps minimum · grid responsive · placeholder client logos
 * ───────────────────────────────────────────────────────────────────── */

.quality-stamps {
    background: var(--color-bg-elevated, #f8fafc);
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
}

.quality-stamps__eyebrow {
    text-align: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 1.5rem 0;
}

.quality-stamps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.quality-stamps__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 8px;
    transition: background 200ms ease, border-color 200ms ease;
}

.quality-stamps__item:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 212, 255, 0.3);
}

.quality-stamps__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0E2B47 0%, #061a32 100%);
    color: var(--color-accent-cyber, #00D4FF);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 8px;
    flex-shrink: 0;
}

.quality-stamps__label {
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0 0 0.15rem 0;
    line-height: 1.3;
}

.quality-stamps__sub {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────────
 * 24. SPRINT 5 LIVRABLE 5 — Sticky bottom CTA mobile (DR-07 MO-010 + MO-013 safe-area)
 *     Affiché seulement mobile (< 48rem) · respecte env(safe-area-inset-bottom) iOS
 * ───────────────────────────────────────────────────────────────────── */

.sticky-bottom-cta {
    display: none;
}

@media (max-width: 47.99rem) {
    .sticky-bottom-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--color-primary, #0A0A0A);
        color: var(--color-primary-light, #ffffff);
        padding: 0.75rem 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        padding-left:   max(1rem, env(safe-area-inset-left));
        padding-right:  max(1rem, env(safe-area-inset-right));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
        border-top: 1px solid rgba(0, 212, 255, 0.3);
        contain: layout style;
    }

    .sticky-bottom-cta__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        max-width: 720px;
        margin: 0 auto;
    }

    .sticky-bottom-cta__text {
        margin: 0;
        font-size: 0.875rem;
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.4;
    }

    .sticky-bottom-cta__text strong {
        color: var(--color-accent-cyber, #00D4FF);
    }

    .sticky-bottom-cta__btn {
        flex-shrink: 0;
        min-height: 48px;
        padding: 0.65rem 1.1rem;
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    /* Réserve espace footer pour ne pas masquer du contenu */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 25. SPRINT rc109 OPTIMISATIONS — prefers-reduced-data (économie bande passante)
 *     Cible : utilisateurs connexions économes (mobile data · saveData header)
 *     Désactive animations + transitions non-critiques + reduce image filters
 * ───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-data: reduce) {
    /* Désactive toutes animations + transitions non-critiques */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Désactive box-shadow + filters coûteux */
    .card,
    .pricing-card,
    .founders-banner,
    .bandeau-souverain {
        box-shadow: none !important;
        filter: none !important;
    }

    /* Hide images décoratives non-critiques */
    [class*="decoration"],
    [class*="ornament"],
    .hero-video,
    [aria-hidden="true"][class*="bg-"] {
        display: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 26. SPRINT rc109 OPTIMISATIONS — will-change cleanup (GPU memory savings)
 *     Anti-pattern : will-change permanent → consomme GPU memory
 *     Pattern : will-change uniquement sur :hover (transient activation)
 * ───────────────────────────────────────────────────────────────────── */

.card.hover-lift,
.pricing-card,
.quality-stamps__item {
    will-change: auto;
}

.card.hover-lift:hover,
.pricing-card:hover,
.quality-stamps__item:hover {
    will-change: transform;
}


/* ─────────────────────────────────────────────────────────────────────
 * 27. SPRINT rc109 OPTIMISATIONS — contain: paint sections complexes
 *     Aggressive containment pour sections complexes · isolation paint
 *     Réduit le scope de repaint en cas d'animation/scroll
 * ───────────────────────────────────────────────────────────────────── */

.criteres-matrice,
.quality-stamps,
.founders-banner,
.bandeau-souverain {
    contain: layout style paint;
}

/* rc110b FIX : pricing-grid SANS paint pour préserver badges featured cards
   qui sortent du conteneur (badge "LE PLUS CHOISI" position absolute top: -0.85rem) */
.pricing-grid {
    contain: layout style;
}

/* Sticky CTA mobile · contain strict pour isoler du flow */
@media (max-width: 47.99rem) {
    .sticky-bottom-cta {
        contain: layout style paint size;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 28. SPRINT rc109 OPTIMISATIONS — text-rendering + font-smoothing
 *     optimizeLegibility + antialiased pour lisibilité premium
 *     Compatible toutes pages B2B FinTech (cohérent Stripe/Linear/Pennylane)
 * ───────────────────────────────────────────────────────────────────── */

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─────────────────────────────────────────────────────────────────────
 * 29. SPRINT rc109 OPTIMISATIONS — image rendering crisp + lazy hints
 *     Optimisations cumulatives images pour LCP + transfert size
 * ───────────────────────────────────────────────────────────────────── */

img {
    image-rendering: auto;  /* default safe · -webkit-optimize-contrast trop agressif */
    max-width: 100%;
    height: auto;
}

/* Images data-URI Bricks lazy placeholders · ne pas appliquer max-width */
img[src^="data:image/svg+xml"],
img[src^="data:image/png;base64"] {
    image-rendering: auto;
}


/* ─────────────────────────────────────────────────────────────────────
 * 30. SPRINT rc109 OPTIMISATIONS — scroll-behavior + scrollbar-gutter
 *     UX scroll moderne avec respect prefers-reduced-motion
 * ───────────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;  /* évite layout shift quand scrollbar apparaît */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 31. SPRINT rc110b — REVERT carrousel + FIX cards overflow
 *     Florian feedback : "Pas de caroussels" + "les encarts sont BROKE"
 *     Cause overflow : theme ogma-design-system force grid-template-columns:
 *     repeat(3, 1fr) qui cause overflow horizontal quand content > 1/3 container
 *     Fix : override avec minmax(0, 1fr) (ou auto-fit minmax)
 *     SPÉCIFICITÉ ÉLEVÉE pour gagner cascade vs theme
 * ───────────────────────────────────────────────────────────────────── */

/* Override cascade theme · 3 colonnes desktop · 2 tablet · 1 mobile */
.brxe-section .pricing-grid,
.brxe-rich-text .pricing-grid,
.pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    max-width: 100%;
}

/* Card content overflow prevention */
.pricing-card {
    min-width: 0;  /* empêche content de pousser la card au-delà de 1fr */
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
}

/* Grids avec 1 ou 2 cards · layout adapté DESKTOP UNIQUEMENT */
@media (min-width: 48rem) {
    .pricing-grid:has(> .pricing-card:nth-child(1):last-child) {
        grid-template-columns: 1fr !important;
    }
    .pricing-grid:has(> .pricing-card:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Tablet 48-64 rem : 2 colonnes confort */
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile (< 48 rem) : 1 colonne empilée par défaut · sauf add-ons (carrousel) */
@media (max-width: 47.99rem) {
    .pricing-grid,
    .brxe-section .pricing-grid,
    .brxe-rich-text .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* CARROUSEL MOBILE ADD-ONS (DR-04 PR-014 · 5 cards horizontal swipe) */
    /* Cible : pricing-grid avec exactement 5 enfants pricing-card (= add-ons section) */
    .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6))),
    .brxe-section .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6))),
    .brxe-rich-text .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6))) {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1rem;
        gap: 1rem;
        padding: 0.5rem 1rem 1.5rem;
        margin: 0 -1rem;
        scrollbar-width: thin;
        scrollbar-color: var(--color-accent-cyber, #00D4FF) transparent;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6))) > .pricing-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        min-width: 280px;
        max-width: 320px;
    }

    /* Scrollbar custom cyan branded OGMA */
    .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6)))::-webkit-scrollbar {
        height: 6px;
    }
    .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6)))::-webkit-scrollbar-track {
        background: rgba(0, 212, 255, 0.06);
        border-radius: 999px;
        margin: 0 1rem;
    }
    .pricing-grid:has(> .pricing-card:nth-child(5)):not(:has(> .pricing-card:nth-child(6)))::-webkit-scrollbar-thumb {
        background: var(--color-accent-cyber, #00D4FF);
        border-radius: 999px;
    }
}

/* Badge featured "LE PLUS CHOISI" : assurer visibilité sans clip */
.pricing-card--featured {
    overflow: visible;
}

.pricing-card--featured .badge,
.pricing-card--featured .badge-cyber {
    z-index: 2;  /* au-dessus des autres cards adjacentes */
}


/* ─────────────────────────────────────────────────────────────────────
 * 31.B SPRINT rc113e3 — FIX CLS Bricks Builder lazy-hidden (root cause /offres/)
 *      Bricks core injecte `.bricks-lazy-hidden` sur sections au load initial
 *      pour reveal animation au scroll. Le passage hidden→visible cause un
 *      LAYOUT SHIFT réel (Lighthouse CLS 0.533 mesuré /offres/ 2026-05-15).
 *      Fix : neutraliser opacity/transform initial pour layout stable.
 *      Conservation animations OGMA Section 10 design-system (qui n'ont pas
 *      ce problème · animations CSS sur classes `.animate-*` + `.reveal-*`).
 * ───────────────────────────────────────────────────────────────────── */

.bricks-lazy-hidden {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 33. SPRINT rc113 — Pattern A grid CSS native pour pricing /offres/
 *     Migration Splide.js v4 SUPPRIMÉ · CSS pur (zéro JS · Cadre #279)
 *     Recette validée DR-CARROUSEL-SOTA-2 (2026-05-15) · 6/7 techniques :
 *       Grid moderne · Variable Fonts Inter v4.1 · :has() / :is() /
 *       :where() · aspect-ratio · Logical Properties · @supports / @media
 *     Gain : -14 KB gzip · -30 à -80 ms TBT · CLS éliminé · +2,1 KB CSS
 *     Tokens OGMA réutilisés (--color-primary · --color-accent-cyber ·
 *     --space-* · --radius-* · --transition-* · --text-*)
 * ───────────────────────────────────────────────────────────────────── */

/* 33.1 — Grille 3 cols desktop / stack mobile (zéro scroll-snap)
   FIX rc113b : retrait padding-inline + max-inline-size · le wrapper
   Bricks .brxe-container gère déjà la largeur + padding · doublon
   évité (sinon cards rétrécies à 200 px sur viewport 1440 px) */
.ogma-pricing,
.ogma-carousel,
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, var(--space-8));
    align-items: stretch;
    margin-inline: 0;
    margin-block: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 64rem) {
    .ogma-pricing,
    .ogma-carousel,
    .pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Fallback Grid pour navigateurs très anciens (< 1 % en 2026) */
@supports not (display: grid) {
    .ogma-pricing,
    .ogma-carousel,
    .pricing-grid {
        display: flex;
        flex-wrap: wrap;
    }
    .ogma-pricing > *,
    .ogma-carousel > *,
    .pricing-grid > * {
        flex: 1 1 18rem;
    }
}

/* 33.2 — Pricing cards · :where() spécificité 0 (overrides Bricks faciles) */
.ogma-pricing :where(.pricing-card),
.ogma-carousel :where(.pricing-card),
.pricing-grid :where(.pricing-card) {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* 33.3 — État featured AUTO-DÉTECTÉ via :has() (sans classe ni JS) */
.ogma-pricing .pricing-card:has(.badge),
.ogma-pricing .pricing-card.featured,
.ogma-carousel .pricing-card:has(.badge),
.ogma-carousel .pricing-card.featured {
    border-color: var(--color-accent-cyber, #00D4FF);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.18);
}

/* Fallback :has() (Safari < 15.4 · Firefox < 121 = ~8 % en 2026) */
@supports not selector(:has(*)) {
    .ogma-pricing .pricing-card.featured,
    .ogma-carousel .pricing-card.featured {
        border-color: var(--color-accent-cyber, #00D4FF);
        box-shadow: 0 12px 32px rgba(0, 212, 255, 0.18);
    }
}

/* 33.4 — Badge inline RTL-safe via Logical Properties
   FIX rc113b : badge peut être descendant (pas seulement enfant direct)
   selon DOM Bricks · sélecteur élargi */
.ogma-pricing .pricing-card .badge,
.ogma-carousel .pricing-card .badge,
.pricing-grid .pricing-card .badge {
    position: absolute;
    inset-block-start: -0.85rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    padding-block: 0.375rem;
    padding-inline: 0.875rem;
    background: var(--color-accent-cyber, #00D4FF);
    color: var(--color-primary, #0A0A0A);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    z-index: 3;
    font-feature-settings: "case" 1;
}

/* 33.5 — Spacing premium ladder interne cards (capital visuel rc112 préservé) */
.ogma-pricing .pricing-card,
.ogma-carousel .pricing-card {
    padding-block: var(--space-8);
    padding-inline: 1.75rem;
}

.ogma-pricing .pricing-card h3,
.ogma-carousel .pricing-card h3 {
    margin-block-end: 0.625rem;
}

.ogma-pricing .pricing-card .price,
.ogma-carousel .pricing-card .price {
    margin-block: 0.5rem 0.375rem;
}

.ogma-pricing .pricing-card > p,
.ogma-carousel .pricing-card > p {
    margin-block: 0.5rem 1.25rem;
    line-height: 1.55;
}

.ogma-pricing .pricing-card ul,
.ogma-carousel .pricing-card ul {
    margin-block: 1rem 1.5rem;
    padding-inline-start: 0;
    list-style: none;
}

.ogma-pricing .pricing-card ul li,
.ogma-carousel .pricing-card ul li {
    margin-block-end: 0.75rem;
    line-height: 1.55;
    padding-inline-start: 1.625rem;
    position: relative;
}

.ogma-pricing .pricing-card ul li:last-child,
.ogma-carousel .pricing-card ul li:last-child {
    margin-block-end: 0;
}

/* 33.6 — Typographie Top Tier Inter v4.1 variable */
.ogma-pricing .pricing-card h3,
.ogma-carousel .pricing-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-variation-settings: "wght" 600, "opsz" 28;
    font-feature-settings: "ss01", "cv11", "kern";
    font-size: clamp(1.375rem, 1.5vw + 1rem, 1.625rem);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.ogma-pricing .pricing-card .price,
.ogma-carousel .pricing-card .price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-variation-settings: "wght" 700, "opsz" 32;
    font-feature-settings: "tnum", "lnum", "zero";
    font-variant-numeric: tabular-nums slashed-zero lining-nums;
    font-size: clamp(2.25rem, 3vw + 1rem, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.ogma-pricing .pricing-card .price small,
.ogma-carousel .pricing-card .price small {
    font-weight: 500;
    font-variation-settings: "wght" 500, "opsz" 14;
    letter-spacing: 0.005em;
    opacity: 0.78;
}

.ogma-pricing .pricing-card .btn,
.ogma-carousel .pricing-card .btn {
    margin-block-start: auto;
}

/* 33.7 — Hover lift premium signature B2B */
@media (hover: hover) {
    .ogma-pricing :is(.pricing-card:hover, .pricing-card:focus-within),
    .ogma-carousel :is(.pricing-card:hover, .pricing-card:focus-within) {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(0, 212, 255, 0.22);
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* 33.8 — prefers-reduced-motion · WCAG 2.2 SC 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    .ogma-pricing .pricing-card,
    .ogma-pricing .pricing-card:hover,
    .ogma-carousel .pricing-card,
    .ogma-carousel .pricing-card:hover {
        transition: none;
        transform: none;
    }
}

/* 33.9 — Reset Splide résiduel (defense in depth post-suppression rc113) */
.splide,
.splide__track,
.splide__list,
.splide__slide,
.splide__arrow,
.splide__pagination,
.splide__sr {
    all: unset;
    display: block;
}

/* 33.10 — FIX rc113d : boutons cards pricing étroites (textes longs débordent)
   Cause : .btn global { white-space: nowrap } force ligne unique
           Texte "DISCUTER AVEC UN EXPERT IA" uppercase Inter Variable ~240 px
           Cards Pattern A grid 3 cols 877 px → ~280 px par card · 224 px content
   Solution : permettre wrap multi-lignes + letter-spacing réduit + width 100% */
.ogma-pricing .pricing-card .btn,
.ogma-pricing .pricing-card .brxe-button,
.ogma-carousel .pricing-card .btn,
.ogma-carousel .pricing-card .brxe-button,
.pricing-grid .pricing-card .btn,
.pricing-grid .pricing-card .brxe-button {
    white-space: normal !important;       /* override .btn nowrap global */
    text-align: center;
    line-height: 1.3;                     /* respiration verticale wrap */
    letter-spacing: 0.03em;               /* réduit uppercase tracking */
    inline-size: 100%;                    /* full width card */
    padding-block: 0.875rem;              /* hauteur correcte texte 2 lignes */
    padding-inline: 1rem;                 /* padding lat réduit · plus de place texte */
    min-block-size: 3rem;                 /* hauteur min cohérente single-line */
}

/* Petits écrans : cards encore plus étroites · padding plus serré */
@media (max-width: 47.99rem) {
    .ogma-pricing .pricing-card .btn,
    .ogma-pricing .pricing-card .brxe-button,
    .ogma-carousel .pricing-card .btn,
    .ogma-carousel .pricing-card .brxe-button,
    .pricing-grid .pricing-card .btn,
    .pricing-grid .pricing-card .brxe-button {
        font-size: 0.8125rem;             /* 13px mobile pour économiser */
        padding-inline: 0.75rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 34. SPRINT rc114 — Overhaul Header itéré + Mobile nav fullscreen overlay
 *     Source : DR-UX-PREMIUM-1 v3 (2026-05-15 · 10 sites premium audités)
 *     Pattern dominant : Apple liquid glass + Stripe sticky CTAs + Qonto mega-menu
 *     - Header `#brx-header` itéré 80→64 px desktop · backdrop blur(20px) saturate(180%)
 *     - Classe .is-scrolled dynamique JS (renforcement glassmorphism au scroll)
 *     - CTA primaire pill cyan (--color-accent-cyber)
 *     - Mobile nav fullscreen overlay accordion + CTAs sticky bas safe-area-inset
 *     Tokens OGMA réutilisés (var(--font-heading) · var(--color-*) · var(--transition-*))
 *     Cohabite avec rc108 #brx-header sticky existant (cascade additive)
 * ───────────────────────────────────────────────────────────────────── */

/* 34.1 — Header itéré sticky · liquid glass + .is-scrolled state */
:where(#brx-header) {
    transition: background var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal),
                height var(--transition-normal);
}

@supports (backdrop-filter: blur(1px)) {
    /* rc114b fix specificity : retire :where() pour gagner cascade vs bricks-overrides */
    #brx-header .brxe-section {
        background: rgba(10, 10, 10, 0.78);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
    }
}

:where(#brx-header.is-scrolled .brxe-section),
#brx-header.is-scrolled .brxe-section {
    background: rgba(10, 10, 10, 0.92) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}

/* Header desktop hauteur 64px (vs 80px legacy · gain 16px above-fold) */
@media (min-width: 992px) {
    :where(#brx-header .brxe-section) {
        padding-block: var(--space-2);
    }
    :where(#brx-header .brxe-image img) {
        height: 40px;
        width: 40px;
    }
    :where(#brx-header.is-scrolled .brxe-section) {
        padding-block: calc(var(--space-2) - 2px);
    }
}

/* 34.2 — CTA primaire header pill cyan premium · rc114b fix specificity */
#brx-header .bricks-nav-menu > li.menu-item-cta > a,
#brx-header ul.bricks-nav-menu > li.menu-item-cta > a {
    background: var(--color-accent-cyber, #00D4FF) !important;
    color: var(--color-primary, #0A0A0A) !important;
    padding-block: var(--space-2) !important;
    padding-inline: var(--space-5) !important;
    border-radius: var(--radius-full, 9999px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    min-block-size: 40px;
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
}

#brx-header .bricks-nav-menu > li.menu-item-cta > a::after {
    display: none !important;
    content: none !important;
}

@media (hover: hover) {
    #brx-header .bricks-nav-menu > li.menu-item-cta > a:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px -8px rgba(0, 212, 255, 0.4);
        background: color-mix(in srgb, var(--color-accent-cyber) 92%, white) !important;
    }
}

#brx-header .bricks-nav-menu > li.menu-item-cta > a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 1),
                0 0 0 4px rgba(0, 212, 255, 0.8),
                0 0 12px rgba(0, 212, 255, 0.25);
}

/* 34.3 — Mobile nav fullscreen overlay accordion (≤ 991px) */
@media (max-width: 991px) {
    /* Conserve Bricks toggle natif comme déclencheur · override wrapper */
    .bricks-mobile-menu-wrapper {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(10, 10, 10, 0.97) !important;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0));
        padding-inline: var(--space-5);
        display: flex !important;
        flex-direction: column;
        gap: var(--space-1);
        transform: translateY(-2%);
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
        overflow-y: auto;
        transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 240ms ease,
                    visibility 0s linear 240ms;
    }

    .bricks-mobile-menu-wrapper.brx-open,
    .bricks-mobile-menu-wrapper[data-open="true"] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 240ms ease;
    }

    /* Items menu mobile · WCAG 2.2 touch 44 min + typo premium */
    .bricks-mobile-menu > li,
    .bricks-mobile-menu > li > a,
    .bricks-mobile-menu-wrapper a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .bricks-mobile-menu > li > a {
        font-family: var(--font-heading);
        font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem);
        font-weight: 500;
        letter-spacing: -0.005em;
        padding-block: var(--space-3);
        padding-inline: 0;
        text-transform: none;
        border-block-end: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--color-primary-light);
        transition: color var(--transition-fast),
                    padding-inline var(--transition-fast);
    }

    .bricks-mobile-menu > li > a:hover,
    .bricks-mobile-menu > li > a:focus-visible {
        color: var(--color-accent-cyber);
        padding-inline-start: var(--space-2);
    }

    /* CTA mobile sticky bas (si menu-item-cta présent) */
    .bricks-mobile-menu > li.menu-item-cta {
        margin-block-start: auto;
        padding-block-start: var(--space-6);
    }

    .bricks-mobile-menu > li.menu-item-cta > a {
        background: var(--color-accent-cyber);
        color: var(--color-primary) !important;
        padding-block: var(--space-4);
        padding-inline: var(--space-6);
        border-radius: var(--radius-full);
        font-weight: 600;
        font-size: var(--text-base);
        letter-spacing: 0.02em;
        text-transform: none;
        justify-content: center;
        border: none !important;
        text-align: center;
        width: 100%;
    }

    .bricks-mobile-menu > li.menu-item-cta > a::after {
        display: none !important;
    }

    /* Lock body scroll quand menu mobile ouvert */
    body:has(.bricks-mobile-menu-wrapper.brx-open),
    body:has(.bricks-mobile-menu-wrapper[data-open="true"]),
    body.brx-open {
        overflow: hidden;
    }
}

/* 34.4 — prefers-reduced-motion · neutralise transitions header + mobile */
@media (prefers-reduced-motion: reduce) {
    :where(#brx-header),
    :where(#brx-header .brxe-section),
    .bricks-mobile-menu-wrapper {
        transition: none !important;
    }
    .bricks-mobile-menu-wrapper {
        transform: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 35. SPRINT rc115 — 4 Typologies Hero (DR-UX-PREMIUM-1 v3 · 2026-05-15)
 *     Recette validée 10 sites premium audités (Apple/Stripe/Linear/etc.)
 *     T1 Homepage vitrine    : .ogma-hero--home    (vidéo bg + 2 CTAs + trust)
 *     T2 Pillar / Legal      : .ogma-hero--pillar  (sobre + breadcrumbs + TOC)
 *     T3 Produit-Feature     : .ogma-hero--feature (split + stats card cyber)
 *     T4 Conversion          : .ogma-hero--convert (split formulaire + trust)
 *     Classes utilitaires applicables via Bricks "CSS Classes" panel.
 * ───────────────────────────────────────────────────────────────────── */

/* 35.1 — Typologie 1 Hero Homepage vitrine (route /) */
.ogma-hero--home {
    position: relative;
    min-block-size: clamp(560px, 72svh, 820px);
    display: grid;
    place-items: center;
    background: var(--color-hero-bg, #0E2B47);
    color: #fff;
    padding-block: var(--space-12) var(--space-10);
    padding-inline: var(--space-5);
    isolation: isolate;
    text-align: center;
}

.ogma-hero--home > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.ogma-hero--home::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 40%, rgba(14, 43, 71, 0.55), rgba(10, 10, 10, 0.92));
}

.ogma-hero--home .ogma-hero__eyebrow {
    font-size: var(--text-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-cyber);
    margin-block-end: var(--space-6);
    font-weight: 500;
}

.ogma-hero--home .ogma-hero__h1,
.ogma-hero--home h1 {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    max-inline-size: 22ch;
    text-align: center;
    text-wrap: balance;
}

.ogma-hero--home .ogma-hero__sub {
    font-size: var(--text-xl);
    line-height: 1.5;
    max-inline-size: 52ch;
    text-align: center;
    color: rgba(240, 244, 248, 0.86);
    margin: var(--space-6) auto var(--space-8);
}

.ogma-hero--home .ogma-hero__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.ogma-hero--home .ogma-hero__trust {
    margin-block-start: var(--space-10);
    font-size: var(--text-sm);
    color: rgba(240, 244, 248, 0.7);
    letter-spacing: 0.06em;
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .ogma-hero--home > video {
        display: none;
    }
}

/* 35.2 — Typologie 2 Hero Pillar/Legal institutionnel
   Routes /rgpd/ · futurs Pillars · 4 legal · /accessibilite/ · /cookies/ */
.ogma-hero--pillar {
    background: var(--color-neutral-light, #F0F4F8);
    color: var(--color-primary);
    padding-block: var(--space-12) var(--space-8);
    padding-inline: var(--space-5);
    border-block-end: 1px solid rgba(10, 10, 10, 0.06);
}

.ogma-hero--pillar .ogma-breadcrumbs {
    font-size: var(--text-sm);
    color: rgba(10, 10, 10, 0.6);
    margin-block-end: var(--space-6);
    letter-spacing: 0.02em;
}

.ogma-hero--pillar .ogma-breadcrumbs a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ogma-hero--pillar .ogma-hero__h1,
.ogma-hero--pillar h1 {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    max-inline-size: 28ch;
    text-wrap: balance;
    margin-block-end: var(--space-5);
}

.ogma-hero--pillar .ogma-hero__rule {
    inline-size: 64px;
    block-size: 2px;
    background: var(--color-accent-cyber);
    margin-block-end: var(--space-5);
}

.ogma-hero--pillar .ogma-hero__sub {
    font-size: var(--text-lg);
    line-height: 1.6;
    max-inline-size: 64ch;
    color: rgba(10, 10, 10, 0.75);
}

.ogma-hero--pillar .ogma-hero__meta {
    margin-block-start: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(10, 10, 10, 0.55);
    font-variant-numeric: tabular-nums;
}

/* TOC sticky desktop (≥ 1024 px) pour Pillar pages */
@media (min-width: 1024px) {
    .ogma-toc--sticky {
        position: sticky;
        top: calc(var(--header-height, 80px) + var(--space-6));
        max-height: calc(100svh - var(--header-height, 80px) - var(--space-12));
        overflow: auto;
    }
}

/* 35.3 — Typologie 3 Hero Produit-Feature promotionnel
   Routes /offres/ · 3 Agents · /direction-ia-entreprise/ */
.ogma-hero--feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    background: linear-gradient(135deg, #fff 0%, var(--color-neutral-light) 100%);
    color: var(--color-primary);
    padding-block: var(--space-12);
    padding-inline: var(--space-5);
    align-items: center;
}

@media (min-width: 992px) {
    .ogma-hero--feature {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        padding-inline: var(--space-10);
    }
}

.ogma-hero--feature .ogma-hero__eyebrow {
    font-size: var(--text-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 500;
    margin-block-end: var(--space-5);
}

.ogma-hero--feature .ogma-hero__h1,
.ogma-hero--feature h1 {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.08;
    max-inline-size: 20ch;
    text-wrap: balance;
}

.ogma-hero--feature .ogma-hero__sub {
    font-size: var(--text-lg);
    line-height: 1.55;
    max-inline-size: 52ch;
    color: rgba(10, 10, 10, 0.72);
    margin-block: var(--space-5) var(--space-7);
}

.ogma-hero--feature .ogma-stats-card {
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ogma-hero--feature .ogma-stats-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-cyber) 100%);
    opacity: 0.18;
}

.ogma-hero--feature .ogma-stats-card dt {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ogma-hero--feature .ogma-stats-card dd {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 35.4 — Typologie 4 Hero Conversion formulaire-driven
   Routes /audit-offert/ · /confirmation-audit/ */
.ogma-hero--convert {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    background: var(--color-neutral-light);
    color: var(--color-primary);
    padding-block: var(--space-12);
    padding-inline: var(--space-5);
    min-block-size: calc(100svh - var(--header-height, 80px));
    align-items: center;
}

@media (min-width: 992px) {
    .ogma-hero--convert {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
        gap: var(--space-12);
        padding-inline: var(--space-10);
    }
}

.ogma-hero--convert .ogma-hero__h1,
.ogma-hero--convert h1 {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.08;
    max-inline-size: 18ch;
    text-wrap: balance;
}

.ogma-hero--convert .ogma-hero__sub {
    font-size: var(--text-lg);
    line-height: 1.55;
    max-inline-size: 48ch;
    color: rgba(10, 10, 10, 0.72);
    margin-block: var(--space-5) var(--space-7);
}

.ogma-hero--convert .ogma-trust-list {
    display: grid;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: rgba(10, 10, 10, 0.7);
    list-style: none;
    padding-inline-start: 0;
}

.ogma-hero--convert .ogma-trust-list li {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--color-accent-cyber);
}

.ogma-hero--convert .ogma-form-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    box-shadow:
        0 24px 48px -24px rgba(14, 43, 71, 0.18),
        0 0 0 1px rgba(10, 10, 10, 0.04);
}

.ogma-hero--convert .ogma-form-card input,
.ogma-hero--convert .ogma-form-card select,
.ogma-hero--convert .ogma-form-card textarea {
    inline-size: 100%;
    min-block-size: 44px;
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border: 1px solid rgba(10, 10, 10, 0.12);
    border-radius: var(--radius-md);
    font: inherit;
    font-family: var(--font-body);
}

/* 35.5 — Eyebrow + CTAs partagés entre typologies */
.ogma-hero__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
}

.ogma-hero__ctas .btn-secondary {
    color: var(--color-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
 * END OGMA FRONTEND REMEDIATION rc108 v1.9 (2026-05-15 · Sprint rc114)
 *   - v1.0 rc108  : 14 sections A11y + Performance baseline
 *   - v1.1-1.4 rc108b-rc109 : sections 15-30 enhancements
 *   - v1.5 rc110  : section 31 grilles 3 cols
 *   - v1.6-1.7 rc111-rc112 : sections 32 + 32.B Splide (SUPPRIMÉES rc113)
 *   - v1.8 rc113  : SECTION 33 Pattern A CSS native pure
 *   - v1.0 rc108  : 14 sections A11y + Performance baseline
 *   - v1.1-1.4 rc108b-rc109 : sections 15-30 enhancements
 *   - v1.5 rc110  : section 31 grilles 3 cols
 *   - v1.6-1.7 rc111-rc112 : sections 32 + 32.B Splide (SUPPRIMÉES rc113)
 *   - v1.8 rc113  : SECTION 33 Pattern A CSS native pure
 *     · Grid moderne + clamp() + Logical Properties + scroll-padding-top
 *     · :has() détection card centrale sans JS (fallback .featured)
 *     · :where() spécificité 0 pour overrides Bricks faciles
 *     · Variable Font Inter v4.1 (axes wght 100-900 + opsz 14-32)
 *     · @supports fallbacks Grid + :has() ≤ 4 lignes
 *     · prefers-reduced-motion respecté
 *     · Capital visuel rc112 préservé (spacing + typo Top Tier + hover lift)
 *
 * Stack rc113 : Inter v4.1 variable seul · Pattern A pricing CSS pur ·
 *               dual prefers-color-scheme · zéro Splide · zéro JS tiers
 * ═══════════════════════════════════════════════════════════════════════ */