/* ==========================================================================
   verre.css — design « Verre » commun aux apps de PORTAIL-DUO
   --------------------------------------------------------------------------
   DÉFINITIF pour le Portail et Course depuis le 28/09/2026 (essai validé par
   Corentin). Muscu et Budget : à migrer plus tard — tant qu'elles ne chargent
   pas ce fichier et n'ont pas la classe html.verre, elles ne changent pas.

   Une seule feuille pour que les apps ne fassent visuellement qu'une : fond
   sombre éclairé par deux halos (couleur du profil + couleur de l'app),
   surfaces en verre dépoli, police Unbounded pour les grands chiffres.

   ACTIVATION : classe html.verre posée EN DUR dans le index.html de chaque app
   migrée. Toutes les règles sont préfixées par html.verre, et par
   html.verre[data-app="portail|course|budget|muscu"] quand elles sont propres
   à une app (classes homonymes d'une app à l'autre). style.css de chaque app
   garde la base (jetons, structure, thème clair) ; ce fichier l'habille.

   VERSIONNAGE : chargé en verre.css?v=… ; le workflow auto-version met ce
   numéro à jour dans chaque index.html qui le référence dès que ce fichier
   change (voir .github/workflows/auto-version.yml et README racine).
   Mis en cache par le service worker de chaque app (hors de son dossier pour
   les sous-apps : ajouté explicitement, voir Course/sw.js).

   PERF : le flou (backdrop-filter) coûte cher sur iPhone. Règle : 2 à 3
   surfaces floutées visibles en même temps au maximum (plaque principale,
   barre d'onglets, bouton flottant) — JAMAIS une par ligne de liste : les
   lignes sont des filets posés sur la plaque, pas des cartes en verre.

   BAS DE PAGE : chaque page doit défiler elle-même (pas d'« écran fixe »
   avec défilement interne) — voir PROBLEMES_RESOLUS, bande noire de Course.
   ========================================================================== */

/* COURBES D'ANIMATION COMMUNES (12/10/2026, audit skills Emil Kowalski — charte §11.3) :
   les mots-clés ease/ease-out du navigateur sont trop mous. Trois courbes partagées par les 5 apps,
   jamais de courbe recopiée à la main dans une app. Pas d'ease-in : même les sorties sont en ease-out. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);        /* entrées, sorties, appuis : démarre vite */
  --ease-in-out:cubic-bezier(.77,0,.175,1);    /* élément qui se déplace / se déforme à l'écran */
  --ease-drawer:cubic-bezier(.32,.72,0,1);     /* feuilles, toasts, pile : courbe des tiroirs iOS */
}

html.verre{
  /* Couleurs d'identité des vitres (reprises du mockup validé le 28/09/2026) */
  --v-corps:#ff7a59;   /* Musculation */
  --v-argent:#ffb800;  /* Budget */
  --v-frigo:#12b981;   /* Courses */
  --v-todo:#a855f7;    /* Todo (11/10/2026) */
  --v-maison:#ff8a2b;  /* Portail : lumière chaude « de la maison » */
  --v-app:var(--v-maison);

  --v-bg:#08080a;
  --v-text:#f5f2ec;
  --v-dim:rgba(245,242,236,0.64);
  --v-glass:rgba(255,255,255,0.07);         /* plaque de verre */
  --v-glass-fort:rgba(22,22,26,0.62);       /* verre posé sur du contenu qui défile (barres, modales) */
  --v-soft:rgba(255,255,255,0.06);          /* éléments posés SUR une plaque (pas de flou) */
  --v-soft-on:rgba(255,255,255,0.16);       /* état actif d'un segment */
  --v-edge:rgba(255,255,255,0.16);          /* arête du verre */
  --v-hi:rgba(255,255,255,0.30);            /* reflet du haut */
  --v-hair:rgba(255,255,255,0.08);          /* filet entre deux lignes */
  --v-ombre:rgba(0,0,0,0.55);
  --v-halo-op:0.60;
  --v-flou:blur(30px) saturate(180%);
  --v-ease:var(--ease-drawer);   /* 12/10/2026 : jeton commun (avant cubic-bezier(.2,.9,.25,1)) */
  --v-f-chiffres:'Unbounded', -apple-system, BlinkMacSystemFont, sans-serif;
  /* HAUT DE PAGE COMMUN (28/09/2026, modèle Budget) : le titre de chaque app démarre à 18 px
     sous la zone de l'encoche, en Unbounded 600 22 px, pastille de connexion à côté ; les
     plaques de verre commencent SOUS l'en-tête (jamais sous la barre d'état). */
  --v-haut:calc(env(safe-area-inset-top, 0px) + 18px);

  /* Les jetons existants des apps sont redirigés vers le verre : tout ce qui
     les utilise suit sans règle spécifique. */
  --bg:var(--v-bg);
  --card:var(--v-soft);
  --card-2:var(--v-soft);
  --border:var(--v-edge);
  --border-strong:rgba(255,255,255,0.26);
  --text:var(--v-text);
  --text-dim:var(--v-dim);
  --glass-bar:var(--v-glass-fort);
  --glass-modal:rgba(24,24,28,0.72);
  --shadow-sm:none;
  --shadow:0 18px 40px var(--v-ombre);
  --shadow-lg:0 -10px 50px var(--v-ombre);

  background:var(--v-bg);
}
html.verre[data-app="course"]{ --v-app:var(--v-frigo); }
/* TODO (11/10/2026) : habillé par les mêmes règles que Course (sélecteurs :is(course, todo) dans toute la
   feuille, mêmes classes HTML) ; seule la lumière de l'app change. */
html.verre[data-app="todo"]{ --v-app:var(--v-todo); }
html.verre[data-app="budget"]{ --v-app:var(--v-argent); }
html.verre[data-app="muscu"]{ --v-app:var(--v-corps); }

/* --------------------------------------------------------------------------
   FOND : deux halos de lumière derrière le verre. Dégradés radiaux (pas de
   filter:blur, bien plus cher) sur un calque fixe en z-index:-1 : peint
   au-dessus du fond de <html>, sous tout le contenu. D'où body transparent.
   -------------------------------------------------------------------------- */
html.verre body{ background:transparent !important; color:var(--v-text); }
/* HALOS ANIMÉS (28/09/2026, demande de Corentin) : les deux lumières dérivent lentement, en continu.
   Deux calques fixes, un par lumière (::before = couleur du profil, ::after = couleur de l'app),
   plus grands que l'écran (inset:-20 %) pour que leurs bords ne se voient jamais pendant le mouvement.
   Seul `transform` est animé (composité par le GPU, aucun recalcul de mise en page), sur des cycles
   longs (23 s et 31 s, durées premières entre elles : le mouvement ne se répète jamais à l'identique).
   Exception assumée à la charte §11.3 (durées 150–300 ms) : animation d'ambiance, pas d'interface —
   coupée par prefers-reduced-motion. Amplitudes limitées : la lumière de l'app ne descend pas
   sous ~75 % de la hauteur, le bas de page reste uni (bande iOS, voir Course).
   CONTINUITÉ ENTRE LES APPS (28/09/2026) : chaque ouverture de page relancerait l'animation à zéro.
   Un mini-script dans le <head> de chaque app cale l'animation sur l'HORLOGE (délai négatif
   = −(maintenant modulo un aller-retour), variables --v-delai-profil / --v-delai-app) : toutes les
   apps affichent donc la même position au même instant, et le passage de l'une à l'autre est
   continu. Recalé aussi au retour depuis le cache précédent/suivant (pageshow). */
html.verre body::before,
html.verre body::after{
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  opacity:1; background-repeat:no-repeat; will-change:transform;
}
html.verre body::before{                                        /* remplace la poussière de craie du Portail */
  background:
    radial-gradient(33% 26% at 23% 36%, rgba(var(--accent-rgb), var(--v-halo-op)), transparent 72%),
    radial-gradient(29% 22% at 80% 19%, rgba(var(--accent-rgb), calc(var(--v-halo-op) * .45)), transparent 72%);
  animation:v-derive-profil 23s ease-in-out var(--v-delai-profil, 0s) infinite alternate;
}
html.verre body::after{
  background:
    radial-gradient(34% 22% at 74% 57%, color-mix(in srgb, var(--v-app) calc(var(--v-halo-op) * 80%), transparent), transparent 72%);
  animation:v-derive-app 31s ease-in-out var(--v-delai-app, 0s) infinite alternate;
}
@keyframes v-derive-profil{
  0%  { transform:translate3d(0, 0, 0) scale(1); }
  35% { transform:translate3d(9%, 7%, 0) scale(1.12); }
  70% { transform:translate3d(3%, 16%, 0) scale(.94); }
  100%{ transform:translate3d(-6%, 5%, 0) scale(1.06); }
}
@keyframes v-derive-app{
  0%  { transform:translate3d(0, 0, 0) scale(1); }
  40% { transform:translate3d(-14%, -9%, 0) scale(1.1); }
  75% { transform:translate3d(-6%, -18%, 0) scale(.95); }
  100%{ transform:translate3d(4%, -4%, 0) scale(1.05); }
}

/* PASTILLE DE CONNEXION À CÔTÉ DU TITRE (28/09/2026, modèle : Budget « Budget ● »)
   Posée en ::after sur le titre de chaque app (Portail : nom de l'app ; Course : titre de
   l'onglet ; Muscu : titre de chaque écran et nom du profil sur l'écran des exercices).
   Un pseudo-élément survit aux textContent = … du JS (titres dynamiques).
   Couleur pilotée par <html data-sync="ok|envoi|hors-ligne"> posé par chaque app :
   vert = synchronisé, or = synchronisation en cours, rouge = hors ligne. Budget garde
   sa propre pastille (.status-dot), stylée plus bas avec le même halo. */
