/* =========================================================
   Fan de Blues & Rock — feuille de style commune
   Concept : un club enfumé la nuit. Mur de briques, faisceaux
   de scène ambrés, enseigne néon, tickets de concert, vinyle.
   ========================================================= */

:root {
  /* Couleurs */
  --nuit: #0f0a15;        /* fond principal, nuit violette */
  --fumee: #171020;       /* fond des sections alternées */
  --bois: #24182f;        /* surfaces, cartes */
  --brique: #20142c;      /* fond des bandeaux (papier peint d'instruments) */
  --creme: #f3eaf8;       /* titres */
  --texte: #e1d5e9;       /* texte courant */
  --doux: #a594b1;        /* texte secondaire */
  --ambre: #c77dff;       /* accent principal (palette « Purple haze ») */
  --ambre-fonce: #8f45cc;
  --neon: #ff9e5e;        /* touche néon orangée, avec retenue */
  --ligne: rgba(var(--creme-rgb), .14);
  /* Mêmes couleurs en « R, V, B » pour les transparences (lueurs, voiles) */
  --nuit-rgb: 15, 10, 21;
  --creme-rgb: 243, 234, 248;
  --ambre-rgb: 199, 125, 255;
  --ambre-clair: #ecd4ff;          /* tube néon allumé */
  --ambre-clair-rgb: 236, 212, 255;
  --neon-rgb: 255, 158, 94;
  --encre-ticket: #5a2a7a;         /* texte foncé sur les tickets clairs */
  --erreur: #ff8a6b;
  --ok: #9fd89a;

  /* Typographie */
  --f-titre: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --f-neon: "Yellowtail", "Brush Script MT", cursive;
  --f-texte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-ticket: "Courier Prime", "Courier New", monospace;

  /* Échelle */
  --t-xs: .8rem;
  --t-s: .92rem;
  --t-m: 1.06rem;
  --t-l: 1.3rem;
  --t-h3: 1.7rem;
  --t-h2: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  --t-h1: clamp(3rem, 2rem + 5vw, 5.6rem);

  --rayon: 6px;
  --largeur: 1180px;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--ambre); }
a:hover { color: var(--creme); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 400;
  color: var(--creme);
  letter-spacing: .02em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.surtitre {
  font-family: var(--f-ticket);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ambre);
  margin-bottom: .7rem;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--f-titre);
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-decoration: none;
  padding: .7rem 1.5rem .6rem;
  border-radius: 2px;
  border: 2px solid var(--ambre);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-ambre { background: var(--ambre); color: var(--nuit); }
.btn-ambre:hover { background: var(--creme); border-color: var(--creme); color: var(--nuit); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--ambre-rgb), .25); }
.btn-ligne { background: transparent; color: var(--creme); border-color: var(--creme); }
.btn-ligne:hover { background: var(--creme); color: var(--nuit); transform: translateY(-2px); }

.lien-fleche {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-s);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--ambre);
  white-space: nowrap;
}
.lien-fleche::after { content: " →"; display: inline-block; transition: transform .2s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- En-tête ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--nuit);
}
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(var(--nuit-rgb), .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.entete-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: .9;
  text-decoration: none;
}
.logo-fan {
  font-family: var(--f-ticket);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--doux);
  margin-left: .2rem;
}
.logo-neon {
  white-space: nowrap;
  font-family: var(--f-neon);
  font-size: 2rem;
  color: var(--ambre-clair);
  text-shadow:
    0 0 4px rgba(var(--ambre-clair-rgb), .9),
    0 0 12px rgba(var(--ambre-rgb), .8),
    0 0 26px rgba(var(--ambre-rgb), .45);
  animation: allumage 2.4s ease-out 1 both;
}
/* Survol : vieux néon. Seuls le « B » et le « R », deux tubes fatigués,
   grésillent chacun à leur rythme ; le reste du néon reste allumé. */
.logo-neon .l { display: inline-block; white-space: pre; }
.logo:hover .l-fatigue,
.logo:focus-visible .l-fatigue { animation: tube-fatigue 3.8s steps(1, end) infinite; }
.logo:hover .l-fatigue-2,
.logo:focus-visible .l-fatigue-2 { animation-duration: 5.2s; animation-delay: .9s; }

