/* ───────────────────────────────────────────────────────────────────────────
   Librairie Speyy, zone « reglages » (lot « tout de la maquette », 22/10/2026).

   Ce fichier porte les éléments propres aux réglages (maquette 06) : sous-menu, sections Compte, Apparence, Crédits,
   Notifications. Depuis le 23/10/2026 (mission N3), ils vivent dans la FENÊTRE de 3.13.4, plus dans une page.

   Règles de la librairie (`v3/docs/LIBRAIRIE-SPEYY.md`) : AUCUNE valeur ici. Une
   couleur, une police, un rayon ou une ombre se lit dans un jeton (`var(--sp-…)`).
   Une valeur vraiment nouvelle va dans le thème (`themes/`). Chargé après
   `elements.css`, sur toutes les pages, par `bridge.speyy_ui_head`.
   ─────────────────────────────────────────────────────────────────────────── */

/* Jetons d'élément à remonter dans la librairie (M5) : définis par renvoi, jamais par une valeur.
   Les aperçus montrent le menu et la page de CHAQUE apparence, quel que soit le mode courant
   (maquette 06, `speyy.js::previews`) : rôles `--sp-day-*` / `--sp-night-*` (M6). */
:root {
  --sp-themepick-day-side: var(--sp-day-sidebar);
  --sp-themepick-day-bg: var(--sp-day-bg);
  --sp-themepick-night-side: var(--sp-night-sidebar);
  --sp-themepick-night-bg: var(--sp-night-bg);
  --sp-themepick-radius: var(--sp-radius-md);
  --sp-themepick-preview-radius: var(--sp-radius-sm);
  --sp-meter-track: var(--sp-surface-soft);
  --sp-meter-fill: var(--sp-ok);
  --sp-subnav-radius: var(--sp-nav-radius);
  --sp-subnav-hover: var(--sp-hover);
  --sp-subnav-active: var(--sp-active);
  --sp-settings-body-bg: var(--sp-bg);
}

/* ── La fenêtre (3.13.4) : `#settings-overlay` posée sur l'écran courant ─────────
   Maxime, 23/10/2026 : « pour les réglages, j'aimais beaucoup dans la popup comme c'était avant, remets comme ça ».
   Voile, taille, croix, rayon et plein écran sur téléphone restent ceux d'`access-chat.css` (jetons `--sp-dialog-*`).
   Cette zone ne dessine que le CONTENU de la maquette 06 dans la fenêtre : le corps sur le fond de page, des cartes
   blanches, le sous-menu discret. Les sélecteurs portent deux classes de plus que ceux d'`access-chat.css`, chargé
   APRÈS cette zone : ce sont eux qui gagnent. */
.settings-overlay .settings-modal .settings-body { background: var(--sp-settings-body-bg); }

/* ── Sous-menu (maquette 06 : `.s-subnav`) ──────────────────────────────────── */
.settings-overlay .settings-modal .settings-nav-item {
  height: 34px; padding: 0 10px; gap: 10px; border: 0; border-radius: var(--sp-subnav-radius);
  background: transparent; box-shadow: var(--sp-shadow-none);
  font: 400 13.5px var(--sp-font-sans); color: var(--sp-text);
}
.settings-overlay .settings-modal .settings-nav-item:hover { background: var(--sp-subnav-hover); }
.settings-overlay .settings-modal .settings-nav-item.is-active { background: var(--sp-subnav-active); font-weight: 500; }
.settings-overlay .settings-modal .settings-nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: 1; color: var(--sp-text-soft); }
.settings-overlay .settings-modal .settings-logout-button { height: 34px; padding: 0 10px; border-radius: var(--sp-subnav-radius); font: 400 13.5px var(--sp-font-sans); }

/* ── Le contenu : des cartes ────────────────────────────────────────────────── */
/* Profil : titre et phrase sur le fond, chaque section est une carte, le panneau défile. Les autres panneaux gardent
   leur dessin de 3.13.4, posé sur le même fond (leurs cartes sont blanches) : une carte englobante passait sous la croix. */
.settings-overlay .settings-modal #panel-profile.is-active { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 32px; }
.settings-overlay .settings-modal .connectors-sticky-header { background: var(--sp-settings-body-bg); }
.settings-overlay .settings-modal #panel-profile > .settings-panel-title,
.settings-overlay .settings-modal #panel-profile > .settings-panel-subtitle { margin-bottom: 0; }
.settings-overlay .settings-modal #panel-profile > .settings-panel-subtitle { margin-top: -12px; }
.settings-overlay .settings-modal .settings-panel:not(#panel-profile) .settings-panel-title { font: 500 20px/1.25 var(--sp-title-font); }

.settings-overlay .settings-modal #panel-profile > .settings-section {
  flex: none; margin: 0; padding: 18px 20px; background: var(--sp-card-bg); border: 1px solid var(--sp-card-line);
  border-radius: var(--sp-card-radius); box-shadow: var(--sp-card-shadow);
}
.settings-overlay .settings-modal .settings-section-label { margin: 0 0 6px; }
.settings-overlay .settings-modal .settings-section-hint { margin: 0 0 12px; font-size: 13px; color: var(--sp-text-soft); line-height: 1.45; }

/* Lignes de réglage (maquette 06 : `.m-setting`, filets tiretés). */
.settings-overlay .settings-modal .settings-field { padding: 12px 0; border-bottom: 1px dashed var(--sp-line); }
.settings-overlay .settings-modal .settings-field:last-child { border-bottom: 0; padding-bottom: 2px; }
.settings-overlay .settings-modal .settings-field-label { font-size: 14px; font-weight: 500; color: var(--sp-text); }
.settings-overlay .settings-modal .settings-field-hint { font-size: 12.5px; color: var(--sp-text-soft); }