html.verre[data-app="portail"] .app-title-brand::after,
html.verre:is([data-app="course"],[data-app="todo"]) #titre-onglet::after,
html.verre[data-app="muscu"] .big-question::after,
html.verre[data-app="muscu"] #exercises-profile-label::after{
  content:''; display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-left:10px; vertical-align:middle; position:relative; top:-2px;
  background:#12b981; box-shadow:0 0 8px #12b981;
  transition:background var(--t-mid, .22s) ease, box-shadow var(--t-mid, .22s) ease;
}
html.verre[data-sync="envoi"][data-app] .app-title-brand::after,
html.verre[data-sync="envoi"][data-app] #titre-onglet::after,
html.verre[data-sync="envoi"][data-app] .big-question::after,
html.verre[data-sync="envoi"][data-app] #exercises-profile-label::after{ background:#ffb800; box-shadow:0 0 8px #ffb800; }
html.verre[data-sync="hors-ligne"][data-app] .app-title-brand::after,
html.verre[data-sync="hors-ligne"][data-app] #titre-onglet::after,
html.verre[data-sync="hors-ligne"][data-app] .big-question::after,
html.verre[data-sync="hors-ligne"][data-app] #exercises-profile-label::after{ background:#ef4444; box-shadow:0 0 8px #ef4444; }
html.verre[data-app="muscu"] #exercises-profile-label:empty::after{ display:none; }
html.verre[data-app="muscu"] .sync-badge{ display:none; }     /* remplacé par la pastille à côté du titre */
html.verre:is([data-app="course"],[data-app="todo"]) header.topbar{ justify-content:flex-start; }
html.verre[data-app="portail"] .app-title-brand::after{ margin-right:6px; }

/* Éléments propres au design Verre (masqués si html.verre est absent) */
.verre-seul{ display:none !important; }
html.verre .verre-seul{ display:revert !important; }

/* Bouton rond en verre (recharger…) */
html.verre .reload-btn{
  width:44px; height:44px;
  background:var(--v-soft); color:var(--v-text);
  border:1px solid var(--v-edge);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 8px 20px var(--v-ombre);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
}

/* ==========================================================================
   PORTAIL — la pile de vitres
   Les 3 cartes (mêmes éléments, mêmes id qu'en mode classique) sont
   empilées dans la même cellule de grille. data-rang (0 = devant) est posé
   par app.js ; toucher une vitre du fond la ramène devant, toucher celle de
   devant ouvre l'app.
   ========================================================================== */
html.verre[data-app="portail"] .big-question{ display:none; }
html.verre[data-app="portail"] .app-title{ letter-spacing:.4px; text-transform:none; font-size:13px; color:var(--v-dim); }
html.verre[data-app="portail"] .app-title-brand{
  font-family:var(--v-f-chiffres); font-weight:600; font-size:22px; letter-spacing:-.3px; line-height:1.2; color:var(--v-text);
}
html.verre[data-app="portail"] body{ padding-top:var(--v-haut); }
html.verre[data-app="portail"] .topbar{ min-height:0; margin-bottom:6px; }
html.verre[data-app="portail"] .dash-titre{ margin:0 2px 18px; }
html.verre[data-app="portail"] .dash-date{ margin:0; font-size:13px; }

html.verre[data-app="portail"] .dash{
  display:grid; gap:0; padding-bottom:198px;   /* 4 vitres depuis le 11/10/2026 (avant : 3, 132 px) */
}
/* CENTRAGE VERTICAL (29/09/2026, demande de Corentin) : la pile et ce qui la suit (astuce, bouton
   recharger, date de MAJ) sont centrés dans la hauteur restante sous l'en-tête — avant, collés en
   haut avec un grand vide en bas. main occupe toute la hauteur de body (flex), marges automatiques
   de part et d'autre du groupe. Écran trop petit (contenu plus haut que l'écran) : marges nulles,
   donc rien ne change. */
html.verre[data-app="portail"] main{ flex:1 0 auto; }
html.verre[data-app="portail"] .dash{ margin-top:auto; }
html.verre[data-app="portail"] .derniere-maj{ margin-bottom:auto; }
html.verre[data-app="portail"] .dash-card{
  grid-area:1 / 1;
  --dy:198px; --sc:1;
  transform-origin:50% 0;
  transform:translateY(calc(var(--dy) + var(--drag, 0px))) scale(var(--sc));
  -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none;
  transition:transform .3s var(--v-ease), opacity .3s var(--ease-out), clip-path .3s var(--v-ease);   /* 0,4 → 0,3 s (12/10/2026, charte §11.3) */
  border-radius:34px; overflow:hidden;
  background:var(--v-glass); border:1px solid var(--v-edge);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 30px 60px var(--v-ombre);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  position:relative;
}
/* 4 vitres (11/10/2026) : chaque vitre du fond dépasse de 66 px au-dessus de la suivante. */
html.verre[data-app="portail"] .dash-card[data-rang="0"]{ z-index:4; }
html.verre[data-app="portail"] .dash-card[data-rang="1"]{ --dy:132px; --sc:.95; opacity:.86; z-index:3; }
html.verre[data-app="portail"] .dash-card[data-rang="2"]{ --dy:66px;  --sc:.90; opacity:.70; z-index:2; }
html.verre[data-app="portail"] .dash-card[data-rang="3"]{ --dy:0px;   --sc:.85; opacity:.56; z-index:1; }
/* Les vitres du fond sont coupées juste sous leur en-tête : sinon leurs arêtes restent
   visibles à travers la vitre de devant (translucide), ce qui brouille la lecture. */
html.verre[data-app="portail"] .dash-card{ clip-path:inset(0 0 0 0 round 34px); }
html.verre[data-app="portail"] .dash-card:not([data-rang="0"]){ clip-path:inset(0 0 calc(100% - 80px) 0 round 34px); }
html.verre[data-app="portail"] .dash-card:active{ transform:translateY(calc(var(--dy) + var(--drag, 0px))) scale(calc(var(--sc) * .98)); }
/* GLISSER VERTICAL (28/09/2026) : la pile capte les gestes verticaux (pas de défilement de page
   depuis la pile) ; pendant le geste, la vitre de devant suit le doigt 1:1 (--drag), sans transition
   (charte §11.7). Au relâcher, la transition normale reprend et anime le changement de vitre. */
html.verre[data-app="portail"] .dash{ touch-action:none; }
html.verre[data-app="portail"] .dash.glisse .dash-card{ transition:none; }
/* Filet de lumière à la couleur de l'app, sur l'arête du haut */
html.verre[data-app="portail"] .dash-card::before{
  content:''; position:absolute; left:26px; right:26px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--v-teinte), transparent);
}
html.verre[data-app="portail"] .dash-card.blue{ --v-teinte:var(--v-corps); }
html.verre[data-app="portail"] .dash-card.gold{ --v-teinte:var(--v-argent); }
html.verre[data-app="portail"] .dash-card.green{ --v-teinte:var(--v-frigo); }
html.verre[data-app="portail"] .dash-card.violet{ --v-teinte:var(--v-todo); }
/* Pastilles des listes de Todo : couleur de chaque liste (--c-liste posée par app.js, palette contrôlée) */
html.verre[data-app="portail"] #to-chips .chip-n{ background:var(--c-liste, var(--v-todo)); box-shadow:0 0 10px color-mix(in srgb, var(--c-liste, var(--v-todo)) 70%, transparent); color:#fff; }
/* Le contenu des vitres du fond s'efface : seul leur en-tête dépasse */
html.verre[data-app="portail"] .dash-body{ transition:opacity .25s var(--ease-out); }
html.verre[data-app="portail"] .dash-card:not([data-rang="0"]) .dash-body{ opacity:0; }

html.verre[data-app="portail"] .dash-top{ min-height:62px; padding:12px 20px 0; }
html.verre[data-app="portail"] .choice-icon{
  width:38px; height:38px; border-radius:50%; color:var(--v-teinte);
  background:var(--v-soft) !important; border:1px solid var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre[data-app="portail"] .choice-icon svg{ width:17px; height:17px; }
html.verre[data-app="portail"] .dash-card .choice-label{
  font-family:-apple-system, BlinkMacSystemFont, sans-serif; text-transform:none; letter-spacing:0;
  font-size:17px; font-weight:700;
}
html.verre[data-app="portail"] .choice-chev{ display:none; }
html.verre[data-app="portail"] .verre-peek{
  font-family:var(--v-f-chiffres); font-weight:400; font-size:15px; white-space:nowrap;
  max-width:42%; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .25s ease-out;
}
html.verre[data-app="portail"] .dash-card[data-rang="0"] .verre-peek{ opacity:0; }

html.verre[data-app="portail"] .dash-body{ padding:14px 20px 22px; }
html.verre[data-app="portail"] .dash-value{ font-family:var(--v-f-chiffres); font-weight:300; font-size:34px; line-height:1.1; letter-spacing:-1.2px; }
html.verre[data-app="portail"] .dash-int{ font-family:var(--v-f-chiffres); font-weight:300; font-size:50px; letter-spacing:-2px; }
html.verre[data-app="portail"] .dash-unit{ font-family:var(--v-f-chiffres); font-weight:300; }
html.verre[data-app="portail"] .dash-unit-txt{ font-family:inherit; font-weight:600; }
html.verre[data-app="portail"] .dash-sep{ background:var(--v-hair); }
html.verre[data-app="portail"] .dash-phrase{ background:var(--v-soft); border:1px solid var(--v-edge); border-radius:20px; }
html.verre[data-app="portail"] .gauge{ background:var(--v-soft); height:8px; }
html.verre[data-app="portail"] .gauge-fill{ background:var(--v-argent); box-shadow:0 0 12px var(--v-argent); }
html.verre[data-app="portail"] .gauge-fill.over{ background:var(--danger); box-shadow:0 0 12px var(--danger); }
html.verre[data-app="portail"] .chip{ background:var(--v-soft); border:1px solid var(--v-edge); }
html.verre[data-app="portail"] .chip-n{ background:var(--v-frigo); box-shadow:0 0 10px rgba(18,185,129,.7); }
html.verre[data-app="portail"] .dash-maj.vieux{ color:var(--v-argent); }
html.verre[data-app="portail"] .verre-astuce{ text-align:center; font-size:12px; color:var(--v-dim); margin:14px 0 0; }
html.verre[data-app="portail"] .modal-sheet{ border-radius:34px 34px 0 0; border-color:var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi), var(--shadow-lg); }
/* ==========================================================================
   COURSE — une plaque de verre, des lignes (pas de cartes)
   ========================================================================== */
