/* ==========================================================================
   FunKey · Fenêtre de réglages — habillage Groove Machine
   Dépend de funkey.css (variables, polices). Tout est en rem : la fenêtre
   suit la taille de texte choisie (variable --fk-texte).
   ========================================================================== */

.reglages {
  width: min(62rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fk-creme);
  overflow: visible;
}

.reglages::backdrop { background: rgba(21, 9, 4, 0.8); }

.reglages[open] { animation: reglages-pop 0.32s var(--fk-rebond); }

@keyframes reglages-pop {
  from { opacity: 0; transform: translateY(2rem) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.reglages-cadre {
  max-height: calc(100vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.3rem 1.6rem 1.5rem;
  border: var(--fk-contour) solid var(--fk-creme);
  border-radius: var(--fk-rayon);
  background: var(--fk-caramel);
  box-shadow: 8px 8px 0 var(--fk-orange);
  font-family: var(--fk-jeu-texte);
  font-size: calc(1rem * var(--fk-texte, 1));
  line-height: 1.35;
}

.reglages-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reglages-titre {
  margin: 0;
  font-family: var(--fk-titre);
  font-size: 2.2em;
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 3px 3px 0 var(--fk-orange);
}
.reglages-intro { margin: 0.2rem 0 0.4rem; color: var(--fk-sable); }

.reglages-fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 3px solid var(--fk-creme);
  border-radius: 50%;
  background: var(--fk-chocolat);
  color: var(--fk-creme);
  font: inherit;
  cursor: pointer;
}
.reglages-fermer:hover { background: var(--fk-orange); color: var(--fk-expresso); }

/* deux colonnes : le son et l'affichage à gauche, la projection et l'établissement à droite */
.reglages-grille { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2rem; align-items: start; }
.colonne { min-width: 0; }

/* un bloc par famille de réglages */
.bloc {
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  border: 0;
  border-top: 3px dashed var(--fk-sable);
}
.bloc > legend {
  padding: 0 0.6rem 0 0;
  font-family: var(--fk-titre);
  font-size: 1.45em;
  line-height: 1.1;
  color: var(--fk-creme);
  text-shadow: 2px 2px 0 var(--fk-turquoise);
}

.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0.55rem 0; }
.ligne > span:first-child,
.ligne > label:first-child { flex: none; min-width: 6.5em; color: var(--fk-sable); }
.ligne output { flex: none; min-width: 3.4em; text-align: right; }
.ligne-case { flex-wrap: nowrap; align-items: flex-start; cursor: pointer; }
.ligne-case > span:last-child { flex: 1; min-width: 0; color: var(--fk-creme); }
.ligne-case input[type="checkbox"] { margin-top: 0.1em; }

.reglages input[type="range"] { flex: 1; min-width: 0; accent-color: var(--fk-orange); height: 2rem; }
.reglages input[type="checkbox"] { flex: none; width: 1.4em; height: 1.4em; accent-color: var(--fk-orange); }

.aide { margin: 0.3rem 0 0; color: var(--fk-sable); font-size: 0.92em; }
.message { min-height: 1.3em; margin: 0.4rem 0 0; color: var(--fk-moutarde); font-size: 0.92em; }

/* choix à plusieurs pastilles (boutons radio habillés) */
.segments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.segment { position: relative; cursor: pointer; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment > span {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 3px solid var(--fk-sable);
  border-radius: 999px;
  background: transparent;
  color: var(--fk-creme);
  transition: transform 0.2s var(--fk-rebond), background-color 0.15s;
}
.segment:hover > span { transform: scale(1.04); }
/* choisi : couleur + coche (l'info ne repose pas sur la couleur seule) */
.segment input:checked + span {
  border-color: var(--fk-creme);
  background: var(--fk-orange);
  color: var(--fk-expresso);
}
.segment input:checked + span::before { content: "✓ "; }
.segment input:focus-visible + span { outline: var(--fk-contour) solid var(--fk-creme); outline-offset: 3px; }

/* boutons et champs */
.bouton {
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.55em 1.2em;
  border: 3px solid var(--fk-creme);
  border-radius: 999px;
  background: var(--fk-turquoise);
  color: var(--fk-expresso);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s var(--fk-rebond), background-color 0.15s;
}
.bouton:hover:not(:disabled) { background: #5FD3C8; transform: scale(1.04); }
.bouton:disabled { opacity: 0.35; cursor: not-allowed; }
.bouton-discret { background: transparent; border: 3px dashed var(--fk-sable); color: var(--fk-creme); }
.bouton-discret:hover:not(:disabled) { background: var(--fk-chocolat); }
.bouton-principal { background: var(--fk-orange); }
.bouton-principal:hover:not(:disabled) { background: #F2915F; }
.bouton[data-confirme="oui"] { background: var(--fk-erreur); border-style: solid; color: var(--fk-expresso); }

.reglages :is(button, input, select):focus-visible { outline: var(--fk-contour) solid var(--fk-creme); outline-offset: 3px; }

.champ {
  flex: 1 1 11em;
  min-width: 0;
  padding: 0.55em 0.9em;
  border: 3px solid var(--fk-sable);
  border-radius: 14px;
  background: var(--fk-expresso);
  color: var(--fk-creme);
  font: inherit;
}
.champ:focus { outline: none; border-color: var(--fk-turquoise); box-shadow: 0 0 0 4px rgba(43, 179, 167, 0.35); }

.etat-projection { font-weight: 400; color: var(--fk-creme); }

.apercu-logo {
  flex: none;
  width: 9em;
  height: 4.5em;
  object-fit: contain;
  border: 3px dashed var(--fk-sable);
  border-radius: 12px;
  background: var(--fk-expresso);
}
.apercu-vide {
  flex: none;
  display: grid;
  place-items: center;
  width: 9em;
  height: 4.5em;
  border: 3px dashed var(--fk-sable);
  border-radius: 12px;
  color: var(--fk-sable);
  font-size: 0.85em;
  text-align: center;
}
.apercu-logo:not([hidden]) + .apercu-vide { display: none; }

.reglages-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 3px dashed var(--fk-sable);
}
.reglages-pied .bouton { margin: 0; }

@media (max-width: 860px) {
  .reglages-grille { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ligne { flex-wrap: wrap; }
  .ligne > span:first-child { min-width: 0; width: 100%; }
}