/* =================================================================
   THÉÂTRE DE LA MARMITE
   Feuille de style principale — direction « affiche imprimée ».

   Principes tenus dans tout le fichier :
   - du papier, de l'encre, un seul rouge ; pas de dégradé
   - des filets 1px plutôt que des ombres floues
   - des angles vifs ; l'unique ombre autorisée est une ombre portée
     nette (décalage franc), comme un aplat d'encre mal calé
   - la typo porte la mise en page : Bricolage Grotesque pour les
     titres/labels, Fraunces pour tout ce qui se lit vraiment
   ================================================================= */

/* -----------------------------------------------------------------
   1. Jetons
   ----------------------------------------------------------------- */

:root {
    /* Encres */
    --papier:       #f5f1e8;
    --papier-creux: #ebe4d5;
    --papier-vif:   #fbf9f4;
    --encre:        #16130f;
    --encre-douce:  #4a4238;
    --encre-pale:   #8a7f70;
    --rouge:        #c3341f;
    --rouge-fonce:  #8f2313;

    /* Filets */
    --filet:        1px solid var(--encre);
    --filet-pale:   1px solid rgba(22, 19, 15, .18);
    --filet-epais:  2px solid var(--encre);

    /* Rythme vertical */
    --gouttiere:    clamp(1.25rem, 3vw, 2.5rem);
    --marge:        clamp(1.25rem, 5vw, 4.5rem);
    --section:      clamp(4rem, 9vw, 8rem);

    /* Familles */
    --titre: "Bricolage Grotesque", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
    --texte: "Fraunces", Georgia, "Times New Roman", serif;

    --largeur:      1320px;
    --largeur-lit:  68ch;   /* longueur de ligne confortable */
}

/* -----------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-optical-sizing: auto;
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.62;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Grain de papier — très léger, purement décoratif. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .045;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Un display: explicite l'emporterait sur la règle du navigateur : sans cela
   les flèches masquées de la visionneuse restent visibles mais inertes. */
[hidden] { display: none !important; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }

button { font: inherit; color: inherit; }

hr {
    border: 0;
    border-top: var(--filet);
    margin: var(--gouttiere) 0;
}

::selection { background: var(--rouge); color: var(--papier-vif); }

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

.saut-contenu {
    position: absolute;
    left: 1rem;
    top: 0;
    z-index: 10000;
    transform: translateY(-150%);
    transition: transform .15s ease;
    background: var(--encre);
    color: var(--papier);
    padding: .75rem 1.25rem;
    font-family: var(--titre);
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .8rem;
}
.saut-contenu:focus { transform: translateY(1rem); }

.lecture-seule {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -----------------------------------------------------------------
   3. Typographie
   ----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--titre);
    font-weight: 800;
    font-stretch: 88%;
    line-height: .98;
    letter-spacing: -.015em;
    text-wrap: balance;
    margin: 0;
}

.titre-affiche {
    font-family: var(--titre);
    font-weight: 800;
    font-stretch: 78%;
    text-transform: uppercase;
    line-height: .88;
    letter-spacing: -.01em;
}

.kicker {
    font-family: var(--titre);
    font-weight: 600;
    font-stretch: 100%;
    text-transform: uppercase;
    letter-spacing: .035em;
    font-size: .7rem;
    line-height: 1.4;
    color: var(--rouge);
    display: block;
}

.kicker--encre { color: var(--encre-pale); }

.plomb {  /* chiffres tabulaires, pour les années */
    font-family: var(--titre);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.exergue {
    font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
    line-height: 1.45;
    font-style: italic;
    color: var(--encre-douce);
    max-width: 34ch;
}

/* -----------------------------------------------------------------
   4. Gabarit
   ----------------------------------------------------------------- */

.enveloppe {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--marge);
}

.enveloppe--etroite { max-width: 940px; }

.bande { padding-block: var(--section); }

.bande--encre {
    background: var(--encre);
    color: var(--papier);
}
.bande--encre .kicker { color: #e8a06f; }

.bande--creux { background: var(--papier-creux); }

/* Intitulé de section : numéro, filet, titre. */
.entete-section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    border-bottom: var(--filet);
}

.entete-section__num {
    font-family: var(--titre);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .025em;
    color: var(--rouge);
    font-variant-numeric: tabular-nums;
}

