/* ==========================================================================
   Parallax Starter - Free HTML CSS Template
   
TemplateMo 612 Parallax Starter

https://templatemo.com/tm-612-parallax-starter

   ========================================================================== */

/* --- CSS Variables --- */
:root {
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
    --white: #ffffff;
    --white-90: rgba(255, 255, 255, 0.9);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-20: rgba(255, 255, 255, 0.2);
    --rose-label: #ad0c6f;
    --puce: #d1608f;
    --nav-bg: rgba(0, 0, 0, 0.25);
    --nav-bg-scrolled: rgba(0, 0, 0, 0.85);
    --transition-smooth: 0.3s ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    /* Le <body> de l'accueil n'a pas de classe et n'avait donc aucun fond : le
       blanc par défaut du navigateur transparaissait sur un demi-pixel là où le
       calque translaté du héros ne rejoignait pas tout à fait le bas de la
       section. C'est ce trait involontaire qui se voyait entre la première et
       la deuxième section, et nulle part ailleurs. */
    background: #111;
    color: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* --- Navigation --- */
#templatemo-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--transition-smooth);
}

#templatemo-nav.scrolled {
    background: var(--nav-bg-scrolled);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--white);
    display: flex;
    align-items: center;
}

.nav-logo img {
    max-height: 42px;
    width: auto;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 35px;
}

.nav-links a {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2.5px;
    color: var(--white-70);
    transition: color var(--transition-smooth), opacity var(--transition-smooth);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
}

/* Six entrées dont « Ateliers d'écriture » : entre la tablette et le grand
   écran, on resserre plutôt que de laisser un libellé passer à la ligne. */
.nav-links a {
    white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        letter-spacing: 1.5px;
    }
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: all var(--transition-smooth);
}

/* --- Parallax Sections --- */
.parallax-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Le filet qui sépare deux sections.

   Il existait déjà entre la première et la deuxième, par accident : le calque
   du héros est translaté d'une fraction de pixel par le script, et découvrait
   sur un demi-pixel le fond du <body>. Le navigateur rendait ce demi-pixel de
   blanc pur comme une ligne fondue, d'où un trait ténu — et non un blanc plein
   sur toute la hauteur d'un pixel.

   C'est cette densité qu'on reproduit : un pixel à 40 % de blanc rend
   l'apparence d'un demi-pixel de blanc pur. Le fond des sections étant en
   position absolue, il couvre la boîte de rembourrage et non la bordure : le
   trait reste visible par-dessus la photo. */
