/* =========================================================================
   En-tête de la page d'accueil (refonte 2026-10-07) — includes/home-header.php
   Barre du haut (bleu) · en-tête (bleu nuit, menu, bouton « Examens blancs ») ·
   hero (titre, texte, 2 boutons, photo) · bande de chiffres clés (bleu nuit).
   Couleurs du site : bleu #1363DF, bleu nuit #082A5E, vert #12BB6A,
   accent vert de la marque #12BB6A (pas de jaune : absent des couleurs de TCF Academy). Aucune bordure latérale.
   ========================================================================= */

.mci-hh {
    --hh-navy: #082A5E;
    --hh-navy-deep: #061F47;
    --hh-blue: #1363DF;
    --hh-blue-dark: #0F52C0;
    --hh-green: #12BB6A;
    --hh-accent: #12BB6A;
    --hh-accent-hover: #2CCB80;
    --hh-ink: #0A1A3A;
    --hh-muted: #45546E;
    --hh-line: #E2E8F2;
    --hh-hero-bg: #F6F9FE;
    --hh-wrap: 1240px;
    position: relative;
    font-family: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--hh-ink);
    -webkit-font-smoothing: antialiased;
}

/* Le thème impose sa police aux paragraphes (p) : texte du hero et preuve sociale en Plus Jakarta Sans */
.mci-hh.mci-hh :where(p, h1, h2, span, a, li, button) {
    font-family: inherit;
}

.mci-hh *,
.mci-hh *::before,
.mci-hh *::after {
    box-sizing: border-box;
}

.mci-hh a {
    text-decoration: none;
}

.mci-hh ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mci-hh ul li {
    margin: 0;
    list-style: none;
}

.mci-hh .mci-hh-wrap {
    width: 100%;
    max-width: var(--hh-wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Barre du haut ───────────────────────────────────────────────────── */
.mci-hh .mci-hh-topbar {
    background: var(--hh-blue);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22); /* fine ligne sous la barre du haut (Kamlo, 2026-10-17) */
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.4;
}

.mci-hh .mci-hh-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 42px;
}

.mci-hh .mci-hh-topbar-contact,
.mci-hh .mci-hh-topbar-social {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.mci-hh .mci-hh-topbar-social {
    gap: 6px;
}

.mci-hh .mci-hh-topbar-social > span {
    margin-right: 6px;
    font-weight: 500;
}

.mci-hh .mci-hh-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: inherit;
}

.mci-hh a.mci-hh-topbar-item:hover {
    color: #fff;
}

.mci-hh .mci-hh-topbar-item svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Annonce en simple texte vert vif, sans fond (Kamlo, 2026-10-18 ; avant : pastille verte).
   Vert clair sur la barre bleue (#9BFFC9, contraste 4,5), plus franc sur la barre bleu nuit (#5EF2A2, 9,8). */
.mci-hh .mci-hh-announce {
    --hh-announce: #9BFFC9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-weight: 700;
    white-space: nowrap;
    color: var(--hh-announce);
    transition: color 0.15s ease;
}

.mci-hh.mci-hh--blue .mci-hh-announce {
    --hh-announce: #5EF2A2;
}

.mci-hh a.mci-hh-announce:hover {
    color: #fff;
}

.mci-hh .mci-hh-announce svg {
    transition: transform 0.15s ease;
}

.mci-hh a.mci-hh-announce:hover svg {
    transform: translateX(3px);
}

.mci-hh .mci-hh-announce-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hh-announce);
    animation: mci-hh-pulse 2s ease-out infinite;
}

/* Halo vert autour du point */
@keyframes mci-hh-pulse {
    0% { box-shadow: 0 0 0 0 rgba(94, 242, 162, 0.75); }
    70% { box-shadow: 0 0 0 7px rgba(94, 242, 162, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 242, 162, 0); }
}

.mci-hh .mci-hh-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    transition: background 0.15s ease;
}

.mci-hh .mci-hh-social:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.mci-hh .mci-hh-bar {
    position: sticky;
    top: 0;
    z-index: 990;
    background: var(--hh-blue); /* même bleu que la barre du haut (Kamlo, 2026-10-17 ; avant : --hh-navy) */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22); /* fine ligne sous la barre du menu */
    transition: box-shadow 0.2s ease;
}

