/* Tous au Match – socle : feuille commune, vocabulaire stade et langage typographique. © 2026 Ghislain DEMONDA – Tous droits réservés.
   Cascade unique sur chaque page : ce socle, puis /theme.css (thème actif), puis la feuille d écran (mise en page seule).
   Thème : <html data-theme="light|dark|auto" data-accent="sarcelle|bleu|orange|violet" data-size="normal|large" data-contrast="normal|high">
   Toutes les pages utilisent UNIQUEMENT ces variables (jamais de couleur en dur), pour que le mode sombre fonctionne partout. */
:root,[data-theme="light"]{
  --bg:#F7F6F2;--surface:#FFFFFF;--surface-2:#F1F0EC;--border:#D4D1CA;--text:#28251D;--muted:#6A6964;--faint:#9A9994;
  --ok:#437A22;--ko:#A12C7B;--warn:#964219;--okbg:#EAF3E3;--kobg:#F6E6F0;--warnbg:#F8EDE4;
  --accent:#01696F;--accent-h:#0C4E54;--accent-bg:#E6F1F1;--on-accent:#FFFFFF;--header-bg:var(--accent);--header-text:#FFFFFF;
  --shadow:0 1px 2px rgba(40,37,29,.06);color-scheme:light;
}
[data-theme="dark"]{
  --bg:#171614;--surface:#1F1E1C;--surface-2:#262523;--border:#3A3936;--text:#DEDDDA;--muted:#A3A29F;--faint:#6F6E6B;
  --ok:#7DBA55;--ko:#E07BB9;--warn:#D98A5E;--okbg:#22301A;--kobg:#3A2030;--warnbg:#3A2A1E;
  --accent:#4F98A3;--accent-h:#6FB0BA;--accent-bg:#1E3336;--on-accent:#0E1A1C;--header-bg:#1F2E30;--header-text:#E6F1F1;
  --shadow:none;color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg:#171614;--surface:#1F1E1C;--surface-2:#262523;--border:#3A3936;--text:#DEDDDA;--muted:#A3A29F;--faint:#6F6E6B;
    --ok:#7DBA55;--ko:#E07BB9;--warn:#D98A5E;--okbg:#22301A;--kobg:#3A2030;--warnbg:#3A2A1E;
    --accent:#4F98A3;--accent-h:#6FB0BA;--accent-bg:#1E3336;--on-accent:#0E1A1C;--header-bg:#1F2E30;--header-text:#E6F1F1;
    --shadow:none;color-scheme:dark;
  }
}
/* Couleurs d'accent (clair) */
[data-accent="bleu"]{--accent:#1D5C8F;--accent-h:#154569;--accent-bg:#E4EEF6}
[data-accent="orange"]{--accent:#A04A12;--accent-h:#7C390D;--accent-bg:#F7EADF}
[data-accent="violet"]{--accent:#6A3A9E;--accent-h:#522D7B;--accent-bg:#EFE7F7}
/* Couleurs d'accent (sombre) */
[data-theme="dark"][data-accent="bleu"]{--accent:#6FA3D6;--accent-h:#8DB8E2;--accent-bg:#1C2B3A;--header-bg:#1C2733}
[data-theme="dark"][data-accent="orange"]{--accent:#E39A62;--accent-h:#EDB184;--accent-bg:#3A2819;--header-bg:#33261C}
[data-theme="dark"][data-accent="violet"]{--accent:#B08AE0;--accent-h:#C4A5EA;--accent-bg:#2C2238;--header-bg:#2A2233}
@media (prefers-color-scheme: dark){
  [data-theme="auto"][data-accent="bleu"]{--accent:#6FA3D6;--accent-h:#8DB8E2;--accent-bg:#1C2B3A;--header-bg:#1C2733}
  [data-theme="auto"][data-accent="orange"]{--accent:#E39A62;--accent-h:#EDB184;--accent-bg:#3A2819;--header-bg:#33261C}
  [data-theme="auto"][data-accent="violet"]{--accent:#B08AE0;--accent-h:#C4A5EA;--accent-bg:#2C2238;--header-bg:#2A2233}
}
/* Contraste renforcé */
[data-contrast="high"]{--muted:var(--text);--border:#6A6964}
[data-theme="dark"][data-contrast="high"]{--text:#FFFFFF;--muted:#E0E0E0;--border:#8A8986;--bg:#000;--surface:#0E0E0E}
/* V3-CONTRASTE début */
/* Variables dédiées aux éléments interactifs (valeurs par défaut ; chaque design les recalcule dans son bloc V3-CONTRASTE) :
   --btn-bg/--btn-fg bouton principal, --btn-bg-h survol, --btn2-fg bouton secondaire, --on-accent texte sur accent,
   --accent-text accent employé comme texte, --disabled-* état désactivé lisible, --ctl-border contour des champs (3:1),
   --focus-ring indicateur de focus (3:1). */
:root{--btn-bg:var(--accent);--btn-bg-h:var(--accent-h);--btn-fg:var(--on-accent);--btn2-fg:var(--accent);--accent-text:var(--accent);
  --disabled-bg:var(--surface-2);--disabled-fg:var(--muted);--disabled-border:var(--border);
  --ctl-border:color-mix(in srgb,var(--text) 55%,var(--surface));--focus-ring:var(--accent)}
/* V3-CONTRASTE fin */
/* Taille du texte */
html{font-size:16px}
html[data-size="large"]{font-size:19px}

*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:1rem;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
.tem-header{background:var(--header-bg);color:var(--header-text);padding:12px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tem-header a{color:inherit;text-decoration:none}
.tem-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;letter-spacing:.2px}
.tem-brand svg{width:30px;height:30px;flex:none}
.tem-tagline{font-size:.8rem;opacity:.85;font-weight:400}
.tem-header .sp{flex:1}
main.tem-main{max-width:960px;margin:0 auto;padding:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
h1{font-size:1.6rem;line-height:1.2;margin:0 0 12px}
h2{font-size:1.2rem;margin:0 0 10px}
h3{font-size:1.02rem;margin:14px 0 6px}
.meta{font-size:.84rem;color:var(--muted)}
.btn{background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);border-radius:8px;padding:10px 16px;font-size:.95rem;cursor:pointer;margin:4px 6px 4px 0;text-decoration:none;display:inline-block;font-weight:550}
.btn:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h)}
.btn.sec{background:transparent;color:var(--btn2-fg);border-color:var(--btn2-fg)}
.btn.sec:hover{background:var(--accent-bg)}
.btn.ko{background:transparent;color:var(--ko);border-color:var(--ko)}
.btn.sm{padding:5px 10px;font-size:.82rem;margin:2px}
.btn:disabled{opacity:1;cursor:not-allowed;background:var(--disabled-bg);color:var(--disabled-fg);border-color:var(--disabled-border)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
input,select,textarea{font:inherit;font-size:.95rem;padding:8px 10px;border-radius:8px;border:1px solid var(--ctl-border);background:var(--surface);color:var(--text)}
textarea{width:100%;min-height:90px}
label.field{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--muted);margin:6px 0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--accent-bg);color:var(--accent);margin-right:6px}
.badge{display:inline-block;font-size:.75rem;font-weight:650;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--text)}
.badge.ok{background:var(--okbg);color:var(--ok)}.badge.ko{background:var(--kobg);color:var(--ko)}.badge.warn{background:var(--warnbg);color:var(--warn)}
.note{background:var(--warnbg);border-left:4px solid var(--warn);padding:8px 12px;border-radius:6px;font-size:.9rem;margin:10px 0}
.info{background:var(--accent-bg);border-left:4px solid var(--accent);padding:8px 12px;border-radius:6px;font-size:.9rem;margin:10px 0}
.hidden{display:none!important}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface)}
.kpi .v{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.kpi .l{font-size:.75rem;color:var(--muted)}
.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:8px 0}.bar>div{height:100%;background:var(--accent)}
footer.tem-footer{max-width:960px;margin:10px auto 30px;padding:12px 20px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--border)}
footer.tem-footer a{color:var(--muted)}
/* Sélecteur de thème (SJTheme.picker) */
.tem-theme{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tem-theme .seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.tem-theme .seg button{border:0;background:var(--surface);color:var(--text);padding:6px 10px;font-size:.84rem;cursor:pointer}
.tem-theme .seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.tem-theme .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);outline:1px solid var(--ctl-border);cursor:pointer;padding:0}
.tem-theme .dot[aria-pressed="true"]{outline:3px solid var(--text)}
.tem-theme-btn{background:transparent;border:1px solid currentColor;color:inherit;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:.84rem}
@media print{.tem-header,.no-print,nav{display:none!important}body{background:#fff;color:#000}.card{break-inside:avoid;border-color:#bbb;box-shadow:none}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* Menu « Se connecter » (vitrine) et lien « Retour au site » (pages intérieures) – sans script. © 2026 Ghislain DEMONDA */
.tem-login{position:relative}
.tem-login>summary{list-style:none;cursor:pointer;background:var(--accent);color:var(--on-accent);border-radius:8px;padding:8px 14px;font-weight:600;white-space:nowrap}
.tem-login>summary::-webkit-details-marker{display:none}
.tem-login>summary::after{content:" ▾"}
.tem-login-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:260px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px}
.tem-header .tem-login-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--text)}
.tem-login-menu a:hover,.tem-login-menu a:focus-visible{background:var(--surface-2)}
.tem-login-menu small{display:block;color:var(--muted);font-size:.85rem}
.tem-back{font-size:.92rem;font-weight:600;opacity:.92;white-space:nowrap}
.tem-back:hover{opacity:1;text-decoration:underline!important}
/* V4-NIVEAUX début : l'attribut hidden l'emporte toujours sur l'affichage imposé par un design (display:grid, flex...) */
[hidden]{display:none!important}
/* V4-NIVEAUX fin */
/* V4-APERCUS début : aperçus miniatures des fonctions de la vitrine (#fonctions .feat-apercu, décoratifs, aria-hidden).
   Affichés dans les 6 designs : chaque design fournit ses variables (clair, sombre, contraste renforcé) ; Prairie (t7)
   ajuste la présentation dans theme-t7.css. --ap-bg : fond de l'aperçu ; --ap-in : fond des éléments intérieurs.
   Sélecteurs sans <p>, <h3> ni <a> : les règles des designs sur .feat p / .feat h3 / .feat a ne s'y appliquent pas. */
.feat:has(>.feat-apercu){display:flex;flex-direction:column}
.feat>:has(+.feat-apercu){margin-bottom:16px}
.feat-apercu{container:ap/inline-size;--ap-bg:var(--surface-2);--ap-in:var(--surface);margin-top:auto;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--ap-bg);color:var(--text);font-size:.8rem;line-height:1.4;font-weight:400;letter-spacing:0;text-transform:none;text-align:left;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none}
.feat-apercu b{font-weight:700}
.feat-apercu .ap-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;margin:0 0 8px;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.feat-apercu .ap-top>:last-child:not(:first-child){margin-left:auto}
.feat-apercu .ap-top b{color:var(--text);font-size:.84rem}
.feat-apercu .ap-time{color:var(--text);font-variant-numeric:tabular-nums}
.feat-apercu .ap-prog,.feat-apercu .ap-meter,.feat-apercu .ap-gauge{position:relative;display:block;height:6px;border-radius:99px;background:var(--border)}
.feat-apercu .ap-prog i,.feat-apercu .ap-meter i,.feat-apercu .ap-gauge i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.feat-apercu .ap-w30{width:30%}.feat-apercu .ap-w48{width:48%}.feat-apercu .ap-w57{width:57%}.feat-apercu .ap-w55{width:55%}.feat-apercu .ap-w75{width:75%}
.feat-apercu .ap-q{margin:8px 0 6px;font-weight:600;color:var(--text)}
.feat-apercu .ap-opt{display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:var(--ap-in)}
.feat-apercu .ap-radio{flex:none;width:12px;height:12px;border:1.5px solid var(--muted);border-radius:50%}
.feat-apercu .ap-art{display:inline-block;max-width:100%;white-space:nowrap;margin-top:8px;padding:2px 9px;border:1px solid var(--border);border-radius:99px;background:var(--ap-in);color:var(--text);font-size:.72rem;font-weight:600}
.feat-apercu .ap-foot{margin-top:8px;color:var(--muted);font-size:.74rem}
/* Mes erreurs */
.feat-apercu .ap-line{display:grid;grid-template-columns:minmax(0,1fr) 52px 3.2em;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
.feat-apercu .ap-line b{text-align:right;font-variant-numeric:tabular-nums}
.feat-apercu .ap-meter i{background:var(--warn)}
/* Flashcards */
.feat-apercu .ap-card{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--ap-in);box-shadow:inset 3px 0 0 var(--accent)}
.feat-apercu .ap-card .ap-q{margin-top:0}
.feat-apercu .ap-vf{display:flex;gap:6px;margin-top:8px}
.feat-apercu .ap-vf span{flex:1;padding:3px 6px;border:1px solid var(--border);border-radius:8px;text-align:center}
.feat-apercu .ap-pill,.feat-apercu .ap-ok,.feat-apercu .ap-wait,.feat-apercu .ap-ko{display:inline-block;padding:1px 8px;border-radius:99px;border:1px solid var(--border);color:var(--text);font-weight:600;white-space:nowrap}
.feat-apercu .ap-pill,.feat-apercu .ap-ok{background:var(--okbg);border-color:var(--ok)}
.feat-apercu .ap-wait{background:var(--warnbg);border-color:var(--warn)}
.feat-apercu .ap-ko{background:var(--kobg);border-color:var(--ko)}
/* Gestes : dessin de l'application (couleurs des classes du dessin comme .gsvg dans app.css) */
.feat-apercu.ap-gfiche{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.feat-apercu .ap-fig{flex:none;width:88px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--ap-in)}
html body main .feat .feat-apercu svg.ap-geste{display:block;box-sizing:border-box;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--text)}
.feat-apercu .ap-geste .b{fill:var(--muted)}.feat-apercu .ap-geste .bl{stroke:var(--muted)}
.feat-apercu .ap-geste .h{fill:var(--accent)}.feat-apercu .ap-geste .hs{stroke:var(--accent)}
.feat-apercu .ap-geste .m{stroke:var(--text)}.feat-apercu .ap-geste .mh{fill:var(--text)}
.feat-apercu .ap-geste .g{opacity:.4}.feat-apercu .ap-geste .ol{stroke:var(--ap-in)}
.feat-apercu .ap-gtxt{flex:1 1 130px;min-width:0}
.feat-apercu .ap-gtxt .ap-top{margin-bottom:2px}
.feat-apercu .ap-gname{font-size:.98rem;font-weight:700;line-height:1.25}
.feat-apercu .ap-gdesc{color:var(--muted)}
/* Ateliers table de marque : chronomètres en affichage inversé (texte et fond du design échangés) */
.feat-apercu .ap-clocks{display:flex;gap:8px}
.feat-apercu .ap-clock{flex:1;padding:6px 10px;border-radius:8px;background:var(--text);color:var(--ap-in)}
.feat-apercu .ap-clock span{display:block;font-size:.68rem;font-weight:600;white-space:nowrap}
.feat-apercu .ap-clock b{display:block;font-size:1.35rem;line-height:1.15;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.feat-apercu .ap-sit{margin:8px 0 6px}
.feat-apercu .ap-choix{display:flex;flex-wrap:wrap;gap:6px}
.feat-apercu .ap-choix span{white-space:nowrap;padding:2px 9px;border:1px solid var(--border);border-radius:99px;background:var(--ap-in)}
.feat-apercu .ap-choix .ap-good{background:var(--okbg);border-color:var(--ok);font-weight:700}
/* Indicateur interne : jauge et repères des deux paliers (14/20 = 70 %, 16/20 = 80 %) */
.feat-apercu .ap-pct{font-size:1.05rem}
.feat-apercu .ap-gwrap{position:relative;margin:4px 0 6px;padding-top:14px}
.feat-apercu .ap-gauge{height:10px}
.feat-apercu .ap-mark{position:absolute;top:0;bottom:-3px;padding-left:3px;border-left:2px solid var(--text);font-size:.66rem;font-weight:700;line-height:1;color:var(--text)}
.feat-apercu .ap-m1{left:70%}.feat-apercu .ap-m2{left:80%}
.feat-apercu .ap-legend{margin-bottom:6px;color:var(--muted);font-size:.72rem}
.feat-apercu .ap-palier{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px}
/* Thèmes et lisibilité : réglages du panneau « Affichage » ; pastilles aux couleurs d'accent de ce fichier (data-accent) */
.feat-apercu .ap-seg{display:inline-flex;flex-wrap:wrap;margin:0 6px 6px 0;padding:2px;border:1px solid var(--border);border-radius:99px;background:var(--ap-in)}
.feat-apercu .ap-seg span{padding:2px 10px;border-radius:99px;white-space:nowrap}
.feat-apercu .ap-seg .ap-on{background:var(--btn-bg);color:var(--btn-fg);font-weight:700}
.feat-apercu .ap-dots{display:flex;gap:8px;margin:0 0 8px}
.feat-apercu .ap-dots i{display:block;width:22px;height:22px;border-radius:50%;background:var(--accent)}
/* Quiz Éclair et Défi du jour */
.feat-apercu .ap-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.feat-apercu .ap-modes span{text-wrap:pretty;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--ap-in);font-size:.74rem}
.feat-apercu .ap-modes b{display:block;font-size:.8rem}
.feat-apercu .ap-steps{display:flex;gap:6px}
.feat-apercu .ap-steps span{display:grid;place-items:center;width:28px;height:28px;padding:0}
/* Appel final « Prêt à réviser » (vitrine) : titre centré comme le texte et les boutons, dans tous les designs */
html body .tem-main section.block.band>h2{margin-inline:auto;text-align:center}
/* Aperçus étroits (grilles à 4 colonnes, 600 px, grand texte) : jauges sous le libellé, segments en pastilles
   indépendantes qui vont à la ligne, chronomètres empilés (libellé à gauche, valeur à droite), intitulé d'article masqué */
