/**
 * Bandeau d'introduction.
 *
 * Préfixe : .lenain-hero
 * Trois variantes : --home (image plein cadre), --n1 (texte + visuel
 * débordant), --contact (texte seul). Le squelette de contenu est commun.
 */

.lenain-hero {
    /*
     * Le bandeau porte un fond mais gère lui-même son rythme vertical, variante
     * par variante : on annule le padding par défaut des sections à fond.
     */
    --lp-section-pad: 0px;

    position: relative;
    overflow: hidden;
}

/* ------------------------------------------------------- Contenu commun */

.lenain-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.lenain-hero__kicker {
    margin: 0;
    color: var(--wp--preset--color--kicker);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lenain-hero__title {
    margin: 0;
    color: var(--wp--preset--color--titre);
}

/*
 * L'accueil garde le grand titre hérité de theme.json ; les pages internes
 * ouvrent sur un titre plus mesuré.
 */
.lenain-hero--n1 .lenain-hero__title,
.lenain-hero--contact .lenain-hero__title {
    font-size: var(--wp--preset--font-size--xl-4);
}

.lenain-hero__text {
    margin: 0;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.75;
}

.lenain-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Chaque bouton est un bloc `leb/lien` : son enveloppe s'efface pour que la
   pilule soit l'élément de la ligne. */
.lenain-hero__actions .leb-lien {
    display: contents;
}

/* Le second bouton de l'accueil est la pilule claire de la maquette. Le client
   n'a pas de variante à choisir : c'est sa place qui le désigne. */
.lenain-hero--home .lenain-hero__actions .leb-lien:nth-of-type(2) .leb-cta {
    --lp-cta-bg: var(--wp--preset--color--white);
    --lp-cta-bg-hover: var(--wp--preset--color--border-soft);
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--anthracite);
    --lp-cta-dot: var(--wp--preset--color--rose);
    --lp-cta-arrow: var(--wp--preset--color--white);
}

/* Dans l'éditeur seulement : la galerie du diaporama partage la zone des
   boutons, faute d'une seconde zone d'insertion. Elle passe donc à la ligne,
   sous eux. Le rendu la déplace en fond, elle n'atteint jamais le front ici. */
.lenain-hero__actions .wp-block-gallery {
    flex-basis: 100%;
    margin-top: 16px;
}

/* ============================================================ Variante home */

.lenain-hero--home .lenain-hero__media {
    position: absolute;
    inset: 0;
}

/*
 * Visuels superposés : seul celui qui porte `is-active` est visible. L'état de
 * départ est écrit ici, view.js ne fait que déplacer la classe — sans lui, la
 * première image reste affichée.
 */
.lenain-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenain-hero__slide.is-active {
    opacity: 1;
}

.lenain-hero--home .lenain-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Voile dégradé : lisibilité du texte à gauche, image nette à droite. */
.lenain-hero--home .lenain-hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        78deg,
        rgb(18 35 37 / 0.72) 0%,
        rgb(18 35 37 / 0.32) 52%,
        rgb(18 35 37 / 0) 78%
    );
}

/*
 * Le bandeau d'accueil superpose deux systèmes indépendants, centrés sur le
 * même axe : le contenu, qui tient dans le grand format du site, et le cadre
 * des liens rapides, plus large de deux débords. Contrairement aux bandeaux
 * intérieurs, aucun des deux ne compense son retrait sur l'autre.
 */
.lenain-hero--home .lenain-hero__inner {
    position: relative;
    max-width: var(--wp--style--global--wide-size);
    padding-block: clamp(96px, 12vw, 172px) clamp(72px, 8.9vw, 128px);
}

.lenain-hero--home .lenain-hero__content {
    max-width: 720px;
    gap: 22px;
    color: var(--wp--preset--color--white);
}

.lenain-hero--home .lenain-hero__title {
    color: var(--wp--preset--color--white);
}

.lenain-hero--home .lenain-hero__text {
    color: rgb(255 255 255 / 0.88);
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.65;
}

/* ------------------------------------------------ Barre des trois métiers */

/*
 * Le cadre déborde du contenu de 80px de chaque côté : c'est ce débord qui
 * donne au bandeau son effet d'encadrement. Les filets se posent à la
 * gouttière de ce cadre, donc en dehors du contenu.
 */
.lenain-hero__links {
    position: relative;
    max-width: calc(var(--wp--style--global--wide-size) + 160px);
    margin-inline: auto;
    padding-inline: var(--lp-container-padding);
}


