/* ===========================================================================
   Site de l'Università di Genova — accueil du domaine central.

   Demande NAIM (01/11/2026) : « prends le style du site PGO UCAM, enlève le
   logo de MCC et refais la maquette ». Chargé après toutes les feuilles MCC
   (visitors.partials.unige-theme, en fin de <head>), uniquement sur ce site
   (GenovaChrome::isUniversitySite) : à spécificité égale, ces règles
   l'emportent, sans !important.

   Repris du mini-site PGO (resources/views/pgo/partials/skin.blade.php) :
   bleu nuit #00071D et orange #f9af40, Inter pour les titres et le texte,
   Barlow pour les chiffres, sur-titres orange en capitales espacées,
   boutons pilule à contour orange, cartes sombres arrondies sur fond gris
   clair #f7f7f7, sections sombres pleine largeur.
   =========================================================================== */

:root {
    --p-navy: #00071d;
    --p-navy-2: #061027;
    --p-orange: #f9af40;
    --p-orange-2: #f39c12;
    --p-light: #f7f7f7;
    --p-ink: #f0f8ff;
    --p-ink-dark: #00071d;
    --p-muted: rgba(240, 248, 255, 0.66);
    --p-muted-dark: #55606f;
    --p-line: rgba(255, 255, 255, 0.12);
    --p-radius: 14px;
    --p-shadow: 0 18px 40px rgba(0, 7, 29, 0.18);
    --p-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --p-num: 'Barlow', 'Inter', Arial, sans-serif;

    /* Jetons partagés du site public, relus par toutes les feuilles MCC. */
    --site-navy: var(--p-navy);
    --site-red: var(--p-orange);
    --site-red-dark: var(--p-orange-2);
    --site-red-bright: var(--p-orange);
    --site-red-light: var(--p-orange);
    --site-surface: #fff;
    --site-canvas: var(--p-light);
    --site-muted: var(--p-muted-dark);
    --site-border: #e9ebef;
    --site-radius: var(--p-radius);
    --site-font-body: var(--p-sans);
    --site-font-display: var(--p-sans);
}

.mcc2026,
.mcc-hd,
.mcc-ft {
    --m-red: var(--p-orange);
    --m-red-dark: var(--p-orange-2);
    --m-navy: var(--p-navy);
    --m-ink: var(--p-ink-dark);
    --m-muted: var(--p-muted-dark);
    --m-surface: #fff;
    --m-canvas: var(--p-light);
    --m-border: #e9ebef;
    --m-accent: var(--p-orange);
    --m-font-display: var(--p-sans);
    --m-font-body: var(--p-sans);
    --m-radius: var(--p-radius);
    --m-radius-btn: 999px;
}
.mcc2026 { font-family: var(--p-sans); background: var(--p-light); color: var(--p-ink-dark); -webkit-font-smoothing: antialiased; }

/* ── Titres, sur-titres, boutons ─────────────────────────────────────────── */
.mcc2026 h1, .mcc2026 h2, .mcc2026 h3 { font-family: var(--p-sans); }
.mcc2026 .m-title,
.mcc2026 .m-numc__title,
.mcc2026 .m-split__title,
.mcc2026 .m-ctab__title,
.mcc2026 .m-countries__title {
    font-family: var(--p-sans);
    font-weight: 600;
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--p-ink-dark);
}

