/* Maison Horizon - Public site styles (Concept 01, Studio Seqoya).
   Composants : layout, header, hero, programmes, cards, buttons, footer, forms.
   Source de vérité tokens : assets/styles/tokens.css.
*/

/* ─── Reset & base ──────────────────────────────────────────────────────── */

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

html, body {
    margin: 0;
    padding: 0;
    overscroll-behavior: none; /* bloque l'effet rebond (overscroll) en haut/bas */
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background: var(--mh-cream);
    color: var(--mh-ink);
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ─── Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mh-font-display);
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-4);
}

/* H1/H2 = Dilbero Light 300, tracking serré, line-height tight (maquette Valentina) */
h1 {
    font-size: clamp(1.875rem, 6vw + 0.5rem, var(--mh-text-6xl));
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: var(--mh-tracking-tight);
}

h2 {
    font-size: clamp(1.625rem, 4vw + 0.25rem, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: var(--mh-tracking-tight);
}

/* H3/H4 = Dilbero Medium 500 - line-height plus aéré */
h3 {
    font-size: var(--mh-text-2xl);
    font-weight: 500;
    line-height: 1.2;
}

h4 {
    font-size: var(--mh-text-xl);
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin: 0 0 var(--mh-space-4);
    text-align: justify;
    hyphens: manual; /* pas de césure : retours à la ligne au mot entier */
    -webkit-hyphens: manual;
}

a {
    color: var(--mh-burgundy);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--mh-transition-fast);
}

a:hover {
    color: var(--mh-ink);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--mh-focus-ring);
    border-radius: var(--mh-radius-sm);
}

button,
[role="button"] {
    min-height: var(--mh-touch-min);
    min-width: var(--mh-touch-min);
}

main:focus { outline: none; }

/* ─── Skip link (a11y) ──────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -200px; /* hidden bien au-dessus du viewport (évite peek du padding) */
    left: 0;
    padding: var(--mh-space-2) var(--mh-space-4);
    background: var(--mh-burgundy);
    color: var(--mh-cream);
    text-decoration: none;
    z-index: 100;
    font-weight: 500;
}

.skip-link:focus {
    top: 0;
}

/* ─── Layout container ──────────────────────────────────────────────────── */

.mh-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--mh-space-6);
}

@media (min-width: 768px) {
    .mh-container {
        padding: 0 var(--mh-space-8);
    }
}

.mh-section {
    padding: var(--mh-space-12) 0; /* 48px mobile + desktop, uniforme */
}

@media (min-width: 768px) {
    .mh-section {
        padding: 5rem 0; /* 80px desktop */
    }
}

/* Variante --compact : padding reduit pour les pages avec plusieurs sections
   qui s'enchainent (ex: /coworking hero + cards + formulaire). Resserre
   2026-06-10 post feedback Greg "espaces verticaux trop importants" :
   desktop passe de space-12 (48px) a space-8 (32px), mobile de space-8 a
   space-6. Cumul section-a-section divise par 1.5. */
.mh-section--compact {
    padding: var(--mh-space-6) 0;
}

@media (min-width: 768px) {
    .mh-section--compact {
        padding: var(--mh-space-8) 0;
    }
}

/* Variante --tight-top : retire le padding-top, pour enchainer directement apres
   un hero qui porte deja son propre padding bas (ex: /a-propos "Pourquoi MH" qui
   suit directement le hero editorial). */
.mh-section--tight-top {
    padding-top: 0;
}

/* ─── Header / Nav ──────────────────────────────────────────────────────── */

.mh-header {
    background: var(--mh-cream);
    border-bottom: 3px solid var(--mh-ink);
    position: sticky;
    top: 0;
    z-index: 50;
}

.mh-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--mh-space-6);
    padding: var(--mh-space-4) var(--mh-space-6);
    max-width: 1400px;
    margin: 0 auto;
}

.mh-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity var(--mh-transition-fast);
}

.mh-brand:hover {
    opacity: 0.85;
}

.mh-brand__logo {
    height: 44px;
    width: auto;
    display: block;
}

@media (min-width: 768px) {
    .mh-brand__logo { height: 52px; }
}

.mh-nav {
    display: none;
}

@media (min-width: 1024px) {
    .mh-nav {
        display: flex;
        gap: var(--mh-space-6);
        align-items: center;
    }
    .mh-nav--left { justify-content: flex-end; }
    .mh-nav--right { justify-content: flex-start; }
}

/* Mobile : menu unifie .mh-mobile-menu (regroupe les 2 navs desktop) ────── */
.mh-mobile-menu {
    display: none;
}

@media (max-width: 1023.98px) {
    .mh-mobile-menu {
        display: flex;
        flex-direction: column;
        background: var(--mh-cream);
        border-top: 1px solid rgba(34, 21, 13, 0.12);
        max-height: 0;
        overflow: hidden;
        padding: 0 var(--mh-space-6);
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    }

    .mh-header--open .mh-mobile-menu {
        max-height: calc(100vh - 80px);
        padding: var(--mh-space-4) var(--mh-space-6) var(--mh-space-8);
        overflow-y: auto;
    }

    /* Liens du menu : aere, separateur legere entre items, accent au survol */
    .mh-mobile-menu__link {
        display: block;
        padding: var(--mh-space-4) 0;
        font-family: var(--mh-font-body);
        font-size: var(--mh-text-md);
        font-weight: 500;
        color: var(--mh-ink);
        text-decoration: none;
        border-bottom: 1px solid rgba(34, 21, 13, 0.08);
        transition: color var(--mh-transition-fast), padding-left var(--mh-transition-fast);
    }

    /* Pas de bordure sous le dernier item de la liste (juste avant le CTA pill) */
    .mh-mobile-menu__link:last-of-type {
        border-bottom: none;
    }

    .mh-mobile-menu__link:hover,
    .mh-mobile-menu__link:focus-visible {
        color: var(--mh-burgundy);
        padding-left: var(--mh-space-2);
        outline: none;
    }

    .mh-mobile-menu__link[aria-current="page"] {
        color: var(--mh-burgundy);
        font-weight: 600;
    }

    /* CTA Mon Espace : pill burgundy plein largeur en bas du menu */
    .mh-mobile-menu__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: var(--mh-space-6);
        padding: var(--mh-space-4) var(--mh-space-6);
        background: var(--mh-burgundy);
        color: var(--mh-pink-soft);
        border-radius: var(--mh-radius-full);
        font-family: var(--mh-font-body);
        font-size: var(--mh-text-md);
        font-weight: 600;
        text-decoration: none;
        min-height: var(--mh-touch-min);
        transition: background var(--mh-transition-fast);
    }

    .mh-mobile-menu__cta:hover,
    .mh-mobile-menu__cta:focus-visible {
        background: var(--mh-ink);
        outline: none;
    }

    /* Verrouille le scroll de la page derriere quand le menu est ouvert */
    body:has(.mh-header--open) {
        overflow: hidden;
    }
}

.mh-nav__link {
    color: var(--mh-ink);
    text-decoration: none;
    font-size: var(--mh-text-md); /* 18px - maquette Sofia 500 */
    font-weight: 500;
    padding: var(--mh-space-2) 0;
    border-bottom: 3px solid transparent;
    transition: border-color var(--mh-transition-fast);
}

.mh-nav__link:hover,
.mh-nav__link[aria-current="page"] {
    color: var(--mh-burgundy);
    border-bottom-color: var(--mh-burgundy);
}

/* Mon Espace pill (cf. Frame 3 maquette : burgundy bg + pink-soft text,
   hover cream bg + burgundy border + burgundy text) */
.mh-nav__link--ghost {
    background: var(--mh-burgundy);
    color: var(--mh-pink-soft);
    border: 3px solid var(--mh-burgundy);
    border-radius: var(--mh-radius-full);
    padding: var(--mh-space-2) var(--mh-space-6);
    font-weight: 600;
    border-bottom-color: var(--mh-burgundy);
    min-height: 40px; /* boutons plus compacts (préférence fondatrices) - reste > 24px WCAG AA 2.5.8 */
    display: inline-flex;
    align-items: center;
}

.mh-nav__link--ghost:hover {
    background: var(--mh-cream);
    color: var(--mh-burgundy);
    border-color: var(--mh-burgundy);
}

/* Mobile nav toggle : icone burger qui se transforme en croix quand ouvert */
.mh-nav__mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--mh-space-2);
    background: transparent;
    border: 1px solid var(--mh-burgundy);
    border-radius: var(--mh-radius-full);
    color: var(--mh-burgundy);
    padding: var(--mh-space-2) var(--mh-space-4);
    cursor: pointer;
    font-size: var(--mh-text-sm);
    font-weight: 600;
    font-family: var(--mh-font-body);
    min-height: var(--mh-touch-min);
    transition: background var(--mh-transition-fast), color var(--mh-transition-fast);
    position: relative;
    z-index: 51;
}

.mh-nav__mobile-toggle:hover,
.mh-nav__mobile-toggle:focus-visible {
    background: var(--mh-burgundy);
    color: var(--mh-cream);
    outline: none;
}

.mh-nav__mobile-toggle-icon {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 14px;
}

.mh-nav__mobile-toggle-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--mh-transition-fast), opacity var(--mh-transition-fast), top var(--mh-transition-fast);
}

.mh-nav__mobile-toggle-icon span:nth-child(1) { top: 0; }
.mh-nav__mobile-toggle-icon span:nth-child(2) { top: 6px; }
.mh-nav__mobile-toggle-icon span:nth-child(3) { top: 12px; }

/* Burger → croix quand le menu est ouvert */
.mh-header--open .mh-nav__mobile-toggle-icon span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.mh-header--open .mh-nav__mobile-toggle-icon span:nth-child(2) {
    opacity: 0;
}

.mh-header--open .mh-nav__mobile-toggle-icon span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