.entete-section__titre {
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
    text-transform: uppercase;
    font-stretch: 80%;
}

.entete-section__lien {
    grid-column: 3;
    justify-self: end;
    align-self: baseline;
    font-family: var(--titre);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    white-space: nowrap;
}
.entete-section__lien:hover { color: var(--rouge); }

@media (max-width: 720px) {
    .entete-section { grid-template-columns: 1fr; gap: .4rem; }
    .entete-section__num { order: -1; }
    .entete-section__lien { grid-column: 1; justify-self: start; margin-top: .75rem; }
}

/* -----------------------------------------------------------------
   5. Boutons
   ----------------------------------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--titre);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-decoration: none;
    padding: .85rem 1.5rem;
    background: var(--rouge);
    color: var(--papier-vif);
    border: 1.5px solid var(--encre);
    box-shadow: 5px 5px 0 var(--encre);
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}

.bouton:hover {
    background: var(--rouge-fonce);
    color: var(--papier-vif);
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--encre);
}

.bouton:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--encre); }

.bouton--creux {
    background: transparent;
    color: var(--encre);
}
.bouton--creux:hover { background: var(--encre); color: var(--papier); }

.bouton--clair {
    background: var(--papier);
    color: var(--encre);
    border-color: var(--papier);
    box-shadow: 5px 5px 0 var(--rouge);
}
.bouton--clair:hover { background: var(--papier-vif); color: var(--encre); }

/* Lien fléché discret */
.lien-fleche {
    font-family: var(--titre);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.lien-fleche {
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}
.lien-fleche:hover { color: var(--rouge); }

/* -----------------------------------------------------------------
   6. En-tête du site
   ----------------------------------------------------------------- */

.site-entete {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--papier);
    border-bottom: var(--filet);
}

/* Connecté, la barre d'administration est fixée en haut de l'écran : sans ce
   décalage elle recouvre la moitié de l'en-tête et une partie des liens du
   menu devient impossible à cliquer. */
.admin-bar .site-entete { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .site-entete { top: 46px; }
}

/* Sous 600px WordPress laisse la barre défiler avec la page. */
@media screen and (max-width: 600px) {
    .admin-bar .site-entete { top: 0; }
}

.site-entete__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--largeur);
    margin-inline: auto;
    padding: .7rem clamp(1rem, 3vw, 2.75rem);
}

.marque {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    flex-shrink: 0;
}

.marque img, .marque .custom-logo {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
}

.marque__mot {
    font-family: var(--titre);
    font-weight: 800;
    font-stretch: 78%;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: .92;
    font-size: 1.05rem;
}
.marque__mot small {
    display: block;
    font-weight: 500;
    font-stretch: 100%;
    font-size: .53rem;
    letter-spacing: .04em;
    color: var(--encre-pale);
    margin-top: .18rem;
}

.nav-principale { margin-left: auto; }

.nav-principale ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(.8rem, 1.35vw, 1.7rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-principale a {
    font-family: var(--titre);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    padding-block: .35rem;
    display: block;
    position: relative;
    white-space: nowrap;
}

.nav-principale a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--rouge);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.nav-principale a:hover::after,
.nav-principale .current-menu-item > a::after,
.nav-principale .current_page_parent > a::after { transform: scaleX(1); }

.nav-principale .current-menu-item > a { color: var(--rouge); }

.entete__actions { display: flex; align-items: center; gap: 1rem; }

.entete__cta {
    font-family: var(--titre);
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-decoration: none;
    padding: .5rem 1rem;
    border: 1.5px solid var(--encre);
    background: var(--encre);
    color: var(--papier);
    transition: background .18s ease, color .18s ease;
}
.entete__cta:hover { background: var(--rouge); border-color: var(--rouge); color: var(--papier-vif); }

