@font-face {
    font-family: 'GeneralSans';
    src: url("../fonts/GeneralSans-Semibold-I2cHiuZ.otf") format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url("../fonts/AvertaStd-Semibold-9Cx_CGx.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand Colors from Charter */
    --night-blue: #1E194D;
    --electric-violet: #3F31C5;
    --light-lavender: #9FADFE;
    --light-blue: #f8f9fc;
    --light-lavender-alpha: rgba(159, 173, 254, 0.15);
    /* Very subtle */
    --white: #FFFFFF;
    --black: #000000;

    /* Semantic Theme Tokens - Light Mode */
    --bg-color: #FAFAFA;
    --bg-surface: #FFFFFF;
    --text-primary: #1E194D;
    --text-secondary: #5C627A;
    --border-color: #E2E8F0;

    /* Layout */
    --header-bg: rgba(30, 25, 77, 0.98);
    --footer-bg: var(--night-blue);
    --header-text: #1E194D;
    --topbar-bg: var(--night-blue);
    --topbar-text: var(--white);

    /* UI Tokens - Strict Luxury Minimalist (0px rounding) */
    --radius-sm: 14px;
    --radius-md: 14px;
    --radius-lg: 14px;
    --radius-pill: 14px;

    /* Boutons et images : rayon unique, pilote depuis ici. */
    --radius-btn: 6px;
    --radius-img: 10px;

    /* Shadows - Almost non-existent, flat design is more premium */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 20px 40px rgba(30, 25, 77, 0.05);
    /* Only for large floating elements like hero images */
    --shadow-electric: none;

    /* Fonts */
    --font-heading: 'GeneralSans', sans-serif;
    --font-body: 'Averta', sans-serif;

    /* Animation Timings - Slow and Elegant */
    --transition-fast: 0.25s ease-in-out;
    --transition-normal: 0.4s ease-in-out;
    --transition-slow: 0.6s cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] {
    /* Semantic Theme Tokens - Dark Mode */
    --bg-color: #0A0914;
    /* Very deep night blue / almost black */
    --bg-surface: #141226;
    /* Slightly lighter surface */
    --text-primary: #FFFFFF;
    --text-secondary: #8E8AAB;
    --border-color: #2A244D;

    --header-bg: rgba(10, 9, 20, 0.95);
    --header-text: #FFFFFF;
    --topbar-bg: #05040A;
    --topbar-text: #FFFFFF;

    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Base Reset */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-wrap: pretty;

}

html {
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    overflow-x: hidden;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Typography Refinements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    /* Tighter for large headings */
}

a {
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.container {
    width: 100%;
    /* Plafond releve a 1600 px : sur un portable 16 pouces (1728 px de large)
       un plafond a 1400 laissait 164 px de vide de chaque cote. */
    max-width: 1600px;
    /* Le centrage doit etre reellement applique : un margin-left fixe
       ecrasait le « auto » de gauche, si bien que le contenu etait colle
       a gauche et debordait de 76 px a droite des que la fenetre passait
       sous 1476 px. La respiration laterale passe donc par le padding,
       neutralise par le box-sizing: border-box global. */
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 76px);
}

/* =========================================
   UTILITIES
   ========================================= */
.text-center {
    text-align: center;
}

.text-electric {
    color: var(--electric-violet);
}

.text-night {
    color: var(--night-blue);
}

[data-theme="dark"] .text-night {
    color: var(--white);
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mb-8 {
    margin-bottom: 4rem;
}

/* Elegant Glassmorphism */
.glass {
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
}

/* =========================================
   UI COMPONENTS - LUXURY MINIMALIST
   ========================================= */

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Certains .btn sont des <button> (ouverture de la modale brochure) et non
       des <a> : sans ceci ils tomberaient sur la police par defaut du
       navigateur, Arial, au lieu de celle du site. Sans effet sur les liens. */
    font-family: inherit;

    font-weight: 500;
    letter-spacing: 0.05em;
    /* Tracking out for a premium feel */
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
    text-decoration: none;
    gap: 0.75rem;
    font-size: clamp(0.85rem, 0.9vw, 0.95rem);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Sizes */
.btn-sm {
    padding: clamp(0.4rem, 0.5vw, 0.5rem) clamp(0.8rem, 1vw, 1.2rem);
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    border-radius: var(--radius-btn);
}

.btn-md {
    padding: clamp(0.55rem, 0.65vw, 0.7rem) clamp(1.2rem, 1.4vw, 1.6rem);
    font-size: clamp(0.8rem, 0.9vw, 0.95rem);
    border-radius: var(--radius-btn);
}

.btn-lg {
    padding: clamp(0.7rem, 0.8vw, 0.9rem) clamp(1.8rem, 2vw, 2.2rem);
    font-size: clamp(0.9rem, 1vw, 1.05rem);
    border-radius: var(--radius-btn);
}

/* Variants */
.btn-primary {
    background-color: var(--electric-violet);
    color: var(--white);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--white);
    color: var(--night-blue);
}

.btn-primary:hover {
    background-color: var(--electric-violet);
    color: var(--white);
    filter: brightness(1.5);
    /* No scale or Y translation, just a crisp color crossfade */
}

.btn-secondary {
    background-color: var(--bg-surface);
    color: var(--electric-violet);
    border-color: var(--electric-violet);
}

.btn-secondary:hover {
    border-color: var(--electric-violet);
    color: var(--electric-violet);
    background-color: var(--bg-surface);
    filter: brightness(1.2);
}

[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--white);
    color: var(--white);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--electric-violet);
    color: var(--electric-violet);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--white);
    color: var(--white);
}

.btn-outline:hover {
    background-color: var(--electric-violet);
    color: var(--white);
}

[data-theme="dark"] .btn-outline:hover {
    background-color: var(--white);
    color: var(--night-blue);
}

/* Input / TextField */
.ui-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.ui-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.ui-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--transition-normal);
}

.ui-input:focus {
    outline: none;
    border-color: var(--night-blue);
}

[data-theme="dark"] .ui-input:focus {
    border-color: var(--white);
}

.ui-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Card - Flat, Architectural */
.ui-card {
    background: var(--bg-surface);
    border-radius: 14px;
    padding: 3rem 2rem;
    border: 1px solid var(--border-color);
    transition: border-color var(--transition-slow), background-color var(--transition-slow);
}

.ui-card:hover {
    /* Subtle interaction: no jump, just a border refinement */
    border-color: var(--night-blue);
}

[data-theme="dark"] .ui-card:hover {
    border-color: var(--white);
}

/* Accordion */
.ui-accordion {
    border-bottom: 1px solid var(--border-color);
}

.ui-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    background: none;
    border: none;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-normal);
}

.ui-accordion-header:hover {
    color: var(--electric-violet);
}

.ui-accordion-icon {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-slow);
    color: var(--text-primary);
}

.ui-accordion-header:hover .ui-accordion-icon {
    color: var(--electric-violet);
}

.ui-accordion-header.active .ui-accordion-icon {
    transform: rotate(180deg);
}

.ui-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.ui-accordion-inner {
    padding-bottom: 2rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 800px;
}

/* Theme Toggle Component */
.theme-toggle-wrapper {
    position: relative;
    display: inline-block;
}

.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle-btn:hover,
.theme-toggle-btn[aria-expanded="true"] {
    background-color: var(--light-lavender-alpha);
    color: var(--electric-violet);
}

.theme-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 100;
    padding: 0.5rem;
}

[data-theme="dark"] .theme-dropdown-menu {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.theme-dropdown-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.theme-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-align: left;
}

.theme-dropdown-item:hover,
.theme-dropdown-item.active {
    background-color: var(--light-lavender-alpha);
    color: var(--electric-violet);
}

/* Lang Toggle Component */
.lang-toggle-wrapper {
    position: relative;
    display: inline-block;
}

.lang-toggle-btn {
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
}

.lang-flag-current {
    font-size: 1rem;
    line-height: 1;
}

.lang-toggle-btn:hover,
.lang-toggle-btn[aria-expanded="true"] {
    color: var(--electric-violet);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    min-width: 170px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 1000;
    padding: 0.5rem;
}

[data-theme="dark"] .lang-dropdown-menu {
    background-color: var(--night-blue);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(10, 8, 30, 0.4);
}

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

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    color: var(--night-blue);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-align: left;
    text-decoration: none;
}

[data-theme="dark"] .lang-dropdown-item {
    color: var(--white);
}

.lang-flag {
    font-size: 1.1rem;
    line-height: 1;
}

.lang-dropdown-item:hover,
.lang-dropdown-item.active {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--electric-violet);
}

[data-theme="dark"] .lang-dropdown-item:hover,
[data-theme="dark"] .lang-dropdown-item.active {
    background-color: rgba(63, 49, 197, 0.5);
    color: #ffffff;
}

/* =========================================
   HEADER & NAVBAR
   ========================================= */
.topbar {
    background-color: var(--night-blue);
    padding: 0.6rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--white);
}