.mh-header--open .mh-nav__mobile-toggle {
    background: var(--mh-burgundy);
    color: var(--mh-cream);
}

/* Bouton mobile cache a partir du breakpoint desktop (1024px, pas 768) */
@media (min-width: 1024px) {
    .mh-nav__mobile-toggle {
        display: none;
    }
}

/* Sticky header doit etre relative pour positionnement absolu du menu mobile */
.mh-header {
    position: sticky;
}

/* Mobile (< 1024px) : header bar = brand a gauche + bouton burger a droite */
@media (max-width: 1023.98px) {
    .mh-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--mh-space-4);
    }

    /* Cache les 2 navs desktop en mobile (remplacees par .mh-mobile-menu) */
    .mh-header__inner > .mh-nav {
        display: none;
    }
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.mh-footer {
    /* Pattern décoratif tuiles vertes/roses au top (Mask group livré Valentina)
       + bg burgundy en dessous (maquette Figma : fond cerise + logo cream centré)
       margin-top 150px : laisse de la place au bonhomme illustration-02 du bloc
       CTA final pour qu'il "marche" jusque sur les festons du footer. */
    background:
        url("../images/decorations/footer-tile-9EKhJuP.webp") left top / auto 130px repeat-x,
        var(--mh-burgundy);
    color: var(--mh-cream);
    padding: 150px 0 var(--mh-space-6);
    margin-top: 150px;
    position: relative;
}

/* Nav répétée tout en haut (cf. maquette) */
.mh-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mh-space-4) var(--mh-space-6);
    justify-content: center;
    padding-bottom: var(--mh-space-8);
    margin-bottom: var(--mh-space-12);
}

.mh-footer__nav a {
    color: var(--mh-cream);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--mh-text-sm);
    padding: var(--mh-space-2) 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.mh-footer__nav a:hover {
    color: var(--mh-pink-soft);
}

.mh-footer__inner {
    display: grid;
    gap: var(--mh-space-8);
    grid-template-columns: 1fr;
    align-items: center;
    margin-bottom: var(--mh-space-10);
}

@media (min-width: 768px) {
    .mh-footer__inner {
        grid-template-columns: 1fr auto 1fr;
        gap: var(--mh-space-12);
    }
}

/* Mobile : un peu d'air sous le bloc contact (icônes réseaux) avant le trait des mentions */
@media (max-width: 767px) {
    .mh-footer__inner {
        margin-bottom: 20px;
    }
}

.mh-footer__address {
    font-size: var(--mh-text-sm);
    line-height: 1.6;
}

.mh-footer__address p {
    margin: 0 0 var(--mh-space-3);
}

.mh-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-4);
    font-size: var(--mh-text-sm);
    line-height: 1.6;
    text-align: center; /* mobile : centré (pas d'espace vide à droite) */
    align-items: center;
}

@media (min-width: 768px) {
    .mh-footer__contact {
        align-items: flex-end;
        text-align: right;
    }
}

.mh-footer__contact p {
    margin: 0;
}

.mh-footer a {
    color: var(--mh-cream);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.mh-footer a:hover {
    border-bottom-color: var(--mh-cream);
}

.mh-footer__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 var(--mh-space-6);
}

.mh-footer__logo img {
    width: clamp(140px, 18vw, 150px);
    height: auto;
    /* Logo secondaire-cream.svg : fill natif cream sur fond burgundy → contraste OK */
}

.mh-footer__social {
    display: flex;
    gap: var(--mh-space-3);
    justify-content: center; /* mobile : icônes centrées */
}

@media (min-width: 768px) {
    .mh-footer__social {
        justify-content: flex-end;
    }
}

.mh-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 249, 244, 0.4);
    border-radius: 6px;
    color: var(--mh-cream);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mh-footer__social a:hover {
    background: rgba(255, 249, 244, 0.12);
    border-color: var(--mh-cream);
    border-bottom-color: var(--mh-cream); /* override la regle generale */
}

.mh-footer__bottom {
    border-top: 1px solid rgba(255, 249, 244, 0.18);
    padding-top: var(--mh-space-6);
    margin-top: 0;
    font-size: var(--mh-text-sm);
    text-align: center;
    color: rgba(255, 249, 244, 0.75);
}

.mh-footer__bottom a {
    color: inherit;
}

/* ─── Buttons / CTAs ────────────────────────────────────────────────────── */

.mh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mh-space-2);
    padding: var(--mh-space-2) var(--mh-space-8);
    font-family: var(--mh-font-body); /* Sofia Pro - maquette utilise ExtraBold 800,
                                         on a Bold 700 self-host (Light/ExtraBold à demander Valentina) */
    font-size: var(--mh-text-md); /* 18px - maquette Sofia 800/18 */
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--mh-radius-full);
    border: 3px solid transparent;
    cursor: pointer;
    hyphens: manual; /* retours à la ligne au mot, jamais de césure "gra-tuit" */
    -webkit-hyphens: manual;
    transition:
        background var(--mh-transition-fast),
        color var(--mh-transition-fast),
        border-color var(--mh-transition-fast),
        transform var(--mh-transition-fast);
    min-height: 40px; /* boutons plus compacts (préférence fondatrices) - reste > 24px WCAG AA 2.5.8 */
}

.mh-btn:active {
    transform: translateY(1px);
}

/* Primary pill (cf. components maquette Valentina : burgundy bg + pink-soft text,
   hover cream bg + burgundy border + burgundy text) */
.mh-btn--primary {
    background: var(--mh-burgundy);
    color: var(--mh-pink-soft);
    border-color: var(--mh-ink); /* contour noir autour du bouton */
}

.mh-btn--primary:hover {
    background: var(--mh-cream);
    color: var(--mh-burgundy);
    border-color: var(--mh-ink); /* contour noir autour du bouton */
}

/* Ghost pill (alternative : déjà cream + burgundy border, hover invert).
   Utilisé sur pages coaching + merci. La home utilise --primary partout (pill burgundy filled). */
.mh-btn--ghost {
    background: transparent;
    color: var(--mh-burgundy);
    border-color: var(--mh-burgundy);
}

.mh-btn--ghost:hover {
    background: var(--mh-burgundy);
    color: var(--mh-pink-soft);
}

/* Pill de statut non cliquable (ex: "Disponible dès le mois d'octobre") */
.mh-btn--disabled {
    background: var(--mh-sage);
    color: var(--mh-ink);
    border-color: var(--mh-ink);
    cursor: default;
    pointer-events: none;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.mh-hero {
    padding: var(--mh-space-16) 0;
    position: relative;
    overflow: hidden;
}

.mh-hero__motif {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    pointer-events: none;
    opacity: 0.9;
    display: none;
}

.mh-hero__motif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mh-hero__motif--left { left: 0; }
.mh-hero__motif--right { right: 0; transform: scaleX(-1); }

@media (min-width: 1024px) {
    .mh-hero__motif { display: block; }
}

/* Variant : hero asymétrique (texte gauche + illustration droite) */
.mh-hero__inner {
    display: grid;
    gap: var(--mh-space-12);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .mh-hero__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--mh-space-16);
    }
}

/* Variant : hero centré (cf. maquette Valentina home) */
.mh-hero--centered { text-align: center; }

.mh-hero__centered {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mh-hero__centered .mh-hero__eyebrow,
.mh-hero__centered .mh-hero__title,
.mh-hero__centered .mh-hero__subtitle {
    text-align: center;
}

.mh-hero__centered .mh-hero__title {
    max-width: 100%;
}

.mh-hero__centered .mh-hero__subtitle {
    margin: 0 auto var(--mh-space-8);
}

.mh-hero__centered .mh-hero__illustration {
    margin: var(--mh-space-8) auto 0;
    background: transparent;
    padding: 0;
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    position: relative;
    display: block;
}

.mh-hero__centered .mh-hero__illustration--with-motif {
    /* Conteneur full-width pour permettre à la bande motif de traverser */
    overflow: visible;
}

/* Bande horizontale motif rayé rouge derrière l'illustration (cf. maquette).
   Enfant direct de .mh-hero (full-width section), donc left/right 0 = bord à
   bord du viewport. <img> en object-fit: cover préserve le look maquette
   (un seul SVG zoomé pour remplir, pas tuilé). */
.mh-hero__motif-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    height: 250px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: url("../images/motifs/motif-rideaux-tile-ZGuYJth.webp") left center / auto 100% repeat-x;
}

/* L'illustration centrale par-dessus la bande motif (override .mh-hero__illustration img) */
.mh-hero__centered .mh-hero__illustration-img {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 340px;
    max-height: none;
}

/* Tagline lisible 26px casse normale + tracking moyen (maquette Sofia 500 26/ls+2.6).
   Fluid scaling pour mobile : 14px min, 25px max (maquette). */
.mh-hero__eyebrow {
    font-family: var(--mh-font-body);
    font-size: clamp(0.875rem, 2vw + 0.5rem, var(--mh-text-xl));
    font-weight: 500;
    color: var(--mh-ink);
    letter-spacing: var(--mh-tracking-mid);
    margin-bottom: var(--mh-space-4);
    text-transform: none;
}

/* Hero H1 : utilise le style global h1 (clamp fluid jusqu'à 90px, Dilbero 300, ls tight).
   On garde la classe pour spacing context-specific. */
.mh-hero__title {
    color: var(--mh-ink);
    margin-bottom: var(--mh-space-6);
}

.mh-hero__subtitle {
    font-size: var(--mh-text-md); /* 18px - maquette Sofia 300/18, Light absente → fallback Regular */
    font-weight: 400;
    color: var(--mh-ink);
    margin-bottom: var(--mh-space-8);
    max-width: 50ch;
}

.mh-hero__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--mh-pink-soft);
    border-radius: var(--mh-radius-xl);
    padding: var(--mh-space-6);
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.mh-hero__illustration img,
.mh-hero__illustration svg {
    max-width: 85%;
    max-height: 85%;
}