.bascule-menu {
    display: none;
    background: none;
    border: 1.5px solid var(--encre);
    padding: .45rem .6rem;
    cursor: pointer;
    line-height: 0;
}
.bascule-menu span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--encre);
    margin: 4px 0;
    transition: transform .22s ease, opacity .18s ease;
}
.bascule-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bascule-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1200px) {
    .bascule-menu { display: block; }
    .marque { order: 1; }
    .entete__actions { order: 2; }

    .nav-principale {
        order: 3;
        margin-left: 0;
        flex-basis: 100%;
        display: none;
        border-top: var(--filet);
        margin-top: .7rem;
    }
    .site-entete__inner { flex-wrap: wrap; }
    .nav-principale.est-ouvert { display: block; }
    .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-principale li + li { border-top: var(--filet-pale); }
    .nav-principale a { padding: .95rem 0; font-size: .95rem; letter-spacing: .015em; }
    .nav-principale a::after { display: none; }
}

@media (max-width: 420px) {
    .site-entete__inner { gap: .75rem; padding-inline: 1rem; }
    .marque img, .marque .custom-logo { width: 34px !important; height: 34px !important; }
    .marque__mot { font-size: .95rem; }
    .entete__cta { padding: .45rem .7rem; font-size: .68rem; letter-spacing: .015em; }
}

/* -----------------------------------------------------------------
   7. Affiche d'accueil (carrousel)
   ----------------------------------------------------------------- */

.affiche {
    position: relative;
    border-bottom: var(--filet);
    background: var(--encre);
    overflow: hidden;
}

.affiche__scene {
    position: relative;
    min-height: clamp(460px, 72vh, 720px);
}

.affiche__vue {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
}
.affiche__vue.est-active { opacity: 1; visibility: visible; }

.affiche__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 9s linear;
    filter: saturate(.82) contrast(1.05);
}
.affiche__vue.est-active .affiche__image { transform: scale(1); }

.affiche__voile {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(11,9,7,.88) 0%, rgba(11,9,7,.62) 38%, rgba(11,9,7,.12) 72%),
        linear-gradient(to top, rgba(11,9,7,.6), transparent 45%);
}

.affiche__texte {
    position: relative;
    z-index: 2;
    max-width: var(--largeur);
    margin-inline: auto;
    padding: clamp(3.5rem, 9vw, 7rem) var(--marge) clamp(5.5rem, 9vw, 7rem);
    min-height: clamp(460px, 72vh, 720px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--papier);
}

.affiche__bloc { max-width: 34ch; }

.affiche__kicker {
    color: #e8a06f;
    margin-bottom: 1.1rem;
}

.affiche__titre {
    font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.5rem);
    margin: 0 0 1rem;
    color: var(--papier-vif);
    overflow-wrap: break-word;

    /* Un titre à rallonge ne doit pas repousser le bouton hors de l'écran. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.affiche__intro {
    font-size: clamp(.95rem, .92rem + .28vw, 1.1rem);
    line-height: 1.5;
    color: rgba(245, 241, 232, .82);
    margin: 0 0 1.8rem;
    max-width: 42ch;
    font-style: italic;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Barre de service : compteur + flèches + progression */
.affiche__barre {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: var(--largeur);
    margin-inline: auto;
    padding: 0 var(--marge) clamp(1.5rem, 3vw, 2.5rem);
    color: var(--papier);
}

.affiche__compteur {
    font-family: var(--titre);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
}
.affiche__compteur b { color: #e8a06f; font-weight: 700; }

.affiche__jauge {
    flex: 1;
    height: 2px;
    background: rgba(245, 241, 232, .28);
    position: relative;
    max-width: 340px;
}
.affiche__jauge span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--papier);
    transition: width .4s ease;
}

.affiche__fleches { display: flex; gap: .5rem; margin-left: auto; }

.affiche__fleche {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(245, 241, 232, .45);
    background: transparent;
    color: var(--papier);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .18s ease, color .18s ease;
}
.affiche__fleche:hover { background: var(--papier); color: var(--encre); }
.affiche__fleche svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
    .affiche__bloc { max-width: none; }
    .affiche__fleches { display: none; }
}

/* -----------------------------------------------------------------
   8. Bandeau défilant
   ----------------------------------------------------------------- */

.bandeau {
    background: var(--rouge);
    color: var(--papier-vif);
    border-block: var(--filet);
    overflow: hidden;
    padding-block: .7rem;
    user-select: none;
}

.bandeau__piste {
    display: flex;
    width: max-content;
    animation: defile 42s linear infinite;
}

.bandeau__piste > span {
    font-family: var(--titre);
    font-weight: 700;
    font-stretch: 88%;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .85rem;
    padding-right: 2.5rem;
    white-space: nowrap;
}

