/* ═══════════════════════════════════════════════════════════
   FORMATIONS — hub /formations/ et fiches /formations/<slug>/
   Langage visuel du site : angles nets, filets, croix corner-plus.
   Préfixe .fo-
   ═══════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────── */

.fo-hero {
    padding: calc(var(--space-2xl) * 0.72) 0 var(--space-lg);
    background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%);
    position: relative;
}

.fo-hero .section-title { margin-bottom: 1.2rem; }

/* Hero du hub : texte + photo */
.fo-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .fo-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .fo-hero-media { order: -1; }
}

.fo-hero-media { position: relative; }

.fo-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(0.92) contrast(1.04);
}

/* Voile midnight pour que la photo reste dans la palette */
.fo-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(13, 27, 42, 0.16) 0%, rgba(13, 27, 42, 0.52) 100%);
    pointer-events: none;
}

.fo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.2rem;
}

/* Réassurances du hero : compactes, à icônes */
.fo-assur {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.2rem;
    list-style: none;
    margin: 2.6rem 0 0;
    padding: 2rem 0 0;
    border-top: 1px solid rgba(124, 152, 179, 0.15);
}

.fo-assur li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: var(--light-blue);
}

.fo-assur svg { width: 17px; height: 17px; stroke: var(--golden); flex-shrink: 0; opacity: 0.9; }

/* ── FORMULAIRE « RECEVOIR LES PROGRAMMES » ───────────── */

.fo-hero-form {
    position: relative;
    padding: 2.4rem 2.2rem;
    background: rgba(13, 27, 42, 0.7);
    border: 1px solid rgba(249, 220, 92, 0.22);
}

.fo-hero-form h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--off-white);
    margin-bottom: 0.7rem;
}

.fo-hero-form > p { color: var(--soft-blue); font-size: 0.93rem; line-height: 1.6; margin-bottom: 1.6rem; }

.fo-hero-form input[type="email"] {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: rgba(13, 27, 42, 0.75);
    border: 1px solid rgba(124, 152, 179, 0.25);
    border-radius: 0;
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
    transition: border-color 0.3s;
}

.fo-hero-form input[type="email"]:focus { outline: none; border-color: var(--golden); }
.fo-hero-form input[type="email"]::placeholder { color: rgba(124, 152, 179, 0.65); }
.fo-hero-form .btn-primary { width: 100%; justify-content: center; }
.fo-hero-form .btn-primary:disabled { opacity: 0.6; cursor: default; }

.fo-form-note { margin: 0.9rem 0 0; font-size: 0.76rem; color: rgba(124, 152, 179, 0.8); line-height: 1.5; }
.fo-form-done { margin: 0; color: var(--golden); font-size: 0.95rem; line-height: 1.6; }

/* Honeypot anti-spam */
.fo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ── FILTRES DE NIVEAU ────────────────────────────────── */
/* Mêmes pastilles que les filtres de /projets/, dont le CSS vit dans projets.css */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-md);
}

.filter-btn {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(124, 152, 179, 0.15);
    background: transparent;
    color: var(--soft-blue);
    transition: all 0.3s;
}

.filter-btn:hover { border-color: var(--golden); color: var(--golden); }
.filter-btn.active { background: var(--golden); color: var(--midnight); border-color: var(--golden); }

.fo-catalogue .filters { margin-top: 2.4rem; }

/* ── CARTES ILLUSTRÉES ────────────────────────────────── */

.fo-grid-v2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.fo-card-v2 { padding: 0; overflow: hidden; }

.fo-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }

.fo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s;
}

.fo-card-v2:hover .fo-card-img img { transform: scale(1.04); }

.fo-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.1) 40%, rgba(13, 27, 42, 0.85) 100%);
}

.fo-card-level {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    padding: 0.35rem 0.8rem;
    background: rgba(13, 27, 42, 0.88);
    border: 1px solid rgba(249, 220, 92, 0.4);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--golden);
}

.fo-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.8rem 1.8rem 2rem; }
.fo-card-body h3 { font-size: 1.28rem; }
.fo-card-body .fo-card-desc { flex-grow: 1; font-size: 0.94rem; }

/* ── BLOC SUR MESURE ──────────────────────────────────── */

.fo-sur-mesure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    margin-top: 1.5rem;
    padding: 2.4rem 2.2rem;
    background: rgba(249, 220, 92, 0.05);
    border: 1px solid rgba(249, 220, 92, 0.18);
}

.fo-sur-mesure h3 { font-size: 1.25rem; font-weight: 800; color: var(--off-white); margin-bottom: 0.6rem; }
.fo-sur-mesure p { color: var(--soft-blue); line-height: 1.65; margin: 0; max-width: 70ch; }
.fo-sur-mesure .btn-primary { flex-shrink: 0; }

@media (max-width: 820px) {
    .fo-sur-mesure { flex-direction: column; align-items: flex-start; }
}

/* ── LEAD MAGNET (mini formation gratuite) ────────────── */

/* Reprend le fond du catalogue puis descend vers midnight, d'où repart
   le dégradé de la section d'approche. Aucune arête sur tout l'enchaînement. */
.fo-kit { background: linear-gradient(180deg, var(--midnight-light) 0%, var(--midnight) 100%); }

.fo-kit-block {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem 2.6rem;
    background: rgba(17, 34, 64, 0.5);
    border: 1px solid rgba(124, 152, 179, 0.12);
}

.fo-kit-text { max-width: 68ch; }
.fo-kit-text h2 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--off-white); margin-bottom: 0.9rem; }
.fo-kit-text > p { color: var(--soft-blue); line-height: 1.7; margin-bottom: 1.4rem; }
.fo-kit-block .btn-primary { flex-shrink: 0; }

@media (max-width: 900px) {
    .fo-kit-block { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 2.2rem 1.8rem; }
}