.parallax-section + .parallax-section {
    border-top: 1px solid var(--white-70);
    /* Doublure sombre, collée au-dessus du trait blanc. Entre deux sections
       sombres elle ne se voit pas ; au-dessus d'une section claire — le bokeh
       pâle des Artistes — c'est elle qui détache le filet, qui sinon se perdait
       dans le fond. Un même trait ne peut pas tenir sur les deux à la fois. */
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Parallax Background Image Layer
   Height is 200% and starts at top: -50% to give
   maximum room for large vertical translations */
.parallax-bg {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

/* Hero background.
   Le template donne 200% de hauteur aux .parallax-bg pour laisser de la course
   au parallax (data-speed 0.5 = ±50% de la hauteur d'écran). Conséquence :
   background-size:cover doit zoomer pour remplir une boîte deux fois plus haute
   que l'écran. On supprime cette marge ici (et data-speed est réduit au minimum
   dans le HTML) pour que l'image ne soit pas agrandie. */
.hero-bg {
    background-image: url('/media/spectacles/fond-spectacles.jpg');
    height: 100%;
    top: 0;
}

/* Fonds fixes des sections de l'accueil.

   Le gabarit du thème prévoyait un parallax en JavaScript : une image deux
   fois plus haute que l'écran, translatée au défilement. Sur des sections
   plus hautes que larges, « cover » devait remplir cette boîte démesurée et
   agrandissait fortement la photo — c'est pourquoi chaque fond avait fini
   avec un data-speed réduit au minimum, c'est-à-dire un parallax désactivé.

   On prend ici le parti inverse, celui qui donnait déjà satisfaction sur la
   section « À propos » : le fond épouse la section et s'attache à l'écran.
   Le cadrage se calcule alors sur le format de l'écran, la photo n'est plus
   agrandie, et le contenu défile par-dessus une image immobile — l'effet de
   profondeur recherché, sans une ligne de JavaScript.

   Attention : une transformation CSS sur un ancêtre annule
   background-attachment: fixed. Ces fonds ne doivent donc jamais porter la
   classe .parallax-bg, que le script du thème translate. */
.section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.about-bg {
    background-image: url('/media/spectacles/fond-spot.jpg');
}

.spectacles-bg {
    background-image: url('/media/spectacles/fond-spectacles-accueil.jpg');
}

.artistes-bg {
    background-image: url('/media/spectacles/fond-section-artistes.jpg');
}

.contact-bg {
    background-image: url('/media/spectacles/fond-spectacles.jpg');
}

/* background-attachment: fixed est ignoré ou instable sur mobile (iOS) :
   on repasse sur un fond classique en dessous de 768px. */
@media (max-width: 768px) {
    .section-bg {
        background-attachment: scroll;
    }
}

/* --- Invite à faire défiler, en bas du héros ---
   Une souris stylisée : un rectangle arrondi bordé, et la molette qui glisse
   vers le bas en boucle. Tout est en bordure et en fond de la couleur
   courante, sans image ni script : « currentColor » suffit à faire varier
   l'ensemble au survol d'une seule déclaration. */
.scroll-hint {
    position: absolute;
    /* Centrage par les marges automatiques plutôt que par « left: 50% » et une
       translation : aucune transformation n'entre alors en jeu, donc rien ne
       peut la remplacer — ni une animation, ni une règle plus spécifique
       ajoutée plus tard. Il faut une largeur déterminée pour que « margin:
       auto » centre, d'où « fit-content ». */
    left: 0;
    right: 0;
    bottom: 34px;
    width: fit-content;
    margin-inline: auto;
    z-index: 2;
    /* Rembourrage généreux : la cible tactile fait 40 px de haut, la souris
       dessinée n'en fait que 42 de haut sur 26 de large. */
    padding: 8px 14px;
    color: var(--white-70);
    transition: color var(--transition-smooth);
}

.scroll-hint:hover {
    color: var(--white);
}

.scroll-hint__souris {
    display: block;
    width: 26px;
    height: 42px;
    border: 2px solid currentColor;
    border-radius: 13px;
}

.scroll-hint__molette {
    display: block;
    width: 4px;
    height: 8px;
    margin: 7px auto 0;
    border-radius: 2px;
    background: currentColor;
    animation: molette 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* La molette apparaît en haut, descend, s'efface : le cycle se referme sans
   retour visible vers le haut, qui donnerait un va-et-vient mécanique. */
@keyframes molette {
    0% { opacity: 0; transform: translateY(0); }
    20% { opacity: 1; transform: translateY(2px); }
    60% { opacity: 1; transform: translateY(15px); }
    100% { opacity: 0; transform: translateY(18px); }
}

/* Le doigt du tactile : il remonte, puisque c'est ainsi qu'on pousse le
   contenu vers le haut pour découvrir la suite. */
.scroll-hint__doigt {
    display: none;
}

.scroll-hint__doigt svg {
    display: block;
    width: 34px;
    height: 34px;
    animation: balaye 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes balaye {
    0% { opacity: 0; transform: translateY(9px); }
    20% { opacity: 1; transform: translateY(6px); }
    65% { opacity: 1; transform: translateY(-7px); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* Le choix se fait sur la nature du pointeur, pas sur la largeur : une fenêtre
   étroite sur un ordinateur garde la souris, une tablette large reçoit le
   doigt. C'est le geste disponible qui compte, pas la place. */
@media (hover: none) and (pointer: coarse) {
    .scroll-hint__souris {
        display: none;
    }

    .scroll-hint__doigt {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint__molette,
    .scroll-hint__doigt svg {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Écrans bas : l'invite se rapproche du bord pour ne pas chevaucher le bouton
   « En savoir plus ». */
@media (max-height: 640px) {
    .scroll-hint {
        bottom: 14px;
    }
}

/* Crédit photo du héro. En position absolue (donc hors flux) : un élément
   dans le flux deviendrait un second élément flex et décalerait le titre. */
.hero-credit {
    position: absolute;
    right: 30px;
    bottom: 24px;
    z-index: 2;
    margin: 0;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* Dark Overlay */
.parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
}

.parallax-overlay.overlay-dark {
    background: rgba(0, 0, 0, 0.55);
}

.parallax-overlay.overlay-medium {
    background: rgba(0, 0, 0, 0.50);
}

/* Content Layer */
.section-content {
    position: relative;
    z-index: 2;
    max-width: 960px;
    width: 100%;
    padding: 100px 30px;
    text-align: center;
}

/* --- Typography --- */
.section-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(36px, 6vw, 64px);
    letter-spacing: 8px;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-title {
    font-weight: 400;
    letter-spacing: 12px;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.6vw, 16px);
    letter-spacing: 4px;
    color: var(--white-70);
    margin-bottom: 40px;
}

.caps {
    text-transform: uppercase;
}

.content-block {
    max-width: 680px;
    margin: 0 auto;
}

.content-block p {
    font-size: 17px;
    color: var(--white-90);
    margin-bottom: 20px;
    line-height: 1.85;
}

/* --- Hero Button --- */
.btn-scroll {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--white);
    border: 1px solid var(--white-40);
    padding: 14px 45px;
    transition: all var(--transition-smooth);
}

.btn-scroll:hover {
    background: var(--white);
    color: #111;
    border-color: var(--white);
}

/* --- About Columns --- */
.unsplash-credit {
    font-size: 14px;
    color: var(--white-40);
    margin-top: 25px;
    letter-spacing: 1px;
}

.unsplash-credit a {
    color: var(--white-70);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.about-col {
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.about-thumb {
    overflow: hidden;
    width: 120px;
    height: 120px;
    border-radius: 8px;
}

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

.thumb-top-left {
    float: left;
    margin: 0 20px 15px 0;
}

.about-thumb-wide {
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 2 / 1;
    border-radius: 8px;
    margin-bottom: 20px;
}

.about-thumb-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Cadre « Spectacle en avant » ---
   Même cadre que celui de la section À propos, mais en deux colonnes :
   l'affiche à gauche, le titre, la description et le bouton à droite.
   « align-items: start » évite que la colonne de texte s'étire sur toute la
   hauteur de l'affiche, qui est souvent bien plus haute qu'elle. */
.about-col.en-avant {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 36px;
    align-items: start;
}

.en-avant__affiche img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.en-avant__texte h3 {
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 16px;
}

.en-avant__texte p {
    margin-bottom: 26px;
}

/* Sur mobile, l'affiche passe au-dessus du texte et se limite en largeur :
   à pleine largeur, une affiche verticale occuperait tout l'écran. */
@media (max-width: 700px) {
    .about-col.en-avant {
        grid-template-columns: 1fr;
        gap: 26px;
        justify-items: center;
        text-align: center;
    }

    .en-avant__affiche {
        max-width: 220px;
    }

    /* « text-align: center » ci-dessus ne centre pas les boutons : leur
       conteneur est en flex, et un conteneur flex range ses enfants selon
       « justify-content », pas selon l'alignement du texte. La variante en
       écran d'accueil avait cette ligne, celle en cadre l'avait perdue. */
    .about-col.en-avant .spectacle-actions {
        justify-content: center;
    }
}

/* Les boutons d'un spectacle, côte à côte et repliables sur deux lignes si la
   place manque. */
.spectacle-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
}

/* Plus ramassés que le bouton du premier écran : avec « Envoyer votre
   photo », deux boutons doivent tenir côte à côte dans la colonne de texte
   de l'encadré. */
.spectacle-actions .btn-scroll,
.spectacle-actions .btn-reserver {
    padding: 13px 24px;
    letter-spacing: 2.5px;
}

.spectacle-actions--fiche {
    margin-top: 40px;
}

/* Le bouton de réservation est l'action principale : plein, dans le rose du
   site, là où les autres boutons se contentent d'un filet. Au survol il se
   vide, l'inverse du bouton clair, pour que les deux ne se confondent pas. */
.btn-reserver {
    display: inline-block;
    padding: 14px 45px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--rose-label);
    border: 1px solid var(--rose-label);
    transition: all var(--transition-smooth);
}

.btn-reserver:hover {
    background: transparent;
    color: var(--white);
}

/* --- Le spectacle qui tient lieu d'écran d'accueil ---
   Pas de cadre, une affiche plus grande, le titre du spectacle à la taille
   d'un titre de section : c'est le premier écran, il doit porter. Le nom de la
   troupe reste en surtitre, sans quoi le visiteur qui arrive ne saurait pas
   chez qui il est. */
.spectacle-principal__surtitre {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--white-70);
    margin-bottom: 40px;
}

.en-avant--principal {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    align-items: center;
    max-width: 920px;
    margin: 0 auto;
    text-align: left;
}

.en-avant--principal .section-title {
    font-size: clamp(30px, 4.4vw, 52px);
    letter-spacing: 4px;
    margin-bottom: 22px;
}

.en-avant--principal p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--white-90);
    margin-bottom: 32px;
}

@media (max-width: 800px) {
    .en-avant--principal {
        grid-template-columns: 1fr;
        gap: 30px;
        justify-items: center;
        text-align: center;
    }

    .en-avant--principal .en-avant__affiche {
        max-width: 240px;
    }

    .en-avant--principal .spectacle-actions {
        justify-content: center;
    }
}

/* Variante « cadre unique » de la section À propos : une seule colonne,
   plus étroite pour garder un texte confortable à lire. */
.about-cols--single {
    grid-template-columns: 1fr;
    max-width: 780px;
}

/* Photo en bandeau sur toute la largeur du cadre. Le ratio suit celui de
   la photo (2042x770) pour l'afficher entièrement, sans recadrage. */
.about-thumb-wide--full {
    max-width: none;
    aspect-ratio: 2042 / 770;
    margin-bottom: 30px;
}

.about-col p {
    font-size: 16px;
    color: var(--white-90);
    margin-bottom: 20px;
    line-height: 1.85;
}

.about-col p:last-child {
    margin-bottom: 0;
}

/* Les liens glissés dans le texte du cadre sont soulignés, faute de quoi rien
   ne les distinguerait du texte courant. */
.about-col a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Un bouton n'est pas un lien de texte : son cadre le signale déjà. La règle
   ci-dessus l'attrapait au passage dans « Spectacle en avant ». */
.about-col a.btn-scroll,
.about-col a.btn-reserver {
    text-decoration: none;
}

/* --- Services Grid --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-top: 50px;
}

.service-item {
    text-align: center;
}

/* Rubrique Spectacles de la page d'accueil : deux choix (Créations / Soutiens)
   au lieu des trois services du template. Chaque choix est un lien vers la
   liste correspondante, encadré pour indiquer qu'il est cliquable. */
.services-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

a.service-item {
    display: block;
    padding: 35px 25px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all var(--transition-smooth);
}

a.service-item:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.35);
}

.service-icon {
    margin-bottom: 20px;
    opacity: 0.85;
}

.service-item h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
    margin-bottom: 12px;
    color: var(--white);
}

.service-item p {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--white-70);
    line-height: 1.9;
}