@keyframes defile {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .bandeau__piste { animation: none; }
    .affiche__image { transition: none; }
    html { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------
   9. Accueil — la saison en cours
   ----------------------------------------------------------------- */

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

.saison__visuel {
    position: relative;
    border: var(--filet);
    background: var(--papier-creux);
}
.saison__visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.saison__annee {
    position: absolute;
    top: -1px;
    left: -1px;
    background: var(--encre);
    color: var(--papier);
    font-family: var(--titre);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .025em;
    font-size: .85rem;
    padding: .5rem .9rem;
}

.saison__titre {
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
    text-transform: uppercase;
    font-stretch: 78%;
    margin: .5rem 0 .9rem;
}

.saison__auteur {
    font-style: italic;
    color: var(--encre-douce);
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: var(--filet-pale);
}

.saison__resume {
    margin: 0 0 2rem;
    max-width: 52ch;
    color: var(--encre-douce);
}

.saison__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* Petit tableau de faits : dates, lieu, tarifs */
.fiche {
    margin-top: clamp(2rem, 4vw, 3rem);
    border-top: var(--filet);
}
.fiche div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: var(--filet-pale);
    align-items: baseline;
}
.fiche dt {
    font-family: var(--titre);
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--encre-pale);
}
.fiche dd { margin: 0; }
.fiche a { color: var(--rouge); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Une pièce annoncée n'a pas toujours d'affiche : le texte prend alors
   toute la largeur au lieu de laisser une colonne vide. */
.saison--sans-visuel { grid-template-columns: minmax(0, 1fr); }
.saison--sans-visuel .saison__resume { max-width: 68ch; }

@media (max-width: 860px) {
    .saison { grid-template-columns: 1fr; }
    .fiche div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Le mot de la saison (saisi dans Marmite › Calendrier) */
.mot-saison {
    margin: 1.25rem 0 0;
    padding-left: clamp(1rem, 2.5vw, 2rem);
    border-left: var(--filet-epais);
    max-width: 48ch;
    font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
    line-height: 1.45;
    font-style: italic;
    color: var(--encre);
}
.mot-saison p { margin: 0 0 .9rem; }
.mot-saison p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   10. Accueil — chiffres
   ----------------------------------------------------------------- */

.compteurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--filet);
    border-left: var(--filet);
}

.compteurs > div {
    border-right: var(--filet);
    border-bottom: var(--filet);
}

/* Le rembourrage est porté par l'enfant : quand c'est un lien, toute la
   case est cliquable. */
.compteurs a,
.compteurs__corps {
    display: block;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: background .2s ease, color .2s ease;
}

.compteurs a:hover { background: var(--encre); color: var(--papier-vif); }
.compteurs a:hover span { color: rgba(245, 241, 232, .7); }

.compteurs b {
    display: block;
    font-family: var(--titre);
    font-weight: 800;
    font-stretch: 78%;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
    line-height: .9;
    letter-spacing: -.02em;
}

.compteurs span {
    display: block;
    margin-top: .6rem;
    font-family: var(--titre);
    font-weight: 500;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--encre-pale);
}

@media (max-width: 760px) { .compteurs { grid-template-columns: repeat(2, 1fr); } }

/* -----------------------------------------------------------------
   11. Le répertoire — index typographique
   ----------------------------------------------------------------- */

.repertoire { border-top: var(--filet); }

.piece {
    border-bottom: var(--filet-pale);
}

.piece__tete {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 15rem) 2.5rem;
    align-items: baseline;
    gap: 1.5rem;
    width: 100%;
    background: none;
    border: 0;
    padding: clamp(1.1rem, 2.2vw, 1.7rem) 0;
    text-align: left;
    cursor: pointer;
    transition: color .18s ease;
}
.piece__tete:hover { color: var(--rouge); }

.piece__annee {
    font-family: var(--titre);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.1rem, .9rem + .6vw, 1.5rem);
    letter-spacing: .02em;
    color: var(--rouge);
}

.piece__titre {
    font-family: var(--titre);
    font-weight: 700;
    font-stretch: 84%;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 2.15rem);
    line-height: 1.02;
    letter-spacing: -.01em;
    margin: 0;
}

