/**
 * Socle global du thème — variables projet, conteneurs, système d'espacement
 * vertical et utilitaires partagés.
 *
 * Préfixe : .lenain-
 * Couleurs, typographies et tailles proviennent de theme.json
 * (--wp--preset--*). Les seules variables propres au projet sont déclarées ici.
 */

/* ---------------------------------------------------------------- Variables */

:root {
    /* Gouttière horizontale des conteneurs (40px maquette, 20px en petit écran). */
    --lp-container-padding: 40px;

    /*
     * Hauteur de la barre d'en-tête. Déclarée ici et non dans header.css parce
     * qu'elle sert bien au-delà de l'en-tête : le panneau du menu en déduit la
     * hauteur d'écran qu'il lui reste, et la page entière s'en sert pour poser
     * ses ancres (voir « Ancres » plus bas).
     */
    --lp-header-hauteur: 76px;

    /*
     * Hiérarchie des largeurs d'images d'article : couverture et duo au
     * conteneur de contenu (1280, comme la maquette qui les rend égaux) >
     * image seule (880, la largeur du titre d'article) > colonne de texte
     * (720). Un système, pas des cas isolés : toute image d'article se cale
     * sur l'un de ces crans.
     */
    --lp-article-cover: var(--wp--style--global--content-size);
    --lp-article-duo: var(--wp--style--global--content-size);
    --lp-article-image: 880px;
    /* Pas de lecture des articles : l'écart entre blocs de la colonne, et la
       marge symétrique de l'encart conseil (feuille de rythme, §7). */
    --lp-article-step: 28px;

    /*
     * Retrait des repères de titre — carré rose et pictogramme métier — hors
     * de la boîte du titre. Valeur de maquette au large, puis le repère se
     * rapproche par paliers à mesure que la gouttière se referme, avant de
     * rentrer dans le texte sur petit écran (voir « Petits écrans »).
     */
    --lp-titre-repere: 30px;

    /* Rayons de la maquette. */
    --lp-radius-sm: 8px;    /* petits éléments (encarts, champs) */
    --lp-radius-md: 12px;   /* images */
    --lp-radius-lg: 16px;   /* cartes */
    --lp-radius-pill: 999px;

    /*
     * Fond des visionneuses : un noir bleuté propre à l'agrandissement, plus
     * profond que l'anthracite de la charte.
     */
    --lp-lightbox-fond: rgb(21 25 28 / 0.97);

    /*
     * Gris de contour des éléments cliquables au repos — pilules de filtre,
     * boutons « charger plus », champs de saisie. Plus soutenu que le filet des
     * séparateurs : il doit se voir sur du blanc.
     */
    /* Le gris de bordure appuyé de la maquette (chips, boutons contours). */
    --lp-border-strong: #d5d9de;

    /*
     * Rythme vertical. Les sections SANS fond portent une marge (elles
     * fusionnent entre elles), les sections AVEC fond portent un padding.
     * Valeurs maquette : 176px courant, 128px resserré ; fluides jusqu'à 390px.
     */
    /* L'échelle du rythme : standard 176, tight 112, xtight 64. */
    --lp-section-gap: clamp(88px, 12.2vw, 176px);
    --lp-section-gap-sm: clamp(72px, 7.8vw, 112px);
    --lp-section-gap-xs: clamp(48px, 4.4vw, 64px);

    /*
     * Chevauchement pré-footer / pied de page (maquette : -210px puis 298px).
     * Le pied de page part de --lp-footer-pad-top et n'ajoute le décalage que
     * sur les pages qui portent réellement un pré-footer (voir footer.css).
     */
    --lp-prefooter-overlap: clamp(120px, 14.6vw, 210px);
    --lp-footer-pad-top: clamp(48px, 5vw, 72px);
    /*
     * Sous le pré-footer, le pied de page respire davantage que son retrait
     * courant : la maquette lui donne 88px au-delà du chevauchement.
     */
    --lp-footer-offset: calc(var(--lp-prefooter-overlap) + clamp(56px, 6.1vw, 88px));

    /* Paddings verticaux des sections à fond (maquette). */
    --lp-pad-lg: clamp(72px, 7.8vw, 112px);
    --lp-pad-md: clamp(64px, 6.7vw, 96px);
    --lp-pad-sm: clamp(48px, 4.4vw, 64px);

    /* Durée et courbe communes aux transitions d'interface. */
    --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------- Ancres */

/*
 * L'en-tête est collant : sans cette réserve, toute arrivée sur une ancre
 * (« Postuler en ligne », un sommaire d'article, un retour arrière du
 * navigateur) amène la cible SOUS la barre, qui lui recouvre son titre.
 *
 * Posé sur la page entière plutôt qu'ancre par ancre : le navigateur applique
 * cette réserve à tout défilement vers une cible, présente ou future, sans
 * qu'on ait à y penser à chaque nouvelle ancre. Les quelques pixels ajoutés
 * évitent au titre d'arriver collé à la barre.
 *
 * La barre d'administration, quand elle est là, décale l'en-tête d'autant ;
 * le repli à zéro couvre le visiteur, qui ne la voit pas.
 */
html {
    scroll-padding-top: calc(
        var(--lp-header-hauteur) + var(--wp-admin--admin-bar--height, 0px) + 24px
    );
}

/* -------------------------------------------------------------------- Socle */

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

/*
 * Plusieurs blocs débordent volontairement jusqu'au bord de la fenêtre, par des
 * marges négatives calculées sur 100vw. Sans rognage, une barre de défilement
 * horizontale apparaîtrait.
 *
 * Le rognage est porté par le contenu, et non par `html, body` comme le fait la
 * maquette : un overflow sur la racine — fût-il `clip` — prend le pas sur le
 * conteneur de défilement de l'en-tête collant, qui cesse alors de coller.
 * Seul le contenu déborde, il suffit donc de le rogner lui.
 */
.leb-main {
    overflow-x: clip;
}

body {
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/*
 * Le contenu principal ne porte aucune gouttière : chaque section est
 * pleine largeur et gère son propre conteneur (voir .lenain-container).
 */
:where(.leb-main) {
    padding-inline: 0;
}

/* --------------------------------------------------------------- Conteneurs */

.lenain-container {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
    padding-inline: var(--lp-container-padding);
}

.lenain-container--wide {
    max-width: var(--wp--style--global--wide-size);
}

/* Colonne de lecture resserrée (FAQ). */
.lenain-container--narrow {
    max-width: 720px;
}

/* ------------------------------------------------ Système d'espacement (§7) */

/*
 * Ces règles portent une classe (spécificité 0,1,0) pour passer devant les
 * marges de `blockGap` générées par WordPress, sans recourir à !important.
 *
 * Ne jamais placer les sections dans un conteneur flex ou grid : la fusion des
 * marges verticales sauterait et les espaces doubleraient.
 */
/*
 * Chaque section déclare son propre écart dans une variable avant de s'en
 * servir : la dernière de la page peut ainsi le retrouver d'une seule règle,
 * quel que soit son type, là où WordPress le lui retire (voir plus bas).
 */
.lenain-section {
    --lp-gap-section: var(--lp-section-gap);

    margin-block: var(--lp-gap-section);
    padding-block: 0;
}

/* Variante resserrée : le rythme courant des blocs du site. */
.lenain-section--tight {
    --lp-gap-section: var(--lp-section-gap-sm);
}

/* Variante serrée : la bande de réassurance. */
.lenain-section--xtight {
    --lp-gap-section: var(--lp-section-gap-xs);
}

/*
 * Règle de paire, générale : deux sections SANS FOND au cran resserré qui se
 * suivent reprennent le grand rythme — deux blocs clairs d'affilée doivent
 * respirer au cran standard. Les xtight s'enchaînent tels quels, les crans
 * mixtes fusionnent naturellement, et une section à fond n'est jamais
 * concernée (marge du bloc clair + padding du coloré suffisent). Le
 * pré-footer est exclu : porte de sortie de page, il garde son token propre
 * quel que soit le bloc qui le précède. La galerie aussi : elle prolonge la
 * fiche qui la précède et reste à son token, jamais promue au grand rythme.
 */
.lenain-section--tight:not(.lenain-section--bg) + .lenain-section--tight:not(.lenain-section--bg):not(.lenain-prefooter):not(.lenain-galerie) {
    margin-block-start: var(--lp-section-gap);
}

/* Section à fond : plus de marge, un padding propre à la place. */
.lenain-section--bg {
    --lp-gap-section: 0px;

    padding-block: var(--lp-section-pad, var(--lp-pad-sm));
}


/*
 * WordPress annule la marge basse du dernier enfant d'un conteneur en flux, par
 * `:root :where(.is-layout-flow) > :last-child` — de spécificité (0,2,0). La
 * dernière section d'une page s'en trouve collée au pied de page. On lui rend
 * son écart en montant à (0,3,0), comme WordPress s'y prend lui-même.
 *
 * Le pré-footer est laissé de côté : il remonte volontairement sur le pied de
 * page, et sa marge négative lui appartient.
 */
:root .leb-main :where(.lenain-section:last-child:not(.lenain-prefooter)) {
    margin-block-end: var(--lp-gap-section);
}

/*
 * Même retrait côté haut : `:root :where(.is-layout-flow) > :first-child`
 * (0,2,0) annule la marge haute du premier bloc d'un conteneur en flux — le
 * premier bloc d'un contenu se collerait au hero. Même remède, en miroir :
 * (0,3,0) via :where, la variable de la section fait le reste. Le pré-footer
 * reste à l'écart, son rythme lui appartient.
 */
:root .leb-main :where(.lenain-section:first-child:not(.lenain-prefooter)) {
    margin-block-start: var(--lp-gap-section);
}

/*
 * WordPress ajoute une marge `blockGap` entre les enfants directs du document
 * — et du group `main`, où elle s'intercale entre hero, contenu et bandeaux.
 * Le rythme vertical est ici porté par les sections elles-mêmes : on la
 * neutralise pour que les marges fusionnent comme prévu. Les sections restent
 * à l'écart (le :where les laisse à 0,1,0) : déclarée plus bas qu'elles, la
 * règle leur volerait sinon la marge qu'elles viennent de poser.
 */
.wp-site-blocks > *,
.leb-main > :where(:not(.lenain-section)) {
    margin-block-start: 0;
}

/*
 * Pied de page collé au bas des pages courtes (mot de passe, mentions).
 * Le flex ne vit QUE sur le wrapper de page, dont les enfants sont header,
 * main et footer : jamais sur le main ni sur un conteneur de sections — la
 * fusion des marges, colonne vertébrale du rythme, ne survivrait pas.
 */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.wp-site-blocks > .leb-main {
    flex: 1 0 auto;
}

/* -------------------------------------------------------------- Utilitaires */

/*
 * Titre de section : un carré rose posé dans la gouttière, à gauche du texte.
 *
 * Le décor est ici, jamais dans le contenu : la maquette le pose en <span>
 * inline, ce qui obligerait le client à ajouter un élément à chaque titre.
 * Il suffit de porter la classe sur le titre.
 *
 * Sous 640px la gouttière tombe à 20px : le carré n'a plus la place de se
 * loger dans la marge, il passe alors au-dessus du titre (voir plus bas)
 * plutôt que de déborder de l'écran.
 */
.lenain-section-title {
    position: relative;
}

/*
 * TITRES CENTRÉS — le bandeau « centre » et la FAQ, les deux seuls du site.
 *
 * Le repère ne peut pas rester dans la gouttière : le texte étant au milieu,
 * il se retrouverait plaqué tout à gauche, à des centaines de pixels du
 * premier mot. Il passe donc EN FLUX, juste avant le texte, et se centre avec
 * lui sans qu'on ait à le lui dire. Vrai à toutes les largeurs — ce n'est pas
 * une affaire de petit écran mais de composition.
 */
.lenain-bandeau--centre .lenain-section-title::before,
.lenain-faq .lenain-section-title::before {
    position: static;
    display: inline-block;
    /*
     * 18px, soit l'écart exact des titres alignés à gauche : leur repère est
     * posé à 30 du texte et mesure 12, il en reste donc 18 de blanc. Le même
     * ici, sans quoi le repère centré paraît plus serré que tous les autres.
     */
    margin-inline-end: 18px;
    vertical-align: baseline;
    inset: auto;
}

.lenain-section-title::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--lp-titre-repere));
    top: calc(1em - 12px);
    width: 12px;
    height: 12px;
    background: var(--wp--preset--color--rose);
}

