/* quentyx-hora / LES PARAMETRES REFAITS, et LA REGLE DU VOILE, 2026-09-28. Voir parametres.js. */

/* ── LA REGLE DU VOILE (Anthony : « quand il y a un voile derriere, on le garde, mais on ne
   doit plus voir le neomorphisme ») : tout panneau pose sur un voile perd l ombre relief
   (lumiere en haut a gauche, ombre en bas a droite) qui rendait mal sur le flou ; il prend
   un filet fin et une ombre portee douce, vers le bas. Vaut pour tous les voiles. */
:root { --modale-ombre: 0 30px 80px rgba(20, 28, 45, .22), 0 6px 18px rgba(20, 28, 45, .10); }
html[data-theme="relief-sombre"] { --modale-ombre: 0 30px 90px rgba(0, 0, 0, .62), 0 6px 20px rgba(0, 0, 0, .40); }
html .voile > * { box-shadow: var(--modale-ombre) !important; border: 1px solid var(--filet) !important; }
html.sans-transition, html.sans-transition * { transition: none !important; animation-play-state: paused !important; }

/* ── LE PANNEAU, EN PLEINE LARGEUR ──────────────────────────────────────── */
#voileParametres .pupitre { padding: 0; align-items: stretch; overflow: hidden; }
/* `#voileParametres .pupitre > * { max-width: 96ch }` vit dans le <style> d index.html, charge APRES cette
   feuille : a precision egale il gagnait, et le contenu restait bride a 880 px. D ou la regle plus precise. */
#voileParametres .pupitre > *, #voileParametres .pupitre > #corpsParametres { max-width: none; }
#voileParametres .pupitre-tete, #voileParametres .pupitre-pied { display: none; }
#voileParametres #corpsParametres { flex: 1; min-height: 0; display: flex; margin: 0; }
#voileParametres .param-deux { flex: 1; min-width: 0; }
#voileParametres .param-cote button { display: flex; align-items: center; gap: 10px; }
#voileParametres .param-cote button svg { width: 18px; height: 18px; flex: none; opacity: .75; }
#voileParametres .param-cote button[aria-current="true"] { background: var(--voile); box-shadow: none; }
#voileParametres .param-cote button[aria-current="true"] svg { opacity: 1; }
.prm-titre, .prm-qui { display: none; }
#voileParametres .param-vue { padding: 0 16px 28px; }
.prm-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0 14px; background: var(--fond-carte); border-bottom: 1px solid var(--filet-2); }
.prm-tete > div { flex: 1; min-width: 0; }
.prm-tete h2 { margin: 0; font: 400 26px/1.15 var(--lecture); color: var(--encre); letter-spacing: -.01em; }
.prm-tete p { margin: 6px 0 0; font: 400 15px/1.5 var(--interface); color: var(--encre-3); }
.prm-fermer { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; display: grid; place-items: center;
  background: transparent; color: var(--encre-3); cursor: pointer; }
.prm-fermer svg { width: 20px; height: 20px; }
.prm-fermer:hover, .prm-fermer:focus-visible { color: var(--encre); background: var(--voile); outline: none; }
#voileParametres .bloc-param { padding: 26px 0; }
#voileParametres .bloc-param h3 { font-size: 20px; }
.prm-sous { display: block; margin-top: 24px !important; margin-bottom: 0 !important; }

@media (min-width: 760px) {
  #voileParametres .pupitre { width: min(1180px, 94vw); height: min(860px, 90vh); border-radius: 22px; }
  #voileParametres .param-deux { gap: 0; }
  #voileParametres .param-cote { flex: 0 0 256px; padding: 28px 14px 22px; gap: 2px;
    background: color-mix(in srgb, var(--encre) 2.5%, transparent); }
  #voileParametres .param-cote button { padding: 10px 12px; border-radius: 12px; font-size: 15px; }
  #voileParametres .param-cote .groupe-param { padding: 18px 12px 6px; font-size: 12px; }
  .prm-titre { display: block; padding: 0 12px 10px; font: 700 21px var(--interface); color: var(--encre); letter-spacing: -.01em; }
  .prm-qui { display: block; margin-top: auto; padding: 14px 12px 0; font-family: var(--chiffre); font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--encre-4); }
  #voileParametres .param-vue { padding: 0 52px 44px; }
  .prm-tete { padding: 32px 0 20px; }
  .prm-tete h2 { font-size: 32px; }
}

/* ── Le theme, en vignettes : ses vraies couleurs et son relief ──────────── */
.prm-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px; margin-top: 6px; }
.prm-theme { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--encre-2); font: 500 14px var(--interface); }
.prm-vignette { position: relative; display: flex; flex-direction: column; gap: 9px; aspect-ratio: 16 / 10; padding: 12px;
  border-radius: 14px; background: var(--v-sol); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s; }
.v-barre { height: 7px; width: 42%; border-radius: 4px; background: var(--v-encre); opacity: .55; }
.v-carte { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 9px; background: var(--v-carte);
  box-shadow: -3px -3px 7px var(--v-lumiere), 3px 4px 9px var(--v-penombre); }
.v-carte.petite { width: 60%; }
.v-carte i { display: block; height: 4px; border-radius: 3px; background: var(--v-encre); opacity: .45; }
.v-carte i + i { width: 70%; opacity: .3; }
.prm-theme:hover .prm-vignette { transform: translateY(-2px); }
.prm-theme[aria-pressed="true"] .prm-vignette { box-shadow: inset 0 0 0 1px var(--filet), 0 0 0 2px var(--fond-carte), 0 0 0 4px var(--encre); }
.prm-theme[aria-pressed="true"] { color: var(--encre); }
.prm-theme:focus-visible { outline: none; }
.prm-theme:focus-visible .prm-vignette { box-shadow: 0 0 0 2px var(--encre-3); }

