/* === RESET === */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

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

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

ul, ol { list-style: none; }

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* === FOCUS === */

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

/* === TYPOGRAPHIE === */

h1, h2, h3 {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400; }

p { line-height: 1.7; }

.tagline {
    font-family: var(--font-script);
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    color: var(--color-accent);
    line-height: 1.3;
}

.label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* === CONTENEUR === */

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

/* === BOUTONS === */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-secondary {
    background-color: transparent;
    color: currentColor;
    border-color: currentColor;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

.btn-sm {
    padding: 0.5rem 1.2rem;
    font-size: 0.76rem;
}

/* === HEADER === */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    background-color: var(--color-dark);
    overflow: visible;
    transition:
        background-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


.site-header.is-scrolled {
    background-color: var(--color-dark);
    box-shadow: var(--shadow-header);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-inline: var(--container-padding);
    gap: var(--spacing-md);
}

/* Logo */

.logo {
    display: flex;
    flex-shrink: 0;
    z-index: 1;
    /* Non scrollé : logo ancré en haut pour ne pas sortir du viewport */
    align-self: flex-start;
    padding-top: 10px;
}

.logo img {
    height: 170px;
    width: auto;
    transition: height var(--transition-normal);
}

/* Scrollé : logo compact et recentré dans le header */
.site-header.is-scrolled .logo {
    align-self: center;
    padding-top: 0;
}

.site-header.is-scrolled .logo img {
    height: 64px;
}

/* Logo dans le footer */
.footer-logo img {
    width: 190px;
    height: auto;
}

/* Bouton Contact / Booking dans la navigation : discret, style outline blanc */
.site-header .btn {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.55);
    background-color: transparent;
}

.site-header .btn:hover,
.site-header .btn:focus-visible {
    border-color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Navigation desktop */

.main-nav {
    display: none;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-white);
    position: relative;
    padding-bottom: 3px;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%;
}

.nav-link.is-active {
    color: var(--color-accent);
}

/* Actions header */

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Sélecteur de langue */

.lang-selector {
    position: relative;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-white);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.lang-current:hover { color: var(--color-accent); }

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 80px;
    background-color: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.lang-dropdown.is-open {
    display: block;
}

.lang-option {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-option:hover { background-color: rgba(255,255,255,0.06); color: var(--color-white); }
.lang-option.is-active { color: var(--color-accent); }

/* Hamburger */

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */

.mobile-menu {
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background-color: var(--color-dark);
    padding: var(--spacing-md) var(--container-padding);
    overflow-y: auto;
    z-index: 99;
}

.mobile-menu[hidden] { display: none; }

body.no-scroll { overflow: hidden; }

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-sm);
}

.mobile-nav-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-nav-list .nav-link {
    display: block;
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 400;
    padding-block: 0.75rem;
    color: var(--color-white);
}

.mobile-nav-list .nav-link::after { display: none; }
.mobile-nav-list .nav-link.is-active { color: var(--color-accent); }

.mobile-nav-list .btn {
    width: 100%;
    margin-top: var(--spacing-md);
}

/* === FOOTER === */

.site-footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding-top: var(--spacing-lg);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    max-width: 190px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-heading {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-nav-link {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    transition: color var(--transition-fast);
}

.footer-nav-link:hover { color: var(--color-white); }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm);
}

.footer-contact-item {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}

.footer-contact-item a { transition: color var(--transition-fast); }
.footer-contact-item a:hover { color: var(--color-accent); }

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--spacing-sm);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.social-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-block: var(--spacing-sm);
}

.footer-bottom .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-copyright {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.3);
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* === HERO ===
   Mobile first : image en bloc plein cadre, texte sur fond sombre plein en
   dessous, boutons empilés pleine largeur (cf. maquette mobile).
   Desktop (dès 768px) : image en fond, texte superposé avec dégradé
   (cf. maquette desktop). */

.hero {
    position: relative;
    /* Le header fixe fait 100px (var(--header-height)) au chargement : sur
       mobile l'image est un bloc normal (pas un fond derrière le header
       comme sur desktop), il faut donc la décaler d'au moins cette hauteur
       pour ne pas couper la tête des musiciens. */
    margin-top: var(--header-height);
    color: var(--color-white);
}

.hero-bg-img {
    width: 100%;
    height: auto;
}

.hero-overlay {
    display: none;
}

.hero .container {
    background-color: var(--color-dark);
    padding-block: var(--spacing-lg) 4.5rem;
}