/*
 * Sur-titre de section : petites capitales en Jost, très espacées, dans le gris
 * des sur-titres — le même dessin que les `…__kicker` propres aux blocs.
 */
.lenain-kicker {
    margin: 0;
    color: var(--wp--preset--color--kicker);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
}

/*
 * Apparition au défilement.
 *
 * Ces classes sont posées par assets/js/reveal.js, jamais dans le contenu :
 * sans JavaScript, rien n'est masqué et la page reste entièrement lisible.
 */
/*
 * La transition est portée par l'état visible, jamais par l'état caché : sinon
 * l'élément anime aussi sa mise en place au chargement et paraît flotter.
 */
.lenain-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.lenain-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.9s var(--lp-ease),
        transform 0.9s var(--lp-ease);
    transition-delay: var(--lp-reveal-delay, 0ms);
}

/*
 * Les cartes métiers montent de plus loin, et plus lentement. Le décalage ne
 * vaut qu'AVANT la révélation : écrit sans :not, il l'emportait sur le
 * `transform: none` de l'état visible (même spécificité, déclaré plus haut)
 * et les cartes restaient peintes 64px sous leur boîte pour toujours —
 * débordant de la grille et faussant tout le rythme sous le bloc.
 */
.lenain-metiers-panneaux .lenain-reveal:not(.is-visible) {
    transform: translateY(64px);
}

