/* ============================================================
   Public Site Theme — pure CSS, zero dependency
   Architecture inspired by real-estate developer sites
   Color system: dark navy + warm gold accents
   ============================================================ */

:root {
    --color-bg: #ffffff;
    --color-surface: #f7f5f1;
    --color-surface-2: #efece4;
    --color-ink: #0e1a2b;
    --color-ink-soft: #4a5a70;
    --color-muted: #8a96a8;
    --color-accent: #b88a3e;
    --color-accent-soft: #d4ad6a;
    --color-accent-dark: #8f6a26;
    --color-line: #e6e2d8;
    --color-dark: #0e1a2b;
    --color-dark-soft: #16263d;
    --color-darker: #0a1422;

    --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --container: 1280px;
    --container-narrow: 980px;
    --radius: 2px;
    --radius-lg: 4px;
    --shadow-1: 0 6px 24px rgba(14, 26, 43, 0.08);
    --shadow-2: 0 18px 60px rgba(14, 26, 43, 0.16);
    --shadow-3: 0 30px 90px rgba(14, 26, 43, 0.22);
    --header-h: 96px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    /* Empêche toute barre de défilement horizontale (tiroirs hors écran, éléments en 100vw…).
       « clip » plutôt que « hidden » : ne crée pas de conteneur de défilement, donc ne casse
       pas les éléments position: sticky (en-tête, colonnes latérales). */
    overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--color-accent); }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--color-ink);
    letter-spacing: -0.01em;
    line-height: 1.18;
    margin: 0 0 .5em;
    font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1em; color: var(--color-ink-soft); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: var(--container-narrow); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 32px;
    border-radius: var(--radius);
    font-weight: 600; font-size: 0.85rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s var(--ease);
    background: var(--color-accent); color: #fff;
    white-space: nowrap;
}
.btn:hover { background: var(--color-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-1); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: #fff; }
.btn--light { background: #fff; color: var(--color-ink); }
.btn--light:hover { background: var(--color-accent); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: #fff; color: var(--color-ink); }
.btn--small { padding: 10px 18px; font-size: 0.75rem; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
/* Barre de liens rapides au-dessus du menu (Nos Frais, Inscription, Connexion étudiant…) */
.site-topbar {
    background: var(--color-ink);
    color: #fff;
    font-size: 0.82rem;
}
.site-topbar__inner {
    display: flex; align-items: center; justify-content: flex-end;
    min-height: 40px; gap: 4px; flex-wrap: wrap;
}
.site-topbar__links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-topbar__links a {
    color: rgba(255, 255, 255, 0.82);
    padding: 7px 13px; border-radius: 7px;
    font-weight: 600; letter-spacing: 0.01em;
    transition: color 0.15s, background 0.15s;
}
.site-topbar__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.13); }
@media (max-width: 640px) {
    .site-topbar__inner { justify-content: center; }
    .site-topbar__links a { padding: 6px 9px; }
}

.site-header {
    /* Au-dessus des onglets latéraux « Inscription » / « Connexion étudiant » (z-index 900),
       sinon les panneaux du menu passent dessous ; sous les tiroirs (1000). */
    position: sticky; top: 0; z-index: 950;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-line);
    height: var(--header-h);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%; gap: 24px;
}
.site-header__brand {
    display: flex; align-items: baseline; gap: 2px;
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 700;
    letter-spacing: 0.04em; color: var(--color-ink);
    flex-shrink: 0;
}
.site-header__brand span { color: var(--color-accent); }
.site-header__brand small {
    margin-left: 8px; font-size: 0.62rem; font-family: var(--font-body);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--color-muted);
}

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav__link {
    position: relative;
    padding: 12px 14px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--color-ink-soft);
    text-transform: uppercase; letter-spacing: 0.14em;
}
.site-nav__link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 2px; background: var(--color-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
.site-nav__link:hover, .site-nav__link.is-active { color: var(--color-ink); }
.site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); }

.site-nav__group { position: relative; }
.site-nav__caret::before { content: "▾"; margin-left: 6px; font-size: 0.7em; color: var(--color-muted); }

.site-nav__panel {
    position: absolute; top: 100%; left: 0;
    background: #fff; padding: 14px 0;
    min-width: 240px;
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-accent);
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: all .22s var(--ease);
    z-index: 50;
}
.site-nav__panel a {
    display: block; padding: 11px 22px;
    font-size: 0.85rem; color: var(--color-ink-soft);
    border-left: 2px solid transparent;
}
.site-nav__panel a:hover { color: var(--color-accent); background: var(--color-surface); border-left-color: var(--color-accent); }
.site-nav__group:hover .site-nav__panel,
.site-nav__group:focus-within .site-nav__panel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Sous-menus imbriqués (domaine → filière → mention) : déroulé latéral, à droite du parent.
   Sans ces règles, tous les niveaux s'empileraient à plat dans le panneau. */
.site-nav__subgroup { position: relative; }
.site-nav__subcaret {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.site-nav__subcaret::after {
    content: "›"; flex: none;
    font-size: 1.05em; line-height: 1; color: var(--color-muted);
}
.site-nav__subpanel {
    position: absolute; top: -14px; left: 100%;
    background: #fff; padding: 14px 0;
    min-width: 260px; max-width: 320px;
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-accent);
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden;
    transform: translateX(8px);
    transition: all .2s var(--ease);
    z-index: 60;
}

/* Panneau large en colonnes (Licence/Master → domaines → mentions) : tout est visible,
   sans cascade ni défilement horizontal. */
.site-nav__subpanel--cols {
    padding: 22px 26px;
    min-width: 0;
    /* Deux colonnes, jamais plus : le panneau reste entièrement dans l'écran. */
    width: min(600px, calc(100vw - 380px));
    max-width: none;
    max-height: min(78vh, 640px);
    overflow-y: auto;
}
.site-nav__cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 28px; align-items: start;
}
.site-nav__col { min-width: 0; width: auto; padding-bottom: 12px; }
.site-nav__col-title {
    display: block; margin-bottom: 8px; padding: 0 0 7px;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.72rem; font-weight: 700; line-height: 1.35;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--color-ink);
}
.site-nav__col-title:hover { color: var(--color-accent); }
.site-nav__col-sub {
    display: block; margin: 10px 0 3px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-accent);
}
.site-nav__subpanel--cols .site-nav__col a:not(.site-nav__col-title) {
    display: block; padding: 5px 0 5px 10px;
    border-left: 2px solid transparent; background: none;
    font-size: 0.82rem; line-height: 1.4; color: var(--color-ink-soft);
}
.site-nav__subpanel--cols .site-nav__col a:not(.site-nav__col-title):hover {
    color: var(--color-accent); border-left-color: var(--color-accent);
}
.site-nav__subpanel a {
    display: block; padding: 10px 20px;
    font-size: 0.84rem; line-height: 1.4; color: var(--color-ink-soft);
    border-left: 2px solid transparent;
}
.site-nav__subpanel a:hover {
    color: var(--color-accent); background: var(--color-surface); border-left-color: var(--color-accent);
}
.site-nav__subgroup:hover > .site-nav__subpanel,
.site-nav__subgroup:focus-within > .site-nav__subpanel {
    opacity: 1; visibility: visible; transform: translateX(0);
}
/* Les derniers menus de la barre débordent à droite : leurs sous-panneaux s'ouvrent à gauche. */
.site-nav__group:nth-last-child(-n+2) .site-nav__subpanel { left: auto; right: 100%; transform: translateX(-8px); }
.site-nav__group:nth-last-child(-n+2) .site-nav__subgroup:hover > .site-nav__subpanel,
.site-nav__group:nth-last-child(-n+2) .site-nav__subgroup:focus-within > .site-nav__subpanel { transform: translateX(0); }

.site-nav__mega {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #fff; padding: 28px 32px;
    min-width: 560px;
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-accent);
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden;
    transition: all .22s var(--ease);
    z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.site-nav__group:hover .site-nav__mega,
.site-nav__group:focus-within .site-nav__mega {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.site-nav__mega h5 {
    font-family: var(--font-body);
    font-size: 0.72rem; font-weight: 700; color: var(--color-accent);
    text-transform: uppercase; letter-spacing: 0.18em;
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
}
.site-nav__mega a { display: block; padding: 8px 0; font-size: 0.88rem; color: var(--color-ink-soft); }
.site-nav__mega a:hover { color: var(--color-accent); padding-left: 6px; }
.site-nav__mega .view-all {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--color-line);
    font-size: 0.78rem; font-weight: 700; color: var(--color-ink);
    text-transform: uppercase; letter-spacing: 0.12em;
}

.site-header__lang {
    margin-left: 18px; display: flex; gap: 4px; flex-shrink: 0;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
}
.site-header__lang a { padding: 6px 10px; color: var(--color-muted); }
.site-header__lang a.is-active { color: var(--color-ink); border-bottom: 2px solid var(--color-accent); }

/* Bouton de connexion dans l'en-tête → /login */
.site-header__login {
    margin-left: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--radius);
    background: var(--color-dark); color: #fff;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
    text-decoration: none; white-space: nowrap;
    transition: background 0.18s var(--ease);
}
.site-header__login:hover { background: var(--color-accent-dark); color: #fff; }
.site-header__login svg { flex-shrink: 0; }

.site-header__toggle {
    display: none; background: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; margin-left: 12px;
}
.site-header__toggle span {
    display: block; width: 26px; height: 2px; background: var(--color-ink);
    margin: 6px auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex; align-items: flex-end;
    color: #fff;
    overflow: hidden;
    background: #0e1a2b;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.1s var(--ease);
    pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,26,43,0.25) 0%, rgba(14,26,43,0.85) 100%);
}

/* Hero navigation arrows */
.hero__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35);
    color: #fff; font-size: 1.4rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    backdrop-filter: blur(2px);
}
.hero__nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.hero__nav--prev { left: 28px; }
.hero__nav--next { right: 28px; }
.hero__nav:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; }

/* Hero slide indicators (dots) */
.hero__dots {
    position: absolute; right: 32px; bottom: 32px; z-index: 4;
    display: flex; gap: 10px;
}
.hero__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.35); border: 0; cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero__dot.is-active { background: var(--color-accent); transform: scale(1.25); }