@keyframes tube-fatigue {
  0%, 100% { color: var(--ambre-clair); }
  4%   { color: #5a4468; text-shadow: none; }
  7%   { color: var(--ambre-clair); }
  11%  { color: #6e5680; text-shadow: none; }
  13%  { color: var(--ambre-clair); }
  62%  { color: #634c74; text-shadow: none; }
  65%  { color: var(--ambre-clair); }
}

.menu { display: flex; align-items: center; gap: .3rem; }
.menu a {
  font-family: var(--f-titre);
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: var(--texte);
  text-decoration: none;
  padding: .4rem .8rem;
  border-radius: 2px;
  transition: color .2s ease;
  position: relative;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--ambre); }
.menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .15rem;
  height: 2px;
  background: var(--ambre);
}
.menu .menu-cta {
  margin-left: .5rem;
  border: 2px solid var(--ambre);
  color: var(--ambre);
}
.menu .menu-cta:hover { background: var(--ambre); color: var(--nuit); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span { width: 20px; height: 2px; background: var(--creme); transition: transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Héros ---------- */
.heros {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 70% 60% at 70% 45%, rgba(var(--ambre-rgb), .14), transparent 70%),
    linear-gradient(180deg, rgba(var(--nuit-rgb), .55) 0%, rgba(var(--nuit-rgb), .2) 40%, var(--nuit) 100%),
    var(--motif, url("../img/motif-instruments.svg")) center top / 460px 460px repeat,
    var(--brique);
}
.faisceaux { position: absolute; inset: 0; pointer-events: none; }
/* Le conteneur tourne et floute ; le cône est dessiné par ::before.
   Le flou s'applique ainsi après la découpe : bords doux, sans liseré. */
.faisceau {
  position: absolute;
  top: -8%;
  width: 46vw;
  max-width: 620px;
  height: 125%;
  transform-origin: 50% 0;
  filter: blur(14px);
  mix-blend-mode: screen;
  will-change: transform;
}
.faisceau::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
}
.f1 {
  left: 8%;
  animation: balance 11s ease-in-out infinite alternate;
}
.f1::before { background: linear-gradient(180deg, rgba(var(--ambre-clair-rgb), .34), rgba(var(--ambre-clair-rgb), 0) 82%); }
.f2 {
  right: 2%;
  animation: balance 13s ease-in-out -4s infinite alternate-reverse;
}
.f2::before { background: linear-gradient(180deg, rgba(var(--neon-rgb), .17), rgba(var(--neon-rgb), 0) 75%); }

.heros-grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.heros-texte { min-width: 0; }
.heros h1 {
  font-size: var(--t-h1);
  line-height: .92;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}
.heros h1 span {
  display: block;
  font-family: var(--f-neon);
  font-size: .5em;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--ambre);
  margin-top: .4rem;
  text-shadow: 0 0 18px rgba(var(--ambre-rgb), .45);
}
.chapo {
  margin-top: 1.4rem;
  font-size: var(--t-l);
  line-height: 1.55;
  max-width: 34ch;
  color: var(--texte);
}
.heros-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Chargement du héros */
.anim { animation: monte .8s cubic-bezier(.2, .7, .2, 1) both; }
.a1 { animation-delay: .1s; }
.a2 { animation-delay: .25s; }
.a3 { animation-delay: .45s; }
.a4 { animation-delay: .6s; }

/* Platine vinyle */
.platine {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  max-width: 100%;
  justify-self: center;
}
/* Ombre et halo fixes, sous le disque (ils ne tournent pas avec lui) */
.platine::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 6px #0a0807, 0 30px 70px rgba(0, 0, 0, .7), 0 0 90px rgba(var(--ambre-rgb), .12);
}
.disque {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(0, 0, 0, .5) 31.5% 33%, transparent 33.5%),
    repeating-radial-gradient(circle, #0c0b0a 0 1.6px, #1d1b19 1.6px 3.2px);
  animation: tourne 5s linear infinite;
}
.etiquette {
  position: absolute;
  inset: 33.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--nuit) 0 5%, transparent 5.5%),
    radial-gradient(circle, transparent 0 78%, rgba(0, 0, 0, .25) 79% 80%, transparent 81%),
    var(--ambre);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 11% 6%;
  color: var(--nuit);
}
.et-haut, .et-bas {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: clamp(.45rem, .3rem + .4vw, .62rem);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.et-nom {
  font-family: var(--f-titre);
  font-size: clamp(.7rem, .4rem + .8vw, 1.05rem);
  line-height: 1;
  letter-spacing: .04em;
  margin-top: 18%;
}
.reflet {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 20deg,
    transparent 0 8%, rgba(var(--ambre-clair-rgb), .13) 12%, transparent 18%,
    transparent 50%, rgba(var(--ambre-clair-rgb), .09) 62%, transparent 68%);
}
.bras {
  position: absolute;
  top: -6%;
  right: 2%;
  width: 7px;
  height: 56%;
  border-radius: 4px;
  background: linear-gradient(90deg, #8d847a, #d8d0c4, #8d847a);
  transform-origin: 50% 4%;
  transform: rotate(24deg);
  box-shadow: 4px 6px 12px rgba(0, 0, 0, .5);
}
.bras::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 30px; height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, #d8d0c4 0 30%, #4a443e 32% 100%);
}
.bras::after {
  content: "";
  position: absolute;
  bottom: -14px; left: 50%;
  width: 16px; height: 24px;
  margin-left: -8px;
  border-radius: 3px;
  background: #2c2925;
  border-top: 3px solid #d8d0c4;
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-bois {
  background:
    linear-gradient(180deg, var(--nuit), transparent 12%, transparent 88%, var(--nuit)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    var(--fumee);
}
.section-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.vide { color: var(--doux); font-style: italic; }

/* ---------- Tickets de concert ---------- */
.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 1.4rem;
}
.ticket {
  --encoche: 11px;
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  background: var(--creme);
  color: var(--nuit);
  border-radius: var(--rayon);
  min-height: 170px;
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-mask:
    radial-gradient(circle var(--encoche) at 96px 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--encoche) at 96px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--encoche) at 96px 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--encoche) at 96px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.ticket-talon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  background: var(--ambre);
  border-right: 2px dashed rgba(var(--nuit-rgb), .45);
  border-radius: var(--rayon) 0 0 var(--rayon);
  font-family: var(--f-ticket);
  font-weight: 700;
  text-transform: uppercase;
  padding: 1rem .4rem;
}
.t-jour, .t-mois { font-size: var(--t-xs); letter-spacing: .14em; }
.t-num { font-family: var(--f-titre); font-size: 3.4rem; line-height: .9; font-weight: 400; }
.ticket-corps {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.2rem 1.1rem 1.3rem;
  min-width: 0;
}
.t-info {
  font-family: var(--f-ticket);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-ticket);
  font-variant-numeric: tabular-nums;
  padding-right: 4.6rem;
}
.ticket h3 { color: var(--nuit); font-size: 1.9rem; overflow-wrap: anywhere; }
.t-lieu { font-weight: 600; }
.t-style { font-size: var(--t-s); color: #5d4f6a; margin-top: auto; }
.badge-exemple {
  position: absolute;
  top: .7rem;
  right: .8rem;
  font-family: var(--f-ticket);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  color: #a2401f;
  transform: rotate(4deg);
}

/* ---------- Quinconce ---------- */
.quinconce { display: grid; gap: clamp(4rem, 9vw, 7rem); }
.qx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.qx-inverse .photo { order: 2; }
.qx-texte { display: grid; gap: 1rem; max-width: 34rem; min-width: 0; }
.qx-texte h2 { margin-bottom: .3rem; }
.qx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .4rem; }
.qx-texte .btn { justify-self: start; margin-top: .4rem; }
.signature {
  font-family: var(--f-neon);
  font-size: 2.2rem;
  color: var(--ambre);
  line-height: 1;
}

.photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(var(--ambre-rgb), .45), transparent 52%),
    radial-gradient(circle at 82% 92%, rgba(var(--neon-rgb), .2), transparent 50%),
    linear-gradient(160deg, var(--bois), var(--nuit));
  border: 8px solid var(--creme);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
  transition: transform .4s ease;
}
.photo-g { transform: rotate(-1.6deg); }
.photo-d { transform: rotate(1.4deg); }
.photo:hover { transform: rotate(0) scale(1.01); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.photo-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--f-titre);
  font-size: 1.6rem;
  letter-spacing: .1em;
  color: rgba(var(--creme-rgb), .55);
}
.photo-ph small { font-family: var(--f-ticket); font-size: .78rem; letter-spacing: .1em; }
/* bandes adhésives */
.photo::before, .photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 90px; height: 26px;
  background: rgba(var(--creme-rgb), .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.photo::before { top: -6px; left: -22px; transform: rotate(-35deg); }
.photo::after { bottom: -6px; right: -22px; transform: rotate(-35deg); }

.liste-mediator { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.liste-mediator li { position: relative; padding-left: 1.8rem; }
.liste-mediator li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 15px; height: 17px;
  background: var(--ambre);
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
}

/* ---------- Groupes ---------- */
.groupes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.6rem;
}
.groupe {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bois);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.groupe:hover { transform: translateY(-4px); border-color: rgba(var(--ambre-rgb), .5); }
.groupe .photo {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  aspect-ratio: 16 / 10;
}
.groupe .photo::before, .groupe .photo::after { display: none; }
.groupe-corps { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.3rem 1.4rem; flex: 1; }
.groupe-style {
  font-family: var(--f-ticket);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon);
}
.groupe h3 { font-size: 2rem; }
.groupe p { font-size: var(--t-s); color: var(--doux); }
.groupe .lien-fleche { margin-top: auto; padding-top: .4rem; }
.groupe .badge-exemple { z-index: 3; color: var(--creme); background: rgba(var(--nuit-rgb), .6); }

/* ---------- Contact ---------- */
.section-contact {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(var(--ambre-rgb), .1), transparent 70%),
    var(--fumee);
  border-top: 1px solid var(--ligne);
}
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-intro { color: var(--doux); margin-top: .8rem; }

.formulaire { margin-top: 2rem; }
.motifs { border: 0; margin: 0 0 1.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.motifs legend {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme);
  margin-bottom: .8rem;
  padding: 0;
}
.motif { position: relative; cursor: pointer; }
.motif input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.motif span {
  display: inline-block;
  padding: .55rem 1rem;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--t-s);
  color: var(--texte);
  transition: all .2s ease;
}
.motif:hover span { border-color: var(--ambre); }
.motif input:checked + span { background: var(--ambre); border-color: var(--ambre); color: var(--nuit); font-weight: 600; }
.motif input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 2px; }

.champs, .bloc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.2rem;
}
.bloc { grid-column: 1 / -1; }
.champ { display: grid; gap: .4rem; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-size: var(--t-s); font-weight: 600; color: var(--creme); }
.champ label b { color: var(--ambre); }
.champ label i { font-weight: 400; color: var(--doux); }
.champ input, .champ textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--creme);
  background: var(--nuit);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  padding: .75rem .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { resize: vertical; min-height: 6rem; }
.champ input::placeholder, .champ textarea::placeholder { color: #6f6380; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--ambre); box-shadow: 0 0 0 3px rgba(var(--ambre-rgb), .18); }
.champ .invalide { border-color: var(--erreur); }
.videos { display: grid; gap: .6rem; }
.btn-ajout {
  justify-self: start;
  background: none;
  border: 1.5px dashed var(--ligne);
  color: var(--ambre);
  font: inherit;
  font-size: var(--t-s);
  font-weight: 600;
  padding: .45rem .9rem;
  border-radius: var(--rayon);
  cursor: pointer;
}
.btn-ajout:hover { border-color: var(--ambre); }
.btn-ajout[disabled] { opacity: .4; cursor: default; }

.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.accord { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-s); color: var(--doux); cursor: pointer; }
.accord input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--ambre); flex-shrink: 0; }

.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .4rem; }
.envoi .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.statut { font-weight: 600; }
.statut.ok { color: var(--ok); }
.statut.erreur { color: var(--erreur); }