body.admin-bar .mci-hh .mci-hh-bar {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .mci-hh .mci-hh-bar {
        top: 46px;
    }
}

@media (max-width: 600px) {
    body.admin-bar .mci-hh .mci-hh-bar {
        top: 0;
    }
}

.mci-hh .mci-hh-bar.is-scrolled {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 10px 30px -12px rgba(6, 31, 71, 0.55);
}

.mci-hh .mci-hh-topbar .mci-hh-wrap,
.mci-hh .mci-hh-bar .mci-hh-wrap {
    max-width: 1380px;
}

.mci-hh .mci-hh-bar-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 78px;
}

.mci-hh .mci-hh-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
}

.mci-hh .mci-hh-logo-icon {
    width: 40px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Barre du menu bleue (2026-10-17) : icône du logo en blanc, sinon elle se fond dans le fond */
.mci-hh .mci-hh-bar .mci-hh-logo-icon {
    filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.mci-hh .mci-hh-logo-img {
    display: block;
    height: 46px;
    width: auto;
}

.mci-hh .mci-hh-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.mci-hh .mci-hh-logo-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}

.mci-hh .mci-hh-logo-tag {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8); /* #9DB5E2 manquait de contraste sur le bleu */
}

/* Menu principal */
.mci-hh .mci-hh-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.mci-hh .mci-hh-menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mci-hh .mci-hh-menu > li {
    position: relative;
}

.mci-hh .mci-hh-menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 9px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
    transition: color 0.15s ease;
}

.mci-hh .mci-hh-menu > li > a:hover,
.mci-hh .mci-hh-menu > li:focus-within > a,
.mci-hh .mci-hh-menu > li.current-menu-item > a,
.mci-hh .mci-hh-menu > li.current-menu-ancestor > a {
    color: #fff;
}

/* Rubrique active : trait jaune sous le libellé (comme le modèle) */
.mci-hh .mci-hh-menu > li > a::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--hh-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.mci-hh .mci-hh-menu > li > a:hover::before,
.mci-hh .mci-hh-menu > li.current-menu-item > a::before,
.mci-hh .mci-hh-menu > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
}

/* Flèche des rubriques à sous-menu */
.mci-hh .mci-hh-menu > li.menu-item-has-children > a::after {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.75;
}

.mci-hh .mci-hh-menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    min-width: 250px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(10, 26, 58, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Pont invisible : le survol ne se perd pas entre le lien et le sous-menu */
.mci-hh .mci-hh-menu .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.mci-hh .mci-hh-menu > li:hover > .sub-menu,
.mci-hh .mci-hh-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.mci-hh .mci-hh-menu .sub-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    color: var(--hh-ink);
    transition: background 0.15s ease, color 0.15s ease;
}

.mci-hh .mci-hh-menu .sub-menu a:hover,
.mci-hh .mci-hh-menu .sub-menu .current-menu-item > a {
    background: #EEF4FF;
    color: var(--hh-blue);
}

/* Actions à droite */
.mci-hh .mci-hh-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mci-hh .mci-hh-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
    transition: color 0.15s ease;
}

.mci-hh .mci-hh-account:hover {
    color: #fff;
}

.mci-hh .mci-hh-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    background: var(--hh-accent);
    border-radius: 10px;
    box-shadow: 0 10px 22px -12px rgba(18, 187, 106, 0.75);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--hh-navy);
    transition: background 0.15s ease, transform 0.15s ease;
}

.mci-hh .mci-hh-cta:hover,
.mci-hh .mci-hh-cta:focus-visible {
    background: var(--hh-accent-hover);
    color: var(--hh-navy);
    transform: translateY(-1px);
}

.mci-hh .mci-hh-cta:focus-visible,
.mci-hh .mci-hh-btn:focus-visible,
.mci-hh .mci-hh-burger:focus-visible {
    outline: 2px solid var(--hh-accent);
    outline-offset: 3px;
}

