@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
    --hitas-navy: #2E86DE;
    --hitas-navy-dark: #1B6FBF;
    --hitas-gold: #9c7c3c;
    --hitas-gold-light: #c9a962;
    --hitas-ivory: #f4f1ea;
    --hitas-ink: #1a1a1a;
    --hitas-rule: #d8d2c2;
    /* Police serif classique et élégante (proche Georgia/Times), utilisée
       pour tous les titres du site via .display-font / h1,h2,h3 */
    --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--hitas-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* Ancre de défilement vers les coordonnées téléphoniques du Footer */
#footer-phone-contact {
    scroll-margin-top: 100px;
}

/* Thin institutional top rule, echoing the collegiate press look */
body::before {
    content: '';
    display: block;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--hitas-navy) 0%, var(--hitas-navy) 70%, var(--hitas-gold) 70%, var(--hitas-gold) 100%);
    position: sticky;
    top: 0;
    z-index: 1031;
}

/* ---------- Accessibilité ---------- */
.skip-link {
    position: absolute;
    top: -50px;
    left: 1rem;
    z-index: 2000;
    background: var(--hitas-navy);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--hitas-gold);
    outline-offset: 2px;
}

/* ---------- Reveal au scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

h1, h2, h3, .display-font {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-weight: 700;
}
.display-font {
    font-style: italic;
}

a { color: var(--hitas-navy); }
a:hover { color: var(--hitas-gold); }

/* ---------- Boutons ---------- */
.btn-hitas-primary,
.btn-hitas-outline {
    border-radius: 2px;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn-hitas-primary {
    background: var(--hitas-navy);
    border-color: var(--hitas-navy);
    color: #fff;
    font-weight: 600;
}
.btn-hitas-primary:hover {
    background: var(--hitas-gold);
    border-color: var(--hitas-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,33,71,0.18);
}
.btn-hitas-outline {
    border: 1.5px solid #fff;
    color: #fff;
    font-weight: 600;
}
.btn-hitas-outline:hover {
    background: #fff;
    color: var(--hitas-navy);
    transform: translateY(-2px);
}


/* ---------- Navbar ---------- */
.site-navbar {
    background: #fff;
    border-bottom: 1px solid #e4e0d4;
    transition: box-shadow .25s ease, padding .25s ease;
    top: 4px;
}
.site-navbar.is-scrolled {
    box-shadow: 0 8px 28px rgba(0,33,71,0.1);
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
}
.site-navbar .navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--hitas-navy);
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-top: .1rem;
    padding-bottom: .1rem;
}
.site-logo-img {
    height: 68px;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: height .25s ease;
}
.site-navbar.is-scrolled .site-logo-img {
    height: 50px;
}
.site-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.site-brand-text strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--hitas-navy);
    letter-spacing: .01em;
}
.site-brand-text--solo {
    justify-content: center;
}
.site-brand-text--solo strong {
    font-size: 1.7rem;
    letter-spacing: .02em;
}
.site-brand-subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--hitas-gold);
    line-height: 1.15;
    white-space: nowrap;
    margin-top: 1px;
}
.site-navbar .navbar-brand span,
.site-brand-text span {
    display: block;
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hitas-gold);
    white-space: nowrap;
}
@media (max-width: 991px) {
    .site-logo-img {
        height: 54px;
    }
    .site-brand-text strong {
        font-size: 1.15rem;
    }
    .site-brand-text span {
        font-size: .56rem;
    }
    .site-brand-text--solo strong {
        font-size: 1.35rem;
    }
    .site-brand-subtitle {
        font-size: .48rem;
        white-space: normal;
        max-width: 200px;
    }
}
@media (max-width: 400px) {
    .site-brand-text span {
        display: none;
    }
    .site-brand-subtitle {
        display: none;
    }
}
.site-navbar .nav-link {
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hitas-navy);
    padding: 0.5rem 0.9rem !important;
    position: relative;
    white-space: nowrap;
}
.site-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: .1rem;
    height: 2px;
    background: var(--hitas-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--hitas-navy);
}
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after {
    transform: scaleX(1);
}
.site-navbar .btn-hitas-primary {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .82rem;
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(160deg, var(--hitas-navy) 0%, var(--hitas-navy-dark) 100%);
    color: #fff;
    padding: 4rem 0 4.5rem;
    position: relative;
    overflow: hidden;
    min-height: 52vh;
    display: flex;
    align-items: center;
}
.hero--has-bg {
    background: var(--hitas-navy-dark);
}
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease;
    animation: heroKenBurns 16s ease-in-out infinite;
}
.hero-slide.is-active {
    opacity: 1;
}
.hero-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes heroKenBurns {
    0% { transform: scale(1); }
    50% { transform: scale(1.07); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,19,40,0.55) 0%, rgba(0,19,40,0.65) 45%, rgba(0,19,40,0.92) 100%);
    z-index: 0;
}
.hero > .container {
    position: relative;
    z-index: 1;
}
.hero .eyebrow {
    /* Retiré visuellement de l'Accueil : le nom complet HITAS est
       désormais affiché dans la navbar, sous le logo. */
    display: none;
}
.hero .eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.6rem;
    height: 2px;
    background: var(--hitas-gold-light);
    transform: translateY(-50%);
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.6vw, 3.8rem);
    line-height: 1.1;
    font-weight: 700;
    font-style: italic;
}
.hero p.lead {
    font-family: var(--font-body);
    color: rgba(255,255,255,0.85);
    max-width: 42ch;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* ---------- Parcours (signature element) : disposition horizontale, comme
   dessinée à la main — un point de départ (BAC/GCE) à gauche, et deux
   lignes empilées qui partent vers la droite, chacune avec sa propre
   étape puis son résultat final. ---------- */
.journey-tree {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin-top: 2.5rem;
}
.journey-tree-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
}
.journey-tree-root .node {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--hitas-gold);
    border: 1.5px solid var(--hitas-gold);
    color: var(--hitas-navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .5rem;
}
.journey-tree-root .label {
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    max-width: 90px;
    line-height: 1.25;
}
.journey-tree-branches {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.journey-tree-branch {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.journey-tree-connector,
.journey-tree-branch .bi-arrow-right:last-of-type {
    color: var(--hitas-gold-light);
    font-size: 1rem;
    flex-shrink: 0;
}
.journey-tree-step {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: .5rem .75rem;
    white-space: nowrap;
}
.journey-tree-step .label {
    font-size: .74rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    white-space: normal;
}
.journey-tree-step.is-final {
    background: rgba(201,169,98,0.16);
    border-color: var(--hitas-gold-light);
}

@media (max-width: 991.98px) {
    .journey-tree {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .journey-tree-branch {
        flex-wrap: wrap;
    }
    .journey-tree-step {
        white-space: normal;
    }
}

/* ---------- Bouton "Rejoindre notre chaîne HITAS TV" (sous les bulles) ---------- */
.hero-tv-btn {
    position: absolute;
    top: 360px;
    right: 30px;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(201,169,98,0.4);
    border-radius: 24px;
    padding: .6rem 1.2rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-tv-btn:hover {
    background: var(--hitas-gold);
    border-color: var(--hitas-gold);
    color: #fff;
    transform: translateY(-2px);
}
.hero-tv-btn i {
    font-size: 1.1rem;
    color: var(--hitas-gold-light);
}
.hero-tv-btn:hover i {
    color: #fff;
}

/* Bouton WhatsApp permanent, juste sous le bouton HITAS TV — vert
   WhatsApp au survol, plutôt que doré, pour rester reconnaissable. */
.hero-wa-btn {
    top: 410px;
}
.hero-wa-btn i {
    color: #25d366;
}
.hero-wa-btn:hover {
    background: #25d366;
    border-color: #25d366;
}
.hero-wa-btn:hover i {
    color: #fff;
}


/* ---------- Fil d'Ariane ---------- */
.hitas-breadcrumb {
    --bs-breadcrumb-divider: '›';
    font-size: .85rem;
    margin-bottom: 0;
}
.hitas-breadcrumb a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}
.hitas-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.hitas-breadcrumb .breadcrumb-item.active {
    color: #fff;
    font-weight: 600;
}
.hitas-breadcrumb--light a {
    color: #5b6673;
}
.hitas-breadcrumb--light a:hover {
    color: var(--hitas-navy);
}
.hitas-breadcrumb--light .breadcrumb-item.active {
    color: var(--hitas-navy);
}

/* ---------- Section headers ---------- */
.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .76rem;
    font-weight: 700;
    color: var(--hitas-gold);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.section-eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--hitas-gold);
    display: inline-block;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 700;
    font-style: italic;
    color: var(--hitas-navy);
}

/* ---------- Program cards ---------- */
.program-card {
    border: 1px solid #e4e0d4;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,33,71,0.05);
    transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease, border-color .35s ease;
    border-top: 3px solid transparent;
}
.program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,33,71,0.16);
    border-top-color: var(--hitas-gold);
}
.program-card .program-img {
    height: 170px;
    background-size: cover;
    background-position: center;
    background-color: var(--hitas-ivory);
    transition: transform .5s ease;
    overflow: hidden;
}
.program-card:hover .program-img {
    transform: scale(1.05);
}
.program-card h5 {
    font-family: var(--font-display);
    font-weight: 700;
}
.program-card .duration-badge {
    background: var(--hitas-navy);
    color: #fff;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 20px;
}

