/* ==========================================================================
   Photos de chantier, cartes de réalisation et fiche détaillée
   ========================================================================== */

/* Le cadrage d'origine est conservé : `aspect-ratio` reprend les dimensions
   réelles du fichier, transmises en variable par le composant. La place est
   donc réservée avant l'arrivée de l'image, sans rien rogner. */
.photo-reelle {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--pr-ratio, 4 / 3);
    object-fit: cover;
    background: var(--c-border);
}

/* ==========================================================================
   Carte de réalisation
   ========================================================================== */
.rea-card {
    position: relative;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-12);
    overflow: hidden;
}

.rea-card:hover {
    border-color: var(--c-blue);
}

/* Aucun plafond de hauteur : la photo est montrée ENTIÈRE, dans son cadrage
   d'origine. Les hauteurs de carte varient donc d'une réalisation à l'autre —
   c'est assumé, et c'est la raison pour laquelle la galerie est disposée en
   colonnes (mosaïque) plutôt qu'en grille : les cartes s'empilent sans laisser
   de trous. */
.rea-card__media {
    display: block;
}

.rea-card__corps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: var(--sp-15);
}

.rea-card__titre {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}

/* Le lien ne porte QUE le titre — c'est lui qui sera annoncé au lecteur
   d'écran — mais sa zone cliquable est étendue à toute la carte. */
.rea-card__lien {
    color: var(--c-heading);
    text-decoration: none;
}

.rea-card__lien::after {
    content: '';
    position: absolute;
    inset: 0;
}

.rea-card__lien:hover {
    color: var(--c-blue);
}

/* Le focus doit cerner la carte entière, pas seulement le texte du titre. */
.rea-card:has(.rea-card__lien:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.rea-card__lien:focus-visible {
    outline: none;
}

/* Texte courant de la carte : 16 px sur mobile comme le reste du corps de
   page, pas la taille « méta » réservée aux dates et aux libellés. */
.rea-card__resume {
    margin: 0;
    color: var(--c-muted);
    line-height: 1.5;
}

.rea-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    margin-top: auto;
    padding-top: var(--sp-6);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-blue);
}

/* ==========================================================================
   Grilles
   ========================================================================== */
/* La galerie est en COLONNES, pas en grille : les photos gardent leur cadrage
   d'origine, donc les cartes n'ont pas la même hauteur. Une grille laisserait
   des trous sous les cartes courtes ; les colonnes les empilent au plus près. */
.galerie {
    columns: 1;
    column-gap: var(--sp-15);
    margin: 0;
    padding: 0;
    list-style: none;
}

.galerie > li {
    /* Sans cela, une carte peut être coupée en deux entre deux colonnes. */
    break-inside: avoid;
    margin-bottom: var(--sp-15);
}

.realisations__apercu {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-15);
    margin: var(--sp-13) 0 0;
    padding: 0;
    list-style: none;
    align-items: start;
}

.galerie__note {
    margin-top: var(--sp-20);
    color: var(--c-muted);
}

.realisations__lien {
    margin-top: var(--sp-15);
    font-size: var(--fs-meta);
}

.realisations__lien a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: var(--tap-min);
    font-weight: 600;
    text-decoration: underline;
}

/* ==========================================================================
   Réalisation en ligne — photo d'un côté, descriptif de l'autre
   ========================================================================== */
.rea-lignes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-34);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rea-row {
    position: relative;
    display: grid;
    gap: var(--sp-15);
}

.rea-row__media .photo-reelle {
    border-radius: var(--r-12);
}

.rea-row__corps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-11);
}

.rea-row__titre {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
}

/* Le lien ne porte que le titre — c'est ce libellé qui sera annoncé — mais sa
   zone cliquable couvre toute la ligne. */
.rea-row__lien {
    color: var(--c-heading);
    text-decoration: none;
}

.rea-row__lien::after {
    content: '';
    position: absolute;
    inset: 0;
}

.rea-row__lien:hover {
    color: var(--c-blue);
}

.rea-row:has(.rea-row__lien:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--r-12);
}

.rea-row__lien:focus-visible {
    outline: none;
}

.rea-row__resume {
    margin: 0;
    color: var(--c-muted);
    line-height: 1.55;
}

.rea-row__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    margin-top: auto;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-blue);
}