/* Bouton menu (mobile et tablette seulement) */
.mci-hh .mci-hh-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.mci-hh .mci-hh-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

/* ── Menu mobile (panneau latéral) ───────────────────────────────────── */
.mci-hh .mci-hh-drawer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
}

.mci-hh .mci-hh-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.mci-hh .mci-hh-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 31, 71, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mci-hh .mci-hh-drawer.is-open .mci-hh-drawer-backdrop {
    opacity: 1;
}

.mci-hh .mci-hh-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(380px, 88vw);
    padding: 18px 20px 24px;
    background: var(--hh-navy);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.mci-hh .mci-hh-drawer.is-open .mci-hh-drawer-panel {
    transform: translateX(0);
}

.mci-hh .mci-hh-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mci-hh .mci-hh-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.mci-hh .mci-hh-drawer-nav {
    padding: 12px 0;
}

.mci-hh .mci-hh-drawer-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mci-hh .mci-hh-drawer-menu li {
    position: relative;
}

.mci-hh .mci-hh-drawer-menu a {
    display: block;
    padding: 13px 48px 13px 4px;
    font-size: 15.5px;
    font-weight: 600;
    text-transform: none;
    color: #fff;
}

.mci-hh .mci-hh-drawer-menu .current-menu-item > a {
    color: var(--hh-accent);
}

.mci-hh .mci-hh-drawer-menu .sub-menu {
    display: none;
    padding: 0 0 10px 14px;
}

.mci-hh .mci-hh-drawer-menu li.is-open > .sub-menu {
    display: block;
}

.mci-hh .mci-hh-drawer-menu .sub-menu a {
    padding: 9px 4px;
    font-size: 14.5px;
    font-weight: 500;
    color: #C9D6EE;
}

.mci-hh .mci-hh-sub-toggle {
    position: absolute;
    top: 6px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
}

.mci-hh .mci-hh-sub-toggle svg {
    transition: transform 0.2s ease;
}

.mci-hh .mci-hh-drawer-menu li.is-open > .mci-hh-sub-toggle svg {
    transform: rotate(180deg);
}

.mci-hh .mci-hh-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.mci-hh .mci-hh-drawer-actions .mci-hh-cta {
    width: 100%;
}

.mci-hh .mci-hh-drawer-actions .mci-hh-account {
    justify-content: center;
    min-height: 46px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.mci-hh .mci-hh-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
    font-size: 14px;
    color: #C9D6EE;
}

.mci-hh .mci-hh-drawer-contact a {
    color: #C9D6EE;
}

.mci-hh .mci-hh-drawer-social {
    display: flex;
    gap: 6px;
}

body.mci-hh-lock {
    overflow: hidden;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.mci-hh .mci-hh-hero {
    position: relative;
    overflow: hidden;
    background: var(--hh-hero-bg);
}

.mci-hh .mci-hh-hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
}

.mci-hh .mci-hh-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Fondu de la photo vers le fond du texte (comme le modèle) */
.mci-hh .mci-hh-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--hh-hero-bg) 0%, rgba(246, 249, 254, 0.88) 14%, rgba(246, 249, 254, 0.35) 34%, rgba(246, 249, 254, 0) 52%);
    pointer-events: none;
}

/* Carte fine posée sur la photo */
.mci-hh .mci-hh-hero-card {
    position: absolute;
    right: 6%;
    top: 34%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 9px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    box-shadow: 0 16px 36px -20px rgba(10, 26, 58, 0.45);
}

/* Coin de la carte, choisi dans les réglages selon la photo (grand écran).
   En bas à droite : décalée vers la gauche pour ne pas passer sous le bouton WhatsApp flottant. */
.mci-hh .mci-hh-hero-card--bottom-right {
    top: auto;
    bottom: 9%;
    right: 9%;
}

.mci-hh .mci-hh-hero-card--bottom-left {
    top: auto;
    right: auto;
    bottom: 9%;
    left: 24%;
}

.mci-hh .mci-hh-hero-card--top-left {
    top: 12%;
    right: auto;
    left: 24%;
}

.mci-hh .mci-hh-hero-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #E7F8EF;
    color: #0E9A57;
}

