/* ─────────────────────────────────────────────────────────────────────────────
 * RETENU — styles de la version validée : P1 (interrupteur par formation)
 * + panneau de réglages ancré sur la scène.
 *
 * Assemblé depuis `p1.html` (rangées, pastilles, palette de couleur) et
 * `_p4.css` (panneau ancré, bec, feuille d'actions). Rien de nouveau : les
 * deux moitiés ont été validées séparément, ici elles cohabitent.
 * ────────────────────────────────────────────────────────────────────────── */

/* ══ RANGÉE D'ACCESSOIRE (menu) ═══════════════════════════════════════════ */
.arow {
  background: var(--surface); border-radius: 16px;
  padding: 11px 12px; margin-bottom: 8px;
}
.arow.sel { box-shadow: 0 0 0 2px var(--marque); }
.atop { display: flex; align-items: center; gap: 10px; }
.atop .tx { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; padding: 0; }
.atop .tx b { display: block; font-size: 14px; line-height: 18px; font-weight: 700; }
.atop .tx span { display: block; font-size: 11px; line-height: 14px; color: var(--texte-doux); }

/* ══ LES 6 PASTILLES DE FORMATION ═════════════════════════════════════════
 * ⚠️ Leur teinte vient du JS : FORMATION_PALETTE, la palette de la timeline
 * (`packages/core/src/formation-colors.ts`). Ne JAMAIS remettre de couleur
 * fixe ici — les styles inline gagnent, et deux sources de vérité divergent. */
.adots { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.dot {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
  border: 0; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
  transition: transform 0.1s, background 0.14s;
}
.dot:active { transform: scale(0.88); }
.dot.off { background: transparent; }
.dot.fige { cursor: default; }

/* Pilule « Partout » — l'ex-cadenas, en mot lisible. L'or n'est PAS une
   couleur de formation : c'est le marqueur « suit toutes les formations ». */
.apart {
  margin-left: auto; border: 0; cursor: pointer; font: inherit;
  border-radius: 999px; padding: 6px 10px 6px 9px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--texte-doux);
}
.apart.on { background: var(--or); color: #fff; }
.apart:hover:not(.on) { background: var(--bordure); }

/* ══ ROND DE COULEUR + PALETTE ════════════════════════════════════════════
 * Cible tactile 34 px : WCAG 2.2 AA (2.5.8) impose 24 minimum, et l'app était
 * à 20 px en mobile / 16 en bureau avant le lot I4-C-12. */
.pastille {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 999px;
  border: 0; cursor: pointer; padding: 0;
  display: grid; place-items: center; position: relative;
  background: var(--surface-2);
}
.pastille i {
  display: block; width: 24px; height: 24px; border-radius: 999px;
  border: 1.5px solid var(--bordure-douce);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.12s;
}
.pastille:hover i { transform: scale(1.08); }
/* Chevron discret : sans lui, un rond coloré ne dit pas qu'il est cliquable. */
.pastille::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--bordure);
  background-image: linear-gradient(135deg, transparent 45%, var(--texte-doux) 45%, var(--texte-doux) 60%, transparent 60%);
  background-size: 7px 7px; background-position: center; background-repeat: no-repeat;
}

/* Palette : les 12 teintes de PROP_COLOR_PRESETS (PropsPanel.tsx), 6 par ligne. */
.palette {
  background: var(--surface); border-radius: 16px; padding: 12px;
  box-shadow: 0 14px 34px -10px rgba(17, 19, 24, 0.32), 0 0 0 1px var(--bordure-douce);
  margin: 9px 0 0;
}
.palette .ph { display: flex; align-items: center; margin-bottom: 10px; }
.palette .ph b { font-size: 12.5px; font-weight: 700; }
.palette .ph span { font-size: 11px; color: var(--texte-doux); margin-left: 6px; font-variant-numeric: tabular-nums; }
.palette .grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.palette .grille button {
  aspect-ratio: 1; border-radius: 12px; cursor: pointer; padding: 0;
  border: 1.5px solid var(--bordure);
  position: relative; min-height: 40px;
}
.palette .grille button.on { box-shadow: 0 0 0 2.5px var(--marque); border-color: var(--surface); }
.palette .grille button:active { transform: scale(0.92); }
.palette .grille button svg { position: absolute; inset: 0; margin: auto; }

/* ══ PANNEAU DE SCÈNE (clic sur un accessoire) ════════════════════════════
 * Il ne porte QUE l'échelle et la rotation (décision du 07/09). La portée et
 * les actions vivent dans le menu, sur le « ⋯ » de la rangée. */