.featured-news-section {
    /* Zone Publicité + Actualités : compacte, sans espaces superflus. */
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.featured-news-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1.6fr 1fr;
    align-items: stretch;
}
.featured-news-main,
.featured-news-aside {
    display: grid;
    gap: .75rem;
}
.featured-news-card {
    position: relative;
    min-height: 220px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #111;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.featured-news-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,33,71,0.16) 0%, rgba(0,33,71,0.75) 65%);
}
.featured-news-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,33,71,0.08) 0%, rgba(0,33,71,0.82) 100%);
}
.featured-news-content {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
    color: #fff;
}
.featured-news-card--small {
    min-height: 140px;
}
.featured-news-card--large {
    min-height: 300px;
}
.news-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    border-radius: 3px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .65rem;
}
.news-badge--ad {
    background: var(--hitas-gold);
    color: var(--hitas-navy-dark);
}
.featured-news-content h3,
.featured-news-content h4 {
    color: #fff;
    margin-bottom: .5rem;
}
.featured-news-content p {
    color: rgba(255,255,255,0.9);
    max-width: 50rem;
}
.featured-news-content a.btn {
    color: #fff;
    border-color: rgba(255,255,255,0.9);
}
.featured-news-content a.text-white {
    color: #fff;
}

@media (max-width: 991px) {
    .featured-news-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Actualités (Accueil) : diaporama par groupes de 3 — même système que Filières phares ---------- */
.news-slideshow {
    position: relative;
    display: grid;
}
.news-slide {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    /* Transition "premium" : fondu + léger glissement + zoom doux + flou
       naissant, avec une courbe d'accélération soyeuse (proche d'un
       easing "expo out"). La transition de "visibility" est retardée à la
       fin du fondu de sortie : sans ce délai, la slide disparaît
       instantanément au lieu de s'estomper. */
    transform: translateY(26px) scale(.965);
    filter: blur(6px);
    transition: opacity .85s cubic-bezier(.16,1,.3,1),
                transform .85s cubic-bezier(.16,1,.3,1),
                filter .85s cubic-bezier(.16,1,.3,1),
                visibility 0s linear .85s;
    width: 100%;
}
.news-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition: opacity .85s cubic-bezier(.16,1,.3,1),
                transform .85s cubic-bezier(.16,1,.3,1),
                filter .85s cubic-bezier(.16,1,.3,1),
                visibility 0s linear 0s;
    z-index: 1;
}
.news-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.5rem;
}
.news-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hitas-rule);
    transition: background .25s ease, transform .25s ease;
}
.news-dot.is-active {
    background: var(--hitas-gold);
    transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
    .news-slide {
        transition: none;
        transform: none;
        filter: none;
    }
}

/* ---------- Diaporamas par groupes (Filières phares + Galerie Vie étudiante) ---------- */
.pillars-slideshow,
.gallery-slideshow {
    position: relative;
    display: grid;
}
.pillars-slide,
.gallery-slide {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.985);
    transition: opacity .7s cubic-bezier(.22,.9,.32,1),
                transform .7s cubic-bezier(.22,.9,.32,1),
                visibility 0s linear .7s;
    width: 100%;
}
.pillars-slide.is-active,
.gallery-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .7s cubic-bezier(.22,.9,.32,1),
                transform .7s cubic-bezier(.22,.9,.32,1),
                visibility 0s linear 0s;
    z-index: 1;
}
.pillars-dots,
.gallery-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-top: 2rem;
}
.pillars-dot,
.gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hitas-rule);
    transition: background .25s ease, transform .25s ease;
    cursor: pointer;
}
.pillars-dot.is-active,
.gallery-dot.is-active {
    background: var(--hitas-gold);
    transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
    .pillars-slide,
    .gallery-slide {
        transition: none;
    }
}

/* ---------- Partners marquee (bandeau défilant) ---------- */
.partner-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-marquee-track {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: partner-marquee-scroll 32s linear infinite;
}
.partner-marquee:hover .partner-marquee-track {
    animation-play-state: paused;
}
.partner-marquee-track img {
    max-height: 46px;
    max-width: 140px;
    object-fit: contain;
    opacity: .92;
    transition: opacity .15s ease;
}
.partner-marquee-track img:hover {
    opacity: 1;
}
.partner-marquee-track span {
    white-space: nowrap;
}
@keyframes partner-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .partner-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---------- Partners strip (repli statique, ex: pages internes) ---------- */
.partners-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem;
    align-items: center;
    justify-content: center;
}
.partners-strip img {
    max-height: 46px;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .75;
    transition: opacity .15s ease, filter .15s ease;
}
.partners-strip img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ---------- Testimonials ---------- */
.testimonial-card {
    background: #fff;
    border: 1px solid #e4e0d4;
    border-left: 3px solid var(--hitas-gold);
    border-radius: 2px;
    padding: 1.75rem;
    height: 100%;
}
.testimonial-card .quote-mark {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--hitas-gold);
    line-height: 1;
    font-style: italic;
}

/* ---------- Team ---------- */
.team-card {
    background: var(--hitas-ivory);
    border-radius: 3px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.team-card .team-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    display: block;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.team-card .team-photo-placeholder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hitas-navy);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.75rem;
}
.team-card .team-role {
    color: var(--hitas-gold);
    font-weight: 600;
    font-size: .9rem;
}

/* ---------- CTA banner ---------- */
.cta-banner {
    background: var(--hitas-navy);
    color: #fff;
    border-radius: 2px;
    border-top: 4px solid var(--hitas-gold);
    padding: 3.5rem 3rem;
}
.cta-banner h2 {
    font-style: italic;
}
.cta-programs-question {
    font-size: 2rem;
    font-style: italic;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: color .2s ease;
}
.cta-programs-question:hover,
.cta-programs-question:focus-visible {
    color: var(--hitas-gold-light);
}
.cta-programs-question i {
    font-style: normal;
    font-size: 1.3rem;
    vertical-align: -2px;
}
@media (max-width: 767px) {
    .cta-programs-question {
        font-size: 1.4rem;
    }
}

.page-hero {
    background: var(--hitas-ivory);
}

.page-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--hitas-gold);
}

.content-section {
    background: #fff;
}

.programmes-hero {
    background: linear-gradient(160deg, rgba(46,134,222,0.95), rgba(27,111,191,0.98));
    color: #fff;
    position: relative;
}

.programmes-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(201,150,72,0.18), transparent 35%);
}

.programmes-hero .container {
    position: relative;
    z-index: 1;
}

.programmes-hero .lead {
    color: rgba(255,255,255,0.85);
    max-width: 48rem;
    margin: 0 auto;
}

.programmes-content {
    padding: 2rem;
    background: linear-gradient(180deg, rgba(247,245,240,0.9), #fff 65%);
    border-radius: 3px;
    border: 1px solid rgba(209,203,173,0.45);
    box-shadow: 0 28px 70px rgba(0,33,71,0.08);
}

.programmes-intro-card {
    background: linear-gradient(180deg, rgba(0,33,71,0.06), rgba(201,150,72,0.1));
    border: 1px solid rgba(0,33,71,0.12);
    border-radius: 3px;
    padding: 2rem;
}

.programmes-intro-card h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.programmes-intro-card p {
    color: #4d5a71;
    line-height: 1.8;
    font-size: 1.05rem;
}

.programmes-grid {
    margin-top: 2rem;
}

.programme-box {
    background: #fff;
    border: 1px solid rgba(0,33,71,0.12);
    border-radius: 3px;
    padding: 2rem;
    min-height: 340px;
    box-shadow: 0 18px 40px rgba(0,33,71,0.08);
}

.programme-box--accent {
    background: linear-gradient(180deg, rgba(201,150,72,0.15), rgba(255,255,255,0.95));
}

.programme-box--split {
    background: linear-gradient(180deg, rgba(0,33,71,0.04), rgba(255,255,255,0.96));
}

.programme-box h3 {
    font-size: 1.45rem;
    margin-bottom: 1rem;
    color: var(--hitas-navy);
}

.programme-box p {
    color: #4d5a71;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.programme-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.programme-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.8rem;
    color: #2d3a55;
    line-height: 1.7;
}

.programme-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hitas-gold);
    font-weight: 900;
}

.programme-subsection {
    margin-top: 1.5rem;
}

.programme-subsection strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.85rem;
    color: var(--hitas-navy);
}

.programme-subsection ul {
    margin-top: 0.75rem;
}

.programme-subsection ul li {
    margin-bottom: 0.7rem;
}

.programmes-content h3,
.programmes-content h2,
.programmes-content h4 {
    color: var(--hitas-navy);
    font-family: var(--font-display);
}