.hero-title {
    font-size: clamp(3.5rem, 7.5vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.hero-tagline {
    margin-bottom: var(--spacing-sm);
}

.hero-text {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.75);
    max-width: 480px;
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hero-actions .btn {
    width: 100%;
}

@media (min-width: 768px) {
    .hero {
        margin-top: 60px;
        height: 780px;
        display: flex;
        flex-direction: column;
    }

    .hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .hero-bg-img {
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .hero-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(13,13,13,1.0)   0%,
            rgba(13,13,13,1.0)  15%,
            rgba(13,13,13,0.55) 24%,
            rgba(13,13,13,0.12) 33%,
            rgba(13,13,13,0.0)  42%,
            rgba(13,13,13,0.0) 100%
        );
    }

    .hero .container {
        position: relative;
        z-index: 1;
        max-width: none;
        margin-inline: 0;
        margin-top: auto;
        padding-top: var(--spacing-md);
        padding-bottom: 70px;
        padding-left: clamp(1.5rem, 4vw, 80px);
        background-color: transparent;
    }

    .hero-content {
        max-width: 560px;
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        width: auto;
    }
}

.hero-scroll {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.4);
    animation: hero-bounce 2.5s ease-in-out infinite;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* === HERO SECONDAIRE ===
   En-tête des pages autres que l'accueil : même structure que le hero
   principal (cf. hero.php, paramètre $hero_type), mais hauteur réduite,
   photo uniformément assombrie et aucun bouton d'action. */

.hero--secondary .hero-title {
    font-size: clamp(2.8rem, 6vw, 5rem);
}

/* Mobile : pas de photo de groupe (se recadre mal sur un écran étroit) —
   juste le bloc sombre avec le titre, sur un fond discret (instruments en
   clair-obscur, très sombre) plutôt qu'un noir uni. La photo de groupe
   revient dès le desktop (cf. media query ci-dessous). */
.hero--secondary .hero-media {
    display: none;
}

@media (max-width: 767px) {
    .hero--secondary .container {
        background-image:
            linear-gradient(rgba(13, 13, 13, 0.82), rgba(13, 13, 13, 0.82)),
            url('../images/hero-secondary-mobile-bg.jpg');
        background-size: cover;
        background-position: center;
    }
}

@media (min-width: 768px) {
    /* height: auto (plutôt qu'une hauteur fixe) + min-height : le hero
       s'adapte si le titre passe sur deux lignes selon la page (ex. "NOS
       PRESTATIONS"), au lieu de faire déborder le contenu vers le haut,
       par-dessus le logo. */
    .hero--secondary {
        height: auto;
        min-height: 440px;
    }

    .hero--secondary .hero-media {
        display: block;
    }

    .hero--secondary .hero-overlay {
        background: rgba(13, 13, 13, 0.6);
    }

    .hero--secondary .container {
        /* Le logo du header (non réduit) déborde jusqu'à ~180px sous le
           haut du viewport ; comme le hero secondaire n'a plus la grande
           réserve verticale du hero principal (contenu quasi bottom-aligné
           faute de hauteur fixe), il faut ce padding-top explicite pour que
           le titre ne passe jamais sous le logo, quelle que soit la page. */
        padding-top: 150px;
        padding-bottom: var(--spacing-md);
    }
}

/* === SECTION PRÉSENTATION === */

.section-intro {
    background-color: var(--color-light);
    /* Deux accents de coin à taille fixe (pas un fond en cover) : un fond
       en cover s'étire sur toute la hauteur de la section, ce qui déforme
       la texture dès que la section est haute (plusieurs blocs empilés,
       ex. page Prestations). */
    background-image:
        url('../images/section-texture-tl.jpg'),
        url('../images/section-texture-br.jpg');
    background-size: 560px auto, 560px auto;
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    padding-block: 5rem;
}

@media (max-width: 767px) {
    .section-intro,
    .section-video {
        background-size: 260px auto, 260px auto;
    }
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    align-items: center;
}

.intro-text-col .label {
    display: block;
    margin-bottom: 0.75rem;
}

.intro-title {
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.intro-text {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    max-width: 480px;
}

/* Ligne "Formation : de X à Y musiciens" (page Prestations) */
.intro-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(26, 26, 26, 0.1);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
}

.intro-meta svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.intro-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.75rem;
}

.intro-type-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.intro-type-item::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
}

.intro-text-col .btn {
    width: 100%;
}