/* ── La langue, en interrupteur a deux positions ─────────────────────────── */
.prm-segment { display: inline-flex !important; gap: 2px; padding: 4px; margin-top: 8px !important; border-radius: 12px; background: var(--voile); }
.prm-segment button { border-radius: 9px !important; padding: 8px 16px !important; }
.prm-segment button[aria-pressed="true"] { background: var(--fond-carte) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* ── Le modele par defaut, en cartes ─────────────────────────────────────── */
.prm-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 6px; }
.prm-modele { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 16px 14px;
  border: 1px solid var(--filet); border-radius: 14px; background: var(--voile); color: var(--encre-2); cursor: pointer; text-align: left;
  font: inherit; transition: border-color .15s, background .15s; }
.prm-modele:hover { border-color: var(--encre-4); }
.prm-modele[aria-pressed="true"] { border-color: var(--encre); background: var(--fond-haut); color: var(--encre); }
.prm-modele[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 12px; right: 14px; font: 600 14px var(--interface); color: var(--encre); }
.prm-modele-nom { font: 600 15px var(--interface); color: var(--encre); }
.prm-modele-detail { font: 500 13px var(--interface); color: var(--encre-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prm-etiquette { margin-top: 6px; padding: 2px 8px; border-radius: 999px; font: 500 12px var(--interface); color: var(--encre-3); background: var(--voile); }
.prm-etiquette.payant { color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre-4); }

/* ── Les instructions a Avyis, en apercu ────────────────────────────────── */
.prm-instructions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; padding: 18px 20px;
  border: 1px solid var(--filet); border-radius: 14px; background: var(--voile); }
.prm-instructions p { margin: 0; font: 400 16px/1.6 var(--lecture); color: var(--encre-2); white-space: pre-wrap; }
.prm-instructions.vide p { color: var(--encre-4); font-family: var(--interface); font-size: 15px; }

@media (max-width: 480px) {
  .prm-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prm-modeles { grid-template-columns: minmax(0, 1fr); }
  .prm-tete h2 { font-size: 24px; }
}

/* ── AU TELEPHONE, LE MENU DES SECTIONS DISPARAISSAIT (2026-09-28, son iPhone 15) ─────────────
   Le pupitre faisait `100vh`. Sur Safari iOS, `100vh` est la hauteur de l ecran SANS les barres du
   navigateur : plus haute que ce qu on voit. Le voile (fixe, centre) le centrait donc en le faisant
   deborder en haut et en bas, et la rangee « Preferences, Compte, Connecteurs... », la premiere,
   passait sous le bord. Au bureau, et dans un navigateur de bureau etroit, la difference est nulle :
   d ou une capture ou elle se voit et un iPhone ou elle manque. `100dvh` est la hauteur VISIBLE.
   `html .pupitre` : la regle de 100vh vit dans le <style> d index.html, charge apres cette feuille. */
@media (max-width: 759px) {
  html .pupitre { height: 100vh; height: 100dvh; }
  #voileParametres .param-cote { padding: max(12px, env(safe-area-inset-top)) 12px 10px; scroll-padding-inline: 12px; }
}

/* LA CORBEILLE DES CONVERSATIONS, section Avyis (2026-09-27). */
.prm-corbeille { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.prm-conv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  min-width: 0; padding: 12px 4px; border-bottom: 1px solid var(--filet); }
.prm-conv:last-child { border-bottom: 0; }
.prm-conv-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.prm-conv-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.4 var(--interface); color: var(--encre); }
.prm-conv-meta { font: 400 13px/1.4 var(--interface); color: var(--encre-4); }
.prm-conv-gestes { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.prm-conv-gestes .nu { min-height: 36px; font-size: 13px; }

/* LA MEMOIRE D AVYIS ET LES LISTES REPLIABLES (2026-09-28). */
.prm-plier { margin-top: 4px; }
.prm-plier > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none;
  font: 500 14px var(--interface); color: var(--encre-2); border-radius: 10px; }
.prm-plier > summary::-webkit-details-marker { display: none; }
.prm-plier > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease; margin: 0 4px 0 2px; }
.prm-plier[open] > summary::before { transform: rotate(45deg); }
.prm-plier > summary:hover { color: var(--encre); }
.prm-plier > summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.prm-memoire-tete { align-items: center; gap: 12px; }
.prm-memoire-n { font: 400 13px var(--interface); color: var(--encre-4); }
.prm-bascule { display: inline-flex; align-items: center; gap: 10px; }
.prm-bascule-rond { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--filet); transition: background .2s ease; flex: 0 0 auto; }
.prm-bascule-rond::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fond-carte); transition: transform .2s ease; }
.prm-bascule[aria-checked="true"] .prm-bascule-rond { background: var(--encre); }
.prm-bascule[aria-checked="true"] .prm-bascule-rond::after { transform: translateX(14px); }
.prm-souvenirs { display: flex; flex-direction: column; gap: 2px; }
.prm-souvenir { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; min-width: 0;
  padding: 10px 4px; border-bottom: 1px solid var(--filet); }
.prm-souvenir:last-child { border-bottom: 0; }
.prm-souvenir-texte { font: 400 15px/1.5 var(--interface); color: var(--encre); overflow-wrap: anywhere; }
.prm-souvenir .nu { flex: 0 0 auto; min-height: 34px; font-size: 13px; }