.topbar-content {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.topbar a {
    color: var(--light-lavender);
    font-weight: 500;
}

.topbar a:hover {
    opacity: 0.8;
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.brand-logo img {
    height: 32px;
}

[data-theme="dark"] .logo-color {
    display: none;
}

[data-theme="light"] .logo-white {
    display: none;
}

.floating-actions-pill {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--night-blue);
    border-right: none;
    z-index: 90;
    /* reste sous la navbar (1000) et son panneau mobile */
    padding: 0;
    gap: 0;
    overflow: hidden;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.pill-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--night-blue);
    text-decoration: none;

    /* Le second bouton du pill est un <button> (il ouvre la modale brochure)
       et non un <a> : sans ceci il heriterait du fond gris, de la bordure et
       de la police par defaut du navigateur. Sans effet sur le lien. */
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 12px;
    width: 100%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pill-action:hover {
    background-color: var(--light-lavender);
    /* Strict graphic charter hover */
    color: var(--night-blue);
}

.pill-divider {
    width: 100%;
    height: 2px;
    background-color: var(--night-blue);
}

/* Sous 1200px : même seuil que le passage en menu burger.
   La pill devient une barre horizontale compacte, ancrée en bas,
   icône seule — elle ne recouvre plus le contenu au milieu de l'écran. */
@media (max-width: 1200px) {
    .floating-actions-pill {
        top: auto;
        bottom: 1.25rem;
        right: 1rem;
        transform: none;
        flex-direction: row;
        border-radius: 14px;
        border: 1px solid #f0f0f0;
        padding: 10px 14px;
        gap: 12px;
    }

    .pill-divider {
        width: 1px;
        height: 24px;
    }

    .pill-action span {
        display: none;
        /* icône seule, empreinte minimale au pouce */
    }
}

@media (max-width: 480px) {
    .floating-actions-pill {
        right: 0.75rem;
        bottom: 0.9rem;
        padding: 8px 10px;
        gap: 10px;
    }
}

/* Sous 640px : le libellé "Candidater" cède la place, le burger reste prioritaire */
@media (max-width: 640px) {
    .hia-nav__controls {
        gap: 0.6rem;
    }

    .hia-nav__cta {
        padding: 0.65rem 0.75rem;
        gap: 0;
    }

    .hia-nav__cta span {
        display: none;
        /* icône seule, le bouton reste identifiable */
    }

    .hia-nav__rule {
        display: none;
    }

    .hia-nav__name {
        font-size: 0.9rem;
    }
}

/* Sous 380px (Galaxy S8+ et plus petit) : ne garder que l'isotype, 
   le nom complet "Honest Inn Academy" n'a plus la place de respirer */
@media (max-width: 380px) {
    .hia-nav__wordmark {
        display: none;
    }

    .hia-nav__inner {
        gap: 1rem;
    }
}

/* Ne rentre jamais en conflit visuel avec le panneau de nav mobile ouvert */
body.hia-nav-open .floating-actions-pill {
    opacity: 0;
    pointer-events: none;
}

.header-controls {
    display: flex;
    gap: 1rem;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border-color);
}

select.theme-select,
select.lang-select {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 0.8vw, 0.82rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-weight: 500;
}

select.theme-select:focus,
select.lang-select:focus {
    outline: none;
}

.main-nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.main-nav .nav-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--white);
    position: relative;
    padding-bottom: 4px;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--light-lavender);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--text-primary);
    transition: width var(--transition-normal);
}

.main-nav a:hover::after {
    width: 100%;
}


/* =========================================
   NAVBAR PREMIUM (LIGHT & GLASS)
   ========================================= */
/* =========================================
   NAVBAR — HONEST INN ACADEMY
   Fond night-blue plein, pastille glissante,
   halo violet en arrière-plan
   ========================================= */

.hia-nav {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.hia-nav.is-scrolled {
    background: var(--electric-violet);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.hia-nav.is-scrolled .logo-default {
    display: none;
}

.hia-nav.is-scrolled .logo-scrolled {
    display: block !important;
}

/* Halo décoratif - Hidden for light mode navbar */
.hia-nav__halo {
    display: none;
}

.hia-nav__halo::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -80px;
    width: 360px;
    height: 280px;
    background: radial-gradient(circle, var(--electric-violet) 0%, transparent 70%);
    opacity: 0.35;
}

.hia-nav__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 18px 0;
    margin: 0 48px;
    width: auto;
    transition: padding var(--transition-normal);
}

.hia-nav.is-scrolled .hia-nav__inner {
    padding: 0.8rem 0;
}

/* Brand */
.hia-nav__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    /* Take up all available space on the left */
    justify-content: flex-start;
}

.hia-nav__mark {
    height: clamp(28px, 2.2vw, 36px);
    width: auto;
    transition: height var(--transition-normal);
}



.hia-nav__rule {
    width: 1px;
    height: 26px;
    background: var(--night-blue);
    opacity: 0.2;
}

.hia-nav__wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.hia-nav__name {
    font-family: var(--font-heading);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 700;
    color: var(--night-blue);
    letter-spacing: -0.01em;
}

.hia-nav__academy {
    font-family: var(--font-body);
    font-size: clamp(0.5rem, 0.6vw, 0.6rem);
    font-weight: 700;
    color: var(--electric-violet);
    text-transform: uppercase;
    letter-spacing: 0.28em;
}

/* Nav */
.hia-nav__nav {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 1;
}

.hia-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hia-nav__link {
    position: relative;
    z-index: 1;
    display: block;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 0.8vw, 0.82rem);
    font-weight: 500;
    color: var(--night-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: clamp(0.4rem, 0.5vw, 0.55rem) clamp(0.5rem, 0.6vw, 0.7rem);
    transition: color var(--transition-fast);
}

/* .has-mega : l entree dont le panneau est ouvert. Elle garde la couleur du
   survol meme quand la souris est descendue dans le panneau, ou elle ne la
   survole donc plus. */
.hia-nav__link:hover,
.hia-nav__link.is-active,
.hia-nav__link.has-mega {
    color: var(--electric-violet);
}

.hia-nav.is-scrolled .hia-nav__link,
.hia-nav.is-scrolled .hia-nav__controls .lang-toggle-btn,
.hia-nav.is-scrolled .hia-nav__controls select.lang-select {
    color: var(--white);
}

.hia-nav.is-scrolled .hia-nav__link:hover,
.hia-nav.is-scrolled .hia-nav__link.is-active,
.hia-nav.is-scrolled .hia-nav__link.has-mega {
    color: var(--light-lavender);
}

/* Indicateur de lien (Ligne simple et élégante) */
.hia-nav__indicator {
    position: absolute;
    bottom: -2px;
    height: 2px;
    background-color: var(--electric-violet);
    border-radius: 14px;
    z-index: 0;
    transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        opacity var(--transition-fast);
    opacity: 0;
    pointer-events: none;
}

.hia-nav__nav:hover .hia-nav__indicator,
.hia-nav__indicator.is-active {
    opacity: 1;
}

.hia-nav.is-scrolled .hia-nav__indicator {
    background-color: var(--white);
}

/* Controls */
.hia-nav__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    flex: 1;
    /* Take up all available space on the right */
}

.hia-nav__controls .lang-toggle-btn,
.hia-nav__controls select.lang-select {
    color: var(--night-blue);
    font-weight: 500;
}

/* CTA Button - Simple & Elegant */
.hia-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--electric-violet);
    color: var(--white);
    border: 1px solid var(--electric-violet);
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 0.85vw, 0.85rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: clamp(0.5rem, 0.7vw, 0.65rem) clamp(1rem, 1.2vw, 1.4rem);
    border-radius: var(--radius-btn);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease-out;
}

.hia-nav__cta:hover {
    background: var(--electric-violet);
    border-color: var(--electric-violet);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Scrolled State for CTA Button */
.hia-nav.is-scrolled .hia-nav__cta {
    background: var(--white);
    color: var(--electric-violet);
    border-color: var(--white);
}

.hia-nav.is-scrolled .hia-nav__cta:hover {
    background: var(--night-blue);
    color: var(--white);
    border-color: var(--night-blue);
}

.hia-nav__cta:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Burger */
.hia-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.hia-nav__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--white);
    border-radius: 14px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hia-nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hia-nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.hia-nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Seuil remonté à 1200px : 6 libellés FR ont besoin de place */
