/* MUSICALIBOSCO — feuille de style commune. Modifier les couleurs ici. */
:root {
    --bg:#09151d;
    --surface:#10232e;
    --surface2:#142e3a;
    --text:#f4f6f5;
    --muted:#b5c6cd;
    --accent:#65c5c3;
    --gold:#d6b77b;
    --border:rgba(180,220,230,.15);
    --max:1160px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.65
}

a {
    color:inherit
}

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

.container {
    width:min(var(--max),calc(100% - 44px));
    margin:auto
}

.skip {
    position:absolute;
    top:-100px;
    background:#fff;
    color:#000;
    padding:12px;
    z-index:20
}

.skip:focus {
    top:0
}

.header {
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(9,21,29,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border)
}

.nav {
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}

.brand {
    text-decoration:none;
    font-weight:800;
    letter-spacing:.03em;
    white-space:nowrap
}

.brand-mark {
    color:var(--accent);
    margin-right:8px
}

.nav nav {
    display:flex;
    gap:22px;
    align-items:center;
    flex-wrap:wrap
}

.nav nav a {
    font-size:.86rem;
    text-decoration:none;
    color:var(--muted)
}

.nav nav a:hover,.nav nav a[aria-current] {
    color:var(--accent)
}

.menu-toggle {
    display:none;
    background:transparent;
    border:1px solid var(--border);
    color:#fff;
    border-radius:8px;
    padding:8px 12px;
    font-size:1.3rem
}

.hero {
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at 50% 15%,#1c4652 0%,#102732 42%,#09151d 80%)
}