/* Carte de coordonnées façon pass backstage */
.carte-contact {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  background: var(--creme);
  color: var(--nuit);
  border-radius: var(--rayon);
  padding: 2.4rem 1.8rem 1.8rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  transform: rotate(1deg);
}
.carte-contact::before {
  content: "";
  position: absolute;
  top: 14px; left: 50%;
  width: 54px; height: 10px;
  margin-left: -27px;
  border-radius: 6px;
  background: var(--fumee);
}
.cc-titre {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-ticket);
  border-bottom: 2px dashed rgba(var(--nuit-rgb), .25);
  padding-bottom: .8rem;
  margin-top: .6rem;
}
.cc-nom { font-family: var(--f-titre); font-size: 2.4rem; line-height: 1; margin-top: 1rem; letter-spacing: .03em; }
.carte-contact address { font-style: normal; margin-top: .6rem; line-height: 1.5; }
.cc-liste { margin: 1.2rem 0 0; display: grid; gap: .2rem; }
.cc-liste dt {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-ticket);
  margin-top: .6rem;
}
.cc-liste dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.cc-liste a { color: var(--nuit); text-decoration-color: var(--ambre); text-underline-offset: 3px; }
.cc-note { margin-top: 1.4rem; font-size: var(--t-s); color: #5d4f6a; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--ligne); padding-block: 2.4rem; background: var(--nuit); }
.pied-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.logo-petit .logo-neon { font-size: 1.6rem; animation: none; }
.pied-menu { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pied-menu a { color: var(--doux); text-decoration: none; font-size: var(--t-s); }
.pied-menu a:hover { color: var(--ambre); }
.pied-copy { font-size: var(--t-xs); color: var(--doux); font-family: var(--f-ticket); }

/* ---------- Animations ---------- */
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes balance { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes allumage {
  0%, 8% { opacity: .25; text-shadow: none; }
  10% { opacity: 1; }
  13% { opacity: .3; text-shadow: none; }
  17%, 100% { opacity: 1; }
}

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

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .carte-contact { position: relative; top: auto; max-width: 440px; }
}

/* Menu en « burger » dès que les 6 entrées ne tiennent plus sur une ligne */
@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nuit);
    border-bottom: 1px solid var(--ligne);
    padding: .6rem max(20px, env(safe-area-inset-right, 0px)) 1.2rem max(20px, env(safe-area-inset-left, 0px));
    display: none;
  }
  .menu.ouvert { display: flex; }
  .menu a { padding: .8rem .2rem; border-bottom: 1px solid var(--ligne); font-size: 1.4rem; }
  .menu a[aria-current="page"]::after { display: none; }
  .menu .menu-cta { margin: .8rem 0 0; text-align: center; border-bottom: 2px solid var(--ambre); }
}

@media (max-width: 860px) {
  .heros-grille { grid-template-columns: minmax(0, 1fr); }
  .platine { width: min(300px, 78%); order: -1; }
  .qx { grid-template-columns: minmax(0, 1fr); }
  .qx-inverse .photo { order: 0; }
}

@media (max-width: 560px) {
  .champs, .bloc { grid-template-columns: minmax(0, 1fr); }
  .ticket { grid-template-columns: 80px minmax(0, 1fr); }
  .ticket { -webkit-mask:
      radial-gradient(circle var(--encoche) at 80px 0, transparent 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--encoche) at 80px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--encoche) at 80px 0, transparent 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--encoche) at 80px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
  .t-num { font-size: 2.8rem; }
  .photo { border-width: 6px; }
}

/* =========================================================
   Pages intérieures : Groupes, Agenda, Lieux
   ========================================================= */

/* Bandeau de titre (version courte du héros) */
.heros-page { padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.heros-page .heros-grille { grid-template-columns: minmax(0, 1fr); }
.heros-page h1 { font-size: clamp(2.8rem, 2rem + 4vw, 4.8rem); }
.heros-page .chapo { max-width: 46ch; }
.heros-page .f2 { display: none; }

/* Bande d'appel avant le pied de page */
.bande-cta {
  background:
    radial-gradient(ellipse 50% 80% at 85% 50%, rgba(var(--ambre-rgb), .16), transparent 70%),
    var(--fumee);
  border-top: 1px solid var(--ligne);
  padding-block: clamp(2.8rem, 6vw, 4rem);
}
.bande-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; }
.bande-cta h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
.bande-cta p { color: var(--doux); margin-top: .5rem; max-width: 52ch; }
.bande-cta .heros-actions { margin-top: 0; }

/* Agenda */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.4rem; }
.filtre {
  font: inherit;
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--texte);
  background: none;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  padding: .5rem 1rem;
  cursor: pointer;
  transition: all .2s ease;
}
.filtre:hover { border-color: var(--ambre); }
.filtre.actif { background: var(--ambre); border-color: var(--ambre); color: var(--nuit); font-weight: 600; }

.agenda { display: grid; gap: 4.5rem; }
.annee { display: grid; gap: 2.5rem; }
.annee[hidden], .mois[hidden] { display: none; }
.annee-titre {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: clamp(3.6rem, 2.6rem + 5vw, 6.5rem);
  line-height: .9;
  letter-spacing: .04em;
  color: var(--ambre);
  text-shadow: 0 0 28px rgba(var(--ambre-rgb), .35);
  margin-bottom: .2rem;
}
.annee-titre::after { content: ""; flex: 1; height: 3px; background: linear-gradient(90deg, var(--ambre), transparent); }
.mois-titre {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
  margin-bottom: 1.4rem;
  text-transform: capitalize;
}
.mois-titre::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }

.t-lien {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-ticket);
  margin-top: .3rem;
}
.t-lien:hover { color: var(--nuit); }
.ticket-passe { filter: grayscale(.9); opacity: .55; }
.ticket-passe:hover { transform: none; }
.tampon {
  position: absolute;
  right: 1rem;
  bottom: .9rem;
  font-family: var(--f-titre);
  font-size: 1.5rem;
  letter-spacing: .12em;
  color: #8f2d14;
  border: 3px solid currentColor;
  border-radius: 4px;
  padding: .1rem .6rem 0;
  transform: rotate(-12deg);
  opacity: .8;
}
.passes { margin-top: 4rem; }
.passes summary {
  cursor: pointer;
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-s);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--doux);
  margin-bottom: 1.4rem;
}
.passes summary:hover { color: var(--ambre); }

