/* ============================================================
   CERF — header_and_menu.css
   Architecture : mobile drawer droit (< 1199px) + pill nav (≥ 1199px)
   Breakpoint aligné sur Lovable lg: = 1199px
   ============================================================ */

/* -------- Overlay du menu mobile -------- */
/* z-index stack (mobile/tablette) :
   top-header 999 < overlay 1000 < header 1001 < drawer (dans header context) */
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    display: block;
}

/* ============================================================
   MOBILE — drawer latéral droit (max-width: 1023px)
   ============================================================ */
@media (max-width: 1199px) {

    /* Body : bloqué en scroll quand le menu est ouvert */
    body:has(.menu.open) {
        overflow: hidden;
    }

    /* Burger */
    .header__main .menu__toggle {
        display: block;
        cursor: pointer;
        width: 44px;
        height: 44px;
        border-radius: var(--border-radius-full);
        background: var(--white);
        box-shadow: 0 8px 30px -12px rgba(1, 22, 55, 0.15);
        padding: 10px;
        object-fit: contain;
    }

    /* Drawer — état fermé */
    .header__main .menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 320px;
        max-width: 100vw;
        background: var(--white);
        z-index: 50;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        box-shadow: -8px 0 40px rgba(8, 17, 37, 0.15);
        overflow: hidden;
    }

    /* Drawer — état ouvert */
    .header__main .menu.open {
        transform: translateX(0);
    }

    /* En-tête du drawer : logo + bouton X */
    .mobile-menu__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .mobile-menu__logo img {
        height: 44px;
        width: auto;
    }

    .mobile-menu__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-full);
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-deep-blue);
        transition: background 0.2s ease;
        flex-shrink: 0;
    }

    .mobile-menu__close:hover {
        background: var(--color-border);
    }

    /* Corps scrollable du drawer */
    .mobile-menu__body {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

    /* Séparateur entre nav principal et top-menu */
    .mobile-menu__separator {
        height: 1px;
        background: var(--color-border);
        margin: 20px 0;
        flex-shrink: 0;
    }

    /* Items du menu principal en mobile */
    .mobile-menu__body .menu__main {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
        background: none;
        overflow: visible;
    }

    .mobile-menu__body .menu__main li {
        list-style: none;
    }

    .mobile-menu__body .menu__main li::before,
    .mobile-menu__body .menu__main li::marker {
        display: none;
    }

    .mobile-menu__body .menu__main > .menu-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: var(--medium);
        color: var(--color-deep-blue);
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .mobile-menu__body .menu__main > .menu-item > a:hover {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-deep-blue);
    }

    /* Chevron sur les items avec sous-menu (mobile) — sélecteur descendant (pas
       enfant direct) : couvre le 1er niveau ET tout niveau imbriqué (ex. un
       item de 2e niveau qui a lui-même un 3e niveau, cf. sub-menu--level-1). */
    .mobile-menu__body .menu__main .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.25s ease;
        flex-shrink: 0;
        margin-left: 8px;
    }

    /* Rotation du chevron quand sous-menu ouvert (tout niveau) */
    .mobile-menu__body .menu__main .menu-item-has-children.sub-menu-open > a::after {
        transform: rotate(180deg);
    }

    /* Sous-menu mobile : accordéon — sélecteur descendant, tout niveau. Un
       sous-menu imbriqué hérite du margin-left de son propre parent déjà
       indenté : l'indentation s'additionne naturellement à chaque niveau. */
    .mobile-menu__body .menu__main .menu-item > .sub-menu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        list-style: none;
    }

    .mobile-menu__body .menu__main .menu-item.sub-menu-open > .sub-menu {
        max-height: 1200px;
        opacity: 1;
        margin-top: 4px;
        padding-bottom: 4px;
    }

    .mobile-menu__body .menu__main .sub-menu > .menu-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: var(--medium);
        color: rgba(8, 17, 37, 0.7);
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .mobile-menu__body .menu__main .sub-menu > .menu-item > a:hover {
        color: var(--color-cta);
        background: none;
    }

    /* 3e niveau et au-delà : même logique d'accordéon/indentation que le 2e
       niveau (règles génériques ci-dessus), avec un filet vertical à gauche
       pour rattacher visuellement les items à leur parent — sans lui, au 3e/4e
       niveau l'indentation seule ne suffisait plus à lire la hiérarchie. */
    .mobile-menu__body .menu__main .sub-menu .sub-menu {
        margin-left: 12px;
        padding-left: 8px;
        border-left: 1px solid rgba(8, 17, 37, 0.12);
    }

    .mobile-menu__body .menu__main .sub-menu .sub-menu > .menu-item > a {
        padding: 6px 12px;
        font-size: 12px;
        color: rgba(8, 17, 37, 0.55);
    }

    /* 4e niveau et au-delà : un cran plus discret encore, la profondeur
       restant lisible grâce au filet + à l'indentation cumulée. */
    .mobile-menu__body .menu__main .sub-menu .sub-menu .sub-menu > .menu-item > a {
        font-size: 11.5px;
        color: rgba(8, 17, 37, 0.45);
    }

    /* Chevrons des niveaux profonds : réduits pour ne pas dominer le libellé */
    .mobile-menu__body .menu__main .sub-menu .menu-item-has-children > a::after {
        width: 12px;
        height: 12px;
        margin-left: 6px;
    }

    /* CTA "Se connecter" dans le drawer mobile — piloté par ACF */
    .header__cta--drawer {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .header__cta--drawer .header__cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 48px;
        border-radius: var(--border-radius-full);
        background: var(--color-cta);
        color: var(--white);
        text-decoration: none;
        font-size: 14px;
        font-weight: var(--medium);
        transition: background 0.25s ease;
    }

    .header__cta--drawer .header__cta-btn:hover {
        background: var(--color-deep-blue);
        color: var(--white) !important;
    }

    .header__cta--drawer .header__cta-picto {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        line-height: 0;
        width: 18px;
        height: 18px;
    }

    /* Cacher le CTA barre-header sur mobile */
    .header__cta--bar {
        display: none;
    }

    /* Top-menu items dans le drawer mobile */
    .mobile-menu__top-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu__top-list li::before,
    .mobile-menu__top-list li::marker {
        display: none;
    }

    .mobile-menu__top-list > .menu-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: var(--medium);
        color: rgba(8, 17, 37, 0.7);
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .mobile-menu__top-list > .menu-item > a:hover {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-deep-blue);
    }

    /* Sous-menus du top-menu mobile ("Congrès", etc.) — même accordéon/chevron
       que le menu principal (règles génériques ci-dessus, étendues à
       .mobile-menu__top-list plutôt que dupliquées). */
    .mobile-menu__top-list .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.25s ease;
        flex-shrink: 0;
        margin-left: 8px;
    }

    .mobile-menu__top-list .menu-item-has-children.sub-menu-open > a::after {
        transform: rotate(180deg);
    }

    .mobile-menu__top-list .menu-item > .sub-menu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        list-style: none;
    }

    .mobile-menu__top-list .menu-item.sub-menu-open > .sub-menu {
        max-height: 1200px;
        opacity: 1;
        margin-top: 4px;
        padding-bottom: 4px;
    }

    .mobile-menu__top-list .sub-menu > .menu-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: var(--medium);
        color: rgba(8, 17, 37, 0.7);
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .mobile-menu__top-list .sub-menu > .menu-item > a:hover {
        color: var(--color-cta);
        background: none;
    }

    /* 3e niveau et au-delà : filet vertical + typo dégressive (cf. la même
       logique dans .mobile-menu__body plus haut). */
    .mobile-menu__top-list .sub-menu .sub-menu {
        margin-left: 12px;
        padding-left: 8px;
        border-left: 1px solid rgba(8, 17, 37, 0.12);
    }

    .mobile-menu__top-list .sub-menu .sub-menu > .menu-item > a {
        padding: 6px 12px;
        font-size: 12px;
        color: rgba(8, 17, 37, 0.55);
    }

    .mobile-menu__top-list .sub-menu .sub-menu .sub-menu > .menu-item > a {
        font-size: 11.5px;
        color: rgba(8, 17, 37, 0.45);
    }

    .mobile-menu__top-list .sub-menu .menu-item-has-children > a::after {
        width: 12px;
        height: 12px;
        margin-left: 6px;
    }

    /* Cacher les éléments desktop-only */
    .mobile-menu__header,
    .mobile-menu__body,
    .mobile-menu__separator,
    .mobile-menu__top-list {
        /* visibles dans le drawer mobile */
    }
}

