/* ============================================================
   SFSCMFCO - Overrides locaux (chargés APRES main.css)
   ============================================================ */

/* --- Hero pages intérieures : aérer les titres longs (H1) ---
   Les fiches recommandations ont des titres très longs qui
   remplissaient tout le hero en très gros. On réduit la taille
   max et on élargit un peu la zone de texte pour respirer. */
.page-hero .hero-content { max-width: 960px; }
.page-hero .hero-content h1 {
    line-height: 1.18;
    text-wrap: balance;
}
@media (min-width: 769px) {
    .page-hero .hero-content h1 {
        font-size: clamp(2.4rem, 3.6vw, 3rem);
    }
}
@media (max-width: 768px) {
    .page-hero .hero-content h1 {
        font-size: clamp(1.8rem, 6.5vw, 2.2rem);
    }
}

/* --- Cartes recommandations SANS image (texte seul) ---
   Les visuels ne correspondaient pas aux ouvrages, on les retire.
   On garde une carte propre et lisible, centrée sur le titre. */
.blog-card-noimg .card-body { padding: 28px 28px 32px; }
.blog-card-noimg h3 { margin-top: 4px; }

/* --- Fiches patient : boutons Télécharger le PDF / Imprimer --- */
.fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}
.fiche-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.fiche-actions .btn svg { flex: 0 0 auto; }
.fiche-print-btn { font: inherit; }

/* --- Home : section "À revoir & ressources" en grille de 3 ---
   6 cartes => 2 rangées de 3 bien équilibrées (au lieu de 4 + 2 orphelines). */
.ressources-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ressources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ressources-grid { grid-template-columns: 1fr; } }

/* --- Cartes sans image : bandeau dégradé bleu + titre blanc (style Framer) ---
   Masqué partout par défaut (les cartes texte-seul existantes ne bougent pas).
   Activé uniquement sur la page « Membres » (id 5493) pour remplacer les 3 photos. */
.card-media-fallback { display: none; }
.page-id-5493 .cards-section .card-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 22px;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}
.page-id-5493 .cards-section .card-media-fallback-title {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.22;
    letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
}
/* Le titre est déjà dans le bandeau : on retire le doublon dans le corps de carte */
.page-id-5493 .cards-section .card-body h3 { display: none; }

/* --- Page "Vidéos de formation" (id 5538) : 4 cartes en 2x2 équilibré --- */
.page-id-5538 .ressources-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .page-id-5538 .ressources-grid { grid-template-columns: 1fr; } }
.ressource-card--soon { opacity: .72; cursor: default; }
.activite-badge--soon { background: rgba(var(--color-secondary-rgb), .10); color: var(--color-text-light); }

/* ============================================================
   MÉGA-MENU — Framer épuré : grille de colonnes de LARGEUR
   IDENTIQUE, en-têtes nets, liens légers (survol = couleur +
   léger décalage, AUCUN soulignement). Icônes seulement sur les
   6 grands onglets.
   ============================================================ */
.nav-mega .mega-top { display: inline-flex; align-items: center; gap: 8px; }
.nav-mega .mega-top-ico { display: inline-flex; align-items: center; }
.nav-mega .mega-top-ico i { font-size: 14px; color: var(--color-primary); }
.mega-toggle { display: none; }

/* CRITIQUE : neutraliser le soulignement animé du thème (`.nav-menu li a::after`,
   0,1,2) + le fond de survol, qui bavaient sur les liens/cartes du panneau. */
.nav-mega .mega-link::after,
.nav-mega .mega-head::after,
.nav-mega .mega-feature::after { content: none !important; display: none !important; }
/* Lien = pastille icône douce + libellé (spécificité > `.nav-menu li a`). */
.nav-mega .mega-link {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 9px; border-radius: 11px; background: none;
    font-size: 14.5px; font-weight: 500; line-height: 1.25; color: var(--color-secondary);
    transition: background .14s ease;
}
.nav-mega .mega-link:hover { background: var(--color-primary-light); color: var(--color-secondary); }
.nav-mega .mega-txt { flex: 1 1 auto; min-width: 0; }
.nav-mega .mega-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary); background: rgba(var(--color-primary-rgb), .10);
    transition: background .14s ease, color .14s ease;
}
.nav-mega .mega-ico i { font-size: 14px; }
.nav-mega .mega-link:hover .mega-ico { background: var(--color-primary); color: #fff; }
.nav-mega .mega-head { color: var(--color-primary-dark); }
.nav-mega .mega-head:hover { color: var(--color-primary); background: none; }
/* Carte mise en avant (display flex scopé pour battre `.nav-menu li a{display:block}`) */
.nav-mega .mega-feature { display: flex; flex-direction: column; color: inherit; }
.nav-mega .mega-feature:hover { background: none; }
.nav-mega .mega-feature-title { display: block; }
.nav-mega .mega-feature-sub { display: block; }
.nav-mega .mega-feature-cta { display: block; }

/* Le texte du thème est agrandi (+33%) : 6 onglets longs + icônes ne tiennent
   pas sous ~1200px -> on bascule sur le menu hamburger + accordéon plus tôt. */
@media (max-width: 1200px) {
    .nav-menu, .nav-cta { display: none; }
    .nav-toggle { display: block; }
    .nav-menu.active {
        display: flex; flex-direction: column;
        position: absolute; top: var(--header-height); left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border);
        padding: 16px; box-shadow: var(--shadow-lg); z-index: 999;
        max-height: calc(100vh - var(--header-height)); overflow-y: auto;
    }
    .nav-cta { display: none !important; }
    .nav-mobile-cta { display: none; flex-direction: column; gap: 12px; padding: 16px; border-top: 1px solid var(--color-border); }
    .nav-menu.active ~ .nav-mobile-cta { display: flex; }
}