.mci-hh .mci-hh-hero-card-icon svg {
    width: 18px;
    height: 18px;
}

.mci-hh .mci-hh-hero-card-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mci-hh .mci-hh-hero-card-text strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hh-navy);
}

.mci-hh .mci-hh-hero-card-text span {
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hh-muted);
}

.mci-hh .mci-hh-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 70vh, 660px);
    padding-top: 64px;
    padding-bottom: 72px;
}

.mci-hh .mci-hh-hero-copy {
    max-width: 660px;
}

.mci-hh .mci-hh-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hh-navy);
}

.mci-hh .mci-hh-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--hh-accent);
}

.mci-hh .mci-hh-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: clamp(38px, 4.3vw, 60px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-transform: none;
    color: var(--hh-ink);
}

.mci-hh .mci-hh-title span {
    display: block;
}

.mci-hh .mci-hh-title-2 {
    color: var(--hh-blue);
}

.mci-hh .mci-hh-lead {
    max-width: 530px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--hh-muted);
}

.mci-hh .mci-hh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.mci-hh .mci-hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 11px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mci-hh .mci-hh-btn--primary {
    background: var(--hh-navy);
    box-shadow: 0 14px 28px -16px rgba(8, 42, 94, 0.9);
    color: #fff;
}

.mci-hh .mci-hh-btn--primary:hover {
    background: #0B3A7E;
    color: #fff;
    transform: translateY(-1px);
}

/* Bouton « Compréhension orale » : contour et texte bleus en permanence (ancien état de survol) */
.mci-hh .mci-hh-btn--secondary {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--hh-blue);
    color: var(--hh-blue);
}

.mci-hh .mci-hh-btn--secondary:hover {
    background: #EAF2FF;
    box-shadow: inset 0 0 0 1.5px var(--hh-blue);
    color: var(--hh-blue);
    transform: translateY(-1px);
}

.mci-hh .mci-hh-proof {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--hh-muted);
}

.mci-hh .mci-hh-proof-stack {
    display: flex;
    flex-shrink: 0;
}

.mci-hh .mci-hh-proof-stack span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: -10px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--hh-hero-bg);
    color: #fff;
}

.mci-hh .mci-hh-proof-stack span:first-child {
    margin-left: 0;
    background: var(--hh-navy);
}

.mci-hh .mci-hh-proof-stack span:nth-child(2) {
    background: var(--hh-blue);
}

.mci-hh .mci-hh-proof-stack span:nth-child(3) {
    background: var(--hh-green);
}

/* ── Bande de chiffres clés ──────────────────────────────────────────── */
.mci-hh .mci-hh-stats {
    background: var(--hh-navy);
}

.mci-hh .mci-hh-stats-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.mci-hh .mci-hh-stats-list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mci-hh .mci-hh-stats-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mci-hh .mci-hh-stats-list--1 {
    grid-template-columns: minmax(0, 1fr);
}

.mci-hh .mci-hh-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 0;
}

.mci-hh .mci-hh-stat-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(18, 187, 106, 0.14);
    color: var(--hh-accent);
}