.piece__auteur {
    font-style: italic;
    color: var(--encre-pale);
    font-size: .95rem;
}

.piece__signe {
    justify-self: end;
    align-self: center;
    width: 26px; height: 26px;
    border: 1px solid currentColor;
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}
.piece__signe::before,
.piece__signe::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.piece__signe::before { width: 11px; height: 1.5px; }
.piece__signe::after  { width: 1.5px; height: 11px; transition: transform .25s ease; }
.piece.est-ouverte .piece__signe::after { transform: scaleY(0); }

.piece__volet {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.22,.61,.36,1);
}
.piece.est-ouverte .piece__volet { grid-template-rows: 1fr; }
.piece__volet > div { overflow: hidden; }

.piece__contenu {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1.5rem;
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
.piece__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.piece__texte { color: var(--encre-douce); max-width: 62ch; }
.piece__texte p { margin: 0 0 1rem; }
.piece__texte p:last-child { margin-bottom: 0; }

.piece__affiche {
    border: var(--filet);
    background: var(--papier-creux);
    padding: 0;
    cursor: zoom-in;
    display: block;
    width: 100%;
}
.piece__affiche img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.piece__outils { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }

.vignettes { display: flex; flex-wrap: wrap; gap: .4rem; }
.vignettes button {
    width: 52px; height: 52px;
    padding: 0;
    border: var(--filet-pale);
    background: var(--papier-creux);
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.vignettes button:hover { border-color: var(--rouge); transform: translateY(-2px); }
.vignettes img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
    .piece__tete { grid-template-columns: 4.2rem minmax(0,1fr) 2rem; gap: .8rem 1rem; }
    .piece__auteur { grid-column: 2; font-size: .85rem; }
    .piece__contenu { grid-template-columns: 1fr; gap: 0; }
    .piece__corps { grid-template-columns: 1fr; }
    .piece__affiche { max-width: 260px; order: -1; margin-bottom: 1.5rem; }
}

/* -----------------------------------------------------------------
   12. Sorties parisiennes — fiches en frise
   ----------------------------------------------------------------- */

.sorties {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border-top: var(--filet);
    border-left: var(--filet);
}

.sorties--extrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .sorties--extrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .sorties--extrait { grid-template-columns: 1fr; }
}

.sortie {
    border-right: var(--filet);
    border-bottom: var(--filet);
    padding: clamp(1.4rem, 2.6vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--papier);
    transition: background .2s ease;
}
.sortie:hover { background: var(--papier-vif); }

.sortie__annee {
    font-family: var(--titre);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    letter-spacing: .03em;
    color: var(--rouge);
}

.sortie__titre {
    font-family: var(--titre);
    font-weight: 700;
    font-stretch: 84%;
    font-size: 1.35rem;
    line-height: 1.05;
    margin: 0;
}

.sortie__auteur { font-style: italic; color: var(--encre-pale); font-size: .92rem; }

.sortie__ligne {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .75rem;
    font-size: .9rem;
    padding-top: .55rem;
    border-top: var(--filet-pale);
    color: var(--encre-douce);
}
.sortie__ligne dt {
    font-family: var(--titre);
    font-weight: 600;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--encre-pale);
    padding-top: .25rem;
}
.sortie__ligne dd { margin: 0; }

.sortie__images { display: flex; gap: .35rem; margin-top: auto; padding-top: 1rem; }
.sortie__images button {
    width: 46px; height: 46px;
    border: var(--filet-pale);
    background: var(--papier-creux);
    padding: 0;
    cursor: zoom-in;
    overflow: hidden;
}
.sortie__images button:hover { border-color: var(--rouge); }
.sortie__images img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------
   13. La troupe
   ----------------------------------------------------------------- */

.marmitons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    border-top: var(--filet);
    border-left: var(--filet);
}

.marmiton {
    border-right: var(--filet);
    border-bottom: var(--filet);
    background: var(--papier);
    display: flex;
    flex-direction: column;
}

.marmiton__portrait {
    aspect-ratio: 3 / 4;
    background: var(--papier-creux);
    overflow: hidden;
    position: relative;
}

.marmiton__portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08);
    transition: filter .45s ease, transform .8s ease;
}
.marmiton:hover .marmiton__portrait img { filter: grayscale(0) contrast(1); transform: scale(1.03); }