/* ── DÉROULÉ EN ÉTAPES ────────────────────────────────── */

.fo-steps-section { background: var(--midnight); }

/* 5 étapes : une frise sur grand écran, jamais d'orpheline en bas */
.fo-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 3rem;
    border-left: 1px solid rgba(124, 152, 179, 0.1);
    border-top: 1px solid rgba(124, 152, 179, 0.1);
}

@media (max-width: 1180px) { .fo-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .fo-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .fo-steps { grid-template-columns: 1fr; } }

.fo-step {
    position: relative;
    padding: 2.2rem 1.8rem;
    border-right: 1px solid rgba(124, 152, 179, 0.1);
    border-bottom: 1px solid rgba(124, 152, 179, 0.1);
    background: rgba(17, 34, 64, 0.35);
    transition: background 0.4s;
}

.fo-step:hover { background: rgba(17, 34, 64, 0.7); }

.fo-step-num {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--golden);
    opacity: 0.8;
    margin-bottom: 1rem;
}

.fo-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--off-white);
    line-height: 1.3;
    margin-bottom: 0.6rem;
}

.fo-step p { color: var(--soft-blue); font-size: 0.92rem; line-height: 1.65; margin: 0; }

/* Les témoignages tombent entre la section d'approche et la scène du fondateur :
   ils reprennent le midnight-light du dessus et descendent vers le midnight de la scène. */
.fo-testimonials { background: linear-gradient(180deg, var(--midnight-light) 0%, var(--midnight) 100%); }

/* 4 témoignages : 2 colonnes larges plutôt que la mosaïque à 4 de la home */
.fo-testimonials .testimonials-grid { grid-template-columns: 1fr 1fr; }

@media (max-width: 820px) {
    .fo-testimonials .testimonials-grid { grid-template-columns: 1fr; }
}

/* Photo portrait dans le hero d'une fiche : normalisée, sujet gardé en haut */
.fo-hero-media-portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }

/* ── SOUS-HEADER STICKY (fiche) ───────────────────────── */

/* fixed et non sticky : en sticky, la barre réservait sa hauteur dans le flux
   et ouvrait une bande vide entre le hero et la section suivante. */
.fo-subnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(13, 27, 42, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(124, 152, 179, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
}

.fo-subnav.visible { opacity: 1; visibility: visible; transform: translateY(0); }

.fo-subnav .container {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.fo-subnav-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--off-white);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30ch;
}

.fo-subnav-links { display: flex; gap: 1.6rem; margin-left: auto; }

.fo-subnav-links a {
    font-size: 0.86rem;
    color: var(--soft-blue);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.fo-subnav-links a:hover { color: var(--golden); }
.fo-subnav-links a.active { color: var(--golden); border-bottom-color: var(--golden); }

.fo-subnav-cta { padding: 0.5rem 1.2rem; font-size: 0.82rem; flex-shrink: 0; }

@media (max-width: 1080px) { .fo-subnav-links { display: none; } }
@media (max-width: 640px)  { .fo-subnav-title { max-width: 18ch; } }

/* ── CTA EN COURS DE PAGE ─────────────────────────────── */

.fo-cta-inline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3.4rem;
    padding: 2rem 1.9rem;
    background: rgba(249, 220, 92, 0.05);
    border: 1px solid rgba(249, 220, 92, 0.2);
}

.fo-cta-inline h3 { font-size: 1.15rem; font-weight: 800; color: var(--off-white); margin-bottom: 0.5rem; }
.fo-cta-inline p { color: var(--soft-blue); font-size: 0.93rem; line-height: 1.6; margin: 0; }
.fo-cta-inline .btn-primary { flex-shrink: 0; }

@media (max-width: 760px) { .fo-cta-inline { flex-direction: column; align-items: flex-start; } }

/* Durée d'un module dans le programme */
/* Séquences du programme : liste dépliable, sur le composant de la FAQ */
.fo-seq { display: flex; flex-direction: column; }
.fo-seq-item { border-bottom: 1px solid rgba(124, 152, 179, 0.12); }

.fo-seq-q {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 1.15rem 0;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--off-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: color 0.3s;
}

.fo-seq-q:hover { color: var(--golden); }

.fo-seq-q svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--soft-blue);
    transition: transform 0.3s, stroke 0.3s;
}

.fo-seq-item.open .fo-seq-q svg { transform: rotate(45deg); stroke: var(--golden); }

.fo-seq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.fo-seq-a-inner { padding-bottom: 1.3rem; font-size: 0.89rem; line-height: 1.7; color: var(--soft-blue); }

/* ── RENVOI VERS LA PAGE QUALITÉ ── */

.fo-qualite { background: var(--midnight); }

.fo-qualite-block {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.2rem 2rem;
    background: rgba(17, 34, 64, 0.4);
    border: 1px solid rgba(124, 152, 179, 0.12);
}

.fo-qualite-block h2 { font-size: 1.25rem; font-weight: 800; color: var(--off-white); margin-bottom: 0.5rem; }
.fo-qualite-block p { color: var(--soft-blue); line-height: 1.65; margin: 0; max-width: 68ch; font-size: 0.92rem; }
.fo-qualite-block .btn-secondary { flex-shrink: 0; }

@media (max-width: 820px) { .fo-qualite-block { flex-direction: column; align-items: flex-start; } }

/* Le fil d'Ariane des fiches reprend celui des articles, hors du flux de la barre fixe */
.article-breadcrumb { position: static; }
.article-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.6rem; padding: 0; }
.article-breadcrumb li { font-size: 0.72rem; color: var(--soft-blue); display: flex; align-items: center; gap: 0.4rem; }
.article-breadcrumb li:not(:last-child)::after { content: '›'; color: rgba(124, 152, 179, 0.4); }
.article-breadcrumb a { color: var(--soft-blue); text-decoration: none; transition: color 0.3s; }
.article-breadcrumb a:hover { color: var(--golden); }

