/*
 * realisations.css — feuille de la rubrique Réalisations.
 *
 * Chargée depuis les vues du contrôleur Realisations, pas dans le layout : ces
 * règles ne servent nulle part ailleurs. Les composants réellement transverses
 * (pastilles, filtres, pagination) sont dans custom.css.
 *
 * Sommaire
 *   1. En-tête de rubrique
 *   2. Ruban des logos clients
 *   3. Grille et cartes
 *   4. Page de détail
 *   5. Bloc « information client »
 *   6. Galerie et visionneuse
 *   7. Responsive
 */

/* ---------------------------------------------------------------- 1. En-tête */

.realisations-entete {
    margin: 52px 0 26px;
    text-align: center;
}

.realisations-entete__titre {
    font-size: 42px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--titre);
}

.realisations-entete__chapo {
    max-width: 760px;
    margin: 16px auto 0;
    font-family: var(--corps-police);
    font-size: 17px;
    line-height: 1.65;
    color: var(--texte-doux);
}

/* ------------------------------------------------------------ 2. Logos clients */

/*
 * Le ruban défilant des logos remplace le carrousel des mises en avant : la
 * mise en avant se lit désormais dans l'ordre de la grille (voir le finder
 * `pourListe` de RealisationsTable).
 */
.realisations-logos {
    padding-bottom: 46px;
}

/* ---------------------------------------------------------------- 3. Grille et cartes */

.liste-realisations {
    margin-top: 4px;
}

.liste-realisations__vide {
    padding: 48px 0;
    text-align: center;
    font-family: var(--corps-police);
    color: var(--texte-clair);
}

/*
 * Colonnes fluides : la grille se recompose seule selon la largeur, et
 * `grid-auto-rows: 1fr` aligne les cartes d'une même rangée sur la plus haute.
 */
.grille-cartes-realisations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 26px;
}

.carte-realisation {
    display: flex;
    height: 100%;
    border: 1px solid var(--bordure-2);
    border-radius: var(--rayon-l);
    overflow: hidden;
    background: var(--fond);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.carte-realisation:hover {
    transform: translateY(-4px);
    border-color: var(--bleu);
    box-shadow: 0 18px 40px rgba(3, 57, 95, .12);
}

/* Le lien couvre toute la carte : le titre n'a donc pas de lien propre. */
.carte-realisation__lien {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Hauteur fixe plutôt que ratio : les visuels des projets sont hétérogènes. */
.carte-realisation__visuel {
    height: 210px;
    flex: none;
    background: var(--fond-gris);
    overflow: hidden;
}

.carte-realisation__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.carte-realisation:hover .carte-realisation__visuel img {
    transform: scale(1.04);
}

.carte-realisation__visuel-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 30px;
    color: var(--bordure-tiret);
}

.carte-realisation__corps {
    display: flex;
    flex-direction: column;
    padding: 22px;
    flex: 1;
}

.carte-realisation__categorie {
    font-family: var(--titre-police);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bleu);
}

.carte-realisation__titre {
    margin-top: 9px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--titre);
}

.carte-realisation:hover .carte-realisation__titre {
    color: var(--bleu-fonce);
}

.carte-realisation__extrait {
    margin-top: 8px;
    font-family: var(--corps-police);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--texte-doux);
}

/* Poussées en bas de carte : les étiquettes s'alignent d'une carte à l'autre. */
.carte-realisation__etiquettes {
    margin-top: auto;
    padding-top: 14px;
    gap: 6px;
}

.carte-realisation__etiquettes .etiquettes__item {
    font-size: 11.5px;
    padding: 5px 10px;
}

.carte-realisation--compacte .carte-realisation__visuel {
    height: 170px;
}

/* ---------------------------------------------------------------- 4. Page de détail */

/* Titre et accroche à gauche, logo du client à droite. */
.realisation-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin: 22px 0 0;
}

.realisation-entete__texte {
    min-width: 0;
}

.realisation-entete__titre {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.realisation-entete__intro {
    margin-top: 16px;
    max-width: 720px;
    font-family: var(--corps-police);
    font-size: 17px;
    line-height: 1.7;
    color: var(--texte-doux);
}

/*
 * Emplacement du logo client. Il est positionné et dimensionné même vide :
 * c'est ce qui permet au repère `visuel-attente` de s'y poser sans que la page
 * bouge le jour où le logo est renseigné en base.
 */
.realisation-entete__logo {
    position: relative;
    flex: none;
    width: 300px;
    height: 164px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rayon-l);
    overflow: hidden;
}