@container ap (max-width:20rem){
  .feat-apercu .ap-line{grid-template-columns:minmax(0,1fr) 3.2em;gap:4px 8px}
  .feat-apercu .ap-line .ap-meter{grid-column:1/-1;grid-row:2}
  .feat-apercu .ap-seg{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;padding:0;border:0;border-radius:0;background:none}
  .feat-apercu .ap-seg span{border:1px solid var(--border);background:var(--ap-in)}
  .feat-apercu .ap-seg .ap-on{border-color:var(--btn-bg);background:var(--btn-bg)}
  .feat-apercu .ap-clocks{flex-direction:column;gap:6px}
  .feat-apercu .ap-clock{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 10px}
  .feat-apercu .ap-clock b{font-size:1.15rem}
  .feat-apercu .ap-art-t{display:none}
  .feat-apercu .ap-modes{grid-template-columns:minmax(0,1fr)}
}
/* V4-APERCUS fin */
/* V4-CARTES début : une carte de fonction n'est cliquable (et n'a de flèche ou d'effet au survol) que si elle mène quelque part.
   Lien du titre étendu à toute la carte ; les autres liens de la carte restent cliquables au-dessus. */
.feat.a-lien{position:relative;cursor:pointer}
.feat.a-lien .feat-lien{color:inherit;text-decoration:none}
.feat.a-lien .feat-lien::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.feat.a-lien a:not(.feat-lien){position:relative;z-index:2}
.feat.a-lien .feat-lien:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:4px} /* anneau porté par le lien lui-même (clavier) */
.feat.a-lien:hover .feat-lien{text-decoration:underline;text-underline-offset:.15em}
html body .tem-main .feat:not(.a-lien):hover,html:root .feat:not(.a-lien):hover,.block .feat:not(.a-lien):hover{transform:none!important}
/* V4-CARTES fin */
/* V4-CERTITUDE début : élément propre à une fonction fermée (data-feat, lib/prerender.js) toujours masqué */
[data-feat][hidden]{display:none!important}
/* V4-CERTITUDE fin */

/* TEM-STADE début */
/* ======================================================================
   Vocabulaire « stade » (lots LOOK-FIL puis LOOK-TYPO), section du socle.
   Ancienne feuille public/assets/tem-stade.css, fusionnée ici par le lot LOOK-TYPO pour une
   cascade unique : socle (cette feuille), puis thème actif (/theme.css), puis feuille d écran.
   Aucune police distante, aucune image extérieure : polices du système, motifs en dégradés.
   data-style="base" (sélecteur, public/assets/theme.js) neutralise les surcouches de
   composants : seul le vocabulaire .stade-* et le langage typographique restent.
   ====================================================================== */

/* ---------- Palette unique (clair) ---------- */
:root,
[data-theme="light"] {
  --stade-page: #f4f1e8;
  --stade-sable: #ecdfbe;
  --stade-sable-clair: #f4efe0;
  --stade-carte: #ffffff;
  --stade-encre: #1d1a13;
  --stade-encre-page: #1c1a14;
  --stade-encre-douce: #5f5948;
  --stade-vert: #0c5c3e;
  --stade-vert-fonce: #083b29;
  --stade-pied: #5d594d;
  --stade-compar-fond: #101511;
  --stade-compar-encre: #f0eee4;
  --stade-ligne: #8f8566; /* LOOK-TYPO : contour des champs à 3:1 au moins sur la page et la carte (point 21) */
  --stade-bulle2: #e7f0e2;
  --stade-piste: #e5ddc2;
  --stade-ok-f: #d9eee0;
  --stade-ok: #0a4a33;
  --stade-ko-f: #f5ddd2;
  --stade-ko: #7a2a1a;
  --stade-att-f: #ece0ba;
  --stade-att: #5c4c1f;

  /* Géométrie : un seul jeu de valeurs, partout. */
  --stade-r: 16px;
  --stade-r-grand: 22px;
  --stade-bord: 3px;
  --stade-bord-fin: 2px;
  --stade-ombre: 5px 5px 0 var(--stade-encre);
  --stade-ombre-legere: 4px 4px 0 var(--stade-encre);
  --stade-ombre-forte: 7px 7px 0 var(--stade-encre);

  /* Variables du socle réévaluées : les composants de tem.css suivent le thème stade. */
}

/* ---------- Palette unique (sombre) : encre et sable inversés ---------- */
[data-theme="dark"] {
  --stade-page: #101511;
  --stade-sable: #2a2718;
  --stade-sable-clair: #1b2019;
  --stade-carte: #161a15;
  --stade-encre: #f0eee4;
  --stade-encre-page: #f0eee4;
  --stade-encre-douce: #c3c0b0;
  --stade-vert: #6fbf94;
  --stade-vert-fonce: #8fd3ac;
  --stade-pied: #c3c0b0;
  --stade-compar-fond: #0b0d0a;
  --stade-compar-encre: #f0eee4;
  --stade-ligne: #8c8a7c;
  --stade-bulle2: #1d2a22;
  --stade-piste: #2a2f26;
  --stade-ok-f: #1d2a22;
  --stade-ok: #8fe3b0;
  --stade-ko-f: #3a2028;
  --stade-ko: #f0a8b8;
  --stade-att-f: #332c14;
  --stade-att: #e0cf8a;

}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --stade-page: #101511;
    --stade-sable: #2a2718;
    --stade-sable-clair: #1b2019;
    --stade-carte: #161a15;
    --stade-encre: #f0eee4;
    --stade-encre-page: #f0eee4;
    --stade-encre-douce: #c3c0b0;
    --stade-vert: #6fbf94;
    --stade-vert-fonce: #8fd3ac;
    --stade-pied: #c3c0b0;
    --stade-compar-fond: #0b0d0a;
    --stade-compar-encre: #f0eee4;
    --stade-ligne: #8c8a7c;
    --stade-bulle2: #1d2a22;
    --stade-piste: #2a2f26;
    --stade-ok-f: #1d2a22;
    --stade-ok: #8fe3b0;
    --stade-ko-f: #3a2028;
    --stade-ko: #f0a8b8;
    --stade-att-f: #332c14;
    --stade-att: #e0cf8a;
  }
}