/* ─── Utility classes (modificateurs réutilisables) ─────────────────────── */

.mh-text-center { text-align: center; }
.mh-text-left   { text-align: left; }
.mh-text-italic { font-style: italic; }
.mh-mt-8        { margin-top: var(--mh-space-8) !important; }
.mh-mt-12       { margin-top: var(--mh-space-12) !important; }

.mh-section--cream { background: var(--mh-cream); }
.mh-section--ink   { background: var(--mh-ink); color: var(--mh-cream); }

/* ─── Bandes pleine largeur (burgundy, sage, sky, ink) ──────────────────── */

.mh-band {
    padding: var(--mh-space-16) 0;
}

.mh-band--line-top {
    border-top: 3px solid var(--mh-ink); /* ligne noire au-dessus de la bande, même style que le menu top */
}

.mh-band--burgundy {
    background: var(--mh-burgundy);
    color: var(--mh-cream);
}

.mh-band--burgundy h2,
.mh-band--burgundy h3 {
    color: var(--mh-cream);
}

/* Bandes sage + sky : bg color uni + festons en tile SVG répété horizontalement
   à taille FIXE (90x40px). Indépendant du viewport - les festons gardent
   toujours la même taille en pixels. Pas de borders CSS sides.
   Padding-top sage / bottom sky = 40px (= festons height) pour caler le texte
   sur le bas/haut des festons. */
.mh-band--sage,
.mh-band--sky {
    position: relative;
}

.mh-band--sage {
    padding: 40px 0 var(--mh-space-8);
    margin-top: var(--mh-space-12);
    color: var(--mh-ink);
    /* No bg-color : parent cream visible au-dessus des festons. Le ::before
       porte à la fois le strip festons en haut et la couleur sage du body.
       Texte ink (pas cream) : cream/sage = 2.47 (FAIL WCAG AA), ink/sage = 6.89 (AA). */
}

.mh-band--sage h2,
.mh-band--sage h3 {
    color: var(--mh-burgundy);
}

.mh-band--sky {
    padding: var(--mh-space-16) 0 calc(40px + var(--mh-space-12));
    color: var(--mh-ink);
    /* No bg-color : parent cream visible sous les festons.
       Pas de height fixe : le contenu (h2 + paragraphes + CTA) doit pouvoir
       respirer sans dépasser sur les festons du bas. */
}

.mh-band--sky h2,
.mh-band--sky h3 {
    color: var(--mh-ink);
}

/* ::before : porte le bg-color du body + le strip festons en haut/bas.
   Strip festons compressé à 40px (au lieu de 55) pour matcher le padding.
   Au-dessus du ::before (sage) ou en-dessous (sky), c'est le parent cream
   qui est visible. */
.mh-band--sage::before,
.mh-band--sky::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    background-size: 60px 40px;
    background-repeat: repeat-x;
}

.mh-band--sky::before {
    top: 0;
    bottom: 0;
    background-color: var(--mh-sky);
    background-image: url("../images/decorations/festons-tile-sky-8BHyYnj.svg");
    background-position: left bottom;
}

.mh-band--sage::before {
    top: 0;
    bottom: 0;
    background-color: var(--mh-sage);
    background-image: url("../images/decorations/festons-tile-sage-3hZfweB.svg");
    background-position: left top;
}

/* Lift content above the decorative ::before */
.mh-band--sky > *,
.mh-band--sage > * {
    position: relative;
    z-index: 1;
}

/* ─── Bande 3 colonnes (différenciateurs burgundy) ──────────────────────── */

.mh-band__grid {
    display: grid;
    gap: var(--mh-space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mh-band__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--mh-space-12);
    }
}

.mh-band__item {
    text-align: center;
}

.mh-band__icon {
    width: 96px;        /* maquette : icônes 117-152px sur viewport 1728 - rétro-scalées ~96-112px sur container 1200 */
    height: 96px;
    margin: 0 auto var(--mh-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-band__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Icônes Maison_Horizon_Icone_*.svg sont polychromes par design Valentina
       (cream + pink-soft + sky + sage + ink) - on les laisse en couleur sur burgundy. */
}

.mh-band__item h3 {
    font-size: clamp(1.25rem, 2.5vw + 0.5rem, var(--mh-text-2xl));
    line-height: 1.2;
    margin-bottom: var(--mh-space-3);
    /* réserve 2 lignes pour que les sous-textes des 3 colonnes s'alignent
       sur une même ligne de base (retour Johanna) */
    min-height: 2.4em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mh-band__item p {
    font-size: clamp(1rem, 1.5vw + 0.5rem, var(--mh-text-lg));
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    opacity: 0.92;
    text-align: justify;
    text-align-last: center;
}

/* Mobile : sur colonne étroite le justifié + césure auto coupent les mots et
   créent de gros écarts. On passe en centré sans césure → retours à la ligne
   propres au mot. */
@media (max-width: 767px) {
    .mh-band__item p {
        text-align: center;
        text-align-last: center;
        hyphens: manual;
        -webkit-hyphens: manual;
    }
}

/* ─── Two-col (title left + content right) ──────────────────────────────── */

.mh-two-col {
    display: grid;
    gap: var(--mh-space-8);
    grid-template-columns: 1fr;
    margin-bottom: var(--mh-space-16);
}

@media (min-width: 768px) {
    .mh-two-col {
        grid-template-columns: 1fr 1.4fr;
        gap: var(--mh-space-12);
        align-items: start;
    }
}

/* .mh-h-large : alias du style h2 global (Dilbero 300 clamp jusqu'à 65px). Gardé
   pour les cas où on veut le rendu H2 sans la sémantique. */
.mh-h-large {
    font-size: clamp(2rem, 5vw + 0.5rem, var(--mh-text-5xl));
    font-weight: 300;
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-4);
    line-height: 1.05;
    letter-spacing: var(--mh-tracking-tight);
}

/* .mh-eyebrow : label discret au-dessus d'un titre (ex: "✦ Bienvenue chez").
   Distinct du Hero eyebrow plus large. */
.mh-eyebrow {
    font-size: var(--mh-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--mh-tracking-wide);
    color: var(--mh-burgundy);
    margin-bottom: var(--mh-space-2);
    font-weight: 600;
}

/* .mh-welcome-head : étoile décorative + titre "Bienvenue chez Maison Horizon"
   alignés en ligne, façon maquette Concept 01. */
.mh-welcome-head {
    display: flex;
    align-items: flex-start; /* étoile calée sur le haut du titre, pas centrée */
    gap: var(--mh-space-4);
}

.mh-welcome-head__sparkle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: block;
}

.mh-welcome-head__title {
    margin: 0;
}

.mh-prose-block p {
    font-size: var(--mh-text-lg); /* corps agrandi (retour Johanna : il y a de la place) */
    line-height: 1.7;
}

/* ─── Programmes list (5 rangées avec flèche) ───────────────────────────── */

.mh-programmes-list__amorce {
    margin: var(--mh-space-8) 0 var(--mh-space-4);
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-lg);
    color: var(--mh-burgundy);
}

.mh-programmes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 3px solid var(--mh-ink); /* séparation même style que la bordure du menu top */
}

.mh-programmes-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--mh-space-4);
    align-items: center;
    padding: var(--mh-space-6) 0;
    border-bottom: 3px solid var(--mh-ink); /* séparation même style que la bordure du menu top */
    grid-template-areas:
        "title arrow"
        "desc desc";
}

@media (min-width: 768px) {
    .mh-programmes-list li {
        grid-template-columns: 280px 1fr auto;
        gap: var(--mh-space-8);
        padding: var(--mh-space-8) 0;
        grid-template-areas: "title desc arrow";
    }
}

.mh-programmes-list__title {
    grid-area: title;
    /* Sofia Pro (body font) - maquette différencie volontairement le titre liste
       du H2 Dilbero pour créer une hiérarchie sans-serif/serif.
       Clamp pour scaling responsive 18px (mobile) -> 30px (desktop). */
    font-family: var(--mh-font-body);
    color: var(--mh-burgundy);
    font-size: clamp(1.125rem, 2vw + 0.5rem, var(--mh-text-2xl));
    font-weight: 500;
    line-height: 1.4;
}

.mh-programmes-list__desc {
    grid-area: desc;
    margin: 0;
    color: var(--mh-ink);
    opacity: 0.9;
    font-size: var(--mh-text-md); /* corps agrandi (retour Johanna : il y a de la place) */
    line-height: 1.6;
}

/* Arrow circle (cf. Group 7 maquette : pink-soft circle + ink border + ink arrow) */
.mh-programmes-list__arrow {
    grid-area: arrow;
    width: 56px;
    height: 56px;
    border-radius: var(--mh-radius-full);
    background: var(--mh-pink-soft);
    color: var(--mh-ink);
    border: 3px solid var(--mh-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mh-text-xl);
    text-decoration: none;
    transition: transform var(--mh-transition-fast), background var(--mh-transition-fast);
}

.mh-programmes-list__arrow:hover {
    transform: translateX(4px);
    background: var(--mh-burgundy);
    color: var(--mh-pink-soft);
    border-color: var(--mh-burgundy);
}

/* ─── Petit à petit - title + benefits + illustration right (cf. maquette) ── */

.mh-petit-petit {
    display: grid;
    gap: var(--mh-space-8);
    grid-template-columns: 1fr;
    align-items: center;
}

/* Desktop : maquette Valentina — titre + cartes empilés à gauche, grand crayon
   à droite sur toute la hauteur, ses pointes descendant jusqu'à la frontière
   beige/bleu. */
@media (min-width: 1024px) {
    .mh-petit-petit {
        grid-template-columns: 1.25fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "title illus"
            "benefits illus";
        gap: var(--mh-space-8) var(--mh-space-12);
        align-items: start;
    }

    .mh-petit-petit__title { grid-area: title; }
    .mh-benefits { grid-area: benefits; }
    .mh-petit-petit__illustration { grid-area: illus; }
}

