/* ===========================================================================
   MCC 2026 — en-tête et pied de page.

   Structure et comportement repris de l'habillage PGO
   (resources/views/pgo/partials/skin.blade.php) : barre fixe translucide
   au-dessus du hero puis pleine au défilement, panneaux déroulants clairs,
   pied centré. Bleu nuit, rouge et accent : ceux de l'onglet Apparence
   (« Marque »), les mêmes que les pages ; #00071d tant qu'ils ne changent
   pas.

   Ces règles ne sont PAS scopées sous `.mcc2026` : l'en-tête et le pied
   vivent en dehors du conteneur de page. Elles portent donc leur propre
   préfixe (`mcc-hd`, `mcc-ft`), qui n'existe nulle part ailleurs dans le
   dépôt, et redéclarent les jetons dont elles ont besoin.
   =========================================================================== */

.mcc-hd,
.mcc-ft {
    /* Couleurs « Marque » de /admin/cms/site?tab=theme, relayées sur :root
       par visitors/partials/site-fonts (--site-*) quand l'admin les change :
       l'en-tête, le pied et les pages prennent alors le même bleu nuit, le
       même rouge et le même accent. Sans réglage, valeurs d'origine. */
    --m-red: var(--site-red, #cc0000);
    --m-red-dark: var(--site-red-dark, #a30000);
    --m-navy: var(--site-navy, #00071d);
    --m-ink-light: #f2f6fb;
    --m-muted-light: rgba(242, 246, 251, 0.66);
    --m-line: rgba(255, 255, 255, 0.12);
    --m-hd-h: 72px;

    /* Menus (en-tête, menu mobile, pied) : Inter, la police des menus de
       /pgo (17/10/2026), quelle que soit la police de texte du thème.
       Chargée par visitors/partials/site-fonts. En arabe, rtl-styles impose
       Tajawal (Inter n'a pas de glyphes arabes). */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
.mcc-hd *,
.mcc-ft * { box-sizing: border-box; font-family: inherit; }

/* Le contenu de la page passe SOUS la barre fixe : sans ce décalage, le
   hero commencerait derrière elle. */
body.mcc2026-body { padding-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   En-tête
   ───────────────────────────────────────────────────────────────────────── */

.mcc-hd {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;
    height: var(--m-hd-h);
    display: flex;
    align-items: center;
    color: var(--m-ink-light);
    /* Translucide comme PGO, la barre laisse voir le hero. Pas de flou :
       un backdrop-filter donnerait un verre dépoli, ce n'est pas le rendu
       de PGO où l'image passe nettement derrière.

       Le dégradé, lui, n'est pas décoratif. Toutes les pages du site
       ouvrent aujourd'hui sur un hero sombre, mais rien ne le garantit
       demain : un visuel clair téléversé par un admin rendrait un menu
       blanc illisible. Ce voile, invisible sur un fond sombre, maintient
       le contraste dans tous les cas. */
    background: linear-gradient(to bottom, color-mix(in srgb, var(--m-navy) 62%, transparent), color-mix(in srgb, var(--m-navy) 12%, transparent));
    transition: background 0.3s, box-shadow 0.3s;
}
.mcc-hd.is-scrolled,
/* `is-solid` : réservé aux pages qui n'ouvrent pas sur un hero. Le gabarit
   ne la pose sur aucune aujourd'hui ; la règle existe pour qu'une page
   puisse s'en servir sans retoucher cette feuille. */
.mcc-hd.is-solid {
    background: var(--m-navy);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* La barre est fixe : une page sans hero ferait passer son contenu dessous.
   La hauteur est reprise en clair — `--m-hd-h` n'est déclarée que sur la
   barre, et une variable non résolue annule la déclaration entière. */
body:has(.mcc-hd.is-solid) main { padding-top: 72px; }
.mcc-hd a { color: inherit; text-decoration: none; }

.mcc-hd__inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    padding-inline: clamp(1rem, 2.5vw, 2.25rem);
}

.mcc-hd__logo { display: inline-flex; align-items: center; flex: none; margin-inline-start: clamp(0px, 2vw, 2.5rem); }
/* --mcc-logo-h / --mcc-logo-w : dimensions réglées dans /admin/cms/navbars. */
.mcc-hd__logo img { height: var(--mcc-logo-h, 50px); max-width: var(--mcc-logo-w, none); width: auto; display: block; object-fit: contain; }
/* Pages Genova : logo MCC + logo Università di Genova (GenovaChrome). */
.mcc-hd__logo--pair { gap: 14px; }
.mcc-hd__logo--pair img { height: 42px; max-width: 180px; }
.mcc-hd__logo-div { width: 1px; height: 30px; background: rgba(255, 255, 255, .45); flex: none; }

.mcc-hd__right {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

.mcc-hd__nav { display: flex; align-items: center; gap: 22px; }
.mcc-hd__link,
.mcc-hd__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.18s;
}
/* Soulignement qui pousse depuis la gauche, comme sur PGO. */
.mcc-hd__link::after,
.mcc-hd__trigger::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -3px;
    height: 2px;
    width: 0;
    background: var(--m-red);
    transition: width 0.2s;
}
.mcc-hd__link:hover,
.mcc-hd__trigger:hover { color: var(--site-red-light, #ff8a8a); }
.mcc-hd__link:hover::after,
.mcc-hd__trigger:hover::after { width: 100%; }
.mcc-hd__link.is-active,
.mcc-hd__item.is-active > .mcc-hd__trigger { color: var(--site-red-light, #ff8a8a); font-weight: 600; }
.mcc-hd__link:focus-visible,
.mcc-hd__trigger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.mcc-hd__item { position: relative; display: inline-flex; align-items: center; }
.mcc-hd__caret { width: 10px; height: 10px; flex: none; color: var(--m-red); transition: transform 0.2s; }
.mcc-hd__item:hover .mcc-hd__caret,
.mcc-hd__item:focus-within .mcc-hd__caret { transform: rotate(180deg); }

/* Panneau déroulant clair, posé sur la barre sombre. */
.mcc-hd__dd {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-start: 0;
    width: 320px;
    max-width: 92vw;
    max-height: min(74vh, 440px);
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--site-navy, #0a1e3c) 8%, transparent);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(10, 30, 60, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1200;
}
/* Pont invisible : sans lui, le curseur perd le survol dans les 14px qui
   séparent le déclencheur du panneau, et le menu se referme. */
.mcc-hd__dd::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -14px;
    height: 14px;
}
.mcc-hd__item:hover .mcc-hd__dd,
.mcc-hd__item:focus-within .mcc-hd__dd {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.mcc-hd__dd-all {
    display: block;
    text-align: center;
    padding: 11px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--m-red);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.18s;
}
.mcc-hd__dd-all:hover { background: var(--m-red-dark); color: #fff; }
.mcc-hd__dd-list { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.mcc-hd__dd-row {
    padding: 11px 12px;
    border-radius: 6px;
    color: var(--site-navy, #0a1e3c);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.16s;
}
.mcc-hd__dd-row:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--site-navy, #0a1e3c) 7%, transparent); }
.mcc-hd__dd-row:hover { background: #f5f5f5; }
/* `.mcc-hd a { color: inherit }` est plus spécifique que `.mcc-hd__dd-row` :
   sans ce rappel, les lignes héritent du texte clair de l'en-tête sombre et
   deviennent invisibles sur le fond blanc du menu. */
.mcc-hd .mcc-hd__dd-row { color: var(--site-navy, #0a1e3c); }

.mcc-hd__actions { display: flex; align-items: center; gap: 14px; }

.mcc-hd__icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.18s;
    list-style: none;
}
.mcc-hd__icon::-webkit-details-marker { display: none; }
.mcc-hd__icon svg { width: 20px; height: 20px; flex: none; display: block; }
.mcc-hd__icon:hover { color: var(--site-red-light, #ff8a8a); }

.mcc-hd__search { position: relative; display: inline-flex; align-items: center; }
.mcc-hd__search-form {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 12px);
    padding: 8px;
    background: var(--m-navy);
    border: 1px solid var(--m-line);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    z-index: 1200;
}
.mcc-hd__search-form input {
    width: 260px;
    max-width: 70vw;
    padding: 10px 12px;
    border: 1px solid var(--m-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--m-ink-light);
    font: inherit;
    font-size: 0.85rem;
    outline: none;
}
.mcc-hd__search-form input::placeholder { color: var(--m-muted-light); }
.mcc-hd__search-form input:focus { border-color: var(--m-red); }

.mcc-hd__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: var(--m-red);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.18s, transform 0.18s;
}
.mcc-hd__cta:hover { background: var(--m-red-dark); color: #fff; transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────────
   Menu mobile — piloté par une case à cocher, donc sans JavaScript
   ───────────────────────────────────────────────────────────────────────── */

.mcc-hd__burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    cursor: pointer;
}
.mcc-hd__burger span {
    display: block;
    width: 28px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
}
.mcc-hd__burger-input:checked ~ .mcc-hd__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mcc-hd__burger-input:checked ~ .mcc-hd__burger span:nth-child(2) { opacity: 0; }
.mcc-hd__burger-input:checked ~ .mcc-hd__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mcc-hd__mobile {
    position: fixed;
    inset: var(--m-hd-h) 0 auto 0;
    max-height: calc(100vh - var(--m-hd-h));
    overflow-y: auto;
    background: var(--m-navy);
    border-top: 1px solid var(--m-line);
    display: none;
}
.mcc-hd__mobile nav { display: flex; flex-direction: column; padding: 0.5rem 0 1.25rem; }
.mcc-hd__mobile a {
    padding: 0.9rem clamp(1rem, 4vw, 2rem);
    color: var(--m-ink-light);
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid var(--m-line);
}
.mcc-hd__mobile a.is-child { padding-inline-start: clamp(2rem, 7vw, 3rem); font-weight: 400; color: var(--m-muted-light); }
.mcc-hd__mobile a.is-active { color: var(--site-red-light, #ff8a8a); }
.mcc-hd__mobile-cta {
    margin: 1rem clamp(1rem, 4vw, 2rem) 0;
    padding: 0.85rem 1.25rem !important;
    border: 0 !important;
    border-radius: 999px;
    background: var(--m-red);
    text-align: center;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .mcc-hd__nav,
    .mcc-hd__space span { display: none; }
    .mcc-hd__burger { display: inline-flex; }
    .mcc-hd__burger-input:checked ~ .mcc-hd__mobile,
    .mcc-hd:has(.mcc-hd__burger-input:checked) .mcc-hd__mobile { display: block; }
}
@media (max-width: 640px) {
    .mcc-hd__cta { display: none; }
    .mcc-hd__logo { margin-inline-start: 0; }
    .mcc-hd__logo img { height: 38px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Pied de page
   ───────────────────────────────────────────────────────────────────────── */

.mcc-ft {
    background: var(--m-navy);
    color: var(--m-ink-light);
    padding: 2.5rem 0 1.5rem;
}
.mcc-ft a { color: inherit; text-decoration: none; }

.mcc-ft__inner {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.95rem;
}

.mcc-ft__brand img { height: var(--mcc-logo-h, 46px); max-width: var(--mcc-logo-w, none); width: auto; display: block; object-fit: contain; }
/* Pages Genova : logo MCC + logo Università di Genova (GenovaChrome). */
.mcc-ft__brand--pair { display: inline-flex; align-items: center; gap: 16px; }
.mcc-ft__brand .mcc-ft__brand-partner { height: 46px; max-width: 200px; }
.mcc-ft__brand-div { width: 1px; height: 34px; background: rgba(255, 255, 255, .45); flex: none; }
@media (max-width: 640px) {
    .mcc-ft__brand--pair { gap: 10px; }
    .mcc-ft__brand--pair img,
    .mcc-ft__brand--pair .mcc-ft__brand-partner { height: 32px; max-width: 130px; }
    .mcc-ft__brand-div { height: 24px; }
}

.mcc-ft__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.9rem;
}
.mcc-ft__title {
    color: var(--m-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Le rouge de marque n'atteint pas le contraste AA sur le bleu nuit : on
   l'éclaircit pour ce seul usage plutôt que de le garder illisible. */
.mcc-ft__title { color: var(--site-red-light, #ff8a8a); }

.mcc-ft__icons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.95rem; }
.mcc-ft__icons a { display: inline-flex; color: #fff; transition: color 0.18s; }
.mcc-ft__icons a:hover { color: var(--site-red-light, #ff8a8a); }
.mcc-ft__icons svg { width: 18px; height: 18px; }

.mcc-ft__links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.mcc-ft__links a {
    position: relative;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    transition: color 0.18s;
}
.mcc-ft__links a:hover { color: var(--site-red-light, #ff8a8a); }
.mcc-ft__links a:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    background: color-mix(in srgb, var(--site-red-light, #ff8a8a) 50%, transparent);
}

/* Paiement en ligne — le badge est posé sur blanc parce que les logos CIB /
   Edahabia sont fournis pour un fond clair : sur le bleu nuit, leurs contours
   disparaîtraient. */
.mcc-ft__pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--m-muted-light);
}
.mcc-ft__pay-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    background: #fff;
}
.mcc-ft__pay-badge img { height: 22px; width: auto; display: block; }

.mcc-ft__copy {
    margin-top: 0.75rem;
    color: var(--m-muted-light);
    font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
    .mcc-hd,
    .mcc-hd *,
    .mcc-ft * { transition-duration: 0.001ms !important; }
}

/* Filet orange entre contact et réseaux sociaux (pied de page). */
.mcc-ft__sep { display: inline-block; width: 2px; height: 1.25rem; margin-inline: 0.35rem; background: var(--site-accent, #f59e0b); border-radius: 1px; align-self: center; }

/* Icône sans lien configuré : même rendu, mais sans curseur de lien. */
.mcc-ft__icons .is-inert { display: inline-flex; color: #fff; cursor: default; }

/* Liens du pied de page sans séparateurs. */
.mcc-ft__links a:not(:last-child)::after { content: none; }

/* Menu du bas de page sur une seule ligne (écrans larges). */
@media (min-width: 1100px) {
    .mcc-ft__links { flex-wrap: nowrap; white-space: nowrap; }
    .mcc-ft__links a { padding-inline: clamp(0.4rem, 0.6vw, 0.7rem); font-size: 0.84rem; }
}

/* Petits téléphones : la barre droite (recherche, compte, langue, menu)
   débordait de quelques pixels à 375px. */
@media (max-width: 420px) {
    .mcc-hd__inner { gap: 12px; }
    .mcc-hd__right { gap: 12px; }
    .mcc-hd__logo img { height: 32px; }
}

/* Boutons de l'en-tête : même forme que les boutons du site (réglage du
   thème « rayon des boutons », 6px). */
.mcc-hd__cta, .mcc-hd__mobile-cta { border-radius: var(--m-radius-btn, 6px); }

/* Pages Genova sur mobile : deux logos réduits pour laisser la place aux
   icônes et au menu. */
@media (max-width: 640px) {
    .mcc-hd__logo--pair { gap: 8px; }
    .mcc-hd__logo--pair img { height: 28px; max-width: 100px; }
    .mcc-hd__logo-div { height: 20px; }
}