/* =====================================================================================
   DOVION — PANNEAU PARAMÈTRES : même charte que la BOUTIQUE (2026-07-26)
   -------------------------------------------------------------------------------------
   Demande Simon : « pour les paramètres, applique la même charte graphique que la boutique »
   (+ « le logo semble compressé »).

   Habillage du SEUL panneau #options-panel. Comme pour la boutique (css/shop-pastel.css),
   on ajoute une DERNIÈRE couche plutôt que de retoucher les quatre qui le peignent déjà
   (style.css → menu-refonte.css → popups-ghibli.css → glass-ui.css → sunset-arcade.css) :
   reprendre l'une d'elles casserait l'accueil / le tuto / le login / les quêtes, qui
   partagent leurs règles. Réversible en retirant UNE ligne d'index.html.

   POURQUOI LE PANNEAU ÉTAIT BANCAL AVANT CETTE PASSE
   `popups-ghibli.css` peint déjà tout le panneau en CLAIR, moitié via des jetons `--pg-*`,
   moitié via des dégradés crème ÉCRITS EN DUR. `sunset-arcade.css`, chargé APRÈS, rebascule
   les seuls JETONS en prune. Résultat : la moitié « jetons » (encre, champs, bordures)
   devenait sombre pendant que la moitié « en dur » restait crème — d'où des libellés
   quasi invisibles et une liste déroulante prune au milieu de cartes claires.

   LA MÉTHODE, identique à shop-pastel.css : on REDÉFINIT les jetons `--pg-*` — et
   uniquement sur #options-panel, pour que le tuto / le login / les quêtes gardent le prune —
   puis on ne traite EN PLUS que les dégradés écrits en dur.

   LA CHARTE, reprise à l'identique de la boutique
   - Trois niveaux de surface, franchement distincts :
        feuille = sable  >  carte de réglage = ivoire  >  contrôle = blanc + ombre basse
   - Aplats, pas de dégradés ; un trait de 1 px à 18 % ; une ombre BASSE au lieu du relief.
   - Une couleur = un sens, et une seule :
        sauge   = ACTIF / activé (interrupteur, cases cochées, remplissage des curseurs)
        abricot = SÉLECTION / action principale (onglet courant, piste choisie, boutons)
        gris    = indisponible          rose fané = arrêter / destructif
   - Encre gris-chaud (jamais du noir), titres en 700 (plus de 900 ni de majuscules criardes).

   Sommaire : 0. jetons · 1. feuille · 2. logo · 3. en-tête/onglets · 4. cartes (colonnes)
              5. curseurs · 6. cases & interrupteur · 7. listes déroulantes
              8. sélecteur de piste · 9. boutons · 10. pied & développeur
   ===================================================================================== */

/* ============================ 0. JETONS (valeurs de la boutique) ============================ */
/* Mêmes valeurs que les `--shg-*` de css/shop-pastel.css. Scopé à #options-panel SEUL : la
   règle groupée de sunset-arcade vaut (1,0,0) par sélecteur, la nôtre aussi et arrive après. */
#options-panel {
  /* surfaces */
  --pg-paper: #e9e2d6;                           /* NIVEAU 0 — feuille : papier sable */
  --pg-card: #fbf8f2;                            /* NIVEAU 1 — carte de réglage : ivoire */
  --pg-card-bg: #fbf8f2;                         /* aplat (l'original était un dégradé) */
  --pg-field: #ffffff;                           /* NIVEAU 2 — contrôle posé sur la carte */
  --pg-border: rgba(74, 60, 45, 0.18);
  --pg-border-strong: rgba(74, 60, 45, 0.32);
  /* encres */
  --pg-ink: #3c3733;                             /* texte principal (10,5:1 sur ivoire) */
  --pg-ink-soft: #57504a;                        /* secondaire (7,4:1) */
  --pg-muted: #6b645d;                           /* discret (5,3:1) */
  /* sens */
  --pg-sage: #bcd7c2;                            /* ACTIF (remplissage) */
  --pg-sage-deep: #3f6b52;                       /* ACTIF (encre, 5,9:1) */
  --pg-gold: #f0c9a2;                            /* SÉLECTION (remplissage) */
  --pg-gold-deep: #93582f;                       /* SÉLECTION (encre, 5,6:1) */
  --pg-cta-gold: #e8b482;                        /* action principale — aplat, pas de dégradé */
  --pg-cta-gold-ink: #4d2b10;
  --pg-danger: #a0554d;
  /* géométrie + ombre basse (le trait porte la séparation, pas le relief) */
  --pg-radius: 16px;
  --pg-radius-sm: 14px;
  --pg-shadow-card: 0 1px 2px rgba(64, 50, 36, 0.07), 0 6px 16px rgba(64, 50, 36, 0.06);
  --pg-shadow-sheet: 0 12px 30px rgba(40, 34, 28, 0.20);
  /* jeton local : fond des états indisponibles / interrupteur au repos */
  --op-off: rgba(60, 55, 51, 0.10);
}