.programmes-content p,
.programmes-content li {
    color: #34405e;
}

@media (max-width: 991px) {
    .programme-box {
        min-height: auto;
    }
}

.detail-image {
    min-height: 340px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-color: var(--hitas-ivory);
    min-height: 420px;
}

.about-panel {
    border-radius: 3px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0,33,71,0.04) 0%, rgba(201,150,72,0.06) 100%);
    border: 1px solid rgba(0,33,71,0.12);
}

.about-text {
    padding: 1.1rem 1rem;
}

.about-text p {
    color: #24304a;
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

/* ---------- Student life gallery ---------- */
.student-life-gallery {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.gallery-category-section {
    padding: 2.5rem 0;
    border-top: 1px solid rgba(0,33,71,0.08);
}

.gallery-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem 1rem;
    border-radius: 3px;
    background: rgba(201,150,72,0.16);
    color: var(--hitas-navy);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gallery-category-title {
    font-size: clamp(2rem, 2.5vw, 2.6rem);
    margin: .85rem 0 0.75rem;
    line-height: 1.05;
    color: var(--hitas-navy);
}

.gallery-category-copy {
    max-width: 56rem;
    color: #4b5a78;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.gallery-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,33,71,0.1);
    transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0,33,71,0.2);
}

.gallery-card-img {
    position: relative;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform .5s ease;
    display: flex;
    align-items: flex-end;
}

.gallery-card:hover .gallery-card-img {
    transform: scale(1.05);
}

.gallery-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,33,71,0) 45%, rgba(0,20,45,0.86) 100%);
}

.gallery-card-tag {
    position: absolute;
    top: .8rem;
    left: .8rem;
    z-index: 2;
    background: rgba(255,255,255,0.92);
    color: var(--hitas-navy);
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .3rem .6rem;
    border-radius: 20px;
}

.gallery-card-caption {
    position: relative;
    z-index: 2;
    padding: .9rem 1rem 1rem;
    color: #fff;
}

.gallery-card-title {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-sub {
    font-size: .72rem;
    color: rgba(255,255,255,0.78);
    display: block;
}

@media (max-width: 1199px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .gallery-card-img {
        aspect-ratio: 1 / 1;
    }
}

/* ---------- Fiches campus (À propos, sous "Notre mission") ---------- */
.campus-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #ece7d8;
    box-shadow: 0 10px 28px rgba(0,33,71,0.06);
    transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease;
}
.campus-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(0,33,71,0.13);
}
.campus-card-img {
    position: relative;
    height: 220px;
    overflow: hidden;
}
.campus-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.campus-card:hover .campus-card-img img {
    transform: scale(1.05);
}
.campus-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--hitas-navy), var(--hitas-navy-dark));
}
.campus-card-img-placeholder span {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    font-size: 1.3rem;
}
.campus-card-body {
    padding: 1.5rem 1.6rem 1.75rem;
}
.campus-card-name {
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--hitas-gold);
    margin-bottom: .3rem;
}
.campus-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--hitas-navy);
    margin-bottom: .6rem;
}
.campus-card-text {
    color: #4b5a78;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.campus-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--hitas-gold);
    font-weight: 600;
    font-size: .9rem;
}
.campus-card-toggle i {
    transition: transform .25s ease;
}
.campus-card-toggle:hover {
    color: var(--hitas-navy);
}
.campus-card-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}
.campus-card-detail {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--hitas-rule);
}
.campus-card-detail p {
    color: #4b5a78;
    line-height: 1.75;
    margin: 0;
}

/* ---------- Application form ---------- */
.application-page {
    background: #f7f5f0;
}

.application-card {
    background: #fff;
    border-radius: 3px;
    border: 1px solid rgba(0,33,71,0.1);
    box-shadow: 0 28px 70px rgba(0,33,71,0.08);
    padding: 2.5rem;
    overflow: hidden;
}

.application-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.application-header h2 {
    font-size: clamp(2rem, 2.6vw, 2.4rem);
    margin: 0;
    color: var(--hitas-navy);
}

.application-header p {
    color: #5e6c85;
    line-height: 1.75;
    max-width: 42rem;
}

.application-badge {
    min-width: 72px;
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(201,150,72,0.2), rgba(0,33,71,0.18));
    color: var(--hitas-navy);
    font-size: 1.75rem;
    font-weight: 700;
}

.application-form .form-label {
    font-weight: 600;
    color: #24304a;
}

.application-form .form-control,
.application-form .form-select {
    border-radius: 3px;
    border: 1px solid rgba(0,33,71,0.15);
    padding: 1rem .95rem;
    min-height: 52px;
}

.application-form textarea.form-control {
    min-height: 140px;
}

.application-form .btn-hitas-primary {
    min-width: 230px;
    padding: .95rem 1.7rem;
}

.form-step {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid rgba(0,33,71,0.1);
}
.form-step:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}
.form-step-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.5rem;
}
.form-step-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hitas-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
}

@media (max-width: 767px) {
    .application-card {
        padding: 1.75rem;
    }

    .application-header {
        flex-direction: column;
        align-items: stretch;
    }

    .application-badge {
        margin-left: auto;
    }
}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-image-wrapper {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(0,33,71,0.08), rgba(201,150,72,0.08));
    padding: 1rem;
}

.about-image {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0,33,71,0.15);
}

.about-image-placeholder {
    width: 100%;
    min-height: 320px;
    border: 2px dashed rgba(0,33,71,0.22);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255,255,255,0.75);
}

.about-image-placeholder .placeholder-inner {
    text-align: center;
    color: rgba(0,33,71,0.65);
    font-weight: 600;
}

.admissions-visual-card {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    min-height: 520px;
    box-shadow: 0 30px 50px rgba(0,33,71,0.12);
    background: radial-gradient(circle at top left, rgba(201,150,72,0.18), transparent 42%),
                linear-gradient(180deg, rgba(0,33,71,0.04), rgba(0,33,71,0.12));
}

.admissions-visual-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,33,71,0.18), rgba(0,33,71,0.65));
    mix-blend-mode: multiply;
}

.admissions-visual-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .75rem 1rem;
    border-radius: 3px;
    background: rgba(255,255,255,0.9);
    color: var(--hitas-navy);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admissions-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) brightness(0.95);
}

.admissions-visual-glyph {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: rgba(255,255,255,0.35);
}

.admissions-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,33,71,0.85));
}

.admissions-visual-copy {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    color: #fff;
}

.admissions-visual-copy h3 {
    font-size: 1.75rem;
    margin-bottom: .75rem;
}

.admissions-visual-copy p {
    margin: 0;
    opacity: .9;
    line-height: 1.7;
}

.admission-dates {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,246,239,0.95));
    border: 1px solid rgba(209,203,173,0.85);
}

.date-card {
    background: #fff;
    border: 1px solid rgba(0,33,71,0.12);
    box-shadow: 0 14px 30px rgba(0,33,71,0.08);
}

.date-card h3 {
    color: var(--hitas-navy);
}

.date-card p {
    font-size: 1.05rem;
    color: #24304a;
}

@media (max-width: 991px) {
    .admisisons-visual-card,
    .admissions-visual-card {
        min-height: 360px;
    }
}

@media (max-width: 767px) {
    .admissions-visual-copy {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }
}

@media (max-width: 991px) {
    .about-panel { padding: 1.5rem; }
}

.partner-card {
    border: 1px solid #eceff3;
    border-radius: 3px;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.partner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,33,71,0.08);
}

.partner-logo {
    max-height: 64px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.partner-detail-card {
    border: 1px solid #e7edf4;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0,33,71,0.08);
}

.partner-detail-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.75rem;
}

.partner-detail-logo {
    width: 120px;
    max-height: 120px;
    object-fit: contain;
    border-radius: 3px;
    background: #f7f8fa;
    padding: 1rem;
}

.partner-detail-meta h3 {
    margin-bottom: .4rem;
}

.partner-detail-section {
    padding-top: 1rem;
    border-top: 1px solid #eef2f6;
}

.partner-program-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.partner-program-list li {
    margin-bottom: 1.25rem;
}

.partner-program-list li strong {
    display: block;
    font-size: 1rem;
    margin-bottom: .35rem;
}

.partner-program-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .18rem .55rem;
    font-size: .82rem;
    background: rgba(0,33,71,0.08);
    border-radius: 3px;
    color: #002147;
}

.partner-detail-card p {
    color: #4b5563;
}

@media (max-width: 767px) {
    .partner-detail-header {
        grid-template-columns: 1fr;
    }
    .partner-detail-logo {
        width: 100%;
        max-height: 180px;
    }
}

.partenaire-hero {
    min-height: 360px;
}

.partner-hero-logo {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    border-radius: 3px;
}

.partner-associated-program {
    border: 1px solid #e7edf4;
    border-radius: 3px;
    background: #fff;
    padding: 1.15rem;
    height: 100%;
}

.partner-associated-program h4 {
    margin-bottom: .5rem;
}

