.os-refs-head,
.rttpg-block-postgrid {
    --osr-card:      #ffffff;
    --osr-ink:       #111111;
    --osr-muted:     #4a4a4a;
    --osr-line:      #e0ded8;
    --osr-black:     #000000;
    --osr-font:      'Archivo', 'Rubik', -apple-system, 'Segoe UI', sans-serif;
    --osr-font-hand: 'Rock Salt', cursive;
}



article:has(.os-refs-head) > .entry-header {
    display: none;
}

/* REPLI — tant que le bloc HTML n'est pas posé, le titre d'Astra est
   habillé aux mêmes proportions que celui de la maquette. La page est
   donc déjà présentable avant même d'ajouter le bloc. */
article:not(:has(.os-refs-head)) > .entry-header {
    padding: 40px 60px 10px 60px;
    margin: 0;
}
article:not(:has(.os-refs-head)) > .entry-header .entry-title {
    font-family: var(--osr-font, 'Archivo', sans-serif);
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #111111 !important;
    margin: 0;
}


/* ==========================================================================
   2. EN-TÊTE
   ========================================================================== */

.os-refs-head {
    font-family: var(--osr-font);
    padding: 40px 60px 30px 60px;
}

.os-refs-eyebrow {
    display: block;
    font-family: var(--osr-font-hand);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--osr-ink);
    margin-bottom: 14px;
}

.os-refs-head .os-refs-title {
    font-family: var(--osr-font);
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--osr-ink) !important;
    margin: 0 0 34px 0;
}


/* ==========================================================================
   3. BARRE DE FILTRES
   ========================================================================== */

.os-refs-filter-label { margin: 0 0 14px 0; }

.os-refs-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    font-family: var(--osr-font);
    font-size: .9rem;
    font-weight: 700;
    color: var(--osr-ink);
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: default;              /* simple intitulé sur écran large */
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}

.os-refs-chevron {
    display: none;                /* n'apparaît qu'en affichage replié */
    width: 20px;
    height: 20px;
    stroke: var(--osr-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    -webkit-transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
}

.os-refs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.os-refs-filters .os-refs-filter {
    font-family: var(--osr-font);
    /* MESURE sur la référence : hauteur de capitale 9 px, soit 12 px de
       corps, dans une pastille de 26 px de haut. */
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--osr-ink);
    background: var(--osr-line);
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}
.os-refs-filters .os-refs-filter:hover { background: #d7d4cd; }

.os-refs-filters .os-refs-filter[aria-pressed="true"] {
    background: var(--osr-black);
    color: #fff;
}
.os-refs-filters .os-refs-filter:focus-visible {
    outline: 2px solid var(--osr-black);
    outline-offset: 2px;
}

.os-refs-valider { display: none; }   /* utile seulement une fois replié */

.os-refs-empty {
    margin: 28px 0 0 0;
    font-size: .95rem;
    color: var(--osr-muted);
}


/* ==========================================================================
   4. GRILLE THE POST GRID
   ========================================================================== */

/* MESURE sur la référence : 77 px entre la barre de filtres et la
   première rangée de photos. */
.rttpg-block-postgrid {
    padding: 77px 60px 60px 60px;
}

/* Éléments d'interface du plugin dont on n'a pas l'usage. */
.rttpg-block-postgrid .tpg-header-wrapper,
.rttpg-block-postgrid #bottom-script-loader,
.rttpg-block-postgrid .overlay.grid-hover-content {
    display: none !important;
}

/* La rangée passe en grille : le plugin utilise ses propres colonnes
   (.rt-col-md-4), qu'on neutralise pour maîtriser gouttières et alignement. */
.rttpg-block-postgrid .rt-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 30px;
    margin: 0 !important;
    padding: 0 !important;
}