/* Retour au catalogue depuis l'encadré pratique */
.fo-aside-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.86rem;
    color: var(--soft-blue);
    transition: color 0.3s, gap 0.3s;
}

.fo-aside-back:hover { color: var(--golden); gap: 0.8rem; }
.fo-aside-back svg { width: 15px; height: 15px; }

/* ── ARTICLES LIÉS (maillage interne) ─────────────────── */

.fo-related { background: var(--midnight-light); }

.fo-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.fo-rel-card {
    display: flex;
    flex-direction: column;
    background: rgba(13, 27, 42, 0.55);
    border: 1px solid rgba(124, 152, 179, 0.1);
    transition: border-color 0.4s, transform 0.4s;
}

.fo-rel-card:hover { border-color: rgba(249, 220, 92, 0.28); transform: translateY(-3px); }

.fo-rel-img { aspect-ratio: 16 / 9; overflow: hidden; }
.fo-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.fo-rel-card:hover .fo-rel-img img { transform: scale(1.04); }

.fo-rel-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.5rem 1.5rem 1.7rem; }

.fo-rel-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--off-white);
    margin-bottom: 1.1rem;
    flex-grow: 1;
}

/* ── PROFILS VISÉS (fiche) ────────────────────────────── */

.fo-profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    border-left: 1px solid rgba(124, 152, 179, 0.1);
    border-top: 1px solid rgba(124, 152, 179, 0.1);
}

.fo-profile {
    padding: 1.6rem 1.4rem;
    border-right: 1px solid rgba(124, 152, 179, 0.1);
    border-bottom: 1px solid rgba(124, 152, 179, 0.1);
    background: rgba(13, 27, 42, 0.4);
}

.fo-profile h3 { margin: 0 0 0.5rem; font-size: 0.98rem; color: var(--off-white); }
.fo-profile p { margin: 0; font-size: 0.9rem; line-height: 1.6; }

/* Témoignage unique dans le flux d'une fiche */
.fo-fiche-testi { grid-template-columns: 1fr; margin-top: 0; border: none; }

.fo-hero-sub {
    color: var(--light-blue);
    font-size: 1.12rem;
    line-height: 1.65;
    max-width: 62ch;
}

/* Bandeau de statut : organisme déclaré */
.fo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 2.2rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid rgba(124, 152, 179, 0.18);
    background: rgba(249, 220, 92, 0.04);
    color: var(--soft-blue);
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 70ch;
}

.fo-hero-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--golden);
}

.fo-hero-badge strong { color: var(--light-blue); font-weight: 600; }

/* ── GRILLE DU HUB ────────────────────────────────────── */

.fo-catalogue { background: var(--midnight-light); padding-top: var(--space-lg); }

.fo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.fo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.4rem 2.2rem 2.2rem;
    background: rgba(13, 27, 42, 0.55);
    border: 1px solid rgba(124, 152, 179, 0.1);
    transition: border-color 0.4s, transform 0.4s;
}

.fo-card:hover { border-color: rgba(249, 220, 92, 0.28); transform: translateY(-3px); }

/* La carte principale occupe deux colonnes quand la place le permet */
.fo-card-wide { grid-column: span 2; }

@media (max-width: 900px) { .fo-card-wide { grid-column: span 1; } }

.fo-card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 1rem;
}

.fo-card h3 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--off-white);
    margin-bottom: 0.9rem;
}

.fo-card-desc {
    color: var(--soft-blue);
    line-height: 1.65;
    margin-bottom: 1.6rem;
}

/* Ce que les participants repartent avec : remplit la carte large et sert la décision */
.fo-card-list {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    flex-grow: 1;
}

.fo-card-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    color: var(--light-blue);
    font-size: 0.93rem;
    line-height: 1.6;
}

.fo-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--golden);
    opacity: 0.7;
}

/* Métadonnées : durée, modalité, public */
.fo-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.8rem;
}

.fo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(124, 152, 179, 0.16);
    border-radius: 100px;
    font-size: 0.78rem;
    color: var(--light-blue);
}

.fo-chip svg { width: 13px; height: 13px; stroke: var(--soft-blue); flex-shrink: 0; }

.fo-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--golden);
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap 0.3s;
}

.fo-card-link:hover { gap: 0.85rem; }
.fo-card-link svg { width: 16px; height: 16px; }

/* Carte « sur mesure » : traitement distinct, fond doré discret */
.fo-card-alt { background: rgba(249, 220, 92, 0.05); border-color: rgba(249, 220, 92, 0.18); }

/* ── FICHE FORMATION ──────────────────────────────────── */

.fo-fiche { background: var(--midnight-light); padding-top: var(--space-md); }

/* Sommaire à gauche, texte au centre, informations pratiques à droite.
   Même pattern que les articles du blog pour la colonne de gauche. */
.fo-layout {
    display: grid;
    grid-template-columns: 190px 1fr 320px;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 1240px) {
    .fo-layout { grid-template-columns: 1fr 300px; gap: 2.5rem; }
    .fo-toc { display: none; }
}

@media (max-width: 980px) {
    .fo-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

.fo-toc { position: sticky; top: 110px; align-self: start; }


/* Les informations pratiques suivent la lecture. */
.fo-aside { position: sticky; top: 110px; }
@media (max-width: 980px) { .fo-aside { position: static; } }

.fo-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 0.85rem;
}

.fo-toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; }

.fo-toc-list a {
    display: block;
    padding: 0.28rem 0 0.28rem 0.8rem;
    border-left: 2px solid rgba(124, 152, 179, 0.14);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--soft-blue);
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s;
}

.fo-toc-list a:hover,
.fo-toc-list a.active { color: var(--golden); border-color: var(--golden); }

