/* ==========================================================================
   FEUILLE DE STYLE (site d'une seule page)
   Sections :
     0. POLICES  (fichiers .woff2 hébergés avec le site)
     1. VARIABLES DU THÈME  (change d'abord ici les couleurs, polices et tailles)
     2. Base / réinitialisation
     3. Cadre de la page, en-tête bannière, navigation et vues
     4. Hero (accueil) et bannière de page (autres vues)
     5. Sections, titres, séparateurs
     6. Cartes et boutons
     7. Listes et tableaux
     8. Galeries, nouveautés et visionneuse
     9. Pied de page
    10. Animations
    11. Responsive (adaptation mobile)
   ========================================================================== */


/* ==========================================================================
   0. POLICES (hébergées sur ton propre serveur, rien n'est chargé depuis Google)
   Les fichiers sont dans assets/fonts/. Si tu veux changer de police, remplace
   les fichiers .woff2 ici, puis mets le nouveau nom dans --font-head / --font-body plus bas.
   ========================================================================== */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-800-normal.woff2') format('woff2');
}


/* ==========================================================================
   1. VARIABLES DU THÈME
   MODIFIER LES COULEURS :
     - "Palette" contient tes 9 couleurs de base. Change un code hex là-bas et tous
       les endroits qui l'utilisent se mettent à jour.
     - "Rôles" indique quelle couleur de la palette sert à quoi (fond de page,
       boutons, texte...). Change la couleur vers laquelle pointe un rôle
       pour obtenir un autre rendu, par exemple --accent: var(--pink);
   MODIFIER LES POLICES : change les noms de polices (et le <link> dans la page HTML).
   ========================================================================== */
:root {
  /* ----- Palette (tes couleurs) ----- */
  --blue:      #9ac5ed;
  --blue-soft: #f0f3fc;
  --sand:      #f4dfcb;
  --cream:     #f2e2cb;
  --pink:      #fea3e3;
  --pink-soft: #f9d9e9;
  --lavender:  #ceabe4;
  --purple-mid:#827499;
  --purple:    #736190;

  /* ----- Rôles ----- */
  --outer-top:   var(--pink-soft);   /* couleur des bords (hors de la colonne centrale), haut de la page */
  --outer-bottom:var(--lavender);    /* couleur des bords, bas de la page (dégradé du haut vers le bas) */
  --frame:       var(--purple-mid);  /* trait fin de chaque côté de la colonne centrale */
  --bg:          var(--blue-soft);   /* fond de la colonne centrale (là où se trouvent toutes les infos) */
  --bg-alt:      var(--pink-soft);   /* fond des sections alternées dans la colonne */
  --surface:     #ffffff;            /* cartes */
  --accent:      var(--purple);      /* boutons, en-têtes de tableaux, élément de menu actif, liens */
  --accent-pop:  var(--pink);        /* accents décoratifs (guillemets de citation, puces) */
  --accent-2:    var(--blue);        /* accent secondaire (contour de focus) */
  --sparkle:     var(--lavender);    /* petits détails décoratifs (séparateurs ✦, bordure des citations) */

  /* Nuances plus sombres / plus douces dérivées de ton violet, pour garder un texte facile à lire */
  --ink:         #4a3d66;            /* texte principal */
  --ink-soft:    #675780;            /* texte secondaire */
  --accent-dark: #5d4d78;            /* couleur au survol des boutons et des liens */
  --line:        #e6d3ec;            /* traits fins dans la colonne (bordures, séparateurs) */

  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:   18px;
  --shadow:   0 10px 30px rgba(115, 97, 144, .15);
  --page-w:   1000px;   /* largeur de la colonne centrale */
  --max:      920px;    /* largeur max du contenu large dans la colonne */
  --narrow:   780px;    /* largeur max du contenu texte */
}


/* ==========================================================================
   2. BASE / RÉINITIALISATION
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;   /* les ancres (ex. #references) gardent un peu d'air au-dessus */
}

/* La couleur du body est ce que l'on voit HORS de la colonne centrale (les bords). */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  background: linear-gradient(180deg, var(--outer-top), var(--outer-bottom)) fixed;
  -webkit-font-smoothing: antialiased;
  animation: pageIn .45s ease both;   /* léger fondu à l'ouverture d'une nouvelle page */
}

img { max-width: 100%; display: block; }
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

.container { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
.narrow    { width: min(100% - 2rem, var(--narrow)); margin-inline: auto; }
.text-center { text-align: center; }

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


/* ==========================================================================
   3. CADRE DE LA PAGE, EN-TÊTE BANNIÈRE ET NAVIGATION
   .page   = la colonne centrale. Son fond (--bg) diffère de la couleur du
   body, et un trait fin (--frame) court de chaque côté.
   L'en-tête n'est PAS fixe : il défile avec la page.
   L'élément de menu de la vue affichée reçoit aria-current="page"
   (défini par js/main.js ; Home est pré-marqué dans le HTML).
   ========================================================================== */
.page {
  display: flex; flex-direction: column;
  min-height: 100vh;
  max-width: var(--page-w);
  margin-inline: auto;
  background: var(--bg);
}
.page > main { flex: 1; }

/* Afficher le cadre seulement quand l'écran est plus large que la colonne (pour qu'il y ait des bords à séparer) */
@media (min-width: 1040px) {
  .page {
    border-inline: 1px solid var(--frame);
    /* fine bande blanche juste à l'extérieur du trait, puis une légère lueur */
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .35), 0 0 50px rgba(115, 97, 144, .25);
  }
}