/*
 * Les deux filets latéraux ferment la barre. Repli de la disposition
 * d'origine, où ils montaient jusqu'en haut du bandeau : à cette hauteur-là,
 * ils finissent par se tracer dans la boîte du titre dès que la fenêtre se
 * resserre. Bornés à la barre, ils ne rencontrent plus rien.
 */
/*
 * Les trois côtés du cadre sont portés par le MÊME élément : sans cela, un
 * trait haut posé sur le cadre dépassait des filets posés sur la grille, de
 * toute la largeur de la gouttière.
 */
.lenain-hero__links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgb(255 255 255 / 0.3);
    border-inline: 1px solid rgb(255 255 255 / 0.3);
}

/*
 * Au large, les filets reprennent toute leur hauteur : c'est le dessin
 * d'origine, et l'encadrement du bandeau en dépend.
 *
 * La borne est mesurée. Le cadre plafonne à 1600 et le contenu à 1440 : le
 * débord de l'un sur l'autre — le seul espace où un filet de pleine hauteur
 * peut passer sans toucher le titre — vaut (fenêtre − 1440) / 2 et s'annule
 * donc à 1440px. À 1500px il fait 30px, de quoi respirer ; en deçà, les filets
 * se replient sur la barre.
 */
@media (min-width: 1500px) {
    .lenain-hero__links::before,
    .lenain-hero__links::after {
        content: "";
        position: absolute;
        top: -100vh;
        bottom: 0;
        width: 1px;
        background: rgb(255 255 255 / 0.22);
    }

    .lenain-hero__links::before {
        left: var(--lp-container-padding);
    }

    .lenain-hero__links::after {
        right: var(--lp-container-padding);
    }

    /*
     * Les filets de pleine hauteur passent à l'aplomb exact des bords de la
     * grille — gouttière du cadre d'un côté, bord de la grille de l'autre,
     * c'est la même abscisse. Ils remplacent donc ses bordures latérales, et
     * son trait haut les relie sans dépasser.
     */
    .lenain-hero__links-grid {
        border-inline: 0;
    }
}

.lenain-hero__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 96px;
    padding: 0 32px;
    border-right: 1px solid rgb(255 255 255 / 0.3);
    color: var(--wp--preset--color--white);
    transition: background-color 0.25s ease;
}

.lenain-hero__link:last-child {
    border-right: 0;
}

.lenain-hero__link:hover {
    background: rgb(255 255 255 / 0.1);
    color: var(--wp--preset--color--white);
}

.lenain-hero__link-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lenain-hero__link-icon {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--lp-icon) center / contain no-repeat;
    mask: var(--lp-icon) center / contain no-repeat;
}

/* Disque blanc plein, flèche rose : le repère coloré de la barre des métiers. */
.lenain-hero__link-arrow {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--wp--preset--color--white);
}

/* Le cercle porte la bordure, le pseudo-élément la flèche : masquer
   l'élément lui-même effacerait aussi son contour. */
.lenain-hero__link-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 13px;
    height: 13px;
    margin: auto;
    background-color: var(--wp--preset--color--rose);
    -webkit-mask: url("../../assets/img/arrow-up-right.svg") center / contain no-repeat;
    mask: url("../../assets/img/arrow-up-right.svg") center / contain no-repeat;
}

/* ============================================================== Variante N1 */

/*
 * Les pages métier ouvrent sur un aplat anthracite, la page contact reste sur
 * fond clair.
 */
/*
 * Le bandeau intérieur est gris clair, fermé d'un filet — sauf sur les pages
 * métier, où la maquette l'a retiré.
 */