@media (min-width: 1201px) {
    /* Header `position:fixed` (main.css) = déjà bloc conteneur du panneau absolu.
       Ne PAS le passer en relative (sinon 72px de blanc navbar/hero). */
    .nav-mega > li.has-mega { position: static; }

    .mega-panel {
        position: absolute; top: var(--header-height); left: 0; right: 0;
        background: #fff; border-top: 1px solid var(--color-border);
        box-shadow: 0 22px 44px rgba(7, 12, 25, .13);
        opacity: 0; visibility: hidden; transform: translateY(10px);
        transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
        z-index: 200;
    }
    .nav-mega > li.has-mega:hover > .mega-panel,
    .nav-mega > li.has-mega:focus-within > .mega-panel {
        opacity: 1; visibility: visible; transform: none;
        transition: opacity .18s ease, transform .18s ease;
    }
    /* Bloc centré, taillé à son contenu : carte à gauche + colonnes à droite. */
    .mega-inner {
        display: flex; align-items: stretch; gap: 40px;
        width: fit-content; max-width: calc(100vw - 96px);
        margin: 0 auto; padding: 32px 48px 36px;
    }
    /* Carte mise en avant (ancre visuelle) */
    .mega-feature {
        flex: 0 0 250px; display: flex; flex-direction: column; gap: 12px;
        padding: 24px 24px 22px; border-radius: 18px;
        background: linear-gradient(158deg, rgba(var(--color-primary-rgb), .13) 0%, rgba(var(--color-primary-rgb), .03) 100%);
        border: 1px solid rgba(var(--color-primary-rgb), .16);
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .mega-feature:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(var(--color-primary-rgb), .20); }
    .mega-feature-ico {
        width: 54px; height: 54px; border-radius: 15px;
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
        box-shadow: 0 8px 18px rgba(var(--color-primary-rgb), .32);
    }
    .mega-feature-ico i { font-size: 23px; }
    .mega-feature-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--color-secondary); }
    .mega-feature-sub { font-size: 13px; line-height: 1.5; color: var(--color-text-light); }
    .mega-feature-cta { margin-top: auto; font-weight: 700; font-size: 13.5px; color: var(--color-primary); }
    /* Colonnes de liens, largeur identique */
    .mega-content { display: grid; gap: 24px 30px; align-items: start; }
    .mega-col { min-width: 190px; }
    /* En-tête de colonne : petites majuscules + filet ; hauteur réservée pour
       aligner le départ des liens même sur 2 lignes. */
    .mega-head {
        display: flex; align-items: flex-end; min-height: 2.5em;
        padding: 0 9px 8px; margin: 0 0 8px; line-height: 1.25;
        font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
        color: var(--color-primary-dark); border-bottom: 1px solid var(--color-border);
    }
    .mega-links { list-style: none; margin: 0; padding: 0; }
    .mega-links li { margin: 0; }
    /* Onglets : compacts + JAMAIS de retour à la ligne (sinon icône qui se
       détache et onglets sur 2 lignes). */
    .nav-menu.nav-mega { gap: 0; flex-wrap: nowrap; }
    .nav-mega > li > .mega-top { padding: 8px 9px; font-size: 14.5px; white-space: nowrap; }
    .nav-mega .mega-top-label { white-space: nowrap; }
    .nav-mega .mega-top-ico i { font-size: 12.5px; }
    .nav-mega > li.menu-item-has-children > .mega-top { padding-right: 22px; }
}
/* Le numéro de téléphone est retiré de la barre de navigation (2026-09-06) :
   il mangeait la place des 6 onglets du mégamenu et poussait « Espace membre »
   contre le bord. Il reste dans le pied de page et sur la page Contact. */
.nav-cta .nav-phone,
.nav-mobile-cta .nav-phone { display: none; }