/* Fiches en quinconce (groupes et lieux) */
.fiches { display: grid; gap: clamp(4rem, 9vw, 7rem); }
.fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--h-entete, 72px) + var(--h-alpha, 0px) + 30px);
}
.fiche[hidden], .lettre-titre[hidden] { display: none; }
.fiche-visuel { position: relative; min-width: 0; }
.fiche-visuel .photo { transform: rotate(-1.6deg); }
.fiche-inverse .fiche-visuel { order: 2; }
.fiche-inverse .fiche-visuel .photo { transform: rotate(1.4deg); }
.fiche-visuel .photo:hover { transform: rotate(0) scale(1.01); }
.fiche-visuel .badge-exemple { z-index: 3; top: 1.4rem; right: 1.4rem; color: var(--creme); background: rgba(var(--nuit-rgb), .65); }
.fiche-texte { display: grid; gap: 1rem; min-width: 0; max-width: 36rem; }
.fiche-texte .surtitre { margin-bottom: 0; }
.fiche-texte h2 { font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.4rem); }
.fiche-texte .qx-actions { margin-top: .4rem; }
.lieu-adresse { font-weight: 600; color: var(--creme); }
.lieu-adresse::before {
  content: "";
  display: inline-block;
  width: .7em; height: .7em;
  margin-right: .55em;
  border-radius: 50% 50% 50% 0;
  background: var(--ambre);
  transform: rotate(-45deg) translateY(-.05em);
}

.fiche-dates {
  border-left: 3px solid var(--ambre);
  padding: .2rem 0 .2rem 1rem;
}
.fiche-dates-titre {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: .4rem;
}
.fiche-dates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.fiche-dates b { font-family: var(--f-ticket); color: var(--creme); margin-right: .4rem; font-variant-numeric: tabular-nums; }

/* Vidéos YouTube (chargées au clic) */
.videos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .8rem; }
.yt, .yt-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: linear-gradient(160deg, var(--bois), var(--nuit));
}
.yt { cursor: pointer; padding: 0; }
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; opacity: .85; }
.yt:hover img { transform: scale(1.04); opacity: 1; }
.yt-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 40px;
  margin: -20px 0 0 -29px;
  border-radius: 10px;
  background: var(--ambre);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.yt-play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  margin: -8px 0 0 -5px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--nuit);
}
.video-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--ligne);
  border-radius: var(--rayon);
  font-weight: 600;
}

@media (max-width: 860px) {
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche-inverse .fiche-visuel { order: 0; }
}

/* =========================================================
   Espace admin
   ========================================================= */
.adm-main { padding-block: 2rem 4rem; display: grid; gap: 1.6rem; }
.adm h1 { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); }
.adm h2 { font-size: 1.9rem; margin-bottom: 1.2rem; }
.adm-entete-actions { display: flex; align-items: center; gap: 1.2rem; }
.adm-entete-actions form { margin: 0; }
.adm-petit { font-size: 1.05rem; padding: .45rem 1rem .35rem; }

.adm-flash { padding: .9rem 1.1rem; border-radius: var(--rayon); font-weight: 600; border: 1.5px solid; }
.adm-flash.ok { color: var(--ok); border-color: rgba(159, 216, 154, .4); background: rgba(159, 216, 154, .08); }
.adm-flash.erreur { color: var(--erreur); border-color: rgba(255, 138, 107, .45); background: rgba(255, 138, 107, .08); }
.adm-flash.info { color: var(--neon); border-color: rgba(var(--neon-rgb), .4); }

.adm-connexion { max-width: 460px; display: grid; gap: 1rem; padding-block: 3rem; }

.adm-onglets { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--ligne); padding-bottom: 1rem; }
.adm-onglets a {
  font-family: var(--f-titre);
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: var(--texte);
  text-decoration: none;
  padding: .45rem 1.1rem .35rem;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
}
.adm-onglets a span { font-family: var(--f-ticket); font-size: .8rem; color: var(--doux); margin-left: .2rem; }
.adm-onglets a:hover { border-color: var(--ambre); }
.adm-onglets a[aria-current="page"] { background: var(--ambre); border-color: var(--ambre); color: var(--nuit); }
.adm-onglets a[aria-current="page"] span { color: var(--nuit); }

.adm-exemples { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1.5px dashed rgba(var(--ambre-rgb), .5); border-radius: var(--rayon); }
.adm-exemples p { color: var(--doux); }

.adm-bloc { display: grid; gap: 1.6rem; }
.adm-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.adm-carte { background: var(--bois); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.2rem, 3vw, 2rem); }
.adm-form { display: grid; gap: 1.2rem; }
.adm-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.adm-champ { display: grid; gap: .4rem; min-width: 0; align-content: start; }
.adm-champ.large { grid-column: 1 / -1; }
.adm-champ > label { font-weight: 600; color: var(--creme); font-size: 1.05rem; }
.adm-champ label b { color: var(--ambre); }
.adm-champ input:not([type=checkbox]), .adm-champ textarea {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  color: var(--creme);
  background: var(--nuit);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  padding: .8rem .95rem;
}
.adm-champ input[type=file] { padding: .6rem; font-size: 1rem; }
.adm-champ input:focus, .adm-champ textarea:focus { outline: none; border-color: var(--ambre); box-shadow: 0 0 0 3px rgba(var(--ambre-rgb), .18); }
.adm-aide { font-size: var(--t-s); color: var(--doux); }
.adm-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.adm-photo img { width: 160px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); border: 3px solid var(--creme); }
.adm-check { display: inline-flex; gap: .5rem; align-items: center; color: var(--doux); cursor: pointer; }
.adm-check input { width: 18px; height: 18px; accent-color: var(--ambre); }
.adm-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.adm-annuler::after { content: none; }

