/* ============================================================
   HERO 11 — IMMERSION
   Un seul plan photographique, aucune boite : l'image porte tout. Le texte est
   cale en bas a gauche sur une colonne large, pour que le H1 tienne en deux
   lignes et non en quatre.

   REGISTRE BIEN-ETRE — ce qui le porte ici :
     * le voile n'est pas un aplat global mais un degrade dense sous le header,
       ouvert au tiers superieur, dense a nouveau derriere le texte : la photo
       reste lumineuse la ou on la regarde ;
     * la seconde ligne du titre bascule en italique (contrat ((…)) -> .mcl-accent) ;
     * boutons en pilule, transitions lentes, filet de pied a peine visible.

   Deux couches de voile, deux roles. Le NOIR assombrit : c'est lui qui garantit
   le contraste quel que soit le cadrage de la photo (§4.14), et c'est la seule
   chose qu'un `rgba(0,0,0,…)` a le droit de faire ici. La CHARTE, au-dessus, ne
   fait que rechauffer ce noir. Brancher l'assombrissement lui-meme sur
   `--primary` reviendrait a parier que --primary est sombre : sur un theme
   clair, il n'assombrirait plus rien.
   ============================================================ */

.hero-11 {
    /* Le lavis de charte. Deriver plutot qu'ecrire : la teinte suit le theme du
       site, elle n'impose pas la sienne (§4.1). */
    --hero-11-lavis-bas: color-mix(in srgb, var(--primary) 34%, transparent);
    --hero-11-lavis-haut: color-mix(in srgb, var(--primary) 10%, transparent);

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min(92vh, 880px);
    padding-top: var(--header-height);
    overflow: hidden;
    background: var(--black);
}

/* ---- La photo ---------------------------------------------- */
.hero-11__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-11__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 42%;
    display: block;
}

/*
   Les arrets sont ancres en PIXELS, pas en pourcentage : le bloc de texte est
   cale sur le bord bas quelle que soit la hauteur du hero, donc la densite doit
   suivre ce bord, pas une fraction de la section.
*/
.hero-11__voile {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        /* 1. le lavis de charte, par-dessus : il rechauffe */
        linear-gradient(to top,
            var(--hero-11-lavis-bas) 0,
            var(--hero-11-lavis-haut) 62%,
            transparent 100%),
        /* 2. l'assombrissement, neutre et garanti */
        linear-gradient(to top,
            rgba(0, 0, 0, 0.78) 0,
            rgba(0, 0, 0, 0.78) 300px,
            rgba(0, 0, 0, 0.5) 600px,
            rgba(0, 0, 0, 0.06) 800px),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.5) 0,
            rgba(0, 0, 0, 0) 240px);
}

/* ---- Le contenu -------------------------------------------- */
.hero-11__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.25rem);
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 5% clamp(1.75rem, 3vw, 2.75rem);
}

/*
   Le panneau ne cree AUCUNE boite tant qu'on est au large : il laisse passer
   ses enfants, qui restent les items flex de `__inner`. C'est en dessous de
   768 px qu'il devient un aplat (voir le bloc responsive).
*/
.hero-11__panneau {
    display: contents;
}

.hero-11__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1rem, 1.8vw, 1.5rem);
    width: min(100%, 58rem);
    margin-top: auto;
}

.hero-11__surtitre {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--white) 78%, transparent);
}

/*
   Le titre : grand, peu appuye, interligne serre. C'est la graisse LEGERE qui
   fait le calme — un display en 600 sur une photo produit une accroche
   commerciale, pas une invitation a ralentir.
*/
.hero-11__titre,
.hero-11__titre:hover {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 6.2vw, 5.75rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--white);
}

/* La signature du registre : le membre accentue passe en italique. Le contrat
   ((…)) decide du MOT, la variante decide de ce que « accentue » veut dire chez
   elle (§4.13) — ici, un changement de voix, pas un surlignage. */
.hero-11__titre .mcl-accent {
    font-style: italic;
    color: inherit;
}

.hero-11__desc {
    margin: 0;
    max-width: 44ch;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.75;
    color: color-mix(in srgb, var(--white) 86%, transparent);
}