.mh-petit-petit__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop : le crayon s'ancre en bas et déborde légèrement pour que ses pointes
   touchent la ligne noire de séparation beige/bleu (set-up maquette Valentina).
   z-index élevé pour passer au-dessus de la bande bleue et de la ligne. */
@media (min-width: 1024px) {
    .mh-petit-petit__illustration {
        align-self: end;
        align-items: flex-end;
        justify-content: flex-end; /* crayon aligné à droite, sous le bouton "Mon Espace" du menu */
        position: relative;
        z-index: 2;
        margin-bottom: -64px;
    }
}

.mh-petit-petit__illustration img {
    max-width: 280px;
    width: 100%;
    height: auto;
}

@media (min-width: 1024px) {
    .mh-petit-petit__illustration img {
        max-width: 270px; /* taille du crayon en desktop */
    }
}

/* Nuages décoratifs (maquette Valentina) : en haut de la scène, derrière le
   personnage. Composition desktop uniquement. */
.mh-petit-petit__clouds {
    display: none;
}

@media (min-width: 1024px) {
    .mh-petit-petit__illustration img:not(.mh-petit-petit__clouds) {
        position: relative;
        z-index: 2; /* personnage au-dessus des nuages */
        transform: translateY(19px); /* crayon descendu (nuages inchangés) */
    }

    .mh-petit-petit__illustration .mh-petit-petit__clouds {
        display: block;
        position: absolute;
        top: -56px;
        left: 48px;
        width: 280px;
        max-width: 280px;
        height: auto;
        z-index: 1;
        pointer-events: none;
    }
}

/* ─── Benefits (parents / élèves) ───────────────────────────────────────── */

.mh-benefits {
    display: grid;
    gap: var(--mh-space-6);
    grid-template-columns: 1fr;
    align-items: stretch; /* cards meme hauteur (la plus grande des deux) */
}

@media (min-width: 640px) {
    .mh-benefits {
        grid-template-columns: 1fr 1fr;
    }
}

.mh-benefits__col {
    padding: var(--mh-space-6);
    border-radius: var(--mh-radius-xl);
    background: var(--mh-cream);
    border: 3px solid var(--mh-ink); /* cadre noir même style que la bordure du menu top */
}

.mh-benefits__col h3 {
    margin: 0 0 var(--mh-space-4);
    font-size: var(--mh-text-xl); /* 25px - harmonisé F4 design-review (était text-lg 20px) */
    color: var(--mh-ink);
    line-height: 1.2; /* titres sur 2 lignes via <br> dans le markup → alignement identique des deux cards */
}

.mh-benefits__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mh-benefits__col li {
    /* min-height reserve 2 lignes : aligne les items 1-a-1 entre les 2 cards
       meme si l'un d'eux ("Moins de tensions a la maison") wrap sur 2 lignes */
    padding: var(--mh-space-3) 0;
    line-height: 1.5;
    min-height: calc(2 * 1.5em + var(--mh-space-3) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 3px solid var(--mh-ink); /* séparation même style que la bordure du menu top */
}

.mh-benefits__col li:last-child {
    border-bottom: none;
}

/* ─── Teaser (centré) ───────────────────────────────────────────────────── */

.mh-teaser {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.mh-teaser h2 {
    margin-bottom: var(--mh-space-6); /* size/weight/lh hérités du style global h2 */
}

.mh-teaser p {
    margin-bottom: var(--mh-space-4);
    font-size: var(--mh-text-base);
    line-height: 1.7;
    text-align: justify;
    text-align-last: center;
}

.mh-teaser .mh-btn {
    margin-top: var(--mh-space-6);
}

/* Hover bleu ciel uniquement pour le bouton "Nos programmes" de la bande bleue */
.mh-teaser .mh-btn--primary:hover {
    background: var(--mh-sky); /* bleu ciel #D0E5F3 au survol */
    color: var(--mh-burgundy);
    border-color: var(--mh-ink);
}

/* ─── Teaser split (texte + illustration côte à côte) ───────────────────── */

.mh-teaser-split {
    display: grid;
    gap: var(--mh-space-12);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 768px) {
    .mh-teaser-split {
        grid-template-columns: 1.2fr 1fr;
    }
}

.mh-teaser-split--reverse .mh-teaser-split__visual { order: -1; }

@media (min-width: 768px) {
    .mh-teaser-split--reverse {
        grid-template-columns: 1fr 1.2fr;
    }
}

.mh-teaser-split__text h2 {
    margin-bottom: var(--mh-space-6); /* size/weight/lh hérités du style global h2 */
}

.mh-teaser-split__text .mh-btn {
    margin-top: var(--mh-space-8); /* espace entre le dernier paragraphe et le CTA */
}

.mh-teaser-split__visual {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile : pas de carré 1:1 (créait un grand vide autour de l'illustration) :
   le bloc se cale sur la hauteur naturelle de l'image. */
@media (max-width: 767px) {
    .mh-teaser-split__visual {
        aspect-ratio: auto;
    }
    .mh-teaser-split__visual .mh-teaser-cloud,
    .mh-teaser-split__visual .mh-teaser-globe {
        max-width: 62%;
        max-height: none;
        margin-left: auto;
        margin-right: auto;
    }
}

.mh-teaser-split__visual img {
    max-width: 100%;
    max-height: 100%;
}

/* Nuage (Icone_13) un peu réduit dans son bloc visuel, calé à droite */
.mh-teaser-split__visual .mh-teaser-cloud {
    max-width: 78%;
    max-height: 78%;
    margin-left: auto; /* calé à droite du bloc */
}

/* Globe (Icone_06) : taille modérée, calé à gauche */
.mh-teaser-split__visual .mh-teaser-globe {
    max-width: 72%;
    max-height: 72%;
    margin-right: auto; /* calé à gauche du bloc */
}

/* Mobile : on masque le globe de "Et en plus de tout cela ?" pour éviter
   deux illustrations qui se suivent (nuage coaching + globe) - retour Johanna. */
@media (max-width: 767px) {
    .mh-teaser-split__visual:has(.mh-teaser-globe) {
        display: none;
    }
}

/* ─── Coworking (bande sage avec personnage en overflow par-dessus le bord top) ─ */

.mh-band--with-figure {
    /* Permet à l'illustration de déborder visuellement au-dessus de la bande */
    overflow: visible;
}

.mh-coworking {
    display: grid;
    gap: var(--mh-space-16);
    grid-template-columns: 1fr;
    padding: 0 var(--mh-space-4);
}

.mh-coworking__figure {
    align-self: end;
}

.mh-coworking__text {
    align-self: start;
    padding-right: var(--mh-space-4);
}

@media (min-width: 768px) {
    .mh-coworking {
        grid-template-columns: 1fr 1.2fr;
    }
}

.mh-coworking__figure {
    /* Translate vers le haut pour que le personnage dépasse les festons + bord supérieur de la bande sage */
    margin-top: -160px;
    margin-bottom: calc(var(--mh-space-8) * -1);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.mh-coworking__figure img {
    max-width: 380px;
    width: 100%;
    height: auto;
    margin-bottom: 35px;
}

.mh-coworking__text {
    color: var(--mh-cream);
}

.mh-coworking__text h2 {
    color: var(--mh-cream);
}

.mh-coworking__text p {
    color: var(--mh-cream);
}

/* ─── Hero editorial /a-propos : citation pleine largeur + prose intro decalee ── */
/* Refonte direction C post-critique 2026-06-10 : placeholder photo retire (signal
   "en construction" pour V1 pre-ouverture). La citation Dilbero porte le hero
   seule, composition asymetrique avec prose intro decalee a droite. */

.mh-about-hero {
    max-width: 1200px;
    margin: 0 auto;
}

.mh-about-hero__eyebrow {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-sm);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mh-burgundy);
    margin: 0 0 var(--mh-space-6);
}

/* Header grid : citation gauche + icone Valentina droite (Icone_02 sablier en
   pendant graphique post-critique 2026-06-10, comble le desequilibre asymetrique
   sans recreer un placeholder gris). Pile en mobile. */
.mh-about-hero__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mh-space-8);
    align-items: center;
    margin-bottom: var(--mh-space-12);
}

@media (min-width: 768px) {
    .mh-about-hero__header {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--mh-space-16);
    }
}