.adm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.adm-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--fumee);
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--ambre);
  border-radius: var(--rayon);
  padding: 1rem 1.2rem;
}
.adm-liste li.passe { border-left-color: var(--doux); opacity: .6; }
.adm-liste li.en-cours { border-color: var(--ambre); }
.adm-item { position: relative; min-width: 0; flex: 1 1 260px; }
.adm-item-date { font-family: var(--f-ticket); font-weight: 700; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ambre); }
.adm-item-titre { font-family: var(--f-titre); font-size: 1.7rem; color: var(--creme); line-height: 1.1; margin-top: .15rem; }
.adm-item-sous { color: var(--doux); font-size: var(--t-s); }
.adm-tag { display: inline-block; margin-top: .4rem; font-family: var(--f-ticket); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--erreur); border: 1.5px solid currentColor; border-radius: 2px; padding: .05rem .4rem; }
.adm-item-actions { display: flex; align-items: center; gap: .8rem; }
.adm-item-actions form { margin: 0; }
.adm-suppr { background: none; border: 0; color: var(--erreur); font: inherit; font-weight: 600; cursor: pointer; padding: .4rem; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .adm-grille { grid-template-columns: minmax(0, 1fr); }
  .adm-entete-actions .lien-fleche { display: none; }
}

/* ---------- Formulaire : case d'accord en erreur ---------- */
.accord.invalide { color: var(--erreur); }
.accord.invalide input { outline: 2px solid var(--erreur); outline-offset: 2px; border-radius: 2px; }
.accord.invalide span::after { content: " (obligatoire)"; font-weight: 600; }

/* ---------- Confirmation d'envoi : un ticket « Admis » ---------- */
.merci {
  --encoche: 12px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  margin-top: 2rem;
  max-width: 560px;
  background: var(--creme);
  color: var(--nuit);
  border-radius: var(--rayon);
  outline: none;
  animation: tamponne .6s cubic-bezier(.2, .9, .3, 1.2) both;
  -webkit-mask:
    radial-gradient(circle var(--encoche) at 110px 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--encoche) at 110px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--encoche) at 110px 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--encoche) at 110px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.merci-talon {
  display: grid;
  place-items: center;
  background: var(--ambre);
  border-right: 2px dashed rgba(var(--nuit-rgb), .45);
  border-radius: var(--rayon) 0 0 var(--rayon);
}
.merci-talon span {
  font-family: var(--f-titre);
  font-size: 1.7rem;
  letter-spacing: .14em;
  padding: .2rem .5rem 0;
  border: 3px solid var(--nuit);
  border-radius: 4px;
  transform: rotate(-90deg);
}
.merci-corps { display: grid; gap: .6rem; padding: 1.6rem 1.6rem 1.5rem; }
.merci-corps .surtitre { color: var(--encre-ticket); margin-bottom: 0; }
.merci h3 { color: var(--nuit); font-size: 2.3rem; }
.merci-autre {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0;
  margin-top: .4rem;
  cursor: pointer;
  color: var(--encre-ticket);
}
.merci-autre:hover { color: var(--nuit); }
@keyframes tamponne {
  from { opacity: 0; transform: scale(.92) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .merci { grid-template-columns: 76px minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle var(--encoche) at 76px 0, transparent 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--encoche) at 76px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle var(--encoche) at 76px 0, transparent 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle var(--encoche) at 76px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
  .merci-talon span { font-size: 1.3rem; }
  .merci h3 { font-size: 1.9rem; }
}

/* Texte lu par les lecteurs d'écran mais invisible */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Bascule site / admin (icône disque) ---------- */
.bascule-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--ambre-rgb), .55);
  color: var(--ambre);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.menu .bascule-admin { padding: 0; margin-left: .4rem; border-radius: 50%; }
.bascule-admin svg { width: 24px; height: 24px; flex-shrink: 0; }
.bascule-admin span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bascule-admin:hover { border-color: var(--ambre); background: rgba(var(--ambre-rgb), .12); color: var(--creme); }
.bascule-admin:hover svg { animation: tourne 1.6s linear infinite; }
.menu a.bascule-admin::after { display: none; }

@media (max-width: 1080px) {
  .menu .bascule-admin {
    width: auto;
    height: auto;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--ligne);
    justify-content: flex-start;
    padding: .8rem .2rem;
    margin: 0;
    color: var(--ambre);
  }
  .menu .bascule-admin span { position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
  .menu .bascule-admin:hover { background: none; }
}

/* =========================================================
   Page « Site en construction »
   ========================================================= */
.chantier { min-height: 100vh; min-height: 100svh; background: var(--nuit); }
.chantier-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.chantier-grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.chantier-texte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; justify-items: start; min-width: 0; }
.chantier-logo { margin: 0 0 .4rem; }
.chantier-logo .logo-neon { font-size: clamp(2.3rem, 1.8rem + 2vw, 3.2rem); }
.chantier-logo .logo-fan { font-size: .8rem; }
.chantier .chapo { margin-top: 0; max-width: 40ch; }

.chantier-acces {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  width: min(100%, 440px);
  padding-top: 1.4rem;
  border-top: 1px dashed var(--ligne);
}
.chantier-acces label {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--doux);
}
.chantier-ligne { display: flex; gap: .6rem; }
.chantier-ligne input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--creme);
  background: rgba(var(--nuit-rgb), .75);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  padding: .7rem .95rem;
}
.chantier-ligne input::placeholder { color: #6f6380; }
.chantier-ligne input:focus { outline: none; border-color: var(--ambre); box-shadow: 0 0 0 3px rgba(var(--ambre-rgb), .18); }
.chantier-ligne input.invalide { border-color: var(--erreur); }
.chantier-ligne .btn { flex-shrink: 0; }
.chantier-contact { font-size: var(--t-s); color: var(--doux); max-width: 46ch; }
.chantier-contact strong { color: var(--texte); font-weight: 600; }

@media (max-width: 860px) {
  .chantier-grille { grid-template-columns: minmax(0, 1fr); }
  .chantier .platine { width: min(220px, 62%); order: -1; justify-self: start; }
}

/* =========================================================
   Vidéos des concerts
   ========================================================= */
.videos-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.8rem 1.4rem;
}
.video-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bois);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.video-carte:hover { border-color: rgba(var(--ambre-rgb), .5); transform: translateY(-3px); }
.video-carte .yt, .video-carte .yt-frame { border-radius: 0; }
.video-carte .badge-exemple { z-index: 3; color: var(--creme); background: rgba(var(--nuit-rgb), .65); }
.video-infos { display: grid; gap: .35rem; padding: 1rem 1.2rem 1.3rem; }
.video-meta {
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ambre);
}
.video-carte h3 { font-size: 1.75rem; line-height: 1.05; overflow-wrap: anywhere; }
.video-groupe {
  justify-self: start;
  font-family: var(--f-ticket);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon);
  text-decoration: none;
}
.video-groupe:hover { color: var(--creme); }
.video-desc { font-size: var(--t-s); color: var(--doux); }
.fiche-videos { display: grid; gap: .6rem; }