@media (max-width: 1200px) {
    .hia-nav__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(380px, 85vw);
        height: 100vh;
        background: linear-gradient(160deg, var(--night-blue) 0%, #0a081f 100%);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 6rem 2.5rem 2rem;
        transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 999;
        box-shadow: -20px 0 60px rgba(10, 8, 30, 0.5);
    }

    .hia-nav__nav.is-open {
        right: 0;
    }

    .hia-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .hia-nav__link {
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 1.25rem 0;
        width: 100%;
        text-align: left;
        color: var(--white);
        opacity: 0.7;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: opacity 0.3s, color 0.3s, padding-left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .hia-nav__link::after {
        content: '→';
        font-family: var(--font-body);
        font-weight: 400;
        color: var(--light-lavender);
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.3s, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .hia-nav__link:hover,
    .hia-nav__link.is-active {
        color: var(--white);
        opacity: 1;
        padding-left: 12px;
    }

    .hia-nav__link:hover::after,
    .hia-nav__link.is-active::after {
        opacity: 1;
        transform: translateX(0);
    }

    .hia-nav__indicator {
        display: none;
    }

    .hia-nav__burger {
        display: flex;
        position: relative;
        z-index: 1001;
        /* Ensure burger/close button is always above the menu */
    }

    .hia-nav__controls {
        position: relative;
        z-index: 1001;
    }
}


/* =========================================
   HOMEPAGE (LUXURY MINIMALIST)
   ========================================= */

/* Hero Section */
.hero {
    padding: 10rem 0 8rem;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 500px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 1rem;
}

.hero-image-wrapper {
    position: relative;
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-img);
    /* Instead of shadow, just clean borders or filter */
    filter: brightness(0.95) contrast(1.05);
}

/* Features */
.features {
    padding: 8rem 0;
    border-top: 1px solid var(--border-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.feature-icon-wrapper {
    margin-bottom: 2rem;
    color: var(--text-primary);
    /* Very minimalist, no background */
}

.ui-card:hover .feature-icon-wrapper {
    color: var(--electric-violet);
    transition: color var(--transition-slow);
}

/* Formations */
.formations {
    padding: 8rem 0;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

.formations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.formation-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 14px;
    margin-bottom: 2rem;
}

.formation-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-top: 2rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid transparent;
    transition: all var(--transition-normal);
}

.formation-link:hover {
    color: var(--electric-violet);
    border-color: var(--electric-violet);
}


/* =========================================
   FOOTER
   ========================================= */
.footer {
    background-color: var(--night-blue);
    color: var(--white);
    padding: 5rem 0 2rem;
    border-top: none;
}

[data-theme="dark"] .footer {
    background-color: var(--night-blue);
    color: var(--white);
}

.footer .logo-color {
    display: none !important;
}

.footer .logo-white {
    display: block !important;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-brand p {
    color: var(--white);
    opacity: 0.7;
    margin-top: 2rem;
    max-width: 300px;
    font-size: 0.95rem;
}

.footer-col h4 {
    color: var(--white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 1rem;
}

.footer-col ul li a {
    color: var(--white);
    opacity: 0.7;
    font-size: 0.95rem;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.footer-col ul li a:hover {
    color: var(--electric-violet);
    opacity: 1;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    opacity: 0.6;
    font-size: 0.85rem;
}

/* Newsletter Custom Styles */
.footer-newsletter-text {
    color: var(--white);
    opacity: 0.7;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.newsletter-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.25rem;
    transition: all var(--transition-normal);
}

.newsletter-input-group:focus-within {
    border-color: var(--electric-violet);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(114, 87, 250, 0.2);
}

.newsletter-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 0.75rem 1.25rem;
    color: var(--white) !important;
    font-size: 0.95rem;
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.newsletter-btn {
    background: var(--electric-violet);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.newsletter-btn:hover {
    background: var(--light-lavender);
    color: var(--night-blue);
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .formations-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   TUNON HOMEPAGE REDESIGN
   ========================================= */

.tunon-hero {
    background-color: var(--white);
    color: var(--night-blue);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 0;
}

[data-theme="dark"] .tunon-hero {
    background-color: var(--white);
    /* Keep white as per mockup for now */
    color: var(--night-blue);
}

.tunon-hero .container {
    display: block;

    /* Ce conteneur porte un data-aos, donc une transform, donc son propre
       contexte d empilement : le z-index:1 de .tunon-hero-content s y trouve
       enferme et ne pouvait plus passer devant .tunon-hero-image. Comme le
       conteneur precede la photo dans le DOM, la photo se peignait par-dessus
       et interceptait les clics sur les boutons du hero. */
    position: relative;
    z-index: 2;

    /* Il passe devant, mais ne doit pas intercepter les clics sur la photo :
       le declencheur video de l accueil est un bouton invisible pose dessus.
       Le contenu reel les reprend juste en dessous. */
    pointer-events: none;

    /* .tunon-hero est en display:flex : sans flex, ce conteneur est un item en
       width:auto et se retracte a la largeur de son contenu — il tombait a 33 %
       de la section. Le bloc de texte, en max-width:65 %, n avait donc plus que
       325px : les titres se coupaient en plein milieu (« Honest / Inn »).
       Avec flex:1 il occupe la largeur prevue et le 65 % reprend son sens. */
    flex: 1;
    width: auto;
    max-width: none;
    margin: 0 48px;
    padding: 0;
}

.tunon-hero-content {
    position: relative;
    z-index: 1;
    /* Contrepartie du pointer-events:none pose sur .tunon-hero .container. */
    pointer-events: auto;
    max-width: 65%;
    /* Navbar height ~72px + 48px margin = 120px padding-top */
    padding: 120px 0 3rem 0;
}

.hero-surtitle {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hero-surtitle-line {
    width: 30px;
    height: 1px;
    background: var(--night-blue);
}

.hero-surtitle-text {
    font-weight: 700;
    font-size: clamp(0.8rem, 0.9vw, 0.9rem);
    letter-spacing: 0.15em;
    color: var(--night-blue);
    text-transform: uppercase;
}

.tunon-hero-content h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--night-blue);
    letter-spacing: -0.02em;
}

/* Accent des titres de hero : violet et droit.

   L accueil obtenait deja ce rendu, mais en posant un style en ligne dans sa
   traduction (`<span style="color: var(--electric-violet)">`). Les autres pages
   marquent leur accent avec <em> et heritaient donc de l italique par defaut du
   navigateur, en night blue. Cette regle aligne tout le site sur l accueil.

   Concerne admissions, programmes, stage & alternance, ecole & entreprises,
   RSE et accessibilite. La fiche formation n a pas d accent dans son titre. */
.tunon-hero-content h1 em {
    font-style: normal;
    color: var(--electric-violet);
}

.tunon-hero-content p {
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.7;
    color: var(--night-blue);
    opacity: 0.85;
    max-width: clamp(500px, 30vw, 600px);
    margin-bottom: 3rem;
}

.hero-features {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 4rem;
}

.hero-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(30, 25, 77, 0.15);
}

.hero-feature:last-child {
    border-right: none;
    padding-right: 0;
}

.hero-feature-icon {
    color: var(--electric-violet);
}

.hero-feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hero-feature-text strong {
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    font-weight: 600;
    color: var(--night-blue);
}

.hero-feature-text span {
    font-size: clamp(0.6rem, 0.7vw, 0.7rem);
    color: var(--text-secondary);
}

.tunon-hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 65%;
    z-index: 0;
    background: #e9e5e1;
    /* Fondu horizontal, et non circulaire : le radial-gradient dessinait un arc
       visible sur le bord gauche du visuel.

       Une simple rampe lineaire laissait deviner l'endroit ou le fondu demarre,
       car la transparence y varie brutalement de zero a constante. Les paliers
       intermediaires ci-dessous dessinent une courbe adoucie : depart et fin
       progressifs, aucun point de rupture perceptible. C'est la meme technique
       que le fondu vertical porte par l'image.

       Partage par 6 pages : accueil, admissions, programmes, fiche formation,
       contact, stage & alternance. */
    -webkit-mask-image: linear-gradient(to left,
            black 28%,
            rgba(0, 0, 0, 0.96) 40%,
            rgba(0, 0, 0, 0.85) 52%,
            rgba(0, 0, 0, 0.63) 64%,
            rgba(0, 0, 0, 0.38) 76%,
            rgba(0, 0, 0, 0.17) 87%,
            rgba(0, 0, 0, 0.05) 95%,
            transparent 100%);
    mask-image: linear-gradient(to left,
            black 28%,
            rgba(0, 0, 0, 0.96) 40%,
            rgba(0, 0, 0, 0.85) 52%,
            rgba(0, 0, 0, 0.63) 64%,
            rgba(0, 0, 0, 0.38) 76%,
            rgba(0, 0, 0, 0.17) 87%,
            rgba(0, 0, 0, 0.05) 95%,
            transparent 100%);
}

.tunon-hero-image img,
.tunon-hero-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;

    /* Fondu progressif de la photo elle-même sur ses bords haut et bas,
       plutôt qu'un calque de couleur posé par-dessus : pas de ligne de raccord */
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.15) 6%,
            rgba(0, 0, 0, 0.55) 14%,
            black 26%,
            black 74%,
            rgba(0, 0, 0, 0.55) 86%,
            rgba(0, 0, 0, 0.15) 94%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.15) 6%,
            rgba(0, 0, 0, 0.55) 14%,
            black 26%,
            black 74%,
            rgba(0, 0, 0, 0.55) 86%,
            rgba(0, 0, 0, 0.15) 94%,
            transparent 100%);
}

/* ==========================================================================
   VIDÉO DE PRÉSENTATION
   Aperçu muet en boucle dans le hero + lecture intégrale dans une modale.
   ========================================================================== */

/* Cadrage decale vers la droite, propre a la page d'accueil : eloigne le logo
   affiche a l'ecran des boutons flottants « Candidater / Brochure », qui le
   chevauchaient sur les ecrans etroits. */
.tunon-hero-image--video img {
    object-position: 30% top;
}

/* Le visuel du hero devient entièrement cliquable.
   Bouton et non div : accessible au clavier et annoncé par les lecteurs d'écran. */
.hero-video-trigger {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-video-trigger:focus-visible {
    outline: 3px solid var(--electric-violet);
    outline-offset: -6px;
}

/* Pastille de lecture. Décalée à droite du centre : la partie gauche du
   visuel est estompée par le masque radial du hero, le repère y serait noyé. */
.hero-video-play {
    position: absolute;
    top: 50%;
    left: 62%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: var(--radius-btn);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 30px rgba(30, 25, 77, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease, background 0.28s ease;
    z-index: 2;
}

.hero-video-play svg {
    width: 26px;
    height: 26px;
    margin-left: 4px;
    /* recentre optiquement le triangle */
    fill: var(--electric-violet);
}

.hero-video-trigger:hover .hero-video-play,
.hero-video-trigger:focus-visible .hero-video-play {
    transform: translate(-50%, -50%) scale(1.09);
    background: #fff;
}

/* Halo pulsé, purement décoratif */
.hero-video-play::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: var(--radius-btn);
    border: 2px solid rgba(255, 255, 255, 0.55);
    animation: heroVideoPulse 2.4s ease-out infinite;
}

@keyframes heroVideoPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
    }

    70% {
        transform: scale(1.28);
        opacity: 0;
    }

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

/* ---- Modale de lecture ---- */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 40, 0.88);
    backdrop-filter: blur(6px);
}

.video-modal-inner {
    position: relative;
    width: min(1180px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 88vh;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    transform: scale(0.965);
    transition: transform 0.3s ease;
}

.video-modal.is-open .video-modal-inner {
    transform: scale(1);
}

.video-modal-inner video,
.video-modal-inner iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.video-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--radius-btn);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
    background: var(--electric-violet);
}

body.video-modal-open {
    overflow: hidden;
}

/* Sur mobile la pastille est réduite et le halo retiré (bruit visuel) */
@media (max-width: 768px) {
    .hero-video-play {
        width: 58px;
        height: 58px;
    }

    .hero-video-play svg {
        width: 20px;
        height: 20px;
    }

    .hero-video-play::before {
        display: none;
    }
}

/* Respect du réglage système : pas d'animation involontaire */
@media (prefers-reduced-motion: reduce) {
    .hero-video-play::before {
        animation: none;
    }

    .video-modal,
    .video-modal-inner {
        transition: none;
    }
}

.tunon-floating-search {
    position: relative;
    margin: 4rem 0;
    z-index: 10;
}

.tunon-search-box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0 0 0 1rem;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-normal);
}

