/* ===========================================================================
   MCC 2026 — design system for the `mcc2026` CMS page layout.

   Everything here is scoped under `.mcc2026`, which the layout puts on the
   page wrapper. Nothing leaks into the existing visitor pages (landing,
   formations, DU…) — they keep their own styles untouched.

   Token defaults below are mirrored in App\Services\Cms\ThemeTokens::TOKENS.
   The admin's overrides from /admin/cms/site?tab=theme are emitted as an
   inline :root block AFTER this file, so they win without !important.

   Sections (mcc_hero, mcc_quick_access, …) live in their own stylesheet
   blocks appended from phase 2 onwards; this file is the shared vocabulary.
   =========================================================================== */

.mcc2026, .enroll-modal {
    /* ── Couleurs ── */
    --m-red: #cc0000;
    --m-red-dark: #a30000;
    /* Bleu nuit de PGO : un seul sombre sur la page, de l'en-tete au pied. */
    --m-navy: #00071d;
    --m-ink: #111827;
    --m-muted: #64748b;
    --m-surface: #ffffff;
    --m-canvas: #fbfaf6;
    --m-border: #e7e5df;
    --m-accent: #b58b3c;

    /* Derived — kept as tokens so components never hard-code an alpha. */
    --m-red-soft: color-mix(in srgb, var(--m-red) 8%, transparent);
    --m-navy-soft: color-mix(in srgb, var(--m-navy) 6%, transparent);
    --m-ink-soft: color-mix(in srgb, var(--m-ink) 60%, transparent);

    /* ── Typographie ── */
    --m-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --m-font-body: 'Montserrat', Helvetica, Arial, sans-serif;
    --m-font-script: 'Caveat', 'Segoe Script', cursive;

    --m-h1: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
    --m-h2: clamp(1.75rem, 1.1rem + 2.2vw, 2.85rem);
    --m-h3: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
    --m-body: 1rem;
    --m-small: 0.875rem;
    --m-tiny: 0.75rem;

    /* ── Rythme & formes ── */
    --m-container: 1280px;
    --m-radius: 16px;
    --m-radius-btn: 999px;
    --m-section: 96px;
    --m-gutter: clamp(1rem, 0.4rem + 2vw, 3rem);
    --m-gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);

    /* ── Ombres ── */
    --m-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --m-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 10px 24px -8px rgba(15, 23, 42, 0.12);
    --m-shadow-lg: 0 12px 40px -12px rgba(15, 23, 42, 0.22);

    /* ── Mouvement ── */
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-dur: 0.45s;

    font-family: var(--m-font-body);
    font-size: var(--m-body);
    line-height: 1.6;
    color: var(--m-ink);
    background: var(--m-canvas);
}

/* La fenêtre d'inscription reprend les couleurs du thème, mais pas le fond
   de page : sinon elle recouvre (position fixed) la page qu'elle survole. */
.enroll-modal {
    background: transparent;
}

/* Le système ne suppose aucun reset de la page hôte : sans ça, .m-container
   ajoute ses deux gouttières PAR-DESSUS son width:100% et la page déborde
   horizontalement (mesuré : 407px de large pour un viewport de 375px). */
.mcc2026,
.mcc2026 *,
.mcc2026 *::before,
.mcc2026 *::after {
    box-sizing: border-box;
}