/* --- Section Artistes de l'accueil : six portraits ronds --- */

/* Deux rangées de trois portraits. La grille est un peu plus étroite que la
   colonne de contenu : les ronds font environ 240 px de côté. Fournir des
   photos carrées d'au moins 600 x 600 px pour rester net sur écran haute
   densité. */
.artistes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 40px;
    max-width: 800px;
    margin: 50px auto 0;
}

.artiste-vignette {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Le portrait est recadré en cercle : les photos peuvent avoir n'importe
   quel format, seul le carré central est montré. */
.artiste-vignette__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 3px solid var(--white-40);
    transition: border-color var(--transition-smooth);
}

.artiste-vignette__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Au survol, le contour prend le blanc cassé qui sert de fond aux pages
   internes, plutôt qu'un blanc pur. */
.artiste-vignette:hover .artiste-vignette__photo {
    border-color: #f2efe9;
}

.artiste-vignette__name {
    display: block;
    margin-top: 16px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--white);
}

.artiste-vignette__role {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white-70);
    line-height: 1.6;
}

.artistes-more {
    margin-top: 50px;
}

/* Lien réservé au menu mobile (voir la règle à 768 px). */
.nav-item-mobile {
    display: none;
}

/* Pot de miel du formulaire de contact : hors de l'écran plutôt qu'en
   « display: none », que certains robots savent repérer et ignorer. Le champ
   reste dans le flux du document, donc dans ce que lit un robot. */