.mci-hh .mci-hh-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.mci-hh .mci-hh-stat-text strong {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.mci-hh .mci-hh-stat-text span {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #B6C6E4;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1320px) {
    .mci-hh .mci-hh-bar-inner {
        gap: 18px;
    }

    .mci-hh .mci-hh-menu > li > a {
        padding: 12px 7px;
        font-size: 14px;
    }

    .mci-hh .mci-hh-menu > li > a::before {
        left: 7px;
        right: 7px;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta {
        padding: 0 16px;
        font-size: 14.5px;
    }
}

/* Menu trop large pour l'écran (rubriques ajoutées, écran étroit) : bascule sur le bouton menu (script) */
.mci-hh.is-compact .mci-hh-nav {
    display: none;
}

.mci-hh.is-compact .mci-hh-burger {
    display: inline-flex;
}

.mci-hh.is-compact .mci-hh-actions {
    margin-left: auto;
}

/* Tablette et mobile : menu dans le panneau latéral */
@media (max-width: 1100px) {
    .mci-hh .mci-hh-nav {
        display: none;
    }

    .mci-hh .mci-hh-burger {
        display: inline-flex;
    }

    .mci-hh .mci-hh-actions {
        margin-left: auto;
    }

    .mci-hh .mci-hh-bar .mci-hh-logo-tag {
        display: block;
    }

    .mci-hh .mci-hh-topbar-social {
        display: none;
    }
}

@media (max-width: 1023px) {
    .mci-hh .mci-hh-hero-inner {
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 28px;
    }

    .mci-hh .mci-hh-hero-copy {
        max-width: 640px;
    }

    .mci-hh .mci-hh-hero-media {
        position: relative;
        width: auto;
        height: 360px;
        margin: 0 24px 40px;
        border-radius: 22px;
        overflow: hidden;
        order: 2;
    }

    .mci-hh .mci-hh-hero {
        display: flex;
        flex-direction: column;
    }

    .mci-hh .mci-hh-hero-inner {
        order: 1;
    }

    .mci-hh .mci-hh-hero-media::before {
        display: none;
    }

    .mci-hh .mci-hh-hero-media .mci-hh-hero-card {
        top: auto;
        right: auto;
        left: 16px;
        bottom: 16px;
    }

    .mci-hh .mci-hh-stats-list,
    .mci-hh .mci-hh-stats-list--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 20px;
    }

    .mci-hh .mci-hh-stat {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .mci-hh .mci-hh-topbar-contact {
        display: none;
    }

    /* Sans annonce, la barre du haut serait vide sur téléphone : elle est masquée */
    .mci-hh .mci-hh-topbar--plain {
        display: none;
    }

    .mci-hh .mci-hh-topbar-inner {
        justify-content: center;
    }

    .mci-hh .mci-hh-account {
        display: none;
    }

    .mci-hh .mci-hh-drawer-actions .mci-hh-account {
        display: inline-flex;
    }
}

@media (max-width: 560px) {
    .mci-hh .mci-hh-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mci-hh .mci-hh-stats-list,
    .mci-hh .mci-hh-stats-list--3 {
        gap: 22px 14px;
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .mci-hh .mci-hh-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mci-hh .mci-hh-stat-text strong {
        white-space: nowrap;
    }

    /* Téléphone : barre plus haute (66 → 74 → 80 px, Kamlo, 2026-10-12), logo et boutons agrandis d'autant */
    .mci-hh .mci-hh-bar-inner {
        gap: 12px;
        min-height: 80px;
    }

    .mci-hh .mci-hh-logo-icon {
        width: 38px;
    }

    .mci-hh .mci-hh-logo-name {
        font-size: 17px;
    }

    .mci-hh .mci-hh-bar .mci-hh-logo-tag {
        display: none;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta {
        min-height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta svg {
        display: none;
    }

    .mci-hh .mci-hh-announce {
        white-space: normal;
        text-align: center;
        font-size: 12.5px;
    }

    .mci-hh .mci-hh-hero-inner {
        padding-top: 36px;
    }

    .mci-hh .mci-hh-lead {
        font-size: 16.5px;
    }

    .mci-hh .mci-hh-hero-actions {
        flex-direction: column;
    }

    .mci-hh .mci-hh-btn {
        width: 100%;
    }

    .mci-hh .mci-hh-hero-media {
        height: 360px;
        margin: 0 16px 32px;
    }

    /* Carte compacte, dans le coin : le visage reste dégagé */
    .mci-hh .mci-hh-hero-media .mci-hh-hero-card {
        left: 12px;
        bottom: 12px;
        gap: 9px;
        padding: 8px 13px 8px 8px;
        border-radius: 11px;
    }

    .mci-hh .mci-hh-hero-card-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .mci-hh .mci-hh-hero-card-icon svg {
        width: 16px;
        height: 16px;
    }

    .mci-hh .mci-hh-hero-card-text strong {
        font-size: 15.5px;
    }

    .mci-hh .mci-hh-hero-card-text span {
        font-size: 10px;
    }

    .mci-hh .mci-hh-stat-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .mci-hh .mci-hh-stat-text strong {
        font-size: 22px;
    }

    .mci-hh .mci-hh-stat-text span {
        font-size: 13px;
    }
}

/* Petit téléphone : logo, bouton « Examens blancs » et bouton menu tiennent sur une ligne */
@media (max-width: 480px) {
    .mci-hh .mci-hh-bar-inner {
        gap: 10px;
    }

    .mci-hh .mci-hh-actions {
        gap: 8px;
    }

    .mci-hh .mci-hh-logo {
        gap: 8px;
    }

    .mci-hh .mci-hh-logo-icon {
        width: 34px;
    }

    .mci-hh .mci-hh-logo-name {
        font-size: 16px;
        letter-spacing: 0.01em;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta {
        min-height: 42px;
        padding: 0 12px;
        font-size: 13.5px;
    }

    .mci-hh .mci-hh-burger {
        width: 42px;
        height: 42px;
        padding: 0 10px;
    }
}

/* Moins de 400 px (375, 390…) : plus de place en largeur, on garde les tailles d'avant ; seule la hauteur
   des boutons suit celle de la barre */
@media (max-width: 399px) {
    .mci-hh .mci-hh-logo-icon {
        width: 30px;
    }

    .mci-hh .mci-hh-logo-name {
        font-size: 15px;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta {
        padding: 0 11px;
        font-size: 13px;
    }

    .mci-hh .mci-hh-burger {
        width: 40px;
    }
}

/* 360 px : tout serré d'un cran (le bouton menu sortait de l'écran sur les pages intérieures) */
@media (max-width: 374px) {
    .mci-hh .mci-hh-bar-inner {
        gap: 8px;
    }

    .mci-hh .mci-hh-actions {
        gap: 6px;
    }

    .mci-hh .mci-hh-logo-icon {
        width: 28px;
    }

    .mci-hh .mci-hh-logo-name {
        font-size: 14px;
        letter-spacing: 0;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta {
        padding: 0 10px;
        font-size: 12.5px;
    }
}

@media (max-width: 350px) {
    .mci-hh .mci-hh-bar .mci-hh-cta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mci-hh .mci-hh-announce-dot {
        animation: none;
    }

    .mci-hh .mci-hh-drawer-panel,
    .mci-hh .mci-hh-drawer-backdrop {
        transition: none;
    }
}

/* =========================================================================
   Pages internes (2026-10-08) : même barre du haut et même en-tête, sans hero ni chiffres clés.
   - L'ensemble colle en haut au défilement, comme l'ancien en-tête du thème : seule la barre du haut
     s'en va (top négatif = sa hauteur, mesurée par home-header.js dans --hh-topbar-h).
   - .mci-hh--blue : sur les pages qui commencent par un bandeau bleu, la barre du haut passe en bleu nuit
     et l'en-tête en bleu, pour se fondre dans le bandeau.
   ========================================================================= */
.mci-hh.mci-hh--inner {
    --hh-topbar-h: 42px;
    position: sticky;
    top: calc(-1 * var(--hh-topbar-h));
    z-index: 990;
}

body.mci-hh-lock .mci-hh.mci-hh--inner {
    z-index: 100000; /* panneau du menu mobile au-dessus de tout */
}

body.admin-bar .mci-hh.mci-hh--inner {
    top: calc(32px - var(--hh-topbar-h));
}

.mci-hh.mci-hh--inner .mci-hh-bar,
body.admin-bar .mci-hh.mci-hh--inner .mci-hh-bar {
    position: relative;
    top: auto;
}

@media (max-width: 782px) {
    body.admin-bar .mci-hh.mci-hh--inner {
        top: calc(46px - var(--hh-topbar-h));
    }
}

@media (max-width: 760px) {
    .mci-hh.mci-hh--inner:has(.mci-hh-topbar--plain) {
        --hh-topbar-h: 0px;
    }
}

@media (max-width: 600px) {
    body.admin-bar .mci-hh.mci-hh--inner {
        top: calc(-1 * var(--hh-topbar-h));
    }
}

/* Version bleue */
.mci-hh.mci-hh--blue .mci-hh-topbar {
    background: var(--hh-navy);
}

.mci-hh.mci-hh--blue .mci-hh-bar {
    background: var(--hh-blue);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}

.mci-hh.mci-hh--blue .mci-hh-bar.is-scrolled {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 12px 30px -14px rgba(6, 31, 71, 0.6);
}

.mci-hh.mci-hh--blue .mci-hh-logo-tag {
    color: rgba(255, 255, 255, 0.78);
}

.mci-hh.mci-hh--blue .mci-hh-menu > li > a,
.mci-hh.mci-hh--blue .mci-hh-account {
    color: rgba(255, 255, 255, 0.92);
}

.mci-hh.mci-hh--blue .mci-hh-menu > li > a::before {
    background: #fff;
}

.mci-hh.mci-hh--blue .mci-hh-burger {
    background: rgba(255, 255, 255, 0.16);
}

/* Version verte (2026-10-12) : page « Expression orale », bandeau #0B9467. Reprend la version bleue
   (classe mci-hh--blue aussi présente) ; seul le fond change. Le bouton vert « Examens blancs » reçoit
   un liseré blanc pour se détacher du fond vert. */
.mci-hh.mci-hh--green .mci-hh-bar {
    background: #0b9467;
}

.mci-hh.mci-hh--green .mci-hh-bar .mci-hh-cta {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 6px 16px -8px rgba(4, 47, 33, 0.6);
}

/* Logo sur fond bleu ou vert : icône en blanc, comme sur toutes les autres pages (Kamlo, 2026-10-17 ;
   avant : icône bleue posée sur une pastille blanche) */
.mci-hh.mci-hh--blue .mci-hh-bar .mci-hh-logo-icon {
    padding: 0;
    background: none;
    border-radius: 0;
    filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
    box-shadow: none;
}

/* ── Menu principal visible sur les ordinateurs (demande de Kamlo, 2026-10-10) ──────────────────────
   Le script home-header.js bascule sur le bouton menu (☰) dès que le menu ne tient plus sur une ligne.
   Pour l'éviter jusqu'à 1240 px environ : libellé court du bouton des pages internes sous 1540 px, puis liens
   un peu plus serrés sous 1340 px (marge d'au moins 20 px, les polices varient selon les systèmes).
   En dessous (tablettes), le bouton menu reste la bonne solution. */

/* « Compréhensions (CE&CO) » : la précision en plus petit */
.mci-hh .mci-hh-menu-note {
    font-size: 0.86em;
    font-weight: 500;
    opacity: 0.78;
}

/* Bouton des pages internes selon l'état (audit UX du 2026-10-10, N1) : libellé court sur les portables
   et sur téléphone (le nom complet reste celui du lien pour les lecteurs d'écran) */
.mci-hh .mci-hh-cta-short {
    display: none;
}

/* Grands écrans : barre un peu plus large (plafond 1380 px sinon), le libellé complet tient avec le menu */
@media (min-width: 1540px) {
    .mci-hh .mci-hh-bar .mci-hh-wrap {
        max-width: 1500px;
    }
}

@media (max-width: 1539px) {
    .mci-hh .mci-hh-bar .mci-hh-cta-long {
        display: none;
    }

    .mci-hh .mci-hh-bar .mci-hh-cta-short {
        display: inline;
    }
}

@media (max-width: 1539px) {
    .mci-hh .mci-hh-bar-inner {
        gap: 18px;
    }

    .mci-hh .mci-hh-menu > li > a {
        padding: 12px 7px;
        font-size: 15px;
    }

    .mci-hh .mci-hh-menu > li > a::before {
        left: 7px;
        right: 7px;
    }
}

@media (max-width: 1340px) {
    .mci-hh .mci-hh-bar-inner {
        gap: 14px;
    }

    .mci-hh .mci-hh-menu {
        gap: 0;
    }

    .mci-hh .mci-hh-menu > li > a {
        padding: 12px 6px;
        font-size: 14px;
    }

    .mci-hh .mci-hh-menu > li > a::before {
        left: 6px;
        right: 6px;
    }
}