/**
 * ================================================================
 * FICHIER : Realisations.css
 * EMPLACEMENT : 2027_B2B/pages/Realisations/Realisations.css
 * SHORT_DESC : Styles de l'index des réalisations (portfolio filtrable)
 * DESCRIPTION : Héros à deux colonnes (proportion 1,618), filtres en puces, grille fluide
 *               de cartes éditoriales, carte vedette, appel à l'action. Jetons du thème
 *               uniquement, rayons 2 px maximum, aucune largeur fixe.
 *
 * SOMMAIRE :
 *   - HERO_REALISATIONS
 *   - FILTRES
 *   - GRILLE_CARTES
 *   - CARTE_VEDETTE
 *   - CTA_PROJET
 *   - RESPONSIVE
 *
 * MODIFICATIONS :
 *   - 06/10/2026 09:20 : Création — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* HERO_REALISATIONS =================================================== */
.realisations_hero
{
    padding: clamp(48px, 9vh, 112px) 0 var(--espace_5);
    border-bottom: 1px solid var(--ligne);
    overflow: hidden;
}

.realisations_hero_grille
{
    display: grid;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    gap: var(--espace_5);
    align-items: center;
}

.realisations_hero_titre
{
    font-size: var(--texte_xxl);
    max-width: 14ch;
    margin-bottom: 0.5em;
}

.realisations_hero_promesse
{
    max-width: 58ch;
    font-size: var(--texte_m);
    color: var(--encre_second);
    margin-bottom: var(--espace_3);
}

.realisations_hero_compteur
{
    color: var(--encre_attenuee);
    margin: 0;
}

.realisations_hero_compteur span
{
    color: var(--accent);
    font-weight: 600;
}

.realisations_hero_visuel
{
    position: relative;
    margin: 0;
    aspect-ratio: 1.618 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: var(--surface);
}

.realisations_hero_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.realisations_hero_halo
{
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 60% 40%, var(--accent_halo), transparent 60%);
    filter: blur(32px);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}
/* HERO_REALISATIONS =================================================== */

/* FILTRES ============================================================= */
.realisations_filtres_section
{
    padding: var(--espace_4) 0 var(--espace_3);
}

.realisations_filtres
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_3);
}

.realisations_filtres_groupe
{
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: var(--espace_2) var(--espace_3);
    align-items: start;
}

.realisations_filtres_libelle
{
    font-size: var(--texte_xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre_attenuee);
    padding-top: 0.9em;
}

.realisations_filtres_liste
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace_2);
}

.realisations_filtre
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ligne);
    border-radius: 2px;
    background: var(--surface);
    color: var(--encre);
    font-size: var(--texte_s);
    font-weight: 500;
    transition: border-color var(--duree) var(--easing), background var(--duree) var(--easing), color var(--duree) var(--easing), transform var(--duree) var(--easing);
}

.realisations_filtre:hover
{
    border-color: var(--ligne_forte);
    transform: translateY(-1px);
}

.realisations_filtre:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.realisations_filtre[aria-current="page"]
{
    background: var(--encre);
    border-color: var(--encre);
    color: var(--fond);
}

.realisations_filtre_nombre
{
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

.realisations_filtre[aria-current="page"] .realisations_filtre_nombre
{
    color: var(--fond);
    opacity: 0.7;
}

.realisations_resultat
{
    margin: var(--espace_4) 0 0;
    color: var(--encre_second);
    padding-top: var(--espace_3);
    border-top: 1px solid var(--ligne);
}
/* FILTRES ============================================================= */

/* GRILLE_CARTES ======================================================= */
.realisations_section_grille
{
    padding: var(--espace_3) 0 var(--espace_6);
}

.realisations_grille
{
    display: grid;
    gap: var(--gouttiere_grille);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.realisations_carte
{
    min-width: 0;
}

.realisations_carte_lien
{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color var(--duree) var(--easing), transform var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

.realisations_carte_lien:hover,
.realisations_carte_lien:focus-visible
{
    border-color: var(--ligne_forte);
    transform: translateY(-3px);
    box-shadow: var(--ombre);
    outline: none;
}

.realisations_carte_lien:focus-visible
{
    border-color: var(--accent);
}

.realisations_carte_visuel
{
    margin: 0;
    aspect-ratio: 1.618 / 1;
    overflow: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--ligne);
}

.realisations_carte_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 900ms var(--easing);
}

.realisations_carte_lien:hover .realisations_carte_visuel img
{
    transform: scale(1.03);
}

.realisations_carte_corps
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_2);
    padding: var(--espace_3);
    flex: 1 1 auto;
}

