/* ══════════════════════════════════════════════════════════════════
 * THÈMES DES MAQUETTES — 28/09/2026 (Alexandre : « je veux ces thèmes
 * comme ils sont, identiques dans TR Performance »).
 *   Spartiate (or, par défaut) · Glace (bleu) · Pierre (pierre)
 * Une seule mise en page, trois habillages : Réglages → Coloris pose
 * html[data-coloris]. Chargé en DERNIER.
 *
 * Les paysages (themes/fond-*.webp) sont CALCULÉS par tools/fonds/atelier-fonds.html
 * (29/09, « fais-le toi-même », « sans ChatGPT ») : aucune photo, aucune personne.
 * Les ors de skin-tr.css sont devenus des jetons qui RETOMBENT sur leur
 * valeur d'origine (var(--th-a2, #D4A04A)) : sans jeton posé, Spartiate
 * rend exactement la prod (styles calculés comparés, 9 écrans, 0 écart).
 * Glace et Pierre redéfinissent ces jetons : toute l'app suit.
 *
 * Le thème clair (Affichage) n'est pas touché : tout est sous html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]).
 * ══════════════════════════════════════════════════════════════════ */

/* ── 1. Les jetons ─────────────────────────────────────────────────── */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-fond: #0B0908;
  --th-fond-image: url('./themes/fond-or.webp');
  --th-voile-page: linear-gradient(180deg, rgba(8, 6, 5, .1) 0, rgba(8, 6, 5, .56) 24%, rgba(8, 6, 5, .56) 55%, rgba(8, 6, 5, .62) 100%);
  --th-verre-bord: rgba(255, 255, 255, .12);
  --th-photo-filtre: saturate(.92) contrast(1.06);
  --th-photo-voile: linear-gradient(180deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .12) 38%, rgba(8, 6, 5, .9) 100%);
  --th-tonio-filtre: grayscale(1) sepia(.45) brightness(.78) contrast(1.1);
  --th-tonio-opacite: .62;
  --th-logo-metal: linear-gradient(180deg, #FFFFFF 0%, #E4E6E9 42%, #9CA1A8 58%, #E9EBEE 100%);
  --th-rond-fond: radial-gradient(circle at 50% 30%, #2C2925 0%, #151311 58%, #0A0908 100%);
  --th-rond-bord: rgba(255, 255, 255, .16);
  --th-rond-ombre: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -8px 18px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .6);
  --th-go-fond: radial-gradient(circle at 50% 32%, #2E2822 0%, #120F0C 62%, #070605 100%);
  --th-go-anneau: linear-gradient(160deg, #FFF0C2 0%, #E8B85F 30%, #8A5A20 55%, #F2C46B 80%, #A8702A 100%);
  --th-go-ombre: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 34px rgba(242, 196, 107, .35), 0 14px 30px rgba(0, 0, 0, .7);
  --th-go-texte: #F7D58A;
  --th-illus-fond: radial-gradient(circle at 30% 20%, rgba(242, 196, 107, .28), rgba(0, 0, 0, 0) 65%), linear-gradient(160deg, #2A2621, #121110);
  --th-t-seance-bord: rgba(242, 196, 107, .55); --th-t-seance-ico: #F2C46B;
  --th-t-combat-bord: rgba(239, 75, 63, .7);   --th-t-combat-ico: #FF5A4E;
  --th-t-ops-bord: rgba(60, 200, 120, .62);     --th-t-ops-ico: #4CD68A;
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  /* Glace : l'or devient la glace — du blanc bleuté au bleu nuit. */
  --th-a0: #F2FBFF; --th-a0-rgb: 242, 251, 255;
  --th-a1: #A8E3FF; --th-a1-rgb: 168, 227, 255;
  --th-a2: #5EC4F5; --th-a2-rgb: 94, 196, 245;
  --th-a3: #1F7FC8; --th-a3-rgb: 31, 127, 200;
  --th-a4: #14578F; --th-a4-rgb: 20, 87, 143;
  --th-a5: #0B3860; --th-a5-rgb: 11, 56, 96;
  --tr-or-cta: #2A8BD2; --tr-or-bas: #135696;
  --tr-or: var(--th-a2); --tr-or-vif: var(--th-a1); --tr-bronze: var(--th-a4);
  --tr-or-doux: rgba(var(--th-a2-rgb), .16); --tr-choisi: var(--th-a1); --tr-choisi-vif: var(--th-a0); --tr-choisi-doux: rgba(var(--th-a1-rgb), .18);
  --tr-fond: #0F2A47; --tr-fond-barre: #0F2A47;
  --tr-carte: #173A5E; --tr-carte-2: #1D4670; --tr-carte-3: #245282;
  --tr-texte-2: #E0EEFA; --tr-texte-3: #A9C4DB;
  --tr-ligne: rgba(200, 235, 255, .14); --tr-ligne-forte: rgba(200, 235, 255, .26);
  --tr-champagne: #D9F1FF;
  --th-fond: #0F2A47;
  --th-fond-image: url('./themes/fond-bleu.webp');
  --th-voile-page: linear-gradient(180deg, rgba(8, 30, 58, .34) 0, rgba(8, 30, 58, .44) 26%, rgba(8, 30, 58, .44) 48%, rgba(8, 30, 58, .56) 100%);
  --th-verre-bord: rgba(210, 240, 255, .36);
  --th-photo-filtre: saturate(.72) contrast(1.05) brightness(1.02);
  --th-photo-voile: linear-gradient(180deg, rgba(120, 190, 240, .12) 0, rgba(30, 90, 150, .2) 40%, rgba(8, 36, 66, .9) 100%);
  --th-tonio-filtre: grayscale(1) brightness(.9) contrast(1.05);
  --th-tonio-opacite: .5;
  --th-logo-metal: linear-gradient(180deg, #FFFFFF 0%, #EAF6FF 45%, #9FD0F2 60%, #FFFFFF 100%);
  --th-rond-fond: radial-gradient(circle at 50% 30%, #4E9BD6 0%, #1F5F9C 58%, #123D68 100%);
  --th-rond-bord: rgba(210, 240, 255, .55);
  --th-rond-ombre: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -8px 18px rgba(5, 30, 60, .45), 0 0 22px rgba(120, 200, 255, .35), 0 10px 24px rgba(5, 25, 50, .5);
  --th-go-fond: radial-gradient(circle at 50% 30%, #4FA6E4 0%, #1D69B0 50%, #0D3A6A 100%);
  --th-go-anneau: linear-gradient(160deg, #FFFFFF 0%, #BFE8FF 35%, #4AA6E6 60%, #EAF8FF 100%);
  --th-go-ombre: 0 0 0 1px rgba(10, 40, 80, .4), 0 0 40px rgba(130, 210, 255, .7), 0 14px 30px rgba(5, 25, 50, .6);
  --th-go-texte: #FFFFFF;
  --th-illus-fond: radial-gradient(circle at 30% 20%, rgba(200, 240, 255, .45), rgba(0, 0, 0, 0) 65%), linear-gradient(160deg, #3F86C4, #173F6A);
  --th-t-seance-bord: rgba(210, 240, 255, .5); --th-t-seance-ico: #FFFFFF;
  --th-t-combat-bord: rgba(210, 240, 255, .5); --th-t-combat-ico: #FFFFFF;
  --th-t-ops-bord: rgba(210, 240, 255, .5);    --th-t-ops-ico: #FFFFFF;
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  /* Pierre : l'or devient l'argent de la pierre ; le rond GO garde un anneau champagne (maquette). */
  --th-a0: #FFFFFF; --th-a0-rgb: 255, 255, 255;
  --th-a1: #EDEEF0; --th-a1-rgb: 237, 238, 240;
  --th-a2: #CACCD0; --th-a2-rgb: 202, 204, 208;
  --th-a3: #8E9197; --th-a3-rgb: 142, 145, 151;
  --th-a4: #5E6166; --th-a4-rgb: 94, 97, 102;
  --th-a5: #3A3C40; --th-a5-rgb: 58, 60, 64;
  --tr-or-cta: #7A7E85; --tr-or-bas: #4A4D52;
  --tr-or: var(--th-a2); --tr-or-vif: var(--th-a1); --tr-bronze: var(--th-a4);
  --tr-or-doux: rgba(var(--th-a2-rgb), .16); --tr-choisi: var(--th-a1); --tr-choisi-vif: var(--th-a0); --tr-choisi-doux: rgba(var(--th-a1-rgb), .18);
  --tr-fond: #1A1B1E; --tr-fond-barre: #1A1B1E;
  --tr-carte: #36383C; --tr-carte-2: #414348; --tr-carte-3: #4C4E53;
  --tr-texte-2: #D2D4D7; --tr-texte-3: #A3A6AB;
  --tr-ligne: rgba(255, 255, 255, .12); --tr-ligne-forte: rgba(255, 255, 255, .22);
  --tr-champagne: #ECEDEF;
  --th-fond: #1A1B1E;
  --th-fond-image: url('./themes/fond-pierre.webp');
  --th-voile-page: linear-gradient(180deg, rgba(18, 18, 20, .3) 0, rgba(18, 18, 20, .46) 24%, rgba(18, 18, 20, .46) 55%, rgba(18, 18, 20, .55) 100%);
  --th-verre-bord: rgba(255, 255, 255, .24);
  --th-photo-filtre: grayscale(1) contrast(1.12) brightness(.96);
  --th-photo-voile: linear-gradient(180deg, rgba(40, 40, 44, .05) 0, rgba(40, 40, 44, .15) 40%, rgba(22, 23, 25, .9) 100%);
  --th-tonio-filtre: grayscale(1) brightness(.85) contrast(1.1);
  --th-tonio-opacite: .55;
  --th-logo-metal: linear-gradient(180deg, #FFFFFF 0%, #E6E7E9 45%, #A2A5AA 60%, #F2F3F4 100%);
  --th-rond-fond: radial-gradient(circle at 50% 30%, #6A6D72 0%, #3E4044 58%, #26282B 100%);
  --th-rond-bord: rgba(255, 255, 255, .3);
  --th-rond-ombre: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -8px 18px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .55);
  --th-go-fond: radial-gradient(circle at 50% 30%, #6E7176 0%, #3A3C40 60%, #1F2023 100%);
  --th-go-anneau: linear-gradient(160deg, #FFF6DD 0%, #E3CF9E 30%, #8C7446 55%, #F1E2B8 80%, #9E8452 100%);
  --th-go-ombre: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 28px rgba(240, 225, 185, .3), 0 14px 30px rgba(0, 0, 0, .6);
  --th-go-texte: #FFFFFF;
  --th-illus-fond: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), rgba(0, 0, 0, 0) 65%), linear-gradient(160deg, #66696E, #2C2E31);
  --th-t-seance-bord: rgba(255, 255, 255, .28); --th-t-seance-ico: #F2F3F4;
  --th-t-combat-bord: rgba(255, 255, 255, .28); --th-t-combat-ico: #F2F3F4;
  --th-t-ops-bord: rgba(255, 255, 255, .28);    --th-t-ops-ico: #F2F3F4;
}

/* ── 2. Le paysage, fixe derrière toute l'app ───────────────────────── */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) { background: var(--th-fond) !important; }
/* Plus spécifique que les anciennes règles « body opaque » (skin-tr, skin-visuel, suivi-corps). */
html:not([data-theme="clair"]):not([data-theme="light"]):not([data-theme="crystal-glass-light"]) body, html:not([data-theme="clair"]):not([data-theme="light"]):not([data-theme="crystal-glass-light"])[data-page] body { background: transparent !important; background-image: none !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--th-voile-page), var(--th-fond-image) center top / cover no-repeat, var(--th-fond);
}
/* L'écran de séance (plein écran) garde son noir : on s'y concentre sur le geste. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]).tr-plein-ecran body::before { background: var(--th-fond); }

/* ── 3. Le verre, teinté par thème (Spartiate garde celui de la prod) ── */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-carte, .carte, .bloc, .tr-chrome, .tr-bandeau, .tr-file) {
  /* Verre de glace, assez dense pour que le blanc se lise même devant la neige (contraste mesuré). */
  background-color: rgba(14, 54, 98, .76);
  background-image:
    linear-gradient(180deg, rgba(210, 238, 255, .16), rgba(210, 238, 255, .03) 26%, rgba(210, 238, 255, 0) 50%),
    linear-gradient(180deg, rgba(40, 104, 166, .2), rgba(8, 36, 70, .3));
  border-color: rgba(200, 235, 255, .38);
  box-shadow: inset 0 1px 0 rgba(235, 248, 255, .5), inset 0 -12px 24px rgba(5, 30, 60, .22), 0 0 22px rgba(120, 200, 255, .18), 0 16px 36px -20px rgba(3, 20, 40, .8);
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-ligne { background-color: transparent; background-image: none; box-shadow: none; }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-carte, .carte, .bloc, .tr-chrome, .tr-bandeau, .tr-file) {
  background-color: rgba(46, 48, 52, .78);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, rgba(80, 83, 88, .2), rgba(24, 25, 28, .3));
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 -12px 24px rgba(0, 0, 0, .2), 0 16px 36px -20px rgba(0, 0, 0, .8);
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-ligne { background-color: transparent; background-image: none; box-shadow: none; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-cta.tr-cta-sombre { background: linear-gradient(180deg, #1D4E80, #0F3158); }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-cta.tr-cta-sombre { background: linear-gradient(180deg, #4A4D52, #2C2E31); }

/* Les points du calendrier : les couleurs de la maquette, les mêmes dans les trois thèmes. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .s-seance { background: #F5C451; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .s-combat { background: #EF4B3F; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .s-ops { background: #3CC878; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .s-repas { background: #DCE3EA; opacity: .8; }

/* ── 4. La barre du bas : le casque au centre, en relief ─────────────── */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre { background-color: rgba(10, 42, 80, .88) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%) !important; border-top-color: rgba(210, 240, 255, .3) !important; }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre { background-color: rgba(38, 40, 43, .88) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 40%) !important; border-top-color: rgba(255, 255, 255, .2) !important; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button { color: #EEF3F8 !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre { overflow: visible !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme {
  position: relative; width: 60px; height: 60px; margin: -30px auto 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--th-go-texte);
  background: var(--th-go-fond); box-shadow: var(--th-go-ombre);
}
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2.5px;
  background: var(--th-go-anneau);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme .tr-ico { width: 30px; height: 30px; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"]::before { display: none !important; }
/* « Les onglets gardent leur nom ; Accueil est devenu une tête spartiate » : le rond seul, sans mot
   (le nom reste lu par VoiceOver : aria-label="Accueil"). */
#barre.barre button[data-cible="#/accueil"] { font-size: 0 !important; gap: 0 !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"][aria-current="page"] .pictogramme { color: var(--th-go-texte); }

/* ── 5. L'Accueil des maquettes ──────────────────────────────────────── */
.th-accueil { position: relative; padding-bottom: 28px; }
.th-accueil > .th-accueil-fond { position: absolute !important; top: 0; left: 0; right: 0; height: 330px; pointer-events: none; overflow: hidden; z-index: 0; }
/* Tonio de dos, fondu dans le paysage : la place du personnage des maquettes. */
.th-accueil-tonio {
  position: absolute; top: calc(30px + env(safe-area-inset-top)); right: 0; width: 54%; height: 250px;
  background: url('./photos/nutri-fond.jpg') 64% 8% / 175% auto no-repeat;
  filter: var(--th-tonio-filtre, grayscale(1)); opacity: var(--th-tonio-opacite, .5);
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 56% 46%, #000 18%, rgba(0, 0, 0, .55) 45%, transparent 72%);
          mask-image: radial-gradient(ellipse 46% 50% at 56% 46%, #000 18%, rgba(0, 0, 0, .55) 45%, transparent 72%);
}
.th-tete { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(20px + env(safe-area-inset-top)) 0 0; }   /* 29/09 : un peu plus bas, loin de l’heure */
.th-tonio, .th-bouton-rond, .th-voir-detail, .th-fleche, .th-puce {
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.th-tonio {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 5px 10px 5px 5px;
  border-radius: 26px; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14));
  background: rgba(0, 0, 0, .38); color: var(--tr-texte); text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px -8px rgba(0, 0, 0, .6);
}
.th-tonio-photo { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: url('./photos/tr-menu.jpg') -57px -44px / 161px auto no-repeat, var(--tr-carte-2); }
.th-tonio-mot { min-width: 0; }
.th-tonio-mot b { display: block; font: 600 15px/1.15 var(--tr-police); color: #fff; white-space: nowrap; }
.th-tonio-mot small { display: block; margin-top: 2px; font: 400 12.5px/1.2 var(--tr-police); color: var(--tr-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-chev { display: grid; place-items: center; color: var(--tr-texte-2); }
.th-chev .tr-ico { width: 16px; height: 16px; }
.th-tete-droite { display: flex; gap: 8px; flex: 0 0 auto; }
.th-bouton-rond {
  position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: rgba(0, 0, 0, .38); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px -8px rgba(0, 0, 0, .6);
}
.th-bouton-rond .tr-ico { width: 22px; height: 22px; }
.th-avatar.avec-photo { background-size: cover; background-position: center; }
.th-pastille { position: absolute; top: 8px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: #FF453A; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); }

.th-logo { position: relative; z-index: 1; margin: 10px 0 20px !important; padding: 0 !important; border: 0 !important; text-align: center; line-height: 1; font-size: 16px !important; text-transform: none !important; letter-spacing: 0 !important; background: none !important; }
.th-logo-tr { display: block; width: min(80vw, 310px); margin: 0 auto; filter: var(--th-logo-ombre, drop-shadow(0 3px 0 rgba(0, 0, 0, .35)) drop-shadow(0 10px 22px rgba(0, 0, 0, .55))); }
.th-logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.th-logo .th-fin { display: none; }
.th-logo-perf { display: block; margin-top: 6px; font: italic 700 18px/1 var(--tr-police); letter-spacing: .44em; padding-left: .44em; color: var(--th-logo-texte, #fff); text-shadow: var(--th-logo-texte-ombre, 0 2px 10px rgba(0, 0, 0, .7)); }
.th-logo-devise { display: block; margin-top: 8px; font: italic 700 10.5px/1 var(--tr-police); letter-spacing: .3em; padding-left: .3em; color: var(--th-logo-devise, var(--tr-or-vif)); text-shadow: var(--th-logo-texte-ombre, 0 1px 8px rgba(0, 0, 0, .8)); }

.th-semaine { position: relative; z-index: 1; padding: 12px 10px 10px; }
.th-semaine-tete { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; }
.th-semaine-ico { display: grid; place-items: center; color: #fff; }
.th-semaine-mot { flex: 1; min-width: 0; }
.th-semaine-mot h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 18px/1.15 var(--tr-police) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; background: none !important; }
.th-semaine-mot h2::after { display: none !important; }
.th-semaine-mot small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tr-texte-2); }
.th-voir-detail {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; cursor: pointer;
  border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: rgba(255, 255, 255, .05); color: #fff; font: 500 13px/1 var(--tr-police); white-space: nowrap;
}
.th-jours { display: flex; align-items: center; gap: 3px; }
.th-jours-liste { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.th-fleche {
  flex: 0 0 28px; width: 28px; height: 44px; padding: 0; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: rgba(255, 255, 255, .05); color: #fff; font: 400 20px/1 var(--tr-police);
}
.th-fleche:disabled { opacity: .35; cursor: default; }
.th-jour {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 66px; padding: 6px 0; border: 1px solid transparent; border-radius: 14px; background: none; color: #fff; cursor: pointer;
}
.th-jour + .th-jour::before { content: ""; position: absolute; left: -.5px; top: 16px; bottom: 16px; width: 1px; background: var(--tr-ligne-forte); }
.th-jour.choisi::before, .th-jour.choisi + .th-jour::before { display: none; }
.th-jour-nom { font: 500 12px/1 var(--tr-police); color: var(--tr-texte-2); }
.th-jour-n { font: 600 19px/1 var(--tr-police); color: #fff; }
.th-jour .tr-cal-points { height: 7px; margin: 0; gap: 3px; justify-content: center; }
.th-jour .tr-cal-points i { width: 6px; height: 6px; }
.th-jour .tr-cal-points i.s-prevu { background: none; box-shadow: inset 0 0 0 1.3px var(--tr-texte-2); }
.th-jour.choisi {
  border-color: var(--tr-or);
  background: linear-gradient(180deg, rgba(var(--th-a2-rgb, 212, 160, 74), .2), rgba(var(--th-a2-rgb, 212, 160, 74), .04));
  box-shadow: 0 0 16px rgba(var(--th-a2-rgb, 212, 160, 74), .4), inset 0 0 12px rgba(var(--th-a2-rgb, 212, 160, 74), .14);
}
.th-jour.choisi .th-jour-nom, .th-jour.choisi .th-jour-n { color: var(--tr-or-vif); }
.th-jour.aujourdhui:not(.choisi) .th-jour-n { text-decoration: underline 2px var(--tr-or); text-underline-offset: 5px; }
.th-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 8px 0 2px !important; font-size: 11.5px; color: var(--tr-texte-2); }
.th-legende span { display: inline-flex; align-items: center; gap: 5px; }
.th-legende i { width: 7px !important; height: 7px !important; }
.th-mois { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tr-ligne); }
.th-mois .tr-mois-nav h3 { margin: 0; font: 600 18px/1 var(--tr-police); color: #fff; min-width: 150px; text-align: center; }
.th-mois .tr-mois-nav h3::first-letter { text-transform: uppercase; }
.th-mois .tr-cal { margin-top: 8px; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.th-detail { position: relative; z-index: 1; margin-top: 10px; }

.th-tuiles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.th-tuile {
  position: relative; isolation: isolate; display: block; min-height: 150px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; color: #fff;
  border-radius: 14px; border: 1.5px solid var(--th-tuile-bord, rgba(255, 255, 255, .2)); background: #000;
  box-shadow: 0 0 14px -2px var(--th-tuile-bord, transparent), 0 12px 26px -14px rgba(0, 0, 0, .8);
}
.th-tuile-photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-repeat: no-repeat; filter: var(--th-photo-filtre); }
.th-tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--th-photo-voile); }
.th-tuile-ico {
  position: absolute; left: 8px; bottom: 50px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .22); color: var(--th-tuile-ico, #fff);
}
.th-tuile-ico .tr-ico { width: 19px; height: 19px; }
.th-tuile-mot { position: absolute; left: 8px; right: 6px; bottom: 8px; }
.th-tuile-mot b { display: block; font: 800 14.5px/1 var(--tr-police); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.th-tuile-mot small { display: block; margin-top: 4px; font: 500 10.5px/1.2 var(--tr-police); color: rgba(255, 255, 255, .86); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.th-tuile-chev { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .28); }
.th-tuile-chev .tr-ico { width: 13px; height: 13px; }
.th-t-seance { --th-tuile-bord: var(--th-t-seance-bord); --th-tuile-ico: var(--th-t-seance-ico); }
.th-t-combat { --th-tuile-bord: var(--th-t-combat-bord); --th-tuile-ico: var(--th-t-combat-ico); }
.th-t-ops { --th-tuile-bord: var(--th-t-ops-bord); --th-tuile-ico: var(--th-t-ops-ico); }

.th-ronds { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-evenly; margin: 22px 0 20px; }
.th-rond {
  position: relative; width: 90px; height: 90px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #fff; background: var(--th-rond-fond); border: 1px solid var(--th-rond-bord); box-shadow: var(--th-rond-ombre);
}
.th-rond .tr-ico { width: 22px; height: 22px; }
.th-rond b { font: 700 13px/1 var(--tr-police); letter-spacing: .06em; }
.th-rond small { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1.1 var(--tr-police); color: var(--tr-texte-2); }
.th-rond-go { width: 124px; height: 124px; border: 0; background: var(--th-go-fond); box-shadow: var(--th-go-ombre); gap: 2px; }
.th-rond-go::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 4px; background: var(--th-go-anneau); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.th-rond-go .tr-ico { width: 28px; height: 28px; color: var(--th-go-texte); }
.th-rond-go b { font: 800 31px/1 var(--tr-police); letter-spacing: .02em; color: var(--th-go-texte); text-shadow: 0 0 16px rgba(var(--th-a2-rgb, 212, 160, 74), .45); }
.th-rond-go small { color: #fff; font-size: 12.5px; max-width: 96px; }
.th-lecture { display: inline-block; width: 0; height: 0; margin-top: 3px; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-style: normal; }
.th-rond-go .th-lecture { color: #fff; }

.th-sdj { position: relative; z-index: 1; display: flex; gap: 12px; padding: 10px; }
.th-sdj-photo { flex: 0 0 104px; min-height: 118px; border-radius: 12px; background: url('./photos/tr-menu.jpg') 50% 28% / cover no-repeat; filter: var(--th-photo-filtre); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.th-sdj-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px 0; }
.th-sdj-tete { display: flex; align-items: center; gap: 8px; }
.th-sdj-ico { display: grid; place-items: center; color: var(--tr-or); }
.th-sdj-ico .tr-ico { width: 22px; height: 22px; }
.th-sdj-tete b { font: 600 17px/1.15 var(--tr-police); color: #fff; }
.th-sdj-titre { font: 500 14px/1.25 var(--tr-police); color: var(--tr-texte); }
.th-sdj-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--tr-texte-2); }
.th-sdj-meta span + span { position: relative; }
.th-sdj-meta span + span::before { content: ""; position: absolute; left: -7px; top: 3px; bottom: 3px; width: 1px; background: var(--tr-ligne-forte); }
.th-sdj-go {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; cursor: pointer;
  border-radius: 22px; border: 1.5px solid var(--tr-or); background: rgba(var(--th-a2-rgb, 212, 160, 74), .1);
  color: var(--tr-or-vif); font: 700 13.5px/1 var(--tr-police); letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(var(--th-a2-rgb, 212, 160, 74), .25);
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-sdj-go { background: #EEF8FF; border-color: #FFFFFF; color: #0E4C86; box-shadow: 0 0 18px rgba(170, 225, 255, .6); }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-sdj-go { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); color: #fff; }

.th-fil { position: relative; z-index: 1; margin-top: 14px; padding: 12px 12px 6px; }
.th-fil-tete { display: flex; align-items: center; gap: 10px; }
.th-fil-ico { flex: 0 0 34px; display: grid; place-items: center; color: var(--tr-or); }
.th-fil-ico .tr-ico { width: 28px; height: 28px; }
.th-fil-mot { flex: 1; min-width: 0; }
.th-fil-mot h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 18px/1.15 var(--tr-police) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; background: none !important; }
.th-fil-mot h2::after { display: none !important; }
.th-fil-mot small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tr-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* L'en-tête du fil comme la maquette : loupe, cloche, « + » doré. « Voir tout le fil » passe sous la liste. */
.th-fil-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.th-fil-bouton { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tr-texte, #fff); cursor: pointer; }
.th-fil-bouton .tr-ico { width: 21px; height: 21px; }
.th-fil-bouton .th-pastille { top: 7px; right: 8px; }
.th-fil-plus { width: 38px; height: 38px; margin-left: 2px; background: linear-gradient(180deg, #F7C866, #E3A33A); color: #1A1206; box-shadow: 0 0 14px rgba(242, 184, 75, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.th-fil-plus .tr-ico { width: 20px; height: 20px; }
.th-voir-tout { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 4px; padding: 0; border: 0; border-top: 1px solid var(--tr-ligne); background: none; color: var(--tr-or-vif); font: 600 13.5px/1 var(--tr-police); white-space: nowrap; cursor: pointer; }
.th-puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 12px 12px 10px; }
.th-puces::-webkit-scrollbar { display: none; }
.th-puce {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: rgba(255, 255, 255, .05); color: var(--tr-texte); font: 500 13px/1 var(--tr-police);
}
.th-puce[aria-pressed="true"] { border-color: var(--tr-or); color: var(--tr-or-vif); background: rgba(var(--th-a2-rgb, 212, 160, 74), .14); box-shadow: 0 0 12px rgba(var(--th-a2-rgb, 212, 160, 74), .3); }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-puce[aria-pressed="true"] { background: linear-gradient(180deg, #2B86CC, #155A9E); border-color: #CDEBFF; color: #fff; }
.th-fil-liste { list-style: none; margin: 0; padding: 0; }
.th-fil-liste > li + li { border-top: 1px solid var(--tr-ligne); }
.th-post { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 10px 2px; border: 0; background: none; color: var(--tr-texte); text-align: left; cursor: pointer; font: inherit; }
.th-post-seul { cursor: default; }
.th-av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); }
.th-av-tonio { background: url('./photos/tr-menu.jpg') -60px -46px / 169px auto no-repeat, var(--tr-carte-2); }
.th-av-ico { display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--tr-texte); }
.th-av-ico .tr-ico { width: 22px; height: 22px; }
.th-av-or { color: var(--tr-or); border-color: rgba(var(--th-a2-rgb, 212, 160, 74), .6); box-shadow: 0 0 10px rgba(var(--th-a2-rgb, 212, 160, 74), .25); }
.th-post-mot { flex: 1; min-width: 0; }
.th-post-mot b { display: block; font: 600 13.5px/1.2 var(--tr-police); color: #fff; }
.th-post-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font: 500 14px/1.25 var(--tr-police); color: var(--tr-texte); }
.th-post-mot small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--tr-texte-2); }
.th-post-illus { position: relative; flex: 0 0 96px; height: 66px; border-radius: 10px; display: grid; place-items: center; background: var(--th-illus-fond); border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); color: var(--tr-or-vif); }
.th-post-illus .tr-ico { width: 28px; height: 28px; }
.th-post-illus em { position: absolute; top: 5px; right: 5px; padding: 3px 7px; border-radius: 9px; font: 600 10px/1 var(--tr-police); font-style: normal; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .18); }
.th-post-etiquette { flex: 0 0 auto; padding: 5px 9px; border-radius: 10px; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); font-size: 11px; color: var(--tr-texte-2); }
.th-fil-attente { padding: 14px 4px; color: var(--tr-texte-2); font-size: 14px; }
.th-fil-complet { position: relative; z-index: 1; }

/* ── 6. La cloche ─────────────────────────────────────────────────────── */
.th-cloche-panneau { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: calc(72px + env(safe-area-inset-top)) 16px 0; }
.th-cloche-voile { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.th-cloche-carte { position: relative; width: 100%; max-width: 420px; padding: 12px 14px 8px; background-color: var(--tr-carte) !important; }
.th-cloche-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.th-cloche-tete h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 17px/1.2 var(--tr-police) !important; text-transform: none !important; letter-spacing: 0 !important; color: #fff; }
.th-cloche-tete h2::after { display: none !important; }
.th-cloche-carte .tr-ligne { width: 100%; text-align: left; }
.th-cloche-tonio { background: url('./photos/tr-menu.jpg') -60px -46px / 169px auto no-repeat, var(--tr-carte-2) !important; }

@media (max-width: 360px) {
  .th-tonio-mot small { display: none; }
  .th-logo-tr { font-size: 56px; }
  .th-rond { width: 80px; height: 80px; }
  .th-rond-go { width: 112px; height: 112px; }
  .th-tuile-mot small { font-size: 9.5px; }
}
@media (prefers-reduced-transparency: reduce) {
  .th-tonio, .th-bouton-rond, .th-voir-detail, .th-fleche, .th-puce { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--tr-carte-2); }
}

/* ── 7. Le Suivi (27/09) dans les thèmes ─────────────────────────────── */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --sv-a: #5EC4F5; --sv-a-vif: #A8E3FF; --sv-a-bas: #1F7FC8; --sv-a-rgb: 94, 196, 245;
  --sv-fond: #0F2A47; --sv-carte: rgba(16, 58, 104, .76); --sv-carte-2: rgba(22, 68, 118, .74);
  --sv-bord: rgba(210, 240, 255, .3); --sv-texte: #F2F9FF; --sv-texte-2: #E6F1FA; --sv-texte-3: #C9DDEE;
  --sv-decor: none;
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) { --sv-fond: #1A1B1E; }

/* ── 8. L'icône du Livre (étape 25 : à droite, à mi-hauteur, sur tous les écrans) ──
 * 29/09 (Alexandre) : « je veux voir le livre d'exercices au milieu, le petit icône » — elle reste
 * visible partout, Accueil compris ; et comme le Livre, elle reste Spartiate (or) dans tous les thèmes. */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .btn-livre-bord, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .btn-livre-bord { --tr-or: #D4A04A; --tr-or-vif: #F2C46B; --tr-choisi: #EBC370; --th-a2-rgb: 212, 160, 74; --th-a1-rgb: 235, 195, 112; }

/* ── 9. Les restes de terre cuite de la base (bibliothèque : télécharger les exercices) ── */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tele-exos, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tele-exos { background: var(--tr-carte) !important; border-color: var(--tr-ligne-forte) !important; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tele-exos-k, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tele-exos-k { color: var(--tr-or-vif) !important; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tele-exos-titre, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tele-exos-titre { color: #fff !important; }

/* ── 10. Lisibilité : les pastilles posées sur le paysage prennent la densité du verre ── */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.th-tonio, .th-bouton-rond, .th-voir-detail, .th-fleche, .th-puce:not([aria-pressed="true"])) { background: rgba(10, 44, 82, .72); }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.th-tonio, .th-bouton-rond, .th-voir-detail, .th-fleche, .th-puce:not([aria-pressed="true"])) { background: rgba(34, 35, 38, .74); }
/* Le texte posé directement sur le paysage (titres de page, logo) : une ombre portée qui le détache. */
html:is([data-coloris="bleu"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-page > h1, .tr-grand-titre, .sv-titre, .sv-sous, .th-logo-perf, .th-logo-devise, .retour, .tr-chrome) { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .45); }
html:is([data-coloris="bleu"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-sec-titre { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .45); }
/* Les petits textes posés sur le paysage, hors carte : blancs, détachés par une ombre (les trois thèmes : il y a désormais un paysage derrière). */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.lien-discret, .tr-page > .tr-note, .tr-page > p, .sv-sous) { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 12px rgba(0, 0, 0, .5); }

/* ══ 11. FIDÉLITÉ AUX MAQUETTES (29/09, Alexandre : « un peu plus fidèle aux photos ») ══
 * Le logo TR + casque en vectoriel, les ronds en médaillons, les sept sous-onglets du fil avec
 * leurs icônes, le casque plein au centre de la barre. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-logo-l1: #FFFFFF; --th-logo-l2: #E3E6EA; --th-logo-l3: #7E858E; --th-logo-l4: #D6DAE0; --th-logo-bord: #15110E;
  --th-logo-c1: #FFF0C2; --th-logo-c2: #E8B85F; --th-logo-c3: #8A5A20; --th-logo-c4: #F2C46B;
  --th-logo-texte: #FFFFFF; --th-logo-devise: #F2C46B;
  --th-rond-anneau: conic-gradient(from 210deg, #262626, #8C8C8C 11%, #353535 22%, #C4C4C4 33%, #3A3A3A 45%, #7C7C7C 58%, #242424 71%, #ADADAD 85%, #262626);
  --th-rond-texture: repeating-conic-gradient(rgba(255, 255, 255, .07) 0 3deg, rgba(0, 0, 0, .12) 3deg 7deg);
  --th-rond-reflet: radial-gradient(ellipse 72% 42% at 50% 10%, rgba(255, 255, 255, .16), transparent 70%);
  --th-rond-epaisseur: 7px;
  --th-go-anneau: conic-gradient(from 200deg, #6B4318, #F7D58A 9%, #A8702A 19%, #FFF0C2 31%, #8A5A20 43%, #E8B85F 57%, #6B4318 69%, #F2C46B 83%, #6B4318);
  --th-go-epaisseur: 8px;
  --th-go-ombre: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 30px rgba(242, 196, 107, .5), 0 0 70px rgba(255, 140, 40, .2), 0 14px 30px rgba(0, 0, 0, .7);
  --th-go-fond: radial-gradient(circle at 50% 34%, #2E2822 0%, #120F0C 62%, #060505 100%);
  --th-rond-fond: radial-gradient(circle at 50% 36%, #26231F 0%, #121110 60%, #090807 100%);
  --th-rond-ombre: inset 0 0 18px rgba(0, 0, 0, .85), 0 10px 26px rgba(0, 0, 0, .7);
  --th-derriere-ronds: none;
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-logo-l1: #2461A0; --th-logo-l2: #143F6E; --th-logo-l3: #0A2645; --th-logo-l4: #1A4A7E; --th-logo-bord: #EAF6FF;
  --th-logo-c1: #2461A0; --th-logo-c2: #143F6E; --th-logo-c3: #0A2645; --th-logo-c4: #1A4A7E;
  --th-logo-texte: #0E2A4D; --th-logo-devise: #0E2A4D;
  --th-logo-ombre: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 14px rgba(255, 255, 255, .55));
  --th-logo-texte-ombre: 0 0 2px rgba(255, 255, 255, .9), 0 0 12px rgba(255, 255, 255, .7);
  --th-voile-page: linear-gradient(180deg, rgba(8, 30, 58, .12) 0, rgba(8, 30, 58, .44) 26%, rgba(8, 30, 58, .44) 48%, rgba(8, 30, 58, .56) 100%);
  --th-rond-anneau: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(170, 222, 255, .5) 38%, rgba(255, 255, 255, .9) 68%, rgba(120, 190, 255, .45));
  --th-rond-texture: none;
  --th-rond-reflet: radial-gradient(ellipse 70% 44% at 50% 12%, rgba(255, 255, 255, .55), transparent 72%);
  --th-rond-epaisseur: 5px;
  --th-rond-fond: radial-gradient(circle at 50% 30%, #6DB7EE 0%, #2A73BA 55%, #123F72 100%);
  --th-rond-ombre: inset 0 -10px 20px rgba(5, 30, 60, .45), 0 0 22px rgba(140, 210, 255, .6), 0 10px 24px rgba(5, 30, 60, .5);
  --th-go-anneau: linear-gradient(160deg, #FFFFFF, #CFEFFF 35%, #7CC4F2 60%, #FFFFFF);
  --th-go-epaisseur: 6px;
  --th-go-fond: radial-gradient(circle at 50% 30%, #8CD2FF 0%, #2F86D2 50%, #0E3F74 100%);
  --th-go-ombre: 0 0 0 1px rgba(10, 40, 80, .3), 0 0 42px rgba(160, 225, 255, .95), 0 0 90px rgba(120, 200, 255, .5), 0 14px 30px rgba(5, 25, 50, .5);
  --th-derriere-ronds: radial-gradient(ellipse 18% 70% at 50% 42%, rgba(255, 255, 255, .6), transparent 72%), linear-gradient(90deg, transparent 43%, rgba(225, 242, 255, .3) 50%, transparent 57%);
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-logo-l1: #FFFFFF; --th-logo-l2: #E3E6EA; --th-logo-l3: #858A91; --th-logo-l4: #D6DAE0; --th-logo-bord: #141517;
  --th-logo-c1: #FFFFFF; --th-logo-c2: #D5D8DC; --th-logo-c3: #6F747B; --th-logo-c4: #E6E8EB;
  --th-logo-texte: #FFFFFF; --th-logo-devise: #E6E8EB;
  --th-rond-anneau: conic-gradient(from 210deg, #4A4D52, #E6E8EB 12%, #6A6D72 24%, #FFFFFF 36%, #55585D 50%, #C9CCD0 64%, #4A4D52 78%, #DFE1E4 90%, #4A4D52);
  --th-rond-texture: none;
  --th-rond-reflet: radial-gradient(ellipse 72% 42% at 50% 10%, rgba(255, 255, 255, .2), transparent 70%);
  --th-rond-epaisseur: 5px;
  --th-rond-fond: radial-gradient(circle at 50% 36%, #3E4146 0%, #222428 62%, #151618 100%);
  --th-rond-ombre: inset 0 0 16px rgba(0, 0, 0, .7), 0 10px 24px rgba(0, 0, 0, .6);
  --th-go-anneau: conic-gradient(from 200deg, #8C7446, #FFF6DD 10%, #B39A63 22%, #F1E2B8 34%, #8C7446 48%, #E3CF9E 62%, #9E8452 76%, #FFF6DD 88%, #8C7446);
  --th-go-epaisseur: 7px;
  --th-derriere-ronds: url('./themes/socle-pierre.webp') center / 100% 100% no-repeat;
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-logo .th-panache, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-logo .th-panache { display: none; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-logo .th-fin, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-logo .th-fin { display: inline; }

/* Les médaillons : anneau (métal, or, verre), grain, reflet ; le contenu passe au-dessus. */
.th-ronds::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: 50%; height: 104px; transform: translateY(-50%); background: var(--th-derriere-ronds, none); pointer-events: none; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds::before { top: -40px; bottom: -40px; height: auto; transform: none; }
.th-rond { isolation: isolate; border: 0 !important; }
.th-rond > * { position: relative; z-index: 2; }
.th-rond::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; padding: var(--th-rond-epaisseur, 5px); pointer-events: none;
  background: var(--th-rond-texture, none), var(--th-rond-anneau, rgba(255, 255, 255, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.th-rond::after { content: ""; position: absolute; inset: var(--th-rond-epaisseur, 5px); z-index: 1; border-radius: 50%; pointer-events: none; background: var(--th-rond-reflet, none); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .08); }
.th-rond-go::before { padding: var(--th-go-epaisseur, 6px) !important; background: var(--th-go-anneau) !important; }
.th-rond-go::after { inset: var(--th-go-epaisseur, 6px); }
.th-rond .tr-ico { width: 26px; height: 26px; }
.th-rond-go .tr-casque { width: 34px; height: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .th-rond-go { animation: th-go-souffle 3.2s ease-in-out infinite; }
  @keyframes th-go-souffle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
}

/* Les sept sous-onglets du fil : icône + mot, comme les maquettes. */
.th-puce { display: inline-flex; align-items: center; gap: 7px; padding: 0 15px 0 13px; }
.th-puce .tr-ico { width: 17px; height: 17px; flex: 0 0 17px; }
html[data-coloris="or"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-puce, html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]):not([data-coloris]) .th-puce { background: rgba(10, 9, 8, .55); border-color: rgba(255, 255, 255, .14); }
html[data-coloris="or"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-puce[aria-pressed="true"] { background: rgba(242, 196, 107, .08); border: 1.5px solid #E8B85F; color: #F7D58A; box-shadow: 0 0 14px rgba(242, 196, 107, .35), inset 0 0 10px rgba(242, 196, 107, .12); }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-puce[aria-pressed="true"] { box-shadow: 0 0 16px rgba(140, 210, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-puce[aria-pressed="true"] { background: rgba(227, 207, 158, .1); border: 1.5px solid #E3CF9E; color: #F1E2B8; box-shadow: 0 0 12px rgba(227, 207, 158, .3); }

/* Le casque de la barre : plein, plus grand, dans son médaillon. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme { width: 62px; height: 62px; margin-top: -31px; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme .tr-ico { width: 38px; height: 38px; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme::before { padding: 3px; }

/* ══ 12. FIDÉLITÉ, 2e passe (29/09 : « continue, plus fidèle aux photos ») ══ */
/* Les flèches de la semaine : des ronds, comme la maquette (la zone de toucher garde 44 px de haut). */
.th-fleche { position: relative; flex: 0 0 34px; width: 34px; height: 44px; border: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.th-fleche::before { content: ""; position: absolute; left: 0; top: 5px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .16)); background: rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); z-index: -1; }
.th-fleche { z-index: 0; isolation: isolate; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-fleche::before { background: rgba(10, 44, 82, .72); }

/* Les tuiles : icône, puis « titre + chevron » sur une ligne, puis le sous-titre sur toute la largeur. */
.th-tuile { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; padding: 8px; }
.th-tuile-ico { position: static; }
.th-tuile-mot { position: static; }
.th-tuile-ligne { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.th-tuile-chev { position: static; flex: 0 0 22px; width: 22px; height: 22px; }
.th-tuile-chev .tr-ico { width: 12px; height: 12px; }

/* La Séance du jour : horloge et niveau, chevron à droite. */
.th-sdj { align-items: center; }
.th-sdj-meta span { display: inline-flex; align-items: center; gap: 5px; }
.th-sdj-meta .tr-ico { width: 15px; height: 15px; color: var(--tr-texte-2); }
.th-sdj-chev { flex: 0 0 32px; width: 32px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--tr-texte); cursor: pointer; }
.th-sdj-chev .tr-ico { width: 20px; height: 20px; }

/* Le médaillon du fil : le casque dans un anneau (or, verre, acier). */
.th-fil-ico { position: relative; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--th-go-fond); box-shadow: 0 0 14px rgba(var(--th-a2-rgb, 212, 160, 74), .3); color: var(--th-go-texte); }
.th-fil-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: var(--th-go-anneau); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.th-fil-ico .tr-ico { width: 26px; height: 26px; }

/* Le Challenge (la quête du jour) : la carte dorée de la maquette. */
.th-post-defi { margin: 6px 0; padding: 12px 10px; border-radius: 14px; border: 1px solid rgba(var(--th-a2-rgb, 212, 160, 74), .45); background: linear-gradient(100deg, rgba(var(--th-a2-rgb, 212, 160, 74), .1), rgba(0, 0, 0, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.th-fil-liste > li:has(.th-post-defi) + li, .th-fil-liste > li + li:has(.th-post-defi) { border-top: 0; }
.th-post-defi .th-av { background: var(--th-go-fond); border: 2px solid var(--tr-or); color: var(--tr-or-vif); box-shadow: 0 0 12px rgba(var(--th-a2-rgb, 212, 160, 74), .35); }
.th-post-defi .th-post-mot b { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tr-or-vif); }
.th-post-defi .th-post-titre { font: 700 16px/1.2 var(--tr-police); color: var(--tr-or-vif); }
.th-defi-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 14px; border-radius: 18px; border: 1.5px solid var(--tr-or); color: var(--tr-or-vif); font: 600 13px/1 var(--tr-police); }
.th-defi-go .tr-ico { width: 14px; height: 14px; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-post-defi .th-post-mot b, html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-post-defi .th-post-titre, html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-defi-go { color: #fff; }

/* La barre : de fins séparateurs entre les onglets, l'onglet actif s'allume (maquette). */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button:not([data-cible="#/accueil"]) + button:not([data-cible="#/accueil"]) { background: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .09)) left center / 1px 56% no-repeat !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[aria-current="page"]:not([data-cible="#/accueil"]) { text-shadow: 0 0 12px rgba(var(--th-a2-rgb, 212, 160, 74), .6) !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"][aria-current="page"] .pictogramme { box-shadow: var(--th-go-ombre), 0 0 0 4px rgba(var(--th-a2-rgb, 212, 160, 74), .12); }

/* ══ 13. LE RELIEF (29/09 : « le casque plus réaliste », « de la pierre avec un voile rouge derrière,
 * exactement pareil ») — images CALCULÉES par tools/fonds/atelier-3d.html : métal éclairé, pierre
 * taillée, satin. Le vectoriel reste pour le thème clair. ══ */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-casque-image: url('./themes/casque-or.webp');
  --th-anneau-image: none;
  --th-anneau-go-image: none;
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) { --th-casque-image: url('./themes/casque-argent.webp'); --th-anneau-image: none; --th-anneau-go-image: none; }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) { --th-casque-image: url('./themes/casque-argent.webp'); --th-anneau-image: url('./themes/anneau-acier.webp'); --th-anneau-go-image: url('./themes/anneau-champagne.webp'); }

/* Le logo : l'image de la photo remplace le dessin vectoriel (section 16). */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-logo-tr .th-logo-svg { visibility: hidden; }

/* Le casque : barre du bas, GO, fil, cloche — l'image rendue à la place du tracé. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-casque { background: var(--th-casque-image) center / contain no-repeat; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-casque > * { display: none; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme .tr-casque { width: 44px !important; height: 44px !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond-go .tr-casque { width: 38px; height: 38px; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-fil-ico .tr-casque { width: 30px; height: 30px; }

/* Les ronds : l'anneau rendu (pierre taillée, or, acier, champagne) porte aussi le fond du rond. */
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond { background: transparent; box-shadow: 0 12px 26px rgba(0, 0, 0, .65); }
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond::before { padding: 0 !important; -webkit-mask: none; mask: none; background: var(--th-anneau-image) center / 100% 100% no-repeat !important; }
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond-go::before { background: var(--th-anneau-go-image) center / 100% 100% no-repeat !important; }
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond::after { inset: 14%; box-shadow: none; background: radial-gradient(ellipse 70% 40% at 50% 8%, rgba(255, 255, 255, .1), transparent 70%); }
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond-go { box-shadow: 0 0 34px rgba(242, 196, 107, .45), 0 14px 30px rgba(0, 0, 0, .7); }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond-go { box-shadow: 0 0 26px rgba(240, 225, 185, .3), 0 14px 30px rgba(0, 0, 0, .7) !important; }
/* Le socle (roche, et le voile rouge en Spartiate) : plus haut, pour que la pierre entoure les ronds. */
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds::before { height: 200px; }
html:is([data-coloris="or"], [data-coloris="sparte"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds { margin: 34px 0 30px; }

/* ══ 14. EN-TÊTE, TUILES, ABONNEMENTS, PROFIL (29/09 : « icône profil plus lisible », « Parler à Tonio
 * seulement avec les abonnements », « regroupe les abonnements », « refais le profil, cohérent ») ══ */
/* Parler avec Tonio, verrouillé : cadenas d'or sur la photo, sous-titre qui dit comment l'ouvrir. */
.th-tonio-photo { position: relative; }
.th-cadenas { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--th-go-fond, #120F0C); color: var(--tr-or-vif); box-shadow: 0 0 0 1.5px var(--tr-or), 0 2px 6px rgba(0, 0, 0, .6); }
.th-cadenas .tr-ico { width: 11px; height: 11px; }
.th-tonio.verrou .th-tonio-mot small { color: var(--tr-or-vif); }
/* La cloche : une tuile arrondie (maquette), pastille rouge quand un message attend. */
.th-cloche { border-radius: 14px !important; }
.th-cloche .tr-ico { width: 22px; height: 22px; }
/* Le profil : un médaillon cerclé, bien lisible — ta photo, sinon une silhouette pleine. */
.th-avatar { width: 46px !important; height: 46px !important; border: 0 !important; background: var(--th-go-fond, #15120F) !important; color: var(--th-go-texte, #F7D58A); box-shadow: 0 0 0 2px var(--tr-or), 0 0 14px rgba(var(--th-a2-rgb, 212, 160, 74), .35), 0 6px 14px rgba(0, 0, 0, .5) !important; }
.th-avatar .tr-ico { width: 26px; height: 26px; }
.th-avatar.avec-photo { background-size: cover !important; background-position: center !important; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-avatar, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-avatar { color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 14px rgba(255, 255, 255, .3), 0 6px 14px rgba(0, 0, 0, .5) !important; }

/* Les tuiles : l'icône dans un médaillon sombre cerclé de sa couleur (or, rouge, vert), comme la maquette. */
.th-tuile-ico { width: 38px; height: 38px; background: radial-gradient(circle at 50% 35%, #2A2622, #0B0908 72%); border: 1.5px solid var(--th-tuile-bord, rgba(255, 255, 255, .3)); box-shadow: 0 0 12px -2px var(--th-tuile-bord, transparent), inset 0 1px 0 rgba(255, 255, 255, .12); }
.th-tuile-ico .tr-ico { width: 21px; height: 21px; filter: drop-shadow(0 0 4px var(--th-tuile-ico, transparent)); }
.th-tuile-photo { transition: transform .5s ease; }
.th-tuile::after { background: var(--th-photo-voile), radial-gradient(ellipse 120% 90% at 50% 30%, transparent 45%, rgba(0, 0, 0, .55) 100%); }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tuile-ico, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tuile-ico { background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .22), rgba(0, 0, 0, .35) 72%); }

/* Les abonnements, regroupés : Mois / An, quatre formules en puces, la formule choisie. */
.th-offres { margin-top: 18px; padding: 14px 12px 12px; }
.th-offres-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.th-offres-tete h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 18px/1.15 var(--tr-police) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; background: none !important; }
.th-offres-tete h2::after { display: none !important; }
.th-periode { display: inline-flex; padding: 3px; border-radius: 22px; background: rgba(0, 0, 0, .35); border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); }
.th-periode button { position: relative; min-height: 36px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 18px; background: none; color: var(--tr-texte-2); font: 600 13px/1 var(--tr-police); cursor: pointer; }
.th-periode button[aria-checked="true"] { background: linear-gradient(180deg, var(--tr-or-cta), var(--tr-or-bas)); color: #fff; box-shadow: 0 2px 10px rgba(var(--th-a2-rgb, 212, 160, 74), .35); }
.th-periode em { position: absolute; top: -9px; right: -8px; padding: 2px 5px; border-radius: 8px; font: 700 9.5px/1 var(--tr-police); font-style: normal; color: #06240f; background: #4CD68A; }
.th-formules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 10px; }
.th-formules button { position: relative; min-height: 44px; padding: 0 4px; border-radius: 12px; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: rgba(0, 0, 0, .3); color: var(--tr-texte); font: 600 12.5px/1.1 var(--tr-police); cursor: pointer; }
.th-formules button i { position: absolute; top: -7px; right: -4px; font-style: normal; font-size: 12px; color: var(--tr-or-vif); text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.th-formules button[aria-checked="true"] { border: 1.5px solid var(--tr-or); color: var(--tr-or-vif); background: rgba(var(--th-a2-rgb, 212, 160, 74), .12); box-shadow: 0 0 14px rgba(var(--th-a2-rgb, 212, 160, 74), .3); }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-formules button[aria-checked="true"] { color: #fff; background: linear-gradient(180deg, #2B86CC, #155A9E); }
.th-formule { padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--tr-ligne); }
.th-formule-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.th-formule-tete b { font: 700 17px/1.2 var(--tr-police); color: #fff; margin-right: 2px; }
.th-formule-prix { margin: 6px 0 8px; font: 800 26px/1.1 var(--tr-police); color: var(--tr-or-vif); }
.th-formule-prix small { font: 600 14px var(--tr-police); color: var(--tr-texte-2); }
.th-formule-prix span { display: block; margin-top: 3px; font: 500 12.5px var(--tr-police); color: var(--tr-texte-2); }
.th-formule-inclus { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.th-formule-inclus li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.35; color: var(--tr-texte); }
.th-formule-inclus li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--tr-police); color: #0B0908; background: var(--tr-or-vif); }
.th-formule-go { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px 0 18px; border-radius: 22px; border: 1.5px solid var(--tr-or); background: rgba(var(--th-a2-rgb, 212, 160, 74), .1); color: var(--tr-or-vif); font: 700 14px/1 var(--tr-police); cursor: pointer; }
.th-formule-go .tr-ico { width: 16px; height: 16px; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-formule-go { background: #EEF8FF; border-color: #fff; color: #0E4C86; }
.tr-offres { position: relative; z-index: 1; }

/* Le Profil : carte d'identité, puis trois groupes, comme l'Accueil. */
.th-profil { padding-top: 6px; }
.th-profil-carte { display: flex; align-items: center; gap: 14px; padding: 16px 14px; margin-top: 6px; }
.th-profil-medaillon { position: relative; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: var(--th-go-fond, #15120F); color: var(--th-go-texte, #F7D58A); box-shadow: 0 0 0 2.5px var(--tr-or), 0 0 20px rgba(var(--th-a2-rgb, 212, 160, 74), .35), 0 8px 18px rgba(0, 0, 0, .55); }
.th-profil-medaillon .tr-ico { width: 40px; height: 40px; }
.th-profil-medaillon.avec-photo { background-size: cover; background-position: center; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil-medaillon, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil-medaillon { color: #fff; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .85), 0 0 18px rgba(255, 255, 255, .3), 0 8px 18px rgba(0, 0, 0, .5); }
.th-profil-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.th-profil-qui h1 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 700 22px/1.15 var(--tr-police) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; background: none !important; }
.th-profil-qui h1::after { display: none !important; }
.th-profil-metier { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%; padding: 0 12px 0 8px; border-radius: 18px; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .16)); background: rgba(0, 0, 0, .3); color: var(--tr-texte); font: 500 13px/1.2 var(--tr-police); text-align: left; cursor: pointer; }
.th-profil-metier .tr-ico { width: 18px; height: 18px; color: var(--tr-or-vif); flex: 0 0 18px; }
.th-profil-offre { align-self: flex-start; min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1.5px solid var(--tr-or); background: rgba(var(--th-a2-rgb, 212, 160, 74), .1); color: var(--tr-or-vif); font: 700 12px/1 var(--tr-police); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.th-profil-sec { margin: 22px 4px 8px !important; padding: 0 !important; border: 0 !important; font: 700 12px/1 var(--tr-police) !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--tr-or-vif) !important; background: none !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.th-profil-sec::after { display: none !important; }
.th-profil-liste { margin-top: 0 !important; padding: 2px 12px !important; }
.th-profil-liste .tr-liste > li + li { border-top: 1px solid var(--tr-ligne); }
.th-profil .th-ligne { background: none !important; background-image: none !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; min-height: 62px; gap: 12px; font-size: 16px !important; }
.th-ligne-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--th-go-fond, #15120F); color: var(--tr-or-vif); box-shadow: 0 0 0 1.5px rgba(var(--th-a2-rgb, 212, 160, 74), .55); }
.th-ligne-ico .tr-ico { width: 19px !important; height: 19px !important; color: inherit !important; flex: 0 0 19px !important; }
.th-ligne-ico .th-av { flex: 0 0 36px; width: 36px; height: 36px; border: 0; background: url('./photos/tr-menu.jpg') -49px -37px / 138px auto no-repeat; }
.th-ligne .tr-ligne-mot small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--tr-texte-2); }
.th-cadenas-ligne { display: inline-grid; place-items: center; vertical-align: -2px; font-style: normal; color: var(--tr-or-vif); }
.th-cadenas-ligne .tr-ico { width: 14px; height: 14px; }
.th-profil .tr-cta { margin-top: 18px; }
.th-profil-mentions { margin: 18px 0 0; text-align: center; font-size: 13px; }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ligne-ico, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ligne-ico { color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil-sec, html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil-sec { color: #fff !important; }

/* Lisibilité : ce qui est posé à même le paysage (lien retour, intitulés de section) reçoit un fond de verre sombre. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .retour { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil-sec, html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil > .tr-note, html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil-mentions .lien-discret { display: inline-block; padding: 5px 10px !important; border-radius: 10px; background: rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-profil > .tr-note { display: table; margin-left: auto; margin-right: auto; }

/* ══ 15. LA PHOTO (29/09) — « TR Performance comme sur la photo, sur tous les thèmes », « le casque de
 * l'onglet Accueil exactement comme la photo », et le thème en plus : « Sparte », copie de la photo. ══ */

/* ── Le thème « Sparte » : la photo ── */
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-fond: #0A0908;
  --th-fond-image: url('./themes/fond-sparte.webp');
  --th-voile-page: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .1) 22%, rgba(0, 0, 0, .38) 40%, rgba(0, 0, 0, .45) 100%);
  --tr-carte: #0E0E10; --tr-carte-2: #151518; --tr-carte-3: #1C1C20;
  --tr-ligne: rgba(255, 255, 255, .1); --tr-ligne-forte: rgba(255, 255, 255, .18);
  --th-verre-bord: rgba(255, 255, 255, .2);
  --th-tonio-opacite: .38;
  --th-t-seance-bord: rgba(255, 255, 255, .34); --th-t-seance-ico: #F2C46B;
  --th-t-combat-bord: rgba(214, 64, 52, .72); --th-t-combat-ico: #E8453A;
  --th-t-ops-bord: rgba(255, 255, 255, .34); --th-t-ops-ico: #3CC878;
}
/* Les cadres de la photo : noir profond, liseré blanc très fin, reflet en haut, ombre portée. */
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-carte, .carte, .bloc, .tr-chrome, .tr-bandeau, .tr-file) {
  background-color: rgba(9, 9, 10, .88);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 30%, rgba(255, 255, 255, 0) 60%);
  border-color: rgba(255, 255, 255, .17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .6), 0 14px 30px -12px rgba(0, 0, 0, .85);
}
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-ligne { background-color: transparent; background-image: none; box-shadow: none; }
/* La sélection (le jour, « Tout », « Démarrer ») : bordure d'or lumineuse, comme les cadres jaunes de la photo. */
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-jour.choisi { border: 1.5px solid #E8B85F; background: linear-gradient(180deg, rgba(242, 196, 107, .1), rgba(242, 196, 107, .02)); box-shadow: 0 0 14px rgba(242, 196, 107, .35), inset 0 0 10px rgba(242, 196, 107, .1); }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-fleche::before, html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-voir-detail, html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tonio, html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-bouton-rond:not(.th-avatar), html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-puce:not([aria-pressed="true"]) { background: rgba(8, 8, 9, .82) !important; border: 1px solid rgba(255, 255, 255, .22) !important; }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tuile { border-width: 1.2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 16px -4px var(--th-tuile-bord, transparent), 0 12px 26px -14px rgba(0, 0, 0, .9); }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tuile-ico { border: 0; background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .75), rgba(0, 0, 0, .45) 70%); box-shadow: 0 0 14px -4px var(--th-tuile-ico); }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tuile-chev { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .45); }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-sdj-go { background: rgba(8, 8, 9, .6); border: 1.5px solid #E8B85F; color: #F7E3B5; box-shadow: 0 0 16px rgba(242, 196, 107, .45); }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-sdj-go .th-lecture { color: #F2C46B; }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre { background: linear-gradient(180deg, rgba(20, 20, 22, .96), rgba(6, 6, 7, .98)) !important; border-top: 1px solid rgba(255, 255, 255, .14) !important; }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond small, html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond b { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond-go b { color: #F2C46B; }
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond-go .th-lecture { color: #8E8E90; }

/* ── Le calendrier sur des années : « Aujourd'hui », sélecteur année / mois (29/09) ── */
.th-aujourdhui { display: inline-flex; align-items: center; min-height: 32px; margin-top: 3px; padding: 0 12px; border-radius: 16px; border: 1.5px solid var(--tr-or); background: rgba(var(--th-a2-rgb, 212, 160, 74), .1); color: var(--tr-or-vif); font: 600 12.5px/1 var(--tr-police); cursor: pointer; }
.th-mois-titre { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 14px; background: none; color: #fff; cursor: pointer; }
.th-mois-titre h3 { margin: 0 !important; min-width: 0 !important; }
.th-mois-titre span { color: var(--tr-or-vif); font-size: 13px; }
.th-mois-choix { margin: 8px 0 4px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--tr-ligne); }
.th-annee { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 8px; }
.th-annee b { min-width: 64px; text-align: center; font: 700 20px/1 var(--tr-police); color: #fff; }
.th-mois-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.th-mois-grille button { min-height: 44px; border-radius: 12px; border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); background: rgba(255, 255, 255, .04); color: var(--tr-texte); font: 600 13px/1 var(--tr-police); cursor: pointer; }
.th-mois-grille button[aria-pressed="true"] { border: 1.5px solid var(--tr-or); color: var(--tr-or-vif); background: rgba(var(--th-a2-rgb, 212, 160, 74), .14); }
.th-mois-grille button:disabled { opacity: .3; cursor: default; }
.th-mois-choix .th-aujourdhui { display: flex; width: 100%; justify-content: center; min-height: 44px; margin-top: 10px; border-radius: 22px; }

/* ══ 16. IDENTIQUE À LA PHOTO — « zéro compromis » (29/09). Les pixels de la photo elle-même :
 * le logo (lettres noires, casque d'or, panache rouge, devise), le médaillon de l'onglet Accueil,
 * et la bande des trois ronds (pierre, ruban rouge, HIER · GO · DEMAIN). Les boutons restent vivants
 * par-dessus, à la place exacte de chaque rond. ══ */
/* Le haut de l'Accueil = la bannière d'Alexandre (29/09 soir) : casque, anneau d'or, TR argent et or, ciel d'orage
 * doré (themes/banniere-accueil.webp, tools/logo/banniere.py, bords fondus). Sur TOUS les thèmes. PERFORMANCE en
 * argent entre deux filets d'or et la devise de la bannière en or : vrai texte, posé sur le bas sombre de l'image. */
.th-accueil .th-logo { position: relative; margin: 0 -16px 16px !important; padding: 0 !important; }
.th-accueil .th-logo-tr { display: block !important; width: 100% !important; max-width: 520px; margin: 0 auto !important; aspect-ratio: 1240 / 762 !important; background: url('./themes/banniere-accueil.webp') center / 100% 100% no-repeat !important; filter: none !important; }
.th-accueil .th-logo-tr .th-logo-svg { visibility: hidden; }
.th-accueil .th-logo-perf { text-shadow: none !important; position: relative; display: flex !important; align-items: center; justify-content: center; gap: 12px; width: auto !important; margin: -7.5% 0 0 !important; padding: 0 !important; letter-spacing: 0 !important; }
.th-accueil .th-logo-perf b { text-shadow: none !important; font: italic 900 clamp(19px, 6vw, 26px)/1 var(--tr-police); letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; color: #EDEFF2; background: linear-gradient(180deg, #FFFFFF 0%, #E9ECEF 42%, #9DA3AA 62%, #F4F5F6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(0, 0, 0, .55)); }
.th-accueil .th-logo-perf::before, .th-accueil .th-logo-perf::after { content: ''; flex: 1 1 0; max-width: 64px; height: 1.5px; background: linear-gradient(90deg, transparent, #D9A441); }
.th-accueil .th-logo-perf::after { background: linear-gradient(90deg, #D9A441, transparent); }
.th-accueil .th-logo-devise { display: block !important; width: auto !important; margin: 10px 18px 0 !important; padding: 0 !important; font: italic 800 clamp(9.5px, 2.75vw, 11.5px)/1.35 var(--tr-police) !important; letter-spacing: .13em !important; text-align: center; color: #F2B84B !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .6) !important; text-wrap: balance; }
html:is([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-accueil .th-logo-devise { color: #9A6412 !important; text-shadow: none !important; }

html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme { background: url('./themes/medaillon-photo.webp') center / 100% 100% no-repeat !important; box-shadow: 0 0 22px rgba(242, 196, 107, .38), 0 8px 18px rgba(0, 0, 0, .7) !important; width: 68px !important; height: 68px !important; margin-top: -36px !important; border-radius: 50%; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme::before { display: none !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme .tr-casque { visibility: hidden; }

/* La bande des ronds (Spartiate, Sparte) : l'image de la photo, pleine largeur, et trois boutons posés dessus. */
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds { display: block; position: relative; width: min(100vw, 720px); margin: 18px 0 16px calc(50% - min(50vw, 360px)); aspect-ratio: 1248 / 300; background: url('./themes/ronds-photo.webp') center / 100% 100% no-repeat; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds::before { display: none !important; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond { position: absolute; top: 49%; transform: translate(-50%, -50%); width: 18.3%; height: auto; aspect-ratio: 1; margin: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; animation: none !important; filter: none !important; color: transparent; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond::before, html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond::after { display: none !important; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond > :not(.th-rond-etat) { visibility: hidden; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-hier { left: 15.14%; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-go { left: 49.88%; width: 23.6%; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-demain { left: 85.22%; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond:focus-visible { outline: 2px solid #F2C46B; outline-offset: 2px; border-radius: 50%; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond:active { transform: translate(-50%, -50%) scale(.97); }
/* Ce que la photo ne peut pas dire : fait hier, prévu demain, fait aujourd'hui — une petite pastille d'or. */
.th-rond-etat { display: none; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-etat { display: grid; place-items: center; position: absolute; top: 4%; right: 4%; width: 22%; aspect-ratio: 1; min-width: 16px; border-radius: 50%; font: 800 11px/1 var(--tr-police); font-style: normal; color: #1A1206; background: linear-gradient(180deg, #FFE7A6, #D49A3C); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .7), 0 0 10px rgba(242, 196, 107, .6); visibility: visible !important; }

/* Le calendrier rabattable : replié, UNE ligne ; déplié, le mois entier. Le geste est en bas, toujours visible. */

/* ══ 17. Le médaillon de l'onglet Accueil ENTIER sur iPhone (29/09, Alexandre : « doit s'afficher entièrement ») :
 * Safari coupe ce qui dépasse d'un élément qui porte un backdrop-filter ; le médaillon dépasse de la barre
 * de 21 px. Le flou passe donc sur un calque ::after, sous le contenu ; la barre elle-même ne floute plus. ══ */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre.barre { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre.barre::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"], html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button[data-cible="#/accueil"] .pictogramme { overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; clip-path: none !important; }

/* ══ 18. Les photos bien cadrées (29/09, « photo mal positionnée ») : l'icône de chaque tuile passe dans le coin,
 * petite, et ne cache plus Tonio ; COMBAT zoomé sur son dos (tr-boxe.jpg, 200 %) ; Séance du jour sur son visage. ══ */
.th-tuiles .th-tuile .th-tuile-ico { position: absolute !important; top: 7px; left: 7px; width: 30px !important; height: 30px !important; }
.th-tuiles .th-tuile .th-tuile-ico .tr-ico { width: 17px !important; height: 17px !important; }
.th-sdj .th-sdj-photo { background-size: 175% auto !important; background-position: 49% 30% !important; }
.th-post-illus.avec-photo { background-color: #0B0A09; background-repeat: no-repeat; }
/* Le sous-titre du fil ne se coupe plus depuis que la loupe, la cloche et le « + » sont là. */
.th-fil-mot small { white-space: normal !important; overflow: visible !important; }

/* ══ 19. Combat → « Par discipline » : sur deux colonnes, la carte (150 px) laissait 40 px au texte et
 * « CATALOGUE » débordait. La photo passe au-dessus, en bandeau, le texte dessous sur toute la largeur. ══ */
html[data-page="box"] .box-disc-grid .box-disc-card, html[data-page="box"] .box-disc-grid .box-disc-card.carte { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 8px 8px 10px !important; min-height: 0 !important; overflow: hidden !important; }
html[data-page="box"] .box-disc-grid .tr-disc-vignette { width: 100% !important; height: 78px !important; flex: 0 0 auto !important; border-radius: 10px !important; }
html[data-page="box"] .box-disc-grid .box-disc-card .corps { padding: 0 4px; gap: 3px !important; }
html[data-page="box"] .box-disc-grid .box-disc-card .corps small { font-size: 12px !important; }
html[data-page="box"] .box-disc-grid .box-disc-card .pastille { justify-self: start; align-self: start; width: auto !important; max-width: 100%; font-size: 10.5px !important; letter-spacing: .06em !important; padding: 3px 8px !important; }

/* ══ 20. Sous-titre de chapitre (Ops…) : le titre se pose sur le bas de la photo (voulu), mais la première ligne
 * du sous-titre tombait encore sur la photo (bandeau −58 px). Il commence sous la photo. ══ */
.tr-page > .tr-bandeau ~ h1.tr-titre-section + .tr-chapitre-sous { margin-top: 26px !important; }

/* ══ 21. Ops « Quel est ton métier ? » : quatre fois la même photo, et « 21 métiers » illisible dessus.
 * Chaque famille a son cadrage (Armées : la photo de Tonio en tenue), et un voile plus dense sous le texte. ══ */
:is(.tr-ops, .tr-terrain) .tr-ops-famille { background-image: linear-gradient(90deg, rgba(8, 8, 8, .86) 0%, rgba(8, 8, 8, .55) 58%, rgba(8, 8, 8, .25) 100%), url('./photos/fond-ops.jpg') !important; background-size: cover, 230% auto !important; }
:is(.tr-ops, .tr-terrain) .tr-ops-famille[data-famille="police"] { background-position: center, 12% 18% !important; }
:is(.tr-ops, .tr-terrain) .tr-ops-famille[data-famille="gendarmerie"] { background-position: center, 58% 12% !important; }
:is(.tr-ops, .tr-terrain) .tr-ops-famille[data-famille="armees"] { background-image: linear-gradient(90deg, rgba(8, 8, 8, .86) 0%, rgba(8, 8, 8, .5) 58%, rgba(8, 8, 8, .2) 100%), url('./photos/tr-militaire.jpg') !important; background-size: cover, 100% auto !important; background-position: center, 50% 14% !important; }
:is(.tr-ops, .tr-terrain) .tr-ops-famille[data-famille="secours"] { background-position: center, 96% 70% !important; }
:is(.tr-ops, .tr-terrain) .tr-ops-famille small { color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
:is(.tr-ops, .tr-terrain) .tr-ops-famille b { text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }

/* ══ 22. L'onglet du Livre se range pendant le défilement (il reste à droite, au milieu, sur tous les écrans). ══ */
html .btn-livre-bord { transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease, top .32s cubic-bezier(.2, .8, .2, 1) !important; }
html.livre-range .btn-livre-bord { transform: translate(30px, -50%) !important; opacity: .9; }
@media (prefers-reduced-motion: reduce) { html .btn-livre-bord { transition: none !important; } }

/* ══ 23. Sparte : la barre du bas en dalles de pierre, comme la photo (dalle sombre, arête claire en haut,
 * joints entre les dalles, le médaillon posé au milieu, sans dalle). ══ */
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre.barre {
  background: linear-gradient(180deg, rgba(24, 24, 26, .5), rgba(0, 0, 0, .78)), url('./themes/fond-sparte.webp') center 78% / 170% auto !important;
  border-top: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 -10px 26px rgba(0, 0, 0, .6) !important;
}
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button:not([data-cible="#/accueil"]) {
  margin: 5px 2px !important; border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 45%, rgba(0, 0, 0, .28)) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .45) !important;
}
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button::before,
html[data-coloris="sparte"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #barre.barre button::after { border: 0 !important; background: none !important; box-shadow: none !important; }

/* ══ 24. Glace et Pierre : sous HIER / DEMAIN, le nom de la séance était coupé (« Remise en r… »). Deux lignes. ══ */
.th-ronds .th-rond small { max-width: 78%; white-space: normal !important; overflow: hidden; text-overflow: clip !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.08 !important; font-size: 9px !important; text-align: center; }

/* ══ 25. « Voir tout le fil » : le fil complet se posait à nu sur le paysage (textes gris illisibles).
 * Il a sa propre carte sombre, comme le fil compact. ══ */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-fil-complet:not([hidden]) { margin-top: 12px; padding: 16px 14px; border-radius: 18px; background: var(--tr-carte, rgba(12, 12, 13, .9)); border: 1px solid var(--th-verre-bord, rgba(255, 255, 255, .14)); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .8); }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-fil-complet .tr-sec-sous, html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-fil-complet .tr-note { color: var(--tr-texte-2, rgba(255, 255, 255, .78)) !important; }

/* ══ 26. La bande HIER · GO · DEMAIN plus grande (×1,12) et fondue dans les tuiles au-dessus et dans
 * « Séance du jour » en dessous (29/09, Alexandre : « que ça touche… en fondu », puis « pas de jour entre les
 * rectangles, beaucoup mieux intégré, sur tous les thèmes »).
 *   ::after  = la bande de la photo (pierre + ruban rouge), agrandie de 12 % autour de son centre : chaque rond
 *              garde sa place (x' = 50 + (x − 50) × 1,12) ; elle déborde de 30 px en fondu sous ses voisines ;
 *   ::before = la MÊME pierre au voile rouge, floutée, qui remonte derrière les tuiles et descend derrière
 *              « Séance du jour » : entre les rectangles on voit la pierre, plus le fond d'écran.
 * Chaque thème teinte cette pierre (Pierre : grise ; Glace : voile bleu glacier). ══ */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds { --deb: 30px; z-index: 0 !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds::before {
  content: '' !important; display: block !important; position: absolute !important; z-index: -2 !important; pointer-events: none;
  left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; top: -200px !important; bottom: -180px !important; height: auto !important; transform: none !important;
  background: url('./themes/ronds-photo.webp') 31% 55% / auto 420% no-repeat !important;   /* seulement la pierre et le ruban ENTRE deux ronds : agrandie, elle ne laisse deviner aucun rond ni « GO » */
  filter: var(--th-pierre-filtre, blur(9px) brightness(.62) saturate(1.2));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds { --th-pierre-filtre: blur(5px) brightness(.8); }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds::before { background: url('./themes/socle-pierre.webp') center / cover no-repeat !important; }   /* Pierre : SA roche grise */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds { --th-pierre-filtre: hue-rotate(195deg) saturate(.8) brightness(.95) blur(9px); }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds {
  aspect-ratio: auto !important; height: calc(min(100vw, 720px) * 336 / 1248 + 2 * var(--deb)) !important;
  margin-top: calc(-1 * var(--deb) + 6px) !important; margin-bottom: calc(-1 * var(--deb) + 6px) !important;
  background: none !important; -webkit-mask-image: none !important; mask-image: none !important;
}
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('./themes/ronds-photo.webp') center / 112% calc(100% - 2 * var(--deb)) no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 8px, #000 calc(var(--deb) + 16px), #000 calc(100% - var(--deb) - 16px), transparent calc(100% - 8px));
  mask-image: linear-gradient(180deg, transparent 0, transparent 8px, #000 calc(var(--deb) + 16px), #000 calc(100% - var(--deb) - 16px), transparent calc(100% - 8px));
}
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond { top: 50% !important; width: 20.5% !important; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-hier { left: 10.96% !important; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-go { left: 49.87% !important; width: 26.43% !important; }
html:is([data-coloris="or"], [data-coloris="sparte"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-ronds .th-rond-demain { left: 89.45% !important; }
.th-accueil .th-tuiles, .th-accueil .th-sdj { position: relative; z-index: 1; }

/* ══ 27. La flèche retour jamais sous l'heure (29/09) : en plein écran (fin de séance…), la barre du haut est
 * cachée et « ← … » devenait le premier élément de la page, sous l'heure de l'iPhone. ══ */
html.tr-plein-ecran #app > .retour:first-child { margin-top: calc(env(safe-area-inset-top) + 10px) !important; }
/* … et partout ailleurs, un peu d'air entre la barre du haut et la flèche (elle collait au bord). */
#app .retour { margin-top: 8px; }

/* ══ 28. Les 6 séances TR offertes (29/09, les affiches de Tonio redessinées dans l'app) ══════════════
 * Carte-affiche : photo de Tonio, voile doré du bas, « TR » argent massif + nom en or italique brossé,
 * comme ses affiches. En grand sur la fiche : bandeau + grille numérotée (numéro or, nom, dose). ══ */
.tr-offertes { position: relative; z-index: 1; margin: 16px 0 6px; }
.tr-offertes-tete { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 10px; }
.tr-offertes-tete h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 800 18px/1.1 var(--tr-police) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; background: none !important; }
.tr-offertes-tete h2::after { display: none !important; }
.tr-offertes-tete small { font-size: 12.5px; color: rgba(255, 255, 255, .82); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.tr-offertes-tete h2 { text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.tr-offertes-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tr-offertes-rail::-webkit-scrollbar { display: none; }
.tr-affiche { position: relative; flex: 0 0 148px; height: 208px; scroll-snap-align: start; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px; border-radius: 16px; text-align: left; cursor: pointer; color: #fff;
  border: 1.5px solid rgba(242, 184, 75, .55); background: #0b0a09; box-shadow: 0 0 16px -4px rgba(242, 184, 75, .45), 0 12px 24px -12px rgba(0, 0, 0, .9); }
.tr-affiche-photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-repeat: no-repeat; filter: saturate(1.05) contrast(1.05); }
.tr-affiche::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 6, .1) 0%, rgba(10, 8, 6, .15) 35%, rgba(24, 14, 4, .88) 72%, rgba(8, 6, 4, .97) 100%), radial-gradient(ellipse 90% 45% at 50% 100%, rgba(242, 160, 50, .28), transparent 70%); }
.tr-affiche-offerte { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 8px; font: 800 10px/1 var(--tr-police); letter-spacing: .08em; text-transform: uppercase; color: #1A1206; background: linear-gradient(180deg, #F7C866, #E3A33A); }
.tr-affiche-titre { display: flex; flex-direction: column; line-height: .86; }
.tr-affiche-titre b { font: italic 900 34px/.9 var(--tr-police); letter-spacing: -.02em; color: #EDEFF2; background: linear-gradient(180deg, #FFFFFF, #C9CDD2 55%, #8E949B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.tr-affiche-titre i { font: italic 900 23px/1 var(--tr-police); letter-spacing: -.01em; text-transform: uppercase; color: #F2B84B; background: linear-gradient(180deg, #FFE39A, #F2B84B 50%, #C27A1C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .85)); transform: skewX(-6deg); transform-origin: left; }
.tr-affiche-ligne { font: 700 10.5px/1.25 var(--tr-police); text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .9); }
.tr-affiche-pied { font: 600 11px/1.2 var(--tr-police); color: #F2C56E; }
.tr-affiche:active { transform: scale(.98); }
/* la fiche d'une séance offerte */
.tr-offerte-mot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; color: var(--tr-texte-2); }
.tr-affiche-grande { margin: 0 0 16px; border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(242, 184, 75, .5); background: #0b0a09; box-shadow: 0 0 22px -6px rgba(242, 184, 75, .45); }
.tr-affiche-grande-haut { position: relative; isolation: isolate; height: 190px; display: flex; align-items: flex-end; padding: 14px; }
.tr-affiche-grande-haut::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 6, .05), rgba(10, 8, 6, .2) 45%, rgba(10, 8, 6, .92)); }
.tr-affiche-grande .tr-affiche-titre b { font-size: 52px; }
.tr-affiche-grande .tr-affiche-titre i { font-size: 36px; }
.tr-affiche-bandeau { margin: 0; padding: 10px 14px; text-align: center; font: italic 900 14px/1.2 var(--tr-police); letter-spacing: .06em; text-transform: uppercase; color: #F2C56E; border-top: 1px solid rgba(242, 184, 75, .45); border-bottom: 1px solid rgba(242, 184, 75, .45); background: linear-gradient(90deg, transparent, rgba(242, 184, 75, .12), transparent); }
.tr-affiche-grille { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tr-affiche-grille li { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 10px 10px 10px 42px; border-radius: 12px; background: linear-gradient(160deg, #1d1813, #0e0c0a); border: 1px solid rgba(255, 255, 255, .1); }
.tr-affiche-num { position: absolute; left: 10px; top: 6px; font: italic 900 30px/1 var(--tr-police); color: #F2B84B; background: linear-gradient(180deg, #FFE39A, #E3A33A 60%, #9C5E12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tr-affiche-grille b { font: italic 800 13px/1.15 var(--tr-police); text-transform: uppercase; color: #fff; }
.tr-affiche-grille em { font: 700 12px/1.2 var(--tr-police); font-style: normal; color: #F2C56E; margin-top: auto; }
.tr-affiche-devise { margin: 0; padding: 10px 14px 14px; text-align: center; font: 800 11px/1.3 var(--tr-police); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
/* les offres : le ruban de lancement, les autres formules */
.th-lancement { margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; font: 600 12.5px/1.3 var(--tr-police); color: #1A1206; background: linear-gradient(90deg, #F7C866, #E3A33A); }
.th-lancement b { font-weight: 900; }
.tr-offre-page .th-lancement { margin: 10px 0 12px; }
.th-formules { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px !important; scrollbar-width: none; margin-right: -4px; padding-bottom: 2px; }
.th-formules::-webkit-scrollbar { display: none; }
.th-formules > button { flex: 0 0 auto !important; padding: 0 12px !important; white-space: nowrap; }
.tr-offre-periodes .puce small { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }
.tr-offre-sous { display: block; font-size: 13px; opacity: .75; margin-top: 2px; }
.tr-offre-autres { display: grid; gap: 6px; }
.tr-offre-autres .tr-ligne { width: 100%; }
/* Le fil infini : trois points dorés en bas, le temps de charger la suite. */
.th-fil-suite { display: flex; justify-content: center; gap: 6px; padding: 16px 0 8px; list-style: none; }
.th-fil-suite span { width: 7px; height: 7px; border-radius: 50%; background: #F2B84B; opacity: .35; animation: th-suite 1.2s ease-in-out infinite; }
.th-fil-suite span:nth-child(2) { animation-delay: .2s; } .th-fil-suite span:nth-child(3) { animation-delay: .4s; }
@keyframes th-suite { 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .th-fil-suite span { animation: none; opacity: .7; } }

/* ══ 14. LA LISIBILITÉ (29/09, reprise : « cohérence totale, sans bug, livrable ») ══════════════
 * Mesuré sur 12 écrans × 4 thèmes : chaque texte contre le PIRE fond réellement peint sous lui
 * (capture de l'écran textes effacés, 5e centile), seuils WCAG AA 4,5 / 3. Avant : 131 textes sous
 * le seuil (Spartiate 31, Sparte 18, Glace 54, Pierre 28). Rien ne change de place ni de couleur :
 * (a) un halo sous le texte posé à nu sur le paysage ; (b) un verre sous les puces et pastilles posées
 * à nu ; (c) le gris secondaire un cran plus clair ; (d) les mots des ronds de Glace (orbes claires). */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-halo: 0 0 1px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6);
  --tr-texte-2: #B9BCC2;   /* était #A3A6AD : 2,1 à 4,5:1 sur le verre des cartes posé sur un paysage clair */
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-halo: 0 0 1px rgba(2, 16, 34, .95), 0 1px 3px rgba(2, 16, 34, .9), 0 0 14px rgba(2, 16, 34, .8);
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-halo: 0 0 1px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .72);
}
/* (a) Le texte posé à nu sur le paysage — pas celui d'une carte, d'un bouton ou d'une affiche. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app :is(h1, h2, h3, p, small, .tr-grand-titre, .tr-titre-section, .tr-chapitre-sous, .sv-sous, .tr-surtitre, .tr-offerte-mot, .th-logo-devise, .lien-discret):not(:where(.tr-carte, .carte, .bloc, .pli, .sv-carte, .th-post, .th-tuile, .th-rond, .tr-affiche, .tr-affiche-grande, .tr-ligne, .tr-bandeau, .tr-file, .elevated, .porte, dialog, [role="dialog"], button, .bouton, .puce-vue, .pastille, .tr-pill, [class*="carte"], [class*="card"]) *) {
  text-shadow: var(--th-halo);
}
/* Le halo s'hérite : ce qui a son propre fond (pastille dorée « Offerte » dans une phrase, bouton) n'en veut pas. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app :is(h1, h2, h3, p, small, .tr-grand-titre, .tr-titre-section, .tr-chapitre-sous, .sv-sous, .tr-surtitre, .tr-offerte-mot, .th-logo-devise, .lien-discret) :is(.tr-pill, .pastille, .puce-vue, button, .bouton) { text-shadow: none; }
/* (b) Les puces (15 / 25 / 40 / 60 min…) et pastilles (mobilité, réveil…) posées à nu : un verre sombre. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app :is(.puce-vue:not(.actif, [aria-pressed="true"]), .etiquettes .pastille):not(:where(.tr-carte, .carte, .bloc, .pli, .sv-carte, .th-tuile, .tr-affiche, .porte, dialog, [class*="carte"], [class*="card"]) *) {
  background-color: rgba(8, 10, 14, .66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app :is(.puce-vue:not(.actif, [aria-pressed="true"]), .etiquettes .pastille):not(:where(.tr-carte, .carte, .bloc, .pli, .sv-carte, .th-tuile, .tr-affiche, .porte, dialog, [class*="carte"], [class*="card"]) *) {
  background-color: rgba(4, 26, 52, .74);
}
/* (c) Le sélecteur Libre / 3 mois des offres : le mot non choisi était posé sur un voile trop clair. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-periode { background: rgba(0, 0, 0, .58); }
/* (d) Glace : HIER / GO / DEMAIN sont écrits sur des orbes de verre clair. */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-rond :is(b, small, span) { text-shadow: var(--th-halo); }
/* (e) Glace et Pierre : paysages clairs. Le voile garde le haut léger (logo, crêtes) et se renforce sous le
 *     contenu : le texte posé à nu (« 25 min · 5 exos… », « Assemblé à partir… ») passait de 2,5 à 3,5:1. */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-voile-page: linear-gradient(180deg, rgba(8, 30, 58, .34) 0, rgba(8, 30, 58, .6) 22%, rgba(8, 30, 58, .6) 55%, rgba(8, 30, 58, .66) 100%);
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-voile-page: linear-gradient(180deg, rgba(18, 18, 20, .3) 0, rgba(18, 18, 20, .6) 22%, rgba(18, 18, 20, .6) 55%, rgba(18, 18, 20, .66) 100%);
}
/* (f) Le numéro des exercices (Séance du jour, fiches) : chiffre pâle dans un rond pâle sur Glace. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app .exo-pli-num {
  background: rgba(0, 0, 0, .5); color: var(--tr-texte, #F5F5F7); box-shadow: inset 0 0 0 1px var(--tr-or, #D4A04A);
}
/* (g) La devise de l'Accueil (or, 11 px) sur le ciel clair de Glace et de Pierre : le halo du thème. */
html:is([data-coloris="bleu"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-accueil .th-logo-devise { text-shadow: var(--th-halo) !important; }
/* (h) La période choisie (Libre / 3 mois) : blanc sur or faisait 2,4:1 — texte sombre, comme la pastille « Recommandée ». */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-periode button[aria-checked="true"] { color: var(--tr-sur-or, #1A1206); }
/* (i) Le mot des tuiles SÉANCES / COMBAT / OPS, écrit sur la photo : le halo du thème. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-tuile :is(b, small) { text-shadow: var(--th-halo); }
/* (j) Glace et Pierre : leur accent (bleu moyen, gris) ne porte ni le blanc ni le noir. La période choisie
 *     prend un fond clair (glace, argent) et un texte sombre. */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-periode button[aria-checked="true"] { background: linear-gradient(180deg, #EAF6FF, #BFE3FF); color: #0E2A4D; }
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .th-periode button[aria-checked="true"] { background: linear-gradient(180deg, #EEF0F2, #C4C7CC); color: #1B1C1F; }
/* (k) L'accent écrit en petit sur une carte (« ★ Mes favoris », titres des blocs « Le réveil ») : un cran plus vif. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-favoris-vide b, .bloc h3) { color: var(--tr-or-vif, #F2B84B); }

/* ══ 15. ACCUEIL (29/09 soir, Alexandre) ══════════════════════════════════════════════════════
 * « L'équilibre au quotidien, la performance dans le combat : en deux phrases, l'une sous l'autre. » */
.th-accueil .th-logo-devise .th-devise-l { display: block; white-space: nowrap; }
/* Les formules défilent de côté (Premium est au bout) : un fondu au bord droit dit qu'il y a une suite. */
.th-formules { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); scroll-padding-inline: 8px; }
/* une cale au bout (une marge de fin n'est pas comptée partout dans le défilement) : Premium sort du fondu */
.th-formules::after { content: ''; flex: 0 0 30px; }
/* Les affiches de Tonio (séances offertes) : la carte prend les proportions de l'affiche (872 × 991). */
.tr-affiche.tr-affiche-image { flex: 0 0 176px; height: auto; aspect-ratio: 872 / 991; padding: 0; background: #0b0a09; }
.tr-affiche.tr-affiche-image::after { display: none; }
.tr-affiche.tr-affiche-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: -1; pointer-events: none; -webkit-user-drag: none; }
.tr-affiche-grande.tr-affiche-grande-image img { display: block; width: 100%; height: auto; aspect-ratio: 872 / 991; object-fit: cover; object-position: center top; }
/* (l) 29/09, suite — les derniers textes limites (4,0 à 4,47:1) :
 *     la puce choisie (« Normal », « 60 min ») prend l'accent vif ; le halo du texte posé à nu gagne une
 *     couche serrée (le contour se lit entre les lettres, pas seulement autour) ; le mot des tuiles aussi. */
/* Sauf sur les fiches de séance, où la puce choisie est PLEINE (fond d'accent, texte sombre --tr-sur-or). */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"], .tr-fiche-seance) #app .puce-vue.actif { color: var(--tr-or-vif, #F2B84B); }
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"], .tr-fiche-seance) #app .puce-vue.actif { color: #D2EEFF; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-halo: 0 0 1px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .6);
}
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-halo: 0 0 1px rgba(2, 16, 34, .98), 0 0 3px rgba(2, 16, 34, .92), 0 1px 3px rgba(2, 16, 34, .9), 0 0 14px rgba(2, 16, 34, .8);
}
html[data-coloris="pierre"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-halo: 0 0 1px rgba(0, 0, 0, .98), 0 0 3px rgba(0, 0, 0, .92), 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .72);
}
/* L'onglet du Livre, à l'arrêt, s'efface s'il recouvrirait un bouton (le rond DEMAIN, une carte) ; il revient
 * dès que la zone est libre (app.js, brancherLivreBord). Pendant le défilement : la fine poignée (livre-range). */
/* 29/09 (« le Livre accessible depuis partout ») : il ne disparaît plus. S'il couvrirait un bouton, il glisse le
 * long du bord vers une place libre (--livre-y) ; si tout le bord est pris, il reste en fine poignée dorée,
 * touchable, et le glissé depuis le bord droit l'ouvre aussi. */
html.livre-cache .btn-livre-bord { transform: translate(30px, -50%) !important; opacity: .9; }

/* ══ 16. LE PROGRAMME D'UN AN (29/09 nuit) — Mon programme, l'année en 52 cases, le verrou, l'essai,
 * « Remplacer », la nutrition de la séance. Couleurs des jetons du thème : les quatre thèmes suivent. */
.tr-programme .tr-prog-jour, .tr-prog-carte .tr-prog-jour { font: 700 17px/1 var(--tr-police); color: var(--tr-or-vif, var(--tr-or)); }
.tr-prog-verrou, .tr-prog-essai, .tr-prog-cible { padding: 14px 16px; margin-top: 12px; }
.tr-prog-verrou p, .tr-prog-essai p, .tr-prog-cible p { line-height: 1.5; }
.tr-prog-verrou-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 700; color: var(--tr-or-vif, var(--tr-or)); }
.tr-prog-verrou .tr-cta, .tr-prog-essai .tr-cta { margin-top: 10px; width: 100%; }
.tr-prog-epreuves { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.tr-prog-epreuves li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--tr-ligne); }
.tr-prog-epreuves li:first-child { border-top: 0; padding-top: 0; }
.tr-prog-epreuves small { color: var(--tr-texte-2); font-size: 13px; line-height: 1.4; }
/* L'année : 52 cases, la couleur dit la phase, un liseré dit l'évaluation, un voile dit la semaine allégée. */
.tr-an { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.tr-an-case { aspect-ratio: 1; min-width: 0; border-radius: 6px; border: 1px solid transparent; font: 600 10px/1 var(--tr-police); color: var(--tr-texte); cursor: pointer; padding: 0; }
.tr-an-case.ph-fondation, .tr-an-legende .ph-fondation::before { background: rgba(120, 160, 120, .35); }
.tr-an-case.ph-force, .tr-an-legende .ph-force::before { background: rgba(200, 150, 70, .40); }
.tr-an-case.ph-puissance, .tr-an-legende .ph-puissance::before { background: rgba(210, 100, 60, .42); }
.tr-an-case.ph-specifique, .tr-an-legende .ph-specifique::before { background: rgba(170, 70, 90, .45); }
.tr-an-case.ph-bilan, .tr-an-legende .ph-bilan::before { background: rgba(110, 130, 170, .40); }
.tr-an-case.allegee { opacity: .62; }
.tr-an-case.test, .tr-an-legende .test::before { box-shadow: inset 0 0 0 2px var(--tr-or-vif, var(--tr-or)); }
.tr-an-case.ici { outline: 2px solid var(--tr-texte); outline-offset: 1px; font-weight: 800; }
.tr-an-case.vue { background-image: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)); }
.tr-an-legende { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 0; font-size: 12px; color: var(--tr-texte-2); }
.tr-an-legende span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* La séance : le geste mène à SA page du Livre ; « Remplacer » ouvre les autres gestes du même travail. */
.tr-prog-livre { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tr-or-vif, var(--tr-or)); white-space: nowrap; padding-left: 8px; }
.tr-remplacer { margin: 6px 0 2px; }
.tr-remplacer > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tr-texte-2); list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.tr-remplacer > summary::-webkit-details-marker { display: none; }
.tr-remplacer[open] > summary { color: var(--tr-or-vif, var(--tr-or)); }
.tr-prog-nutri { margin-top: 18px; }
.tr-prog-nutri-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.tr-prog-nutri-liste li { line-height: 1.5; }
.tr-prog-nutri-liste small { display: block; margin-top: 3px; color: var(--tr-texte-2); font-size: 13px; }
.tr-prog-sources { margin-top: 12px; }
.tr-prog-sources > summary { cursor: pointer; font-size: 13px; color: var(--tr-texte-2); }
.tr-liste-sources { margin: 8px 0 0; padding-left: 1.1em; font-size: 13px; line-height: 1.5; color: var(--tr-texte-2); }
.tr-liste-sources li { margin: 0 0 6px; }
.tr-liste-sources a { color: var(--tr-or-vif, var(--tr-or)); overflow-wrap: anywhere; }
.tr-prog-champ { display: grid; gap: 4px; margin: 0 0 12px; font-size: 14px; }
.tr-prog-champ input { font-size: 16px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--tr-ligne); background: rgba(0, 0, 0, .25); color: var(--tr-texte); }
.tr-prog-hist li, .tr-prog-semaine-nutri li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--tr-ligne); }
.tr-prog-hist small, .tr-prog-semaine-nutri small { color: var(--tr-texte-2); font-size: 13px; line-height: 1.45; }
.tr-prog-semaine-nutri li.repos { opacity: .85; }
.tr-prog-semaine-nutri .tr-lien { justify-self: start; }
/* Les choix du programme (méthode, lieu) : le libellé au-dessus, les puces sur toute la largeur, qui passent à la ligne. */
.tr-programme .groupe-filtre, .tr-prog-modes { display: block; }
.tr-programme .groupe-filtre .nom-filtre, .tr-prog-modes .nom-filtre { display: block; margin: 0 0 6px; }
.tr-programme .groupe-filtre .puces, .tr-prog-modes .puces { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; }
.tr-programme .groupe-filtre .puce, .tr-prog-modes .puce { flex: 1 1 0; min-width: 88px; justify-content: center; text-align: center; }

/* ══ 17. MES AMIS (29/09 nuit) — le QR, le classement de la semaine, le 👊 ═══════════════════════════════ */
.tr-amis .tr-carte { padding: 14px 16px; margin-top: 12px; }
.tr-amis-qr { display: grid; justify-items: center; gap: 10px; }
.tr-amis-qr-image { width: min(240px, 70vw); aspect-ratio: 1; background: #fff; border-radius: 14px; padding: 8px; }
.tr-amis-qr-image svg { width: 100%; height: 100%; display: block; }
.tr-amis-code { margin: 0; font: 700 26px/1 var(--tr-police); letter-spacing: .18em; color: var(--tr-or-vif, var(--tr-or)); }
.tr-amis-boutons { display: flex; gap: 8px; width: 100%; }
.tr-amis-boutons > * { flex: 1; }
.tr-amis-form { display: flex; gap: 8px; }
.tr-amis-form input { flex: 1; min-width: 0; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--tr-ligne); background: rgba(0, 0, 0, .25); color: var(--tr-texte); }
.tr-amis-partage { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; margin-top: 4px; }
.tr-amis-partage input { width: 22px; height: 22px; flex: 0 0 22px; }
.tr-amis-classement { list-style: none; margin: 0; padding: 0; }
.tr-amis-classement li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tr-ligne); }
.tr-amis-classement li.moi .tr-amis-qui b { color: var(--tr-or-vif, var(--tr-or)); }
.tr-amis-rang { width: 26px; text-align: center; font: 700 18px/1 var(--tr-police); color: var(--tr-texte-2); }
.tr-amis-qui { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tr-amis-qui small { color: var(--tr-texte-2); font-size: 13px; line-height: 1.35; }
.tr-amis-barre { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.tr-amis-barre i { display: block; height: 100%; background: var(--tr-or-vif, var(--tr-or)); }
.tr-amis-actions { display: flex; align-items: center; gap: 4px; }
.tr-amis-poing { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tr-ligne); background: rgba(0, 0, 0, .25); font-size: 20px; cursor: pointer; }
.tr-amis-poing.fait, .tr-amis-poing:disabled { opacity: .45; cursor: default; }
.tr-amis-plus > summary { list-style: none; cursor: pointer; width: 32px; height: 44px; display: grid; place-items: center; color: var(--tr-texte-2); }
.tr-amis-plus > summary::-webkit-details-marker { display: none; }
.tr-amis-recus { margin: 0 0 8px; font-weight: 600; }
.tr-amis-scan { position: fixed; inset: 0; z-index: 9999; background: #000; display: grid; place-items: center; align-content: center; gap: 14px; color: #fff; padding: 20px; }
.tr-amis-scan video { width: min(90vw, 420px); aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
/* Récompenses, challenge de saison, podium (29/09 nuit ; la boutique est retirée le 04/10) */
.tr-recomp-statut { margin: 0 0 6px; font: 700 18px/1.2 var(--tr-police); color: var(--tr-or-vif, var(--tr-or)); }
.tr-recomp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tr-recomp-liste li { display: grid; gap: 4px; }
.tr-recomp-liste small { color: var(--tr-texte-2); font-size: 13px; line-height: 1.4; }
.tr-recomp-liste .tr-cta { margin-top: 6px; }
.tr-recomp-code { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--tr-or-vif, var(--tr-or)); line-height: 1.45; }
.tr-podium-liste { margin-top: 10px; }
.tr-amis-badge { font-size: 14px; }
.tr-evenement img { width: 100%; border-radius: 12px; display: block; }
.tr-coach-offre { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.tr-coach-offre select { min-height: 40px; border-radius: 10px; padding: 6px 10px; background: rgba(0, 0, 0, .25); color: var(--tr-texte); border: 1px solid var(--tr-ligne); }
.tr-coach-recomp { padding: 14px 16px; margin-top: 12px; }
.tr-coach-recomp-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--tr-ligne); }
.tr-amis-form .bouton { flex: 0 0 auto; width: auto; min-width: 96px; }

/* ══ 18. LE PROGRAMME, EN BEAU (29/09 nuit, Alexandre : « beau visuel, cohérent, bien intégré ») ══════════
 * Une couleur par phase, la même partout (en-tête, frise, pastilles, l'année) ; tout le texte dans des cartes. */
.ph-fondation { --ph: #4FA36B; } .ph-force { --ph: #D6A443; } .ph-puissance { --ph: #E0733B; } .ph-specifique { --ph: #C8465A; } .ph-bilan { --ph: #5B86C9; }
.tr-prog-hero { padding: 16px 18px 18px; margin-top: 6px; border-top: 4px solid var(--ph, var(--tr-or)); }
.tr-prog-hero-sur { margin: 0 0 4px; font: 700 11px/1.2 var(--tr-police); letter-spacing: .16em; text-transform: uppercase; color: var(--tr-texte-2); }
.tr-prog-hero-titre { margin: 0 0 12px; font: 800 26px/1.1 var(--tr-police); text-transform: uppercase; letter-spacing: .02em; }
.tr-prog-hero-ligne { display: flex; align-items: center; gap: 14px; }
.tr-prog-hero-semaine b { font: 800 44px/1 var(--tr-police); color: var(--ph, var(--tr-or)); }
.tr-prog-hero-semaine small { font: 700 18px/1 var(--tr-police); color: var(--tr-texte-2); margin-left: 2px; }
.tr-prog-hero-phase { display: grid; gap: 4px; }
.tr-prog-hero-phase small { color: var(--tr-texte-2); font-size: 13px; }
.tr-prog-pastille { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 12px/1.4 var(--tr-police); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ph, #777); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); vertical-align: 1px; }
.tr-prog-frise { position: relative; display: flex; gap: 3px; height: 8px; margin: 16px 0 12px; }
.tr-prog-frise span { background: var(--ph); border-radius: 4px; opacity: .85; }
.tr-prog-frise i { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--tr-texte); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.tr-prog-hero-but { margin: 0 0 6px; line-height: 1.5; }
.tr-prog-hero-suite { margin: 0; font-size: 14px; color: var(--tr-texte-2); }
.tr-prog-semaine .tr-ligne.faite .tr-prog-jour { background: var(--ph-ok, #3C8D5A); color: #fff; }
.tr-prog-reglages, .tr-prog-allures, .tr-prog-annee { padding: 14px 16px; margin-top: 12px; }
.tr-prog-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tr-prog-chiffres span { display: grid; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.tr-prog-chiffres b { font: 800 24px/1 var(--tr-police); color: var(--tr-or-vif, var(--tr-or)); }
.tr-prog-chiffres small { font-size: 11px; line-height: 1.3; color: var(--tr-texte-2); }
.tr-an-case { background: color-mix(in srgb, var(--ph) 58%, transparent) !important; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.tr-an-legende span::before { background: var(--ph) !important; }
.tr-an-legende .test::before { background: transparent !important; }
.tr-prog-actions { margin-top: 12px; }
.tr-prog-go { width: 100%; margin: 10px 0 4px; }
.tr-chapitre-sous .tr-prog-pastille { margin-right: 6px; }
.tr-prog-hero-phase .tr-prog-pastille { justify-self: start; }

/* ══ 19. « Comment ça marche » (29/09, Alexandre : « intuitif, facile à comprendre ») — 3 étapes numérotées,
 * ouvert tant qu'on ne l'a pas refermé. Mêmes jetons que les cartes : les quatre thèmes suivent. */
.tr-comment { padding: 0; margin-top: 12px; overflow: hidden; }
.tr-comment > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; font: 700 15px/1.2 var(--tr-police); }
.tr-comment > summary::-webkit-details-marker { display: none; }
.tr-comment > summary::after { content: "›"; margin-left: auto; font-size: 22px; color: var(--tr-texte-2); transition: transform .2s; }
.tr-comment[open] > summary::after { transform: rotate(90deg); }
.tr-comment-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tr-or); color: #111; font: 800 15px/1 var(--tr-police); flex: none; }
.tr-comment-etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0 16px 14px; display: grid; gap: 12px; }
.tr-comment-etapes li { counter-increment: etape; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 2px; }
.tr-comment-etapes li::before { content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--tr-or); color: var(--tr-or-vif, var(--tr-or)); font: 800 15px/1 var(--tr-police); }
.tr-comment-etapes b { font-size: 15px; }
.tr-comment-etapes span { font-size: 14px; line-height: 1.45; color: var(--tr-texte-2); }
@media (prefers-reduced-motion: reduce) { .tr-comment > summary::after { transition: none; } }

/* ══ 20. La piste de navette (29/09) : le palier atteint au Luc Léger, à noter d'un toucher. ══ */
.tr-piste-resultat { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--tr-carte, rgba(255, 255, 255, .06)); border: 1px solid var(--tr-or); text-align: center; }
.tr-piste-resultat p { margin: 0 0 8px; line-height: 1.45; }
.tr-piste-resultat p:last-child { margin-bottom: 0; }
.tr-piste-resultat small { color: var(--tr-texte-2); }
.tr-piste-resultat .bouton { width: 100%; }

/* ══ 21. PRIS EN CHARGE (30/09, Alexandre : « qu'il se sente pris en charge, et ait envie de Premium ») ══
 * Le bilan de la semaine (Accueil), les aperçus Premium (là où ils servent), l'échelle des offres. Jetons des thèmes. */
.tr-bilan { padding: 16px 18px; margin-top: 14px; }
.tr-bilan-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tr-bilan-tete h2 { margin: 0; font: 800 20px/1.1 var(--tr-police); text-transform: uppercase; letter-spacing: .03em; }
.tr-bilan-serie { font-size: 13px; color: var(--tr-or-vif, var(--tr-or)); font-weight: 700; }
.tr-bilan-jauge { height: 8px; margin: 12px 0 14px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tr-bilan-jauge i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--tr-or), var(--tr-or-vif, var(--tr-or))); }
.tr-bilan-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-bilan-chiffres > span { display: grid; gap: 3px; text-align: center; padding: 10px 4px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.tr-bilan-chiffres b { font: 800 26px/1 var(--tr-police); color: var(--tr-texte); }
.tr-bilan-chiffres b small { font-size: 15px; color: var(--tr-texte-2); }
.tr-bilan-chiffres > span > small { font-size: 12px; color: var(--tr-texte-2); }
.tr-bilan-prochain { margin: 14px 0 0; font-weight: 700; line-height: 1.45; }
.tr-bilan-prochain small { font-weight: 400; color: var(--tr-texte-2); font-size: 14px; }
.tr-bilan-lignes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tr-bilan-lignes li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.tr-bilan-lignes li span { color: var(--tr-texte-2); font-size: 14px; }
.tr-bilan-lignes li b { font: 800 17px/1.2 var(--tr-police); text-align: right; }
.tr-bilan-lignes li small { grid-column: 1 / -1; font-size: 13px; color: var(--tr-texte-2); }
.tr-bilan-vide { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--tr-texte-2); }
.tr-bilan-conseil { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--tr-or); background: rgba(0, 0, 0, .2); line-height: 1.5; font-size: 15px; }
.tr-apercu { position: relative; padding: 16px 18px; margin-top: 12px; border: 1.5px solid var(--tr-or) !important; overflow: hidden; }
.tr-apercu::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 100% 0%, rgba(var(--th-a2-rgb, 212, 175, 55), .16), transparent 60%); }
.tr-apercu-marque { margin: 0 0 6px; font: 800 12px/1 var(--tr-police); letter-spacing: .16em; text-transform: uppercase; color: var(--tr-or-vif, var(--tr-or)); }
.tr-apercu h3 { margin: 0 0 6px; font: 800 18px/1.25 var(--tr-police); }
.tr-apercu p { margin: 0 0 12px; line-height: 1.5; color: var(--tr-texte-2); }
.tr-apercu .bouton { width: 100%; position: relative; z-index: 1; }
.tr-echelle { padding: 14px 16px; margin: 0 0 12px; }
.tr-echelle-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-echelle-marche { display: grid; gap: 6px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .2); color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.tr-echelle-liste li.ici .tr-echelle-marche { border-color: var(--tr-or); box-shadow: 0 0 0 1px var(--tr-or) inset; }
.tr-echelle-liste li.acquis .tr-echelle-marche { border-style: dashed; }   /* 30/09 : plus d'opacité (« ta formule » tombait à 4,3:1) */
.tr-echelle-nom { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tr-echelle-nom b { font: 800 16px/1.2 var(--tr-police); text-transform: uppercase; }
.tr-echelle-nom em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tr-or); color: #111; }
.tr-echelle-nom small { margin-left: auto; color: var(--tr-texte-2); font-size: 13px; }
.tr-echelle-plus { display: grid; gap: 3px; font-size: 14px; line-height: 1.4; color: var(--tr-texte-2); }

/* ══ 22. Les illustrations (30/09, Alexandre : « mets des photos en illustration en attendant ») ══
 * Photo en tête des aperçus Premium, vitrine de Tonio sur la page Premium, son analyse floutée. */
.tr-apercu { padding-top: 0 !important; }
.tr-apercu-photo { display: block; height: 132px; margin: 0 -18px 14px; background-size: cover; background-repeat: no-repeat; filter: var(--th-photo-filtre, none); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.tr-apercu:not(:has(.tr-apercu-photo)) { padding-top: 16px !important; }
.tr-vitrine { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 0 !important; overflow: hidden; margin: 0 0 12px; border: 1.5px solid var(--tr-or) !important; }
.tr-vitrine-photo { min-height: 190px; background: url('./photos/tr-menu.jpg') 50% 24% / cover no-repeat; filter: var(--th-photo-filtre, none); }
.tr-vitrine-corps { padding: 14px 14px 14px 0; }
.tr-vitrine-corps h2 { margin: 2px 0 4px; font: 800 26px/1 var(--tr-police); text-transform: uppercase; }
.tr-vitrine-parcours { margin: 0 0 8px; font-size: 13px; color: var(--tr-or-vif, var(--tr-or)); font-weight: 700; }
.tr-vitrine-corps blockquote { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tr-texte-2); font-style: italic; }
.tr-vitrine-semaine, .tr-vitrine-lecture { padding: 14px 16px; margin: 0 0 12px; }
.tr-vitrine-semaine ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.tr-vitrine-semaine li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; }
.tr-vitrine-semaine li::before { content: counter(s); grid-row: span 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tr-or); color: #111; font: 800 15px/1 var(--tr-police); }
.tr-vitrine-semaine small { color: var(--tr-or-vif, var(--tr-or)); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tr-vitrine-semaine b { font-size: 16px; }
.tr-vitrine-semaine span { font-size: 14px; line-height: 1.45; color: var(--tr-texte-2); }
.tr-vitrine-lecture ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; line-height: 1.45; }
.tr-vitrine-analyse { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--tr-or); background: rgba(0, 0, 0, .22); }
.tr-vitrine-analyse p { margin: 0 0 10px; }
.tr-vitrine-flou { display: grid; gap: 8px; filter: blur(3px); opacity: .7; }
.tr-vitrine-flou i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12)); }
.tr-vitrine-flou i:nth-child(2) { width: 86%; } .tr-vitrine-flou i:nth-child(3) { width: 92%; } .tr-vitrine-flou i:nth-child(4) { width: 64%; }

/* ══ 23. LISIBILITÉ, les restes (30/09) — mesure réelle : chaque texte contre le pire fond peint sous lui, 4 thèmes,
 * 20 écrans (programme, amis, offres, tests compris). Seuils AA : 4,5 · 3 pour ≥ 24 px ou ≥ 18,66 px gras.
 * Exemptés (WCAG 1.4.3) : le logo « TR NUTRITION » et la devise du logo de l'Accueil (logotypes), le « − »
 * de l'eau quand il est désactivé (composant inactif). */
/* (a) Les sous-titres et les petites lignes posés À NU sur la photo du thème : en blanc cassé, pas en gris. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-page, #app) > :is(.tr-chapitre-sous, .detail-garder, .tr-note, .tr-surtitre),
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app > p,
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-offre-sous, .tr-offre-autres small, .sv-sous, .tr-prog-modes .detail-garder, .tr-prog-modes .nom-filtre) { color: var(--tr-texte, #F5F5F7) !important; }
/* (b) Les listes posées sur la photo passent sur une carte : la semaine nutrition, la semaine entre amis, le choix de la méthode. */
.tr-prog-semaine-nutri, .tr-amis-liste, .tr-prog-modes { background: var(--tr-carte); border: 1px solid var(--tr-ligne, rgba(255, 255, 255, .12)); border-radius: var(--tr-rond, 16px); padding: 12px 14px !important; }
.tr-prog-semaine-nutri { list-style: none; margin: 12px 0; display: grid; gap: 12px; }
.tr-prog-semaine-nutri li { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--tr-ligne, rgba(255, 255, 255, .1)); }
.tr-prog-semaine-nutri li:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-prog-semaine-nutri small { color: var(--tr-texte-2); }
.tr-amis-liste { margin-top: 0; }
.tr-amis-liste .tr-carte { background: rgba(0, 0, 0, .22); }
/* (c) Les pastilles de phase : texte foncé sur les couleurs claires (vert, or, orange, bleu), blanc sur le rouge. */
.tr-prog-pastille { color: #0E0E0E; text-shadow: none; }
.tr-prog-pastille.ph-specifique { color: #FFFFFF; }
/* (d) Les choix d'engagement des offres : un fond plein sous le prix et « sans engagement ». */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-offre-periodes .puce { background: rgba(0, 0, 0, .55); }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-offre-periodes .puce.actif { background: rgba(0, 0, 0, .62); }
/* (e) Un texte foncé sur un bouton doré n'a pas besoin d'un halo clair (il en réduisait l'écart autour des lettres). */
.tr-cta, .tr-cta * { text-shadow: none !important; }
/* (f) Réglages : le point séparateur et « Revenir au simple ». */
.palier-sep { color: inherit; opacity: 1; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) #app .bloc .bouton.sobre { color: var(--tr-texte, #F5F5F7); background-color: rgba(0, 0, 0, .35); }
/* (g) Glace : GO, HIER, DEMAIN sur des orbes plus profonds (le blanc sur #4FA6E4 donnait 2,3:1). */
html[data-coloris="bleu"]:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) {
  --th-go-fond: radial-gradient(circle at 50% 30%, #2F7FC0 0%, #1A5E9E 50%, #0D3A6A 100%);
  --th-rond-fond: radial-gradient(circle at 50% 30%, #2C75B2 0%, #1A5690 58%, #123D68 100%);
}
/* (h) Le numéro d'exercice (fiche de séance) et le titre des tuiles photo de la nutrition. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-seance-num { background: rgba(0, 0, 0, .5); color: var(--tr-or-vif, #F2C46B); }
.tr-photo b { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.tr-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .78) 100%) !important; }
/* (i) Les petits textes dans les cartes sur Glace et Pierre (Suivi, fil, pli des lots). */
html:is([data-coloris="bleu"], [data-coloris="pierre"]):not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.sv-obj-mot, .sv-objectif small, .th-fil small, .pli li, .tr-seance-duree, .bloc h3) { color: var(--tr-texte, #F5F5F7); }
.tr-post-sous { color: var(--tr-texte-2); }
.tr-echelle .tr-post-sous, .tr-vitrine-semaine .tr-post-sous, .tr-vitrine-lecture .tr-post-sous { color: var(--tr-texte, #F5F5F7); }
/* (j) Le bouton de l'essai dit lui-même qu'il engage (« puis 149,90 € / mois dès le … ») : il garde ses mots,
 *     tient sur deux lignes, sur un or clair de haut en bas (le bas bronze donnait 3:1 à la dernière ligne). */
#offre-essai { font-size: 16px !important; line-height: 1.3 !important; padding-top: 12px; padding-bottom: 12px;
  background-image: linear-gradient(180deg, var(--tr-or-vif, #F2C46B), var(--tr-or, #D4A04A)) !important; color: #140E04 !important; }
/* (k) Les dernières lignes posées sur la photo (Glace, Sparte) : un voile de texte sous les sous-titres des pages. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.tr-page, #app) > :is(.tr-chapitre-sous, .tr-surtitre),
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.sv-sous, .tr-offre-sous) {
  background: rgba(0, 0, 0, .5); border-radius: 10px; padding: 6px 10px !important; display: inline-block; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-surtitre { color: var(--tr-texte, #F5F5F7); }
/* (l) Les derniers, juste sous 4,5:1 : en blanc plein, et la pastille de phase sur un fond plus clair (texte foncé). */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) :is(.th-fil-mot small, .tr-offertes-tete small, .tr-offre-autres small, .sv-obj-mot, .sv-objectif small, #app > p, .tr-filieres-cherche::placeholder, input::placeholder) { color: #FFFFFF !important; }
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .tr-offertes-tete small { text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .7); }
.tr-prog-pastille:not(.ph-specifique) { background: color-mix(in srgb, var(--ph, #777) 78%, #FFFFFF); font-size: 12.5px; }
/* (m) 🔴 `.sr-only` n'était défini NULLE PART : « Rechercher un parcours… », « Message », « Code-barres », le titre
 *     « Nutrition » s'affichaient en double à l'écran. Texte réservé aux lecteurs d'écran : hors de la vue, gardé au DOM. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }


/* ══ 29. REPRISE 30/09 (Alexandre : « reprend tr performance ») : ce qui sortait de l'écran à 390 px ═══════
 * Audit au navigateur (Chromium, 390 × 844 et 1280 × 800, 45 écrans × 4 thèmes). */
/* (a) Les listes en grille (« Le déroulé » et ses filtres Durée / Intensité / Matériel, « Les mouvements »
 *     d'une filière) : une colonne `auto` prend au moins la largeur minimale de son contenu, et une rangée de
 *     puces ou un sous-titre écrit sur une ligne (nowrap) la poussait à 576-647 px — le bout des filtres
 *     (« 30 min et plus », « forte ») et le bord droit des cartes sortaient de l'écran, inatteignables.
 *     min-width: 0 : la colonne s'arrête au cadre, les puces défilent de côté (c'est leur rôle), le
 *     sous-titre finit en « … ». */
#app :is(.liste, .filtres) > * { min-width: 0; }
/* (b) Bienvenue à 390 px : TR PERFORMANCE + « Sa méthode » + « Entrer » faisaient 423 px avec les zones
 *     tactiles de 44 px (R5) — « Entrer » sortait de l'écran, coupé après « Entr ». Plus serré sous 420 px,
 *     la hauteur de 44 px est gardée. */
@media (max-width: 420px) {
  .tr-bv-haut { padding-left: 14px; padding-right: 14px; gap: 6px; }
  .tr-bv-haut .tr-logo { font-size: 15px; min-width: 0; flex: 0 1 auto; }
  .tr-bv-haut-liens { flex: 0 0 auto; gap: 6px; }
  html[data-page="bienvenue"] .tr-bv-entrer, html[data-page="formules"] .tr-bv-entrer { padding: 10px 11px; font-size: 13px; }
}
/* (c) « Relier ton app à Tonio » : le champ du code (monospace 30 px, 20 caractères par défaut) faisait
 *     383 px dans une carte de 358 : la colonne de la grille le suivait, et le code tapé pouvait finir
 *     hors de la carte. Le champ prend la largeur de la carte, pas plus. */
.tr-lier-code { grid-template-columns: minmax(0, 1fr); }
.tr-lier-code input { width: 100%; min-width: 0; box-sizing: border-box; }
/* (d) « Mon profil » à 390 px : médaillon (72) + nom + pastille de l'offre (« TR LANCEMENT », 136 px) sur une
 *     seule rangée laissaient 92 px au nom : « Mon profil » sur deux lignes, et le métier (« Monsieur / Madame
 *     tout le monde ») en cinq. La pastille passe sous le nom, à droite, dès que la rangée est trop étroite. */
.th-profil-carte { flex-wrap: wrap; }
.th-profil-qui { flex: 1 1 170px; }
.th-profil-offre { margin-left: auto; }
/* (e) « J'ai mangé » : la ligne « Dis-le ou écris-le » remontait de 8 px (marge négative) sur le petit logo
 *     « TR PERFORMANCE · Nutrition · Voix » : les deux textes s'écrivaient l'un sur l'autre. */
.tr-mange-dit { margin-top: 8px; }
/* (f) « Ton compte » : la pastille « essai » du bandeau (mode atelier) n'avait aucun style — un mot nu en fin de
 *     phrase. Une vraie pastille. */
.prudence .badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
/* (g) La barre du haut (TR PERFORMANCE) faisait 44 px partout, sauf sur Classement, Mentions et les Offres,
 *     où la règle R5 « tout lien fait 44 px » attrapait aussi le logo : la barre sautait à 66 px d'un écran à
 *     l'autre. Le logo garde sa ligne de 22 px (barre à 44 px partout) et prend sa zone tactile de 44 px par
 *     un débord invisible. */
#tr-chrome .tr-logo { display: block; min-height: 0; min-width: 0; padding: 11px 8px; margin: -11px -8px; }
/* (h) « Ton compte » : le bouton noir « Continuer avec Apple » écrivait en brun sombre sur noir (la règle du
 *     thème force la couleur des boutons, la couleur en ligne du bouton ne passait plus) : illisible. Blanc. */
.bouton.fournisseur[data-connexion="apple"] { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; }
.bouton.fournisseur[data-connexion="google"] { color: #1f1f1f !important; -webkit-text-fill-color: #1f1f1f !important; text-shadow: none !important; }
/* (i) Le rond « ← » posé sur la photo d'un chapitre ou d'une filière faisait 42 × 42 : 44, comme les autres cibles. */
#app .retour-photo { width: 44px; height: 44px; }

/* ══ 30. TON TERRAIN (30/09, Alexandre : « trop de métiers similaires ; simple, intuitif ») ═══════════
 * Un seul écran de choix, en deux gestes : la famille (cartes photo, comme dans Ops), puis la spécialité
 * (lignes cochables) ; les autres unités d'un groupe sont repliées derrière « Préciser l'unité ». */
:is(.tr-ops, .tr-terrain) .tr-ops-famille[data-famille="autre"] { background-position: center, 30% 40% !important; }
.tr-terrain .tr-ops-famille.choisie { outline: 2px solid var(--tr-or, #D4A04A); outline-offset: 2px; }
.tr-terrain .tr-terrain-familles .tr-ops-famille:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tr-terrain .tr-terrain-courants .puce, .tr-terrain .tr-terrain-autres .puce { min-height: 44px; }
.tr-terrain .puce.choisie { background: var(--tr-or, #D4A04A); color: var(--tr-sur-or, #1A1206); font-weight: 700; }
.tr-terrain .tr-terrain-autres { margin: -4px 0 8px 44px; }
.tr-terrain .tr-terrain-autres > summary { cursor: pointer; font-size: 13px; color: var(--tr-texte-2); list-style: none; min-height: 44px; display: flex; align-items: center; }
.tr-terrain .tr-terrain-autres > summary::-webkit-details-marker { display: none; }
.tr-terrain .tr-terrain-autres > summary::before { content: '›'; margin-right: 6px; font-size: 16px; transition: transform .2s; }
.tr-terrain .tr-terrain-autres[open] > summary::before { transform: rotate(90deg); }
.tr-terrain .tr-terrain-autres .puces { margin-top: 4px; }
.tr-terrain .tr-terrain-spec .tr-coche { flex: 0 0 auto; }
/* Réglages en groupes repliés (30/09) : un titre lisible, une ligne de contenu, la flèche à droite. */
.tr-reglages-groupe > summary { min-height: 56px; }
.tr-reglages-groupe > .pli-corps > .bloc:first-child, .tr-reglages-groupe > .pli-corps > details:first-child { margin-top: 0; }

/* ══ 31. LA SÉANCE EN UN COUP D'ŒIL (30/09, Alexandre : « simplifie séance… simple, intuitif, smart ») ════════
 * Démarrer et Garder (★) sur une rangée sous le titre ; le déroulé replié par bloc dès qu'il y en a plus de deux
 * (le premier ouvert) ; objectif, matériel, téléchargements derrière « Plus sur cette séance ». */
.tr-seance-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.tr-seance-actions .bouton { margin: 0; }
.tr-seance-actions .tr-seance-go { flex: 1 1 auto; min-width: 0; width: auto; }
.tr-seance-actions .tr-seance-fav { flex: 0 0 52px; width: 52px; padding: 0; font-size: 22px; line-height: 1; }
#app .tr-seance-actions .bouton.tr-seance-fav.gardee { color: var(--tr-or, #D4A04A); border-color: var(--tr-or, #D4A04A); }
.tr-seance-apercu { margin: 10px 0 0; color: var(--tr-texte-2, var(--texte-doux)); font-size: 14px; }
.tr-seance-go-bas { width: 100%; }
.tr-bloc-pli { margin-top: 10px; }
.tr-bloc-pli > summary { min-height: 56px; }
.tr-bloc-pli .pli-corps > ul { margin: 0; padding-left: 0; list-style: none; }
.tr-seance-plus { margin-top: 18px; }
.tr-seance-plus > summary { min-height: 56px; }
.tr-seance-plus .pli-corps > .bloc:first-child { margin-top: 0; }
.tr-seance-plus .pli-corps > .garder { margin-top: 14px; }

/* ══ 32. LE CATALOGUE DES MÉTIERS RANGÉ (30/09) — un pli par famille, dedans les spécialités et leurs fiches ;
 * la liste à plat de 130 cartes (28 écrans) ne s'affiche plus que pour une recherche. */
.tr-catalogue-famille { margin-top: 10px; }
.tr-catalogue-famille > summary { min-height: 56px; }
.tr-catalogue-spec { text-align: left; margin: 14px 0 6px; }
.tr-catalogue-spec small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tr-texte-2, var(--texte-doux)); }
.tr-catalogue-famille .pli-corps > .tr-catalogue-spec:first-child { margin-top: 0; }
.tr-catalogue-famille .tr-ligne .tr-coche { flex: 0 0 auto; }

/* ══ 33. LA FICHE D'UN MÉTIER EN UN COUP D'ŒIL (30/09) — choisir, le programme, les séances d'abord ; les
 * mouvements, les étirements, la nutrition et « D'où ça vient » en quatre plis. */
.tr-metier-pli { margin-top: 10px; }
.tr-metier-pli > summary { min-height: 56px; }
.tr-metier-pli .pli-corps > .liste { margin-top: 0; }

/* ══ 34. LA VOIX COMMANDE LA SÉANCE (30/09, Alexandre : « le chronomètre se lance avec la voix aussi ») ═════════
 * Un bouton sous les commandes du minuteur ; à l'écoute, un point rouge qui respire et la liste des mots. */
.tr-ecoute-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.tr-ecoute-zone .tr-ecoute { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 22px; }
.tr-ecoute-zone .tr-ecoute .tr-ico { width: 18px; height: 18px; }
.tr-ecoute-zone .tr-ecoute[aria-pressed="true"] { color: var(--tr-or, #D4A04A); background: rgba(212, 160, 74, .1); }
.tr-ecoute-zone .tr-ecoute[aria-pressed="true"]::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #E0443A; box-shadow: 0 0 0 0 rgba(224, 68, 58, .5); animation: tr-ecoute-respire 1.4s ease-out infinite; }
@keyframes tr-ecoute-respire { 0% { box-shadow: 0 0 0 0 rgba(224, 68, 58, .55); } 70% { box-shadow: 0 0 0 9px rgba(224, 68, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 68, 58, 0); } }
@media (prefers-reduced-motion: reduce) { .tr-ecoute-zone .tr-ecoute[aria-pressed="true"]::before { animation: none; } }
.tr-ecoute-zone #ecoute-aide { max-width: 320px; line-height: 1.4; }

/* ══ 35. LES VOIX DU COACH DANS RÉGLAGES (01/10) — titre au-dessus de sa ligne d'explication, boutons dessous. */
.tr-pf .tr-ligne-mot { display: flex; flex-direction: column; flex: 1 1 100%; min-width: 0; }
.tr-pf .tr-ligne-mot small { display: block; }
.tr-pf .tr-pf-choix-ligne { flex-wrap: wrap; }

/* ══ 36. TON COMPTE À LA FIN DU QUESTIONNAIRE (01/10) — Google · Apple · Samsung, e-mail ou téléphone par code,
 * ou continuer sans compte (gratuit). Grands boutons pleine largeur, 52 px, une colonne. */
.ob-comptes { display: grid; gap: 10px; margin: 16px 0 6px; }
.ob-compte { min-height: 52px; width: 100%; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; font: 600 16px/1.2 var(--tr-police, inherit); cursor: pointer; }
.ob-compte-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-compte-sobre { background: rgba(255, 255, 255, .06); color: var(--tr-texte, #F5F5F7); }
.ob-compte-sobre.actif { border-color: var(--tr-or, #D4A04A); color: var(--tr-or, #D4A04A); }
.ob-code { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; }
.ob-code .ob-label small { opacity: .7; font-weight: 400; }
.ob-sans-compte { display: block; width: 100%; min-height: 52px; margin-top: 14px; background: none; border: 1px solid var(--tr-or, #D4A04A); border-radius: 14px; color: var(--tr-or, #D4A04A); font: 600 16px/1.2 var(--tr-police, inherit); cursor: pointer; }
.ob-note-compte { font-size: 13px; margin-top: 10px; }
.fournisseur-code { display: grid; gap: 8px; margin-top: 10px; }

/* ══ 37. L'OFFRE ET LA SEMAINE (01/10) — S'abonner sous le prix ; « Une semaine en Premium » et l'échelle repliées. */
.tr-offre-page .tr-offre-pli { margin-top: 12px; }
.tr-offre-page .tr-offre-pli > summary { min-height: 56px; }
.pli-corps.tr-vitrine-semaine, .pli-corps.tr-echelle { padding: 0 0 14px; margin: 0; background: none; border: 0; box-shadow: none; }
.tr-offre-page #offre-choisir { margin-top: 14px; }
/* Mon programme (01/10) : les 3 séances sous le héros ; l'année et les actions repliées. */
.tr-prog-pli { margin-top: 10px; }
.tr-prog-pli > summary { min-height: 56px; }
.tr-prog-pli .tr-prog-annee, .tr-prog-pli .tr-prog-actions { padding: 0; margin-top: 0; }
/* Amis : événements et boutique repliés tant qu'ils sont vides. */
.tr-amis-plus > summary { min-height: 56px; }
.tr-prog-bareme { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; color: var(--tr-texte-2, var(--texte-doux)); }
.tr-prog-bareme .puce { min-height: 44px; }

/* 01/10 (étape 60) — à 320 px, les rangées de pastilles débordaient et le débordement était masqué :
   « Progression » (Séances), « Photos » (Suivi), « sans engagement » (formules) coupés. Elles se serrent. */
@media (max-width: 360px) {
  .sv-segments .sv-seg { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 12px; letter-spacing: -.01em; white-space: normal; line-height: 1.1; }
  .tr-offre-periodes .puce { flex: 1 1 0; min-width: 0; white-space: normal; }
  .tr-offre-prix.grand { white-space: normal; }
  h1.tr-offre-titre { font-size: 26px; white-space: normal; overflow-wrap: anywhere; }
}

/* ══ 01/10 (étape 61) — ACCESSIBILITÉ (audit au navigateur, mesures au pixel) ══ */
/* 4. Ce qui reçoit le focus ne se cache plus sous la barre d'onglets (0 px visible sur 6 écrans). */
html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); scroll-padding-top: 64px; }
/* 9. Les champs montrent qu'ils ont le focus (« J'ai mangé », le code de Tonio : rien ne changeait). */
.tr-mange-champ:focus-within, .tr-lier-code:focus-within { outline: 2px solid var(--tr-or-vif, #F2C46B); outline-offset: 2px; }
/* 6. « Continuer avec Samsung » : brun sur bleu, 1,60:1 → blanc, 11,4:1. */
.bouton.fournisseur[data-connexion="samsung"] { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; }
/* 12. Le bandeau « Mode essai » posé sur la photo de montagne : 1,90:1 en Sparte → fond presque opaque. */
html:not([data-theme="clair"], [data-theme="light"], [data-theme="crystal-glass-light"]) .prudence { background: rgba(16, 14, 12, .88); }
/* 5. « Agrandir le texte » : les tailles sont en px, la police racine n'y changeait rien. Tout grandit d'un cran. */
html[data-grand-texte] body { zoom: 1.18; }
/* 14. Des cibles de 44 px : le retour (32), les liens discrets (23–26). */
.retour { min-height: 44px; }
.lien-discret { padding-block: 10px; }