/* IMAGE DE FOND DU HERO
   Remplacez le chemin ci-dessous par votre photographie.
   Opacité : 0.30 = 30 % (ajustable entre 0 et 1).
   Les projecteurs restent animés au-dessus de la photo. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../images/accueil4.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.50;
    pointer-events: none;
}

/* Un léger voile améliore la lisibilité du logo et des textes. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(9,21,29,.18), rgba(9,21,29,.60));
    pointer-events: none;
}

.hero-inner {
    position:relative;
    z-index:2;
    padding:94px 0 82px;
    text-align:center
}

.eyebrow {
    color:var(--accent);
    font-weight:750;
    letter-spacing:.19em;
    font-size:.73rem;
    text-transform:uppercase
}

.hero-logo {
    margin:18px auto 12px;
    max-width:610px
}

.logo-image {
    width:100%;
    max-height:230px;
    object-fit:contain
}

.hero-lead {
    font-size:clamp(1.5rem,3.5vw,2.65rem);
    font-weight:750;
    margin:8px 0
}

.hero-sub {
    color:var(--muted);
    max-width:610px;
    margin:0 auto 28px
}

.actions {
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap
}

.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:13px 23px;
    border-radius:6px;
    font-weight:750;
    text-decoration:none;
    transition:transform .2s,background .2s
}

.button:hover {
    transform:translateY(-3px)
}

.primary {
    background:var(--accent);
    color:#092029
}

.ghost {
    border:1px solid #6f929b;
    color:var(--text)
}

.hero-photo {
    position:relative;
    max-width:900px;
    margin:56px auto 0;
    overflow:hidden;
    border-radius:14px;
    border:1px solid var(--border);
    box-shadow:0 24px 65px #0007
}

.hero-photo img {
    width:100%;
    height:320px;
    object-fit:cover;
    filter:brightness(.78)
}

.hero-photo span {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    text-align:left;
    padding:20px;
    background:linear-gradient(transparent,#071219de);
    font-weight:200
}

.beam {
    z-index: 1;
    position:absolute;
    top:-200px;
    width:250px;
    height:850px;
    opacity:.60;
    filter:blur(26px);
    transform-origin:top center;
    pointer-events:none;
    clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);
    background:linear-gradient(#b6e6e2aa,#76c8cf40,transparent);
    animation:sweep 4s ease-in-out infinite alternate
}

.beam-a {
    left:10%;
    transform:rotate(-22deg)
}

.beam-b {
    left:45%;
    animation-delay:-5s;
    background:linear-gradient(#ffe0a28c,#d6b77b20,transparent)
}

.beam-c {
    right:10%;
    animation-delay:-9s
}

@keyframes sweep {
from {
    transform:rotate(-24deg)
}

to {
    transform:rotate(24deg)
}


}

.section {
    padding:90px 0
}

.section-alt {
    background:var(--surface)
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:32px
}

.section-heading h2 {
    margin:0
}

h1,h2,h3 {
    line-height:1.18;
    letter-spacing:-.03em
}

h1 {
    font-size:clamp(2.5rem,6vw,4.8rem)
}

h2 {
    font-size:clamp(1.9rem,3.5vw,3rem)
}

h3 {
    font-size:1.45rem
}

.text-link {
    color:var(--accent);
    font-weight:750;
    text-decoration:none
}

.event-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.event-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden
}

.event-photo {
    display:block;
    aspect-ratio:4/3;
    background:#1a3842
}

.event-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s
}

.event-card:hover img {
    transform:scale(1.045)
}

.event-body {
    padding:24px
}

.event-body h3 {
    margin:12px 0
}

.event-body p,.note,.small {
    color:var(--muted)
}

.note {
    font-size:.83rem;
    margin-top:24px
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px
}

.split p {
    color:var(--muted)
}

.feature-photo {
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border)
}

.feature-photo img {
    width:100%;
    height:390px;
    object-fit:cover
}

.preview-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.preview-grid.three {
    grid-template-columns:repeat(3,1fr)
}

.preview-grid img,.preview-photo img {
    height:220px;
    width:100%;
    object-fit:cover;
    border-radius:9px
}

.contact-panel {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px
}

.contact-panel p {
    color:var(--muted)
}

.page-hero {
    padding:90px 0 75px;
    background:radial-gradient(ellipse at 75% 10%,#1b4550,transparent 60%),var(--surface)
}

.page-hero h1 {
    margin:12px 0
}

.page-hero p:not(.eyebrow) {
    color:var(--muted);
    font-size:1.15rem
}

.highlight {
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:32px;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:28px
}

.highlight img {
    width:100%;
    max-height:370px;
    object-fit:contain
}

.muted {
    color:var(--muted);
    font-weight:400
}

.subheading {
    margin-top:65px
}

.schedule {
    border-top:1px solid var(--border)
}

.schedule-row {
    display:grid;
    grid-template-columns:minmax(180px,28%) 1fr;
    gap:22px;
    padding:18px 14px;
    border-bottom:1px solid var(--border)
}

.schedule-row:nth-child(even) {
    background:#ffffff06
}

.schedule-date {
    color:var(--accent);
    font-weight:700
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px
}

.gallery-item {
    margin:0;
    overflow:hidden;
    border-radius:8px;
    background:var(--surface2)
}

.gallery-item img {
    width:100%;
    height:190px;
    object-fit:cover;
    transition:transform .3s
}

.gallery-item img:hover {
    transform:scale(1.05)
}

.archive-season {
    margin:14px 0;
    background:#09151d;
    border:1px solid var(--border);
    border-radius:8px
}

.archive-season summary {
    cursor:pointer;
    padding:18px 22px;
    font-size:1.2rem;
    font-weight:700
}

.archive-season summary span {
    float:right;
    color:var(--muted);
    font-size:.85rem;
    font-weight:400
}

.archive-season .schedule {
    margin:0 18px 18px
}

.footer {
    border-top:1px solid var(--border);
    padding:48px 0 22px;
    color:var(--muted);
    font-size:.9rem
}

.footer-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px
}

.footer strong {
    color:#fff
}

.fineprint {
    border-top:1px solid var(--border);
    padding-top:20px;
    margin-top:32px;
    font-size:.76rem
}

.missing-image {
    opacity:.15
}

.reveal {
    opacity:0;
    transform:translateY(18px);
    transition:opacity .65s,transform .65s
}

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

@media(max-width:900px) {
.menu-toggle {
    display:block
}

.nav nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:var(--bg);
    padding:20px 24px;
    flex-direction:column;
    align-items:start
}

.nav nav.open {
    display:flex
}

.event-grid {
    grid-template-columns:repeat(2,1fr)
}

.split {
    gap:30px
}

.gallery-grid {
    grid-template-columns:repeat(3,1fr)
}


}

@media(max-width:650px) {
.hero-inner {
    padding:65px 0
}

.hero-photo img {
    height:220px
}

.section {
    padding:58px 0
}

.event-grid,.split,.highlight,.footer-grid {
    grid-template-columns:1fr
}

.preview-grid,.preview-grid.three,.gallery-grid {
    grid-template-columns:repeat(2,1fr)
}

.section-heading,.contact-panel {
    align-items:start;
    flex-direction:column
}

.schedule-row {
    grid-template-columns:1fr;
    gap:5px
}

.gallery-item img {
    height:140px
}

.feature-photo img {
    height:260px
}

.archive-season summary span {
    float:none;
    display:block
}

.highlight {
    padding:20px
}


}

@media(prefers-reduced-motion:reduce) {
*,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important
}

.reveal {
    opacity:1;
    transform:none
}


}