/* Vertical Request-Form tab */
.request-tab {
    position: fixed; right: 0; top: 38%; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent); color: #fff;
    padding: 18px 12px; border: 0; cursor: pointer;
    writing-mode: vertical-rl;
    letter-spacing: 0.22em; font-weight: 700; text-transform: uppercase; font-size: 0.78rem;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 10px 24px rgba(184,138,62,0.35);
    transition: background .25s var(--ease);
}
.request-tab:hover { background: #a17730; }

/* Request-Form drawer */
.request-drawer {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10,20,34,0.55); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
    /* Le panneau interne est décalé translateX(-100%) au repos : on le clippe pour qu'il ne
       provoque pas de défilement horizontal. */
    overflow: hidden;
}
.request-drawer.is-open { opacity: 1; visibility: visible; }
.request-drawer__panel {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 560px; max-width: 100vw;
    background: #0d1b27; color: #fff;
    padding: 40px 38px 32px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .35s var(--ease);
    display: flex; flex-direction: column; gap: 20px;
    border-right: 8px solid rgba(255,255,255,0.04);
}
.request-drawer.is-open .request-drawer__panel { transform: translateX(0); }
.request-drawer__close {
    position: absolute; top: 38px; right: 38px;
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: #818b99; color: #fff; cursor: pointer; font-size: 2rem; line-height: 1;
    transition: background .2s var(--ease);
}
.request-drawer__close:hover { background: rgba(255,255,255,0.22); }
.request-drawer h2 { color: #fff; font-size: 2rem; line-height: 1.15; margin: 0; padding-right: 80px; }
.request-drawer p.lede { color: rgba(255,255,255,0.46); margin: 0 0 4px; font-size: 1.05rem; }
.request-drawer__form {
    border-top: 1px solid rgba(255,255,255,0.16);
    margin: 8px -38px 0;
    padding: 28px 38px 0;
}
.request-drawer .field { margin: 0 0 24px; }
.request-drawer .field--framed {
    position: relative;
    border: 1px solid rgba(149,170,194,0.45);
    border-radius: 9px;
    min-height: 68px;
}
.request-drawer .field--framed label {
    position: absolute; top: -11px; left: 28px; z-index: 2;
    display: inline-block;
    padding: 0 12px;
    background: #0d1b27;
    color: var(--color-accent-soft);
    font-size: 1rem; line-height: 1.2; font-weight: 700;
    letter-spacing: 0; text-transform: none;
    margin: 0;
}
.request-drawer input, .request-drawer select, .request-drawer textarea {
    width: 100%;
    background: transparent; border: 0;
    color: #fff; border-radius: 8px; font: inherit;
    font-size: 1.05rem;
    transition: color .2s var(--ease);
}
.request-drawer input, .request-drawer select { height: 66px; padding: 0 26px; }
.request-drawer textarea { min-height: 124px; padding: 26px; resize: vertical; }
.request-drawer select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position: calc(100% - 28px) 31px, calc(100% - 22px) 31px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.request-drawer input::placeholder, .request-drawer textarea::placeholder { color: rgba(255,255,255,0.28); }
.request-drawer input:focus, .request-drawer select:focus, .request-drawer textarea:focus { outline: none; }
.request-drawer .field--framed:focus-within { border-color: var(--color-accent-soft); }

/* Options des listes déroulantes : lisibles dans le popup natif (fond blanc). */
.request-drawer select option,
.student-drawer select option {
    color: #0e1a2b;
    background-color: #fff;
}
.request-drawer select option:disabled { color: #94a3b8; }

/* Champs fichier : bouton lisible sur fond sombre */
.request-drawer input[type="file"] {
    height: auto; padding: 18px 20px;
    font-size: 0.92rem; color: rgba(255,255,255,0.85);
}
.request-drawer input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 9px 15px;
    border: 0; border-radius: 6px; cursor: pointer;
    background: var(--color-accent); color: #fff;
    font: inherit; font-size: 0.86rem; font-weight: 600;
}
.request-drawer input[type="file"]::file-selector-button:hover { filter: brightness(1.1); }
.request-drawer .field--framed:has(input[type="file"]) label { font-size: 0.82rem; line-height: 1.35; }

/* Onglets du tiroir d'inscription */
.request-tabs {
    display: flex; gap: 6px; margin: 4px 0 18px;
    background: rgba(255,255,255,0.08); border-radius: 10px; padding: 4px;
}
.request-tabs button {
    flex: 1; padding: 11px 12px; border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: rgba(255,255,255,0.72);
    font: inherit; font-size: 0.9rem; font-weight: 600; letter-spacing: .02em;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.request-tabs button.is-active { background: var(--color-accent); color: #fff; }
.request-pane { display: none; }
.request-pane.is-active { display: block; }

/* Conditions d'admission */
.request-conditions h3 {
    font-size: 1.05rem; color: var(--color-accent-soft);
    margin: 22px 0 10px; letter-spacing: .04em; text-transform: uppercase;
}
.request-conditions__body { color: rgba(255,255,255,0.82); font-size: 0.98rem; line-height: 1.7; }
.request-conditions__body p { margin: 10px 0; }
.request-conditions__body ul,
.request-conditions__body ol { padding-left: 20px; margin: 8px 0 14px; }
.request-conditions__body li { margin-bottom: 6px; }
.request-conditions__body strong { color: #fff; font-weight: 700; }
.request-conditions__body em { color: var(--color-accent-soft); font-style: normal; font-weight: 600; }
.request-conditions__body sup { font-size: 0.7em; }
.request-conditions__body a {
    color: var(--color-accent-soft); text-decoration: underline;
    text-underline-offset: 3px; word-break: break-word;
}
.request-conditions__body a:hover { color: #fff; }
.request-download {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
    padding: 12px 20px; border-radius: 8px;
    background: var(--color-accent); color: #fff; text-decoration: none; font-weight: 600;
}
.request-download:hover { filter: brightness(1.08); }

/* Indication sous un champ du tiroir d'inscription (ex. où trouver le bulletin). */
.request-drawer__form .field__hint {
    margin: 8px 0 0; font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .6);
}
.phone-control { display: flex; align-items: center; min-height: 66px; padding: 0 22px; }
.phone-control__flag { display: inline-flex; align-items: center; font-size: 1.18rem; margin-right: 8px; }
.phone-control__caret { color: rgba(255,255,255,0.52); font-size: 0.78rem; margin-right: 12px; }
.phone-control input { height: auto; padding: 0; flex: 1; }
.request-consent {
    display: flex !important; align-items: flex-start; gap: 12px;
    color: rgba(255,255,255,0.58) !important;
    font-size: 0.92rem !important; line-height: 1.45;
    letter-spacing: 0 !important; text-transform: none !important;
    margin: 2px 0 24px !important;
}
.request-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--color-accent); }
.request-consent a { color: var(--color-accent-soft); font-weight: 700; text-decoration: none; }
.request-drawer .btn { align-self: stretch; width: 100%; justify-content: center; text-align: center; margin-top: 4px; }
.request-drawer__success {
    padding: 14px; border-radius: 6px;
    background: rgba(212,173,106,0.15); border: 1px solid var(--color-accent);
    color: #fff; font-size: 0.95rem;
}

/* Échéance de la session d'inscription (date de fin paramétrée en Rédaction). */
.request-deadline {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding: 11px 14px; border-radius: 6px;
    background: rgba(255,255,255,0.06); border-left: 3px solid var(--color-accent-soft);
    color: rgba(255,255,255,0.9); font-size: 0.88rem; font-weight: 600;
}
.request-deadline::before { content: "🗓"; font-size: 1rem; }
.request-deadline.is-closed { border-left-color: #e0605d; color: #ffd9d8; }
.request-deadline.is-closed::before { content: "🔒"; }

/* Compte à rebours jusqu'à la clôture des inscriptions. */
.request-countdown {
    margin: 0 0 20px; padding: 14px 16px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    text-align: center;
}
.request-countdown__label {
    display: block; margin-bottom: 10px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--color-accent-soft);
}
.request-countdown__units { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.request-countdown__unit {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 58px; padding: 8px 4px; border-radius: 6px;
    background: rgba(255,255,255,0.07);
}
.request-countdown__unit b {
    font-family: var(--font-display);
    font-size: 1.5rem; line-height: 1; font-weight: 700;
    color: #fff; font-variant-numeric: tabular-nums;
}
.request-countdown__unit i {
    font-style: normal; font-size: 0.62rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
}
.request-countdown__sep {
    align-self: center; padding-bottom: 12px;
    font-size: 1.2rem; font-weight: 700; color: rgba(255,255,255,0.3);
}
.request-countdown__over { margin: 12px 0 0; font-size: 0.85rem; color: #ffd9d8; }

/* Dernières 48 h : on passe en alerte. */
.request-countdown.is-urgent { border-color: rgba(224,96,93,0.55); }
.request-countdown.is-urgent .request-countdown__label { color: #ff9b98; }
.request-countdown.is-urgent .request-countdown__unit b { color: #ffd9d8; }
.request-countdown.is-over .request-countdown__unit b { color: rgba(255,255,255,0.35); }

@media (max-width: 420px) {
    .request-countdown__unit { min-width: 48px; }
    .request-countdown__unit b { font-size: 1.2rem; }
}

/* Student login drawer (right side) */
.student-tab {
    position: fixed; left: 0; top: 38%; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    /* Reprend la couleur de l'ancien onglet « Inscription en ligne » (accent/or). */
    background: var(--color-accent); color: #fff;
    padding: 18px 12px; border: 0; cursor: pointer;
    writing-mode: vertical-rl; transform: rotate(180deg);
    letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; font-size: 0.78rem;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 10px 24px rgba(184,138,62,0.35);
    transition: background .25s var(--ease), color .25s var(--ease);
}
.student-tab:hover { background: #a17730; color: #fff; }
.student-drawer {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10,20,34,0.55); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
    /* Panneau décalé translateX(100%) au repos (hors écran à droite) : on le clippe. */
    overflow: hidden;
}
.student-drawer.is-open { opacity: 1; visibility: visible; }
.student-drawer__panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 520px; max-width: 100vw;
    background: #0d1b27; color: #fff;
    padding: 38px 36px 32px; overflow-y: auto;
    transform: translateX(100%); transition: transform .35s var(--ease);
    border-left: 8px solid rgba(255,255,255,0.04);
}
.student-drawer.is-open .student-drawer__panel { transform: translateX(0); }
.student-drawer__close {
    position: absolute; top: 32px; right: 36px;
    width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: #818b99; color: #fff; cursor: pointer; font-size: 1.9rem; line-height: 1;
}
.student-drawer__close:hover { background: rgba(255,255,255,0.22); }
.student-drawer__brand { margin: 0 70px 28px 0; }
.student-drawer__brand span {
    display: block; color: #fff; font-weight: 800; font-size: 1.4rem; line-height: 1;
}
.student-drawer__brand span::first-letter { color: #fff; }
.student-drawer__brand small {
    display: block; margin-top: 8px;
    color: var(--color-accent-soft); letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 700; font-size: 0.68rem;
}
.student-drawer h2 { color: #fff; font-size: 1.9rem; line-height: 1.15; margin: 0 70px 10px 0; }
.student-drawer p.lede { color: rgba(255,255,255,0.5); margin: 0 0 24px; font-size: 1rem; }
.student-switch {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 6px; padding: 5px;
    background: rgba(255,255,255,0.06); border-radius: 10px;
    margin-bottom: 24px;
}
.student-switch__button {
    border: 0; border-radius: 8px;
    background: transparent; color: rgba(255,255,255,0.64);
    padding: 11px 8px; font: inherit; font-size: 0.78rem; font-weight: 800;
    cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease);
}
.student-switch__button.is-active { background: var(--color-accent); color: #fff; }
.student-panel { display: none; }
.student-panel.is-active { display: block; animation: aboutFade .35s var(--ease); }
.student-login-view { display: none; }
.student-login-view.is-active { display: block; animation: aboutFade .35s var(--ease); }
.student-form .field { margin: 0 0 22px; }
.student-form .field--framed {
    position: relative;
    border: 1px solid rgba(149,170,194,0.45);
    border-radius: 9px;
    min-height: 66px;
}
.student-form .field--framed label {
    position: absolute; top: -11px; left: 28px; z-index: 2;
    display: inline-block; padding: 0 12px;
    background: #0d1b27; color: var(--color-accent-soft);
    font-size: 0.95rem; line-height: 1.2; font-weight: 700;
}
.student-form input {
    width: 100%; height: 64px; padding: 0 24px;
    background: transparent; border: 0; color: #fff; border-radius: 8px;
    font: inherit; font-size: 1.02rem;
}
.student-form input::placeholder { color: rgba(255,255,255,0.28); }
.student-form input:focus { outline: none; }
.student-form .field--framed:focus-within { border-color: var(--color-accent-soft); }
.student-login-tools {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin: -4px 0 22px;
}
.student-check {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.62); font-size: 0.92rem;
    margin: 0;
}
.student-check input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.student-link-button {
    border: 0; background: transparent; padding: 0;
    color: var(--color-accent-soft); font: inherit; font-size: 0.92rem; font-weight: 800;
    cursor: pointer; text-align: right;
}
.student-link-button:hover { color: #fff; text-decoration: underline; }
.student-link-button--back { display: inline-block; margin-top: 16px; width: 100%; text-align: center; }
.student-form .btn { width: 100%; justify-content: center; }
.student-panel__hint { color: rgba(255,255,255,0.55); font-size: 0.9rem; line-height: 1.55; margin: -6px 0 22px; }
.student-drawer__success {
    padding: 14px; border-radius: 6px;
    background: rgba(212,173,106,0.15); border: 1px solid var(--color-accent);
    color: #fff; font-size: 0.95rem; margin-bottom: 18px;
}

.hero__inner { position: relative; z-index: 2; padding: 80px 0 120px; width: 100%; }
.hero__eyebrow {
    display: inline-block; margin-bottom: 20px;
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.24em; color: var(--color-accent-soft);
}
.hero h1 {
    color: #fff;
    margin-bottom: 24px;
    max-width: 20ch;
    /* Titre plus mesuré que le h1 global (2.4→4.4rem) : évite qu'un titre long
       s'étale sur 4 lignes et fasse grandir la hauteur du hero. */
    font-size: clamp(1.8rem, 3.4vw, 3.1rem);
    line-height: 1.15;
    /* Au plus 3 lignes : garantit que tous les slides gardent la même hauteur,
       donc des images de taille identique quelle que soit la longueur du titre. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero__lede { font-size: 1.18rem; color: rgba(255,255,255,0.85); margin-bottom: 40px; max-width: 56ch; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero project thumbnails strip */
.hero-thumbs {
    margin-top: -64px; position: relative; z-index: 5;
    padding-bottom: 64px;
}
.hero-thumbs__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    background: #fff; padding: 4px; box-shadow: var(--shadow-3);
}
.hero-thumb {
    position: relative; aspect-ratio: 4/3;
    background: var(--color-surface) center/cover no-repeat;
    overflow: hidden;
    display: flex; align-items: flex-end;
    color: #fff;
}
.hero-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(14,26,43,0.85) 100%);
    transition: opacity .3s var(--ease);
}
.hero-thumb:hover::after { opacity: 0.4; }
.hero-thumb__label {
    position: relative; z-index: 2; padding: 18px 20px;
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.hero-thumb__label small {
    display: block; font-family: var(--font-body);
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--color-accent-soft); margin-bottom: 4px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 110px 0; }
.section--sm { padding: 72px 0; }
.section--alt { background: var(--color-surface); }
.section--dark {
    background: var(--color-dark); color: #fff;
    background-image:
        radial-gradient(ellipse at top left, rgba(184,138,62,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(184,138,62,0.05) 0%, transparent 60%);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.78); }

.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section-head--left { margin: 0 0 56px; text-align: left; max-width: 720px; }
.section-head__eyebrow {
    display: inline-block; margin-bottom: 14px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.24em; color: var(--color-accent);
}
.section-head__divider {
    display: block; width: 56px; height: 2px;
    background: var(--color-accent);
    margin: 18px auto 22px;
}
.section-head--left .section-head__divider { margin-left: 0; margin-right: 0; }
.section-head p { font-size: 1.05rem; }

/* ============================================================
   SPLIT
   ============================================================ */
.split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split__media {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--color-surface) center/cover no-repeat;
    border-radius: 0 0 96px 0;
    box-shadow: var(--shadow-2);
}
.split__body h2 { margin-bottom: 22px; }
.split__bullets { list-style: none; padding: 0; margin: 28px 0 36px; }
.split__bullets li {
    position: relative; padding: 12px 0 12px 32px;
    color: var(--color-ink); font-size: 1rem;
    border-top: 1px solid var(--color-line);
}
.split__bullets li:last-child { border-bottom: 1px solid var(--color-line); }
.split__bullets li::before {
    content: ""; position: absolute; left: 0; top: 24px;
    width: 18px; height: 2px; background: var(--color-accent);
}

/* ============================================================
   CARDS
   ============================================================ */
.cards { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
    position: relative; background: #fff;
    overflow: hidden; transition: all .35s var(--ease);
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); }
.card:hover .card__media { transform: scale(1.05); }
.card__media-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.card__media {
    width: 100%; height: 100%;
    background: var(--color-surface) center/cover no-repeat;
    transition: transform .8s var(--ease);
}
.card__badge {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    background: var(--color-accent); color: #fff;
    padding: 6px 14px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
}
.card__body { padding: 24px 0 0; flex: 1; }
.card__eyebrow {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--color-accent);
    margin-bottom: 10px; display: block;
}
.card__title { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 10px; color: var(--color-ink); }
.card__excerpt { font-size: 0.92rem; color: var(--color-ink-soft); margin: 0; }
.card__meta { font-size: 0.82rem; color: var(--color-muted); margin-top: 14px; }
.card__more {
    margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--color-ink);
}
.card__more::after { content: "→"; transition: transform .25s var(--ease); }
.card:hover .card__more::after { transform: translateX(6px); }
.card:hover .card__more { color: var(--color-accent); }

/* ============================================================
   COMMUNITIES GRID
   ============================================================ */
.communities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.community-tile {
    position: relative; aspect-ratio: 4/3;
    background: var(--color-dark-soft) center/cover no-repeat;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.community-tile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,26,43,0.3) 0%, rgba(14,26,43,0.8) 100%);
    transition: background .3s var(--ease);
}
.community-tile:hover::after {
    background: linear-gradient(180deg, rgba(184,138,62,0.4) 0%, rgba(14,26,43,0.85) 100%);
}
.community-tile__inner { position: relative; z-index: 2; text-align: center; padding: 24px; }
.community-tile__name {
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 600;
    color: #fff; margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.community-tile__count {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--color-accent-soft);
}

