/* ==========================================================================
   Les Indécents Cabaret : identité commune du site.
   Direction artistique : DIRECTION-ARTISTIQUE.md (palette officielle du logo).
   Chargée par templates/skeleton.php sur toutes les pages qui l'utilisent ;
   les pages Jeux, Démo et Soutiens ne passent pas par ce layout.
   Les styles de base ne s'appliquent qu'aux pages refaites (body.site-refait) ;
   l'en-tête et le pied de page s'appliquent partout.
   Feuille unique des pages refaites : identité commune, puis pages intérieures,
   accueil, galerie et contact (chaque partie a son préfixe : site-, pg-, aff-, gal-).
   ========================================================================== */

@font-face {
    font-family: 'Funnel Display';
    src: url('/fonts/funnel-display-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --site-rouge: #970F17;
    --site-rouge-vif: #B3141D;
    --site-noir: #080708;
    --site-noir-coulisse: #131011;
    --site-or: #E2B06E;
    --site-ivoire: #F5EFE6;
    --site-encre: #2A2224;
    --site-ivoire-doux: rgba(245, 239, 230, 0.8);
    --site-filet: rgba(226, 176, 110, 0.35);
    --site-titrage: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
    --site-texte: 'Manrope', 'Segoe UI', 'Helvetica Neue', sans-serif;
    --site-marge: clamp(1.25rem, 4.5vw, 4.5rem);
    --site-pas: clamp(4.5rem, 10vw, 8.5rem);
    --site-gouttiere: clamp(1rem, 2.5vw, 2.5rem);
    --site-entete-h: 5.25rem;
    --site-ease-rideau: cubic-bezier(0.7, 0, 0.2, 1);
    --site-ease-sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base des pages refaites -------------------------------------------- */

body.site-refait {
    margin: 0;
    min-height: 100vh;
    background: var(--site-noir);
    color: var(--site-ivoire);
    font-family: var(--site-texte);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--site-rouge);
}

:where(body.site-refait) *,
:where(body.site-refait) *::before,
:where(body.site-refait) *::after {
    box-sizing: border-box;
}

:where(body.site-refait) img {
    max-width: 100%;
}

:where(body.site-refait) :is(h1, h2, h3) {
    margin: 0;
    font-family: var(--site-titrage);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

:where(body.site-refait) p {
    margin: 0;
    text-wrap: pretty;
}

:where(body.site-refait) a {
    color: inherit;
}

:where(body.site-refait) ::selection {
    background: var(--site-or);
    color: var(--site-noir);
}

/* Menu et titres non sélectionnables, sur les seules pages refaites. */
body.site-refait :is(
    .site-logo,
    .site-menu__lien,
    .site-menu__billetterie,
    .site-menu-bouton,
    .pg-entete__titre,
    .pg-scene__titre,
    .pg-lecture__titre,
    .aff-scene__titre,
    .pg-titre-section,
    .aff-titre,
    .pg-encart__titre,
    .pg-autres__titre,
    .gal-partage__titre,
    .aff-programme__vide-titre
) {
    -webkit-user-select: none;
    user-select: none;
}

body.site-refait .site-logo img {
    -webkit-user-drag: none;
}

/* Descriptions des spectacles et prestations (fiche, liste, projets de l'accueil) et avis du public. */
:is(body.page-spectacle, body.page-prestation) .pg-titre-section + .pg-texte,
:is(body.page-spectacles, body.page-prestations) .pg-fiche__resume,
body.page-accueil .aff-projet__texte p:not(.aff-mention, .aff-projet__auteur),
body.page-accueil .aff-avis__liste {
    -webkit-user-select: none;
    user-select: none;
}

/* Pied de page bloqué, sauf adresse, téléphone, e-mail et champ newsletter. */
:is(body.site-refait, body.page-a-propos) .site-pied {
    -webkit-user-select: none;
    user-select: none;
}

:is(body.site-refait, body.page-a-propos) :is(.site-pied__contact, .site-pied input) {
    -webkit-user-select: text;
    user-select: text;
}

/* Qui sommes-nous : pas encore refaite, ciblée par sa classe de page. */
body.page-a-propos :is(
    .site-logo,
    .site-menu__lien,
    .site-menu__billetterie,
    .site-menu-bouton,
    .site-contenu h2
) {
    -webkit-user-select: none;
    user-select: none;
}

body.page-a-propos .site-logo img {
    -webkit-user-drag: none;
}

body.page-a-propos .site-contenu h2 {
    cursor: default;
}

body.site-refait :is(
    .pg-entete__titre,
    .pg-scene__titre,
    .pg-lecture__titre,
    .aff-scene__titre,
    .pg-titre-section,
    .aff-titre,
    .pg-encart__titre,
    .pg-autres__titre,
    .gal-partage__titre,
    .aff-programme__vide-titre
) {
    cursor: default;
}

.site-entete :focus-visible,
.site-pied :focus-visible,
body.site-refait :focus-visible {
    outline: 2px solid var(--site-or);
    outline-offset: 4px;
}

.site-cadre {
    max-width: 80rem;
    margin-inline: auto;
}

.site-masque {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-evitement {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background: var(--site-ivoire);
    color: var(--site-noir);
    font: 600 0.9375rem var(--site-texte);
    text-decoration: none;
}

.site-evitement:focus {
    top: 1rem;
}

/* --- Boutons et liens d'action ------------------------------------------ */

.site-bouton,
a.site-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.8rem 1.75rem;
    border: 0;
    border-radius: 0;
    background: var(--site-rouge);
    color: var(--site-ivoire);
    font: 600 0.9375rem/1.2 var(--site-texte);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.site-bouton:hover,
a.site-bouton:hover {
    background: var(--site-rouge-vif);
    color: var(--site-ivoire);
}

.site-bouton:disabled {
    opacity: 0.6;
    cursor: progress;
}

.site-bouton--clair,
a.site-bouton--clair {
    background: var(--site-ivoire);
    color: var(--site-noir);
}

.site-bouton--clair:hover,
a.site-bouton--clair:hover {
    background: var(--site-or);
    color: var(--site-noir);
}

.site-lien,
a.site-lien {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    color: var(--site-or);
    font: 600 0.9375rem var(--site-texte);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.5em;
    transition: color 0.18s ease-out;
}

.site-lien:hover,
a.site-lien:hover {
    color: var(--site-ivoire);
}

.site-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
}

/* --- En-tête ------------------------------------------------------------- */

.site-entete {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: var(--site-entete-h);
    padding: 0.75rem var(--site-marge);
    background: var(--site-noir);
    border-bottom: 1px solid transparent;
    font-family: var(--site-texte);
    transition: border-color 0.25s ease-out;
}

.site-entete.is-defile {
    border-bottom-color: var(--site-filet);
}

.site-logo {
    position: relative;
    z-index: 2;
    display: block;
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: auto;
    height: 3.5rem;
}

.site-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-menu__liste {
    display: flex;
    align-items: center;
    gap: 0.25rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu__lien,
a.site-menu__lien {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--site-ivoire);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(var(--site-or), var(--site-or)) left calc(100% - 0.4rem) / 0 1px no-repeat;
    transition: color 0.18s ease-out, background-size 0.3s var(--site-ease-sortie);
}

.site-menu__lien:hover,
.site-menu__lien.is-actif,
a.site-menu__lien:hover,
a.site-menu__lien.is-actif {
    color: var(--site-or);
    background-size: 100% 1px;
}

.site-menu__billetterie {
    min-height: 2.75rem;
    padding-block: 0.6rem;
}

.site-menu-bouton {
    position: relative;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--site-ivoire);
    font: 600 0.9375rem var(--site-texte);
    cursor: pointer;
}

.site-menu-bouton__trait,
.site-menu-bouton__trait::before {
    display: block;
    width: 1.5rem;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--site-ease-sortie);
}

