/* options.css — panneau « Personnaliser » (version 2), charge apres charte.css.
   Meme vocabulaire que la charte : petites capitales Brume, pilules, accent unique Lagon, surfaces Abysse. */

/* bouton, panneau et categories : apparitions animees par options.js (gsap), synchronisees avec la scene */
.ll-customize-btn { position: fixed; right: 48px; bottom: 84px; z-index: 14; opacity: 0; visibility: hidden; }
/* bouton du chapitre 3 : inactif tant que les options ne sont pas chargees */
#btn-customize:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.ll-customizer {
  position: fixed; top: 110px; right: 32px; bottom: 32px; z-index: 15;
  width: 320px; display: flex; flex-direction: column;
  background: rgba(18, 27, 35, 0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(230, 236, 239, 0.08); border-radius: 18px;
  /* ferme : invisible ET hors d'atteinte (le gabarit d'origine rend cliquables les <section>, qui
     recouvraient le bouton ; visibility les retire aussi du parcours au clavier) ; l'opacite et le glissement
     sont animes par options.js */
  opacity: 0; pointer-events: none; visibility: hidden;
}
.ll-customizer.is-open { pointer-events: auto; visibility: visible; }
.ll-customizer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 14px; border-bottom: 1px solid rgba(230, 236, 239, 0.08);
}
.ll-customizer__head .eyebrow { margin: 0; color: var(--ll-ecume); }
.ll-customizer__close {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  color: var(--ll-brume); background: transparent; border: 1px solid rgba(230, 236, 239, 0.16); border-radius: 50%;
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.ll-customizer__close:hover { color: var(--ll-ecume); border-color: rgba(230, 236, 239, 0.4); }
.ll-customizer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 22px 22px; }
.ll-customizer__cat { padding: 16px 0 4px; }
.ll-customizer__cat + .ll-customizer__cat { border-top: 1px solid rgba(230, 236, 239, 0.06); }
.ll-customizer__label { margin: 0 0 12px; }
.ll-customizer__choices { display: flex; flex-wrap: wrap; gap: 8px; }

.ll-choice {
  font: 400 13px/1 var(--ll-sans); letter-spacing: 0.02em; color: var(--ll-ecume);
  padding: 10px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(230, 236, 239, 0.04); border: 1px solid rgba(230, 236, 239, 0.16);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ll-choice:hover { border-color: rgba(230, 236, 239, 0.45); }
.ll-choice.is-active { border-color: var(--ll-lagon); color: var(--ll-lagon); background: rgba(76, 195, 230, 0.08); }
/* ronds de couleur sous les choix d'une categorie */
.ll-customizer__colors { margin-top: 16px; }
.ll-swatches { display: flex; gap: 12px; }
.ll-swatch {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%), var(--swatch);
  border: 1px solid rgba(230, 236, 239, 0.22); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ll-swatch:hover { transform: scale(1.08); }
.ll-swatch.is-active { box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--ll-abysse), 0 0 0 3px var(--ll-lagon); }
.ll-swatch:focus-visible,
.ll-choice:focus-visible, .ll-customizer__close:focus-visible { outline: 1px solid var(--ll-lagon); outline-offset: 2px; }

/* mode personnalisation : textes et interface s'effacent puis reviennent ; restent le panneau, le bouton et
   l'editeur de reglages. Le fondu est anime par app.js (gsap, en meme temps que la transition 3D) via
   --ll-ui-alpha. `filter: opacity()` se combine a l'opacite que la narration anime image par image (textes des
   chapitres, voiles) sans la toucher ; la classe ll-ui-dim n'est posee que pendant le fondu et tant que
   l'interface est masquee (au repos, pas de filtre : pas de bloc conteneur pour le menu plein ecran). */
body.ll-ui-dim #header, body.ll-ui-dim #chapters, body.ll-ui-dim .section-bg, body.ll-ui-dim #ll-glow,
body.ll-ui-dim .chapter-dots, body.ll-ui-dim .orbit-hint, body.ll-ui-dim .explore-close { filter: opacity(var(--ll-ui-alpha, 1)); }
body.customizer-open #header, body.customizer-open #chapters, body.customizer-open .section-bg, body.customizer-open #ll-glow,
body.customizer-open .chapter-dots, body.customizer-open .orbit-hint,
body.customizer-open .explore-close { pointer-events: none !important; }

@media (max-width: 900px) {
  .ll-customize-btn { right: 24px; bottom: 28px; }
  .ll-customizer {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 46vh;
    border-radius: 18px 18px 0 0; border-bottom: none;
  }
  .ll-customizer__head { padding: 16px 20px 10px; }
  .ll-customizer__body { padding: 4px 20px 18px; }
  .ll-customizer__cat { padding: 12px 0 2px; }
  .ll-customizer__choices { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ll-choice { white-space: nowrap; }
}