.partner-associated-program p {
    margin-bottom: .75rem;
    color: #4b5563;
}

.partner-program-badge {
    display: inline-block;
    margin-top: .25rem;
    padding: .18rem .55rem;
    font-size: .82rem;
    background: rgba(0,33,71,0.08);
    border-radius: 3px;
    color: #002147;
}

.article-content {
    color: #374151;
    line-height: 1.85;
}

/* ---------- Footer ---------- */
.site-footer {
    /* Le footer garde volontairement l'ancien bleu marine sombre, même si
       le reste du site est passé au bleu ciel : en redéfinissant ces deux
       variables ici, tout ce qui les utilise à l'intérieur du footer
       (boutons, badges, etc.) reste automatiquement sombre, sans avoir à
       toucher chaque règle une par une. */
    --hitas-navy: #002147;
    --hitas-navy-dark: #001328;
    background: var(--hitas-navy-dark);
    color: rgba(255,255,255,0.72);
    padding: 4rem 0 1.5rem;
    border-top: 4px solid var(--hitas-gold);
    /* Sur les pages avec arrière-plan décoratif (.has-page-bg), l'overlay
       fixe (::after / main::before) est en z-index négatif et ne doit
       jamais intercepter les clics. On isole le footer dans son propre
       contexte d'empilement, au-dessus de cet overlay, pour garantir que
       tous ses liens restent cliquables et réagissent bien au curseur. */
    position: relative;
    z-index: 1;
}
.site-footer a,
.site-footer button,
.site-footer .btn {
    position: relative;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
}
.site-footer .display-font {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-weight: 700;
}
.site-footer h6 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .1em;
    margin-bottom: 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.site-footer a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}
.site-footer li a:hover {
    color: var(--hitas-gold-light);
    padding-left: 3px;
}
.site-footer .d-flex a {
    transition: color .15s ease, transform .15s ease;
}
.site-footer .d-flex a:hover {
    color: var(--hitas-gold-light);
    transform: translateY(-2px);
    display: inline-block;
}
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    font-size: .8rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: .02em;
}

@media (max-width: 767px) {
    .journey { justify-content: center; }
    .journey-line { flex-basis: 100%; border-top: none; border-left: 2px dashed rgba(255,255,255,0.35); height: 30px; width: 0; margin: 0; }
}

.partners-showcase .text-muted {
    color: #5b6673;
}

/* ---------- Drapeaux partenaires ---------- */
.flag-emoji {
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -1px;
}

/* ---------- Autres programmes (partenaires HITAS) ---------- */
.other-providers-grid {
    margin-top: 1.5rem;
}
.provider-card {
    background: #fff;
    border: 1px solid rgba(0,33,71,0.12);
    border-radius: 3px;
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 14px 34px rgba(0,33,71,0.07);
}
.provider-card-logo {
    height: 56px;
    max-width: 160px;
    object-fit: contain;
    margin-bottom: 1rem;
}
.provider-card h4 {
    color: var(--hitas-navy);
    margin-bottom: .5rem;
}
.provider-specialties {
    font-size: .85rem;
    color: #4d5a71;
    background: rgba(0,33,71,0.05);
    border-radius: 10px;
    padding: .6rem .8rem;
    margin-top: .75rem;
}

/* =========================================================================
   Arrière-plans de page décoratifs (optionnels, gérés depuis l'admin)
   =========================================================================
   Couche séparée (::after sur <body> + ::before sur <main>) : ne touche
   jamais au flux normal du document ni aux composants existants.
   Si aucune image n'est disponible, .has-page-bg n'est simplement pas
   ajoutée par le PHP : le site retombe sur ses arrière-plans habituels.
   Les sections héros qui ont leur propre habillage (fond navy + texte
   blanc, ex: .programmes-hero) gardent volontairement leur fond d'origine
   ci-dessous, pour ne jamais rendre un texte illisible. ========================================================================= */

body.has-page-bg {
    position: relative;
}
body.has-page-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    /* Légère teinte "navy" de la marque posée sur la photo (même esprit
       que le bandeau .hero-overlay de l'accueil) : l'image garde une
       couleur cohérente avec l'identité HITAS au lieu de rester une
       simple photo brute derrière le contenu. */
    background-image: linear-gradient(160deg, rgba(0,33,71,0.30) 0%, rgba(0,33,71,0.46) 100%), var(--page-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    pointer-events: none;
}
body.has-page-bg > main::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(255,255,255,0.62);
    pointer-events: none;
}
@media (max-width: 991px) {
    /* background-attachment: fixed est capricieux sur mobile (iOS Safari) :
       on repasse en scroll normal, l'image reste 100% responsive. */
    body.has-page-bg::after {
        background-attachment: scroll;
    }
}
/* Seul le contenu "neutre" (fond blanc) devient transparent pour laisser
   apparaître l'image derrière. Les héros à fond de couleur propre
   (.programmes-hero, héros avec style inline, etc.) ne sont PAS concernés
   afin de ne jamais faire disparaître un texte clair sur fond clair.
   .application-page (page Postulez) est un bloc "neutre" au même titre
   que .content-section : il rejoint donc la liste pour que la photo de
   fond couvre bien toute la page, du haut jusqu'au footer. */
body.has-page-bg .content-section,
body.has-page-bg .student-life-section,
body.has-page-bg .reviews-section,
body.has-page-bg .application-page {
    position: relative;
    background: transparent;
}

/* ---------- Bouton "Postuler" : mise en avant discrète et élégante ----------
   Pulsation douce (anneau qui se dilate puis s'estompe) + léger hover.
   Respecte prefers-reduced-motion pour l'accessibilité. */
.btn-postulez {
    position: relative;
    animation: btn-postulez-pulse 2.6s ease-out infinite;
}
.btn-postulez:hover,
.btn-postulez:focus-visible {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 26px rgba(0,33,71,0.28), 0 0 0 3px rgba(201,150,72,0.35);
}
@keyframes btn-postulez-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(156,124,60,0.45);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(156,124,60,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(156,124,60,0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .btn-postulez {
        animation: none;
    }
}

/* =========================================================================
   Les trois piliers (Accueil) : cartes avec hiérarchie visuelle, icône,
   numéro en filigrane et transitions fluides au survol.
   ========================================================================= */
.pillar-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid #ece7d8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,33,71,0.05);
    transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease, border-color .35s ease;
}
.pillar-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hitas-navy), var(--hitas-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}
.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 26px 48px rgba(0,33,71,0.16);
    border-color: transparent;
}
.pillar-card:hover::before {
    transform: scaleX(1);
}
.pillar-num {
    position: absolute;
    top: .25rem;
    right: 1.1rem;
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--hitas-ivory);
    line-height: 1;
    z-index: 0;
    transition: color .35s ease;
    pointer-events: none;
}
.pillar-card:hover .pillar-num {
    color: #efe6d2;
}
.pillar-card-inner {
    position: relative;
    z-index: 1;
}
.pillar-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--hitas-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    transition: transform .35s ease, background .35s ease;
}
.pillar-card:hover .pillar-icon {
    transform: scale(1.1) rotate(-6deg);
    background: var(--hitas-gold);
}
@media (prefers-reduced-motion: reduce) {
    .pillar-card,
    .pillar-card::before,
    .pillar-icon,
    .pillar-num {
        transition: none;
    }
}

/* =========================================================================
   Réseau orbital des universités partenaires, dans le Hero (Accueil, à
   droite). L'élément central circulaire est le diaporama Actualités
   (.hero-news-box) ; les logos des universités partenaires gravitent
   autour de lui, avec un léger effet de "respiration" (zoom avant/arrière)
   et une mise en évidence au survol. Purement CSS (aucune dépendance JS
   pour le positionnement), respecte prefers-reduced-motion.
   ========================================================================= */
.hero-partners-orbit {
    --hub-size: 200px;
    --item-size: 54px;
    --orbit-radius: 102px;
    position: relative;
    width: calc(var(--orbit-radius) * 2 + var(--item-size));
    max-width: 92vw;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
    animation: partner-orbit-breathe 9s ease-in-out infinite;
}
@keyframes partner-orbit-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}
.hero-partners-orbit-rings {
    position: absolute;
    inset: calc(50% - var(--hub-size) / 2 - 14px);
    border: 1px dashed rgba(255,255,255,0.28);
    border-radius: 50%;
    pointer-events: none;
}
.hero-partners-orbit-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--orbit-radius);
    height: 1px;
    background: linear-gradient(90deg, rgba(201,169,98,0.55), rgba(201,169,98,0));
    transform-origin: 0 50%;
    transform: rotate(calc(360deg / var(--count) * var(--i)));
    z-index: 1;
}
.hero-partners-orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--item-size);
    height: var(--item-size);
    margin: calc(var(--item-size) / -2);
    transform: rotate(calc(360deg / var(--count) * var(--i))) translate(var(--orbit-radius)) rotate(calc(-360deg / var(--count) * var(--i)));
    z-index: 2;
}
.hero-partners-orbit-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .45rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s ease, border-color .3s ease;
}
.hero-partners-orbit-item-inner img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
}
.hero-partners-orbit-initials {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--hitas-navy);
    font-size: 1rem;
}
.hero-partners-orbit-item-inner::after {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--hitas-navy-dark);
    color: #fff;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .3rem .6rem;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}