.communities--mosaic {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 95px;
    gap: 18px;
    background: transparent;
}
.communities--mosaic .community-tile {
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 0;
    align-items: flex-end;
    justify-content: flex-start;
    box-shadow: none;
}
.communities--mosaic .community-tile:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.communities--mosaic .community-tile:nth-child(2) { grid-column: span 4; grid-row: span 4; }
.communities--mosaic .community-tile:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.communities--mosaic .community-tile:nth-child(4) { grid-column: span 6; grid-row: span 2; }
.communities--mosaic .community-tile:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.communities--mosaic .community-tile:nth-child(6) { grid-column: span 4; grid-row: span 1; }
.communities--mosaic .community-tile:nth-child(7) { grid-column: span 4; grid-row: span 1; }
.communities--mosaic .community-tile:nth-child(8) { grid-column: span 4; grid-row: span 1; }
.communities--mosaic .community-tile:nth-child(9) { grid-column: span 6; grid-row: span 2; }
.communities--mosaic .community-tile::after {
    background: linear-gradient(180deg, rgba(14,26,43,0.02) 20%, rgba(14,26,43,0.74) 100%);
}
.communities--mosaic .community-tile:hover::after {
    background: linear-gradient(180deg, rgba(184,138,62,0.12) 0%, rgba(14,26,43,0.78) 100%);
}
.communities--mosaic .community-tile__inner {
    text-align: left;
    padding: 0 18px 16px;
}
.communities--mosaic .community-tile__name {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 7px;
}
.communities--mosaic .community-tile__count {
    display: block;
    color: rgba(255,255,255,0.68);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.78rem;
}
.community-tile__arrow {
    position: absolute;
    right: 16px; bottom: 16px; z-index: 3;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    backdrop-filter: blur(2px);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.communities--mosaic .community-tile:hover .community-tile__arrow {
    background: var(--color-accent);
    transform: translateX(4px);
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
    padding: 64px 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.stat { text-align: center; }
.stat__value {
    font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--color-accent); font-weight: 700; line-height: 1;
}
.stat__label {
    margin-top: 12px; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-muted);
}

/* ============================================================
   SHORTS / VIDEOS
   ============================================================ */