/* Older browsers without color-mix() still get a usable, if flatter, palette. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .mcc2026 {
        --m-red-soft: rgba(204, 0, 0, 0.08);
        --m-navy-soft: rgba(0, 7, 29, 0.06);
        --m-ink-soft: rgba(17, 24, 39, 0.6);
    }
}

@media (max-width: 900px) {
    .mcc2026 { --m-section: 64px; }
}
@media (max-width: 600px) {
    .mcc2026 { --m-section: 48px; --m-radius: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mise en page
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-section {
    padding-block: var(--m-section);
}
.mcc2026 .m-section--tight { padding-block: calc(var(--m-section) * 0.55); }
.mcc2026 .m-section--flush { padding-block: 0; }
.mcc2026 .m-section--canvas { background: var(--m-canvas); }
.mcc2026 .m-section--surface { background: var(--m-surface); }
.mcc2026 .m-section--navy { background: var(--m-navy); color: #fff; }

.mcc2026 .m-container {
    width: 100%;
    max-width: var(--m-container);
    margin-inline: auto;
    padding-inline: var(--m-gutter);
}
.mcc2026 .m-container--narrow { max-width: 880px; }

.mcc2026 .m-grid { display: grid; gap: var(--m-gap); }
.mcc2026 .m-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcc2026 .m-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcc2026 .m-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mcc2026 .m-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .mcc2026 .m-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mcc2026 .m-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mcc2026 .m-grid--3,
    .mcc2026 .m-grid--4,
    .mcc2026 .m-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mcc2026 .m-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .mcc2026 .m-grid--3,
    .mcc2026 .m-grid--4,
    .mcc2026 .m-grid--6 { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────
   En-têtes de section — pastille numérotée « 01 › LIBELLÉ » + titre serif
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--m-tiny);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m-muted);
    margin-bottom: 1rem;
}
.mcc2026 .m-eyebrow__num {
    color: var(--m-red);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.mcc2026 .m-eyebrow__sep {
    color: var(--m-red);
    opacity: 0.6;
}
/* On a dark backdrop the muted grey drops below AA — lift it. */
.mcc2026 .m-section--navy .m-eyebrow,
.mcc2026 .m-on-dark .m-eyebrow { color: rgba(255, 255, 255, 0.72); }
.mcc2026 .m-section--navy .m-eyebrow__num,
.mcc2026 .m-on-dark .m-eyebrow__num { color: var(--site-red-bright, #ff6b6b); }

.mcc2026 .m-title {
    font-family: var(--m-font-display);
    font-size: var(--m-h2);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--m-ink);
    margin: 0;
    text-wrap: balance;
}
.mcc2026 .m-title--hero { font-size: var(--m-h1); }
.mcc2026 .m-title em,
.mcc2026 .m-title .m-italic {
    font-style: italic;
    font-weight: 400;
}
.mcc2026 .m-section--navy .m-title,
.mcc2026 .m-on-dark .m-title { color: #fff; }

.mcc2026 .m-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--m-muted);
    margin: 1rem 0 0;
    max-width: 62ch;
}
.mcc2026 .m-section--navy .m-lead,
.mcc2026 .m-on-dark .m-lead { color: rgba(255, 255, 255, 0.82); }

/* Annotation manuscrite — texte + trait rouge, éditables depuis le CMS
   plutôt qu'incrustés dans l'image. */