.hero-partners-orbit-item-inner:hover,
.hero-partners-orbit-item-inner:focus-visible {
    transform: scale(1.2);
    box-shadow: 0 16px 32px rgba(0,0,0,0.32);
    border-color: var(--hitas-gold);
    z-index: 5;
}
.hero-partners-orbit-item-inner:hover::after,
.hero-partners-orbit-item-inner:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 991px) {
    .hero-partners-orbit {
        --hub-size: 190px;
        --item-size: 46px;
        --orbit-radius: 92px;
    }
}
@media (max-width: 400px) {
    .hero-partners-orbit {
        --hub-size: 150px;
        --item-size: 38px;
        --orbit-radius: 74px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-partners-orbit {
        animation: none;
    }
    .hero-partners-orbit-item-inner {
        transition: none;
    }
}

/* =========================================================================
   Bande défilante fine, directement sous la section Accueil.
   Réutilise la même mécanique d'animation que .partner-marquee (défilement
   continu, en boucle, mis en pause au survol) pour rester cohérent avec
   le reste du site.
   ========================================================================= */
.home-ticker-banner {
    background: var(--hitas-ivory);
    border-top: 1px solid var(--hitas-rule);
    border-bottom: 1px solid var(--hitas-rule);
    overflow: hidden;
    height: 57px; /* ~1,5 cm à l'écran */
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.home-ticker-track {
    display: flex;
    align-items: center;
    gap: 2.75rem;
    width: max-content;
    padding: 0 1.5rem;
    animation: partner-marquee-scroll 55s linear infinite;
}
.home-ticker-banner:hover .home-ticker-track {
    animation-play-state: paused;
}
.home-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
    color: var(--hitas-navy);
}
.home-ticker-item i {
    color: var(--hitas-gold);
    font-size: 1rem;
}
.home-ticker-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 1rem;
}
.home-ticker-name {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .7rem;
    font-weight: 600;
    color: #5b6673;
}
@media (max-width: 576px) {
    .home-ticker-banner {
        height: 46px;
    }
    .home-ticker-value {
        font-size: .88rem;
    }
    .home-ticker-name {
        font-size: .62rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-ticker-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* =========================================================================
   Bouton de contact flottant (Accueil) : "Appel direct" + "WhatsApp",
   fixé en bas à droite de l'écran. S'appuie sur le composant dropdown de
   Bootstrap déjà chargé sur le site (aucun script supplémentaire requis).
   ========================================================================= */
.floating-contact {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
}
.floating-contact-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--hitas-gold);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.floating-contact-btn i {
    display: inline-block;
    animation: contact-btn-ring 2.6s ease-in-out infinite;
}
.floating-contact-btn:hover,
.floating-contact-btn:focus-visible,
.floating-contact-btn[aria-expanded="true"] {
    background: var(--hitas-gold-light);
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 34px rgba(0,0,0,0.36);
}
.floating-contact-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(156,124,60,0.45);
    animation: btn-postulez-pulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes contact-btn-ring {
    0%, 78%, 100% { transform: rotate(0); }
    83% { transform: rotate(-15deg); }
    88% { transform: rotate(12deg); }
    93% { transform: rotate(-8deg); }
}
.contact-dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.28);
    padding: .6rem;
    min-width: 250px;
    animation: contact-menu-in .18s ease;
}
@keyframes contact-menu-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.contact-dropdown-menu .dropdown-header {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--hitas-gold);
    font-weight: 700;
    padding-left: .6rem;
}
.contact-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 9px;
    padding: .55rem .6rem;
    color: var(--hitas-navy);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.contact-dropdown-menu .dropdown-item i {
    color: var(--hitas-gold);
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
}
.contact-dropdown-menu .dropdown-item:hover,
.contact-dropdown-menu .dropdown-item:focus-visible {
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
    transform: translateX(3px);
}
.contact-dropdown-menu .dropdown-item.disabled {
    opacity: .55;
    pointer-events: none;
}
@media (max-width: 576px) {
    .floating-contact {
        right: 1rem;
        bottom: 1rem;
    }
    .floating-contact-btn {
        width: 52px;
        height: 52px;
        font-size: 1.15rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .floating-contact-btn i,
    .floating-contact-btn::before {
        animation: none;
    }
}

/* =========================================================================
   Fiche programme (programme.php) : présentation détaillée, restylée pour
   donner de l'espace à une description riche (ex : cours de remise à
   niveau proposés directement par HITAS).
   ========================================================================= */
.program-detail-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #ece7d8;
    box-shadow: 0 10px 30px rgba(0,33,71,0.06);
    padding: 2.5rem;
}
.program-detail-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--hitas-gold);
    margin-bottom: .6rem;
}
.program-detail-heading {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--hitas-navy);
    margin-bottom: 1.5rem;
    line-height: 1.35;
}
.program-detail-body {
    color: #3d4a63;
    font-size: 1.02rem;
    line-height: 1.85;
}
.program-detail-subblock {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px dashed var(--hitas-rule);
}
.program-detail-subblock h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--hitas-navy);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.program-detail-subblock h3 i {
    color: var(--hitas-gold);
}
@media (max-width: 576px) {
    .program-detail-card {
        padding: 1.75rem 1.5rem;
    }
    .program-detail-heading {
        font-size: 1.3rem;
    }
}

/* =========================================================================
   Widget "Trouvez votre filière" (fin de programme.php) : recherche par
   filière + pays (optionnel) parmi les universités partenaires.
   ========================================================================= */
.program-finder-section {
    background: var(--hitas-ivory);
}
.program-finder-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ece7d8;
    box-shadow: 0 16px 40px rgba(0,33,71,0.08);
    padding: 2.5rem;
    max-width: 920px;
    margin: 0 auto;
}
.program-finder-form {
    max-width: 780px;
    margin: 0 auto;
}
.program-finder-results {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hitas-rule);
}
.program-finder-results-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--hitas-navy);
    text-align: center;
    line-height: 1.5;
}
@media (max-width: 576px) {
    .program-finder-card {
        padding: 1.75rem 1.25rem;
    }
}

/* =========================================================
   Notifications (toasts) — succès en vert, erreur en rouge
   Généré automatiquement à partir des messages .alert-success /
   .alert-danger / .alert-warning déjà produits par les pages
   (admin + formulaires publics : Postulez, Newsletter...).
   ========================================================= */
.hitas-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 24px);
}
.hitas-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    color: #1c2b3a;
    border-left: 5px solid transparent;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 20, 40, 0.18);
    padding: 14px 40px 14px 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    animation: hitasToastIn 0.35s ease forwards;
}
.hitas-toast--success { border-left-color: #1f9d55; }
.hitas-toast--success .hitas-toast-icon { color: #1f9d55; }
.hitas-toast--error { border-left-color: #d64545; }
.hitas-toast--error .hitas-toast-icon { color: #d64545; }
.hitas-toast-icon {
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}
.hitas-toast-body { flex: 1; }
.hitas-toast-body ul { margin: 0; padding-left: 1.1rem; }
.hitas-toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    color: #8a97a3;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.hitas-toast-close:hover { color: #1c2b3a; }
.hitas-toast.is-leaving { animation: hitasToastOut 0.3s ease forwards; }
@keyframes hitasToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes hitasToastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}
@media (max-width: 576px) {
    .hitas-toast-container {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* =========================================================================
   Mise à niveau HITAS (page Programmes, gérée depuis /admin/prep_blocks et
   /admin/prep_semesters) : un accordéon par bloc, avec le détail complet
   semestre par semestre (période + matières) à l'intérieur.
   ========================================================================= */
.prep-accordion-item {
    border: 1px solid rgba(0, 33, 71, 0.1);
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 1rem;
}
.prep-accordion-item:last-child {
    margin-bottom: 0;
}
.prep-accordion .accordion-button {
    font-family: var(--font-display);
    padding: 1.2rem 1.4rem;
}
.prep-accordion .accordion-button:not(.collapsed) {
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
    box-shadow: none;
}
.prep-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 33, 71, 0.1);
}
.prep-accordion-header-content {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
}
.prep-accordion-title {
    font-size: 1.1rem;
    font-weight: 700;
}
.prep-accordion-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.prep-block-intro {
    color: #4d5a71;
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 1.2rem;
}
.prep-block-programs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.prep-block-tag {
    display: inline-block;
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
    font-size: .78rem;
    font-weight: 600;
    padding: .32rem .7rem;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid rgba(0, 33, 71, 0.08);
    transition: background .2s ease, color .2s ease;
}
.prep-block-tag:hover {
    background: var(--hitas-gold);
    color: #fff;
}

/* ---------- Chronologie des semestres ---------- */
.prep-semester-timeline {
    position: relative;
    padding-left: 8px;
}
.prep-semester-item {
    display: flex;
    gap: 1.2rem;
    position: relative;
    padding-bottom: 2rem;
}
.prep-semester-item:last-child {
    padding-bottom: 0;
}
.prep-semester-item::before {
    /* Ligne verticale reliant les semestres entre eux */
    content: '';
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(0,33,71,0.18) 0 6px, transparent 6px 12px);
}
.prep-semester-item:last-child::before {
    display: none;
}
.prep-semester-marker {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hitas-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .92rem;
    box-shadow: 0 6px 16px rgba(0,33,71,0.25);
    z-index: 1;
}
.prep-semester-content {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(0, 33, 71, 0.1);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
}
.prep-semester-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .7rem;
}
.prep-semester-header h4 {
    font-size: 1rem;
    color: var(--hitas-navy);
    margin: 0;
}
.prep-semester-period {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hitas-gold);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.prep-semester-subjects {
    margin: 0;
    padding-left: 1.1rem;
    color: #4d5a71;
    font-size: .9rem;
    line-height: 1.8;
    columns: 2;
    column-gap: 1.5rem;
}
.prep-semester-subjects li {
    break-inside: avoid;
}

@media (max-width: 575.98px) {
    .prep-semester-subjects {
        columns: 1;
    }
}

/* =========================================================================
   Barre de recherche de filière avec autocomplétion ("Quelle filière
   veux-tu étudier ?", page Programmes).
   ========================================================================= */
.finder-autocomplete {
    position: relative;
}
.finder-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid #e4e0d4;
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(0, 33, 71, 0.14);
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}
.finder-autocomplete-list li {
    padding: .55rem .75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .92rem;
    color: #2d3a55;
}
.finder-autocomplete-list li:hover,
.finder-autocomplete-list li.is-active {
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
}
.finder-autocomplete-list li.is-empty {
    cursor: default;
    color: #8a97a3;
    font-style: italic;
}
.finder-autocomplete-list li.is-empty:hover {
    background: none;
}