/* ── POUR QUI : les profils, juste sous le hero ── */

.fo-pour-qui { background: linear-gradient(180deg, var(--midnight-light) 0%, var(--midnight) 100%); }

.fo-pour-qui .section-title {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2.4rem;
}

.fo-pour-qui .fo-profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid rgba(124, 152, 179, 0.14);
    border-left: 1px solid rgba(124, 152, 179, 0.14);
}

.fo-pour-qui .fo-profile {
    padding: 1.7rem 1.6rem;
    border-right: 1px solid rgba(124, 152, 179, 0.14);
    border-bottom: 1px solid rgba(124, 152, 179, 0.14);
    background: rgba(17, 34, 64, 0.3);
}

.fo-block { margin-bottom: 3.4rem; }

.fo-block h2 {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--off-white);
    margin-bottom: 1.3rem;
}

.fo-block h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--light-blue);
    margin: 2rem 0 0.7rem;
}

.fo-block p { color: var(--soft-blue); line-height: 1.75; margin-bottom: 1rem; }
.fo-block p:last-child { margin-bottom: 0; }

.fo-block ul { list-style: none; margin: 0 0 1rem; padding: 0; }

.fo-block ul li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--soft-blue);
    line-height: 1.7;
    margin-bottom: 0.7rem;
}

.fo-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: var(--golden);
    opacity: 0.55;
}

/* Objectifs : mis en avant, ce sont eux que l'auditeur lit */
.fo-objectifs {
    position: relative;
    padding: 2.2rem 2rem;
    border: 1px solid rgba(249, 220, 92, 0.2);
    background: rgba(249, 220, 92, 0.04);
}

.fo-objectifs ul li::before { opacity: 1; }

/* Programme séquencé : numérotation en filet */
.fo-seq { counter-reset: seq; }

.fo-seq-item {
    position: relative;
    counter-increment: seq;
    padding: 1.5rem 0 1.5rem 3.6rem;
    border-top: 1px solid rgba(124, 152, 179, 0.1);
}

.fo-seq-item:last-child { border-bottom: 1px solid rgba(124, 152, 179, 0.1); }

.fo-seq-item::before {
    content: counter(seq, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--golden);
    opacity: 0.75;
    letter-spacing: 0.04em;
}

.fo-seq-item h3 { margin: 0 0 0.45rem; color: var(--off-white); font-size: 1.05rem; }
.fo-seq-item p { margin: 0; font-size: 0.95rem; }

/* ── ENCADRÉ PRATIQUE (colonne de droite) ─────────────── */

/* Le bloc mesurait 1 033 px et dépassait le bas de l'écran une fois collé :
   les boutons devenaient inatteignables. Interlignes resserrés, et garde-fou
   par défilement interne si le contenu dépasse encore la hauteur disponible. */
.fo-aside {
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 152, 179, 0.3) transparent;
    padding: 1.7rem 1.6rem;
    background: rgba(13, 27, 42, 0.6);
    border: 1px solid rgba(124, 152, 179, 0.12);
}

.fo-aside::-webkit-scrollbar { width: 6px; }
.fo-aside::-webkit-scrollbar-thumb { background: rgba(124, 152, 179, 0.3); border-radius: 3px; }

@media (max-width: 980px) {
    .fo-aside { position: static; max-height: none; overflow: visible; }
}

.fo-aside h2 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 1.1rem;
}

.fo-aside dl { margin: 0; }

.fo-aside dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soft-blue);
    opacity: 0.75;
    margin-bottom: 0.2rem;
}

.fo-aside dd {
    margin: 0 0 0.95rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(124, 152, 179, 0.08);
    color: var(--off-white);
    font-size: 0.94rem;
    line-height: 1.5;
}

.fo-aside dd:last-of-type { border-bottom: none; margin-bottom: 1.3rem; }
.fo-aside dd small { display: block; color: var(--soft-blue); font-size: 0.83rem; margin-top: 0.25rem; }
.fo-aside .btn-primary { width: 100%; justify-content: center; }

/* ── BLOC INFOS TRANSVERSES (partial formation-infos) ─── */

.fo-infos { background: var(--midnight); padding: var(--space-lg) 0; }

.fo-infos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
}

.fo-info-card {
    position: relative;
    padding: 2.2rem 1.9rem;
    border: 1px solid rgba(124, 152, 179, 0.1);
    background: rgba(17, 34, 64, 0.4);
}

.fo-info-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 0.9rem;
}

.fo-info-card p { color: var(--soft-blue); line-height: 1.7; font-size: 0.95rem; margin-bottom: 0.9rem; }
.fo-info-card a { color: var(--golden); text-decoration: underline; text-underline-offset: 3px; }

.fo-info-meta {
    font-size: 0.83rem !important;
    color: rgba(124, 152, 179, 0.75) !important;
    margin-bottom: 0 !important;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(124, 152, 179, 0.08);
}

/* ── PIED DE FICHE : date de mise à jour ──────────────── */

.fo-updated {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(124, 152, 179, 0.1);
    font-size: 0.83rem;
    color: rgba(124, 152, 179, 0.7);
}

/* ── RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 768px) {
    .fo-hero { padding: calc(var(--space-xl) * 0.9) 0 var(--space-md); }
    .fo-grid { grid-template-columns: 1fr; }
    .fo-card { padding: 2rem 1.6rem; }
    .fo-block h2 { font-size: 1.45rem; }
    .fo-seq-item { padding-left: 3rem; }
}

/* Drapeau « Nouveau » sur une carte du catalogue */
.fo-card-flag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    padding: 0.35rem 0.8rem;
    background: var(--golden);
    color: var(--midnight);
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Prix d'appel sur une carte du catalogue */
.fo-card-price {
    margin: 0 0 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(124, 152, 179, 0.1);
    font-size: 0.9rem;
    color: var(--soft-blue);
}