.lenain-metiers-panneaux .lenain-reveal.is-visible {
    transition-duration: 1.1s;
}

/* Rideau qui découvre un visuel du bas vers le haut. */
.lenain-reveal-media {
    clip-path: inset(100% 0 0 0);
}

.lenain-reveal-media.is-visible {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.95s cubic-bezier(0.65, 0, 0.3, 1);
    transition-delay: var(--lp-reveal-media-delay, 0ms);
}

/*
 * Un sur-titre se lit avec le titre qu'il annonce : il s'en rapproche par une
 * marge négative, qui rattrape une partie de l'écart du conteneur. C'est la
 * mécanique de la maquette, valable aussi bien au-dessus d'un h1 que d'un h2.
 *
 * Le sélecteur couvre l'utilitaire partagé et les sur-titres propres aux blocs,
 * tous nommés `…__kicker`.
 */
.lenain-kicker,
[class*="__kicker"] {
    margin-block-end: -12px;
}

/* Masque la barre de défilement d'un carrousel horizontal. */
.lenain-scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lenain-scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* Réservé aux lecteurs d'écran. */
.lenain-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- Petits écrans */

/*
 * Le repère de titre se rapproche par paliers : la gouttière se referme, il
 * n'a plus la place de se tenir aussi loin du texte.
 */
