/* Habillages : les thèmes principaux autres qu'Edgerunner refont toute l'interface.
   html.refonte          = Apple et Liquid Glass (base commune : formes et polices d'iOS)
   html[data-style=verre] = Liquid Glass (verre dépoli translucide par-dessus)
   Les couleurs (--fond, --bleu…) viennent de theme.js ; ici, les formes, les matières et la typographie. */

/* ---------- choix du thème principal (visible dans tous les thèmes) ---------- */
.styles-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.style-carte { display: flex; flex-direction: column; gap: 3px; padding: 8px; text-align: left; border: 1px solid var(--bleu-fin); background: var(--champ); color: var(--texte); min-width: 0; }
.style-carte b { font-size: .9rem; }
.style-carte small { color: var(--doux); font-size: .7rem; line-height: 1.25; }
.style-carte.actif { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.mini { position: relative; display: block; height: 58px; margin-bottom: 4px; overflow: hidden; }
.mini i { position: absolute; display: block; }
.mini-edge { background: #0a0a0c; }
.mini-edge i:nth-child(1) { left: 6px; right: 6px; top: 6px; height: 7px; background: #05d9f5; }
.mini-edge i:nth-child(2) { left: 6px; width: 60%; top: 19px; height: 14px; border-left: 2px solid #05d9f5; background: rgba(5,217,245,.15); clip-path: polygon(0 0,100% 0,100% 60%,85% 100%,0 100%); }
.mini-edge i:nth-child(3) { right: 6px; width: 45%; top: 37px; height: 14px; border-right: 2px solid #ff003c; background: rgba(255,0,60,.15); }
.mini-apple { background: #f2f2f7; border-radius: 10px; }
.mini-apple i:nth-child(1) { left: 6px; right: 6px; top: 6px; height: 16px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mini-apple i:nth-child(2) { left: 6px; width: 55%; top: 27px; height: 11px; border-radius: 8px; background: #e9e9eb; }
.mini-apple i:nth-child(3) { right: 6px; width: 45%; top: 42px; height: 11px; border-radius: 8px; background: #007aff; }
.mini-verre { border-radius: 14px; background: radial-gradient(circle at 20% 20%, #ff7ab6, transparent 55%), radial-gradient(circle at 85% 80%, #5ac8fa, transparent 55%), radial-gradient(circle at 80% 15%, #ffd60a, transparent 50%), #7d5cff; }
.mini-verre i:nth-child(1) { left: 6px; right: 6px; top: 6px; height: 16px; border-radius: 10px; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mini-verre i:nth-child(2) { left: 6px; width: 55%; top: 27px; height: 11px; border-radius: 8px; background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.6); }
.mini-verre i:nth-child(3) { right: 6px; width: 45%; top: 42px; height: 11px; border-radius: 8px; background: rgba(255,255,255,.75); }

/* =====================================================================
   BASE APPLE (aussi le socle de Liquid Glass)
   ===================================================================== */
html.refonte {
  --titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --corps: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--corps);
  --code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --rayon: 12px; --rayon-grand: 16px;
  --sep: rgba(84, 84, 88, .55);
  --remplir: rgba(120, 120, 128, .24);
  --remplir-2: rgba(120, 120, 128, .16);
  --bulle-lui: #262629;
  --vert: #30d158;
  --ombre-carte: none;
  --flou: saturate(180%) blur(20px);
}
html.refonte.theme-clair {
  --sep: rgba(60, 60, 67, .22);
  --remplir: rgba(120, 120, 128, .14);
  --remplir-2: rgba(120, 120, 128, .08);
  --bulle-lui: #e9e9eb;
  --vert: #34c759;
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Plus rien du HUD : ni coins coupés, ni capitales espacées, ni glitch, ni trame. */
.refonte *, .refonte *::before, .refonte *::after { clip-path: none !important; }
.refonte body :where(*:not(code):not(pre):not(.mini *)) { text-transform: none !important; letter-spacing: normal !important; }
.refonte body { font: 400 var(--taille, 17px)/1.38 var(--corps); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.refonte svg { stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.refonte code { font-family: var(--code); border-radius: 5px; background: var(--remplir); color: inherit; }
.refonte .fond-hud { display: none; }
.refonte .titre-glitch { color: var(--texte); font-family: var(--titre); font-weight: 700; }
.refonte .titre-glitch::before, .refonte .titre-glitch::after { display: none; }
.refonte .curseur::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--doux); vertical-align: middle; animation: respire 1s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .25; transform: scale(.7); } }
.refonte input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .refonte select, .refonte textarea { border-radius: 10px; font-family: var(--corps); }
.refonte ::selection { background: rgba(var(--bleu-rgb), .3); }

/* ---------- connexion ---------- */
.refonte #connexion { justify-content: center; }
.refonte .connexion-boite { text-align: center; }
.refonte .reacteur-svg.grand { margin: 0 auto 14px; width: 84px; height: 84px; }
.refonte .connexion-boite h1 { font-size: 2.3rem; }
.refonte .tag { border: 0; padding: 0; margin: 6px 0 26px; font-size: .95rem; color: var(--doux); }
.refonte .cadre { border: 0; border-radius: var(--rayon-grand); background: var(--fond-2); padding: 20px 18px; text-align: left; box-shadow: var(--ombre-carte); }
.refonte .cadre-etiquette { color: var(--texte); font-size: 1.05rem; font-weight: 600; }
.refonte #form-cle input { border: 1px solid var(--sep); border-radius: var(--rayon); background: var(--champ); color: var(--texte); font: 17px var(--corps); caret-color: var(--bleu); }
.refonte #form-cle input:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(var(--bleu-rgb), .2); }
.refonte .bouton-neon { border-radius: var(--rayon); font: 600 17px var(--corps); padding: 14px; background: var(--bleu); color: var(--sur-bleu); }
.refonte .bouton-neon:active { opacity: .7; background: var(--bleu); color: var(--sur-bleu); }

/* ---------- barre du haut ---------- */
.refonte .entete { background: var(--barre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border-bottom: .5px solid var(--sep); padding: calc(var(--haut) + 6px) 6px 6px; z-index: 3; }
.refonte .icone-bouton { border-radius: 50%; color: var(--bleu); width: 42px; height: 42px; }
.refonte .icone-bouton:active { background: var(--remplir); color: var(--bleu); }
.refonte .icone-bouton.appel { color: var(--vert); }
.refonte .reacteur-svg.avatar { width: 34px; height: 34px; border-radius: 50%; padding: 3px; background: var(--remplir); }
.refonte .nom { font: 600 1.02rem/1.15 var(--titre); color: var(--texte); }
.refonte .etat { font: 400 .74rem var(--corps); color: var(--doux); }
.refonte .voyant { border-radius: 50%; background: var(--vert); animation: none; width: 7px; height: 7px; }
.refonte .bandeau { display: none; }
.refonte .badge-evo { border-radius: 999px; font: 600 .72rem/1.5 var(--corps); background: var(--rouge); color: #fff; }
.refonte #ouvrir-fils.non-lu::after, .refonte .groupe-canaux.replie.non-lu .groupe-titre::after { font-family: var(--corps); box-shadow: none; background: var(--rouge); }
.refonte .fil-item.non-lu .fil-titre::before { box-shadow: none; }

/* ---------- modes et modèles : pastilles iOS ---------- */
.refonte .agents { border: 0; padding: 8px 12px 6px; gap: 6px; }
.refonte .puce { border: 0 !important; border-radius: 999px; padding: 6px 13px; font: 500 .86rem var(--corps); color: var(--texte); background: var(--remplir); }
.refonte .puce.choisi { background: var(--bleu); color: var(--sur-bleu); }
.refonte .puce.modele { background: var(--remplir-2); color: var(--texte); }
.refonte .puce.modele.choisi, .refonte .puce.modele[title^="petit modèle"].choisi { background: var(--texte); color: var(--fond); }
.refonte .puce.conseil.choisi { background: var(--rouge); color: #fff; }
.refonte .separateur { background: var(--sep); margin: 6px 2px; }
.refonte .retour-principale { font: 500 .9rem var(--corps); color: var(--bleu); background: transparent; border-bottom: .5px solid var(--sep); padding: 8px 16px; }

/* ---------- conversation : bulles façon Messages ---------- */
.refonte .fil { padding: 14px 12px; gap: 8px; }
.refonte .vide { font-family: var(--corps); text-align: center; line-height: 1.6; font-size: .95rem; }
.refonte .vide b { color: var(--vert); font-weight: 500; }
.refonte .vide .ligne:last-child { font: 600 1.35rem var(--titre); color: var(--texte); margin-top: 14px; }
.refonte .bulle { border: 0 !important; border-radius: 20px; padding: 8px 14px 9px; max-width: 82%; line-height: 1.36; animation: bulle-pop .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes bulle-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.refonte .bulle.moi { background: var(--bleu); color: var(--sur-bleu); border-bottom-right-radius: 6px; }
.refonte .bulle.lui { background: var(--bulle-lui); color: var(--texte); border-bottom-left-radius: 6px; max-width: 90%; }
.refonte .bulle .meta { font: 600 .74rem var(--corps); color: var(--doux); margin-bottom: 2px; }
.refonte .bulle.moi .meta, .refonte .bulle.moi .meta .doux { color: inherit; opacity: .75; }
.refonte .bulle .meta .doux, .refonte .bulle.lui .meta .doux { font-family: var(--corps); font-weight: 400; color: var(--doux); opacity: 1; }
.refonte .bulle .corps b { color: inherit; font-weight: 600; }
.refonte .bulle .h { color: inherit; font-weight: 700; }
.refonte .bulle .vocal { font: 500 .78rem var(--corps); color: inherit; opacity: .8; }
.refonte .bulle .actions button { border: 0; border-radius: 999px; padding: 4px 12px; font: 500 .82rem var(--corps); color: var(--bleu); background: var(--remplir); }
.refonte .bulle.moi .actions button { background: rgba(255, 255, 255, .22); color: inherit; }
.refonte .bulle .actions button:active { opacity: .6; background: var(--remplir); color: var(--bleu); }
.refonte .bulle.erreur-bulle { background: rgba(var(--rouge-rgb), .12); color: var(--rouge); }
.refonte .bulle pre.code, .refonte .outil pre, .refonte pre.commande { border: 0; border-radius: 10px; background: rgba(var(--fond-rgb), .55); color: var(--texte); font: 12px/1.45 var(--code); }
.refonte.theme-clair .bulle pre.code, .refonte.theme-clair .outil pre { background: rgba(255, 255, 255, .75); }
.refonte .outil { border: 0; border-radius: var(--rayon); background: rgba(var(--fond2-rgb), .6); margin: 6px 0; overflow: hidden; }
.refonte.theme-clair .outil { background: rgba(255, 255, 255, .7); }
.refonte .outil summary { padding: 7px 10px; }
.refonte .outil summary i { font-family: var(--corps); color: var(--bleu); }
.refonte .outil summary b { font: 600 .78rem var(--corps); color: var(--texte); }
.refonte .outil summary span { font: .8rem var(--corps); }
.refonte .outil.erreur summary i, .refonte .outil.erreur summary b { color: var(--rouge); }
.refonte .plan { border: 0; border-radius: var(--rayon); background: rgba(var(--bleu-rgb), .1); padding: 8px 12px; }
.refonte .bilan { font: .74rem var(--corps); }
.refonte .wikilien { border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(var(--bleu-rgb), .4); text-underline-offset: 2px; }
.refonte .routage { font-family: var(--corps); font-size: .76rem; }
.refonte .routage .niveau { border: 0; border-radius: 999px; padding: 1px 8px; background: var(--remplir); color: var(--texte); }
.refonte .routage .niveau.complexe { background: rgba(var(--rouge-rgb), .15); color: var(--rouge); }
.refonte .conseil { border: 0; border-radius: var(--rayon); background: rgba(var(--fond2-rgb), .6); overflow: hidden; }
.refonte .conseil-titre { font: 600 .85rem var(--corps); color: var(--texte); border-bottom: .5px solid var(--sep); }
.refonte .membre { border-bottom: .5px solid var(--sep); }
.refonte .pj-vignette img, .refonte .image-reponse img, .refonte .apercu-image, .refonte .rendu-images img { border: 0; border-radius: 14px; }
.refonte .pj-puce { border: 0; border-radius: 10px; background: rgba(0, 0, 0, .12); }
.refonte .vue3d { border: 0; border-radius: var(--rayon-grand); background: var(--remplir-2); }

/* ---------- saisie ---------- */
.refonte .saisie, .refonte .enregistrement { background: var(--barre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border-top: .5px solid var(--sep); padding: 7px 8px calc(var(--bas) + 7px); gap: 6px; align-items: flex-end; }
.refonte #champ { border: 1px solid var(--sep) !important; border-radius: 19px; background: var(--champ); padding: 7px 14px; min-height: 38px; font: 400 17px/1.3 var(--corps); caret-color: var(--bleu); }
.refonte #champ::placeholder { font: 400 16px var(--corps); color: var(--doux); }
.refonte #champ:focus { border-color: var(--sep) !important; }
.refonte body.mode-conseil #champ { border-color: rgba(var(--rouge-rgb), .6) !important; }
.refonte .pj-bouton { width: 38px; height: 38px; color: var(--doux); }
.refonte .envoyer { width: 36px; height: 36px; border-radius: 50%; margin-bottom: 1px; background: var(--bleu); color: var(--sur-bleu); }
.refonte .envoyer svg { width: 19px; height: 19px; stroke-width: 2.3; }
.refonte .envoyer:active { opacity: .7; background: var(--bleu); color: var(--sur-bleu); }
.refonte .envoyer.stop { background: var(--rouge); color: #fff; animation: none; }
.refonte .point-rouge { border-radius: 50%; animation: respire 1s ease-in-out infinite; }
.refonte #chrono { font-family: var(--corps); font-variant-numeric: tabular-nums; }
.refonte .pj-liste { background: var(--barre); border-top: .5px solid var(--sep); }
.refonte .pj { border: 0; border-radius: var(--rayon); background: var(--fond-2); }
.refonte .pj img, .refonte .pj-icone { border-radius: 8px; }
.refonte .pj-nom small { font-family: var(--corps); }
.refonte .pj-menu, .refonte .commandes { border: 0; border-radius: 14px; overflow: hidden; background: var(--panneau); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.refonte .pj-menu button, .refonte .commandes button { border-bottom: .5px solid var(--sep); }
.refonte .commandes b { font-family: var(--corps); color: var(--texte); }
.refonte .image-feuille { border: 0; border-radius: 20px; background: var(--panneau); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.refonte .image-feuille textarea, .refonte .image-feuille select { border: 1px solid var(--sep); background: var(--champ); }
.refonte .image-actions button { border: 0; border-radius: 10px; background: var(--remplir); font-weight: 500; }
.refonte .image-actions .principal { background: var(--bleu); color: var(--sur-bleu); }
.refonte .image-cadre { border: 0; border-radius: 12px; }

/* ---------- menu (tiroir) ---------- */
.refonte .tiroir-fond { background: rgba(0, 0, 0, .3); }
.refonte .tiroir-contenu { background: var(--fond); border-right: 0; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
.refonte .tiroir-entete { border-bottom: 0; padding: 4px 16px 10px; }
.refonte .tiroir-entete h2 { font: 700 1.9rem var(--titre); color: var(--texte); }
.refonte .tiroir-pied { border-top: 0; padding: 4px 14px 0; }
.refonte .tiroir-pied .modules { gap: 8px; }
.refonte .tiroir-pied .modules > .bouton-doux, .refonte .tiroir-pied .sous-modules > * {
  border-radius: 14px; background: var(--fond-2); color: var(--texte); box-shadow: var(--ombre-carte);
  font: 500 .92rem/1.2 var(--corps) !important; text-align: left; padding: 12px 12px; min-height: 52px;
}
.refonte .tiroir-pied .modules > .bouton-doux:active, .refonte .tiroir-pied .sous-modules > *:active { opacity: .6; background: var(--fond-2); }
.refonte .groupe-bouton[aria-expanded="true"] { background: rgba(var(--bleu-rgb), .15) !important; color: var(--bleu) !important; }
.refonte .sous-modules { border: 0; border-radius: 18px; background: var(--remplir-2); padding: 6px; }
.refonte .tiroir-pied #deconnexion { font: 500 .85rem var(--corps); }
.refonte .conso { font: .8rem var(--corps); color: var(--doux); }
.refonte .chercher-fils { border: 0; border-radius: 10px; background: var(--remplir); margin: 4px 14px 8px; }
.refonte .fil-item { border-bottom: .5px solid var(--sep); }
.refonte .fil-item.actif { background: rgba(var(--bleu-rgb), .12); box-shadow: none; }
.refonte .fil-item[style*="--canal"] { box-shadow: none; }
.refonte .fil-titre { font-weight: 500; }
.refonte .fil-meta { font: .78rem var(--corps); color: var(--doux); }
.refonte .groupe-canaux { border-bottom: .5px solid var(--sep); }
.refonte .groupe-titre { font: 600 .92rem var(--corps); color: var(--texte); }
.refonte .groupe-titre small { font-family: var(--corps); }
.refonte .interrupteur input { accent-color: var(--vert); }

/* ---------- boutons ---------- */
.refonte .bouton-doux { border-radius: 10px; padding: 7px 14px; font: 500 .9rem var(--corps); color: var(--bleu); background: rgba(var(--bleu-rgb), .14); border: 0; }
.refonte .bouton-doux:active { opacity: .6; background: rgba(var(--bleu-rgb), .14); }
.refonte .bouton-doux.danger { color: var(--rouge); background: rgba(var(--rouge-rgb), .12); border: 0; }
.refonte a.bouton-ar { border-radius: 12px; background: var(--bleu); color: var(--sur-bleu); }

/* ---------- panneaux plein écran (réglages, mémoire, fichiers…) : listes groupées iOS ---------- */
.refonte .evolution-ecran { background: var(--fond); }
.refonte .evo-entete { background: var(--barre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border-bottom: .5px solid var(--sep); padding: calc(var(--haut) + 6px) 6px 8px; }
.refonte .evo-titre { font: 600 1.08rem var(--titre); color: var(--texte); }
.refonte .evo-etiquette { font: .74rem var(--corps); color: var(--doux); }
.refonte .evo-corps { padding: 16px 14px calc(var(--bas) + 24px); gap: 20px; }
.refonte .evo-bloc { border: 0 !important; border-radius: var(--rayon-grand); background: var(--fond-2); padding: 12px 16px; box-shadow: var(--ombre-carte); }
.refonte .evo-bloc h3 { font: 600 .82rem var(--corps); color: var(--doux); margin: 0 0 6px; }
.refonte .evo-mode.on h3 { color: var(--vert); }
.refonte .evo-meta { font: .82rem/1.4 var(--corps); color: var(--doux); }
.refonte .evo-item { border-top: .5px solid var(--sep); }
.refonte .evo-vide { font: .9rem var(--corps); }
.refonte .evo-etat { border: 0; border-radius: 6px; padding: 1px 7px; font: 500 .72rem var(--corps); background: var(--remplir); color: var(--texte); }
.refonte .evo-etat.refuse, .refonte .evo-etat.annule { background: rgba(var(--rouge-rgb), .14); color: var(--rouge); }
.refonte .evo-form input, .refonte .evo-form textarea, .refonte .evo-champ { border: 1px solid var(--sep); border-radius: 10px; background: var(--champ); color: var(--texte); font: 16px var(--corps); }
.refonte .evo-champ:focus, .refonte .evo-form input:focus, .refonte .evo-form textarea:focus { outline: none; border-color: var(--bleu); }
.refonte .param-ligne { border-top: .5px solid var(--sep); padding: 10px 0; }
.refonte .param-ligne:first-of-type { border-top: 0; }
.refonte .param-ligne small { font-size: .8rem; }
.refonte .param-ligne select, .refonte .evo-meta select { border: 0; border-radius: 8px; background: var(--remplir); color: var(--texte); padding: 6px 8px; }
.refonte .param-ligne input[type="color"] { border: 0; border-radius: 8px; background: var(--remplir); }
.refonte .explication b { font-weight: 600; }
.refonte .mail-ligne { border-bottom: .5px solid var(--sep); }
.refonte .arbre-fichier small, .refonte .arbre-vide { font-family: var(--corps); }
.refonte .ecran-cadre, .refonte .ecran-cadre img { border-radius: var(--rayon); }
.refonte .rendu-panneau { border: 0; border-radius: var(--rayon); background: var(--remplir-2); }
.refonte .rendu-code pre { border: 0; border-radius: 10px; background: var(--remplir); font-family: var(--code); }

/* Interrupteur iOS */
.refonte .commutateur { width: 51px; height: 31px; border: 0; border-radius: 16px; background: var(--remplir); margin-top: 0; transition: background .2s; }
.refonte.theme-clair .commutateur { background: #e9e9eb; }
.refonte .commutateur i { top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .25s cubic-bezier(.3, .7, .4, 1); }
.refonte .commutateur[aria-checked="true"] { background: var(--vert); }
.refonte .commutateur[aria-checked="true"] i { transform: translateX(20px); background: #fff; }

/* Contrôle segmenté iOS */
.refonte .segment { background: var(--remplir); border-radius: 9px; padding: 2px; gap: 0; flex-wrap: wrap; }
.refonte .segment button { border: 0; border-radius: 7px; background: transparent; color: var(--texte); font: 500 .8rem var(--corps); padding: 6px 10px; }
.refonte .segment button.actif { background: var(--fond-2); color: var(--texte); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.refonte:not(.theme-clair) .segment button.actif { background: #636366; }

/* Cartes de thème */
.refonte .theme-carte, .refonte .style-carte { border: 0; border-radius: var(--rayon); background: var(--remplir-2); font: 500 .82rem var(--corps); }
.refonte .theme-carte .apercu { border-radius: 7px; overflow: hidden; }
.refonte .theme-carte.actif, .refonte .style-carte.actif { box-shadow: 0 0 0 2px var(--bleu); border: 0; }

/* Consommation, serveur */
.refonte .tuile, .refonte .vps-jauge, .refonte .vps-bloc { border: 0 !important; border-radius: var(--rayon); background: var(--remplir-2); }
.refonte .tuile b { font-family: var(--titre); font-weight: 600; }
.refonte .tuile span, .refonte .barre-val, .refonte .colonne small, .refonte .vps-jauge small, .refonte .vps-liste dd, .refonte .pastille { font-family: var(--corps); }
.refonte .vps-barre { border-radius: 4px; background: var(--remplir); overflow: hidden; }
.refonte .vps-barre i { border-radius: 4px; }
.refonte .vps-courbe { border-radius: 8px; background: var(--remplir-2); }
.refonte .vps-liste dd.ok, .refonte .pastille.ok { color: var(--vert); }
.refonte .vps-alertes { border-radius: var(--rayon); }

/* Feuilles du bas */
.refonte .feuille { border: 0; border-radius: 14px 14px 0 0; background: var(--fond-2); }
.refonte .feuille-titre { font: 600 1.05rem var(--titre); color: var(--texte); }
.refonte .nuance { border-color: var(--sep); }

/* ---------- écran de lancement ---------- */
.refonte .accueil { background: var(--fond); }
.refonte .accueil-reacteur { filter: none; }
.refonte .accueil.touche .accueil-reacteur { filter: none; }
.refonte .accueil-anneaux span { border-color: rgba(var(--bleu-rgb), .5); }
.refonte .accueil-anneaux span:nth-child(3) { border-color: rgba(var(--bleu-rgb), .3); }
.refonte .accueil-titre { font: 700 clamp(2.2rem, 10vw, 3.6rem) var(--titre); color: var(--texte); }
.refonte .accueil-sous { font: 500 .9rem var(--corps); color: var(--doux); }
.refonte .accueil-aide { font: .85rem var(--corps); color: var(--doux); animation: respire 2.4s ease-in-out infinite; }
.refonte .accueil.ouverture .accueil-titre { animation: titre-fond .4s ease-in forwards; }
@keyframes titre-fond { to { opacity: 0; transform: scale(.94); } }

/* ---------- appel ---------- */
.refonte .appel-ecran { background: var(--fond); }
.refonte .appel-haut { border: 0; padding: 0; text-align: center; }
.refonte .appel-etiquette { font: .9rem var(--corps); color: var(--doux); }
.refonte .appel-nom { font: 400 2.2rem var(--titre); color: var(--texte); }
.refonte .appel-duree { font: 1rem var(--corps); font-variant-numeric: tabular-nums; }
.refonte .appel-etat { font: 500 1rem var(--corps); color: var(--doux); }
.refonte .appel-texte { border: 0; border-radius: var(--rayon-grand); background: var(--fond-2); }
.refonte .rond { width: 72px; height: 72px; border: 0; border-radius: 50%; background: var(--remplir); color: var(--texte); }
.refonte .rond.actif { background: var(--texte); color: var(--fond); }
.refonte .rond.raccrocher { background: #ff3b30; color: #fff; }
.refonte .halo::before, .refonte .halo::after { border-color: rgba(var(--bleu-rgb), .6); }
.refonte .halo.parle .reacteur-svg { filter: none; }

/* =====================================================================
   LIQUID GLASS : la même structure, en verre dépoli sur un fond coloré
   ===================================================================== */
html[data-style="verre"] {
  --rayon: 18px; --rayon-grand: 26px;
  --flou: saturate(190%) blur(26px);
  --verre: rgba(255, 255, 255, .09);
  --verre-fort: rgba(255, 255, 255, .14);
  --verre-bord: rgba(255, 255, 255, .16);
  --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --verre-ombre: 0 8px 32px rgba(0, 0, 0, .28);
  --remplir: rgba(255, 255, 255, .12);
  --remplir-2: rgba(255, 255, 255, .07);
  --sep: rgba(255, 255, 255, .14);
  --bulle-lui: rgba(255, 255, 255, .12);
  --papier:
    radial-gradient(ellipse 85% 55% at 5% 0%, rgba(var(--bleu-rgb), .7), transparent 72%),
    radial-gradient(ellipse 70% 50% at 100% 40%, rgba(var(--rouge-rgb), .6), transparent 72%),
    radial-gradient(ellipse 90% 60% at 25% 100%, rgba(140, 90, 255, .7), transparent 72%),
    radial-gradient(ellipse 55% 45% at 90% 95%, rgba(255, 200, 60, .35), transparent 72%),
    var(--fond);
}
html[data-style="verre"].theme-clair {
  --verre: rgba(255, 255, 255, .42);
  --verre-fort: rgba(255, 255, 255, .62);
  --verre-bord: rgba(255, 255, 255, .7);
  --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --verre-ombre: 0 8px 32px rgba(31, 38, 80, .12);
  --remplir: rgba(255, 255, 255, .45);
  --remplir-2: rgba(255, 255, 255, .3);
  --sep: rgba(20, 30, 60, .12);
  --bulle-lui: rgba(255, 255, 255, .6);
  --papier:
    radial-gradient(ellipse 70% 50% at 10% 5%, rgba(var(--bleu-rgb), .35), transparent 70%),
    radial-gradient(ellipse 60% 45% at 95% 35%, rgba(var(--rouge-rgb), .28), transparent 70%),
    radial-gradient(ellipse 80% 55% at 30% 100%, rgba(150, 110, 255, .32), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 95%, rgba(255, 190, 70, .3), transparent 70%),
    var(--fond);
}

/* Le fond coloré, fixe, qui se voit à travers le verre ; il dérive doucement. */
[data-style="verre"] body { background: var(--fond); }
[data-style="verre"] .fond-hud { display: block; }
[data-style="verre"] .fond-hud::before { background: var(--papier); background-size: 140% 140%; animation: papier-derive 40s ease-in-out infinite alternate; opacity: 1; }
[data-style="verre"] .fond-hud::after { display: none; }
@keyframes papier-derive { to { background-position: 100% 100%; } }
[data-style="verre"] .evolution-ecran, [data-style="verre"] .accueil, [data-style="verre"] .appel-ecran, [data-style="verre"] .tiroir-contenu { background: var(--papier); background-attachment: fixed; }

/* La matière verre, appliquée à toutes les surfaces. */
[data-style="verre"] .entete, [data-style="verre"] .saisie, [data-style="verre"] .enregistrement, [data-style="verre"] .evo-entete, [data-style="verre"] .pj-liste {
  background: var(--verre); border-color: var(--verre-bord); box-shadow: var(--verre-reflet);
}
[data-style="verre"] .evo-bloc, [data-style="verre"] .cadre, [data-style="verre"] .tiroir-pied .modules > .bouton-doux, [data-style="verre"] .tiroir-pied .sous-modules > *,
[data-style="verre"] .tuile, [data-style="verre"] .vps-jauge, [data-style="verre"] .vps-bloc, [data-style="verre"] .appel-texte, [data-style="verre"] .feuille, [data-style="verre"] .pj,
[data-style="verre"] .theme-carte, [data-style="verre"] .style-carte {
  background: var(--verre) !important; border: 1px solid var(--verre-bord) !important;
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  box-shadow: var(--verre-reflet), var(--verre-ombre);
}
[data-style="verre"] .theme-carte.actif, [data-style="verre"] .style-carte.actif { box-shadow: 0 0 0 2px var(--bleu), var(--verre-ombre); }
[data-style="verre"] .pj-menu, [data-style="verre"] .commandes, [data-style="verre"] .image-feuille {
  background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet), var(--verre-ombre);
}

/* Barres flottantes : la barre du haut et la saisie deviennent des capsules détachées des bords. */
[data-style="verre"] .entete { margin: calc(var(--haut) + 6px) 10px 0; padding: 4px 6px; border: 1px solid var(--verre-bord); border-radius: 26px; }
[data-style="verre"] .saisie { margin: 0 10px calc(var(--bas) + 8px); padding: 6px; border: 1px solid var(--verre-bord); border-radius: 28px; box-shadow: var(--verre-reflet), var(--verre-ombre); }
[data-style="verre"] .enregistrement { margin: 0 10px calc(var(--bas) + 8px); padding: 6px 10px; border: 1px solid var(--verre-bord); border-radius: 28px; }
[data-style="verre"] .pj-liste { margin: 0 10px 6px; border: 1px solid var(--verre-bord); border-radius: 20px; }
[data-style="verre"] #champ { border: 0 !important; background: transparent; padding-left: 8px; }
[data-style="verre"] .evo-entete { margin: calc(var(--haut) + 6px) 10px 0; padding: 4px 6px; border: 1px solid var(--verre-bord); border-radius: 26px; }
[data-style="verre"] .agents { padding-top: 10px; }

/* Bulles en verre ; les miennes gardent la couleur, avec un reflet. */
[data-style="verre"] .bulle.lui { background: var(--bulle-lui); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: var(--verre-reflet); border: 1px solid var(--verre-bord) !important; }
[data-style="verre"] .bulle.moi { background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 60%), var(--bleu); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(var(--bleu-rgb), .3); }
[data-style="verre"] .bulle, [data-style="verre"] .bulle.moi, [data-style="verre"] .bulle.lui { border-radius: 22px; }
[data-style="verre"] .outil, [data-style="verre"] .conseil { background: var(--remplir-2); border: 1px solid var(--verre-bord); }

/* Boutons : pastilles de verre, le principal teinté. */
[data-style="verre"] .bouton-doux { border-radius: 999px; background: var(--verre-fort); color: var(--texte); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); }
[data-style="verre"] .bouton-doux.danger { color: var(--rouge); }
[data-style="verre"] .tiroir-pied .modules > .bouton-doux, [data-style="verre"] .tiroir-pied .sous-modules > * { border-radius: 20px; }
[data-style="verre"] .bouton-neon, [data-style="verre"] .envoyer { background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 60%), var(--bleu); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px rgba(var(--bleu-rgb), .35); border-radius: 999px; }
[data-style="verre"] .envoyer { border-radius: 50%; }
[data-style="verre"] .envoyer.stop { background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 60%), var(--rouge); }
[data-style="verre"] .puce { background: var(--verre); border: 1px solid var(--verre-bord) !important; box-shadow: var(--verre-reflet); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
[data-style="verre"] .puce.choisi { background: var(--bleu); border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
[data-style="verre"] .puce.modele.choisi { background: var(--texte); color: var(--fond); }
[data-style="verre"] .icone-bouton:active { background: var(--verre-fort); }
[data-style="verre"] .reacteur-svg.avatar { background: var(--verre-fort); box-shadow: var(--verre-reflet); }
[data-style="verre"] .rond { background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
[data-style="verre"] .rond.raccrocher { background: #ff3b30; border-color: transparent; }

/* Commandes iOS en verre */
[data-style="verre"] .segment { background: var(--remplir-2); border: 1px solid var(--verre-bord); border-radius: 999px; }
[data-style="verre"] .segment button { border-radius: 999px; }
[data-style="verre"] .segment button.actif, [data-style="verre"]:not(.theme-clair) .segment button.actif { background: var(--verre-fort); box-shadow: var(--verre-reflet), 0 2px 8px rgba(0, 0, 0, .15); }
[data-style="verre"] .commutateur { background: var(--remplir); border: 1px solid var(--verre-bord); }
[data-style="verre"] .commutateur[aria-checked="true"] { background: var(--vert); border-color: transparent; }
[data-style="verre"] .chercher-fils, [data-style="verre"] .evo-champ, [data-style="verre"] .evo-form input, [data-style="verre"] .evo-form textarea, [data-style="verre"] #form-cle input {
  background: var(--remplir-2); border: 1px solid var(--verre-bord); border-radius: 14px;
}
[data-style="verre"] .param-ligne select, [data-style="verre"] .param-ligne input[type="color"] { background: var(--remplir); }

/* Menu : un panneau de verre flottant, arrondi. */
[data-style="verre"] .tiroir-fond { background: rgba(0, 0, 0, .15); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
[data-style="verre"] .tiroir-contenu { margin: calc(var(--haut) + 8px) 0 calc(var(--bas) + 8px) 8px; height: auto; border-radius: 30px; border: 1px solid var(--verre-bord); overflow: hidden;
  box-shadow: var(--verre-reflet), 0 20px 60px rgba(0, 0, 0, .35); padding-top: 16px; }

/* Les fonds des panneaux plein écran restent colorés ; leurs blocs sont en verre. */
[data-style="verre"] .evo-bloc { border-radius: var(--rayon-grand); }
[data-style="verre"] .feuille { border-radius: 28px 28px 0 0; }
[data-style="verre"] .feuille-fond.ouvert { background: rgba(0, 0, 0, .3); }

/* L'accueil et l'appel : le logo posé dans un disque de verre. */
[data-style="verre"] .accueil-centre::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet), var(--verre-ombre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }

/* Les téléphones sans flou d'arrière-plan : un verre plus opaque pour rester lisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-style="verre"] { --verre: rgba(var(--fond2-rgb), .85); --verre-fort: rgba(var(--fond2-rgb), .92); --bulle-lui: rgba(var(--fond2-rgb), .9); }
}
.sans-anim[data-style="verre"] .fond-hud::before { animation: none; }
.sans-lignes[data-style="verre"] .fond-hud::before { background: var(--papier) !important; background-size: 140% 140% !important; }
.refonte .tiroir-pied .modules > a.bouton-doux, .refonte .tiroir-pied .sous-modules > a { display: flex; align-items: center; justify-content: flex-start; text-decoration: none; }
.refonte .tiroir-pied .modules .evo-bouton { justify-content: space-between; }
/* Le nom en minuscules avec majuscule, comme une appli iOS. */
.refonte .nom { text-transform: lowercase !important; }
.refonte .nom::first-letter { text-transform: uppercase; }
.refonte .evo-etiquette { display: none; }
.refonte .evo-titre { text-transform: lowercase !important; }
.refonte .evo-titre::first-letter { text-transform: uppercase; }