.fo-card-price strong { color: var(--golden); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.fo-card-price small { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: rgba(124, 152, 179, 0.75); }

/* ── SLIDER DE LOGOS IA (modèle du marquee de /cockpit-marketing/) ── */

.fo-compat { margin-top: 4rem; position: relative; }

.fo-compat-label {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--soft-blue);
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(124, 152, 179, 0.15);
}

.fo-marquee {
    margin-top: 1.7rem;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.fo-marquee-track {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    width: max-content;
    animation: fo-marquee 48s linear infinite;
}

.fo-logo {
    flex: none;
    width: 30px;
    height: 30px;
    fill: var(--golden);
    opacity: 0.68;
}

@keyframes fo-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) { .fo-marquee-track { animation: none; } }

/* ── CATALOGUE : cartes plus larges ── */

.fo-grid-v2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

@media (max-width: 880px) { .fo-grid-v2 { grid-template-columns: 1fr; } }

/* ── MOT DU FONDATEUR : scène sticky ── */

/* La photo tient l'arrière plan pendant que le manifeste se révèle mot à mot.
   Le rail donne la course de scroll, le sticky reste plein écran au centre. */
.fo-founder { position: relative; background: var(--midnight); }

.fo-fd-rail {
    position: relative;
    height: 260vh;
    view-timeline-name: --fo-manifeste;
}

.fo-fd-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* La photo n'occupe que la moitié droite : en pleine largeur, le cadre
   panoramique l'agrandissait 1,6 fois et sa partie gauche disparaissait
   sous le voile. Ici le cadre est presque carré, l'image reste à son échelle. */
.fo-fd-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 44%; z-index: 0; }

.fo-fd-bg img {
    width: 100%;
    height: 100%;
    /* Le cadre a désormais un rapport proche de la photo : le remplissage
       ne l'agrandit que de 1 % et n'en coupe qu'un dixième en largeur. */
    object-fit: cover;
    object-position: center 46%;
}

/* Voile radial : la photo respire sur les bords, le texte reste lisible au centre.
   Le dégradé vertical raccorde la section d'approche aux témoignages. */
.fo-fd-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            var(--midnight) 0%,
            rgba(13, 27, 42, 0.9) 12%,
            rgba(13, 27, 42, 0.52) 34%,
            rgba(13, 27, 42, 0.34) 62%,
            rgba(13, 27, 42, 0.3) 100%),
        linear-gradient(to bottom,
            var(--midnight) 0%,
            rgba(13, 27, 42, 0.3) 15%,
            rgba(13, 27, 42, 0.24) 50%,
            rgba(13, 27, 42, 0.34) 85%,
            var(--midnight) 100%);
}

.fo-fd-sticky .container { position: relative; z-index: 5; width: 100%; }

/* Texte calé à gauche, sur la colonne de gauche de la section d'approche :
   même bord et même largeur que le bloc des 3 principes, la photo occupe le reste. */
.fo-fd-inner { max-width: calc((100% - 5.5rem) / 2); margin: 0; text-align: left; }

.fo-fd-inner .section-title {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    max-width: none;
    margin: 0 0 1.2rem;
}

.fo-fd-text {
    font-size: clamp(0.92rem, 1.02vw, 1.02rem);
    line-height: 1.62;
    color: var(--light-blue);
}

.fo-fd-p { margin: 0 0 0.66rem; }
.fo-fd-promise { color: var(--off-white); margin-top: 1rem; }

.fo-fd-q {
    margin: 0 0 0.6rem;
    padding: 0.1rem 0 0.1rem 1.1rem;
    max-width: 46rem;
    border-left: 2px solid rgba(249, 220, 92, 0.5);
    color: var(--off-white);
    text-align: left;
}

.fo-fd-q:first-of-type { margin-top: 0.2rem; }

.fo-fd-sign { margin-top: 1.3rem; }
.fo-fd-sign .footer-brand-name { font-size: 1.6rem; display: inline-block; }

/* Révélation mot à mot, pilotée par la course du rail.
   201 mots étalés sur la fenêtre où le bloc est collé (30 % à 68 % du rail). */
.fo-fd-text .w { display: inline-block; }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .fo-fd-text .w {
            animation: fo-word-in linear both;
            animation-timeline: --fo-manifeste;
            animation-range: cover calc(30% + var(--i) * 0.19%) cover calc(34% + var(--i) * 0.19%);
        }
    }
}

@keyframes fo-word-in {
    from { opacity: 0.14; }
    to { opacity: 1; }
}

/* Le bloc mesure jusqu'à 750 px de haut selon la largeur de la colonne :
   sous 880 px de viewport il ne tient plus dans un écran, la scène redevient
   une section qui défile. La composition ne change pas pour autant :
   texte à gauche, photo à droite, seule la révélation au scroll tombe. */
@media (max-height: 880px) {
    .fo-fd-rail { height: auto; view-timeline-name: none; }
    .fo-fd-sticky { position: static; height: auto; min-height: 0; padding: var(--space-xl) 0; }
    .fo-fd-text .w { animation: none; opacity: 1; }
}

/* En dessous de 900 px de large, la photo passe derrière le texte sur toute
   la largeur, sous un voile plein. */
@media (max-width: 900px) {
    .fo-fd-rail { height: auto; view-timeline-name: none; }
    .fo-fd-sticky { position: static; height: auto; min-height: 0; padding: var(--space-xl) 0; }
    .fo-fd-text .w { animation: none; opacity: 1; }
    .fo-fd-inner { max-width: none; }
    .fo-fd-bg { left: 0; }
    .fo-fd-bg::after {
        background:
            linear-gradient(to bottom,
                var(--midnight) 0%,
                rgba(13, 27, 42, 0.88) 14%,
                rgba(13, 27, 42, 0.92) 50%,
                rgba(13, 27, 42, 0.9) 86%,
                var(--midnight) 100%);
    }
}