.shorts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.short {
    position: relative; aspect-ratio: 9/16;
    background: var(--color-dark) center/cover no-repeat;
    overflow: hidden;
}
.short::after {
    content: "▶"; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.95); color: var(--color-ink);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; padding-left: 4px;
    transition: all .3s var(--ease);
}
.short:hover::after { background: var(--color-accent); color: #fff; transform: translate(-50%, -50%) scale(1.1); }

/* ============================================================
   CTA + BRAND CARD
   ============================================================ */
.cta-strip {
    padding: 96px 0; text-align: center;
    background: linear-gradient(135deg, #f8efe0 0%, #fffaf2 55%, #f3dfbd 100%);
    color: var(--color-ink); position: relative; overflow: hidden;
}
.cta-strip::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(184,138,62,0.16) 0%, transparent 34%, rgba(14,26,43,0.06) 100%);
}
.cta-strip > * { position: relative; }
.cta-strip h2 { color: var(--color-dark); margin-bottom: 18px; }
.cta-strip p { color: var(--color-muted); max-width: 600px; margin: 0 auto 32px; font-size: 1.05rem; }
.cta-strip .btn--light { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.cta-strip .btn--light:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.brand-card {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    align-items: stretch; background: var(--color-dark); color: #fff;
}
.brand-card__media { background: center/cover no-repeat; min-height: 460px; }
.brand-card__body { padding: 64px 56px; }
.brand-card__eyebrow {
    display: inline-block; margin-bottom: 18px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.22em; color: var(--color-accent-soft);
}
.brand-card h2 { color: #fff; margin-bottom: 22px; }
.brand-card p { color: rgba(255,255,255,0.8); font-size: 1.02rem; }

/* ============================================================
   FORMS
   ============================================================ */
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__field label {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--color-ink-soft);
}
.form__field input, .form__field select, .form__field textarea {
    padding: 16px 18px;
    border: 1px solid var(--color-line); border-radius: var(--radius);
    font-family: inherit; font-size: 0.95rem;
    color: var(--color-ink); background: #fff;
    transition: all .2s var(--ease);
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(184,138,62,0.15);
}
.form__field textarea { min-height: 160px; resize: vertical; }
.form__alert {
    padding: 16px 20px; border-radius: var(--radius);
    background: #e8f5e9; color: #1b5e20;
    border-left: 4px solid #2e7d32;
}

.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input {
    flex: 1; padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff; font-family: inherit; font-size: 0.9rem;
    border-radius: var(--radius);
}
.newsletter input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter input:focus { outline: none; border-color: var(--color-accent); }
.newsletter button {
    padding: 12px 22px;
    background: var(--color-accent); color: #fff; border: 0; cursor: pointer;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    border-radius: var(--radius);
}
.newsletter button:hover { background: var(--color-accent-dark); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
    padding: 140px 0 100px;
    background: linear-gradient(135deg, var(--color-dark-soft) 0%, var(--color-dark) 100%);
    color: #fff; text-align: center;
    position: relative; background-size: cover; background-position: center;
}
.page-header h1 { color: #fff; margin-bottom: 14px; }
.page-header__crumbs {
    font-size: 0.78rem; color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 0.16em;
}
.page-header__crumbs a:hover { color: var(--color-accent-soft); }
.page-header__crumbs span { margin: 0 10px; color: var(--color-accent); }

/* ============================================================
   PROSE
   ============================================================ */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 1.08rem; line-height: 1.85; color: var(--color-ink); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { color: var(--color-ink); padding-left: 1.4em; line-height: 1.85; }
.prose img { border-radius: var(--radius-lg); margin: 2em auto; }
.prose blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 8px 24px; margin: 2em 0;
    font-family: var(--font-display); font-style: italic;
    font-size: 1.2rem; color: var(--color-ink);
}

/* ============================================================
   PAGER
   ============================================================ */
.pager { display: flex; justify-content: center; gap: 6px; padding: 56px 0; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 10px 16px; min-width: 42px; text-align: center;
    border: 1px solid var(--color-line); font-size: 0.88rem;
}
.pager .is-current, .pager span[aria-current="page"] {
    background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
.pager a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--color-darker); color: rgba(255,255,255,0.7);
    padding: 80px 0 28px;
    background-image: radial-gradient(ellipse at top right, rgba(184,138,62,0.08) 0%, transparent 60%);
}
.site-footer h4 {
    color: #fff; font-family: var(--font-body);
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.18em; margin-bottom: 22px;
    position: relative; padding-bottom: 12px;
}
.site-footer h4::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 28px; height: 2px; background: var(--color-accent);
}
.site-footer a:hover { color: var(--color-accent-soft); }
.site-footer__grid {
    display: grid; gap: 48px;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer__col p { color: rgba(255,255,255,0.6); font-size: 0.92rem; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin: 10px 0; font-size: 0.88rem; }
.site-footer__col li a { color: rgba(255,255,255,0.7); }
.site-footer__contact li {
    padding-left: 26px; position: relative;
    font-size: 0.88rem; line-height: 1.5;
}
.site-footer__contact li.is-phone::before { content: "☎"; position: absolute; left: 0; top: 2px; color: var(--color-accent); }
.site-footer__contact li.is-mail::before  { content: "✉"; position: absolute; left: 0; top: 2px; color: var(--color-accent); }
.site-footer__contact li.is-addr::before  { content: "⌂"; position: absolute; left: 0; top: 2px; color: var(--color-accent); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius);
    color: rgba(255,255,255,0.7);
    transition: all .25s var(--ease);
}
.socials a svg { width: 17px; height: 17px; display: block; }
.socials a:hover {
    background: var(--color-accent); border-color: var(--color-accent); color: #fff;
    transform: translateY(-2px);
}

/* Lien du menu de pied de page rendu en <button> (ouvre le tiroir d'inscription). */
.site-footer__linkbtn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.88rem;
    color: rgba(255,255,255,0.7); text-align: left;
}
.site-footer__linkbtn:hover { color: var(--color-accent); }
.site-footer__more { color: var(--color-accent) !important; font-weight: 600; }

/* Retour d'abonnement à la newsletter. */
.newsletter__note { margin-top: 10px; font-size: 0.82rem; }
.newsletter__note.is-ok { color: #6ee7b7; }
.newsletter__note.is-error { color: #fca5a5; }

.site-footer__bottom {
    padding-top: 28px;
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; text-align: center;
    font-size: 0.8rem; color: rgba(255,255,255,0.45);
}
.site-footer__bottom-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.site-footer__bottom-links a { color: rgba(255,255,255,0.55); }
.site-footer__copyright { display: block; width: 100%; text-align: center; }

/* ============================================================
   UTILITIES + RESPONSIVE
   ============================================================ */
.text-center { text-align: center; }
.mt-3 { margin-top: 1.2rem; }
.mt-5 { margin-top: 2.4rem; }
.mb-5 { margin-bottom: 2.4rem; }
.empty-state {
    padding: 96px 24px; text-align: center;
    color: var(--color-muted); font-style: italic;
    border: 1px dashed var(--color-line);
}

/* ============================================================
   ABOUT SLIDER (About / Vision & Mission / CEO word)
   ============================================================ */
.about-slider-section { background: #f3f4f6; overflow: hidden; }
.about-slider { position: relative; }
.about-slide {
    display: none;
    grid-template-columns: 1.08fr 1fr;
    gap: 72px; align-items: center;
}
.about-slide.is-active { display: grid; animation: aboutFade .55s var(--ease); }
@keyframes aboutFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.about-slide__media {
    position: relative;
    min-height: 560px;
    background-color: #d8dde4;
    background-image: linear-gradient(135deg, rgba(14,26,43,0.18), rgba(184,138,62,0.22));
    background-size: cover; background-position: center;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 72%, 73% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 72%, 73% 100%, 0 100%);
    box-shadow: 0 28px 60px rgba(10,20,34,0.16);
}
.about-slide__body { padding: 8px 0; }
.about-slide__eyebrow {
    display: inline-flex; align-items: center; gap: 16px;
    font-size: 1rem; font-weight: 800;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--color-dark); margin-bottom: 28px;
}
.about-slide__dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-accent);
    box-shadow: -26px 0 0 8px var(--color-dark);
    display: inline-block;
}
.about-slide__title {
    font-size: 2rem; line-height: 1.18; margin: 0 0 58px;
    color: var(--color-ink);
}
.about-slide__text {
    color: var(--color-muted); font-size: 1rem; line-height: 1.75;
    margin: 0 0 58px; max-width: 68ch;
}
.about-slide__features {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; margin: 0 0 28px;
}
.about-feature {
    padding: 0 24px; text-align: center;
    border-right: 1px solid var(--color-line);
    color: var(--color-ink);
}
.about-feature:first-child { padding-left: 0; }
.about-feature:last-child { border-right: 0; padding-right: 0; }
.about-feature__icon {
    width: 44px; height: 44px;
    color: var(--color-accent);
    margin: 0 auto 16px;
    display: block;
}
.about-feature p {
    font-size: 0.86rem; line-height: 1.45; font-weight: 700;
    margin: 0; color: var(--color-ink);
}
.about-slide__controls {
    display: flex; justify-content: flex-start; margin: 24px 0 18px;
}
.about-slide__arrows { display: flex; gap: 12px; }
.about-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: 1px solid var(--color-line);
    color: var(--color-ink); font-size: 1.05rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 8px 22px rgba(10,20,34,0.08);
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.about-arrow:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.about-slide__footer {
    display: flex; align-items: center; justify-content: flex-start; gap: 42px;
}
.about-slide__dots { display: flex; gap: 18px; }
.about-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(14,26,43,0.08); border: 0; cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.about-dot.is-active { background: var(--color-accent); transform: scale(1.18); }

/* ============================================================
   WORLD CAROUSEL (fanned tilted cards)
   ============================================================ */
.world-carousel-section { background: #f3f4f6; overflow: hidden; }
.world-carousel-section .section-head { margin-bottom: 64px; }
.world-carousel {
    position: relative;
    height: 640px;
    perspective: 1600px;
    overflow: visible;
}
.world-carousel__stage {
    position: relative;
    width: 100%; height: 100%;
    overflow: visible;
}
.world-card {
    position: absolute; left: 50%; top: 50%;
    width: 340px; height: 560px;
    border-radius: 28px; overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 34px 70px rgba(10,20,34,0.30);
    transform-origin: center center;
    transform: translate(-50%, -50%);
    transition: transform .6s var(--ease), opacity .45s var(--ease), box-shadow .35s var(--ease);
    text-decoration: none; color: #fff;
    will-change: transform;
}
.world-card.is-active { box-shadow: 0 40px 80px rgba(10,20,34,0.5); }
.world-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,26,43,0) 40%, rgba(14,26,43,0.85) 100%);
}
.world-card__body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 22px 26px;
    color: #fff;
}
.world-card__body small {
    display: block; margin-bottom: 6px;
    font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-accent-soft); font-weight: 700;
}
.world-card__body h3 {
    color: #fff; margin: 0;
    font-size: 1.25rem; line-height: 1.25;
}
.world-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 200;
    width: 52px; height: 52px; border-radius: 50%;
    background: #fff; border: 1px solid var(--color-line);
    color: var(--color-dark); font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-3);
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.world-carousel__nav:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.world-carousel__nav--prev { left: 16px; }
.world-carousel__nav--next { right: 16px; }