/* ============================ 1. FEUILLE ============================ */
/* Le panneau n'a pas de boîte intérieure (contrairement à #premium-box côté boutique) :
   c'est #options-panel lui-même qui porte le papier. Aplat, comme la feuille de la boutique. */
#options-panel {
  background: var(--pg-paper) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--pg-ink);
}
/* Croix de fermeture : pastille blanche à trait fin (l'originale est un dégradé crème). */
#options-panel .panel-x {
  background: #ffffff !important;
  color: var(--pg-ink-soft) !important;
  border: 1px solid var(--pg-border-strong) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#options-panel .panel-x:hover {
  background: #ffffff !important;
  border-color: var(--pg-danger) !important;
  color: var(--pg-danger) !important;
}

/* ============================ 2. LOGO ============================ */
/* LOGO ÉCRASÉ (Simon 2026-07-26). Mesuré dans la page : rendu 132 × 75,6 px pour un fichier
   1280 × 440 (ratio 2,909) — il aurait dû faire 132 × 45,4, soit 66 % de hauteur en trop.
   Cause : `max-width: min(220px, 60%)` sur une image en `width:auto` DANS un conteneur flex
   qui se dimensionne lui-même sur son contenu. La hauteur auto est résolue pour la branche
   220px, puis la largeur est ré-écrêtée à 60 % de la boîte (132px) sans recalcul de hauteur.
   Correctif : conteneur en BLOC (sa largeur devient celle du panneau, le pourcentage a donc
   une référence stable), largeur explicite, et `aspect-ratio` + `object-fit: contain` en filet
   de sécurité — même si une autre couche imposait une hauteur, l'image ne se déforme plus.
   Vérifié après correctif : 144,0 × 49,5 → ratio 2,909, exactement celui du fichier. */
#options-panel .opt-logo {
  display: block;
  text-align: center;
  margin: 0 0 8px;
}
#options-panel .opt-logo-img {
  display: inline-block;
  width: 240px;
  max-width: 60%;
  height: auto;
  aspect-ratio: 1280 / 440;
  object-fit: contain;
  filter: none;                                  /* l'ombre portée était calée sur le fond prune */
}
@media (max-width: 560px) { #options-panel .opt-logo-img { width: 170px; } }

/* ============================ 3. EN-TÊTE + ONGLETS ============================ */
/* Titre et accroche : encre gris-chaud, sans halo (les ombres de texte étaient là pour tenir
   sur le prune ; sur le sable elles ne font que salir). */
#options-panel h2 {
  color: var(--pg-ink) !important;
  text-shadow: none !important;
  font-weight: 700;
  margin-bottom: 4px;
}
#options-panel .opt-lead {
  color: var(--pg-ink-soft) !important;
  text-shadow: none !important;
  font-weight: 500;
  max-width: 62ch;
  margin: 0 auto 12px;
  line-height: 1.45;
}
#options-panel #opt-tabs { margin-bottom: 14px; }
/* Onglets : pilules blanches ; le courant se remplit d'abricot (SÉLECTION). */
#options-panel #opt-tabs .opt-tab {
  background: #ffffff !important;
  border: 1px solid var(--pg-border) !important;
  color: var(--pg-muted) !important;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#options-panel #opt-tabs .opt-tab:hover {
  transform: none;
  border-color: var(--pg-border-strong) !important;
  color: var(--pg-ink) !important;
}
#options-panel #opt-tabs .opt-tab.selected,
#options-panel #opt-tabs .opt-tab.is-active {
  background: var(--pg-cta-gold) !important;
  border-color: rgba(147, 88, 47, 0.28) !important;
  color: var(--pg-cta-gold-ink) !important;
  box-shadow: none !important;
}