.form-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Stats Row --- */
.stats-row {
    display: flex;
    justify-content: center;
    gap: 70px;
    margin-top: 45px;
    padding-top: 40px;
    border-top: 1px solid var(--white-20);
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--white-70);
}

/* --- Contact Form --- */
.contact-form-wrap {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: flex;
    gap: 18px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--white-20);
    padding: 16px 20px;
    outline: none;
    transition: border-color var(--transition-smooth);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--white-40);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--white-70);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--white);
    background: transparent;
    border: 1px solid var(--white-40);
    padding: 16px 45px;
    cursor: pointer;
    transition: all var(--transition-smooth);
    align-self: flex-start;
    text-transform: uppercase;
}

.btn-submit:hover {
    background: var(--white);
    color: #111;
    border-color: var(--white);
}

/* --- Footer --- */
#templatemo-footer {
    background: #111;
    text-align: center;
    padding: 30px 20px;
    font-size: 14px;
    color: var(--white-40);
    letter-spacing: 1px;
}

#templatemo-footer a {
    color: var(--white-70);
    transition: color var(--transition-smooth);
}

#templatemo-footer a:hover {
    color: var(--white);
}

/* --- Scroll Reveal Animation --- */
/* Apparition du contenu d'une section, à l'entrée dans l'écran.

   L'animation ne porte plus sur le bloc entier mais sur chacun de ses enfants
   directs, avec un décalage croissant : le titre monte d'abord, le texte ou
   les cartes suivent. La courbe (0.22, 1, 0.36, 1) démarre vite et finit
   lentement — c'est ce qui donne la sensation de glissement, là où « ease »
   arrivait un peu sèchement.

   Le script pose « reveal » puis « visible » (voir templatemo-parallax-script).
   S'il ne s'exécute pas, aucune des deux classes n'est posée et le contenu
   reste simplement visible. */
.reveal > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible > * {
    opacity: 1;
    transform: none;
}

.reveal.visible > *:nth-child(2) {
    transition-delay: 0.14s;
}

.reveal.visible > *:nth-child(3) {
    transition-delay: 0.28s;
}

.reveal.visible > *:nth-child(4) {
    transition-delay: 0.42s;
}

/* Au-delà du quatrième, le retard cesse de croître : il deviendrait une
   attente. */
.reveal.visible > *:nth-child(n + 5) {
    transition-delay: 0.52s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal > *,
    .reveal.visible > * {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

/* ===================================
   Responsive
   =================================== */

@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .stats-row {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    /* Mobile Navigation */
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        padding: 100px 30px 60px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
    }

    .nav-links .nav-item-mobile {
        display: list-item;
    }

    .nav-links a {
        font-size: 16px;
        letter-spacing: 4px;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Disable parallax on mobile — static bg */
    .parallax-bg {
        top: 0;
        height: 100%;
    }

    .section-title {
        letter-spacing: 4px;
    }

    .hero-title {
        letter-spacing: 6px;
    }

    .section-subtitle {
        letter-spacing: 2px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .artistes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 30px;
    }

    .about-cols {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    /* Le texte « À propos » est long : on le garde aligné à gauche, même
       en mobile, pour qu'il reste lisible. */
    .about-cols--single {
        text-align: left;
    }

    .stats-row {
        flex-direction: column;
        gap: 30px;
    }

    .form-row {
        flex-direction: column;
    }

    .btn-submit {
        align-self: stretch;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 20px;
    }

    .section-content {
        padding: 80px 20px;
    }

    .section-title {
        letter-spacing: 3px;
    }

    .content-block p {
        font-size: 15px;
    }

    .stat-number {
        font-size: 34px;
    }
}

/* ===================================
   PAGES INTERNES (spectacles, artistes, contact)
   =================================== */

.page-body {
    background: #111;
    color: var(--white-90);
    font-family: var(--font-body);
}

/* Couche de fond des pages internes, vide par défaut.
   Pour poser une image de fond sur les pages spectacles, il suffit de
   décommenter la règle ci-dessous et d'y mettre le fichier voulu : le
   dégradé noir assure la lisibilité du texte par-dessus. */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

/* Marge de manœuvre du parallax des pages de liste : la photo dépasse de
   60vh vers le bas, ce qui laisse au script cette course vers le haut sans
   jamais découvrir le bord de l'image. Cette valeur doit rester égale au
   plafond fixé dans page-parallax.js. Avec top, bottom et height tous
   définis, c'est la hauteur qui l'emporte, bottom est ignoré. */
.page-liste .page-bg {
    height: calc(100% + 60vh);
    will-change: transform;
}

.page-spectacles .page-bg {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.78)),
        url('/media/spectacles/fond-spectacles.jpg');
}

/* La liste des artistes montre la photo telle quelle, comme la section
   Artistes de la page d'accueil : elle ne porte que des noms et des fonctions,
   le fond clair ne gêne pas.

   Les fiches, elles, gardent un voile léger : une biographie de plusieurs
   milliers de caractères posée à même le bokeh se lirait mal. « page-liste »
   n'est posée que sur la liste, d'où le :not() qui vise les fiches seules. */
.page-artistes .page-bg {
    background-image: url('/media/spectacles/fond-section-artistes.jpg');
}

.page-artistes:not(.page-liste) .page-bg {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
        url('/media/spectacles/fond-section-artistes.jpg');
}

.page-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 140px 20px 80px;
}