@media (max-width: 1280px) {
    :root {
        --lp-titre-repere: 24px;
    }
}

@media (max-width: 1024px) {
    :root {
        --lp-titre-repere: 20px;
    }
}

/*
 * Sous 768px il rentre dans le texte : la gouttière ne lui laisse plus de quoi
 * se poser en dehors sans frôler le bord de l'écran. En flux INLINE et non en
 * bloc, pour qu'il suive l'alignement du titre — un bloc se rangerait au bord
 * gauche même sur les titres centrés.
 */
@media (max-width: 768px) {
    /*
     * Le repère rentre dans la boîte du titre, mais RESTE EN ABSOLU : en flux
     * inline il ne décalait que la première ligne, et les suivantes revenaient
     * au bord gauche — le titre descendait en escalier. Le retrait est donc
     * porté par le titre lui-même, de sorte que TOUTES ses lignes s'alignent,
     * et le repère se pose dans la réserve ainsi ménagée.
     */
    /*
     * Le repère rentre dans le texte : la gouttière tombée à 20px n'a plus la
     * place de l'accueillir. En flux, donc, juste avant le premier mot —
     * comme les titres centrés le font déjà à toutes les largeurs.
     *
     * `:root` en tête : les feuilles des blocs et des articles sont chargées
     * APRÈS celle-ci et posent le même sélecteur. À spécificité égale la
     * dernière l'emporte, et le repère serait resté dans la gouttière.
     */
    :root .lenain-section-title::before,
    :root .lenain-article__body .entry-content > h2::before,
    :root .lenain-fiche__content h2::before,
    :root .lenain-texte-image__content > h2::before,
    :root .lenain-texte-image__content > .leb-contenu > h2::before,
    :root .leb-main > .entry-content > :where(h2)::before {
        position: static;
        display: inline-block;
        margin-inline-end: 12px;
        vertical-align: baseline;
        inset: auto;
    }

}