/* ============================================================
   MEDIA CENTER MIRROR (tabs + carousel of article cards)
   ============================================================ */
.media-center-mirror__head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    gap: 32px;
    margin-bottom: 48px;
}
.media-center-mirror__intro h2 { margin: 6px 0 0; }
.media-tabs {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.media-tab {
    background: #fff; color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 14px 22px;
    font: inherit; font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.06em; cursor: pointer;
    border-radius: 4px 18px 4px 4px;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.media-tab:hover { background: rgba(184,138,62,0.08); }
.media-tab.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.media-center-mirror__nav { display: flex; gap: 10px; }
.media-arrow {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--color-line); background: #fff;
    color: var(--color-dark); cursor: pointer; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.media-arrow:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.media-arrow--solid { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.media-arrow--solid:hover { background: #a17730; border-color: #a17730; }

.media-track {
    display: flex; gap: 0;
    transition: transform .45s var(--ease);
}
.media-card {
    flex: 0 0 33.333%; max-width: 33.333%;
    padding: 0 14px; box-sizing: border-box;
}
.media-card__media {
    display: block; position: relative;
    aspect-ratio: 16/10; background-size: cover; background-position: center;
    border-radius: 4px;
}
.media-card__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,26,43,0) 60%, rgba(14,26,43,0.55) 100%);
    border-radius: 4px;
}
.media-card__date {
    position: absolute; top: 14px; right: 14px;
    background: var(--color-accent-soft); color: var(--color-dark);
    padding: 9px 11px 10px; min-width: 50px; text-align: center;
    border-radius: 4px 12px 4px 4px;
    font-family: var(--font-display); line-height: 1;
    box-shadow: 0 8px 18px rgba(14,26,43,0.22);
    z-index: 2;
}
.media-card__date strong { display: block; font-size: 1.2rem; font-weight: 700; }
.media-card__date em      { display: block; font-style: normal; font-size: 0.68rem; margin-top: 3px; }
.media-card__body { padding: 15px 2px 0; }
.media-card__body h3 {
    font-size: 1rem; line-height: 1.3; margin: 0 0 8px;
}
.media-card__body h3 a { color: var(--color-dark); text-decoration: none; transition: color .2s var(--ease); }
.media-card__body h3 a:hover { color: var(--color-accent); }
.media-card__body p {
    color: var(--color-muted); font-size: 0.85rem; line-height: 1.55; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.media-empty {
    padding: 46px 20px; text-align: center; color: var(--color-muted);
    font-size: 0.98rem; background: var(--color-surface);
    border: 1px dashed var(--color-line); border-radius: 8px;
}

@media (max-width: 1180px) {
    .site-nav__link { padding: 12px 10px; font-size: 0.74rem; letter-spacing: 0.1em; }
    .hero-thumbs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    :root { --header-h: 80px; }
    .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .communities { grid-template-columns: repeat(2, 1fr); }
    .communities--mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 86px; gap: 14px; }
    .communities--mosaic .community-tile:nth-child(n) { grid-column: span 3; grid-row: span 2; }
    .communities--mosaic .community-tile:nth-child(1),
    .communities--mosaic .community-tile:nth-child(2),
    .communities--mosaic .community-tile:nth-child(9) { grid-column: span 6; grid-row: span 2; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .shorts { grid-template-columns: repeat(3, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: 1fr; gap: 48px; }
    .split--reverse > :first-child { order: 0; }
    .split__media { aspect-ratio: 16/10; border-radius: 0 0 56px 0; }
    .about-slide { grid-template-columns: 1fr; gap: 42px; }
    .about-slide__media { min-height: 420px; }
    .about-slide__features { grid-template-columns: 1fr; gap: 18px; }
    .about-feature { border-right: 0; border-bottom: 1px solid var(--color-line); padding: 0 0 18px; }
    .about-feature:last-child { border-bottom: 0; padding-bottom: 0; }
    .brand-card { grid-template-columns: 1fr; }
    .brand-card__media { min-height: 320px; }
    .brand-card__body { padding: 48px 32px; }
}
@media (max-width: 768px) {
    .section { padding: 72px 0; }
    .container { padding: 0 20px; }
    .site-header__toggle { display: block; }
    .site-nav {
        position: fixed; top: var(--header-h); left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 20px; gap: 0; margin: 0;
        border-bottom: 1px solid var(--color-line);
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
        transform: translateY(-150%); transition: transform .3s var(--ease);
    }
    .site-nav.is-open { transform: translateY(0); }
    .site-nav__link { padding: 16px 8px; border-bottom: 1px solid var(--color-line); }
    .site-nav__panel, .site-nav__mega {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; padding: 0 0 12px 16px;
        min-width: 0; display: block; background: transparent;
    }
    /* Sur mobile, les sous-menus imbriqués s'empilent (indentés) au lieu de déborder. */
    .site-nav__subpanel, .site-nav__subpanel--cols {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-left: 1px solid var(--color-line);
        padding: 0 0 4px 12px; margin-left: 6px;
        min-width: 0; width: auto; max-width: none; max-height: none; overflow: visible;
        background: transparent;
    }
    .site-nav__cols { display: block; }
    .site-nav__col { width: auto; }
    .site-nav__subcaret::after { content: "▾"; }
    .hero { min-height: 80vh; }
    .hero__inner { padding: 60px 0 80px; }
    .hero__nav { width: 42px; height: 42px; font-size: 1rem; }
    .hero__nav--prev { left: 10px; } .hero__nav--next { right: 10px; }
    .hero__dots { right: 16px; bottom: 18px; }
    .request-tab { padding: 14px 9px; font-size: 0.68rem; top: 32%; }
    .request-drawer__panel { width: 100vw; padding: 32px 22px 24px; border-right-width: 0; }
    .request-drawer__close { top: 24px; right: 22px; width: 48px; height: 48px; font-size: 1.7rem; }
    .request-drawer h2 { font-size: 1.65rem; padding-right: 58px; }
    .request-drawer p.lede { font-size: 0.95rem; }
    .request-drawer__form { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
    .request-drawer .field--framed label { left: 18px; font-size: 0.9rem; }
    .request-drawer input, .request-drawer select { padding-left: 20px; padding-right: 42px; }
    .request-drawer textarea { padding: 24px 20px; }
    .student-tab { padding: 14px 9px; font-size: 0.68rem; top: 55%; }
    .student-drawer__panel { width: 100vw; padding: 32px 22px 24px; border-left-width: 0; }
    .student-drawer__close { top: 24px; right: 22px; width: 48px; height: 48px; font-size: 1.7rem; }
    .student-drawer h2 { font-size: 1.55rem; margin-right: 58px; }
    .student-drawer__brand { margin-right: 58px; }
    .student-switch { grid-template-columns: 1fr; }
    .student-form .field--framed label { left: 18px; font-size: 0.88rem; }
    .student-form input { padding-left: 20px; padding-right: 20px; }
    .about-slide__media { min-height: 300px; clip-path: polygon(0 0, 100% 0, 100% 82%, 78% 100%, 0 100%); }
    .about-slide__eyebrow { font-size: 0.78rem; letter-spacing: 0.2em; }
    .about-slide__dot { width: 12px; height: 12px; box-shadow: -18px 0 0 5px var(--color-dark); }
    .about-slide__title { font-size: 1.55rem; margin-bottom: 28px; }
    .about-slide__text { margin-bottom: 32px; }
    .about-slide__footer { gap: 20px; flex-wrap: wrap; }
    .world-carousel { height: 520px; }
    .world-card { width: 240px; height: 420px; border-radius: 22px; }
    .media-center-mirror__head { grid-template-columns: 1fr; gap: 20px; }
    .media-center-mirror__nav { justify-self: end; }
    .media-tab { padding: 11px 16px; font-size: 0.74rem; white-space: nowrap; }
    /* 5 onglets : défilement horizontal plutôt qu'un empilement sur 3 lignes */
    .media-tabs {
        flex-wrap: nowrap; gap: 8px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 6px; scrollbar-width: none;
    }
    .media-tabs::-webkit-scrollbar { display: none; }
    /* 4 catégories : 2 colonnes plutôt qu'une pile de 4 grandes tuiles */
    .hero-thumbs { margin-top: -32px; padding-bottom: 48px; }
    .hero-thumbs__grid { grid-template-columns: repeat(2, 1fr); }
    .hero-thumb__label { padding: 14px 14px; font-size: 0.95rem; }
    .hero-thumb__label small { font-size: 0.6rem; letter-spacing: 0.14em; }
    .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; }
    .communities { grid-template-columns: 1fr; }
    .communities--mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
    .communities--mosaic .community-tile:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 160px; }
    .communities--mosaic .community-tile:nth-child(2) { min-height: 260px; }
    .shorts { grid-template-columns: repeat(2, 1fr); }
    .form__row { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .stats { grid-template-columns: 1fr 1fr; }

    /* Tiroir d'inscription */
    .request-tabs button { padding: 10px 8px; font-size: 0.8rem; }
    .request-conditions__body { font-size: 0.92rem; }
    .request-download { width: 100%; justify-content: center; }
    .request-drawer input[type="file"] { padding: 16px 16px; font-size: 0.85rem; }

    /* Carrousel « Nos filières » */
    .world-carousel-section .section-head { margin-bottom: 40px; }
}

/* ============================================================
   PETITS ÉCRANS (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .section { padding: 56px 0; }
    .section--sm { padding: 44px 0; }
    .container { padding: 0 16px; }

    .hero__inner { padding: 48px 0 64px; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { text-align: center; }

    .hero-thumbs { margin-top: -24px; padding-bottom: 36px; }
    .hero-thumb__label { padding: 11px 11px; font-size: 0.85rem; }

    .world-carousel { height: 400px; }
    .world-card { width: 190px; height: 300px; border-radius: 18px; }
    .world-carousel__nav { width: 40px; height: 40px; font-size: 0.9rem; }

    .media-card__body h3 { font-size: 0.95rem; }
    .media-empty { padding: 34px 16px; font-size: 0.92rem; }

    .stats { grid-template-columns: 1fr 1fr; gap: 22px; padding: 44px 0; }
    .stat__value { font-size: 2rem; }
    .stat__label { font-size: 0.78rem; }

    .communities--mosaic .community-tile:nth-child(n) { min-height: 140px; }
    .communities--mosaic .community-tile:nth-child(2) { min-height: 200px; }

    .cta-strip { padding: 64px 0; }
    .cta-strip p { font-size: 0.95rem; }
    .cta-strip .btn { width: 100%; }

    .page-header h1 { font-size: 1.8rem; }
}

/* ============================================================
   NAVIGATION AU CLIC (petits écrans et écrans tactiles)
   ------------------------------------------------------------
   En dessous de 1280 px, ou sans souris, le survol en cascade est inutilisable :
   les panneaux débordent de l'écran et sont impossibles à viser. Le script bascule
   alors la barre en mode « paliers » : chaque niveau se déplie au clic, sur place.
   ============================================================ */

.site-nav.is-tap .site-nav__panel,
.site-nav.is-tap .site-nav__subpanel,
.site-nav.is-tap .site-nav__col-body,
.site-nav.is-tap .site-nav__fil-body {
    display: none;
}
.site-nav.is-tap [data-nav-toggle].is-open + [data-nav-body] { display: block; }

/* Le panneau racine (Formation…) reste flottant sous son entrée, mais ne se ferme
   qu'au clic : plus de course contre la souris. */
.site-nav.is-tap .site-nav__group:hover .site-nav__panel,
.site-nav.is-tap .site-nav__group:focus-within .site-nav__panel {
    opacity: 1; visibility: visible; transform: none;
}
.site-nav.is-tap .site-nav__link.is-open + .site-nav__panel {
    display: block; opacity: 1; visibility: visible; transform: none;
    max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
}

/* Les niveaux suivants se déplient SUR PLACE (plus de déroulé latéral). */
.site-nav.is-tap .site-nav__subpanel,
.site-nav.is-tap .site-nav__subpanel--cols {
    position: static; opacity: 1; visibility: visible; transform: none;
    width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible;
    border: 0; border-left: 2px solid var(--color-line);
    border-radius: 0; box-shadow: none; background: transparent;
    margin: 2px 0 8px 22px; padding: 2px 0 2px 12px;
}
.site-nav.is-tap .site-nav__cols { display: block; }
.site-nav.is-tap .site-nav__col { width: auto; padding-bottom: 4px; }
.site-nav.is-tap .site-nav__col-title {
    border-bottom: 0; padding: 9px 0; margin: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer;
}
.site-nav.is-tap .site-nav__col-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0; padding: 8px 0; cursor: pointer;
}
.site-nav.is-tap .site-nav__col-body,
.site-nav.is-tap .site-nav__fil-body {
    border-left: 2px solid var(--color-line);
    margin: 0 0 6px 6px; padding-left: 12px;
}

/* Chevron d'état : fermé « › », ouvert « ⌄ ». */
.site-nav.is-tap [data-nav-toggle]::after {
    content: "›"; flex: none; margin-left: auto;
    font-size: 1.15em; line-height: 1; color: var(--color-muted);
    transition: transform .2s var(--ease);
}
.site-nav.is-tap [data-nav-toggle].is-open::after { content: "⌄"; }
.site-nav.is-tap .site-nav__caret::before { content: none; }
.site-nav.is-tap .site-nav__link.site-nav__caret {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* Lien vers la page du palier ouvert (ajouté par le script) : le clic sur le parent
   déplie, ce lien reste le moyen d'atteindre sa page. */
.site-nav__self {
    display: block !important; margin-bottom: 4px;
    font-size: 0.76rem !important; font-weight: 700 !important;
    letter-spacing: 0.04em; color: var(--color-accent) !important;
}
.site-nav__self:hover { text-decoration: underline; }

/* ============================================================
   BLOG — liste 2 colonnes, pagination, couverture de secours
   ============================================================ */

/* Colonne articles (3 cartes / ligne) + colonne latérale. */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}
.blog-layout__main { min-width: 0; }
.blog-layout .cards { gap: 28px; }

/* Filtres par catégorie (chips au-dessus de la grille). */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.blog-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border: 1px solid var(--color-line); border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: var(--color-ink);
    transition: all .2s var(--ease);
}
.blog-chip span { font-size: .72rem; opacity: .6; }
.blog-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.blog-chip.is-active { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.blog-chip.is-active span { opacity: .8; }

/* Couverture : même gabarit partout ; repli lisible si l'image manque. */
.card__media--empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);
    color: rgba(255, 255, 255, .5);
}
.card__media--empty span {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
}
.card__media--empty svg { width: 30px; height: 30px; margin-right: 12px; opacity: .55; }