html.verre:is([data-app="course"],[data-app="todo"]) #app{ background:transparent; }
/* Bande sous la barre d'onglets (bug iOS, mesuré le 28/09/2026 — voir README Course) : en app écran
   d'accueil, la page ne fait que 894 pt sur un écran de 956 (les 62 pt de l'encoche manquent) et iOS
   remplit les 62 pt du bas avec la COULEUR de fond de <html> (couleur unie seulement : ni dégradé, ni
   élément, même prolongé, n'y est dessiné). On ne peut donc que choisir cette couleur : celle du bas de
   la plaque de verre. Le dégradé plein garde la vraie couleur de fond à l'intérieur de la page. */
html.verre:is([data-app="course"],[data-app="todo"]), html.verre[data-app="budget"]{ background:#171719 linear-gradient(#08080a, #08080a) 0 0 / 100% 100% no-repeat; }
html.verre:is([data-app="course"],[data-app="todo"]) header.topbar{ background:transparent; border-bottom:none; padding:var(--v-haut) 20px 16px; }
html.verre:is([data-app="course"],[data-app="todo"]) header.topbar h1{
  font-family:var(--v-f-chiffres); font-weight:600; font-size:22px; letter-spacing:-.3px; line-height:1.2; color:var(--v-text);
}

/* La plaque : UNE seule surface floutée pour tout le contenu qui défile */
html.verre:is([data-app="course"],[data-app="todo"]) main{
  background:var(--v-glass);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border:1px solid var(--v-edge); border-bottom:none;
  border-radius:34px 34px 0 0;
  box-shadow:inset 0 1px 0 var(--v-hi), 0 -10px 40px var(--v-ombre);
}
html.verre:is([data-app="course"],[data-app="todo"]) .searchbar{
  margin:16px 18px 4px; border-radius:999px; background:var(--v-soft);
  box-shadow:inset 0 1px 0 var(--v-hi);
}
/* RECHERCHE TOUJOURS ACCESSIBLE (29/09/2026, demande de Corentin) : la barre reste collée en haut de
   l'écran pendant le défilement de la liste (position:sticky — la page défile elle-même, cf. BAS DE
   PAGE). L'enveloppe .barre-recherche (index.html) est pleine largeur ; une fois collée (classe .colle,
   posée par app.js), elle prend un fond opaque couleur plaque — SANS flou (règle PERF : pas de 4e
   surface floutée) — et son ::before couvre la zone de l'encoche au-dessus : les lignes qui passent
   dessous ne se lisent ni à côté de la barre ni derrière l'heure. ::after = fondu sous la barre. */
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche{
  position:sticky; z-index:5;
  top:calc(env(safe-area-inset-top, 0px) - 6px);   /* la barre (16 px sous le haut de l'enveloppe) se cale 10 px sous l'encoche */
  padding:16px 18px 4px;
}
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche .searchbar{ margin:0; }
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle{ background:#171719; }
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle::before,
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle::after{ content:''; position:absolute; left:0; right:0; pointer-events:none; }
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle::before{ bottom:100%; height:calc(env(safe-area-inset-top, 0px) + 1px); background:#171719; }
html.verre:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle::after{ top:100%; height:14px; background:linear-gradient(#171719, rgba(23,23,25,0)); }
html.verre:is([data-app="course"],[data-app="todo"]) .titre-rayon{ margin:0 0 2px 2px; }
html.verre:is([data-app="course"],[data-app="todo"]) .section-rayon{ margin-top:20px; }
html.verre:is([data-app="course"],[data-app="todo"]) .carte-produit{
  background:transparent; border:none; border-bottom:1px solid var(--v-hair); border-radius:0;
  box-shadow:none; margin:0; padding:8px 2px; min-height:56px;
}
html.verre:is([data-app="course"],[data-app="todo"]) .case{
  border-radius:50%; width:28px; height:28px; border:1.5px solid var(--v-edge);
  background:var(--v-soft); box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre:is([data-app="course"],[data-app="todo"]) .case.checked{   /* couleur de la liste (--c-liste, 30/09/2026), accent en repli */
  background:var(--c-liste, var(--accent)); border-color:rgba(255,255,255,.35);
  box-shadow:0 0 14px color-mix(in srgb, var(--c-liste, var(--accent)) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
html.verre:is([data-app="course"],[data-app="todo"]) .case.case-liste:not(.checked){ border-color:var(--c-liste, var(--v-edge)); border-width:2px; }
html.verre:is([data-app="course"],[data-app="todo"]) .qte-produit{ border-radius:999px; background:var(--v-soft); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre:is([data-app="course"],[data-app="todo"]) .btn-crayon{ background:var(--v-soft); border:1px solid var(--v-edge); }
html.verre:is([data-app="course"],[data-app="todo"]) .carte-produit.achete-carte{ opacity:.5; }

/* Sélecteur de listes (30/09/2026) : pastilles posées sur le fond, sous le titre — sans flou
   (règle PERF : la plaque, la barre et le + restent les seules surfaces floutées). */
html.verre:is([data-app="course"],[data-app="todo"]) .selecteur-listes{ padding:2px 20px 14px; margin-top:-4px; }
html.verre:is([data-app="course"],[data-app="todo"]) .liste-chip{
  background:var(--v-soft); border-color:var(--v-edge); color:var(--v-dim);
  box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre:is([data-app="course"],[data-app="todo"]) .liste-chip.actif{
  background:var(--v-soft-on); color:var(--v-text); border-color:var(--c-liste, rgba(var(--accent-rgb), .6));
}
html.verre:is([data-app="course"],[data-app="todo"]) .ligne-liste{ border-bottom-color:var(--v-hair); }

/* Barre d'onglets et bouton + : verre plus dense (posé sur du contenu qui défile) */
html.verre:is([data-app="course"],[data-app="todo"]) nav.tabbar,
html.verre:is([data-app="course"],[data-app="todo"]) .nav-add{
  background:var(--v-glass-fort); border-color:var(--v-edge);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 18px 40px var(--v-ombre);
}
html.verre:is([data-app="course"],[data-app="todo"]) nav.tabbar button.actif{
  background:var(--v-soft-on); color:var(--v-text);
  box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre:is([data-app="course"],[data-app="todo"]) nav.tabbar button.actif svg{ color:var(--accent); }
html.verre:is([data-app="course"],[data-app="todo"]) .nav-add{ color:var(--v-text); outline:1px solid var(--accent); outline-offset:3px; }

html.verre:is([data-app="course"],[data-app="todo"]) .btn-course-terminee{
  border-radius:999px; color:var(--v-text);
  background:color-mix(in srgb, var(--v-frigo) 30%, var(--v-glass-fort));
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border:1px solid var(--v-edge);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 18px 40px var(--v-ombre);
}

html.verre:is([data-app="course"],[data-app="todo"]) .bloc-param{
  background:var(--v-soft); border:1px solid var(--v-edge); border-radius:26px;
  box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre:is([data-app="course"],[data-app="todo"]) .profile-switch{ border-radius:999px; }
html.verre:is([data-app="course"],[data-app="todo"]) .param-desc{ margin:-4px 0 12px; font-size:13px; line-height:1.4; color:var(--v-dim); }
html.verre:is([data-app="course"],[data-app="todo"]) .profile-switch-btn{ border-radius:999px; }
html.verre:is([data-app="course"],[data-app="todo"]) .btn-large{ border-radius:999px; }

html.verre:is([data-app="course"],[data-app="todo"]) .modal-fond{ background:rgba(0,0,0,.45); }
html.verre:is([data-app="course"],[data-app="todo"]) .modal-carte{
  border-radius:34px 34px 0 0; border-color:var(--v-edge);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  box-shadow:inset 0 1px 0 var(--v-hi), var(--shadow-lg);
}
html.verre:is([data-app="course"],[data-app="todo"]) .champ input,
html.verre:is([data-app="course"],[data-app="todo"]) .champ select,
html.verre[data-app="todo"] .champ textarea{ border-radius:16px; }
/* Todo (11/10/2026) : éléments propres à l'app, posés sur la plaque (pas de flou, règle PERF) */
html.verre[data-app="todo"] .choix-urgence, html.verre[data-app="todo"] .choix-urgence button{ border-radius:999px; }
html.verre[data-app="todo"] .btn-effacer-terminees{ background:var(--v-soft); border-color:var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="todo"] .btn-ajouter{ box-shadow:0 0 12px color-mix(in srgb, var(--c-liste, var(--accent)) 60%, transparent); }
html.verre:is([data-app="course"],[data-app="todo"]) .modal-actions button{ border-radius:999px; }


/* ==========================================================================
   BUDGET (28/09/2026) — une plaque de verre (.main-content) portant des
   panneaux sans flou (cartes, revenus, réglages) ; lignes à filets.
   Particularité : Budget déclare ses jetons et son profil (profil-lisa) sur
   <body> : on y redirige de nouveau les jetons vers le verre.
   ========================================================================== */
html.verre[data-app="budget"] body{
  --bg:var(--v-bg); --card:var(--v-soft); --card-2:var(--v-soft);
  --border:var(--v-edge); --border-strong:rgba(127,127,127,.30);
  --text:var(--v-text); --text-dim:var(--v-dim);
  --glass-bar:var(--v-glass-fort); --glass-modal:var(--glass-modal-v);
  --shadow-sm:none; --shadow:0 18px 40px var(--v-ombre); --shadow-lg:0 -10px 50px var(--v-ombre);
}
html.verre[data-app="budget"]{ --glass-modal-v:rgba(24,24,28,0.72); }

/* En-tête (titre, bouton thème, liste des mois) : posé sur les halos, sans fond, plus collant */
html.verre[data-app="budget"] .top-nav{
  position:relative; background:transparent; border:none; box-shadow:none;
  padding:calc(18px + env(safe-area-inset-top)) 20px 14px;
}
html.verre[data-app="budget"] .nav-header h2{ font-family:var(--v-f-chiffres); font-weight:600; font-size:22px; letter-spacing:-.3px; }
html.verre[data-app="budget"] .status-dot{ box-shadow:0 0 8px currentColor; color:var(--done); }
html.verre[data-app="budget"] .status-dot.offline{ color:var(--danger); }
html.verre[data-app="budget"] .status-dot.saving{ color:var(--gold); }
html.verre[data-app="budget"] .btn-icon{
  width:44px; height:44px; background:var(--v-soft); border:1px solid var(--v-edge);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 8px 20px var(--v-ombre);
}
html.verre[data-app="budget"] .year-group{ border-radius:24px; border-color:var(--v-edge); background:var(--v-soft); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="budget"] .year-header{ background:transparent; }
html.verre[data-app="budget"] .month-pill{ border-radius:999px; background:var(--v-soft); border-color:var(--v-edge); }
html.verre[data-app="budget"] .month-pill.active{ background:rgba(var(--accent-rgb),.22); border-color:rgba(var(--accent-rgb),.6); color:var(--v-text); }

/* La plaque : UNE seule surface floutée pour tout le contenu qui défile */
html.verre[data-app="budget"] .main-content{
  background:var(--v-glass);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border:1px solid var(--v-edge); border-bottom:none; border-radius:34px 34px 0 0;
  box-shadow:inset 0 1px 0 var(--v-hi), 0 -10px 40px var(--v-ombre);
  padding-top:18px;
}
html.verre[data-app="budget"] main h1,
html.verre[data-app="budget"] .page-title{
  font-family:var(--v-f-chiffres); font-weight:300; font-size:28px; letter-spacing:-1px; line-height:1.1;
}
html.verre[data-app="budget"] .search-container input{ border-radius:999px; background:var(--v-soft); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="budget"] .select-annee{ border-radius:999px; background:var(--v-soft); }

/* Panneaux posés sur la plaque (sans flou) */
html.verre[data-app="budget"] .card,
html.verre[data-app="budget"] .revenus-box,
html.verre[data-app="budget"] .admin-section{
  background:var(--v-soft); border:1px solid var(--v-edge); border-radius:26px;
  box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre[data-app="budget"] .card-header{ border-bottom-color:var(--v-hair); }
html.verre[data-app="budget"] .card-header.collapsed{ border-bottom-color:transparent; }
html.verre[data-app="budget"] .item-row{ background:transparent; border-bottom-color:var(--v-hair); }
html.verre[data-app="budget"] .revenus-row:not(:last-child){ border-bottom-color:var(--v-hair); }
html.verre[data-app="budget"] .revenus-row.revenus-group-start{ border-top-color:var(--v-hair); }
html.verre[data-app="budget"] .revenus-box input,
html.verre[data-app="budget"] input[type="number"],
html.verre[data-app="budget"] .item-bottom input[type="date"],
html.verre[data-app="budget"] .item-bottom select,
html.verre[data-app="budget"] .obj-form input{ border-radius:14px; }
html.verre[data-app="budget"] .revenus-box input:not([readonly]){ color:var(--v-text); }

/* Carte « Reste à vivre » / « Total à diviser » / « Total Dépenses » : grand chiffre fin */
html.verre[data-app="budget"] .summary-card{ background:var(--v-soft); padding:20px 16px 22px; }
html.verre[data-app="budget"] .total-amount{
  font-family:var(--v-f-chiffres); font-weight:300; font-size:44px; letter-spacing:-1.8px; color:var(--v-text);
}

/* Jauges : pistes en verre, remplissages lumineux aux couleurs des catégories */
html.verre[data-app="budget"] .progress-track{ background:var(--v-soft); border-radius:999px; }
html.verre[data-app="budget"] .fill-charges{ box-shadow:0 0 10px rgba(239,68,68,.7); }
html.verre[data-app="budget"] .fill-depenses{ box-shadow:0 0 10px rgba(255,149,0,.7); }
html.verre[data-app="budget"] .fill-provisions{ box-shadow:0 0 10px rgba(255,204,0,.7); }
html.verre[data-app="budget"] .fill-reste{ box-shadow:0 0 10px rgba(18,185,129,.7); }

/* Boutons : pilules de verre teinté (plus d'aplat plein) */
html.verre[data-app="budget"] .btn-action,
html.verre[data-app="budget"] .btn-small,
html.verre[data-app="budget"] .login-btn{ border-radius:999px; }
html.verre[data-app="budget"] .bg-primary,
html.verre[data-app="budget"] .btn-small.bg-primary,
html.verre[data-app="budget"] .login-btn{
  background:rgba(var(--accent-rgb),.26); border:1px solid rgba(var(--accent-rgb),.6); color:var(--v-text);
  box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre[data-app="budget"] .bg-danger{
  background:rgba(239,68,68,.24); border:1px solid rgba(239,68,68,.6); color:var(--v-text); box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre[data-app="budget"] .bg-neutral{ background:var(--v-soft); border:1px solid var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="budget"] .btn-pay-method{ border-radius:14px; background:var(--v-soft); border-color:var(--v-edge); }
html.verre[data-app="budget"] .mixte-btn{ background:var(--v-soft); border-color:var(--v-edge); }
html.verre[data-app="budget"] .item-mixte{ border-radius:20px; }
html.verre[data-app="budget"] .profile-switch{ border-radius:999px; }
html.verre[data-app="budget"] .profile-switch-btn{ border-radius:999px; }

/* Barre d'onglets : verre dense (posée sur du contenu qui défile) */
html.verre[data-app="budget"] .tab-buttons{
  background:var(--v-glass-fort); border-color:var(--v-edge);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 18px 40px var(--v-ombre);
}
html.verre[data-app="budget"] .btn-tab.active{ background:var(--v-soft-on); color:var(--v-text); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="budget"] .btn-tab.active svg{ color:var(--accent); }

/* Toast, modales, écran de connexion */
html.verre[data-app="budget"] #toast{
  background:var(--v-glass-fort); -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border-color:var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi), 0 12px 30px var(--v-ombre);
}
html.verre[data-app="budget"] .overlay-popup{ background:rgba(0,0,0,.45); }
html.verre[data-app="budget"] .popup-box{
  border-radius:34px 34px 0 0; border-color:var(--v-edge);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  box-shadow:inset 0 1px 0 var(--v-hi), var(--shadow-lg);
}
html.verre[data-app="budget"] #login-screen{
  background:rgba(8,8,10,.35); -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
}
html.verre[data-app="budget"] .login-box{
  background:var(--v-soft); border:1px solid var(--v-edge); border-radius:34px; box-shadow:inset 0 1px 0 var(--v-hi), var(--shadow);
}
html.verre[data-app="budget"] .login-box h1{ font-family:var(--v-f-chiffres); font-weight:300; letter-spacing:-.8px; }
html.verre[data-app="budget"] .login-box input{ border-radius:16px; background:var(--v-soft); }


/* ==========================================================================
   MUSCU (28/09/2026) — chaque écran (.view-inner) et la zone des exercices
   (#view-exercises main) sont UNE plaque de verre ; cartes, boutons de menu,
   séances, graphiques… deviennent des panneaux sans flou posés dessus (les
   jetons --card/--border/--shadow-sm redirigés vers le verre s'en chargent).
   Seules surfaces floutées : la plaque, l'en-tête collant et la barre du bas
   des exercices, les modales et les toasts.
   Rayons agrandis (--r-lg 24 px, --r-xl 30 px) — ⚠️ R_CARD (moteur des
   flammes de record, app.js) doit rester égal à --r-lg.
   ========================================================================== */
html.verre[data-app="muscu"]{
  --r-lg:24px; --r-xl:30px;
  --text-dimmer:var(--v-dim);
  --reset-btn-bg:var(--v-soft);
}
/* La réserve du bas (posée en JS sur body par adjustBottomSpacing) passe dans les plaques :
   sinon une bande de fond nu apparaîtrait sous la plaque. */
html.verre[data-app="muscu"] body{ padding-bottom:0 !important; }
html.verre[data-app="muscu"] .sync-badge{ background:var(--v-soft); box-shadow:none; }

/* Plaque des écrans */
/* En-tête (retour, titre + pastille) posé sur les halos, comme Budget ; la plaque (.plaque,
   ajoutée dans index.html autour de tout ce qui suit le titre) prend toute la largeur. */
html.verre[data-app="muscu"] .view-inner{ padding:var(--v-haut) 18px 0; gap:10px; }
html.verre[data-app="muscu"] .view-inner > .app-title-brand{ display:none; }    /* « Duo Training » : le titre suffit, comme Budget */
html.verre[data-app="muscu"] .view-inner > .back-btn{ margin:-8px 0 -4px; }
html.verre[data-app="muscu"] .plaque{
  flex:1; display:flex; flex-direction:column; gap:14px;
  margin:6px -18px 0; padding:22px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  background:var(--v-glass);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border:1px solid var(--v-edge); border-bottom:none; border-radius:34px 34px 0 0;
  box-shadow:inset 0 1px 0 var(--v-hi), 0 -10px 40px var(--v-ombre);
}
html.verre[data-app="muscu"] .app-title-brand{ font-family:var(--v-f-chiffres); font-weight:600; letter-spacing:.3px; }

/* Titres et grands chiffres : Unbounded fin (remplace Bebas Neue) */
html.verre[data-app="muscu"] #builder-hub{ display:flex; flex-direction:column; }
html.verre[data-app="muscu"] .session-for{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
html.verre[data-app="muscu"] .builder-create-btn{ margin-bottom:18px; border-radius:999px; }
html.verre[data-app="muscu"] .big-question{
  font-family:var(--v-f-chiffres); text-transform:none; font-weight:600; font-size:22px; letter-spacing:-.3px; line-height:1.2; margin:0 2px;
}
html.verre[data-app="muscu"] .login-title{
  font-family:var(--v-f-chiffres); text-transform:none; font-weight:300; font-size:30px; letter-spacing:-1px; line-height:1.1;
}
html.verre[data-app="muscu"] .session-title{
  font-family:var(--v-f-chiffres); text-transform:none; font-weight:300; font-size:17px; letter-spacing:-.3px; line-height:1.3;
}   /* 24 → 17 px (05/10/2026) : la séance n'affiche plus qu'un exercice, le titre ne doit pas le repousser */
html.verre[data-app="muscu"] .menu-hero-streak,
html.verre[data-app="muscu"] .menu-hero-chip .val,
html.verre[data-app="muscu"] .lifetime-value{
  font-family:var(--v-f-chiffres); font-weight:300; letter-spacing:-.5px;
}
html.verre[data-app="muscu"] .lifetime-value{ color:var(--v-text); }
html.verre[data-app="muscu"] .choice-label{
  font-family:-apple-system, BlinkMacSystemFont, sans-serif; text-transform:none; letter-spacing:0; font-size:17px; font-weight:700;
}

/* Panneaux : reflet du haut en plus (fond, arête et rayon viennent des jetons) */
html.verre[data-app="muscu"] .big-choice-btn,
html.verre[data-app="muscu"] .session-btn,
html.verre[data-app="muscu"] .menu-hero,
html.verre[data-app="muscu"] .exercise-card,
html.verre[data-app="muscu"] .lifetime-card{ box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="muscu"] .menu-hero{ background:var(--v-soft); }
html.verre[data-app="muscu"] .menu-hero::before{ display:none; }              /* rayures « craie » */
html.verre[data-app="muscu"] .big-choice-btn .choice-icon,
html.verre[data-app="muscu"] .session-btn .session-icon{
  border-radius:50%; background:var(--v-soft); border:1px solid var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi);
}
/* Entrée principale (Entraînement) et boutons forts : verre teinté à l'accent au lieu d'un aplat */
html.verre[data-app="muscu"] .big-choice-btn.primary,
html.verre[data-app="muscu"] .btn-export,
html.verre[data-app="muscu"] .finish-btn.archive,
html.verre[data-app="muscu"] .login-btn{
  background:rgba(var(--accent-rgb),.28); border:1px solid rgba(var(--accent-rgb),.6); color:var(--v-text);
  box-shadow:inset 0 1px 0 var(--v-hi), 0 10px 26px rgba(var(--accent-rgb),.22);
}
html.verre[data-app="muscu"] .big-choice-btn.primary .choice-icon{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; }
html.verre[data-app="muscu"] .btn-export{ font-family:inherit; text-transform:none; letter-spacing:0; font-size:16px; font-weight:700; border-radius:999px; }
html.verre[data-app="muscu"] .btn-reset{ border-radius:999px; }
html.verre[data-app="muscu"] .btn-confirm{ background:rgba(239,68,68,.26); border:1px solid rgba(239,68,68,.6); color:var(--v-text); }
html.verre[data-app="muscu"] .btn-copy{ background:rgba(18,185,129,.26); border:1px solid rgba(18,185,129,.6); color:var(--v-text); }

/* Écran des exercices : en-tête collant et barre du bas en verre dense, zone des cartes en plaque */
html.verre[data-app="muscu"] #view-exercises header{
  background:var(--v-glass-fort);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border-bottom:1px solid var(--v-edge); box-shadow:0 10px 30px var(--v-ombre);
}
html.verre[data-app="muscu"] #view-exercises main{
  margin-top:10px;
  padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px));   /* réserve de la barre du bas */
  background:var(--v-glass);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border:1px solid var(--v-edge); border-bottom:none; border-radius:34px 34px 0 0;
  box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre[data-app="muscu"] .exercise-headwrap{ background:transparent; border-bottom-color:var(--v-hair); }
html.verre[data-app="muscu"] .exercise-history{ border-top-color:var(--v-hair); }
html.verre[data-app="muscu"] .session-progress-track{ background:var(--v-soft); border-radius:999px; }
html.verre[data-app="muscu"] .session-progress-fill{ border-radius:999px; box-shadow:0 0 10px rgba(var(--accent-rgb),.6); }
html.verre[data-app="muscu"] .bottom-bar{
  background:var(--v-glass-fort); border-top-color:var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi), 0 -10px 40px var(--v-ombre);
}
/* Séance par exercice (05/10/2026) : rail des exercices dans l'en-tête (panneaux SANS flou, posés
   sur le verre dense de l'en-tête) et boutons Précédent / Suivant sous l'exercice affiché. */
html.verre[data-app="muscu"] .rail-exo{ border-radius:18px; box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="muscu"] .exo-nav-btn{ box-shadow:inset 0 1px 0 var(--v-hi); }
/* Écran de séance au plus près de la maquette validée (05/10/2026, 2e passe) : l'exercice n'est plus
   une carte dans la plaque mais posé DIRECTEMENT sur la plaque (sans fond, bord ni ombre) ; titres
   en Unbounded, puces « Dernière fois » / « Record », méthode en pilule, séries validées teintées
   vertes, champs à 44 px, cases ✓ arrondies. Tous les fonds viennent des jetons → Relief / Argile suivent. */
html.verre[data-app="muscu"] #view-exercises header{ gap:10px; }
html.verre[data-app="muscu"] #view-exercises .header-row{ padding-right:0; gap:10px; }
html.verre[data-app="muscu"] #view-exercises .exo-retour,
html.verre[data-app="muscu"] #view-exercises .undo-btn{ background:var(--v-soft); border-color:var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi); }
html.verre[data-app="muscu"] #exercises-profile-label{
  font-family:var(--v-f-chiffres); font-weight:600; font-size:20px; letter-spacing:-.2px; text-transform:none; color:var(--v-text); line-height:1.15;
}
html.verre[data-app="muscu"] .exo-chrono .session-timer-label{ font-family:var(--v-f-chiffres); font-weight:300; font-variant-numeric:tabular-nums; }
html.verre[data-app="muscu"] .exo-chrono.attente .session-timer-label{ font-weight:600; }
html.verre[data-app="muscu"] .session-progress-track{ height:4px; }
html.verre[data-app="muscu"] #view-exercises .session-progress-fill{ background:var(--accent); }
html.verre[data-app="muscu"] #view-exercises .session-progress-track.complete .session-progress-fill{ background:var(--done); }
html.verre[data-app="muscu"] #view-exercises main{ padding:20px 16px calc(112px + env(safe-area-inset-bottom, 0px)); gap:22px; }

html.verre[data-app="muscu"] #view-exercises .exercise-card,
html.verre[data-app="muscu"] #view-exercises .cardio-card{
  background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible; padding:0;
}
html.verre[data-app="muscu"] #view-exercises .exercise-headwrap{ background:transparent; border:none; padding:0; gap:12px; }
html.verre[data-app="muscu"] #view-exercises .exercise-card.complete .exercise-headwrap::before{ display:none; }
html.verre[data-app="muscu"] #view-exercises .exercise-body{ padding:14px 0 0; gap:12px; }
html.verre[data-app="muscu"] #view-exercises .exercise-head{ gap:6px; padding-right:54px; }
html.verre[data-app="muscu"] .exercise-rang{ font-size:11px; font-weight:800; letter-spacing:.9px; color:var(--v-dim); }
html.verre[data-app="muscu"] #view-exercises .exercise-name{
  font-family:var(--v-f-chiffres); font-weight:400; font-size:22px; line-height:1.15; letter-spacing:-.3px;
}
html.verre[data-app="muscu"] #view-exercises .exercise-target{ font-size:13.5px; font-weight:700; }
html.verre[data-app="muscu"] #view-exercises .exercise-swap-btn{
  top:0; right:0; width:44px; height:44px; color:var(--v-text);
  background:var(--v-soft); border:1px solid var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi);
}
html.verre[data-app="muscu"] #view-exercises .exercise-swap-btn::after{ display:none; }
html.verre[data-app="muscu"] #view-exercises .exercise-history{ border:none; padding:0; gap:8px; font-size:12.5px; }
html.verre[data-app="muscu"] #view-exercises .hist-last{
  padding:7px 11px; border-radius:999px; background:var(--v-soft); color:var(--v-text); opacity:.85; font-weight:600;
}
html.verre[data-app="muscu"] #view-exercises .hist-record{
  margin-left:0; padding:6px 11px; border-radius:999px; background:transparent; border:1px solid rgba(255,184,0,.55);
}
/* Méthode de charge et poids de la barre : segments en pilule */
html.verre[data-app="muscu"] #view-exercises .variant-row{
  flex-wrap:nowrap; gap:4px; padding:4px; border-radius:999px;
  background:var(--v-soft); border:1px solid var(--v-hair);
}
html.verre[data-app="muscu"] #view-exercises .variant-btn{
  min-height:38px; padding:0 8px; border:none; border-radius:999px; justify-content:center; animation:none;
  background:transparent; color:var(--v-dim);
}
html.verre[data-app="muscu"] #view-exercises .variant-btn.selected{ background:rgba(var(--accent-rgb),.22); color:var(--v-text); }
html.verre[data-app="muscu"] #view-exercises .variant-name{ font-size:13.5px; }
html.verre[data-app="muscu"] #view-exercises .variant-icon,
html.verre[data-app="muscu"] #view-exercises .variant-row:not(.bar-weight-row) .variant-sub{ display:none; }
html.verre[data-app="muscu"] #view-exercises .bar-weight-input{ border-radius:999px; }
/* Grille des séries */
html.verre[data-app="muscu"] #view-exercises .set-grid-header{ font-size:10.5px; font-weight:800; letter-spacing:.8px; color:var(--v-dim); margin-bottom:-6px; }
html.verre[data-app="muscu"] #view-exercises .set-row{ padding:6px 2px; border-radius:14px; }
html.verre[data-app="muscu"] #view-exercises .set-num{ font-family:var(--v-f-chiffres); font-weight:400; font-size:14px; color:var(--v-dim); }
html.verre[data-app="muscu"] #view-exercises .set-row input,
html.verre[data-app="muscu"] #view-exercises select.rpe-input{
  height:44px; padding:0 4px; border-radius:12px; font-weight:600;
  background:var(--v-soft); border:1px solid var(--v-hair);
}
html.verre[data-app="muscu"] #view-exercises .set-row input::placeholder{ color:var(--v-dim); opacity:.55; }
html.verre[data-app="muscu"] #view-exercises .set-row input:focus,
html.verre[data-app="muscu"] #view-exercises select.rpe-input:focus{ border-color:rgba(255,255,255,.40); }
html.verre[data-app="muscu"] #view-exercises .set-row.fait{ background:rgba(18,185,129,.08); }
html.verre[data-app="muscu"] #view-exercises .set-row.fait .set-num{ color:var(--done); }
html.verre[data-app="muscu"] #view-exercises .set-row.fait select.rpe-input{ color:var(--v-dim); }
html.verre[data-app="muscu"] #view-exercises .set-row.fait input,
html.verre[data-app="muscu"] #view-exercises .set-row.fait select.rpe-input{ background:transparent; border-color:transparent; box-shadow:none; font-weight:700; }
html.verre[data-app="muscu"] #view-exercises .dup-btn{ border-color:var(--v-hair); }
html.verre[data-app="muscu"] #view-exercises .check-btn{
  border-radius:14px; background:var(--v-soft); border:1px solid var(--v-edge); color:var(--v-dim); opacity:1;
}
html.verre[data-app="muscu"] #view-exercises .check-btn.checked{ background:rgba(18,185,129,.9); border-color:var(--done); color:#fff; }
html.verre[data-app="muscu"] #view-exercises .add-warmup-btn{ border-color:rgba(255,255,255,.22); color:var(--v-text); opacity:.85; }
html.verre[data-app="muscu"] #view-exercises .note-wrap{ border-top:none; padding-top:0; }
/* Cardio, posé sur la plaque comme un exercice */
html.verre[data-app="muscu"] #view-exercises .cardio-card{ gap:14px; }
html.verre[data-app="muscu"] #view-exercises .cardio-card .icon{ display:none; }
html.verre[data-app="muscu"] #view-exercises .cardio-card .name{ font-family:var(--v-f-chiffres); font-weight:400; font-size:22px; line-height:1.15; }
html.verre[data-app="muscu"] #view-exercises .cardio-suggestion{ font-size:13.5px; font-weight:700; color:var(--accent); }
/* Barre du bas : ronds de 52 px + pilule « Séance terminée » */
html.verre[data-app="muscu"] #view-exercises .bottom-btn{ min-height:52px; }
html.verre[data-app="muscu"] #view-exercises .btn-reset{
  flex:0 0 52px; width:52px; height:52px; padding:0; border-radius:50%;
  background:var(--v-soft); border:1px solid var(--v-edge); color:var(--v-text); box-shadow:inset 0 1px 0 var(--v-hi);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html.verre[data-app="muscu"] #view-exercises .btn-ordre.actif{ color:var(--gold); border-color:rgba(255,184,0,.55); }