[data-theme="dark"] .tunon-search-box {
    background: rgba(20, 18, 38, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}


/* Custom Select */
.custom-select-wrapper {
    position: relative;
    flex: 1;
    border-right: 1px solid rgba(30, 25, 77, 0.1);
}

.custom-select-wrapper:last-of-type {
    border-right: none;
    margin-right: 0.5rem;
}

.custom-select-trigger {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-fast);
}

.custom-select-trigger:hover {
    color: var(--electric-violet);
}

[data-theme="dark"] .custom-select-trigger:hover {
    color: var(--white);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    overflow: hidden;
}

.custom-select-options.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.custom-select-option {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.custom-select-option:hover,
.custom-select-option.selected {
    background-color: var(--light-lavender-alpha);
    color: var(--electric-violet);
}

/* Specific Search Button Override */
.search-submit-btn {
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0 2.5rem;
    background-color: var(--electric-violet) !important;
    color: var(--white) !important;
    border: none !important;
    white-space: nowrap;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
}

.search-submit-btn:hover {
    filter: brightness(1.2);
}

.tunon-zigzag {
    padding: 8rem 0 4rem;
}

.tunon-zigzag-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
}

.tunon-zigzag-row:nth-child(even) {
    direction: rtl;
}

.tunon-zigzag-row:nth-child(even)>* {
    direction: ltr;
}

.tunon-zigzag-image {
    position: relative;
    height: 400px;
    border-radius: var(--radius-img);
}

.tunon-zigzag-image::after {
    content: '';
    position: absolute;
    inset: -1rem 1rem 1rem -1rem;
    background-color: var(--light-lavender-alpha);
    z-index: -1;
    border-radius: var(--radius-img);
}

.tunon-zigzag-row:nth-child(even) .tunon-zigzag-image::after {
    inset: -1rem -1rem 1rem 1rem;
}

.tunon-zigzag-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-img);
}

.tunon-zigzag-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    text-transform: uppercase;
}

.tunon-zigzag-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.tunon-testimonials {
    padding: 4rem 0 6rem;
}

.tunon-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.tunon-testimonial-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tunon-testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.tunon-testimonial-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.tunon-testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-img);
    border: 2px solid var(--border-color);
    padding: 3px;
}

.tunon-testimonial-card h4 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.tunon-badge {
    display: inline-block;
    background-color: var(--light-lavender);
    color: var(--night-blue);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.tunon-figures {
    padding: 6rem 0;
    background-color: var(--light-lavender-alpha);
}

.tunon-figures-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.tunon-figure-item h3 {
    font-size: 3.5rem;
    color: var(--electric-violet);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.tunon-partners {
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
}

.tunon-partners-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.tunon-partners-grid:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.tunon-partners-grid img {
    height: 50px;
    object-fit: contain;
}

@media (max-width: 992px) {
    .tunon-hero {
        display: block;
        padding-top: 0;
    }

    .tunon-hero .container,
    .tunon-zigzag-row {
        grid-template-columns: 1fr;
    }

    .tunon-hero-content {
        max-width: 100%;
        padding: 50vh 0 3rem 0;
        z-index: 2;
    }

    .tunon-hero-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 65vh;
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        margin: 0;
    }

    .hero-features {
        flex-direction: column;
        gap: 2rem;
    }

    .hero-feature {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(30, 25, 77, 0.15);
        padding-bottom: 1.5rem;
    }

    .hero-feature:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .tunon-zigzag-row:nth-child(even) {
        direction: ltr;
    }

    .tunon-figures-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .tunon-hero-content h1 {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
    }

    .tunon-hero-content>div:nth-child(4) {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .tunon-hero-content>div:nth-child(4)>* {
        width: 100%;
        justify-content: center;
    }

    .tunon-search-box {
        flex-direction: column;
        align-items: stretch;
    }

    .tunon-search-box select,
    .tunon-search-box button {
        width: 100%;
    }

    .tunon-figures-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   ADDITIONAL TUNON SECTIONS
   ========================================= */

/* Excellence & Collage */
.tunon-excellence {
    padding: 8rem 0;
    background-color: var(--bg-surface);
}

[data-theme="dark"] .tunon-excellence {
    background-color: var(--bg-color);
}

.tunon-excellence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.tunon-excellence-content h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.tunon-excellence-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.tunon-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.tunon-badge-outline {
    border: 1px solid var(--electric-violet);
    color: var(--electric-violet);
    padding: 0.5rem 1.25rem;
    border-radius: 14px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    font-weight: bold;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tunon-badge-outline:hover {
    background-color: var(--electric-violet);
    color: white;
}

.tunon-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: 250px 250px;
    gap: 1.5rem;
}

.tunon-collage-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-img);
}

.tunon-collage-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    border-radius: inherit;
}

.tunon-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.tunon-collage-img-wrapper:hover img {
    transform: scale(1.05);
}

.tunon-collage-img-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    z-index: 2;
    box-shadow: var(--shadow-lg);
}

.tunon-collage-img-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    transform: translate(-1.5rem, 1.5rem);
    z-index: 1;
}

.tunon-collage-img-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    transform: translate(-1.5rem, -1.5rem);
    z-index: 3;
    box-shadow: var(--shadow-lg);
}

/* Pourquoi Nous Choisir */
.tunon-reasons {
    padding: 6rem 0;
    background-color: var(--light-lavender-alpha);
}

.tunon-reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 4rem;
}

.tunon-reason-card {
    text-align: left;
    background: transparent;
}

.tunon-reason-icon {
    width: 60px;
    height: 60px;
    background-color: var(--light-lavender-alpha);
    color: var(--electric-violet);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.tunon-reason-card h4 {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.tunon-reason-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Campus Gallery */
.tunon-campus {
    padding: 6rem 0;
}

.tunon-campus-header {
    text-align: center;
    margin-bottom: 4rem;
}

.tunon-campus-header h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    color: var(--text-primary);
}

.tunon-campus-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.tunon-campus-item {
    position: relative;
    height: 450px;
    overflow: hidden;
    cursor: pointer;
}

.tunon-campus-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tunon-campus-overlay {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(30, 25, 77, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem 2.5rem;
    transition: opacity 0.4s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tunon-campus-item:hover img {
    transform: scale(1.05);
}

.tunon-campus-title {
    color: white;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    font-weight: 300;
}

.tunon-campus-subtitle {
    color: var(--light-lavender);
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-top: 0.5rem;
    display: block;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.tunon-campus-item:hover .tunon-campus-subtitle {
    transform: translateY(0);
    opacity: 1;
}

/* Additional Responsive Adjustments */
@media (max-width: 992px) {
    .tunon-excellence-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .tunon-reasons-grid {
        grid-template-columns: 1fr;
    }

    .tunon-campus-gallery {
        grid-template-columns: 1fr;
    }
}

/* AUTH LAYOUT */
.tunon-auth-layout {
    display: flex;
    min-height: calc(100vh - 80px);
    background: var(--bg-body);
}

.tunon-auth-image {
    flex: 1;
    position: relative;
    display: none;
}

@media (min-width: 992px) {
    .tunon-auth-image {
        display: block;
    }
}

.tunon-auth-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tunon-auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(30, 25, 77, 0.9), rgba(30, 25, 77, 0.4));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
}

.tunon-auth-form-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.tunon-auth-form-wrapper {
    width: 100%;
    max-width: 400px;
}

.tunon-auth-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.tunon-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.tunon-input:focus {
    outline: none;
    border-color: var(--electric-violet);
    box-shadow: 0 0 0 3px var(--light-lavender);
}

.tunon-auth-form label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.w-100 {
    width: 100%;
    justify-content: center;
}

/* WIZARD STYLES */
.tunon-wizard-container {
    background-color: #fcfcfd;
    min-height: calc(100vh - 80px);
    padding-bottom: 5rem;
    padding-top: 4rem;
}

.tunon-wizard-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-transform: none !important;
}

.tunon-wizard-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto 4rem auto;
    position: relative;
}

.tunon-wizard-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--border-color);
    z-index: 1;
    transform: translateY(-50%);
}

.wizard-step {
    position: relative;
    z-index: 2;
    background: #fcfcfd;
    padding: 0 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.wizard-step.active {
    color: var(--electric-violet);
    opacity: 1;
}

.wizard-step.active::after {
    display: none;
}

.tunon-wizard-form {
    max-width: 650px;
    margin: 0 auto;
}

.wizard-section h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 2rem !important;
    letter-spacing: -0.02em;
}

.formation-grid,
.campus-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.formation-card input,
.campus-card input {
    display: none;
}