/* ── LEAD MAGNET ILLUSTRÉ ── */

.fo-kit-block { align-items: center; gap: 3.5rem; }
.fo-kit-media { position: relative; flex: 0 0 44%; max-width: 44%; }
.fo-kit-media img { width: 100%; height: auto; display: block; border: 1px solid rgba(124, 152, 179, 0.15); }

.fo-kit-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.fo-kit-play svg {
    width: 34px;
    height: 34px;
    padding: 1rem;
    box-sizing: content-box;
    background: rgba(249, 220, 92, 0.92);
    color: var(--midnight);
    border-radius: 50%;
}

.fo-kit-text { max-width: none; }
.fo-kit-text .btn-primary { margin-top: 1.6rem; }

@media (max-width: 900px) {
    .fo-kit-media { flex: none; max-width: 100%; width: 100%; }
}

/* ── FAQ ── */

/* Elle suit désormais la scène du fondateur, qui se termine en midnight. */
.fo-faq { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%); }


/* ── QUIZ D'ORIENTATION ── */

.fo-form-alt { margin: 1.1rem 0 0; font-size: 0.82rem; color: var(--soft-blue); }

.fo-quiz-open {
    background: none;
    border: none;
    padding: 0;
    color: var(--golden);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fo-quiz { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.fo-quiz[hidden] { display: none; }
.fo-quiz-backdrop { position: absolute; inset: 0; background: rgba(5, 12, 20, 0.82); backdrop-filter: blur(6px); }

.fo-quiz-panel {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 2.8rem 2.6rem;
    background: var(--midnight-light);
    border: 1px solid rgba(249, 220, 92, 0.25);
}

.fo-quiz-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(124, 152, 179, 0.2);
    color: var(--soft-blue);
    transition: color 0.3s, border-color 0.3s;
}

.fo-quiz-close:hover { color: var(--golden); border-color: var(--golden); }
.fo-quiz-close svg { width: 17px; height: 17px; }

.fo-quiz-step { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--golden); margin-bottom: 0.8rem; }
.fo-quiz-panel h2 { font-size: 1.5rem; font-weight: 800; color: var(--off-white); margin-bottom: 1.6rem; }
.fo-quiz-q { color: var(--light-blue); font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.6rem; }
.fo-quiz-opts { display: flex; flex-direction: column; gap: 0.7rem; }

.fo-quiz-opt {
    width: 100%;
    padding: 1rem 1.2rem;
    text-align: left;
    background: rgba(13, 27, 42, 0.6);
    border: 1px solid rgba(124, 152, 179, 0.18);
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.45;
    transition: border-color 0.25s, background 0.25s;
}

.fo-quiz-opt:hover { border-color: var(--golden); background: rgba(249, 220, 92, 0.06); }

.fo-quiz-result { text-align: left; }
.fo-quiz-reco { font-size: 1.25rem; font-weight: 800; color: var(--off-white); line-height: 1.3; margin-bottom: 0.4rem; }
.fo-quiz-meta { font-size: 0.88rem; color: var(--golden); margin-bottom: 1.6rem; }
.fo-quiz-result .btn-primary { width: 100%; justify-content: center; }

.fo-quiz-again {
    display: block;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.6rem;
    background: none;
    border: none;
    color: var(--soft-blue);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 560px) { .fo-quiz-panel { padding: 2.2rem 1.5rem; } }

/* Le chiffre d'une réassurance ne se coupe jamais */
.fo-proof-item strong { white-space: nowrap; }
.fo-proof { flex-wrap: wrap; row-gap: 1.2rem; }


/* ── FORMULAIRE : champs multiples et consentement ── */

.fo-hero-form input[type="tel"],
.fo-hero-form input[type="text"]:not([tabindex="-1"]) {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: rgba(13, 27, 42, 0.75);
    border: 1px solid rgba(124, 152, 179, 0.25);
    border-radius: 0;
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
    transition: border-color 0.3s;
}

.fo-hero-form input[type="tel"]:focus,
.fo-hero-form input[type="text"]:focus { outline: none; border-color: var(--golden); }
.fo-hero-form input::placeholder { color: rgba(124, 152, 179, 0.65); }

.fo-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.3rem 0 1.2rem; }
.fo-consent input { flex-shrink: 0; margin-top: 0.15rem; accent-color: var(--golden); width: 15px; height: 15px; }
.fo-consent label { font-size: 0.76rem; line-height: 1.5; color: rgba(124, 152, 179, 0.9); }
.fo-consent a { color: var(--golden); text-decoration: underline; text-underline-offset: 2px; }

/* ── SECTION APPROCHE ── */

/* Continuité : reprend le fond sombre du CTA qui précède et remonte vers
   midnight-light, valeur sur laquelle démarre le fondu des résultats. */
.fo-approche { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%); }

.fo-appr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 3rem;
    border-left: 1px solid rgba(124, 152, 179, 0.1);
    border-top: 1px solid rgba(124, 152, 179, 0.1);
}

@media (max-width: 900px) { .fo-appr-grid { grid-template-columns: 1fr; } }

.fo-appr-card {
    position: relative;
    padding: 2.4rem 2rem;
    border-right: 1px solid rgba(124, 152, 179, 0.1);
    border-bottom: 1px solid rgba(124, 152, 179, 0.1);
    background: rgba(13, 27, 42, 0.4);
    transition: background 0.4s;
}

.fo-appr-card:hover { background: rgba(13, 27, 42, 0.75); }

.fo-appr-num {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--golden);
    opacity: 0.8;
    margin-bottom: 1rem;
}

.fo-appr-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--off-white); line-height: 1.3; margin-bottom: 0.7rem; }
.fo-appr-card p { color: var(--soft-blue); font-size: 0.94rem; line-height: 1.7; margin: 0; }