.site-menu-bouton__trait {
    position: relative;
}

.site-menu-bouton__trait::before {
    content: "";
    position: absolute;
    top: 0.4rem;
}

/* Mobile et tablette : le menu s'ouvre en rideau plein écran. */
@media (max-width: 991.98px) {
    .site-menu-bouton {
        display: inline-flex;
    }

    .site-menu {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        gap: 2.5rem;
        padding: calc(var(--site-entete-h) + 1rem) var(--site-marge) 2rem;
        visibility: hidden;
        transition: visibility 0s linear 0.6s;
    }

    .site-menu::before,
    .site-menu::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: 50.5%;
        background: var(--site-noir);
        transition: transform 0.6s var(--site-ease-rideau);
    }

    .site-menu::before {
        left: 0;
        transform: translateX(-100%);
    }

    .site-menu::after {
        right: 0;
        transform: translateX(100%);
    }

    .site-menu__liste {
        flex-direction: column;
        gap: 0.5rem;
        opacity: 0;
        transition: opacity 0.2s ease-out;
    }

    .site-menu__lien,
    a.site-menu__lien {
        font-family: var(--site-titrage);
        font-size: clamp(2rem, 8vw, 3rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        background-position: left calc(100% - 0.2rem);
    }

    .site-menu__lien:hover,
    .site-menu__lien.is-actif,
    a.site-menu__lien:hover,
    a.site-menu__lien.is-actif {
        color: var(--site-ivoire);
        background-image: linear-gradient(var(--site-ivoire), var(--site-ivoire));
        background-size: 100% 2px;
    }

    .site-menu__billetterie {
        opacity: 0;
        transition: opacity 0.2s ease-out;
    }

    .site-entete.is-menu-ouvert .site-menu {
        visibility: visible;
        transition: visibility 0s linear 0s;
    }

    .site-entete.is-menu-ouvert .site-menu::before,
    .site-entete.is-menu-ouvert .site-menu::after {
        transform: none;
    }

    .site-entete.is-menu-ouvert .site-menu__liste,
    .site-entete.is-menu-ouvert .site-menu__billetterie {
        opacity: 1;
        transition: opacity 0.3s ease-out 0.35s;
    }

    .site-entete.is-menu-ouvert .site-menu__billetterie {
        background: var(--site-ivoire);
        color: var(--site-noir);
    }

    .site-entete.is-menu-ouvert .site-menu-bouton__trait {
        transform: translateY(0.2rem) rotate(45deg);
    }

    .site-entete.is-menu-ouvert .site-menu-bouton__trait::before {
        transform: translateY(-0.4rem) rotate(-90deg);
    }

    html.site-menu-ouvert {
        overflow: hidden;
    }
}

/* --- Pied de page : compact, deux lignes ---------------------------------- */

.site-pied {
    background: var(--site-noir);
    color: var(--site-ivoire-doux);
    font-family: var(--site-texte);
    font-size: 0.875rem;
    line-height: 1.6;
    border-top: 1px solid var(--site-filet);
}

.site-pied a {
    color: var(--site-ivoire);
    text-decoration: none;
    transition: color 0.18s ease-out;
}

.site-pied a:hover {
    color: var(--site-or);
}

.site-pied__haut {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem var(--site-gouttiere);
    padding: 2rem var(--site-marge) 1.5rem;
}

.site-lettre {
    flex: 0 1 28rem;
    margin: 0;
}

.site-lettre__libelle {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--site-ivoire);
}

.site-lettre__champ {
    display: flex;
    border-bottom: 1px solid var(--site-or);
}

.site-lettre__champ input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: var(--site-ivoire);
    font: 500 0.9375rem var(--site-texte);
    caret-color: var(--site-or);
}

.site-lettre__champ input::placeholder {
    color: rgba(245, 239, 230, 0.66);
}

.site-lettre__champ input:focus {
    outline: none;
}

.site-lettre__champ:focus-within {
    box-shadow: 0 2px 0 0 var(--site-or);
}

.site-lettre__champ .site-bouton {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
}

.site-lettre__message {
    margin: 0.5rem 0 0;
}

.site-lettre__message:empty {
    display: none;
}

.site-lettre__message[data-etat="succes"] {
    color: var(--site-or);
}

.site-lettre__message[data-etat="erreur"] {
    color: #F2A3A7;
}

.site-pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-pied__liens a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.site-pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding: 1rem var(--site-marge) 1.5rem;
    border-top: 1px solid rgba(245, 239, 230, 0.08);
    font-size: 0.8125rem;
    color: rgba(245, 239, 230, 0.66);
}

.site-pied__bas p {
    margin: 0;
}

.site-pied__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    font-style: normal;
}

.site-pied__bas .recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}

/* Le badge reCAPTCHA est masqué : la mention ci-dessus le remplace, comme Google l'autorise. */
.grecaptcha-badge {
    visibility: hidden;
}

@media (max-width: 575.98px) {
    .site-lettre {
        flex-basis: 100%;
    }
}

/* --- Fenêtre « Recevoir les dates » -------------------------------------- */

.site-inscription {
    width: min(100% - 2rem, 34rem);
    max-height: calc(100% - 2rem);
    padding: 0;
    border: 0;
    border-top: 3px solid var(--site-rouge);
    background: var(--site-ivoire);
    color: var(--site-encre);
    font-family: var(--site-texte);
    font-size: 1rem;
    line-height: 1.55;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.site-inscription::backdrop {
    background: rgba(8, 7, 8, 0.72);
}

.site-inscription[open] {
    animation: site-inscription-ouverture 0.25s var(--site-ease-sortie);
}

@keyframes site-inscription-ouverture {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

.site-inscription ::selection {
    background: var(--site-rouge);
    color: var(--site-ivoire);
}

.site-inscription :focus-visible {
    outline: 2px solid var(--site-rouge);
    outline-offset: 3px;
}

.site-inscription__formulaire {
    position: relative;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.site-inscription__fermer {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: none;
    color: var(--site-noir);
    cursor: pointer;
}

.site-inscription__fermer:hover {
    color: var(--site-rouge);
}

.site-inscription__titre {
    margin: 0;
    padding-right: 2.5rem;
    font-family: var(--site-titrage);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--site-noir);
}

.site-inscription__texte {
    margin: 0;
    font-size: 0.9375rem;
}

.site-inscription__champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.site-champ {
    display: grid;
    gap: 0.2rem;
    margin: 0;
}

.site-champ--large {
    grid-column: 1 / -1;
}

.site-champ label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--site-noir);
}

.site-champ__requis {
    font-weight: 500;
    color: var(--site-rouge);
}

.site-champ input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    border-bottom: 1px solid rgba(42, 34, 36, 0.45);
    border-radius: 0;
    background: transparent;
    color: var(--site-noir);
    font: 500 1rem var(--site-texte);
    caret-color: var(--site-rouge);
}

.site-champ input::placeholder {
    color: rgba(42, 34, 36, 0.55);
}

.site-champ input:focus {
    outline: none;
    border-bottom-color: var(--site-rouge);
    box-shadow: 0 1px 0 0 var(--site-rouge);
}

.site-inscription__message {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.site-inscription__message:empty {
    display: none;
}

.site-inscription__message[data-etat="succes"] {
    color: #1E6B3A;
}

.site-inscription__message[data-etat="erreur"] {
    color: var(--site-rouge);
}

.site-inscription__envoyer {
    justify-self: start;
}

.site-inscription__mentions {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(42, 34, 36, 0.8);
}

.site-inscription__mentions a {
    color: var(--site-rouge);
    text-decoration: underline;
}

@media (max-width: 479.98px) {
    .site-inscription__champs {
        grid-template-columns: 1fr;
    }

    .site-inscription__envoyer {
        justify-self: stretch;
    }
}

/* --- Champ téléphone avec indicatif du pays ----------------------------- */

.site-tel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
}