@media (max-width: 640px) {
    :root {
        --lp-container-padding: 20px;
    }

    /*
     * Le carré des titres ne tient plus dans la gouttière tombée à 20px : il
     * lui en faudrait 30. Plutôt que de le supprimer — le repère rose
     * disparaîtrait alors de tout le site sur téléphone —, il quitte la marge
     * et rentre dans le texte, juste avant le premier mot.
     *
     * En flux INLINE et non en bloc : un bloc se range au bord gauche quelles
     * que soient les intentions du titre, et les titres centrés — bandeaux,
     * FAQ — se retrouvaient avec un carré orphelin à cent trente pixels de
     * leur premier mot. En inline, le repère suit l'alignement du titre sans
     * qu'on ait à le lui dire.
     */
}

/* --------------------------------------------------------- Mouvement réduit */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* --------------------------------- Blocs natifs à la racine du contenu */

/*
 * Méthode seche-ae : une page peut s'écrire sans aucun bloc du thème — un H1,
 * des paragraphes, une liste tapés à la racine du contenu. Ces blocs natifs
 * prennent d'eux-mêmes la colonne de lecture d'un article : largeur, centrage,
 * gouttières et rythme vertical. Les blocs du thème (lenain-*, leb-*) et les
 * pleine-largeur s'excluent : les pages construites ne bougent pas d'un pixel.
 *
 * L'ancrage `.leb-main > .entry-content` écarte les gabarits à colonne
 * (article, fiche de chantier), dont le conteneur porte déjà ces réglages.
 * La déclinaison éditeur vit dans editor-canvas.css : le canevas n'a ni
 * .leb-main ni .entry-content.
 */
.leb-main > .entry-content > :where(:not([class*="lenain-"]):not([class*="leb-"]):not(.alignfull)) {
    /* La géométrie du .lenain-container : un natif s'aligne au pixel sur le
       contenu des blocs designés qui l'entourent. */
    max-width: var(--wp--style--global--content-size);
    margin-block: 28px 0;
    margin-inline: auto;
    padding-inline: var(--lp-container-padding);
}

/*
 * Vues système sans sections (mot de passe, 404) : leur main, étiré par le
 * pied de page collant, peut centrer sa carte — flex STRICTEMENT limité à ces
 * vues, jamais au main global (la fusion des marges du rythme en dépend).
 */
body.lenain-password-required .leb-main,
body.error404 .leb-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ------------------------------------------------------------------- 404 */

.lenain-404 {
    max-width: 640px;
    margin-block: var(--lp-section-gap-sm);
    margin-inline: auto;
    padding-inline: var(--lp-container-padding);
    text-align: center;
}

.lenain-404__title {
    margin: 0 0 16px;
    color: var(--wp--preset--color--titre);
    font-size: var(--wp--preset--font-size--xl-3);
}

.lenain-404__text {
    margin: 0 0 32px;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.7;
}

.lenain-404 .leb-lien {
    display: flex;
    justify-content: center;
}

/* Les portes de sortie secondaires, dans la voix des sur-titres. */
.lenain-404__links {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin: 36px 0 0;
}

.lenain-404__links a {
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lenain-404__links a:hover,
.lenain-404__links a:focus-visible {
    color: var(--wp--preset--color--rose);
}

/*
 * Formulaire de mot de passe des contenus protégés : la carte centrée sur la
 * colonne de lecture, le champ et le bouton pilule de la charte.
 */
.lenain-password {
    max-width: 640px;
    margin: var(--lp-section-gap-sm) auto;
    padding: 48px 40px;
    border-radius: var(--lp-radius-lg);
    background: var(--wp--preset--color--bg);
    text-align: center;
}

.lenain-password__title {
    margin: 0 0 12px;
    color: var(--wp--preset--color--titre);
    font-size: var(--wp--preset--font-size--xl);
}

.lenain-password__text {
    max-width: 42ch;
    margin: 0 auto 28px;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.6;
}

.lenain-password__row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lenain-password__input {
    flex: 1 1 220px;
    max-width: 280px;
    padding: 12px 20px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--lp-radius-pill);
    background: var(--wp--preset--color--white);
    font: inherit;
    color: var(--wp--preset--color--text);
}

.lenain-password__input:focus-visible {
    outline: 2px solid var(--wp--preset--color--rose);
    outline-offset: 2px;
}

.lenain-password__submit {
    padding: 12px 28px;
    border: 0;
    border-radius: var(--lp-radius-pill);
    background: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--white);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--xs);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lenain-password__submit:hover,