.mcc2026 .m-script {
    font-family: var(--m-font-script);
    font-size: clamp(1.05rem, 0.8rem + 0.9vw, 1.6rem);
    line-height: 1.3;
    color: var(--m-ink);
    transform: rotate(-4deg);
    display: inline-block;
}
.mcc2026 .m-script--light { color: #fff; }
.mcc2026 .m-script__underline {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 0.15rem;
    color: var(--m-red);
}

/* ─────────────────────────────────────────────────────────────────────────
   Boutons
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--m-radius-btn);
    border: 1px solid transparent;
    font-family: var(--m-font-body);
    font-size: var(--m-small);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--m-ease), box-shadow 0.2s;
}
.mcc2026 .m-btn:hover { transform: translateY(-1px); }
.mcc2026 .m-btn:active { transform: translateY(0); }
.mcc2026 .m-btn:focus-visible {
    outline: 2px solid var(--m-red);
    outline-offset: 3px;
}
.mcc2026 .m-btn svg { width: 1.05em; height: 1.05em; flex: none; }

.mcc2026 .m-btn--primary {
    background: var(--m-red);
    color: #fff;
    box-shadow: var(--m-shadow-sm);
}
.mcc2026 .m-btn--primary:hover { background: var(--m-red-dark); box-shadow: var(--m-shadow-md); }

.mcc2026 .m-btn--navy { background: var(--m-navy); color: #fff; }
.mcc2026 .m-btn--navy:hover { background: var(--site-navy, #061529); }

.mcc2026 .m-btn--ghost {
    background: var(--m-surface);
    color: var(--m-ink);
    border-color: var(--m-border);
}
.mcc2026 .m-btn--ghost:hover { border-color: var(--m-ink); }

/* Variante posée sur une photo / un fond sombre. */
.mcc2026 .m-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.mcc2026 .m-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* Contour rouge seul, fond transparent : texte blanc sur fond sombre (ex.
   hero), texte encre sur fond clair ; se remplit de rouge au survol. */
.mcc2026 .m-btn--outline-red {
    background: transparent;
    color: var(--m-ink);
    border: 2px solid var(--m-red);
}
.mcc2026 .m-on-dark .m-btn--outline-red { color: #fff; }
.mcc2026 .m-btn--outline-red:hover { background: var(--m-red); color: #fff; }

/* Bouton circulaire « → » des cartes et tuiles. */
.mcc2026 .m-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--m-navy);
    color: #fff;
    flex: none;
    transition: background-color 0.2s, transform 0.2s var(--m-ease);
}
.mcc2026 .m-arrow svg { width: 1rem; height: 1rem; }
.mcc2026 .m-arrow--red { background: var(--m-red); }
.mcc2026 .m-arrow--outline {
    background: transparent;
    color: var(--m-red);
    border: 1px solid var(--m-red);
}
/* L'inline-end tient compte du RTL : la flèche part du bon côté en arabe. */
.mcc2026 a:hover .m-arrow,
.mcc2026 button:hover .m-arrow { transform: translateX(3px); }
.mcc2026[dir='rtl'] a:hover .m-arrow,
[dir='rtl'] .mcc2026 a:hover .m-arrow { transform: translateX(-3px); }

.mcc2026 .m-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--m-red);
    font-size: var(--m-small);
    font-weight: 600;
    text-decoration: none;
}
.mcc2026 .m-link:hover { color: var(--m-red-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────────────────
   Cartes & surfaces
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.25s var(--m-ease), transform 0.25s var(--m-ease);
}
.mcc2026 .m-card--hoverable:hover {
    border-color: color-mix(in srgb, var(--m-navy) 22%, transparent);
    box-shadow: var(--m-shadow-md);
    transform: translateY(-3px);
}
.mcc2026 .m-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--m-navy-soft);
    overflow: hidden;
}
.mcc2026 .m-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--m-ease);
}
.mcc2026 .m-card--hoverable:hover .m-card__media img { transform: scale(1.04); }
.mcc2026 .m-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.15rem 1.25rem;
    flex: 1;
}
.mcc2026 .m-card__title {
    font-family: var(--m-font-display);
    font-size: var(--m-h3);
    font-weight: 600;
    line-height: 1.25;
    color: var(--m-ink);
    margin: 0;
}
.mcc2026 .m-card__text {
    font-size: var(--m-small);
    color: var(--m-muted);
    margin: 0;
}
.mcc2026 .m-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.85rem;
}

/* Méta d'une carte : « 1 jour · Alger » avec pictos. */
.mcc2026 .m-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    font-size: var(--m-tiny);
    color: var(--m-muted);
}
.mcc2026 .m-meta__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.mcc2026 .m-meta__item svg { width: 0.95em; height: 0.95em; flex: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Badges, puces, listes à coches
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: var(--m-surface);
    color: var(--m-navy);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: var(--m-shadow-sm);
}
.mcc2026 .m-badge--red { background: var(--m-red); color: #fff; }
.mcc2026 .m-badge--navy { background: var(--m-navy); color: #fff; }
.mcc2026 .m-badge--soft { background: var(--m-red-soft); color: var(--m-red); box-shadow: none; }
.mcc2026 .m-badge--floating { position: absolute; top: 0.75rem; inset-inline-start: 0.75rem; z-index: 2; }

/* Puce icône + texte du hero (« Apprentissage par la pratique »…). */
.mcc2026 .m-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--m-small);
    line-height: 1.25;
    color: inherit;
}
.mcc2026 .m-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    color: currentColor;
    opacity: 0.9;
}
.mcc2026 .m-chip__icon svg { width: 1.35rem; height: 1.35rem; }