.page-body #templatemo-footer {
    position: relative;
    z-index: 1;
}

.page-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 15px;
}

.page-intro {
    color: var(--white-70);
    margin-bottom: 45px;
    line-height: 1.8;
}

/* Pages de liste (spectacles, artistes) : titre et chapeau centrés.
   La classe est posée en plus de .page-spectacles / .page-artistes, pour
   que les fiches, qui partagent ces classes, restent alignées à gauche. */
.page-liste .page-content h1,
.page-liste .page-intro {
    text-align: center;
}

/* --- Liste des spectacles : une succession de cadres espacés --- */

.spectacle-card {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all var(--transition-smooth);
}

.spectacle-card:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.35);
}

/* La hauteur de la vignette n'est pas fixée : elle découle de la largeur et du
   format de l'image. Passer la largeur de 240 à 180 px raccourcit donc chaque
   vignette d'un quart, quel que soit son format, sans rien recadrer — une
   affiche verticale garde son titre. */
.spectacle-card__poster {
    width: 180px;
    flex-shrink: 0;
    overflow: hidden;
}

.spectacle-card__poster img {
    width: 100%;
    display: block;
    transition: transform var(--transition-smooth);
}

.spectacle-card:hover .spectacle-card__poster img {
    transform: scale(1.04);
}

.spectacle-card__body {
    flex: 1;
}

.spectacle-card h2,
.artiste-card h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 10px;
}

.spectacle-card__meta,
.artiste-card__meta {
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white-70);
    margin-bottom: 16px;
}

.spectacle-card__summary {
    font-size: 15px;
    line-height: 1.8;
    color: var(--white-90);
    margin-bottom: 16px;
}

.spectacle-card__more {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white-70);
    transition: color var(--transition-smooth);
}

.spectacle-card:hover .spectacle-card__more {
    color: var(--white);
}

@media (max-width: 768px) {
    .spectacle-card {
        flex-direction: column;
        padding: 22px;
    }

    .spectacle-card__poster {
        width: 100%;
    }
}

/* --- Liste des artistes : un portrait rond suivi du nom, sans cadre --- */

/* Deux colonnes, et une seule dès que la place manque. Le seuil est à 900 px
   et non au 768 px habituel du site : en dessous, chaque colonne descend sous
   350 px, et le portrait de 150 px n'y laisse plus de quoi écrire un nom comme
   « Joseph-Emmanuel Biscardi » sans qu'il se disloque. */
.artistes-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 44px;
}

/* L'espacement vient de la grille, plus des marges de la carte elle-même. */
.artiste-card {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
}

.artiste-card__photo {
    display: block;
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 3px solid var(--white-40);
    transition: border-color var(--transition-smooth);
}

.artiste-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.artiste-card__body h2 {
    margin-bottom: 8px;
}

.artiste-card__meta {
    margin-bottom: 0;
}

/* Le lien enveloppe le portrait et le texte : survoler l'un ou l'autre
   déclenche les mêmes effets, sur le rond comme sur le nom. */
.artiste-card:hover .artiste-card__photo {
    border-color: #f2efe9;
}

.artiste-card__body h2 {
    text-decoration: underline 2px transparent;
    text-underline-offset: 7px;
    transition: text-decoration-color var(--transition-smooth);
}

.artiste-card:hover .artiste-card__body h2 {
    text-decoration-color: var(--puce);
}

/* En une colonne, la carte retrouve son ancienne allure : portrait de 200 px,
   groupe centré et de largeur fixe, pour que les ronds restent alignés les uns
   sous les autres quelle que soit la longueur des noms. */
@media (max-width: 900px) {
    .artistes-liste {
        grid-template-columns: 1fr;
    }

    .artiste-card {
        gap: 34px;
        max-width: 640px;
        margin: 0 auto;
    }

    .artiste-card__photo {
        flex-basis: 200px;
        width: 200px;
    }
}

.artiste-card__meta {
    transition: color var(--transition-smooth);
}

.artiste-card:hover .artiste-card__meta {
    color: var(--white);
}

@media (max-width: 768px) {
    .artiste-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }
}

/* Apparition décalée des blocs de liste. L'état masqué est conditionné à
   l'attribut posé par cards-reveal.js : sans JavaScript, rien n'est caché.
   Le retard entre deux cartes est appliqué par le script, carte par carte. */
[data-reveal] .spectacle-card,
[data-reveal] .artiste-card {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal] .spectacle-card.est-visible,
[data-reveal] .artiste-card.est-visible {
    opacity: 1;
    transform: none;
}

/* --- Formulaire de contact : champs, erreurs et confirmation --- */

.form-field {
    flex: 1;
}

.form-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #ff9db1;
}

/* Confirmation d'envoi : le vert de l'« alert-success » de Bootstrap, le
   même dans les deux thèmes et sur les photos de l'accueil, où il doit se
   détacher du voile noir comme du beige. Le formulaire, lui, n'est plus
   affiché une fois le message parti. */
