/* =========================================================
   BA FORMATION — Feuille de style principale
   Direction : institutionnel, sobre, confiance.
   Bleu nuit profond + rouge sécurité en accent.
   ========================================================= */

:root {
    --navy:        #0c83a1;   /* turquoise dominant (blocs, fonds) */
    --navy-700:    #0a718b;
    --navy-500:    #0c83a1;
    --topbar:      #007ea7;   /* bandeau haut */
    --footer:      #0e192b;   /* bas de page */
    --blue-light:  #00afee;   /* bleu clair pour le dégradé */
    --ink:         #1a2730;
    --paper:       #f5f8f9;
    --paper-warm:  #e9f1f3;
    --white:       #ffffff;
    --red:         #ea8c2c;   /* orange accent (CTA, éléments forts) */
    --red-dark:    #d2741a;
    --amber:       #a6ce3a;   /* vert (badges, réussite) */
    --teal:        #0c83a1;
    --green:       #a6ce3a;
    --line:        #d4dde0;
    --muted:       #5a6b72;

    /* Dégradé bleu signature pour les blocs sombres */
    --grad-blue: linear-gradient(135deg, #0c83a1 0%, #00afee 100%);

    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'Source Sans 3', system-ui, sans-serif;

    --radius:   14px;
    --radius-sm: 8px;
    --shadow:   0 18px 40px -22px rgba(14,26,43,.45);
    --shadow-sm: 0 8px 20px -14px rgba(14,26,43,.4);
    --container: 1180px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; color: var(--navy); font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.015em; }
h3 { font-size: 1.3rem; }

a { color: var(--red); text-decoration: none; transition: color .2s; }
a:hover { color: var(--red-dark); }

img { max-width: 100%; height: auto; display: block; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-display); font-weight: 600; font-size: .98rem;
    padding: .85rem 1.6rem; border-radius: 50px; border: 2px solid transparent;
    cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s;
}
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 10px 24px -12px var(--red); }
.btn--primary:hover { background: var(--red-dark); color:#fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color:#fff; transform: translateY(-2px); }
.btn--dark { background: var(--navy); color:#fff; }
.btn--dark:hover { background: var(--navy-700); color:#fff; transform: translateY(-2px); }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar { background: var(--topbar); color: rgba(255,255,255,.9); font-size: .85rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 42px; }
.topbar__phone { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 600; font-family: var(--font-display); }
.topbar__phone:hover { color: var(--amber); }
.topbar__right { display: flex; align-items: center; gap: 1.1rem; }
.topbar__right a { color: rgba(255,255,255,.8); }
.topbar__right a:hover { color:#fff; }
.badge-qualiopi {
    background: rgba(240,168,24,.16); color: var(--amber);
    border: 1px solid rgba(240,168,24,.4);
    padding: .15rem .7rem; border-radius: 50px; font-weight: 600; letter-spacing: .02em;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header { background: var(--white); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 1.5rem; }

.header__logo { display: flex; align-items: center; gap: .7rem; color: var(--navy); }
.header__logo:hover { color: var(--navy); }
.header__qualiopi { display: inline-flex; align-items: center; margin-right: auto; flex-shrink: 0; transition: transform .2s, opacity .2s; }
.header__qualiopi:hover { transform: translateY(-1px); opacity: .9; }
.header__qualiopi img { display: block; width: auto; height: 29px; object-fit: contain; }
.header__logo-mark {
    width: 48px; height: 48px; display: grid; place-items: center;
    background: var(--navy); color:#fff; font-family: var(--font-display); font-weight: 800;
    border-radius: 12px; font-size: 1.25rem; letter-spacing: -.02em;
    box-shadow: inset 0 0 0 2px var(--red);
}
.header__logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.header__logo-text strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.header__logo-text em { font-style: normal; font-size: .72rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

.nav__list { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
.nav__list > li > a {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--font-display); font-weight: 600; font-size: .98rem;
    color: var(--navy); padding: .55rem .85rem; border-radius: 8px; transition: background .2s, color .2s;
}
.nav__list > li > a:hover, .nav__list > li > a.is-active { background: var(--paper-warm); color: var(--navy); }
.nav__cta { background: var(--red) !important; color:#fff !important; padding: .6rem 1.3rem !important; border-radius: 50px !important; }
.nav__cta:hover { background: var(--red-dark) !important; }

/* Menu déroulant */
.nav__has-children { position: relative; }
.nav__dropdown {
    list-style: none; margin: 0; padding: .5rem; position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s; z-index: 70;
}
.nav__dropdown::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.nav__has-children:hover > .nav__dropdown,
.nav__has-children:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown li { position: relative; }
.nav__dropdown a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .6rem .85rem; border-radius: 8px; color: var(--navy); font-weight: 500; font-size: .95rem;
}
.nav__dropdown a:hover { background: var(--paper-warm); color: var(--red); }
.nav__dropdown--sub { top: -.5rem; left: calc(100% + 6px); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; background: var(--grad-blue); color: #fff; overflow: hidden; }
.hero::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(900px 500px at 85% -10%, rgba(0,175,238,.35), transparent 60%),
      radial-gradient(700px 500px at 10% 110%, rgba(12,131,161,.6), transparent 55%);
}
.hero__grid {
    position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 3rem; align-items: center; padding: 4.5rem 0 5rem;
}
.hero__eyebrow {
    display: inline-flex; align-items:center; gap:.5rem; font-family: var(--font-display);
    font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 1.2rem;
}
.hero__eyebrow::before { content:''; width: 34px; height:2px; background: var(--amber); }
.hero h1 { color:#fff; margin: 0 0 1.2rem; }
.hero h1 .accent { color: var(--red); }
.hero__lead { font-size: 1.15rem; color: rgba(255,255,255,.82); max-width: 34ch; margin: 0 0 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__panel {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px; padding: 2rem; backdrop-filter: blur(6px);
}
.hero__panel h2 { color:#fff; font-size: 1.15rem; margin: 0 0 1.2rem; }
.hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.2rem; }
.stat__num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--amber); line-height: 1; }
.stat__label { font-size: .85rem; color: rgba(255,255,255,.72); margin-top: .5rem; display:block; }

/* =========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================= */
.section { padding: 4.5rem 0; }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--navy { background: var(--grad-blue); color:#fff; }
.section--navy h2, .section--navy h3 { color:#fff; }

.section__head { max-width: 760px; margin-bottom: 2.8rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.eyebrow {
    display:inline-block; font-family: var(--font-display); font-weight:600;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--red);
    margin-bottom: .8rem;
}
.section--navy .eyebrow { color: var(--amber); }
.section__intro { color: var(--muted); font-size: 1.1rem; margin-top: .8rem; }
.section--navy .section__intro { color: rgba(255,255,255,.78); }

/* ---------- Grille de cartes formations ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card__media {
    aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--navy-700), var(--navy));
    position: relative; display: grid; place-items: center; overflow:hidden;
}
.card__media img { width:100%; height:100%; object-fit: cover; }
.card__placeholder { color: rgba(255,255,255,.4); font-family: var(--font-display); font-size: .8rem; letter-spacing:.1em; text-transform: uppercase; }
.card__tag {
    position:absolute; top: .9rem; left: .9rem; z-index:2;
    background: var(--red); color:#fff; font-family: var(--font-display); font-weight:600;
    font-size:.72rem; letter-spacing:.05em; padding:.3rem .75rem; border-radius:50px;
}
.card__body { padding: 1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card__body h3 { margin: 0 0 .6rem; font-size: 1.15rem; }
.card__body p { margin: 0 0 1.2rem; color: var(--muted); font-size: .96rem; flex:1; }
.card__link { font-family: var(--font-display); font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.4rem; }
.card__link::after { content:'→'; transition: transform .2s; }
.card:hover .card__link::after { transform: translateX(4px); }

/* ---------- Bloc équipe / texte+image ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center; }
.split__media { border-radius: var(--radius); overflow:hidden; background: linear-gradient(135deg,var(--navy-700),var(--navy)); display:grid; place-items:center; box-shadow: var(--shadow); }
.split__media .card__placeholder { color: rgba(255,255,255,.45); min-height: 240px; }
.split__media img { width:100%; height:auto; object-fit:contain; display:block; }

/* ---------- Bandeau valeurs ---------- */
.values { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.value { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.8rem 1.6rem; }
.value__num { font-family: var(--font-display); font-size:.85rem; font-weight:700; color: var(--red); letter-spacing:.1em; }
.value h3 { margin:.6rem 0 .5rem; font-size:1.15rem; }
.value p { margin:0; color: var(--muted); font-size:.96rem; }

/* ---------- CTA bande ---------- */
.cta-band { background: var(--red); color:#fff; border-radius: var(--radius); padding: 2.8rem; text-align:center; position:relative; overflow:hidden; }
.cta-band::after { content:''; position:absolute; inset:0; background: radial-gradient(500px 300px at 110% -20%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; z-index:0; }
.cta-band > * { position:relative; z-index:1; }
.cta-band .hero__actions { position:relative; z-index:2; }
.cta-band .hero__actions .btn { position:relative; z-index:2; }
.cta-band h2 { color:#fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 52ch; margin:.8rem auto 1.8rem; }
.cta-band .btn--ghost { border-color:#fff; }

/* =========================================================
   PAGES INTERNES
   ========================================================= */
.page-hero { background: var(--grad-blue); color:#fff; padding: 3.5rem 0; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(700px 360px at 90% -30%, rgba(0,175,238,.35), transparent 60%); }
.page-hero__inner { position:relative; }
.breadcrumb { font-size:.85rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; font-family: var(--font-display); }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color:#fff; }
.page-hero h1 { color:#fff; margin:0; }
.page-hero p { color: rgba(255,255,255,.8); max-width: 60ch; margin: 1rem 0 0; }

.prose { max-width: 760px; }
.prose p { margin: 0 0 1.3rem; text-align: justify; hyphens: auto; }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .8rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.5rem; }
.prose li { margin-bottom: .5rem; text-align: justify; hyphens: auto; }

.placeholder-note {
    border: 2px dashed var(--line); border-radius: var(--radius);
    padding: 1.4rem 1.6rem; background: var(--paper-warm); color: var(--muted);
    font-size: .95rem; margin: 1.5rem 0;
}
.placeholder-note strong { color: var(--navy); font-family: var(--font-display); }

/* Fiche pratique (sidebar formation) */
.layout-formation { display:grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items:start; }
.factbox { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; position: sticky; top: 100px; box-shadow: var(--shadow-sm); }
.factbox h3 { font-size:1.05rem; margin:0 0 1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.factbox dl { margin:0; display:grid; gap:.9rem; }
.factbox dt { font-family: var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); }
.factbox dd { margin:0 0 .3rem; font-weight:500; }
.factbox .btn { width:100%; justify-content:center; margin-top:1.2rem; }
.factbox__mac-title { margin-top:1.6rem !important; color: var(--navy); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.form-field { margin-bottom: 1.2rem; }
.form-field label { display:block; font-family: var(--font-display); font-weight:600; font-size:.9rem; margin-bottom:.4rem; color: var(--navy); }
.form-field input, .form-field textarea, .form-field select {
    width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size:1rem; background:#fff; transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline:none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,35,42,.12);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-alert { padding:1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom:1.5rem; font-size:.95rem; }
.form-alert--ok { background: #e7f6ec; color:#1c6b3a; border:1px solid #b6e0c4; }
.form-alert--err { background: #fdecec; color: var(--red-dark); border:1px solid #f5c2c4; }
.contact-info { background: #084256; color:#fff; border-radius: var(--radius); padding: 2rem; position: sticky; top: 96px; }
.contact-info h3 { color:#fff; }
.contact-info ul { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.contact-info a { color: var(--amber); }
.map-wrap { margin-top: 3rem; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }
.map-wrap iframe { width:100%; height:380px; border:0; display:block; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--footer); color: rgba(255,255,255,.75); padding-top: 3.5rem; }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer__logo { display:flex; align-items:center; gap:.6rem; color:#fff; margin-bottom:1rem; font-family: var(--font-display); font-size:1.3rem; font-weight:800; }
.footer__logo .header__logo-mark { width:40px; height:40px; font-size:1.05rem; }
.footer__about { font-size:.95rem; line-height:1.6; margin:0 0 1.2rem; }
.footer__social { display:flex; gap:1rem; }
.footer__social a { color: rgba(255,255,255,.8); font-size:.9rem; }
.footer__social a:hover { color: var(--amber); }
.footer__title { color:#fff; font-size:1rem; margin:0 0 1rem; }
.footer__list { list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.55rem; }
.footer__list a { color: rgba(255,255,255,.75); font-size:.94rem; }
.footer__list a:hover { color: var(--amber); }
.footer__hours { font-size:.92rem; margin:0; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding: 1.3rem 0; }
.footer__bottom-inner { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; flex-wrap:wrap; }
.footer__bottom p { margin:0; }

/* Bouton retour haut */
.skip-top {
    position: fixed; right: 1.4rem; bottom: 1.4rem; width: 46px; height: 46px;
    background: var(--red); color:#fff; border-radius: 50%; display:grid; place-items:center;
    font-size:1.3rem; box-shadow: var(--shadow); opacity:0; pointer-events:none; transition: opacity .3s, transform .3s; z-index: 50;
}
.skip-top.is-visible { opacity:1; pointer-events:auto; }
.skip-top:hover { background: var(--red-dark); color:#fff; transform: translateY(-3px); }

/* =========================================================
   NAV MOBILE
   ========================================================= */
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { width:26px; height:3px; background: var(--navy); border-radius:2px; transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
    .hero__grid, .split, .contact-grid, .layout-formation { grid-template-columns: 1fr; }
    .layout-formation .factbox { position: static; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .nav-toggle { display:flex; }
    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(86%, 360px);
        background:#fff; box-shadow: -10px 0 40px -20px rgba(0,0,0,.5);
        padding: 5rem 1.5rem 2rem; transform: translateX(100%); transition: transform .35s var(--ease);
        overflow-y:auto; z-index: 65;
    }
    .nav.is-open { transform: translateX(0); }
    .nav__list { flex-direction:column; align-items:stretch; gap:.2rem; }
    .nav__list > li > a { padding:.8rem .5rem; }
    .nav__dropdown, .nav__dropdown--sub {
        position: static; opacity:1; visibility:visible; transform:none; box-shadow:none;
        border:none; padding:.2rem 0 .2rem 1rem; min-width:0; display:none;
        z-index: auto;
    }
    /* En mobile, on neutralise l'ouverture au survol / focus : seul le
       pliage piloté par JS (.is-expanded) doit afficher le sous-menu,
       sinon le focus du 1er tap fait surgir le dropdown et bloque la
       navigation vers la page de catégorie. */
    .nav__has-children:hover > .nav__dropdown,
    .nav__has-children:focus-within > .nav__dropdown { display:none; }
    .nav__has-children.is-expanded > .nav__dropdown { display:block; }
    /* Les sous-formations (niveau 3) ne s'affichent pas dans le tiroir
       mobile : un tap sur la catégorie ouvre directement sa page. On
       masque donc le chevron des catégories pour ne pas laisser croire
       à un déroulé supplémentaire. */
    .nav__dropdown .nav__dropdown--sub { display:none !important; }
    .nav__dropdown > li > a > svg { display:none; }
    .nav__cta { display:inline-flex; margin-top:.6rem; }
    .topbar__right { gap:.7rem; }
}

@media (max-width: 560px) {
    .hero__stats { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .badge-qualiopi { display:none; }
    .cta-band { padding: 2rem 1.4rem; }
    .header__qualiopi img { height: 24px; }
    .header__logo-img { max-height: 57px; }
}

/* Animations d'apparition.
   Le JS ajoute la classe .js sur <html> : tant qu'elle est absente
   (JS désactivé), le contenu reste pleinement visible. */
@media (prefers-reduced-motion: no-preference) {
    html.js .reveal { opacity:0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
    html.js .reveal.is-in { opacity:1; transform:none; }
}

/* =========================================================
   QUICKNAV — accès rapide aux formations (toutes pages)
   ========================================================= */
.quicknav { background: var(--paper-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.quicknav__title { font-family: var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin:0 0 1rem; }
.quicknav__grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(6, 1fr); gap:.8rem; }
.quicknav__item {
    position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem;
    background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm);
    padding:1.1rem .7rem; text-align:center; color: var(--navy);
    font-family: var(--font-display); font-weight:600; font-size:.85rem; line-height:1.25;
    transition: transform .2s var(--ease), box-shadow .2s, border-color .2s, background .2s;
}
.quicknav__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--red); color: var(--navy); }
.quicknav__item.is-current { border-color: var(--navy); background: var(--paper); }
.quicknav__icon { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background: var(--paper-warm); color: var(--navy-500); transition: background .2s, color .2s; }
.quicknav__item:hover .quicknav__icon { background: var(--navy); color:#fff; }
.quicknav__label { display:block; }

/* Mise en avant de l'incendie (référence n°1) */
.quicknav__item--featured { background: var(--footer); border-color: var(--footer); color:#fff; }
.quicknav__item--featured .quicknav__icon { background: rgba(234,140,44,.18); color: var(--red); }
.quicknav__item--featured:hover { background: #16243d; color:#fff; box-shadow: 0 14px 30px -16px rgba(234,140,44,.6); border-color: var(--red); }
.quicknav__item--featured:hover .quicknav__icon { background: var(--red); color:#fff; }
.quicknav__badge {
    position:absolute; top:-9px; right:-6px; background: var(--red); color:#fff;
    font-size:.62rem; font-weight:700; letter-spacing:.05em; padding:.15rem .5rem; border-radius:50px;
    box-shadow: 0 4px 10px -4px var(--red);
}

@media (max-width: 900px) { .quicknav__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .quicknav__grid { grid-template-columns: repeat(2, 1fr); } .quicknav__label { font-size:.8rem; } }

/* =========================================================
   PAGES DÉPARTEMENTALES (SEO local)
   ========================================================= */
.dept-villes { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 2rem; padding:0; list-style:none; }
.dept-villes li { background: var(--paper-warm); border:1px solid var(--line); border-radius:50px; padding:.35rem .9rem; font-size:.88rem; font-family: var(--font-display); font-weight:500; color: var(--navy); }
.dept-formations { display:grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap:1rem; margin-top:1.5rem; }
.dept-formation-link { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:.9rem 1.1rem; color: var(--navy); font-family: var(--font-display); font-weight:600; font-size:.95rem; transition: border-color .2s, transform .2s, color .2s; }
.dept-formation-link:hover { border-color: var(--red); transform: translateX(3px); color: var(--red); }

/* =========================================================
   IMAGES LOGO (header / topbar)
   ========================================================= */
.header__logo-img { display:block; width:auto; max-height:52px; }
.badge-qualiopi-img { display:block; width:auto; height:22px; object-fit:contain; }

/* =========================================================
   PAGES FORMATION — éléments enrichis
   ========================================================= */
.page-hero__head { display:flex; align-items:center; gap:1.4rem; }
.page-hero__icon { flex-shrink:0; background:#fff; border-radius:16px; padding:8px; box-shadow: var(--shadow-sm); }

/* Bannière de formation (image large sous le hero) */
.formation-banner { background: var(--paper); padding: 2rem 0 0; }
.formation-banner img { width:100%; border-radius: var(--radius); box-shadow: var(--shadow); display:block; }

/* Encart "Pour qui ?" */
.info-callout { display:flex; gap:1rem; align-items:flex-start; background: var(--paper-warm); border-left:4px solid var(--navy); border-radius: var(--radius-sm); padding:1.1rem 1.3rem; margin:1.8rem 0; }
.info-callout__label { flex-shrink:0; font-family: var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color: var(--navy); background:#fff; padding:.35rem .7rem; border-radius:50px; }
.info-callout p { margin:0; }

/* Listes à puces "check" */
.check-list { list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.7rem; }
.check-list li { position:relative; padding-left:2rem; }
.check-list li::before { content:''; position:absolute; left:0; top:.15rem; width:1.3rem; height:1.3rem; border-radius:50%; background: var(--red); }
.check-list li::after { content:''; position:absolute; left:.42rem; top:.42rem; width:.4rem; height:.65rem; border:solid #fff; border-width:0 2px 2px 0; transform: rotate(45deg); }

/* Bloc réglementation */
.reglementation { background:#fff; border:1px solid var(--line); border-left:4px solid var(--amber); border-radius: var(--radius-sm); padding:1.2rem 1.4rem; margin:1.8rem 0; }
.reglementation strong { font-family: var(--font-display); color: var(--navy); display:block; margin-bottom:.3rem; }
.reglementation p { margin:0; font-size:.95rem; color: var(--muted); }

/* Cartes de pôle (pages secourisme / travail en hauteur) */
.pole-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:1.5rem; margin-top:1.8rem; }
.pole-card { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.8rem; color: var(--navy); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.pole-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--red); color: var(--navy); }
.pole-card img { margin-bottom:.4rem; }
.pole-card h3 { margin:0; font-size:1.15rem; }
.pole-card p { margin:0; color: var(--muted); font-size:.96rem; flex:1; }

/* Logo image dans header — ajuste la taille du logo réel */
.header__logo-img { max-height:52px; }

/* Photo intégrée dans le corps d'une page formation — même cadre que la photo d'équipe */
.content-photo { margin:1.8rem 0; }
.content-photo__frame { aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.content-photo__frame img { width:100%; height:100%; object-fit:cover; display:block; }
.content-photo figcaption { margin-top:.6rem; font-size:.85rem; color: var(--muted); font-style:italic; }

@media (max-width:560px){
  .page-hero__head { flex-direction:column; align-items:flex-start; gap:1rem; }
  .info-callout { flex-direction:column; gap:.6rem; }
}

/* Logo Qualiopi (fond blanc) lisible dans le topbar foncé */
.badge-qualiopi-img { background:#fff; padding:2px 5px; border-radius:5px; height:22px; }

/* =========================================================
   FAQ — accordéon
   ========================================================= */
.faq-layout { max-width: 820px; margin-inline:auto; }
.faq-group { margin-bottom: 2.5rem; }
.faq-group--prose { margin-top: 2.5rem; margin-bottom: 0; }
.faq-group__title { font-size: 1.4rem; padding-bottom:.7rem; border-bottom:2px solid var(--red); margin-bottom:1rem; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); margin-bottom:.7rem; overflow:hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: var(--red); box-shadow: var(--shadow-sm); }
.faq-item summary {
    cursor:pointer; padding:1.1rem 1.4rem; font-family: var(--font-display); font-weight:600;
    font-size:1.02rem; color: var(--navy); list-style:none; display:flex; justify-content:space-between;
    align-items:center; gap:1rem; transition: color .2s;
}
.faq-item summary:hover { color: var(--red); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; flex-shrink:0; font-size:1.6rem; font-weight:400; color: var(--red); transition: transform .25s var(--ease); line-height:1; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding:0 1.4rem 1.2rem; }
.faq-item__answer p { margin:0 0 .8rem; color: var(--ink); }
.faq-item__answer p:last-child { margin-bottom:0; }
.faq-item__answer ul { margin:.2rem 0 0; padding-left:1.2rem; color: var(--ink); }
.faq-item__answer ul li { margin-bottom:.4rem; line-height:1.5; }
.faq-item__answer ul li:last-child { margin-bottom:0; }
.faq-table { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.2rem 0 .6rem; }
.faq-table table { width:100%; border-collapse:collapse; font-size:.94rem; }
.faq-table th, .faq-table td { padding:.6rem .8rem; text-align:left; border:1px solid var(--line); vertical-align:top; }
.faq-table thead th { background: var(--paper-warm); color: var(--navy); font-family: var(--font-display); font-weight:600; }
.faq-table tbody tr:nth-child(even) { background: var(--paper); }

/* =========================================================
   AVIS CLIENTS
   ========================================================= */
.reviews { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:1.5rem; }
.reviews__score { display:inline-flex; align-items:baseline; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1rem; }
.reviews__score-num { font-family: var(--font-display); font-weight:800; font-size:2.4rem; line-height:1; color:#fff; }
.reviews__score-stars { color: var(--amber); font-size:1.3rem; letter-spacing:.08em; }
.reviews__score-meta { color: rgba(255,255,255,.82); font-size:.95rem; }
.review { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding:1.6rem; margin:0; display:flex; flex-direction:column; gap:.8rem; }
.review__stars { color: var(--amber); font-size:1.1rem; letter-spacing:.1em; }
.review blockquote { margin:0; color: rgba(255,255,255,.9); font-size:.97rem; line-height:1.6; flex:1; }
.review figcaption { font-family: var(--font-display); font-weight:600; color:#fff; font-size:.92rem; }
.review figcaption::before { content:'— '; color: var(--amber); }
.reviews__action { display:flex; flex-direction:column; align-items:center; gap:.9rem; margin-top:2.2rem; }
.reviews__all { color: rgba(255,255,255,.75); font-size:.9rem; text-decoration:underline; text-underline-offset:3px; transition: color .2s; }
.reviews__all:hover { color:#fff; }

/* Deux numéros dans le topbar */
.topbar__phones { display:flex; align-items:center; gap:1.2rem; }
.topbar__phones .topbar__phone + .topbar__phone { padding-left:1.2rem; border-left:1px solid rgba(255,255,255,.2); }
@media (max-width:560px){ .topbar__phones .topbar__phone + .topbar__phone { display:none; } }

/* =========================================================
   PAGE CONTACT — formulaire enrichi
   ========================================================= */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:540px){ .form-row { grid-template-columns:1fr; gap:0; } }

.formations-choice { border:1px solid var(--line); border-radius: var(--radius-sm); padding:1.1rem 1.3rem; margin:0 0 1.2rem; }
.formations-choice legend { font-family: var(--font-display); font-weight:600; font-size:.9rem; color: var(--navy); padding:0 .4rem; }
.formations-choice .hint { font-weight:400; color: var(--muted); font-size:.82rem; }
.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; margin-top:.8rem; }
@media (max-width:540px){ .checkbox-grid { grid-template-columns:1fr; } }
.checkbox-item { display:flex; align-items:flex-start; gap:.5rem; font-size:.93rem; cursor:pointer; line-height:1.35; }
.checkbox-item input { margin-top:.2rem; width:17px; height:17px; accent-color: var(--red); flex-shrink:0; cursor:pointer; }
.checkbox-item:hover span { color: var(--navy); }

.consent { display:flex; align-items:flex-start; gap:.6rem; margin:0 0 1.2rem; font-size:.92rem; color: var(--muted); cursor:pointer; }
.consent input { margin-top:.15rem; width:18px; height:18px; accent-color: var(--red); flex-shrink:0; cursor:pointer; }

.contact-legal { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.contact-legal p { font-size:.85rem; color: var(--muted); line-height:1.55; margin:0 0 1rem; }

.contact-info__note { font-size:1rem; font-weight:700; line-height:1.5; color:#fff; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.2); }
.checkbox-item--contact { font-weight:700; color:#ff6000; margin-bottom:.7rem; padding-bottom:.7rem; border-bottom:1px dashed var(--line); }
.checkbox-item--contact span { color:#ff6000; }
.checkbox-item--contact:hover span { color:#ff6000; }
.checkbox-item--contact input { accent-color:#ff6000; }

/* Retour de vérification TVA */
.tva-result { font-size:.82rem; margin-top:.4rem; min-height:1.1em; font-weight:600; }
.tva-result--checking { color: var(--muted); }
.tva-result--ok  { color:#2e7d32; }
.tva-result--err { color: var(--red-dark); }

/* =========================================================
   MENU FLOTTANT LATÉRAL (formations du même pôle)
   ========================================================= */
.float-menu {
    position: fixed; top: 50%; right: 0; transform: translateY(-50%);
    z-index: 40; display: flex; align-items: stretch;
    font-family: var(--font-display);
}
/* Languette verticale toujours visible */
.float-menu__toggle {
    background: var(--red); color:#fff; border:none; cursor:pointer;
    writing-mode: vertical-rl; text-orientation: mixed;
    padding: 1rem .55rem; border-radius: 12px 0 0 12px;
    display:flex; align-items:center; gap:.6rem; font-family: var(--font-display);
    font-weight:600; font-size:.9rem; letter-spacing:.02em;
    box-shadow: -6px 0 20px -10px rgba(0,0,0,.4); transition: background .2s;
}
.float-menu__toggle:hover { background: var(--red-dark); }
.float-menu__chevron { transform: rotate(90deg); transition: transform .3s var(--ease); }
.float-menu.is-open .float-menu__chevron { transform: rotate(-90deg); }

/* Panneau de liens */
.float-menu__list {
    width: 0; overflow: hidden; background:#fff;
    border-radius: 0 0 0 12px; box-shadow: -10px 0 30px -14px rgba(0,0,0,.35);
    transition: width .32s var(--ease), padding .32s var(--ease);
    max-height: 80vh; overflow-y: auto; padding: 0;
}
.float-menu.is-open .float-menu__list { width: 260px; padding: 1.2rem 1.1rem; border:1px solid var(--line); border-right:none; }
.float-menu__title {
    margin:0 0 .8rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
    color: var(--muted); font-weight:700; white-space:nowrap;
}
.float-menu__list ul { list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.float-menu__list a {
    display:block; padding:.6rem .8rem; border-radius:8px; color: var(--navy);
    font-size:.92rem; font-weight:500; line-height:1.3; white-space:normal; transition: background .2s, color .2s;
}
.float-menu__list a:hover { background: var(--paper-warm); color: var(--red); }
.float-menu__list a.is-active { background: var(--navy); color:#fff; }

/* Mobile : barre repliée en bas à droite, panneau en surimpression */
@media (max-width: 820px) {
    .float-menu { top:auto; bottom: 80px; transform:none; }
    .float-menu__toggle { writing-mode: horizontal-tb; border-radius:10px 0 0 10px; padding:.7rem 1rem; }
    .float-menu__chevron { transform: rotate(-90deg); }
    .float-menu.is-open .float-menu__chevron { transform: rotate(90deg); }
    .float-menu__list { position:fixed; bottom: 130px; right:0; }
    .float-menu.is-open .float-menu__list { width: min(80vw, 280px); }
}
@media print { .float-menu { display:none; } }

/* ===== Bandeau de consentement aux cookies ===== */
.cookie-banner {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 420px; }
.cookie-banner__text strong { display: block; color: var(--navy); font-family: var(--font-display); margin-bottom: .25rem; }
.cookie-banner__text p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink, #2a2f36); }
.cookie-banner__actions { display: flex; gap: .7rem; flex-shrink: 0; }
.btn--ghost-dark { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost-dark:hover { background: #f1f5f6; color: var(--navy); transform: translateY(-2px); }
@media (max-width: 640px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
    .cookie-banner__actions { justify-content: stretch; }
    .cookie-banner__actions .btn { flex: 1; text-align: center; }
}

/* Bannières responsives : <picture> hérite du style img, hauteur bornée sur mobile */
.formation-banner picture { display: block; }
.formation-banner picture img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
@media (max-width: 640px) {
    .formation-banner img,
    .formation-banner picture img {
        max-height: 75vh; width: auto; max-width: 100%; height: auto;
        object-fit: contain; margin-inline: auto;
    }
}

/* Mention "(facultatif)" discrète à côté d'un label */
.optional { font-weight: 400; font-size: .85em; color: var(--muted, #6b7680); }

/* Image illustrative dans le corps d'une page (ex: unité mobile incendie) */
.content-figure { margin: 1.6rem 0; }
.content-figure picture, .content-figure img { display: block; }
.content-figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Image pleine largeur (sort de la colonne .prose pour atteindre la largeur du container,
   identique à la bannière du haut .formation-banner) */
.content-figure--full {
    width: min(100vw - 2.5rem, var(--container, 1180px));
    margin-left: 50%;
    transform: translateX(-50%);
}
.content-figure--full img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
@media (max-width: 640px) {
    .content-figure img { max-height: 75vh; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
    .content-figure--full { width: 100%; margin-left: 0; transform: none; }
}