/* Sur-titre PGO : orange, gras, capitales très espacées, sans filet. */
.mcc2026 .m-eyebrow,
.mcc2026 .m-eyebrow__num,
.mcc2026 .m-numc__eyebrow,
.mcc2026 .m-split__eyebrow,
.mcc2026 .m-phero__eyebrow,
.mcc2026 .m-ctab__eyebrow,
.mcc2026 .m-countries__eyebrow {
    color: var(--p-orange);
    font-family: var(--p-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.mcc2026 .m-eyebrow::before,
.mcc2026 .m-eyebrow::after,
.mcc2026 .m-phero__eyebrow::before,
.mcc2026 .m-ctab__eyebrow::before,
.mcc2026 .m-numc__eyebrow::before,
.mcc2026 .m-split__eyebrow::before { content: none; }

/* Bouton PGO : pilule, contour orange de 2 px, fond transparent. */
.mcc2026 .m-btn {
    border-radius: 999px;
    border: 2px solid var(--p-orange);
    background: transparent;
    color: var(--p-ink-dark);
    font-family: var(--p-sans);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.85rem 1.75rem;
    box-shadow: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mcc2026 .m-btn svg { display: none; }
.mcc2026 .m-btn--primary,
.mcc2026 .m-btn--outline-red { background: transparent; border-color: var(--p-orange); color: var(--p-ink-dark); }
.mcc2026 .m-on-dark .m-btn--primary,
.mcc2026 .m-on-dark .m-btn--outline-red,
.mcc2026 .m-gnav .m-btn--primary,
.mcc2026 .m-gvid .m-btn--primary { color: #fff; }
.mcc2026 .m-btn--primary:hover,
.mcc2026 .m-btn--outline-red:hover { background: var(--p-orange); border-color: var(--p-orange); color: var(--p-navy); }
.mcc2026 .m-btn--ghost { border-color: var(--p-ink-dark); color: var(--p-ink-dark); background: transparent; }
.mcc2026 .m-btn--outline-light { border-color: rgba(255, 255, 255, 0.85); color: #fff; background: transparent; }
.mcc2026 .m-btn--ghost:hover,
.mcc2026 .m-btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--p-navy); }

/* ── En-tête PGO : translucide sur le hero, bleu nuit au défilement ─────── */
.mcc-hd { font-family: var(--p-sans); --m-hd-h: 76px; background: linear-gradient(to bottom, rgba(0, 7, 29, 0.55), rgba(0, 7, 29, 0.1)); box-shadow: none; }
.mcc-hd.is-scrolled,
.mcc-hd.is-solid { background: var(--p-navy); box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); }
.mcc-hd__link,
.mcc-hd__trigger { font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mcc-hd__link::after,
.mcc-hd__trigger::after { background: var(--p-orange); height: 2px; }
.mcc-hd__link:hover,
.mcc-hd__trigger:hover,
.mcc-hd__link.is-active { color: var(--p-orange); }
.mcc-hd__logo-partner { height: 46px; width: auto; }
.mcc-hd__cta {
    border-radius: 999px;
    background: transparent;
    border: 2px solid var(--p-orange);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.mcc-hd__cta:hover { background: var(--p-orange); color: var(--p-navy); }
.mcc-hd__nav { gap: 22px; }
.mcc-hd__right { gap: 18px; }
@media (max-width: 1440px) { .mcc-hd__space span { display: none; } }

/* ── Hero PGO : photo plein écran, voile uniforme, titre blanc centré ─────
   Hero sombre seulement : la variante claire (pages /genova-…) garde sa
   composition, avec les couleurs PGO plus bas. */
.mcc2026 .m-phero:not(.m-phero--light) { background: var(--p-navy); min-height: 100vh; min-height: 100svh; }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__photo::after { background: linear-gradient(180deg, rgba(0, 7, 29, 0.55) 0%, rgba(0, 7, 29, 0.45) 45%, rgba(0, 7, 29, 0.8) 100%); }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__inner { justify-content: center; padding-top: calc(76px + 3rem); }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__copy { max-width: 56rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__title { font-family: var(--p-sans); font-weight: 600; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem); line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__title em { display: block; font-style: normal; font-weight: 600; color: #fff; }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__text { max-width: 44rem; margin-inline: auto; font-size: 1.08rem; line-height: 1.65; color: rgba(240, 248, 255, 0.82); }
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__cta { margin-top: 2.2rem; padding: 0.95rem 2.2rem; font-size: 1rem; }
@media (max-width: 700px) {
    .mcc2026 .m-phero:not(.m-phero--light) .m-phero__inner { padding-top: calc(76px + 2rem); }
    .mcc2026 .m-phero:not(.m-phero--light) .m-phero__eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; }
}
.mcc2026 .m-phero:not(.m-phero--light) .m-phero__tag { border-radius: 999px; background: rgba(0, 7, 29, 0.55); font-size: 0.7rem; }
/* Hero clair : titre bleu nuit, partie finale en orange. */
.mcc2026 .m-phero--light .m-phero__title { font-family: var(--p-sans); font-weight: 600; letter-spacing: -0.03em; color: var(--p-navy); }
.mcc2026 .m-phero--light .m-phero__title em { color: var(--p-orange); }
.mcc2026 .m-phero--light .m-phero__photo::before { background: linear-gradient(135deg, transparent 49.5%, var(--p-orange) 50%); }
/* Chiffres : bandeau sombre en bas du hero, nombres Barlow en orange. */
.mcc2026 .m-phero__stats { background: rgba(0, 7, 29, 0.55); border-top: 1px solid var(--p-line); backdrop-filter: none; }
.mcc2026 .m-phero__stats li { border-inline-start-color: var(--p-line); }
.mcc2026 .m-phero__stats strong { font-family: var(--p-num); font-weight: 600; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); color: var(--p-orange); letter-spacing: -0.01em; }
.mcc2026 .m-phero__stats span { color: var(--p-muted); font-size: 0.82rem; }

/* ── Nos pays : « Ne les manquez pas » de PGO, cartes sombres arrondies ───
   Un cran de spécificité en plus : la section pose ses propres règles dans
   un <style> placé après cette feuille. */
.mcc2026 .m-countries { background: var(--p-light); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.mcc2026 .m-countries .m-countries__head { max-width: none; margin: 0 0 2.2rem; text-align: start; }
.mcc2026 .m-countries .m-countries__text { color: var(--p-muted-dark); max-width: 40rem; }
.mcc2026 .m-countries .m-countries__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.mcc2026 .m-countries .m-countries__card {
    position: relative;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    min-height: 15rem;
    justify-content: flex-end;
    padding: 2rem 1.5rem 1.8rem;
    border: 0;
    border-radius: var(--p-radius);
    background: radial-gradient(120% 90% at 50% 0%, #10224a 0%, var(--p-navy) 70%);
    box-shadow: var(--p-shadow);
    color: #fff;
}
.mcc2026 .m-countries .m-countries__card:hover,
.mcc2026 .m-countries .m-countries__card:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 7, 29, 0.28); }
.mcc2026 .m-countries .m-countries__flag { font-size: 3.4rem; margin-bottom: auto; padding-top: 0.4rem; }
.mcc2026 .m-countries .m-countries__name { color: #fff; font-size: 1.2rem; font-weight: 600; }
.mcc2026 .m-countries .m-countries__meta { color: var(--p-muted); }
.mcc2026 .m-countries .m-countries__cta { margin-top: 0.6rem; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--p-orange); color: var(--p-navy); font-size: 0.8rem; font-weight: 600; }

/* ── L'initiative : titre centré, cartes blanches arrondies ─────────────── */
.mcc2026 .m-numc { background: var(--p-light); padding-block: clamp(3rem, 6vw, 5rem); }
.mcc2026 .m-numc__head { text-align: center; max-width: 52rem; margin-inline: auto; }
.mcc2026 .m-numc__list { margin-top: 2.6rem; gap: 1.5rem; }
.mcc2026 .m-numc--cards .m-numc__list li {
    border: 0;
    border-radius: var(--p-radius);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 7, 29, 0.07);
    padding: 2.2rem 2rem 2.4rem;
}
.mcc2026 .m-numc__num { font-family: var(--p-num); font-weight: 600; font-size: 3rem; line-height: 1; color: var(--p-orange); }
.mcc2026 .m-numc__num::after { content: none; }
.mcc2026 .m-numc__list h3 { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--p-ink-dark); }
.mcc2026 .m-numc__list p { font-size: 0.97rem; line-height: 1.6; color: var(--p-muted-dark); }

/* ── Catalogue des D.U. : même fond clair ───────────────────────────────── */
.mcc2026 .m-du { background: var(--p-light); }
.mcc2026 [class*="m-du__card"] { border-radius: var(--p-radius); overflow: hidden; }

/* ── Bandeau photo PGO : « Des programmes adaptés à vos besoins » ───────── */
.mcc2026 .m-ctab:not(.m-ctab--light) { min-height: clamp(26rem, 55vw, 34rem); display: flex; align-items: flex-end; }
.mcc2026 .m-ctab:not(.m-ctab--light) > div { width: 100%; }
.mcc2026 .m-ctab__photo::after { background: linear-gradient(90deg, rgba(0, 7, 29, 0.82) 0%, rgba(0, 7, 29, 0.55) 45%, rgba(0, 7, 29, 0.25) 100%); }
.mcc2026 .m-ctab:not(.m-ctab--light) .m-ctab__inner { max-width: 1240px; padding-block: clamp(3rem, 6vw, 4.5rem); }
.mcc2026 .m-ctab:not(.m-ctab--light) .m-ctab__title { color: #fff; max-width: 18ch; }
.mcc2026 .m-ctab__text { color: rgba(240, 248, 255, 0.85); font-size: 1rem; max-width: 46ch; }
.mcc2026 .m-ctab__actions { margin-top: 1.8rem; }

/* ── L'université : photo arrondie à gauche, texte à droite ─────────────── */
.mcc2026 .m-split { background: var(--p-light); }
.mcc2026 .m-split__photo { border-radius: 0 var(--p-radius) var(--p-radius) 0; overflow: hidden; box-shadow: var(--p-shadow); }
.mcc2026 .m-split--right .m-split__photo { border-radius: var(--p-radius) 0 0 var(--p-radius); }
.mcc2026 .m-split__text { font-size: 1.02rem; line-height: 1.7; color: var(--p-muted-dark); }
.mcc2026 .m-split__list { list-style: none; display: flex; gap: 2.5rem; padding: 0; margin-top: 1.8rem; }
.mcc2026 .m-split__list li { padding: 0; color: var(--p-muted-dark); font-size: 0.92rem; }
.mcc2026 .m-split__list li::before { content: none; }
.mcc2026 .m-split__colon { display: none; }
.mcc2026 .m-split__list strong { display: block; font-family: var(--p-num); font-size: 2.2rem; font-weight: 600; line-height: 1.1; color: var(--p-ink-dark); }
@media (max-width: 860px) {
    /* Photo remise dans le flux : sans ce retour à top/bottom auto, le
       décalage de la version large la fait déborder sur le sur-titre. */
    .mcc2026 .m-split__photo,
    .mcc2026 .m-split--right .m-split__photo { top: auto; bottom: auto; width: auto; margin-inline: 16px; border-radius: var(--p-radius); }
}

/* ── Carte des pays ───────────────────────────────────────────────────────
   Sans les traits pays → Gênes (NAIM, 01/11/2026). */
.mcc2026 .m-gmap__arcs { display: none; }
.mcc2026 .m-gmap { background: #fff; }
.mcc2026 .m-gmap__stat { border-radius: var(--p-radius); background: var(--p-navy); }
.mcc2026 .m-gmap__stat strong { font-family: var(--p-num); color: var(--p-orange); }

/* ── Vidéos : section sombre, comme « Apprenez en ligne » de PGO ────────── */
.mcc2026 .m-gvid > .m-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.mcc2026 .m-gvid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 960px) {
    .mcc2026 .m-gvid > .m-container { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .mcc2026 .m-gvid__grid { grid-template-columns: 1fr; }
}
.mcc2026 .m-gvid { background: var(--p-navy); color: var(--p-ink); padding-block: clamp(3.5rem, 7vw, 6rem); }
.mcc2026 .m-gvid .m-title { color: #fff; }
.mcc2026 .m-gvid .m-lead { color: var(--p-muted); }
.mcc2026 .m-gvid__card { border-radius: var(--p-radius); overflow: hidden; background: var(--p-navy-2); border: 1px solid var(--p-line); box-shadow: none; }
.mcc2026 .m-gvid__body h3 { color: #fff; }
.mcc2026 .m-gvid__body p { color: var(--p-muted); }
.mcc2026 .m-gvid__source { color: var(--p-orange); }
.mcc2026 .m-gvid__play { background: var(--p-orange); color: var(--p-navy); }
.mcc2026 .m-gvid__play svg { display: block; color: var(--p-navy); stroke: currentColor; }

/* ── Pied de page PGO : bleu nuit, logo centré, intitulés orange ────────── */
.mcc-ft { font-family: var(--p-sans); background: var(--p-navy); border-top: 1px solid var(--p-line); }
.mcc-ft__brand-partner { height: 52px; width: auto; }
.mcc-ft__links a { font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.mcc-ft__links a:hover { color: var(--p-orange); }
.mcc-ft__icons a:hover { color: var(--p-orange); }

/* ── Pages de l'ancien gabarit (contact…) ───────────────────────────────────
   Elles posent leur rouge #cc0000 en dur, dans des <style> du corps de page
   et des attributs style : sélecteurs renforcés, et !important seulement
   contre les attributs style. */
html body .hero-contact { background: var(--p-navy); }
html body .hero-contact h1 { font-family: var(--p-sans); font-weight: 600; letter-spacing: -0.03em; }
html body .hero-contact h1 .w:nth-child(2) { font-style: normal; color: var(--p-orange); }
html body .hero-contact-sub { color: var(--p-muted); }
html body .btn-primary { background: transparent; color: var(--p-ink-dark); border: 2px solid var(--p-orange); border-radius: 999px; }
html body .btn-primary:hover { background: var(--p-orange); color: var(--p-navy); }
html body .btn-outline { color: var(--p-ink-dark); border-color: var(--p-orange); }
html body .btn-outline:hover { background: var(--p-orange); color: var(--p-navy); }
html body .display-red { color: var(--p-orange); }
html body .back-to-top:hover { background: var(--p-orange); border-color: var(--p-orange); color: var(--p-navy); }
html body main [style*="#cc0000"] { color: var(--p-orange) !important; }
html body main svg[stroke="#cc0000"] { stroke: var(--p-orange); }