/*
 * Punchbox — (c) 2026 Alexis Clement. Tous droits reserves.
 * Logiciel proprietaire. Toute reproduction ou diffusion interdite sans
 * autorisation ecrite.
 */

/* parametres.css — panneau de paramètres (mission console-lot-correctifs,
 * 06/09/2026). Feuille DÉDIÉE et AUTONOME (mêmes jetons --texte/--fond/--carte/
 * --bordure/--laiton/--rayon que style.css, cette page les définit toutes).
 *
 * CHARTE (règle du fondateur, déjà enfreinte deux fois ailleurs) : le panneau
 * se SUPERPOSE, il ne pousse JAMAIS le contenu. `position: fixed` pleine
 * fenêtre, jamais dans le flux normal du document -- ouvert ou fermé, la
 * largeur/hauteur du document ne bouge pas d'un pixel.
 */

.btn-parametres .pic { width: 1.25rem; height: 1.25rem; }

.parametres-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 72px 16px 16px;
  background: color-mix(in srgb, #000 55%, transparent);
  overflow-y: auto;
}
.parametres-overlay[hidden] { display: none; }

.parametres-panneau {
  width: 100%; max-width: 560px;
  background: var(--carte); color: var(--texte);
  border: 1px solid var(--bordure-forte, var(--bordure));
  border-radius: var(--rayon, 2px);
  box-shadow: var(--ombre, 0 12px 32px rgba(0,0,0,.35));
}

.parametres-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; background: var(--carte); border-radius: var(--rayon, 2px) var(--rayon, 2px) 0 0;
}
.parametres-tete h2 { margin: 0; font-size: 1.1rem; letter-spacing: .04em; }

.parametres-corps { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 24px; }

.parametres-section { border-top: 1px solid var(--bordure); padding-top: 16px; }
.parametres-section:first-child { border-top: none; padding-top: 0; }
.parametres-section h3 { margin: 0 0 6px; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-titre, var(--texte)); }
.parametres-section .reglage-note { margin: 0 0 10px; font-size: .85rem; color: var(--secondaire, var(--discret)); }
.parametres-section .reglage { margin-bottom: 10px; }
.parametres-section .champ-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.parametres-section .select { min-height: 44px; }

/* Vitesse du télescripteur : masquée ici quand telescripteur.js pose
 * `.tsc--manuel` sur #telescripteur (mouvement réduit / avance ligne par
 * ligne, mesure de vitesse hors sujet). `:has()` permet à CETTE feuille de
 * réagir à une classe posée sur un ANCÊTRE D'UN AUTRE SOUS-ARBRE, sans
 * dépendre d'une relation parent/enfant DOM avec #telescripteur -- piège
 * documenté (equerre-correctif-selecteur) : une règle CSS scoped à
 * l'ancêtre casse silencieusement dès qu'un élément déménage ailleurs dans
 * le DOM, comme c'est le cas ici (vitesse déportée dans ce panneau). */
body:has(#telescripteur.tsc--manuel) #reglage-tsc-vitesse { display: none; }