/* ── CATALOGUE ÉLARGI, 3 COLONNES ── */

/* Le catalogue respire plus que le reste du site : largeur relative à l'écran,
   plafonnée pour que les cartes ne s'étirent pas sur les très grands moniteurs. */
.fo-wide .container { max-width: min(94vw, 1760px); }
.fo-grid-v2 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1240px) { .fo-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .fo-grid-v2 { grid-template-columns: 1fr; } }

/* ── QUIZ : relais vers la prise de rendez vous ── */

.fo-quiz-team {
    margin-top: 1.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(124, 152, 179, 0.15);
}

.fo-quiz-team p { font-size: 0.9rem; line-height: 1.6; color: var(--soft-blue); margin-bottom: 1rem; }
.fo-quiz-team .btn-secondary { width: 100%; justify-content: center; }

/* ── EN TÊTE AUTEUR DU FORMULAIRE ── */

.fo-form-author {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(124, 152, 179, 0.12);
}

/* Même traitement que la photo auteur des articles de blog */
.fo-form-author img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(249, 220, 92, 0.2);
}

.fo-form-author p { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--soft-blue); }
.fo-form-author strong { color: var(--light-blue); font-weight: 700; }

/* Réassurances du formulaire */
.fo-form-assur { list-style: none; margin: 0 0 1.6rem; padding: 0; }

.fo-form-assur li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--light-blue);
}

.fo-form-assur svg { width: 15px; height: 15px; stroke: var(--golden); flex-shrink: 0; margin-top: 0.15rem; }

/* Champs sur une ligne, obligatoires signalés */
.fo-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.fo-field { display: flex; flex-direction: column; }

.fo-field label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--soft-blue);
    margin-bottom: 0.35rem;
}

.fo-field abbr { color: var(--golden); text-decoration: none; border: none; }

.fo-hero-form .fo-field input { margin-bottom: 0.9rem; }

@media (max-width: 480px) { .fo-field-row { grid-template-columns: 1fr; gap: 0; } }


/* ── PLAN DE FORMATION : questionnaire embarqué ── */

.fo-plan-section { background: var(--midnight-light); }

.fo-plan {
    position: relative;
    max-width: 780px;
    margin: 3rem auto 0;
    padding: 2.6rem 2.4rem 2.4rem;
    background: rgba(13, 27, 42, 0.6);
    border: 1px solid rgba(124, 152, 179, 0.14);
}

.fo-plan-progress {
    height: 3px;
    background: rgba(124, 152, 179, 0.15);
    margin-bottom: 2.2rem;
}

.fo-plan-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--golden);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fo-plan-screen { display: none; }
.fo-plan-screen.active { display: block; animation: foPlanIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes foPlanIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.fo-plan-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 0.7rem;
}

.fo-plan-screen h3 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--off-white);
    margin-bottom: 1.8rem;
}

.fo-plan-opts { display: flex; flex-direction: column; gap: 0.7rem; }

.fo-plan-opt {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.4rem;
    text-align: left;
    background: rgba(27, 73, 101, 0.08);
    border: 1px solid rgba(124, 152, 179, 0.12);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--light-blue);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.fo-plan-opt:hover { border-color: rgba(249, 220, 92, 0.35); color: var(--off-white); }

.fo-plan-opt.selected {
    background: rgba(249, 220, 92, 0.08);
    border-color: rgba(249, 220, 92, 0.4);
    color: var(--off-white);
}

.fo-plan-marker {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid rgba(124, 152, 179, 0.25);
    transition: all 0.3s;
}

.fo-plan-opt.selected .fo-plan-marker { border-color: var(--golden); background: var(--golden); box-shadow: inset 0 0 0 3px rgba(13, 27, 42, 0.85); }

/* Écran de résultat */
.fo-plan-result h3 { font-size: 1.55rem; margin-bottom: 0.7rem; }
.fo-plan-why { color: var(--soft-blue); line-height: 1.65; margin-bottom: 1.8rem; }
.fo-plan-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.fo-plan-again {
    display: block;
    margin-top: 1.4rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--soft-blue);
    font-family: var(--font-body);
    font-size: 0.84rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 560px) { .fo-plan { padding: 2rem 1.4rem; } }

/* Réassurances du bloc sur mesure */
.fo-sm-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.6rem; }

.fo-sm-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--light-blue);
}

.fo-sm-list svg { width: 16px; height: 16px; stroke: var(--golden); flex-shrink: 0; margin-top: 0.15rem; }

@media (max-width: 700px) { .fo-sm-list { grid-template-columns: 1fr; } }


/* En tête de la section plan de formation : centré au dessus du questionnaire */
.fo-plan-section .section-title { margin-left: auto; margin-right: auto; text-align: center; }
.fo-plan-section .fo-hero-sub { margin-left: auto; margin-right: auto; text-align: center; max-width: 68ch; }

/* Navigation du questionnaire : rien n'est obligatoire */
.fo-plan-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    min-height: 20px;
}

.fo-plan-back, .fo-plan-skip {
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--soft-blue);
    transition: color 0.3s;
}

.fo-plan-back:hover, .fo-plan-skip:hover { color: var(--golden); }
.fo-plan-skip { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }

/* Résultat : les informations qu'un acheteur cherche vraiment */
.fo-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
}

.fo-plan-meta li {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(124, 152, 179, 0.16);
    border-radius: 100px;
    font-size: 0.8rem;
    color: var(--light-blue);
}

.fo-plan-meta li:first-child { border-color: rgba(249, 220, 92, 0.35); color: var(--golden); }



/* Le socle déclinable se distingue des autres programmes du catalogue */
.fo-card-socle-card { border-color: rgba(249, 220, 92, 0.28); background: rgba(249, 220, 92, 0.04); }
.fo-card-socle { background: var(--midnight); color: var(--golden); border: 1px solid rgba(249, 220, 92, 0.5); }

