/* settings-modal.css — Modal paramètres joueur + bouton ⚙ qui l'ouvre */

/* ── Bouton ⚙ dans .darkmode-toggle (profil, accueil, 6 modes) ──────────────
   Déplacé ici depuis profile-page.css quand le bouton est arrivé sur les pages
   de jeu (retour joueur 2.2 : « pas de bouton Settings sur la page de mode »),
   pour que les 7 pages partagent une seule règle. */
.dm-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.settings-btn {
  min-height: 0; /* neutralise la taille tactile globale (global.css §18) qui l'étirait en ovale */
  background: none;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition:
    color 0.15s,
    transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.settings-btn:hover {
  color: #fff;
  transform: rotate(30deg);
}

#settingsModal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#settingsModal.sm--visible {
  opacity: 1;
  pointer-events: auto;
}

.sm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.sm-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  /* Pas de padding bas : c'est `.sm-footer` qui le porte. Un élément collant est
     borné par son bloc conteneur — la content box du panneau —, donc tant que le
     panneau gardait ses 26 px, le pied s'arrêtait 27 px au-dessus du bord et le
     contenu défilait visiblement dans cette bande. */
  padding: 30px 32px 0;
  /* 420 px pour son, animations, musique, données ET zone de danger : c'était
     serré (retour Hamza du 2026-09-16). */
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sm-title {
  font-family: "Oswald", "Arial Black", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  margin: 0;
}

.sm-close {
  min-height: 0; /* neutralise la taille tactile globale (global.css §18) qui l'étirait en ovale */
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #888;
  line-height: 1;
  padding: 6px;
  border-radius: 50%;
  transition:
    color 0.15s,
    background 0.15s;
}
.sm-close:hover {
  color: #e63946;
  background: rgba(230, 57, 70, 0.1);
}

.sm-section-title {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #aaa;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.sm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.sm-row:last-child {
  border-bottom: none;
}

.sm-label {
  font-size: 0.88rem;
  color: #1a1a1a;
  line-height: 1.4;
}

/* Toggle switch (réutilise le style global .switch) */
.sm-toggle {
  flex-shrink: 0;
}

/* Volume slider */
.sm-volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sm-volume-row input[type="range"] {
  flex: 1;
  accent-color: #e63946;
  cursor: pointer;
  min-width: 80px;
}

.sm-volume-val {
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text-muted, #888);
  min-width: 28px;
  text-align: right;
}

/* Bouton save */
/* ── Pied collant ──────────────────────────────────────────
   `.sm-panel` défile (max-height: 88vh; overflow-y: auto) et « Sauvegarder » en
   était le dernier enfant : il fallait aller le chercher tout en bas. Sur la page
   profil c'était systématique, parce que la zone de danger n'est montée que là
   (window._personadleDanger) et rallonge le panneau d'autant — d'où un bug qui ne
   se voyait pas depuis l'accueil (signalé par Gypotre).

   Les marges latérales négatives annulent le padding du panneau pour que le pied
   couvre toute la largeur du scrollport : sans elles, le contenu défilerait
   visiblement de chaque côté du bouton. Elles suivent donc `.sm-panel` — y
   compris dans la requête média à 480 px.

   Le padding BAS, lui, a été déplacé du panneau vers le pied : un élément collant
   est borné par son bloc conteneur, donc tant que le panneau gardait son
   `padding-bottom`, le pied s'arrêtait 27 px au-dessus du bord (mesuré). Une
   marge négative n'y change rien — la contrainte est le bloc conteneur, pas la
   marge. Les coins arrondis du bas restent découpés par l'overflow du panneau. */
.sm-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -32px;
  padding: 14px 32px 18px;
  background: #fff;
  border-top: 1px solid #ededed;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sm-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  background: #e63946;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(230, 57, 70, 0.25);
  margin-top: 4px;
}
.sm-save:hover {
  background: #c1121f;
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
}
.sm-save:active {
  transform: scale(0.98);
}
.sm-save:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.sm-save-status {
  font-size: 0.78rem;
  color: #22c55e;
  text-align: center;
  min-height: 18px;
}
/* `_save()` pose et retire la classe `hidden` sur cet indicateur depuis toujours,
   mais aucune règle ne la définissait : ni ici, ni dans global.css à l'époque.
   L'indicateur était donc toujours dans le flux — 18 px de vide sous le bouton en
   permanence, et une assertion « il est visible » qui ne prouvait rien. Dans un
   pied collant cette bande coûte de la hauteur utile à chaque ouverture.

   MàJ 2026-09-27 : global.css §0 couvre désormais `[hidden], .hidden` pour tout le
   site — deux bugs de plus venaient du même manque. Règle gardée, redondante mais
   plus précise. */
.sm-save-status.hidden {
  display: none;
}