html.verre[data-app="muscu"] #view-exercises .btn-export{ font-size:15px; letter-spacing:.3px; }

/* Surfaces flottantes : doivent rester lisibles au-dessus du contenu (jamais le verre fin des panneaux) */
html.verre[data-app="muscu"] .modal,
html.verre[data-app="muscu"] .confirm-box,
html.verre[data-app="muscu"] .suggest-panel{
  background:var(--glass-modal-m);
  -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border:1px solid var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi), 0 20px 50px var(--v-ombre);
}
html.verre[data-app="muscu"]{ --glass-modal-m:rgba(24,24,28,0.82); }
html.verre[data-app="muscu"] .modal{ border-radius:34px 34px 0 0; border-bottom:none; }
html.verre[data-app="muscu"] .confirm-box{ border-radius:30px; }
html.verre[data-app="muscu"] .modal-overlay,
html.verre[data-app="muscu"] .confirm-overlay{ background:rgba(0,0,0,.45); }
html.verre[data-app="muscu"] .toast{
  background:var(--v-glass-fort); -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
  border-color:var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi), 0 12px 30px var(--v-ombre);
}
/* Écran de connexion : voile flouté sur les halos */
html.verre[data-app="muscu"] .login-overlay{
  background:rgba(8,8,10,.35); -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
}