.formation-card-content,
.campus-card-content {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 1.5rem 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.formation-card-content:hover,
.campus-card-content:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

.formation-card input:checked+.formation-card-content,
.campus-card input:checked+.campus-card-content {
    background: var(--electric-violet);
    border-color: var(--electric-violet);
    box-shadow: 0 12px 30px rgba(88, 86, 214, 0.25);
    transform: translateY(-2px);
}

/* Change text colors to white when checked */
.formation-card input:checked+.formation-card-content *,
.campus-card input:checked+.campus-card-content * {
    color: white !important;
    border-color: white !important;
}

.formation-card-content::after,
.campus-card-content::after {
    content: '';
    width: 24px;
    height: 24px;
    /* flex-shrink: 0 est indispensable : ce pseudo-élément est un item flex,
       donc rétrécissable par défaut. Sur un titre qui passe à la ligne, flexbox
       comprimait sa largeur (24px → ~8px) sans toucher à sa hauteur, et le
       cercle devenait une ellipse verticale ressemblant à un « 0 ». */
    flex-shrink: 0;
    border-radius: 14px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    display: block;
    transition: all 0.2s ease;
    background: white;
}

.formation-card input:checked+.formation-card-content::after,
.campus-card input:checked+.campus-card-content::after {
    border-color: white;
    background: var(--electric-violet);
    box-shadow: inset 0 0 0 5px white;
}

.formation-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.formation-card-content .badge {
    background: rgba(30, 25, 77, 0.04);
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.formation-card input:checked+.formation-card-content .badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.formation-card-content h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.formation-card-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.campus-card-content {
    font-size: 1.15rem;
    font-weight: 600;
    padding: 1.5rem 2rem;
}

/* Dynamic Topbar Animations */
.topbar {
    overflow: hidden;
    position: relative;
}

.topbar-content.mode-scroll {
    display: block;
    white-space: nowrap;
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    padding-left: 100vw;
}

.marquee:hover {
    animation-play-state: paused;
}

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

    100% {
        transform: translateX(-100%);
    }
}

.topbar-content.mode-fade {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20px;
    /* ensure height doesn't collapse */
}

.mode-fade .announcement-item {
    animation: fadeInOut 5s infinite;
}

/* We will handle fade logic in JS to keep it synchronized, but CSS transitions help */
.mode-fade .announcement-item {
    transition: opacity 0.5s ease-in-out;
}

/* Fix Rich Text formatting in topbar */
.announcement-item p,
.announcement-item div,
.announcement-item ul,
.announcement-item li {
    display: inline;
    margin: 0;
    padding: 0;
}

.announcement-item strong,
.announcement-item b {
    font-weight: 700;
}

.announcement-item a {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMATION PAGE — Nouveaux composants enrichis
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Description principale ─────────────────────────────────────────────── */
.formation-description {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.formation-description p {
    margin-bottom: 1rem;
}

/* ── Objectifs & Compétences ─────────────────────────────────────────────── */
.formation-objectives {
    background: var(--light-lavender-alpha);
    border-left: 4px solid var(--electric-violet);
    border-radius: 14px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
}

.formation-objectives h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--night-blue);
    margin-bottom: 1rem;
}

.objectives-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 640px) {
    .objectives-list {
        grid-template-columns: 1fr;
    }
}

.objectives-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.objectives-list li::before {
    content: '✓';
    color: var(--electric-violet);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* ── Chiffres clés de la formation ──────────────────────────────────────── */
.formation-key-numbers {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.key-number-card {
    flex: 1;
    min-width: 120px;
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s, transform 0.2s;
}

.key-number-card:hover {
    border-color: var(--electric-violet);
    transform: translateY(-2px);
}

.key-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--electric-violet);
    line-height: 1;
}

.key-number-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Bannière d'employabilité ────────────────────────────────────────────── */
.employability-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--night-blue) 0%, var(--electric-violet) 100%);
    color: white;
    border-radius: 14px;
    padding: 1.5rem 2rem;
    margin-top: 2rem;
}

.employability-rate {
    font-size: 3rem;
    font-weight: 900;
    color: var(--light-lavender);
    line-height: 1;
    white-space: nowrap;
}

.employability-text {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* ── Prérequis ───────────────────────────────────────────────────────────── */
.prerequisites-box {
    background: #FFF8E7;
    border: 1px solid #F5C842;
    border-left: 4px solid #F5C842;
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.prerequisites-box h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #92640A;
    margin-bottom: 0.75rem;
}

.prerequisites-box div {
    color: #6B5001;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ── Badge RNCP ──────────────────────────────────────────────────────────── */
.rncp-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.rncp-icon {
    font-size: 2rem;
}

.rncp-badge div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.rncp-badge strong {
    font-size: 0.95rem;
    color: var(--night-blue);
}

.rncp-badge span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ── Deadline CTA ────────────────────────────────────────────────────────── */
.deadline-info {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.deadline-info strong {
    color: var(--electric-violet);
}

.deadline-closed {
    background: #FEE2E2;
    border: 1px solid #FECACA;
    color: #991B1B;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* ── Sidebar — Prix ──────────────────────────────────────────────────────── */
.sidebar-price {
    background: linear-gradient(135deg, var(--night-blue) 0%, var(--electric-violet) 100%);
    color: white;
    border: none;
}

.sidebar-price h3 {
    color: rgba(255, 255, 255, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.price-value {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    margin: 0.5rem 0;
}

.price-value span {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
}

.price-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* ── Sidebar — Date limite ───────────────────────────────────────────────── */
.sidebar-deadline {
    border-color: #FECACA;
    background: #FFF5F5;
}

.sidebar-deadline h3 {
    color: #991B1B;
    border-bottom-color: #FECACA;
}

.deadline-date {
    font-size: 1.5rem;
    font-weight: 800;
    color: #DC2626;
    margin: 0.5rem 0 1rem;
}

/* ==========================================================================
   PROGRAMMES PAGE — styles moved to formation/index.html.twig (scoped)
   ========================================================================== */

/* =========================================
   PAGE LOADER & TRANSITIONS
   ========================================= */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 25, 77, 0.7);
    /* Deep blue with glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#page-loader.is-active {
    opacity: 1;
    pointer-events: all;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--light-lavender);
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================================
   NEW LUXURY HOMEPAGE REDESIGN (HIA)
   ========================================= */

/* FLOATING SEARCH PILL */
.hia-search-pill-container {
    margin-top: -3.5rem;
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
}

.hia-search-pill {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(30, 25, 77, 0.08);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
    transition: box-shadow var(--transition-normal);
}

[data-theme="dark"] .hia-search-pill {
    background: rgba(10, 9, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.hia-search-pill:hover {
    box-shadow: 0 40px 80px rgba(30, 25, 77, 0.12);
}

.hia-search-group {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 1rem;
    min-width: 180px;
}

.hia-search-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.hia-search-select {
    background: transparent;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.hia-search-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

.hia-search-btn {
    background: var(--electric-violet);
    color: var(--white);
    border: none;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.hia-search-btn:hover {
    transform: scale(1.05);
    background-color: var(--night-blue);
}

/* ═══════════════════════════════════════════════════════════
   SECTION NOS FORMATIONS (PAGE D'ACCUEIL)
═══════════════════════════════════════════════════════════ */
.hia-formations-section {
    padding: 6rem 0 0;
    background: var(--light-blue);
}

/* En-tête de la section */
.hia-formations-header {
    max-width: 700px;
    margin-bottom: 3.5rem;
}

.hia-formations-surtitle {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--electric-violet);
    margin-bottom: 1rem;
}

.hia-formations-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #1a2340;
    margin-bottom: 1.4rem;
}

.hia-formations-intro {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #5a6278;
    margin-bottom: 2rem;
}

.hia-formations-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--electric-violet);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.85rem 1.8rem;
    border-radius: var(--radius-btn);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hia-formations-cta:hover {
    background: #2940b8;
    transform: translateY(-1px);
}

/* Grille de cartes */
.hia-formations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 0;
}

/* Carte formation */
.hia-formation-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hia-formation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(58, 85, 212, 0.13);
}

/* Image de la carte */
.hia-formation-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.hia-formation-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hia-formation-card:hover .hia-formation-card-image img {
    transform: scale(1.04);
}

/*
 * Cadrage par image.
 * Le conteneur est en 446x220 (ratio ~2.03) alors que les visuels sont en
 * 1536x1024 (ratio 1.5) : object-fit: cover rogne donc 26 % de la hauteur.
 * Par défaut ce rognage est centré (13 % en haut, 13 % en bas), ce qui tombe
 * mal sur deux visuels. On repositionne la zone conservée au cas par cas.
 */

/* Icône ronde sur l'image */
.hia-formation-card-icon {
    position: absolute;
    bottom: -22px;
    left: 20px;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    color: var(--electric-violet);
    z-index: 2;
}

/* Corps de la carte */
.hia-formation-card-body {
    padding: 2.2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hia-formation-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a2340;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.hia-formation-card-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #5a6278;
    margin-bottom: 1.2rem;
}

/* Métadonnées (niveau, durée, rythme) */
.hia-formation-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #eef0f6;
}

.hia-formation-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a4060;
}

.hia-formation-meta-item svg {
    color: var(--electric-violet);
    flex-shrink: 0;
}

/* Débouchés */
.hia-formation-card-jobs {
    margin-bottom: 1.4rem;
    flex: 1;
}

.hia-formation-jobs-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa0b8;
    margin-bottom: 0.6rem;
}

.hia-formation-jobs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hia-formation-jobs-list li {
    font-size: 0.83rem;
    color: #3a4060;
    padding: 0.2rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.hia-formation-jobs-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--electric-violet);
    font-weight: 700;
    font-size: 0.75rem;
}

/* Lien "Découvrir la formation" */
.hia-formation-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--electric-violet);
    text-decoration: none;
    text-transform: uppercase;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.hia-formation-card-link:hover {
    gap: 0.7rem;
}

/* Bande statistiques */
.hia-formations-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-top: 1px solid #eef0f6;
    margin-top: 4rem;
}

.hia-formations-stat {
    padding: 2.2rem 1.8rem;
    text-align: center;
    border-right: 1px solid #eef0f6;
}

.hia-formations-stat:last-child {
    border-right: none;
}

.hia-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--electric-violet);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hia-stat-label {
    font-size: 0.82rem;
    color: #5a6278;
    line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hia-formations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hia-formations-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hia-formations-stat {
        border-bottom: 1px solid #eef0f6;
    }
}

@media (max-width: 640px) {
    .hia-formations-grid {
        grid-template-columns: 1fr;
    }

    .hia-formations-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hia-formations-header {
        max-width: 100%;
    }
}

/* EDITORIAL SECTION (L'EXCELLENCE) */
.hia-editorial {
    padding: 8rem 0;
    background: var(--bg-color);
    overflow: hidden;
}

.hia-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
    align-items: center;
}

.hia-surtitle {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--electric-violet);
    margin-bottom: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hia-surtitle::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--electric-violet);
}

.hia-title-giant {
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.hia-editorial-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 3rem;
    max-width: 90%;
}