.lenain-password__submit:focus-visible {
    background: var(--wp--preset--color--rose-dark);
}

/* La vidéo native porte le rayon des visuels, où qu'elle soit posée. */
.wp-block-video video {
    display: block;
    width: 100%;
    border-radius: var(--lp-radius-md);
}

/* Sa légende parle comme celles des images. */
.wp-block-video > figcaption {
    margin-block-start: 12px;
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.5;
    text-align: start;
}

/* La première ligne respire sous le header, la dernière avant le footer. */
.leb-main > .entry-content > :where(:not([class*="lenain-"]):not([class*="leb-"]):not(.alignfull)):first-child {
    margin-block-start: var(--lp-pad-md);
}

/*
 * WP annule la marge basse du dernier bloc (`:root :where(.is-layout-flow) >
 * :last-child`, 0,2,0) : la respiration du bas de page se réaffirme au-dessus.
 */
:root .leb-main > .entry-content > :where(:not([class*="lenain-"]):not([class*="leb-"]):not(.alignfull)):last-child {
    margin-block-end: var(--lp-pad-lg);
}

/*
 * Le H1 natif prend le gabarit des heros internes : même corps (« Titre de
 * page »), même encre. Famille, graisse, casse et espacement viennent déjà
 * des éléments globaux de theme.json.
 */
.leb-main > .entry-content > :where(h1) {
    color: var(--wp--preset--color--anthracite);
    font-size: var(--wp--preset--font-size--xl-4);
}

/*
 * Les listes natives reprennent la liste à puces carrées des blocs designés
 * (texte-image) : filets haut et bas, carré rose, mêmes retraits.
 */
.leb-main > .entry-content > :where(ul, ol) {
    /*
     * Le filet s'arrête aux bords du TEXTE, comme dans le bloc texte-image :
     * les gouttières sortent de la boîte bordée — largeur utile du texte,
     * centrée, sans padding.
     */
    width: calc(100% - var(--lp-container-padding) * 2);
    max-width: calc(var(--wp--style--global--content-size) - var(--lp-container-padding) * 2);
    padding-inline: 0;
    list-style: none;
    border-block: 1px solid var(--wp--preset--color--border-soft);
}

.leb-main > .entry-content > :where(ul, ol) > :where(li) {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--md);
}

.leb-main > .entry-content > :where(ul, ol) > :where(li)::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--wp--preset--color--rose);
}

/*
 * Les intertitres natifs prennent le style d'article : corps descendu d'un
 * cran, carré rose devant le h2. Le carré se place comme dans un article —
 * 30px avant le texte — la gouttière étant ici portée par le titre lui-même.
 */
.leb-main > .entry-content > :where(h2) {
    position: relative;
    margin-block-start: 48px;
    font-size: var(--wp--preset--font-size--xl);
    line-height: 1.45;
}

.leb-main > .entry-content > :where(h2)::before {
    content: "";
    position: absolute;
    /*
     * La gouttière étant portée par le titre lui-même, le repère se place EN
     * DEDANS : le retrait se retranche de la gouttière au lieu de s'y ajouter.
     */
    left: calc(var(--lp-container-padding) - var(--lp-titre-repere));
    top: calc(1em - 12px);
    width: 12px;
    height: 12px;
    background: var(--wp--preset--color--rose);
}

.leb-main > .entry-content > :where(h3) {
    margin-block-start: 36px;
    color: color-mix(in srgb, var(--wp--preset--color--titre) 90%, transparent);
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.45;
}

/* ------------------------- Avis Google : carte d'attente (consentement) */

/*
 * Tant que le visiteur n'a pas accepté le service Elfsight, chaque bloc
 * d'avis montre cette carte à la place du widget ; avis-consent.js la
 * retire dès l'accord. La bordure la dessine sur fond blanc comme sur les
 * sections grises, où le fond de carte se confond avec celui de la page.
 */
.lenain-avis-attente {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 24px;
    border: 1px solid var(--wp--preset--color--border-soft);
    border-radius: var(--lp-radius-md);
    background: var(--wp--preset--color--bg);
    text-align: center;
}

.lenain-avis-attente__texte {
    margin: 0;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.6;
}

.lenain-avis-attente__bouton {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lenain-avis-attente__bouton:hover,
.lenain-avis-attente__bouton:focus-visible {
    color: var(--wp--preset--color--rose);
}