/* ==========================================================================
   TRANSITION « LA VITRE S'OUVRE EN APP » (28/09/2026)
   View Transitions inter-pages (Safari 18.2+ / iOS 18.2+, Chrome 126+) : les 4 pages
   partagent une origine et cette feuille, donc elles s'y inscrivent ensemble.
   Au toucher de la vitre de devant, le Portail lui donne le nom « vitre » (app.js) ;
   dans l'app, la plaque de verre porte ce même nom : le navigateur transforme l'une
   en l'autre (position + taille), pendant que le reste de la page fond enchaîné.
   Retours (geste retour d'iOS, historique) : transition annulée par un mini-script
   dans le <head> de chaque app (pagereveal), iOS anime déjà lui-même le retour.
   Navigateur sans support : navigation normale, rien ne casse.
   ========================================================================== */
@view-transition{ navigation:auto; }
html.verre:is([data-app="course"],[data-app="todo"]) main,
html.verre[data-app="budget"] .main-content,
html.verre[data-app="muscu"] #view-menu .plaque{ view-transition-name:vitre; }
/* La boîte « vitre » se déforme de la taille de la vitre à celle de la plaque ; son contenu n'est
   jamais étiré (object-fit:none, calé en haut) mais découpé par la boîte arrondie qui grandit. */