.site-pays {
    position: relative;
}

.site-pays__bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.35rem;
    border: 0;
    border-bottom: 1px solid rgba(42, 34, 36, 0.45);
    background: transparent;
    color: var(--site-noir);
    font: 500 0.9375rem var(--site-texte);
    cursor: pointer;
}

.site-pays__bouton .site-drapeau,
.site-pays__option .site-drapeau {
    flex: none;
    width: 1.25rem;
    height: auto;
    box-shadow: 0 0 0 1px rgba(42, 34, 36, 0.12);
}

.site-pays__bouton svg {
    color: var(--site-rouge);
}

.site-pays__bouton:focus-visible {
    outline: 2px solid var(--site-rouge);
    outline-offset: 2px;
}

.site-pays__liste {
    display: block;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 16rem;
    max-height: 15rem;
    margin: 0;
    padding: 0.35rem 0;
    overflow-y: auto;
    list-style: none;
    background: #FFFDF9;
    border: 1px solid rgba(42, 34, 36, 0.18);
    box-shadow: 0 0.75rem 2rem rgba(8, 7, 8, 0.18);
}

.site-pays__liste--haut {
    top: auto;
    bottom: calc(100% + 0.25rem);
}

.site-pays__liste[hidden] {
    display: none;
}

.site-pays__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.85rem;
    color: var(--site-noir);
    font: 500 0.9375rem var(--site-texte);
    cursor: pointer;
}

.site-pays__option:hover,
.site-pays__option:focus {
    outline: none;
    background: rgba(151, 15, 23, 0.08);
}

.site-pays__option[aria-selected="true"] {
    font-weight: 700;
}

.site-pays__indicatif {
    margin-left: auto;
    padding-left: 1rem;
    color: rgba(42, 34, 36, 0.7);
}

/* --- Sélection du texte bloquée : menu, boutons, titres et noms ----------
   Le texte courant (descriptions, adresses, e-mail, téléphone, formulaires)
   reste sélectionnable pour pouvoir être copié. */

.site-entete,
.site-entete *,
.site-bouton,
.site-lien,
body.site-refait button,
body.site-refait :is(h1, h2, h3),
body.site-refait :is(h1, h2, h3) *,
body.site-refait [class*="__titre"],
body.site-refait [class*="__nom"],
body.site-refait .pg-titre-section,
body.site-refait .aff-titre {
    -webkit-user-select: none;
    user-select: none;
}

/* Curseur flèche sur les titres bloqués ; la main reste sur ceux qui sont des liens. */
body.site-refait :is(h1, h2, h3),
body.site-refait [class*="__titre"],
body.site-refait [class*="__nom"] {
    cursor: default;
}

body.site-refait :is(h1, h2, h3) a,
body.site-refait a[class*="__titre"],
body.site-refait a[class*="__nom"],
body.site-refait [class*="__nom"] a {
    cursor: pointer;
}

/* --- Mouvement réduit ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .site-inscription[open] {
        animation: none;
    }

    .site-menu,
    .site-menu::before,
    .site-menu::after,
    .site-menu__liste,
    .site-menu__billetterie,
    .site-menu-bouton__trait,
    .site-menu-bouton__trait::before,
    .site-menu__lien,
    .site-bouton,
    .site-lien {
        transition: none !important;
    }
}

/* ==========================================================================
   Pages intérieures (spectacles, prestations, actualités…).
   Même grammaire que l'accueil : ouverture sombre, sections ivoire et
   sombres en alternance, rythme resserré. S'appuie sur l'identité commune ci-dessus.
   ========================================================================== */

.pg {
    --pg-rythme: clamp(3rem, 6vw, 4.5rem);
}

.pg-titre-section {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    letter-spacing: -0.015em;
}

/* Deuxième titre d'une même colonne (ex. Informations sous Présentation). */
.pg-titre-section--suite {
    margin-top: clamp(2.25rem, 4vw, 3rem);
}

/* --- En-tête de page (liste) --------------------------------------------- */

.pg-entete {
    padding: clamp(0.25rem, 1vw, 0.75rem) var(--site-marge) clamp(1.75rem, 4vw, 2.75rem);
    background: var(--site-noir);
    border-bottom: 1px solid var(--site-filet);
}

.pg-entete__titre {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--site-ivoire);
}

/* --- Ouverture d'une fiche : le visuel en plein cadre, fixe -------------- */

.pg-scene {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: end center;
    text-align: center;
    min-height: clamp(22rem, 58svh, 36rem);
    padding: 0 var(--site-marge) clamp(2rem, 5vh, 3rem);
    overflow: hidden;
    background: var(--site-noir);
}

/* Fiches spectacle et prestation : ouverture aux deux tiers de la hauteur. */
.pg-scene--compacte {
    min-height: clamp(14.75rem, 39svh, 24rem);
}

.pg-scene__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.9;
}

.pg-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(var(--pg-voile-l, 55%) 45% at 50% 72%, rgba(8, 7, 8, 0.8), rgba(8, 7, 8, 0) 100%),
        linear-gradient(180deg, rgba(8, 7, 8, 0.4) 0%, rgba(8, 7, 8, 0.25) 30%, rgba(8, 7, 8, 0.85) 100%);
}

.pg-scene__contenu {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.pg-scene__statut {
    font-weight: 700;
    color: var(--site-or);
    text-shadow: 0 0.1em 0.75rem rgba(0, 0, 0, 0.7);
}

.pg-scene__titre {
    max-width: 18ch;
    font-size: clamp(2.25rem, 4.6vw, 4.25rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.045em;
    color: var(--site-ivoire);
    text-shadow: 0 0.15em 1.5rem rgba(0, 0, 0, 0.55);
}

/* --- Sections ------------------------------------------------------------ */

.pg-section {
    padding: var(--pg-rythme) var(--site-marge);
}

.pg-section--ivoire {
    background: var(--site-ivoire);
    color: var(--site-encre);
}

.pg-section--sombre {
    background: var(--site-noir-coulisse);
}

.pg-section--ivoire ::selection {
    background: var(--site-rouge);
    color: var(--site-ivoire);
}

.pg-section--ivoire :focus-visible {
    outline-color: var(--site-rouge);
}

.pg-section--ivoire .pg-titre-section,
.pg-section--ivoire h2,
.pg-section--ivoire h3 {
    color: var(--site-noir);
}

.pg-section--ivoire .site-lien {
    color: var(--site-rouge);
}

.pg-section--ivoire .site-lien:hover {
    color: var(--site-noir);
}

/* Texte saisi en base : mesure confortable, liens soulignés. */
.pg-texte {
    max-width: 62ch;
}

.pg-texte p {
    margin-bottom: 1.1em;
}

.pg-texte a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.pg-vide {
    max-width: 52ch;
    color: inherit;
}

.pg-retour {
    padding: 0 var(--site-marge) clamp(2rem, 4vw, 3rem);
}

.pg-retour--ivoire .site-lien {
    color: var(--site-rouge);
}

.pg-retour--ivoire .site-lien:hover {
    color: var(--site-noir);
}

.pg-section--ivoire + .pg-retour,
.pg-retour--ivoire {
    background: var(--site-ivoire);
}

/* --- Grille d'affiches (spectacles, prestations, actualités) ------------ */

.pg-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Toute l'affiche est cliquable : le lien du titre s'étend sur la fiche. */
.pg-fiche {
    position: relative;
    display: grid;
    align-content: start;
    gap: 1.1rem;
}

.pg-fiche__image {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--site-noir);
}

.pg-fiche__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--site-ease-sortie);
}