/* =========================================================================
   Invitation à rejoindre la chaîne WhatsApp — fenêtre centrée avec fond
   assombri, pour bien attirer l'attention (apparaît 6 secondes après
   l'ouverture du site).
   ========================================================================= */
.wa-channel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: rgba(0, 15, 35, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .35s ease;
}
.wa-channel-overlay.is-visible {
    opacity: 1;
}

.wa-channel-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 15, 35, 0.4);
    padding: 2.2rem 2rem 1.8rem;
    width: 90%;
    max-width: 380px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity .35s ease, transform .35s ease;
    animation: waPopupAttention 1.8s ease-in-out .6s 2;
}
.wa-channel-popup.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
@keyframes waPopupAttention {
    0%, 100% { box-shadow: 0 30px 70px rgba(0, 15, 35, 0.4); }
    50% { box-shadow: 0 30px 70px rgba(0, 15, 35, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.18); }
}
.wa-channel-popup-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}
.wa-channel-popup-body strong {
    display: block;
    color: var(--hitas-navy);
    font-size: 1.2rem;
    margin-bottom: .5rem;
}
.wa-channel-popup-body p {
    font-size: .92rem;
    color: #4d5a71;
    line-height: 1.55;
    margin-bottom: 1.1rem;
}
.wa-channel-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    border: none;
    background: none;
    color: #8a97a3;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.wa-channel-popup-close:hover { color: #1c2b3a; }

@media (prefers-reduced-motion: reduce) {
    .wa-channel-popup {
        animation: none;
    }
}

/* =========================================================================
   PACK "CHIC" — bordures stylées, brillance et spotlight au curseur pour
   toutes les images des diaporamas du site (Filières phares, Actualités,
   Galerie Vie étudiante, Hero de l'accueil).
   ========================================================================= */

/* ---------- Hero (Accueil) : cadre discret + transition plus soyeuse ---------- */
.hero {
    box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.18);
}
.hero-slide {
    transition: opacity 1.9s cubic-bezier(.22,.9,.32,1);
}

/* ---------- Filières phares / Programmes (diaporama par groupes) ----------
   Fusionné avec la règle d'origine (même sélecteur) pour éviter que les deux
   ne se marchent dessus au survol — c'était la cause du scintillement. */
.program-card .program-img {
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(156, 124, 60, 0.3);
    transition: transform .5s ease, box-shadow .45s ease;
}
.program-card:hover .program-img {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 1.5px var(--hitas-gold-light), 0 0 0 6px rgba(156, 124, 60, 0.14);
}
.program-img::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 62%);
    transition: opacity .4s ease;
}
.program-card:hover .program-img::after {
    opacity: 1;
}

/* ---------- Galerie "Vie étudiante" (diaporama par catégorie) ----------
   Même principe : fusionné avec la règle d'origine (même sélecteur). */
.gallery-card-img {
    box-shadow: inset 0 0 0 1px rgba(156, 124, 60, 0.28);
    transition: transform .5s ease, box-shadow .45s ease;
}
.gallery-card:hover .gallery-card-img {
    transform: scale(1.04);
    box-shadow: inset 0 0 0 1.5px var(--hitas-gold-light), 0 0 0 6px rgba(156, 124, 60, 0.14);
}
.gallery-card-img::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), transparent 62%);
    transition: opacity .4s ease;
    z-index: 2;
}
.gallery-card:hover .gallery-card-img::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .program-img,
    .gallery-card-img,
    .hero-slide {
        transition: none !important;
    }
    .program-img::after,
    .gallery-card-img::before {
        display: none;
    }
}

/* =========================================================================
   Page Partenaires — cartes de la liste (vue d'ensemble, lien "En savoir
   plus" vers la fiche complète du partenaire).
   ========================================================================= */
.partner-list-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e0d4;
    border-radius: 16px;
    padding: 1.6rem;
    box-shadow: 0 4px 16px rgba(0,33,71,0.05);
    transition: transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease, border-color .35s ease;
    border-top: 3px solid transparent;
}
.partner-list-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,33,71,0.14);
    border-top-color: var(--hitas-gold);
}
.partner-list-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.partner-list-card-logo {
    max-height: 52px;
    max-width: 130px;
    object-fit: contain;
}
.partner-list-card-logo--placeholder {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.partner-list-card-country {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4d5a71;
    white-space: nowrap;
}

/* ---------- Partenaires (liste) : actions toujours visibles, lien externe
   séparé du bouton "En savoir plus" (pas caché dedans, pas de survol requis) ---------- */
.partner-list-card-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.partner-list-card-website {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hitas-navy);
    text-decoration: none;
    padding: .35rem 0;
    border-top: 1px dashed rgba(0,33,71,0.12);
    opacity: 1;
}
.partner-list-card-website:hover {
    color: var(--hitas-gold);
}

/* =========================================================================
   PAGE ÉQUIPE — arbre généalogique à 3 niveaux (Or / Argent / Bronze),
   géré depuis /admin/team (champ "Catégorie").
   ========================================================================= */
