/**
 * Réalisations.
 *
 * Préfixe : .lenain-realisations
 * Quatre affichages : --detailed (accueil : pastille du métier + légende),
 * --plain (pages métiers : la photo seule), --carrefour (archive : toutes les
 * réalisations, filtres, compteur et bouton « charger plus ») et
 * --recommandation (suggestion en bas d'un single). Le squelette est commun,
 * seuls les ornements changent.
 */

.lenain-realisations__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.lenain-realisations__title {
    margin: 0;
    max-width: 420px;
}

/*
 * L'inner espace ses enfants de 48px ; l'intro colle au titre qu'elle
 * prolonge, la marge négative ramène l'écart à 16px.
 */
.lenain-realisations__intro {
    margin: -32px 0 0;
    max-width: 640px;
    color: var(--wp--preset--color--text-soft);
}

.lenain-realisations__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lenain-realisations__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    min-width: 0;
}

/* --------------------------------------------------------------- Le visuel */

.lenain-realisations__media {
    position: relative;
    display: block;
    /*
     * Le RAPPORT de la maquette — 389 de large pour 340 de haut sur une
     * colonne de 1280 —, et non une hauteur par palier : la photo garde ainsi
     * le même format à toutes les largeurs, au lieu de s'aplatir ou de
     * s'allonger au gré des replis de la grille.
     */
    aspect-ratio: 389 / 340;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--lp-radius-md);
    background: var(--wp--preset--color--border);
}

.lenain-realisations__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lenain-realisations__item:hover .lenain-realisations__image,
.lenain-realisations__item:focus-visible .lenain-realisations__image,
.lenain-realisations__media:focus-visible .lenain-realisations__image {
    transform: scale(1.03);
}

.lenain-realisations__caption {
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--base);
}

/* -------------------------------------------- Cartes de réalisation (pastille) */

/* Voile blanc qui monte au survol, sous la pastille. */
.lenain-realisations__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in srgb, var(--wp--preset--color--white) 34%, transparent);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.lenain-realisations__item:hover .lenain-realisations__media::after,
.lenain-realisations__media:focus-visible::after,
.lenain-realisations__item:focus-visible .lenain-realisations__media::after {
    opacity: 1;
}

/*
 * Pastille du métier. Règle d'emploi : sur une carte de réalisation, le
 * pictogramme est en COULEUR au repos, sur une plaque blanche. Au survol la
 * pastille se soulève, la plaque passe en anthracite et le pictogramme bascule
 * vers sa version blanche.
 */
.lenain-realisations__chip {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    width: 52px;
    height: 52px;
    transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.4, 1);
}

.lenain-realisations__item:hover .lenain-realisations__chip,
.lenain-realisations__item:focus-visible .lenain-realisations__chip,
.lenain-realisations__media:focus-visible .lenain-realisations__chip {
    transform: translateY(-4px);
}

/*
 * Le pictogramme blanc se superpose à la plaque : sans rang d'empilement, il
 * resterait dessous — la plaque est un élément du contenu, donc peinte après
 * le pseudo-élément — et le survol ne montrerait qu'un carré anthracite vide.
 */
.lenain-realisations__chip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    margin: auto;
    background-color: var(--wp--preset--color--white);
    -webkit-mask: var(--lp-icon-mask) center / contain no-repeat;
    mask: var(--lp-icon-mask) center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lenain-realisations__item:hover .lenain-realisations__chip::before,
.lenain-realisations__item:focus-visible .lenain-realisations__chip::before,
.lenain-realisations__media:focus-visible .lenain-realisations__chip::before {
    opacity: 1;
}

.lenain-realisations__chip-bg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius-sm);
    background: var(--wp--preset--color--white);
    transition: background-color 0.35s ease;
}

/* La plaque ne s'efface pas : elle change de fond. */
.lenain-realisations__item:hover .lenain-realisations__chip-bg,
.lenain-realisations__item:focus-visible .lenain-realisations__chip-bg,
.lenain-realisations__media:focus-visible .lenain-realisations__chip-bg {
    background: var(--wp--preset--color--anthracite);
}

.lenain-realisations__chip-bg :where(img) {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: opacity 0.35s ease;
}