.rttpg-block-postgrid .rt-grid-item {
    width: 100% !important;
    max-width: none !important;
    -ms-flex: none !important;
    flex: none !important;
    float: none !important;
    /* Sans min-width:0, une colonne de grille ne peut pas devenir plus
       étroite que son contenu : c'est ce qui faisait déborder la
       deuxième colonne hors de l'écran en responsive. */
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* La référence n'encadre PAS la vignette entière : seule la photo porte
   un filet. On neutralise donc tout cadre et toute ombre posés par le
   plugin ou par Astra sur les conteneurs de carte. */
.rttpg-block-postgrid .rt-holder,
.rttpg-block-postgrid .tpg-post-holder,
.rttpg-block-postgrid .rt-detail,
.rttpg-block-postgrid .rt-el-content-wrapper,
.rttpg-block-postgrid .entry-title-wrapper,
.rttpg-block-postgrid .tpg-excerpt {
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- Vignette : filet clair et léger retrait blanc, comme la référence --- */
.rttpg-block-postgrid .rt-img-holder {
    position: relative;             /* support de la bande de survol */
    margin: 0 0 23px 0;             /* MESURE : 23 px photo -> titre */
    /* MESURE : le cadre de survol fait 4 px au total sur la référence.
       3 px de rembourrage + 1 px de filet = 4 px, cadre et filet passant
       tous deux au noir au survol. */
    padding: 3px;
    border: 1px solid var(--osr-line);
    background: var(--osr-card);
    overflow: hidden;
    transition: background-color .25s ease, border-color .25s ease;
}
.rttpg-block-postgrid .rt-img-holder img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* PAS DE ZOOM AU SURVOL.
   Un agrandissement de l'image la faisait déborder dans les 3 px de
   rembourrage — le conteneur masquant les débordements, elle recouvrait
   le cadre noir, qui ne restait visible que le temps de la transition.
   La référence ne zoome pas non plus : le cadre suffit. */

/* --- SURVOL : cadre noir et bande « Voir le projet » ---
   MESURE sur la référence : bande de 44 px, pleine largeur de la photo,
   collée en bas. Le cadre noir vient du fond du conteneur, visible grâce
   à ses 4 px de rembourrage. */
.rttpg-block-postgrid .rt-img-holder::after {
    content: "Voir le projet";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    height: 44px;                   /* MESURE sur la référence */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #000;
    color: #fff;
    font-family: var(--osr-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.rttpg-block-postgrid .rt-grid-item:hover .rt-img-holder::after,
.rttpg-block-postgrid .rt-grid-item:focus-within .rt-img-holder::after {
    opacity: 1;
}
.rttpg-block-postgrid .rt-grid-item:hover .rt-img-holder,
.rttpg-block-postgrid .rt-grid-item:focus-within .rt-img-holder {
    background: #000;
    border-color: #000;
}

/* --- Titre du projet ---
   Sélecteur cantonné au bloc : .entry-title sert aussi au titre de page. */
.rttpg-block-postgrid .entry-title-wrapper { margin: 0; }
/* MESURE : le titre sortait à ~21 px contre ~15 px sur la référence.
   The Post Grid impose sa taille avec une spécificité supérieure à la
   mienne ; d'où le !important sur la typographie. */
.rttpg-block-postgrid .entry-title {
    font-family: var(--osr-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 8px 0 !important;
}
.rttpg-block-postgrid .entry-title a {
    color: var(--osr-ink) !important;
    text-decoration: none !important;
    transition: opacity .2s ease;
}
.rttpg-block-postgrid .entry-title a:hover { opacity: .6; }
.rttpg-block-postgrid .entry-title a:focus-visible {
    outline: 2px solid var(--osr-black);
    outline-offset: 3px;
}

/* --- Descriptif court --- */
.rttpg-block-postgrid .tpg-excerpt-inner {
    /* Les extraits sont générés automatiquement et commencent souvent
       par le titre répété : on borne à 3 lignes pour que les vignettes
       gardent la même hauteur. Un extrait saisi à la main dans chaque
       article donnerait un résultat plus propre. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rttpg-block-postgrid .tpg-excerpt,
.rttpg-block-postgrid .tpg-excerpt-inner {
    font-family: var(--osr-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: center;
    color: var(--osr-ink);
    margin: 0;
    padding: 0;
}

/* --- Masquage par le filtre ---
   L'attribut hidden est posé par le script ; sur un élément de grille,
   il faut l'appuyer d'une règle display. --- */
.rttpg-block-postgrid .rt-grid-item[hidden] {
    display: none !important;
}


/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 1024px) {

    .os-refs-head { padding: 30px 30px 24px 30px; }
    .rttpg-block-postgrid { padding: 0 30px 40px 30px; }

    .rttpg-block-postgrid .rt-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 22px;
    }

    /* La barre de filtres devient un menu déroulant. */
    .os-refs-filterbar {
        border: 1px solid var(--osr-line);
        background: var(--osr-card);
    }
    .os-refs-filter-label { margin: 0; }
    .os-refs-filter-toggle {
        width: 100%;
        padding: 16px 18px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    .os-refs-long { display: none; }   /* seul « Filtrer » reste */
    .os-refs-chevron { display: block; }
    .os-refs-filter-toggle[aria-expanded="true"] .os-refs-chevron {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .os-refs-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 18px 18px 18px;
    }
    .os-refs-filters .os-refs-filter {
        background: none;
        text-align: left;
        padding: 11px 0;
        border-bottom: 1px solid var(--osr-line);
    }
    .os-refs-filters .os-refs-filter:hover { background: none; opacity: .6; }
    .os-refs-filters .os-refs-filter[aria-pressed="true"] {
        background: none;
        color: var(--osr-ink);
        text-decoration: underline;
    }

    .os-refs-valider {
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 13px 16px;
        font-family: var(--osr-font);
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #fff;
        background: var(--osr-black);
        border: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .os-refs-valider:focus-visible {
        outline: 2px solid var(--osr-black);
        outline-offset: 2px;
    }
}

@media screen and (max-width: 600px) {
    .rttpg-block-postgrid .rt-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .rttpg-block-postgrid { padding: 40px 20px 40px 20px; }
    .os-refs-head { padding: 24px 20px 20px 20px; }
    .os-refs-filters .os-refs-filter {
        white-space: normal;
        max-width: 100%;
    }
}

/* Garde-fou anti-débordement, limité aux médias : appliqué à « * », il
   écraserait les largeurs de grille. */
.os-refs-head img,
.rttpg-block-postgrid img,
.rttpg-block-postgrid svg { max-width: 100%; }


/* ==========================================================================
   6. Confort de lecture
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rttpg-block-postgrid .entry-title a,
    .os-refs-filters .os-refs-filter,
    .os-refs-chevron {
        transition: none !important;
    }
}




.os-refs-filters .os-refs-mark {
    display: inline-block;
    font-weight: 700;
    line-height: 1;
}
.os-refs-filters .os-refs-mark::before {
    content: "#";
}

/* « Tous les projets » n'a pas de dièse au repos. */
.os-refs-filters .os-refs-filter[data-slug="*"] .os-refs-mark::before {
    content: "";
}

/* Thématique retenue : coche blanche. */
.os-refs-filters .os-refs-filter[aria-pressed="true"] .os-refs-mark::before {
    content: "\2713";
    color: #fff;
}

/* Thématique retenue et survolée : croix blanche, elle peut être retirée. */
.os-refs-filters .os-refs-filter[aria-pressed="true"]:hover .os-refs-mark::before,
.os-refs-filters .os-refs-filter[aria-pressed="true"]:focus-visible .os-refs-mark::before {
    content: "\2715";
}

/* Un filtre actif garde son fond noir au survol : seul le marqueur change. */
.os-refs-filters .os-refs-filter[aria-pressed="true"]:hover {
    background: var(--osr-black);
    color: #fff;
}




.os-refs-back {
    margin: 0 0 20px 0;
}
.os-refs-back a {
    display: inline-block;
    font-family: var(--osr-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--osr-ink) !important;
    padding: 0 0 0 1.4em;
    position: relative;
}
.os-refs-back a::before {
    content: "\2190";              /* flèche vers la gauche */
    position: absolute;
    left: 0;
}
.os-refs-back a:hover {
    text-decoration: underline !important;
}
.os-refs-back a:focus-visible {
    outline: 2px solid var(--osr-black);
    outline-offset: 3px;
}

/* Sans barre de filtres, la grille remonte : l'écart de 77 px mesuré sur
   la référence s'appliquait sous les filtres, pas sous le titre. */
.os-refs-head--categorie + .rttpg-block-postgrid,
.os-refs-head--categorie ~ .rttpg-block-postgrid {
    padding-top: 40px;
}




.os-refs-head .os-refs-intro {
    font-family: var(--osr-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--osr-ink);
    max-width: 780px;          /* confort de lecture : ~90 signes par ligne */
    margin: -18px 0 34px 0;    /* remonte sous le titre, qui a sa propre marge */
}

@media screen and (max-width: 1024px) {
    .os-refs-head .os-refs-intro {
        font-size: .95rem;
        margin: -10px 0 26px 0;
    }
}