.team-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-tier {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-tier-header {
    text-align: center;
    margin-bottom: 2rem;
}
.team-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .45rem 1.1rem;
    border-radius: 30px;
}
.team-tier-caption {
    margin: .6rem 0 0;
    font-size: .88rem;
    color: #6b7784;
}
.team-tier--gold .team-tier-badge {
    background: linear-gradient(135deg, #f6d878, #c9a24a);
    color: #4a3600;
    box-shadow: 0 6px 18px rgba(201, 162, 74, 0.35);
}
.team-tier--silver .team-tier-badge {
    background: linear-gradient(135deg, #e7ebf0, #b9c2cc);
    color: #33414f;
    box-shadow: 0 6px 18px rgba(140, 152, 166, 0.3);
}
.team-tier--bronze .team-tier-badge {
    background: linear-gradient(135deg, #c98a5c, #8a5a3b);
    color: #fff;
    box-shadow: 0 6px 18px rgba(138, 90, 59, 0.3);
}

.team-tier-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}
.team-tier-row--compact {
    gap: 1.25rem;
}

/* ---------- Branches reliant les générations (l'effet "arbre") ---------- */
.team-tree-branch {
    display: flex;
    justify-content: center;
    height: 56px;
}
.team-tree-branch span {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--branch-start, #c9a24a), var(--branch-end, #b9c2cc));
    position: relative;
}
.team-tree-branch span::before,
.team-tree-branch span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateX(-50%);
}
.team-tree-branch span::before {
    top: -3px;
    background: var(--branch-start, #c9a24a);
    box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.18);
}
.team-tree-branch span::after {
    bottom: -3px;
    background: var(--branch-end, #b9c2cc);
    box-shadow: 0 0 0 4px rgba(140, 152, 166, 0.18);
}
.team-tree-branch--gold-silver span {
    --branch-start: #c9a24a;
    --branch-end: #b9c2cc;
}
.team-tree-branch--silver-bronze span {
    --branch-start: #b9c2cc;
    --branch-end: #8a5a3b;
}
.team-tree-branch--silver-bronze span::after {
    box-shadow: 0 0 0 4px rgba(138, 90, 59, 0.18);
}

/* ---------- Cartes (nœuds) ---------- */
.team-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    transition: transform .4s cubic-bezier(.22,.9,.32,1), box-shadow .4s ease, border-color .4s ease;
}

.team-node-photo {
    border-radius: 50%;
    object-fit: cover;
    background: var(--hitas-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--hitas-navy);
}

.team-node-name {
    font-family: var(--font-display);
    color: var(--hitas-navy);
    margin: 0;
}
.team-node-role {
    color: var(--hitas-gold);
    font-weight: 600;
    margin: .2rem 0 0;
}
.team-node-bio {
    color: #4d5a71;
    line-height: 1.65;
    margin: .9rem 0 0;
}
.team-node-bio--mini {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Or : grande carte, tout le détail --- */
.team-node--gold {
    width: 320px;
    padding: 2.2rem 1.8rem;
    border: 1px solid rgba(201, 162, 74, 0.35);
    box-shadow: 0 20px 44px rgba(0, 33, 71, 0.1);
}
.team-node--gold:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(201, 162, 74, 0.28);
    border-color: var(--hitas-gold);
}
.team-node--gold .team-node-photo {
    width: 128px;
    height: 128px;
    font-size: 2.2rem;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(201, 162, 74, 0.55), 0 16px 32px rgba(201, 162, 74, 0.25);
    margin-bottom: 1.2rem;
}
.team-node--gold .team-node-name { font-size: 1.35rem; }
.team-node--gold .team-node-role { font-size: .95rem; }
.team-node--gold .team-node-bio { font-size: .92rem; }
.team-node-verify {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.1rem;
    padding: .45rem .9rem;
    border-radius: 20px;
    background: rgba(201, 162, 74, 0.12);
    color: #8a6d1f;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}
.team-node-verify:hover {
    background: var(--hitas-gold);
    color: #fff;
}

/* --- Argent : carte moyenne, mini description --- */
.team-node--silver {
    width: 250px;
    padding: 1.7rem 1.4rem;
    border: 1px solid rgba(185, 194, 204, 0.5);
    box-shadow: 0 14px 30px rgba(0, 33, 71, 0.07);
}
.team-node--silver:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(140, 152, 166, 0.28);
    border-color: #b9c2cc;
}
.team-node--silver .team-node-photo {
    width: 92px;
    height: 92px;
    font-size: 1.6rem;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(185, 194, 204, 0.6), 0 10px 22px rgba(140, 152, 166, 0.2);
    margin-bottom: 1rem;
}
.team-node--silver .team-node-name { font-size: 1.05rem; }
.team-node--silver .team-node-role { font-size: .85rem; }
.team-node--silver .team-node-bio { font-size: .84rem; }

/* --- Bronze : petite carte, nom + poste seulement --- */
.team-node--bronze {
    width: 168px;
    padding: 1.2rem 1rem;
    border: 1px solid rgba(138, 90, 59, 0.25);
    box-shadow: 0 8px 18px rgba(0, 33, 71, 0.05);
}
.team-node--bronze:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px rgba(138, 90, 59, 0.22);
    border-color: #c98a5c;
}
.team-node--bronze .team-node-photo {
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(138, 90, 59, 0.4);
    margin-bottom: .75rem;
}
.team-node--bronze .team-node-name { font-size: .88rem; }
.team-node--bronze .team-node-role { font-size: .74rem; }

.team-tier + .team-tier {
    margin-top: 0;
}

@media (max-width: 767px) {
    .team-tree-branch { height: 34px; }
    .team-node--gold { width: 100%; max-width: 340px; }
    .team-node--silver { width: 100%; max-width: 280px; }
    .team-node--bronze { width: 140px; }
}

/* ---------- Équipe : contact (email / WhatsApp) après photo + poste ---------- */
.team-node-contact {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .6rem;
}
.team-node-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
    font-size: .95rem;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.team-node-contact-link:hover {
    transform: translateY(-2px);
    background: var(--hitas-navy);
    color: #fff;
}
.team-node-contact-link--whatsapp:hover {
    background: #25d366;
}
.team-node--bronze .team-node-contact-link {
    width: 28px;
    height: 28px;
    font-size: .8rem;
}

/* ---------- Équipe : bouton "En savoir plus" (Or / Argent) + modale ---------- */
.team-node-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    padding: .5rem 1.1rem;
    border-radius: 20px;
    border: 1.5px solid var(--hitas-navy);
    background: transparent;
    color: var(--hitas-navy);
    font-size: .82rem;
    font-weight: 700;
    transition: background .3s ease, color .3s ease, transform .2s ease;
}
.team-node-more:hover {
    background: var(--hitas-navy);
    color: #fff;
    transform: translateY(-2px);
}
.team-node--gold .team-node-more {
    border-color: var(--hitas-gold);
    color: #8a6d1f;
}
.team-node--gold .team-node-more:hover {
    background: var(--hitas-gold);
    color: #fff;
}
.team-node--silver .team-node-more {
    border-color: #8c98a6;
    color: #4d5a6b;
}
.team-node--silver .team-node-more:hover {
    background: #8c98a6;
    color: #fff;
}

.team-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
}
.team-modal .modal-header {
    border-bottom: 1px solid rgba(0,33,71,0.08);
    padding: 1.4rem 1.6rem 1rem;
}
.team-modal .modal-title {
    font-family: var(--font-display);
    color: var(--hitas-navy);
}
.team-modal .modal-body {
    padding: 1.6rem 1.8rem 2rem;
}
.team-modal-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hitas-ivory);
    color: var(--hitas-navy);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(201, 162, 74, 0.4), 0 14px 30px rgba(0,33,71,0.12);
}
.team-modal-bio {
    color: #4d5a71;
    line-height: 1.75;
    font-size: .95rem;
}

/* ---------- Localisation sur les fiches "campus annexe" (À propos) ---------- */
.campus-card-location {
    font-size: .82rem;
    color: var(--hitas-gold);
    font-weight: 600;
    margin: .2rem 0 .6rem;
}

/* =========================================================================
   HERO — cluster de bulles flottantes ("Actualités"), en haut à droite de
   la section Accueil. 6 bulles flottent doucement, indépendamment les unes
   des autres ; une seule à la fois grandit pour révéler une actualité
   (photo, titre, "En savoir plus"), le contenu est injecté par JS
   (site.js) à chaque tour. Prend beaucoup moins de hauteur que l'ancien
   demi-cercle.
   ========================================================================= */
.hero-bubbles {
    position: absolute;
    top: 0;
    right: 0;
    width: 460px;
    height: 420px;
    z-index: 2;
    pointer-events: none;
}

.hero-bubble {
    position: absolute;
    border-radius: 50%;
    transition: width .6s cubic-bezier(.22,.9,.32,1), height .6s cubic-bezier(.22,.9,.32,1),
                top .6s cubic-bezier(.22,.9,.32,1), left .6s cubic-bezier(.22,.9,.32,1);
}

.hero-bubble-shape {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.35), transparent 55%),
        linear-gradient(160deg, var(--hitas-gold-light) 0%, var(--hitas-gold) 45%, var(--hitas-navy) 100%);
    box-shadow: 0 14px 30px rgba(0, 10, 25, 0.32), 0 0 0 1.5px rgba(201, 169, 98, 0.5);
    transition: opacity .5s ease;
}

/* Chaque bulle a sa propre teinte (dégradé différent), tout en restant
   dans la palette du site — le cluster devient plus vivant, sans jamais
   sortir de l'identité visuelle HITAS. */
.hero-bubble--1 .hero-bubble-shape {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.35), transparent 55%),
        linear-gradient(160deg, var(--hitas-gold-light) 0%, var(--hitas-gold) 45%, var(--hitas-navy) 100%);
}
.hero-bubble--2 .hero-bubble-shape {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.4), transparent 55%),
        linear-gradient(160deg, #6fa8dc 0%, #2f6fa8 45%, var(--hitas-navy-dark) 100%);
}
.hero-bubble--3 .hero-bubble-shape {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.35), transparent 55%),
        linear-gradient(160deg, #e0c27a 0%, var(--hitas-navy) 55%, var(--hitas-navy-dark) 100%);
}
.hero-bubble--4 .hero-bubble-shape {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.4), transparent 55%),
        linear-gradient(160deg, #7fc9b0 0%, #2d7f68 45%, var(--hitas-navy-dark) 100%);
}
.hero-bubble--5 .hero-bubble-shape {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.38), transparent 55%),
        linear-gradient(160deg, #c98a7d 0%, #8a3f45 45%, var(--hitas-navy-dark) 100%);
}
.hero-bubble--6 .hero-bubble-shape {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,0.4), transparent 55%),
        linear-gradient(160deg, var(--hitas-gold-light) 0%, #6fa8dc 50%, var(--hitas-navy) 100%);
}

/* Position + taille au repos (petites bulles) + décalage d'animation propre
   à chacune, pour un mouvement organique façon bulles de savon. */