/* ---- Chantier mis en avant sur l'accueil --------------------------------- */
.realisations__vedette {
    display: grid;
    gap: var(--sp-15);
    margin-top: var(--sp-15);
}

.realisations__vedette .photo-reelle {
    border-radius: var(--r-12);
}

.realisations__argument {
    margin: 0;
    color: var(--c-body);
    line-height: 1.55;
}

.realisations__cta {
    margin-top: var(--sp-20);
}

/* ==========================================================================
   Fiche détaillée
   ========================================================================== */
.rea-detail {
    display: grid;
    gap: var(--sp-20);
    margin-top: var(--sp-15);
}

/* Largeur bornée : sans plafond, une photo portrait (1179 × 1935) occupant
   toute la colonne dépasserait 1 100 px de haut et écraserait le descriptif
   posé à côté. On limite la largeur plutôt que de recadrer — la photo reste
   entière. */
.rea-detail__media {
    max-inline-size: 560px;
}

.rea-detail__media .photo-reelle {
    border-radius: var(--r-12);
}

.rea-detail__soustitre {
    margin-top: var(--sp-20);
    font-size: 17px;
}

.liste-tirets {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    margin: var(--sp-11) 0 0;
    padding: 0;
    list-style: none;
    color: var(--c-body);
}

.liste-tirets li {
    display: flex;
    gap: var(--sp-9);
}

.liste-tirets__marque {
    flex: none;
    color: var(--c-green);
    font-weight: 700;
}

.rea-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    margin-top: var(--sp-20);
}

.rea-detail__service {
    margin-top: var(--sp-15);
    font-size: var(--fs-meta);
    color: var(--c-muted);
}

/* Cible tactile pleine hauteur au doigt, sans creuser de blanc dans le
   paragraphe : la marge négative compense la hauteur ajoutée. */
.rea-detail__service a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-block: calc((var(--tap-min) - 1.4em) / -2);
    text-decoration: underline;
}

@media (pointer: fine) {
    .rea-detail__service a {
        min-height: 0;
        margin-block: 0;
    }
}

/* ---- Fil d'Ariane -------------------------------------------------------- */
.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6);
    margin-bottom: var(--sp-11);
    font-size: var(--fs-label);
    color: var(--c-label);
}

/* Cible tactile pleine hauteur au doigt. La marge négative agrandit la zone
   cliquable sans creuser de blanc sous le fil. */
.fil-ariane a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-block: calc((var(--tap-min) - 1.4em) / -2);
}

@media (pointer: fine) {
    .fil-ariane a {
        min-height: 0;
        margin-block: 0;
    }
}

.page-intro {
    margin-top: var(--sp-11);
    max-inline-size: 65ch;
    color: var(--c-muted);
}

/* ==========================================================================
   Paliers
   ========================================================================== */
@media (min-width: 560px) {
    .galerie {
        columns: 2;
    }

    .realisations__apercu {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .galerie {
        columns: 3;
        column-gap: var(--sp-18);
    }

    .galerie > li {
        margin-bottom: var(--sp-18);
    }

    /* Deux colonnes, texte centré verticalement en face de la photo. */
    .rea-row,
    .realisations__vedette {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-26);
        align-items: center;
    }

    /*
       L'alternance replace les COLONNES, elle ne réordonne pas le HTML :
       l'ordre de lecture au clavier et au lecteur d'écran reste le même sur
       toutes les lignes, et sur mobile où tout s'empile.
    */
    .rea-row--inverse .rea-row__media {
        grid-column: 2;
        grid-row: 1;
    }

    .rea-row--inverse .rea-row__corps {
        grid-column: 1;
        grid-row: 1;
    }

    /* Largeur des photos bornée : les originaux sont conservés entiers, donc
       un portrait 1200 × 1600 occupant toute la colonne ferait deux fois la
       hauteur de son descriptif. La brider limite le blanc à côté du texte
       sans rien recadrer. */
    .realisations__vedette .rea-row__media,
    .rea-row__media {
        max-inline-size: 460px;
    }

    /* Photo collée à la gouttière centrale plutôt que perdue au bord. */
    .rea-row__media {
        justify-self: end;
    }

    .rea-row--inverse .rea-row__media {
        justify-self: start;
    }

    .realisations__apercu {
        max-inline-size: 660px;
    }

    .rea-detail {
        grid-template-columns: 1.15fr 1fr;
        gap: var(--sp-26);
        align-items: start;
    }

    .rea-detail__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}