/* Dark mode — couverture complète */
.darkmode .sm-panel {
  background: #1e1e1e;
  border-color: #2e2e2e;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.darkmode .sm-title {
  color: #f0f0f0;
}
.darkmode .sm-label {
  color: #e0e0e0;
}
.darkmode .sm-section-title {
  color: #666;
  border-bottom-color: #2e2e2e;
}
.darkmode .sm-row {
  border-bottom-color: #2e2e2e;
}
.darkmode .sm-volume-val {
  color: #aaa;
}
.darkmode .sm-close {
  color: #666;
}
.darkmode .sm-close:hover {
  color: #f87171;
  background: rgba(230, 57, 70, 0.15);
}
.darkmode .sm-save-status {
  color: #4ade80;
}
/* Le pied est opaque par nature : sans fond, le contenu défilerait derrière le
   bouton. Il doit donc suivre le fond de `.sm-panel` dans les deux thèmes. */
.darkmode .sm-footer {
  background: #1e1e1e;
  border-top-color: #2e2e2e;
}

/* ── Style selector (Calling Card / P4 TV) ─────────────── */
.sm-style-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
.sm-label-sub {
  font-size: 0.8rem;
  color: #888;
}
.sm-style-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sm-style-btn {
  border: 2px solid #d1d5db;
  border-radius: 10px;
  background: none;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: #555;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.sm-style-btn:hover {
  border-color: #888;
  color: #222;
}
.sm-style-btn--active {
  border-color: #e63946;
  background: #e63946;
  color: #fff;
}
.darkmode .sm-style-btn {
  border-color: #444;
  color: #ccc;
}
.darkmode .sm-style-btn:hover {
  border-color: #888;
  color: #fff;
}
.darkmode .sm-style-btn--active {
  border-color: #e63946;
  background: #e63946;
  color: #fff;
}
.darkmode .sm-label-sub {
  color: #666;
}

/* Mobile */
@media (max-width: 480px) {
  .sm-panel {
    padding: 22px 18px 0;
    gap: 14px;
  }
  /* Les marges latérales du pied annulent le padding de `.sm-panel` : elles
     doivent le suivre ici aussi, sinon le pied déborde du panneau. Et comme en
     desktop, c'est le pied qui porte le padding bas. */
  .sm-footer {
    margin: 0 -18px;
    padding: 12px 18px 16px;
  }
  .sm-title {
    font-size: 1rem;
  }
  .sm-label {
    font-size: 0.83rem;
  }
}

/* ── Identité Persona 5 ─────────────────────────────────────── */
.sm-panel {
  border-top: 3px solid var(--color-accent, #e63946) !important;
  /* ⚠️ `overflow: hidden` ici écrasait le `overflow-y: auto` du bloc principal
     — même sélecteur, même spécificité, déclaré plus bas donc gagnant. Le
     panneau ne défilait plus du tout : ni barre, ni molette, ni tactile. Mesuré
     sur une fenêtre de 720 px, profil connecté : 1054 px de contenu pour 690 px
     visibles, soit 364 px inatteignables — « Sauvegarder », mais aussi toute la
     zone de danger (Réinitialiser / Supprimer mon compte), 213 px sous le bord.
     Seul `scrollTop` en JS passait encore, ce qui rendait le défaut invisible à
     tout test qui défilait par script au lieu de la molette.

     Seul l'axe horizontal a besoin d'être coupé : c'est la diagonale décorative
     `::before` (top/right négatifs) qui déborde. `overflow-x: hidden` la clippe
     — verticalement aussi, puisqu'un dépassement au-dessus du bord haut n'est
     de toute façon pas atteignable au défilement. */
  overflow-x: hidden;
}
/* Diagonale décorative P5 en arrière-plan du panel */
.sm-panel::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: var(--color-accent, #e63946);
  opacity: 0.06;
  transform: rotate(45deg);
  pointer-events: none;
}
.sm-title {
  font-family: "Persona5", "Oswald", "Arial Black", Arial, sans-serif !important;
  letter-spacing: 0.04em;
}
/* Dark mode */
body.darkmode .sm-panel {
  background: #1a1025 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-top-color: var(--color-accent, #e63946) !important;
}
body.darkmode .sm-title { color: #e8d8ff !important; }
body.darkmode .sm-section-title { color: #c8b0e8 !important; }
body.darkmode .sm-label { color: #b0a0d0 !important; }

/* ── Section « Données » : export du profil (déplacé de la page profil, 2.2) ── */
.sm-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.sm-data-btn {
  min-height: 0;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 2px solid var(--accent, #e63946);
  background: transparent;
  color: var(--accent, #e63946);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.sm-data-btn:hover {
  background: var(--accent, #e63946);
  color: #fff;
}

/* ── Zone de danger (réinitialisation / suppression de compte, 2.2) ──────────
   Déplacée depuis le bas de la page profil : deux boutons rouges y étaient
   atteignables en un clic, dont un derrière un simple confirm() natif. */
.sm-danger {
  border-top: 1px solid #f0f0f0;
  padding-top: 14px;
}

.sm-danger.hidden {
  display: none;
}

.sm-section-title--danger {
  color: #dc3545;
}

.sm-danger-intro {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #888;
}

.sm-danger-btn {
  min-height: 0;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 2px solid rgba(220, 53, 69, 0.4);
  background: transparent;
  color: #dc3545;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.sm-danger-btn:hover {
  background: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
}

.sm-danger-btn--hard:hover {
  background: #dc3545;
  color: #fff;
}

.darkmode .sm-danger {
  border-top-color: #2e2e2e;
}

.darkmode .sm-danger-intro {
  color: #999;
}