.form-success {
    padding: 16px 20px;
    margin-bottom: 30px;
    border: 1px solid #badbcc;
    border-radius: 6px;
    background: #d1e7dd;
    color: #0f5132;
}

/* Information neutre (appel à photos clos) : ni succès ni erreur. */
.form-info {
    padding: 16px 20px;
    margin-bottom: 30px;
    border: 1px solid var(--white-40);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

/* Sur la page /contact/, le formulaire s'aligne à gauche sous le titre. */
.contact-form-wrap--page {
    margin: 0;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }
}

/* --- Page d'un spectacle --- */

.spectacle-header {
    margin-bottom: 30px;
}

.spectacle-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

/* Étiquette « Création » / « Soutien » : rectangle rose à coins arrondis. */
.spectacle-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 18px;
    background: var(--rose-label);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white);
}

.spectacle-subtitle {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white-70);
}

/* « Envoyer votre photo », sur la ligne de l'étiquette, poussé à droite. Plus
   ramassé que sur l'accueil pour ne pas écraser l'étiquette voisine. Sur un
   écran étroit, la ligne se replie et le bouton passe dessous, à gauche. */
.spectacle-meta .btn-photo {
    margin-left: auto;
    padding: 10px 26px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .spectacle-meta .btn-photo {
        margin-left: 0;
    }
}

/* --- Page « Envoyer votre photo » --- */

.appel-surtitre {
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.appel-surtitre a {
    color: var(--rose-label);
    text-decoration: none;
}

.appel-intro {
    margin-bottom: 40px;
}

.appel-form {
    max-width: 640px;
}

.appel-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--white-90);
}

.appel-aide {
    font-size: 13px;
    color: var(--white-70);
}

.appel-fichier .appel-aide {
    display: block;
    margin-top: 6px;
}

/* Le champ fichier garde l'apparence du navigateur, que tout le monde sait
   utiliser ; seul son cadre suit celui des autres champs. */
.appel-form input[type="file"] {
    padding: 14px 16px;
    cursor: pointer;
}

.appel-confidentialite {
    margin: 0;
    line-height: 1.6;
}

.appel-accords {
    border: 0;
    padding: 0;
    margin: 6px 0 0;
}

.appel-accords legend {
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--white-70);
}

/* Case et texte côte à côte, le texte aligné sous lui-même sur plusieurs
   lignes. La règle générale des champs (largeur 100 %, cadre) ne doit pas
   s'appliquer à la case. */
.appel-form .appel-case {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    line-height: 1.6;
    cursor: pointer;
}

.appel-form .appel-case input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    padding: 0;
    accent-color: var(--rose-label);
    cursor: pointer;
}

/* Bandeau d'image de hauteur fixe : les photos sont recadrées au centre,
   quel que soit le format fourni. Format idéal des affiches : 2/1
   (p. ex. 1720 x 800 px), ce qui remplit les 860 x 400 px du bandeau. */
.spectacle-poster {
    height: 400px;
    margin-bottom: 40px;
    overflow: hidden;
}

.spectacle-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Crédit photo : sous le bandeau d'une fiche et sous une galerie. Discret,
   mais assez contrasté pour rester lisible dans les deux thèmes. */
.media-credit {
    margin: -28px 0 40px;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--white-70);
    text-align: right;
}

.spectacle-gallery .media-credit {
    margin: 14px 0 0;
}

.spectacle-text p {
    line-height: 1.9;
    color: var(--white-90);
    margin-bottom: 18px;
}

/* Sous-titre de l'éditeur : plus affirmé que le texte, nettement plus
   discret que le titre de la page. */
.spectacle-text h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--white);
    margin: 38px 0 14px;
}

.spectacle-text h3:first-child {
    margin-top: 0;
}

.spectacle-text strong,
.spectacle-text b {
    font-weight: 600;
    color: var(--white);
}

/* Listes : la puce par défaut du navigateur est remplacée par un petit carré
   rose pour les listes à puces, et par un numéro dans la police des titres
   pour les listes numérotées. La marge de gauche décale toute la liste par
   rapport au texte courant et aux sous-titres ; le retrait négatif du repère
   le place dans cette marge, si bien que le texte d'une entrée sur plusieurs
   lignes reste aligné sous lui-même. */
.spectacle-text ul,
.spectacle-text ol {
    list-style: none;
    margin: 0 0 18px 24px;
    padding-left: 24px;
}

.spectacle-text li {
    position: relative;
    line-height: 1.9;
    color: var(--white-90);
    margin-bottom: 10px;
}

.spectacle-text ul > li::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 0.72em;
    width: 7px;
    height: 7px;
    background: var(--puce);
}

.spectacle-text ol {
    counter-reset: puce;
}

.spectacle-text ol > li {
    counter-increment: puce;
}

.spectacle-text ol > li::before {
    content: counter(puce);
    position: absolute;
    left: -24px;
    top: 0.15em;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--puce);
}

/* --- Galerie photo --- */

.spectacle-gallery {
    margin-top: 60px;
}

.spectacle-gallery h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 25px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    /* Un écart serré : le fond sombre qui passe entre les vignettes se lisait
       comme un trait épais et découpait la galerie. */
    gap: 6px;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: opacity var(--transition-smooth);
}

.gallery-item img:hover {
    opacity: 0.75;
}

.gallery-item figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--white-70);
}

/* Agrandissement d'une photo au clic, et parcours de la galerie sans
   refermer. Le fond garde le curseur « zoom-out » puisqu'un clic à côté de la
   photo ferme ; la photo et les flèches reprennent un curseur normal, elles ne
   ferment pas. */