@media (max-width: 1200px) {
    .nav-mega > li { position: relative; }
    .nav-mega > li > .mega-top { display: flex; align-items: center; gap: 10px; padding-right: 48px; }
    .nav-mega > li.menu-item-has-children > .mega-top::after { display: none; }
    .mega-toggle {
        display: block; position: absolute; top: 4px; right: 4px;
        width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
    }
    .mega-toggle::before {
        content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
        border-right: 2px solid var(--color-secondary); border-bottom: 2px solid var(--color-secondary);
        transform: translate(-50%, -65%) rotate(45deg); transition: transform .2s;
    }
    .has-mega.open > .mega-toggle::before { transform: translate(-50%, -20%) rotate(-135deg); }
    .mega-panel { display: none; }
    .has-mega.open > .mega-panel { display: block; }
    .mega-inner { display: block !important; width: auto !important; max-width: none; margin: 0; padding: 2px 0 12px; }
    /* Accordéon : la carte mise en avant est redondante (l'onglet est déjà un lien) -> on la masque. */
    .mega-feature { display: none !important; }
    .mega-content { display: block !important; grid-template-columns: none !important; }
    .mega-col { margin: 0 0 10px; }
    .mega-head {
        display: block; padding: 10px 0 5px 16px; margin: 0; min-height: 0;
        font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
        color: var(--color-primary-dark); border: 0;
    }
    .mega-links { list-style: none; margin: 0; padding: 0; }
    .nav-mega .mega-link { padding: 7px 10px 7px 16px; }
    .nav-mega .mega-ico { width: 30px; height: 30px; border-radius: 8px; }
    .nav-mega .mega-ico i { font-size: 13px; }
}

/* En-tete des fiches patients : visible uniquement a l'impression, puisque le
   bandeau .page-hero qui porte le titre a l'ecran est masque ci-dessous. */
.fiche-print-head { display: none; }

/* Impression : on ne garde que le contenu de la fiche */
@media print {
    header.site-header, .site-header, footer.site-footer, .site-footer,
    .page-hero, .breadcrumbs, .no-print, .fiche-actions, .article-nav,
    .cookie-banner, #cookie-banner { display: none !important; }
    .article-section, .fiche-patient-single { padding: 0 !important; }
    .container, .container-narrow { max-width: 100% !important; width: 100% !important; }
    body { background: #fff !important; }
    a[href]:after { content: ""; }
    .fiche-print-head {
        display: block;
        margin: 0 0 22px;
        padding-bottom: 14px;
        border-bottom: 2px solid var(--color-primary, #1b8cae);
    }
    .fiche-print-head h1 { font-size: 26pt; line-height: 1.2; margin: 0 0 6px; }
    .fiche-print-head p { font-size: 11pt; margin: 0; color: var(--color-text-muted, #64748b); }
}

/* ===== Vidéos de nos cours : placeholder verrouillé (visiteurs non membres) ===== */
.cours-video-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .08), rgba(var(--color-primary-rgb), .16));
    border: 1px dashed rgba(var(--color-primary-rgb), .35);
    text-decoration: none;
    text-align: center;
    padding: 24px;
    transition: background .25s ease, border-color .25s ease;
}
.cours-video-locked:hover {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .14), rgba(var(--color-primary-rgb), .22));
    border-color: rgba(var(--color-primary-rgb), .55);
}
.cours-video-locked-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 20px;
}
.cours-video-locked-title {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 17px;
}
.cours-video-locked-cta {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   ACCESSIBILITÉ - correctifs de contraste (audit 2026-07-30)
   Objectif : ratios WCAG AA (4.5:1 texte, 3:1 grand texte / UI)
   sur un public à moyenne d'âge élevée.
   ============================================================ */

/* Badges de section : gradient assombri (le blanc passe de 2.54:1 à >= 5.9:1) */
.section-badge {
    background: linear-gradient(135deg, #0f6a94, var(--color-primary-dark));
}

/* Textes/liens en couleur primaire sur fond clair : primary-dark (9.67:1 au lieu de 3.88) */
.bc-list a,
.section-nav-list a,
.card-link,
.videos-institut-credits a,
.agenda-calendar-title,
.agenda-tag,
.humanitarian-meta,
.sponsors-tier-label,
.sfscmfco-form__links a { color: var(--color-primary-dark); }

/* Skip-link : fond assombri pour que le blanc soit lisible */
.skip-link { background: var(--color-primary-dark); }

/* Badges Passé / À venir (mini-calendrier + carrousel congrès) :
   taille lisible + couleurs assombries (blanc >= 5.4:1) */
.minical-badge,
.ccar-badge { font-size: 12.5px; }
.minical-badge.is-past,
.ccar-badge.is-past { background: #c0392b; }
.minical-badge.is-soon,
.ccar-badge.is-soon { background: #157a3c; }

/* Chiffres clés en texte-gradient : stop clair remplacé (grand texte >= 3:1 partout) */
.stat-number {
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

/* Espace membres : eyebrow du hero en blanc plein (au lieu de blanc 75%) */
.sfscmfco-dashboard-hero__eyebrow { color: #fff; }

/* Mégamenu : en-têtes de colonnes un cran plus lisibles */
@media (min-width: 1201px) {
    .nav-mega .mega-head { font-size: 12.5px; }
}

/* ============================================================
   HABILLAGE - passe design globale (audit 2026-07-30)
   Un seul langage de carte, bandeau dégradé généralisé,
   filet signature sous les titres, rythme + footer raffinés.
   Sobre, élégant, premium - tout en CSS variables.
   ============================================================ */

/* 0. Utilitaire manquant : textes réservés aux lecteurs d'écran
      (le h2 « Pagination des publications » s'affichait en géant). */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* 1. TOKEN CARTE UNIQUE - radius, bordure, ombre et timing identiques
      pour toutes les familles de cartes du site. */
.card,
.fiche-card,
.lambeau-card,
.ressource-card,
.sci-card,
.ouvrage-card,
.diaporama-card,
.blog-card,
.arrete-item,
.diu-city {
    border-radius: var(--radius);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Le mouvement au survol reste réservé aux cartes CLIQUABLES (règle maison). */
a.card-clickable:hover,
a.fiche-card:hover,
a.ressource-card:hover,
a.lambeau-card:hover,
a.sci-card--link:hover,
a.ouvrage-card:hover,
a.diaporama-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--color-primary-rgb), .35);
}
/* Micro-interaction : la mention « Lire la suite » glisse légèrement. */
.card-link { display: inline-block; transition: transform .2s ease; }
a:hover > .card-body .card-link,
a.card-clickable:hover .card-link { transform: translateX(4px); }

/* 2. BANDEAU DÉGRADÉ pour toute carte sans image (recette officielle).
      Débloqué au-delà de la page Membres : congrès antérieurs, hubs,
      tarifs adhésion... plus aucun trou blanc. */
.card-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 22px;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    position: relative;
    overflow: hidden;
}
.card-media-fallback::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    top: -80px; right: -60px;
}
.card-media-fallback-title {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
    position: relative;
    z-index: 1;
}
/* Le titre est déjà dans le bandeau : pas de doublon dans le corps de carte. */
.card-media-fallback + .card-body > h3 { display: none; }

/* 3. FILET SIGNATURE sous les titres des sections texte des pages
      intérieures (diu-du, adhésion, enquête humanitaire...). */
.page-flex-sections .text-section .section-title::after {
    content: '';
    display: block;
    width: 56px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    margin: 14px auto 0;
}

/* 4. RYTHME VERTICAL des pages intérieures : une section sur deux posée
      sur un voile bleuté très léger (au lieu d'un simple filet gris). */
.page-flex-sections > .text-section:nth-child(even) {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), .045), rgba(var(--color-primary-rgb), .015));
    border-radius: 18px;
}
.page-flex-sections > .text-section { padding-left: 24px; padding-right: 24px; }