.mh-about-hero__quote {
    font-family: var(--mh-font-display);
    font-size: clamp(2.25rem, 5vw + 0.5rem, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: var(--mh-tracking-tight);
    color: var(--mh-ink);
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
}

.mh-about-hero__visual {
    margin: 0;
    width: 100%;
    max-width: 320px;
    justify-self: start;
}

@media (min-width: 768px) {
    .mh-about-hero__visual {
        max-width: 480px;
        justify-self: end;
    }
}

.mh-about-hero__visual img {
    width: 100%;
    height: auto;
    display: block;
}

.mh-about-hero__intro {
    max-width: 60ch;
    margin-left: auto;
}

.mh-about-hero__intro p {
    font-size: var(--mh-text-base);
    line-height: 1.7;
    margin: 0 0 var(--mh-space-4);
}

.mh-about-hero__intro p:last-child {
    margin-bottom: 0;
}

/* ─── Final CTA ─────────────────────────────────────────────────────────── */

/* Final CTA : festons en HAUT (au lieu d'en bas comme les autres bandes sky).
   Utilise un SVG dédié sky-top (mêmes ponts que sage mais couleur sky). */
.mh-band--final-cta {
    padding: var(--mh-space-16) 0 var(--mh-space-12);
    border-bottom: 3px solid var(--mh-ink); /* ligne noire sous la bande bleue, même style que le menu top */
}

.mh-band--final-cta::before {
    top: 0;
    bottom: 0;
    background-image: url("../images/decorations/festons-tile-sky-top-4Rme28F.svg");
    background-position: left top;
}

.mh-final-cta {
    display: grid;
    gap: var(--mh-space-12);
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .mh-final-cta {
        grid-template-columns: 1.4fr 1fr;
        text-align: left;
    }
}

.mh-final-cta h2 {
    margin-bottom: var(--mh-space-4); /* size/weight/lh hérités du style global h2 */
}

.mh-final-cta__subtitle {
    font-size: var(--mh-text-xl);
    color: var(--mh-ink);
    font-style: italic;
    margin-bottom: var(--mh-space-12);
}

.mh-final-cta__illustration {
    max-width: 340px;
    margin: 0 auto;
    margin-bottom: -200px; /* descend le personnage pour qu'il touche la ligne du footer */
    width: 100%;
    align-self: end;
    position: relative;
    z-index: 2;
}

.mh-final-cta__illustration img {
    width: 100%;
    height: auto;
}

/* ─── Cards programmes ──────────────────────────────────────────────────── */

.mh-cards {
    display: grid;
    gap: var(--mh-space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .mh-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mh-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mh-card {
    padding: var(--mh-space-6);
    border-radius: var(--mh-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-4);
    transition: transform var(--mh-transition-base);
}

.mh-card:hover {
    transform: translateY(-2px);
}

.mh-card ul,
.mh-card ol {
    margin: 0;
    padding-left: var(--mh-space-6); /* 24px au lieu du 40px navigateur par defaut */
}

.mh-card li {
    margin-bottom: var(--mh-space-1);
}

.mh-card h2,
.mh-card h3 {
    margin: 0;
    color: var(--mh-ink);
    font-size: var(--mh-text-2xl);
}

.mh-card p {
    margin: 0;
    color: var(--mh-ink);
    flex: 1;
    text-align-last: center; /* justifié avec dernière ligne centrée (text-align: justify hérité du global p) */
}

.mh-card__link {
    color: var(--mh-burgundy);
    font-weight: 600;
    text-decoration: underline;
}

/* Couleurs cartes par programme (mapping binding design doc 1.5)
   Note a11y : texte ink sur fond sage = ratio 6.89 (AA OK).
   Cream sur sage = 2.47 (FAIL WCAG AA), donc on garde ink. */
.mh-card--sky        { background: var(--mh-sky); }
.mh-card--sage       { background: var(--mh-sage); color: var(--mh-ink); }
.mh-card--sage h2,
.mh-card--sage h3,
.mh-card--sage p     { color: var(--mh-ink); }
.mh-card--sage .mh-card__link { color: var(--mh-burgundy); }
.mh-card--pink-soft  { background: var(--mh-pink-soft); }
.mh-card--burgundy   { background: var(--mh-burgundy); color: var(--mh-cream); }
.mh-card--burgundy h3,
.mh-card--burgundy p { color: var(--mh-cream); }
.mh-card--burgundy .mh-card__link { color: var(--mh-cream); }
.mh-card--cream      { background: var(--mh-cream); border: 3px solid var(--mh-ink); }

/* Card dominante (wedge hierarchy : soutien scolaire) */
.mh-card--dominant {
    grid-column: 1 / -1;
    padding: var(--mh-space-12);
}

.mh-card--dominant h3 {
    font-size: var(--mh-text-3xl);
}

@media (min-width: 1024px) {
    .mh-card--dominant {
        grid-column: span 2;
    }
}

/* ─── Reassurance / Fondatrices ─────────────────────────────────────────── */

.mh-founders {
    display: grid;
    gap: var(--mh-space-8);
    grid-template-columns: 1fr;
    text-align: center;
}

@media (min-width: 768px) {
    .mh-founders {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mh-founder__avatar {
    width: 128px;
    height: 128px;
    border-radius: var(--mh-radius-full);
    margin: 0 auto var(--mh-space-4);
    background: var(--mh-pink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mh-font-display);
    color: var(--mh-burgundy);
    font-size: var(--mh-text-3xl);
    font-weight: 600;
}

.mh-founder__name {
    font-family: var(--mh-font-display);
    color: var(--mh-burgundy);
    font-size: var(--mh-text-xl);
    margin-bottom: var(--mh-space-1);
    display: block;
}

.mh-founder__role {
    color: var(--mh-ink);
    font-size: var(--mh-text-sm);
}

/* ─── Section headings ──────────────────────────────────────────────────── */

.mh-section__heading {
    text-align: center;
    margin-bottom: var(--mh-space-12);
}

.mh-section__heading h2 {
    margin-bottom: var(--mh-space-3);
}

.mh-section__heading p {
    color: var(--mh-ink);
    max-width: 60ch;
    margin: 0 auto;
    text-align: justify;
    text-align-last: center;
}

/* ─── Prose (content rich pages: a-propos, faq, mentions) ───────────────── */

.mh-prose {
    /* Largeur uniforme = largeur du container (1200px max).
       Pas de contrainte sur <p> internes pour rester aligne avec /coworking /coaching. */
    max-width: 100%;
    margin: 0 auto;
}

/* Variante --wide : conservee pour compat, identique au default desormais */
.mh-prose--wide {
    max-width: 100%;
}

.mh-prose h2 {
    margin-top: var(--mh-space-12);
    font-size: var(--mh-text-2xl);
}

.mh-prose h3 {
    margin-top: var(--mh-space-8);
    font-size: var(--mh-text-xl);
}

.mh-prose ul, .mh-prose ol {
    margin: 0 0 var(--mh-space-4);
    padding-left: var(--mh-space-6);
}

.mh-prose li {
    margin-bottom: var(--mh-space-2);
}

.mh-prose dt {
    font-weight: 600;
    margin-top: var(--mh-space-4);
    color: var(--mh-burgundy);
}

.mh-prose dd {
    margin-left: 0;
    margin-bottom: var(--mh-space-4);
}

/* ─── Ateliers & conférences (texte + globe) ───────────────────────────── */

.mh-ateliers__grid {
    display: grid;
    gap: var(--mh-space-8);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 768px) {
    .mh-ateliers__grid {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--mh-space-12);
    }
}

.mh-ateliers__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-ateliers__visual img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

/* Globe masqué en mobile (retour Johanna) */
@media (max-width: 767px) {
    .mh-ateliers__visual {
        display: none;
    }
}

/* Textes agrandis sur la page ateliers (retour Johanna) */
.mh-ateliers p {
    font-size: var(--mh-text-lg);
    line-height: 1.7;
}

/* Plus d'espace entre la fin du texte et le bouton "Je m'inscris" */
.mh-ateliers .mh-ateliers__cta {
    margin-top: var(--mh-space-10);
}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */

.mh-faq {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    gap: var(--mh-space-4);
}

.mh-faq details {
    background: var(--mh-cream);
    border: 1px solid rgba(34, 21, 13, 0.12);
    border-radius: var(--mh-radius-md);
    padding: var(--mh-space-4) var(--mh-space-6);
}

.mh-faq summary {
    font-family: var(--mh-font-display);
    color: var(--mh-burgundy);
    font-size: var(--mh-text-lg);
    cursor: pointer;
    list-style: none;
    padding: var(--mh-space-2) 0;
}

.mh-faq summary::-webkit-details-marker {
    display: none;
}

.mh-faq summary::after {
    content: '+';
    float: right;
    color: var(--mh-burgundy);
    transition: transform var(--mh-transition-fast);
    font-weight: 300;
    font-size: var(--mh-text-xl);
}

.mh-faq details[open] summary::after {
    content: '−';
}

.mh-faq details p {
    margin: var(--mh-space-3) 0 var(--mh-space-2);
    color: var(--mh-ink);
}

/* ─── Alerts (Phase 1 reuse) ────────────────────────────────────────────── */

.alert {
    padding: var(--mh-space-4) var(--mh-space-6);
    border-radius: var(--mh-radius-md);
    margin-bottom: var(--mh-space-6);
}

.alert--error {
    background: rgba(100, 19, 23, 0.08);
    border-left: 4px solid var(--mh-burgundy);
    color: var(--mh-burgundy);
}

.alert--info {
    background: rgba(208, 229, 243, 0.5);
    border-left: 4px solid var(--mh-sky);
    color: var(--mh-ink);
}

/* ─── Forms (login + 2FA + future inquiry forms) ────────────────────────── */

/* Page wrapper : centre verticalement le contenu */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mh-space-8) var(--mh-space-4);
    background: var(--mh-cream);
}

/* Logo en dehors de la card */
.admin-login__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 0 var(--mh-space-8);
    text-decoration: none;
}

.admin-login__logo img {
    width: clamp(180px, 60%, 240px);
    height: auto;
}

.admin-login {
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: var(--mh-space-8);
    background: #ffffff;
    border: 3px solid var(--mh-ink); /* contour noir cohérent + sans ombre */
    border-radius: var(--mh-radius-lg);
}

.admin-login__header {
    text-align: center;
    margin-bottom: var(--mh-space-8);
}

.admin-login h1 {
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-3xl);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: var(--mh-tracking-tight);
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-2);
    text-align: center;
}

.admin-login__subtitle {
    font-size: var(--mh-text-sm);
    color: rgba(34, 21, 13, 0.7);
    margin: 0;
}

.admin-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-4);
}

.admin-login__field {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-2);
}

.admin-login__field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mh-space-2);
}

.admin-login label {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-sm);
    font-weight: 600;
    color: var(--mh-ink);
    margin: 0;
}

.admin-login__forgot {
    font-size: var(--mh-text-sm);
    color: var(--mh-burgundy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--mh-transition-fast);
}

.admin-login__forgot:hover,
.admin-login__forgot:focus-visible {
    border-bottom-color: var(--mh-burgundy);
}