.pg-fiche:hover .pg-fiche__image img {
    transform: scale(1.012);
}

/* Survol : la fiche « entre en lumière ». Les bords de la photo s'assombrissent
   comme une salle qui s'éteint, puis un filet doré se pose à l'intérieur, comme un cadre de scène. */
.pg-fiche__image {
    position: relative;
    isolation: isolate;
}

.pg-fiche__image::before,
.pg-fiche__image::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.pg-fiche__image::before {
    inset: 0;
    z-index: 1;
    /* La salle s'assombrit autour : seul le sujet reste dans la lumière. */
    background: radial-gradient(70% 85% at 50% 40%, rgba(8, 7, 8, 0) 55%, rgba(8, 7, 8, 0.45) 100%);
    transform: translateY(-10%);
    transition: opacity 0.45s ease-out, transform 0.7s var(--site-ease-sortie);
}

.pg-fiche__image::after {
    inset: clamp(0.6rem, 1.2vw, 0.9rem);
    z-index: 2;
    border: 1px solid rgba(226, 176, 110, 0.75);
    transform: scale(1.03);
    transition: opacity 0.35s ease-out 0.08s, transform 0.55s var(--site-ease-sortie) 0.08s;
}

.pg-fiche:hover .pg-fiche__image::before,
.pg-fiche:focus-within .pg-fiche__image::before,
.pg-fiche:hover .pg-fiche__image::after,
.pg-fiche:focus-within .pg-fiche__image::after {
    opacity: 1;
    transform: none;
}

.pg-fiche__texte {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
}

.pg-fiche__statut {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--site-rouge);
}

.pg-section--sombre .pg-fiche__statut {
    color: var(--site-or);
}

.pg-fiche__nom {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: -0.035em;
}

.pg-fiche__lien {
    text-decoration: none;
}

.pg-fiche__lien::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pg-fiche__auteur {
    font-size: 0.9375rem;
    font-weight: 600;
}

.pg-fiche__resume {
    max-width: 52ch;
    font-size: 0.9375rem;
}

.pg-fiche__voir {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--site-rouge);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45em;
}

.pg-fiche:hover .pg-fiche__voir,
.pg-fiche:focus-within .pg-fiche__voir {
    color: var(--site-noir);
}

.pg-fiche:focus-within .pg-fiche__image {
    outline: 2px solid var(--site-rouge);
    outline-offset: 4px;
}

/* Une ligne par fiche, photo et texte à parts égales ; une ligne sur deux, la photo passe à droite. */
.pg-liste--lignes {
    grid-template-columns: 1fr;
    gap: 0;
}

.pg-liste--lignes .pg-fiche {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(151, 15, 23, 0.2);
}

.pg-liste--lignes .pg-fiche:first-child {
    padding-top: 0;
    border-top: 0;
}

.pg-liste--lignes .pg-fiche:last-child {
    padding-bottom: 0;
}

.pg-liste--lignes .pg-fiche--inverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
}

.pg-liste--lignes .pg-fiche--inverse .pg-fiche__image {
    order: 2;
}

.pg-liste--lignes .pg-fiche__texte {
    gap: 0.65rem;
}

.pg-liste--lignes .pg-fiche__nom {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.pg-liste--lignes .pg-fiche__resume {
    font-size: 1rem;
}

/* Deux sections ivoire qui se suivent : un simple filet les sépare. */
.pg-section--ivoire + .pg-section--ivoire {
    padding-top: 0;
}

.pg-section--ivoire + .pg-section--ivoire .site-cadre {
    padding-top: var(--pg-rythme);
    border-top: 1px solid rgba(151, 15, 23, 0.25);
}

/* --- Fiche détaillée : texte et encart ---------------------------------- */

.pg-detail {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.pg-encart {
    display: grid;
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--site-rouge);
}

.pg-encart__titre {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.pg-encart .pg-texte {
    font-size: 0.9375rem;
}

/* Prochaines dates d'un spectacle, en version compacte. */
.pg-dates {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pg-date {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
    padding-block: 0.85rem;
    border-top: 1px solid rgba(151, 15, 23, 0.25);
}

.pg-date__jour {
    grid-row: span 2;
    padding-top: 0.1rem;
    font-family: var(--site-titrage);
    font-size: 2rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--site-rouge);
}

.pg-date__infos {
    font-size: 0.875rem;
    line-height: 1.45;
}

.pg-date__action {
    grid-column: 2;
}

.pg-date__action .site-bouton {
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
}

/* --- Médias : photos et teaser ------------------------------------------ */

.pg-medias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: clamp(0.5rem, 1vw, 0.875rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pg-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--site-noir);
}

.pg-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--site-ease-sortie);
}

.pg-media:hover img {
    transform: scale(1.015);
}

/* Vignette du teaser : un triangle de lecture dessiné en CSS. */
.pg-media--video::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 1.4rem solid var(--site-ivoire);
    border-top: 0.85rem solid transparent;
    border-bottom: 0.85rem solid transparent;
    transform: translate(-35%, -50%);
}

.pg-media--video::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--site-rouge);
    transform: translate(-50%, -50%);
}

.pg-media--video::after {
    z-index: 2;
}

.pg-video {
    aspect-ratio: 16 / 9;
    max-width: 60rem;
}

.pg-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Photos d'un article : formats libres (bannières, portraits), jamais recadrées. */
.pg-medias--libres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pg-medias--libres .pg-media {
    aspect-ratio: auto;
}

.pg-medias--libres .pg-media img {
    width: auto;
    height: auto;
    max-height: clamp(12rem, 26vw, 20rem);
}

/* --- Actualités : magazine ----------------------------------------------- */

.pg-mag__article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 1.25rem;
}

.pg-mag__image {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--site-noir);
}

.pg-mag__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--site-ease-sortie);
}

.pg-mag__article:hover .pg-mag__image img {
    transform: scale(1.03);
}

.pg-mag__article:focus-within .pg-mag__image {
    outline: 2px solid var(--site-rouge);
    outline-offset: 4px;
}

.pg-mag__texte {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
}

.pg-mag__date {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-rouge);
}

.pg-mag__titre {
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.pg-mag__titre a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.18s ease-out;
}

.pg-mag__article:hover .pg-mag__titre a {
    text-decoration-color: var(--site-rouge);
}