/* L'accent doré du H1 ne se coupe pas : il bascule entier à la ligne */
.fo-hero h1.section-title em { white-space: nowrap; }


/* ── PRINCIPES : texte à gauche, visuel à droite ── */

/* Le bloc des principes est centré dans un rail de 100 vh : il porte déjà
   (100vh - hauteur du bloc) / 2 d'air au dessus et au dessous. Les paddings de
   jonction doublaient l'écart du bas, on les retire pour que les deux soient égaux. */
.fo-approche { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%); padding-bottom: 0; }
.fo-testimonials { padding-top: 0; }
.fo-approche .section-title { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.fo-appr-intro .fo-hero-sub { max-width: 82ch; margin-left: auto; margin-right: auto; text-align: center; }

.fo-pr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem;
    align-items: center;
    margin-top: 5.5rem;
}

@media (max-width: 980px) { .fo-pr { grid-template-columns: 1fr; gap: 2.5rem; } }

.fo-pr-list { display: flex; flex-direction: column; gap: 3.8rem; }

/* Un principe : le numéro déborde à gauche, en gros et très effacé */
.fo-pr-item {
    position: relative;
    padding: 0 0 0 8.2rem;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-body);
    opacity: 0.55;
    transition: opacity 0.5s;
}

.fo-pr-item.active { opacity: 1; }

/* Le numéro se pose à côté du bloc et retombe un peu plus bas que le titre */
.fo-pr-num {
    position: absolute;
    left: 0;
    top: 1.6rem;
    font-family: var(--font-display);
    font-size: 6.4rem;
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: 0;
    color: var(--golden);
    opacity: 0.16;
    transition: opacity 0.5s;
}

.fo-pr-item.active .fo-pr-num { opacity: 0.32; }

.fo-pr-item h3 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--off-white);
    margin-bottom: 0.7rem;
}

.fo-pr-item p {
    color: var(--light-blue);
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0;
    max-width: 54ch;
}

@media (max-width: 560px) {
    .fo-pr-item { padding-left: 4.6rem; }
    .fo-pr-num { font-size: 4rem; top: 1.3rem; }
}

/* Visuel : les illustrations se superposent, seule l'active est visible */
.fo-pr-visual {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(124, 152, 179, 0.12);
    background: rgba(13, 27, 42, 0.5);
}

.fo-pr-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fo-pr-img.active { opacity: 1; }


/* ── RAIL COLLANT : le défilement fait avancer les principes ── */

.fo-pr-rail { height: 280vh; position: relative; }

.fo-pr-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}

.fo-pr-sticky > .fo-pr { width: 100%; margin-top: 0; }

/* Repli sur les écrans étroits et pour qui a réduit les animations */
/* Rail desactive : la section redevient une simple liste qui defile.
   Le dispositif d'illustration n'a plus de sens ici, une seule image survivait
   et se posait apres les trois principes, sans lien avec aucun d'eux. */
.fo-pr-rail-off { height: auto; }
.fo-pr-rail-off .fo-pr-sticky { position: static; height: auto; display: block; }
.fo-pr-rail-off .fo-pr-item { opacity: 1; }
.fo-pr-rail-off .fo-pr-visual { display: none; }
/* La marge est annulee dans le rail collant, ou le sticky centre lui-meme le
   bloc : hors rail, l'intro et le premier principe se touchaient. */
.fo-pr-rail-off .fo-pr-sticky > .fo-pr { margin-top: 3.2rem; }
/* Meme cause en bas : les deux sections se touchent parce que la course du rail
   fait normalement la separation. La section reprend un pied hors rail, y
   compris quand c'est le refus des animations qui l'a desactive. */
.fo-approche:has(.fo-pr-rail-off) { padding-bottom: var(--space-xl); }

@media (max-width: 980px) {
    .fo-pr-rail { height: auto; }
    .fo-pr-sticky { position: static; height: auto; display: block; }
    .fo-pr-item { opacity: 1; }
    .fo-approche { padding-bottom: var(--space-xl); }
}


/* ── FOND DE PAGE DES FICHES ──────────────────────────── */

/* Un seul dégradé pour toute la fiche, comme sur le hub : la couleur monte
   vers le bleu clair au niveau du programme puis redescend jusqu'au pied de
   page. Les sections restent transparentes, sinon chaque fond plein
   recréerait une arête. */
.fo-page {
    background: linear-gradient(180deg,
        var(--midnight) 0%,
        var(--midnight-light) 26%,
        var(--midnight-light) 46%,
        var(--midnight) 100%);
}

.fo-page .fo-hero,
.fo-page .fo-pour-qui,
.fo-page .fo-fiche,
.fo-page .fo-kit,
.fo-page .fo-qualite,
.fo-page .faq { background: transparent; }

/* Les illustrations du hero sont détourées : le voile prévu pour les photos
   n'a plus lieu d'être. */
.fo-page .fo-hero-media::after { display: none; }

/* Toute la carte est cliquable, sans dupliquer le lien : le lien existant
   s'etend a la carte par un pseudo-element. Un seul element focusable, un vrai
   href, et l'intitule du lien reste le nom accessible de la cible. */
.fo-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
/* Le corps de la carte doit rester non positionne : sinon c'est lui, et non la
   carte, qui sert de bloc conteneur au pseudo-element, et l'image du haut reste
   hors d'atteinte au clic.
   Le halo garde son plan d'origine, au-dessus du contenu comme sur les cartes
   projets : c'est ce qui lui donne son effet englobant. La surface cliquable
   passe encore au-dessus, sans quoi le halo intercepterait les clics. */
.fo-card-body { position: static; }
.fo-card-link { position: static; }