::view-transition-group(vitre){ animation-duration:.42s; animation-timing-function:var(--ease-in-out); overflow:hidden; border-radius:34px; }
::view-transition-old(vitre),
::view-transition-new(vitre){ height:100%; object-fit:none; object-position:top center; }
::view-transition-old(vitre){ animation:.15s var(--ease-out) both v-vt-sortie; }   /* plus jamais d'ease-in (12/10/2026) */
::view-transition-new(vitre){ animation:.32s var(--ease-out) .1s both v-vt-entree; }
::view-transition-old(root){ animation:.2s var(--ease-out) both v-vt-sortie; }
::view-transition-new(root){ animation:.3s var(--ease-out) .12s both v-vt-entree; }
@keyframes v-vt-sortie{ to{ opacity:0; } }
@keyframes v-vt-entree{ from{ opacity:0; } }
/* Mouvement réduit (12/10/2026, « réduit ≠ zéro ») : plus de déformation de la vitre, mais le
   fondu enchaîné entre les deux pages reste (il aide à comprendre qu'on a changé de page). */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*){ animation:none !important; }
}


/* Accessibilité — mouvement réduit (charte §11.9) */
@media (prefers-reduced-motion: reduce){
  html.verre .dash-card, html.verre .dash-body, html.verre .verre-peek{ transition:none !important; }
  html.verre body::before, html.verre body::after{ animation:none !important; }   /* halos fixes */
}


/* ==========================================================================
   CONNEXION DU DUO — Course et Portail (29/09/2026)
   Écran #connexion (index.html), branché par connexionDuo() dans commun.js. Masqué par
   défaut, ouvert (.open) seulement quand Firebase répond « pas de session » : jamais de
   flash au démarrage quand on est déjà connecté. Au-dessus de tout (z-index 10000).
   ========================================================================== */