.realisation-entete__logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Visuel principal en regard de la fiche projet, qui s'étire à sa hauteur. */
.realisation-presentation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    align-items: stretch;
    margin-top: 22px;
}

/*
 * Visuel recadré en 16/9 quelle que soit l'image déposée : le bloc reste bas.
 * `align-self` l'empêche de s'étirer à la hauteur de la fiche quand celle-ci
 * est plus haute que lui.
 */
.realisation-visuel {
    align-self: start;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: var(--rayon-l);
    overflow: hidden;
    border: 1px solid var(--bordure-2);
    background: var(--fond-gris);
}

.realisation-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le récit du projet, sur deux colonnes. */
.realisation-projet {
    margin-top: 30px;
}

.realisation-projet__titre {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.realisation-projet__colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 16px;
}

.contenu-riche {
    font-family: var(--corps-police);
    font-size: 16px;
    line-height: 1.75;
    color: var(--texte-doux);
}

.contenu-riche h2 {
    margin: 36px 0 14px;
    font-size: 26px;
    line-height: 1.25;
}

.contenu-riche h3 {
    margin: 28px 0 12px;
    font-size: 20px;
}

.contenu-riche h4 {
    margin: 24px 0 10px;
    font-size: 17.5px;
}

.contenu-riche p {
    margin-bottom: 18px;
}

.contenu-riche ul,
.contenu-riche ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.contenu-riche li {
    margin-bottom: 8px;
}

.contenu-riche img {
    border-radius: var(--rayon);
}

.realisation-objectifs__chapo {
    font-family: var(--corps-police);
    font-size: 16px;
    line-height: 1.75;
    color: var(--texte-doux);
    font-weight: 700;
}

.realisation-objectifs__liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.realisation-objectifs__element {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--corps-police);
    font-size: 16px;
    line-height: 1.75;
    color: var(--texte-doux);
}

.realisation-objectifs__element i {
    margin-top: 5px;
    color: var(--vert);
}

/* ---------------------------------------------------------------- 5. Fiche projet */

/*
 * Carte bleu nuit posée à droite du visuel. Elle s'étire sur toute la hauteur
 * de la rangée, ce qui pousse le logo du client en pied de carte.
 */
.fiche-projet {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    padding: 28px 24px;
    border-radius: var(--rayon-xl);
    background: var(--bleu-nuit);
}

.fiche-projet__titre {
    font-size: 19px;
    font-weight: 800;
    color: #FFFFFF;
}

.fiche-projet__liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.fiche-projet__ligne {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fiche-projet__icone {
    flex: none;
    width: 18px;
    margin-top: 3px;
    text-align: center;
    color: var(--bleu-ciel);
    font-size: 15px;
}

.fiche-projet__libelle {
    font-family: var(--titre-police);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bleu-ciel);
}

.fiche-projet__valeur {
    margin: 3px 0 0;
    font-family: var(--titre-police);
    font-size: 15.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.fiche-projet__separateur {
    width: 200px;
    max-width: 100%;
    height: 1px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .22);
}

.fiche-projet__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.fiche-projet__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 35px;
    padding: 0 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-family: var(--corps-police);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .2s ease;
}

.fiche-projet__tag:hover {
    background: rgba(255, 255, 255, .24);
    color: #FFFFFF;
}

.fiche-projet__tag i {
    color: #FF8177;
    font-size: 12.5px;
}

.fiche-projet__lien {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
}

/*
 * Marque Synertic poussée en pied de carte par `margin-top: auto`, comme sur
 * la maquette : un carré de 42 px, centré.
 */
.fiche-projet__logo {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

.fiche-projet__logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    opacity: .9;
}


/* ---------------------------------------------------------------- 6. Galerie */

.galerie {
    margin-top: 20px;
}

.galerie__titre {
    margin-bottom: 22px;
    font-size: 24px;
}

/*
 * La galerie est un carrousel partagé (custom.css) à quatre visuels par vue.
 * Les largeurs sont reprises ici à chaque palier : la feuille de rubrique est
 * chargée après custom.css et l'emporterait sinon sur ses media queries.
 */
