/* Styles de includes/header.php (extraits de la page, même ordre) */

        @font-face {
            font-family: 'Alexandria';
            src: url('../assets/fonts/Alexandria-Variable.ttf') format('truetype');
            font-style: normal;
            font-weight: 400 800;
            font-display: swap;
        }

        :root {
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            /* overflow-x: hidden (au lieu de clip) transformerait aussi overflow-y en "auto"
               (règle CSS d'interop des axes), ce qui fait de <html> un conteneur de scroll à
               part entière et casse position:sticky pour tout descendant direct de <body>
               (le header ne reste plus collé en haut au scroll). clip bloque le débordement
               horizontal sans ce à-côté. */
            overflow-x: clip;
        }

        body {
            font-family: 'Alexandria', sans-serif;
            line-height: 1.6;
            background-color: var(--primary-color);
            overflow-x: clip;
            max-width: 100vw;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Alexandria', sans-serif;
        }

        /* Top Bar */
        .top-bar {
            background: linear-gradient(135deg, var(--green-color));
            color: var(--light-color);
            font-size: 0.85rem;
            overflow: visible;
            /* allow dropdowns to overflow */
        }

        .top-bar a {
            color: var(--light-color);
            text-decoration: none;
            padding: 0.3rem 0.8rem;
            transition: all 0.3s;
        }

        .top-bar a:hover {
            color: white;
        }

        /* Main Header */
        .main-header {
            background-color: white;
            border-bottom: 4px solid var(--secondary-color);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .university-logo-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo-emblem {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--secondary-color), #DAA520);
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            box-shadow: 0 4px 15px rgba(231, 180, 115, 0.4);
        }

        .university-logo-text .logo-main {
            font-size: 1.6rem;
            font-weight: bold;
            color: var(--secondary-color);
            line-height: 1.2;
        }

        .university-logo-text .logo-subtitle {
            font-size: 0.95rem;
            color: #666;
        }

        .header-info {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .header-info-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #666;
            font-size: 0.9rem;
        }

        .header-info-item i {
            color: var(--green-color);
            font-size: 1.2rem;
        }

        .header-info-link {
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s;
        }

        .header-info-link:hover {
            color: var(--green-color);
        }

        /* Newsletter : champ email directement dans le bandeau d'infos (au lieu d'un lien qui
           ouvrait la modal), pour permettre l'inscription en un seul clic. */
        .header-newsletter-inline {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            background: #f4f4f4;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 0;
            padding: 0.25rem 0.35rem 0.25rem 0.75rem;
            position: relative;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        }

        .header-newsletter-inline>i {
            color: var(--green-color);
            font-size: 1rem;
            flex-shrink: 0;
        }

        .header-newsletter-input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 0.82rem;
            width: 118px;
            color: var(--dark-color);
        }

        .header-newsletter-input::placeholder {
            color: #999;
        }

        .header-newsletter-submit {
            border: none;
            background: var(--green-color);
            color: var(--light-color);
            width: 26px;
            height: 26px;
            min-width: 26px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            transition: transform 0.15s ease, opacity 0.15s ease;
        }

        .header-newsletter-submit:hover {
            transform: scale(1.08);
        }

        .header-newsletter-submit:disabled {
            opacity: 0.6;
        }

        .header-newsletter-inline .newsletter-feedback {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 0.5rem;
            background: #fff;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
            padding: 0.45rem 0.9rem;
            border-radius: 0;
            font-size: 0.78rem;
            white-space: nowrap;
            z-index: 50;
        }

        .header-newsletter-inline .newsletter-feedback:empty {
            display: none;
        }

        /* Header action buttons (Admission / Soutenir) — collés l'un à l'autre, sans espace */
        .header-action-btns {
            display: flex;
            align-items: center;
            gap: 0;
        }

        .header-action-btns .btn {
            border-radius: 0;
            padding: 0.45rem 0.9rem;
            font-weight: 700;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .header-action-btns .btn:not(:first-child) {
            margin-left: -1px;
        }

        .header-action-btns .btn:first-child {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .header-action-btns .btn:last-child {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        .header-action-btns .btn .btn-text {
            margin-left: 0;
        }

        .header-action-btns .btn-primary {
            background-color: var(--green-color);
            color: var(--primary-color);
            border: none;
        }

        .header-action-btns .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
        }

        .header-action-btns .btn-outline-secondary {
            background: transparent;
            color: var(--green-color);
            border: 1px solid rgba(0, 0, 0, 0.08);
        }

        .header-action-btns .btn-outline-secondary:hover {
            background: rgba(231, 180, 115, 0.08);
            color: var(--dark-color);
        }

        /* Mobile: texte toujours visible, taille réduite */
        @media (max-width: 576px) {
            .header-action-btns .btn {
                padding: 0.35rem 0.6rem;
                font-size: 0.72rem;
                letter-spacing: 0;
            }
        }

        /* Navigation */
        .navbar-main {
            background: linear-gradient(135deg, var(--dark-color), #34495e);
            padding: 0;
        }

        /* Le menu est étalé sur toute la largeur (voir .navbar-nav ci-dessous), donc le .container
           n'a plus besoin de centrer un bloc plus étroit que lui — justify-content n'a alors aucun
           effet visible puisque .navbar-collapse occupe déjà 100% de sa largeur. */
        .navbar-main .container {
            justify-content: center !important;
            /* Container query : les liens se dimensionnent d'après la largeur RÉELLE de ce
               .container (qui, à cause du max-width de Bootstrap, est plus étroit que la fenêtre
               sur grand écran) et non d'après la largeur de la fenêtre (vw) — sinon le calcul est
               faux sur les grands écrans et le menu déborde quand même du container. */
            container-type: inline-size;
        }

        /* Pas d'overflow-x:auto ici : ça forcerait aussi overflow-y en "auto" (règle CSS — un axe
           ne peut pas rester "visible" si l'autre ne l'est pas), ce qui coupe les menus déroulants
           (position:absolute, donc ils débordent verticalement de la barre) au lieu de les laisser
           flotter par-dessus la page. Le calibrage cqw ci-dessous garantit déjà que le menu tient
           en largeur ; si un cas extrême dépasse quand même, il déborde visuellement (pas coupé)
           plutôt que de casser les dropdowns. */
        .navbar-main .navbar-collapse {
            max-width: 100%;
            width: 100%;
        }

        /* Étale les liens sur toute la largeur de la barre (espacement égal entre eux, comme
           justify-content:space-between) au lieu de les laisser former un petit bloc centré avec
           du vide de chaque côté — visible surtout sur grand écran depuis que le menu compte moins
           de liens (12 -> 8). */
        .navbar-main .navbar-nav {
            width: 100%;
            justify-content: space-between;
        }

        /* Les liens restent sur une seule ligne (pas de retour à la ligne) : au lieu de ça, leur
           taille de police, padding et marge rétrécissent en continu avec la largeur du container
           (cqw = % de la largeur du .container ci-dessus). Les coefficients interpolent linéairement
           entre 960px (breakpoint lg, le plus étroit) et 1320px (xxl, le plus large).
           Recalibré pour 12 liens (le menu compte aujourd'hui Accueil, Comité Directeur, Rectorat,
           Administration, Facultés, Formations, Campus, Actualités, Événements, Recherche, Impact
           UNAH, À propos — le calibrage précédent visait 10 liens et débordait du container/de la
           page entre 960px et ~1300px). Les bornes minimales incluent volontairement une marge de
           sécurité (~15-20%) plutôt qu'un ajustement pile au pixel près, pour qu'un futur ajout d'un
           lien au menu ne fasse pas immédiatement redéborder la barre. Rien n'est masqué : tout
           rétrécit dynamiquement. */
        .navbar-main .nav-link {
            color: white !important;
            font-weight: 300;
            /* Plancher de padding réduit (était 0.28rem, plafond à 1320px inchangé à 0.7rem)
               pour compenser la police agrandie ci-dessous aux largeurs étroites (~992-1199px,
               où le container Bootstrap est figé à 960px). */
            padding: 1rem clamp(0.28rem, 1.87cqw - 0.84rem, 0.7rem);
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
            /* Plancher remonté de 0.6rem (~9.6px, illisible) à 0.75rem (~12px). Plafond
               VOLONTAIREMENT laissé à 0.95rem (inchangé) : le monter à 1rem faisait déborder
               le menu même au plus large (1320px+) — ce plafond était déjà calibré pile au bord. */
            font-size: clamp(0.68rem, 1.2cqw - 0.04rem, 0.95rem);
            margin-left: clamp(1px, 0.83cqw - 7px, 4px);
            white-space: nowrap;
            /* EMPÊCHE LE RETOUR À LA LIGNE DES TEXTES LONGS */
        }

        .navbar-main .nav-link:hover,
        .navbar-main .nav-link.active,
        .navbar-main .nav-link.dropdown-toggle.show,
        .navbar-main .nav-item.dropdown:hover>.nav-link.dropdown-toggle {
            background-color: rgba(255, 255, 255, 0.06);
            border-bottom-color: var(--secondary-color);
            color: var(--secondary-color) !important;
        }

        /* Focus clavier propre (au lieu du contour bleu par défaut du navigateur, qui jure
           sur un fond sombre) */
        .navbar-main .nav-link:focus-visible {
            outline: 2px solid var(--secondary-color);
            outline-offset: -3px;
        }

        /* Chevron du dropdown : pivote en douceur à l'ouverture, qu'elle vienne du survol,
           du clic ou du clavier */
        .navbar-main .dropdown-toggle::after {
            transition: transform 0.25s ease;
            vertical-align: 0.15em;
        }

        .navbar-main .dropdown-toggle.show::after,
        .navbar-main .nav-item.dropdown:hover>.dropdown-toggle::after {
            transform: rotate(180deg);
        }

        .navbar-main .dropdown-menu {
            border: none;
            border-radius: 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            margin-top: 0;
        }

        /* L'animation d'ouverture/fermeture par opacity/transform (au lieu du display:none/block
           instantané de Bootstrap) ne vaut que pour le menu déroulant DESKTOP (position:absolute,
           donc son état "invisible" n'occupe aucun espace dans la page). En dessous de lg, Bootstrap
           rend le sous-menu en position:static À L'INTÉRIEUR du menu mobile replié : y forcer
           display:block en permanence réserverait la hauteur du sous-menu fermé (gros espace vide
           sous "Administration", "Formations", etc. dans le hamburger) — cf. bug rapporté sur mobile.
           Sous lg on garde donc le display:none/block standard de Bootstrap. */
        @media (min-width: 1200px) {
            .navbar-main .dropdown-menu {
                display: block !important;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px) scale(0.97);
                transform-origin: top center;
                pointer-events: none;
                transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.25s;
            }

            .navbar-main .dropdown-menu.show {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }
        }

        /* Méga-menu "Gouvernance" (remplace les anciens items top-level Comité Directeur /
           Rectorat / Administration) : un seul dropdown avec un visuel + 3 colonnes de liens.
           En dessous de xl (menu mobile replié dans le hamburger), on retombe sur un simple
           empilement vertical sans le visuel, pour ne pas alourdir le menu mobile (même logique
           que les autres dropdowns, cf. commentaire plus haut sur .navbar-main .dropdown-menu). */
        .mega-dropdown {
            position: static;
        }

        .mega-menu-visual {
            display: none;
        }

        .mega-menu-col {
            padding: 0.75rem 1.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }

        .mega-menu-col:first-child {
            border-top: none;
        }

        .mega-menu-col-title {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--green-color);
            margin: 0 0 0.4rem;
        }

        .mega-menu-link {
            display: flex;
            align-items: center;
            padding: 0.5rem 0;
            color: var(--black-color);
            font-size: 0.88rem;
            text-decoration: none;
            line-height: 1.3;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .mega-menu-link:hover,
        .mega-menu-link:focus-visible {
            color: var(--secondary-color);
            padding-left: 0.35rem;
        }

        .mega-menu-link-cta {
            display: inline-flex;
            background: var(--dark-color);
            color: #fff !important;
            border-radius: 0;
            justify-content: center;
            padding: 0.6rem 1.1rem;
            font-weight: 600;
            margin-top: 0.3rem;
        }

        .mega-menu-link-cta:hover {
            background: var(--secondary-color);
            color: var(--dark-color) !important;
            padding-left: 1.1rem;
        }

        @media (min-width: 1200px) {
            .navbar-main .mega-dropdown .mega-menu {
                /* Spécificité (3 classes) volontairement plus élevée que la règle générique
                   ".navbar-main .dropdown-menu { display:block !important; }" plus haut, qui
                   sinon gagne quand même face à un simple ".mega-menu { display:flex !important }"
                   (à !important égal, c'est la spécificité qui départage, pas l'ordre). */
                display: flex !important;
                align-items: stretch;
                width: min(780px, 94vw);
                overflow: hidden;
                padding: 0;
                left: 50%;
                transform: translateX(-50%) translateY(-10px) scale(0.97);
            }

            .navbar-main .mega-dropdown .mega-menu.show {
                transform: translateX(-50%) translateY(0) scale(1);
            }

            /* Panneau plus étroit que la version d'origine (170px au lieu de 220px), mais l'image
               remplit à nouveau tout le panneau (largeur ET hauteur), légende en surimpression. */
            .mega-menu-visual {
                display: block;
                position: relative;
                flex: 0 0 170px;
                background: var(--dark-color);
            }

            .mega-menu-visual img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                opacity: 0.92;
            }

            .mega-menu-visual-caption {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 14px 16px;
                background: linear-gradient(0deg, rgba(12, 35, 64, 0.92), rgba(12, 35, 64, 0));
                color: #fff;
                font-size: 0.76rem;
                font-weight: 600;
                line-height: 1.3;
            }

            .mega-menu-columns {
                flex: 1 1 auto;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
            }

            .mega-menu-col {
                border-top: none;
                border-left: 1px solid rgba(0, 0, 0, 0.08);
                padding: 1.25rem 1.1rem;
                display: flex;
                flex-direction: column;
            }

            .mega-menu-col:first-child {
                border-left: none;
            }

            .gouvernance-dropdown .mega-menu-col:last-child {
                justify-content: center;
                align-items: flex-start;
            }
        }

        /* Lien discret type "voir tout" au bas d'une colonne du méga-menu (ex. "Toutes les
           facultés", "Tous nos campus"), plus petit et grisé qu'un .mega-menu-link normal. */
        .mega-menu-link-muted {
            margin-top: 0.3rem;
            padding-top: 0.6rem;
            border-top: 1px dashed rgba(0, 0, 0, 0.1);
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--green-color);
        }

        .mega-menu-link-muted:hover,
        .mega-menu-link-muted:focus-visible {
            color: var(--dark-color);
        }

        /* Méga-menu "Entités et Programmes" (remplace Facultés / Formations / Nos Campus) :
           3 colonnes par entité (École, Faculté, Campus) au-dessus d'une rangée "par cycle". Pas
           de visuel latéral ici (contrairement à Gouvernance) donc pas besoin de display:flex —
           la règle générique ".navbar-main .dropdown-menu { display:block !important; }" convient
           déjà telle quelle pour empiler les deux sections verticalement. */
        .programs-menu {
            padding: 1.5rem 1.75rem;
        }

        .programs-cycles {
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }

        .programs-cycles-title {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--green-color);
            margin: 0 0 0.75rem;
        }

        .programs-cycles-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }

        .programs-cycle-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1rem;
            border-radius: 0;
            background: rgba(12, 35, 64, 0.05);
            color: var(--dark-color);
            font-size: 0.82rem;
            font-weight: 600;
            text-decoration: none;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .programs-cycle-pill:hover,
        .programs-cycle-pill:focus-visible {
            background: var(--dark-color);
            color: #fff;
        }

        .programs-cycle-pill-soon {
            cursor: default;
            background: rgba(0, 0, 0, 0.04);
            color: #8a8a8a;
        }

        .programs-cycle-pill-soon:hover {
            background: rgba(0, 0, 0, 0.04);
            color: #8a8a8a;
        }

        .programs-soon-badge {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: var(--green-color);
            color: var(--light-color);
            padding: 0.15rem 0.45rem;
            border-radius: 0;
        }

        @media (min-width: 1200px) {
            .navbar-main .entites-dropdown .programs-menu {
                left: 50%;
                width: min(940px, 94vw);
                transform: translateX(-50%) translateY(-10px) scale(0.97);
            }

            .navbar-main .entites-dropdown .programs-menu.show {
                transform: translateX(-50%) translateY(0) scale(1);
            }

            .programs-columns {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Icônes réseaux sociaux du top-bar, à côté de "CONTACT" et "MON ESPACE VIRTUEL" —
           mêmes réseaux que le footer. Couleur héritée de .top-bar a (voir plus haut), donc
           cohérentes avec CONTACT/MON ESPACE VIRTUEL sans style dédié. */
        .topbar-social-icons {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
        }

        .top-bar .topbar-social-icons a {
            padding: 0;
            display: inline-flex;
        }

        .topbar-social-icons svg {
            width: 16px;
            height: 16px;
            display: block;
            border-radius: 0;
            transition: transform 0.3s;
        }

        .topbar-social-icons a:hover svg {
            transform: scale(1.15);
        }

        .navbar-main .dropdown-item {
            padding: 0.7rem 1.5rem;
            border-left: 3px solid transparent;
            color: var(--dark-color);
            transition: background-color 0.2s ease, border-left-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
            white-space: nowrap;
            /* EMPÊCHE AUSSI LE RETOUR À LA LIGNE DANS LES SOUS-MENUS SI BESOIN */
        }

        /* Survol sobre : léger fond teinté + liseré de couleur, plutôt qu'un bloc plein —
           lecture plus institutionnelle, moins "bouton généré". */
        .navbar-main .dropdown-item:hover,
        .navbar-main .dropdown-item:focus {
            background-color: rgba(231, 180, 115, 0.14);
            border-left-color: var(--secondary-color);
            color: var(--dark-color);
            padding-left: 1.75rem;
        }

        .navbar-toggler {
            border-color: transparent;
            /* background: linear-gradient(135deg, var(--dark-color), #34495e); */
            /* padding: 0.25rem 0.45rem; */
            /* border-radius: 0; */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* hide default background SVG and use a font icon so we can style it */
        .navbar-toggler-icon {
            display: none;
        }

        /* bigger icon and white to match navbar contrast */
        .navbar-toggler i {
            font-size: 1.9rem;
            /* color: #fff; */
            color: var(--dark-color);
            line-height: 1;
        }

        .navbar-toggler:hover {
            filter: brightness(0.95);
        }

        /* Search Modal */
        .search-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 9999;
        }

        .search-overlay.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-box-large {
            max-width: 700px;
            width: 90%;
        }

        .search-box-large input {
            font-size: 1.5rem;
            padding: 1.5rem;
            border: 3px solid var(--secondary-color);
        }

        /* Marquee Animation */
        .marquee {
            color: #00642aff;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            padding: 8px 0;
        }

        .marquee__inner {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 20s linear infinite;
            font-weight: 700;
            text-transform: uppercase;
        }

        @keyframes marquee {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-100%, 0);
            }
        }

        /* Language Flags Bar Styling */
        .language-flags-bar {
            background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
            padding: 1rem 0;
            border-bottom: 2px solid var(--secondary-color);
        }

        .flags-container {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            justify-content: flex-start;
        }

        .flags-label {
            font-weight: 600;
            color: var(--dark-color);
            font-size: 0.9rem;
        }

        .flag-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 0;
            text-decoration: none;
            color: var(--dark-color);
            transition: all 0.3s ease;
            font-weight: 500;
            font-size: 0.95rem;
            border: 2px solid transparent;
        }

        .flag-link:hover {
            background-color: var(--secondary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 180, 115, 0.3);
        }

        .flag-link.active {
            background-color: var(--secondary-color);
            color: white;
            border-color: var(--secondary-color);
            box-shadow: 0 4px 12px rgba(231, 180, 115, 0.4);
        }

        .flag-icon {
            width: 24px;
            height: 16px;
            object-fit: cover;
            border-radius: 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Make sure language dropdown displays above other sections (e.g. header) */
        .top-bar .dropdown .dropdown-menu {
            z-index: 2000;
        }

        /* Language dropdown (FR / EN) */
        .lang-dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 700;
        }

        .lang-dropdown-toggle .flag-icon {
            width: 18px;
            height: 12px;
            box-shadow: none;
        }

        .lang-dropdown-menu {
            min-width: 170px;
            padding: 0.4rem;
            border: none;
            border-radius: 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .lang-dropdown-menu .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.55rem 0.75rem;
            border-radius: 0;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--dark-color);
        }

        .lang-dropdown-menu .dropdown-item:hover {
            background: rgba(231, 180, 115, 0.15);
        }

        .lang-dropdown-menu .dropdown-item.active {
            background: var(--secondary-color);
            color: var(--dark-color);
        }

        .lang-dropdown-menu .flag-icon {
            width: 20px;
            height: 14px;
            box-shadow: none;
        }

        /* Campus selection modal */
        .campus-modal-content {
            /* Palette verte propre au modal de choix du campus */
            --campus-green-dark: #14532d;
            --campus-green: #15803d;
            --campus-green-light: #22c55e;
            --campus-green-pale: #f0fdf4;
            border: none;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        }

        .campus-modal-header {
            background: linear-gradient(135deg, var(--campus-green-dark), var(--campus-green));
            border-bottom: 3px solid var(--campus-green-light);
            padding: 1.75rem 2rem;
            align-items: flex-start;
        }

        .campus-modal-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--secondary-color);
            font-weight: 700;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.5rem;
        }

        .campus-modal-title {
            color: #fff;
            font-weight: 700;
            font-size: 1.35rem;
            margin: 0;
        }

        .campus-modal-subtitle {
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.85rem;
            margin: 0.35rem 0 0;
        }

        .campus-modal-body {
            padding: 1.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            background: var(--campus-green-pale);
        }

        .campus-option {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.2rem;
            background: #fff;
            border: 2px solid #dcfce7;
            border-radius: 0;
            text-decoration: none;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .campus-option:hover {
            border-color: var(--campus-green-light);
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(21, 128, 61, 0.2);
        }

        .campus-option-icon {
            width: 46px;
            height: 46px;
            min-width: 46px;
            border-radius: 0;
            background: linear-gradient(135deg, var(--campus-green), var(--campus-green-light));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
        }

        .campus-option-text {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
        }

        .campus-option-name {
            font-weight: 700;
            color: var(--campus-green-dark);
            font-size: 1rem;
        }

        .campus-option-loc {
            font-size: 0.8rem;
            color: #777;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            margin-top: 0.15rem;
        }

        .campus-option-arrow {
            color: #ccc;
            font-size: 1.1rem;
            transition: transform 0.2s ease, color 0.2s ease;
        }

        .campus-option:hover .campus-option-arrow {
            color: var(--campus-green);
            transform: translateX(3px);
        }

        .campus-modal-footer {
            border-top: 1px solid #dcfce7;
            padding: 1rem 1.75rem 1.5rem;
            background: var(--campus-green-pale);
        }

        .campus-modal-footer .btn {
            color: var(--campus-green);
            border-color: var(--campus-green);
        }

        .campus-modal-footer .btn:hover {
            color: #fff;
            background: var(--campus-green);
            border-color: var(--campus-green);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .flags-container {
                gap: 0.8rem;
                justify-content: center;
                flex-wrap: wrap;
            }

            .flags-label {
                width: 100%;
                text-align: center;
                margin-bottom: 0.5rem;
            }

            .flag-link {
                padding: 0.4rem 0.8rem;
                font-size: 0.85rem;
            }

            .flag-icon {
                width: 20px;
                height: 14px;
            }

            .language-flags-bar {
                padding: 0.8rem 0;
            }
        }

        @media (max-width: 576px) {
            .flags-container {
                gap: 0.5rem;
            }

            .flag-link {
                padding: 0.3rem 0.6rem;
                font-size: 0.75rem;
            }

            .flag-link span {
                display: none;
            }

            .flag-icon {
                width: 18px;
                height: 12px;
            }

            .language-flags-bar {
                padding: 0.6rem 0;
            }
        }

        #languageSelect {
            background-color: transparent;
            border: 2px solid var(--secondary-color);
            border-radius: 0;
            color: var(--dark-color);
            font-weight: 600;
            padding: 0.4rem 0.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(231, 180, 115, 0.2);
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7b473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.5rem center;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
            background-color: transparent !important;
        }

        #languageSelect:hover {
            border-color: var(--dark-color);
            box-shadow: 0 4px 12px rgba(231, 180, 115, 0.4);
            background-color: rgba(250, 248, 243, 0.5) !important;
        }

        #languageSelect:focus {
            outline: none;
            border-color: var(--dark-color);
            box-shadow: 0 0 0 3px rgba(231, 180, 115, 0.3);
            background-color: rgba(250, 248, 243, 0.5) !important;
        }

        #languageSelect option {
            background-color: white;
            color: var(--dark-color);
            padding: 0.5rem;
            font-size: 1rem;
        }

        #languageSelect option:checked {
            background: linear-gradient(135deg, var(--secondary-color), #DAA520);
            color: var(--dark-color);
            font-weight: bold;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .header-info {
                display: none;
            }

            .university-logo-text .logo-main {
                font-size: 1.2rem;
            }

            .logo-emblem {
                width: 60px;
                height: 60px;
                font-size: 1.8rem;
            }

            #languageSelect {
                font-size: 0.8rem;
                padding: 0.3rem 0.6rem;
                padding-right: 2rem;
            }
        }

        /* Top-bar responsive adjustments: keep main items on one row on mobile */
        @media (max-width: 768px) {
            .top-bar .container .d-flex {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 0.5rem;
            }

            /* left group: keep MON ESPACE VIRTUEL, hide contact pipe and contact link */
            .top-bar .d-flex>.d-flex:first-child {
                justify-content: flex-start;
                width: auto;
                gap: 0.4rem;
            }

            .top-bar .d-flex>.d-flex:first-child a[href="contact"],
            .top-bar .d-flex>.d-flex:first-child span {
                display: none;
            }

            /* right group: flags + search inline */
            .top-bar .d-flex>.d-flex:last-child {
                justify-content: flex-end;
                width: auto;
                margin-top: 0;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                gap: 0.5rem;
            }

            /* show search as icon only */
            .top-bar a[onclick^="openSearch"] {
                font-size: 0;
                /* hide text label */
                padding: 0.25rem 0.4rem;
            }

            .top-bar a[onclick^="openSearch"] i {
                font-size: 1.05rem;
                display: inline-block;
                color: var(--dark-color);
            }

            .top-bar a {
                padding: 0.2rem 0.45rem;
                font-size: 0.88rem;
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
            }
        }

        @media (max-width: 576px) {
            .top-bar .container .d-flex {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 0.4rem;
            }

            .top-bar .d-flex>.d-flex:first-child {
                order: 1;
                width: auto;
                justify-content: flex-start;
            }

            .top-bar .d-flex>.d-flex:last-child {
                order: 2;
                width: auto;
                justify-content: flex-end;
                gap: 0.4rem;
                align-items: center;
            }

            .top-bar a {
                padding: 0.18rem 0.35rem;
                font-size: 0.78rem;
            }

            /* hide flag text and show only icons on extra small screens */
            .top-bar .flag-link span {
                display: none;
            }

            .top-bar a[onclick^="openSearch"] {
                font-size: 0;
            }

            .top-bar a[onclick^="openSearch"] i {
                font-size: 1.05rem;
            }
        }

        /* Site preloader */
        #site-preloader {
            position: fixed;
            inset: 0;
            z-index: 20000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-color, #fff);
            transition: opacity .4s ease, visibility .4s ease;
        }

        #site-preloader.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .site-preloader-inner {
            position: relative;
            width: 96px;
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .site-preloader-logo {
            width: 56px;
            height: 56px;
            object-fit: contain;
            border-radius: 50%;
            animation: site-preloader-pulse 1.6s ease-in-out infinite;
        }

        .site-preloader-ring {
            position: absolute;
            inset: 0;
            border: 3px solid rgba(0, 0, 0, 0.08);
            border-top-color: var(--secondary-color, #e7b473);
            border-radius: 50%;
            animation: site-preloader-spin 0.9s linear infinite;
        }

        @keyframes site-preloader-spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes site-preloader-pulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(0.9);
                opacity: 0.75;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .site-preloader-logo,
            .site-preloader-ring {
                animation: none;
            }
        }

            /* Daily Flyer Modal styles */
            #dailyFlyerModal {
                position: fixed;
                inset: 0;
                z-index: 11000;
                font-family: inherit;
            }

            /* Affiche le modal quand aria-hidden est false */
            #dailyFlyerModal[aria-hidden="false"] {
                display: block;
            }

            #dailyFlyerModal[aria-hidden="true"] {
                display: none;
            }

            .daily-flyer-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.6);
            }

            /* Le modal s'adapte à l'image, mais reste dans la fenêtre (max 90vw / 90vh) */
            .daily-flyer-content {
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: white;
                width: auto;
                max-width: 90vw;
                max-height: 90vh;
                padding: 0;
                /* plus de padding interne */
                border-radius: 0;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0;
                /* pas d'espace entre enfants */
                overflow: auto;
            }

            /* Limiter l'image pour qu'elle tienne dans la fenêtre tout en gardant son ratio */
            #dailyFlyerSlides img {
                display: block;
                width: auto;
                max-width: 88vw;
                height: auto;
                max-height: calc(90vh - 140px);
                /* laisse de la place pour titre/boutons */
                border-radius: 0;
            }

            .daily-flyer-close {
                position: absolute;
                right: 0.5rem;
                top: 0.25rem;
                background: rgba(255, 255, 255, 0.95);
                border: none;
                font-size: 1.2rem;
                line-height: 1;
                color: #333;
                cursor: pointer;
                width: 36px;
                height: 36px;
                border-radius: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
            }

            @media (max-width:576px) {

                /* Mobile: occupe la quasi-totalité de la largeur pour meilleure lisibilité */
                .daily-flyer-content {
                    width: 94vw;
                    max-width: 94vw;
                    padding: 6px;
                    border-radius: 0;
                }

                .daily-flyer-close {
                    font-size: 1.2rem;
                    right: 6px;
                    top: 6px
                }

                /* L'image remplit le modal mobile et n'a aucune marge */
                #dailyFlyerSlides img {
                    width: 100%;
                    max-width: 100%;
                    max-height: calc(92vh - 110px);
                    margin: 0 !important;
                }

                /* Actions : boutons plus larges et flexibles */
                .daily-flyer-actions {
                    gap: 8px;
                    padding: 8px;
                    width: calc(100% - 12px);
                    box-sizing: border-box;
                }

                .daily-flyer-actions .btn {
                    padding: 0.6rem 1rem;
                    font-size: 1rem;
                    flex: 1;
                    border-radius: 0;
                }
            }

            /* Forcer aucune marge interne sur les éléments du modal */
            .daily-flyer-content>* {
                margin: 0 !important;
            }

            /* Boutons du modal - style professionnel */
            .daily-flyer-actions {
                display: flex;
                gap: 12px;
                justify-content: center;
                width: 100%;
                padding: 10px 0 12px 0;
            }

            .daily-flyer-actions .btn {
                padding: 0.5rem 1.1rem;
                border-radius: 0;
                font-weight: 700;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
                border: 0;
                transition: transform .12s ease, box-shadow .12s ease;
            }

            .daily-flyer-actions .btn:focus {
                outline: none;
                box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
            }

            .daily-flyer-actions .btn-primary {
                background: linear-gradient(90deg, var(--secondary-color) 0%, #d9a259 100%);
                color: var(--dark-color);
            }

            .daily-flyer-actions .btn-primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
            }

            .daily-flyer-actions .btn-secondary {
                background: #fff;
                color: #333;
                border: 1px solid rgba(0, 0, 0, 0.06);
            }

            .daily-flyer-actions .btn-secondary:hover {
                transform: translateY(-2px);
                background: #f7f7f7;
            }

            @media (max-width:576px) {
                .daily-flyer-actions {
                    gap: 8px;
                    padding: 8px 0;
                }

                .daily-flyer-actions .btn {
                    padding: 0.45rem 0.9rem;
                    font-size: 0.95rem;
                }

                .daily-flyer-close {
                    width: 32px;
                    height: 32px;
                    font-size: 1rem;
                }
            }

        /* 1. Sticky header — deeper shadow on scroll */
        .main-header {
            transition: box-shadow 0.3s ease;
        }

        .main-header.hdr-scrolled {
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.15);
        }

        /* 2. Action buttons — square corners */
        .header-action-btns .btn {
            border-radius: 0 !important;
            transition: transform 0.18s ease, box-shadow 0.18s ease !important;
        }

        /* 3. Nav dropdowns — square corners + gold accent */
        .navbar-main .dropdown-menu {
            border-radius: 0 !important;
            border-top: 3px solid var(--secondary-color);
            overflow: hidden;
        }

        /* L'entrée/sortie du menu est gérée par la transition opacity/transform définie plus
           haut (juste après .navbar-main .dropdown-menu) — pas d'@keyframes ici : une animation
           ne peut pas se "rejouer à l'envers" proprement quand .show est retiré, contrairement à
           une transition. Effet supplémentaire : chaque item du menu apparaît avec un léger
           décalage (cascade), pour une ouverture plus vivante. */
        .navbar-main .dropdown-menu>li {
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .navbar-main .dropdown-menu.show>li {
            opacity: 1;
            transform: translateY(0);
        }

        /* Fermeture : pas de cascade (retour instantané avec le menu) pour ne pas ralentir
           la sortie ; la cascade ne joue qu'à l'ouverture. */
        .navbar-main .dropdown-menu.show>li:nth-child(1) {
            transition-delay: 0.02s;
        }

        .navbar-main .dropdown-menu.show>li:nth-child(2) {
            transition-delay: 0.05s;
        }

        .navbar-main .dropdown-menu.show>li:nth-child(3) {
            transition-delay: 0.08s;
        }

        .navbar-main .dropdown-menu.show>li:nth-child(4) {
            transition-delay: 0.11s;
        }

        .navbar-main .dropdown-menu.show>li:nth-child(5) {
            transition-delay: 0.14s;
        }

        .navbar-main .dropdown-menu.show>li:nth-child(6) {
            transition-delay: 0.17s;
        }

        @keyframes _ddIn {
            from {
                opacity: 0;
                transform: translateY(-6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 4. Dropdown items — smooth padding + color shift */
        .navbar-main .dropdown-item {
            transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
        }

        /* 5. Nav links — targeted transition */
        .navbar-main .nav-link {
            transition: background-color 0.22s ease, border-bottom-color 0.22s ease, color 0.22s ease;
        }

        /* 6. Search overlay — fade in/out instead of instant show/hide */
        .search-overlay {
            display: flex !important;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

        .search-overlay.active {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        /* 7. Search input — brand focus ring */
        .search-box-large input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(231, 180, 115, 0.35);
            border-color: var(--secondary-color);
        }

        /* 8. Logo hover lift */
        .university-logo-container {
            transition: transform 0.2s ease;
        }

        a:hover .university-logo-container {
            transform: translateY(-2px);
        }

        /* 9. Top-bar links */
        .top-bar a {
            border-radius: 0;
            transition: color 0.18s ease, background 0.18s ease;
        }

        /* 10. Hamburger icon — smooth transition (JS swaps bi-list ↔ bi-x-lg) */
        .navbar-toggler i {
            transition: opacity 0.2s ease;
            display: inline-block;
        }


        .top-bar .dropdown-menu {
            border-radius: 0;
        }

        .top-bar .dropdown-menu.show {
            animation: _ddIn 0.16s ease both;
        }

        /* 13. Marquee edge fade */
        .marquee {
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        }