/* Socle réévalué par le style stade : le mode « Thème de base » garde tem.css. */
html:root[data-style="stade"] {
  --ok: var(--stade-ok);
  --ko: var(--stade-ko);
  --bg: var(--stade-page);
  --surface: var(--stade-carte);
  --surface-2: var(--stade-sable-clair);
  --border: var(--stade-encre);
  --text: var(--stade-encre-page);
  --muted: var(--stade-pied);
  --faint: var(--stade-pied);
  --accent: var(--stade-vert);
  --accent-h: var(--stade-vert-fonce);
  --accent-bg: var(--stade-sable);
  --on-accent: #ffffff;
  --header-bg: var(--stade-compar-fond);
  --header-text: var(--stade-compar-encre);
  --btn-bg: var(--stade-vert-fonce);
  --btn-bg-h: var(--stade-vert);
  --btn-fg: #ffffff;
  --btn2-fg: var(--stade-encre);
  --focus-ring: var(--stade-vert-fonce);
  --ctl-border: var(--stade-ligne);
  --shadow: none;

}

html:root[data-style="stade"][data-theme="dark"] {
  --bg: var(--stade-page);
  --surface: var(--stade-carte);
  --surface-2: var(--stade-sable-clair);
  --border: var(--stade-encre);
  --text: var(--stade-encre-page);
  --muted: var(--stade-pied);
  --faint: var(--stade-pied);
  --accent: var(--stade-vert);
  --accent-h: var(--stade-vert-fonce);
  --accent-bg: var(--stade-sable);
  --on-accent: #101511;
  --header-bg: var(--stade-compar-fond);
  --header-text: var(--stade-compar-encre);
  --btn-bg: var(--stade-vert-fonce);
  --btn-bg-h: var(--stade-vert);
  --btn-fg: #101511;
  --btn2-fg: var(--stade-encre);
  --focus-ring: var(--stade-vert);
  --ctl-border: var(--stade-ligne);

}

@media (prefers-color-scheme: dark) {
  html:root[data-style="stade"][data-theme="auto"] {
    --bg: var(--stade-page);
    --surface: var(--stade-carte);
    --surface-2: var(--stade-sable-clair);
    --border: var(--stade-encre);
    --text: var(--stade-encre-page);
    --muted: var(--stade-pied);
    --faint: var(--stade-pied);
    --accent: var(--stade-vert);
    --accent-h: var(--stade-vert-fonce);
    --accent-bg: var(--stade-sable);
    --on-accent: #101511;
    --header-bg: var(--stade-compar-fond);
    --header-text: var(--stade-compar-encre);
    --btn-bg: var(--stade-vert-fonce);
    --btn-bg-h: var(--stade-vert);
    --btn-fg: #101511;
    --btn2-fg: var(--stade-encre);
    --focus-ring: var(--stade-vert);
    --ctl-border: var(--stade-ligne);

  }
}

/* Contraste renforcé : texte plein partout, bords nets. */
[data-contrast="high"] {
  --stade-pied: var(--stade-encre-page);
  --stade-encre-douce: var(--stade-encre-page);
  --muted: var(--text);
  --faint: var(--text);
}

/* ---------- Alias court : les règles de la vitrine extraite les utilisent ---------- */
:root {
  --fond-page: var(--stade-page);
  --encre-page: var(--stade-encre-page);
  --pied: var(--stade-pied);
  --compar-fond: var(--stade-compar-fond);
  --compar-encre: var(--stade-compar-encre);
  --carte: var(--stade-carte);
  --encre: var(--stade-encre);
  --doux: var(--stade-encre-douce);
  --ligne: var(--stade-ligne);
  --vert: var(--stade-vert);
  --vert-fonce: var(--stade-vert-fonce);
  --sable: var(--stade-sable);
  --bulle2: var(--stade-bulle2);
  --ok-f: var(--stade-ok-f);
  --ko-f: var(--stade-ko-f);
  --att-f: var(--stade-att-f);
  --att: var(--stade-att);
  --piste: var(--stade-piste);
}

/* ---------- Surcouches de composants (neutralisées en thème de base) ---------- */
html:root[data-style="stade"] body {
  line-height: 1.6;
}

html:root[data-style="stade"] .tem-header {
  background: var(--stade-compar-fond);
  color: var(--stade-compar-encre);
  border-bottom: var(--stade-bord) solid var(--stade-encre);
  position: sticky;
  top: 0;
  z-index: 50;
}

html:root[data-style="stade"] .tem-header a,
html:root[data-style="stade"] .tem-header .tem-back {
  color: inherit;
}

html:root[data-style="stade"] .tem-header .tem-back {
  border: var(--stade-bord-fin) solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
}

html:root[data-style="stade"] .tem-header .tem-back:hover {
  background: rgba(255, 255, 255, .12);
  text-decoration: none;
}

html:root[data-style="stade"] main.tem-main {
  max-width: 1140px;
}

html:root[data-style="stade"] .card {
  background: var(--stade-carte);
  border: var(--stade-bord) solid var(--stade-encre);
  border-radius: var(--stade-r-grand);
  box-shadow: var(--stade-ombre);
  padding: 20px 22px;
}

html:root[data-style="stade"] .card h1 { letter-spacing: -.5px; }
html:root[data-style="stade"] .card h2 { letter-spacing: -.3px; }
html:root[data-style="stade"] .card h3 { font-weight: 800; }
html:root[data-style="stade"] .meta { color: var(--stade-pied); }

html:root[data-style="stade"] .kpis { gap: 14px; }

html:root[data-style="stade"] .kpi {
  background: var(--stade-carte);
  border: var(--stade-bord-fin) solid var(--stade-encre);
  border-radius: var(--stade-r);
  box-shadow: var(--stade-ombre-legere);
  padding: 14px 16px;
}

html:root[data-style="stade"] .kpi .v {
  font-weight: 850;
  letter-spacing: -.5px;
}

html:root[data-style="stade"] .kpi .v a {
  color: var(--stade-vert);
  text-decoration: none;
}

html:root[data-style="stade"] .kpi .v a:hover { text-decoration: underline; }
html:root[data-style="stade"] .kpi .l { color: var(--stade-pied); font-size: .82rem; }

html:root[data-style="stade"] .btn {
  border: var(--stade-bord-fin) solid var(--stade-encre);
  border-radius: 999px;
  font-weight: 850;
  padding: 13px 24px;
}

html:root[data-style="stade"] .btn.sec {
  background: var(--stade-carte);
  color: var(--stade-encre);
  box-shadow: var(--stade-ombre-legere);
}

html:root[data-style="stade"] .btn.sec:hover { background: var(--stade-sable-clair); }

html:root[data-style="stade"] input,
html:root[data-style="stade"] select,
html:root[data-style="stade"] textarea {
  border: var(--stade-bord-fin) solid var(--stade-ligne);
  border-radius: 10px;
  background: var(--stade-carte);
}

html:root[data-style="stade"] .tag,
html:root[data-style="stade"] .badge {
  border: var(--stade-bord-fin) solid var(--stade-encre);
}

html:root[data-style="stade"] th { background: var(--stade-sable-clair); }

html:root[data-style="stade"] .info {
  background: var(--stade-ok-f);
  border-left: 4px solid var(--stade-vert);
  color: var(--stade-ok);
}

html:root[data-style="stade"] .note {
  background: var(--stade-att-f);
  border-left: 4px solid var(--stade-att);
  color: var(--stade-att);
}

html:root[data-style="stade"] footer.tem-footer {
  border-top: var(--stade-bord) solid var(--stade-encre);
  color: var(--stade-pied);
  max-width: 1140px;
}

/* ---------- Vocabulaire .stade-* : présent quelle que soit la valeur de data-style ---------- */
.stade-bandeau {
  background: var(--stade-encre);
  color: var(--stade-sable-clair);
  border: var(--stade-bord) solid var(--stade-encre);
  border-radius: 14px;
  padding: 8px 16px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}

.stade-heure {
  display: block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--stade-pied);
  margin-bottom: 2px;
}

.stade-carte {
  display: block;
  background: var(--stade-carte);
  border: var(--stade-bord-fin) solid var(--stade-encre);
  border-radius: var(--stade-r);
  box-shadow: var(--stade-ombre);
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
}

.stade-carte:hover,
.stade-carte:focus-visible {
  background: var(--stade-sable-clair);
}

.stade-carte > .v,
.stade-carte > strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -.4px;
  margin-bottom: 4px;
}

.stade-carte > p {
  margin: 0;
  color: var(--stade-pied);
  font-size: .86rem;
  line-height: 1.5;
}

.stade-carte.sable { background: var(--stade-sable); }

/* Pastilles : voir la section TEM-LOOKTYPO. */

.stade-b1,
.stade-b2 {
  display: inline-block;
  border: var(--stade-bord-fin) solid var(--stade-encre);
  border-radius: 999px;
  text-decoration: none;
  margin: 4px 8px 4px 0;
}

.stade-b1 {
  background: var(--stade-vert-fonce);
  color: var(--on-accent);
  padding: 15px 26px;
  font-weight: 850;
}

.stade-b1:hover { background: var(--stade-vert); color: var(--on-accent); }

.stade-b2 {
  background: var(--stade-carte);
  color: var(--stade-encre);
  padding: 13px 26px;
  font-weight: 750;
  box-shadow: var(--stade-ombre-legere);
}

.stade-b2:hover { background: var(--stade-sable-clair); }

.stade-ticket {
  border: var(--stade-bord) solid var(--stade-encre);
  border-radius: var(--stade-r);
  background: var(--stade-carte);
  overflow: hidden;
  margin: 12px 0;
}

.stade-ticket summary {
  cursor: pointer;
  list-style: none;
  font-weight: 850;
  color: var(--stade-vert);
  padding: 14px 16px 10px;
}

.stade-ticket summary::-webkit-details-marker { display: none; }

.stade-ticket-bas {
  border-top: var(--stade-bord) dashed var(--stade-encre);
  background: var(--stade-sable);
  padding: 10px 16px 14px;
}

.stade-montant {
  display: block;
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -1px;
}

.stade-etape {
  border-top: var(--stade-bord) dashed var(--stade-piste);
  padding-top: 12px;
  margin-top: 14px;
}

.stade-etape:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.stade-etape p {
  margin: 4px 0 0;
  color: var(--stade-pied);
  font-size: .88rem;
}

/* ---------- Fil d Ariane (lot LOOK-FIL) ---------- */
.stade-fil {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  align-items: center;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: .78rem;
}

.stade-fil li { display: flex; align-items: center; gap: 4px; }

.stade-fil li + li::before {
  content: "›";
  color: var(--stade-pied);
  font-weight: 800;
  margin-right: 2px;
}

/* Pastilles du fil (passée, courante, à venir) : voir la section TEM-LOOKTYPO. */

/* ---------- Carte unique d étape suivante (lot LOOK-FIL) ---------- */
.stade-suivante { margin-top: 6px; }

.stade-suivante .stade-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "heure heure" "pastille titre" "phrase phrase";
  gap: 2px 12px;
  align-items: baseline;
}

.stade-suivante .stade-heure { grid-area: heure; }
.stade-suivante .stade-pastille { grid-area: pastille; margin: 4px 0 0; justify-self: start; }
.stade-suivante strong { grid-area: titre; }
.stade-suivante p { grid-area: phrase; }

@media (max-width: 480px) {
  html:root[data-style="stade"] .card {
    padding: 16px;
    border-radius: var(--stade-r);
    box-shadow: var(--stade-ombre-legere);
  }

  html:root[data-style="stade"] .btn,
  .stade-b1,
  .stade-b2 {
    display: block;
    text-align: center;
  }

  .stade-suivante .stade-carte {
    grid-template-columns: 1fr;
    grid-template-areas: "heure" "pastille" "titre" "phrase";
  }
}

@media (prefers-reduced-motion: reduce) {
  .stade-carte:hover { background: var(--stade-carte); }
}