.galerie__piste {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.galerie__piste > * {
    flex-basis: calc((100% - 3 * 22px) / 4);
}

/* Puces utiles seulement là où quatre visuels ne tiennent plus de front. */
.galerie__puces--mobile {
    display: none;
}

.galerie__vignette {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--bordure-2);
    border-radius: var(--rayon-l);
    overflow: hidden;
    background: var(--fond-gris);
    cursor: zoom-in;
}

.galerie__vignette img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.galerie__vignette:hover img {
    transform: scale(1.05);
}

.galerie__loupe {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 57, 95, .38);
    color: #FFFFFF;
    font-size: 22px;
    opacity: 0;
    transition: opacity .25s ease;
}

.galerie__vignette:hover .galerie__loupe,
.galerie__vignette:focus-visible .galerie__loupe {
    opacity: 1;
}

.galerie__legende {
    margin-top: 8px;
    font-family: var(--corps-police);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--texte-clair);
}

/* Visionneuse plein écran */

.visionneuse {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.visionneuse[hidden] {
    display: none;
}

.visionneuse__voile {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 30, .92);
}

.visionneuse__cadre {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    margin: 0;
    z-index: 2;
}

.visionneuse__image {
    max-width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: var(--rayon);
    background: #FFFFFF;
}

.visionneuse__legende {
    font-family: var(--corps-police);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: var(--sur-sombre);
}

.visionneuse__legende:empty {
    display: none;
}

.visionneuse__fermer,
.visionneuse__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    cursor: pointer;
    transition: background .2s ease;
    z-index: 3;
}

.visionneuse__fermer:hover,
.visionneuse__nav:hover {
    background: rgba(255, 255, 255, .26);
}

.visionneuse__fermer {
    top: 22px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 20px;
}

.visionneuse__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 20px;
}

.visionneuse__nav--precedent {
    left: 24px;
}

.visionneuse__nav--suivant {
    right: 24px;
}

.visionneuse__compteur {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--corps-police);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--sur-sombre-pale);
    z-index: 3;
}

/* Le défilement de la page est neutralisé tant que la visionneuse est ouverte. */
body.a-visionneuse-ouverte {
    overflow: hidden;
}

/* ------------------------------------------------------ Autres réalisations */

/*
 * Bandeau bleu pastel fermant la page : le fond court sur toute la largeur, le
 * contenu suit le cadrage des pages.
 */
.bandeau-realisations {
    margin-top: 70px;
    background: var(--bleu-pastel);
    padding: 54px 0;
}

.bandeau-realisations__titre {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #182430;
}

.bandeau-realisations .section__entete-ligne {
    margin-bottom: 26px;
}

/* Sur fond pastel, les cartes doivent rester franchement blanches. */
.bandeau-realisations .carte-realisation {
    background: var(--fond);
}

/* ---------------------------------------------------------------- 7. Responsive */

@media (max-width: 1024px) {
    .realisation-entete {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .realisation-entete__logo {
        width: 100%;
        justify-content: flex-start;
    }

    .realisation-entete__logo img {
        max-height: 110px;
    }

    .realisation-presentation,
    .realisation-projet__colonnes {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bandeau-realisations {
        margin-top: 48px;
        padding: 40px 0;
    }
}

@media (max-width: 768px) {
    .realisations-entete {
        margin-top: 36px;
    }

    .realisations-entete__titre {
        font-size: 32px;
    }

    .realisation-entete__titre {
        font-size: 30px;
    }

    .realisation-entete__intro {
        font-size: 16px;
    }

    .visionneuse__nav {
        width: 44px;
        height: 44px;
    }

    .visionneuse__nav--precedent {
        left: 10px;
    }

    .visionneuse__nav--suivant {
        right: 10px;
    }
}

@media (max-width: 520px) {
    .grille-cartes-realisations {
        grid-template-columns: 1fr;
    }
}

/* Paliers du carrousel de la galerie, alignés sur ceux du carrousel partagé. */
@media (max-width: 991.98px) {
    .galerie__piste > * {
        flex-basis: calc((100% - 22px) / 2);
    }

    .galerie__puces--mobile {
        display: flex;
    }
}

@media (max-width: 575.98px) {
    .galerie__piste > * {
        flex-basis: 88%;
    }
}