.admin-login input[type="email"],
.admin-login input[type="password"],
.admin-login input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--mh-space-3) var(--mh-space-4);
    border: 3px solid var(--mh-ink); /* bordure noire cohérente avec le reste */
    border-radius: var(--mh-radius-full); /* champs ronds (pill) */
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    background: var(--mh-cream);
    color: var(--mh-ink);
    min-height: var(--mh-touch-min);
    transition: border-color var(--mh-transition-fast), box-shadow var(--mh-transition-fast);
}

.admin-login input::placeholder {
    color: rgba(34, 21, 13, 0.4);
}

.admin-login input:focus-visible {
    outline: none;
    border-color: var(--mh-burgundy);
    box-shadow: var(--mh-focus-ring);
}

.admin-login__submit {
    margin-top: var(--mh-space-2);
    width: 100%;
    padding: var(--mh-space-2) var(--mh-space-6);
    background: var(--mh-burgundy);
    color: var(--mh-cream);
    border: 3px solid var(--mh-ink); /* contour noir comme les boutons du site */
    border-radius: var(--mh-radius-full);
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-md);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mh-transition-fast), border-color var(--mh-transition-fast);
    min-height: 40px; /* hauteur uniforme avec les autres boutons du site */
}

.admin-login__submit:hover,
.admin-login__submit:focus-visible {
    background: var(--mh-ink);
    border-color: var(--mh-ink);
    outline: none;
}

.admin-login__public-link {
    margin: var(--mh-space-8) 0 0;
    font-size: var(--mh-text-sm);
    text-align: center;
    color: rgba(34, 21, 13, 0.7);
}

.admin-login__public-link a {
    color: rgba(34, 21, 13, 0.7);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--mh-transition-fast), color var(--mh-transition-fast);
}

.admin-login__public-link a:hover,
.admin-login__public-link a:focus-visible {
    color: var(--mh-burgundy);
    border-bottom-color: var(--mh-burgundy);
    outline: none;
}

.admin-login figure {
    margin: var(--mh-space-6) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.admin-login figure img {
    margin: 0 auto;
    border-radius: var(--mh-radius-md);
}

.admin-login figcaption {
    font-size: var(--mh-text-sm);
    color: var(--mh-ink);
    margin-top: var(--mh-space-3);
}

.admin-login figcaption code {
    background: rgba(100, 19, 23, 0.06);
    padding: var(--mh-space-1) var(--mh-space-2);
    border-radius: var(--mh-radius-sm);
    font-family: var(--mh-font-mono);
    font-size: var(--mh-text-sm);
    color: var(--mh-burgundy);
}

.backup-codes {
    list-style: none;
    margin: var(--mh-space-6) 0;
    padding: var(--mh-space-4);
    background: var(--mh-sky);
    border-radius: var(--mh-radius-md);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mh-space-2);
}

.backup-codes code {
    font-family: var(--mh-font-mono);
    font-size: var(--mh-text-base);
    color: var(--mh-ink);
    text-align: center;
    display: block;
    padding: var(--mh-space-2);
    background: var(--mh-cream);
    border-radius: var(--mh-radius-sm);
}

/* ─── Form card (formulaire encadre type "post-it formel") ─────────────── */

.mh-form-card {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--mh-space-8) var(--mh-space-8) var(--mh-space-12);
    background: var(--mh-cream);
    border: 3px solid var(--mh-ink); /* contour noir même style que le menu top */
    border-radius: var(--mh-radius-lg);
}

@media (min-width: 768px) {
    .mh-form-card {
        padding: var(--mh-space-12);
    }
}

.mh-form-card h2 {
    margin-top: 0;
}

/* ─── Forms (thème Concept 01) ──────────────────────────────────────────── */

.mh-form {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-6);
    margin: var(--mh-space-4) 0;
}

/* Section groupant des champs lies (Vous etes / Coordonnees / Profil / RGPD)
   pour reduire la charge cognitive d'un form long (post critique nous-rejoindre
   2026-06-10). Separateur typographique fin, titre Sofia Pro mixed-case discret
   pour eviter d'introduire des eyebrows uppercase supplementaires. */
.mh-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-6);
    padding-top: var(--mh-space-6);
    border-top: 1px solid rgba(34, 21, 13, 0.1);
}

.mh-form__section:first-child {
    border-top: 0;
    padding-top: 0;
}

.mh-form__section-title {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    font-weight: 600;
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-2);
    letter-spacing: 0;
}

.mh-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-2);
}

.mh-form__field > label {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    font-weight: 500;
    color: var(--mh-ink);
}

.mh-form__field > label .required,
.mh-form__field > label[for]::after {
    /* (le required est gere par Symfony Form via class .required sur le label) */
}

/* Inputs natifs */
.mh-form__field input[type="text"],
.mh-form__field input[type="email"],
.mh-form__field input[type="tel"],
.mh-form__field input[type="password"],
.mh-form__field input[type="search"],
.mh-form__field input[type="url"],
.mh-form__field input[type="number"],
.mh-form__field input[type="date"],
.mh-form__field input[type="datetime-local"],
.mh-form__field input[type="file"],
.mh-form__field select,
.mh-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--mh-space-3) var(--mh-space-4);
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    color: var(--mh-ink);
    background: #ffffff;
    border: 3px solid var(--mh-ink); /* bordure noire cohérente avec le reste du site */
    border-radius: var(--mh-radius-full); /* champs ronds (pill) */
    transition: border-color var(--mh-transition-fast), box-shadow var(--mh-transition-fast);
    min-height: var(--mh-touch-min);
}

.mh-form__field textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
    border-radius: var(--mh-radius-lg); /* textarea : coins arrondis mais pas pill (multi-ligne) */
}

.mh-form__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23641317' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--mh-space-4) center;
    padding-right: calc(var(--mh-space-4) * 2 + 12px);
}

.mh-form__field input::placeholder,
.mh-form__field textarea::placeholder {
    color: rgba(34, 21, 13, 0.4);
}

.mh-form__field input:focus,
.mh-form__field select:focus,
.mh-form__field textarea:focus {
    outline: none;
    border-color: var(--mh-burgundy);
    box-shadow: var(--mh-focus-ring);
}

.mh-form__field input:disabled,
.mh-form__field select:disabled,
.mh-form__field textarea:disabled {
    background: rgba(34, 21, 13, 0.04);
    cursor: not-allowed;
}

/* Honeypot caché (anti-bot) */
.mh-form__field input[name*="honeypot"],
.mh-form__field input[name*="company"][aria-hidden],
.mh-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Checkbox / radio (RGPD, newsletter) */
.mh-form__field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--mh-space-3);
}

.mh-form__field--check input[type="checkbox"],
.mh-form__field--check input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-top: 0.2em; /* aligne avec la 1ère ligne du label */
    accent-color: var(--mh-burgundy);
    cursor: pointer;
    flex-shrink: 0;
}

.mh-form__field--check > label {
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

/* Ligne multi-colonnes (prénom/nom, ville/CP, etc.) */
.mh-form__row {
    display: grid;
    gap: var(--mh-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .mh-form__row {
        grid-template-columns: 1fr 1fr;
    }

    .mh-form__row > .mh-form__field:nth-child(3) ~ .mh-form__field,
    .mh-form__row > .mh-form__field:first-child:nth-last-child(3),
    .mh-form__row > .mh-form__field:first-child:nth-last-child(3) ~ .mh-form__field {
        grid-column: span 1;
    }

    .mh-form__row:has(> .mh-form__field:nth-child(3)) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Erreurs (Symfony Form .form-errors) */
.mh-form__field .form-errors,
.mh-form__field ul.form-errors,
.mh-form__field ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--mh-text-sm);
    color: var(--mh-burgundy);
}

/* Bandeau d'erreurs en haut du form (rendu si form_errors() non vide ou si
   le form a ete soumis invalide). Fond rose pale + bordure burgundy. */
.mh-form__alert {
    background: var(--mh-pink-soft);
    border-left: 3px solid var(--mh-burgundy);
    border-radius: var(--mh-radius-md);
    padding: var(--mh-space-4) var(--mh-space-5);
    margin-bottom: var(--mh-space-6);
    color: var(--mh-ink);
    font-size: var(--mh-text-sm);
}

.mh-form__alert p {
    margin: 0 0 var(--mh-space-2);
}

.mh-form__alert p:last-child {
    margin-bottom: 0;
}

.mh-form__alert ul {
    list-style: disc inside;
    padding: 0;
    margin: 0;
    color: var(--mh-burgundy);
}

/* Erreurs de la collection children dans la fieldset. */
.mh-form__fieldset .form-errors,
.mh-form__fieldset > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--mh-space-4);
    color: var(--mh-burgundy);
    font-size: var(--mh-text-sm);
}

.mh-form__fieldset > ul li {
    padding: var(--mh-space-1) 0;
}

.mh-form__field ul li {
    padding: var(--mh-space-1) 0;
}

.mh-form__field input[aria-invalid="true"],
.mh-form__field select[aria-invalid="true"],
.mh-form__field textarea[aria-invalid="true"] {
    border-color: var(--mh-burgundy);
}

/* Aide + mention legale sous le form */
.mh-form__help,
.mh-form__legal {
    font-size: var(--mh-text-sm);
    color: rgba(34, 21, 13, 0.65);
    line-height: 1.5;
    margin: var(--mh-space-3) 0 0;
}

.mh-form__help {
    padding: var(--mh-space-3) var(--mh-space-4);
    background: rgba(208, 229, 243, 0.4); /* sky alpha = info doux */
    border-left: 3px solid var(--mh-sky);
    border-radius: var(--mh-radius-sm);
}

.mh-form__legal a {
    color: var(--mh-burgundy);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Actions (zone submit) */
.mh-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mh-space-3);
    margin-top: var(--mh-space-4);
}

.mh-form__actions .mh-btn {
    /* Le bouton submit herite des styles mh-btn deja definis */
    min-width: 200px;
}