.intro-image {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.intro-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Liste de blocs texte + image empilés (page Prestations) : chaque bloc
   réutilise .intro-grid tel quel, seul l'espacement entre blocs est propre
   à la liste. */
.prestations-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 768px) {
    .prestations-list {
        gap: 5rem;
    }

    /* Variante "image à gauche, texte à droite" : inverse l'ordre visuel en
       desktop uniquement (le mobile garde toujours le texte avant l'image,
       cf. décision du 2026-07-05 sur l'ordre des blocs mobile). */
    .intro-grid--reverse .intro-text-col {
        order: 2;
    }

    .intro-grid--reverse .intro-image {
        order: 1;
    }
}

/* === SECTION AMBIANCE (sombre, dégradé) === */

.section-ambiance {
    position: relative;
    background-color: var(--color-dark);
    background-image: url('../images/cta-bg.jpg');
    background-size: cover;
    background-position: left center;
    color: var(--color-white);
    min-height: 420px;
    display: flex;
    align-items: center;
}

/* Dégradé : photo à gauche, noir pur à droite (pas d'image derrière le texte) */
.section-ambiance::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(13,13,13,0.0)  0%,
        rgba(13,13,13,0.0)  28%,
        rgba(13,13,13,0.90) 44%,
        rgba(13,13,13,1.0)  48%,
        rgba(13,13,13,1.0) 100%
    );
}

/* Sur mobile : overlay plus dense, photo en fond */
.section-ambiance::after {
    display: none;
}

.section-ambiance .container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    padding-block: 5rem;
}

.ambiance-content {
    max-width: 520px;
    width: 100%;
}

.ambiance-content .label {
    display: block;
    margin-bottom: 0.75rem;
}

.ambiance-title {
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.ambiance-text {
    color: rgba(255,255,255,0.65);
    margin-bottom: 1.75rem;
}

.ambiance-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
}

.ambiance-style-item {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-accent);
}

/* === SECTION IDENTITÉ MUSICALE (page Le Groupe) ===
   Variante de .section-ambiance sans photo de fond : même bloc sombre
   (titre, texte, liste de styles), réutilisé tel quel pour respecter
   l'alternance sombre/clair entre les sections. */

.section-identite {
    min-height: auto;
    background-image: none;
}

.section-identite::before {
    display: none;
}

.section-identite .container {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing-lg);
}

/* === SECTION VIDÉO === */

.section-video {
    background-color: var(--color-light);
    background-image:
        url('../images/section-texture-tl.jpg'),
        url('../images/section-texture-br.jpg');
    background-size: 560px auto, 560px auto;
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    padding-block: 5rem;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    align-items: center;
}

.video-text .label {
    display: block;
    margin-bottom: 0.75rem;
}