.pg-mag__resume {
    display: -webkit-box;
    max-width: 52ch;
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.pg-mag__auteur {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --- Actualités : la liste ----------------------------------------------- */

/* La plus récente à la une : grande photo sur un peu moins des deux tiers, texte à côté. */
.pg-une {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.pg-une .pg-fiche__image {
    aspect-ratio: 16 / 10;
}

.pg-une .pg-fiche__texte {
    gap: 0.75rem;
}

.pg-une .pg-fiche__nom {
    max-width: 18ch;
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.pg-une .pg-fiche__resume {
    max-width: 46ch;
    font-size: 1rem;
}

/* Les suivantes : une grille de fiches, photos au même format que les spectacles. */
.pg-actus__suite {
    margin-top: var(--pg-rythme);
    padding-top: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid rgba(151, 15, 23, 0.25);
}

.pg-actus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pg-actus .pg-fiche {
    gap: 1rem;
}

.pg-actus .pg-fiche__nom {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.pg-actus .pg-fiche__resume {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* --- Actualités : l'article ---------------------------------------------- */

/* Tête, texte et photos sur une même colonne centrée : l'article occupe seul la page. */
.pg-lecture__tete,
.pg-lecture__texte,
.pg-lecture__photos {
    max-width: 48rem;
    margin-inline: auto;
}

.pg-lecture__tete {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
    border-bottom: 1px solid rgba(151, 15, 23, 0.25);
}

.pg-lecture__rubrique {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pg-lecture__rubrique a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--site-rouge);
    text-decoration: none;
}

.pg-lecture__rubrique a:hover {
    color: var(--site-noir);
}

.pg-lecture__titre {
    max-width: 24ch;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.pg-lecture__signature {
    font-size: 0.9375rem;
    font-weight: 600;
}

.pg-lecture__texte {
    font-size: 1.125rem;
    line-height: 1.7;
}

.pg-lecture__photos {
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0;
}

/* « À lire aussi » : une ligne discrète de petites vignettes, sans résumé. */
.pg-autres {
    --pg-rythme: clamp(2rem, 4vw, 2.75rem);
}

.pg-autres__titre {
    margin-bottom: 1.25rem;
    font-family: var(--site-texte);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pg-autres__liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pg-autres .pg-mag__article {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.875rem;
    align-items: center;
}

.pg-autres .pg-mag__texte {
    gap: 0.25rem;
}

.pg-autres .pg-mag__date {
    font-size: 0.6875rem;
}

.pg-autres .pg-mag__titre {
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.pg-autres .pg-mag__resume,
.pg-autres .pg-mag__auteur {
    display: none;
}

/* --- Tablette et mobile ------------------------------------------------- */

@media (max-width: 991.98px) {
    .pg-detail {
        grid-template-columns: 1fr;
    }

    .pg-liste--lignes .pg-fiche,
    .pg-liste--lignes .pg-fiche--inverse {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .pg-liste--lignes .pg-fiche__image {
        max-width: 22rem;
    }

    .pg-liste--lignes .pg-fiche--inverse .pg-fiche__image {
        order: 0;
    }

    .pg-une {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

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

@media (max-width: 767.98px) {
    .pg-autres__liste {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .pg-actus {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .pg-scene {
        --pg-voile-l: 95%;
    }

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

@media (prefers-reduced-motion: reduce) {
    .pg-fiche__image img,
    .pg-mag__image img,
    .pg-media img {
        transition: none;
    }

    .pg-fiche:hover .pg-fiche__image img,
    .pg-mag__article:hover .pg-mag__image img,
    .pg-media:hover img {
        transform: none;
    }

    /* La lumière et le cadre apparaissent en fondu, sans mouvement. */
    .pg-fiche__image::before,
    .pg-fiche__image::after {
        transform: none;
        transition: opacity 0.3s ease-out;
    }
}

/* Fiche spectacle : lien vers la galerie filtrée sur ce spectacle. */
.pg-medias__tout {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* --- Pages juridiques : mentions légales, confidentialité ---------------- */

/* Sommaire à gauche, qui suit la lecture ; texte sur une colonne de lecture à droite. */
.pg-juridique {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 46rem);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.pg-juridique__sommaire {
    position: sticky;
    top: calc(var(--site-entete-h) + 2rem);
    max-height: calc(100svh - var(--site-entete-h) - 4rem);
    overflow-y: auto;
    padding-top: 1.25rem;
    border-top: 2px solid var(--site-rouge);
    font-size: 0.875rem;
    line-height: 1.4;
}

.pg-juridique__sommaire summary {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-noir);
    list-style: none;
    pointer-events: none;
}

.pg-juridique__sommaire summary::-webkit-details-marker {
    display: none;
}

.pg-juridique__sommaire ol {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.pg-juridique__sommaire li a {
    display: flex;
    gap: 0.6rem;
    padding-block: 0.3rem;
    text-decoration: none;
}

.pg-juridique__sommaire li span {
    flex: none;
    min-width: 2.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--site-rouge);
}

.pg-juridique__sommaire a:hover {
    color: var(--site-rouge);
}

.pg-juridique__sommaire-partie {
    margin-bottom: 0.4rem;
    font-family: var(--site-titrage);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--site-noir);
}

.pg-juridique__sommaire-partie a {
    text-decoration: none;
}

.pg-juridique__texte {
    max-width: none;
    font-size: 1rem;
    line-height: 1.7;
}

.pg-juridique__texte [id] {
    scroll-margin-top: calc(var(--site-entete-h) + 1.5rem);
}

/* Les deux grandes parties : un filet, puis un titre affirmé. */
.pg-juridique__texte .pg-juridique__partie {
    margin: clamp(3.5rem, 6vw, 4.5rem) 0 1.5rem;
    padding-top: clamp(2rem, 4vw, 2.75rem);
    border-top: 1px solid rgba(151, 15, 23, 0.25);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.pg-juridique__texte > .pg-juridique__partie:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pg-juridique__texte .pg-juridique__surtitre,
.pg-juridique__partie .pg-juridique__numero {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--site-texte);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-rouge);
}

/* Les sections : titre moyen, numéro en rouge devant. */
.pg-juridique__texte :is(h2, h3):not(.pg-juridique__partie) {
    margin: 2.5rem 0 0.75rem;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.pg-juridique__texte > :is(h2, h3):first-child,
.pg-juridique__partie + h3 {
    margin-top: 0;
}

.pg-juridique__texte :is(h2, h3):not(.pg-juridique__partie) .pg-juridique__numero {
    margin-right: 0.5em;
    font-variant-numeric: tabular-nums;
    color: var(--site-rouge);
}

.pg-juridique__texte p {
    margin-bottom: 0.75em;
}

.pg-juridique__texte strong {
    color: var(--site-noir);
}

.pg-juridique__texte a {
    color: var(--site-rouge);
    overflow-wrap: anywhere;
}

.pg-juridique__texte a:hover {
    color: var(--site-noir);
}

.pg-juridique__texte ul {
    margin: 0 0 1em;
    padding-left: 1.25rem;
}

.pg-juridique__texte li {
    margin-bottom: 0.35em;
}

.pg-juridique__texte li::marker {
    color: var(--site-rouge);
}

/* Tablette et mobile : le sommaire passe en tête, replié. */
@media (max-width: 991.98px) {
    .pg-juridique {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .pg-juridique__sommaire {
        position: static;
        max-height: none;
        overflow: visible;
        padding-top: 0;
        border-bottom: 1px solid rgba(151, 15, 23, 0.25);
    }

    .pg-juridique__sommaire summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 3rem;
        margin: 0;
        cursor: pointer;
        pointer-events: auto;
    }

    /* Chevron dessiné en CSS, tourné quand le sommaire est ouvert. */
    .pg-juridique__sommaire summary::after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.25rem;
        border-right: 2px solid var(--site-rouge);
        border-bottom: 2px solid var(--site-rouge);
        transform: translateY(-25%) rotate(45deg);
        transition: transform 0.2s var(--site-ease-sortie);
    }

    .pg-juridique__sommaire details[open] summary::after {
        transform: translateY(25%) rotate(-135deg);
    }

    .pg-juridique__sommaire details[open] {
        padding-bottom: 0.5rem;
    }

    .pg-juridique__sommaire li a {
        align-items: center;
        min-height: 2.75rem;
        padding-block: 0.25rem;
    }

    .pg-juridique__sommaire-partie a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg-juridique__sommaire summary::after {
        transition: none;
    }
}

/* ==========================================================================
   Page d'accueil : la scène entre les deux pans du rideau.
   ========================================================================== */

.aff {
    --aff-pan: 0rem;
}

.aff-titre {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.015em;
    text-align: center;
}

.aff-insecable {
    white-space: nowrap;
}

/* Statut ou date, en or, au-dessus du titre d'ouverture et des projets. */
.aff-mention {
    font-weight: 700;
    color: var(--site-or);
}

/* --- La scène ------------------------------------------------------------- */

.aff-scene {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(30rem, calc(85svh - var(--site-entete-h)), 46rem);
    padding: clamp(3rem, 8vh, 5rem) calc(var(--aff-pan) + var(--site-marge)) clamp(4.5rem, 10vh, 6.5rem);
    overflow: hidden;
    background:
        radial-gradient(70% 45% at 50% 100%, rgba(151, 15, 23, 0.22), transparent 70%),
        var(--site-noir);
    text-align: center;
}

.aff {
}

/* Décor : le visuel du spectacle à l'affiche, au fond de la scène. */
/* La photo en scène : fixe, sans animation, pour que le titre reste toujours lisible. */
.aff-scene__decor {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.9;
}

.aff-scene--decor {
    place-items: end center;
}

.aff-scene--decor .aff-scene__poursuite {
    background:
        radial-gradient(var(--aff-voile-l, 58%) 40% at 50% 64%, rgba(8, 7, 8, 0.78), rgba(8, 7, 8, 0) 100%),
        linear-gradient(180deg, rgba(8, 7, 8, 0.4) 0%, rgba(8, 7, 8, 0.25) 28%, rgba(8, 7, 8, 0.35) 50%, rgba(8, 7, 8, 0.85) 100%),
        radial-gradient(40% 30% at 50% 78%, rgba(226, 176, 110, 0.16), transparent 70%);
}

/* La poursuite : un faisceau chaud qui tombe sur la vedette, puis sa flaque au sol. */
.aff-scene__poursuite {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(28% 34% at 50% 38%, rgba(226, 176, 110, 0.2), transparent 70%),
        conic-gradient(from 0deg at 50% -6%, transparent 160deg, rgba(245, 225, 190, 0.07) 172deg, rgba(245, 225, 190, 0.1) 180deg, rgba(245, 225, 190, 0.07) 188deg, transparent 200deg);
}

.aff-scene__plateau {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: clamp(0.85rem, 2vh, 1.5rem);
    max-width: 62rem;
}

.aff-scene__vedette {
    display: block;
    width: auto;
    height: clamp(8rem, 22vh, 14rem);
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.6));
}

/* Mention encadrée de deux filets or. */
.aff-mention--filets {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.aff-mention--filets::before,
.aff-mention--filets::after {
    content: "";
    width: clamp(1.5rem, 5vw, 3.5rem);
    height: 1px;
    background: currentColor;
}

.aff-scene__titre {
    text-shadow: 0 0.15em 1.5rem rgba(0, 0, 0, 0.55);
    font-size: clamp(2.25rem, min(4.6vw, 7vh), 4.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.045em;
    color: var(--site-ivoire);
}

.aff-scene--decor .aff-scene__resume,
.aff-scene--decor .aff-mention {
    text-shadow: 0 0.1em 0.75rem rgba(0, 0, 0, 0.7);
}

.aff-scene__resume {
    max-width: 52ch;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.5;
    color: var(--site-ivoire-doux);
}

.aff-scene__actions {
    justify-content: center;
    margin-top: 0.5rem;
}

.aff-scene__aussi {
    font-size: 0.9375rem;
    color: var(--site-ivoire-doux);
}

.aff-scene__aussi a {
    color: var(--site-or);
    text-underline-offset: 0.3em;
}

/* --- Carrousel des spectacles mis en avant ------------------------------- */

/* Les diapositives se superposent dans la même case de grille : la scène prend la hauteur de la plus haute. */
.aff-scene[data-aff-carrousel] {
    grid-template-areas: "scene";
    padding-bottom: clamp(5rem, 11vh, 6.5rem);
}

.aff-diapo {
    grid-area: scene;
    align-self: end;
    justify-self: center;
}

.aff-diapo__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
}

.aff-diapo.is-active .aff-diapo__image {
    opacity: 0.9;
}

/* Le texte sortant disparaît vite, l'entrant arrive une fois l'image en place : jamais deux textes superposés. */
.aff-diapo .aff-scene__plateau {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}

.aff-diapo.is-active .aff-scene__plateau {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out 0.45s, visibility 0s linear 0s;
}

.aff-carrousel__commandes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1rem, 3vh, 1.75rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.aff-carrousel__fleche {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    background: none;
    color: var(--site-ivoire);
    cursor: pointer;
    filter: drop-shadow(0 0.1em 0.5rem rgba(0, 0, 0, 0.6));
    transform: translateY(-50%);
    transition: color 0.18s ease-out;
}

.aff-carrousel__fleche--gauche {
    left: clamp(0.25rem, 2vw, 1.5rem);
}

.aff-carrousel__fleche--droite {
    right: clamp(0.25rem, 2vw, 1.5rem);
}

.aff-carrousel__fleche:hover {
    color: var(--site-or);
}

.aff-carrousel__points {
    display: flex;
    gap: 0.25rem;
}

.aff-carrousel__point {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2.75rem;
    border: 0;
    background: none;
    cursor: pointer;
}

.aff-carrousel__point::before {
    content: "";
    width: 1.5rem;
    height: 2px;
    background: rgba(245, 239, 230, 0.45);
    transition: background-color 0.2s ease-out;
}

.aff-carrousel__point[aria-current="true"]::before,
.aff-carrousel__point:hover::before {
    background: var(--site-or);
}

/* --- Qui sommes-nous (zone de lecture ivoire) ----------------------------- */

.aff-troupe {
    padding: clamp(3rem, 6vw, 4.5rem) var(--site-marge);
    background: var(--site-ivoire);
    color: var(--site-encre);
}

.aff-troupe ::selection,
.aff-projets ::selection {
    background: var(--site-rouge);
    color: var(--site-ivoire);
}

.aff-troupe :focus-visible,
.aff-projets :focus-visible {
    outline-color: var(--site-rouge);
}

.aff-troupe .aff-titre,
.aff-projets .aff-titre {
    color: var(--site-noir);
}

.aff-troupe__texte {
    max-width: 62rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    columns: 2 20rem;
    column-gap: var(--site-gouttiere);
}

.aff-troupe__texte p {
    margin-bottom: 1.1em;
    break-inside: avoid;
}

/* Le premier paragraphe a la même taille que les suivants. */
.aff-troupe__texte .aff-troupe__chapo {
    column-span: all;
}

/* Avec un visuel : image d'un côté, texte de l'autre, comme sur l'ancienne page. */
.aff-troupe--image .aff-troupe__grille {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.aff-troupe__image {
    margin: 0;
}

.aff-troupe__image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 20rem;
    margin-inline: auto;
    object-fit: contain;
}

.aff-troupe--image .aff-titre {
    text-align: left;
}

.aff-troupe--image .aff-troupe__texte {
    max-width: none;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    columns: auto;
}

.aff-troupe--image .aff-troupe__texte p {
    max-width: 60ch;
}

/* --- Programme ------------------------------------------------------------ */

.aff-programme {
    padding: clamp(3.5rem, 7vw, 5.5rem) var(--site-marge);
    background: var(--site-noir-coulisse);
}

.aff-programme .aff-titre {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.aff-programme__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aff-date {
    display: grid;
    grid-template-columns: minmax(9rem, 2fr) 7fr minmax(9rem, 3fr);
    gap: 0.75rem var(--site-gouttiere);
    align-items: center;
    padding-block: 1.1rem;
    border-top: 1px solid var(--site-filet);
}

.aff-date:last-child {
    border-bottom: 1px solid var(--site-filet);
}

.aff-date__quand time {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aff-date__jour {
    font-family: var(--site-titrage);
    font-size: clamp(2.125rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--site-or);
    font-variant-numeric: tabular-nums;
}

.aff-date__mois {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--site-ivoire-doux);
}

.aff-date__nom {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}

.aff-date__lieu {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--site-ivoire-doux);
}

.aff-date__action {
    justify-self: end;
}

.aff-date__action .site-bouton {
    min-height: 2.75rem;
    padding: 0.6rem 1.4rem;
}

.aff-programme__vide {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    max-width: 44rem;
    margin-inline: auto;
    padding-top: 2.5rem;
    border-top: 1px solid var(--site-filet);
    text-align: center;
}

.aff-programme__vide-titre {
    font-family: var(--site-titrage);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--site-or);
}

.aff-programme__vide p:not(.aff-programme__vide-titre) {
    max-width: 50ch;
    color: var(--site-ivoire-doux);
}

.aff-programme__vide .site-actions {
    justify-content: center;
    margin-top: 0.5rem;
}

/* --- Projets en cours ----------------------------------------------------- */

.aff-projets {
    padding: clamp(3rem, 6vw, 4.5rem) var(--site-marge);
    background: var(--site-ivoire);
    color: var(--site-encre);
}

.aff-projets .aff-titre {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.aff-projets .aff-mention {
    font-size: 0.9375rem;
    color: var(--site-rouge);
}

/* Colonne resserrée : image et texte restent groupés, même en grand écran. */
.aff-projets__liste {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    max-width: 56rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.aff-projet {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.aff-projet--inverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
}

.aff-projet--inverse .aff-projet__image {
    order: 2;
}

.aff-projet__image {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--site-noir);
}

.aff-projet__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--site-ease-sortie);
}

.aff-projet:hover .aff-projet__image img {
    transform: scale(1.03);
}

.aff-projet__texte {
    display: grid;
    gap: 0.9rem;
    max-width: 32rem;
}

.aff-projet__nom {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--site-noir);
}

.aff-projet__nom a {
    text-decoration: none;
}

.aff-projet__nom a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.aff-projet__auteur {
    font-weight: 600;
}

/* --- Avis ----------------------------------------------------------------- */

.aff-avis {
    padding: clamp(2.5rem, 5vw, 3.75rem) var(--site-marge);
    background: var(--site-ivoire);
    color: var(--site-encre);
}

.aff-avis ::selection {
    background: var(--site-rouge);
    color: var(--site-ivoire);
}

.aff-avis :focus-visible {
    outline-color: var(--site-rouge);
}

.aff-avis .aff-titre {
    color: var(--site-noir);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.aff-avis__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--site-gouttiere);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Défilement automatique (activé par le script) : une piste deux fois plus large
   que nécessaire glisse d'une moitié, en boucle, sans jamais déborder de la page. */
.aff-avis__fenetre {
    overflow: hidden;
}

/* Fondu sur les bords pendant le défilement : les avis entrent et sortent sans coupure nette. */
.aff-avis__fenetre:has(.is-defilant) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.aff-avis__liste.is-defilant {
    display: flex;
    gap: 0;
    width: max-content;
    animation: aff-avis-defile var(--aff-avis-duree, 40s) linear infinite;
}

.aff-avis__liste.is-defilant .aff-avis__item {
    flex: none;
    width: min(78vw, 24rem);
    padding-right: var(--site-gouttiere);
}

.aff-avis__fenetre:hover .is-defilant,
.aff-avis__fenetre:focus-within .is-defilant,
.aff-avis__fenetre.is-pause .is-defilant {
    animation-play-state: paused;
}

@keyframes aff-avis-defile {
    to {
        transform: translateX(-50%);
    }
}

.aff-avis__commande {
    margin-top: 1rem;
    text-align: center;
}

.aff-avis .aff-avis__pause {
    border: 0;
    background: none;
    padding: 0;
    color: var(--site-rouge);
    cursor: pointer;
}

.aff-avis .aff-avis__pause:hover {
    color: var(--site-noir);
}


.aff-avis__item figure {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    height: 100%;
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(151, 15, 23, 0.3);
}

.aff-note {
    display: inline-flex;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: rgba(42, 34, 36, 0.2);
}

.aff-note .is-on {
    color: var(--site-rouge);
}

.aff-avis__item blockquote {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--site-noir);
    max-width: 62ch;
}

.aff-avis__item figcaption {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--site-encre);
}

/* --- Tablette et mobile --------------------------------------------------- */

@media (max-width: 991.98px) {

    .aff-date {
        grid-template-columns: minmax(8rem, auto) 1fr;
    }

    .aff-date__action {
        grid-column: 2;
        justify-self: start;
    }

    .aff-projet,
    .aff-projet--inverse {
        grid-template-columns: 1fr;
    }

    .aff-projet--inverse .aff-projet__image {
        order: 0;
    }

    .aff-projet__image {
        max-width: 26rem;
    }

    .aff-troupe--image .aff-troupe__grille {
        grid-template-columns: 1fr;
    }

    .aff-troupe__image img {
        max-height: 14rem;
    }
}

@media (max-width: 575.98px) {

    .aff-scene {
        --aff-voile-l: 95%;
    }


    .aff-scene {
        padding-inline: calc(var(--aff-pan) + 1rem);
    }

    .aff-mention--filets {
        gap: 0.6rem;
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
        white-space: nowrap;
    }

    .aff-mention--filets::before,
    .aff-mention--filets::after {
        width: 1rem;
    }

    .aff-date {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .aff-date__action {
        grid-column: 1;
    }
}

/* Rideau déjà ouvert lors de cette visite : la poursuite s'allume aussitôt. */
@media (prefers-reduced-motion: reduce) {
    .aff-diapo__image,
    .aff-diapo .aff-scene__plateau,
    .aff-diapo.is-active .aff-scene__plateau {
        transition: none;
    }


    .aff-projet__image img {
        transition: none;
    }

    .aff-projet:hover .aff-projet__image img {
        transform: none;
    }
}

/* ==========================================================================
   Galerie : filtres, mosaïque de photos et visionneuse.
   ========================================================================== */

.gal-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1rem;
}

.gal-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.gal-filtre {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--site-encre);
    font: 600 0.9375rem var(--site-texte);
    cursor: pointer;
    background-image: linear-gradient(var(--site-rouge), var(--site-rouge));
    background-position: left calc(100% - 0.45rem);
    background-size: 0 1px;
    background-repeat: no-repeat;
    transition: color 0.18s ease-out, background-size 0.3s var(--site-ease-sortie);
}

.gal-filtre__nombre {
    font-weight: 500;
    opacity: 0.7;
}

.gal-filtre:hover,
.gal-filtre[aria-pressed="true"] {
    color: var(--site-rouge);
    background-size: 100% 1px;
}

.gal-tri {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--site-encre);
}

.gal-tri select {
    min-height: 2.75rem;
    padding: 0 1.75rem 0 0.25rem;
    border: 0;
    border-bottom: 1px solid rgba(42, 34, 36, 0.45);
    border-radius: 0;
    appearance: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23970F17' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 0.25rem center no-repeat;
    color: var(--site-noir);
    font: 600 0.9375rem var(--site-texte);
    cursor: pointer;
}

.gal-tri select option {
    color: var(--site-noir);
}

.gal-compte {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: rgba(42, 34, 36, 0.75);
}

/* Mosaïque éditoriale : grille sans trou, rythmée par un motif de formats
   (grande 2×2, haute 1×2, large 2×1, simple 1×1). */
.gal-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(9rem, 15vw, 14rem);
    grid-auto-flow: dense;
    gap: clamp(0.5rem, 1vw, 0.875rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gal-photo--grande {
    grid-column: span 2;
    grid-row: span 2;
}

.gal-photo--haute {
    grid-row: span 2;
}

.gal-photo--large {
    grid-column: span 2;
}

.gal-photo[hidden] {
    display: none;
}

.gal-photo__bouton {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--site-noir);
    cursor: zoom-in;
}

.gal-photo__bouton img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform 0.7s var(--site-ease-sortie);
}

.gal-photo--grande .gal-photo__legende {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.gal-photo__legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    padding: 3rem 1rem 0.9rem;
    background: linear-gradient(0deg, rgba(8, 7, 8, 0.85), rgba(8, 7, 8, 0));
    color: var(--site-ivoire);
    font: 700 1rem/1.2 var(--site-titrage);
    letter-spacing: -0.02em;
    text-align: left;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.25s ease-out, transform 0.35s var(--site-ease-sortie);
}

.gal-photo__bouton:hover img,
.gal-photo__bouton:focus-visible img {
    transform: scale(1.04);
}

.gal-photo__bouton:hover .gal-photo__legende,
.gal-photo__bouton:focus-visible .gal-photo__legende {
    opacity: 1;
    transform: none;
}

.gal-photo__bouton:focus-visible {
    outline: 2px solid var(--site-rouge);
    outline-offset: 3px;
}

.gal-plus {
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.gal-plus[hidden] {
    display: none;
}

/* --- Visionneuse --------------------------------------------------------- */

.gal-visionneuse {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: clamp(3.5rem, 6vh, 4.5rem) clamp(0.5rem, 5vw, 5rem) clamp(1rem, 3vh, 2rem);
    border: 0;
    background: rgba(8, 7, 8, 0.96);
    color: var(--site-ivoire);
}

.gal-visionneuse[open] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.gal-visionneuse::backdrop {
    background: rgba(8, 7, 8, 0.96);
}

.gal-visionneuse__figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    gap: 1rem;
    height: 100%;
    min-height: 0;
    margin: 0;
}

.gal-visionneuse__cadre {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.gal-visionneuse__image {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    align-self: center;
}

.gal-visionneuse__texte {
    display: grid;
    gap: 0.35rem;
    width: min(100%, 46rem);
    font-family: var(--site-texte);
    text-align: center;
}

.gal-visionneuse__nom {
    font-family: var(--site-titrage);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.gal-visionneuse__legende {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    color: var(--site-ivoire-doux);
}

.gal-visionneuse__legende.is-complete {
    display: block;
    max-height: 30vh;
    overflow-y: auto;
}

.gal-visionneuse__plus {
    justify-self: center;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--site-or);
    font: 600 0.875rem var(--site-texte);
    text-decoration: underline;
    text-underline-offset: 0.35em;
    cursor: pointer;
}

.gal-visionneuse__pied {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: var(--site-ivoire-doux);
}

.gal-visionneuse__fermer,
.gal-visionneuse__fleche {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    background: none;
    color: var(--site-ivoire);
    cursor: pointer;
    transition: color 0.18s ease-out;
}

.gal-visionneuse__fermer {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.gal-visionneuse__fermer:hover,
.gal-visionneuse__fleche:hover {
    color: var(--site-or);
}

.gal-visionneuse :focus-visible {
    outline: 2px solid var(--site-or);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .gal-grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .gal-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 9rem;
    }

    /* Sur téléphone, pas de survol : le nom reste visible. */
    .gal-photo__legende {
        padding: 2rem 0.6rem 0.5rem;
        font-size: 0.8125rem;
        opacity: 1;
        transform: none;
    }

    .gal-visionneuse[open] {
        grid-template-columns: minmax(0, 1fr);
    }

    .gal-visionneuse__fleche {
        position: absolute;
        bottom: 0.5rem;
    }

    .gal-visionneuse__fleche--gauche {
        left: 0.5rem;
    }

    .gal-visionneuse__fleche--droite {
        right: 0.5rem;
    }

    .gal-visionneuse {
        padding-bottom: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gal-photo__bouton img,
    .gal-photo__legende,
    .gal-filtre {
        transition: none;
    }

    .gal-photo__bouton:hover img,
    .gal-photo__bouton:focus-visible img {
        transform: none;
    }
}

/* --- Partage d'une photo --------------------------------------------------- */

.gal-partage {
    position: relative;
}

.gal-partage__bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--site-ivoire);
    font: 600 0.875rem var(--site-texte);
    cursor: pointer;
    transition: color 0.18s ease-out;
}

.gal-partage__bouton:hover,
.gal-partage__bouton[aria-expanded="true"] {
    color: var(--site-or);
}

.gal-partage__panneau {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 5;
    display: grid;
    width: 15rem;
    padding: 0.5rem 0;
    background: var(--site-ivoire);
    color: var(--site-noir);
    text-align: left;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

.gal-partage__panneau[hidden] {
    display: none;
}

.gal-partage__titre {
    padding: 0.35rem 1rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--site-rouge);
}

.gal-partage__reseau {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 0;
    background: none;
    color: var(--site-noir);
    font: 500 0.9375rem var(--site-texte);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.gal-partage__reseau i,
.gal-partage__reseau svg {
    width: 1.1rem;
    text-align: center;
    color: var(--site-rouge);
}

.gal-partage__reseau:hover,
.gal-partage__reseau:focus-visible {
    outline: none;
    background: rgba(151, 15, 23, 0.08);
}

.gal-partage__reseau[hidden] {
    display: none;
}

@media (max-width: 575.98px) {
    .gal-partage__panneau {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: 4.5rem;
        width: auto;
    }
}

/* ==========================================================================
   Page Contact : formulaire et coordonnées.
   ========================================================================== */

.pg-contact {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.pg-alerte {
    margin-bottom: 1.75rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid currentColor;
    font-weight: 600;
}

.pg-alerte--succes {
    background: rgba(30, 107, 58, 0.08);
    color: #1E6B3A;
}

.pg-alerte--erreur {
    background: rgba(151, 15, 23, 0.07);
    color: var(--site-rouge);
}

.pg-form {
    display: grid;
    gap: 1.5rem;
}

.pg-form__grille,
.pg-form__groupe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

.pg-form__groupe {
    grid-column: 1 / -1;
}

#prestaFields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pg-form [hidden] {
    display: none !important;
}

.pg-form select,
.pg-form textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-bottom: 1px solid rgba(42, 34, 36, 0.45);
    border-radius: 0;
    background: transparent;
    color: var(--site-noir);
    font: 500 1rem/1.55 var(--site-texte);
}

.pg-form select {
    appearance: none;
    padding-right: 2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23970F17' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 0.25rem center no-repeat;
    cursor: pointer;
}

.pg-form textarea {
    resize: vertical;
    padding: 0.75rem;
    border: 1px solid rgba(42, 34, 36, 0.3);
}

.pg-form select:focus {
    outline: none;
    border-bottom-color: var(--site-rouge);
    box-shadow: 0 1px 0 0 var(--site-rouge);
}

.pg-form textarea:focus {
    outline: none;
    border-color: var(--site-rouge);
    box-shadow: 0 0 0 1px var(--site-rouge);
}

.pg-form__case {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pg-form__case input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--site-rouge);
}

.pg-form__erreur {
    color: var(--site-rouge);
    font-weight: 600;
}

.pg-form__erreur:empty {
    display: none;
}

.pg-form .site-bouton {
    justify-self: start;
}

.pg-coordonnees {
    display: grid;
    gap: 1.1rem;
    margin: 0 0 1rem;
}

.pg-coordonnees dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--site-rouge);
}

.pg-coordonnees dd {
    margin: 0.15rem 0 0;
}

.pg-coordonnees a {
    color: var(--site-noir);
    text-decoration: underline;
    text-decoration-color: rgba(151, 15, 23, 0.4);
    text-underline-offset: 0.2em;
}

.pg-coordonnees a:hover {
    color: var(--site-rouge);
}

.pg-carte {
    height: 18rem;
    margin-top: 1.5rem;
    background: rgba(42, 34, 36, 0.06);
}

.pg-carte__marqueur {
    color: var(--site-rouge);
    font-size: 1.75rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .pg-contact {
        grid-template-columns: 1fr;
    }

    .pg-carte {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .pg-form__grille,
    .pg-form__groupe,
    #prestaFields {
        grid-template-columns: 1fr;
    }
}

.pg-contact__infos .pg-encart__titre {
    margin-bottom: 1.25rem;
}