/* Fieldset + legend (sections groupees dans un form) */
.mh-form fieldset {
    border: 1px solid rgba(34, 21, 13, 0.12);
    border-radius: var(--mh-radius-md);
    padding: var(--mh-space-4) var(--mh-space-6) var(--mh-space-6);
    margin: 0;
}

.mh-form legend {
    padding: 0 var(--mh-space-3);
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-lg);
    color: var(--mh-burgundy);
}

/* Collection enfants (preinscription etape 2). Chaque enfant est separe par
   un trait fin pour visualiser le decoupage quand on en ajoute plusieurs. */
.mh-children-list {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-6);
}

.mh-child-row {
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-4);
}

.mh-child-row + .mh-child-row {
    padding-top: var(--mh-space-6);
    border-top: 1px dashed rgba(34, 21, 13, 0.18);
}

.mh-child-row__header {
    display: flex;
    justify-content: flex-end;
}

.mh-child-row__remove {
    appearance: none;
    background: none;
    border: 0;
    color: var(--mh-burgundy);
    cursor: pointer;
    font-family: var(--mh-font-sans);
    font-size: var(--mh-text-sm);
    font-weight: 500;
    padding: 4px 8px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mh-child-row__remove:hover,
.mh-child-row__remove:focus-visible {
    color: var(--mh-ink);
    outline: none;
}

/* Override Tom Select pour aligner sur la charte MH (Concept 01). Les selects
   multi-tag de la pre-inscription utilisent data-controller="tom-select" qui
   initialise Tom Select sur le <select multiple> source Symfony.
   Cf. assets/controllers/tom_select_controller.js.

   Note : l'import CSS Tom Select est positionne AVANT app.css dans assets/app.js
   pour que ces regles l'emportent par ordre de cascade. Selecteurs alignes sur
   le markup Tom Select v2 (.ts-wrapper / .ts-control / .item / .remove). */
.ts-wrapper {
    font-family: var(--mh-font-sans);
}

.ts-control,
.ts-control input,
.ts-dropdown {
    color: var(--mh-ink);
    font-family: var(--mh-font-sans);
    font-size: var(--mh-text-base);
    line-height: 1.5;
}

/* Reset du gradient inutile du theme default + alignement charte MH.
   Tom Select applique un background-image lineaire blanc/gris sur les
   single ET single.input-active ; on neutralise les deux. */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    background-color: #ffffff;
    background-image: none;
    border: 3px solid var(--mh-ink); /* bordure noire cohérente avec les autres champs */
    border-radius: var(--mh-radius-full); /* champs ronds (pill) */
    padding: 10px 14px;
    color: var(--mh-ink);
    min-height: 44px;
    box-shadow: none;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--mh-burgundy);
    box-shadow: 0 0 0 2px rgba(100, 19, 23, 0.15);
}

/* Item single (texte de la valeur selectionnee dans un select simple) :
   poids normal, couleur ink (et non gras noir comme par defaut). */
.ts-wrapper.single .ts-control > .item {
    font-weight: 400;
    color: var(--mh-ink);
    text-shadow: none;
}

/* Fleche caret du select single : couleur burgundy au lieu du gris natif. */
.ts-wrapper.single .ts-control:after {
    border-top-color: var(--mh-burgundy);
}

.ts-wrapper.single.dropdown-active .ts-control:after {
    border-bottom-color: var(--mh-burgundy);
}

.ts-wrapper.multi.has-items .ts-control > .item {
    background: var(--mh-burgundy);
    color: var(--mh-cream);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    margin: 2px 6px 2px 0;
    font-size: var(--mh-text-sm);
    font-weight: 500;
    border: 0;
    text-shadow: none;
    line-height: 1.3;
}

.ts-wrapper.multi.has-items .ts-control > .item.active {
    background: var(--mh-ink);
    color: var(--mh-cream);
}

.ts-wrapper.multi .ts-control > .item .remove {
    color: var(--mh-cream);
    border-left: 1px solid rgba(255, 249, 244, 0.35);
    margin-left: 6px;
    padding: 0 6px 0 8px;
    text-decoration: none;
    border-radius: 0;
    line-height: 1;
}

.ts-wrapper.multi .ts-control > .item .remove:hover {
    background: rgba(255, 249, 244, 0.18);
    color: var(--mh-cream);
}

.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control > input::-webkit-input-placeholder {
    color: rgba(34, 21, 13, 0.5);
    opacity: 1;
}

.ts-dropdown {
    background: #ffffff;
    border: 1px solid rgba(34, 21, 13, 0.18);
    border-radius: var(--mh-radius-md);
    box-shadow: 0 8px 24px rgba(34, 21, 13, 0.12);
    color: var(--mh-ink);
    margin-top: 4px;
    padding: 4px;
}

.ts-dropdown .option {
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--mh-ink);
}

.ts-dropdown .option.active,
.ts-dropdown .active {
    background: var(--mh-pink-soft);
    color: var(--mh-ink);
}

.ts-dropdown .option.selected,
.ts-dropdown [aria-selected="true"] {
    background: rgba(100, 19, 23, 0.08);
    color: var(--mh-ink);
}

.ts-dropdown .optgroup-header {
    color: var(--mh-burgundy);
    font-family: var(--mh-font-display);
    font-weight: 600;
    background: transparent;
}

/* ─── Postit cards (programmes - style bloc-notes spirale) ──────────────── */

.mh-postits {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mh-space-12);
    margin: var(--mh-space-12) 0;
    padding: var(--mh-space-6) 0;
}

@media (min-width: 768px) {
    .mh-postits {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mh-space-8);
    }
}

@media (min-width: 1024px) {
    .mh-postits {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mh-postit {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mh-space-4);
    background: var(--mh-pink-soft);
    border-radius: 12px;
    border: 3px solid var(--mh-ink); /* cadre noir même style que le menu top */
    padding: 3.5rem 1.75rem 2rem;
    text-align: center;
    transition: transform var(--mh-transition-base);
    --postit-rot: -1.5deg;
    transform: rotate(var(--postit-rot));
}

/* Rotation initiale alternée (effet 'punaisé') */
.mh-postit:nth-child(2) { --postit-rot: 1deg; }
.mh-postit:nth-child(3) { --postit-rot: -0.5deg; }
.mh-postit:nth-child(4) { --postit-rot: 1.2deg; }
.mh-postit:nth-child(5) { --postit-rot: -0.8deg; }
.mh-postit:nth-child(6) { --postit-rot: 0.6deg; }

/* Au survol : la carte se redresse (rotation vers 0deg) et monte légèrement. */
.mh-postit:hover {
    transform: rotate(0deg) translateY(-6px);
}

/* Spirale binding en haut (perforations noires sur fond ink) */
.mh-postit::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
    height: 23px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='20' viewBox='0 0 34 20'><circle cx='17' cy='10' r='7' fill='%23ffffff' stroke='%2322150d' stroke-width='1.8'/></svg>");
    background-repeat: repeat-x;
    background-size: 38px 20px;
}

/* Variantes couleur */
.mh-postit--pink { background: var(--mh-pink-soft); }
.mh-postit--sky  { background: var(--mh-sky); }
.mh-postit--sage { background: var(--mh-sage); }
.mh-postit--cream {
    background: var(--mh-cream);
}

/* Sur sage le contraste est limite : burgundy reste lisible pour les titres */
.mh-postit--sage .mh-postit__title,
.mh-postit--sage .mh-postit__cta {
    color: var(--mh-ink);
}

/* Mobile : post-it plus compacts (retour Johanna "plus petit") */
@media (max-width: 767px) {
    .mh-postit {
        padding: 2.75rem 1.25rem 1.75rem;
    }
    .mh-postit__title {
        font-size: var(--mh-text-base);
        letter-spacing: 0.12em;
    }
    .mh-postit__lead {
        font-size: var(--mh-text-sm);
    }
    .mh-postit__list {
        font-size: 0.8125rem;
    }
    /* le trait pleine largeur doit déborder du padding mobile (1.25rem), pas
       de 1.75rem (sinon il dépasse les bords de la carte). */
    .mh-postit__sep {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }
}

/* Title : eyebrow tracking large, centre */
.mh-postit__title {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-md);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mh-burgundy);
    margin: 0;
    text-align: center;
    width: 100%;
}

/* Lead : la phrase d'accroche brief, centre */
.mh-postit__lead {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    line-height: 1.45;
    margin: 0;
    color: var(--mh-ink);
    text-align: center;
    width: 100%;
}

/* Separateur en pointilles */
.mh-postit__sep {
    border: 0;
    border-top: 3px solid var(--mh-ink);
    /* trait plein pleine largeur (bord à bord) comme la maquette : on déborde
       du padding horizontal du post-it (1.75rem) */
    width: auto;
    margin: var(--mh-space-2) -1.75rem;
}

/* Liste centrée sans puces */
.mh-postit__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--mh-text-sm);
    line-height: 1.5;
    color: var(--mh-ink);
    text-align: center;
    width: 100%;
}

.mh-postit__list li {
    padding: var(--mh-space-1) 0;
    text-align: center;
}

.mh-postit__price {
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-lg);
    font-weight: 500;
    color: var(--mh-burgundy);
    margin: var(--mh-space-2) 0 0;
}

/* CTA pill blanc en bas */
.mh-postit__cta {
    align-self: stretch; /* bouton pleine largeur de la carte (maquette) */
    background: var(--mh-cream);
    color: var(--mh-ink);
    padding: var(--mh-space-2) var(--mh-space-6);
    border: 3px solid var(--mh-ink); /* contour noir autour du bouton */
    border-radius: var(--mh-radius-full);
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--mh-transition-fast), color var(--mh-transition-fast);
    margin-top: auto;
    min-height: 40px; /* hauteur uniforme avec les autres boutons du site */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mh-postit__cta:hover {
    transform: translateY(-2px);
    color: var(--mh-burgundy);
}