/* VUES : le menu bascule entre elles (voir <main> dans index.html).
   Seule la vue nommée dans <html data-view="..."> est affichée ; js/main.js met à jour
   cet attribut quand on clique sur un lien du menu ou qu'on ouvre une adresse comme /#about.
   Sans JavaScript, toutes les vues s'affichent simplement les unes après les autres.
   POUR AJOUTER UNE VUE : ajoute un <div class="view" id="nom"> dans index.html, un lien de menu
   href="#nom", puis ajoute "nom" à la liste ci-dessous et dans le script du <head>. */
.js .view { display: none; }
.js[data-view="home"] #home,
.js[data-view="about"] #about,
.js[data-view="events"] #events,
.js[data-view="credits"] #credits { display: block; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }

/* MODIFIER L'IMAGE : image de la bannière (assets/images/banner.svg). 2000x800 px conseillé.
   Elle remplit toujours la largeur de la colonne ; change l'aspect-ratio pour une bannière plus haute ou plus plate. */
.banner { display: block; }
.banner img { width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; }

.main-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .7rem 1rem; }
.main-nav a {
  display: block; padding: .45rem 1rem;
  border-radius: 999px;
  color: var(--ink); text-decoration: none; font-weight: 700;
  transition: background .2s, color .2s;
}
.main-nav a:hover { background: var(--bg-alt); }
.main-nav a[aria-current="page"] { background: var(--accent); color: #fff; }


/* ==========================================================================
   4. HERO (page d'accueil) ET BANNIÈRE DE PAGE (about, events, credits)
   Les deux ont uniquement un dégradé doux (pas d'image de fond) : rose en haut qui se fond
   dans la couleur de la colonne. MODIFIER LA COULEUR : change rgba(249, 217, 233, .65) (c'est
   --pink-soft avec de la transparence) pour une autre teinte, ou le .65 pour
   un effet plus fort ou plus faible.
   ========================================================================== */
.hero {
  padding: 3rem 0 4rem;
  background: linear-gradient(180deg, rgba(249, 217, 233, .65), var(--bg) 96%);
}
.hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 3rem; align-items: center; }

.hero-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 28px;
  border: 6px solid var(--surface);
  box-shadow: var(--shadow);
}

.hero-text h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 700; }
.tagline { font-size: 1.15rem; color: var(--ink-soft); letter-spacing: .06em; }

.social-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
/* Réseaux sociaux : boutons ronds avec le logo (SVG en ligne dans index.html) */
.social-list a {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); text-decoration: none;
  transition: transform .2s, background .2s, color .2s;
}
.social-list svg { width: 1.3rem; height: 1.3rem; fill: currentColor; flex: none; }
/* icône dessinée en traits (e-mail) */
.social-list svg.line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.social-tag { font-weight: 800; font-size: .72rem; letter-spacing: .06em; }
.social-list a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* Bloc de titre en haut des vues intérieures */
.page-hero {
  padding: 2.8rem 0 2.6rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(249, 217, 233, .65), var(--bg) 100%);
}
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: .2rem; }
.page-hero p { margin: 0; color: var(--ink-soft); font-style: italic; font-size: 1.1rem; }


/* ==========================================================================
   5. SECTIONS, TITRES, SÉPARATEURS
   ========================================================================== */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--bg-alt); }

/* Trait fin entre deux sections d'une vue (comme les séparateurs "* * *" d'une page Carrd) */
.view > section + section { border-top: 1px solid var(--line); }