.video-title {
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.video-desc {
    color: var(--color-text-secondary);
    max-width: 400px;
    margin-bottom: 1.5rem;
}

.video-cta {
    width: 100%;
    color: var(--color-text);
    border-color: var(--color-text);
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* === SECTION ÉVÉNEMENTS === */

.section-events {
    background-color: var(--color-light);
    padding-block: 4rem;
}

.events-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

.events-head .label {
    display: block;
    margin-bottom: 0.5rem;
}

.events-title {
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.events-line {
    display: block;
    width: 40px;
    height: 2px;
    margin-bottom: 1rem;
    background-color: var(--color-accent);
}

.events-empty {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.events-empty-sub {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* === SECTION CTA RÉSERVER === */

.section-cta {
    background-color: var(--color-dark);
    /* Fond discret (instruments en clair-obscur, même esprit que le fond du
       hero secondaire mobile) pour distinguer ce dernier bloc du footer,
       également sombre juste en dessous. */
    background-image:
        linear-gradient(rgba(13, 13, 13, 0.82), rgba(13, 13, 13, 0.82)),
        url('../images/section-cta-bg.jpg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    padding-block: 5rem;
}

.cta-main {
    max-width: 600px;
    margin-bottom: 3rem;
}

.cta-label {
    display: block;
    margin-bottom: 0.75rem;
}

.cta-title {
    color: var(--color-white);
    margin-bottom: 0.75rem;
    hyphens: none;
}

.cta-text {
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.75rem;
    max-width: 460px;
}

.cta-main .btn {
    width: 100%;
}

@media (min-width: 768px) {
    .cta-main .btn {
        width: auto;
    }
}

.cta-types {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cta-type-title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.3rem;
}

.cta-type-text {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

/* === CARTES PRESTATIONS (réutilisables sur la page Prestations) === */

.prestation-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-dark);
}

.prestation-card__image {
    height: 200px;
    overflow: hidden;
}

.prestation-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.prestation-card:hover .prestation-card__image img {
    transform: scale(1.05);
}

.prestation-card__body {
    padding: 1.25rem;
}

.prestation-card__label {
    display: block;
    margin-bottom: 0.4rem;
}

.prestation-card__title {
    color: var(--color-white);
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 0.5rem;
}

.prestation-card__text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.58);
    line-height: 1.6;
}

/* === SECTION MUSICIENS (page Le Groupe) === */

.section-musiciens {
    background-color: var(--color-light);
    padding-block: 5rem;
}

.musiciens-head {
    margin-bottom: 2.5rem;
    max-width: 560px;
}

.musiciens-head .label {
    display: block;
    margin-bottom: 0.5rem;
}

.musiciens-title {
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.musiciens-text {
    color: var(--color-text-secondary);
}

.musicians-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.musician-card__image {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.musician-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.musician-card:hover .musician-card__image img {
    transform: scale(1.05);
}

.musician-card__body {
    padding-top: 1rem;
}

.musician-card__name {
    font-size: 1.15rem;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.musician-card__role {
    display: block;
    margin-bottom: 0.35rem;
}

.musician-card__origin {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* === GALERIE PHOTOS (page Médias) === */

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-gallery__item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 0;
}

.photo-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.photo-gallery__item:hover img,
.photo-gallery__item:focus-visible img {
    transform: scale(1.05);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 13, 13, 0.92);
    padding: var(--spacing-md);
}

.lightbox[hidden] { display: none; }

.lightbox__image {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    transition: background-color var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.lightbox__close {
    top: var(--spacing-md);
    right: var(--spacing-md);
}

.lightbox__nav--prev { left: var(--spacing-md); }
.lightbox__nav--next { right: var(--spacing-md); }

@media (min-width: 640px) {
    .photo-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .photo-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* === GALERIE VIDÉOS (page Médias) === */

.video-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.video-gallery__item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 0;
    background-color: var(--color-dark);
}

.video-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-gallery__item:hover img,
.video-gallery__item:focus-visible img {
    transform: scale(1.05);
}

.video-gallery__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: rgba(13, 13, 13, 0.25);
}

.video-gallery__play svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(13, 13, 13, 0.55);
}

.video-gallery__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 0.85rem 0.65rem;
    background: linear-gradient(to top, rgba(13,13,13,0.85), rgba(13,13,13,0));
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.4;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.video-modal[hidden] { display: none; }

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(13, 13, 13, 0.92);
}

.video-modal__body {
    position: relative;
    width: 100%;
    max-width: 960px;
}

.video-modal__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-dark);
}

.video-modal__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal__close {
    position: absolute;
    top: -52px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
    transition: background-color var(--transition-fast);
}

.video-modal__close:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.video-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
    transition: background-color var(--transition-fast);
}

.video-modal__nav:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.video-modal__nav--prev { left: -20px; }
.video-modal__nav--next { right: -20px; }