/* ============================ 4. CARTES (mises en COLONNES) ============================ */
/* Une GRILLE impose une hauteur de RANGÉE commune : « Audio » (2 curseurs) occupait autant que
   « Affichage » (4 cases + une liste + une note), et la rangée suivante ne commençait qu'après
   la plus haute — d'où les grands cadres vides. On passe en COLONNES : chaque carte garde sa
   hauteur et elles se tassent. Même nombre de colonnes qu'avant (4 max, 248 px mini → 1 colonne
   sur téléphone). L'ordre de LECTURE devient colonne par colonne (comme un panneau de réglages
   système) ; l'ordre DOM — donc la tabulation clavier — est inchangé. */
#options-panel #options-grid {
  display: block;
  columns: 4 248px;
  column-gap: 18px;
}
#options-panel #options-grid > .opt-card {
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
/* NIVEAU 1 : ivoire (via --pg-card-bg) sur la feuille sable, trait fin, ombre basse. */
#options-panel .opt-card {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
  border-radius: var(--pg-radius-sm) !important;
  box-shadow: var(--pg-shadow-card) !important;
  padding: 15px 17px;
}
/* Titre de carte : 700 (l'original montait à 900) + filet de séparation. */
#options-panel .opt-card h4 {
  color: var(--pg-ink) !important;
  font-size: 12.5px;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-shadow: none !important;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--pg-border);
}
/* Pastille d'icône : abricot doux en aplat, encre cuivrée (l'original est un dégradé doré). */
#options-panel .opt-ic {
  background: rgba(240, 201, 162, 0.55) !important;
  border: 1px solid rgba(147, 88, 47, 0.22) !important;
  color: var(--pg-gold-deep) !important;
  text-shadow: none !important;
}
#options-panel .opt-note + .opt-note { margin-top: 8px; }

/* ============================ 5. CURSEURS ============================ */
/* Rail sauge → abricot (ACTIF vers SÉLECTION), pastille blanche cerclée de sauge. */
#options-panel .opt-card label input[type="range"] {
  background: linear-gradient(90deg, var(--pg-sage), var(--pg-gold)) !important;
  border: 1px solid var(--pg-border) !important;
  box-shadow: none !important;
  height: 8px;
  border-radius: 999px;
}
#options-panel .opt-card label input[type="range"]::-webkit-slider-thumb {
  width: 20px; height: 20px;
  background: #ffffff;
  border: 2px solid var(--pg-sage-deep);
  box-shadow: 0 1px 3px rgba(64, 50, 36, 0.22);
}
#options-panel .opt-card label input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: #ffffff;
  border: 2px solid var(--pg-sage-deep);
  box-shadow: 0 1px 3px rgba(64, 50, 36, 0.22);
}
#options-panel .opt-card label input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(63, 107, 82, 0.28);
}

/* ============================ 6. CASES À COCHER + INTERRUPTEUR ============================ */
/* Alignement sur la PREMIÈRE ligne : sur un libellé de 2-3 lignes (« Désactiver
   l'enregistrement vidéo… »), la case se centrait au milieu du paragraphe. */
#options-panel .opt-card label.chk {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
  padding: 3px 0;
}
#options-panel .opt-card label.chk input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 21px; height: 21px;
  background: #ffffff !important;
  border: 2px solid var(--pg-border-strong) !important;
  border-radius: 6px;
}
#options-panel .opt-card label.chk input[type="checkbox"]:hover {
  border-color: var(--pg-sage-deep) !important;
}
/* Cochée = ACTIF → sauge pleine, coche en sauge foncée (l'original : dégradé vert→or). */
#options-panel .opt-card label.chk input[type="checkbox"]:checked {
  background: var(--pg-sage) !important;
  border-color: var(--pg-sage-deep) !important;
}
#options-panel .opt-card label.chk input[type="checkbox"]:checked::after {
  border-color: var(--pg-sage-deep) !important;
}
#options-panel .opt-card label.chk input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--pg-gold-deep) !important; outline-offset: 2px;
}
/* Rangée « Mode radio » : carte BLANCHE (niveau 2) posée sur la carte ivoire. */
#options-panel .opt-radio-row {
  background: #ffffff !important;
  border: 1px solid var(--pg-border) !important;
  border-radius: var(--pg-radius-sm) !important;
  box-shadow: none !important;
  padding: 10px 12px;
}
/* Interrupteur : gris au repos, SAUGE une fois activé, bouton blanc. */
#options-panel .opt-switch {
  background: var(--op-off) !important;
  border: 1px solid var(--pg-border-strong) !important;
  box-shadow: none !important;
}
#options-panel .opt-switch::after {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(64, 50, 36, 0.28);
}
#options-panel .opt-switch:checked {
  background: var(--pg-sage) !important;
  border-color: var(--pg-sage-deep) !important;
}
#options-panel .opt-switch:focus-visible { outline: 2px solid var(--pg-gold-deep) !important; outline-offset: 2px; }