.realisations_carte_meta
{
    margin: 0;
    color: var(--encre_attenuee);
    font-size: var(--texte_xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.realisations_carte_titre
{
    font-size: var(--texte_l);
    margin: 0;
}

.realisations_carte_resume
{
    margin: 0;
    color: var(--encre_second);
    font-size: var(--texte_s);
    line-height: 1.55;
}

.realisations_carte_poles
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: auto;
    padding-top: var(--espace_2);
}

.realisations_carte_poles li
{
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
    letter-spacing: 0.02em;
}

.realisations_carte_poles li + li::before
{
    content: "·";
    margin-right: 10px;
    color: var(--ligne_forte);
}

.realisations_carte_appel
{
    font-size: var(--texte_s);
    font-weight: 600;
    color: var(--accent);
    margin-top: var(--espace_1);
}

.realisations_vide
{
    margin: var(--espace_4) 0 0;
    padding: var(--espace_4);
    border: 1px dashed var(--ligne_forte);
    border-radius: 2px;
    color: var(--encre_second);
    text-align: center;
}
/* GRILLE_CARTES ======================================================= */

/* CARTE_VEDETTE ======================================================= */
@media (min-width: 760px)
{
    .realisations_carte_vedette
    {
        grid-column: 1 / -1;
    }

    .realisations_carte_vedette .realisations_carte_lien
    {
        display: grid;
        grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    }

    .realisations_carte_vedette .realisations_carte_visuel
    {
        aspect-ratio: auto;
        min-height: 100%;
        border-bottom: 0;
        border-right: 1px solid var(--ligne);
    }

    .realisations_carte_vedette .realisations_carte_corps
    {
        padding: var(--espace_4);
        justify-content: center;
    }

    .realisations_carte_vedette .realisations_carte_titre
    {
        font-size: var(--texte_xl);
    }

    .realisations_carte_vedette .realisations_carte_resume
    {
        font-size: var(--texte_m);
    }
}
/* CARTE_VEDETTE ======================================================= */

/* CTA_PROJET ========================================================== */
/* Principe du socle : le sombre est la base, le clair surcharge */
.realisations_cta
{
    padding: var(--espace_6) 0;
    background: var(--surface);
    color: var(--encre);
    border-top: 1px solid var(--ligne);
}

.realisations_cta h2
{
    max-width: 24ch;
}

/* Pas d'opacité ici : __AQ_motion pilote l'opacité des éléments data-motion */
.realisations_cta .cta_texte
{
    max-width: 60ch;
    color: var(--encre_second);
    margin-bottom: var(--espace_4);
}

.realisations_cta .cta_actions
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace_2);
}

.realisations_cta .bouton_secondaire
{
    border-color: var(--encre);
    color: var(--encre);
}

html.bright_mode .realisations_cta
{
    background: var(--encre);
    color: var(--fond);
}

html.bright_mode .realisations_cta .sur_titre
{
    color: var(--fond);
    opacity: 0.7;
}

html.bright_mode .realisations_cta .bouton_secondaire
{
    border-color: var(--fond);
    color: var(--fond);
}
/* CTA_PROJET ========================================================== */

/* RESPONSIVE ========================================================== */
@media (max-width: 900px)
{
    .realisations_hero_grille
    {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espace_4);
    }

    .realisations_hero_titre
    {
        max-width: none;
    }
}

@media (max-width: 640px)
{
    .realisations_filtres_groupe
    {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espace_1);
    }

    .realisations_filtres_libelle
    {
        padding-top: 0;
    }

    .realisations_filtre
    {
        min-height: 48px;
    }

    .realisations_cta .bouton_principal,
    .realisations_cta .bouton_secondaire
    {
        width: 100%;
        justify-content: center;
    }
}
/* RESPONSIVE ========================================================== */

/* FILTRES_COMPACTS_1575 =============================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1575, 1577 et 1579 de JaxX : filtres compacts sur une seule ligne, cartes en masonry, page plus large
 * en desktop, cartes un peu plus larges si la fenêtre le permet) — A VALIDER PAR JaxX.
 *   - les trois groupes de filtres (Afficher / Par pôle / Par client) se placent côte à côte, libellé en ligne, puces de 34 px ;
 *   - sur écran large la barre tient sur une ligne, sinon elle passe à la ligne par groupe ; sur téléphone chaque groupe défile au doigt ;
 *   - le conteneur de la page monte jusqu'à 1680 px ; les cartes ont une largeur minimale de 340 px et s'étirent.
 */
.realisations_filtres_section .page_width_wrapper,
.realisations_section_grille .page_width_wrapper
{
    max-width: min(1680px, 100%);
}

.realisations_filtres_section
{
    padding: var(--espace_3) 0 var(--espace_2);
}

.realisations_filtres
{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace_2) var(--espace_4);
}

.realisations_filtres_groupe
{
    display: flex;
    align-items: center;
    gap: var(--espace_2);
    min-width: 0;
}

.realisations_filtres_groupe + .realisations_filtres_groupe
{
    padding-left: var(--espace_4);
    border-left: 1px solid var(--ligne);
}

.realisations_filtres_libelle
{
    padding-top: 0;
    white-space: nowrap;
    letter-spacing: 0.1em;
}

.realisations_filtres_liste
{
    gap: 6px;
}

.realisations_filtre
{
    min-height: 34px;
    padding: 0 12px;
    gap: 6px;
    font-size: var(--texte_xs);
    border-radius: 999px;
    white-space: nowrap;
}

.realisations_resultat
{
    margin-top: var(--espace_2);
    padding-top: var(--espace_2);
}

.realisations_grille
{
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

@media (min-width: 1101px)
{
    .realisations_filtres
    {
        gap: var(--espace_1) var(--espace_3);
    }

    .realisations_filtres_groupe + .realisations_filtres_groupe
    {
        padding-left: var(--espace_3);
    }

    .realisations_filtres_groupe:first-child .realisations_filtres_libelle
    {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .realisations_filtres_liste
    {
        gap: 4px;
    }

    .realisations_filtre
    {
        padding: 0 9px;
        gap: 5px;
    }
}

@media (max-width: 1100px)
{
    .realisations_filtres_groupe + .realisations_filtres_groupe
    {
        padding-left: 0;
        border-left: 0;
    }

    .realisations_filtres_groupe
    {
        flex-basis: 100%;
    }
}

@media (max-width: 640px)
{
    .realisations_filtres_groupe
    {
        flex-direction: column;
        align-items: stretch;
        gap: var(--espace_1);
    }

    .realisations_filtres_liste
    {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .realisations_filtres_liste::-webkit-scrollbar
    {
        display: none;
    }

    .realisations_filtre
    {
        min-height: 40px;
    }
}
/* FILTRES_COMPACTS_1575 =============================================== */