/* Le pictogramme bichrome cède la place à sa version blanche. */
.lenain-realisations__item:hover .lenain-realisations__chip-bg :where(img),
.lenain-realisations__item:focus-visible .lenain-realisations__chip-bg :where(img),
.lenain-realisations__media:focus-visible .lenain-realisations__chip-bg :where(img) {
    opacity: 0;
}

/* ------------------------------------------ Page carrefour et suggestions */

/* La maquette aère les rangées : la légende doit respirer sous chaque photo. */
.lenain-realisations--carrefour .lenain-realisations__grid {
    row-gap: 48px;
}

/*
 * La carte entière est un lien (visuel + légende), comme dans la maquette :
 * le titre du chantier est donc cliquable, pas seulement la photo.
 */
.lenain-realisations--carrefour .lenain-realisations__item,
.lenain-realisations--recommandation .lenain-realisations__item {
    color: var(--wp--preset--color--text);
    text-decoration: none;
}

.lenain-realisations--carrefour .lenain-realisations__item:focus-visible,
.lenain-realisations--recommandation .lenain-realisations__item:focus-visible {
    outline: 2px solid var(--wp--preset--color--rose);
    outline-offset: 6px;
    border-radius: var(--lp-radius-sm);
}

/* La maquette rapproche la pastille du coin sur la page carrefour. */
.lenain-realisations--carrefour .lenain-realisations__chip {
    right: 16px;
    bottom: 16px;
}

.lenain-realisations--carrefour .lenain-realisations__caption,
.lenain-realisations--recommandation .lenain-realisations__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 4px;
}

.lenain-realisations__caption-title {
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--base);
}

/* Ligne secondaire : la commune du chantier. */
.lenain-realisations__place {
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.06em;
}

/* --------------------------------------------------- Suggestions (« reco ») */

/*
 * Pas de pastille sur ces cartes : le métier se lit en tête du titre, et le
 * pictogramme est monté sur le titre de section (voir plus bas).
 */
.lenain-realisations__caption-metier {
    color: var(--wp--preset--color--rose);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Une espace insécable typographique entre le métier et le titre. */
.lenain-realisations__caption-metier::after {
    content: " · ";
    color: var(--wp--preset--color--border-soft);
    font-weight: 400;
    letter-spacing: 0;
}

/* ------------------------------------------ Pictogramme du titre de section */

/*
 * Le pictogramme REMPLACE le carré rose de `.lenain-section-title` : il prend
 * sa place dans la gouttière et dit de quel métier relèvent les chantiers
 * montrés. Deux pseudo-éléments, jamais deux marques à la fois.
 */
/* Deux classes : le carré commun est déclaré avec la même force, ailleurs. */
.lenain-realisations__title.lenain-realisations__title--icon::before {
    content: none;
}

/*
 * Le pictogramme demandait 44px de gouttière — le carré rose n'en demande que
 * 30 — alors que le conteneur n'en offre que 40 dès que la fenêtre descend
 * sous 1368px. Il était donc rogné par le bord de l'écran de 641 à 1200px,
 * là où personne ne l'avait regardé. Ramené à 26px posés à 38 de retrait, il
 * garde le même écart au texte qu'avant et rentre dans la gouttière.
 */
.lenain-realisations__title--icon::after {
    content: "";
    position: absolute;
    /*
     * Aligné par la DROITE sur le carré rose, pas par la gauche. Les deux
     * repères partagent la même gouttière, mais celui-ci est plus large : au
     * même retrait, il finirait quatorze pixels plus près du texte et
     * paraîtrait collé. On l'écarte donc de sa propre surlargeur.
     *
     * Le `min()` est la sécurité : le retrait idéal — 44px au large — dépasse
     * la gouttière de 40, et le pictogramme sortait de l'écran de 641 à
     * 1200px. On ne descend jamais sous deux pixels du bord.
     */
    inset-inline-start: calc(-1 * min(
        var(--lp-titre-repere) + 14px,
        max(
            var(--lp-container-padding),
            (100vw - var(--wp--style--global--content-size)) / 2
        ) - 2px
    ));
    top: calc(0.62em - 13px);
    width: 26px;
    height: 26px;
    background: var(--lp-title-icon) center / contain no-repeat;
}

/*
 * Le pictogramme rentre dans le texte plus tôt que le carré rose : il est
 * large de 26px quand celui-ci en fait 12, et le retrait n'en offre plus que
 * 20 dès 1024px. Il passe alors sur le ::before, seul à pouvoir précéder le
 * titre, et le ::after s'efface — jamais deux marques.
 */
/*
 * Sous 768px, même bascule que le carré rose (custom.css, « Petits écrans ») :
 * la gouttière tombe à 20px et ne peut plus recevoir le repère. Il rentre dans
 * le texte, porté par le ::before — seul à pouvoir précéder le titre — et le
 * ::after s'efface. Jamais deux marques.
 */
@media (max-width: 768px) {
    .lenain-realisations__title.lenain-realisations__title--icon::before {
        content: "";
        position: static;
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-inline-end: 12px;
        vertical-align: baseline;
        inset: auto;
        background: var(--lp-title-icon) center / contain no-repeat;
    }

    .lenain-realisations__title--icon::after {
        content: none;
    }
}


/* ------------------------------------------------------------- Filtres */

.lenain-realisations__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.lenain-realisations__filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /*
     * Hauteur commune : le filtre « Toutes » n'a pas de pictogramme pour la
     * porter, et se retrouverait plus bas que les autres. L'état actif ne
     * touche qu'aux couleurs, jamais à la boîte.
     */
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-pill);
    background: var(--wp--preset--color--white);
    /* Bleu de la charte au repos ; l'anthracite est réservé au filtre actif. */
    color: var(--wp--preset--color--bleu);
    font-family: var(--wp--preset--font-family--body);
    /* Corps exact de la maquette — 12.5px, entre xxs et xs. */
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