/* ============================ 7. LISTES DÉROULANTES ============================ */
/* UN seul gabarit pour TOUS les `select` du panneau — y compris celui de la LANGUE, injecté par
   js/i18n.js DIRECTEMENT dans la carte (hors `label`, donc hors de portée de la règle
   `.opt-card label select` des couches précédentes) avec son propre <style> en tête de
   document : sa règle `#i18n-opt select` a la spécificité d'un id, d'où le `!important` ici.
   Sans ça, le panneau affichait une liste native blanche à côté d'une liste stylée. */
#options-panel select,
#options-panel .opt-card select,
#options-panel .opt-card label select,
#options-panel #i18n-opt select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  max-width: 100% !important;
  padding: 9px 30px 9px 12px !important;
  border-radius: var(--pg-radius-sm) !important;
  border: 1px solid var(--pg-border-strong) !important;
  background-color: var(--pg-field) !important;
  color: var(--pg-ink) !important;
  font: 600 13px/1 system-ui, 'Segoe UI', sans-serif !important;
  box-shadow: none !important;
  cursor: pointer;
  /* chevron dessiné (jamais la flèche native) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b645d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* La liste de langue est seule sur sa ligne → pleine largeur ; celles posées dans un `label`
   gardent la moitié droite, en face de leur libellé. */
#options-panel #i18n-opt select { width: 100% !important; margin-top: 4px; }
#options-panel .opt-card label select { max-width: 58% !important; }
#options-panel select:hover { border-color: var(--pg-gold-deep) !important; }
#options-panel select:focus {
  outline: none;
  border-color: var(--pg-gold-deep) !important;
  box-shadow: 0 0 0 2px rgba(147, 88, 47, 0.22) !important;
}
#options-panel select option { background: #ffffff; color: var(--pg-ink); }

/* ============================ 8. SÉLECTEUR DE PISTE ============================ */
#options-panel .opt-track-toggle {
  background: var(--pg-field) !important;
  border: 1px solid var(--pg-border-strong) !important;
  color: var(--pg-ink) !important;
  border-radius: var(--pg-radius-sm) !important;
}
#options-panel .opt-track-toggle:hover,
#options-panel .opt-track-toggle[aria-expanded="true"] {
  border-color: var(--pg-gold-deep) !important;
  box-shadow: none !important;
}
#options-panel .opt-track-toggle-cur { color: var(--pg-gold-deep) !important; font-weight: 700 !important; }
/* Le popup est une FEUILLE posée au-dessus : blanc + ombre franche (il doit se détacher). */
#options-panel .opt-track-pop {
  background: #ffffff !important;
  border: 1px solid var(--pg-border-strong) !important;
  border-radius: var(--pg-radius) !important;
  box-shadow: var(--pg-shadow-sheet) !important;
  scrollbar-color: rgba(60, 55, 51, 0.28) transparent;
}
#options-panel .opt-track-pop::-webkit-scrollbar-thumb { background: rgba(60, 55, 51, 0.22); border-radius: 999px; }
#options-panel .opt-track {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
  border-radius: var(--pg-radius-sm) !important;
}
#options-panel .opt-track:hover { border-color: var(--pg-border-strong) !important; }
/* Piste choisie = SÉLECTION → abricot (l'original : dégradé jaune vif). */
#options-panel .opt-track.selected {
  background: #fdf3e9 !important;
  border-color: rgba(147, 88, 47, 0.55) !important;
}
/* « Écouter » = action douce → sauge ; « Arrêter » = rose fané. */
#options-panel .opt-track-listen {
  background: var(--pg-sage) !important;
  border: 1px solid rgba(63, 107, 82, 0.28) !important;
  color: var(--pg-sage-deep) !important;
  font-weight: 700;
}
#options-panel .opt-track-listen:hover {
  background: #aed0b7 !important;
  border-color: var(--pg-sage-deep) !important;
  color: var(--pg-sage-deep) !important;
}
#options-panel .opt-track-listen.is-playing {
  background: #f0d3ce !important;
  border-color: rgba(160, 85, 77, 0.55) !important;
  color: var(--pg-danger) !important;
}