/* Aperçu (artifact) : YouTube ne peut pas s'y lancer */
.yt-apercu::after {
  content: attr(data-msg);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .5rem .8rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--nuit);
  background: var(--ambre);
}

/* Admin : vignettes YouTube */
.adm-vignette {
  float: left;
  width: 128px;
  max-width: 40%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-right: 1rem;
  border-radius: 4px;
  background: var(--nuit);
}
.adm-yt img { width: 240px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); border: 3px solid var(--creme); margin-top: .4rem; }

/* Admin : menus déroulants (groupe, lieu) */
.adm-champ select {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  color: var(--creme);
  background: var(--nuit);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  padding: .8rem .95rem;
  cursor: pointer;
}
.adm-champ select:focus { outline: none; border-color: var(--ambre); box-shadow: 0 0 0 3px rgba(var(--ambre-rgb), .18); }
.adm-choix + input { margin-top: .5rem; }

/* Lien du site d'un groupe ou d'un lieu, avec son adresse en dessous */
.fiche-lien { display: grid; gap: .2rem; justify-items: start; }
.fiche-url {
  font-family: var(--f-ticket);
  font-size: var(--t-s);
  color: var(--doux);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fiche-url:hover { color: var(--ambre); text-decoration: underline; text-underline-offset: 3px; }

/* Page Vidéos : blocs plus grands (2 par ligne sur ordinateur) */
[data-videos-page].videos-liste {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 2.4rem 1.8rem;
}
[data-videos-page] .video-infos { padding: 1.2rem 1.4rem 1.5rem; gap: .45rem; }
[data-videos-page] .video-carte h3 { font-size: 2.1rem; }
[data-videos-page] .yt-play { width: 72px; height: 50px; margin: -25px 0 0 -36px; border-radius: 12px; }

/* =========================================================
   Admin : tableau de bord des statistiques
   ========================================================= */
.st-periodes { display: flex; gap: .4rem; flex-wrap: wrap; }
.st-periodes a {
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
  padding: .45rem .95rem;
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
}
.st-periodes a:hover { border-color: var(--ambre); }
.st-periodes a[aria-current="page"] { background: var(--ambre); border-color: var(--ambre); color: var(--nuit); }

.st-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.st-tuile { background: var(--fumee); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.1rem 1.2rem; display: grid; gap: .2rem; align-content: start; }
.st-label { font-family: var(--f-ticket); font-weight: 700; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.st-chiffre { font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--creme); font-variant-numeric: tabular-nums; }
.st-evo { font-size: var(--t-s); color: var(--doux); }
.st-evo.hausse { color: var(--ok); }
.st-evo.baisse { color: var(--erreur); }
.st-evo.hausse::before { content: "▲ "; font-size: .75em; }
.st-evo.baisse::before { content: "▼ "; font-size: .75em; }

.st-bloc-graphique h2, .st-colonnes h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.st-graphique-boite { position: relative; }
.st-graphique { display: block; width: 100%; height: auto; overflow: visible; }
.st-grille { stroke: var(--ligne); stroke-width: 1; }
.st-base { stroke: rgba(var(--creme-rgb), .3); }
.st-axe { fill: var(--doux); font-family: var(--f-texte); font-size: 13px; }
.st-barre { fill: var(--ambre); }
.st-zone { fill: transparent; cursor: pointer; }
.st-zone.actif { fill: rgba(var(--creme-rgb), .06); }
.st-bulle {
  position: absolute;
  top: -6px;
  transform: translate(-50%, -100%);
  min-width: 130px;
  padding: .5rem .75rem;
  font-size: var(--t-s);
  line-height: 1.45;
  color: var(--texte);
  background: var(--nuit);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  pointer-events: none;
  white-space: nowrap;
}
.st-bulle b { display: block; color: var(--creme); }

.st-tableau { margin-top: 1rem; }
.st-tableau summary { cursor: pointer; font-size: var(--t-s); color: var(--doux); }
.st-tableau summary:hover { color: var(--ambre); }
.st-tableau-defile { max-height: 320px; overflow: auto; margin-top: .6rem; }
.st-tableau table { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.st-tableau th, .st-tableau td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--ligne); }
.st-tableau th { color: var(--doux); font-weight: 600; position: sticky; top: 0; background: var(--bois); }
.st-tableau td + td, .st-tableau th + th { text-align: right; }

.st-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; align-items: start; }
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.st-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; }
.st-nom { color: var(--creme); font-weight: 500; overflow-wrap: anywhere; }
.st-valeur { color: var(--texte); font-variant-numeric: tabular-nums; text-align: right; }
.st-valeur small { color: var(--doux); margin-left: .2rem; }
.st-piste { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(var(--creme-rgb), .08); overflow: hidden; }
.st-piste i { display: block; height: 100%; border-radius: 3px; background: var(--ambre); }

