/* ==========================================================================
   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;
    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);
}

/* 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;
}

/* 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;
}

/* Fond de la rubrique Spectacles de l'accueil. Même principe que le héro :
   on supprime la marge de parallax pour que l'image ne soit pas agrandie et
   que le halo reste bien centré. */
.spectacles-bg {
    background-image: url('/media/spectacles/fond-spectacles-accueil.jpg');
    height: 100%;
    top: 0;
}

/* Fond de la section Artistes de l'accueil, même principe que le héro. */
.artistes-bg {
    background-image: url('/media/spectacles/fond-section-artistes.jpg');
    height: 100%;
    top: 0;
}

/* Fond de la section Contact de l'accueil, même principe que le héro. */
.contact-bg {
    background-image: url('/media/spectacles/fond-spectacles.jpg');
    height: 100%;
    top: 0;
}

/* Fond de la section À propos.
   Cette section est bien plus haute que large (image + 5 paragraphes) : avec le
   mécanisme parallax du template, cover doit remplir une boîte très haute et
   agrandit donc fortement la photo. On sort cette section du parallax et on
   attache le fond à l'écran (background-attachment: fixed) : le cadrage se
   calcule alors sur le format de l'écran, la photo n'est plus agrandie et
   reste visible sur toute sa largeur. Le défilement produit en prime un effet
   de profondeur comparable au parallax. */
.about-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/media/spectacles/fond-spot.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

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

/* 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;
}

/* 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;
}

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

/* --- 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;
}

/* --- 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 --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   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 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');
}

.page-artistes .page-bg {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.78)),
        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 --- */

/* Le groupe portrait + nom est centré dans la colonne, avec une largeur
   fixe : les portraits restent ainsi alignés les uns sous les autres, quelle
   que soit la longueur du nom ou de la fonction. */
.artiste-card {
    display: flex;
    align-items: center;
    gap: 34px;
    max-width: 640px;
    margin: 0 auto 34px;
}

.artiste-card__photo {
    display: block;
    flex: 0 0 200px;
    width: 200px;
    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);
}

.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;
}

.form-success {
    padding: 16px 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    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-company {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white-70);
}

/* 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;
    }
}

.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;
}

/* 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-success {
    border-color: rgba(0, 0, 0, 0.2);
    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);
    }
}