/* 5. CTA de fin de page : dans une mise en page avec sidebar, le bandeau
      reste dans sa colonne, arrondi et centré (fini le bloc qui file
      jusqu'au bord droit de l'écran sur Qualiopi). */
.page-layout .cta-banner,
.page-flex-sections .cta-banner {
    border-radius: 18px;
    overflow: hidden;
}

/* 6. OUVRAGES : suppression du grand vide entre l'intro et la grille. */
.page-id-5541 .page-flex-sections .text-section { padding-bottom: 24px; }

/* 7. PRÉSENTATION (5489) : la grille 3+1 devient un 2x2 équilibré. */
.page-id-5489 .cards-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .page-id-5489 .cards-grid { grid-template-columns: 1fr; } }

/* 8. FOOTER raffiné : titres plus lisibles, survol accent, fond dégradé
      très léger, filets discrets. */
#site-footer {
    background: linear-gradient(180deg, var(--color-secondary) 0%, #04070f 100%);
}
#site-footer h3 { color: rgba(255, 255, 255, .6); }
.footer-menu li a { transition: color .18s ease, transform .18s ease; }
.footer-menu li a:hover { color: var(--color-accent); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    transition: background .18s ease, color .18s ease;
}
.footer-social a:hover { background: var(--color-primary); color: #fff; }

/* Filet signature : aligné à gauche dans les mises en page avec sidebar
   (les titres y sont alignés à gauche, le filet centré semblait flotter). */
.page-layout .page-flex-sections .text-section .section-title::after { margin-left: 0; }

/* DIU-DU : cartes de villes étirées à hauteur de rangée (plus de trous). */
.diu-list { align-items: stretch; }

/* ============================================================
   RESPONSIVE - correctifs audit mobile (2026-07-30)
   ============================================================ */

/* 1. Le centrage d'orpheline des grilles 3/4 colonnes casse le passage
      en 1 colonne mobile (colonne implicite -> cards de 2px sur
      /la-societe/chapitres/). On le neutralise sous 769px. */
@media (max-width: 768px) {
    .grid-3 > *:last-child:nth-child(3n + 1),
    .grid-4 > *:last-child:nth-child(4n + 1) { grid-column: auto; }
}

/* 2. Home « Votre espace SFSCMFCO » : la grille 2 colonnes n'avait pas
      de point de bascule mobile (cards de 153px illisibles à 375px). */
@media (max-width: 700px) {
    .access-grid.access-grid-2 { grid-template-columns: 1fr; }
}

/* 3. Menu mobile : le bloc téléphone + CTA est déplacé (JS mega-menu.js)
      DANS le panneau déroulant - fini la superposition sur le header. */
.nav-mobile-cta-item { list-style: none; }
@media (min-width: 1201px) {
    .nav-mobile-cta-item { display: none !important; }
}
@media (max-width: 1200px) {
    .nav-menu .nav-mobile-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        margin-top: 8px;
        border-top: 1px solid var(--color-border);
    }
    .nav-menu .nav-mobile-cta .btn { text-align: center; justify-content: center; }
    /* Sans ça le CTA hérite de la couleur des liens du menu : bleu foncé sur
       fond bleu = illisible dans le panneau mobile. */
    .nav-menu .nav-mobile-cta .btn-primary,
    .nav-menu .nav-mobile-cta .btn-primary:hover,
    .nav-menu .nav-mobile-cta .btn-primary:focus { color: #fff; }
}

/* ============================================================
   BOUTONS DANS LE CONTENU (2026-09-07)
   Les zones de contenu riche imposaient `a { color: var(--color-primary) }`
   à TOUS les liens, .btn compris : texte bleu sur fond bleu = bouton
   illisible (signalé sur les pages congrès). Les `:not(.btn)` sont posés
   dans main.css ; ici on rattrape `.btn-secondary`, pensé pour les fonds
   sombres (texte blanc, bordure claire) donc invisible sur le fond blanc
   d'une page de contenu.
   ============================================================ */
.btn-secondary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
.btn-secondary:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
/* Sur les fonds sombres (héros, bandeau CTA), on garde le bouton fantôme blanc. */
.hero .btn-secondary,
.hero-buttons .btn-secondary,
.page-hero .btn-secondary,
.congres-hero .btn-secondary,
.cta-banner .btn-secondary,
.cta-content .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}
.hero .btn-secondary:hover,
.hero-buttons .btn-secondary:hover,
.page-hero .btn-secondary:hover,
.congres-hero .btn-secondary:hover,
.cta-banner .btn-secondary:hover,
.cta-content .btn-secondary:hover {
    background: #fff;
    color: var(--color-secondary);
    border-color: #fff;
}

