/* =========================================================
   ALPHA ΩPERA — Pages Répertoire : palette + scène cinéma
   ========================================================= */

/* PAGE HERO commun aux répertoires */
.rep-hero { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 140px var(--pad-x) 80px; }
.rep-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.42) saturate(0.85); z-index: 0; }
.rep-hero::before { content:''; position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.92) 100%), linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.95) 100%); }
.rep-hero .content { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 1100px; }
.rep-hero h1 { font-size: clamp(46px, 7vw, 110px); font-weight: 400; letter-spacing: -0.025em; line-height: 1; color: var(--ivoire); }
.rep-hero h1 em { font-style: italic; background: linear-gradient(120deg, var(--or-clair), var(--or), var(--champagne)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--serif-alt); font-weight: 500; }
.rep-hero p.sub { font-family: var(--serif-alt); font-style: italic; font-size: clamp(17px, 1.8vw, 22px); color: var(--ivoire); max-width: 720px; line-height: 1.5; opacity: 0.92; }

/* INTRO */
.rep-intro { background: linear-gradient(180deg, var(--noir) 0%, #0a0a14 100%); text-align: center; }
.rep-intro p { max-width: 900px; margin: 0 auto; font-family: var(--serif-alt); font-size: clamp(17px, 1.6vw, 22px); color: rgba(245,240,232,0.84); line-height: 1.75; }
.rep-intro em { font-style: italic; background: linear-gradient(110deg, var(--or-clair), var(--or)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--serif-alt); font-weight: 500; }

/* COMPOSEZ section */
.composer { background: linear-gradient(180deg, #0a0a14 0%, #08080f 100%); }
.composer-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; max-width: 1500px; margin: 0 auto; align-items: start; }
@media (max-width: 980px) { .composer-grid { grid-template-columns: 1fr; gap: 50px; } }

.composer-col-title {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.composer-col-title::before { content: ''; width: 32px; height: 1px; background: var(--or); }
.composer-col-title .count {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--or-clair);
}

/* PALETTE — grille des instruments (mode classique : 4 colonnes) */
.instruments-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 540px) { .instruments-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }

/* PALETTE GROUPÉE — Sur Mesure (5 rangées comme l'image source).
   Chaque row utilise EXACTEMENT le nombre de colonnes qu'elle a → JAMAIS de trou.
   Les cases ont une largeur cible (110px desktop, 100px tablette) et la row se centre
   si elle n'a pas assez d'items pour remplir la largeur du container. */
.instruments-palette.palette-grouped {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.palette-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  width: 100%;
}
.palette-row.palette-row-wide {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
@media (max-width: 540px) {
  .palette-row { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
  .palette-row.palette-row-wide { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}

/* Tile palette : case dorée carrée uniforme, image décalquée centrée + nom dessous.
   PAS de min-height : la case respecte STRICTEMENT son aspect-ratio dans sa colonne grid. */
.inst-icon {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #0a0710 0%, #050308 100%);
  border: 1px solid var(--or-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8% 6% 6%;
  gap: 3%;
  cursor: none;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.4s var(--ease-luxe), transform 0.4s var(--ease-luxe), box-shadow 0.4s, background 0.4s;
}
.inst-icon::before {
  /* Léger glow doré ambiant subtil */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(201,168,76,0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.inst-icon.is-wide { aspect-ratio: 5/4; }
.inst-icon-img {
  position: relative;
  z-index: 1;
  flex: 1; min-height: 0;
  width: 82%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(201,168,76,0.18));
  transition: filter 0.4s var(--ease-luxe), transform 0.4s var(--ease-luxe);
}
.inst-icon-name {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-clair);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 3px;
}
.inst-icon:hover {
  border-color: var(--or);
  transform: translateY(-3px);
  background: linear-gradient(180deg, #100b1c 0%, #080510 100%);
  box-shadow: 0 14px 30px -8px rgba(201,168,76,0.45), inset 0 0 24px rgba(201,168,76,0.06);
}
.inst-icon:hover .inst-icon-img { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(201,168,76,0.55)); transform: scale(1.04); }

/* État : placé sur la scène */
.inst-icon.is-on-stage {
  border-color: var(--or);
  background: linear-gradient(180deg, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0.04) 100%);
  box-shadow: 0 0 0 2px var(--or), 0 0 28px rgba(201,168,76,0.45);
  transform: translateY(-2px);
}
.inst-icon.is-on-stage .inst-icon-img { filter: drop-shadow(0 0 14px rgba(201,168,76,0.6)) brightness(1.08); }
.inst-icon.is-on-stage .inst-icon-name { color: var(--or); }

/* État : désactivé */
.inst-icon.is-disabled {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(80%);
  cursor: not-allowed;
}
.inst-icon.is-disabled::after {
  content: '⊘';
  position: absolute;
  top: 8px; right: 8px;
  font-size: 16px;
  color: var(--grey-soft);
  opacity: 0.85;
  background: rgba(0,0,0,0.65);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

/* =========================================================
   SCÈNE — image de fond cinéma (scene.png), 2 étages
   ========================================================= */
/* La scène est un conteneur QUI N'A PLUS de background-image.
   À la place, CHAQUE moitié (upper et lower) a sa propre image :
   - upper : scene-top.png    (moitié supérieure, hauteur FIXE)
   - lower : scene-bottom.png (moitié inférieure, hauteur EXTENSIBLE vers le bas)
   Ainsi, quand on ajoute des instruments en bas, seule la partie basse grandit. */
.stage {
  position: relative;
  background-color: #0a0710;
  border: 1px solid var(--or-line);
  padding: 0;            /* le padding intérieur est sur chaque moitié */
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.15),
    0 30px 80px -20px rgba(0,0,0,0.7),
    inset 0 0 80px rgba(0,0,0,0.5);
}

/* Bouton reset (vider la scène) — flottant en haut à droite de la scène */
.stage-reset {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--or-line);
  background: rgba(20,8,4,0.85);
  color: var(--or-clair);
  font-size: 16px;
  cursor: none;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s, transform 0.25s var(--ease-luxe), background 0.3s, border-color 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stage:hover .stage-reset,
.stage-reset.is-visible {
  opacity: 1;
  transform: scale(1);
}
.stage-reset:hover {
  background: var(--or);
  color: var(--noir);
  border-color: var(--or);
  transform: scale(1.08) rotate(-90deg);
}
/* Rideaux symétriques sur les deux côtés (subtils) */
.stage::before, .stage::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  pointer-events: none;
  z-index: 4;
}
.stage::before { left: 0; background: linear-gradient(90deg, rgba(20,8,4,0.55), transparent); }
.stage::after  { right: 0; background: linear-gradient(270deg, rgba(20,8,4,0.55), transparent); }

/* Chaque moitié = un conteneur séparé avec sa propre image background.
   Upper = scene-top.png, Lower = scene-bottom.png.
   Upper a une taille FIXE qui ne change jamais (image non extensible).
   Lower grandit vers le bas si besoin (l'image suit). */
.stage-level {
  position: relative;
  z-index: 2;
  padding: 16px 14px;
  box-sizing: border-box;
  display: flex;
}
.stage-level.upper {
  flex: 0 0 260px;            /* HAUTEUR FIXE : ne grandit jamais avec ajouts en bas */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.05) 100%),
    url('assets/scene-top.png');
  background-size: 100% 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: center;
  gap: 12px;
  padding-bottom: 14px;
}
/* Si la voix grandit (3+ lignes), c'est upper qui pousse via JS qui modifie flex-basis */
.stage-level.upper.grow { flex: 0 0 auto; }

/* Étage du bas : sa propre image (extensible vers le bas) */
.stage-level.lower {
  flex: 1 1 auto;
  min-height: 260px;          /* base = moitié inférieure */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 100%),
    url('assets/scene-bottom.png');
  background-size: 100% 100%;
  background-position: top;
  background-repeat: no-repeat;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;  /* contenu commence en haut, descend vers le bas */
  gap: 10px;
  padding-top: 20px;            /* la 1ère ligne est à ~20px sous le centre image (position fixe) */
  padding-bottom: 18px;
}
.stage-top {
  display: flex;
  flex-wrap: nowrap;        /* la 1ère ligne ne wrap PAS : si pleine, le surplus va dans bottom */
  justify-content: center;
  gap: 12px;
  overflow: visible;
}
.stage-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.stage-side {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}
.stage-side-left {
  justify-content: flex-end;
}
.stage-side-right {
  justify-content: flex-start;
}
/* Pupitre : zone centrale permanente (toujours évitée à partir de la 2ème ligne) */
.stage-pupitre-gap {
  flex: 0 0 130px;
  align-self: stretch;
  pointer-events: none;
}
.stage-level-label {
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--or);
  opacity: 0.85;
  font-family: var(--sans);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  z-index: 3;
}
.stage-empty {
  font-family: var(--serif);
  font-style: italic;
  color: rgba(245,240,232,0.55);
  font-size: 14px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* =========================================================
   STAGE-PIECE — décalqué pur sans cadre, juste l'image + nom
   Les bulles (count gauche, ✕ droite) n'apparaissent qu'au hover
   ========================================================= */
.stage-piece {
  position: relative;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: none;
  animation: stagePieceIn 0.5s var(--ease-cinema);
  transition: transform 0.3s var(--ease-luxe);
  z-index: 3;
}
.stage-piece.is-wide { width: 108px; }
.stage-piece:hover { transform: translateY(-3px); }

.stage-piece .inst-icon-img,
.stage-piece img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.85))
    drop-shadow(0 0 12px rgba(201,168,76,0.55));
  transition: filter 0.3s;
}
.stage-piece.is-wide .inst-icon-img,
.stage-piece.is-wide img { width: 84px; height: 68px; }
.stage-piece:hover .inst-icon-img,
.stage-piece:hover img {
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,0.9))
    drop-shadow(0 0 18px rgba(201,168,76,0.85));
}