.lenain-hero--n1 {
    background: var(--wp--preset--color--bg);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.lenain-hero--metier {
    border-bottom: 0;
}

.lenain-hero--contact {
    background: var(--wp--preset--color--bg);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.lenain-hero--n1 .lenain-hero__kicker {
    color: var(--wp--preset--color--kicker);
}

.lenain-hero--n1 .lenain-hero__title {
    color: var(--wp--preset--color--anthracite);
}

/* Gris neutre de la maquette : l'anthracite juste éclairci. */
.lenain-hero--n1 .lenain-hero__text {
    color: color-mix(in srgb, var(--wp--preset--color--white) 15%, var(--wp--preset--color--anthracite));
}

.lenain-hero--n1 {
    /* Aligné sur le conteneur large du site. */
    --lp-hero-wide: var(--wp--style--global--wide-size);

    /* Retrait conservé entre le visuel et le bord de la fenêtre. */
    --lp-hero-figure-inset: 180px;
}

/*
 * Sur une page métier, la hauteur vient du seul rythme de la colonne de texte
 * et le visuel s'y aligne ; ailleurs, le bandeau garde son propre retrait.
 */
.lenain-hero--n1 .lenain-hero__inner {
    max-width: var(--lp-hero-wide);
    padding-block: 32px;
}

.lenain-hero--metier .lenain-hero__inner {
    padding-block: 0;
}

.lenain-hero--n1 .lenain-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

.lenain-hero--n1 .lenain-hero__content {
    max-width: 520px;
    padding-block: clamp(72px, 9.7vw, 140px);
    padding-right: 48px;
}

/*
 * Sans visuel, le texte n'a plus de colonne à côté de laquelle se ranger : il
 * occupe toute la largeur, et ce sont le titre et le paragraphe qui portent
 * leur propre mesure de lecture. Sans quoi le titre passe à la ligne bien trop
 * tôt, dans une colonne devenue sans objet.
 */
.lenain-hero--n1:not(.lenain-hero--with-media) .lenain-hero__grid {
    grid-template-columns: minmax(0, 1fr);
}

.lenain-hero--n1:not(.lenain-hero--with-media) .lenain-hero__content {
    max-width: none;
    padding-block: clamp(56px, 6.1vw, 88px);
    padding-right: 0;
}

.lenain-hero--n1:not(.lenain-hero--with-media) .lenain-hero__title {
    max-width: 820px;
}

.lenain-hero--n1:not(.lenain-hero--with-media) .lenain-hero__text {
    max-width: 640px;
}

/*
 * Edge-to-edge asymétrique : le bord gauche du visuel reste aligné sur la
 * grille, le droit suit la fenêtre en gardant --lp-hero-figure-inset de retrait.
 * Sous la largeur du conteneur, la marge redevient positive et le visuel se
 * resserre — c'est le comportement de la maquette.
 */
/*
 * Le visuel occupe toute la hauteur du bandeau — il déborde des 32px de retrait
 * du conteneur en haut comme en bas — et file jusqu'au bord droit de la
 * fenêtre. Ni rayon ni angle coupé : le bord de la photo est franc.
 */
/*
 * Le visuel sort de la gouttière à droite. Au bord franc par défaut ; sur une
 * page métier, il se détache des bords et se referme d'un seul côté, ses angles
 * gauches arrondis, les droits filant hors du cadre.
 */
.lenain-hero__figure {
    position: relative;
    align-self: stretch;
    min-height: 560px;
    margin-block: -32px;
    margin-right: calc(-1 * (
        max((100vw - var(--lp-hero-wide)) / 2, 0px) + var(--lp-container-padding)
    ));
    overflow: hidden;
}

.lenain-hero--metier .lenain-hero__figure {
    min-height: 640px;
    margin-block: 20px;
    border-radius: var(--lp-radius-lg) 0 0 var(--lp-radius-lg);
}

.lenain-hero__figure .lenain-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * L'angle coupé du haut disparaît de la charte figée : le visuel va au bord.
 * Le repère reste dans le rendu pour les mises en page qui le réclameraient,
 * mais il n'est plus dessiné.
 */


.lenain-hero__badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--lp-radius-sm);
    background: var(--wp--preset--color--white);
}

.lenain-hero__badge :where(img) {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* ========================================================= Variante contact */

.lenain-hero--contact .lenain-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    flex-wrap: wrap;
    padding-block: var(--lp-pad-md);
}

.lenain-hero--contact .lenain-hero__content {
    max-width: 640px;
}

.lenain-hero--contact .lenain-hero__actions {
    margin-top: 0;
}

/* ============================================================== Responsive */

@media (max-width: 1024px) {
    .lenain-hero--n1 .lenain-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .lenain-hero--n1 .lenain-hero__content {
        max-width: none;
        padding-right: 0;
        padding-block: 64px 0;
    }

    /* En colonne unique, le visuel se referme des deux côtés. */
    .lenain-hero__figure {
        min-height: 380px;
        margin-block: 0;
        margin-right: 0;
    }

    .lenain-hero--metier .lenain-hero__figure {
        min-height: 380px;
        margin-block: 0;
        border-radius: var(--lp-radius-lg);
    }

    .lenain-hero--n1 .lenain-hero__inner {
        padding-bottom: 32px;
    }
}

/*
 * La barre passe en pile dès 900px : à trois colonnes, la flèche d'un métier
 * venait déjà mordre sur le libellé du suivant bien avant 640. On la replie
 * donc quand les colonnes cessent de tenir, pas quand l'écran devient petit.
 */
@media (max-width: 900px) {
    .lenain-hero__links-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lenain-hero__link {
        height: 72px;
        padding: 0 16px;
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 0.3);
    }

    .lenain-hero__link:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    .lenain-hero__figure {
        min-height: 280px;
    }
}