/* Reduced motion : supprime les rotations */
@media (prefers-reduced-motion: reduce) {
    .mh-postit,
    .mh-postit:nth-child(n) {
        transform: none;
    }
    .mh-postit:hover {
        transform: translateY(-2px);
    }
}

/* ─── Card variants pour /coaching (feature, step, price) ──────────────── */

/* Card "feature" : pleine largeur, accent narratif */
.mh-card--feature {
    text-align: center;
    padding: var(--mh-space-12) var(--mh-space-8);
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--mh-radius-xl);
}

/* Label de card uppercase sobre post-polish /coaching 2026-06-10 : compromis
   entre l'eyebrow burgundy tracked (AI grammar saturee) et le label mixed-case
   pur. On garde l'impact UPPERCASE qui sert le role de "tag categorie de card"
   mais on retire le tracking etendu (0.05em au lieu de 0.2em) et la couleur
   burgundy (ink discret au lieu) pour reduire le tell uppercase tracked du
   eyebrow saturated AI. Reduit perception "4 eyebrows" sans casser la voix
   typographique des labels. */
.mh-card__eyebrow {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-3);
}

.mh-card__lead {
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-2xl);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: var(--mh-tracking-tight);
    color: var(--mh-ink);
    margin: 0;
}

/* Titre de bloc autonome (au-dessus d'un groupe de cards) */
.mh-block-title {
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-3xl);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: var(--mh-tracking-tight);
    text-align: center;
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-6);
}

/* Quand le block-title precede un grid contenant des cards step, la pastille
   burgundy remonte de 24px au-dessus de la card via top: -24px. Le margin
   standard space-6 (24px) fait que la pastille touche pile la baseline du H2.
   On passe a 2.5rem (40px) pour laisser 16px d'air visible entre H2 et
   pastilles. Valeur en dur car pas de token space-10 dans le systeme. */
.mh-block-title:has(+ .mh-cards .mh-card--step) {
    margin-bottom: 2.5rem;
}

/* Note discrete sous un bloc */
.mh-block-note {
    max-width: 720px;
    margin: var(--mh-space-8) auto 0;
    text-align: center;
    font-style: italic;
    color: rgba(34, 21, 13, 0.7);
    font-size: var(--mh-text-base);
    line-height: 1.6;
}

/* Card "step" : avec numero en badge */
.mh-card--step {
    position: relative;
    padding-top: var(--mh-space-8);
}

.mh-card__step-num {
    position: absolute;
    top: calc(var(--mh-space-6) * -1);
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background: var(--mh-burgundy);
    color: var(--mh-cream);
    font-family: var(--mh-font-display);
    font-size: var(--mh-text-2xl);
    font-weight: 500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-card--step h3 {
    text-align: center;
    margin-top: var(--mh-space-2);
}

.mh-card--step p {
    text-align: center;
}

/* Grid 2 colonnes (durée + tarif) */
.mh-cards--2 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mh-cards--2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Card "price" : tarif mis en avant */
.mh-card--price {
    text-align: center;
    justify-content: center;
}

.mh-card__price {
    font-family: var(--mh-font-display);
    font-size: clamp(2rem, 3.5vw, var(--mh-text-3xl)); /* 32-39px (etait 40-65px) */
    font-weight: 300;
    line-height: 1;
    letter-spacing: var(--mh-tracking-tight);
    color: var(--mh-burgundy);
    margin: var(--mh-space-2) 0;
}

.mh-card__price span {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--mh-ink);
    margin-left: var(--mh-space-2);
}

.mh-card__price-note {
    font-size: var(--mh-text-sm);
    color: rgba(34, 21, 13, 0.7);
    margin: 0;
}

/* mh-cards--2 doit ecraser le 3-cols default sur min-width: 1024px */
@media (min-width: 1024px) {
    .mh-cards--2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── Card variants pour /nous-rejoindre (role avec icone) ────────────── */

.mh-card--role {
    text-align: center;
    padding-top: var(--mh-space-8);
    border: 3px solid var(--mh-ink); /* cadre noir même style que le menu top */
}

.mh-card--role h3 {
    text-align: center;
    margin-top: var(--mh-space-2);
    font-size: var(--mh-text-xl); /* 25px (etait 30px) */
    min-height: 2.4em;        /* reserve 2 lignes pour aligner les titres */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-card--role p {
    text-align: center;
    flex: 1;                  /* pousse le CTA en bas → CTAs alignes */
}

.mh-card--role .mh-card__eyebrow {
    text-align: center;
    margin-bottom: var(--mh-space-2);
}

.mh-card--role .mh-card__cta {
    margin-top: auto;
    align-self: center;
}

/* Icone Valentina posee directement dans la card, sans cercle wrapping (post
   critique 2026-06-10 : retrait du cercle cream qui violait le ban DESIGN.md
   "Pas d'icones dans des cercles colores" + AI Slop blacklist #3 "SaaS starter
   template look"). L'icone polychrome porte son propre contour, n'a pas besoin
   d'un decorum supplementaire. */
.mh-card__icon {
    margin: 0 auto var(--mh-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cartes rôle (/nous-rejoindre) : icône posée sur une boîte crème encadrée pour
   contraster avec le fond coloré de la carte (livre bleu / avion rose qui se
   fondaient) - retour Johanna. */
.mh-card--role .mh-card__icon {
    background: var(--mh-cream);
    border: 3px solid var(--mh-ink);
    border-radius: var(--mh-radius-lg);
    padding: var(--mh-space-4);
    width: -moz-fit-content;
    width: fit-content;
}

.mh-card__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain; /* préserve les proportions (ex. globe non carré) */
    display: block;
}

/* Icônes plus grandes en desktop */
@media (min-width: 768px) {
    .mh-card__icon img {
        width: 96px;
        height: 96px;
    }
}

@media (min-width: 1024px) {
    .mh-card__icon img {
        width: 112px;
        height: 112px;
    }
}

/* ─── Founders bios (/a-propos) : 3 articles editorial subtil ──────────── */

.mh-founder {
    max-width: 820px;
    margin: 0 auto var(--mh-space-16);
    padding: var(--mh-space-8) 0;
    border-top: 3px solid var(--mh-ink); /* séparation même style que la bordure du menu top */
}

.mh-founder:first-of-type {
    border-top: none;
    padding-top: 0;
}

.mh-founder:last-child {
    margin-bottom: 0;
    border-bottom: 3px solid var(--mh-ink); /* ligne de clôture sous le dernier bloc, même style que le menu top */
}

/* Nom en Dilbero (taille moderee, ~24-30px) */
.mh-founder__name {
    font-family: var(--mh-font-display);
    font-size: clamp(1.5rem, 2vw + 0.4rem, var(--mh-text-2xl));
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: var(--mh-tracking-tight);
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-2);
}

/* Role en prose mixed-case italique sous le nom (post critique 2026-06-10).
   Refactor : retire l'eyebrow uppercase tracked qui repetait 3 fois par section
   et violait la regle DESIGN.md "un eyebrow par page max hors footer". */
.mh-founder__role {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-base);
    font-weight: 400;
    font-style: italic;
    color: rgba(34, 21, 13, 0.7);
    margin: 0 0 var(--mh-space-6);
    line-height: 1.5;
    letter-spacing: 0;
}

/* Bio : 2-3 paragraphes en flow normal */
.mh-founder__bio p {
    font-size: var(--mh-text-base);
    line-height: 1.7;
    margin: 0 0 var(--mh-space-4);
    color: var(--mh-ink);
}

.mh-founder__bio p:last-child {
    margin-bottom: 0;
}

/* "En passant" : digression typographique, separateur fin en haut, texte italique
   discret. Post critique 2026-06-10 : retire le border-left 3px burgundy (ban
   absolu Concept 01 + impeccable side-stripe). Le separateur typographique +
   l'opacity reduite suffisent a signaler la digression sans encadre SaaS. */
.mh-founder__aside {
    margin-top: var(--mh-space-8);
}

.mh-founder__aside p {
    margin: 0;
    font-size: var(--mh-text-sm);
    line-height: 1.55;
    color: rgba(34, 21, 13, 0.65);
}

.mh-founder__aside em {
    font-style: italic;
}

/* Card cliquable : tout le bloc devient lien vers une page */
.mh-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mh-space-4);
    transition: transform var(--mh-transition-fast);
}

.mh-card--link:hover,
.mh-card--link:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.mh-card__cta-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mh-space-2);
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mh-burgundy);
    margin-top: auto;
    transition: gap var(--mh-transition-fast);
}

.mh-card--link:hover .mh-card__cta-arrow {
    gap: var(--mh-space-3);
}

/* Card avec CTA bouton centre (ex: /a-propos "Nous recrutons" + bouton "Nous rejoindre") */
.mh-card--cta {
    text-align: center;
    align-items: center;
    justify-content: space-between;
}

.mh-card__cta-btn {
    align-self: center;
    margin-top: var(--mh-space-4);
}

/* Card featured : sortie du grid, centree, padding genereux (ex /a-propos CTA "Nous rejoindre") */
.mh-card--featured {
    max-width: 640px;
    margin: var(--mh-space-8) auto 0;
    padding: var(--mh-space-8) var(--mh-space-12);
}

.mh-card--featured p {
    font-size: var(--mh-text-md);
    line-height: 1.6;
}

/* Bloc CTA simple (texte + bouton centres, hors card) */
.mh-cta-block {
    max-width: 560px;
    margin: var(--mh-space-12) auto 0;
    text-align: center;
}

.mh-cta-block__lead {
    font-family: var(--mh-font-body);
    font-size: var(--mh-text-md);
    line-height: 1.6;
    color: var(--mh-ink);
    margin: 0 0 var(--mh-space-6);
    text-align-last: center; /* justifié avec dernière ligne centrée (text-align: justify hérité du global p) */
}