html.verre .connexion-duo{
  position:fixed; inset:0; z-index:10000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(8,8,10,.6); -webkit-backdrop-filter:var(--v-flou); backdrop-filter:var(--v-flou);
}
html.verre .connexion-duo.open{ display:flex; }
html.verre .connexion-duo form{
  width:100%; max-width:360px; display:flex; flex-direction:column; gap:11px; padding:30px 24px;
  background:var(--v-soft); border:1px solid var(--v-edge); border-radius:34px;
  box-shadow:inset 0 1px 0 var(--v-hi), var(--shadow); color:var(--v-text);
}
html.verre .connexion-duo h2{ margin:0; font-family:var(--v-f-chiffres); font-weight:300; font-size:28px; letter-spacing:-.8px; }
html.verre .connexion-duo p{ margin:0 0 8px; font-size:13px; color:var(--v-dim); }
html.verre .connexion-duo input{
  min-height:48px; padding:12px 15px; border-radius:16px; border:1px solid var(--v-edge);
  background:var(--v-soft); color:var(--v-text); font-family:inherit; font-size:16px; /* 16 px : pas de zoom iOS */
}
html.verre .connexion-duo .connexion-erreur{ margin:0; min-height:18px; font-size:13px; color:var(--danger, #ef4444); }
html.verre .connexion-duo button{
  min-height:48px; border-radius:999px; border:1px solid rgba(var(--accent-rgb),.6);
  background:rgba(var(--accent-rgb),.28); color:var(--v-text); font-family:inherit; font-size:16px; font-weight:700;
  box-shadow:inset 0 1px 0 var(--v-hi); cursor:pointer;
}
html.verre .connexion-duo button:disabled{ opacity:.6; }


/* ==========================================================================
   THÈME SOMBRE · CLAIR (18/10/2026 ; avant : styles au choix Verre · Relief · Argile · Simple)
   --------------------------------------------------------------------------
   Deux thèmes seulement, choisis dans le Portail et appliqués aux 5 apps :
     • SOMBRE = data-style="simple" (ex-style Simple du 05/10/2026) : le natif iOS, façon app
       Réglages — fond noir, blocs gris pleins (#1c1c1e / #2c2c2e), police du système partout,
       aucune ombre, aucun flou, aucun halo ; seule couleur : l'accent du profil. DÉFAUT.
     • CLAIR = data-style="clair" (18/10/2026) : même structure, fond beige crème (#f3ede2),
       plaques crème claires, blocs blancs, textes brun très foncé ; ombres très légères.
   Verre, Relief et Argile sont SUPPRIMÉS (demande de Corentin, 18/10/2026). Les règles de base
   « html.verre » plus haut restent la STRUCTURE commune des apps (plaques, barres, en-têtes) :
   le thème n'en change que les matières, via les jetons --t-* ci-dessous.
   ACTIVATION : <html data-style="simple|clair">, TOUJOURS posé par commun.js AVANT le 1er rendu
   à partir de localStorage['duo-style'] (anciennes valeurs → simple). Choix : Portail (#style-choix).
   PROFIL : toutes les teintes partent de --accent / --accent-rgb, donc bleu Corentin / rose Lisa
   dans les deux thèmes (charte §1, règle d'identité couple).
   Budget pose le profil sur <body> (body.profil-lisa) : recopié sur <html>
   par :has() ci-dessous, sinon les jetons calculés sur <html> resteraient bleus.
   ARCHITECTURE : jetons --t-* définis par thème, puis des règles PAR CATÉGORIE (plaque, barre,
   panneau, creux, actif, accent) écrites UNE fois sous html.verre[data-style].
   Nouvelle surface dans une app → l'ajouter à la bonne catégorie ici. Couleur écrite en dur
   dans une app (texte blanc, fond sombre) → prévoir sa variante sous html[data-style="clair"].
   PERF : aucun backdrop-filter.
   ========================================================================== */
html.verre[data-app="budget"]:has(> body.profil-lisa){
  --accent:var(--lisa); --accent-rgb:var(--lisa-rgb); --accent-dark:var(--lisa-dark);
}

/* ---------- Jetons : SIMPLE (natif iOS sombre, 05/10/2026) ----------
   Demande de Corentin : « quelque chose de beaucoup plus simple », validé sur maquette (piste D).
   Couleurs des listes groupées d'iOS : fond #000, plaques #1c1c1e, panneaux #2c2c2e. */
html.verre[data-style="simple"]{
  --t-fond:#000000;
  --t-plaque:#1c1c1e;
  --t-panneau:#2c2c2e;
  --t-barre:#1c1c1e;
  --t-modale:#1c1c1e;
  --t-arete:rgba(255,255,255,.07);
  --t-creux:rgba(255,255,255,.09);          /* champs : lisibles sur une plaque comme sur un panneau */
  --t-o-plaque:none;
  --t-o-barre:none;
  --t-o-panneau:none;
  --t-o-creux:none;
  --t-actif-fond:var(--accent);
  --t-o-actif:none;
  --t-actif-texte:#fff;
  --t-accent-fond:var(--accent);
  --t-o-accent:none;
  --t-halo-op:0;
  --v-f-chiffres:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;   /* pas d'Unbounded */
}

/* ---------- Jetons : CLAIR (18/10/2026) ----------
   Demande de Corentin : « une version claire, avec du beige en arrière-plan » (inspiration : app
   Kakeibo). Fond beige crème, plaques crème claires, blocs blancs, texte brun très foncé.
   Les jetons de texte du verre (--v-text, --v-dim…) sont inversés ici : tout ce qui utilise
   --text / --text-dim dans les apps suit sans règle. */
html.verre[data-style="clair"]{
  color-scheme:light;
  --t-fond:#f3ede2;
  --t-plaque:#faf7f1;
  --t-panneau:#ffffff;
  --t-barre:#ffffff;
  --t-modale:#faf7f1;
  --t-arete:rgba(70,50,20,.10);
  --t-creux:rgba(70,50,20,.06);
  --t-o-plaque:none;
  --t-o-barre:0 6px 22px rgba(70,50,20,.12);
  --t-o-panneau:0 1px 2px rgba(70,50,20,.06);
  --t-o-creux:none;
  --t-actif-fond:var(--accent);
  --t-o-actif:none;
  --t-actif-texte:#fff;
  --t-accent-fond:var(--accent);
  --t-o-accent:none;
  --t-halo-op:0;
  --v-text:#231d15;
  --v-dim:rgba(35,29,21,.60);
  --v-hair:rgba(70,50,20,.10);
  --v-ombre:rgba(70,50,20,.18);
  --v-f-chiffres:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}
/* SOMBRE ET CLAIR — typographie unique dans les 5 apps (05/10/2026, demande de Corentin : « la typographie
   de l'app Muscu partout ») : police du système sur TOUT, boutons et champs compris (sinon le
   navigateur leur donne sa police par défaut) ; titres et grands chiffres en semi-gras sans
   espacement serré, comme Muscu (« Séance 1 », « Squat »), au lieu du très fin (300) hérité
   d'Unbounded dans le Portail, Budget et l'écran de connexion. */
html.verre[data-style] body,
html.verre[data-style] :is(button, input, select, textarea){
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
html.verre[data-style] :is(.dash-value, .dash-int, .dash-unit,
  [data-app="budget"] main h1, [data-app="budget"] .page-title, .total-amount, .login-box h1,
  .login-title, .session-title, .menu-hero-streak, .menu-hero-chip .val, .lifetime-value,
  .exo-chrono .session-timer-label, .connexion-duo h2){
  font-weight:600; letter-spacing:-.2px;
}

/* ---------- Redirection des jetons du verre (et donc des jetons des apps) ---------- */
html.verre[data-style]{
  --v-bg:var(--t-fond);
  --v-glass:var(--t-plaque);
  --v-glass-fort:var(--t-barre);
  --v-soft:var(--t-panneau);
  --v-soft-on:var(--t-actif-fond);
  --v-edge:var(--t-arete);
  --v-hi:transparent;
  --v-hair:rgba(255,255,255,.07);
  --v-flou:none;
  --v-halo-op:var(--t-halo-op);
  --border-strong:rgba(255,255,255,.10);
  --glass-modal:var(--t-modale);
  --glass-modal-v:var(--t-modale);
  --glass-modal-m:var(--t-modale);
  --shadow-sm:var(--t-o-panneau);
  --shadow:var(--t-o-barre);
  --shadow-lg:0 -10px 40px rgba(0,0,0,.55);
}
html.verre[data-style][data-app="budget"] body{      /* Budget redéclare ses jetons sur <body> */
  --border-strong:rgba(255,255,255,.10);
  --shadow-sm:var(--t-o-panneau); --shadow:var(--t-o-barre); --shadow-lg:0 -10px 40px rgba(0,0,0,.55);
}
html.verre[data-style] body::before,
html.verre[data-style] body::after,
html.verre[data-style][data-app="muscu"] .menu-hero::after{ display:none; }   /* matière unie : pas de halos ni de lueur */

/* Bande iOS du bas (Course, Budget) : couleur du bas de la plaque, comme en Verre */
html.verre[data-style]:is([data-app="course"],[data-app="todo"]),
html.verre[data-style][data-app="budget"]{
  background:var(--t-plaque) linear-gradient(var(--t-fond), var(--t-fond)) 0 0 / 100% 100% no-repeat;
}
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle::before{ background:var(--t-plaque); }
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .barre-recherche.colle::after{
  background:linear-gradient(var(--t-plaque), color-mix(in srgb, var(--t-plaque) 0%, transparent));
}

/* ---------- PLAQUES (grandes surfaces du contenu) ---------- */
html.verre[data-style][data-app="portail"] .dash-card,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) main,
html.verre[data-style][data-app="budget"] .main-content,
html.verre[data-style][data-app="muscu"] .plaque,
html.verre[data-style][data-app="muscu"] #view-exercises main{
  background:var(--t-plaque); border-color:var(--t-arete); box-shadow:var(--t-o-plaque);
}
html.verre[data-style][data-app="portail"] .dash-card[data-rang="1"]{ opacity:1; filter:brightness(.86); }
html.verre[data-style][data-app="portail"] .dash-card[data-rang="2"]{ opacity:1; filter:brightness(.72); }
html.verre[data-style][data-app="portail"] .dash-card[data-rang="3"]{ opacity:1; filter:brightness(.6); }

/* ---------- BARRES, FLOTTANTS, MODALES ---------- */
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) nav.tabbar,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .nav-add,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .btn-course-terminee,
html.verre[data-style][data-app="budget"] .tab-buttons,
html.verre[data-style][data-app="budget"] #toast,
html.verre[data-style][data-app="muscu"] #view-exercises header,
html.verre[data-style][data-app="muscu"] .bottom-bar,
html.verre[data-style][data-app="muscu"] .toast,
html.verre[data-style] .reload-btn,
html.verre[data-style][data-app="budget"] .btn-icon{
  background:var(--t-barre); border-color:var(--t-arete); box-shadow:var(--t-o-barre);
}
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .btn-course-terminee{
  background:color-mix(in srgb, var(--v-frigo) 30%, var(--t-barre));
}
html.verre[data-style][data-app="portail"] .modal-sheet,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .modal-carte,
html.verre[data-style][data-app="budget"] .popup-box,
html.verre[data-style][data-app="muscu"] .modal,
html.verre[data-style][data-app="muscu"] .confirm-box,
html.verre[data-style][data-app="muscu"] .suggest-panel{
  background:var(--t-modale); border-color:var(--t-arete); box-shadow:var(--t-o-barre);
}
html.verre[data-style][data-app="budget"] .login-box,
html.verre[data-style] .connexion-duo form{
  background:var(--t-modale); border-color:var(--t-arete); box-shadow:var(--t-o-barre);
}
html.verre[data-style][data-app="budget"] #login-screen,
html.verre[data-style][data-app="muscu"] .login-overlay,
html.verre[data-style] .connexion-duo{ background:color-mix(in srgb, var(--t-fond) 88%, transparent); }