/* ============================ 9. BOUTONS ============================ */
/* Gabarit unique : pleine largeur de carte, même hauteur, même graisse, même rayon.
   Concerne « Installer l'application », « Ouvrir le formulaire de contact »,
   « Personnaliser la position des joysticks » et la bascule « Mode streamer ». */
#options-panel .opt-card .btn-secondary,
#options-panel .opt-card .opt-btn,
#options-panel .opt-card .dov-str-toggle {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px !important;
  margin-top: 10px;
  border-radius: 11px !important;
  font: 700 13px/1.25 system-ui, 'Segoe UI', sans-serif !important;
  text-align: center;
  text-shadow: none !important;
  cursor: pointer;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .15s ease, border-color .15s ease;
}
/* Action principale d'une carte : aplat abricot (c'est ce qu'on vient y faire). */
#options-panel .opt-card .btn-secondary,
#options-panel .opt-card .opt-btn {
  background: var(--pg-cta-gold) !important;
  border: 1px solid rgba(147, 88, 47, 0.28) !important;
  color: var(--pg-cta-gold-ink) !important;
  box-shadow: none !important;
}
#options-panel .opt-card .btn-secondary:hover,
#options-panel .opt-card .opt-btn:hover {
  transform: none !important;
  background: #e0a771 !important;
  border-color: rgba(147, 88, 47, 0.45) !important;
  color: var(--pg-cta-gold-ink) !important;
  box-shadow: none !important;
}
#options-panel .opt-card .btn-secondary:active { transform: none !important; }
/* Mode streamer : garde son ROUGE (code couleur, avec la pastille qui pulse à l'activation)
   mais en version pastel, et adopte la géométrie commune. */
#options-panel .opt-card .dov-str-toggle {
  margin-top: 4px;
  background: #f3ded9 !important;
  border: 1px solid rgba(160, 85, 77, 0.45) !important;
  color: #7d3a33 !important;
}
#options-panel .opt-card .dov-str-toggle.on {
  background: #eccbc4 !important;
  border-color: rgba(160, 85, 77, 0.75) !important;
  color: #6a2c26 !important;
}
#options-panel .opt-card .dov-str-toggle .dsr-dot { background: #c8524a; }
/* Panneau streamer déplié (lien spectateur, bots) : mêmes surfaces claires. */
#options-panel .dov-str-panel {
  background: #ffffff !important;
  border: 1px solid var(--pg-border-strong) !important;
  border-radius: var(--pg-radius-sm) !important;
}
#options-panel .dov-str-panel .dsr-hint { color: var(--pg-ink-soft) !important; }
#options-panel .dov-str-panel .dsr-hint b,
#options-panel .dov-str-panel .dsr-botv,
#options-panel .dov-str-panel .dsr-regen { color: var(--pg-gold-deep) !important; }
#options-panel .dov-str-panel .dsr-link {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
  color: var(--pg-ink) !important;
}
#options-panel .dov-str-panel .dsr-copy {
  background: var(--pg-cta-gold) !important;
  border: 1px solid rgba(147, 88, 47, 0.28) !important;
  color: var(--pg-cta-gold-ink) !important;
}
#options-panel .dov-str-panel .dsr-tog,
#options-panel .dov-str-panel .dsr-note { color: var(--pg-muted) !important; }
#options-panel .dov-str-panel .dsr-note b { color: var(--pg-ink-soft) !important; }
#options-panel .dov-str-panel .dsr-tog input,
#options-panel .dov-str-panel .dsr-botrow input[type=range] { accent-color: var(--pg-sage-deep); }

/* ============================ 10. PIED + ACCÈS DÉVELOPPEUR ============================ */
#options-panel #dev-access { margin-top: 18px; }
#options-panel .dev-toggle {
  background: transparent;
  border: 1px solid var(--pg-border) !important;
  color: var(--pg-muted) !important;
  opacity: 1;
}
#options-panel .dev-toggle:hover { border-color: var(--pg-border-strong) !important; color: var(--pg-ink) !important; }
#options-panel .dev-toggle.is-on { border-color: var(--pg-gold-deep) !important; color: var(--pg-gold-deep) !important; }
#options-panel .dev-pass-ok {
  background: var(--pg-sage) !important;
  border: 1px solid rgba(63, 107, 82, 0.28) !important;
  color: var(--pg-sage-deep) !important;
}
#options-panel .dev-pass-ok:hover { background: #aed0b7 !important; color: var(--pg-sage-deep) !important; }
#options-panel #opt-version { color: var(--pg-muted); opacity: 0.75 !important; }