/* ============================================================
   HEADER — structure commune (toutes tailles)
   ============================================================ */
.header {
    position: fixed;
    top: 0;
    transition: var(--transition);
    z-index: 1001;
    width: 100%;
}

/* Décalage sous la barre top (768px+) — hauteur RÉELLE mesurée en JS (js/_menu.js,
   ResizeObserver sur .top-header) et posée dans --top-header-height sur :root,
   jamais figée : le top_menu peut passer sur 2 lignes selon la largeur/le nombre
   d'items (ex. switcher de langue Polylang), une valeur fixe ferait chevaucher
   le header dès que .top-header dépasse 36px de haut. 36px reste le repli tant
   que le JS n'a pas encore mesuré (avant le premier paint JS, ou si désactivé). */
@media (min-width: 768px) {
    .header {
        top: var(--top-header-height, 36px);
    }
}

/* Fond translucide au scroll */
.header.scrolling {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Mobile/tablette : pas de backdrop-filter. Il fait du header le bloc conteneur de ses enfants
   en position: fixed, et le tiroir du menu mobile (.menu, dans le header) était alors coupé à la
   hauteur du header dès qu'on avait défilé (05/10/2026). Fond plus opaque à la place du flou. */
@media (max-width: 1023px) {
    .header.scrolling {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.header__main {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 14px;
    
    @media (min-width: 576px) {
        padding: 14px 0;
    }
}

@media (min-width: 1199px) {
    .header__main {
        padding: 20px 0;
    }
}

/* Logo */
.header__main .header__logo {
    align-self: center;
    display: block;
    position: relative;
    flex-shrink: 0;
}

.header__main .header__logo img {
    height: 64px;
    width: auto;
    transition: opacity 0.3s ease;
}

@media (min-width: 1199px) {
    .header__main .header__logo img {
        height: 90px;
    }
}

.header__main .header__logo:hover img {
    opacity: 0.8;
}

/* ============================================================
   DESKTOP — pill nav (min-width: 1199px)
   ============================================================ */
@media (min-width: 1199px) {

    /* Masquer les éléments mobiles */
    .mobile-menu__header,
    .mobile-menu__body .mobile-menu__separator,
    .mobile-menu__top-list {
        display: none !important;
    }

    /* Sur desktop, mobile-menu__body est un simple conteneur transparent */
    .mobile-menu__body {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0;
        flex: none;
        overflow: visible;
    }

    /* Burger : masqué */
    .menu_mobile,
    .menu__toggle {
        display: none !important;
    }

    /* Nav container (pill) */
    .header__main .menu {
        display: flex;
        align-items: center;
        position: static;
        transform: none;
        background: var(--white);
        border-radius: var(--border-radius-full);
        box-shadow: 0 8px 30px -12px rgba(1, 22, 55, 0.15);
        padding: 12px;
        gap: 0;
        height: auto;
        width: auto;
        flex-shrink: 0;
        border: none;
        overflow: visible;
        transition: box-shadow 0.3s ease;
    }

    /* Liste principale */
    .header__main .menu .menu__main {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        background: none;
        min-height: 0;
        overflow: visible;
        flex-direction: row;
    }

    .header__main .menu .menu__main li {
        list-style: none;
    }

    .header__main .menu .menu__main li::before,
    .header__main .menu .menu__main li::marker {
        display: none;
    }

    /* Items de 1er niveau */
    .header__main .menu .menu__main > .menu-item {
        position: relative;
        padding: 0;
        overflow: visible;
        height: fit-content;
    }

    /* Lien / texte d'item */
    .header__main .menu .menu__main > .menu-item > a,
    .header__main .menu .menu__main > .menu-item > span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 8px;
        border-radius: var(--border-radius-full);
        color: var(--color-deep-blue) !important;
        font-size: 13.5px;
        line-height: 1.2;
        font-weight: var(--medium);
        white-space: nowrap;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    /* Hover : fond pêche */
    .header__main .menu .menu__main > .menu-item:hover > a,
    .header__main .menu .menu__main > .menu-item:hover > span {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-deep-blue) !important;
    }

    /* Chevron sur items avec sous-menu */
    .header__main .menu .menu__main > .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    /* Rotation du chevron au survol */
    .header__main .menu .menu__main > .menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }

    /* Sous-menu : carte blanche en liste verticale */
    .header__main .menu .menu__main > .menu-item > .sub-menu {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        top: calc(100% + 8px);
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 8px 30px -12px rgba(1, 22, 55, 0.25);
        padding: 8px;
        width: max-content;
        min-width: 200px;
        /* transition : opacity + translate (visibility gérée par pointer-events) */
        transition: opacity 0.2s ease, transform 0.2s ease;
        list-style: none;
        margin: 0;
        z-index: 100;
    }

    /* Pont invisible : étend la zone de survol pour éviter les "sauts" */
    .header__main .menu .menu__main > .menu-item > .sub-menu::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }

    /* Sous-menu visible au hover */
    .header__main .menu .menu__main > .menu-item:hover > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Items du sous-menu */
    .header__main .menu .menu__main > .menu-item > .sub-menu > .menu-item {
        min-height: 0;
    }

    .header__main .menu .menu__main > .menu-item > .sub-menu > .menu-item:not(:last-child) {
        margin-bottom: 2px;
    }

    .header__main .menu .menu__main > .menu-item > .sub-menu > .menu-item > a {
        display: block;
        padding: 8px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: var(--medium);
        color: var(--color-deep-blue) !important;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .header__main .menu .menu__main > .menu-item > .sub-menu > .menu-item > a span {
        color: var(--color-deep-blue) !important;
        font-size: 13.5px;
        font-weight: var(--medium);
    }

    .header__main .menu .menu__main > .menu-item > .sub-menu > .menu-item:hover > a {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-cta) !important;
    }

    .header__main .menu .menu__main > .menu-item > .sub-menu > .menu-item:hover > a span {
        color: var(--color-cta) !important;
    }

    /* Animation d'entrée du sous-menu */
    @keyframes submenuFadeIn {
        from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .header__main .menu .menu__main > .menu-item:hover > .sub-menu {
        animation: submenuFadeIn 0.2s ease-out;
    }

    /* ------------------------------------------------------------------ */
    /* 3e niveau ET AU-DELÀ (4e, 5e...) — sélecteurs descendants volontaires */
    /* (.sub-menu .sub-menu) : un menu WordPress peut être imbriqué sans     */
    /* limite, les règles doivent donc valoir à toute profondeur et pas      */
    /* seulement pour sub-menu--level-1 comme auparavant.                    */
    /* Même carte blanche, même timing et même logique de survol que le 2e   */
    /* niveau, mais ouverture LATÉRALE à droite du parent (translateX) au    */
    /* lieu de verticale, avec un chevron pointant vers la droite.           */
    /* ------------------------------------------------------------------ */

    /* Ancre de positionnement du flyout */
    .header__main .menu .menu__main .sub-menu .menu-item-has-children {
        position: relative;
    }

    /* Le lien parent passe en flex pour caler le chevron à droite */
    .header__main .menu .menu__main .sub-menu .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Chevron droit : même asset que le 1er niveau, pivoté de -90° */
    .header__main .menu .menu__main .sub-menu .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-90deg);
        transition: transform 0.25s ease;
        flex-shrink: 0;
        position: relative;
        top: 3px;
    }

    /* Sous-sous-menu : carte blanche, à droite du chevron */
    .header__main .menu .menu__main .sub-menu .sub-menu {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: calc(100% + 16px);
        top: -8px;
        transform: translateX(-6px);
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 8px 30px -12px rgba(1, 22, 55, 0.25);
        padding: 8px;
        width: max-content;
        min-width: 200px;
        transition: opacity 0.2s ease, transform 0.2s ease;
        list-style: none;
        margin: 0;
        z-index: 110;
    }

    /* Pont invisible : évite la coupure de survol entre le parent et le flyout */
    .header__main .menu .menu__main .sub-menu .sub-menu::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        width: 16px;
    }

    /* Visible au survol de l'item parent */
    .header__main .menu .menu__main .sub-menu .menu-item-has-children:hover > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        animation: submenuFlyoutIn 0.2s ease-out;
    }

    @keyframes submenuFlyoutIn {
        from { opacity: 0; transform: translateX(-6px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Variante gauche : posée par JS (js/_menu.js) quand le flyout, mesuré via
       getBoundingClientRect() au survol, déborderait du viewport à droite (ex.
       un 3e niveau sous un item de nav proche du bord droit, comme "Formations"
       ou "Ressources"). Même carte/logique, ouverture inversée. */
    .header__main .menu .menu__main .sub-menu .sub-menu.flyout-left {
        left: auto;
        right: calc(100% + 16px);
        transform: translateX(6px);
    }

    .header__main .menu .menu__main .sub-menu .sub-menu.flyout-left::before {
        left: auto;
        right: -16px;
    }

    .header__main .menu .menu__main .sub-menu .menu-item-has-children:hover > .sub-menu.flyout-left {
        transform: translateX(0);
        animation: submenuFlyoutInLeft 0.2s ease-out;
    }

    /* Variante haute : posée par JS quand le flyout déborderait sous le bas du
       viewport — cas courant aux niveaux profonds, dont l'item parent est déjà
       loin sous le header. Le bas du flyout s'aligne alors sur celui de son
       item parent au lieu du haut. */
    .header__main .menu .menu__main .sub-menu .sub-menu.flyout-up {
        top: auto;
        bottom: -8px;
    }

    /* Chevron du parent retourné quand la cascade part vers la gauche
       (classe .has-flyout-left posée par le même JS). */
    /* .header__main .menu .menu__main .sub-menu .menu-item-has-children.has-flyout-left > a::after {
        transform: rotate(90deg);
    } */

    @keyframes submenuFlyoutInLeft {
        from { opacity: 0; transform: translateX(6px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Items du 3e niveau : traitement identique au 2e niveau */
    .header__main .menu .menu__main .sub-menu .sub-menu > .menu-item {
        min-height: 0;
    }

    .header__main .menu .menu__main .sub-menu .sub-menu > .menu-item:not(:last-child) {
        margin-bottom: 2px;
    }

    .header__main .menu .menu__main .sub-menu .sub-menu > .menu-item > a {
        display: block;
        padding: 8px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: var(--medium);
        color: var(--color-deep-blue) !important;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .header__main .menu .menu__main .sub-menu .sub-menu > .menu-item > a span {
        color: var(--color-deep-blue) !important;
        font-size: 13.5px;
        font-weight: var(--medium);
    }

    .header__main .menu .menu__main .sub-menu .sub-menu > .menu-item:hover > a {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-cta) !important;
    }

    .header__main .menu .menu__main .sub-menu .sub-menu > .menu-item:hover > a span {
        color: var(--color-cta) !important;
    }

    /* CTA "Se connecter" dans la barre header — visible desktop seulement */
    .header__cta--bar {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 8px;
    }

    .header__cta--bar .header__cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 13px 10px;
        border-radius: var(--border-radius-full);
        background: var(--color-cta);
        color: var(--white);
        text-decoration: none;
        font-size: 13.5px;
        font-weight: var(--medium);
        line-height: 1;
        white-space: nowrap;
        transition: background 0.25s ease;
        margin: 0;
    }

    .header__cta--bar .header__cta-btn:hover {
        background: var(--color-deep-blue);
        color: var(--white) !important;
    }

    .header__cta--bar .header__cta-picto {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        line-height: 0;
        width: 15px;
        height: 15px;
    }

    /* Cacher le CTA mobile-drawer sur desktop */
    .header__cta--drawer {
        display: none;
    }

    /* Forcer deep-blue sur tous les items nav au scroll */
    .header.scrolling .menu .menu__main > .menu-item > a,
    .header.scrolling .menu .menu__main > .menu-item > span,
    .header:not(.home) .menu .menu__main > .menu-item > a,
    .header:not(.home) .menu .menu__main > .menu-item > span {
        color: var(--color-deep-blue) !important;
    }
}

@media (min-width: 1399px) {
    .header__cta--bar .header__cta-btn {
        padding: 13px 20px;
    }

    .header__main .menu .menu__main > .menu-item > a {
        padding: 8px 14px;
    }
}

/* ============================================================
   CERF — Top header (barre supérieure deep-blue, ≥768px)
   ============================================================ */
.top-header {
    display: none;
    background: var(--color-deep-blue);
    color: var(--white);
    width: 100%;
}

@media (min-width: 768px) {
    .top-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* z-index 999 < header 1000 : le drawer (dans le header) passe
           au-dessus du top-header quand il est ouvert sur tablette */
        z-index: 999;
    }
}

.top-header__inner {
    /* min-height (pas height) : le menu top_menu peut désormais compter plus
       d'items (switcher de langue Polylang inclus) qu'une seule ligne de 36px ne
       peut contenir sur les largeurs tablette/mobile — une hauteur figée ferait
       déborder le contenu par-dessus le .header en dessous (cf. .lang-item et
       top-header__list en flex-wrap ci-dessous, qui passent alors sur 2 lignes
       proprement plutôt que de chevaucher le header). La hauteur réelle est
       mesurée en JS (js/_menu.js) et appliquée à .header via --top-header-height,
       donc jamais figée sur une valeur supposée. */
    min-height: 36px;
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 4px;

    @media (min-width: 768px) {
        .top-header__nav {
            width: 100%;
            
            .top-header__list {
                .lang-item:not(:first-child) {
                    margin-right: auto;
                }
            }
        }
    }
}

/* Sélecteur de langue Polylang (2 items "FR"/"EN" ajoutés manuellement en tête du
   menu "top_menu", cf. header.php — plus l'ancien sélecteur codé en dur) : même
   rendu visuel exact que l'ancien .top-header__lang-btn (texte blanc 12px, item
   courant en pleine opacité/les autres à 50%,séparateur "/" au lieu de la barre
   verticale générique des autres items du top-menu, cf. règle
   .top-header__list > .menu-item:not(:last-child)::after ci-dessous). */
.top-header__nav .top-header__list > .lang-item {
    opacity: 0.5;
    transition: var(--transition);
}

.top-header__nav .top-header__list > .lang-item.current-lang {
    opacity: 1;
}

.top-header__nav .top-header__list > .lang-item > a {
    padding: 0 2px;
}

.top-header__nav .top-header__list > .lang-item > a:hover {
    color: var(--color-primary-light);
}

.top-header__nav .top-header__list > .lang-item:hover {
    opacity: 1;
}

.top-header__nav .top-header__list > .lang-item.lang-item-fr:not(:last-child)::after {
    content: '/';
    display: inline-block;
    width: auto;
    height: auto;
    background: none;
    opacity: 0.3;
    margin: 0 3px;
    font-size: 12px;
    line-height: 1;
}

/* Navigation du top-header */
.top-header__nav .top-header__list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-header__nav .top-header__list > .menu-item {
    display: flex;
    align-items: center;
}

.top-header__nav .top-header__list > .menu-item:not(:last-child):not(.lang-item)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 13px;
}

.top-header__nav .top-header__list > .menu-item > a {
    color: var(--white);
    font-size: 12px;
    font-family: var(--main-font);
    font-weight: var(--regular);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.top-header__nav .top-header__list > .menu-item > a:hover {
    color: var(--color-primary-light);

    &:before {
        filter: brightness(0) saturate(100%) invert(56%) sepia(56%) saturate(2446%) hue-rotate(186deg) brightness(96%) contrast(94%);
    }
}

/* Icône cadenas sur les pages réservées aux membres (classe menu-item--locked
   posée par Custom_Menu_Walker quand « Réservée aux membres » est renseigné) */
.top-header__nav .top-header__list > .menu-item.menu-item--locked > a::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================================
   Sous-menus du top-menu ("Congrès", etc.) — même carte blanche/flyout que le
   menu principal (.header__main .menu .menu__main, cf. plus haut), adaptée à
   la barre top compacte. Actif dès 768px (comme .top-header lui-même), pas
   seulement ≥1199px : la barre top reste une bande utilitaire à part, visible
   même quand le menu principal est encore en mode drawer mobile.
   ============================================================ */
@media (min-width: 768px) {
    /* Le survol relève temporairement .top-header au-dessus de .header : sans
       ça, la carte de sous-menu (qui déborde sous la barre top, dans la zone du
       header) serait coupée/masquée par .header (z-index 1001 > top-header 999,
       cf. commentaire "z-index stack" en tête de fichier) — le drawer mobile
       reste prioritaire sur .top-header en dehors de ce survol. */
    .top-header:has(.top-header__nav .menu-item-has-children:hover) {
        z-index: 1002;
    }

    .top-header__nav .top-header__list > .menu-item.menu-item-has-children {
        position: relative;
    }

    /* Chevron sur "Congrès" (blanc, cohérent avec le texte du top-menu) */
    .top-header__nav .top-header__list > .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: brightness(0) invert(1);
        transition: transform 0.25s ease;
        flex-shrink: 0;
        margin-left: 4px;
    }

    .top-header__nav .top-header__list > .menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }

    /* Sous-menu : carte blanche en liste verticale (identique au menu principal) */
    .top-header__nav .top-header__list > .menu-item > .sub-menu {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: calc(100% + 8px);
        transform: translateY(-6px);
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 8px 30px -12px rgba(1, 22, 55, 0.25);
        padding: 8px;
        width: max-content;
        min-width: 200px;
        transition: opacity 0.2s ease, transform 0.2s ease;
        list-style: none;
        margin: 0;
        z-index: 100;
    }

    /* Pont invisible : étend la zone de survol pour éviter les "sauts" */
    .top-header__nav .top-header__list > .menu-item > .sub-menu::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }

    .top-header__nav .top-header__list > .menu-item:hover > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .top-header__nav .top-header__list > .menu-item > .sub-menu > .menu-item {
        min-height: 0;
    }

    .top-header__nav .top-header__list > .menu-item > .sub-menu > .menu-item:not(:last-child) {
        margin-bottom: 2px;
    }

    .top-header__nav .top-header__list > .menu-item > .sub-menu > .menu-item > a {
        display: block;
        padding: 8px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: var(--medium);
        color: var(--color-deep-blue) !important;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .top-header__nav .top-header__list > .menu-item > .sub-menu > .menu-item:hover > a {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-cta) !important;
    }

    /* 3e niveau (sous-sous-menu, ex. "Radiologie Aujourd'hui et Demain - RAD") :
       flyout latéral, même logique que le menu principal. */
    .top-header__nav .top-header__list .sub-menu .menu-item-has-children {
        position: relative;
    }

    .top-header__nav .top-header__list .sub-menu .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .top-header__nav .top-header__list .sub-menu .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-90deg);
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: calc(100% + 16px);
        top: -8px;
        transform: translateX(-6px);
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 8px 30px -12px rgba(1, 22, 55, 0.25);
        padding: 8px;
        width: max-content;
        min-width: 200px;
        transition: opacity 0.2s ease, transform 0.2s ease;
        list-style: none;
        margin: 0;
        z-index: 110;
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        width: 16px;
    }

    .top-header__nav .top-header__list .sub-menu .menu-item-has-children:hover > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    /* Variante gauche : posée par JS (js/_menu.js) quand le flyout déborderait
       du viewport à droite — même mécanisme que le menu principal. */
    .top-header__nav .top-header__list .sub-menu .sub-menu.flyout-left {
        left: auto;
        right: calc(100% + 16px);
        transform: translateX(6px);
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu.flyout-left::before {
        left: auto;
        right: -16px;
    }

    .top-header__nav .top-header__list .sub-menu .menu-item-has-children:hover > .sub-menu.flyout-left {
        transform: translateX(0);
    }

    /* Variante haute (cf. .header__main plus haut) */
    .top-header__nav .top-header__list .sub-menu .sub-menu.flyout-up {
        top: auto;
        bottom: -8px;
    }

    /* Chevron du parent retourné (cf. .header__main plus haut) */
    .top-header__nav .top-header__list .sub-menu .menu-item-has-children.has-flyout-left > a::after {
        transform: rotate(90deg);
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu > .menu-item {
        min-height: 0;
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu > .menu-item:not(:last-child) {
        margin-bottom: 2px;
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu > .menu-item > a {
        display: block;
        padding: 8px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: var(--medium);
        color: var(--color-deep-blue) !important;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .top-header__nav .top-header__list .sub-menu .sub-menu > .menu-item:hover > a {
        background: rgba(255, 225, 215, 0.5);
        color: var(--color-cta) !important;
    }
}