:root {
    --mbr-navy-deep: #0a1628;
    --mbr-navy-primary: #1a2744;
    --mbr-gold-primary: #f5b800;
    --mbr-gold-light: #ffd54f;
    --mbr-gold-dark: #c49000;
    --mbr-white: #fff;
    --mbr-soft: #f8fafc;
    --mbr-line: #e2e8f0;
    --mbr-text: #0f172a;
    --mbr-muted: #64748b;
    --mbr-card-shadow: 0 10px 30px rgba(10, 22, 40, .06);
    --mbr-card-shadow-hover: 0 25px 50px -12px rgba(26, 39, 68, .15);
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
}

.btn-primary,
.btn,
.cta-header {
    box-shadow: 0 8px 24px rgba(245, 184, 0, .14);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn:focus-visible,
.cta-header:focus-visible,
.formation-link:focus-visible,
.toc a:focus-visible,
.footer-links a:focus-visible,
.footer-section a:focus-visible {
    outline: 3px solid rgba(245, 184, 0, .42);
    outline-offset: 3px;
}

.formation-card,
.programme-card,
.faq-item,
.card,
.service-card {
    box-shadow: var(--mbr-card-shadow);
}

.formation-card:hover,
.faq-item:hover,
.card:hover,
.service-card:hover {
    box-shadow: var(--mbr-card-shadow-hover);
}

.programme-modules .module,
.module {
    border-left: 0 !important;
    border: 1px solid rgba(226, 232, 240, .95);
    border-top: 4px solid var(--gold-primary, var(--mbr-gold-primary));
    box-shadow: 0 12px 28px rgba(10, 22, 40, .05);
}

.module-number {
    box-shadow: 0 8px 22px rgba(245, 184, 0, .24);
}

.resource-link-section {
    padding: 72px 0;
    background: linear-gradient(180deg, var(--mbr-white), var(--mbr-soft));
}

.resource-link-card {
    display: grid;
    grid-template-columns: minmax(28ch, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    align-items: center;
    padding: clamp(28px, 4vw, 42px);
    border: 1px solid rgba(245, 184, 0, .28);
    border-radius: 22px;
    background:
        radial-gradient(circle at 94% 8%, rgba(245, 184, 0, .13), transparent 30%),
        linear-gradient(135deg, rgba(245, 184, 0, .08), rgba(255, 255, 255, .96) 42%),
        var(--mbr-white);
    box-shadow: var(--mbr-card-shadow);
}

.resource-link-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(245, 184, 0, .13);
    color: var(--gold-dark, var(--mbr-gold-dark));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resource-link-card h2 {
    color: var(--navy-primary, var(--mbr-navy-primary));
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.18;
    margin-bottom: 12px;
}

.resource-link-card p {
    max-width: 72ch;
    color: var(--text-secondary, var(--mbr-muted));
    line-height: 1.75;
}

.resource-link-actions {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.resource-link-actions .btn-secondary {
    color: var(--navy-primary, var(--mbr-navy-primary));
    border-color: rgba(26, 39, 68, .22);
}

.footer-simple {
    background: linear-gradient(135deg, var(--navy-deep, var(--mbr-navy-deep)), var(--navy-primary, var(--mbr-navy-primary))) !important;
    padding: 42px 0 34px !important;
}

.footer-simple .footer-content {
    align-items: flex-start !important;
    gap: 24px !important;
}

.footer-simple .footer-content p {
    max-width: 420px;
    color: rgba(255, 255, 255, .64) !important;
    line-height: 1.7;
}

.footer-simple .footer-links {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 22px !important;
    max-width: 760px;
}

.footer-simple .footer-links a {
    color: rgba(255, 255, 255, .68) !important;
}

.footer-simple .footer-links a:hover {
    color: var(--gold-primary, var(--mbr-gold-primary)) !important;
}

.footer-simple .nav-dropdown .dropdown-menu {
    display: none !important;
}

.footer-simple .nav-dropdown > a svg {
    display: none;
}

.footer-grid {
    row-gap: 44px;
}

.footer-section a:hover,
.footer-legal a:hover {
    color: var(--gold-primary, var(--mbr-gold-primary));
}

/* ---------- Correctif : carte « ressources » à nombreux boutons ----------
   Avec `auto` en 2e colonne, une longue liste de boutons prenait toute la
   largeur et réduisait le texte à un mot par ligne. Au-delà de 3 boutons,
   la carte passe donc sur une seule colonne. Défaut préexistant. */
.resource-link-card:has(.resource-link-actions > :nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
}
.resource-link-card:has(.resource-link-actions > :nth-child(4)) .resource-link-actions {
    justify-content: flex-start;
    margin-top: 4px;
}

@media (max-width: 968px) {
    .resource-link-card {
        grid-template-columns: 1fr;
    }

    .resource-link-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .resource-link-section {
        padding: 56px 0;
    }

    .resource-link-actions,
    .resource-link-actions .btn,
    .resource-link-actions .btn-primary,
    .resource-link-actions .btn-secondary {
        width: 100%;
    }

    .footer-simple .footer-content,
    .footer-simple .footer-links {
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================================
   SOCLE COMMUN — en-tête et pied de page unifiés (étape 1, 06/08/2026)
   Ce bloc est la source unique de vérité pour le header et le footer.
   Il est chargé après les styles en ligne de chaque page et les complète.
   ========================================================================= */

/* ---------- Menu déroulant « Formations » ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-dropdown > a svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .25s ease; }
.nav-dropdown:hover > a svg, .nav-dropdown:focus-within > a svg { transform: rotate(180deg); }
.dropdown-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    min-width: 280px; padding: 12px 0; border-radius: 18px 6px 18px 18px;
    background: rgba(10, 22, 40, .97); border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; overflow: hidden; z-index: 100;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px;
    color: rgba(255, 255, 255, .82); font-size: 14px; font-weight: 500;
    transition: background .2s ease, color .2s ease;
}
.dropdown-menu a:hover, .dropdown-menu a[aria-current="page"] { background: rgba(245, 184, 0, .1); color: var(--mbr-gold-primary); }
.dropdown-menu a svg { width: 20px; height: 20px; stroke: var(--mbr-gold-primary); stroke-width: 1.5; fill: none; flex-shrink: 0; }
.dropdown-divider { height: 1px; background: rgba(255, 255, 255, .08); margin: 8px 0; }

/* ---------- Téléphone dans l'en-tête ---------- */
.phone-header { display: inline-flex; align-items: center; gap: 8px; color: var(--mbr-gold-primary); font-weight: 600; font-size: 14px; }
.phone-header:hover { color: var(--mbr-gold-light); }
.phone-header svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ---------- Lien de la page courante ---------- */
.nav-links > a[aria-current="page"] { color: var(--mbr-gold-primary); }

/* ---------- Pied de page unifié ---------- */
footer { background: linear-gradient(135deg, var(--mbr-navy-deep), var(--mbr-navy-primary)); color: var(--mbr-white); padding: 64px 0 28px; }
footer .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-bottom: 36px; }
.footer-brand .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .logo-img { height: 42px; width: 42px; border-radius: 50%; background: var(--mbr-white); padding: 4px; }
.footer-brand .logo-text { font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 700; color: var(--mbr-white); }
.footer-brand .logo-text span { color: var(--mbr-gold-primary); }
.footer-brand p { color: rgba(255, 255, 255, .68); font-size: 14px; line-height: 1.75; max-width: 42ch; }
.footer-tel { margin-top: 14px; }
.footer-tel a { color: var(--mbr-gold-primary); font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.footer-tel a:hover { color: var(--mbr-gold-light); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
    width: 42px; height: 42px; border-radius: 12px 4px 12px 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .09); color: var(--mbr-white);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.footer-social a:hover { background: var(--mbr-gold-primary); color: var(--mbr-navy-deep); transform: translateY(-3px); }
.footer-social svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.footer-section h4 {
    color: var(--mbr-gold-primary); font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 700;
    margin-bottom: 16px; text-transform: uppercase; letter-spacing: .09em;
}
.footer-section a {
    display: block; color: rgba(255, 255, 255, .7); font-size: 13.5px; line-height: 1.5;
    margin-bottom: 10px; transition: color .25s ease, transform .25s ease;
}
.footer-section a:hover { color: var(--mbr-gold-primary); transform: translateX(3px); }
.footer-section a[aria-current="page"] { color: var(--mbr-gold-primary); font-weight: 600; }
.footer-bottom {
    padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
}
.footer-bottom p { color: rgba(255, 255, 255, .5); font-size: 12.5px; line-height: 1.6; margin: 0; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-legal a { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.footer-legal a:hover { color: var(--mbr-gold-primary); }
.footer-legal .sr-legal { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 30px; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.15fr 1fr .8fr; gap: 30px; } }
@media (max-width: 699px) { .footer-bottom { flex-direction: column; text-align: center; } }

/* ---------- Base d'en-tête, à specificité nulle : ne prend le relais que
     sur les pages qui n'ont pas déjà leurs propres règles ---------- */
:where(header#header) {
    position: fixed; top: 0; width: 100%; z-index: 1000; padding: 16px 0;
    background: rgba(10, 22, 40, .88); backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08); transition: padding .35s ease, background .35s ease;
}
:where(header#header.scrolled) { padding: 10px 0; background: rgba(10, 22, 40, .96); box-shadow: 0 10px 35px rgba(10, 22, 40, .25); }
:where(header#header nav) { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
:where(header#header .container) { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
:where(.logo) { display: flex; align-items: center; gap: 12px; min-width: 0; }
:where(.logo-img) { height: 46px; width: 46px; border-radius: 50%; background: #fff; padding: 4px; }
:where(.logo-text) { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; }
:where(.logo-text span) { color: var(--mbr-gold-primary); }
:where(.nav-links) { display: flex; gap: clamp(14px, 1.4vw, 22px); align-items: center; }
:where(.nav-links a) { color: rgba(255, 255, 255, .84); font-weight: 500; font-size: 14px; white-space: nowrap; transition: color .25s ease; }
:where(.nav-links a:hover) { color: var(--mbr-gold-primary); }
:where(.cta-header) { background: var(--mbr-gold-primary); color: var(--mbr-navy-deep); padding: 11px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; }
:where(.mobile-menu) { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px; border: 0; background: transparent; }
:where(.mobile-menu span) { width: 24px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 1180px) { .phone-header span { display: none; } .phone-header { gap: 0; } }
@media (max-width: 1024px) {
    .nav-links { display: none; }
    .mobile-menu { display: flex; }
    .phone-header { display: none; }
    .nav-links.mobile-open, .nav-links[style*="flex"] {
        display: flex !important; flex-direction: column !important; align-items: stretch;
        position: absolute; top: 100%; left: 0; right: 0; gap: 0;
        background: rgba(10, 22, 40, .98); padding: 18px 24px;
        border-top: 1px solid rgba(255, 255, 255, .1); max-height: calc(100vh - 70px); overflow-y: auto;
    }
    .nav-links.mobile-open > a, .nav-links[style*="flex"] > a,
    .nav-links.mobile-open .nav-dropdown > a, .nav-links[style*="flex"] .nav-dropdown > a {
        padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .nav-links.mobile-open .nav-dropdown, .nav-links[style*="flex"] .nav-dropdown { width: 100%; }
    .nav-links.mobile-open .dropdown-menu, .nav-links[style*="flex"] .dropdown-menu {
        position: static; transform: none; opacity: 1; visibility: visible; display: block;
        background: rgba(255, 255, 255, .04); border: 0; border-radius: 12px;
        margin: 8px 0; min-width: 100%; box-shadow: none; padding: 6px 0;
    }
    .nav-links.mobile-open .dropdown-menu a, .nav-links[style*="flex"] .dropdown-menu a { padding: 11px 16px; }
    .nav-links.mobile-open .cta-header, .nav-links[style*="flex"] .cta-header { margin-top: 14px; text-align: center; display: block; }
    .nav-links.mobile-open .phone-header, .nav-links[style*="flex"] .phone-header {
        display: inline-flex !important; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .nav-links.mobile-open .phone-header span, .nav-links[style*="flex"] .phone-header span { display: inline; }
}

/* =========================================================================
   Correctif d'en-tête — le nom du site ne doit jamais chevaucher les boutons
   ========================================================================= */
header#header nav { flex-wrap: nowrap; }
header#header .logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
header#header .logo-img { flex: 0 0 auto; }
header#header .logo-text { overflow: hidden; text-overflow: ellipsis; }
header#header .nav-links { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
header#header .nav-links > a,
header#header .nav-dropdown > a,
header#header .cta-header { flex: 0 0 auto; }

/* Réduction progressive avant de basculer sur le menu mobile */
@media (max-width: 1320px) {
    header#header .nav-links { gap: 16px; }
    header#header .nav-links > a, header#header .nav-dropdown > a { font-size: 13.5px; }
    header#header .cta-header { padding: 10px 14px; font-size: 13.5px; }
}
@media (max-width: 1180px) {
    header#header .nav-links { gap: 13px; }
    header#header .logo-img { height: 40px; width: 40px; }
    header#header .logo-text { font-size: 17px; }
    header#header .nav-links > a, header#header .nav-dropdown > a { font-size: 13px; }
    header#header .cta-header { padding: 9px 13px; font-size: 13px; }
}
/* Le menu mobile prend le relais plus tôt : plus aucun risque de chevauchement */
@media (max-width: 1080px) {
    header#header .nav-links { display: none; }
    header#header .mobile-menu { display: flex; }
    header#header .phone-header { display: none; }
    header#header .logo-img { height: 42px; width: 42px; }
    header#header .logo-text { font-size: 19px; }
}
@media (max-width: 380px) {
    header#header .logo-text { font-size: 16px; }
    header#header .logo-img { height: 36px; width: 36px; }
}

/* =========================================================================
   ACCESSIBILITÉ — respect du réglage « réduire les animations »
   Absent des 29 pages avant l'étape 2. Ce bloc neutralise tout mouvement
   sans jamais masquer de contenu : les éléments restent à leur place finale.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
    /* les révélations au défilement doivent rester visibles */
    .reveal,
    .reveal-x,
    .rv { opacity: 1 !important; transform: none !important; }
    /* pas de survol qui déplace */
    .formation-card:hover, .service-card:hover, .domain-card:hover,
    .benefit-card:hover, .public-card:hover, .testimonial-card:hover,
    .tech-logo-item:hover, .partner-logo-link:hover, .trust-item:hover,
    .btn:hover, .btn-primary:hover, .btn-secondary:hover,
    .cta-header:hover, .footer-social a:hover, .footer-section a:hover,
    .c2:hover, .srv:hover { transform: none !important; }
}

/* =========================================================================
   ÉTAPE 3 — RACCORD VISUEL AVEC LA PAGE D'ACCUEIL
   Chargé après les styles de chaque page : ces règles habillent l'existant
   sans toucher au HTML. Trois gestes seulement — le papier chaud à la place
   du gris-bleu, l'angle asymétrique sur les cartes, et le trait doré.
   ========================================================================= */
:root {
    --mbr-paper: #FCF8F1;
    --mbr-paper-2: #F2EBDF;
    --mbr-paper-line: #DED3C2;
    --mbr-corner: 22px 6px 22px 22px;
    --mbr-corner-sm: 16px 5px 16px 16px;
}

/* ---------- 1. Le papier chaud remplace le gris-bleu froid ---------- */
body { background: var(--mbr-paper); }
.section-light { background: var(--mbr-paper) !important; }
.section-gray,
.section-soft { background: var(--mbr-paper-2) !important; }
.resource-link-section { background: linear-gradient(180deg, var(--mbr-paper), var(--mbr-paper-2)) !important; }

/* ---------- 2. L'angle asymétrique, signature de la marque ---------- */
.formation-card,
.benefit-card,
.public-card,
.programme-card,
.mbr-price-card,
.author-card,
.mbr-zone,
.card,
.faq-item,
.tool-item,
.resource-link-card,
.hero-image-wrapper { border-radius: var(--mbr-corner) !important; }

.formation-icon,
.benefit-icon,
.public-icon,
.icon-circle,
.module-number,
.mbr-price-card .icon-circle { border-radius: var(--mbr-corner-sm) !important; }

.hero-badge,
.floating-badge,
.section-label,
.label { border-radius: 999px; }

/* ---------- 3. Le trait doré sous le mot mis en avant du H1 ---------- */
.page-hero h1 .highlight,
.hero h1 .highlight {
    position: relative;
    display: inline-block;
}
.page-hero h1 .highlight::after,
.hero h1 .highlight::after {
    content: "";
    position: absolute;
    left: -1%;
    right: -1%;
    bottom: -.06em;
    height: .09em;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--mbr-gold-primary), var(--mbr-gold-light));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1) .35s;
}
html.mbr-anim .page-hero h1 .highlight.is-drawn::after,
html.mbr-anim .hero h1 .highlight.is-drawn::after { transform: scaleX(1); }
html:not(.mbr-anim) .page-hero h1 .highlight::after,
html:not(.mbr-anim) .hero h1 .highlight::after { transform: scaleX(1); }

/* ---------- 4. Révélations au défilement ---------- */
html.mbr-anim .mbr-rv { opacity: 0; transform: translateY(26px); }
html.mbr-anim .mbr-rv.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--mbr-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html.mbr-anim .mbr-rv { opacity: 1 !important; transform: none !important; }
    .page-hero h1 .highlight::after,
    .hero h1 .highlight::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ---------- Pied de page : équilibrage de la colonne Services ----------
   Elle compte 11 liens contre 6 à 8 pour les autres. Plutôt que de déplacer
   des liens, elle se répartit sur deux colonnes de texte sur grand écran. */
@media (min-width: 1000px) {
    .footer-grid { grid-template-columns: 1.35fr .95fr 1.55fr .95fr .8fr; }
    .footer-grid .footer-section:nth-of-type(2) {
        column-count: 2;
        column-gap: 20px;
    }
    .footer-grid .footer-section:nth-of-type(2) h4 { column-span: all; }
    .footer-grid .footer-section a { break-inside: avoid; }
}