/* ============================================================
   FIX HERO (2026-07-30) - piège aspect-ratio + min-height :
   `.page-hero { min-height:28vh; aspect-ratio:16/4 }` (main.css:759)
   fait déborder le hero : largeur = hauteur x 4, donc > viewport dès
   que la fenêtre est haute ou en portrait (tablettes, iPad). Le texte
   « centré » du hero partait hors écran à droite.
   On garde le MÊME rendu (hauteur = max(28vh, largeur/4)) sans
   jamais dépasser la largeur du viewport.
   ============================================================ */
@media (min-width: 769px) {
    .page-hero {
        aspect-ratio: auto;
        width: 100%;
        max-width: 100%;
        min-height: max(28vh, 25vw);
    }
}

/* ============================================================
   PORTE D'ENTRÉE INTERNES (/internes/ non connecté)
   ============================================================ */
.internes-gate {
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 40px 44px 34px;
    margin: 8px 0 24px;
}
.internes-gate h2 { margin-bottom: 12px; }
.internes-gate h2::after {
    content: '';
    display: block;
    width: 56px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    margin-top: 12px;
}
.internes-gate > p { color: var(--color-text-light); }
.internes-gate-form { margin-top: 22px; }
.internes-gate-form > label { display: block; font-weight: 700; margin-bottom: 8px; }
.internes-gate-row { display: flex; gap: 12px; flex-wrap: wrap; }
.internes-gate-row input[type="email"] {
    flex: 1 1 260px;
    padding: 13px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font: inherit;
}
.internes-gate-row input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
}
.internes-gate-row .btn { white-space: nowrap; }
.internes-gate-hp { position: absolute !important; left: -9999px !important; }
.internes-gate-notice {
    border-radius: 12px;
    padding: 14px 18px;
    margin: 18px 0 4px;
    font-size: 17px;
}
.internes-gate-notice.is-ok { background: #e7f4ec; color: #14522d; border: 1px solid #bfe3cd; }
.internes-gate-notice.is-err { background: #fdeceb; color: #7c1d12; border: 1px solid #f5c8c2; }
.internes-gate-help { margin-top: 18px; font-size: 16px; color: var(--color-text-light); }
@media (max-width: 600px) {
    .internes-gate { padding: 26px 20px; }
    .internes-gate-row .btn { flex: 1 1 100%; }
}

/* ============================================================
   HARMONISATION DES TITRES DES PAGES INTERIEURES  (2026-09-06)

   Une page interieure peut afficher DEUX systemes de titres a la fois :
     - les H2/H3 du contenu WordPress, rendus dans .page-content
     - les titres des sections SCF, rendus en .section-title
   Ils n'avaient ni la meme taille (37 px contre 43 px), ni la meme graisse
   (700 contre 800), ni le meme alignement horizontal (decalage de 24 px).
   Resultat : sur une page comme « Bourses et prix », le titre « Prix SFSCMFCO »
   paraissait d'un niveau SUPERIEUR au « Prix MadMax » qui le precede alors
   qu'ils sont de meme rang. On aligne les deux systemes sur une seule echelle.
   ============================================================ */

/* Une seule echelle typographique, fluide, pour les deux systemes. */
.page-content h2,
.page-flex-sections .section-title,
.page-content-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.333rem);   /* 28 px -> 37,33 px */
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.2;
}
.page-content h3,
.page-flex-sections .text-section-content h3 {
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.833rem);    /* 24 px -> 29,33 px */
    line-height: 1.25;
}
.page-content h4,
.page-flex-sections .text-section-content h4 {
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.467rem);     /* 20 px -> 23,5 px */
    line-height: 1.3;
    color: var(--color-secondary);
}