/*
 * Le pictogramme du métier est du décor : il vient des variables posées par
 * render.php. Cotes de la maquette : icône de 20px sur une plaque de 26
 * (padding 3), qui déborde du padding vertical par ses marges négatives sans
 * grandir le chip. Le filtre « Toutes » n'en a pas.
 */
.lenain-realisations__filter::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-block: -3px;
    margin-inline-start: -6px;
    border-radius: 5px;
    background-color: var(--wp--preset--color--white);
    background-image: var(--lp-filter-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.lenain-realisations__filter--all::before {
    content: none;
}

/* État actif : anthracite plein. */
.lenain-realisations__filter[aria-pressed="true"] {
    border-color: var(--wp--preset--color--anthracite);
    background: var(--wp--preset--color--anthracite);
    color: var(--wp--preset--color--white);
}

/*
 * Au survol, le chip prend d'emblée le rendu actif — anthracite plein, texte
 * et pictogramme blancs — comme les cartes de réalisations de la même page.
 */
.lenain-realisations__filter[aria-pressed="false"]:hover,
.lenain-realisations__filter[aria-pressed="false"]:focus-visible {
    border-color: var(--wp--preset--color--anthracite);
    background: var(--wp--preset--color--anthracite);
    color: var(--wp--preset--color--white);
}

/* Sur l'aplat anthracite, la plaque s'efface et le pictogramme passe en blanc. */
.lenain-realisations__filter[aria-pressed="true"]::before,
.lenain-realisations__filter[aria-pressed="false"]:hover::before,
.lenain-realisations__filter[aria-pressed="false"]:focus-visible::before {
    background-color: transparent;
    background-image: var(--lp-filter-icon-white, var(--lp-filter-icon));
}

.lenain-realisations__filter[aria-pressed="true"]:hover,
.lenain-realisations__filter[aria-pressed="true"]:focus-visible {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--titre) 24%, transparent);
}

/* --------------------------------------------- Compteur et « charger plus » */

/*
 * Carte mise à l'écart par view.js. La règle porte deux classes (0,2,0) pour
 * passer devant le `display:flex` de .lenain-realisations__item.
 */
.lenain-realisations .lenain-realisations__item--hidden {
    display: none;
}

/* La maquette écarte nettement ce groupe de la dernière rangée de cartes. */
.lenain-realisations__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.lenain-realisations__count {
    margin: 0;
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
}

/*
 * Bouton de la maquette : contour bleu, pastille bleue, flèche blanche.
 * Deux classes (0,2,0) : `.leb-cta` pose ses propres variables au même niveau
 * (0,1,0) depuis une autre feuille, dont l'ordre de chargement n'est pas garanti.
 */
/*
 * Bouton à contour discret, comme celui du mag : seul le contour bouge au
 * survol, en se refermant sur l'anthracite.
 */