/* ---------- PANNEAUX posés sur une plaque ---------- */
html.verre[data-style][data-app="portail"] .choice-icon,
html.verre[data-style][data-app="portail"] .dash-phrase,
html.verre[data-style][data-app="portail"] .chip,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .bloc-param,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .btn-crayon,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .liste-chip,
html.verre[data-style][data-app="todo"] .btn-effacer-terminees,
html.verre[data-style][data-app="budget"] .year-group,
html.verre[data-style][data-app="budget"] .card,
html.verre[data-style][data-app="budget"] .revenus-box,
html.verre[data-style][data-app="budget"] .admin-section,
html.verre[data-style][data-app="budget"] .summary-card,
html.verre[data-style][data-app="budget"] .month-pill,
html.verre[data-style][data-app="budget"] .bg-neutral,
html.verre[data-style][data-app="budget"] .btn-pay-method,
html.verre[data-style][data-app="budget"] .mixte-btn,
html.verre[data-style][data-app="muscu"] .big-choice-btn,
html.verre[data-style][data-app="muscu"] .session-btn,
html.verre[data-style][data-app="muscu"] .menu-hero,
html.verre[data-style][data-app="muscu"] .exercise-card,
html.verre[data-style][data-app="muscu"] .rail-exo,
html.verre[data-style][data-app="muscu"] #view-exercises .exo-retour,
html.verre[data-style][data-app="muscu"] #view-exercises .undo-btn,
html.verre[data-style][data-app="muscu"] #view-exercises .exercise-swap-btn,
html.verre[data-style][data-app="muscu"] #view-exercises .btn-reset,
html.verre[data-style][data-app="muscu"] #view-exercises .hist-last,
html.verre[data-style][data-app="muscu"] #view-exercises .check-btn:not(.checked),
html.verre[data-style][data-app="muscu"] .exo-nav-btn,
html.verre[data-style][data-app="muscu"] .lifetime-card,
html.verre[data-style][data-app="muscu"] .big-choice-btn .choice-icon,
html.verre[data-style][data-app="muscu"] .session-btn .session-icon{
  background:var(--t-panneau); border-color:var(--t-arete); box-shadow:var(--t-o-panneau);
}

/* ---------- CREUX (champs, pistes, cases) ---------- */
html.verre[data-style][data-app="portail"] .gauge,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .searchbar,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .case,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .qte-produit,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .profile-switch,
html.verre[data-style][data-app="todo"] .choix-urgence,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .champ input,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .champ select,
html.verre[data-style][data-app="todo"] .champ textarea,
html.verre[data-style][data-app="budget"] .search-container input,
html.verre[data-style][data-app="budget"] .select-annee,
html.verre[data-style][data-app="budget"] .progress-track,
html.verre[data-style][data-app="budget"] .profile-switch,
html.verre[data-style][data-app="budget"] .revenus-box input,
html.verre[data-style][data-app="budget"] input[type="number"],
html.verre[data-style][data-app="budget"] .item-bottom input[type="date"],
html.verre[data-style][data-app="budget"] .item-bottom select,
html.verre[data-style][data-app="budget"] .login-box input,
html.verre[data-style][data-app="muscu"] .session-progress-track,
html.verre[data-style][data-app="muscu"] #view-exercises .set-row:not(.fait) input,
html.verre[data-style][data-app="muscu"] #view-exercises .set-row:not(.fait) select.rpe-input,
html.verre[data-style][data-app="muscu"] #view-exercises .variant-row,
html.verre[data-style] .connexion-duo input,
html.verre[data-style] .style-choix{
  background:var(--t-creux, color-mix(in srgb, var(--t-panneau) 80%, #000)); border-color:transparent; box-shadow:var(--t-o-creux);
}

/* ---------- ÉTATS ACTIFS (onglet, mois, segment choisi) ---------- */
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) nav.tabbar button.actif,
html.verre[data-style][data-app="budget"] .btn-tab.active,
html.verre[data-style][data-app="budget"] .month-pill.active,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .profile-switch-btn.selected,
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .liste-chip.actif,
html.verre[data-style][data-app="budget"] .profile-switch-btn.selected,
html.verre[data-style][data-app="muscu"] .rail-exo.actif,
html.verre[data-style][data-app="muscu"] #view-exercises .variant-btn.selected,
html.verre[data-style] .style-choix button[aria-checked="true"]{
  background:var(--t-actif-fond); border-color:transparent; color:var(--t-actif-texte); box-shadow:var(--t-o-actif);
}
html.verre[data-style][data-app="muscu"] .rail-exo.actif .rail-num{ color:var(--t-actif-texte); }
html.verre[data-style][data-app="muscu"] .exo-nav-btn.suivant.pret{
  background:color-mix(in srgb, #12b981 45%, var(--t-panneau)); color:#fff;
}
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) nav.tabbar button.actif svg,
html.verre[data-style][data-app="budget"] .btn-tab.active svg{ color:var(--t-actif-texte); }

/* ---------- ACCENT (actions principales, cases cochées) ---------- */
html.verre[data-style][data-app="budget"] .bg-primary,
html.verre[data-style][data-app="budget"] .btn-small.bg-primary,
html.verre[data-style][data-app="budget"] .login-btn,
html.verre[data-style][data-app="muscu"] .big-choice-btn.primary,
html.verre[data-style][data-app="muscu"] .btn-export,
html.verre[data-style][data-app="muscu"] .exo-chrono.attente,
html.verre[data-style][data-app="muscu"] .finish-btn.archive,
html.verre[data-style][data-app="muscu"] .login-btn,
html.verre[data-style][data-app="portail"] .btn-accent,
html.verre[data-style] .connexion-duo button{
  background:var(--t-accent-fond); border-color:transparent; color:#fff; box-shadow:var(--t-o-accent);
}
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .case.checked{
  background:var(--c-liste, var(--accent)); border-color:transparent; box-shadow:var(--t-o-accent);
}
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .nav-add{ outline-color:var(--accent); }
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .case.case-liste:not(.checked){ box-shadow:var(--t-o-creux), inset 0 0 0 2px var(--c-liste); }
html.verre[data-style]:is([data-app="course"],[data-app="todo"]) .liste-chip.actif{ box-shadow:var(--t-o-actif), inset 0 0 0 1.5px var(--c-liste, transparent); }
html.verre[data-style][data-app="budget"] .bg-danger,
html.verre[data-style][data-app="muscu"] .btn-confirm{
  background:color-mix(in srgb, #ef4444 70%, var(--t-panneau)); border-color:transparent; color:#fff; box-shadow:var(--t-o-panneau);
}
html.verre[data-style][data-app="muscu"] .btn-copy{
  background:color-mix(in srgb, #12b981 60%, var(--t-panneau)); border-color:transparent; color:#fff; box-shadow:var(--t-o-panneau);
}

/* ---------- Sélecteur de style (Portail, sous la pile) ---------- */
.style-choix{
  display:flex; gap:4px; width:max-content; margin:18px auto 0; padding:4px; border-radius:999px;
  background:var(--v-soft); border:1px solid var(--v-edge); box-shadow:inset 0 1px 0 var(--v-hi);
}
.style-choix button{
  min-height:44px; min-width:74px; padding:0 14px; border-radius:999px; border:1px solid transparent;   /* 44 px : zone tactile (charte §6.4) */
  background:transparent; color:var(--v-dim); font:600 13px -apple-system, BlinkMacSystemFont, sans-serif;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform var(--t-fast, .15s) var(--ease-out);
}
.style-choix button[aria-checked="true"]{ background:var(--v-soft-on); color:var(--v-text); box-shadow:inset 0 1px 0 var(--v-hi); }
.style-choix button:active{ transform:scale(.97); }
.style-choix-titre{ text-align:center; font-size:12px; color:var(--v-dim); margin:18px 0 0; }
.style-choix-titre + .style-choix{ margin-top:8px; }
/* Changement de style : bascule franche, sans animer chaque ombre de la page */
html.verre.style-bascule *, html.verre.style-bascule *::before, html.verre.style-bascule *::after{ transition:none !important; }

/* ---------- FERMETURE ANIMÉE DES MODALES (12/10/2026, skill apple-design §7) ----------
   Posée par fermerAnime() (commun.js) pendant 0,2 s avant que l'app masque la modale :
   sortie par le même chemin que l'entrée (fond qui s'efface, feuille qui redescend de 24 px ;
   boîte centrée : léger rétrécissement). ease-out, plus rapide que l'entrée. */
.v-ferme{ animation:v-fond-out .2s var(--ease-out) forwards !important; pointer-events:none !important; }
.v-ferme > *{ animation:v-feuille-out .2s var(--ease-out) forwards !important; }
.v-ferme.confirm-overlay > *{ animation-name:v-boite-out !important; }
@keyframes v-fond-out{ to{ opacity:0; } }
@keyframes v-feuille-out{ to{ opacity:0; transform:translateY(24px); } }
@keyframes v-boite-out{ to{ opacity:0; transform:scale(.96); } }
@media (prefers-reduced-motion: reduce){
  .v-ferme > *, .v-ferme.confirm-overlay > *{ animation-name:v-fond-out !important; }   /* fondu seul */
}

/* ==========================================================================
   THÈME CLAIR — surcharges (18/10/2026). En FIN de feuille : elles doivent passer après
   la redirection des jetons (html.verre[data-style]{…}) et les règles par catégorie, de même
   spécificité. Couleurs propres à une app (écrites en dur dans son style.css) : dans la feuille
   de l'app, sous html[data-style="clair"].
   ========================================================================== */
html.verre[data-style="clair"],
html.verre[data-style="clair"][data-app="budget"] body{
  --v-hair:rgba(70,50,20,.10);
  --border-strong:rgba(70,50,20,.16);
  --text:#231d15; --text-dim:rgba(35,29,21,.60);
  --shadow-lg:0 -10px 40px rgba(70,50,20,.18);
}
/* Pile du Portail : les vitres du fond s'éclaircissent au lieu de s'assombrir */
html.verre[data-style="clair"][data-app="portail"] .dash-card[data-rang="1"]{ filter:brightness(.97); }
html.verre[data-style="clair"][data-app="portail"] .dash-card[data-rang="2"]{ filter:brightness(.94); }
html.verre[data-style="clair"][data-app="portail"] .dash-card[data-rang="3"]{ filter:brightness(.91); }
/* Voile derrière l'écran de connexion et les modales : sombre léger, pas noir */
html.verre[data-style="clair"] .overlay-popup{ background:rgba(60,45,25,.35); }
/* Muscu : rond de l'icône du gros bouton « Entraînement » (fond accent) — en clair, le panneau
   blanc effaçait l'icône blanche : voile sombre translucide à la place */
html.verre[data-style="clair"][data-app="muscu"] .big-choice-btn.primary .choice-icon{ background:rgba(0,0,0,.22); }