/* Le retrait lateral de 24 px n'a de sens que sur les sections posees sur le
   voile bleute : ailleurs il decalait le titre par rapport au texte au-dessus. */
.page-flex-sections > .text-section { padding-left: 0; padding-right: 0; }
.page-flex-sections > .text-section:nth-child(even) {
    padding-left: 24px;
    padding-right: 24px;
    /* Le voile bleute deborde de la colonne d'exactement sa propre marge
       interieure : le texte reste donc aligne sur celui des autres sections,
       au lieu de faire un decrochage de 24 px une section sur deux. */
    margin-left: -24px;
    margin-right: -24px;
}
@media (max-width: 600px) {
    .page-flex-sections > .text-section:nth-child(even) {
        padding-left: 16px;
        padding-right: 16px;
        margin-left: -16px;
        margin-right: -16px;
    }
}

/* Le corps de texte suivait la meme derive : 22,7 px fixes, illisibles serres
   sur un telephone. */
.page-content,
.page-flex-sections .text-section-content {
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.417rem);    /* 17 px -> 22,67 px */
}

/* ------------------------------------------------------------------
   PRATIQUE CLINIQUE (5516) : cartes sans photo.
   Les images d'illustration etaient hors sujet (affiche d'evenement,
   gros plan chirurgical) pour des annuaires. Le bandeau degrade prend
   le relais, mais en version compacte : un simple bandeau de titre,
   pas un grand aplat de 3/2 qui ecraserait la page.
   Pas d'aspect-ratio ici, uniquement une hauteur mini : la combinaison
   des deux fait deborder la carte quand la fenetre est haute.
   Meme traitement pour les tarifs d'adhesion (5490) : trois cartes de meme
   nature dont deux seulement portaient une photo, sans rapport avec un tarif.
   Etendu le 2026-09-06 aux pages de rubrique (La Societe, Documents,
   Formations, Internes, Contact, Reseau international, Documents officiels,
   Publications) : leurs cartes portaient des photos decoratives sans rapport
   avec la rubrique, souvent le meme fichier reutilise trois ou quatre fois.
   Les grilles d'affiches de congres, elles, gardent le format 3/2.
   ------------------------------------------------------------------ */
.page-id-5516 .cards-section .card-media-fallback,
.page-id-5490 .cards-section .card-media-fallback,
.page-id-5488 .cards-section .card-media-fallback,
.page-id-5514 .cards-section .card-media-fallback,
.page-id-5520 .cards-section .card-media-fallback,
.page-id-5530 .cards-section .card-media-fallback,
.page-id-5515 .cards-section .card-media-fallback,
.page-id-5533 .cards-section .card-media-fallback,
.page-id-5549 .cards-section .card-media-fallback,
.page-id-5492 .cards-section .card-media-fallback,
.page-id-5485 .cards-section .card-media-fallback {
    aspect-ratio: auto;
    min-height: 104px;
    padding: 18px 22px;
}
.page-id-5516 .cards-section .card-media-fallback-title,
.page-id-5490 .cards-section .card-media-fallback-title,
.page-id-5488 .cards-section .card-media-fallback-title,
.page-id-5514 .cards-section .card-media-fallback-title,
.page-id-5520 .cards-section .card-media-fallback-title,
.page-id-5530 .cards-section .card-media-fallback-title,
.page-id-5515 .cards-section .card-media-fallback-title,
.page-id-5533 .cards-section .card-media-fallback-title,
.page-id-5549 .cards-section .card-media-fallback-title,
.page-id-5492 .cards-section .card-media-fallback-title,
.page-id-5485 .cards-section .card-media-fallback-title {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.25;
}

/* Fiches de telechargement : le nom du fichier etait tronque par des points de
   suspension (white-space: nowrap). Sur un telephone, ou dans la colonne etroite
   d'une page a sidebar, un nom de document un peu long devenait illisible.
   On autorise deux lignes plutot que la troncature. */
.sfscmfco-file-list .file-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Fiches de telechargement de hauteurs egales dans une meme rangee. */
.sfscmfco-file-list a { height: 100%; align-items: flex-start; }
.sfscmfco-file-list .file-icon { padding-top: 2px; }

/* ============================================================
   PASSE MOBILE (2026-09-06)
   Plusieurs echelles de titres etaient ecrites en clamp() dont la
   valeur MINIMALE etait deja tres grande (jusqu'a 3,2 rem = 51 px).
   Le terme fluide ne pouvait donc jamais descendre : sur un telephone
   les titres restaient a 38-51 px. On abaisse uniquement les planchers,
   les valeurs desktop sont inchangees.
   ============================================================ */
.hero-content h1              { font-size: clamp(2rem, 7.333vw, 5.067rem); }
.cta-content h2               { font-size: clamp(1.75rem, 5.333vw, 3.733rem); }
.featured-event-content h2    { font-size: clamp(1.75rem, 4.667vw, 3.467rem); }
.access-header h2             { font-size: clamp(1.75rem, 5.067vw, 3.2rem); }
.about-content h2,
.ti-content h2                { font-size: clamp(1.625rem, 4vw, 2.667rem); }
.humanitarian-header h2       { font-size: clamp(1.625rem, 4vw, 2.933rem); }