@media (min-width: 640px) {
    .video-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === FORMULAIRE DE CONTACT === */

.contact-form-wrap {
    max-width: 640px;
    margin-inline: auto;
}

.contact-form-head {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.contact-form-head .label {
    display: block;
    margin-bottom: 0.75rem;
}

.contact-form-title {
    color: var(--color-text);
}

.form-notice {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.form-notice--success {
    background-color: rgba(192, 84, 26, 0.1);
    border: 1px solid rgba(192, 84, 26, 0.3);
}

.form-notice--error {
    background-color: rgba(178, 40, 40, 0.08);
    border: 1px solid rgba(178, 40, 40, 0.3);
}

.form-notice__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-input {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid rgba(26, 26, 26, 0.18);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    transition: border-color var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-input--error {
    border-color: #B22828;
}

.form-textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-input--math {
    max-width: 120px;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.form-error {
    font-size: 0.82rem;
    color: #B22828;
}

.form-required-note {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.contact-form .btn {
    align-self: flex-start;
}

/* Honeypot : jamais visible ni atteignable au clavier pour un visiteur humain */
.form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -9999px;
}

/* === SECTION COORDONNÉES / RÉSEAUX SOCIAUX === */

.section-contact-info {
    background-color: var(--color-white);
    padding-block: 5rem;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.contact-info-col .label,
.contact-social-col .label {
    display: block;
    margin-bottom: 0.75rem;
}

.contact-info-title {
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.contact-info-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.contact-info-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text);
}

.contact-info-list a {
    color: var(--color-text);
}

.contact-info-list a:hover {
    color: var(--color-accent);
}

.contact-social {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--spacing-sm);
}

.contact-social .social-link {
    color: var(--color-text);
    border-color: rgba(26, 26, 26, 0.2);
}

.contact-social .social-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* === ESPACE ORGANISATEURS === */

.section-organizers {
    background-color: var(--color-light);
    padding-block: 4rem;
}

.section-organizers--category {
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.organizers-intro {
    max-width: 700px;
}

.organizers-intro-title {
    color: var(--color-text);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 0.75rem;
}

.organizers-intro-text {
    color: var(--color-text-secondary);
}

.organizers-category-title {
    color: var(--color-text);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.organizers-category-text {
    color: var(--color-text-secondary);
    max-width: 700px;
    margin-bottom: var(--spacing-md);
}

.download-empty {
    color: var(--color-text-secondary);
    font-style: italic;
}

.download-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
}

.download-item__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-accent);
}

.download-item__name {
    font-weight: 500;
    color: var(--color-text);
    margin-right: auto;
}

.download-item__meta {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.download-item__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: var(--color-accent);
    transition: background-color var(--transition-fast);
}

.download-item__link:hover {
    background-color: var(--color-accent-hover);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* === PAGES LÉGALES === */

.section-legal-header {
    /* Pages sans Hero : le composant Hero compense normalement le header
       fixe via son propre margin-top (cf. .hero) ; comme les pages légales
       n'en ont pas, il faut le faire ici pour ne pas passer sous le header. */
    margin-top: var(--header-height);
    background-color: var(--color-light);
    padding-block: 3.5rem;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.legal-header-title {
    color: var(--color-text);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
}

.section-legal {
    background-color: var(--color-white);
    padding-block: 4rem;
}

.legal-content {
    max-width: 720px;
    margin-inline: auto;
}

.legal-content h2 {
    color: var(--color-text);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    text-align: justify;
}

/* === RESPONSIVE === */

@media (min-width: 640px) {
    .cta-types {
        grid-template-columns: 1fr 1fr;
    }

    .musicians-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .footer-inner {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .footer-bottom .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .intro-grid {
        grid-template-columns: 1fr 1fr;
    }

    .intro-text-col .btn {
        width: auto;
    }

    .video-cta {
        width: auto;
    }

    .video-grid {
        grid-template-columns: 1fr 1.5fr;
    }

    .events-inner {
        grid-template-columns: 1fr 2fr;
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .contact-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
}

/* Sur mobile : overlay dense, contenu centré */
@media (max-width: 767px) {
    .section-ambiance::before {
        background: rgba(13,13,13,0.82);
    }

    .section-ambiance .container {
        justify-content: flex-start;
        padding-block: 3.5rem;
    }

    .ambiance-content {
        max-width: 100%;
    }
}

/* Sur mobile, les paddings pensés pour le desktop (4-5rem) s'additionnent
   d'une section à l'autre et créent un vide sans justification visuelle,
   en particulier entre deux sections de même couleur de fond (vidéo → agenda,
   toutes deux sur --color-light). Rythme resserré pour un écran plus étroit. */
@media (max-width: 767px) {
    .section-intro,
    .section-video,
    .section-cta,
    .section-musiciens {
        padding-block: 3.5rem;
    }

    .section-events {
        padding-block: 2.5rem;
    }

    .section-contact-info {
        padding-block: 3.5rem;
    }

    .section-organizers {
        padding-block: 2.5rem;
    }

    .section-legal-header {
        padding-block: 2.5rem;
    }

    .section-legal {
        padding-block: 2.5rem;
    }

    .download-item {
        flex-wrap: wrap;
    }

    .download-item__name {
        width: 100%;
        margin-right: 0;
        order: 1;
    }

    .download-item__meta {
        order: 2;
    }

    .download-item__link {
        order: 3;
        margin-left: auto;
    }
}

@media (max-width: 1023px) {
    .logo {
        align-self: center;
        padding-top: 0;
    }
    .logo img {
        height: 64px;
    }
}

@media (min-width: 1024px) {
    .main-nav { display: flex; }
    .hamburger { display: none; }

    .footer-inner {
        grid-template-columns: 2fr 1fr 1.2fr;
    }

    .cta-types {
        grid-template-columns: repeat(4, 1fr);
    }

    .musicians-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}