/* Admin sur téléphone : en-tête plus compact */
@media (max-width: 560px) {
  .adm .entete-in { gap: .6rem; }
  .adm .logo-neon { font-size: 1.5rem; }
  .adm-entete-actions { gap: .5rem; }
  .adm-entete-actions .bascule-admin { width: 38px; height: 38px; }
  .adm-entete-actions .adm-petit { font-size: .95rem; padding: .4rem .65rem .3rem; letter-spacing: .04em; }
  .st-chiffre { font-size: 2.5rem; }
}

/* =========================================================
   Espace admin : palette d'origine « Whisky & ambre »
   (le site public reste en « Purple haze »)
   ========================================================= */
body.adm {
  --nuit: #110c0a;
  --fumee: #1a1310;
  --bois: #2a1d16;
  --brique: #2c1b14;
  --creme: #f3e6cf;
  --texte: #e4d6bf;
  --doux: #ab9a82;
  --ambre: #f0a43a;
  --ambre-fonce: #b9741f;
  --neon: #8fd0ff;
  --nuit-rgb: 17, 12, 10;
  --creme-rgb: 243, 230, 207;
  --ambre-rgb: 240, 164, 58;
  --ambre-clair: #ffe3b8;
  --ambre-clair-rgb: 255, 210, 140;
  --neon-rgb: 143, 208, 255;
  --encre-ticket: #6e4a1c;
  --ligne: rgba(243, 230, 207, .14);
}

/* Admin : état du compteur de visites */
.st-etat { display: grid; gap: .35rem; padding: 1rem 1.2rem; border: 1.5px dashed var(--ligne); border-radius: var(--rayon); font-size: var(--t-s); color: var(--doux); }
.st-etat b { color: var(--creme); font-weight: 600; }


/* ---------- Annuaire des groupes : lettres A–Z, pavé de noms, recherche ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alpha-barre {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--h-entete, 72px));
  z-index: 40;
  background: rgba(var(--nuit-rgb), .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.alpha-barre[hidden] { display: none; }
.alpha-in { display: flex; align-items: center; gap: 1rem; padding-block: .6rem; }
.alpha-recherche input {
  width: 13rem; max-width: 100%;
  background: var(--fumee); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 999px;
  padding: .5rem 1rem; font: inherit; font-size: .95rem;
}
.alpha-recherche input:focus { outline: 2px solid var(--ambre); outline-offset: 1px; }
.alpha-lettres { display: flex; flex: 1; gap: .15rem; overflow-x: auto; scrollbar-width: none; justify-content: flex-end; }
.alpha-lettres::-webkit-scrollbar { display: none; }
.alpha-lettres a, .alpha-lettres span {
  flex: 0 0 auto; min-width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--f-titre); font-size: 1.25rem; letter-spacing: .04em; border-radius: 50%;
}
.alpha-lettres a, .pave-liste a { text-decoration: none; }
.alpha-lettres a { color: var(--creme); transition: background .15s, color .15s; }
.alpha-lettres a:hover, .alpha-lettres a.actif { background: var(--ambre); color: var(--nuit); }
.alpha-lettres .alpha-vide { color: var(--doux); opacity: .3; }
.alpha-lettres a.alpha-masque { opacity: .25; pointer-events: none; }

.annuaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.lettre-titre {
  display: flex; align-items: center; gap: 1.2rem;
  font-size: clamp(3rem, 2.2rem + 4vw, 5rem); line-height: .9; color: var(--ambre);
  text-shadow: 0 0 24px rgba(var(--ambre-rgb), .35);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--h-entete, 72px) + var(--h-alpha, 0px) + 20px);
  margin-bottom: calc(-1 * clamp(1.5rem, 4vw, 3rem));
}
.lettre-titre::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--ambre), transparent); }

.pave { order: -1; }
.pave-in { background: var(--fumee); border: 1px solid var(--ligne); border-radius: 10px; padding: .9rem 1.1rem; }
.pave-in summary {
  cursor: pointer; font-family: var(--f-ticket); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ambre-clair);
}
.pave-in summary span { color: var(--doux); }
.pave-liste { list-style: none; margin: .8rem 0 0; padding: 0 .4rem 0 0; max-height: 22rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ambre-fonce) transparent; }
.pave-liste li[hidden] { display: none; }
.pave-lettre { font-family: var(--f-titre); font-size: 1.4rem; color: var(--ambre); margin: .7rem 0 .15rem; border-bottom: 1px solid var(--ligne); }
.pave-lettre:first-child { margin-top: 0; }
.pave-liste a { display: block; padding: .3rem .4rem; border-radius: 6px; color: var(--texte); }
.pave-liste a:hover { background: rgba(var(--ambre-rgb), .15); color: var(--creme); }
.pave-vide { margin: .8rem 0 0; }

@media (min-width: 1100px) {
  .annuaire { grid-template-columns: minmax(0, 1fr) 16rem; gap: clamp(4rem, 6vw, 6.5rem); }
  .pave { order: 0; position: sticky; top: calc(var(--h-entete, 72px) + var(--h-alpha, 0px) + 1.5rem); }
  .pave-liste { max-height: calc(100vh - var(--h-entete, 72px) - 14rem); }
}
@media (max-width: 640px) {
  .alpha-in { flex-direction: column; align-items: stretch; gap: .4rem; }
  .alpha-recherche input { width: 100%; }
  .alpha-lettres { justify-content: flex-start; }
}

/* Mise en évidence de la fiche atteinte depuis l'annuaire */
.fiche-flash { animation: fiche-flash 1.8s ease-out; }
@keyframes fiche-flash {
  0%, 35% { box-shadow: 0 0 0 3px var(--ambre), 0 0 40px rgba(var(--ambre-rgb), .4); border-radius: 12px; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .fiche-flash { animation: none; } html { scroll-behavior: auto; } }