@media (max-width: 600px) {
    /* Les pages servies par le plugin d'adhesion (connexion, espace membres,
       inscription) ont un H1 hors .page-hero, reste a 37 px sur telephone. */
    main h1 { font-size: clamp(1.75rem, 7.5vw, 2.333rem); }

    /* Un bouton au libelle long ("Telecharger le bulletin (PDF)") depassait
       du cadre : 20 px de police et 28 px de marge interne ne tiennent pas
       dans 375 px. Il se met desormais a la largeur disponible. */
    .btn {
        max-width: 100%;
        padding: 13px 20px;
        font-size: 17px;
        justify-content: center;
        text-align: center;
    }
}
/* Meme correction de plancher pour les titres de section de la page d'accueil. */
.section-title { font-size: clamp(1.75rem, 4vw, 2.933rem); }

/* Regle Youvanna : l'animation de survol est le signal qu'un element est
   cliquable. Les fiches de membres (Conseil d'administration, Past Presidents,
   Hommages) sont de simples <div>, sans lien : elles se soulevaient au survol
   et le visiteur cliquait dans le vide. On retire le mouvement, on garde
   uniquement une legere mise en avant de la photo. */
.team-member:hover { transform: none; box-shadow: none; }
.team-member:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------------
   OUVRAGES RECOMMANDES (5541) : grille des 16 couvertures.
   Deux corrections de fond :
   1. object-fit: cover recadrait les couvertures dans un cadre 3/4 -
      les titres etaient rognes en haut et en bas. Les scans de livres
      ont des proportions tres variables : on les affiche en entier
      (contain) sur un fond doux, la vignette ne ment plus sur le livre.
   2. La grille auto-fill donnait 5 colonnes sur grand ecran, donc une
      derniere rangee de 1 puis de 2. 16 ouvrages en 4 colonnes = 4
      rangees pleines.
   ------------------------------------------------------------------ */
@media (min-width: 1100px) {
    .ouvrages-grid { grid-template-columns: repeat(4, 1fr); }
}
.ouvrage-cover {
    background: linear-gradient(180deg, rgba(1, 73, 108, .06) 0%, rgba(1, 73, 108, .02) 100%);
}
.ouvrage-cover img {
    object-fit: contain;
    padding: 16px 16px 10px;
}
/* Le zoom se posait sur le coin de la couverture, souvent sur du texte. */
.ouvrage-zoom { right: 10px; bottom: 10px; width: 34px; height: 34px; font-size: .85rem; }

/* ------------------------------------------------------------------
   CITATIONS SIGNEES dans le corps des pages (edito du Pr Blanchard sur
   le rapport 2022, temoignages). Sans mise en forme, une citation de
   cinq paragraphes se confond avec le texte de la page et on ne voit
   plus ou elle commence ni qui parle.
   ------------------------------------------------------------------ */
.page-content-section blockquote,
.text-section-content blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-light, #4a5b6a);
    font-style: italic;
}
.page-content-section blockquote p:last-of-type,
.text-section-content blockquote p:last-of-type { margin-bottom: 10px; }
.page-content-section blockquote cite,
.text-section-content blockquote cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--color-secondary);
}
/* ============================================================
   Chiffres cles : deux cartes qui sortaient de l'ecran sous 375 px
   Mesure du 2026-09-07 : le nombre « 1888 » affiche en 53 px impose un
   min-content de 181 px a la premiere colonne. Les deux colonnes reclament
   alors 358 px la ou le conteneur n'en offre que 327 : a 320 et 360 px de
   large (tres repandu sur Android), DEUX cartes sur quatre depassent le bord
   droit et sont rognees par overflow-x: hidden.

   Cause : un bloc @media (max-width:768px) declare AVANT les regles de base
   qu'il est cense surcharger (main.css:605 contre main.css:694). A
   specificite egale c'est la derniere qui gagne, donc la version mobile de
   `.stat` et `.stat-number` n'a jamais servi. On retablit son intention.

   Correctifs mesures a 320 / 360 / 375 / 414 px :
     - garder 53 px       : 2 cartes hors ecran a 320 et 360
     - minmax(0, 1fr)     : plus rien hors ecran, mais le texte est coupe DANS
                            sa boite, jusqu'a 39 px. Pire que le mal. Ecarte.
     - une seule colonne  : correct, mais 859 px de haut au lieu de 485
     - chiffre a 2.4rem   : correct partout, 387 px de haut. Retenu.
   ============================================================ */
@media (max-width: 768px) {
    .stat-number { font-size: 2.4rem; }
    .stat { padding: 20px 14px; }
}

/* Meme cause sur la liste des documents telechargeables (pages Documents
   officiels et Documents reserves, visibles seulement une fois connecte) :
   piste de 313,03 px dans une boite de 303 px. S'y ajoute la marge gauche de
   24 px heritee de la regle generique des listes a puces (.page-content ul),
   alors que ce ul est une grille de cartes et non une liste. */