.hero-bubble--1 { width: 78px; height: 78px; top: 30px;  right: 210px; }
.hero-bubble--2 { width: 56px; height: 56px; top: 60px;  right: 100px; }
.hero-bubble--3 { width: 96px; height: 96px; top: 120px; right: 40px; }
.hero-bubble--4 { width: 46px; height: 46px; top: 180px; right: 170px; }
.hero-bubble--5 { width: 66px; height: 66px; top: 220px; right: 60px; }
.hero-bubble--6 { width: 60px; height: 60px; top: 80px;  right: 280px; }

/* Flux vertical continu (façon économiseur d'écran Microsoft) : chaque
   bulle remonte et redescend sur une large amplitude, à sa propre vitesse
   et avec un léger décalage horizontal — elles se croisent et se doublent
   au lieu de flotter toutes ensemble sur place. */
.hero-bubble--1 .hero-bubble-shape { animation: heroBubbleDriftA 11s ease-in-out infinite; animation-delay: 0s; }
.hero-bubble--2 .hero-bubble-shape { animation: heroBubbleDriftB 9s  ease-in-out infinite; animation-delay: 1.5s; }
.hero-bubble--3 .hero-bubble-shape { animation: heroBubbleDriftA 13s ease-in-out infinite; animation-delay: 3s; }
.hero-bubble--4 .hero-bubble-shape { animation: heroBubbleDriftB 8s  ease-in-out infinite; animation-delay: .8s; }
.hero-bubble--5 .hero-bubble-shape { animation: heroBubbleDriftA 10s ease-in-out infinite; animation-delay: 2.2s; }
.hero-bubble--6 .hero-bubble-shape { animation: heroBubbleDriftB 12s ease-in-out infinite; animation-delay: 4s; }

@keyframes heroBubbleDriftA {
    0%   { transform: translate(0, -150px); }
    50%  { transform: translate(14px, 150px); }
    100% { transform: translate(0, -150px); }
}
@keyframes heroBubbleDriftB {
    0%   { transform: translate(0, 150px); }
    50%  { transform: translate(-14px, -150px); }
    100% { transform: translate(0, 150px); }
}

.hero-bubble-content {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--hitas-navy-dark);
    transition: opacity .4s ease .1s;
}
.hero-bubble-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.hero-bubble-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-bubble-tint {
    position: absolute;
    inset: 0;
    /* Voile nettement allégé et uniforme : la photo reste claire et
       reconnaissable ; le texte reste lisible grâce à l'ombre portée sur
       le titre (voir .hero-bubble-title) plutôt qu'un fond très sombre. */
    background:
        radial-gradient(circle at 72% 20%, rgba(255,255,255,0.12), transparent 45%),
        linear-gradient(200deg, rgba(201,169,98,0.16) 0%, rgba(0,19,40,0.36) 100%);
}
.hero-bubble-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.4rem 1.7rem;
    opacity: 0;
    transition: opacity .35s ease .35s;
}

/* --- État actif : la bulle grandit et révèle son contenu --- */
.hero-bubble.is-active {
    width: 300px;
    height: 300px;
    top: 10px;
    right: 20px;
    z-index: 3;
}
.hero-bubble.is-active .hero-bubble-shape {
    opacity: 0;
    animation-play-state: paused;
}
.hero-bubble.is-active .hero-bubble-content {
    opacity: 1;
    pointer-events: auto;
}
.hero-bubble.is-active .hero-bubble-text {
    opacity: 1;
}

.hero-bubble-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hitas-gold-light);
    margin-bottom: .7rem;
}
.hero-bubble-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.32;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,10,25,0.85), 0 4px 18px rgba(0,10,25,0.5);
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-bubble-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--hitas-navy-dark);
    text-decoration: none;
    background: var(--hitas-gold-light);
    padding: .5rem 1rem;
    border-radius: 24px;
    box-shadow: 0 8px 18px rgba(0,10,25,0.25);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hero-bubble-link:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(0,10,25,0.32);
}

/* En dessous de "lg" : le cluster rétrécit en bloc, ancré au même coin —
   aucune position à recalculer séparément. */
@media (max-width: 991.98px) {
    .hero-bubbles {
        transform: scale(0.62);
        transform-origin: top right;
        pointer-events: auto;
    }
}
@media (max-width: 575.98px) {
    .hero-bubbles {
        transform: scale(0.46);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bubble-shape {
        animation: none;
    }
    .hero-bubble {
        transition: none;
    }
}

/* =========================================================================
   Sélecteur de langue (navbar) — pilote le widget externe Google
   Traduction, dont l'interface par défaut (bandeau du haut, cadre autour
/* ---------- Sélecteur de langue, intégré directement dans la navbar (à
   côté de Postulez) — même emplacement garanti que le reste du menu. ---------- */
.lang-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.lang-switcher-item.is-active {
    font-weight: 700;
    color: var(--hitas-gold);
}
.lang-switcher-item.is-active::before {
    content: '✓ ';
}

/* Widget Google Traduction : présent dans la page (nécessaire à son
   fonctionnement) mais totalement invisible — notre menu le pilote. */
.google-translate-hidden {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* =========================================================================
   Blindage anti-casse Google Traduction — série de correctifs standards
   contre les effets de bord bien connus de cet outil : bandeau du haut qui
   décale toute la page, infobulle de survol, halo autour du texte traduit,
   débordement horizontal quand une traduction est plus longue que
   l'original. Sans ça, le site peut visuellement "casser" une fois une
   langue activée.
   ========================================================================= */

/* Le bandeau/l'iframe que Google ajoute en haut de la page, et tout ce qui
   pourrait décaler le contenu vers le bas — neutralisés dans tous les cas
   (avant ET après activation d'une langue). */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.skiptranslate > iframe {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}
html body {
    top: 0px !important;
    position: static !important;
    min-height: 100% !important;
}

/* Infobulle et halo que Google affiche au survol d'un texte traduit —
   visuellement disgracieux et sans utilité une fois la traduction faite. */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Sécurité anti-débordement : une traduction est parfois plus longue que le
   texte français d'origine (l'allemand notamment). Ces garde-fous évitent
   qu'un mot trop long ne casse un bouton, un lien de menu ou ne crée un
   défilement horizontal indésirable. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.navbar-nav .nav-link,
.hero-bubble-title,
.program-card h5,
.card .h5, .card h5 {
    overflow-wrap: break-word;
    word-break: break-word;
}
.btn {
    white-space: nowrap;
}

/* ---------- Badge "Niveau du diplôme" (Bachelor, Master...) ---------- */
.bg-hitas-gold-badge {
    background: var(--hitas-gold);
    color: #fff;
    font-weight: 600;
    font-size: .74rem;
    padding: .32rem .7rem;
    border-radius: 20px;
    display: inline-block;
}

/* =========================================================================
   Diaporamas photo réutilisables (À propos, Notre mission, Conditions
   d'admission) — gérés depuis /admin/page_galleries. Utilisent le même
   moteur de rotation générique (initGroupSlideshow) que les autres
   diaporamas du site.
   ========================================================================= */
.about-image-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 420px;
    border-radius: 3px;
    overflow: hidden;
}
.about-image-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.about-image-slide.is-active {
    opacity: 1;
}
.about-image-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.about-image-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transition: background .3s ease, transform .3s ease;
}
.about-image-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* ---------- Diaporama "Conditions d'admission" (page FAQ) ---------- */
.admissions-visual-slideshow {
    position: relative;
    width: 100%;
    min-height: 280px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,33,71,0.12);
}
.admissions-visual-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.admissions-visual-slide.is-active {
    opacity: 1;
}
.admissions-visual-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.admissions-visual-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transition: background .3s ease, transform .3s ease;
}
.admissions-visual-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* =========================================================================
   "HITAS dans l'actualité internationale" (page Actualités) — rubrique
   indépendante, gérée depuis /admin/press. Style volontairement différent
   des cartes actualités/publicités au-dessus, pour bien la distinguer.
   ========================================================================= */
.press-section {
    background: var(--hitas-navy-dark);
}
.press-section .section-eyebrow,
.press-section .text-muted {
    color: rgba(255,255,255,0.65) !important;
}
.press-section .section-title {
    color: #fff;
}
.press-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}
.press-card:hover {
    transform: translateY(-4px);
    border-color: var(--hitas-gold-light);
}
.press-card-img {
    position: relative;
    height: 170px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,0.06);
}
.press-card-source {
    position: absolute;
    top: .7rem;
    left: .7rem;
    background: var(--hitas-gold);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .28rem .6rem;
    border-radius: 20px;
}
.press-card-body {
    padding: 1.2rem 1.3rem 1.4rem;
    color: #fff;
}
.press-card-date {
    font-size: .74rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: .4rem;
}
.press-card-body h3 {
    color: #fff;
}
.press-card-body a {
    color: var(--hitas-gold-light);
    text-decoration: none;
}
.press-card-body a:hover {
    text-decoration: underline;
}