/* ---------- Colonne latérale ---------- */
.blog-side { display: flex; flex-direction: column; gap: 36px; position: sticky; top: 100px; }
.blog-side__block { border: 1px solid var(--color-line); padding: 24px; background: #fff; }
.blog-side__title {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
    color: var(--color-ink); margin: 0 0 18px; padding-bottom: 12px;
    border-bottom: 2px solid var(--color-accent); display: inline-block;
}

/* Recherche */
.blog-search { display: flex; }
.blog-search input {
    flex: 1; min-width: 0; padding: 12px 14px;
    border: 1px solid var(--color-line); border-right: 0;
    font: inherit; font-size: .9rem; color: var(--color-ink); background: var(--color-bg);
}
.blog-search input:focus { outline: none; border-color: var(--color-accent); }
.blog-search button {
    padding: 0 16px; border: 0; cursor: pointer;
    background: var(--color-accent); color: #fff;
    transition: background .25s var(--ease);
}
.blog-search button:hover { background: var(--color-accent-dark); }
.blog-search svg { width: 16px; height: 16px; display: block; }
.blog-search__reset { display: block; margin-top: 10px; font-size: .8rem; color: var(--color-muted); }

/* Catégories */
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats li + li { border-top: 1px solid var(--color-line); }
.blog-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0; font-size: .92rem; font-weight: 600; color: var(--color-ink-soft);
}
.blog-cats a:hover { color: var(--color-accent); }
.blog-cats a.is-active { color: var(--color-accent); }
.blog-cats b {
    flex: none; min-width: 26px; text-align: center;
    padding: 2px 7px; border-radius: 999px;
    background: var(--color-surface); color: var(--color-muted);
    font-size: .72rem; font-weight: 700;
}
.blog-cats a:hover b, .blog-cats a.is-active b { background: var(--color-accent); color: #fff; }

/* Liste des pages du CMS (colonne latérale de /page/{slug}). */
.blog-cats a.is-active { color: var(--color-accent); font-weight: 700; }
.blog-cats a.is-active b { background: var(--color-accent); color: #fff; }
.page-empty { margin: 12px 0 0; font-size: .85rem; color: var(--color-muted); }

/* Articles populaires */
.blog-pop { list-style: none; margin: 0; padding: 0; }
.blog-pop li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.blog-pop a { display: flex; gap: 14px; align-items: flex-start; }
.blog-pop a > span:last-child { min-width: 0; }
.blog-pop__thumb {
    flex: none; width: 68px; height: 68px; overflow: hidden;
    background: var(--color-surface) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.blog-pop__thumb--empty {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);
    color: rgba(255, 255, 255, .55); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
}
.blog-pop__title {
    display: block;
    font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--color-ink);
    margin: 0 0 5px;
}
.blog-pop a:hover .blog-pop__title { color: var(--color-accent); }
.blog-pop__meta { font-size: .74rem; color: var(--color-muted); display: flex; gap: 10px; }

/* ---------- Colonne latérale d'une page service ---------- */
.svc-contact { list-style: none; margin: 0; padding: 0; }
.svc-contact li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; font-size: .9rem; color: var(--color-ink-soft); line-height: 1.5;
}
.svc-contact li + li { border-top: 1px solid var(--color-line); }
.svc-contact svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--color-accent); }
.svc-contact a { color: var(--color-ink-soft); font-weight: 600; }
.svc-contact a:hover { color: var(--color-accent); }

