/* ============================================================
   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; }
}
/* Desktops étroits (1201-1400) : masquer le n° de téléphone pour que les 6
   onglets tiennent sur une ligne (il reste dans le footer + le menu mobile). */
@media (min-width: 1201px) and (max-width: 1400px) {
    .nav-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; }
}

/* 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: ""; }
}

/* ===== 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; }
}

/* ============================================================
   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%; }
}