.lightbox {
    /* Le fond de la visionneuse reste noir même en mode clair, où les
       variables --white-* passent au noir pour le reste de la page. On les
       rétablit ici, sinon flèches, compteur et légende deviendraient du noir
       sur noir. */
    --white: rgba(255, 255, 255, 0.95);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-40: rgba(255, 255, 255, 0.4);

    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 76px 28px 62px;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
    overflow: hidden; /* la photo qui sort en glissant ne crée pas de barre */
}

.lightbox[hidden] {
    display: none;
}

/* La page ne défile plus derrière la photo ouverte. */
body.lightbox-ouverte {
    overflow: hidden;
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    min-width: 0;
    max-height: 100%;
    cursor: default;
}

/* « min-height: 0 » autorise l'image à rétrécir dans le conteneur flex :
   sans cela, une photo haute déborde et pousse la légende hors de l'écran. */
.lightbox__img {
    flex: 0 1 auto;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox__caption {
    flex: 0 0 auto;
    max-width: 700px;
    font-size: 14px;
    text-align: center;
    color: var(--white-70);
}

.lightbox__caption:empty {
    display: none;
}

/* --- Glissement d'une photo à l'autre ---
   La photo entrante arrive du côté d'où l'on vient. Le script pose la classe
   juste après avoir changé la source ; les voisines étant préchargées, le
   glissement porte bien l'image et non un cadre vide. */
@keyframes glisse-depuis-droite {
    from { transform: translateX(14%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

@keyframes glisse-depuis-gauche {
    from { transform: translateX(-14%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.lightbox__figure--depuis-droite {
    animation: glisse-depuis-droite 0.28s ease-out;
}

.lightbox__figure--depuis-gauche {
    animation: glisse-depuis-gauche 0.28s ease-out;
}

/* Le doigt emmène la photo : le retour en place, lui, est amorti. */
.lightbox__figure--retour {
    transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .lightbox__figure--depuis-droite,
    .lightbox__figure--depuis-gauche,
    .lightbox__figure--retour {
        animation: none;
        transition: none;
    }
}

/* --- Commandes --- */
.lightbox__close,
.lightbox__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--white-70);
    cursor: pointer;
    transition: color var(--transition-smooth),
                background var(--transition-smooth);
}

.lightbox__close svg,
.lightbox__nav svg {
    display: block;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    color: var(--white);
}

.lightbox__close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 48px;
    height: 48px;
}

.lightbox__close svg {
    width: 30px;
    height: 30px;
}

.lightbox__nav {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
}

.lightbox__nav svg {
    width: 46px;
    height: 46px;
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lightbox__nav[hidden] {
    display: none;
}

.lightbox__compteur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    color: var(--white-70);
}

/* Sur mobile, pas de flèches : le balayage est le geste attendu et le compteur
   suffit à dire qu'il y a une suite. Toute la largeur revient à la photo. */
@media (max-width: 600px) {
    .lightbox {
        gap: 0;
        padding: 60px 0 46px;
    }

    .lightbox__nav {
        display: none;
    }

    /* La photo occupant toute la largeur, la croix se retrouve devant elle :
       sur une image claire, un chevron translucide disparaît. La pastille
       sombre la détache de n'importe quelle photo — c'est la seule sortie
       visible, les bords à toucher ayant disparu avec les marges. */
    .lightbox__close {
        top: 10px;
        right: 12px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        color: var(--white);
    }

    .lightbox__close svg {
        width: 26px;
        height: 26px;
    }

    .lightbox__caption {
        padding: 0 16px;
    }
}

/* --- Encadré « Réservation » d'une fiche de spectacle ---
   Cadré comme les autres blocs du site, un filet discret sur fond légèrement
   assombri, pour se détacher du texte sans crier. */
.reservation {
    margin-top: 55px;
    padding: 30px 34px;
    border: 1px solid var(--white-20);
    background: rgba(0, 0, 0, 0.25);
}

.reservation h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 22px;
}

.reservation__bouton {
    margin-bottom: 20px;
}

.reservation__contacts {
    font-size: 17px;
    color: var(--white-90);
    margin-bottom: 10px;
}

.reservation__contacts a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reservation__contacts a:hover {
    text-decoration-color: var(--puce);
}

.reservation__separateur {
    margin: 0 10px;
    color: var(--white-40);
}

.reservation__note {
    font-size: 14px;
    color: var(--white-70);
    margin: 0;
}

.spectacle-support {
    margin-top: 50px;
}

.spectacle-support img {
    max-height: 50px;
}

/* Le retour à la liste se détache nettement du contenu qui le précède. */
.spectacle-back {
    margin-top: 70px;
    padding-top: 35px;
    border-top: 1px solid var(--white-20);
}

.btn-back {
    display: inline-block;
    padding: 12px 26px;
    border: 1px solid var(--white-40);
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white-70);
    text-decoration: none;
    transition: all var(--transition-smooth);
}

.btn-back:hover {
    border-color: var(--white);
    color: var(--white);
}

@media (max-width: 600px) {
    .spectacle-poster {
        height: 260px;
    }

    .gallery-item img {
        height: 140px;
    }
}

/* ===================================
   MODE CLAIR
   Le site est sombre par défaut. Le bouton du menu pose data-theme="light"
   sur <html> ; aucune règle existante n'est dupliquée : les variables
   --white-* servent partout de couleurs de texte, il suffit de les
   redéfinir en noir. Seules les surfaces écrites en dur (fonds noirs,
   bordures blanches) demandent une règle explicite ci-dessous.
   =================================== */

/* Bouton clair/obscur du menu. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--white-40);
    border-radius: 50%;
    background: none;
    color: var(--white-70);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.theme-toggle:hover {
    border-color: var(--white);
    color: var(--white);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.nav-item-theme {
    display: flex;
    align-items: center;
}

/* Une seule icône à la fois : lune en mode sombre, soleil en mode clair.
   L'icône suit le thème choisi, y compris sur l'accueil où la barre reste
   sombre : elle indique l'état du site, pas la couleur de la barre. */
.theme-toggle__sun {
    display: none;
}

/* Le sélecteur passe par img : sans cela, le display:block de « .nav-logo img »
   l'emporterait sur celui-ci et les deux logos s'afficheraient côte à côte. */
.nav-logo img.nav-logo__light {
    display: none;
}

:root[data-theme="light"] .theme-toggle__moon {
    display: none;
}

:root[data-theme="light"] .theme-toggle__sun {
    display: block;
}

/* Le logo blanc disparaîtrait sur la barre beige des pages internes : on y
   passe à la version couleur. Sur l'accueil la barre reste sombre en mode
   clair, donc le logo blanc y est conservé. */
:root[data-theme="light"] .page-body .nav-logo__dark {
    display: none;
}

:root[data-theme="light"] .page-body .nav-logo__light {
    display: block;
    height: 42px;
    width: auto;
}

/* --- Jeu de couleurs du mode clair ---

   Le mode clair ne s'applique pas à toute la page : l'accueil garde ses
   photos, son voile noir et sa barre de navigation sombre ; seul le cadre de
   la section « À propos » — qui porte le gros du texte — s'y éclaircit. Les
   variables --white-* ne sont donc pas redéfinies sur :root mais sur les deux
   zones concernées : le <body> des pages internes (dont la barre de navigation
   hérite) et ce cadre. Partout ailleurs (héro, spectacles et contact de
   l'accueil, pied de page de l'accueil) elles gardent leurs valeurs blanches
   et le rendu reste identique au mode sombre. */

:root[data-theme="light"] .page-body,
:root[data-theme="light"] .about-col {
    --white: rgba(0, 0, 0, 0.9);
    --white-90: rgba(0, 0, 0, 0.82);
    --white-70: rgba(0, 0, 0, 0.6);
    --white-40: rgba(0, 0, 0, 0.35);
    --white-20: rgba(0, 0, 0, 0.15);
}

/* Pages internes : un beige très pâle plutôt que du blanc pur, pour adoucir
   le contraste sur les pages qui portent beaucoup de texte.
   La barre de navigation, enfant de <body>, hérite de ces variables : elle
   prend le beige du pied de page ici, et reste sombre sur l'accueil, qui
   n'a pas la classe .page-body. Opaque plutôt que translucide, sans quoi
   elle prendrait la couleur de ce qui défile dessous. */
:root[data-theme="light"] .page-body {
    background: #f2efe9;
    --nav-bg: #e9e4db;
    --nav-bg-scrolled: #e9e4db;
}

/* En mode clair, les photos de fond des listes sont retirées : elles
   assombriraient la page et gêneraient la lecture. */
:root[data-theme="light"] .page-spectacles .page-bg,
:root[data-theme="light"] .page-artistes .page-bg {
    background-image: none;
}

/* Accueil, section « À propos » : cadre beige — le même que les pages
   internes — et texte noir, sous un titre resté blanc, par-dessus la photo
   et son voile noir. */
:root[data-theme="light"] .about-col {
    background: #f2efe9;
    border-color: rgba(0, 0, 0, 0.12);
}

/* Cartes de la liste des spectacles. */
:root[data-theme="light"] .page-body .spectacle-card {
    border-color: rgba(0, 0, 0, 0.2);
}

/* Le blanc cassé du survol disparaîtrait sur le beige de la page : le
   contour du rond s'y assombrit au lieu de s'éclaircir. */
:root[data-theme="light"] .page-body .artiste-card:hover .artiste-card__photo {
    border-color: rgba(0, 0, 0, 0.6);
}

/* Survol : un blanc à peine cassé, plus clair que le fond de la page mais
   pas tout à fait blanc, pour éviter un contraste trop dur. */
:root[data-theme="light"] .page-body .spectacle-card:hover {
    border-color: rgba(0, 0, 0, 0.55);
    background: #faf8f4;
}

/* Boutons à filet en mode clair : au survol, le fond prend --white, devenu
   presque noir, et le texte #111 y disparaissait. */
:root[data-theme="light"] .page-body .btn-scroll:hover,
:root[data-theme="light"] .about-col .btn-scroll:hover {
    color: #fff;
}

/* Formulaire de la page /contact/ (celui de l'accueil reste sombre). */
:root[data-theme="light"] .page-body .contact-form input,
:root[data-theme="light"] .page-body .contact-form textarea {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .page-body .btn-submit:hover {
    background: rgba(0, 0, 0, 0.88);
    border-color: rgba(0, 0, 0, 0.88);
    color: #fff;
}

:root[data-theme="light"] .page-body .form-error {
    color: #b0123f;
}

:root[data-theme="light"] .page-body .form-info {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .page-body #templatemo-footer {
    background: #e9e4db;
    color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
    /* Menu déroulant mobile : plein écran, donc opaque dans les deux thèmes. */
    :root[data-theme="light"] .page-body .nav-links {
        background: rgba(255, 255, 255, 0.97);
    }
}