.pop {
  position: absolute; left: 12px; right: 12px; z-index: 12;
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 18px 44px -14px rgba(17, 19, 24, 0.4), 0 0 0 1px var(--bordure-douce);
  overflow-y: auto; max-height: 46%;
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity 0.16s, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.pop.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Panneau ouvert : la pilule des vues s'efface, sinon elle le chevauche. */
.scene-wrap.reglage .vues { opacity: 0; pointer-events: none; transition: opacity 0.15s; }

/* ⚠️ Le bec est un FRÈRE du panneau, pas un enfant : `overflow-y:auto` rogne
   un enfant en `top:-7px`, et un enfant en `top:0` passe sous le contenu.
   Dans les deux cas il disparaît, et aucune mesure ne le signale. */
.bec-pop {
  position: absolute; z-index: 13; width: 18px; height: 9px;
  background: var(--surface);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity 0.16s; pointer-events: none;
}
.bec-pop.on { opacity: 1; }
.bec-pop.bas { clip-path: polygon(50% 100%, 100% 0, 0 0); }

/* Titre sur UNE ligne : « Table · 130 × 60 cm ». Deux lignes coutaient 14 px
   pour une information qui tient a cote du nom, et ces 14 px sont exactement
   ce qui manquait pour degager l'accessoire regle. */
.pop .tt { display: flex; align-items: baseline; gap: 8px; padding: 9px 8px 7px 14px; }
.pop .tt .tx { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.pop .tt b { font-size: 15px; line-height: 19px; font-weight: 700; white-space: nowrap; }
.pop .tt span { font-size: 11px; line-height: 14px; color: var(--texte-doux); white-space: nowrap; }
.pop .tt .ibtn { align-self: center; }

.pop .rgl { padding: 0 14px 10px; }
/* Une rangée = UNE ligne : libellé + valeur à gauche, curseur à droite.
   Le libellé au-dessus coûtait 17 px par réglage, soit 34 sur le panneau —
   exactement ce qui manquait pour dégager l'accessoire réglé. */
.pop .rw { margin-bottom: 8px; display: flex; align-items: center; gap: 11px; }
.pop .rw:last-child { margin-bottom: 0; }
.pop .rw .lb { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; }
/* Même largeur pour les deux libellés : sinon les curseurs ne démarrent pas
   au même x et la colonne paraît de travers. */
.pop .rw .lb span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-doux);
  /* ⚠️ display:inline-block OBLIGATOIRE : min-width est ignoré sur un inline,
     les deux libellés gardaient leur largeur de texte et les curseurs
     démarraient à 2 px d'écart. */
  display: inline-block; min-width: 62px;
}
/* Largeur réservée : à 0 le pouce du curseur se posait SUR la valeur, on
   lisait « 0°○ ». Tabulaire + largeur mini = la piste démarre toujours après. */
.pop .rw .lb b {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 46px; text-align: right;
}
/* Le curseur prend toute la largeur restante. */
.pop .rw > input[type=range] { flex: 1; min-width: 0; }
/* Rotation : curseur et crans partagent une rangée (gain ~34 px de hauteur,
   soit 8 points de scène rendus visibles — mesuré). */
/* Les deux rangees sont compactes : libelle + valeur au-dessus d'un curseur
   qui occupe toute la largeur restante. ~26 px gagnes sur la hauteur, soit
   l'ecart necessaire pour que l'accessoire reste degage. */
/* Rotation : la ligne (libellé + valeur + curseur) puis les crans dessous. */
.pop .rw.rot { display: block; }
.pop .rw.rot .g { display: flex; align-items: center; gap: 11px; }
.pop .rw.rot .g .lb { flex: 0 0 auto; }
.pop .rw.rot .g input[type=range] { flex: 1; min-width: 0; }
.pop .rw .lb span { line-height: 13px; }
/* La valeur se colle à SON libellé (pas au bord du groupe, que les crans
   raccourcissent) : elle se lit « ROTATION 90° », une donnée. */
/* ⚠️ Pas de `gap` propre ici : un gap de 8 px contre 6 px sur l'échelle
   décalait la piste de 2 px, invisible à l'œil et introuvable en cherchant du
   côté des largeurs. Les deux .lb partagent le gap défini plus haut. */
.pop .rw.rot .g .lb { justify-content: flex-start; }
.pop .rw.rot .g .lb b { margin-left: 0; }
.pop .rw.rot .crans { margin-top: 0; flex: 0 0 auto; }
.pop .rw.rot .crans button { padding: 6px 7px; min-height: 28px; }

.pop input[type=range] {
  -webkit-appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--surface-2); outline: 0;
}
/* Bouton 26 px : un pouce sur un curseur demande plus qu'un clic souris. */
.pop input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--surface); border: 2.5px solid var(--marque); cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 19, 24, 0.18);
}
.pop .crans { display: flex; gap: 5px; margin-top: 6px; }
.pop .crans button {
  flex: 1; border: 0; cursor: pointer; font: inherit;
  background: var(--surface-2); color: var(--texte-doux);
  border-radius: 999px; padding: 7px 0;
  font-size: 11.5px; font-weight: 600; min-height: 30px;
}
.pop .crans button.on { background: var(--marque); color: var(--sur-marque); }
.pop .crans button:hover:not(.on) { background: var(--bordure); }

/* ⚠️ Un SVG dans un bouton flex doit avoir width ET height BORNÉS : sans
   dimension CSS il adopte la taille de son conteneur (épingle rendue à 60 px). */
.pop svg { width: 17px; height: 17px; flex: 0 0 17px; }
.pop .crans svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* ══ FEUILLE D'ACTIONS (le « ⋯ » d'une rangée) ════════════════════════════ */
.fbar { display: flex; gap: 6px; }
.fbar .fdot {
  flex: 1; border: 0; cursor: pointer; font: inherit;
  border-radius: 12px; min-height: 44px;
  font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
  transition: transform 0.1s, background 0.14s;
}
.fbar .fdot:active { transform: scale(0.92); }
/* Teintes en JS (FORMATION_PALETTE) — cf. avertissement des .dot. */
.fbar .fdot.off { background: var(--surface); }

/* ══ DIVERS ═══════════════════════════════════════════════════════════════ */
.vide { text-align: center; padding: 20px 14px; color: var(--texte-doux); font-size: 12.5px; line-height: 18px; }
.vide b { display: block; color: var(--texte); font-size: 14px; margin-bottom: 3px; }

/* Indice au premier chargement : le geste « toucher la scène » n'est pas
   devinable seul, et c'est le cœur de la proposition. */
.indice {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 92px; z-index: 9;
  background: var(--texte); color: #fff;
  border-radius: 999px; padding: 8px 15px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 8px 24px -8px rgba(17, 19, 24, 0.5);
  transition: opacity 0.3s;
}
.indice.parti { opacity: 0; pointer-events: none; }
.indice svg { width: 14px; height: 14px; flex: 0 0 14px; }