/* ---------- Vitrine « fil du groupe » : règles extraitees du <style> de vitrine-e-b (lot LOOK-FIL) ---------- */
html{scroll-behavior:smooth}
a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:8px}
/* LOOK-TYPO : dans l en-tête, l anneau prend la couleur du texte de l en-tête (lien courant). */
html:root .tem-header :focus-visible,html:root .entete :focus-visible{outline-color:currentColor}
.tem-theme .dot:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.aller{position:absolute;left:-9999px;top:auto;background:var(--carte);color:var(--stade-encre-page);padding:10px 16px;border-radius:999px}
.aller:focus{left:16px;top:12px;z-index:60}
.enveloppe{max-width:1140px;margin:0 auto;padding:0 20px}
.entete{position:sticky;top:0;z-index:50;background:var(--compar-fond);color:var(--compar-encre);border-bottom:1px solid color-mix(in srgb, var(--stade-compar-encre) 25%, transparent)}
.entete-ligne{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 20px}
.entete-ligne p{margin:0;font-size:14px}
.entete-ligne .mention{opacity:.8}
.entete-ligne nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.entete-ligne nav a{color:var(--compar-encre);text-decoration:none;font-size:14px;border:1px solid color-mix(in srgb, var(--stade-compar-encre) 45%, transparent);border-radius:999px;padding:6px 14px}
.sommaire{padding:44px 0 6px}
.sommaire h1{font-size:clamp(30px,4vw,44px);line-height:1.08;margin:0 0 8px;letter-spacing:-.5px}
.sommaire p{max-width:52em;color:var(--pied);margin:0}
.barre,.barre-mini{border-radius:99px;overflow:hidden;background:var(--piste)}
.barre>div,.barre-mini>div{height:100%;background:var(--vert)}
.pastille{display:inline-block;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:750;margin:0 6px 6px 0;border:2px solid var(--encre)}
.ok{background:var(--ok-f);color:var(--ok)}
.ko{background:var(--ko-f);color:var(--ko)}
.att{background:var(--att-f);color:var(--att)}
/* V2 fil du groupe */
.v2{background:var(--stade-sable-clair);color:var(--encre);background-image:radial-gradient(var(--typo-trame) 1px,transparent 1.5px);background-size:var(--typo-trame-pas) var(--typo-trame-pas);padding-bottom:40px;border-radius:26px;overflow:hidden;border:3px solid var(--encre);margin:28px 0 60px}
.v2 .bandeau-defil{background:var(--encre);color:var(--stade-sable-clair);overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--encre)}
.v2 .bandeau-defil div{display:inline-block;padding:7px 0;font-size:13px;font-weight:800;letter-spacing:2px}
.v2 .fil{max-width:1140px;margin:0 auto;padding:36px 20px 10px;display:grid;grid-template-columns:1.05fr 392px;gap:32px;align-items:start}
.v2 h2.hero-titre{font-size:clamp(42px,6vw,80px);line-height:.96;margin:14px 0 10px;letter-spacing:-2px;text-transform:uppercase}
.v2 h2.hero-titre .creux{color:transparent;-webkit-text-stroke:2.5px var(--encre)}
.v2 h2.hero-titre .surligne{background:var(--sable);border-radius:14px;padding:0 14px;display:inline-block;transform:rotate(-1.5deg)}
.v2 .kicker{display:inline-block;background:var(--encre);color:var(--stade-sable-clair);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:750}
.v2 .boutons{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.v2 .b1{background:var(--vert-fonce);color:var(--on-accent);padding:15px 26px;border-radius:999px;text-decoration:none;font-weight:850;border:2px solid var(--encre)}
.v2 .b2{background:var(--stade-carte);color:var(--encre);padding:13px 26px;border-radius:999px;text-decoration:none;font-weight:750;border:2px solid var(--encre);box-shadow:var(--stade-ombre-legere)}
.v2 .journee{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.v2 .etape{border:2px solid var(--encre);background:var(--stade-carte);border-radius:16px;padding:16px;box-shadow:var(--stade-ombre)}
.v2 .etape:nth-child(2){transform:rotate(-.5deg)}
.v2 .etape.sable{background:var(--sable)}
.v2 .heure{font-size:12px;font-weight:850;letter-spacing:1.5px;text-transform:uppercase;color:var(--doux)}
.v2 .tel{background:var(--stade-carte);border:3px solid var(--encre);border-radius:32px;padding:14px;box-shadow:var(--stade-ombre-forte);position:sticky;top:76px;transform:rotate(.6deg)}
.v2 .epingle{background:var(--encre);color:var(--stade-sable-clair);border-radius:18px;padding:12px 14px;font-size:13px}
.v2 .bulle{border:2px solid var(--encre);border-radius:4px 18px 18px 18px;padding:11px 13px;margin:10px 0;font-size:14px;background:var(--stade-carte)}
.v2 .bulle.droite{background:var(--bulle2);border-radius:18px 4px 18px 18px;margin-left:26px}
.v2 .barre{height:12px;border:2px solid var(--encre);margin:8px 0}
.v2 .barre-mini{height:12px;border:2px solid var(--encre);margin-top:8px;max-width:320px}
.v2 .w75{width:75%}
.v2 .w100{width:100%}
.v2 .ticket{border:3px solid var(--encre);border-radius:18px;margin:12px 0;overflow:hidden;background:var(--stade-carte)}
.v2 .ticket summary{cursor:pointer;font-weight:850;color:var(--vert);padding:14px 16px 10px;list-style:none}
.v2 .ticket summary::-webkit-details-marker{display:none}
.v2 .ticket-bas{border-top:3px dashed var(--encre);background:var(--sable);padding:10px 16px 14px}
.v2 .montant{font-size:32px;font-weight:850;letter-spacing:-1px}
.v2 .reponse{border:2px solid var(--encre);border-radius:16px;padding:12px;margin:12px 0}
.v2 .choix{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.v2 .choix label{border:2px solid var(--encre);border-radius:999px;padding:12px 6px;text-align:center;font-weight:800;cursor:pointer;position:relative}
.v2 .choix input{position:absolute;opacity:0}
.v2 .choix label:has(input:checked){background:var(--encre);color:var(--stade-sable-clair)}
.v2 .tarifs3{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;max-width:1140px;margin:18px auto 0;padding:0 20px}
.v2 .prix{border:3px solid var(--encre);background:var(--stade-carte);box-shadow:var(--stade-ombre);padding:18px}
.v2 .prix.reco{background:var(--sable)}
.v2 .faq-mini{max-width:820px;margin:20px auto 0;padding:0 20px}
.v2 .q{background:var(--stade-carte);border:2px solid var(--encre);border-radius:18px 18px 18px 4px;padding:12px 16px;margin:12px 60px 4px 0;font-weight:750}
.v2 .r{background:var(--bulle2);border:2px solid var(--encre);border-radius:18px 18px 4px 18px;padding:12px 16px;margin:4px 0 12px 60px;font-size:15px}
.bloc-contact{max-width:680px;margin:0 auto 50px;padding:26px 26px 30px;background:var(--carte);color:var(--encre);border:3px solid var(--encre);border-radius:22px}
.bloc-contact h2{margin:0 0 6px;font-size:clamp(24px,3vw,32px);letter-spacing:-.5px}
.bloc-contact>p{color:var(--pied);margin:0 0 16px}
.bloc-contact label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:750;margin:0 0 12px}
.bloc-contact input,.bloc-contact textarea{font:inherit;font-size:15px;padding:9px 11px;border:2px solid var(--ligne);border-radius:10px;background:var(--stade-carte);color:var(--encre)}
.bloc-contact textarea{min-height:96px;width:100%;box-sizing:border-box;resize:vertical}
.bloc-contact .action{margin:4px 0 0}
.bloc-contact button{font:inherit;font-weight:850;font-size:15px;padding:11px 22px;border:2px solid var(--encre);border-radius:999px;background:var(--vert);color:var(--on-accent);cursor:pointer}
.bloc-contact #tc-etat{min-height:1.2em;font-size:13px;color:var(--pied);margin:10px 0 0}
.pied{padding:30px 0 54px;color:var(--pied);font-size:13px}
.pied nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
@media (max-width:960px){.v2 .fil{grid-template-columns:1fr}.v2 .tel{position:static;transform:none}.v2 .tarifs3{grid-template-columns:1fr}}
@media (max-width:480px){.v2 .choix{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Icone de l application (favicon en tete, lot retour porteur) ---------- */
.tem-logo {
  vertical-align: -7px;
  margin-right: 8px;
  border-radius: 7px;
}

.entete-ligne .tem-logo {
  margin-right: 6px;
}

/* ---------- Bouton d acces dans l en-tete sombre de la vitrine ---------- */
.entete-cta {
  background: var(--stade-vert-fonce);
  color: var(--on-accent);
  border: 2px solid var(--stade-vert-fonce);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}

.entete-cta:hover {
  background: var(--stade-vert);
}

/* ---------- Section « Comment ça marche » (workflow messagerie -> outil) ---------- */
.parcours {
  max-width: 1140px;
  margin: 26px auto 0;
  padding: 0 20px;
}

.parcours h2 {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.5px;
  margin: 0 0 6px;
}

.parcours > p {
  max-width: 52em;
  color: var(--stade-pied);
  margin: 0;
}

.parcours ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.parcours li {
  background: var(--stade-carte);
  border: 2px solid var(--stade-encre);
  border-radius: var(--stade-r);
  box-shadow: var(--stade-ombre-legere);
  padding: 14px 16px;
}

.parcours li strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -.3px;
  margin: 4px 0;
}

.parcours li p {
  margin: 0;
  color: var(--stade-pied);
  font-size: .88rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .parcours li { box-shadow: var(--stade-ombre-legere); }
}
/* TEM-STADE fin */

/* TEM-LOOKTYPO début */
/* ======================================================================
   Lot LOOK-TYPO : langage « titre monumental ».
   Trois lignes en capitales condensées très grasses : une ligne pleine, une ligne
   en contour, une ligne posée sur un bandeau sable arrondi. Fond à trame de points.
   Le socle ne porte que des jetons dérivés des variables du thème actif (--text, --bg,
   --stade-sable…) : les designs classique et t2 les héritent tels quels, affiche et mosaique
   (lot LOOK-TYPO) les redéfinissent. Aucune police distante : pile système condensée.
   ====================================================================== */
:root {
  --typo-police: "Bahnschrift", "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --typo-largeur: condensed;
  --typo-graisse: 800;
  --typo-titre: clamp(2.5rem, 1.2rem + 5.4vw, 5.6rem);
  --typo-sur: clamp(1.35rem, 1rem + 1.5vw, 2.4rem);
  --typo-sous: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  --typo-interligne: .96;
  --typo-espacement: -.005em;
  --typo-trait: max(3px, .06em);
  --typo-trait-sur: max(2.4px, .11em);
  --typo-creux-fond: var(--bg);
  --typo-encre: var(--text);
  --typo-contour: var(--text);
  --typo-bandeau: var(--stade-sable);
  --typo-bandeau-encre: var(--text);
  --typo-bandeau-r: 16px;
  --typo-bandeau-penche: 0deg;
  --typo-trame: color-mix(in srgb, var(--text) 13%, transparent);
  --typo-trame-pas: 22px;
  --pastille-pleine: var(--text);
  --pastille-pleine-encre: var(--bg);
  --pastille-contour: var(--text);
  --pastille-bord: 2px;
  --fil-rail: transparent;
  --fil-rail-bord: transparent;
  --fil-a-venir-fond: var(--surface);
  --bloc-fond: var(--surface-2);
  --bloc-accent: var(--accent-bg);
  --bloc-r: 12px;
  --suivante-fond: var(--surface);
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 36px;
  --grille-max: 1100px;
  --grille-texte: 720px;
}
html:root[data-contrast="high"] {
  --typo-trait: max(4px, .084em);
  --typo-trait-sur: max(3.2px, .14em);
  --typo-trame: transparent;
  --pastille-bord: 3px;
}

/* Lien « Aller au contenu » : hors écran jusqu au focus clavier. */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 70; padding: 10px 16px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; }
.skip:focus { left: 16px; }

/* Trame de points : sur toute page, quel que soit le style choisi. */
body {
  background-image: radial-gradient(var(--typo-trame) 1px, transparent 1.5px);
  background-size: var(--typo-trame-pas) var(--typo-trame-pas);
}

/* En-tête d écran : sur-titre en contour, titre monumental en trois lignes, chapô. */
.typo-tete { margin: var(--esp-5) 0; }
html:root .typo-sur,
html:root .typo-titre,
html:root .stade-suivante > h2 {
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  text-transform: uppercase;
  text-wrap: balance;
}
html:root .typo-sur {
  font-size: var(--typo-sur);
  line-height: 1;
  letter-spacing: .035em;
  margin: 0 0 .45em;
  color: var(--typo-creux-fond);
  -webkit-text-stroke: var(--typo-trait-sur) var(--typo-contour);
  paint-order: stroke fill;
}
html:root .typo-titre {
  font-size: var(--typo-titre);
  line-height: var(--typo-interligne);
  letter-spacing: var(--typo-espacement);
  color: var(--typo-encre);
  margin: 0;
  overflow-wrap: break-word;
  hyphens: manual;
}
.typo-titre > span { display: block; }
.typo-creux {
  color: var(--typo-creux-fond);
  -webkit-text-stroke: var(--typo-trait) var(--typo-contour);
  paint-order: stroke fill;
}
.typo-bandeau {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: .08em 0 0 -.12em;
  padding: .07em .2em .01em;
  background: var(--typo-bandeau);
  color: var(--typo-bandeau-encre);
  border-radius: var(--typo-bandeau-r);
  transform: rotate(var(--typo-bandeau-penche));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.typo-chapo {
  max-width: var(--grille-texte);
  margin: var(--esp-4) 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

/* Un second titre dans une carte se détache du bloc qui le précède. */
.card > :not(h1, h2) + h2 { margin-top: var(--esp-5); }

/* Le remplissage du contour reprend le fond du conteneur : page, carte ou tuile. */
.card { --typo-creux-fond: var(--surface); }
html:root[data-style="stade"] .card { --typo-creux-fond: var(--stade-carte); }

/* Carte unique « Étape suivante » : titre en contour (état à venir), bandeau sable. */
html:root .stade-suivante > h2 {
  font-size: var(--typo-sur);
  line-height: 1;
  letter-spacing: .035em;
  color: var(--typo-creux-fond);
  -webkit-text-stroke: var(--typo-trait-sur) var(--typo-contour);
  paint-order: stroke fill;
  margin: 0 0 var(--esp-3);
}
.stade-suivante .stade-carte { background: var(--suivante-fond); }
.stade-suivante .stade-carte > strong {
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  text-transform: uppercase;
  font-size: var(--typo-sous);
  line-height: .95;
  letter-spacing: 0;
  width: fit-content;
  max-width: 100%;
  padding: .08em .22em .02em;
  background: var(--typo-bandeau);
  color: var(--typo-bandeau-encre);
  border-radius: calc(var(--typo-bandeau-r) * .75);
}

/* Pastilles : pleine pour l état atteint, contour pour l état à venir. */
.stade-pastille,
.convoc-etat,
.fiche-etat {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  border: var(--pastille-bord) solid currentColor;
  border-radius: 999px;
  padding: 2px 12px 2px 9px;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.5;
  background: transparent;
  color: var(--pastille-contour);
}
.stade-pastille::before,
.convoc-etat::before,
.fiche-etat::before {
  content: "";
  flex: none;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.stade-pastille.ok,
.convoc-etat.present,
.fiche-etat.present {
  background: var(--pastille-pleine);
  border-color: var(--pastille-pleine);
  color: var(--pastille-pleine-encre);
}
.stade-pastille.ok::before,
.convoc-etat.present::before,
.fiche-etat.present::before { background: currentColor; }
.stade-pastille.ko,
.convoc-etat.absent,
.fiche-etat.absent {
  color: var(--ko);
  border-style: dashed;
}
.stade-pastille.att,
.convoc-etat.attente,
.fiche-etat.attente { color: var(--pastille-contour); }

/* Fil d Ariane : étapes passées en pastille pleine, étape courante sur le bandeau sable,
   étapes à venir en pastille contour. Sans étape courante (accueil) : toutes en contour. */
.stade-fil {
  background: var(--fil-rail);
  border: 1px solid var(--fil-rail-bord);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.stade-fil a {
  display: inline-block;
  border: var(--pastille-bord) solid currentColor;
  border-radius: 999px;
  padding: 2px 11px;
  color: var(--pastille-contour);
  background: var(--fil-a-venir-fond);
  font-weight: 700;
  text-decoration: none;
}
.stade-fil a:hover { background: var(--bloc-fond); color: var(--pastille-contour); border-color: currentColor; }
.stade-fil li:has(~ li[aria-current="step"]) a {
  background: var(--pastille-pleine);
  border-color: var(--pastille-pleine);
  color: var(--pastille-pleine-encre);
}
.stade-fil [aria-current="step"] a,
.stade-fil [aria-current="step"] a:hover {
  background: var(--typo-bandeau);
  color: var(--typo-bandeau-encre);
  border-color: var(--typo-bandeau-encre);
  border-radius: calc(var(--typo-bandeau-r) * .6);
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.08em;
}

/* Blocs des écrans : l aspect vient d ici (socle) et du thème, la feuille d écran
   ne porte que la mise en page. */
.equipe-membre, .equipe-recap, .trajet-voiture, .frais-ticket, .convoc-texte,
.groupe-tour, .groupe-gouter, .score-chiffre, .score-version, .photo-depot,
.photo-liste, .paye-offre, .paye-code {
  background: var(--bloc-fond);
  color: var(--text);
  border-radius: var(--bloc-r);
}
.frais-part, .groupe-referent, .score-etat, .photo-accord, .paye-etat {
  background: var(--bloc-accent);
  color: var(--text);
  border-radius: var(--bloc-r);
}
.trajet-attente {
  background: var(--warnbg);
  color: var(--text);
  border-radius: var(--bloc-r);
}
.fiche-bar { background: var(--bloc-fond); border-radius: 999px; }
.fiche-bar > div { background: var(--accent); }
.equipe-meta, .frais-meta, .groupe-meta, .score-meta, .photo-meta, .trajet-contact {
  color: var(--muted);
  font-size: .84rem;
}
.convoc-compteurs, .frais-total {
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  font-variant-numeric: tabular-nums;
  font-size: var(--typo-sous);
  line-height: 1;
  color: var(--text);
}
.score-chiffre { font-variant-numeric: tabular-nums; }
.paye-offre span { color: var(--text); }
.paye-code #paye-code-valeur {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: var(--text);
}

/* ---------- Effet d affiche (lot LOOK-TYPO, demande du porteur « effet waouh ») ----------
   L en-tête d écran devient une affiche pleine largeur, fond inversé (encre en clair, crème en
   sombre), titre agrandi, numéro d étape géant en contour, entrée en mouvement. Couleurs tirées des
   paires du thème (texte et fond), donc contrastées par construction dans chaque design. */
:root {
  --affiche-fond: var(--text);
  --affiche-encre: var(--bg);
  --affiche-doux: color-mix(in srgb, var(--affiche-encre) 82%, var(--affiche-fond));
  --affiche-numero: color-mix(in srgb, var(--affiche-encre) 30%, transparent);
  --affiche-titre: clamp(2.9rem, .9rem + 8.6vw, 9.6rem);
  --affiche-pad: clamp(28px, 5vw, 72px);
  --mouvement: cubic-bezier(.2, .75, .2, 1);
}
body { overflow-x: clip; }
.typo-tete {
  position: relative;
  isolation: isolate;
  margin: var(--esp-4) calc(50% - 50vw) var(--esp-6);
  padding: var(--affiche-pad) max(20px, calc(50vw - 550px));
  background-color: var(--affiche-fond);
  background-image: radial-gradient(color-mix(in srgb, var(--affiche-encre) 16%, transparent) 1px, transparent 1.5px);
  background-size: var(--typo-trame-pas) var(--typo-trame-pas);
  color: var(--affiche-encre);
  overflow: hidden;
  --typo-encre: var(--affiche-encre);
  --typo-contour: var(--affiche-encre);
  --typo-creux-fond: var(--affiche-fond);
  --focus-ring: var(--affiche-encre);
}
html:root .typo-tete .typo-titre { font-size: var(--affiche-titre); position: relative; z-index: 1; }
.typo-tete .typo-sur, .typo-tete .typo-chapo { position: relative; z-index: 1; }
.typo-tete .typo-chapo { color: var(--affiche-doux); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.typo-tete .typo-bandeau { color: var(--text); --typo-bandeau-encre: var(--text); }
/* Numéro d étape géant, décoratif (texte de remplacement vide pour les lecteurs d écran). */
.typo-tete[data-numero]::after {
  content: attr(data-numero) / "";
  position: absolute;
  z-index: 0;
  right: max(12px, calc(50vw - 560px));
  bottom: -.14em;
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  font-size: clamp(9rem, 4rem + 22vw, 24rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: max(2px, .012em) var(--affiche-numero);
  pointer-events: none;
}
/* Tuiles de l accueil : numéro de fonction en contour, soulèvement au survol. */
.kpis { counter-reset: fonction; }
.kpis > .kpi { position: relative; overflow: hidden; counter-increment: fonction; isolation: isolate; }
.kpis > .kpi > * { position: relative; z-index: 1; }
.kpis > .kpi::after {
  content: counter(fonction, decimal-leading-zero) / "";
  position: absolute;
  z-index: 0;
  right: 10px;
  bottom: -.2em;
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  font-size: 5.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--text) 16%, transparent);
  pointer-events: none;
}
.kpis > .kpi, .stade-carte[href], .kpi { transition: transform .25s var(--mouvement), box-shadow .25s var(--mouvement); }
.kpis > .kpi:hover, .stade-carte[href]:hover { transform: translate(-3px, -3px); box-shadow: var(--stade-ombre-forte); }
/* Carte « Étape suivante » : bloc d encre, titre sur bandeau, grande flèche dessinée. */
.stade-suivante .stade-carte {
  position: relative;
  background: var(--affiche-fond);
  color: var(--affiche-encre);
  padding: 22px 108px 24px 24px;
  --pastille-pleine: var(--affiche-encre);
  --pastille-pleine-encre: var(--affiche-fond);
  --pastille-contour: var(--affiche-encre);
  --focus-ring: var(--text);
}
.stade-suivante .stade-carte > p, .stade-suivante .stade-carte .stade-heure { color: var(--affiche-doux); }
.stade-suivante .stade-carte > strong { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem); color: var(--text); }
.stade-suivante .stade-carte::before {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 50%;
  background: var(--suivante-fleche-fond, var(--typo-bandeau));
  transition: transform .25s var(--mouvement);
}
.stade-suivante .stade-carte::after {
  content: "";
  position: absolute;
  right: 44px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-top: 3px solid var(--suivante-fleche, var(--text));
  border-right: 3px solid var(--suivante-fleche, var(--text));
  transform: rotate(45deg) translate(-3px, 3px);
  transition: transform .25s var(--mouvement);
}
.stade-suivante .stade-carte:hover::before { transform: scale(1.1); }
.stade-suivante .stade-carte:hover::after { transform: rotate(45deg) translate(1px, -1px); }
/* Vitrine : grand titre du site dans le même langage, sommaire en sur-titre discret. */
.sommaire h1 { font-size: clamp(15px, .8rem + .5vw, 19px); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
html:root .v2 h2.hero-titre {
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  font-size: clamp(3rem, 1rem + 6.4vw, 7.4rem);
  line-height: .9;
  letter-spacing: var(--typo-espacement);
}
html:root .v2 h2.hero-titre .creux { color: var(--stade-sable-clair); -webkit-text-stroke: max(3px, .06em) var(--encre); paint-order: stroke fill; }
html:root .v2 h2.hero-titre .surligne { color: var(--encre); }
/* Mouvement : entrée des lignes, surligneur du bandeau, bande d information qui défile. */
@media (prefers-reduced-motion: no-preference) {
  .typo-titre > span, .v2 h2.hero-titre, .typo-sur { animation: typo-monte .75s var(--mouvement) both; }
  .typo-titre > span:nth-child(2) { animation-delay: .12s; }
  .typo-titre > span:nth-child(3) { animation-delay: .24s; }
  .typo-bandeau, .v2 h2.hero-titre .surligne { animation: typo-surligne .6s .45s var(--mouvement) both; }
  .typo-tete[data-numero]::after { animation: typo-numero 1.1s var(--mouvement) both; }
  .v2 .bandeau-defil > div { animation: typo-defil 38s linear infinite; }
}
@keyframes typo-monte { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes typo-surligne { from { clip-path: inset(0 100% 0 0 round var(--typo-bandeau-r)); } to { clip-path: inset(0 0 0 0 round var(--typo-bandeau-r)); } }
@keyframes typo-numero { from { opacity: 0; transform: translateX(.2em); } to { opacity: 1; transform: none; } }
@keyframes typo-defil { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .typo-tete[data-numero] { padding-top: 104px; }
  .typo-tete[data-numero]::after { top: 10px; bottom: auto; right: 16px; font-size: 6.4rem; }
}
@media (max-width: 480px) {
  .typo-tete { margin: var(--esp-3) calc(50% - 50vw) var(--esp-5); }
  .stade-suivante .stade-carte { padding: 20px 20px 96px; }
  .stade-suivante .stade-carte::before { top: auto; bottom: 18px; right: 18px; margin-top: 0; }
  .stade-suivante .stade-carte::after { top: auto; bottom: 41px; right: 41px; margin-top: 0; }
  .kpis > .kpi::after { font-size: 4.4rem; }
}
@media (forced-colors: active) {
  .typo-tete { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .typo-tete[data-numero]::after, .kpis > .kpi::after { content: none; }
}
@media print {
  .typo-tete { margin-inline: 0; background: none; color: CanvasText; }
  .typo-tete[data-numero]::after, .kpis > .kpi::after { content: none; }
}

/* ---------- Effet d affiche, deuxième passe (verdict du juge : prolonger l affiche, aucune collision) ---------- */
:root {
  --suivante-titre: clamp(1.6rem, 1rem + 2.4vw, 2.8rem);
  --carte-titre: clamp(1.5rem, 1.05rem + 1.4vw, 2.4rem);
}
/* Numéro d étape dans sa propre colonne : jamais sous le titre. */
@media (min-width: 601px) {
  .typo-tete[data-numero] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 3vw, 56px); align-items: end; }
  .typo-tete[data-numero] > * { grid-column: 1; }
  .typo-tete[data-numero]::after { position: static; grid-column: 2; grid-row: 1 / span 3; align-self: end; font-size: clamp(7rem, 2rem + 12vw, 17rem); margin-bottom: -.12em; }
}
/* Sur-titre agrandi, l étape en pastille pleine, le moment en contour. */
.typo-pastille {
  display: inline-block;
  vertical-align: .14em;
  margin-right: .5em;
  padding: .3em .75em .24em;
  border-radius: 999px;
  background: var(--typo-bandeau);
  color: var(--text);
  -webkit-text-stroke: 0;
  font-size: .6em;
  letter-spacing: .08em;
}
/* Le corps de page prend la voix de l affiche : titres de carte numérotés, premier bloc en billet sable. */
main.tem-main { counter-reset: bloc; }
html:root .card:not(.stade-suivante) > h2:first-child {
  font-family: var(--typo-police);
  font-stretch: var(--typo-largeur);
  font-weight: var(--typo-graisse);
  text-transform: uppercase;
  font-size: var(--carte-titre);
  line-height: 1;
  letter-spacing: var(--typo-espacement);
  margin: 0 0 var(--esp-3);
}
.card:not(.stade-suivante) > h2:first-child::before {
  counter-increment: bloc;
  content: counter(bloc, decimal-leading-zero) / "";
  margin-right: .35em;
  color: var(--accent);
}
html:root[data-style] .typo-tete[data-numero] + .card { background: var(--typo-bandeau); --typo-creux-fond: var(--typo-bandeau); }
html:root[data-style] .typo-tete + .card ~ .card:not(.stade-suivante) { box-shadow: none; }
.card [data-bloc]:has(> .row + .row) { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
@media (min-width: 1024px) {
  .card [data-bloc]:has(> label.field + label.field) { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: var(--esp-4); align-items: end; }
  .card [data-bloc]:has(> label.field + label.field) > :not(label.field) { grid-column: 1 / -1; }
}
/* Accueil : cartes de porte et de gestion sur toute la largeur, numéro des tuiles au-dessus du titre. */
.kpis:has(> .stade-carte), .kpis:has(> :nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.kpis > .kpi { padding-top: 64px; }
.kpis > .kpi::after { top: 8px; right: 14px; bottom: auto; font-size: 3.6rem; -webkit-text-stroke: 2px color-mix(in srgb, var(--text) 26%, transparent); }
.stade-suivante .stade-carte > strong { font-size: var(--suivante-titre); }
/* Réglages d affichage repliés en pied de page. */
.tem-reglages { max-width: 1140px; margin: var(--esp-5) auto 0; padding: 0 20px; }
.tem-reglages > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  border: var(--pastille-bord) solid currentColor;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
}
.tem-reglages > summary::-webkit-details-marker { display: none; }
.tem-reglages[open] > summary { background: var(--text); color: var(--bg); border-color: var(--text); }
.tem-reglages > .tem-choix { margin-top: var(--esp-3); }
/* Vitrine : le grand titre sort de son cadre, aplat bord à bord. */
html:root .v2 { margin: 0 calc(50% - 50vw) 60px; border-radius: 0; border-inline: 0; }
.v2-tete { max-width: 1140px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 20px 0; }
.v2-tete .v2-sur { margin: 0 0 var(--esp-3); font-size: clamp(14px, .8rem + .4vw, 18px); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
html:root .v2 .v2-tete h2.hero-titre { font-size: clamp(3.2rem, .8rem + 8.2vw, 9.4rem); line-height: 1; margin: 0; }
html:root .v2 .v2-tete h2.hero-titre .creux, html:root .v2 .v2-tete h2.hero-titre .surligne { display: block; width: fit-content; max-width: 100%; }
html:root .v2 .v2-tete h2.hero-titre .surligne { margin-top: .06em; margin-left: -.1em; }
.v2-tete .v2-chapo { max-width: 46em; margin: var(--esp-4) 0 0; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: var(--encre); }
@media (max-width: 600px) {
  .tem-header .tem-tagline, .entete .tem-tagline { display: none; }
  .stade-fil { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; max-width: 100%; border-radius: 0; }
  .stade-fil::-webkit-scrollbar { display: none; }
  .stade-fil li { flex: none; scroll-snap-align: start; }
}

/* Navigateur sans contour de texte : le contour devient plein, jamais invisible. */
@supports not (-webkit-text-stroke: 1px) {
  .typo-sur, .typo-creux, .stade-suivante > h2 { color: var(--typo-contour); }
}
/* Couleurs forcées du système : texte plein, bandeau cerné d un cadre. */
@media (forced-colors: active) {
  .typo-sur, .typo-creux, .stade-suivante > h2 { color: CanvasText; -webkit-text-stroke: 0; }
  .typo-bandeau, .stade-fil [aria-current="step"] a { border: 2px solid CanvasText; }
}
@media (max-width: 480px) {
  .stade-fil { border-radius: 18px; }
}
@media print {
  body { background-image: none; }
  .typo-creux, .typo-sur, .stade-suivante > h2 { color: CanvasText; -webkit-text-stroke: 0; }
}
/* TEM-LOOKTYPO fin */

/* TEM-MOSAIQUE début */
/* ======================================================================
   Lot MOSAIQUE : mots mis en valeur, dans le socle pour tous les designs.
   <strong class="mot mot-trajet">où</strong> : marqueur arrondi (vif de la fonction), texte --text en gras.
   .mot-trait : soulignement épais dans l encre de la fonction. .mot-couleur : texte dans l encre.
   La fonction vient de la classe .mot-<fonction> ou, à défaut, de la portée data-fonction d un ancêtre
   (body). Les teintes --mosa-* et la portée --f-* n existent que dans le design Mosaïque (mosaique) : dans
   classique, affiche et tribune, les var() retombent sur le bandeau (--typo-bandeau) et l accent du design,
   le mot reste lisible et en gras, sans changer leur style. Couleurs forcées et impression : soulignement.
   ====================================================================== */
.mot, .mot-trait, .mot-couleur { font-weight: 750; }
.mot {
  color: var(--text);
  background-color: var(--f-vif, var(--typo-bandeau));
  border-radius: .4em;
  padding: .02em .28em .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mot-trait {
  /* Couleur du texte qui l entoure (currentColor vaut la couleur héritée) : lisible aussi dans un chapô clair
     sur fond foncé (tête monumentale de Classique ou d Affiche) ; seul le soulignement porte la teinte. */
  color: currentColor;
  text-decoration-line: underline;
  text-decoration-color: var(--f-encre, var(--accent));
  text-decoration-thickness: .16em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: none;
}
/* .mot-couleur : dans Mosaïque, texte dans l encre de la fonction (--f-encre, contrastes contrôlés par mosaique_test).
   Hors Mosaïque (aucune portée --f-encre), l accent d un design n est pas garanti AA sur tous ses fonds (tête
   inversée, cartes) : le mot garde la couleur du texte qui l entoure, en gras, souligné dans l accent. */
.mot-couleur { color: var(--f-encre, currentColor); text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .16em; }
.typo-titre .mot, .hero-titre .mot { border-radius: .18em; padding: 0 .12em; }
.creux .mot, .typo-creux .mot { color: var(--f-vif, var(--typo-bandeau)); background: none; }
/* Une classe par fonction (même correspondance que data-fonction ; roulements en sable). */
.mot-accueil, .mot-messagerie, .mot-erreur, .mot-roulements { --f-fond: var(--mosa-sable); --f-vif: var(--mosa-sable-vif); --f-encre: var(--mosa-sable-encre); }
.mot-equipe { --f-fond: var(--mosa-lagon); --f-vif: var(--mosa-lagon-vif); --f-encre: var(--mosa-lagon-encre); }
.mot-convoc { --f-fond: var(--mosa-menthe); --f-vif: var(--mosa-menthe-vif); --f-encre: var(--mosa-menthe-encre); }
.mot-trajet { --f-fond: var(--mosa-ciel); --f-vif: var(--mosa-ciel-vif); --f-encre: var(--mosa-ciel-encre); }
.mot-frais { --f-fond: var(--mosa-tilleul); --f-vif: var(--mosa-tilleul-vif); --f-encre: var(--mosa-tilleul-encre); }
.mot-fiche { --f-fond: var(--mosa-lavande); --f-vif: var(--mosa-lavande-vif); --f-encre: var(--mosa-lavande-encre); }
.mot-score { --f-fond: var(--mosa-rose); --f-vif: var(--mosa-rose-vif); --f-encre: var(--mosa-rose-encre); }
.mot-photo { --f-fond: var(--mosa-peche); --f-vif: var(--mosa-peche-vif); --f-encre: var(--mosa-peche-encre); }
.mot-offres { --f-fond: var(--mosa-orchidee); --f-vif: var(--mosa-orchidee-vif); --f-encre: var(--mosa-orchidee-encre); }
.mot-contact { --f-fond: var(--mosa-prairie); --f-vif: var(--mosa-prairie-vif); --f-encre: var(--mosa-prairie-encre); }
/* TEM-CLUBS début */
.mot-benevoles { --f-fond: var(--mosa-prairie); --f-vif: var(--mosa-prairie-vif); --f-encre: var(--mosa-prairie-encre); }
/* TEM-CLUBS fin */
.mot-juridique, .mot-securite, .mot-donnees { --f-fond: var(--mosa-ardoise); --f-vif: var(--mosa-ardoise-vif); --f-encre: var(--mosa-ardoise-encre); }
.mot-journal, .mot-affichage, .mot-technique { --f-fond: var(--mosa-brume); --f-vif: var(--mosa-brume-vif); --f-encre: var(--mosa-brume-encre); }
/* Le marqueur se trace de gauche à droite, seulement si le système accepte le mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .mot {
    background-color: transparent;
    background-image: linear-gradient(var(--f-vif, var(--typo-bandeau)), var(--f-vif, var(--typo-bandeau)));
    background-repeat: no-repeat;
    background-size: 0 100%;
    animation: mot-trace .7s .3s var(--mouvement) forwards;
  }
  .creux .mot, .typo-creux .mot { background-image: none; }
}
@keyframes mot-trace { to { background-size: 100% 100%; } }
@media (forced-colors: active) {
  .mot, .mot-trait, .mot-couleur { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: CanvasText; }
}
@media print {
  .mot { background: none; color: inherit; text-decoration: underline; }
  .mot-couleur { color: inherit; text-decoration: underline; }
}
/* TEM-MOSAIQUE fin */


/* Replis sobres hors Mosaïque pour P1 et P7 (transitions, étape suivante).
   Réservé à un agent de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-MOSAIQUE-REPLI-MOUV1 début */
/* Aucune règle de repli n est nécessaire pour P1 et P7 : les transitions entre écrans (@view-transition,
   noms de transition) et le dégradé de la carte « Étape suivante » n existent que dans
   themes/theme-mosaique.css, servie seulement quand le design Mosaïque est en service. Dans les designs
   classique, affiche et tribune, la navigation reste classique et la carte garde son apparence. Le seul
   ajout au HTML est le script externe /assets/tem-passage.js : il n agit que si une transition a lieu
   (jamais hors Mosaïque) et ne pose que des attributs sans effet visuel hors de la feuille Mosaïque
   (html[data-vt-sens], [data-vt-loin]). Contrôlé par tests/mosaique_mouv1_test.py. */

/* TEM-MOSAIQUE-REPLI-MOUV1 fin */


/* Replis sobres hors Mosaïque pour P6, P9 et P12 (frise, tuiles vivantes, retours d action).
   Réservé à un agent de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-MOSAIQUE-REPLI-MOUV2 début */
/* Agent MOUV2. Ces états n existent que lorsque web/app/src/retours.js les pose (bouton qui confirme,
   texte copié, champ valide ou refusé, état enregistré) : dans classique, affiche et tribune, ils
   restent sobres, portés par la forme (coche dessinée) et les couleurs d état du design actif ; la
   frise (P6) et les tuiles vivantes (P9) n ajoutent aucun élément et restent propres à Mosaïque. */
.btn:is([aria-pressed="true"], [data-retour="ok"]) { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.btn:is([aria-pressed="true"], [data-retour="ok"])::before {
  content: "";
  display: block;
  flex: none;
  inline-size: .36em;
  block-size: .7em;
  border: solid currentColor;
  border-width: 0 .14em .14em 0;
  rotate: 45deg;
  margin-block-start: -.2em;
}
.btn.sec[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
input[aria-invalid="true"] { border-color: var(--ko); background: var(--kobg); }
input[aria-invalid="false"] { border-color: var(--ok); }
.champ-message { display: flex; align-items: baseline; gap: .5em; margin: .35em 0 0; color: var(--text); font-size: .9rem; }
.champ-message::before { content: ""; flex: none; inline-size: .5em; block-size: .5em; border-radius: 50%; background: var(--ko); }
.etat-enregistre { display: flex; inline-size: fit-content; align-items: center; gap: .5em; margin: .5em 0; padding: .3em .9em .3em .8em; border-radius: 999px; background: var(--okbg); color: var(--text); font-weight: 700; }
.etat-enregistre::before { content: ""; flex: none; inline-size: .36em; block-size: .7em; border: solid var(--ok); border-width: 0 .14em .14em 0; rotate: 45deg; margin-block-start: -.2em; }
@media (forced-colors: active) {
  .btn[aria-pressed="true"] { border: 2px solid CanvasText; }
  input[aria-invalid="true"] { border: 2px dashed CanvasText; }
}
/* TEM-MOSAIQUE-REPLI-MOUV2 fin */


/* Replis sobres hors Mosaïque pour P10 (défilement) ; P11 est propre à Mosaïque.
   Réservé à un agent de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-MOSAIQUE-REPLI-MOUV3 début */
/* Agent MOUV3 : aucun repli nécessaire. P10 (défilement) et P11 (vestiaire de nuit) n ajoutent aucun
   élément ni aucune classe au HTML et vivent entièrement dans theme-mosaique.css, servie seulement en
   Mosaïque : classique, affiche et tribune gardent leur apparence, immobile au défilement. */

/* TEM-MOSAIQUE-REPLI-MOUV3 fin */


/* Replis sobres hors Mosaïque pour P5 (chiffres monumentaux) ; P4 utilise les classes .mot du socle.
   Réservé à un agent de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-MOSAIQUE-REPLI-MOTS début */
/* Hors du design Mosaïque, les chiffres balisés par P5 restent dans leur phrase, en ligne et dans la
   couleur du texte : aucune taille ni couleur ajoutée, seuls les chiffres passent à chasse fixe.
   Pastilles et sièges (décoratifs, aria-hidden) ne s affichent pas ; theme-mosaique.css les rétablit. */
.chiffre { font-variant-numeric: tabular-nums lining-nums; }
.tem-pastilles, .tem-sieges { display: none; }
/* TEM-MOSAIQUE-REPLI-MOTS fin */


/* Replis sobres hors Mosaïque pour P2 (vitrine bento), le juridique, la 404 et le panneau.
   Réservé à un agent de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-MOSAIQUE-REPLI-VITRINE début */
/* Vitrine : la mosaïque bento (P2) devient, hors Mosaïque, une grille de cartes simples ; les décors des aperçus
   (voiture, pastilles, vignettes) sont retirés, les chiffres restent en texte. Le design Mosaïque redonne tout
   dans theme-mosaique.css (ancre TEM-MOSAIQUE-P2). */
.v2-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v2 .v2-intro .boutons { margin: 18px 0 0; }
.v2 .bento { max-width: 1140px; margin: 0 auto; padding: 28px 20px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.v2 .tuile { position: relative; margin: 0; padding: 16px 18px 18px; background: var(--stade-carte, var(--surface)); color: var(--encre, var(--text)); border: 1px solid var(--border); border-radius: 16px; }
.v2 .tuile > * { margin: 0 0 6px; }
.v2 .tuile-num, .v2 .voiture, .v2 .pastilles-apercu, .v2 .vignettes { display: none; }
.v2 .tuile-rubrique { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--doux, var(--muted)); }
.v2 .tuile-exemple { margin-left: .4em; font-weight: 700; letter-spacing: 0; text-transform: none; }
.v2 .tuile-titre { font-size: 18px; line-height: 1.2; }
.v2 .apercu-chiffres > * { margin: 0 0 4px; }
.v2 .apercu-chiffre { font-size: 30px; font-weight: 850; }
.v2 .voiture-ligne p { margin: 0; }
.v2 .coches, .v2 .frise, .v2 .offres-liste { margin: 6px 0 0; padding-left: 1.2em; }
.v2 .offres-liste li { display: flex; justify-content: space-between; gap: 12px; }
.v2 .tuile-fleche { position: absolute; inset: 0; border-radius: inherit; }
.v2 .tuile-fleche:focus-visible { outline: 3px solid var(--focus-ring, currentColor); outline-offset: 2px; }
/* Sections sous la mosaïque (semaine, offres, questions, parcours) : en-tête sobre, contenus dans leur grille d origine. */
.v2 .sec { max-width: 1140px; margin: 40px auto 0; padding: 0 20px; }
.sec-tete { margin: 0 0 8px; }
.sec-tete > * { margin: 0 0 8px; }
.sec-sur { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--doux, var(--muted)); }
.v2 .sec-titre { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.v2 .sec .fil { padding: 16px 0 0; }
.v2 .sec :is(.tarifs3, .faq-mini) { padding: 0; }
.v2 .faq-mini .q { font-size: 1rem; }
.v2 .etape > * { margin: 0 0 6px; }
.v2 .etape-chiffre { font-size: 15px; }
.v2 .etape-chiffre b { font-size: 26px; font-weight: 850; }
.v2 .tel-tete { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 14px; }
.v2 .prix > * { margin: 0 0 6px; }
.v2 .prix-nom { font-size: 1.05rem; }
.v2 .prix-montant { font-size: 30px; font-weight: 850; }
.v2 :is(.prix-liste, .prix-clubs) { margin: 8px 0; padding-left: 1.2em; }
.v2 .prix-clubs li { display: flex; justify-content: space-between; gap: 12px; }
.parcours > ol { margin-bottom: 32px; }
.v2 .ticket-corps { padding: 0 16px 10px; }
.v2 .bandeau-defil > div { text-transform: uppercase; }
.v2 [data-tem^="prix_"] { white-space: nowrap; }
/* 404 : la carte « Lien perdu » garde le fond du bandeau, « Ouvrir l application » reste un bouton sous la carte. */
html:root[data-style] .typo-tete[data-numero] + .p404-portes > .card { background: var(--typo-bandeau); --typo-creux-fond: var(--typo-bandeau); }
.p404-portes > .p404-porte { margin-top: var(--esp-4, 16px); }
/* Juridique : en-tête, chapô et sections sans changement d aspect hors Mosaïque (le sur-titre n y est pas montré). */
.juridique-sur { display: none; }
.juridique-chapo { margin: 0 0 8px; }
.juridique-section > h2 { margin-top: var(--esp-5, 24px); }
/* BASCULE-B2B : bandeau structures en tête de vitrine (quatre promesses) et notes des offres, repli sobre hors
   Mosaïque ; le design Mosaïque redonne tout dans theme-mosaique.css (ancre TEM-MOSAIQUE-P2). */
.v2 .structures-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.v2 .structures-points > li { margin: 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.v2 .structures-action { margin: 18px 0 0; }
.v2 .prix-note { margin: 10px 0 0; font-size: .92rem; color: var(--muted); }
.v2 .sec-note { margin: 14px 0 0; font-size: .95rem; color: var(--muted); }
/* TEM-MOSAIQUE-REPLI-VITRINE fin */

/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-REPLI-VIDES début */
/* Lot MOSAIQUE, agent VIDES : repli sobre hors Mosaïque. Les états vides monumentaux (.tem-vide, posés
   dans les écrans entre ancres TEM-MOSAIQUE-VIDES) ne vivent que dans theme-mosaique.css ; dans les autres
   designs, ils restent masqués et l écran garde exactement son apparence d avant. Placé juste avant le
   repli du panneau, qui doit rester le dernier bloc de la feuille (mosaique_panneau_test). */
.tem-vide { display: none; }
/* TEM-MOSAIQUE-REPLI-VIDES fin */


/* Page Offres (/app/paye.html) hors Mosaïque : trois tuiles sobres.
   Réservé à l agent OFFRES de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-MOSAIQUE-REPLI-OFFRES début */
/* Repli sobre (Classique, Affiche, Tribune) : chaque offre dans une carte simple, prix en gras, ce que
   comprend l offre en liste cochée ; la mise en page vit dans web/app/src/paye.css. Le design Mosaïque
   redessine tout dans theme-mosaique.css (ancre TEM-MOSAIQUE-OFFRES). */
.paye-tuile { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
.paye-nom { font-size: 1.05rem; }
.paye-montant { font-size: 2.4rem; font-weight: 850; }
.paye-devise { font-size: .6em; }
.paye-des { font-size: .45em; font-weight: 700; }
.paye-unite { font-size: .9rem; color: var(--muted); }
.paye-inclus li::before { content: ""; position: absolute; left: 14px; top: 50%; margin-top: -8px; width: 5px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.paye-clubs li { border-top: 1px solid var(--border); }
.paye-clubs .paye-club-prix { font-size: 1.2rem; }
html[data-contrast="high"] .paye-tuile { border-width: 2px; }
/* TEM-MOSAIQUE-REPLI-OFFRES fin */


/* Panneau « Affichage » (public/assets/theme.js) hors Mosaïque : trois groupes titrés, choix coché.
   Réservé à l agent PANNEAU de la vague 2 du lot MOSAIQUE ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-STATS début */
/* Écran « Saisie du match » (lot K-STATS-1) : repli sobre dans les quatre designs ; Mosaïque le recolore. */
html:root .st-saisie .st-tableau, .st-saisie .st-bloc { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
html:root .st-saisie .st-direct { background: var(--accent); color: var(--on-accent); border-radius: 999px; }
html:root .st-saisie .st-direct::before { background: currentColor; border-radius: 50%; }
html:root .st-saisie .st-tiret { color: var(--muted); }
html:root .st-saisie .st-periode, .st-saisie .st-reseau-etat { background: var(--surface-2); color: var(--text); border-radius: 10px; }
html:root .st-saisie .st-tache { background: var(--surface-2); color: var(--text); border-radius: 999px; }
html:root .st-saisie .st-tache::before, .st-saisie .st-consigne::before { background: var(--accent); border-radius: 50%; }
html:root .st-saisie .st-avis { background: var(--warnbg); color: var(--text); border-radius: 10px; }
html:root .st-saisie .st-clics li { background: var(--surface-2); color: var(--text); border-radius: 999px; }
html:root .st-saisie .st-clics li > span { background: var(--surface); color: var(--text); border: 2px solid var(--accent); border-radius: 50%; }
html:root .st-saisie .st-clics li.fait > span { background: var(--accent); color: var(--on-accent); }
html:root .st-saisie .st-clics li[aria-current="step"] { background: var(--accent-bg); }
html:root .st-saisie :is(.st-joueur, .st-action, .st-num, .st-touche, .st-mini-btn) { border-radius: 14px; }
html:root .st-saisie .st-joueur em { background: var(--surface-2); color: var(--text); border-radius: 999px; }
html:root .st-saisie .st-joueur .qui[data-max], .st-saisie .st-num span[data-max] { text-decoration: underline; text-underline-offset: .2em; }
html:root .st-saisie .st-consigne { background: var(--accent-bg); color: var(--text); border-radius: 10px; }
html:root .st-saisie .st-journal li { background: var(--surface-2); color: var(--text); border-radius: 10px; }
html:root .st-saisie .st-journal li.annule { background: transparent; border: 1px solid var(--border); }
html:root .st-saisie .st-etat.retire, .st-saisie .st-etat.refuse { background: var(--surface); color: var(--text); }
html:root .st-saisie .st-etat.envoye::before { border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; }
html:root .st-saisie .st-etat.garde::before { border: 2px solid currentColor; border-radius: 50%; }
html:root .st-saisie .st-reseau-etat[data-etat="hors"] { background: var(--warnbg); }
html:root .st-saisie .st-reseau-etat[data-etat="ok"] { background: var(--okbg); }
html:root .st-saisie .st-barres i { background: currentColor; border-radius: 2px; }
html:root .st-saisie .st-reseau-etat[data-etat="hors"] .st-barres i:nth-child(n+3) { background: transparent; border: 1.5px solid currentColor; }
@media (forced-colors: active) {
  html:root .st-saisie :is(.st-tableau, .st-bloc, .st-joueur, .st-action, .st-num, .st-tache, .st-journal li) { border: 1px solid CanvasText; }
}
/* TEM-STATS fin */
/* Écran « Permanences du club » (/app/benevoles.html) hors Mosaïque : repli sobre dans les quatre designs.
   Réservé à l agent P4 du lot BENEVOLES ; les autres agents n écrivent pas ici.
   Ligne de séparation pour des fusions git propres. */
/* TEM-BENEVOLES début */
/* Habit sobre : cartes du design, états des postes en pastilles sémantiques (--okbg confirmé, --warnbg pris, contour
   à pourvoir, tirets libéré) toujours doublées du mot ; tuiles de match sur le fond sémantique de leur état (complet,
   à pourvoir, relais). La mise en page vit dans web/app/src/benevoles.css ; le design Mosaïque recolore tout dans
   theme-mosaique.css (ancre TEM-BENEVOLES), teinte prairie de l écran. */
#benevoles .perm-onglets { background: var(--surface-2); border-radius: 999px; }
#benevoles .perm-onglets a { color: var(--text); border-radius: 999px; }
#benevoles .perm-onglets [aria-current="page"] { background: var(--accent-bg); }
#benevoles .perm-nombre, #benevoles .perm-compte b, #benevoles .perm-miennes-tete b, #benevoles .perm-ages b, #benevoles .perm-dimanche > b { color: var(--accent); }
/* Chiffre géant et note de l en-tête : couleur du titre, quel que soit le fond de l affiche du design. */
#benevoles .perm-geant b, #benevoles .perm-geant span, #benevoles .perm-tete-droite .meta, #benevoles .perm-compte span { color: inherit; }
#benevoles :is(.perm-chiffre, .perm-match, .perm-panneau, .perm-moi, .perm-dimanche, .perm-legende) { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; }
#benevoles .perm-match[data-teinte="menthe"] { background: var(--okbg); }
#benevoles .perm-match[data-teinte="sable"] { background: var(--warnbg); }
#benevoles .perm-match[data-teinte="rose"] { background: var(--kobg); }
#benevoles :is(.perm-cat, .perm-etiquette, .perm-heure, .perm-jour-date) { background: var(--surface); color: var(--text); border-radius: 999px; }
#benevoles .perm-heure, #benevoles .perm-jour-date { border-radius: 8px; }
#benevoles .perm-etiquette::before { background: currentColor; border-radius: 50%; }
#benevoles .perm-relais { background: var(--surface); color: var(--text); border-radius: 12px; }
#benevoles .perm-poste { background: var(--surface); color: var(--text); border-radius: 12px; }
#benevoles .perm-poste:is([data-etat="a_pourvoir"], [data-etat="libere"]) { background: transparent; border: 2px dashed var(--ctl-border, var(--border)); }
#benevoles .perm-poste.choisi { outline: 3px solid var(--accent); outline-offset: 2px; }
#benevoles .perm-type { background: var(--surface-2); color: var(--text); border-radius: 8px; }
#benevoles .perm-adulte { color: var(--text); text-decoration: underline; text-underline-offset: .18em; }
#benevoles .perm-etat { border-radius: 999px; }
#benevoles .perm-etat.confirme { background: var(--okbg); color: var(--ok); }
#benevoles .perm-etat.confirme::before { border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; }
#benevoles .perm-etat.pris { background: var(--warnbg); color: var(--warn); }
#benevoles .perm-etat.pris::before { background: currentColor; border-radius: 50%; }
#benevoles .perm-etat.a_pourvoir { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
#benevoles .perm-etat.a_pourvoir::before { border: 2px solid var(--accent); border-radius: 50%; }
#benevoles .perm-etat.libere { background: var(--surface); color: var(--text); outline: 1.5px dashed var(--accent); outline-offset: -1.5px; }
#benevoles .perm-etat.libere::before { border-top: 2px dashed currentColor; }
#benevoles .perm-etat.attente { background: var(--accent-bg); color: var(--text); }
#benevoles .perm-etat.attente::before { border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
#benevoles .perm-qui-carte, #benevoles .perm-accord, #benevoles .perm-liste li, #benevoles .perm-relais-liste li, #benevoles .perm-benevoles-liste li, #benevoles .perm-defaut-liste li { background: var(--surface-2); color: var(--text); border-radius: 12px; }
#benevoles .perm-raisons { background: var(--surface); border-radius: 12px; }
#benevoles .perm-raisons li { background: var(--surface-2); color: var(--text); border-radius: 999px; }
#benevoles .perm-raisons li::before { background: var(--accent); border-radius: 50%; }
#benevoles .perm-ages li { background: var(--surface-2); color: var(--text); border-radius: 12px; }
#benevoles .perm-etapes li { background: var(--surface-2); color: var(--text); border-radius: 999px; }
#benevoles .perm-etapes li span { background: var(--accent); color: var(--on-accent); border-radius: 50%; }
#benevoles .perm-etapes li[aria-current="step"] { background: var(--accent-bg); }
#benevoles .perm-choix button { background: var(--surface); color: var(--text); border: 2px dashed var(--ctl-border, var(--border)); border-radius: 16px; }
#benevoles .perm-choix button[aria-pressed="true"] { background: var(--accent-bg); border: 2px solid var(--accent); }
#benevoles .perm-choix .coche { background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); }
#benevoles .perm-choix [aria-pressed="true"] .coche { background: var(--accent); box-shadow: none; }
#benevoles .perm-choix [aria-pressed="true"] .coche::after { border-right: 3px solid var(--on-accent); border-bottom: 3px solid var(--on-accent); }
#benevoles .perm-fait { background: var(--okbg); color: var(--text); border-radius: 16px; }
#benevoles .perm-fait[data-statut="attente"] { background: var(--warnbg); }
#benevoles .perm-fait-icone { background: var(--ok); border-radius: 50%; }
#benevoles .perm-fait[data-statut="attente"] .perm-fait-icone { background: var(--warn); }
#benevoles .perm-fait-icone::after { border-right: 3.5px solid var(--okbg); border-bottom: 3.5px solid var(--okbg); }
#benevoles .perm-fait[data-statut="attente"] .perm-fait-icone::after { border-color: var(--warnbg); }
#benevoles .perm-fait h3 { color: var(--text); }
#benevoles .perm-vide-club { background: transparent; color: var(--text); border: 2px dashed var(--ctl-border, var(--border)); border-radius: 16px; }
#benevoles .perm-voir { color: var(--accent); }
#benevoles :is(.perm-choix button, .perm-poste-b, .perm-voir):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 12px; }
html[data-contrast="high"] #benevoles :is(.perm-chiffre, .perm-match, .perm-panneau, .perm-moi, .perm-dimanche, .perm-legende, .perm-poste) { border-width: 2px; border-style: solid; border-color: var(--text); }
html[data-contrast="high"] #benevoles .perm-poste:is([data-etat="a_pourvoir"], [data-etat="libere"]) { border-style: dashed; }
@media (forced-colors: active) {
  #benevoles :is(.perm-chiffre, .perm-match, .perm-panneau, .perm-poste, .perm-etat, .perm-choix button) { border: 1px solid CanvasText; forced-color-adjust: auto; }
  #benevoles .perm-choix button[aria-pressed="true"], #benevoles .perm-poste.choisi { outline: 3px solid Highlight; }
}
/* TEM-BENEVOLES fin */
/* TEM-MOSAIQUE-REPLI-PANNEAU début */
/* Repli sobre (Classique, Affiche, Tribune) : une phrase d aide, puis trois petites cartes (apparence, taille du
   texte, contraste) avec leur intitulé en clair ; le choix en cours garde l aplat d accent du design et reçoit une
   coche dessinée, pour ne pas reposer sur la couleur seule. Le design Mosaïque redessine tout dans
   theme-mosaique.css (ancre TEM-MOSAIQUE-PANNEAU). */
.tem-reglages .tem-theme { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.tem-reglages .tem-aide { flex: 1 1 100%; margin: 0; font-size: .86rem; color: var(--muted); }
.tem-reglages .tem-groupe { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tem-reglages .tem-groupe-titre { font-size: .9rem; font-weight: 700; color: var(--text); }
.tem-reglages .tem-groupe .seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.tem-reglages .tem-groupe .seg button { display: inline-flex; align-items: center; min-height: 36px; font-family: inherit; }
.tem-reglages .tem-groupe .seg button[aria-pressed="true"] { font-weight: 700; }
.tem-reglages .tem-groupe .seg button[aria-pressed="true"]::before { content: ""; flex: none; width: .32em; height: .62em; margin: 0 .5em .18em 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tem-reglages .tem-groupe .seg button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.tem-reglages .tem-groupe-note { margin: 0; font-size: .8rem; color: var(--muted); }
html[data-contrast="high"] .tem-reglages .tem-groupe { border-width: 2px; }
@media (forced-colors: active) {
  .tem-reglages .tem-groupe .seg button[aria-pressed="true"] { outline: 2px solid Highlight; }
}
/* TEM-MOSAIQUE-REPLI-PANNEAU fin */