/* Formulaire « Écrire à ce service » : le visiteur contacte directement le service. */
.svc-form { display: grid; gap: 10px; }
.svc-form label { display: grid; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--color-muted); }
.svc-form input, .svc-form textarea {
    width: 100%; border: 1px solid var(--color-line); border-radius: 8px;
    padding: 9px 11px; font-size: .9rem; font-weight: 400; color: var(--color-ink);
    background: #fff; font-family: inherit;
}
.svc-form input:focus, .svc-form textarea:focus { outline: none; border-color: var(--color-accent); }
.svc-form textarea { resize: vertical; }
.svc-form__btn {
    margin-top: 2px; width: 100%; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--color-accent); color: #fff; font-weight: 700; font-size: .9rem; padding: 11px 14px;
}
.svc-form__btn:hover { filter: brightness(.94); }
.svc-form__note { margin: 6px 0 0; font-size: .74rem; line-height: 1.5; color: var(--color-muted); }
/* Pot de miel : masqué aux humains, visible pour les robots. */
.svc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.svc-msg { border-radius: 8px; padding: 10px 12px; font-size: .84rem; margin-bottom: 12px; line-height: 1.5; }
.svc-msg--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.svc-msg--ko { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.svc-cta { background: var(--color-dark); border-color: var(--color-dark); }
.svc-cta .blog-side__title { color: #fff; }
.svc-cta p { margin: 0 0 16px; font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.svc-cta .btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.svc-cta .btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.svc-cta .btn--outline:hover { background: #fff; color: var(--color-dark); }

/* Responsable du service. */
.svc-head { display: flex; align-items: center; gap: 13px; }
.svc-head img, .svc-head__initials {
    flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 2px 10px rgba(14,26,43,.14);
}
.svc-head__initials {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);
    color: rgba(255,255,255,.85); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.svc-head__id { min-width: 0; }
.svc-head__id strong { display: block; font-size: .95rem; color: var(--color-ink); line-height: 1.3; }
.svc-head__id span { display: block; margin-top: 2px; font-size: .8rem; color: var(--color-muted); }

/* Heures d'ouverture. */
.svc-hours { list-style: none; margin: 0; padding: 0; }
.svc-hours li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; font-size: .88rem; color: var(--color-ink-soft);
}
.svc-hours li + li { border-top: 1px solid var(--color-line); }
.svc-hours b { font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.svc-hours li.is-closed { color: var(--color-muted); }
.svc-hours li.is-closed b { color: #c0392b; font-weight: 600; }

/* Jours fériés. */
.svc-holidays { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--color-line); }
.svc-holidays__title {
    display: block; margin-bottom: 8px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
    color: var(--color-accent);
}
.svc-holidays ul { list-style: none; margin: 0; padding: 0; }
.svc-holidays li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 0; font-size: .84rem; color: var(--color-ink-soft);
}
.svc-holidays b { font-weight: 700; color: var(--color-ink); white-space: nowrap; }

/* F.A.Q du service : accordéon natif. */
.svc-faq details { border-bottom: 1px solid var(--color-line); }
.svc-faq details:last-child { border-bottom: 0; }
.svc-faq summary {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 0; cursor: pointer; list-style: none;
    font-size: .88rem; font-weight: 600; color: var(--color-ink); line-height: 1.45;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::before {
    content: "+"; flex: none; width: 16px;
    color: var(--color-accent); font-weight: 700; font-size: 1rem; line-height: 1.3;
}
.svc-faq details[open] summary::before { content: "−"; }
.svc-faq summary:hover { color: var(--color-accent); }
.svc-faq p {
    margin: 0 0 12px; padding-left: 24px;
    font-size: .86rem; line-height: 1.65; color: var(--color-ink-soft);
}

/* ============================================================
   TRAVAILLER À L'ISIG (offres, enseignant-chercheur, opportunités)
   ============================================================ */

/* Navigation entre les 3 pages de la rubrique. */
.work-nav { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.work-nav__inner { display: flex; gap: 6px; overflow-x: auto; padding: 0 32px; scrollbar-width: none; }
.work-nav__inner::-webkit-scrollbar { display: none; }
.work-nav a {
    flex: none; padding: 16px 18px; white-space: nowrap;
    font-size: .88rem; font-weight: 600; color: var(--color-ink-soft);
    border-bottom: 2px solid transparent; transition: all .2s var(--ease);
}
.work-nav a:hover { color: var(--color-accent); }
.work-nav a.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Liste des offres / opportunités. */
.work-offers { display: grid; gap: 20px; }
.work-offer {
    background: #fff; border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-accent);
    transition: all .3s var(--ease);
}
.work-offer:hover { box-shadow: var(--shadow-1); transform: translateY(-3px); }
.work-offer__body { padding: 24px 26px; }
.work-offer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.work-offer__ref {
    padding: 3px 10px; border-radius: 999px; background: var(--color-surface);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-ink-soft);
}
.work-offer__state {
    padding: 3px 10px; border-radius: 999px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.work-offer__state.is-open { background: rgba(46,160,101,.14); color: #237a4c; }
.work-offer__state.is-closed { background: rgba(192,57,43,.12); color: #a03027; }
.work-offer h3 { font-size: 1.25rem; margin: 0 0 8px; }
.work-offer h3 a { color: var(--color-ink); }
.work-offer h3 a:hover { color: var(--color-accent); }
.work-offer__org { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--color-accent); }
.work-offer p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--color-ink-soft); }
.work-offer__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-line);
    font-size: .84rem; color: var(--color-ink-soft);
}
.work-offer__more { font-weight: 700; color: var(--color-accent); }

/* Formulaire de candidature. */
.work-form {
    margin-top: 44px; padding: 32px; border: 1px solid var(--color-line);
    background: var(--color-surface); border-radius: var(--radius-lg);
}
.work-form h2 { margin: 0 0 20px; font-size: 1.5rem; }
.work-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.work-form__wide { grid-column: 1 / -1; }
.work-form label { display: flex; flex-direction: column; gap: 6px; }
.work-form label > span {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-ink-soft);
}
.work-form label > span small { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.work-form input, .work-form textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--color-line); background: #fff;
    font: inherit; font-size: .94rem; color: var(--color-ink);
}
.work-form input:focus, .work-form textarea:focus { outline: none; border-color: var(--color-accent); }
.work-form textarea { resize: vertical; }
.work-form .btn { width: 100%; justify-content: center; }
.work-form__success {
    margin-bottom: 20px; padding: 14px 16px; border-left: 3px solid #2ea065;
    background: rgba(46,160,101,.1); color: #237a4c; font-size: .92rem; font-weight: 600;
}
.work-form__error {
    margin-bottom: 20px; padding: 14px 16px; border-left: 3px solid #c0392b;
    background: rgba(192,57,43,.08); color: #a03027; font-size: .9rem;
}

@media (max-width: 700px) {
    .work-form { padding: 22px; }
    .work-form__grid { grid-template-columns: 1fr; }
    .work-nav__inner { padding: 0 20px; }
}

/* ============================================================
   SERVICES À LA SOCIÉTÉ (projets, hackathons, projets DEMO)
   ============================================================ */

/* Barre d'avancement d'un projet de recherche. */
.soc-progress {
    margin-top: 14px; height: 6px; border-radius: 999px;
    background: var(--color-line); overflow: hidden;
}
.soc-progress span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent));
}

/* Hackathons. */
.soc-hacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.soc-hack {
    padding: 26px; background: #fff; border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-accent); transition: all .3s var(--ease);
}
.soc-hack:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.soc-hack__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.soc-hack__head h3 { margin: 0; font-size: 1.2rem; color: var(--color-ink); }
.soc-hack__edition {
    padding: 3px 10px; border-radius: 999px; background: var(--color-surface);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-ink-soft);
}
.soc-hack p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--color-ink-soft); }
.soc-hack__stats {
    list-style: none; display: flex; gap: 24px; margin: 18px 0 0; padding: 0;
}
.soc-hack__stats li { display: flex; flex-direction: column; }
.soc-hack__stats b {
    font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
    color: var(--color-accent); font-weight: 700;
}
.soc-hack__stats span {
    margin-top: 3px; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted);
}
.soc-hack__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-line);
    font-size: .82rem; color: var(--color-ink-soft);
}
.soc-hack__winner { font-weight: 700; color: var(--color-accent-dark); }

/* Projets DEMO des étudiants. */
.soc-demo__author {
    margin: 0 0 8px; font-size: .84rem; font-weight: 600; color: var(--color-accent);
}
.soc-demo__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-line);
    font-size: .78rem; color: var(--color-muted);
}
.soc-demo__foot a { font-weight: 700; color: var(--color-accent); }

/* ============================================================
   PAGE FILIÈRE : maquettes de cours + arbre des autres filières
   ============================================================ */

.maq { margin-top: 44px; }
.maq__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 16px;
}
.maq__head h2 { margin: 0; font-size: 1.5rem; }
.maq__ac {
    padding: 4px 12px; border-radius: 999px;
    background: rgba(184,138,62,.12); color: var(--color-accent-dark);
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
}

/* Onglets : un par promotion (LIC1…LIC4, M1, M2). */
.maq__tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--color-line); margin-bottom: 18px;
}
.maq__tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 18px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .86rem; font-weight: 700; letter-spacing: .04em;
    color: var(--color-ink-soft);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all .2s var(--ease);
}
.maq__tab span {
    padding: 1px 7px; border-radius: 999px;
    background: var(--color-surface); color: var(--color-muted);
    font-size: .7rem; font-weight: 700;
}
.maq__tab:hover { color: var(--color-accent); }
.maq__tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.maq__tab.is-active span { background: var(--color-accent); color: #fff; }

.maq__pane { display: none; }
.maq__pane.is-active { display: block; animation: maq-fade .2s var(--ease); }
@keyframes maq-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.maq__sum { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; font-size: .84rem; color: var(--color-muted); }
.maq__sum b { color: var(--color-ink); font-size: 1rem; font-weight: 700; }

/* Un bloc par semestre. */
.maq__sem { margin-bottom: 26px; }
.maq__sem-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 9px 14px; background: var(--color-dark); color: #fff;
}
.maq__sem-name {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}
.maq__sem-tot { font-size: .78rem; color: rgba(255,255,255,.72); }
.maq__sem-tot b { color: var(--color-accent-soft); font-weight: 700; }

/* Le tableau peut être large : il défile dans son propre cadre, jamais la page. */
.maq__scroll { overflow-x: auto; border: 1px solid var(--color-line); border-top: 0; }
.maq__table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; }
.maq__table thead th {
    padding: 9px 14px; text-align: left; white-space: nowrap;
    background: var(--color-surface);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-ink-soft);
    border-bottom: 1px solid var(--color-line);
}
.maq__table td { padding: 9px 14px; border-bottom: 1px solid var(--color-line); color: var(--color-ink-soft); vertical-align: top; }
.maq__table tbody tr:last-child td { border-bottom: 0; }

/* Ligne d'unité d'enseignement : elle porte le regroupement, donc elle est mise en avant. */
.maq__ue-row td {
    background: var(--color-surface-2);
    border-top: 2px solid var(--color-accent);
    font-weight: 700; color: var(--color-ink);
}
.maq__ue-name { font-size: .84rem; letter-spacing: .01em; }
.maq__code { font-weight: 700; color: var(--color-accent-dark); white-space: nowrap; }

/* Élément constitutif : indenté sous son U.E. */
.maq__ec-row:hover td { background: rgba(184,138,62,.05); }
.maq__ec-code { padding-left: 26px !important; font-size: .78rem; color: var(--color-muted); white-space: nowrap; }
.maq__nom { color: var(--color-ink); }

/* Arbre des autres filières (colonne latérale) : domaine → filière → mention. */
.fil-tree__dom { border-bottom: 1px solid var(--color-line); }
.fil-tree__dom:last-child { border-bottom: 0; }
.fil-tree__dom > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 0; cursor: pointer; list-style: none;
    font-size: .82rem; font-weight: 700; line-height: 1.4; color: var(--color-ink);
}
.fil-tree__dom > summary::-webkit-details-marker { display: none; }
.fil-tree__dom > summary::after { content: "›"; flex: none; color: var(--color-muted); font-size: 1.1em; }
.fil-tree__dom[open] > summary::after { content: "⌄"; }
.fil-tree__dom > summary:hover { color: var(--color-accent); }
.fil-tree__fil { padding: 0 0 10px 4px; }
.fil-tree__fil-name {
    display: block; margin-bottom: 5px;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-accent);
}
.fil-tree__fil ul { list-style: none; margin: 0; padding: 0; }
.fil-tree__fil li a, .fil-tree__fil li .is-current {
    display: block; padding: 5px 0 5px 10px;
    border-left: 2px solid var(--color-line);
    font-size: .82rem; line-height: 1.4; color: var(--color-ink-soft);
}
.fil-tree__fil li a:hover { color: var(--color-accent); border-left-color: var(--color-accent); }
.fil-tree__fil li .is-current {
    color: var(--color-accent); font-weight: 700;
    border-left-color: var(--color-accent); background: rgba(184,138,62,.07);
}

/* ============================================================
   RECHERCHE & SOCIÉTÉ : onglets, actualités, tableau des travaux
   ============================================================ */