.hia-editorial-visuals {
    position: relative;

    /* Le cadre suit le rapport des photos (3/2) au lieu d une hauteur figee.
       A 600px de haut il aurait fallu 900px de large pour tout montrer, alors
       que la grille entiere n en fait que 885 : le recadrage coupait 60 % de
       la largeur, donc les personnes des deux bords. */
    aspect-ratio: 3 / 2;

    /* La grille est en align-items:center : sans ceci le visuel flottait au
       milieu de la ligne des que la colonne de texte etait plus haute.
       Classe utilisee uniquement sur la page admissions. */
    align-self: start;
}

.hia-ed-img-main {
    position: absolute;
    top: 0;
    right: 0;
    /* 100 % et non 85 % : les 15 % restants reservaient la place de la
       vignette .hia-ed-img-sub, qui n est plus utilisee nulle part. Ils ne
       produisaient plus qu un vide au-dessus et a gauche de la photo. */
    width: 100%;
    height: 100%;
    border-radius: var(--radius-img);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.hia-ed-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hia-ed-img-sub {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    border-radius: var(--radius-img);
    overflow: hidden;
    border: 8px solid var(--bg-color);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.hia-ed-img-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BENTO GRID (EXPERTISE) */
.hia-expertise {
    padding: 6rem 0;
    background: var(--bg-surface);
}

.hia-section-header {
    margin-bottom: 4rem;
}

.hia-title-large {
    font-size: 2.5rem;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 1rem;
    max-width: 800px;
    margin-inline: auto;
}

.hia-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.hia-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 400px;
    gap: 1.5rem;
}

.hia-bento-large {
    grid-column: span 2;
    grid-row: span 1;
}

@media (min-width: 992px) {
    .hia-bento-grid {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 300px 300px;
    }

    .hia-bento-large {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}

.hia-bento-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
}

.hia-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.2, 0, 0, 1);
}

.hia-bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 9, 20, 0.9) 0%, rgba(10, 9, 20, 0.2) 100%);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: background-color var(--transition-normal);
}

.hia-bento-item:hover img {
    transform: scale(1.05);
}

.hia-bento-item:hover .hia-bento-overlay {
    background: linear-gradient(to top, rgba(10, 9, 20, 0.8) 0%, rgba(10, 9, 20, 0.1) 100%);
}

.hia-bento-content h3 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    transform: translateY(10px);
    transition: transform var(--transition-normal);
}

.hia-bento-content p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    transform: translateY(10px);
    transition: transform var(--transition-normal);
    opacity: 0;
    display: none;
}

@media (min-width: 992px) {
    .hia-bento-large .hia-bento-content p {
        display: block;
    }
}

.hia-bento-link {
    color: var(--light-lavender);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    transform: translateY(10px);
    opacity: 0.7;
    transition: all var(--transition-normal);
    display: inline-block;
}

.hia-bento-item:hover .hia-bento-content h3,
.hia-bento-item:hover .hia-bento-content p,
.hia-bento-item:hover .hia-bento-link {
    transform: translateY(0);
}

.hia-bento-item:hover .hia-bento-content p {
    opacity: 1;
}

.hia-bento-item:hover .hia-bento-link {
    opacity: 1;
    color: #fff;
}


/* LA RAISON D'ETRE (PURPOSE LIST) */
.hia-purpose {
    padding: 8rem 0;
    background: var(--bg-color);
}

.hia-purpose-list {
    border-top: 1px solid var(--border-color);
}

.hia-purpose-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2rem;
    padding: 4rem 0;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    transition: background-color var(--transition-fast);
}

.hia-purpose-item:hover {
    background-color: var(--bg-surface);
}

.hia-purpose-num {
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--electric-violet);
    opacity: 0.2;
    text-align: right;
    transition: opacity var(--transition-normal);
}

.hia-purpose-item:hover .hia-purpose-num {
    opacity: 1;
}

.hia-purpose-text h4 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.hia-purpose-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.6;
}

/* IMMERSIVE TESTIMONIAL */
.hia-testimonials-immersive {
    background: var(--night-blue);
    padding: 10rem 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.hia-testimonial-featured {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hia-quote-icon {
    font-family: serif;
    font-size: 8rem;
    line-height: 1;
    color: var(--electric-violet);
    opacity: 0.3;
    margin-bottom: -3rem;
}

.hia-testimonial-quote {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.3;
    margin-bottom: 4rem;
}

.hia-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.hia-testimonial-author img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-img);
    object-fit: cover;
    border: 2px solid var(--light-lavender);
}

.hia-author-info {
    text-align: left;
}

.hia-author-info strong {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hia-author-info span {
    color: var(--light-lavender);
    font-size: 0.9rem;
}

/* PANORAMIC CAMPUS */
.hia-campus-pano {
    position: relative;
}

.hia-campus-image {
    position: relative;
    height: 70vh;
    min-height: 500px;
}

.hia-campus-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hia-campus-pano-overlay {
    position: absolute;
    inset: 0;

    /* Voile sombre uniforme POSE PAR-DESSUS l image, et non une opacite
       reduite sur l image : celle-ci garde ses couleurs et son contraste,
       on ne fait que l assombrir.

       Le degrade precedent partait du bas et laissait le haut transparent :
       le titre blanc tombait sur la facade claire, illisible. */
    background: rgba(20, 16, 48, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;

    /* Le contenu est superpose a l image : sans marge interieure il touchait
       les bords sur mobile. */
    padding: 2rem 1.25rem;
}

.hia-campus-pano-overlay h2 {
    /* 4rem figes remplissaient tout l ecran sur mobile : le titre faisait
       384px de haut dans un cadre de 568px, et poussait le texte et les
       boutons hors du visuel. Meme idiome que .hia-title-giant. */
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hia-campus-pano-overlay p {
    font-size: clamp(0.85rem, 2.5vw, 1.2rem);
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;

    /* 0.2em sur un ecran etroit fait deborder chaque ligne : l interlettrage
       se resserre en meme temps que le corps. */
    letter-spacing: clamp(0.08em, 0.5vw, 0.2em);
    line-height: 1.6;
}

/* BANDEAU PARTENAIRES

   Une rangee de cellules de largeur egale, separees par un filet vertical.
   Chaque logo est centre dans sa cellule, a taille visuellement egale : les
   fichiers vont du carre (Coya) au bandeau quatre fois plus large que haut
   (YAYS), donc on egalise l AIRE occupee et non le cadre. Les dimensions sont
   calculees par le script du bandeau, qui pose --logo-w / --logo-h sur chaque
   cellule ; les valeurs de repli ci-dessous s appliquent s il ne tourne pas. */
.hia-partners-marquee {
    background: var(--bg-surface);
    padding: 1.75rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.hia-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;

    /* « safe » ne change rien tant que la bande tient dans l ecran : elle
       reste centree. Des qu elle deborde, le centrage repousserait le premier
       logo hors du cadre, du cote qu aucun defilement ne rattrape ; safe
       bascule alors sur un alignement a gauche. La premiere declaration est
       le repli des navigateurs qui ignorent le mot-cle. */
    justify-content: center;
    justify-content: safe center;

    /* Aucun ecart : les filets marquent eux-memes la limite des cellules,
       et un gap les decalerait du milieu. La respiration passe par le
       padding des cellules. */
    gap: 0;
    padding: 0 1.5rem;

    /* Fixe la hauteur des cellules, donc celle des filets : ils depassent
       legerement le plus grand logo au lieu de s arreter net dessus. */
    min-height: 80px;

    --logo-scale: 1;
}

.hia-partner-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Cellules de largeur egale : le filet retombe a intervalle regulier,
       quelle que soit la largeur du logo qu elles contiennent. */
    flex: 1 1 0;
    min-width: 0;
    padding: 0 clamp(1rem, 2.5vw, 2.5rem);
    text-decoration: none;
    color: inherit;

    /* Decalage optique, nul par defaut ; voir l alignement sur la ligne de
       base plus bas. */
    --logo-nudge: 0%;
}

/* Un filet entre deux cellules, jamais aux extremites de la rangee. */
.hia-partner-item+.hia-partner-item {
    border-left: 1px solid var(--border-color);
}

.hia-partner-logo-img {
    width: 100%;

    /* Le cadre est celui de la cellule, la taille normalisee est ce plafond :
       le logo garde son aire propre et reste centre dans une cellule plus
       large. Sous ce plafond, tous retrecissent de la meme fraction. */
    max-width: calc(var(--logo-w, 100px) * var(--logo-scale));
    height: calc(var(--logo-h, 44px) * var(--logo-scale));
    object-fit: contain;
    /* Les fichiers fournis n ont pas la meme densite : certains sont en noir
       pur, d autres arrivent deja en gris clair, d autres encore en blanc.
       Un simple opacity appliquait la meme reduction a tous et creusait
       l ecart au lieu de le combler.

       brightness(0) ecrase chaque logo en silhouette pleine, quelle que soit
       la teinte du fichier, et opacity fixe ensuite un gris commun. Tous
       tombent alors exactement sur le meme ton. */
    filter: grayscale(100%) brightness(0) opacity(0.72);

    /* Decalage optique ; voir l alignement sur la ligne de base plus bas. */
    transform: translateY(var(--logo-nudge));
    transition: filter 0.3s;
}

/* Au survol, le logo retrouve ses couleurs d origine. */
.hia-partner-item:hover .hia-partner-logo-img {
    filter: none;
}

/* Alignement sur la ligne de base.

   Les logos sont centres sur leur boite d encre, ce qui convient aux marques
   et aux mots seuls. Le Meridien est un lockup empile : « Le » en script
   au-dessus, « MERIDIEN » en capitales en dessous. Centrer l ensemble place
   MERIDIEN une dizaine de pixels sous la ligne de base de Kyriad, et les deux
   mots ne se lisent plus sur la meme ligne.

   La valeur est posee sur la cellule plutot que sur l image, pour rester
   lisible a cote des autres reglages du bandeau. Le pourcentage
   porte sur la hauteur affichee, donc il suit l echelle mobile sans avoir a
   etre redit. */
.hia-partner-item:has(.hia-partner-logo-img[src*="le-meridien"]) {
    --logo-nudge: -25%;
}

.hia-partner-name {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hia-partners-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hia-partners-marquee::-webkit-scrollbar {
        display: none;
    }

    .hia-marquee-track {
        padding: 0 1rem;

        /* Les logos gardent leurs proportions relatives, la bande entiere
           defile au doigt au lieu de comprimer chaque vignette. */
        --logo-scale: 0.8;
        min-height: 66px;
    }

    .hia-partner-item {
        /* Sept cellules egales sur un ecran etroit seraient illisibles :
           chacune prend la largeur de son logo et la rangee defile. */
        flex: 0 0 auto;
        padding: 0 1.1rem;
    }

    .hia-partner-logo-img {
        width: calc(var(--logo-w, 100px) * var(--logo-scale));
        max-width: none;
    }
}

@media (max-width: 992px) {
    .hia-editorial-grid {
        grid-template-columns: 1fr;
    }

    /* Sans min-width, un enfant plus large que l ecran elargit la colonne :
       la piste « 1fr » depasse alors le conteneur et le texte sort du cadre. */
    .hia-editorial-grid>* {
        min-width: 0;
    }

    .hia-editorial-visuals {
        /* Pas de hauteur figee ici : combinee a aspect-ratio: 3/2, elle
           imposait 600px de large a la colonne, sur un ecran qui n en fait
           que 375. Le visuel se dimensionne desormais sur la largeur
           disponible et garde son rapport 3/2. */
        margin-top: 2rem;
    }

    .hia-purpose-item {
        grid-template-columns: 60px 1fr;
        gap: 1rem;
        padding: 2rem 0;
    }

    .hia-purpose-num {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hia-search-pill {
        flex-direction: column;
        border-radius: 14px;
        padding: 1rem;
        align-items: stretch;
    }

    .hia-search-divider {
        height: 1px;
        width: 100%;
        margin: 0.5rem 0;
    }

    .hia-search-btn {
        width: 100%;
        border-radius: var(--radius-btn);
        margin-top: 1rem;
    }

    .hia-bento-grid {
        grid-template-columns: 1fr;
    }

    .hia-bento-large {
        grid-column: auto;
    }
}

/* ==========================================================================
   FORMATIONS EN PAGE D'ACCUEIL — deux blocs distincts
   Haut : cursus diplomants, en deux grandes cartes a texte incruste.
   Bas  : formations courtes, en trois cartes compactes.
   ========================================================================== */

.hia-formations-group {
    margin-top: 3.5rem;
}

.hia-formations-group-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--electric-violet);
    margin: 0 0 0.35rem;
}

.hia-formations-group-sub {
    font-size: 0.92rem;
    color: var(--text-secondary, #5C627A);
    margin: 0 0 1.6rem;
}

/* ---- Cartes diplomantes : image plein cadre, texte incruste ---- */

.hia-diploma-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.hia-diploma-card {
    min-width: 0;
    /* sinon un titre long elargit la colonne */
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    /* Meme ratio que les visuels (1536x1024) : object-fit: cover n'a alors
       plus rien a rogner et la photo s'affiche entiere. */
    aspect-ratio: 3 / 2;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    background: var(--night-blue);
    isolation: isolate;
}

.hia-diploma-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.5s ease;
}

/* Voile sombre : garantit la lisibilite du texte quelle que soit la photo */
.hia-diploma-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
            rgba(15, 12, 40, 0.92) 0%,
            rgba(15, 12, 40, 0.72) 32%,
            rgba(15, 12, 40, 0.18) 62%,
            rgba(15, 12, 40, 0.05) 100%);
}