.mcc2026 .m-checklist {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.mcc2026 .m-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: var(--m-small);
    color: var(--m-ink);
}
.mcc2026 .m-checklist__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--m-navy);
    color: #fff;
    flex: none;
    margin-top: 0.1rem;
}
.mcc2026 .m-checklist__mark svg { width: 0.8rem; height: 0.8rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Bandeau de statistiques (icône + valeur + libellé)
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-stat { display: flex; align-items: center; gap: 0.75rem; }
.mcc2026 .m-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--m-border);
    color: var(--m-navy);
    flex: none;
}
.mcc2026 .m-stat__icon svg { width: 1.25rem; height: 1.25rem; }
.mcc2026 .m-stat__value {
    font-family: var(--m-font-display);
    font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--m-ink);
}
.mcc2026 .m-stat__label {
    font-size: var(--m-tiny);
    color: var(--m-muted);
    line-height: 1.35;
}
.mcc2026 .m-on-dark .m-stat__value { color: #fff; }
.mcc2026 .m-on-dark .m-stat__label { color: rgba(255, 255, 255, 0.7); }
.mcc2026 .m-on-dark .m-stat__icon { border-color: rgba(255, 255, 255, 0.25); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────
   Onglets (filtres de formations)
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 2rem;
}
.mcc2026 .m-tab {
    padding: 0.55rem 1.1rem;
    border-radius: var(--m-radius-btn);
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-muted);
    font-size: var(--m-small);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.mcc2026 .m-tab:hover { color: var(--m-ink); border-color: var(--m-ink-soft); }
.mcc2026 .m-tab[aria-selected='true'] {
    background: var(--m-red);
    border-color: var(--m-red);
    color: #fff;
}
.mcc2026 .m-tab:focus-visible { outline: 2px solid var(--m-red); outline-offset: 2px; }

/* Sur mobile la barre d'onglets défile plutôt que de passer à la ligne. */
@media (max-width: 640px) {
    .mcc2026 .m-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        margin-inline: calc(var(--m-gutter) * -1);
        padding-inline: var(--m-gutter);
    }
    .mcc2026 .m-tabs::-webkit-scrollbar { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Apparition au défilement — neutralisée si l'utilisateur réduit les
   animations, et toujours visible sans JS (voir .m-reveal--on).
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 .m-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
}
.mcc2026 .m-reveal--on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .mcc2026 *,
    .mcc2026 *::before,
    .mcc2026 *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .mcc2026 .m-reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Divers
   ───────────────────────────────────────────────────────────────────────── */

.mcc2026 img { max-width: 100%; height: auto; }
.mcc2026 .m-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Le miroir RTL ne concerne que les glyphes directionnels (flèches),
   pas les logos ni les photos. */
[dir='rtl'] .mcc2026 .m-arrow svg,
[dir='rtl'] .mcc2026 .m-link svg,
[dir='rtl'] .mcc2026 .m-btn svg.m-rtl-flip { transform: scaleX(-1); }

/* Forme unique des boutons du site MCC 2026 : rectangle aux coins
   légèrement arrondis, piloté par le réglage du thème « rayon des boutons »
   (--m-radius-btn). Les boutons qui avaient leur propre forme s'y alignent ;
   les pastilles/étiquettes (tags, badges) restent arrondies. Les filtres de
   /hebergements (ville, type de chambre) suivent les boutons (demande du
   17/10/2026, mcc-2026-hotels.css). */
.mcc2026 .m-paths__cta,
.mcc2026 .m-seml-card__cta,
.mcc2026 .m-sem__cta,
.mcc2026 .m-ct__submit,
.mcc2026 .m-help__btn,
.mcc2026 .m-du__brochure,
.mcc2026 .m-newsletter__form button,
.mcc2026 .m-share__btn,
.mcc2026 .m-dux__toggle { border-radius: var(--m-radius-btn, 6px); }