.marmiton__vide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--encre-pale);
    font-family: var(--titre);
    font-weight: 800;
    font-size: 2.6rem;
    opacity: .35;
}

.marmiton__texte {
    padding: 1.1rem 1.2rem 1.4rem;
    border-top: var(--filet);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}

.marmiton__nom {
    font-family: var(--titre);
    font-weight: 700;
    font-stretch: 84%;
    text-transform: uppercase;
    font-size: .98rem;
    letter-spacing: .01em;
    margin: 0;
}

.marmiton__citation {
    font-style: italic;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--encre-douce);
    margin: 0;
}

/* Anciens : simple liste typographique */
.anciens {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.anciens li {
    font-family: var(--titre);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .015em;
    border: var(--filet-pale);
    padding: .45rem .8rem;
    background: var(--papier-vif);
}

/* Bande de portraits sur l'accueil */
.frise {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    border: var(--filet);
    overflow-x: auto;
    scrollbar-width: thin;
}
.frise img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    border-right: var(--filet);
    transition: filter .4s ease;
}
.frise img:last-child { border-right: 0; }
.frise:hover img { filter: grayscale(0); }

/* -----------------------------------------------------------------
   14. Presse — mur de coupures
   ----------------------------------------------------------------- */

.coupures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.coupures--une-ligne { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .coupures--une-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.coupure {
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.coupure__cadre {
    border: var(--filet);
    background: var(--papier-vif);
    padding: 7px;
    box-shadow: 5px 5px 0 rgba(22, 19, 15, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.coupure:nth-child(3n)   .coupure__cadre { transform: rotate(-.7deg); }
.coupure:nth-child(4n+2) .coupure__cadre { transform: rotate(.55deg); }
.coupure:hover .coupure__cadre {
    transform: rotate(0) translate(-2px, -2px);
    box-shadow: 9px 9px 0 rgba(22, 19, 15, .18);
}

.coupure__cadre img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(.25) contrast(1.06);
}

.coupure__legende {
    font-family: var(--titre);
    font-weight: 500;
    font-size: .78rem;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--encre-douce);
    margin: 0;
}

/* -----------------------------------------------------------------
   15. Annonces
   ----------------------------------------------------------------- */

.annonces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.annonce {
    border: var(--filet);
    background: var(--papier-vif);
    display: flex;
    flex-direction: column;
}
.annonce img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--filet); }
.annonce__corps { padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.annonce__titre {
    font-family: var(--titre);
    font-weight: 700;
    font-stretch: 84%;
    text-transform: uppercase;
    font-size: 1.05rem;
    margin: 0 0 .7rem;
}
.annonce__corps p { margin: 0; color: var(--encre-douce); }

.vide {
    border: 1px dashed rgba(22, 19, 15, .3);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    font-style: italic;
    color: var(--encre-pale);
}

/* -----------------------------------------------------------------
   16. En-tête de page intérieure
   ----------------------------------------------------------------- */

.tete-page {
    border-bottom: var(--filet);
    background: var(--papier);
    position: relative;
}

.tete-page__inner {
    max-width: var(--largeur);
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--marge) clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}

.tete-page__titre {
    font-size: clamp(2.6rem, 1.4rem + 6vw, 6rem);
    text-transform: uppercase;
    font-stretch: 76%;
    margin: .6rem 0 0;
}

.tete-page__chapo {
    font-style: italic;
    color: var(--encre-douce);
    margin: 0;
    padding-bottom: .5rem;
}

.tete-page--image { border-bottom: 0; }
.tete-page--image .tete-page__visuel {
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--marge);
}
.tete-page--image .tete-page__visuel img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border: var(--filet);
    filter: saturate(.9) contrast(1.03);
}

@media (max-width: 860px) {
    .tete-page__inner { grid-template-columns: 1fr; align-items: start; }
}

/* Fil d'Ariane discret */
.fil {
    font-family: var(--titre);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--encre-pale);
}
.fil a { text-decoration: none; }
.fil a:hover { color: var(--rouge); }
.fil span { margin-inline: .5rem; opacity: .5; }

/* -----------------------------------------------------------------
   17. Agenda / infos pratiques
   ----------------------------------------------------------------- */