.hia-diploma-card:hover img {
    transform: scale(1.04);
}

.hia-diploma-content {
    position: relative;
    padding: 1.7rem 1.8rem 1.6rem;
    color: #fff;
    width: 100%;
}

.hia-diploma-badge {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 14px;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.7rem;
}

.hia-diploma-title {
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 0.85rem;
    color: #fff;
}

.hia-diploma-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 1.1rem;
}

.hia-diploma-meta span {
    display: inline-flex;
    align-items: center;
}

/* Separateur discret entre les informations, sans balise supplementaire */
.hia-diploma-meta span+span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    margin-right: 1.1rem;
}

.hia-diploma-link {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 2px;
    transition: border-color 0.25s ease;
}

.hia-diploma-link:hover {
    border-bottom-color: #fff;
}

/* ---- Cartes courtes : image en tete, contenu dessous ---- */

.hia-short-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.hia-short-card {
    min-width: 0;
    /* sinon un titre long elargit la colonne */
    display: flex;
    flex-direction: column;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #DFE4F2);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.hia-short-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(30, 25, 77, 0.13);
}

.hia-short-card-image {
    position: relative;
    /* 16/9 : la photo perd 16 % de sa hauteur, ce qui raccourcit la carte.
       Le cote rogne est choisi image par image juste en dessous. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hia-short-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Quelle partie de chaque photo est sacrifiee par le rognage.
   object-position 0%   = on garde le haut  -> le bas est coupe.
   object-position 100% = on garde le bas   -> le haut est coupe. */

.hia-short-card-image img[src*="gerer-son-budget"] {
    object-position: 50% 0%;
    /* coupe le plan de travail en bas */
}

.hia-short-card-image img[src*="gerer-les-situations"] {
    object-position: 50% 100%;
    /* coupe le plafond en haut */
}

.hia-short-card-image img[src*="accueillir-et-fideliser"] {
    object-position: 50% 100%;
    /* coupe les etageres en haut */
}

.hia-short-card-body {
    padding: 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hia-short-card-title {
    font-size: 1.02rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--night-blue);
    margin: 0 0 0.5rem;
}

.hia-short-card-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-secondary, #5C627A);
    margin: 0 0 0.9rem;
}

.hia-short-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-size: 0.76rem;
    color: var(--text-secondary, #5C627A);
    margin-bottom: 1rem;
}

/* Pousse le lien en bas : toutes les cartes alignent leur appel a l'action */
.hia-short-card-link {
    margin-top: auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-violet);
    text-decoration: none;
}

.hia-short-card-link:hover {
    text-decoration: underline;
}

/* Echelle responsive, alignee sur les points de rupture deja utilises
   ailleurs dans le projet : 1200 / 992 / 640. */

@media (max-width: 1200px) {

    .hia-diploma-grid,
    .hia-short-grid {
        gap: 1.1rem;
    }
}

/* Tablettes et petits portables : une colonne pour les cursus diplomants,
   deux pour les formations courtes. */
@media (max-width: 992px) {
    .hia-diploma-grid {
        grid-template-columns: 1fr;
    }

    .hia-short-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hia-diploma-title {
        font-size: 1.2rem;
    }
}

/* Telephones : tout passe sur une colonne. */
@media (max-width: 640px) {
    .hia-short-grid {
        grid-template-columns: 1fr;
    }

    .hia-formations-group {
        margin-top: 2.5rem;
    }

    .hia-diploma-content {
        padding: 1.3rem 1.2rem 1.2rem;
    }

    .hia-diploma-title {
        font-size: 1.1rem;
    }
}

/* ─── PANNEAU DEROULANT DE LA NAVIGATION ───────────────────────────────
   Une seule entree en est dotee : « École & Entreprises ».
   Trois colonnes thematiques et une carte visuelle. */
.hia-mega {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(30, 25, 77, 0.14);
    z-index: 60;

    /* Le panneau glisse depuis la barre au lieu d apparaitre d un bloc. */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Pont invisible par-dessus les 12px qui separent le panneau de la barre.

   Sans lui, la souris qui descend vers le panneau traverse un vide qui
   n appartient ni a la barre ni au panneau : le survol se rompt et le
   panneau se referme avant d etre atteint. Le pseudo-element etant un
   enfant du panneau, le survol reste continu. */
.hia-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.hia-mega.is-open {
    opacity: 1;
    transform: translateY(0);
}

.hia-mega__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 340px;
    gap: 2.5rem;
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
    align-items: start;
}

/* Filet entre deux colonnes de texte, jamais avant la carte visuelle. */
/* La grille est en align-items: start pour que la carte visuelle garde sa
   hauteur propre. Les colonnes, elles, s etirent : sans cela le filet qui les
   separe s arretait a la hauteur de la plus courte. */
.hia-mega__colonne {
    align-self: stretch;
}

.hia-mega__colonne+.hia-mega__colonne {
    border-left: 1px solid var(--border-color);
    padding-left: 2.5rem;
}

.hia-mega__col-titre {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-violet);
    margin: 0 0 2rem;
}

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