.stage-piece-name {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or-clair);
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.7);
}

/* Badge "quantité" en haut à gauche — design luxe doré, visible UNIQUEMENT au hover */
.stage-piece-count {
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f1d56a 0%, var(--or) 50%, #8e6a1e 100%);
  border: 1.5px solid var(--noir);
  color: var(--noir);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(201,168,76,0.6), 0 0 0 1px var(--or);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s, transform 0.25s var(--ease-luxe), box-shadow 0.25s;
}
.stage-piece:hover .stage-piece-count {
  opacity: 1;
  transform: scale(1);
}
.stage-piece-count:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 6px 22px rgba(201,168,76,0.9), 0 0 0 1px var(--or-clair);
}
/* Si count > 1 → toujours visible (info importante : multiplicateur) */
.stage-piece-count.is-multi {
  opacity: 1;
  transform: scale(1);
}

/* Bouton retirer (✕) en haut à droite — visible UNIQUEMENT au hover */
.stage-piece-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20,10,10,0.92);
  border: 1px solid var(--or-line);
  color: var(--or-clair);
  font-size: 11px;
  line-height: 1;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s, transform 0.25s var(--ease-luxe);
}
.stage-piece:hover .stage-piece-remove {
  opacity: 1;
  transform: scale(1);
}
.stage-piece-remove:hover { background: #c44141; color: var(--ivoire); transform: scale(1.12) !important; }

/* COUNT PICKER — dropdown 1-10 */
.count-picker {
  position: absolute;
  top: 22px;
  left: -8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 10px;
  background: linear-gradient(180deg, #1a1208 0%, #0a0610 100%);
  border: 1px solid var(--or);
  box-shadow: 0 14px 40px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,168,76,0.25);
  z-index: 100;
  min-width: 180px;
  animation: countPickerIn 0.25s var(--ease-luxe);
}
.count-picker button {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--grey-line);
  color: var(--ivoire);
  font-family: var(--serif);
  font-size: 14px;
  cursor: none;
  transition: all 0.25s var(--ease-luxe);
}
.count-picker button:hover {
  background: rgba(201,168,76,0.18);
  border-color: var(--or);
  color: var(--or-clair);
  transform: scale(1.08);
}
.count-picker button.is-current {
  background: var(--or);
  border-color: var(--or);
  color: var(--noir);
  font-weight: 600;
}
@keyframes countPickerIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stagePieceIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* CTA */
.rep-cta-band { background: radial-gradient(ellipse at 50% 50%, rgba(201,160,74,0.12), transparent 60%), linear-gradient(180deg, #08080f 0%, var(--noir) 100%); text-align: center; }
.rep-cta-band h2 { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 18px; max-width: 900px; margin-left: auto; margin-right: auto; }
.rep-cta-band h2 em { font-style: italic; background: linear-gradient(110deg, var(--or-clair), var(--or)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--serif-alt); }
.rep-cta-band p { color: var(--grey-soft); max-width: 580px; margin: 0 auto 40px; font-size: 15px; line-height: 1.7; }