.agenda { list-style: none; margin: 0; padding: 0; border-top: var(--filet); }

.agenda li {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: var(--filet-pale);
}

.agenda__jour {
    font-family: var(--titre);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -.02em;
}
.agenda__jour small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin-top: .3rem;
}
.agenda__quoi { font-family: var(--titre); font-weight: 600; font-size: 1.05rem; }

.agenda__heure {
    display: block;
    margin-top: .2rem;
    font-family: var(--texte);
    font-weight: 400;
    font-style: italic;
    font-size: .9rem;
    color: var(--encre-pale);
}
.agenda__ou { font-style: italic; color: var(--encre-pale); font-size: .9rem; }

/* Plan d'accès (carte Google) */
.plan {
    display: block;
    width: 100%;
    height: clamp(300px, 42vw, 460px);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border: var(--filet);
}

.duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
}

.encart {
    border: var(--filet);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--papier-vif);
}
.encart h3 {
    font-size: 1.05rem;
    text-transform: uppercase;
    font-stretch: 84%;
    margin-bottom: .9rem;
}
.encart p { margin: 0 0 .8rem; color: var(--encre-douce); }
.encart p:last-child { margin-bottom: 0; }
.encart a { color: var(--rouge); text-decoration: none; border-bottom: 1px solid currentColor; }

/* -----------------------------------------------------------------
   18. Contenu rédigé dans WordPress
   ----------------------------------------------------------------- */

.redac {
    max-width: var(--largeur-lit);
    overflow-wrap: break-word;
}

/* Les pages « Contact » citent des adresses de sites en toutes lettres :
   sans cela elles débordent sur un téléphone. */
.redac a { overflow-wrap: anywhere; }
.redac--large { max-width: var(--largeur); }

/* En pleine largeur, on laisse les colonnes et les images respirer mais on
   garde une longueur de ligne lisible pour le texte courant. */
.redac--large > p,
.redac--large > ul,
.redac--large > ol,
.redac--large > blockquote { max-width: 72ch; }

.redac > * { margin-block: 0 1.35rem; }
.redac > *:last-child { margin-bottom: 0; }

.redac p { color: var(--encre-douce); }

.redac h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
    text-transform: uppercase;
    font-stretch: 80%;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: .8rem;
    border-bottom: var(--filet);
    color: var(--encre);
}

.redac h3 {
    font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    color: var(--encre);
}

.redac h4 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    font-stretch: 100%;
    font-weight: 600;
    color: var(--rouge);
    margin-top: 2rem;
}

.redac h5 {
    font-family: var(--texte);
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
    color: var(--encre-pale);
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 .6rem;
}

.redac a { color: var(--rouge); text-decoration: none; border-bottom: 1px solid rgba(195, 52, 31, .4); }
.redac a:hover { border-bottom-color: currentColor; }

.redac strong { font-weight: 700; color: var(--encre); }

.redac ul, .redac ol { padding-left: 1.2rem; color: var(--encre-douce); }
.redac li { margin-bottom: .4rem; }

.redac blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: var(--filet-epais);
    font-style: italic;
    font-size: 1.15rem;
}

/* Blocs Gutenberg */
.redac .wp-block-columns { display: flex; gap: clamp(1.5rem, 3vw, 3rem); flex-wrap: wrap; margin-bottom: 2rem; }
.redac .wp-block-column { flex: 1 1 260px; min-width: 0; }

.redac .wp-block-image { margin-bottom: 1.5rem; }
.redac .wp-block-image img,
.redac figure img {
    border: var(--filet);
    width: 100%;
}
.redac .wp-block-image.is-resized img { width: auto; }

.redac figcaption,
.redac .wp-element-caption {
    font-family: var(--titre);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: var(--encre-pale);
    margin-top: .6rem;
    text-align: left;
}

.redac .has-text-align-center { text-align: center; }
.redac .has-text-align-right  { text-align: right; }

.redac iframe {
    width: 100%;
    min-height: 380px;
    border: var(--filet);
    display: block;
}

/* Classes héritées de l'ancien site, conservées pour ne pas casser
   les pages déjà rédigées. */
.redac .box-shadow img { box-shadow: 8px 8px 0 rgba(22, 19, 15, .14); }