/* Onglets de la colonne principale : Actualités / Liste des travaux. */
.rs-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-line); margin-bottom: 26px; }
.rs-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 700; letter-spacing: .03em;
    color: var(--color-ink-soft);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all .2s var(--ease);
}
.rs-tab span {
    padding: 1px 8px; border-radius: 999px;
    background: var(--color-surface); color: var(--color-muted);
    font-size: .7rem; font-weight: 700;
}
.rs-tab:hover { color: var(--color-accent); }
.rs-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.rs-tab.is-active span { background: var(--color-accent); color: #fff; }

.rs-pane { display: none; }
.rs-pane.is-active { display: block; }

/* Actualités (publications) de la section. */
.rs-actus { display: grid; gap: 26px; }
.rs-actu { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; }
.rs-actu:only-child, .rs-actu:not(:has(.rs-actu__media)) { grid-template-columns: minmax(0, 1fr); }
.rs-actu__media {
    aspect-ratio: 4/3; border-radius: var(--radius-lg);
    background: var(--color-surface) center/cover no-repeat;
    box-shadow: var(--shadow-1);
}
.rs-actu__body h3 { font-size: 1.2rem; margin: 0 0 10px; color: var(--color-ink); }
.rs-actu + .rs-actu { border-top: 1px solid var(--color-line); padding-top: 26px; }

/* Tableau des travaux. */
#rs-table { border-collapse: collapse; font-size: .86rem; }
#rs-table thead th {
    padding: 10px 12px; text-align: left; white-space: nowrap;
    background: var(--color-surface);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-ink-soft);
    border-bottom: 2px solid var(--color-line);
}
#rs-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-line); color: var(--color-ink-soft); vertical-align: top; }
#rs-table tbody tr:hover td { background: rgba(184,138,62,.05); }
.rs-title { color: var(--color-ink); font-weight: 600; }
.rs-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: var(--color-surface); color: var(--color-ink-soft);
    font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.rs-badge.is-ok { background: rgba(46,160,101,.14); color: #237a4c; }
.rs-file { font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--color-line); border-radius: 8px; padding: 4px 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--color-dark) !important; color: #fff !important; border-radius: 6px; border: 0 !important;
}

/* Dans la colonne principale, les hackathons s'empilent (une carte par ligne). */
.soc-hacks--single { grid-template-columns: minmax(0, 1fr); }

/* Projets les mieux notés d'un hackathon. */
.rs-podium { list-style: none; margin: 16px 0 0; padding: 0; }
.rs-podium li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-top: 1px solid var(--color-line);
    font-size: .85rem; color: var(--color-ink-soft);
}
.rs-podium__rank {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent); color: #fff;
    font-size: .7rem; font-weight: 700;
}
.rs-podium__title { flex: 1; min-width: 0; color: var(--color-ink); font-weight: 600; }
.rs-podium b { color: var(--color-accent-dark); font-weight: 700; }

@media (max-width: 700px) {
    .rs-actu { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pagination ---------- */
.pager { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pager__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pager__item a, .pager__item span {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--color-line); background: #fff;
    font-size: .9rem; font-weight: 600; color: var(--color-ink-soft);
    transition: all .2s var(--ease);
}
.pager__item a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pager__item.is-active span { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.pager__item.is-disabled span { opacity: .35; }
.pager__item.is-dots span { border-color: transparent; background: transparent; }
.pager__count { margin: 0; font-size: .82rem; color: var(--color-muted); }
.pager__count strong { color: var(--color-ink); font-weight: 700; }

@media (max-width: 1100px) {
    .blog-layout { grid-template-columns: 1fr; gap: 56px; }
    .blog-side { position: static; }
}

/* ============================================================
   PAGE « À PROPOS DE NOUS » (/aboutus)
   ============================================================ */

/* Sections ciblées par ancre (#historique…) : on les décale sous l'en-tête fixe. */
.about-hero ~ section[id] { scroll-margin-top: 88px; }

/* Bannière pleine largeur. */
.about-hero {
    position: relative; display: flex; align-items: flex-end;
    min-height: 62vh; padding: 120px 0 56px;
    background: var(--color-dark) center/cover no-repeat;
}
.about-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,20,34,.55) 0%, rgba(10,20,34,.88) 100%);
}
.about-hero__inner { position: relative; z-index: 1; color: #fff; }
.about-hero__crumbs {
    display: flex; gap: 8px; margin-bottom: 18px;
    font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
}
.about-hero__crumbs a { color: var(--color-accent-soft); }
.about-hero h1 {
    margin: 0 0 14px; color: #fff;
    font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1;
}
.about-hero p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); font-size: 1.02rem; }
.about-hero__scroll {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 40px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
    color: rgba(255,255,255,.75);
}
.about-hero__scroll:hover { color: var(--color-accent-soft); }
.about-hero__scroll svg { width: 18px; height: 18px; animation: about-bounce 1.8s var(--ease) infinite; }
@keyframes about-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .about-hero__scroll svg { animation: none; } }

/* Corps de texte riche (sortie de l'éditeur). */
.about-rich { color: var(--color-ink-soft); font-size: 0.98rem; line-height: 1.75; }
.about-rich p { margin: 0 0 1em; }
.about-rich ul, .about-rich ol { margin: 0 0 1em; padding-left: 1.3rem; }
.about-rich ul { list-style: disc; }
.about-rich ol { list-style: decimal; }
.about-rich li { margin-bottom: 0.45em; }
.about-rich strong, .about-rich b { color: var(--color-ink); font-weight: 700; }
.about-rich--center { max-width: 800px; margin: 0 auto; text-align: center; }

/* Repères d'identification, en bandeau de cartes. */
.about-keyfacts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
    margin-top: 48px;
}
.about-keyfact {
    display: flex; flex-direction: column; gap: 7px;
    padding: 24px; background: #fff;
    border: 1px solid var(--color-line); border-top: 3px solid var(--color-accent);
}
.about-keyfact__label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
    color: var(--color-accent);
}
.about-keyfact__value { font-size: .92rem; line-height: 1.6; color: var(--color-ink-soft); }

/* Sections alternées : texte + image en vis-à-vis. */
.about-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.about-split--reverse .about-split__body { order: 2; }
.about-split--solo { grid-template-columns: minmax(0, 860px); justify-content: center; }
.about-split__media { position: relative; }
.about-split__img {
    aspect-ratio: 4/3; border-radius: var(--radius-lg);
    background: var(--color-surface) center/cover no-repeat;
    box-shadow: var(--shadow-1);
}
.about-split__body h2 { margin: 0 0 18px; }

/* Points forts : icône + intitulé + texte (motif du modèle). */
.about-highlights { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.about-highlights li { display: flex; gap: 14px; align-items: flex-start; }
.about-highlights__icon {
    flex: none; width: 40px; height: 40px; padding: 9px;
    border-radius: 50%; color: var(--color-accent);
    background: rgba(184,138,62,.1);
}
.about-highlights li > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.about-highlights b { font-size: .95rem; font-weight: 700; color: var(--color-ink); }
.about-highlights span span { font-size: .9rem; line-height: 1.6; color: var(--color-ink-soft); }

/* Nos valeurs : cartes à icônes. */
.about-values-section { background: var(--color-surface); }
.about-values {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px;
    margin-top: 48px;
}
.about-value {
    padding: 34px 28px; background: #fff; border: 1px solid var(--color-line);
    text-align: center; transition: all .3s var(--ease);
}
.about-value:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); border-color: var(--color-accent); }
.about-value__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; margin-bottom: 20px;
    border-radius: 50%; background: rgba(184,138,62,.12); color: var(--color-accent);
    transition: all .3s var(--ease);
}
.about-value__icon svg { width: 28px; height: 28px; }
.about-value:hover .about-value__icon { background: var(--color-accent); color: #fff; }
.about-value h3 { font-size: 1.12rem; margin: 0 0 10px; color: var(--color-ink); }
.about-value p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--color-ink-soft); }

/* Mot du DG : portrait + message signé. */
.about-dg { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 56px; align-items: center; }
.about-dg--solo { grid-template-columns: minmax(0, 860px); justify-content: center; }
.about-dg__photo {
    aspect-ratio: 3/4; border-radius: var(--radius-lg);
    background: var(--color-surface) center/cover no-repeat;
    box-shadow: var(--shadow-1);
}
.about-dg__body { margin: 0; padding: 0 0 0 28px; border-left: 3px solid var(--color-accent); }
.about-dg__body h2 { margin: 0 0 18px; }
.about-dg__sign { margin-top: 20px; font-size: .9rem; font-weight: 700; color: var(--color-ink); }
.about-dg__sign::before { content: "— "; color: var(--color-accent); }

/* Nos DG : galerie des directeurs généraux successifs (photo, nom, période). */
.about-dgs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px;
    margin-top: 48px;
}
.about-dg-card { text-align: center; }
.about-dg-card__portrait {
    position: relative; width: 100%; max-width: 180px; margin: 0 auto 18px;
    aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 8px 26px rgba(14,26,43,.12);
    border: 3px solid #fff;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.about-dg-card:hover .about-dg-card__portrait {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(14,26,43,.2);
}
.about-dg-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-dg-card__initials {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);
    color: rgba(255,255,255,.85);
    font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; letter-spacing: .05em;
}
.about-dg-card h3 { font-size: 1.08rem; margin: 0 0 6px; color: var(--color-ink); }
.about-dg-card__role {
    display: block; font-size: .78rem; font-weight: 600; color: var(--color-ink-soft);
    margin-bottom: 6px;
}
.about-dg-card__period {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: rgba(184,138,62,.12); color: var(--color-accent-dark);
    font-size: .76rem; font-weight: 700; letter-spacing: .06em;
}
.about-dg-card p { margin: 12px 0 0; font-size: .86rem; line-height: 1.6; color: var(--color-ink-soft); }

/* Plan du campus. */
.about-plan { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.about-plan img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.about-plan:hover img { transform: scale(1.02); }
.about-plan__zoom {
    position: absolute; right: 16px; bottom: 16px;
    padding: 9px 16px; border-radius: 999px;
    background: rgba(14,26,43,.85); color: #fff;
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}
.about-plan__legend { margin-top: 36px; max-width: 860px; }

@media (max-width: 900px) {
    .about-hero { min-height: 46vh; padding: 96px 0 44px; }
    .about-split, .about-dg { grid-template-columns: 1fr; gap: 34px; }
    .about-split--reverse .about-split__body { order: 0; }
    .about-dg__photo { max-width: 260px; }
    .about-dg__body { padding-left: 20px; }
}

/* ============================================================
   PAGES D'ERREUR (404…)
   ============================================================ */
.error-page { padding: 96px 0 110px; }
.error-page__inner { max-width: 720px; text-align: center; }
.error-page__code {
    display: block; font-family: var(--font-display);
    font-size: clamp(5rem, 16vw, 9rem); line-height: 1; font-weight: 700;
    color: var(--color-accent); opacity: .18; letter-spacing: .04em;
}
.error-page__title { margin: -16px 0 14px; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.error-page__lede { margin: 0 auto 30px; max-width: 560px; font-size: 1rem; color: var(--color-ink-soft); }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 640px) {
    .error-page { padding: 60px 0 72px; }
    .error-page__actions .btn { width: 100%; justify-content: center; }
}