.hia-mega__liste li+li {
    border-top: 1px solid var(--border-color);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.hia-mega__entree {
    display: block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.hia-mega__entree:hover {
    transform: translateX(4px);
}

.hia-mega__entree-titre {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.hia-mega__entree:hover .hia-mega__entree-titre {
    color: var(--electric-violet);
}

.hia-mega__entree-texte {
    display: block;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Encart d appel a l action, dans la colonne recrutement. */
.hia-mega__encart {
    /* --light-blue (#f8f9fc) se distinguait a peine du panneau blanc. Le voile
       lavande est plus lisible, et etant en rgba il tient aussi sur le fond
       sombre, ou --light-blue restait un bloc presque blanc. */
    background: var(--light-lavender-alpha);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-top: 2rem;

    /* Elargie de son rembourrage des deux cotes : son texte retombe alors sur
       la verticale du surtitre et des entrees, sans rompre la symetrie des
       marges entre les deux filets. La tirer d un seul cote alignerait le
       texte mais decalerait la boite. */
    margin-left: -1.75rem;
    margin-right: -1.75rem;
}

.hia-mega__encart-titre {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.hia-mega__encart-texte {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.hia-mega__encart-bouton {
    /* Pleine largeur de l encart plutot qu ajuste au texte : un libelle un peu
       long se cassait sinon en deux lignes, le dernier mot seul en dessous.
       La fleche est renvoyee au bord droit par space-between. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    background: var(--night-blue);
    color: var(--white);
    border-radius: var(--radius-btn);

    /* Rembourrage et interlettrage resserres : la colonne du panneau n offre
       que 206 px, et « Echanger avec HIA » en demande 147. Aux valeurs
       precedentes il restait 10 px de trop et le dernier mot passait a la
       ligne. */
    padding: 0.8rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hia-mega__encart-bouton:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(30, 25, 77, 0.25);
}

/* Carte visuelle : photo sombre et texte en surimpression. */
.hia-mega__visuel {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--night-blue);
    text-decoration: none;
}

.hia-mega__visuel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* La photo garde ses couleurs. Un voile uniforme a 0,3 la noyait dans le
       bleu nuit du fond : les visages viraient au violet. C est le degrade
       ci-dessous qui assombrit, et seulement la ou le texte se pose. */
    opacity: 0.92;
    transition: transform 0.5s ease;
}

/* Degrade d assise : transparent en haut, dense en bas.

   Il remplace le voile uniforme : la photo se lit dans sa partie haute,
   et le texte blanc garde son contraste dans la partie basse, ou il est. */
.hia-mega__visuel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(30, 25, 77, 0.82) 0%,
            rgba(30, 25, 77, 0.74) 30%,
            rgba(30, 25, 77, 0.46) 55%,
            rgba(30, 25, 77, 0.18) 75%,
            rgba(30, 25, 77, 0.04) 100%);
    pointer-events: none;
}

.hia-mega__visuel:hover img {
    transform: scale(1.04);
}

.hia-mega__visuel-texte {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;

    /* Au-dessus du degrade, qui est un pseudo-element donc peint en dernier. */
    z-index: 1;
}

.hia-mega__visuel-titre {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
}

.hia-mega__visuel-note {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.hia-mega__visuel-filet {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--light-lavender);
}

/* Le panneau suppose une barre horizontale et un pointeur : sur mobile la
   navigation passe en menu plein ecran, ou il n a pas sa place. */
@media (max-width: 1200px) {
    .hia-mega {
        display: none;
    }
}

/* ─── PANNEAU « PROGRAMMES » : ONGLETS ET FICHES ───────────────────────
   Variante du panneau : onglets a gauche, fiches au centre, visuel a droite.
   Le panneau « École & Entreprises » garde ses trois colonnes de texte. */
.hia-mega--onglets .hia-mega__inner {
    grid-template-columns: 300px minmax(0, 1fr) 340px;
    gap: 3rem;
}

.hia-mega__onglets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hia-mega__onglet {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: none;

    /* Le filet gauche est toujours la, transparent au repos : sans cela le
       libelle se decalerait de 3px en devenant actif. */
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.1rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hia-mega__onglet svg {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hia-mega__onglet:hover {
    color: var(--text-primary);
}

.hia-mega__onglet.is-active {
    background: var(--light-lavender-alpha);
    border-left-color: var(--electric-violet);
    color: var(--electric-violet);
    font-weight: 600;
}

.hia-mega__onglet.is-active svg {
    opacity: 1;
}

/* Zone des volets : bordee a gauche, comme la maquette. */
.hia-mega__zone {
    border-left: 1px solid var(--border-color);
    padding-left: 3rem;
}

.hia-mega__volet {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
}

.hia-mega__volet.is-active {
    display: grid;
}

.hia-mega__groupe-titre {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-violet);
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;

    /* Le filet court sous le titre du groupe, sur la largeur du trait et non
       de la colonne : c est un soulignement, pas un separateur. */
    position: relative;
}

.hia-mega__groupe-titre::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 2px;
    background: var(--electric-violet);
}

.hia-mega__fiches {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hia-mega__fiche {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.hia-mega__fiche:hover {
    border-color: var(--electric-violet);
    box-shadow: 0 10px 24px rgba(63, 49, 197, 0.10);
    transform: translateY(-2px);
}

.hia-mega__fiche-titre {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.hia-mega__fiche-duree {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.hia-mega__fiche-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--electric-violet);
}

/* Variante de la carte visuelle : elle porte un bouton, donc n est plus
   elle-meme un lien. */
.hia-mega__visuel--bouton {
    cursor: default;
}

.hia-mega__visuel-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--electric-violet);
    color: var(--white);
    border-radius: var(--radius-btn);
    padding: 0.85rem 1.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hia-mega__visuel-bouton:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(63, 49, 197, 0.35);
}

/* Un volet a groupe unique occupe les deux colonnes et etale ses fiches :
   sinon les formations courtes s empilent sur une demi-largeur et le panneau
   devient deux fois trop haut. */
.hia-mega__volet .hia-mega__groupe:only-child {
    grid-column: 1 / -1;
}

.hia-mega__volet .hia-mega__groupe:only-child .hia-mega__fiches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2.5rem;
}

/* Entree de menu sans destination : la page n existe pas encore.

   Rendue en <a> sans href, elle n est ni cliquable ni focalisable — un
   href="#" aurait ramene le visiteur en haut de la page courante, ce qui
   ressemble a un bug plutot qu a une absence.

   Le curseur reste la fleche par defaut et la mention « bientot » dit
   pourquoi rien ne se passe. */
.est-indisponible {
    cursor: default;
    opacity: 0.55;
}

.est-indisponible::after {
    content: attr(data-bientot);
    display: inline-block;
    margin-left: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    padding: 0.1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    vertical-align: middle;
}

/* Sous-titre de carte visuelle en phrase plutot qu en capitales : quand le
   texte est une phrase et non une accroche courte, l interlettrage large et
   les capitales le rendent penible a lire. */
.hia-mega__visuel-note--phrase {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/* Cartes visuelles empilees dans la meme colonne : une par onglet, seule
   l active est affichee. Elles partagent data-mega-volet avec les volets,
   donc la bascule d onglet les change sans code supplementaire. */
.hia-mega__visuel-slot {
    display: none;
}

.hia-mega__visuel-slot.is-active {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITE MOBILE
   Ajoute apres un audit du site en 375x812 avec emulation tactile.
   Trois defauts mesures : des cibles trop petites pour le doigt, du texte
   descendu jusqu a 9,6 px, et le tiroir de navigation qui restait dans le
   parcours clavier une fois referme.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cibles tactiles ──────────────────────────────────────────────────
   44 px est le minimum retenu par WCAG 2.5.5 et les regles d Apple. Sur
   l accueil, 38 elements cliquables sur 55 passaient dessous, toujours par
   la hauteur (22 a 41 px) et jamais par la largeur. Les liens du pied de
   page etaient les plus etroits : 22 px, sans aucun padding.
   La liste est nominative plutot qu un « a, button » global, qui aurait
   aussi grossi les liens en plein milieu des paragraphes. */
@media (max-width: 992px) {
    .hia-footer-links a,
    .hia-footer-contact a,
    .hia-short-card-link,
    .hia-diploma-link,
    .brochure-modal-lien,
    .cc-link,
    .cc-btn,
    .lang-dropdown-item,
    .lang-toggle-btn,
    .hia-nav__cta,
    .hia-social-btn,
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Boutons carres : la largeur etait le facteur limitant, pas la hauteur. */
    .hia-social-btn,
    .hia-nav__burger,
    .brochure-modal-close,
    .video-modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Le bouton du bandeau cookies occupe toute la largeur : on le centre
       pour qu il ne parte pas a gauche une fois passe en flex. */
    .cc-btn {
        justify-content: center;
    }

    /* Le pill flottant mesure 127 px pour deux actions : les passer a 44 px
       tient dans ce cadre. On ne touche pas a leur police en revanche : une
       fois le padding retire, le libelle vit dans 18 px de large, l agrandir
       le ferait deborder. */
    .pill-action {
        min-width: 44px;
    }

    /* Le logo est un lien, et la plus petite cible de l en-tete : 28 px de
       haut dans une barre qui en fait 81. */
    .hia-nav__brand {
        min-height: 44px;
    }
}

/* ── Lisibilite du texte ──────────────────────────────────────────────
   Seize blocs de texte descendaient sous 12,5 px sur l accueil, le plus
   petit a 9,6 px (« Reconnaissance internationale », dans le hero).
   Ces valeurs viennent de rem deja courts multiplies par des reductions
   mobiles. On pose un plancher plutot que de reprendre chaque regle. */
@media (max-width: 640px) {
    .hero-feature-text span,
    .hero-feature-text strong {
        font-size: 0.75rem;   /* 12 px, au lieu de 9,6 */
        line-height: 1.4;
    }

    /* .brochure-modal-lien n est pas dans cette liste : il est stylé dans le
       <style> de _navbar.html.twig, rendu apres cette feuille, qui l emporte
       donc a specificite egale. Son reglage est fait sur place. */
    .hia-formations-surtitle,
    .hia-diploma-link,
    .hia-formations-cta {
        font-size: 0.8rem;    /* 12,8 px, au lieu de 11,52 */
    }
}

/* ── Tiroir de navigation ─────────────────────────────────────────────
   Le menu se range en dehors de l ecran (right: -100%) mais restait
   « visible » au sens du navigateur : ses 6 liens gardaient le focus, sans
   aria-hidden. Un visiteur au clavier ou sous lecteur d ecran traversait
   donc six liens invisibles avant d atteindre le contenu.
   visibility resout les deux d un coup : elle sort l element du parcours
   clavier et de l arbre d accessibilite. Elle s anime par paliers, donc en
   la faisant transiter avec le meme delai que le glissement, la nav reste
   affichee pendant qu elle sort et ne disparait qu une fois arrivee.
   display: none aurait supprime l animation. */
@media (max-width: 1200px) {
    .hia-nav__nav {
        visibility: hidden;
        transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                    visibility 0.4s;
    }

    .hia-nav__nav.is-open {
        visibility: visible;
    }

    /* « ECOLE ET ENTREPRISES » fait 290 px pour un panneau de 319 px moins
       80 px de padding : le white-space: nowrap herite de la barre de bureau
       le faisait deborder de 12 px, et le libelle etait coupe. */
    .hia-nav__link {
        white-space: normal;
    }
}