.redac .card-contact {
    border: var(--filet);
    background: var(--papier-vif);
    padding: clamp(1.25rem, 2.5vw, 1.85rem);
}
.redac .card-contact h4 { margin-top: 0; }
.redac .card-contact p { margin-bottom: 0; }

.redac .color-red a,
.redac .card-contact a { color: var(--rouge); }

.redac .btn-link { display: inline-block; margin-right: .75rem; }
.redac .btn-link a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--titre);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-decoration: none;
    border: 1.5px solid var(--encre);
    border-bottom-width: 1.5px;
    background: var(--rouge);
    color: var(--papier-vif);
    padding: .8rem 1.4rem;
    box-shadow: 5px 5px 0 var(--encre);
    transition: transform .12s ease, box-shadow .12s ease;
}
.redac .btn-link a:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--encre); }

.redac .hommage {
    border: var(--filet);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--papier-vif);
}

/* Pagination des archives */
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-family: var(--titre);
    font-weight: 600;
    font-size: .8rem;
}
.pagination .page-numbers {
    border: var(--filet-pale);
    padding: .5rem .85rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.pagination .page-numbers:hover { border-color: var(--encre); }
.pagination .page-numbers.current { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* -----------------------------------------------------------------
   19. Pied de page
   ----------------------------------------------------------------- */

.site-pied {
    background: var(--encre);
    color: rgba(245, 241, 232, .72);
    border-top: var(--filet);
    font-size: .92rem;
}

.site-pied__haut {
    max-width: var(--largeur);
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 5rem) var(--marge) clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
}

.site-pied__mot {
    font-family: var(--titre);
    font-weight: 800;
    font-stretch: 76%;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
    line-height: .92;
    color: var(--papier-vif);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1rem;
}

.site-pied p { margin: 0 0 1rem; max-width: 34ch; line-height: 1.6; }

.site-pied__titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: rgba(245, 241, 232, .45);
    margin: 0 0 1.1rem;
}

.site-pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.site-pied a { color: rgba(245, 241, 232, .82); text-decoration: none; }
.site-pied a:hover { color: #e8a06f; }

.site-pied__reseau {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--titre);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    border: 1px solid rgba(245, 241, 232, .3);
    padding: .55rem .9rem;
    margin-top: .5rem;
}
.site-pied__reseau:hover { border-color: #e8a06f; }
.site-pied__reseau svg { width: 15px; height: 15px; }

.site-pied__bas {
    border-top: 1px solid rgba(245, 241, 232, .14);
    max-width: var(--largeur);
    margin-inline: auto;
    padding: 1.2rem var(--marge);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    font-family: var(--titre);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: rgba(245, 241, 232, .4);
}

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

/* -----------------------------------------------------------------
   20. Visionneuse
   ----------------------------------------------------------------- */

.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(11, 9, 7, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    opacity: 0;
    transition: opacity .2s ease;
}
.visionneuse[hidden] { display: none; }
.visionneuse.est-visible { opacity: 1; }

.visionneuse figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: min(100%, 1100px);
}

.visionneuse img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    object-fit: contain;
    border: 6px solid var(--papier);
    background: var(--papier);
}

.visionneuse figcaption {
    font-family: var(--titre);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: rgba(245, 241, 232, .7);
    text-align: center;
}

.visionneuse button {
    position: absolute;
    width: 46px; height: 46px;
    border: 1px solid rgba(245, 241, 232, .4);
    background: transparent;
    color: var(--papier);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .18s ease, color .18s ease;
}
.visionneuse button:hover { background: var(--papier); color: var(--encre); }
.visionneuse svg { width: 18px; height: 18px; }

.visionneuse__fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.visionneuse__prec { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.visionneuse__compteur {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--titre);
    font-size: .72rem;
    letter-spacing: .03em;
    color: rgba(245, 241, 232, .6);
    font-variant-numeric: tabular-nums;
}
body.visionneuse-ouverte { overflow: hidden; }

/* -----------------------------------------------------------------
   21. Impression
   ----------------------------------------------------------------- */

@media print {
    .site-entete, .site-pied, .bandeau, .affiche__barre, .visionneuse { display: none !important; }
    body::after { display: none; }
    body { background: #fff; color: #000; }
    .bande { padding-block: 1.5rem; }
}