.section-head { text-align: center; margin: 0 auto 2rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.section-head p { color: var(--ink-soft); font-style: italic; margin: 0; }

.divider { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.4rem; color: var(--sparkle); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.quote {
  position: relative; margin: 0 0 2rem; padding: 1.4rem 1.8rem;
  text-align: center; font-family: var(--font-head); font-size: 1.35rem; font-style: italic;
  background: var(--surface); border: 1px dashed var(--sparkle); border-radius: var(--radius);
}
.quote::before { content: "\275D"; color: var(--accent-pop); margin-right: .5rem; }
.quote::after  { content: "\275E"; color: var(--accent-pop); margin-left: .5rem; }

/* ==========================================================================
   6. CARTES ET BOUTONS
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.card-body { padding: 1.6rem; }

.card-body h3 { font-size: 1.7rem; }

/* Image du planning de la semaine (index.html). L'image garde ses proportions (pas de recadrage).
   Change max-width pour la rendre plus étroite ou plus large. */
.schedule-figure { max-width: 900px; margin: 0 auto; padding: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.schedule-figure a { display: block; }
.schedule-figure img { width: 100%; height: auto; border-radius: calc(var(--radius) - 6px); }

.btn {
  display: inline-block; padding: .65rem 1.5rem; margin: 0 .3rem .6rem 0;
  background: var(--accent); color: #fff;
  border: 2px solid var(--accent); border-radius: 999px;
  font: 800 .95rem var(--font-body); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-2px); }


/* ==========================================================================
   7. LISTES ET TABLEAUX
   ========================================================================== */
.schedule-list { display: grid; gap: .8rem; margin-bottom: 1.6rem; }
.schedule-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.4rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
.schedule-list .day { font-weight: 800; }
.schedule-list .time { color: var(--accent-dark); font-weight: 700; }

.spec-list div { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px dotted var(--lavender); }
.spec-list dt { flex: 0 0 8rem; font-weight: 800; color: var(--accent-dark); }
.spec-list dd { margin: 0; }

.table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; background: var(--surface); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.table th { padding: .7rem 1rem; background: var(--accent); color: #fff; text-align: left; font-weight: 800; text-transform: lowercase; letter-spacing: .04em; }
.table td { padding: .6rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
.table tbody tr:nth-child(even) td { background: var(--bg); }
.credit-table td:first-child { width: 42%; color: var(--ink-soft); }
/* Les noms d'artistes sont des liens : on les met en avant */
.credit-table a { font-weight: 700; }


/* ==========================================================================
   8. GALERIES, NOUVEAUTÉS ET VISIONNEUSE
   .gallery       = grille de miniatures (4:3)
   .gallery-stack = une seule colonne, images rectangulaires 16:9 les unes sous les autres
                    (utilisée pour les références visuelles de la vue About)
   .visual-grid   = grille de vignettes carrées pour les collabs.
                    L'ordre se lit de gauche à droite, ligne par ligne. La vignette est
                    recadrée en carré, mais la popup montre toujours l'image entière
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.gallery a { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s; }
.gallery a:hover img { transform: scale(1.06); }
.gallery-stack { grid-template-columns: 1fr; gap: 1.2rem; }
.gallery-stack img { aspect-ratio: 16 / 9; }

/* Collabs : 2 colonnes. Pour des vignettes moins carrées, change l'aspect-ratio de ".visual img" (par exemple 4 / 5). */
.visual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
.visual {
  margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.visual > a { display: block; overflow: hidden; cursor: zoom-in; }
.visual img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s; }
.visual > a:hover img { transform: scale(1.04); }
.visual figcaption { padding: .6rem .9rem; text-align: center; color: var(--ink-soft); font-weight: 700; font-size: .95rem; }
.visual figcaption a { color: var(--accent-dark); font-weight: 800; }

/* Nouveautés (vue Events) : une carte par annonce, avec une image 16:9 en haut */
.news-list { display: grid; gap: 1.6rem; }
.news { margin-bottom: 0; }
.news-media { display: block; overflow: hidden; cursor: zoom-in; }
.news-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s; }
.news-media:hover img { transform: scale(1.03); }
.news-date { margin: 0 0 .2rem; color: var(--accent-dark); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }

/* Texte du lore : un peu plus aéré pour la lecture */
.prose { line-height: 1.8; }
.prose p { margin: 0 0 1rem; }

/* Visionneuse d'images (pilotée par js/main.js) */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(45, 36, 64, .92);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 90vw; text-align: center; }
.lightbox img { max-width: 90vw; max-height: 80vh; margin: 0 auto; border-radius: 10px; }
.lightbox figcaption { margin-top: .8rem; color: #fff; }
.lightbox button {
  position: absolute; background: rgba(255, 255, 255, .15); color: #fff;
  border: 0; width: 48px; height: 48px; border-radius: 50%;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox button:hover { background: var(--accent); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */
.site-footer { padding: 2.5rem 1rem; text-align: center; color: var(--ink-soft); border-top: 1px solid var(--line); }
.site-footer p { margin: 0 0 .3rem; }


/* ==========================================================================
   10. ANIMATIONS
   Les éléments avec data-reveal apparaissent en fondu quand on arrive dessus (voir js/main.js).
   Le contenu n'est masqué que lorsque JavaScript fonctionne, le site reste donc utilisable sans.
   ========================================================================== */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}


/* ==========================================================================
   11. RESPONSIVE (ADAPTATION MOBILE)
   Le menu est une simple rangée de liens qui passe à la ligne sur petit écran (pas de burger).
   ========================================================================== */
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-portrait { max-width: 340px; margin: 0 auto; }
  .social-list { justify-content: center; }
}

@media (max-width: 520px) {
  .section { padding: 3.2rem 0; }
  .schedule-list li { flex-direction: column; text-align: center; border-radius: var(--radius); }
  .spec-list div { flex-direction: column; gap: 0; }
  .main-nav a { padding: .4rem .8rem; font-size: .95rem; }
}