@media (max-width: 600px) {
    .sfscmfco-file-list { grid-template-columns: minmax(0, 1fr); }
}
.page-content ul.sfscmfco-file-list { margin-left: 0; }

/* Carte « Mon accès » d'un interne non cotisant : ton neutre et accueillant,
   surtout pas l'orange d'alerte de la carte « cotisation à régler ». Il n'a
   aucune dette : ses cours sont gratuits. */
.cotisation-card--interne { border-color: var(--color-primary); }
.cotisation-card--interne .cotisation-card__icon { color: var(--color-primary); }
.cotisation-card--interne h2 { color: var(--color-primary); }

/* Un nom de fichier sans espace ne peut pas se couper tout seul et depasse de
   sa carte (mesure : « Logo_Prix_Madmax.pdf », 18 px de trop a 375 px).
   On l'autorise a passer a la ligne n'importe ou plutot que d'elargir la
   colonne, ce qui ferait deborder la page entiere. */
.sfscmfco-file-list .file-name { overflow-wrap: anywhere; }

/* ============================================================
   TEXTES COUPES DANS LEUR BOITE (2026-09-07)
   ============================================================ */

/* Sous 400px, la colonne fait 144px : « Jo 221 10 septembre 2020 » demande trois
   lignes et le clamp a 2 en escamotait une (mesure : 79px de contenu pour 53px
   de boite). On passe a trois lignes sur les tres petits ecrans uniquement. */
@media (max-width: 400px) {
    .sfscmfco-file-list .file-name { -webkit-line-clamp: 3; }
}

/* Titres de cartes : un mot long (« Antibioprophylaxie ») debordait de la carte,
   qui est en overflow:hidden, donc la fin du titre etait reellement rognee
   (mesure a 320px : 250px de texte pour 214px de boite sur la carte
   « JBP Maxillorisq 2024 - Antibioprophylaxie », et 150 pour 128 dans le
   carrousel de la page d'accueil). */
.card-body h3,
.ccar-body h4,
.blog-card .card-body h3 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Bandeau de connexion en mode compact (page /internes/, qui a deja son propre
   bandeau). Sans cela le bloc du plugin s'affichait en pleine hauteur au milieu
   du contenu, avec 72 px de vide devant (une marge prevue pour compenser le
   header fixe quand le bandeau est en tete de page) et une largeur de 860 px
   heritee du conteneur etroit, contre 1320 px pour le reste. */
.sfscmfco-dashboard-hero--compact { margin-top: 0; padding: 1.75rem 0 1.5rem; }
.sfscmfco-dashboard-hero--compact .sfscmfco-dashboard-hero__titre {
    font-size: 1.5rem; font-weight: 700; margin: 0 0 .35rem; color: #fff;
}
.sfscmfco-dashboard-hero--compact .sfscmfco-dashboard-hero__lead { margin-bottom: .25rem; }

/* Entree de menu verrouillee : la page existe et on l'annonce, mais elle est
   reservee. Un petit cadenas evite au visiteur de cliquer pour rien, et le lien
   l'emmene vers la connexion avec retour automatique. Choix de la cliente
   (2026-09-07) : montrer avec un cadenas plutot que masquer. */
/* Le megamenu du site reconstruit son propre balisage (a.mega-link) et ignore
   les classes d'item WordPress : on repere donc l'entree verrouillee a son
   lien, que le filtre du plugin a deja reecrit vers la page de connexion avec
   retour automatique. Aucun fichier du theme a modifier. */
.mega-panel a.mega-link[href*="/connexion/?redirect_to="] .mega-txt::after,
.mega-panel a.mega-link[href*="access=payment-required"] .mega-txt::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .78em;
    margin-left: .5em;
    opacity: .5;
}
.mega-panel a.mega-link[href*="/connexion/?redirect_to="],
.mega-panel a.mega-link[href*="access=payment-required"] { opacity: .85; }
.mega-panel a.mega-link[href*="/connexion/?redirect_to="]:hover,
.mega-panel a.mega-link[href*="access=payment-required"]:hover { opacity: 1; }

.nav-menu .menu-item-verrouille > a::before,
.footer-menu .menu-item-verrouille > a::before {
    content: "\f023"; /* cadenas Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8em;
    margin-right: .45em;
    opacity: .55;
}
.nav-menu .menu-item-verrouille > a { opacity: .82; }
.nav-menu .menu-item-verrouille > a:hover { opacity: 1; }

/* Dates des actualites rognees.
   `.news-item` fixe la premiere colonne a 110 px (90 px sous un point de
   rupture), or « 29/05/2026 » en 18,67 px dans la police de titre demande
   136 px, et `.news-date` porte `white-space: nowrap` : la date etait donc
   coupee. Mesure du 2026-09-07 : 6 dates tronquees a 768 px, jusqu'a 26 px
   manquants, et 2 encore a 1440 px.
   On laisse la colonne se dimensionner sur son contenu plutot que de reduire
   la police : une date d'actualite doit rester lisible. */
.news-item { grid-template-columns: auto 1fr 32px; }
@media (max-width: 900px) { .news-item { grid-template-columns: auto 1fr; } }
@media (max-width: 600px) { .news-item { grid-template-columns: 1fr; } }