/* ---- Les actions ------------------------------------------- */
.hero-11__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.hero-11__btn {
    /* Reset explicite : sans lui, le theme et le navigateur imposent leurs
       propres marges, bordures et couleur de lien (§4.6). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.05rem 2.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    /* 0.4 s et non 0.25 : le mouvement fait partie du propos. */
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.hero-11__btn--principal {
    background: var(--accent);
    color: var(--on-accent);
}

.hero-11__btn--principal:hover,
.hero-11__btn--principal:focus-visible {
    background: var(--secondary);
    color: var(--on-secondary);
}

.hero-11__btn--secondaire {
    border-color: color-mix(in srgb, var(--white) 38%, transparent);
    color: var(--white);
}

.hero-11__btn--secondaire:hover,
.hero-11__btn--secondaire:focus-visible {
    border-color: var(--white);
    background: var(--white);
    color: var(--black);
}

.hero-11__btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* ---- Le pied : preuve sociale et reassurance ---------------- */
.hero-11__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    /* A peine visible : le filet separe, il ne souligne pas. */
    border-top: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
}

.hero-11__note {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--white);
}

.hero-11__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-11__point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: color-mix(in srgb, var(--white) 76%, transparent);
}

.hero-11__point-icone {
    display: inline-flex;
    flex: none;
    width: 15px;
    height: 15px;
    color: color-mix(in srgb, var(--white) 72%, transparent);
}

/* Le <svg> vient de mcl_icone() : la variante ne peut pas lui poser de classe,
   on le cible donc sous un ancetre qui lui appartient (§4.12, exception). */
.hero-11__point-icone svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 768px) {
    .hero-11 {
        min-height: 660px;
    }

    /*
       LE COMPROMIS RETOURNE.

       En etroit, le meme bloc de texte occupe presque toute la largeur : tenir
       son contraste par le voile obligeait a monter jusqu'a 0.86 sur la moitie
       basse de la photo — plus dense que le desktop. La photo ne lisait plus
       comme une scene, juste comme une texture chaude, et la variante perdait
       exactement ce qui la definit.

       Le contraste est desormais fabrique par un aplat sous le texte (§4.14 :
       il appartient toujours au composant, il a seulement change de forme). Il
       ne reste ici que l'assombrissement du HAUT, qui n'est pas decoratif : le
       header flotte en transparent par-dessus.
    */
    .hero-11__voile {
        background-image:
            linear-gradient(to bottom,
                rgba(0, 0, 0, 0.5) 0,
                rgba(0, 0, 0, 0) 200px);
    }

    /*
       Le panneau prend corps. Le fond reel du texte n'est donc plus la photo
       mais cet aplat : c'est §4.13 qui s'applique, et sur du quasi-noir le
       blanc deja pose est la bonne couleur — rien a redeclarer.

       92 % et non 100 % : la photo transparait juste assez pour que le panneau
       garde de la matiere et que le bouton principal ne se pose pas sur un
       aplat mort. A 8 %, le contraste du texte reste celui du noir.
    */
    .hero-11__panneau {
        display: flex;
        flex-direction: column;
        gap: clamp(1.25rem, 4vw, 1.75rem);
        margin-top: auto;
        padding: clamp(1.5rem, 6vw, 2rem);
        border-radius: clamp(18px, 5vw, 26px);
        background: color-mix(in srgb, var(--black) 92%, transparent);
    }

    /* `margin-top: auto` a migre sur le panneau : le garder ici pousserait le
       contenu au bas du panneau et laisserait un trou sous le titre. */
    .hero-11__content {
        margin-top: 0;
    }

    .hero-11__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-11__pied {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .hero-11__titre,
    .hero-11__titre:hover {
        font-size: clamp(2.25rem, 10.5vw, 3rem);
    }

    .hero-11__points {
        gap: 0.5rem 1.25rem;
    }
}

/* Vague de bas (global.css) : le contenu descend jusqu'au bord, on lui
   reserve la hauteur de la vague pour que les creux ne le mangent pas. */
.hero-11[data-vague] {
  padding-bottom: var(--vague-h);
}