.lenain-realisations .lenain-realisations__more {
    --lp-cta-bg: var(--wp--preset--color--white);
    --lp-cta-bg-hover: var(--wp--preset--color--white);
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--anthracite);
    --lp-cta-dot: var(--wp--preset--color--border);
    --lp-cta-arrow: var(--wp--preset--color--anthracite);
    --lp-cta-border: var(--lp-border-strong);
    --lp-cta-border-hover: var(--wp--preset--color--anthracite);

    padding-right: 26px;
}

/* La flèche pointe vers le bas : c'est la suite de la liste qu'on appelle. */
.lenain-realisations .lenain-realisations__more::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Deux classes (0,2,0) pour passer devant le `display:inline-flex` de .leb-cta. */
.lenain-realisations .lenain-realisations__more--hidden {
    display: none;
}

/* Message d'absence de résultat : posé par view.js, jamais dans le contenu. */
.lenain-realisations__empty {
    display: none;
    margin: 0;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--base);
}

.lenain-realisations .lenain-realisations__empty--visible {
    display: block;
}

/* ----------------------------------------------- Aperçu éditeur (bloc vide) */

/*
 * Aucune réalisation en base : l'éditeur montre la structure réelle avec des
 * visuels muets, pour que la mise en page reste lisible.
 */
.lenain-realisations--preview .lenain-realisations__media {
    background: repeating-linear-gradient(
        -45deg,
        var(--wp--preset--color--border) 0 12px,
        var(--wp--preset--color--bg) 12px 24px
    );
}

.lenain-realisations--preview .lenain-realisations__caption {
    color: var(--wp--preset--color--text-soft);
    font-style: italic;
}

/* ------------------------------------------------ Dernière section d'une page */

/*
 * Un bloc de suggestion ferme souvent la page. WordPress annule la marge basse
 * du dernier enfant d'un flux (`:root :where(.is-layout-flow) > :last-child`,
 * (0,2,0)) : le pied de page viendrait alors se coller aux cartes. On repasse
 * devant en montant à (0,3,0), comme WordPress le fait lui-même, plutôt qu'en
 * forçant la priorité de la règle.
 */
:root .lenain-realisations.lenain-section--tight:last-child {
    margin-block-end: var(--lp-section-gap-sm);
}

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

/*
 * Sous 1024px, trois colonnes deviennent trop étroites pour leurs légendes :
 * la grille passe à deux, et la première réalisation prend la ligne entière.
 * Elle se lit alors comme une mise en avant, au lieu de la rangée bancale
 * « deux puis une » que donnait une simple grille à deux colonnes.
 */
@media (max-width: 1024px) {
    .lenain-realisations__inner {
        gap: 32px;
    }

    .lenain-realisations__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lenain-realisations__grid > :first-child {
        grid-column: 1 / -1;
    }

    /*
     * Dès que la grille empile des rangées, l'écart de 16px ne suffit plus :
     * la légende d'une carte se retrouve à la même distance de sa propre photo
     * que de celle d'en dessous, et les deux se confondent. L'écart horizontal,
     * lui, ne change pas — il sépare des colonnes, pas des cartes entières.
     */
    .lenain-realisations__grid {
        row-gap: 40px;
    }
}

/*
 * Seule la mise en avant change de format : sur une ligne entière, le rapport
 * des cartes lui donnerait une photo démesurément haute. Elle reprend celui
 * des autres dès que la grille passe en colonne et qu'elle cesse d'être mise
 * en avant — d'où la borne basse.
 */
@media (min-width: 641px) and (max-width: 1024px) {
    .lenain-realisations__grid > :first-child .lenain-realisations__media {
        aspect-ratio: 12 / 5;
    }
}

@media (max-width: 640px) {
    .lenain-realisations__grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .lenain-realisations__chip {
        right: 16px;
        bottom: 16px;
    }

    .lenain-realisations__filters {
        gap: 8px;
    }

    .lenain-realisations__filter {
        padding: 9px 16px;
    }
}

/* Sur fond gris (l'accueil), la section respire au retrait de la maquette. */
.lenain-realisations.lenain-section--bg {
    --lp-section-pad: var(--lp-pad-lg);

    background: var(--wp--preset--color--bg);
}