/* Compte : la personne (avatar rond, nom, adresse · rôle), comme la première ligne de la maquette. Le bloc devenu
   transparent garde son rayon de 3.13.4 : invisible, mais rien ne devient plus carré (D7, sonde des formes). */
.settings-overlay .settings-modal .settings-avatar-section {
  margin: 0; padding: 10px 0 12px; gap: 12px; background: transparent; border: 0;
  border-bottom: 1px dashed var(--sp-line);
}
.settings-overlay .settings-modal .settings-avatar-large { width: 40px; height: 40px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.settings-overlay .settings-modal .settings-avatar-name { font-size: 14px; font-weight: 500; }
.settings-overlay .settings-modal .settings-avatar-role { font-size: 12.5px; color: var(--sp-text-soft); overflow-wrap: anywhere; }
.settings-overlay .settings-modal .settings-avatar-sep:has(+ #user-chip-meta:empty) { display: none; }

/* Apparence : trois aperçus (maquette 06 : `.s-themepick`). */
.settings-themepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.settings-themepick-option {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--sp-line); border-radius: var(--sp-themepick-radius); background: var(--sp-card-bg);
  color: var(--sp-text); font: 13px var(--sp-font-sans);
}
.settings-themepick-option:hover { background: var(--sp-hover); }
.settings-themepick-option:focus-visible { outline: none; box-shadow: var(--sp-btn-focus); }
.settings-themepick-option[aria-checked="true"] { border-color: var(--sp-box-selected-line); box-shadow: var(--sp-box-selected-shadow); }
.settings-themepick-preview {
  height: 54px; display: grid; grid-template-columns: 30% 1fr; overflow: hidden;
  border: 1px solid var(--sp-line); border-radius: var(--sp-themepick-preview-radius);
}
.settings-themepick-preview.is-day i:first-child { background: var(--sp-themepick-day-side); }
.settings-themepick-preview.is-day i:last-child { background: var(--sp-themepick-day-bg); }
.settings-themepick-preview.is-night i:first-child { background: var(--sp-themepick-night-side); }
.settings-themepick-preview.is-night i:last-child { background: var(--sp-themepick-night-bg); }
.settings-themepick-preview.is-auto { grid-template-columns: 1fr 1fr; }
.settings-themepick-preview.is-auto i:first-child { background: var(--sp-themepick-day-bg); }
.settings-themepick-preview.is-auto i:last-child { background: var(--sp-themepick-night-bg); }
.settings-themepick-label { display: flex; align-items: center; gap: 6px; }
.settings-themepick-label svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* Crédits : le chiffre, l'utilisé et la recharge, la jauge (maquette 06 : `.m-kpi-value`, `MUI.meter`). */
.settings-overlay .settings-modal .quota-card { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: var(--sp-shadow-none); }
.settings-overlay .settings-modal .quota-card-top { align-items: flex-start; }
.settings-overlay .settings-modal .quota-card-kicker {
  margin: 0 0 6px; font: 500 12px var(--sp-label-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-text-faint);
}
.settings-overlay .settings-modal .quota-intro { margin: 0; font-size: 13px; color: var(--sp-text-soft); }
.settings-overlay .settings-modal .quota-refresh { border-radius: var(--sp-btn-radius); font-weight: 500; }
.settings-overlay .settings-modal .quota-figures { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }
.settings-overlay .settings-modal .quota-percent { font: 400 28px/1.1 var(--sp-title-font); letter-spacing: 0; }
.settings-overlay .settings-modal .quota-used { font-size: 12.5px; font-weight: 400; color: var(--sp-text-soft); }
.settings-overlay .settings-modal .quota-progress { height: 6px; margin: 0; background: var(--sp-meter-track); }
.settings-overlay .settings-modal .quota-progress-bar { background: var(--sp-meter-fill); }
.settings-overlay .settings-modal .quota-note:empty { display: none; }

/* ── Téléphone : la fenêtre prend tout l'écran (`access-chat.css`), le sous-menu devient une rangée qui défile
   (maquette 06, `.s-subnav` mobile). La rangée s'arrête avant la croix (34 px à 10 px du bord) : aucun onglet ne
   passe dessous. ── */
@media (max-width: 720px) {
  .settings-overlay .settings-modal .settings-tabs {
    gap: 4px; margin-right: 50px; padding: 9px 0 9px 12px; background: var(--sp-settings-body-bg); border-bottom: 0;
  }
  .settings-overlay .settings-modal .settings-tab {
    flex-direction: row; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--sp-subnav-radius);
    background: transparent; box-shadow: var(--sp-shadow-none); font: 400 14px var(--sp-font-sans); color: var(--sp-text);
  }
  .settings-overlay .settings-modal .settings-tab.is-active { background: var(--sp-subnav-active); font-weight: 500; }
  .settings-overlay .settings-modal .settings-tab svg { width: 16px; height: 16px; opacity: 1; color: var(--sp-text-soft); }
  .settings-overlay .settings-modal #panel-profile.is-active { padding: 18px 14px 28px; }
  .settings-overlay .settings-modal #panel-profile > .settings-section { padding: 16px; }
  .settings-overlay .settings-modal .settings-field { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 520px) {
  .settings-themepick { grid-template-columns: minmax(0, 1fr); }
}