/* Tous au Match – design « mosaique » dit « Mosaïque », variante bento du langage « titre monumental »
   (lots LOOK-TYPO puis MOSAIQUE).
   © 2026 Ghislain DEMONDA – Tous droits réservés.
   Pistes tirées des références bento fournies par le porteur (docs/lots/ref-look/), sans rien
   en reprendre : fond blanc cassé chaud, tuiles sans bordure à grands rayons, une teinte par
   fonction (12 teintes, section TEM-MOSAIQUE : l écran entier, son bandeau de titre, sa première
   carte et son fil prennent la couleur de leur fonction, lue sur body[data-fonction]), aucun
   liseré d encre ni ombre décalée, fil d Ariane en commande segmentée sur un rail, bouton rond à
   flèche sur la carte « Étape suivante ». En sombre : quasi-noir de lecture, liens verts.
   Les titres gardent le langage monumental du socle (capitales condensées, contour, bandeau).
   Ce fichier ne porte que des variables et des gardes de composants ; servi sur /theme.css
   quand le réglage site_theme vaut mosaique. Gardes écrites html:root[data-style] … : elles passent
   devant les surcouches du style stade du socle (même spécificité, chargées après), sans !important. */

/* ============ Palette claire (défaut) ============ */
html:root[data-theme="light"][data-accent][data-contrast],html:root[data-theme="auto"][data-accent][data-contrast]{
  --bg:#F4F1EE;--surface:#FFFFFF;--surface-2:#EEEAE6;--border:#DDD7D1;--text:#16181D;--muted:#4F535C;--faint:#5A5E67;
  --ok:#12684C;--ko:#A3283F;--warn:#7A5300;--okbg:#DDF3EA;--kobg:#FBE3E9;--warnbg:#FBEFCF;
  --accent:#0B6B4F;--accent-h:#08513C;--accent-bg:#DDF3EA;--on-accent:#FFFFFF;
  --header-bg:#F4F1EE;--header-text:#16181D;--shadow:0 1px 2px rgba(22,24,29,.05);
  --btn-bg:#16181D;--btn-bg-h:#33363E;--btn-fg:#FFFFFF;--btn2-fg:#16181D;--focus-ring:#0B6B4F;--ctl-border:#858A93;
  --mosa-rail:#E8E3DE;--mosa-fleche-fond:#FFFFFF;--mosa-fleche:#16181D;
  --stade-page:#F4F1EE;--stade-sable:#FBE5AE;--stade-sable-clair:#EEEAE6;--stade-carte:#FFFFFF;
  --stade-encre:#16181D;--stade-encre-page:#16181D;--stade-encre-douce:#4F535C;--stade-pied:#4F535C;
  --stade-vert:#0B6B4F;--stade-vert-fonce:#16181D;--stade-compar-fond:#F4F1EE;--stade-compar-encre:#16181D;
  --stade-ligne:#858A93;--stade-bulle2:#DDF3EA;--stade-piste:#E8E3DE;
  --stade-ok-f:#DDF3EA;--stade-ok:#12684C;--stade-ko-f:#FBE3E9;--stade-ko:#A3283F;--stade-att-f:#FBEFCF;--stade-att:#7A5300;
  --stade-r:24px;--stade-r-grand:30px;--stade-bord:0px;--stade-bord-fin:1.5px;
  --stade-ombre:none;--stade-ombre-legere:none;--stade-ombre-forte:none;
  --typo-bandeau:#FBE5AE;--typo-trame:transparent;--typo-bandeau-r:20px;
  --pastille-bord:1.5px;--fil-rail:#E8E3DE;--fil-rail-bord:transparent;--fil-a-venir-fond:transparent;
  --bloc-fond:#F4F1EE;--bloc-accent:#DDF3EA;--bloc-r:18px;--suivante-fond:#FFFFFF;
  color-scheme:light;
}
html:root[data-theme="light"][data-accent="bleu"][data-contrast],html:root[data-theme="auto"][data-accent="bleu"][data-contrast]{--accent:#1D58A0;--accent-h:#16437A;--accent-bg:#E1ECF8;--focus-ring:#1D58A0;--stade-vert:#1D58A0;--bloc-accent:#E1ECF8}
html:root[data-theme="light"][data-accent="orange"][data-contrast],html:root[data-theme="auto"][data-accent="orange"][data-contrast]{--accent:#954410;--accent-h:#74340C;--accent-bg:#F9E7D9;--focus-ring:#954410;--stade-vert:#954410;--bloc-accent:#F9E7D9}
html:root[data-theme="light"][data-accent="violet"][data-contrast],html:root[data-theme="auto"][data-accent="violet"][data-contrast]{--accent:#66389A;--accent-h:#4F2B78;--accent-bg:#EEE5F7;--focus-ring:#66389A;--stade-vert:#66389A;--bloc-accent:#EEE5F7}

/* ============ Palette sombre (lecture, quasi-noir) ============ */
html:root[data-theme="dark"][data-accent][data-contrast]{
  --bg:#0A0C10;--surface:#13161C;--surface-2:#1B1F27;--border:#363B46;--text:#EDEFF3;--muted:#AEB4BE;--faint:#9DA3AD;
  --ok:#5FE0B0;--ko:#FF9FB2;--warn:#F2C766;--okbg:#0F2A21;--kobg:#33161E;--warnbg:#2E2410;
  --accent:#3DD9A0;--accent-h:#6BE6B8;--accent-bg:#10261E;--on-accent:#06140E;
  --header-bg:#0A0C10;--header-text:#EDEFF3;--shadow:none;
  --btn-bg:#EDEFF3;--btn-bg-h:#FFFFFF;--btn-fg:#0A0C10;--btn2-fg:#EDEFF3;--focus-ring:#6BE6B8;--ctl-border:#7A818D;
  --mosa-rail:#1B1F27;--mosa-fleche-fond:#EDEFF3;--mosa-fleche:#0A0C10;
  --stade-page:#0A0C10;--stade-sable:#4A3D1A;--stade-sable-clair:#1B1F27;--stade-carte:#13161C;
  --stade-encre:#EDEFF3;--stade-encre-page:#EDEFF3;--stade-encre-douce:#AEB4BE;--stade-pied:#AEB4BE;
  --stade-vert:#3DD9A0;--stade-vert-fonce:#EDEFF3;--stade-compar-fond:#0A0C10;--stade-compar-encre:#EDEFF3;
  --stade-ligne:#7A818D;--stade-bulle2:#10261E;--stade-piste:#262B35;
  --stade-ok-f:#0F2A21;--stade-ok:#5FE0B0;--stade-ko-f:#33161E;--stade-ko:#FF9FB2;--stade-att-f:#2E2410;--stade-att:#F2C766;
  --typo-bandeau:#4A3D1A;--fil-rail:#1B1F27;--bloc-fond:#1B1F27;--bloc-accent:#10261E;--suivante-fond:#13161C;
  color-scheme:dark;
}
html:root[data-theme="dark"][data-accent="bleu"][data-contrast]{--accent:#8DB8F2;--accent-h:#B5D0F6;--accent-bg:#14233A;--focus-ring:#B5D0F6;--stade-vert:#8DB8F2;--bloc-accent:#14233A}
html:root[data-theme="dark"][data-accent="orange"][data-contrast]{--accent:#F2A86E;--accent-h:#F7C398;--accent-bg:#33220F;--focus-ring:#F7C398;--stade-vert:#F2A86E;--bloc-accent:#33220F}
html:root[data-theme="dark"][data-accent="violet"][data-contrast]{--accent:#CBA8F2;--accent-h:#DCC4F6;--accent-bg:#261B37;--focus-ring:#DCC4F6;--stade-vert:#CBA8F2;--bloc-accent:#261B37}
@media (prefers-color-scheme:dark){
  html:root[data-theme="auto"][data-accent][data-contrast]{
    --bg:#0A0C10;--surface:#13161C;--surface-2:#1B1F27;--border:#363B46;--text:#EDEFF3;--muted:#AEB4BE;--faint:#9DA3AD;
    --ok:#5FE0B0;--ko:#FF9FB2;--warn:#F2C766;--okbg:#0F2A21;--kobg:#33161E;--warnbg:#2E2410;
    --accent:#3DD9A0;--accent-h:#6BE6B8;--accent-bg:#10261E;--on-accent:#06140E;
    --header-bg:#0A0C10;--header-text:#EDEFF3;--shadow:none;
    --btn-bg:#EDEFF3;--btn-bg-h:#FFFFFF;--btn-fg:#0A0C10;--btn2-fg:#EDEFF3;--focus-ring:#6BE6B8;--ctl-border:#7A818D;
    --mosa-rail:#1B1F27;--mosa-fleche-fond:#EDEFF3;--mosa-fleche:#0A0C10;
    --stade-page:#0A0C10;--stade-sable:#4A3D1A;--stade-sable-clair:#1B1F27;--stade-carte:#13161C;
    --stade-encre:#EDEFF3;--stade-encre-page:#EDEFF3;--stade-encre-douce:#AEB4BE;--stade-pied:#AEB4BE;
    --stade-vert:#3DD9A0;--stade-vert-fonce:#EDEFF3;--stade-compar-fond:#0A0C10;--stade-compar-encre:#EDEFF3;
    --stade-ligne:#7A818D;--stade-bulle2:#10261E;--stade-piste:#262B35;
    --stade-ok-f:#0F2A21;--stade-ok:#5FE0B0;--stade-ko-f:#33161E;--stade-ko:#FF9FB2;--stade-att-f:#2E2410;--stade-att:#F2C766;
    --typo-bandeau:#4A3D1A;--fil-rail:#1B1F27;--bloc-fond:#1B1F27;--bloc-accent:#10261E;--suivante-fond:#13161C;
    color-scheme:dark;
  }
  html:root[data-theme="auto"][data-accent="bleu"][data-contrast]{--accent:#8DB8F2;--accent-h:#B5D0F6;--accent-bg:#14233A;--focus-ring:#B5D0F6;--stade-vert:#8DB8F2;--bloc-accent:#14233A}
  html:root[data-theme="auto"][data-accent="orange"][data-contrast]{--accent:#F2A86E;--accent-h:#F7C398;--accent-bg:#33220F;--focus-ring:#F7C398;--stade-vert:#F2A86E;--bloc-accent:#33220F}
  html:root[data-theme="auto"][data-accent="violet"][data-contrast]{--accent:#CBA8F2;--accent-h:#DCC4F6;--accent-bg:#261B37;--focus-ring:#DCC4F6;--stade-vert:#CBA8F2;--bloc-accent:#261B37}
}

/* ============ Contraste renforcé : tuiles cernées, texte plein ============ */
html:root[data-theme][data-accent][data-contrast="high"]{
  --text:#000000;--muted:#000000;--faint:#000000;--border:#3B3F47;--ctl-border:#3B3F47;
  --accent:#064C38;--accent-h:#043728;--focus-ring:#064C38;--ok:#0A4D38;--ko:#7D1A2E;--warn:#523700;
  --stade-encre:#000000;--stade-encre-page:#000000;--stade-encre-douce:#000000;--stade-pied:#000000;--stade-vert:#064C38;
  --stade-bord:0px;--pastille-bord:2.5px;--fil-rail-bord:transparent;
}
html:root[data-theme="dark"][data-accent][data-contrast="high"]{
  --bg:#000000;--surface:#0B0D11;--surface-2:#151820;--text:#FFFFFF;--muted:#FFFFFF;--faint:#FFFFFF;--border:#B3B9C4;--ctl-border:#B3B9C4;
  --accent:#7BEAC2;--accent-h:#A6F1D5;--focus-ring:#FFFFFF;--ok:#8CEBC8;--ko:#FFC1CD;--warn:#F7D98E;
  --stade-encre:#FFFFFF;--stade-encre-page:#FFFFFF;--stade-encre-douce:#FFFFFF;--stade-pied:#FFFFFF;--stade-vert:#7BEAC2;
  --stade-page:#000000;--stade-carte:#0B0D11;--fil-rail-bord:transparent;
}
@media (prefers-color-scheme:dark){
  html:root[data-theme="auto"][data-accent][data-contrast="high"]{
    --bg:#000000;--surface:#0B0D11;--surface-2:#151820;--text:#FFFFFF;--muted:#FFFFFF;--faint:#FFFFFF;--border:#B3B9C4;--ctl-border:#B3B9C4;
    --accent:#7BEAC2;--accent-h:#A6F1D5;--focus-ring:#FFFFFF;--ok:#8CEBC8;--ko:#FFC1CD;--warn:#F7D98E;
    --stade-encre:#FFFFFF;--stade-encre-page:#FFFFFF;--stade-encre-douce:#FFFFFF;--stade-pied:#FFFFFF;--stade-vert:#7BEAC2;
    --stade-page:#000000;--stade-carte:#0B0D11;--fil-rail-bord:transparent;
  }
}

/* TEM-MOSAIQUE début */
/* ======================================================================
   Lot MOSAIQUE, vague 1 : nuancier par fonction, portée data-fonction, gardes sans liseré d encre,
   l écran prend la couleur de sa fonction (proposition 3). Valeurs : rapport couleurs-mosaique.md,
   sections 2.1 à 2.3 ; contrastes AA contrôlés par tests/mosaique_test.py.
   Une teinte = trois primitives : --mosa-<teinte> (fond, tuile pastel), --mosa-<teinte>-vif (marqueur,
   bandeau, pastille) et --mosa-<teinte>-encre (mot en couleur, numéro, anneau, cadre en contraste
   renforcé). Le texte posé sur un fond ou un vif reste --text ; sur une encre utilisée comme fond,
   --fn-sur-encre.
   ====================================================================== */

/* ============ Nuancier, clair ============ */
html:root[data-theme="light"][data-accent][data-contrast],html:root[data-theme="auto"][data-accent][data-contrast]{
  --mosa-sable:#FBE5AE;--mosa-sable-vif:#F9D478;--mosa-sable-encre:#7D5D0A;
  --mosa-lagon:#CAECF0;--mosa-lagon-vif:#99E0E9;--mosa-lagon-encre:#216B74;
  --mosa-menthe:#CDEFE0;--mosa-menthe-vif:#9EE6C6;--mosa-menthe-encre:#246E4D;
  --mosa-ciel:#CFE6FB;--mosa-ciel-vif:#97CBFB;--mosa-ciel-encre:#0E61AD;
  --mosa-tilleul:#E4F0C2;--mosa-tilleul-vif:#D3EA90;--mosa-tilleul-encre:#55691A;
  --mosa-lavande:#E1E1F6;--mosa-lavande-vif:#B2B2ED;--mosa-lavande-encre:#4F4FCA;
  --mosa-rose:#FBD9E3;--mosa-rose-vif:#FAA2BC;--mosa-rose-encre:#BA1445;
  --mosa-peche:#FCDFCB;--mosa-peche-vif:#FBBE94;--mosa-peche-encre:#9D480D;
  --mosa-orchidee:#F4D7F3;--mosa-orchidee-vif:#ECA7EA;--mosa-orchidee-encre:#9C2B98;
  --mosa-prairie:#D8EED3;--mosa-prairie-vif:#B1E3A6;--mosa-prairie-encre:#386E2B;
  --mosa-ardoise:#DDE4EC;--mosa-ardoise-vif:#BACADC;--mosa-ardoise-encre:#466283;
  --mosa-brume:#E6E1DD;--mosa-brume-vif:#D3C7BD;--mosa-brume-encre:#6D5C4F;
  --fn-sur-encre:#FFFFFF;
}

/* ============ Nuancier, sombre (choisi, puis automatique sous préférence sombre) ============ */
html:root[data-theme="dark"][data-accent][data-contrast]{
  --mosa-sable:#3A3017;--mosa-sable-vif:#6F5B2A;--mosa-sable-encre:#DEBF73;
  --mosa-lagon:#112C34;--mosa-lagon-vif:#2A5F6F;--mosa-lagon-encre:#73D3DE;
  --mosa-menthe:#112E26;--mosa-menthe-vif:#2A6F5C;--mosa-menthe-encre:#73DEAF;
  --mosa-ciel:#15263A;--mosa-ciel-vif:#2A4A6F;--mosa-ciel-encre:#73ABDE;
  --mosa-tilleul:#26301A;--mosa-tilleul-vif:#506F2A;--mosa-tilleul-encre:#C2DE73;
  --mosa-lavande:#22223C;--mosa-lavande-vif:#2A2A6F;--mosa-lavande-encre:#9494E6;
  --mosa-rose:#371C28;--mosa-rose-vif:#6F2A49;--mosa-rose-encre:#E17E9B;
  --mosa-peche:#382517;--mosa-peche-vif:#6F472A;--mosa-peche-encre:#DE9E73;
  --mosa-orchidee:#311930;--mosa-orchidee-vif:#6F2A6C;--mosa-orchidee-encre:#DE73DA;
  --mosa-prairie:#172916;--mosa-prairie-vif:#2E6F2A;--mosa-prairie-encre:#86DE73;
  --mosa-ardoise:#1D232B;--mosa-ardoise-vif:#3D4A5C;--mosa-ardoise-encre:#8DA6C4;
  --mosa-brume:#23201D;--mosa-brume-vif:#564C43;--mosa-brume-encre:#BAA697;
  --fn-sur-encre:#0A0C10;
}
@media (prefers-color-scheme:dark){
  html:root[data-theme="auto"][data-accent][data-contrast]{
    --mosa-sable:#3A3017;--mosa-sable-vif:#6F5B2A;--mosa-sable-encre:#DEBF73;
    --mosa-lagon:#112C34;--mosa-lagon-vif:#2A5F6F;--mosa-lagon-encre:#73D3DE;
    --mosa-menthe:#112E26;--mosa-menthe-vif:#2A6F5C;--mosa-menthe-encre:#73DEAF;
    --mosa-ciel:#15263A;--mosa-ciel-vif:#2A4A6F;--mosa-ciel-encre:#73ABDE;
    --mosa-tilleul:#26301A;--mosa-tilleul-vif:#506F2A;--mosa-tilleul-encre:#C2DE73;
    --mosa-lavande:#22223C;--mosa-lavande-vif:#2A2A6F;--mosa-lavande-encre:#9494E6;
    --mosa-rose:#371C28;--mosa-rose-vif:#6F2A49;--mosa-rose-encre:#E17E9B;
    --mosa-peche:#382517;--mosa-peche-vif:#6F472A;--mosa-peche-encre:#DE9E73;
    --mosa-orchidee:#311930;--mosa-orchidee-vif:#6F2A6C;--mosa-orchidee-encre:#DE73DA;
    --mosa-prairie:#172916;--mosa-prairie-vif:#2E6F2A;--mosa-prairie-encre:#86DE73;
    --mosa-ardoise:#1D232B;--mosa-ardoise-vif:#3D4A5C;--mosa-ardoise-encre:#8DA6C4;
    --mosa-brume:#23201D;--mosa-brume-vif:#564C43;--mosa-brume-encre:#BAA697;
    --fn-sur-encre:#0A0C10;
  }
}

/* ============ Nuancier, contraste renforcé : fonds inchangés, encres plus profondes ============ */
/* Bloc commun (vaut pour le clair) ; le bloc sombre qui suit, de même spécificité, redonne vifs et encres. */
html:root[data-theme][data-accent][data-contrast="high"]{
  --mosa-sable-encre:#523C07;--mosa-lagon-encre:#154349;--mosa-menthe-encre:#174732;--mosa-ciel-encre:#08345D;
  --mosa-tilleul-encre:#3C4A12;--mosa-lavande-encre:#1E1E66;--mosa-rose-encre:#5A0A21;--mosa-peche-encre:#5B2907;
  --mosa-orchidee-encre:#4E164C;--mosa-prairie-encre:#23461B;--mosa-ardoise-encre:#273648;--mosa-brume-encre:#3E342D;
  --fn-sur-encre:#FFFFFF;
}
html:root[data-theme="dark"][data-accent][data-contrast="high"]{
  --mosa-sable-vif:#4E401D;--mosa-sable-encre:#ECDAAC;--mosa-lagon-vif:#1D434E;--mosa-lagon-encre:#ACE5EC;
  --mosa-menthe-vif:#1D4E40;--mosa-menthe-encre:#B2EDD4;--mosa-ciel-vif:#1D344E;--mosa-ciel-encre:#ACCDEC;
  --mosa-tilleul-vif:#384E1D;--mosa-tilleul-encre:#DBECAC;--mosa-lavande-vif:#1D1D4E;--mosa-lavande-encre:#BDBDF0;
  --mosa-rose-vif:#4E1D33;--mosa-rose-encre:#EDB1C3;--mosa-peche-vif:#4E321D;--mosa-peche-encre:#ECC6AC;
  --mosa-orchidee-vif:#4E1D4C;--mosa-orchidee-encre:#ECACE9;--mosa-prairie-vif:#204E1D;--mosa-prairie-encre:#B8ECAC;
  --mosa-ardoise-vif:#2B3440;--mosa-ardoise-encre:#BCCBDC;--mosa-brume-vif:#3C362F;--mosa-brume-encre:#D6CBC2;
  --fn-sur-encre:#000000;
}
@media (prefers-color-scheme:dark){
  html:root[data-theme="auto"][data-accent][data-contrast="high"]{
    --mosa-sable-vif:#4E401D;--mosa-sable-encre:#ECDAAC;--mosa-lagon-vif:#1D434E;--mosa-lagon-encre:#ACE5EC;
    --mosa-menthe-vif:#1D4E40;--mosa-menthe-encre:#B2EDD4;--mosa-ciel-vif:#1D344E;--mosa-ciel-encre:#ACCDEC;
    --mosa-tilleul-vif:#384E1D;--mosa-tilleul-encre:#DBECAC;--mosa-lavande-vif:#1D1D4E;--mosa-lavande-encre:#BDBDF0;
    --mosa-rose-vif:#4E1D33;--mosa-rose-encre:#EDB1C3;--mosa-peche-vif:#4E321D;--mosa-peche-encre:#ECC6AC;
    --mosa-orchidee-vif:#4E1D4C;--mosa-orchidee-encre:#ECACE9;--mosa-prairie-vif:#204E1D;--mosa-prairie-encre:#B8ECAC;
    --mosa-ardoise-vif:#2B3440;--mosa-ardoise-encre:#BCCBDC;--mosa-brume-vif:#3C362F;--mosa-brume-encre:#D6CBC2;
    --fn-sur-encre:#000000;
  }
}

/* ============ Portée par fonction ============ */
/* L attribut data-fonction (sur <body> pour l écran ; sur une tuile, une carte ou un lien quand il change
   de sujet) pose quatre jetons : --f-fond, --f-vif, --f-encre, --f-bord (0 en contraste normal, 2 px en
   renforcé : seul cadre admis, dans l encre de la teinte, jamais en noir). Alias : --fn-tuile, --fn-vif,
   --fn-encre. Défaut sans fonction : neutre. Liste des fonctions : rapport couleurs, section 2 ; les
   roulements sont en sable (choix par défaut du plan), la fiche garde seule la lavande. */
html:root{--f-fond:var(--surface);--f-vif:var(--mosa-sable-vif);--f-encre:var(--accent);--f-bord:0px}
html:root[data-contrast="high"]{--f-bord:2px}
[data-fonction="accueil"],[data-fonction="messagerie"],[data-fonction="erreur"],[data-fonction="roulements"]{--f-fond:var(--mosa-sable);--f-vif:var(--mosa-sable-vif);--f-encre:var(--mosa-sable-encre)}
[data-fonction="equipe"]{--f-fond:var(--mosa-lagon);--f-vif:var(--mosa-lagon-vif);--f-encre:var(--mosa-lagon-encre)}
[data-fonction="convoc"]{--f-fond:var(--mosa-menthe);--f-vif:var(--mosa-menthe-vif);--f-encre:var(--mosa-menthe-encre)}
[data-fonction="trajet"]{--f-fond:var(--mosa-ciel);--f-vif:var(--mosa-ciel-vif);--f-encre:var(--mosa-ciel-encre)}
[data-fonction="frais"]{--f-fond:var(--mosa-tilleul);--f-vif:var(--mosa-tilleul-vif);--f-encre:var(--mosa-tilleul-encre)}
[data-fonction="fiche"]{--f-fond:var(--mosa-lavande);--f-vif:var(--mosa-lavande-vif);--f-encre:var(--mosa-lavande-encre)}
[data-fonction="score"]{--f-fond:var(--mosa-rose);--f-vif:var(--mosa-rose-vif);--f-encre:var(--mosa-rose-encre)}
[data-fonction="photo"]{--f-fond:var(--mosa-peche);--f-vif:var(--mosa-peche-vif);--f-encre:var(--mosa-peche-encre)}
[data-fonction="offres"]{--f-fond:var(--mosa-orchidee);--f-vif:var(--mosa-orchidee-vif);--f-encre:var(--mosa-orchidee-encre)}
[data-fonction="contact"]{--f-fond:var(--mosa-prairie);--f-vif:var(--mosa-prairie-vif);--f-encre:var(--mosa-prairie-encre)}
[data-fonction="benevoles"]{--f-fond:var(--mosa-prairie);--f-vif:var(--mosa-prairie-vif);--f-encre:var(--mosa-prairie-encre)} /* TEM-CLUBS : écran « Ton club », décision 12 */
[data-fonction="juridique"],[data-fonction="securite"],[data-fonction="donnees"]{--f-fond:var(--mosa-ardoise);--f-vif:var(--mosa-ardoise-vif);--f-encre:var(--mosa-ardoise-encre)}
[data-fonction="journal"],[data-fonction="affichage"],[data-fonction="technique"],.tem-reglages{--f-fond:var(--mosa-brume);--f-vif:var(--mosa-brume-vif);--f-encre:var(--mosa-brume-encre)}
/* Alias, redéclarés là où la portée change pour suivre la teinte locale. */
html:root,[data-fonction],.tem-reglages{--fn-tuile:var(--f-fond);--fn-vif:var(--f-vif);--fn-encre:var(--f-encre)}
/* Ce que la portée colore : bandeau des titres et étape courante (vif), anneau de focus (encre),
   pastilles pleines et étapes passées du fil (encre, texte --fn-sur-encre). */
[data-fonction],.tem-reglages{--typo-bandeau:var(--f-vif);--focus-ring:var(--f-encre);--pastille-pleine:var(--f-encre);--pastille-pleine-encre:var(--fn-sur-encre)}
::selection{background:var(--f-vif);color:var(--text)}

/* ============ Gardes de composants : tuiles bento, aucun liseré d encre ============ */
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
a{color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:.2em}
/* L en-tête collant ne masque plus le titre visé par un lien d ancre. */
html:root[data-style] [id]{scroll-margin-top:96px}
html:root[data-style] .tem-header{background:var(--header-bg);color:var(--header-text);border-bottom:0}
html:root[data-style] .tem-header .tem-back{border:var(--f-bord) solid var(--f-encre);border-radius:999px;padding:6px 16px;background:var(--surface);color:var(--text)}
html:root[data-style] .tem-header .tem-back:hover{background:var(--f-vif)}
html:root[data-style] .tem-header .tem-tagline{color:var(--muted);opacity:1}
html:root[data-style] .card{background:var(--surface);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r-grand);box-shadow:none;padding:26px 28px}
html:root[data-style] .card:not(.stade-suivante) > h2:first-child::before{color:var(--f-encre)}
html:root[data-style] .btn{border-radius:999px;font-weight:700;background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bg);box-shadow:none}
html:root[data-style] .btn:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h)}
html:root[data-style] .btn.sec{background:var(--surface);color:var(--text);border:1.5px solid var(--ctl-border);box-shadow:none}
html:root[data-style] .btn.sec:hover{background:var(--bloc-fond)}
html:root[data-style] .btn.ko{background:var(--surface);color:var(--ko);border-color:var(--ko)}
html:root[data-style] .btn:disabled,html:root[data-style] .btn:disabled:hover{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
html:root[data-style] .stade-b1{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
html:root[data-style] .stade-b1:hover{background:var(--btn-bg-h);color:var(--btn-fg);border-color:var(--btn-bg-h)}
html:root[data-style] .stade-b2{background:var(--surface);color:var(--text);border-color:var(--ctl-border);box-shadow:none}
html:root[data-style] :is(input,select,textarea){border-radius:14px;border:1.5px solid var(--ctl-border);background:var(--surface);color:var(--text)}
html:root[data-style] body[data-fonction] :is(input,select,textarea):focus{border-color:var(--f-encre)}
html:root[data-style] th{background:var(--bloc-fond)}
html:root[data-style] :is(.tag,.badge){border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .info{background:var(--f-fond);border-left:0;border-radius:var(--bloc-r);color:var(--text)}
html:root[data-style] .note{background:var(--warnbg);border-left:0;border-radius:var(--bloc-r);color:var(--text)}
html:root[data-style] :is(.kpi,.stade-carte){border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r);box-shadow:none}
html:root[data-style] :is(.kpi,.stade-carte,.card)[data-fonction]{background:var(--f-fond)}
html:root[data-style] .stade-bandeau{background:var(--f-vif);color:var(--text);border:0;border-radius:999px}
html:root[data-style] .stade-ticket{border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .stade-ticket summary{color:var(--f-encre)}
html:root[data-style] .stade-ticket-bas{border-top:var(--f-bord) dashed var(--f-encre);background:var(--f-fond)}
html:root[data-style] footer.tem-footer{color:var(--muted);border-top:0}

/* Panneau « Affichage » replié en pied de page (teinte brume) : pastille sans cadre, choix sans anneau d encre. */
html:root[data-style] .tem-reglages > summary{border:var(--f-bord) solid var(--f-encre);background:var(--f-fond);color:var(--text)}
html:root[data-style] .tem-reglages[open] > summary{background:var(--f-vif);color:var(--text);border-color:var(--f-encre)}
html:root[data-style] .tem-theme .dot[aria-pressed="true"]{outline:3px solid var(--f-encre);outline-offset:2px}

/* En-tête d écran : tuile de la teinte de la fonction, numéro d étape en contour dans son encre. */
html:root[data-style] .typo-tete{margin:var(--esp-4) 0 var(--esp-5);padding:clamp(24px,4vw,56px) clamp(22px,4vw,56px);border-radius:var(--stade-r-grand);--tuile:var(--f-fond);background:var(--tuile);--affiche-fond:var(--tuile);--affiche-encre:var(--text);--affiche-doux:var(--text);--affiche-numero:color-mix(in srgb,var(--text) 22%,transparent);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] body[data-fonction] .typo-tete{--affiche-numero:color-mix(in srgb,var(--f-encre) 55%,transparent)}
html:root[data-style] .typo-tete[data-numero]::after{right:24px}
@media (max-width:600px){html:root[data-style] .typo-tete[data-numero]::after{right:16px}}
html:root[data-style] .typo-tete .typo-chapo{color:var(--text)}

/* Accueil de l application : mosaïque de tuiles, chacune dans la teinte de sa fonction (plus par rang). */
html:root[data-style] body[data-fonction] .kpis{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
html:root[data-style] body[data-fonction] .kpi{padding:64px 22px 20px;min-height:150px}
html:root[data-style] body[data-fonction] .kpi .v a,html:root[data-style] body[data-fonction] .kpi .l{color:var(--text)}
html:root[data-style] .kpis > .kpi[data-fonction]::after{-webkit-text-stroke-color:color-mix(in srgb,var(--f-encre) 45%,transparent)}
html:root[data-style] :is(.kpi,.stade-carte,.card,.bulle,.prix)[data-fonction][data-ton="vif"]{background:var(--f-vif)}
/* Sur un vif, les textes secondaires passent au texte plein (le gris doux y descend sous 4,5:1 en sombre). */
[data-ton="vif"]{--stade-pied:var(--text);--muted:var(--text)}

/* Carte « Étape suivante » : carte de la teinte de l écran visé (lien data-fonction), pastille et bouton
   rond dans son encre, plus aucun disque d encre noire. */
html:root[data-style] .stade-suivante.card{background:transparent;border:0;padding:0;box-shadow:none;--affiche-fond:var(--suivante-fond);--affiche-encre:var(--text);--affiche-doux:var(--text);--typo-creux-fond:var(--bg)}
html:root[data-style] .stade-suivante .stade-carte{border-radius:var(--stade-r-grand);--suivante-fleche-fond:var(--f-encre);--suivante-fleche:var(--fn-sur-encre);--pastille-pleine:var(--f-encre);--pastille-pleine-encre:var(--fn-sur-encre)}

/* Fil d Ariane : commande segmentée sur un rail, sans contour d encre au repos ni au survol. */
html:root[data-style] .stade-fil{padding:5px;gap:4px}
html:root[data-style] .stade-fil li+li::before{content:none}
html:root[data-style] .stade-fil a,html:root[data-style] .stade-fil a:hover,html:root[data-style] .stade-fil [aria-current="step"] a{border-color:transparent}
html:root[data-style] .stade-fil li:not([aria-current]):not(:has(~ li[aria-current="step"])) a[data-fonction]:hover{background:var(--f-fond)}

/* Administration : choix du design sans cadre d encre, choix coché sur le vif. */
html:root[data-style] .admin-design{border:var(--f-bord) solid var(--f-encre);background:var(--bloc-fond)}
html:root[data-style] .admin-design:has(input:checked){border-color:var(--f-encre);background:var(--f-vif)}

/* Vitrine en service (vitrine-e-b) : chaque bloc dans la teinte de sa fonction, sans cadre ni ombre d encre. */
html:root[data-style] body[data-fonction] .entete{border-bottom:0}
html:root[data-style] .entete-cta{background:var(--f-encre);border-color:transparent;color:var(--fn-sur-encre)}
html:root[data-style] .entete-cta:hover{background:color-mix(in srgb,var(--f-encre) 82%,var(--text));border-color:transparent}
html:root[data-style] .v2{border:0;background-color:transparent}
html:root[data-style] .v2 .bandeau-defil{background:var(--f-vif);color:var(--text);border-bottom:0}
html:root[data-style] .v2 h2.hero-titre .surligne{background:var(--f-vif)}
html:root[data-style] .v2 .b1{background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bg)}
html:root[data-style] .v2 .b2{background:var(--surface);color:var(--text);border:2px solid var(--ctl-border);box-shadow:none}
html:root[data-style] :is(.v2 .etape,.v2 .tel,.v2 .bulle,.v2 .ticket,.v2 .reponse,.v2 .prix,.v2 .q,.v2 .r,.parcours li,.bloc-contact){border:var(--f-bord) solid var(--f-encre);box-shadow:none}
html:root[data-style] :is(.v2 .tel,.v2 .prix,.v2 .q,.v2 .ticket){background:var(--surface)}
html:root[data-style] :is(.v2 .etape,.v2 .bulle,.v2 .r,.v2 .reponse,.v2 .epingle,.v2 .kicker,.parcours li,.bloc-contact)[data-fonction],html:root[data-style] .v2 .prix.reco{background:var(--f-fond);color:var(--text)}
html:root[data-style] .v2 .bulle[data-fonction][data-ton="vif"]{background:var(--f-vif)}
html:root[data-style] .v2 .ticket summary{color:var(--f-encre)}
html:root[data-style] .v2 .ticket-bas{border-top:var(--f-bord) dashed var(--f-encre);background:var(--f-vif)}
html:root[data-style] .pastille{border:var(--f-bord) solid currentColor}
html:root[data-style] :is(.barre,.barre-mini){border:0;background:var(--f-vif)}
html:root[data-style] :is(.barre,.barre-mini) > div{background:var(--f-encre)}
html:root[data-style] .v2 .choix label{border:var(--f-bord) solid var(--f-encre);background:var(--surface);color:var(--text)}
html:root[data-style] .v2 .choix label:has(input:checked){background:var(--f-vif);color:var(--text)}
html:root[data-style] .v2 .choix label:has(input:checked)::before{content:"";display:inline-block;width:.32em;height:.62em;margin-right:.5em;border-right:.16em solid currentColor;border-bottom:.16em solid currentColor;transform:rotate(45deg) translateY(-.12em)}
html:root[data-style] .v2 .choix label:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
html:root[data-style] .bloc-contact button{background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bg)}

/* L écran entier prend la couleur de sa fonction (proposition 3) : voile de la teinte en haut de page,
   en-tête collant dans la teinte du haut du voile (bande de couleur de l écran au défilement), pastille
   du logo sur le vif, première carte sur le fond de la teinte. */
html:root[data-style] body[data-fonction]{--voile:color-mix(in srgb,var(--f-fond) 72%,var(--bg));background:linear-gradient(to bottom,var(--voile) 0,var(--bg) 620px) no-repeat,var(--bg)}
@media (max-width:600px){html:root[data-style] body[data-fonction]{background:linear-gradient(to bottom,var(--voile) 0,var(--bg) 440px) no-repeat,var(--bg)}}
html:root[data-style] body[data-fonction] :is(.tem-header,.entete){background:var(--voile)}
html:root[data-style] body[data-fonction] :is(.tem-header,.entete) .tem-logo{box-sizing:content-box;background:var(--f-vif);padding:4px;border-radius:12px;vertical-align:-11px}
html:root[data-style] body[data-fonction] .typo-tete + .card:not(.stade-suivante){background:var(--f-fond);--typo-creux-fond:var(--f-fond)}
html:root[data-style] body[data-fonction] .typo-tete + .card .info{background:var(--surface)}
/* Blocs d accent des écrans (part par famille, référent, accord, état du score et de la commande) : vif de l écran. */
html:root[data-style] body[data-fonction]{--bloc-accent:var(--f-vif)}
html:root[data-style] :is(.frais-part,.groupe-referent,.score-etat,.photo-accord,.paye-etat){--muted:var(--text);--stade-pied:var(--text)}
/* Téléphone : l en-tête tient sur une ligne (le lien de retour ne passe plus dessous). */
@media (max-width:600px){
  html:root[data-style] .tem-header{flex-wrap:nowrap;gap:8px;padding-inline:14px}
  html:root[data-style] .tem-header .tem-brand{min-width:0;font-size:1.05rem}
  html:root[data-style] .tem-header .tem-back{padding:6px 12px;font-size:.84rem}
}
/* Vitrine : intitulé du message épinglé sur sa ligne, formulaire de contact détaché du parcours. */
html:root[data-style] .v2 .epingle b{display:block}
html:root[data-style] .bloc-contact{margin-top:var(--esp-6)}

/* Contraste renforcé : voile retiré, cadres de 2 px dans l encre de la teinte (jamais en noir). */
html:root[data-style][data-contrast="high"] body[data-fonction]{background:var(--bg)}
html:root[data-style][data-contrast="high"] body[data-fonction] .typo-tete{--affiche-numero:var(--f-encre)}
html:root[data-style][data-contrast="high"] .stade-fil{border:var(--f-bord) solid var(--f-encre)}
html:root[data-style][data-contrast="high"] :is(input,select,textarea,.btn.sec,.stade-b2,.v2 .b2){border-color:var(--f-encre)}

@media (max-width:480px){
  html:root[data-style] .card{padding:18px;border-radius:var(--stade-r)}
  html:root[data-style] .typo-tete{padding:20px 18px 22px}
}
/* Mots en couleur : dans Mosaïque, la couleur de l encre suffit, sans le soulignement du repli des autres designs. */
html:root[data-style] .mot-couleur{text-decoration-line:none}
/* Téléphone : le grand numéro d étape passe au-dessus du sur-titre au lieu de chevaucher le titre (juge waouh, correction 1). */
@media (max-width:600px){html:root[data-style] .typo-tete[data-numero]{padding-top:104px}}
/* TEM-MOSAIQUE fin */



/* ======================================================================
   Ancres de la vague 2 du lot MOSAIQUE (une par proposition retenue), vides en vague 1.
   Chaque agent n écrit qu entre ses deux ancres ; trois lignes de commentaire au moins
   séparent deux ancres pour que les fusions git restent propres.
   ====================================================================== */

/* TEM-MOSAIQUE-P1 début */
/* P1 : la tuile qui devient l écran (transition fluide entre écrans).
   Transitions entre documents en CSS (View Transitions de niveau 2), posées dans Mosaïque seulement et
   seulement sous prefers-reduced-motion: no-preference : sinon, et dans les navigateurs sans prise en
   charge, navigation classique. Aucun élément ajouté au DOM.
   - En-tête du site (entete) et rail du fil (rail) immobiles ; seule la puce active glisse (puce-active).
   - Une paire de noms par fonction (tuile-<fonction>) : l en-tête monumental .typo-tete de l écran d un
     côté ; de l autre, la tuile de l accueil /app/ et la carte « Étape suivante » (teintée par P7) qui y
     mènent. La tuile touchée grandit et devient l en-tête de l écran d arrivée, son fond reste continu.
     Noms uniques par page : un écran ne mène jamais à lui-même et l accueil a une tuile par fonction.
   - Sans tuile partagée (passage par le fil), l en-tête sortant part d un côté et l entrant arrive de
     l autre, dans le sens du fil ; le reste de l écran glisse de 24 px en fondu.
   - html[data-vt-sens], posé par /assets/tem-passage.js (script externe) : « retour » inverse les
     glissements (retour arrière, écran placé avant dans le fil), « fondu » se contente d un fondu
     (arrivée depuis la vitrine ou une page juridique). [data-vt-loin], posé par le même script, retire
     son nom à une tuile, au fil ou à l en-tête hors de l écran : rien ne traverse la page. Sans le
     script, tout glisse dans le sens du fil. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  html:root{--vt-duree:.38s;--vt-sortie:.2s;--vt-courbe:cubic-bezier(.5,0,.2,1);--vt-glisse:24px;--vt-tete-sortie:-110%;--vt-tete-entree:110%}
  html:root[data-vt-sens="retour"]{--vt-glisse:-24px;--vt-tete-sortie:110%;--vt-tete-entree:-110%}
  html:root[data-style] .tem-header:not([data-vt-loin]){view-transition-name:entete}
  html:root[data-style] .stade-fil:not([data-vt-loin]){view-transition-name:rail}
  html:root[data-style] .stade-fil:not([data-vt-loin]) [aria-current="step"] a{view-transition-name:puce-active}
  /* Une ligne par fonction : en-tête de l écran, tuile de l accueil ou carte « Étape suivante » qui y mène. */
  html:root[data-style] body[data-fonction="accueil"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="accueil"]:not([data-vt-loin]){view-transition-name:tuile-accueil}
  html:root[data-style] body[data-fonction="equipe"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="equipe"]:not([data-vt-loin]){view-transition-name:tuile-equipe}
  html:root[data-style] body[data-fonction="convoc"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="convoc"]:not([data-vt-loin]){view-transition-name:tuile-convoc}
  html:root[data-style] body[data-fonction="trajet"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="trajet"]:not([data-vt-loin]){view-transition-name:tuile-trajet}
  html:root[data-style] body[data-fonction="frais"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="frais"]:not([data-vt-loin]){view-transition-name:tuile-frais}
  html:root[data-style] body[data-fonction="fiche"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="fiche"]:not([data-vt-loin]){view-transition-name:tuile-fiche}
  html:root[data-style] body[data-fonction="score"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="score"]:not([data-vt-loin]){view-transition-name:tuile-score}
  html:root[data-style] body[data-fonction="photo"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="photo"]:not([data-vt-loin]){view-transition-name:tuile-photo}
  html:root[data-style] body[data-fonction="roulements"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="roulements"]:not([data-vt-loin]){view-transition-name:tuile-roulements}
  html:root[data-style] body[data-fonction="offres"] .tem-main > .typo-tete,html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte)[data-fonction="offres"]:not([data-vt-loin]){view-transition-name:tuile-offres}
  html:root[data-style] .tem-main > .typo-tete{view-transition-class:tuile tete}
  html:root[data-style] :is(.kpis > .kpi,.kpis > .stade-carte,.stade-suivante .stade-carte){view-transition-class:tuile depart}

  ::view-transition-group(*){animation-duration:var(--vt-duree);animation-timing-function:var(--vt-courbe)}
  /* Le reste de l écran : glissement court en fondu dans le sens du fil (écrans de l application). */
  html:has(.stade-fil)::view-transition-old(root){animation:tem-vt-sort var(--vt-sortie) var(--mouvement) both}
  html:has(.stade-fil)::view-transition-new(root){animation:tem-vt-entre var(--vt-duree) var(--mouvement) both}
  html[data-vt-sens="fondu"]::view-transition-old(root){animation:tem-vt-efface var(--vt-sortie) linear both}
  html[data-vt-sens="fondu"]::view-transition-new(root){animation:tem-vt-apparait var(--vt-duree) linear both}
  /* La tuile qui grandit : une fenêtre arrondie sur l en-tête d arrivée, qui s agrandit ; le contenu de
     la tuile de départ s efface par-dessus. Pas de fondu additif : le fond reste d une seule teinte. */
  ::view-transition-group(.tuile){border-radius:var(--stade-r-grand);overflow:clip}
  ::view-transition-old(.tuile),::view-transition-new(.tuile){inline-size:auto;block-size:auto;mix-blend-mode:normal}
  ::view-transition-new(.tuile){animation:none}
  ::view-transition-old(.tuile){z-index:1;animation:tem-vt-efface var(--vt-sortie) linear both}
  /* D un écran à l autre par le fil : l en-tête sortant part d un côté, l entrant arrive de l autre. */
  ::view-transition-old(.tete):only-child{inline-size:100%;animation:tem-vt-tete-sort var(--vt-duree) var(--mouvement) both}
  ::view-transition-new(.tete):only-child{inline-size:100%;animation:tem-vt-tete-entre var(--vt-duree) var(--mouvement) both}
  ::view-transition-old(.depart):only-child{animation:tem-vt-efface var(--vt-sortie) var(--mouvement) both}
  ::view-transition-new(.depart):only-child{animation:tem-vt-apparait var(--vt-duree) var(--mouvement) both}
  html[data-vt-sens="fondu"]::view-transition-new(.tete):only-child{animation:tem-vt-apparait var(--vt-duree) linear both}

  @keyframes tem-vt-sort{to{opacity:0;transform:translateX(calc(var(--vt-glisse) * -1))}}
  @keyframes tem-vt-entre{from{opacity:0;transform:translateX(var(--vt-glisse))}}
  @keyframes tem-vt-efface{to{opacity:0}}
  @keyframes tem-vt-apparait{from{opacity:0}}
  @keyframes tem-vt-tete-sort{to{transform:translateX(var(--vt-tete-sortie))}}
  @keyframes tem-vt-tete-entre{from{transform:translateX(var(--vt-tete-entree))}}
}
/* TEM-MOSAIQUE-P1 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P2 début */
/* P2 : vitrine en mosaïque bento, juridique, 404 et panneau « Affichage ». */
/* Vitrine (public/vitrine-e-b.html, servie sur /) : message monumental aux mots colorés, puis une mosaïque de
   8 tuiles de tailles inégales, chacune sur le fond de sa fonction (rapport couleurs 5.1) avec un aperçu
   marqué « exemple » ; grille de 12 colonnes à partir de 1 000 px, 6 colonnes dès 640 px, une colonne
   en dessous dans l ordre de priorité du produit (déplacements, frais, convocations…). Aucun cadre ni
   ombre : la couleur et les coins séparent ; en contraste renforcé, cadre de 2 px dans l encre de la
   teinte. Toute la tuile est un lien (flèche ronde étirée). Repli des autres designs : tem.css,
   ancre TEM-MOSAIQUE-REPLI-VITRINE. */
html:root[data-theme][data-accent][data-contrast]{
  --bento-r:var(--stade-r-grand);--bento-pad:clamp(20px,2.2vw,30px);--bento-ecart:clamp(12px,1.3vw,18px);
  --bento-num:clamp(3rem,2rem + 2.4vw,4.6rem);--bento-num-trait:1.6px;--bento-fleche:52px;
  --siege:clamp(32px,3.6vw,52px);--vignette:clamp(64px,7vw,92px);
  /* Marqueurs de « où » (ciel) et « quand » (menthe) posés sur une seule ligne : la virgule tombe entre les
     deux coupes (mesure de la police du titre, proportionnelle à sa taille, donc valable à 390 et 1 440 px). */
  --hero-coupe-1:26%;--hero-coupe-2:33.5%;
}
html:root[data-contrast="high"]{--bento-num-trait:2.4px}

/* Bande défilante : un segment par sujet, sur le fond de sa fonction, posé sur le vif sable de l accueil. */
html:root[data-style] .v2 .bandeau-defil > div{padding:8px 0}
html:root[data-style] .v2 .bandeau-defil span[data-fonction]{background:var(--f-fond);color:var(--text);border-radius:999px;padding:3px 12px;text-transform:uppercase}

/* Tête : message monumental, « où » sur le vif ciel, « quand » sur le vif menthe, « et avec qui » sur le vif lagon. */
@media (min-width:1000px){
  html:root[data-style] .v2 .v2-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);column-gap:clamp(24px,3vw,48px);align-items:end}
  html:root[data-style] .v2 .v2-tete > .v2-sur{grid-column:1 / -1}
  html:root[data-style] .v2 .v2-intro{padding-bottom:.6rem}
  html:root[data-style] .v2 .v2-intro .v2-chapo{font-size:1.02rem}
}
html:root[data-style] .v2 .v2-tete h2.hero-titre .creux{color:var(--text);-webkit-text-stroke:0;padding:0 .1em;margin-left:-.1em;border-radius:.14em;background:linear-gradient(90deg,var(--mosa-ciel-vif) 0 var(--hero-coupe-1),transparent var(--hero-coupe-1) var(--hero-coupe-2),var(--mosa-menthe-vif) var(--hero-coupe-2) 100%)}
html:root[data-style] .v2 .v2-tete h2.hero-titre .surligne{background:var(--mosa-lagon-vif);color:var(--text)}
html:root[data-style] .v2 .boutons{margin:var(--esp-4) 0 0}

/* Grille bento. */
html:root[data-style] .v2 .bento{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bento-ecart);max-width:1140px;margin:0 auto;padding:clamp(24px,3.4vw,44px) 20px 0}
@media (min-width:640px){
  html:root[data-style] .v2 .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  html:root[data-style] .v2 .bento > .tuile{grid-column:span 3}
  html:root[data-style] .v2 .bento > :is(.tuile-trajet,.tuile-roulements,.tuile-postes){grid-column:span 6}
}
@media (min-width:1000px){
  html:root[data-style] .v2 .bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:
    "trajet trajet trajet trajet trajet trajet frais frais frais convoc convoc convoc"
    "trajet trajet trajet trajet trajet trajet score score score score score score"
    "fiche fiche fiche fiche photo photo photo photo offres offres offres offres"
    "roul roul roul roul roul roul postes postes postes postes postes postes"}
  html:root[data-style] .v2 .bento > .tuile{grid-column:auto}
  html:root[data-style] .v2 .bento > .tuile-trajet{grid-area:trajet}
  html:root[data-style] .v2 .bento > .tuile-frais{grid-area:frais}
  html:root[data-style] .v2 .bento > .tuile-convoc{grid-area:convoc}
  html:root[data-style] .v2 .bento > .tuile-score{grid-area:score}
  html:root[data-style] .v2 .bento > .tuile-fiche{grid-area:fiche}
  html:root[data-style] .v2 .bento > .tuile-photo{grid-area:photo}
  html:root[data-style] .v2 .bento > .tuile-offres{grid-area:offres}
  html:root[data-style] .v2 .bento > .tuile-roulements{grid-area:roul}
  html:root[data-style] .v2 .bento > .tuile-postes{grid-area:postes}
}

/* Tuile. */
html:root[data-style] .v2 .tuile{position:relative;container-type:inline-size;display:flex;flex-direction:column;gap:var(--esp-2);margin:0;min-height:220px;background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;padding:var(--bento-pad) var(--bento-pad) calc(var(--bento-pad) * .7 + var(--bento-fleche) + 10px);overflow:hidden;--muted:var(--text)}
html:root[data-style] .v2 .tuile > *{margin:0}
html:root[data-style] .v2 .tuile-num{display:block;position:absolute;top:calc(var(--bento-pad) * .5);right:var(--bento-pad);font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:var(--bento-num);line-height:1;color:transparent;-webkit-text-stroke:var(--bento-num-trait) var(--f-encre)}
html:root[data-style] .v2 .tuile-rubrique{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--f-encre);padding-right:calc(var(--bento-num) * 1.2)}
html:root[data-style] .v2 .tuile-exemple{display:inline-block;margin-left:.5em;padding:1px 9px;border-radius:999px;background:var(--surface);color:var(--text);font-size:.72rem;letter-spacing:.04em;text-transform:none;font-weight:700;vertical-align:1px}
html:root[data-style] .v2 .tuile-titre{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.35rem,.9rem + 1.2vw,1.9rem);line-height:1;letter-spacing:0;padding-right:calc(var(--bento-num) * 1.2);text-wrap:balance}
html:root[data-style] .v2 .tuile-texte{font-weight:600}
/* Flèche ronde dans l encre de la tuile, lien étiré : toute la tuile mène à l écran. */
html:root[data-style] .v2 .tuile-fleche{position:absolute;inset:0;border-radius:inherit;color:inherit}
html:root[data-style] .v2 .tuile-fleche::before{content:"";position:absolute;right:calc(var(--bento-pad) * .7);bottom:calc(var(--bento-pad) * .7);inline-size:var(--bento-fleche);block-size:var(--bento-fleche);border-radius:50%;background:var(--f-encre)}
html:root[data-style] .v2 .tuile-fleche::after{content:"";position:absolute;right:calc(var(--bento-pad) * .7 + var(--bento-fleche) * .36);bottom:calc(var(--bento-pad) * .7 + var(--bento-fleche) * .3);inline-size:calc(var(--bento-fleche) * .3);block-size:calc(var(--bento-fleche) * .4);background:var(--fn-sur-encre);clip-path:polygon(0 12%,12% 0,62% 50%,12% 100%,0 88%,38% 50%)}
html:root[data-style] .v2 .tuile-fleche:focus-visible{outline:3px solid var(--f-encre);outline-offset:3px}

/* Chiffres des aperçus : condensés, dans l encre de la teinte ; les centimes et le tiret en contour. */
html:root[data-style] .v2 .apercu-chiffres > *{margin:0}
html:root[data-style] .v2 .apercu-ligne{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .3em;line-height:.85}
html:root[data-style] .v2 .apercu-chiffre{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:clamp(4.2rem,34cqi,7rem);line-height:.85;letter-spacing:-.01em;color:var(--f-encre);font-variant-numeric:tabular-nums lining-nums}
html:root[data-style] .v2 .apercu-creux{color:transparent;-webkit-text-stroke:max(2px,.04em) var(--f-encre)}
html:root[data-style][data-contrast="high"] .v2 .apercu-creux{color:var(--f-encre);-webkit-text-stroke:0}
html:root[data-style] .v2 :is(.apercu-sur,.apercu-unite){font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.3rem,9cqi,2rem);color:var(--f-encre)}
html:root[data-style] .v2 .apercu-legende{margin-top:var(--esp-2);font-weight:700}
html:root[data-style] .v2 .apercu-detail{font-size:.9rem}
html:root[data-style] .v2 .apercu-legende .mot{white-space:nowrap}
html:root[data-style] .v2 .apercu-etat{display:inline-block;margin-top:var(--esp-3);padding:4px 14px;border-radius:999px;background:var(--f-encre);color:var(--fn-sur-encre);font-weight:800;font-size:.88rem}

/* Déplacements : voiture vue de dessus, sièges ronds pleins (pris) ou cerclés (libre). */
html:root[data-style] .v2 .apercu-trajet{display:flex;align-items:center;gap:clamp(18px,5cqi,40px);margin-top:var(--esp-3);flex-wrap:wrap}
html:root[data-style] .v2 .apercu-trajet .apercu-chiffres{flex:1 1 200px}
html:root[data-style] .v2 .tuile-trajet .apercu-chiffre{font-size:clamp(6rem,30cqi,11rem)}
html:root[data-style] .v2 .voiture{position:relative;display:grid;grid-template-columns:repeat(2,var(--siege));gap:calc(var(--siege) * .36) calc(var(--siege) * .5);padding:calc(var(--siege) * 1.1) calc(var(--siege) * .5) calc(var(--siege) * .6);background:var(--surface);border-radius:calc(var(--siege) * 1.2) calc(var(--siege) * 1.2) calc(var(--siege) * .6) calc(var(--siege) * .6)}
html:root[data-style] .v2 .voiture > .siege{inline-size:var(--siege);aspect-ratio:1;border-radius:50%;box-sizing:border-box}
html:root[data-style] .v2 .voiture > .pris{background:var(--f-encre)}
html:root[data-style] .v2 .voiture > .libre{background:var(--surface);border:3px solid var(--f-encre)}
html:root[data-style] .v2 .voiture > .volant{position:absolute;top:calc(var(--siege) * .3);left:calc(var(--siege) * .62);inline-size:calc(var(--siege) * .6);aspect-ratio:1;border-radius:50%;box-sizing:border-box;border:2px solid var(--f-encre)}
html:root[data-style] .v2 .voiture-mini{--siege:18px}
html:root[data-style] .v2 .voiture-mini > .libre{border-width:2px}
html:root[data-style] .v2 .voiture-ligne{display:flex;align-items:center;gap:var(--esp-4);margin-top:auto;padding-top:var(--esp-4);padding-right:calc(var(--bento-fleche) + var(--bento-pad) * .4)}
html:root[data-style] .v2 .voiture-ligne p{margin:0;font-weight:600}

/* Convocations : rangée de pastilles (pleines présent, cerclées en attente, barrées absent), sans prénom. */
html:root[data-style] .v2 .pastilles-apercu{display:flex;flex-wrap:wrap;gap:clamp(3px,1.6cqi,6px);margin-top:var(--esp-3)}
html:root[data-style] .v2 .pastilles-apercu > span{inline-size:clamp(11px,5.4cqi,16px);aspect-ratio:1;border-radius:50%;box-sizing:border-box}
html:root[data-style] .v2 .pastilles-apercu > .p-ok{background:var(--f-encre)}
html:root[data-style] .v2 .pastilles-apercu > .p-att{border:2px solid var(--f-encre)}
html:root[data-style] .v2 .pastilles-apercu > .p-abs{border:2px solid var(--ko);background:linear-gradient(135deg,transparent 42%,var(--ko) 42% 58%,transparent 58%)}

/* Score. */
html:root[data-style] .v2 .apercu-score{gap:0 .12em}
html:root[data-style] .v2 .tuile-score .apercu-chiffre{font-size:clamp(4.4rem,18cqi,7.4rem)}

/* Fiche de match : trois lignes cochées. */
html:root[data-style] .v2 .coches{list-style:none;padding:0;margin:var(--esp-2) 0 0;display:grid;gap:var(--esp-2)}
html:root[data-style] .v2 .coches li{position:relative;display:flex;align-items:center;gap:var(--esp-3);width:fit-content;background:var(--surface);border-radius:999px;padding:6px 16px 6px 6px;font-weight:700}
html:root[data-style] .v2 .coches li::before{content:"";inline-size:26px;aspect-ratio:1;border-radius:50%;background:var(--f-encre)}
html:root[data-style] .v2 .coches li::after{content:"";position:absolute;left:15px;top:50%;inline-size:6px;block-size:11px;margin-top:-8px;border-right:3px solid var(--fn-sur-encre);border-bottom:3px solid var(--fn-sur-encre);transform:rotate(45deg)}

/* Photos : trois vignettes pastel décalées, aucune photo réelle. */
html:root[data-style] .v2 .vignettes{display:block;position:relative;block-size:calc(var(--vignette) * 1.35);margin-top:var(--esp-2)}
html:root[data-style] .v2 .vignettes > span{position:absolute;inline-size:var(--vignette);aspect-ratio:1;border-radius:18px}
html:root[data-style] .v2 .vignettes > .vignette-1{left:0;top:calc(var(--vignette) * .3);background:var(--f-vif);transform:rotate(-6deg)}
html:root[data-style] .v2 .vignettes > .vignette-2{left:calc(var(--vignette) * .75);top:0;background:var(--surface);transform:rotate(3deg)}
html:root[data-style] .v2 .vignettes > .vignette-3{left:calc(var(--vignette) * 1.5);top:calc(var(--vignette) * .22);background:var(--f-encre);transform:rotate(-2deg)}

/* Roulements : frise de pastilles, tour en cours sur le vif et marqué (aria-current, puce cerclée). */
html:root[data-style] .v2 .frise{list-style:none;padding:0;margin:var(--esp-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);padding-right:calc(var(--bento-fleche) + var(--bento-pad) * .4)}
html:root[data-style] .v2 .frise li{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:6px 14px 6px 6px;font-weight:700}
html:root[data-style] .v2 .frise li > span{inline-size:20px;aspect-ratio:1;border-radius:50%;box-sizing:border-box;border:3px solid var(--f-encre)}
html:root[data-style] .v2 .frise li.fait > span{background:var(--f-encre)}
html:root[data-style] .v2 .frise li.courant{background:var(--f-vif);font-weight:800}
html:root[data-style] .v2 .frise li.courant > span{background:var(--f-encre)}
html:root[data-style] .v2 .tuile-roulements{min-height:0}
/* Roulements à partir de 1 000 px : le tour en frise sur toute la largeur de la bande, une pastille par famille. */
@media (min-width:1000px){
  html:root[data-style] .v2 .tuile-roulements .frise{flex-wrap:nowrap;margin-top:var(--esp-4)}
  html:root[data-style] .v2 .tuile-roulements .frise li{flex:1 1 0;justify-content:center;white-space:nowrap;padding:12px 16px 12px 10px;font-size:1.05rem}
  html:root[data-style] .v2 .tuile-roulements .frise li.courant{flex-grow:1.6}
}

/* Offres : prix servis par le serveur (app/lib/products.js), dans l encre orchidée. */
html:root[data-style] .v2 .offres-liste{list-style:none;padding:0;margin:var(--esp-2) 0 0;display:grid;gap:6px;padding-right:calc(var(--bento-fleche) + var(--bento-pad) * .2)}
html:root[data-style] .v2 .offres-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--esp-3);background:var(--surface);border-radius:14px;padding:8px 14px;font-weight:700}
html:root[data-style] .v2 .offres-liste strong{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-size:1.5rem;line-height:1;color:var(--f-encre);white-space:nowrap}
html:root[data-style] .v2 [data-tem^="prix_"]{white-space:nowrap}

/* Sous la mosaïque (agent VITRINE3) : une idée par section, chacune ouverte par un titre monumental (sur-titre
   dans l encre, titre en capitales condensées, seconde ligne sur une bande du vif de la teinte de la section).
   Aucun cadre ni ombre : couleur et coins séparent ; en contraste renforcé, cadre de 2 px dans l encre. */
html:root{--sec-ecart:clamp(76px,8vw,132px);--sec-titre:clamp(2.7rem,1.2rem + 4.8vw,6.4rem);--etape-marge:clamp(32px,3.6vw,48px);--etape-rail:6px;--etape-point:22px;
  --parc-num:clamp(4.6rem,3.4rem + 2.6vw,6.6rem);--parc-pad:clamp(20px,2.2vw,28px)}
html:root[data-style] :is(.v2 .sec,.parcours){max-width:1140px;margin:var(--sec-ecart) auto 0;padding:0 20px}
html:root[data-style] .sec-tete{max-width:60rem;margin:0 0 clamp(26px,3.2vw,44px)}
html:root[data-style] .sec-tete > *{margin:0}
html:root[data-style] .sec-sur{display:flex;align-items:center;gap:.7em;font-size:.84rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .sec-sur::before{content:"";flex:none;inline-size:30px;block-size:6px;border-radius:999px;background:var(--f-encre)}
html:root[data-style] .sec-titre{margin-top:.2em;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:var(--sec-titre);line-height:.95;letter-spacing:var(--typo-espacement);color:var(--text)}
html:root[data-style] .sec-bande{display:block;inline-size:fit-content;max-inline-size:100%;margin:.06em 0 0 -.1em;padding:0 .12em;border-radius:.14em;background:var(--f-vif);color:var(--text)}
html:root[data-style] .sec-chapo{margin-top:var(--esp-4);max-width:44rem;font-size:clamp(1.02rem,.94rem + .3vw,1.2rem);line-height:1.55}
html:root[data-style] .v2 .sec-tete .kicker{display:inline-block;margin-top:var(--esp-4);padding:6px 16px;border-radius:999px;font-size:.88rem;font-weight:750}

/* Semaine : frise du vendredi soir au retour, une étape par fonction sur le rail de couleur, téléphone à côté. */
html:root[data-style] .v2 .fil{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);max-width:none;margin:0;padding:0;align-items:start}
@media (min-width:1000px){html:root[data-style] .v2 .fil{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
html:root[data-style] .v2 .journee{display:grid;gap:14px;margin:0;padding:0 0 0 var(--etape-marge);list-style:none}
html:root[data-style] .v2 .journee > .etape{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heure chiffre" "titre chiffre" "texte texte";column-gap:var(--esp-4);row-gap:8px;align-items:start;margin:0;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;transform:none;--muted:var(--text)}
html:root[data-style] .v2 .journee > .etape > *{margin:0}
html:root[data-style] .v2 .journee > .etape::before{content:"";position:absolute;left:calc(var(--etape-marge) * -.5 - var(--etape-rail) * .5);top:0;bottom:-14px;inline-size:var(--etape-rail);border-radius:999px;background:var(--f-vif)}
html:root[data-style] .v2 .journee > .etape:last-child::before{bottom:0}
html:root[data-style] .v2 .journee > .etape::after{content:"";position:absolute;left:calc(var(--etape-marge) * -.5 - var(--etape-point) * .5);top:clamp(18px,2vw,26px);inline-size:var(--etape-point);aspect-ratio:1;box-sizing:border-box;border-radius:50%;background:var(--f-encre);border:4px solid var(--bg)}
html:root[data-style] .v2 .etape .heure{grid-area:heure;justify-self:start;padding:3px 12px;border-radius:999px;background:var(--f-vif);color:var(--text);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
html:root[data-style] .v2 .etape h3{grid-area:titre;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.4rem,1rem + 1.1vw,2rem);line-height:1;text-wrap:balance}
html:root[data-style] .v2 .etape-chiffre{grid-area:chiffre;align-self:center;display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);line-height:.85;color:var(--f-encre)}
html:root[data-style] .v2 .etape-chiffre b{font-weight:inherit;font-size:clamp(3rem,1.8rem + 3.2vw,5.4rem);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
html:root[data-style] .v2 .etape-chiffre span{margin-top:.3em;font-size:clamp(.95rem,.8rem + .4vw,1.2rem);text-transform:uppercase}
html:root[data-style] .v2 .etape-texte{grid-area:texte;font-size:.95rem;line-height:1.5}
html:root[data-style] .v2 .etape-texte > p{margin:0}
html:root[data-style] .v2 .etape-texte .pastille{margin:0 4px 4px 0;vertical-align:1px}
html:root[data-style] .v2 .etape-texte .barre-mini{max-width:none;height:10px;margin:6px 0 10px;border-radius:999px;background:var(--surface)}
html:root[data-style] .v2 .etape-texte .barre-mini:last-child{margin-bottom:0}
@media (max-width:640px){
  html:root[data-style] .v2 .journee > .etape{grid-template-columns:minmax(0,1fr);grid-template-areas:"heure" "chiffre" "titre" "texte"}
  html:root[data-style] .v2 .etape-chiffre{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 .3em;text-align:left;margin-top:6px}
  html:root[data-style] .v2 .etape-chiffre b{font-size:clamp(3.2rem,16vw,4.4rem)}
}
/* Téléphone sans cadre : coque claire à grands coins sur une scène de pastilles des quatre teintes de la semaine. */
html:root[data-style] .v2 .scene{display:grid;place-items:center;padding:clamp(30px,4vw,48px) clamp(14px,3vw,36px);border-radius:var(--bento-r);
  background:radial-gradient(circle at 10% 8%,var(--mosa-menthe-vif) 0 92px,transparent 93px),radial-gradient(circle at 96% 30%,var(--mosa-ciel-vif) 0 70px,transparent 71px),radial-gradient(circle at 4% 70%,var(--mosa-rose-vif) 0 54px,transparent 55px),radial-gradient(circle at 92% 96%,var(--mosa-tilleul-vif) 0 104px,transparent 105px),var(--mosa-sable)}
html:root[data-style] .v2 .tel{position:relative;top:auto;transform:none;display:grid;gap:10px;inline-size:100%;max-inline-size:360px;box-sizing:border-box;margin:0;padding:48px 14px 16px;background:var(--surface);border-radius:44px}
html:root[data-style] .v2 .tel::before{content:"";position:absolute;top:16px;left:50%;margin-left:-42px;inline-size:84px;block-size:18px;border-radius:999px;background:var(--mosa-rail)}
html:root[data-style] .v2 .tel > *{margin:0}
html:root[data-style] .v2 .tel-tete{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 6px 2px;font-size:.88rem}
html:root[data-style] .v2 .tel-tete .tuile-exemple{margin:0;background:var(--surface-2)}
html:root[data-style] .v2 .tel .epingle{padding:12px 14px;border-radius:20px;font-size:.88rem;line-height:1.4}
html:root[data-style] .v2 .tel .epingle b{margin-bottom:2px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
html:root[data-style] .v2 .tel .bulle{margin:0 34px 0 0;padding:11px 14px;border-radius:20px 20px 20px 6px;font-size:.9rem;line-height:1.4}
html:root[data-style] .v2 .tel .bulle.droite{margin:0 0 0 34px;border-radius:20px 20px 6px 20px}
html:root[data-style] .v2 .tel .bulle .pastille{margin:0 6px 4px 0}
html:root[data-style] .v2 .tel .barre{height:8px;margin:8px 0 2px;border-radius:999px;background:var(--surface)}
html:root[data-style] .v2 .tel .ticket{border-radius:20px;background:var(--f-fond);overflow:hidden}
html:root[data-style] .v2 .tel .ticket summary{padding:12px 14px 10px;color:var(--text);font-size:.84rem;font-weight:700}
html:root[data-style] .v2 .tel .ticket .montant{display:inline-block;margin-top:4px;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:2rem;line-height:1;letter-spacing:0;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .v2 .tel .ticket-corps{padding:0 14px 10px;font-size:.86rem}
html:root[data-style] .v2 .tel .ticket-bas{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 12px}
html:root[data-style] .v2 .tel .ticket-bas .pastille{margin:0}
html:root[data-style] .v2 .tel .reponse{min-inline-size:0;padding:12px 12px 14px;border-radius:20px}
html:root[data-style] .v2 .tel .reponse legend{float:left;inline-size:100%;padding:0 2px 8px;font-size:.84rem;font-weight:800}
html:root[data-style] .v2 .tel .choix{clear:both;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
html:root[data-style] .v2 .tel .choix label{padding:10px 2px;font-size:.84rem}

/* Offres : tuiles orchidée, prix monumentaux remplis au service (data-tem), Pass équipe au centre sur le vif. */
html:root[data-style] .v2 .tarifs3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bento-ecart);max-width:none;margin:0;padding:0}
@media (min-width:900px){html:root[data-style] .v2 .tarifs3{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)}}
html:root[data-style] .v2 .tarifs3 > .prix{display:flex;flex-direction:column;gap:6px;margin:0;padding:clamp(22px,2.4vw,32px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;--muted:var(--text)}
html:root[data-style] .v2 .tarifs3 > .prix.reco[data-ton="vif"]{background:var(--f-vif)}
html:root[data-style] .v2 .prix > *{margin:0}
html:root[data-style] .v2 .prix-nom{font-size:.84rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .v2 .prix-montant{margin-top:var(--esp-3);font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:clamp(4.4rem,2.8rem + 4.2vw,7.6rem);line-height:.85;letter-spacing:-.01em;white-space:nowrap;color:var(--f-encre);font-variant-numeric:tabular-nums lining-nums}
html:root[data-style] .v2 .reco :is(.prix-nom,.prix-montant){color:var(--text)}
html:root[data-style] .v2 .prix-unite{font-weight:700}
html:root[data-style] .v2 :is(.prix-liste,.prix-clubs){display:grid;gap:6px;margin:0;padding:0;list-style:none}
html:root[data-style] .v2 .prix-liste{margin-top:auto;padding-top:var(--esp-4)}
html:root[data-style] .v2 .prix-liste li{position:relative;padding:9px 14px 9px 42px;border-radius:14px;background:var(--surface);font-weight:700}
html:root[data-style] .v2 .prix-liste li::before{content:"";position:absolute;left:18px;top:50%;margin-top:-10px;inline-size:7px;block-size:13px;border-right:3px solid var(--f-encre);border-bottom:3px solid var(--f-encre);rotate:45deg}
html:root[data-style] .v2 .prix-clubs{margin-top:var(--esp-3)}
html:root[data-style] .v2 .prix-clubs li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 16px;border-radius:16px;background:var(--surface);font-weight:700}
html:root[data-style] .v2 .prix-clubs strong{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:clamp(1.9rem,1.4rem + 1.2vw,2.6rem);line-height:1;white-space:nowrap;color:var(--f-encre)}
html:root[data-style] .v2 .prix-clubs + .prix-unite{margin-top:auto;padding-top:var(--esp-3)}

/* BASCULE-B2B : bandeau structures en tête de vitrine (quatre promesses, chacune sur sa tuile) et notes des offres. */
html:root[data-style] .v2 .structures-points{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bento-ecart);max-width:none;margin:0;padding:0;list-style:none}
@media (min-width:900px){html:root[data-style] .v2 .structures-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
html:root[data-style] .v2 .structures-points > li{position:relative;margin:0;padding:calc(var(--bento-num) * .5 + 18px) clamp(20px,2.4vw,30px) clamp(22px,2.4vw,32px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;font-size:1.02rem;line-height:1.5;--muted:var(--text)}
html:root[data-style] .v2 .structures-points > li::before{content:"";position:absolute;top:calc(var(--bento-num) * .34);left:clamp(20px,2.4vw,30px);inline-size:38px;block-size:7px;border-radius:999px;background:var(--f-encre)}
html:root[data-style] .v2 .structures-action{margin:calc(var(--bento-ecart) * 1.4) 0 0}
html:root[data-style] .v2 .structures-action .b1{background:var(--f-encre);border-color:var(--f-encre);color:var(--fn-sur-encre);box-shadow:none}
html:root[data-style] .v2 .prix-note{margin-top:var(--esp-3);font-size:.92rem;line-height:1.45}
html:root[data-style] .v2 .sec-note{margin-top:clamp(20px,2.4vw,30px);font-size:1.04rem;line-height:1.5;color:var(--text)}

/* Questions : une tuile par question, dans la teinte de sa réponse, point d interrogation en contour. */
html:root[data-style] .v2 .faq-mini{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bento-ecart);max-width:none;margin:0;padding:0}
@media (min-width:900px){html:root[data-style] .v2 .faq-mini{grid-template-columns:repeat(3,minmax(0,1fr))}}
html:root[data-style] .v2 .faq-mini > .qr{position:relative;display:flex;flex-direction:column;gap:var(--esp-3);margin:0;padding:calc(var(--bento-num) * 1.25 + 24px) clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r)}
html:root[data-style] .v2 .faq-mini > .qr::before{content:"?" / "";position:absolute;top:14px;left:clamp(20px,2.2vw,30px);font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:calc(var(--bento-num) * 1.25);line-height:1;color:transparent;-webkit-text-stroke:var(--bento-num-trait) var(--f-encre)}
html:root[data-style] .v2 .faq-mini .q{margin:0;padding:0;border:0;border-radius:0;background:none;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.35rem,1rem + .9vw,1.8rem);line-height:1.02;text-wrap:balance}
html:root[data-style] .v2 .faq-mini .r{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:1rem;line-height:1.55}

/* Comment ça marche : quatre étapes en séquence, numéro monumental dans l encre, rail du vif vers l étape suivante. */
html:root[data-style] .parcours{counter-reset:parcours}
html:root[data-style] .parcours > ol{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bento-ecart);margin:0;padding:0;list-style:none}
@media (min-width:640px){html:root[data-style] .parcours > ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){html:root[data-style] .parcours > ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
html:root[data-style] .parcours li{counter-increment:parcours;position:relative;display:flex;flex-direction:column;gap:8px;margin:0;padding:calc(var(--parc-num) + 22px) var(--parc-pad) var(--parc-pad);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;--stade-pied:var(--text);--muted:var(--text)}
html:root[data-style] .parcours li::before{content:counter(parcours) / "";position:absolute;top:14px;left:var(--parc-pad);font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:var(--parc-num);line-height:1;color:var(--f-encre)}
html:root[data-style] .parcours li::after{content:"";position:absolute;top:calc(14px + var(--parc-num) * .5);left:calc(var(--parc-pad) + var(--parc-num) * .6);right:var(--parc-pad);block-size:6px;border-radius:999px;background:var(--f-vif)}
@media (min-width:1000px){html:root[data-style] .parcours li:not(:last-child)::after{right:calc(var(--bento-ecart) * -1);border-radius:999px 0 0 999px}}
html:root[data-style] .parcours li > *{margin:0}
html:root[data-style] .parcours .stade-heure{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:root[data-style] .parcours li strong{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.35rem,1rem + .8vw,1.7rem);line-height:1.02;letter-spacing:0}
html:root[data-style] .parcours li p{color:var(--text);font-size:.95rem;line-height:1.5}

/* Nous contacter : tuile prairie, titre monumental, formulaire sur une carte, champs soulignés d encre, bouton dans l encre. */
html:root[data-style] .bloc-contact{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-4) clamp(28px,4vw,64px);inline-size:min(1100px,calc(100% - 32px));max-width:none;box-sizing:border-box;margin:var(--sec-ecart) auto 0;padding:clamp(24px,4vw,56px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;--pied:var(--text)}
@media (min-width:900px){
  html:root[data-style] .bloc-contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr 1fr}
  html:root[data-style] .bloc-contact > h2{grid-column:1;grid-row:1;align-self:end}
  html:root[data-style] .bloc-contact > p{grid-column:1;grid-row:2}
  html:root[data-style] .bloc-contact > form{grid-column:2;grid-row:1 / span 2}
}
html:root[data-style] .bloc-contact > h2{margin:0;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(2.6rem,1.4rem + 4vw,5.4rem);line-height:.95;letter-spacing:var(--typo-espacement)}
html:root[data-style] .bloc-contact > p{align-self:start;margin:0;color:var(--text);font-size:1.05rem;line-height:1.55}
html:root[data-style] .bloc-contact form{margin:0;padding:clamp(20px,2.4vw,30px);background:var(--surface);border-radius:calc(var(--bento-r) - 6px)}
html:root[data-style] .bloc-contact label{margin:0 0 16px;font-size:.9rem;font-weight:750;color:var(--text)}
html:root[data-style] .bloc-contact :is(input,textarea){padding:12px 14px;border:0;border-bottom:3px solid var(--f-encre);border-radius:14px 14px 6px 6px;background:var(--bg);color:var(--text);font-size:1rem}
html:root[data-style] .bloc-contact :is(input,textarea):focus-visible{outline:3px solid var(--f-encre);outline-offset:2px}
html:root[data-style] .bloc-contact button{display:inline-flex;align-items:center;gap:.75em;padding:14px 26px;border:0;border-radius:999px;background:var(--f-encre);color:var(--fn-sur-encre);font-weight:800;font-size:1rem;cursor:pointer}
html:root[data-style] .bloc-contact button::after{content:"";inline-size:.48em;block-size:.48em;border-top:.16em solid currentColor;border-right:.16em solid currentColor;rotate:45deg}
html:root[data-style] .bloc-contact button:hover{background:color-mix(in srgb,var(--f-encre) 82%,var(--text))}
html:root[data-style] .bloc-contact [role="status"]{color:var(--text)}
@media (max-width:640px){
  html:root[data-style] :is(.v2 .sec,.parcours){padding-inline:16px}
  html:root[data-style] .v2 .journee{padding-left:30px}
  html:root[data-style] .v2 .journee > .etape::before{left:calc(-15px - var(--etape-rail) * .5)}
  html:root[data-style] .v2 .journee > .etape::after{left:calc(-15px - var(--etape-point) * .5)}
}


@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .v2 .tuile{transition:transform .25s var(--mouvement),background-color .25s var(--mouvement)}
  html:root[data-style] .v2 .tuile:hover{transform:translateY(-3px)}
  html:root[data-style] .v2 .tuile-fleche::before{transition:transform .25s var(--mouvement)}
  html:root[data-style] .v2 .tuile:hover .tuile-fleche::before{transform:scale(1.08)}
  html:root[data-style] .bloc-contact button{transition:background-color .2s var(--mouvement)}
  html:root[data-style] .bloc-contact button::after{transition:translate .2s var(--mouvement)}
  html:root[data-style] .bloc-contact button:hover::after{translate:.2em 0}
  /* Sous la mosaïque : la bande du titre se trace et le rail de la frise se remplit en défilant. */
  @supports (animation-timeline:view()){
    html:root[data-style] .sec-bande{background-color:transparent;background-image:linear-gradient(var(--f-vif),var(--f-vif));background-repeat:no-repeat;animation:sec-bande linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
    html:root[data-style] .v2 .journee > .etape::before{transform-origin:50% 0;animation:sec-rail linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
    @keyframes sec-bande{from{background-size:0 100%}to{background-size:100% 100%}}
    @keyframes sec-rail{from{scale:1 .05}}
  }
}
@media (max-width:640px){
  html:root[data-style] .v2 .tuile{min-height:0}
  html:root[data-style] .v2 .bento{padding-inline:16px}
}
@media (forced-colors:active){
  html:root[data-style] .v2 .tuile{border:2px solid CanvasText}
  html:root[data-style] .v2 :is(.voiture > .pris,.frise li.fait > span,.pastilles-apercu > .p-ok){background:CanvasText}
  html:root[data-style] .v2 .v2-tete h2.hero-titre .creux{background:none}
}
/* Audit final (focus) : anneau du bouton d en-tête lisible sur le voile clair, flèches des tuiles et résumés
   repliés dont l anneau était rogné par overflow:hidden de leur conteneur : l anneau passe sur la tuile entière
   ou à l intérieur du résumé. */
html:root[data-style] .entete-cta:focus-visible{outline:3px solid var(--f-encre);outline-offset:3px}
html:root[data-style] .v2 .tuile:has(> .tuile-fleche:focus-visible){outline:3px solid var(--f-encre);outline-offset:3px}
html:root[data-style] .v2 .tuile-fleche:focus-visible{outline:3px solid var(--surface);outline-offset:-6px}
html:root[data-style] :is(.v2 .tel .ticket,.stade-ticket) > summary:focus-visible{outline:none}
html:root[data-style] :is(.v2 .tel .ticket,.stade-ticket):has(> summary:focus-visible){outline:3px solid var(--f-encre);outline-offset:3px}
/* TEM-MOSAIQUE-P2 fin */

/* TEM-PERMVIT début */
/* PERMVIT : section monumentale « Permanences du club » (SPEC-PERMVIT, décision V1 option A). La teinte prairie
   vient du scope data-fonction de la section (benevoles) ; l en-tête n en porte pas : la liste verrouillée des
   quatre titres monumentaux reste inchangée. Ligne sur le vif, carte et frise dans l encre de la teinte, bouton
   principal en encre comme le bandeau structures. Repli sobre : tem.css, ancre TEM-MOSAIQUE-REPLI-VITRINE. */
html:root[data-style] .v2 .postes-ligne{display:inline-block;margin:var(--esp-4) 0 0;padding:6px 16px;border-radius:999px;background:var(--f-vif);color:var(--text);font-size:.88rem;font-weight:750}
html:root[data-style] .v2 .postes-apercu{margin:calc(var(--bento-ecart) * 1.2) 0 0;padding:clamp(20px,2.4vw,30px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--bento-r);box-shadow:none;--muted:var(--text)}
html:root[data-style] .v2 .postes-apercu > *{margin:0}
html:root[data-style] .v2 .postes-apercu-tete{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .v2 .postes-apercu .frise{margin:var(--esp-3) 0 0;padding-right:0}
html:root[data-style] .v2 .postes-action{display:flex;flex-wrap:wrap;gap:12px;margin:calc(var(--bento-ecart) * 1.4) 0 0}
html:root[data-style] .v2 .postes-action .b1{background:var(--f-encre);border-color:var(--f-encre);color:var(--fn-sur-encre);box-shadow:none}
/* TEM-PERMVIT fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P4 début */
/* P4 : mots-clés surlignés de la teinte de leur fonction (classes .mot du socle).
   Balisage dans les écrans : <strong class="mot">, .mot-trait ou .mot-couleur, plus .mot-<fonction>
   quand le mot parle d une autre fonction (« conducteur » en ciel sur Frais). Deux ou trois mots par
   écran, aucun dans un titre, un bouton, un champ ni un message d erreur ; le texte ne change pas.
   Le socle (tem.css, TEM-MOSAIQUE) porte les couleurs ; ici : graisse, tracé au défilement, renforcé. */
html:root[data-style] :is(.typo-chapo,.meta,.kpi .l,.equipe-meta,.trajet-contact) :is(.mot,.mot-trait,.mot-couleur){font-weight:750}
html:root[data-style] .typo-chapo .mot{padding:.02em .22em .06em}
html:root[data-style] .kpi .l .mot-couleur{color:var(--f-encre)}
/* Un mot posé plus bas que l en-tête se trace quand il entre dans l écran (une fois, en défilant). */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html:root[data-style] .card .mot{animation:mot-trace linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }
}
/* Contraste renforcé : le marqueur reste, un soulignement de l encre de la teinte double la couleur. */
html:root[data-style][data-contrast="high"] .mot{text-decoration-line:underline;text-decoration-thickness:.12em;text-decoration-color:var(--f-encre);text-underline-offset:.18em}
html:root[data-style][data-contrast="high"] .mot-trait{text-decoration-thickness:.2em}
/* TEM-MOSAIQUE-P4 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P5 début */
/* P5 : chiffres monumentaux (montants, présents, places, score).
   Balisage posé par les écrans (web/app/src convoc, frais, trajet, score) : .tem-chiffres, .chiffre,
   .chiffre-centimes, .chiffre-unite, .chiffre-sur, .chiffre-legende, .chiffre-detail, .chiffre-lien,
   .score-geant, .voiture-tuile, pastilles et sièges décoratifs (aria-hidden). Le chiffre est celui du
   serveur ; le texte lu par un lecteur d écran est la phrase d origine, dans son ordre. Le chiffre est
   posé sur le fond de la teinte (ou sur la carte dans la première carte), dans l encre, jamais en encre
   sur le vif. Contraste renforcé : contours pleins, tuile cernée de 2 px dans l encre. */
html:root[data-style]{--chiffre-taille:clamp(5rem,46cqi,9rem);--chiffre-trait:max(2.5px,.05em);--chiffre-r:var(--stade-r,24px);--chiffre-pad:clamp(16px,4.5cqi,28px);--pastille-taille:15px;--pastille-trait:2.5px;--siege-taille:30px;--siege-trait:3px}
html:root[data-style][data-contrast="high"]{--pastille-trait:3px;--siege-trait:3.5px}

/* Tuiles : fond de la teinte, carte blanche quand la tuile est dans la première carte (déjà teintée). */
html:root[data-style] :is(.tem-chiffres,.score-geant,.voiture-tuile){position:relative;container-type:inline-size;background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--chiffre-r);padding:var(--chiffre-pad);margin:var(--esp-3,12px) 0;box-shadow:none}
html:root[data-style] body[data-fonction] .typo-tete + .card :is(.tem-chiffres,.score-geant,.voiture-tuile){background:var(--surface)}
html:root[data-style] .tem-chiffres{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px .3em;max-width:var(--grille-texte,40rem)}
html:root[data-style] :is(.tem-chiffres,.voiture-tuile) > .chiffre-ligne{order:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .12em;margin:0}
html:root[data-style] .tem-chiffres > .chiffre-legende{order:2;flex-basis:100%;font-weight:700;font-size:1.05rem;color:var(--text)}
html:root[data-style] .tem-chiffres > .chiffre-detail{order:3;flex-basis:100%;font-size:.92rem;color:var(--text)}
html:root[data-style] .tem-chiffres > .tem-pastilles{order:4;flex-basis:100%}
/* Liaison de la phrase (« , soit ») : lue, pas affichée ; la phrase reste entière pour le lecteur d écran. */
html:root[data-style] .tem-chiffres > .chiffre-lien{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Le chiffre : police condensée du titre, encre de la teinte, centimes et unité plus petits. */
html:root[data-style] .chiffre{display:inline-block;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:var(--chiffre-taille);line-height:.84;letter-spacing:var(--typo-espacement);font-variant-numeric:tabular-nums lining-nums;color:var(--f-encre)}
html:root[data-style] .chiffre-centimes{font-size:.62em;color:transparent;-webkit-text-stroke:var(--chiffre-trait) var(--f-encre);paint-order:stroke fill}
html:root[data-style] .chiffre.vide{color:transparent;-webkit-text-stroke:var(--chiffre-trait) var(--f-encre);paint-order:stroke fill}
html:root[data-style] :is(.chiffre-unite,.chiffre-sur,.chiffre-sep){font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);line-height:1}
html:root[data-style] :is(.chiffre-unite,.chiffre-sur){text-transform:uppercase}
html:root[data-style] .chiffre-unite{font-size:calc(var(--chiffre-taille) * .34);color:var(--f-encre)}
html:root[data-style] .chiffre-sur{font-size:clamp(1.35rem,8cqi,2.3rem);color:var(--text)}

/* Présents : pastilles pleines (présent), creuses (en attente), barrées (absent, couleur d état). */
html:root[data-style] :is(.tem-pastilles,.tem-sieges){display:flex;flex-wrap:wrap;gap:5px;margin:var(--esp-2,8px) 0 0;padding:0}
html:root[data-style] .tem-pastilles > span{box-sizing:border-box;inline-size:var(--pastille-taille);aspect-ratio:1;border-radius:50%;background:var(--f-encre)}
html:root[data-style] .tem-pastilles > .att{background:transparent;border:var(--pastille-trait) solid var(--f-encre)}
html:root[data-style] .tem-pastilles > .abs{background:linear-gradient(135deg,transparent 42%,var(--ko) 42% 58%,transparent 58%);border:var(--pastille-trait) solid var(--ko)}

/* Déplacements : une tuile par voiture, places libres en grand, sièges ronds (pris pleins, libres creux). */
html:root[data-style] .voiture-tuile{display:block}
html:root[data-style] .voiture-tuile .voiture-nom{margin:0 0 var(--esp-2,8px);font-weight:700;color:var(--text)}
html:root[data-style] .tem-sieges{gap:6px;margin-top:var(--esp-3,12px)}
html:root[data-style] .tem-sieges > span{box-sizing:border-box;inline-size:var(--siege-taille);aspect-ratio:1;border-radius:50%}
html:root[data-style] .tem-sieges > .pris{background:var(--f-encre)}
html:root[data-style] .tem-sieges > .libre{background:var(--surface);border:var(--siege-trait) solid var(--f-encre)}

/* Score : les deux chiffres face à face sur une tuile de la teinte, « à » en petit entre les deux. */
html:root[data-style] .score-geant{display:flex;align-items:center;justify-content:center;gap:0 .35em;--chiffre-taille:clamp(4.2rem,36cqi,9rem)}
html:root[data-style] .score-geant .chiffre-sep{font-size:calc(var(--chiffre-taille) * .3);color:var(--text)}

/* Contraste renforcé : le contour ne porte jamais seul un chiffre. */
html:root[data-style][data-contrast="high"] :is(.chiffre-centimes,.chiffre.vide){color:var(--f-encre);-webkit-text-stroke:0}

/* Apparition : échelle et fondu (300 ms), jamais de compteur qui tourne. */
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] :is(.tem-chiffres,.score-geant,.voiture-tuile) .chiffre{animation:mosa-chiffre-pose .3s var(--mouvement,ease-out) both}
}
@keyframes mosa-chiffre-pose{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* TEM-MOSAIQUE-P5 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P6 début */
/* P6 : le fil du match en frise colorée. */
/* Agent MOUV2 (maquette B\proto-P6.css, planche-P6-frise.jpg). Chaque puce du fil (nav.stade-nav >
   ol.stade-fil) porte la teinte de l écran qu elle ouvre, lue sur le data-fonction de son lien (rapport
   couleurs 5.2, roulements en sable). Étapes passées : pleines dans leur vif, coche dessinée dans leur
   encre (choix du plan). Étape en cours : plus haute, en capitales, sur son vif, point d encre.
   Étapes à venir : pastille craie, petit rond de leur couleur. Entre deux puces, un filet en dégradé
   de la teinte précédente à la suivante. Le nom reste écrit en toutes lettres : la couleur ne porte
   jamais seule l étape. 390 px : défilement horizontal accroché, étape en cours au centre dès
   l ouverture, sans script (scroll-initial-target). */
html:root{--frise-filet:14px;--frise-filet-ep:3px;--frise-point:8px;--frise-rond:9px;--frise-avenir:.5}
/* Teinte de la puce (--frise-c) et de la puce précédente (--frise-prec), lues par le filet. */
html:root[data-style] .stade-fil li{--frise-c:var(--f-vif);--frise-prec:var(--frise-c)}
html:root[data-style] .stade-fil li:has(> a:is([data-fonction="accueil"],[data-fonction="roulements"])){--frise-c:var(--mosa-sable-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="equipe"]){--frise-c:var(--mosa-lagon-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="convoc"]){--frise-c:var(--mosa-menthe-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="trajet"]){--frise-c:var(--mosa-ciel-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="frais"]){--frise-c:var(--mosa-tilleul-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="fiche"]){--frise-c:var(--mosa-lavande-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="score"]){--frise-c:var(--mosa-rose-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="photo"]){--frise-c:var(--mosa-peche-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="offres"]){--frise-c:var(--mosa-orchidee-vif)}
html:root[data-style] .stade-fil li:has(> a:is([data-fonction="accueil"],[data-fonction="roulements"])) + li{--frise-prec:var(--mosa-sable-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="equipe"]) + li{--frise-prec:var(--mosa-lagon-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="convoc"]) + li{--frise-prec:var(--mosa-menthe-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="trajet"]) + li{--frise-prec:var(--mosa-ciel-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="frais"]) + li{--frise-prec:var(--mosa-tilleul-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="fiche"]) + li{--frise-prec:var(--mosa-lavande-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="score"]) + li{--frise-prec:var(--mosa-rose-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="photo"]) + li{--frise-prec:var(--mosa-peche-vif)}
html:root[data-style] .stade-fil li:has(> a[data-fonction="offres"]) + li{--frise-prec:var(--mosa-orchidee-vif)}

/* Rail : une piste, puces serrées, le filet occupe l intervalle. */
html:root[data-style] .stade-fil{gap:0;padding:6px 8px;align-items:center;background:var(--mosa-rail)}
html:root[data-style] .stade-fil li{gap:0}
html:root[data-style] .stade-fil li+li::before{content:"";flex:none;inline-size:var(--frise-filet);block-size:var(--frise-filet-ep);margin:0 3px;border-radius:2px;background:linear-gradient(90deg,var(--frise-prec),var(--frise-c))}
html:root[data-style] .stade-fil li[aria-current="step"] ~ li+li::before{opacity:var(--frise-avenir)}

/* À venir (et toutes les puces de l accueil, sans étape en cours) : craie, petit rond de la couleur. */
html:root[data-style] .stade-fil li > a[data-fonction]{display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre);padding:4px 12px;text-decoration:none}
html:root[data-style] .stade-fil li > a[data-fonction]::before{content:"";flex:none;inline-size:var(--frise-rond);block-size:var(--frise-rond);border-radius:50%;background:var(--f-encre)}
html:root[data-style] .stade-fil li:not([aria-current]) > a[data-fonction]:hover{background:var(--f-fond);color:var(--text);text-decoration:underline;text-underline-offset:.2em}
/* Passées : pleines dans leur vif, le rond devient une coche dessinée dans leur encre. */
html:root[data-style] .stade-fil li:has(~ li[aria-current="step"]) > a[data-fonction],html:root[data-style] .stade-fil li:has(~ li[aria-current="step"]) > a[data-fonction]:hover{background:var(--f-vif);color:var(--text);border-color:var(--f-encre)}
html:root[data-style] .stade-fil li:has(~ li[aria-current="step"]) > a[data-fonction]::before{inline-size:.32em;block-size:.62em;border-radius:0;background:none;border:solid var(--f-encre);border-width:0 2px 2px 0;rotate:45deg;margin:-.18em .1em 0 .05em}
/* En cours : plus haute, capitales condensées (socle), sur son vif, point d encre. */
html:root[data-style] .stade-fil li[aria-current="step"] > a[data-fonction],html:root[data-style] .stade-fil li[aria-current="step"] > a[data-fonction]:hover{background:var(--f-vif);color:var(--text);border:var(--f-bord) solid var(--f-encre);padding:9px 16px;font-size:1.12em;border-radius:999px}
html:root[data-style] .stade-fil li[aria-current="step"] > a[data-fonction]::before{inline-size:var(--frise-point);block-size:var(--frise-point);background:var(--f-encre)}
/* Focus clavier : anneau dans l encre de l écran visé, distinct du survol (fond seul). */
html:root[data-style] .stade-fil li > a[data-fonction]:focus-visible{outline:3px solid var(--f-encre);outline-offset:2px}

/* 390 px : la frise défile avec accrochage, l étape en cours amenée au centre à l ouverture. */
@media (max-width:600px){
  html:root[data-style] .stade-fil{scroll-snap-type:x proximity;scroll-padding-inline:24px;overscroll-behavior-x:contain;border-radius:999px}
  html:root[data-style] .stade-fil li{scroll-snap-align:center}
  html:root[data-style] .stade-fil li[aria-current="step"]{scroll-initial-target:nearest}
}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .stade-fil li > a[data-fonction]{transition:background-color .3s var(--mouvement)}
}
@media (forced-colors:active){
  html:root[data-style] .stade-fil li > a[data-fonction]::before,html:root[data-style] .stade-fil li+li::before{background:CanvasText}
  html:root[data-style] .stade-fil li:has(~ li[aria-current="step"]) > a[data-fonction]::before{background:none;border-color:CanvasText}
}
/* TEM-MOSAIQUE-P6 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P7 début */
/* P7 : « Étape suivante » qui annonce la couleur suivante.
   La section .stade-suivante hérite de la teinte de l écran (body[data-fonction]) et la garde dans
   --p7-ici ; le lien a.stade-carte porte data-fonction de l écran visé (vague 1), donc --f-* y valent la
   teinte suivante. Fond en dégradé de la teinte de l écran vers la suivante, titre sur le vif suivant
   (bandeau du socle), bouton rond et anneau de focus dans l encre suivante. Photos et Offres mènent à
   l accueil : pêche ou orchidée vers sable. Survol ou focus : la teinte suivante gagne la carte, la
   flèche avance de 4 px, la carte s enfonce à l appui (mouvement seulement si le système l accepte).
   Contraste renforcé : fond plein de la teinte suivante, cadre de 2 px dans son encre (socle). Avec P1,
   cette carte devient l en-tête de l écran suivant. */
html:root{--p7-angle:100deg;--p7-depart:4%;--p7-arrivee:50%;--p7-taille:160%;--p7-duree:.45s;--p7-appui:.99}
html:root[data-style] body .stade-suivante{--p7-ici:var(--f-fond)}
html:root[data-style] body .stade-suivante .stade-carte[data-fonction]{
  background:linear-gradient(var(--p7-angle),var(--p7-ici) 0,var(--p7-ici) var(--p7-depart),var(--f-fond) var(--p7-arrivee)) 0 0/var(--p7-taille) 100% no-repeat,var(--f-fond);
  --suivante-fleche-fond:var(--f-encre);--suivante-fleche:var(--fn-sur-encre);--focus-ring:var(--f-encre)}
html:root[data-style] body .stade-suivante .stade-carte[data-fonction]:is(:hover,:focus-visible){background-position:100% 0}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] body .stade-suivante .stade-carte[data-fonction]{transition:background-position var(--p7-duree) var(--mouvement),transform .2s var(--mouvement)}
  html:root[data-style] body .stade-suivante .stade-carte[data-fonction]:is(:hover,:focus-visible)::after{transform:rotate(45deg) translate(0,0)}
  html:root[data-style] body .stade-suivante .stade-carte[data-fonction]:active{transform:scale(var(--p7-appui))}
}
html:root[data-contrast="high"] body .stade-suivante .stade-carte[data-fonction]{background:var(--f-fond)}
/* TEM-MOSAIQUE-P7 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P8 début */
/* Vignettes des 4 designs dans la carte « Design du site » : bandes de couleur de chaque feuille (représentations fixes). */
html:root{
  --vig-t1-a:#FBF7F1;--vig-t1-b:#1B2540;--vig-t1-c:#B64918;--vig-t1-d:#FFFFFF;
  --vig-t3-a:#F3EEE2;--vig-t3-b:#1D1A12;--vig-t3-c:#E8D6A4;--vig-t3-d:#0D5A37;
  --vig-t4-a:#CDEFE0;--vig-t4-b:#CFE6FB;--vig-t4-c:#E4F0C2;--vig-t4-d:#FBD9E3;
  --vig-va-a:#F6F1E3;--vig-va-b:#1B1710;--vig-va-c:#E7D7AE;--vig-va-d:#1E6B3A;
  --adm-r:var(--stade-r-grand);--adm-r-petit:18px;
  --adm-chiffre:clamp(3.2rem,2.2rem + 3vw,5.6rem);--adm-titre:clamp(2.6rem,1.6rem + 3.2vw,4.8rem);
}

/* Connexion : une tuile ardoise centrée. */
html:root[data-style] .admin-mosaique .admin-connexion{background:var(--f-fond);border:var(--f-bord) solid var(--f-encre);border-radius:var(--adm-r)}

/* En-tête monumental : tuile ardoise, sur-titre en encre, « de bord » sur le vif. */
html:root[data-style] .admin-mosaique .admin-tete{background:var(--f-fond);border-radius:var(--adm-r);padding:clamp(20px,3vw,34px) clamp(20px,3vw,40px);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .admin-mosaique .admin-sur{color:var(--f-encre)}
html:root[data-style] .admin-mosaique .admin-titre{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:var(--adm-titre);line-height:.95;letter-spacing:var(--typo-espacement);color:var(--text)}
html:root[data-style] .admin-mosaique .admin-titre .typo-bandeau{display:inline-block;margin:0;padding:.04em .18em 0;background:var(--f-vif);color:var(--text)}

/* Indicateurs : grands chiffres condensés dans l encre de leur teinte ; la vente reste sur la carte (neutre). */
html:root[data-style] .admin-kpi:not([data-fonction]){--f-fond:var(--surface);--f-vif:var(--mosa-sable-vif);--f-encre:var(--text)}
html:root[data-style] .admin-mosaique .admin-kpi{min-height:168px;padding:20px 22px;border-radius:var(--adm-r);background:var(--f-fond);border:var(--f-bord) solid var(--f-encre);box-shadow:none}
html:root[data-style] .admin-mosaique .admin-kpi-v{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:var(--adm-chiffre);line-height:.9;color:var(--f-encre)}
html:root[data-style] .admin-mosaique .admin-kpi-v.admin-kpi-mot{font-size:clamp(2.4rem,1.6rem + 1.9vw,3.6rem)}
html:root[data-style] .admin-mosaique .admin-kpi-s{color:var(--text)}
html:root[data-style] .admin-mosaique a.admin-kpi:hover .admin-kpi-l{text-decoration:none}

/* Tuiles de domaine sur le fond de leur teinte, sans cadre ni ombre ; titres numérotés en contour. */
html:root[data-style] .admin-mosaique .admin-tuile{background:var(--f-fond);border:var(--f-bord) solid var(--f-encre);border-radius:var(--adm-r);box-shadow:none;padding:24px 26px;--typo-creux-fond:var(--f-fond)}
html:root[data-style] .admin-mosaique .admin-tuile > h2:first-child{font-size:clamp(1.5rem,1.1rem + 1.1vw,2.2rem)}
html:root[data-style] .admin-mosaique .admin-tuile > h2:first-child::before{color:var(--f-fond);-webkit-text-stroke:max(1.5px,.05em) var(--f-encre);paint-order:stroke fill}
html:root[data-style] .admin-mosaique .admin-tuile .meta{color:var(--text);margin:0 0 14px}

/* Tableaux : sur la carte, en-tête sur le vif du domaine, lignes paires teintées, aucun filet. */
html:root[data-style] .admin-mosaique .admin-table{background:var(--surface);border-radius:var(--adm-r-petit)}
html:root[data-style] .admin-mosaique .admin-table th{background:var(--f-vif);color:var(--text);font-weight:750;border:0;padding:10px 12px}
html:root[data-style] .admin-mosaique .admin-table td{border:0;padding:9px 12px;color:var(--text)}
html:root[data-style] .admin-mosaique .admin-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--f-fond) 55%,var(--surface))}

/* Commandes en fiches blanches, montant en grand dans l encre orchidée, statut en pastille. */
html:root[data-style] .admin-mosaique .adm-commandes .admin-table{background:transparent}
html:root[data-style] .admin-mosaique .adm-commandes tbody tr,html:root[data-style] .admin-mosaique .adm-commandes tbody tr:nth-child(even){background:var(--surface);border:var(--f-bord) solid var(--f-encre);border-radius:var(--adm-r-petit)}
html:root[data-style] .admin-mosaique .adm-commandes td{padding:0}
html:root[data-style] .admin-mosaique .adm-commandes td[data-label="Montant"]{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:1.9rem;color:var(--f-encre)}
html:root[data-style] .admin-statut[data-statut="a-faire"]{background:var(--f-vif)}
html:root[data-style] .admin-statut[data-statut="a-faire"]::before{background:var(--f-encre)}

/* Design du site : options blanches sans cadre, option cochée sur le vif sable, vignette de chaque design. */
html:root[data-style] .admin-mosaique .admin-design,html:root[data-style] .admin-mosaique .admin-design:has(input:checked){display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;border:var(--f-bord) solid var(--f-encre);border-radius:var(--adm-r-petit);background:var(--surface);padding:12px 14px 14px}
html:root[data-style] .admin-mosaique .admin-design:has(input:checked){background:var(--f-vif)}
html:root[data-style] .admin-mosaique .admin-design input{accent-color:var(--text)}
html:root[data-style] .admin-mosaique .admin-design small{color:var(--text)}
html:root[data-style] .admin-vignette{grid-column:1 / -1;display:flex;height:52px;border-radius:12px;overflow:hidden}
.admin-vignette i{flex:1}
.admin-vignette i:first-child{flex:3}
.admin-design[data-design="classique"]{--v1:var(--vig-t1-a);--v2:var(--vig-t1-b);--v3:var(--vig-t1-c);--v4:var(--vig-t1-d)}
.admin-design[data-design="affiche"]{--v1:var(--vig-t3-a);--v2:var(--vig-t3-b);--v3:var(--vig-t3-c);--v4:var(--vig-t3-d)}
.admin-design[data-design="mosaique"]{--v1:var(--vig-t4-a);--v2:var(--vig-t4-b);--v3:var(--vig-t4-c);--v4:var(--vig-t4-d)}
.admin-design[data-design="tribune"]{--v1:var(--vig-va-a);--v2:var(--vig-va-b);--v3:var(--vig-va-c);--v4:var(--vig-va-d)}
.admin-vignette i:nth-child(1){background:var(--v1)}
.admin-vignette i:nth-child(2){background:var(--v2)}
.admin-vignette i:nth-child(3){background:var(--v3)}
.admin-vignette i:nth-child(4){background:var(--v4)}

/* Réglages : une tuile repliable par rubrique, dans sa teinte ; « Fonctions visibles » en mini-tuiles par fonction. */
html:root[data-style] .admin-rubrique:not([data-fonction]){--f-fond:var(--surface);--f-vif:var(--mosa-sable-vif);--f-encre:var(--text)}
html:root[data-style] .admin-mosaique .admin-rubrique{background:var(--f-fond);border:var(--f-bord) solid var(--f-encre);border-radius:var(--adm-r-petit)}
html:root[data-style] .admin-mosaique .admin-rubrique-nb{background:var(--f-vif)}
html:root[data-style] .admin-mosaique .admin-rubrique:not([data-fonction]) .admin-rubrique-nb{background:var(--surface-2)}
html:root[data-style] .admin-mosaique .admin-rubrique > summary::after{border-color:var(--f-encre)}
html:root[data-style] .admin-mosaique .admin-rubrique label[data-fonction]{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px;background:var(--f-fond);border-radius:14px;padding:10px 12px;border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .admin-mosaique .admin-rubrique label[data-fonction] .admin-cle{grid-column:2}
html:root[data-style] .admin-mosaique .admin-rubrique label[data-fonction] input{accent-color:var(--f-encre)}

/* Mouvement : seulement si l utilisateur l accepte. */
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .admin-mosaique .admin-kpi{transition:background-color .3s var(--mouvement),transform .25s var(--mouvement)}
  html:root[data-style] .admin-mosaique a.admin-kpi:hover{background:var(--f-vif);transform:translateY(-2px)}
  html:root[data-style] .admin-mosaique .admin-rubrique > summary::after{transition:transform .25s var(--mouvement)}
}

/* Contraste renforcé : lignes paires sur surface-2, textes secondaires en encre pleine ; les cadres viennent de --f-bord. */
html:root[data-style][data-contrast="high"] .admin-mosaique .admin-table tbody tr:nth-child(even){background:var(--surface-2)}
html:root[data-style][data-contrast="high"] .admin-mosaique :is(.admin-kpi,.admin-rubrique,.adm-commandes tbody tr){border:var(--f-bord) solid var(--f-encre)}

/* 600 px et moins (390) : fiches blanches sur la tuile, montants un peu plus petits. */
@media (max-width:600px){
  html:root[data-style] .admin-mosaique .admin-kpi{min-height:132px;padding:14px 14px 16px}
  html:root[data-style] .admin-mosaique .admin-kpi-v{font-size:3.6rem}
  html:root[data-style] .admin-mosaique .admin-kpi-v.admin-kpi-mot{font-size:2.1rem}
  html:root[data-style] .admin-mosaique .admin-tuile{padding:18px 16px}
  html:root[data-style] .admin-mosaique .admin-table{background:transparent}
  html:root[data-style] .admin-mosaique :is(.adm-equipes,.adm-journal) tbody tr,html:root[data-style] .admin-mosaique :is(.adm-equipes,.adm-journal) tbody tr:nth-child(even){background:var(--surface);border:var(--f-bord) solid var(--f-encre);border-radius:var(--adm-r-petit)}
  html:root[data-style] .admin-mosaique :is(.adm-equipes,.adm-journal) td{padding:0}
}
/* TEM-MOSAIQUE-P8 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P9 début */
/* P9 : tuiles vivantes (survol, appui, focus). */
/* Agent MOUV2 (maquette B\proto-P9.css, planche-P9-vivantes.jpg). L élévation passe par la couleur et la
   forme, jamais par une ombre : au survol, la tuile cliquable passe du fond au vif de sa fonction, monte
   de 3 px, son numéro en contour glisse et sa flèche ronde tourne d un huitième de tour ; à l appui elle
   s enfonce ; au clavier, un anneau dans l encre de sa fonction entoure toute la tuile (le survol n a
   pas d anneau). Boutons principaux : pleins dans l encre de la fonction (plus de quasi-noir), plus
   profonds au survol, anneau décalé au focus. Mouvement seulement sans prefers-reduced-motion. */
html:root{--vivant-montee:-3px;--vivant-appui:.98;--vivant-appui-btn:.97;--vivant-duree:.2s;--vivant-numero:-6px;
  --vivant-anneau:3px;--vivant-ecart:4px;--vivant-fleche:44px;--vivant-tour:-45deg;--vivant-survol:72%;--vivant-appuye:60%}
/* Lien étiré : toute la tuile est cliquable, le texte reste lisible au-dessus du numéro. */
html:root[data-style] main .kpis > .kpi:has(.v a){padding-bottom:calc(var(--vivant-fleche) + 30px)}
html:root[data-style] main .kpis > .kpi:has(.v a) > .v{position:static}
html:root[data-style] main .kpis > .kpi .v a{text-decoration:none}
html:root[data-style] main .kpis > .kpi .v a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
/* Bouton rond à flèche, dans l encre de la fonction (même langue que la carte « Étape suivante »). */
html:root[data-style] main .kpis > .kpi .v a::before{content:"\2192" / "";position:absolute;right:18px;bottom:18px;z-index:1;display:grid;place-items:center;
  inline-size:var(--vivant-fleche);block-size:var(--vivant-fleche);border-radius:50%;background:var(--f-encre);color:var(--fn-sur-encre);font-size:1.35rem;font-weight:700;line-height:1}
/* Le décalage en diagonale du socle (et son ombre) ne vaut plus en Mosaïque. */
html:root[data-style] .kpis > .kpi:hover,html:root[data-style] .stade-carte[href]:hover{transform:none;box-shadow:none}
/* Survol : la tuile prend le vif de sa fonction, le titre se souligne. */
html:root[data-style] main .kpis > .kpi:has(.v a):hover{background-color:var(--f-vif)}
html:root[data-style] main .kpis > .kpi:has(.v a):hover .v a{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em}
/* Focus clavier : vif et anneau autour de toute la tuile, dans l encre de sa fonction. */
html:root[data-style] main .kpis > .kpi .v a:focus-visible{outline:0}
html:root[data-style] main .kpis > .kpi:has(.v a:focus-visible){background-color:var(--f-vif);outline:var(--vivant-anneau) solid var(--f-encre);outline-offset:var(--vivant-ecart)}
/* Sur le vif, le texte secondaire passe au texte plein (AA). */
html:root[data-style] main .kpis > .kpi:has(.v a):is(:hover,:has(a:focus-visible)) .l{color:var(--text)}

/* Boutons principaux : encre de la fonction, texte posé sur l encre (contraste AA contrôlé). */
/* Les boutons qui confirment (aria-pressed, data-retour) sont laissés à P12. */
html:root[data-style] .btn:not(.sec,.ko,[aria-pressed="true"],[data-retour="ok"]),html:root[data-style] .stade-b1{background:var(--f-encre);border-color:var(--f-encre);color:var(--fn-sur-encre)}
html:root[data-style] .btn:not(.sec,.ko,[aria-pressed="true"],[data-retour="ok"],:disabled):hover,html:root[data-style] .stade-b1:hover{background:color-mix(in srgb,var(--f-encre) var(--vivant-survol),var(--text));border-color:transparent;color:var(--fn-sur-encre)}
html:root[data-style] .btn:not(.sec,.ko,[aria-pressed="true"],[data-retour="ok"],:disabled):active,html:root[data-style] .stade-b1:active{background:color-mix(in srgb,var(--f-encre) var(--vivant-appuye),var(--text));border-color:transparent;color:var(--fn-sur-encre)}
/* Boutons secondaires : fond de la fonction et cadre dans son encre au survol. */
html:root[data-style] .btn.sec:not([aria-pressed="true"],[data-retour="ok"],:disabled):hover,html:root[data-style] .stade-b2:hover{background:var(--f-fond);border-color:var(--f-encre);color:var(--text)}
/* Focus des boutons : anneau dans l encre, décalé de 4 px, toujours visible (aussi sur un bouton plein). */
html:root[data-style] :is(.btn,.stade-b1,.stade-b2):focus-visible{outline:var(--vivant-anneau) solid var(--f-encre);outline-offset:var(--vivant-ecart)}

@media (prefers-reduced-motion:no-preference){
  html:root[data-style] main .kpis > .kpi:has(.v a){transition:transform var(--vivant-duree) var(--mouvement),background-color var(--vivant-duree) var(--mouvement)}
  html:root[data-style] main .kpis > .kpi:has(.v a)::after{transition:transform var(--vivant-duree) var(--mouvement)}
  html:root[data-style] main .kpis > .kpi .v a::before{transition:rotate var(--vivant-duree) var(--mouvement)}
  html:root[data-style] main .kpis > .kpi:has(.v a):is(:hover,:has(a:focus-visible)){transform:translateY(var(--vivant-montee))}
  /* Le numéro glisse par transform : la propriété translate reste à la parallaxe de P10, les deux se cumulent. */
  html:root[data-style] main .kpis > .kpi:has(.v a):is(:hover,:has(a:focus-visible))::after{transform:translateX(var(--vivant-numero))}
  html:root[data-style] main .kpis > .kpi:has(.v a):is(:hover,:has(a:focus-visible)) .v a::before{rotate:var(--vivant-tour)}
  html:root[data-style] main .kpis > .kpi:has(.v a):is(:hover,:has(a:focus-visible),:active):active{transform:scale(var(--vivant-appui))}
  html:root[data-style] :is(.btn,.stade-b1,.stade-b2){transition:transform var(--vivant-duree) var(--mouvement),background-color var(--vivant-duree) var(--mouvement),border-color var(--vivant-duree) var(--mouvement)}
  html:root[data-style] :is(.btn,.stade-b1,.stade-b2):not(:disabled):hover{transform:translateY(-2px)}
  html:root[data-style] :is(.btn,.stade-b1,.stade-b2):not(:disabled):active{transform:scale(var(--vivant-appui-btn))}
}
@media (forced-colors:active){
  html:root[data-style] main .kpis > .kpi:has(.v a:focus-visible){outline-color:Highlight}
}
/* TEM-MOSAIQUE-P9 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P10 début */
/* P10 : défilement scénarisé de la vitrine et des longs écrans. */
/* Agent MOUV3 (maquette B, proto-P10.css). CSS seul, aucun élément ajouté.
   1. Vitrine et application : chaque tuile, carte ou bloc entre par un léger fondu et une montée de
      16 px au moment où il paraît (animation-timeline: view()) ; les grands numéros en contour des
      tuiles de l accueil défilent un peu plus lentement que leur tuile (parallaxe douce).
   2. Écrans longs (Fiche de match, Roulements) : le titre monumental se compacte en une ligne collée
      sous l en-tête quand on descend (animation-timeline: scroll(root)), sur sa tuile de couleur,
      détaché des cartes qui passent dessous par un anneau de la couleur de la page.
   Double garde-fou : tout ce qui bouge, y compris les @keyframes (seul endroit où une opacité nulle
   apparaît), vit sous @media (prefers-reduced-motion: no-preference) ET @supports (animation-timeline).
   Sans l un des deux, l état de base est l état final : tout est visible, immobile, titre monumental.
   Propriétés individuelles (translate, scale) : les transform des autres propositions restent intacts.
   Administration exclue (tableau de bord de P8). Vitrine en mosaïque (P2) : chaque tuile .bento > .tuile
   entre de même, son numéro .tuile-num glisse plus lentement. */
@property --p10-compact{syntax:"<number>";inherits:true;initial-value:0}
html:root{--p10-montee:16px;--p10-entree-fin:140px;--p10-numero-course:12px;--p10-haut:70px;--p10-course:320px;
  --p10-titre:1.6rem;--p10-pad:clamp(24px,4vw,56px);--p10-pad-compact:10px;--p10-anneau:8px}
@media (max-width:600px){html:root{--p10-course:260px}}
@media (max-width:480px){html:root{--p10-pad:20px}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Entrées : cartes et tuiles de l application, blocs de la vitrine. */
    html:root[data-style] body[data-fonction]:not([data-fonction="securite"]) :is(.tem-main > .card,.kpis > .kpi,.kpis > .stade-carte),
    html:root[data-style] body[data-fonction] :is(.v2 .bento > .tuile,.v2 .journee > .etape,.v2 .tel > *,.v2 .tarifs3 > .prix,.v2 .faq-mini > *,.parcours li,.bloc-contact,.sec-tete){
      animation:p10-entree linear both;animation-timeline:view();animation-range:entry 0% entry var(--p10-entree-fin)}
    /* Parallaxe douce des numéros en contour des tuiles de l accueil et de la mosaïque de la vitrine. */
    html:root[data-style] body[data-fonction] .kpis > .kpi::after{animation:p10-numero linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    html:root[data-style] body[data-fonction] .v2 .bento > .tuile > .tuile-num{animation:p10-numero linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes p10-entree{from{opacity:0;translate:0 var(--p10-montee)}}
    @keyframes p10-numero{from{translate:0 var(--p10-numero-course)}to{translate:0 calc(var(--p10-numero-course) * -1)}}
  }
  @supports (animation-timeline:scroll()){
    /* Titre compact des écrans longs : la valeur --p10-compact va de 0 (haut de page) à 1 (après la course). */
    html:root:has(> body:is([data-fonction="fiche"],[data-fonction="roulements"])){scroll-padding-top:calc(var(--p10-haut) + 90px)}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete{
      position:sticky;top:var(--p10-haut);z-index:40;
      animation:p10-compacte linear both;animation-timeline:scroll(root);animation-range:0 var(--p10-course);
      padding-block:calc(var(--p10-pad) * (1 - var(--p10-compact)) + var(--p10-pad-compact) * var(--p10-compact));
      outline:calc(var(--p10-anneau) * var(--p10-compact)) solid var(--bg);outline-offset:0}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-titre{
      display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.28em;
      font-size:calc(var(--affiche-titre) * (1 - var(--p10-compact)) + var(--p10-titre) * var(--p10-compact))}
    /* Une ligne par mot en haut de page (marge de fin de 100 %), une seule ligne une fois compact. */
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-titre > span{
      flex:0 0 auto;white-space:nowrap;margin-inline-end:calc((1 - var(--p10-compact)) * 100%)}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete :is(.typo-sur,.typo-chapo){
      opacity:calc(1 - var(--p10-compact) * 2);margin-block:calc((1 - var(--p10-compact)) * .5em)}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-sur{font-size:calc(var(--typo-sur) * (1 - var(--p10-compact)));animation-fill-mode:backwards}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-chapo{font-size:calc(1.1rem * (1 - var(--p10-compact)))}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete[data-numero]::after{scale:max(0, 1 - var(--p10-compact) * 1.5);transform-origin:100% 0;
      max-height:calc(max(0, 1 - var(--p10-compact) * 1.5) * 1.2em);margin-block-end:calc(-.12em * max(0, 1 - var(--p10-compact) * 1.5));overflow:hidden}
    @keyframes p10-compacte{to{--p10-compact:1}}
  }
}
/* TEM-MOSAIQUE-P10 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P11 début */
/* P11 : mode sombre « vestiaire de nuit ». */
/* Agent MOUV3 (maquette A, proto-P11.css). Ne change rien en clair. Lit le nuancier sombre de la
   vague 1 (--mosa-*, --f-*, --fn-sur-encre) sans le modifier.
   Chaque écran devient un casier éclairé : voile de nuit de la fonction en haut de page, plus discret
   que le voile de jour ; tuile d en-tête dans la teinte profonde avec un halo « projecteur » de
   l encre en haut ; bandeau du titre, pastille d étape et étape courante du fil dans l encre
   lumineuse de la fonction, texte presque noir dessus (--fn-sur-encre, 4,5:1 au moins, 7:1 en
   renforcé) ; surligneur de la vitrine de même ; numéros dans l encre. La carte « Étape suivante »
   garde son bandeau de jour (vif et texte plein) : elle relève de P7.
   Règles écrites deux fois : thème sombre choisi, puis thème automatique sous préférence sombre.
   Contraste renforcé : halo retiré (la vague 1 retire le voile et passe les encres au clair). */
html:root{--p11-halo-force:24%;--p11-halo-forme:120% 75% at 50% 0;--p11-numero-force:60%;--p11-voile-force:55%}
html:root[data-contrast="high"]{--p11-halo-force:0%;--p11-numero-force:100%}

html:root[data-theme="dark"][data-style] body[data-fonction]{--voile:color-mix(in srgb,var(--f-fond) var(--p11-voile-force),var(--bg))}
html:root[data-theme="dark"] [data-fonction]{--typo-bandeau:var(--f-encre);--typo-bandeau-encre:var(--fn-sur-encre)}
html:root[data-theme="dark"] .stade-suivante .stade-carte[data-fonction]{--typo-bandeau:var(--f-vif);--typo-bandeau-encre:var(--text)}
html:root[data-theme="dark"][data-style] body[data-fonction] .typo-tete{background:radial-gradient(var(--p11-halo-forme),color-mix(in srgb,var(--f-encre) var(--p11-halo-force),transparent),transparent 70%),var(--f-fond);--affiche-numero:color-mix(in srgb,var(--f-encre) var(--p11-numero-force),transparent)}
html:root[data-theme="dark"] body[data-fonction] :is(.typo-tete .typo-bandeau,.typo-pastille){color:var(--fn-sur-encre);--typo-bandeau-encre:var(--fn-sur-encre)}
html:root[data-theme="dark"][data-style] .v2 h2.hero-titre .surligne{background:var(--f-encre);color:var(--fn-sur-encre)}

@media (prefers-color-scheme:dark){
  html:root:not([data-theme="light"])[data-style] body[data-fonction]{--voile:color-mix(in srgb,var(--f-fond) var(--p11-voile-force),var(--bg))}
  html:root:not([data-theme="light"]) [data-fonction]{--typo-bandeau:var(--f-encre);--typo-bandeau-encre:var(--fn-sur-encre)}
  html:root:not([data-theme="light"]) .stade-suivante .stade-carte[data-fonction]{--typo-bandeau:var(--f-vif);--typo-bandeau-encre:var(--text)}
  html:root:not([data-theme="light"])[data-style] body[data-fonction] .typo-tete{background:radial-gradient(var(--p11-halo-forme),color-mix(in srgb,var(--f-encre) var(--p11-halo-force),transparent),transparent 70%),var(--f-fond);--affiche-numero:color-mix(in srgb,var(--f-encre) var(--p11-numero-force),transparent)}
  html:root:not([data-theme="light"]) body[data-fonction] :is(.typo-tete .typo-bandeau,.typo-pastille){color:var(--fn-sur-encre);--typo-bandeau-encre:var(--fn-sur-encre)}
  html:root:not([data-theme="light"])[data-style] .v2 h2.hero-titre .surligne{background:var(--f-encre);color:var(--fn-sur-encre)}
}
/* TEM-MOSAIQUE-P11 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-P12 début */
/* P12 : retours d action colorés (boutons, champs, états). */
/* Agent MOUV2 (maquette B\proto-P12.css, planche-P12-retours.jpg). Chaque action laisse une trace dans la
   teinte de l écran, et le libellé reste toujours visible (la couleur ne porte jamais seule l état).
   Bouton qui confirme (aria-pressed="true", posé par web/app/src/retours.js) : vif de la fonction,
   coche dessinée. Absent : la même forme en rose, sans signal d alarme. « Texte copié »
   (data-retour="ok", 2 secondes). Champ au focus : fond teinté, bordure dans l encre ; valide
   (aria-invalid="false") : coche d encre ; refusé (aria-invalid="true") : rose doux et message neutre
   sous le champ (.champ-message, relié par aria-describedby). État enregistré (.etat-enregistre,
   role="status") : pastille vive avec coche. Mouvement seulement sans prefers-reduced-motion. */
html:root{--coche-l:.38em;--coche-h:.72em;--coche-ep:.15em;--retour-duree:.25s;--champ-teinte:55%;--champ-coche-place:2.6em}
/* Absent : la teinte rose (score) prend la place de celle de l écran, sur ce seul bouton. */
html:root[data-style] .btn[data-action="absent"]{--f-fond:var(--mosa-rose);--f-vif:var(--mosa-rose-vif);--f-encre:var(--mosa-rose-encre)}
/* Bouton qui confirme et bouton « Texte copié » : vif de la fonction, cadre d encre, coche. */
html:root[data-style] .btn:is([aria-pressed="true"],[data-retour="ok"]),html:root[data-style] .btn:is([aria-pressed="true"],[data-retour="ok"]):not(:disabled):hover{display:inline-flex;align-items:center;justify-content:center;gap:.55em;background:var(--f-vif);color:var(--text);border-color:var(--f-encre)}
html:root[data-style] .btn:is([aria-pressed="true"],[data-retour="ok"])::before{content:"";display:block;flex:none;inline-size:var(--coche-l);block-size:var(--coche-h);border:solid currentColor;border-width:0 var(--coche-ep) var(--coche-ep) 0;rotate:45deg;margin-block-start:-.22em}
/* Champs : focus teinté de la fonction, bordure dans son encre. */
html:root[data-style] body[data-fonction] :is(input,select,textarea):focus{background:color-mix(in srgb,var(--f-fond) var(--champ-teinte),var(--surface));border-color:var(--f-encre)}
/* Champ valide : bordure et coche dans l encre de la fonction. */
html:root[data-style] label.field:has(> input[aria-invalid]){position:relative}
html:root[data-style] input[aria-invalid="false"]{border-color:var(--f-encre);padding-inline-end:var(--champ-coche-place)}
html:root[data-style] label.field:has(> input[aria-invalid="false"])::after{content:"";position:absolute;right:1.25em;bottom:1.15em;inline-size:var(--coche-l);block-size:var(--coche-h);border:solid var(--f-encre);border-width:0 var(--coche-ep) var(--coche-ep) 0;rotate:45deg;pointer-events:none}
/* Champ refusé : rose doux (état sémantique), message neutre sous le champ, texte plein. */
html:root[data-style] input[aria-invalid="true"],html:root[data-style] body[data-fonction] input[aria-invalid="true"]:focus{background:var(--kobg);border-color:var(--ko)}
/* Contraste renforcé : le cadre du champ refusé reste dans la couleur d état (le cadre d encre de la vague 1 ne le recouvre pas). */
html:root[data-style][data-contrast="high"] input[aria-invalid="true"][aria-invalid]{border-color:var(--ko)}
html:root[data-style] .champ-message{display:flex;align-items:baseline;gap:.5em;margin:.35em 0 0;color:var(--text);font-size:.9rem}
html:root[data-style] .champ-message::before{content:"";flex:none;inline-size:.55em;block-size:.55em;border-radius:50%;background:var(--ko);translate:0 -.05em}
/* État enregistré : pastille sur le vif, coche dans l encre de la fonction. */
html:root[data-style] .etat-enregistre{display:flex;inline-size:fit-content;align-items:center;gap:.55em;margin:.5em 0;padding:.35em 1em .35em .85em;border-radius:999px;background:var(--f-vif);color:var(--text);font-weight:700;border:var(--f-bord) solid var(--f-encre)}
/* Dans un bloc déjà posé sur le vif (part par famille, référent, état du score), la pastille passe sur la carte. */
html:root[data-style] :is(.frais-part,.groupe-referent,.score-etat,.photo-accord,.paye-etat) > .etat-enregistre{background:var(--surface)}
html:root[data-style] .etat-enregistre::before{content:"";flex:none;inline-size:var(--coche-l);block-size:var(--coche-h);border:solid var(--f-encre);border-width:0 var(--coche-ep) var(--coche-ep) 0;rotate:45deg;margin-block-start:-.22em}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .btn:is([aria-pressed="true"],[data-retour="ok"])::before,html:root[data-style] .etat-enregistre::before,html:root[data-style] label.field:has(> input[aria-invalid="false"])::after{animation:mosa-coche var(--retour-duree) var(--mouvement) both}
  html:root[data-style] .etat-enregistre{animation:mosa-pastille var(--retour-duree) var(--mouvement) both}
  html:root[data-style] .card:has(.btn[aria-pressed="true"]){animation:mosa-carte-confirme .6s var(--mouvement)}
  html:root[data-style] :is(input,select,textarea){transition:background-color var(--retour-duree) var(--mouvement),border-color var(--retour-duree) var(--mouvement)}
}
@keyframes mosa-coche{from{scale:0;opacity:0}}
@keyframes mosa-pastille{from{scale:.85;opacity:0}}
@keyframes mosa-carte-confirme{30%{background-color:var(--f-vif)}}
@media (forced-colors:active){
  html:root[data-style] .btn[aria-pressed="true"]{border:2px solid CanvasText}
  html:root[data-style] input[aria-invalid="true"]{border:2px dashed CanvasText}
}
/* TEM-MOSAIQUE-P12 fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-A début */
/* ============ Portée locale : la page et les quatre états ============ */
#saison,[data-fonction="saison"]{--f-fond:var(--mosa-sable);--f-vif:var(--mosa-sable-vif,var(--mosa-sable));--f-encre:var(--mosa-sable-encre,var(--text))}
#saison [data-fonction="convoc"]{--f-fond:var(--mosa-menthe);--f-vif:var(--mosa-menthe-vif,var(--mosa-menthe));--f-encre:var(--mosa-menthe-encre,var(--text))}
#saison [data-fonction="trajet"]{--f-fond:var(--mosa-ciel);--f-vif:var(--mosa-ciel-vif,var(--mosa-ciel));--f-encre:var(--mosa-ciel-encre,var(--text))}
#saison [data-fonction="frais"]{--f-fond:var(--mosa-tilleul);--f-vif:var(--mosa-tilleul-vif,var(--mosa-tilleul));--f-encre:var(--mosa-tilleul-encre,var(--text))}
#saison [data-fonction="score"]{--f-fond:var(--mosa-rose);--f-vif:var(--mosa-rose-vif,var(--mosa-rose));--f-encre:var(--mosa-rose-encre,var(--text))}
#saison{
  --saison-r:var(--stade-r,24px);
  --saison-r-grand:var(--stade-r-grand,30px);
  --jour-r:8px;
  --jour-trait:2px;
  --jour-neutre:var(--ctl-border);
  --jour-choisi:var(--text);
}
html:root[data-contrast="high"] #saison{--jour-trait:3px}

/* ============ En-tête monumental sur la tuile de la page ============ */
html #saison .typo-tete{--tuile:var(--f-fond);--typo-bandeau:var(--f-vif)}
html #saison .typo-pastille{background:var(--f-vif);color:var(--text)}

/* ============ Trois grands chiffres neutres ============ */
html #saison .saison-total{background:var(--f-fond);color:var(--text);border:var(--f-bord,0px) solid var(--f-encre);border-radius:var(--saison-r);box-shadow:none}
html #saison .saison-nombre,html #saison .saison-unite{color:var(--f-encre)}
html #saison .saison-legende-total{color:var(--text)}

/* ============ Carte des mois : posée à même la page ============ */
html:root[data-style] #saison .saison-carte{background:transparent;border:0;padding:0;box-shadow:none}
html #saison .saison-legende ul{color:var(--text)}
html #saison .mois{background:transparent;color:var(--text);border:0;border-radius:var(--saison-r);box-shadow:inset 0 0 0 var(--jour-trait) var(--border)}
html #saison .mois.passe{background:var(--surface);box-shadow:none}
html #saison .mois h3{color:var(--text)}
html #saison .mois h3 span,html #saison .mois-resume{color:var(--muted)}

/* ============ Le carré : fond vif de la fonction cerné de son encre ============ */
html #saison .jour{background:var(--f-vif);color:var(--text);border:0;border-radius:var(--jour-r);box-shadow:inset 0 0 0 var(--jour-trait) var(--f-encre);cursor:pointer}
html #saison .jour.entrainement{border-radius:50%}
html #saison .jour.neutre{background:transparent;box-shadow:inset 0 0 0 var(--jour-trait) var(--jour-neutre)}
html #saison .jour.avenir{background:transparent;box-shadow:none;outline:var(--jour-trait) dashed var(--jour-neutre);outline-offset:calc(var(--jour-trait) * -1)}
html #saison .jour[aria-pressed="true"]{box-shadow:inset 0 0 0 var(--jour-trait) var(--f-encre),0 0 0 3px var(--surface),0 0 0 6px var(--jour-choisi)}
html #saison .jour.neutre[aria-pressed="true"]{box-shadow:inset 0 0 0 var(--jour-trait) var(--jour-neutre),0 0 0 3px var(--surface),0 0 0 6px var(--jour-choisi)}
html #saison .jour:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* ============ Le rendez-vous ouvert en tuile ============ */
html:root[data-style] #saison .saison-detail{background:var(--f-fond);color:var(--text);border:var(--f-bord,0px) solid var(--f-encre);border-radius:var(--saison-r-grand);box-shadow:none}
html #saison .saison-rubrique,html #saison .saison-score{color:var(--f-encre)}
html #saison .saison-tiret{color:var(--f-vif);-webkit-text-stroke:.04em var(--f-encre);paint-order:stroke fill}
html #saison .saison-detail-titre,html #saison .saison-detail-texte{color:var(--text)}
html #saison .saison-note{color:var(--muted)}

/* ============ Contraste renforcé : cadres de 2 px dans l encre de la teinte, jamais noirs ============ */
html:root[data-contrast="high"] #saison :is(.saison-total,.saison-detail,.mois.passe){border:2px solid var(--f-encre)}
html:root[data-contrast="high"] #saison .mois:not(.passe){box-shadow:inset 0 0 0 2px var(--jour-neutre)}
html:root[data-contrast="high"] #saison .saison-tiret{color:var(--f-encre);-webkit-text-stroke:0}

/* ============ Mouvement : les mois se posent, le carré s ouvre en tuile ============ */
@media (prefers-reduced-motion:no-preference){
  html #saison .mois{animation:saison-pose .4s var(--mouvement,ease-out) both}
  html #saison .mois:nth-child(n+4){animation-delay:.08s}
  html #saison .mois:nth-child(n+7){animation-delay:.16s}
  html #saison .mois:nth-child(n+10){animation-delay:.24s}
  html #saison .jour{transition:transform .2s var(--mouvement,ease-out),box-shadow .2s var(--mouvement,ease-out)}
  html #saison .jour.match:hover{transform:scale(1.12)}
  html #saison .jour.entrainement:hover{transform:scale(.9)}
  html #saison .saison-detail.saison-ouvre{animation:saison-ouvre .35s var(--mouvement,ease-out) both}
  html #saison .saison-total{animation:saison-pose .4s var(--mouvement,ease-out) both}
}
@keyframes saison-pose{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes saison-ouvre{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

@media (forced-colors:active){
  html #saison .jour{background:CanvasText;forced-color-adjust:none}
  html #saison .jour:is(.neutre,.avenir){background:Canvas;outline:2px solid CanvasText}
}
/* Audit final (contraste) : en sombre, le bandeau du titre de la saison passe dans l encre lumineuse (texte presque
   noir dessus), comme les autres écrans en vestiaire de nuit ; le vif sable sombre ne donnait que 2,99:1. */
html:root[data-theme="dark"] #saison .typo-tete{--typo-bandeau:var(--f-encre)}
@media (prefers-color-scheme:dark){html:root:not([data-theme="light"]) #saison .typo-tete{--typo-bandeau:var(--f-encre)}}
/* TEM-MOSAIQUE-A fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-B début */
/* B : « Les couleurs du club » (palette fermée de 12 couleurs de maillot, réglée par l entraîneur). */

/* ============ Clarté, saturation et encre posée sur la couleur, par mode ============ */
html:root[data-theme][data-accent][data-contrast]{--club-logo:1;--club-l:.45;--club-c:.15;--club-l-noir:.25;--club-l-blanc:.50;--club-t:.90;--club-tc:.05;--club-t-blanc:.97;--club-sur:#FFFFFF;--club-lisere:.16em}
html:root[data-theme="dark"][data-accent][data-contrast]{--club-logo:1;--club-l:.80;--club-c:.12;--club-l-noir:.74;--club-l-blanc:.94;--club-t:.30;--club-tc:.05;--club-t-blanc:.30;--club-sur:#0A0C10;--club-lisere:.16em}
@media (prefers-color-scheme:dark){
  html:root:not([data-theme="light"])[data-accent][data-contrast]{--club-logo:1;--club-l:.80;--club-c:.12;--club-l-noir:.74;--club-l-blanc:.94;--club-t:.30;--club-tc:.05;--club-t-blanc:.30;--club-sur:#0A0C10;--club-lisere:.16em}
}
html:root[data-theme][data-accent][data-contrast="high"]{--club-logo:1;--club-l:.36;--club-c:.13;--club-l-noir:.20;--club-l-blanc:.42;--club-t:.93;--club-tc:.04;--club-t-blanc:.98;--club-sur:#FFFFFF;--club-lisere:.22em}
html:root[data-theme="dark"][data-accent][data-contrast="high"]{--club-logo:1;--club-l:.88;--club-c:.09;--club-l-noir:.84;--club-l-blanc:.97;--club-t:.24;--club-tc:.05;--club-t-blanc:.24;--club-sur:#000000;--club-lisere:.22em}
@media (prefers-color-scheme:dark){
  html:root:not([data-theme="light"])[data-accent][data-contrast="high"]{--club-logo:1;--club-l:.88;--club-c:.09;--club-l-noir:.84;--club-l-blanc:.97;--club-t:.24;--club-tc:.05;--club-t-blanc:.24;--club-sur:#000000;--club-lisere:.22em}
}

/* ============ Les 12 couleurs de maillot (racine et pastilles du choix) ============ */
[data-club],[data-club-choix]{--club-lum:var(--club-l);--club-chroma:var(--club-c);--club-tlum:var(--club-t)}
[data-club="rouge"],[data-club-choix="rouge"]{--club-h:27}
[data-club="bordeaux"],[data-club-choix="bordeaux"]{--club-h:12;--club-chroma:min(var(--club-c),.12)}
[data-club="orange"],[data-club-choix="orange"]{--club-h:50}
[data-club="jaune"],[data-club-choix="jaune"]{--club-h:88}
[data-club="vert"],[data-club-choix="vert"]{--club-h:150}
[data-club="ciel"],[data-club-choix="ciel"]{--club-h:230}
[data-club="bleu-roi"],[data-club-choix="bleu-roi"]{--club-h:264}
[data-club="marine"],[data-club-choix="marine"]{--club-h:262;--club-chroma:min(var(--club-c),.09)}
[data-club="violet"],[data-club-choix="violet"]{--club-h:305}
[data-club="noir"],[data-club-choix="noir"]{--club-h:0;--club-chroma:0;--club-lum:var(--club-l-noir)}
[data-club="blanc"],[data-club-choix="blanc"]{--club-h:0;--club-chroma:0;--club-lum:var(--club-l-blanc);--club-tlum:var(--club-t-blanc)}
[data-club="gris"],[data-club-choix="gris"]{--club-h:250;--club-chroma:min(var(--club-c),.02)}
[data-club],[data-club-choix]{--club-encre:oklch(var(--club-lum) var(--club-chroma) var(--club-h));--club-tuile:oklch(var(--club-tlum) min(var(--club-chroma),var(--club-tc)) var(--club-h))}

/* ============ 1. Logo de l en-tête (SVG dessiné par tem-club.js, fond dans la couleur du club) ============ */
html:root[data-club][data-style] body :is(.tem-header,.entete) .tem-logo.club-logo{background:var(--club-tuile)}
.club-logo .club-logo-fond{fill:var(--club-encre)}
.club-logo .club-logo-trait{fill:var(--club-sur)}
.club-logo .club-logo-cercle{fill:none;stroke:var(--club-sur)}

/* ============ 2. Puce active du rail ============ */
html:root[data-club][data-style] .stade-fil [aria-current="step"] a,
html:root[data-club][data-style] .stade-fil [aria-current="step"] a:hover{background:var(--club-encre);color:var(--club-sur);border-color:var(--club-encre)}

/* ============ 3. Flèche ronde de « Étape suivante » (la carte garde la teinte de l écran visé) ============ */
html:root[data-club][data-style] .stade-suivante.card,
html:root[data-club][data-style] .stade-suivante .stade-carte{--suivante-fleche-fond:var(--club-encre);--suivante-fleche:var(--club-sur)}

/* ============ 4. Liseré du bandeau du titre ============ */
html:root[data-club][data-style] .typo-tete .typo-bandeau{box-shadow:inset 0 calc(var(--club-lisere) * -1) 0 var(--club-encre)}

/* ============ Choix de la couleur dans l écran Équipe ============ */
html:root[data-style] .club-choix{border-radius:14px;background:var(--bloc-fond);color:var(--text);border:var(--f-bord,0px) solid var(--f-encre,var(--border))}
html:root[data-style] .club-choix:has(input:checked){background:var(--f-vif,var(--accent-bg));font-weight:700}
html:root[data-style] .club-choix:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.club-pastille{inline-size:24px;block-size:24px;border-radius:50%;flex:none;box-sizing:border-box}
.club-pastille[data-club-choix]{background:var(--club-encre);border:3px solid var(--club-tuile)}
.club-pastille:not([data-club-choix]){border:2px dashed var(--muted)}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .club-choix,html:root[data-club][data-style] .stade-fil [aria-current="step"] a{transition:background-color .25s ease,color .25s ease}
}
/* TEM-MOSAIQUE-B fin */
/* ----------------------------------------------------------------------
   séparation de fusion
   ---------------------------------------------------------------------- */

/* TEM-MOSAIQUE-VIDES début */
/* Agent VIDES (juge waouh, correction 5 et notes par écran) : états vides monumentaux et mosaïque sans trou.
   Balisage dans public/app (blocs <!-- TEM-MOSAIQUE-VIDES -->) : .tem-vide, tuile de la teinte de l écran,
   chiffres en contour et dessins dans son encre, une phrase qui dit ce qui va s afficher et comment.
   Les dessins sont décoratifs (aria-hidden) ; aucun chiffre ni total dessiné : des tirets et des formes vides.
   L état vide disparaît seul quand les données arrivent :
   - Déplacements, Roulements, Photos : la liste qui le précède n est plus vide (:not(:empty) + .tem-vide) ;
   - Convocation : les pastilles posées par majCompteurs (:has(.tem-pastilles)) ;
   - Score : la classe .score-geant posée par majChiffreScore ;
   - Frais : majPart remplace le contenu du bloc résultat.
   Aucun mouvement ajouté. Contraste renforcé : contours pleins, cadre de 2 px dans l encre (--f-bord).
   Hors Mosaïque : tem.css, ancre TEM-MOSAIQUE-REPLI-VIDES (états vides masqués, apparence inchangée). */
html:root[data-style]{--vide-trait:max(2.5px,.05em);--vide-anneau:2.5px;--vide-siege:clamp(30px,7cqi,42px);--vide-cadre:clamp(64px,17cqi,92px);--vide-pastille:20px}
html:root[data-style][data-contrast="high"]{--vide-anneau:3px}

/* Tuile commune : fond de la teinte (carte blanche dans la première carte, déjà teintée). */
html:root[data-style] .tem-vide{display:block;container-type:inline-size;margin:var(--esp-3,12px) 0;padding:var(--chiffre-pad,22px);border-radius:var(--stade-r,24px);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] body[data-fonction] .typo-tete + .card .tem-vide{background:var(--surface)}
html:root[data-style] .tem-vide > *{margin:0}
html:root[data-style] .vide-phrase{max-width:34rem;font-weight:650;line-height:1.45;color:var(--text)}
/* Le tiret monumental : une barre en contour dans l encre (pleine en contraste renforcé), jamais un chiffre. */
html:root[data-style] .vide-barre{display:inline-block;flex:none;box-sizing:border-box;inline-size:var(--barre-l,clamp(72px,24cqi,150px));block-size:var(--barre-h,clamp(22px,6.5cqi,40px));border:var(--vide-trait-barre,3px) solid var(--f-encre);border-radius:var(--barre-r,8px);background:transparent}
html:root[data-style][data-contrast="high"] .vide-barre{background:var(--f-encre)}

/* Les données arrivent : l état vide se retire. */
html:root[data-style] :is([data-bloc="voitures"],[data-bloc="tours"],[data-champ="photo-liste"]):not(:empty) + .tem-vide,
html:root[data-style] [data-bloc="compteurs"]:has(.tem-pastilles) + .tem-vide,
html:root[data-style] [data-bloc="score"]:has(.score-geant) > .tem-vide,
html:root[data-style] .tem-chiffres > .tem-vide{display:none}

/* Score : « – – – » en contour rose, état en pastille d encre, « Score à saisir » lu mais non affiché. */
html:root[data-style] #score [data-bloc="score"]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-2,8px)}
html:root[data-style] #score [data-bloc="score"] > *{margin:0}
html:root[data-style] #score [data-bloc="score"] > .tem-vide{align-self:stretch;margin:0}
html:root[data-style] #score [data-bloc="score"] > [data-champ="score-etat"]{order:-1;padding:4px 14px;border-radius:999px;background:var(--f-encre);color:var(--fn-sur-encre);font-weight:800;font-size:.86rem;line-height:1.35;border-radius:18px}
html:root[data-style] #score [data-bloc="score"]:has(> .tem-vide) > p:has(> [data-champ="score-chiffre"]:not(.score-geant)){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:root[data-style] .vide-chiffres{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4cqi,28px);padding-block:clamp(10px,3cqi,22px);--barre-l:clamp(96px,32cqi,200px);--barre-h:clamp(56px,17cqi,104px);--vide-trait-barre:clamp(4px,1.2cqi,6px);--barre-r:clamp(12px,3.4cqi,20px)}
html:root[data-style] .vide-sep{flex:none;inline-size:calc(var(--barre-l) * .24);block-size:max(7px,calc(var(--barre-h) * .13));border-radius:999px;background:var(--f-encre)}
html:root[data-style] .vide-score .vide-phrase{margin:var(--esp-3,12px) auto 0;text-align:center}

/* Frais : « –,–– € » en contour tilleul, « par famille » dessous, la phrase d origine en légende. */
html:root[data-style] .frais-part:has(> .tem-vide){container-type:inline-size;padding:var(--chiffre-pad,22px);border-radius:var(--stade-r,24px);background:var(--f-fond);border:var(--f-bord) solid var(--f-encre);font-size:.95rem}
html:root[data-style] .frais-part > .tem-vide{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px .2em;margin:0 0 var(--esp-3,12px);padding:0;background:none;border:0;border-radius:0}
html:root[data-style] .vide-montant{display:flex;align-items:flex-end;gap:clamp(6px,2cqi,12px);--barre-l:clamp(84px,30cqi,170px);--barre-h:clamp(52px,16cqi,92px);--vide-trait-barre:clamp(4px,1.2cqi,6px);--barre-r:clamp(12px,3.4cqi,18px)}
html:root[data-style] .vide-montant > .vide-centimes{--barre-l:clamp(56px,19cqi,108px);--barre-h:clamp(36px,11cqi,64px);--barre-r:clamp(9px,2.6cqi,14px)}
html:root[data-style] .vide-virgule{flex:none;inline-size:clamp(10px,3cqi,16px);block-size:clamp(20px,6cqi,32px);margin-block-end:calc(clamp(10px,3cqi,16px) * -1);border-radius:999px 999px 999px 2px;background:var(--f-encre);transform:skewX(-14deg)}
html:root[data-style] .vide-unite{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:clamp(3rem,2rem + 8cqi,5.4rem);line-height:.78;color:var(--f-encre);margin-inline-start:.1em}
html:root[data-style] .vide-legende{flex-basis:100%;font-weight:750;font-size:1.05rem;color:var(--text)}

/* Déplacements : voiture vue de dessus, 4 sièges vides (ronds cerclés de l encre ciel). */
html:root[data-style] .vide-trajet{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4,16px) clamp(18px,5cqi,40px)}
html:root[data-style] .vide-trajet .vide-phrase{flex:1 1 220px}
html:root[data-style] .vide-voiture{position:relative;flex:none;display:grid;grid-template-columns:repeat(2,var(--vide-siege));gap:calc(var(--vide-siege) * .36) calc(var(--vide-siege) * .5);padding:calc(var(--vide-siege) * 1.1) calc(var(--vide-siege) * .5) calc(var(--vide-siege) * .6);background:var(--surface);border-radius:calc(var(--vide-siege) * 1.2) calc(var(--vide-siege) * 1.2) calc(var(--vide-siege) * .6) calc(var(--vide-siege) * .6)}
html:root[data-style] .vide-trajet{--vide-siege:clamp(34px,10cqi,50px)}
html:root[data-style] .vide-voiture > span{box-sizing:border-box;inline-size:var(--vide-siege);aspect-ratio:1;border-radius:50%;background:var(--surface);border:3px solid var(--f-encre)}
html:root[data-style] .vide-voiture > .vide-volant{position:absolute;top:calc(var(--vide-siege) * .3);left:calc(var(--vide-siege) * .62);inline-size:calc(var(--vide-siege) * .6);border-width:2px}

/* Convocation : le « 0 » des présents en contour, une rangée de pastilles creuses sous la tuile des compteurs. */
html:root[data-style] [data-bloc="compteurs"]:not(:has(.tem-pastilles)) > .chiffre{color:transparent;-webkit-text-stroke:var(--vide-trait) var(--f-encre);paint-order:stroke fill}
html:root[data-style][data-contrast="high"] [data-bloc="compteurs"]:not(:has(.tem-pastilles)) > .chiffre{color:var(--f-encre);-webkit-text-stroke:0}
html:root[data-style] [data-bloc="compteurs"]:not(:has(.tem-pastilles)):has(+ .tem-vide){margin-bottom:0;padding-bottom:var(--esp-2,8px);border-end-start-radius:0;border-end-end-radius:0;border-bottom-width:0}
html:root[data-style] [data-bloc="compteurs"] + .vide-convoc{margin-top:0;padding-top:var(--esp-2,8px);border-start-start-radius:0;border-start-end-radius:0;border-top-width:0}
html:root[data-style] .vide-pastilles{block-size:var(--vide-pastille);margin-bottom:var(--esp-3,12px);background:radial-gradient(circle,transparent 0 calc(var(--vide-pastille) * .5 - var(--vide-anneau) - 2px),var(--f-encre) calc(var(--vide-pastille) * .5 - var(--vide-anneau) - 1.5px) calc(var(--vide-pastille) * .5 - 2px),transparent calc(var(--vide-pastille) * .5 - 1.5px)) 0 0 / calc(var(--vide-pastille) + 6px) var(--vide-pastille) space no-repeat}

/* Photos : trois cadres vides décalés, pointillés de l encre pêche. */
html:root[data-style] .photo-liste:has(> [data-champ="photo-liste"]:empty){padding:0;background:transparent}
html:root[data-style] .vide-photo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4,16px) clamp(18px,5cqi,40px)}
html:root[data-style] .vide-photo .vide-phrase{flex:1 1 220px}
html:root[data-style] .vide-cadres{position:relative;flex:none;inline-size:calc(var(--vide-cadre) * 2.55);block-size:calc(var(--vide-cadre) * 1.35)}
html:root[data-style] .vide-cadres > span{position:absolute;box-sizing:border-box;inline-size:var(--vide-cadre);aspect-ratio:1;border-radius:18px;border:var(--vide-anneau) dashed var(--f-encre)}
html:root[data-style] .vide-cadres > :nth-child(1){left:0;top:calc(var(--vide-cadre) * .3);background:var(--f-vif);transform:rotate(-6deg)}
html:root[data-style] .vide-cadres > :nth-child(2){left:calc(var(--vide-cadre) * .75);top:0;background:var(--surface);transform:rotate(3deg)}
html:root[data-style] .vide-cadres > :nth-child(3){left:calc(var(--vide-cadre) * 1.5);top:calc(var(--vide-cadre) * .22);background:var(--surface);transform:rotate(-2deg)}
/* Sélecteur de fichier : bouton pastille sur le vif, plus de bouton gris tronqué. */
html:root[data-style] input[type="file"]{inline-size:100%;box-sizing:border-box}
@media (min-width:1024px){html:root[data-style] .card [data-bloc] > label.field:has(> input[type="file"]){grid-column:span 2}}
html:root[data-style] input[type="file"]::file-selector-button{font:inherit;font-weight:700;margin-inline-end:12px;padding:8px 16px;border:0;border-radius:999px;background:var(--f-vif);color:var(--text);cursor:pointer}

/* Roulements : file des tours vide, une pastille par place (rond cerclé, trait), la première sur le vif. */
html:root[data-style] .vide-file{display:flex;flex-wrap:wrap;gap:var(--esp-2,8px) var(--esp-3,12px);margin-bottom:var(--esp-3,12px)}
html:root[data-style] .vide-file > span{display:flex;align-items:center;gap:10px;inline-size:clamp(108px,30cqi,150px);box-sizing:border-box;padding:7px 14px 7px 7px;border-radius:999px;background:var(--f-fond)}
html:root[data-style] .vide-file > span:first-child{background:var(--f-vif)}
html:root[data-style] .vide-file > span::before{content:"";flex:none;box-sizing:border-box;inline-size:22px;aspect-ratio:1;border-radius:50%;border:var(--vide-anneau) solid var(--f-encre)}
html:root[data-style] .vide-file > span::after{content:"";flex:1;block-size:6px;border-radius:999px;background:color-mix(in srgb,var(--f-encre) 35%,transparent)}
html:root[data-style] body[data-fonction="roulements"] .typo-tete:not([data-numero]) .typo-titre{max-inline-size:none}

/* Accueil de l application : mosaïque sans trou, numéros 02 à 07 alignés sur les étapes du fil. */
html:root[data-style] #contenu .kpis:has(> .kpi[data-fonction="convoc"]){counter-reset:fonction 1}
html:root[data-style] #contenu .kpis > .kpi::after{top:14px}
html:root[data-style] #contenu .kpi .v a{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;letter-spacing:0;font-size:clamp(1.35rem,1rem + .8vw,1.75rem);line-height:1.02}
html:root[data-style] #contenu #t-portes-bloc + .meta{display:none}
@media (min-width:600px) and (max-width:999px){
  html:root[data-style] #contenu .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:root[data-style] #contenu .kpis > .kpi[data-fonction="saison"]{grid-column:span 2}
}
@media (min-width:1000px){
  html:root[data-style] #contenu .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  html:root[data-style] #contenu .kpis > .stade-carte,
  html:root[data-style] #contenu .kpis:has(> .kpi[data-fonction="convoc"]) > .kpi:is([data-fonction="trajet"],[data-fonction="photo"]),
  html:root[data-style] #contenu .kpis > .kpi[data-fonction="saison"]{grid-column:span 2}
}

/* Fiche de match : cartes teintées par la fonction qu elles annoncent, en grille au-delà de 1 024 px. */
html:root[data-style] #fiche > .card:has(> [data-bloc="groupe"]){--f-fond:var(--mosa-menthe);--f-vif:var(--mosa-menthe-vif);--f-encre:var(--mosa-menthe-encre)}
html:root[data-style] #fiche > .card[data-bloc="transport"]{--f-fond:var(--mosa-ciel);--f-vif:var(--mosa-ciel-vif);--f-encre:var(--mosa-ciel-encre)}
html:root[data-style] #fiche > .card:has(> :is([data-bloc="logistique"],[data-bloc="roles"])){--f-fond:var(--mosa-sable);--f-vif:var(--mosa-sable-vif);--f-encre:var(--mosa-sable-encre)}
html:root[data-style] #fiche > .card:has(> [data-bloc="score"]){--f-fond:var(--mosa-rose);--f-vif:var(--mosa-rose-vif);--f-encre:var(--mosa-rose-encre)}
html:root[data-style] #fiche > .card:is(:has(> :is([data-bloc="groupe"],[data-bloc="logistique"],[data-bloc="roles"],[data-bloc="score"])),[data-bloc="transport"]){--fn-tuile:var(--f-fond);--fn-vif:var(--f-vif);--fn-encre:var(--f-encre);--focus-ring:var(--f-encre);background:var(--f-fond);border-color:var(--f-encre)}
/* Blocs encore vides : un dessin discret de ce qui viendra (pastilles, sièges, tirets du score). */
html:root[data-style] #fiche :is([data-bloc="groupe"],[data-bloc="trajets"],[data-bloc="logistique"],[data-bloc="roles"],[data-bloc="score"]):empty{display:block;margin-top:var(--esp-3,12px);border-radius:999px;background-color:var(--surface)}
html:root[data-style] #fiche [data-bloc="groupe"]:empty{block-size:44px;background-image:radial-gradient(circle,transparent 0 6px,var(--f-encre) 6.5px 9px,transparent 9.5px),linear-gradient(var(--surface),var(--surface));background-size:26px 44px,auto;background-repeat:space no-repeat,no-repeat;background-origin:content-box,border-box;background-clip:content-box,border-box;padding-inline:20px;box-sizing:border-box}
html:root[data-style] #fiche [data-bloc="trajets"]:empty{block-size:56px;background-image:radial-gradient(circle,transparent 0 10px,var(--f-encre) 10.5px 13px,transparent 13.5px),linear-gradient(var(--surface),var(--surface));background-size:36px 56px,auto;background-repeat:space no-repeat,no-repeat;background-origin:content-box,border-box;background-clip:content-box,border-box;padding-inline:20px;box-sizing:border-box}
html:root[data-style] #fiche [data-bloc="score"]:empty{display:flex;align-items:center;gap:14px;padding:14px 18px}
html:root[data-style] #fiche :is([data-bloc="logistique"],[data-bloc="roles"]):empty{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px}
html:root[data-style] #fiche :is([data-bloc="logistique"],[data-bloc="roles"]):empty::before,html:root[data-style] #fiche :is([data-bloc="logistique"],[data-bloc="roles"]):empty::after{content:"";box-sizing:border-box;inline-size:min(40%,120px);block-size:26px;border:3px solid var(--f-encre);border-radius:999px}
html:root[data-style] #fiche [data-bloc="logistique"]:empty::before{background:var(--f-vif)}
html:root[data-style] #fiche [data-bloc="score"]:empty::before,html:root[data-style] #fiche [data-bloc="score"]:empty::after{content:"";box-sizing:border-box;inline-size:64px;block-size:22px;border:3px solid var(--f-encre);border-radius:7px}
html:root[data-style][data-contrast="high"] #fiche [data-bloc="score"]:empty::before,html:root[data-style][data-contrast="high"] #fiche [data-bloc="score"]:empty::after{background:var(--f-encre)}
/* Flottants dans un bloc (et non une grille) : le titre collant de P10 garde sa course exacte (une grille ou une
   boîte souple autour de lui arrête --p10-compact juste avant 1). Hauteur minimale en em par rangée. */
@media (min-width:1024px){
  html:root[data-style] #fiche{display:flow-root;--fiche-ecart:16px}
  html:root[data-style] #fiche > .card:is(:has(> :is([data-bloc="groupe"],[data-bloc="logistique"],[data-bloc="roles"],[data-bloc="score"])),[data-bloc="transport"]){float:left;box-sizing:border-box;margin-inline:0}
  html:root[data-style] #fiche > .card:is(:has(> [data-bloc="groupe"]),[data-bloc="transport"]){inline-size:calc((100% - var(--fiche-ecart)) / 2);min-block-size:14em}
  html:root[data-style] #fiche > .card[data-bloc="transport"]{margin-inline-start:var(--fiche-ecart)}
  html:root[data-style] #fiche > .card:has(> :is([data-bloc="logistique"],[data-bloc="roles"],[data-bloc="score"])){inline-size:calc((100% - var(--fiche-ecart) * 2) / 3);min-block-size:15em;margin-inline-start:var(--fiche-ecart)}
  html:root[data-style] #fiche > .card:has(> [data-bloc="logistique"]){clear:left;margin-inline-start:0}
  html:root[data-style] #fiche > .card:has(> [data-bloc="logistique"]) ~ :not(.card:has(> :is([data-bloc="roles"],[data-bloc="score"]))){clear:both}
  html:root[data-style] #fiche:has(> .card[data-bloc="transport"][hidden]) > .card:has(> [data-bloc="groupe"]){float:none;inline-size:auto;min-block-size:0}
}

/* Convocation à 1 440 px : le titre tient sur deux lignes. */
@media (min-width:1024px){html:root[data-style] #convoc .typo-titre{max-inline-size:none}}

@media (forced-colors:active){
  html:root[data-style] :is(.vide-voiture > span,.vide-cadres > span){border-color:CanvasText}
  html:root[data-style] .vide-file > span::before{border-color:CanvasText}
}
/* TEM-MOSAIQUE-VIDES fin */


/* Page Offres (/app/paye.html) : trois tuiles d offre, prix en chiffres monumentaux orchidée.
   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-OFFRES début */
/* Gabarit de la tuile Offres de la vitrine (ancre P2) : sur la carte orchidée de l écran, Gratuit et Club en
   tuiles blanches, Pass équipe au centre sur le vif ; nom en capitales espacées, prix en condensé monumental
   dans l encre orchidée, ce que comprend l offre en lignes arrondies cochées, offres club en lignes blanches
   arrondies au prix condensé. Montants servis par paye_info (products.js et réglages). Aucun cadre en
   contraste normal ; en renforcé, cadre de 2 px dans l encre orchidée (--f-bord). Repli des autres designs :
   tem.css, ancre TEM-MOSAIQUE-REPLI-OFFRES. */
html:root[data-style] .paye-liste{gap:clamp(12px,1.3vw,18px);margin-top:var(--esp-4)}
html:root[data-style] .paye-tuile{padding:clamp(22px,2.4vw,30px);background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r-grand);box-shadow:none;--muted:var(--text)}
html:root[data-style] .paye-tuile.paye-reco{background:var(--f-vif)}
html:root[data-style] .paye-nom{font-size:.84rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .paye-montant{margin-top:var(--esp-3);font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:clamp(4.2rem,2.6rem + 3.6vw,6.8rem);line-height:.85;letter-spacing:-.01em;color:var(--f-encre)}
html:root[data-style] .paye-reco :is(.paye-nom,.paye-montant){color:var(--text)}
html:root[data-style] .paye-devise{font-size:.5em}
html:root[data-style] .paye-des{display:inline-block;margin-right:.18em;font-size:.24em;letter-spacing:.1em;text-transform:uppercase;vertical-align:.25em}
html:root[data-style] .paye-unite{font-weight:700}
html:root[data-style] .paye-inclus li{padding:9px 14px 9px 42px;border-radius:14px;background:var(--f-fond);font-weight:700}
html:root[data-style] .paye-reco .paye-inclus li{background:var(--surface)}
html:root[data-style] .paye-inclus li::before{content:"";position:absolute;left:18px;top:50%;margin-top:-10px;inline-size:7px;block-size:13px;border-right:3px solid var(--f-encre);border-bottom:3px solid var(--f-encre);transform:none;rotate:45deg}
html:root[data-style] .paye-clubs li{padding:10px 12px 10px 16px;border-radius:16px;background:var(--f-fond);font-weight:700}
html:root[data-style] .paye-club-prix{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);line-height:1;color:var(--f-encre)}
html:root[data-style] .paye-vente{margin:var(--esp-4) 0 0}
html:root[data-style] .paye-vente-texte{font-weight:600}
html:root[data-style][data-contrast="high"] :is(.paye-inclus li,.paye-clubs li){outline:var(--f-bord) solid var(--f-encre);outline-offset:-2px}
@media (max-width:480px){html:root[data-style] .paye-tuile{padding:20px 18px 20px;border-radius:var(--stade-r)}}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .paye-tuile{transition:translate .25s ease}
  html:root[data-style] .paye-tuile:has(.paye-action:hover,.btn:hover){translate:0 -3px}
}
/* TEM-MOSAIQUE-OFFRES fin */


/* Pages juridiques : en-tête monumental ardoise, sommaire en tuiles, sections en cartes.
   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-JURIDIQUE début */
/* Pages juridiques (body data-fonction="juridique", teinte ardoise) : l article devient un fond nu ; en-tête
   monumental sur la tuile ardoise (sur-titre, titre avec bandeau sur le vif, chapô, ligne de version) ;
   sommaire en tuiles blanches numérotées ; une carte blanche par section ; fiche de l éditeur en petites
   tuiles ardoise. Mots colorés seulement dans le chapô (.mot-couleur), jamais dans le texte juridique. */
html:root[data-theme][data-accent][data-contrast]{--jur-r-petit:20px;--jur-ecart:14px;--jur-texte:46rem;--jur-titre:clamp(2.7rem,1rem + 4.6vw,6.2rem)}
html:root[data-style] main.tem-main:has(> .juridique){max-width:1140px}
html:root[data-style] .card.juridique{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;--typo-creux-fond:var(--f-fond)}
html:root[data-style] .juridique-tete{position:relative;margin:var(--esp-4) 0 var(--esp-4);padding:clamp(24px,4vw,56px) clamp(22px,4vw,56px);border-radius:var(--stade-r-grand);background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .juridique-sur{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin:0 0 .5em;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1rem,.8rem + .9vw,1.6rem);line-height:1;letter-spacing:.035em;color:var(--f-fond);-webkit-text-stroke:max(1px,.04em) var(--text);paint-order:stroke fill}
html:root[data-style] .juridique-pastille{display:inline-block;padding:.32em .7em .26em;border-radius:999px;background:var(--f-vif);color:var(--text);-webkit-text-stroke:0;font-size:.6em;letter-spacing:.08em}
html:root[data-style] .juridique-titre{margin:0;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:var(--jur-titre);line-height:.95;letter-spacing:var(--typo-espacement);color:var(--text);overflow-wrap:normal;hyphens:manual}
html:root[data-style] .juridique-titre > span{display:block;width:fit-content;max-width:100%}
html:root[data-style] .juridique-bandeau{margin:.08em 0 0 -.12em;padding:.07em .2em .01em;border-radius:var(--typo-bandeau-r);background:var(--f-vif);transform:rotate(var(--typo-bandeau-penche,-1deg))}
html:root[data-style] .juridique-chapo{max-width:var(--jur-texte);margin:var(--esp-4) 0 0;color:var(--text);font-size:1.02rem}
html:root[data-style] .juridique-tete .meta{max-width:var(--jur-texte);margin:var(--esp-4) 0 0;color:var(--text);font-size:.84rem}
html:root[data-style] .juridique-tete .meta a{color:var(--f-encre)}

/* Sommaire en tuiles : numéro en contour dans l encre ardoise, titre ; survol sur le vif ardoise. */
html:root[data-style] .juridique .toc{margin:0 0 var(--esp-4)}
html:root[data-style] .juridique .toc > strong{display:block;margin:0 0 var(--esp-2) 4px;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .juridique .toc > ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--jur-ecart);counter-reset:jur}
html:root[data-style] .juridique .toc li{counter-increment:jur}
html:root[data-style] .juridique .toc a{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:14px 16px 16px;border-radius:var(--jur-r-petit);background:var(--surface);color:var(--text);font-weight:750;line-height:1.25;text-decoration:none;border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .juridique .toc a::before{content:counter(jur,decimal-leading-zero) / "";font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:2.2rem;line-height:1;color:var(--surface);-webkit-text-stroke:max(1.5px,.05em) var(--f-encre);paint-order:stroke fill}
html:root[data-style] .juridique .toc a:hover{background:var(--f-vif)}
html:root[data-style] .juridique .toc a:hover::before{color:var(--f-vif)}
html:root[data-style] .juridique .toc a:focus-visible{outline:3px solid var(--f-encre);outline-offset:3px}

/* Sections : cartes blanches, titre condensé, texte en colonne de lecture. */
html:root[data-style] .juridique-corps{display:grid;gap:var(--jur-ecart);counter-reset:jursec}
html:root[data-style] .juridique-section{margin:0;padding:26px 28px;background:var(--surface);color:var(--text);border-radius:var(--stade-r-grand);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .juridique-section > *{max-width:var(--jur-texte)}
html:root[data-style] .juridique-section > h2{margin:0 0 var(--esp-3);max-width:none;font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.4rem,1rem + 1.2vw,2rem);line-height:1;letter-spacing:var(--typo-espacement)}
html:root[data-style] .juridique-a-numeroter .juridique-section{counter-increment:jursec}
html:root[data-style] .juridique-a-numeroter .juridique-section > h2::before{content:counter(jursec,decimal-leading-zero) / "";margin-right:.35em;color:var(--f-encre)}
html:root[data-style] .juridique-section a{color:var(--f-encre)}
html:root[data-style] .juridique-section > :last-child{margin-bottom:0}
html:root[data-style] .juridique-section dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px;max-width:none;margin:var(--esp-4) 0}
html:root[data-style] .juridique-paire{padding:12px 14px;border-radius:16px;background:var(--f-fond)}
html:root[data-style] .juridique-paire > dt{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .juridique-paire > dd{margin:2px 0 0;font-weight:650}
html:root[data-style] .juridique-section .info{background:var(--f-fond)}
html:root[data-style] .juridique-section table{max-width:none}
html:root[data-style] .juridique-section th{background:var(--f-fond);color:var(--text)}

@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .juridique .toc a{transition:background-color .3s var(--mouvement)}
}
@media (max-width:1024px){html:root[data-style] .juridique .toc > ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  html:root[data-style] .juridique .toc > ol{gap:10px}
  html:root[data-style] .juridique .toc a{padding:12px 14px 14px;font-size:.92rem}
  html:root[data-style] .juridique .toc a::before{font-size:1.8rem}
  html:root[data-style] .juridique-section{padding:18px;border-radius:var(--stade-r)}
  html:root[data-style] .juridique-tete{padding:22px 18px 24px}
}
@media print{html:root[data-style] .juridique .toc{display:none}}

/* En-tête des pages juridiques : navigation en pastilles et bouton de l application (juge waouh, correction 3). */
html:root[data-style] .tem-header nav.top{display:flex;flex-wrap:wrap;gap:6px;margin-left:12px}
html:root[data-style] .tem-header nav.top a{padding:6px 14px;border-radius:999px;background:var(--f-fond);color:var(--text);font-weight:600;font-size:.9rem;text-decoration:none}
html:root[data-style] .tem-header nav.top a:hover{background:var(--f-vif)}
html:root[data-style] .tem-header .btn-app{border:var(--f-bord) solid var(--f-encre);border-radius:999px;padding:6px 16px;background:var(--surface);color:var(--text);font-weight:700;white-space:nowrap;text-decoration:none}
html:root[data-style] .tem-header .btn-app:hover{background:var(--f-vif)}
html:root[data-style] .tem-header :is(nav.top a,.btn-app):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:600px){html:root[data-style] .tem-header nav.top{order:3;width:100%;margin:6px 0 0}}
/* TEM-MOSAIQUE-JURIDIQUE fin */


/* Page 404 : tuile « Ouvrir l application » à flèche ronde, titre sans coupure.
   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-ERREUR début */
/* 404 (body data-fonction="erreur", sable) : numéro 404 dans l encre sable, titre qui ne se coupe jamais au milieu
   d un mot (taille bornée à la largeur, aucune coupure forcée), carte « Lien perdu » blanche et tuile-lien
   « Ouvrir l application » sur le vif sable avec la flèche ronde. Textes inchangés (décision 29). */
html:root[data-theme][data-accent][data-contrast]{--p404-fleche:64px;--p404-titre:clamp(2.4rem,.6rem + 8.4vw,7.4rem)}
html:root[data-style] body[data-fonction="erreur"] .typo-tete{--affiche-numero:var(--f-encre)}
html:root[data-style] body[data-fonction="erreur"] .typo-tete .typo-titre{font-size:var(--p404-titre);overflow-wrap:normal;word-break:normal;hyphens:manual}
html:root[data-style] body[data-fonction="erreur"] .typo-tete .typo-bandeau{white-space:nowrap}
html:root[data-style] .p404-portes{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--esp-4);align-items:stretch}
html:root[data-style] .typo-tete[data-numero] + .p404-portes > .card{margin:0;background:var(--surface);--typo-creux-fond:var(--surface)}
html:root[data-style] .p404-portes > .p404-porte{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:0;min-height:200px;padding:24px calc(var(--p404-fleche) + 48px) 24px 28px;border-radius:var(--stade-r-grand);background:var(--f-vif);color:var(--text);text-decoration:none;text-align:left;border:var(--f-bord) solid var(--f-encre);box-shadow:none}
html:root[data-style] .p404-portes > .p404-porte:hover{background:var(--f-vif);border-color:var(--f-encre)}
html:root[data-style] .p404-porte strong{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);text-transform:uppercase;font-size:clamp(1.9rem,1.2rem + 1.8vw,2.8rem);line-height:.95;letter-spacing:var(--typo-espacement)}
html:root[data-style] .p404-porte::before{content:"";position:absolute;right:24px;top:50%;width:var(--p404-fleche);height:var(--p404-fleche);margin-top:calc(var(--p404-fleche) / -2);border-radius:50%;background:var(--f-encre)}
html:root[data-style] .p404-porte::after{content:"";position:absolute;right:calc(24px + var(--p404-fleche) * .36);top:50%;width:calc(var(--p404-fleche) * .3);height:calc(var(--p404-fleche) * .4);margin-top:calc(var(--p404-fleche) * -.2);background:var(--fn-sur-encre);clip-path:polygon(0 12%,12% 0,62% 50%,12% 100%,0 88%,38% 50%)}
html:root[data-style] .p404-porte:focus-visible{outline:3px solid var(--f-encre);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .p404-porte::before{transition:transform .25s var(--mouvement)}
  html:root[data-style] .p404-porte:hover::before{transform:scale(1.08)}
}
/* Téléphone : le numéro 404 passe au-dessus du sur-titre au lieu de le chevaucher. */
@media (max-width:600px){html:root[data-style] body[data-fonction="erreur"] .typo-tete[data-numero]{padding-top:104px}}
@media (max-width:760px){
  html:root[data-style] .p404-portes{grid-template-columns:minmax(0,1fr)}
  html:root[data-style] .p404-portes > .p404-porte{min-height:130px}
}

/* TEM-MOSAIQUE-ERREUR fin */


/* Panneau Affichage (details.tem-reglages) en brume, choix coché.
   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-PANNEAU début */
/* Panneau « Affichage » (details.tem-reglages, teinte brume posée par la portée ; groupes dessinés par
   public/assets/theme.js) : replié, pastille brume avec un disque mi-plein et un chevron ; ouvert, tuile brume
   avec une phrase d aide et trois petites tuiles blanches (apparence, taille du texte, contraste), chacune
   titrée en clair dans l encre brume. Choix proposés sur un fond brume, choix en cours sur le vif brume avec
   une coche dessinée et en gras (l état ne repose pas sur la couleur seule). Aucun cadre en contraste normal ;
   en contraste renforcé, cadres de 2 px dans l encre brume (--f-bord), annoncés par la note du groupe Contraste. */
html:root[data-style] .tem-reglages > summary{display:inline-flex;align-items:center;gap:.6em;border-radius:999px;padding:8px 16px 8px 12px;list-style:none;cursor:pointer}
html:root[data-style] .tem-reglages > summary::-webkit-details-marker{display:none}
html:root[data-style] .tem-reglages > summary::before{content:"";flex:none;width:1.05em;height:1.05em;border-radius:50%;background:linear-gradient(90deg,var(--text) 50%,var(--surface) 50%)}
html:root[data-style] .tem-reglages > summary::after{content:"";flex:none;width:.42em;height:.42em;border-right:2.5px solid var(--f-encre);border-bottom:2.5px solid var(--f-encre);transform:rotate(45deg) translateY(-2px)}
html:root[data-style] .tem-reglages[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
html:root[data-style] .tem-reglages > summary:focus-visible{outline:3px solid var(--f-encre);outline-offset:3px}
html:root[data-style] .tem-reglages > .tem-choix{margin-top:var(--esp-3);padding:16px;border-radius:var(--stade-r-grand);background:var(--f-fond);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .tem-reglages .tem-theme{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
html:root[data-style] .tem-reglages .tem-aide{flex:1 1 100%;margin:0 0 2px 6px;font-size:.88rem;font-weight:600;color:var(--text)}
html:root[data-style] .tem-reglages .tem-groupe{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:12px 12px 14px;border:var(--f-bord) solid var(--f-encre);border-radius:20px;background:var(--surface);box-shadow:none}
html:root[data-style] .tem-reglages .tem-groupe-titre{margin:0 0 0 4px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--f-encre)}
html:root[data-style] .tem-reglages .tem-groupe .seg{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;border:0;border-radius:0;overflow:visible;background:transparent}
html:root[data-style] .tem-reglages .tem-groupe .seg button{font-family:inherit;display:inline-flex;align-items:center;min-height:38px;border:var(--f-bord) solid var(--f-encre);border-radius:999px;background:var(--f-fond);color:var(--text);padding:7px 14px;font-size:.9rem;font-weight:650;box-shadow:none;cursor:pointer}
html:root[data-style] .tem-reglages .tem-groupe .seg button[aria-pressed="true"]{background:var(--f-vif);color:var(--text);font-weight:800}
html:root[data-style] .tem-reglages .tem-groupe .seg button[aria-pressed="true"]::before{content:"";flex:none;width:.32em;height:.62em;margin:0 .5em .18em 0;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)}
html:root[data-style] .tem-reglages .tem-groupe .seg button:hover{background:color-mix(in srgb,var(--f-vif) 55%,var(--f-fond))}
html:root[data-style] .tem-reglages .tem-groupe .seg button:focus-visible{outline:3px solid var(--f-encre);outline-offset:2px}
html:root[data-style] .tem-reglages .tem-groupe-note{margin:0 0 0 4px;font-size:.82rem;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .tem-reglages > summary,html:root[data-style] .tem-reglages .tem-groupe .seg button{transition:background-color .25s var(--mouvement)}
  html:root[data-style] .tem-reglages > summary::after{transition:transform .25s var(--mouvement)}
}
@media (forced-colors:active){
  html:root[data-style] .tem-reglages .tem-groupe{border:2px solid CanvasText}
  html:root[data-style] .tem-reglages .tem-groupe .seg button[aria-pressed="true"]{outline:2px solid Highlight}
}

/* TEM-MOSAIQUE-PANNEAU fin */

/* TEM-LIENS début */
/* Lot LIENS-0013, agent L3 : arrivée par invitation, « Je suis », fratrie, oubli, invitation perdue et fil
   tactile de la convocation (spec 3.3, décisions 24 et 25). © 2026 Ghislain DEMONDA – Tous droits réservés.
   À coller par l orchestrateur dans public/assets/themes/theme-mosaique.css, après TEM-MOSAIQUE-PANNEAU.
   Variables seulement (--f-*, --mosa-*, --text, --surface, --focus-ring) : clair et sombre suivent la palette,
   le contraste renforcé passe par --f-bord (cadre dans l encre de la teinte, jamais noir). Balisage :
   public/app/index.html, convoc.html, trajet.html (blocs data-bloc et classes lien-*, ancres TEM-LIENS) ;
   mise en page : web/app/src/lien.css. Mouvement seulement sous prefers-reduced-motion: no-preference.
   Hors Mosaïque : aucun repli à coller, les cartes et boutons gardent le rendu du socle (tem.css). */
html:root[data-style]{--lien-puce-bord:2px;--lien-r:var(--stade-r,24px);--lien-duree:.28s}
html:root[data-style][data-contrast="high"]{--lien-puce-bord:3px}

/* Fil tactile de la convocation : la carte prend le fond de la teinte de l écran (menthe), cadre en contraste renforcé. */
html:root[data-style] .lien-convoc{background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--lien-r)}
html:root[data-style] .lien-convoc > h2{color:var(--text)}
html:root[data-style] .lien-convoc .lien-quand{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--f-vif);color:var(--text)}
html:root[data-style] .lien-convoc .lien-heure{color:var(--text);font-weight:700}
html:root[data-style] .lien-convoc .lien-lieu,html:root[data-style] .lien-convoc .meta,html:root[data-style] .lien-convoc .lien-legende{color:var(--text)}

/* Prénoms et équipes : pastilles sur la carte, cadre dans l encre ; choisi = vif et coche (règle P12 des boutons pressés). */
html:root[data-style] .lien-choix .lien-puce{color:var(--text);border:var(--lien-puce-bord) solid var(--f-encre);border-radius:999px}
html:root[data-style] .lien-choix .lien-puce:not([aria-pressed="true"]){background:var(--surface)}
html:root[data-style] .lien-choix .lien-puce[aria-pressed="true"]{background:var(--f-vif);color:var(--text)}
html:root[data-style] .lien-choix .lien-puce:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--f-vif) 45%,var(--surface))}

/* Présent : encre de la teinte, texte sur encre. Absent : même forme dans la teinte rose (score), sans signal d alarme. */
html:root[data-style] .lien-reponse{border-radius:18px;border:var(--lien-puce-bord) solid var(--f-encre)}
html:root[data-style] .lien-reponse[data-reponse="present"]:not([aria-pressed="true"]){background:var(--f-encre);color:var(--fn-sur-encre)}
html:root[data-style] .lien-reponse[data-reponse="absent"]{--f-fond:var(--mosa-rose);--f-vif:var(--mosa-rose-vif);--f-encre:var(--mosa-rose-encre)}
html:root[data-style] .lien-reponse[data-reponse="absent"]:not([aria-pressed="true"]){background:var(--surface);color:var(--text)}

/* Confirmation sobre avec les compteurs du serveur : pastille sur le vif, coche dans l encre. */
html:root[data-style] .lien-confirmation:not(:empty){display:flex;inline-size:fit-content;align-items:center;gap:.55em;padding:.45em 1.1em .45em .9em;border-radius:20px;background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] .lien-confirmation:not(:empty)::before{content:"";flex:none;inline-size:var(--coche-l,.38em);block-size:var(--coche-h,.72em);border:solid var(--f-encre);border-width:0 var(--coche-ep,.15em) var(--coche-ep,.15em) 0;rotate:45deg;margin-block-start:-.22em}
html:root[data-style] .lien-compteurs{color:var(--text);font-weight:700}

/* Coupure : réponse gardée dans la page, cadre en tirets dans l encre, sans couleur d alerte. */
html:root[data-style] .lien-reprise{padding:.5em 1em;border-radius:16px;background:var(--surface);color:var(--text);border:var(--lien-puce-bord) dashed var(--f-encre)}

/* Trajet du même match : souligné et chevron dans l encre de la teinte du trajet (ciel). */
html:root[data-style] .lien-trajet{gap:.6em;color:var(--text);text-decoration:underline;text-decoration-color:var(--mosa-ciel-encre);text-decoration-thickness:2px;text-underline-offset:.2em}
html:root[data-style] .lien-trajet::after{content:"";flex:none;inline-size:.55em;block-size:.55em;border:solid var(--mosa-ciel-encre);border-width:.18em .18em 0 0;rotate:45deg;margin-inline-start:.05em}

/* Cartes d arrivée : invitation perdue (sable, ton neutre), invitation oubliée et équipe courante sur la carte. */
html:root[data-style] .lien-carte{background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--lien-r)}
html:root[data-style] .lien-carte[data-bloc="invitation-perdue"]{--f-fond:var(--mosa-sable);--f-vif:var(--mosa-sable-vif);--f-encre:var(--mosa-sable-encre);background:var(--f-fond)}
html:root[data-style] .lien-carte[data-bloc="ton-equipe"] [data-champ="equipe-nom"]{padding:0 .3em;border-radius:10px;background:var(--f-vif);color:var(--text)}
html:root[data-style] .lien-carte .meta{color:var(--text)}

/* Focus : anneau de la palette sur les titres focalisés par le script (invitation perdue, oubliée). */
html:root[data-style] :is(.lien-carte,.lien-convoc) h2[tabindex="-1"]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:6px}

@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .lien-confirmation:not(:empty),html:root[data-style] .lien-carte:not([hidden]),html:root[data-style] .lien-convoc:not([hidden]){animation:lien-entre var(--lien-duree) var(--mouvement,ease-out) both}
  html:root[data-style] .lien-choix .lien-puce{transition:background-color var(--lien-duree) var(--mouvement,ease-out)}
}
@keyframes lien-entre{from{opacity:0;translate:0 6px}}
@media (forced-colors:active){
  html:root[data-style] .lien-choix .lien-puce[aria-pressed="true"],html:root[data-style] .lien-reponse[aria-pressed="true"]{border:3px solid CanvasText}
}
/* TEM-LIENS fin */


/* TEM-CLUBS début */
/* ======================================================================
   Écran « Ton club » (public/app/clubs.html) : teinte prairie pour data-fonction="benevoles"
   (spec J-BENEVOLES, décision 12). Les quatre jetons --f-fond, --f-vif, --f-encre suivent les
   primitives --mosa-prairie* déjà déclarées en clair, sombre et contraste renforcé ; --f-bord vaut
   0 en contraste normal et 2 px en renforcé (bloc commun du nuancier). Le lot BENEVOLES (agent P4)
   réutilise la ligne de portée (partie A, dans le bloc TEM-MOSAIQUE) : ne pas la redéclarer sous TEM-BENEVOLES.
   Cartes de la page : « Ton club » sur le fond prairie (carte data-fonction="benevoles"), « Équipes
   rattachées » blanche avec tuiles prairie, « Invitations » sable (messagerie), « Code de gestion »
   ardoise (securite), « Offre du club » orchidée (offres). Texte toujours --text sur fond et vif.
   ====================================================================== */

/* Tuiles blanches dans la carte prairie (deux portes, faits, confirmation), tuiles prairie dans la carte blanche. */
html:root[data-style] body[data-fonction="benevoles"] :is(.club-form.kpi,.club-faits > .kpi,.club-confirmer.kpi,.club-invit){background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r);box-shadow:none}
html:root[data-style] body[data-fonction="benevoles"] .club-equipe{background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r);box-shadow:none;--muted:var(--text);--stade-pied:var(--text)}
html:root[data-style] body[data-fonction="benevoles"] .club-fait-v{color:var(--f-encre)}
html:root[data-style] body[data-fonction="benevoles"] .club-equipe-cat{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--f-vif);color:var(--text)}
html:root[data-style] body[data-fonction="benevoles"] .club-case input{accent-color:var(--f-encre)}
html:root[data-style] body[data-fonction="benevoles"] .club-equipe .club-confirmer{padding:14px 16px;border-radius:16px;background:var(--surface)}

/* État vide : tuile en pointillés dans l encre de la teinte, jamais en noir. */
html:root[data-style] body[data-fonction="benevoles"] .club-vide{background:transparent;color:var(--text);border:2px dashed var(--f-encre);border-radius:var(--stade-r-grand);box-shadow:none}
html:root[data-style] body[data-fonction="benevoles"] .club-vide-titre{color:var(--f-encre)}
html:root[data-style] body[data-fonction="benevoles"] .club-invit-fini{background:transparent;border:2px dashed var(--f-encre)}

/* Code de gestion montré une seule fois : valeur sur blanc, cadre en tirets dans l encre ardoise de la carte. */
html:root[data-style] body[data-fonction="benevoles"] :is(.club-code-v,.club-id-v){background:var(--surface);color:var(--text);border:2px dashed var(--f-encre);border-radius:18px;box-shadow:none}
html:root[data-style] body[data-fonction="benevoles"] .club-valeurs dt{color:var(--text)}

/* Échéance de l invitation et messages d état : pastilles lisibles, texte plein. */
html:root[data-style] body[data-fonction="benevoles"] .club-echeance{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--f-vif);color:var(--text)}
html:root[data-style] body[data-fonction="benevoles"] .club-etat:not(:empty){display:inline-block;padding:6px 16px;border-radius:999px;background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre)}
html:root[data-style] body[data-fonction="benevoles"] .club-note{color:var(--text)}

/* Contraste renforcé : cadres pleins de 3 px dans l encre de la teinte. */
html:root[data-style][data-contrast="high"] body[data-fonction="benevoles"] :is(.club-vide,.club-invit-fini,.club-code-v,.club-id-v){border-width:3px;border-style:solid}
html:root[data-style][data-contrast="high"] body[data-fonction="benevoles"] .club-equipe-cat{border:2px solid var(--f-encre)}

/* Mouvement : apparition douce du code, de l invitation prête et des confirmations, seulement si le système l accepte. */
@keyframes club-entre{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] body[data-fonction="benevoles"] :is(.club-code,.club-pret,.club-confirmer):not([hidden]){animation:club-entre .28s cubic-bezier(.2,.8,.2,1) both}
}
/* TEM-CLUBS fin */

/* TEM-MOSAIQUE-REPRISE2 début */
/* ======================================================================
   Reprise du juge « effet waouh », deuxième passage (note 7,8) : huit corrections, dans l ordre du rapport.
   Toutes les règles sont gardées html:root[data-style] et ne vivent que dans ce design : Classique, Affiche
   et Tribune ne changent pas. Couleurs par variables seulement, aucun mouvement ajouté.
   ====================================================================== */

/* 1. Boutons et champs dans la police du texte (plus d Arial, police par défaut du navigateur pour button).
   :where() garde une spécificité faible : toute police posée par un composant (chiffres, pastilles) l emporte. */
html:root[data-style] :where(button,.btn,input,select,textarea){font-family:inherit}

/* 2. Têtes d écran à 1 024 px et plus : une action visible sans défiler. Titre plafonné, parties pleine et creuse
   sur une même ligne, le bandeau dessous (l effet d affiche reste : plein, contour, bandeau, grand numéro).
   Interligne 1,02 partout : les accents des capitales (É, Î, Ù) ne touchent plus la ligne du dessus. */
html:root[data-style] .typo-tete .typo-titre{line-height:1.02}
/* Titre collant de Fiche et Roulements (P10) : l interligne revient à 0,96 une fois compact (une ligne, sans accent
   en danger), la course du défilement garde ainsi sa géométrie d origine et --p10-compact atteint bien 1. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-titre{line-height:calc(1.02 - .06 * var(--p10-compact))}
  }
}
@media (min-width:1024px){
  html:root[data-style] body:not([data-fonction="erreur"]) .tem-main > .typo-tete{--affiche-titre:clamp(2.9rem,.9rem + 5.4vw,6.4rem);--p10-pad:clamp(24px,2.6vw,44px);padding-block:var(--p10-pad)}
  html:root[data-style] body:not([data-fonction="erreur"]) .tem-main > .typo-tete .typo-titre > span:not(.typo-bandeau){display:inline}
  html:root[data-style] body:not([data-fonction="erreur"]) .tem-main > .typo-tete .typo-titre > .typo-bandeau{margin-top:.12em}
  html:root[data-style] body:not([data-fonction="erreur"]) .tem-main > .typo-tete .typo-chapo{margin-top:var(--esp-3,12px)}
  html:root[data-style] body:not([data-fonction="erreur"]) .tem-main > .typo-tete[data-numero]::after{font-size:clamp(7rem,1rem + 9vw,13rem)}
}
/* Fiche et Roulements (titre collant de P10, en boîte souple) : la partie pleine et la creuse partagent la ligne,
   le bandeau passe dessous en haut de page grâce à un saut invisible (largeur 100 % qui fond à 0 une fois compact),
   et tout tient sur une ligne une fois le titre compact. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete{padding-block:calc(var(--p10-pad) * (1 - var(--p10-compact)) + var(--p10-pad-compact) * var(--p10-compact))}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-titre > span{margin-inline-end:0;order:1}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-titre > .typo-bandeau{order:3}
    html:root[data-style] body:is([data-fonction="fiche"],[data-fonction="roulements"]) .tem-main > .typo-tete .typo-titre::after{content:"";order:2;flex:0 0 calc((1 - var(--p10-compact)) * 100%);block-size:0;margin-inline-start:calc(-.28em * (1 - var(--p10-compact)))}
  }
}

/* 3. Vitrine : clip coupe comme hidden sans créer de conteneur de défilement ; la timeline view() des bandeaux
   de titre retrouve la page et chaque bandeau se déroule en entier (plus de « PAR SA|ISON » ni « DE|MANDENT »). */
html:root[data-style] .v2{overflow:clip}

/* 4. En-tête des pages juridiques à 600 px et moins : la navigation passe à la ligne sous la marque et le bouton,
   la marque reste sur une ligne, le message du site est masqué. */
@media (max-width:600px){
  html:root[data-style] .tem-header:has(nav.top){flex-wrap:wrap;row-gap:10px}
  html:root[data-style] .tem-header:has(nav.top) .tem-tagline{display:none}
  html:root[data-style] .tem-header:has(nav.top) .tem-brand{flex:0 1 auto;white-space:nowrap}
  html:root[data-style] .tem-header:has(nav.top) nav.top{margin:0}
  html:root[data-style] .tem-header:has(nav.top) .sp{display:none}
  html:root[data-style] .tem-header:has(nav.top) .btn-app{margin-inline-start:auto;padding:6px 12px;font-size:.84rem}
}

/* 5. Convocation à 1 440 px : le compteur prend la largeur du bloc vide qui le prolonge (plus de marche blanche).
   Accueil : avec la tuile Ton club, Ta saison redevient une tuile simple ; les tuiles de gestion remplissent leur rangée. */
html:root[data-style] [data-bloc="compteurs"]:not(:has(.tem-pastilles)):has(+ .tem-vide){max-width:none}
@media (min-width:1024px){html:root[data-style] .vide-convoc .vide-phrase{max-width:none}}
@media (min-width:600px){
  html:root[data-style] #contenu .kpis:has(> .kpi[data-fonction="benevoles"]) > .kpi[data-fonction="saison"]{grid-column:span 1}
}

/* 6. Score : l état vide se lit comme un état, pas comme deux champs. « — à — » comme le score confirmé
   (« 54 à 48 ») : deux tirets pleins dans l encre rose à la place des chiffres, jamais un cadre vide
   qui inviterait à taper. Rien à cliquer, rien à saisir ; le dessin reste décoratif (aria-hidden). */
html:root[data-style] .vide-score .vide-chiffres{align-items:center;gap:0 .32em;min-block-size:calc(var(--chiffre-taille) * .62);--chiffre-taille:clamp(4.2rem,30cqi,8rem);font-size:var(--chiffre-taille)}
html:root[data-style] .vide-tiret{display:inline-block;flex:none;font-size:0;inline-size:calc(var(--chiffre-taille) * .62);block-size:max(8px,calc(var(--chiffre-taille) * .11));border-radius:999px;background:var(--f-encre)}
html:root[data-style] .vide-a{font-family:var(--typo-police);font-stretch:var(--typo-largeur);font-weight:var(--typo-graisse);font-size:calc(var(--chiffre-taille) * .42);line-height:1;color:var(--text)}
@media (forced-colors:active){html:root[data-style] .vide-tiret{forced-color-adjust:none;background:CanvasText}}

/* 7. Journal d administration : libellés en français, aucun mot coupé au milieu (« admin_l / ogin »). */
html:root[data-style] .admin-mosaique .adm-journal td{overflow-wrap:break-word;word-break:normal}
/* TEM-MOSAIQUE-REPRISE2 fin */
/* TEM-STATS début */
/* Écran « Saisie du match » (lot K-STATS-1, spec 9.2) : rose du score pour l écran, une teinte par tâche,
   mot toujours écrit ; aucun rouge d alerte sur un enfant (la cinquième faute est soulignée, jamais rougie). */
.st-saisie{--t-fond:var(--f-fond);--t-vif:var(--f-vif);--t-encre:var(--f-encre)}
.st-saisie [data-tache="points"]{--t-fond:var(--mosa-rose);--t-vif:var(--mosa-rose-vif);--t-encre:var(--mosa-rose-encre)}
.st-saisie [data-tache="rebonds"]{--t-fond:var(--mosa-ciel);--t-vif:var(--mosa-ciel-vif);--t-encre:var(--mosa-ciel-encre)}
.st-saisie [data-tache="passes"]{--t-fond:var(--mosa-lagon);--t-vif:var(--mosa-lagon-vif);--t-encre:var(--mosa-lagon-encre)}
.st-saisie [data-tache="interceptions"]{--t-fond:var(--mosa-menthe);--t-vif:var(--mosa-menthe-vif);--t-encre:var(--mosa-menthe-encre)}
.st-saisie [data-tache="contres"]{--t-fond:var(--mosa-lavande);--t-vif:var(--mosa-lavande-vif);--t-encre:var(--mosa-lavande-encre)}
.st-saisie [data-tache="fautes"]{--t-fond:var(--mosa-sable);--t-vif:var(--mosa-sable-vif);--t-encre:var(--mosa-sable-encre)}
.st-saisie [data-tache="pertes"]{--t-fond:var(--mosa-brume);--t-vif:var(--mosa-brume-vif);--t-encre:var(--mosa-brume-encre)}
.st-saisie :is([data-tache="rotation"],[data-tache="adversaire"]){--t-fond:var(--mosa-ardoise);--t-vif:var(--mosa-ardoise-vif);--t-encre:var(--mosa-ardoise-encre)}
.st-saisie [data-defense="individuelle"]{--t-fond:var(--mosa-ciel);--t-vif:var(--mosa-ciel-vif);--t-encre:var(--mosa-ciel-encre)}
.st-saisie [data-defense="zone"]{--t-fond:var(--mosa-lavande);--t-vif:var(--mosa-lavande-vif);--t-encre:var(--mosa-lavande-encre)}
.st-saisie [data-defense="presse"]{--t-fond:var(--mosa-peche);--t-vif:var(--mosa-peche-vif);--t-encre:var(--mosa-peche-encre)}

/* Tableau du match : tuile rose, score monumental, score adverse en contour */
html:root[data-style] .st-saisie .st-tableau{background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r-grand)}
html:root[data-style] .st-saisie .st-direct{background:var(--f-encre);color:var(--fn-sur-encre);border-radius:999px}
html:root[data-style] .st-saisie .st-direct::before{background:var(--fn-sur-encre);border-radius:50%}
html:root[data-style] .st-saisie .st-equipe b{color:var(--text)}
html:root[data-style] .st-saisie .st-equipe.adv b{color:transparent;-webkit-text-stroke:max(2px,.024em) var(--f-encre)}
html:root[data-style] .st-saisie .st-tiret{color:var(--f-encre)}
html:root[data-style] .st-saisie .st-periode{background:var(--surface);color:var(--text);border-radius:14px}
html:root[data-style] .st-saisie .st-tache{background:var(--t-vif);color:var(--text);border-radius:999px}
html:root[data-style] .st-saisie .st-tache::before{background:var(--t-encre);border-radius:50%}
html:root[data-style] .st-saisie .st-avis{background:var(--warnbg);color:var(--text);border-radius:16px}

/* Tâches, panneau, gestes en deux clics */
html:root[data-style] .st-saisie .st-tache-btn[aria-pressed="true"]{background:var(--t-vif);border-color:var(--t-encre);color:var(--text)}
html:root[data-style] .st-saisie .st-bloc{background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r-grand)}
html:root[data-style] .st-saisie .st-clics li{background:var(--bloc-fond);color:var(--text);border-radius:999px}
html:root[data-style] .st-saisie .st-clics li > span{background:var(--surface);color:var(--text);border:2px solid var(--t-encre);border-radius:50%}
html:root[data-style] .st-saisie .st-clics li.fait > span{background:var(--t-encre);color:var(--fn-sur-encre)}
html:root[data-style] .st-saisie .st-clics li[aria-current="step"]{background:var(--t-vif)}

/* Tuiles des joueurs */
html:root[data-style] .st-saisie .st-joueur{background:var(--bloc-fond);color:var(--text);border:0;border-radius:22px;box-shadow:none}
html:root[data-style] .st-saisie .st-joueur:hover{background:var(--t-fond)}
html:root[data-style] .st-saisie .st-joueur em{background:var(--surface);color:var(--text);border-radius:999px}
html:root[data-style] .st-saisie .st-joueur:is([data-etat="choisi"],[data-etat="passeur"],[data-etat="sortant"]){background:var(--t-encre);color:var(--fn-sur-encre)}
html:root[data-style] .st-saisie .st-joueur:is([data-etat="choisi"],[data-etat="passeur"],[data-etat="sortant"]) em{background:var(--fn-sur-encre);color:var(--text)}
html:root[data-style] .st-saisie .st-joueur:is([data-etat="cible"],[data-etat="entrant"]){background:var(--t-fond);border:2.5px solid var(--t-encre)}
html:root[data-style] .st-saisie .st-joueur:is([data-etat="cible"],[data-etat="entrant"]) em{background:var(--t-vif)}
html:root[data-style] .st-saisie .st-joueur:is([data-etat="cible"],[data-etat="entrant"]):hover{background:var(--t-vif)}
html:root[data-style] .st-saisie .st-joueur .qui[data-max],html:root[data-style] .st-saisie .st-num span[data-max]{text-decoration:underline;text-decoration-color:var(--t-encre);text-decoration-thickness:.14em;text-underline-offset:.2em}
html:root[data-style] .st-saisie .st-joueur.st-banc{background:var(--surface);border:2px dashed var(--t-encre)}
html:root[data-style] .st-saisie .st-joueur.st-adverse{background:var(--t-fond)}
html:root[data-style] .st-saisie .st-joueur.st-adverse:hover{background:var(--t-vif)}
html:root[data-style] .st-saisie .st-mini-btn{background:var(--surface);color:var(--text);border:2px solid var(--t-encre);border-radius:999px;box-shadow:none}
html:root[data-style] .st-saisie .st-mini-btn:hover{background:var(--t-fond)}

/* Actions, défense, pavé des numéros */
html:root[data-style] .st-saisie .st-action{background:var(--t-vif);color:var(--text);border:0;border-radius:22px;box-shadow:none}
html:root[data-style] .st-saisie .st-action:hover{background:var(--t-fond)}
html:root[data-style] .st-saisie .st-action[aria-pressed="true"]{background:var(--t-encre);color:var(--fn-sur-encre)}
html:root[data-style] .st-saisie .st-num,html:root[data-style] .st-saisie .st-touche{background:var(--bloc-fond);color:var(--text);border:0;border-radius:16px;box-shadow:none}
html:root[data-style] .st-saisie :is(.st-num,.st-touche):hover{background:var(--t-vif)}
html:root[data-style] .st-saisie .st-num.st-num-mot{background:var(--surface);border:2px solid var(--t-encre)}
html:root[data-style] .st-saisie .st-pave-valeur{color:var(--t-encre)}
html:root[data-style] .st-saisie .st-consigne{background:var(--t-fond);color:var(--text);border-radius:16px}
html:root[data-style] .st-saisie .st-consigne::before{background:var(--t-encre);border-radius:50%}

/* Journal et barre du bas */
html:root[data-style] .st-saisie .st-journal li{background:var(--bloc-fond);color:var(--text);border-radius:16px}
html:root[data-style] .st-saisie .st-journal li.annule{background:transparent;border:1.5px solid var(--border)}
html:root[data-style] .st-saisie .st-etat{border-radius:999px}
html:root[data-style] .st-saisie .st-etat.envoye{background:var(--okbg);color:var(--ok)}
html:root[data-style] .st-saisie .st-etat.garde{background:var(--warnbg);color:var(--warn)}
html:root[data-style] .st-saisie .st-etat:is(.retire,.refuse){background:var(--surface-2);color:var(--text)}
html:root[data-style] .st-saisie .st-bas{background:var(--surface);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r-grand);box-shadow:none}
html:root[data-style] .st-saisie .st-reseau-etat{background:var(--bloc-fond);color:var(--text);border-radius:16px}
html:root[data-style] .st-saisie .st-reseau-etat[data-etat="ok"]{background:var(--okbg)}
html:root[data-style] .st-saisie .st-reseau-etat[data-etat="ok"] .st-barres i{background:var(--ok)}
html:root[data-style] .st-saisie .st-reseau-etat[data-etat="hors"]{background:var(--warnbg)}
html:root[data-style] .st-saisie .st-reseau-etat[data-etat="hors"] .st-barres i{background:var(--warn)}
html:root[data-style] .st-saisie .st-reseau-etat[data-etat="hors"] .st-barres i:nth-child(n+3){background:transparent;border:1.5px solid var(--warn)}
html:root[data-style] .st-saisie .st-barres i{background:var(--text);border-radius:2px}

/* Focus, contraste renforcé, mouvement */
html:root[data-style] .st-saisie :is(.st-joueur,.st-action,.st-num,.st-touche,.st-mini-btn,.st-tache-btn):focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
html:root[data-style][data-contrast="high"] .st-saisie :is(.st-joueur,.st-action,.st-num,.st-touche,.st-mini-btn){border:2px solid var(--t-encre)}
html:root[data-style][data-contrast="high"] .st-saisie .st-journal li,html:root[data-style][data-contrast="high"] .st-saisie .st-clics li{border:2px solid var(--f-encre)}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] .st-saisie :is(.st-joueur,.st-action,.st-num,.st-touche,.st-mini-btn){transition:background-color .15s ease,transform .12s ease}
  html:root[data-style] .st-saisie :is(.st-joueur,.st-action,.st-num,.st-touche,.st-mini-btn):active{transform:scale(.97)}
}
@media (forced-colors:active){
  html:root[data-style] .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 */
/* TEM-STATS début */
/* ======================================================================
   Lot K-STATS-1, agent K5 : écran « Statistiques du match » (public/app/stats.html) dans le design Mosaïque.
   © 2026 Ghislain DEMONDA – Tous droits réservés.
   À coller par l orchestrateur dans public/assets/themes/theme-mosaique.css, après TEM-MOSAIQUE-REPRISE2.
   Page en rose des scores (body[data-fonction="score"], décision 12) ; à l intérieur, une teinte par fonction
   (spec 9.2 et 5.6), toujours doublée de son mot : points rose, rebonds ciel, passes lagon, interceptions et
   ballons récupérés menthe, contres lavande, fautes sable, ballons perdus brume, entrées et sorties ardoise ;
   adversaire ardoise pour ses points et ses séries, brume pour ses fautes. Aucun rouge d alerte sur un enfant.
   Contrastes : texte --text sur fond et vif, mots et chiffres en --t-encre sur fond (nuancier contrôlé par
   tests/mosaique_test.py) ; cadres du contraste renforcé dans l encre de la teinte, jamais en noir.
   ====================================================================== */
#stats{--t-fond:var(--surface);--t-vif:var(--f-vif);--t-encre:var(--f-encre);--st-r:var(--stade-r,24px);--st-R:var(--stade-r-grand,30px)}
#stats [data-tache="points"]{--t-fond:var(--mosa-rose);--t-vif:var(--mosa-rose-vif);--t-encre:var(--mosa-rose-encre)}
#stats [data-tache="rebonds"]{--t-fond:var(--mosa-ciel);--t-vif:var(--mosa-ciel-vif);--t-encre:var(--mosa-ciel-encre)}
#stats [data-tache="passes"]{--t-fond:var(--mosa-lagon);--t-vif:var(--mosa-lagon-vif);--t-encre:var(--mosa-lagon-encre)}
#stats :is([data-tache="interceptions"],[data-tache="recuperes"]){--t-fond:var(--mosa-menthe);--t-vif:var(--mosa-menthe-vif);--t-encre:var(--mosa-menthe-encre)}
#stats [data-tache="contres"]{--t-fond:var(--mosa-lavande);--t-vif:var(--mosa-lavande-vif);--t-encre:var(--mosa-lavande-encre)}
#stats [data-tache="fautes"]{--t-fond:var(--mosa-sable);--t-vif:var(--mosa-sable-vif);--t-encre:var(--mosa-sable-encre)}
#stats :is([data-tache="pertes"],[data-tache="adv-fautes"],[data-tache="compo"]){--t-fond:var(--mosa-brume);--t-vif:var(--mosa-brume-vif);--t-encre:var(--mosa-brume-encre)}
#stats :is([data-tache="rotation"],[data-tache="adversaire"]){--t-fond:var(--mosa-ardoise);--t-vif:var(--mosa-ardoise-vif);--t-encre:var(--mosa-ardoise-encre)}
#stats [data-tache="bilan"]{--t-fond:var(--surface-2);--t-vif:var(--mosa-rail);--t-encre:var(--text)}
#stats [data-defense="individuelle"]{--t-fond:var(--mosa-ciel);--t-vif:var(--mosa-ciel-vif);--t-encre:var(--mosa-ciel-encre)}
#stats [data-defense="zone"]{--t-fond:var(--mosa-lavande);--t-vif:var(--mosa-lavande-vif);--t-encre:var(--mosa-lavande-encre)}
#stats [data-defense="presse"]{--t-fond:var(--mosa-peche);--t-vif:var(--mosa-peche-vif);--t-encre:var(--mosa-peche-encre)}
#stats [data-defense="non_notee"]{--t-fond:var(--mosa-brume);--t-vif:var(--mosa-brume-vif);--t-encre:var(--mosa-brume-encre)}
#stats [data-serie="nous"]{--t-fond:var(--mosa-rose);--t-vif:var(--mosa-rose-vif);--t-encre:var(--mosa-rose-encre)}
#stats [data-serie="eux"]{--t-fond:var(--mosa-ardoise);--t-vif:var(--mosa-ardoise-vif);--t-encre:var(--mosa-ardoise-encre)}

/* ============ En-tête : tuile rose, score géant, mention « entraîneur seulement » ============ */
html #stats .st-geant b{color:var(--text)}
html #stats .st-geant b.adv,html #stats .st-pct b{color:transparent;-webkit-text-stroke:max(2px,.022em) var(--f-encre);paint-order:stroke fill}
html #stats .st-geant i{color:var(--f-encre)}
html #stats .st-seul{background:var(--surface);color:var(--text);border-radius:999px;box-shadow:inset 0 0 0 2px var(--f-encre)}
html #stats .st-tete-meta{color:var(--text)}

/* ============ Onglets : commande segmentée sur un rail ============ */
html #stats .st-onglets{background:var(--mosa-rail);border-radius:999px}
html #stats .st-onglets [role="tab"]{border-radius:999px;color:var(--text)}
html #stats .st-onglets [role="tab"]:hover{background:var(--surface)}
html #stats .st-onglets [role="tab"][aria-selected="true"]{background:var(--f-vif);text-decoration:none}
html #stats .st-onglets [role="tab"]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ============ Cartes, tuiles et pastilles bento, sans liseré d encre ============ */
html:root[data-style] #stats .st-carte{background:var(--surface);border:var(--f-bord,0px) solid var(--f-encre);border-radius:var(--st-R);box-shadow:none}
html:root[data-style] #stats .st-carte.teinte,html:root[data-style] #stats .st-carte[data-tache]{background:var(--t-fond);border-color:var(--t-encre)}
html #stats .st-carte > h2 .num,html #stats .st-section .num{color:var(--t-encre)}
html #stats .st-chiffre,html #stats .st-compo,html #stats .st-dangereux,html #stats .st-serie,html #stats .st-defense,html #stats .st-gros{background:var(--t-fond);color:var(--text);border:var(--f-bord,0px) solid var(--t-encre);border-radius:var(--st-R)}
html #stats .st-nombre,html #stats .st-taux,html #stats .st-chiffre h3,html #stats .st-chiffre h4,html #stats .st-rubrique > h3,html #stats .st-sous,html #stats .st-serie .qui{color:var(--t-encre)}
html #stats .st-chiffre h3::before,html #stats .st-chiffre h4::before,html #stats .st-tache::before{content:"";flex:none;inline-size:9px;block-size:9px;border-radius:50%;background:var(--t-encre)}
html #stats .st-detail li,html #stats .st-cinq-mini li,html #stats .st-duo-paire span{background:var(--surface);color:var(--text);border-radius:12px}
html #stats .st-cinq-mini li.sans{background:transparent;box-shadow:inset 0 0 0 2px var(--border)}
html #stats .st-qualif{border-radius:999px;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 2px var(--t-encre)}
html #stats .st-qualif[data-qualif="avantage_net"]{background:var(--mosa-menthe-vif)}
html #stats .st-qualif[data-qualif="a_retravailler"]{background:var(--mosa-sable-vif)}
html #stats .st-peu{background:var(--surface-2);color:var(--text);border-radius:999px}
html #stats .st-ok{background:var(--okbg);color:var(--text);border-radius:16px}
html #stats .st-avert{background:var(--mosa-sable);color:var(--text);border-radius:16px}
html #stats .st-tache{background:var(--t-vif);color:var(--text);border-radius:999px}
html #stats .st-duo,html #stats .st-verifier li,html #stats .st-chrono li,html #stats .st-personne,html #stats .st-accords li,html #stats .st-couverture li,html #stats .st-tuiles-num li{background:var(--bloc-fond);color:var(--text);border-radius:18px}
html #stats .st-duo.faible{background:transparent;box-shadow:inset 0 0 0 2px var(--border)}
html #stats .st-couverture li[data-tache]{background:var(--t-fond)}
html #stats .st-duo-paire i,html #stats .st-mention{color:var(--f-encre)}
html #stats .st-avatar{background:var(--f-vif);color:var(--text);border-radius:50%}
html #stats .st-match{border-radius:20px}
html #stats .st-match[aria-pressed="true"]{background:var(--f-vif)}

/* ============ Tableaux ============ */
html #stats table th,html #stats table td{border:0;border-bottom:1.5px solid var(--border);color:var(--text)}
html #stats thead th,html #stats tbody th{background:transparent}
html #stats tbody tr:last-child > *{border-bottom:0}
html #stats .st-joueurs td{color:var(--text)}
html #stats .st-table tr.faible > *{color:var(--muted)}
html #stats .st-table td[data-tache]{color:var(--t-encre)}
html #stats .st-tri{color:var(--text)}
html #stats .st-tri:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
html #stats .st-defile:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:12px}
html #stats .st-copie textarea{background:var(--surface);color:var(--text);border:1.5px solid var(--ctl-border);border-radius:14px}

/* ============ Dessins SVG : teintes par fonction ============ */
html #stats .st-intervalle .piste,html #stats .st-barre .piste{fill:var(--surface);fill-opacity:1}
html #stats .st-carte:not(.teinte):not([data-tache]) .st-barre .piste{fill:var(--mosa-rail)}
html #stats .st-intervalle .zero{stroke:var(--text);stroke-opacity:1}
html #stats .st-intervalle .intervalle{fill:var(--t-vif);fill-opacity:1}
html #stats .st-intervalle .estimation{fill:var(--t-encre)}
html #stats .st-barre .valeur{fill:var(--t-encre);fill-opacity:1}
html #stats .st-barre.temps .valeur{fill:var(--mosa-ardoise-encre)}
html #stats .st-barre.adv .valeur{fill:var(--mosa-ardoise-encre)}
html #stats .st-terrain{stroke:var(--t-encre);stroke-opacity:.45}
html #stats .st-passe{stroke:var(--t-encre)}
html #stats .st-fleche{fill:var(--t-encre)}
html #stats .st-noeud circle{fill:var(--surface);stroke:var(--t-encre)}
html #stats .st-noeud.actif circle{fill:var(--t-vif);stroke:var(--t-encre)}
html #stats .st-noeud text,html #stats .st-compte text{fill:var(--text)}
html #stats .st-compte circle{fill:var(--surface);stroke:var(--t-encre)}
html #stats .se-grille{stroke:var(--border);stroke-opacity:1}
html #stats .se-qt{stroke:var(--ctl-border);stroke-opacity:1}
html #stats .se-zero,html #stats .se-courbe{stroke:var(--text)}
html #stats .se-axe{fill:var(--text)}
html #stats .se-nous{fill:var(--mosa-rose-vif);fill-opacity:1}
html #stats .se-eux{fill:var(--mosa-ardoise-vif);fill-opacity:1}
html #stats .se-bande.nous{fill:var(--mosa-rose);fill-opacity:1}
html #stats .se-bande.eux{fill:var(--mosa-ardoise);fill-opacity:1}
html #stats .se-tag.nous circle{fill:var(--mosa-rose-encre)}
html #stats .se-tag.eux circle{fill:var(--mosa-ardoise-encre)}
html #stats .se-tag text{fill:var(--fn-sur-encre)}
html #stats .se-fin{fill:var(--text);stroke:var(--surface);stroke-width:3}
html #stats .st-cle i{background:var(--t-vif);border-radius:5px}
html #stats .st-cle i.trait{background:var(--text)}
html #stats .st-serie-tete .no{background:var(--t-encre);color:var(--fn-sur-encre);border-radius:50%}

/* ============ Adversaire : maillots par numéro, frise de la défense ============ */
html #stats .st-maillot{background:var(--surface);color:var(--text);border-radius:16px 16px 14px 14px;box-shadow:inset 0 0 0 2.5px var(--t-encre)}
html #stats .st-maillot::before{content:"";position:absolute;top:-1px;left:50%;inline-size:16px;block-size:7px;margin-left:-8px;border-radius:0 0 9px 9px;background:var(--t-encre)}
html #stats .st-maillot.grand{border-radius:26px 26px 22px 22px}
html #stats .st-maillot.grand::before{inline-size:28px;block-size:11px;margin-left:-14px;border-radius:0 0 14px 14px}
html #stats .st-maillot.non-vu{box-shadow:inset 0 0 0 2px var(--border)}
html #stats .st-maillot.non-vu::before{display:none}
html #stats .st-frise li{background:var(--t-vif);color:var(--text);border-radius:12px}
html #stats .st-defense.faible{background:transparent;box-shadow:inset 0 0 0 2px var(--t-vif)}

/* ============ Direct : tableau de score, fautes au seuil ============ */
html #stats .st-tableau{background:var(--f-fond);color:var(--text);border:var(--f-bord,0px) solid var(--f-encre);border-radius:var(--st-R)}
html #stats .st-direct{background:var(--f-encre);color:var(--fn-sur-encre);border-radius:999px}
html #stats .st-equipe b{color:var(--text)}
html #stats .st-equipe.adv b{color:transparent;-webkit-text-stroke:max(2px,.024em) var(--f-encre);paint-order:stroke fill}
html #stats .st-tiret{color:var(--f-encre)}
html #stats .st-periode{background:var(--surface);color:var(--text);border-radius:14px}
html #stats .st-gros.haut{background:var(--t-vif)}
html #stats .st-tuiles-num li.atteint{background:var(--t-vif);box-shadow:inset 0 0 0 2.5px var(--t-encre)}

/* ============ Qui saisit quoi, réglages, accords ============ */
html #stats .st-interrupteur{border-radius:999px}
html #stats .st-interrupteur[aria-checked="true"]{background:var(--f-encre);color:var(--fn-sur-encre);border-color:var(--f-encre)}
html #stats .st-interrupteur[aria-checked="true"]::before{display:none}
html #stats .st-cases,html #stats .st-filtre{border:0;border-radius:18px;background:var(--bloc-fond)}
html #stats .st-num{border-radius:14px}
html #stats .st-num[aria-pressed="true"]{background:var(--t-vif);border-color:var(--t-encre);color:var(--text)}
html #stats .st-accords li[data-reponse="oui"]{background:var(--mosa-menthe)}
html #stats .st-accords li[data-reponse="sans"]{background:transparent;box-shadow:inset 0 0 0 2px var(--border)}

/* ============ Contraste renforcé : cadres de 2 px dans l encre de la teinte, jamais noirs ============ */
html:root[data-contrast="high"] #stats :is(.st-chiffre,.st-compo,.st-dangereux,.st-serie,.st-defense,.st-gros,.st-tableau){border:2px solid var(--t-encre)}
html:root[data-contrast="high"] #stats :is(.st-duo,.st-verifier li,.st-chrono li,.st-personne,.st-accords li,.st-couverture li,.st-tuiles-num li){box-shadow:inset 0 0 0 2px var(--t-encre)}
html:root[data-contrast="high"] #stats .st-peu{box-shadow:inset 0 0 0 2px var(--text)}

/* ============ Sombre : le bandeau du titre passe dans l encre lumineuse (comme l écran Saison) ============ */
html:root[data-theme="dark"] #stats .typo-tete{--typo-bandeau:var(--f-encre)}
@media (prefers-color-scheme:dark){html:root:not([data-theme="light"]) #stats .typo-tete{--typo-bandeau:var(--f-encre)}}

/* ============ Mouvement : seulement si le système l accepte ============ */
@media (prefers-reduced-motion:no-preference){
  html #stats .st-panneau:not([hidden]){animation:st-pose .3s var(--mouvement,ease-out) both}
  html #stats .st-intervalle .estimation{transition:cx .3s var(--mouvement,ease-out)}
}
@keyframes st-pose{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (forced-colors:active){
  html #stats :is(.st-chiffre,.st-compo,.st-carte,.st-dangereux,.st-serie,.st-defense,.st-gros,.st-tache,.st-maillot){border:1px solid CanvasText;forced-color-adjust:auto}
  html #stats .st-onglets [role="tab"][aria-selected="true"]{text-decoration:underline}
}
/* TEM-STATS fin */
/* TEM-STATS2 début */
/* ======================================================================
   Lot K-STATS-2, agent A3 : carte des tirs adverses et duels défensifs dans le design Mosaïque
   (écran « Statistiques du match », onglet Adversaire, et écran « Saisie du match »).
   © 2026 Ghislain DEMONDA – Tous droits réservés.
   À coller par l orchestrateur à la fin de public/assets/themes/theme-mosaique.css, après le second bloc TEM-STATS.
   Teintes (spec 9.2, mot toujours écrit) : tirs adverses en pêche, intensité de la carte de chaleur par color-mix de
   la teinte (quatre niveaux) ; duels défensifs en orchidée (teinte de la catégorie duels du catalogue). Valeurs des
   cases en --text sur un halo --surface ; aucun rouge d alerte, aucun nom d enfant mis en cause.
   ====================================================================== */
#stats [data-tache="tirs"],.st-saisie [data-tache="adversaire"] .ta-saisie{--t-fond:var(--mosa-peche);--t-vif:var(--mosa-peche-vif);--t-encre:var(--mosa-peche-encre)}
#stats [data-tache="duels"],.st-saisie [data-tache="duels"]{--t-fond:var(--mosa-orchidee);--t-vif:var(--mosa-orchidee-vif);--t-encre:var(--mosa-orchidee-encre)}
#stats{--ta-ch1:var(--mosa-peche);--ta-ch2:var(--mosa-peche-vif);--ta-ch3:color-mix(in srgb,var(--mosa-peche-vif) 45%,var(--mosa-peche-encre));--ta-ch4:var(--mosa-peche-encre)}

/* Demi-terrain et carte de chaleur */
html #stats .ta-sol{fill:transparent}
html #stats .ta-ligne{stroke:var(--text);stroke-opacity:.72}
html #stats .ta-ligne.ta-planche,html #stats .ta-ligne.ta-cercle{stroke:var(--text);stroke-opacity:1}
html #stats .ta-case{fill-opacity:1}
html #stats .ta-case[data-niveau="0"]{fill:transparent}
html #stats .ta-case[data-niveau="1"]{fill:var(--ta-ch1)}
html #stats .ta-case[data-niveau="2"]{fill:var(--ta-ch2)}
html #stats .ta-case[data-niveau="3"]{fill:var(--ta-ch3)}
html #stats .ta-case[data-niveau="4"]{fill:var(--ta-ch4)}
html #stats .ta-carre .ta-case[data-niveau]{stroke:var(--t-encre);stroke-opacity:1}
html #stats .ta-valeur{fill:var(--text);stroke:var(--surface)}
html #stats .ta-echelle{background:var(--bloc-fond);color:var(--text);border-radius:16px}
html #stats .ta-carte.teinte .ta-echelle{background:var(--surface)}
html #stats .ta-total b,html #stats .ta-resume b{color:transparent;-webkit-text-stroke:max(2px,.022em) var(--t-encre);paint-order:stroke fill}
html #stats .ta-total span,html #stats .ta-resume span{color:var(--text)}
html #stats .ta-num{color:var(--t-encre)}
html #stats .ta-zones li{background:var(--surface);color:var(--text);border-radius:16px}
html #stats .ta-zones b{color:var(--t-encre)}
html #stats .ta-sans-position > *{color:var(--muted)}
html #stats .ta-defile:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:12px}

/* Choix des matchs et du numéro : pastilles rondes, choix en aplat d encre */
html:root[data-style] #stats .ta-filtre{background:var(--surface);color:var(--text);border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ctl-border)}
html:root[data-style] #stats .ta-filtre:hover{background:var(--t-fond)}
html:root[data-style] #stats .ta-filtre[aria-pressed="true"]{background:var(--text);color:var(--surface);box-shadow:none;text-decoration:none}
html:root[data-style] #stats .ta-filtre:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* Duels : une tuile orchidée par numéro, une ligne blanche par duel, barre des points pour 10 minutes */
html:root[data-style] #stats .ta-face{background:var(--t-fond);color:var(--text);border:var(--f-bord,0px) solid var(--t-encre);border-radius:var(--st-R);box-shadow:none}
html #stats .ta-face-tete h3{color:var(--text)}
html #stats .ta-def li{background:var(--surface);color:var(--text);border-radius:16px}
html #stats .ta-def li.faible{background:transparent;box-shadow:inset 0 0 0 2px var(--t-encre)}
html #stats .ta-def .v{color:var(--t-encre)}
html #stats .ta-def li.faible .v{color:var(--text)}
html #stats .ta-piste .fond{fill:var(--bloc-fond);fill-opacity:1}
html #stats .ta-def li.faible .ta-piste .fond{fill:var(--surface)}
html #stats .ta-piste .valeur{fill:var(--t-encre);fill-opacity:1}
html #stats .ta-piste.faible .valeur{fill:var(--t-vif);stroke:var(--t-encre);stroke-width:1}
html #stats .ta-idees li{background:var(--bloc-fond);color:var(--text);border-radius:14px}
html #stats .ta-idees li::before{color:var(--t-encre)}
html #stats .ta-garde{background:var(--mosa-ardoise);color:var(--text);border-radius:var(--st-r)}
html #stats .ta-garde .st-seul{background:var(--surface)}

/* Option absente : tuile pêche, dessin du demi-terrain, sans bouton ni urgence */
html #stats .ta-option-sur{background:var(--t-vif);color:var(--text);border-radius:999px}
html #stats .ta-option .ta-ligne{stroke:var(--t-encre);stroke-opacity:.8}
html #stats .ta-option .ta-sol{fill:var(--surface)}

/* Saisie : demi-terrain à toucher, numéros des duels */
html:root[data-style] .st-saisie .ta-saisie{background:var(--bloc-fond);color:var(--text);border-radius:22px}
html:root[data-style] .st-saisie .ta-touche .ta-ligne{stroke:var(--text);stroke-opacity:.75}
html:root[data-style] .st-saisie .ta-touche .ta-ligne:is(.ta-planche,.ta-cercle){stroke-opacity:1}
html:root[data-style] .st-saisie .ta-touche .ta-zone:hover{fill:var(--t-vif);fill-opacity:.7}
html:root[data-style] .st-saisie .ta-touche .ta-zone:focus{fill:var(--t-vif);fill-opacity:.85}
html:root[data-style] .st-saisie .ta-touche .ta-zone:focus-visible{stroke:var(--focus-ring);stroke-width:12}
html:root[data-style] .st-saisie .st-num .st-num-qui{color:var(--text)}

/* Contraste renforcé : cadres de 2 px dans l encre de la teinte */
html:root[data-contrast="high"] #stats :is(.ta-face,.ta-zones li,.ta-def li){box-shadow:inset 0 0 0 2px var(--t-encre)}
html:root[data-contrast="high"] #stats .ta-ligne{stroke-opacity:1}
html:root[data-style][data-contrast="high"] .st-saisie .ta-saisie{box-shadow:inset 0 0 0 2px var(--t-encre)}

@media (forced-colors:active){
  html #stats .ta-case[data-niveau]:not([data-niveau="0"]){fill:Highlight}
  html #stats :is(.ta-face,.ta-zones li,.ta-def li){border:1px solid CanvasText}
}
/* TEM-STATS2 fin */
/* TEM-STATS3 début */
/* ======================================================================
   Lot K-STATS-3, agent B1 : onglet Vidéo de « Statistiques du match » (web/app/src/stats_video.js) dans le design
   Mosaïque. © 2026 Ghislain DEMONDA – Tous droits réservés.
   À coller par l orchestrateur dans public/assets/themes/theme-mosaique.css, juste après le second bloc TEM-STATS
   (celui de K5). Variables seulement. Les teintes par fonction ([data-tache], [data-serie]) sont celles de K5.
   ====================================================================== */
html #stats .sv-ecran{background:var(--mosa-ardoise);border-radius:20px}
html #stats .sv-ecran-vide{color:var(--text)}
html #stats .sv-lire-fond{fill:var(--surface);fill-opacity:1}
html #stats .sv-lire-signe{fill:var(--text)}
html #stats .sv-moment{color:var(--text)}
html #stats .sv-calage-titre::before{background:var(--f-vif);color:var(--text);border-radius:50%}
html #stats .sv-fichier{color:var(--text)}
html #stats .sv-frise-svg{color:var(--text)}
html #stats .sv-piste{fill:var(--surface-2);fill-opacity:1}
html #stats .sv-lu{fill:var(--text)}
html #stats .sv-mq{fill:var(--t-encre)}
html #stats .sv-mq.ici{fill:var(--text);stroke:var(--surface);stroke-width:3}
html #stats .sv-telephone{background:var(--okbg);color:var(--text);border-radius:16px}
html #stats .sv-telephone b,html #stats .sv-tel-icone{color:var(--ok)}
html #stats .sv-calage-etat[data-cale="oui"]{color:var(--text)}
html #stats .sv-filtre{border:0;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--ctl-border)}
html #stats .sv-filtre[aria-pressed="true"]{background:var(--text);color:var(--surface);box-shadow:none;text-decoration:none}
html #stats .sv-filtre:focus-visible,html #stats .sv-repere:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
html #stats .sv-choisir:focus-within{outline:3px solid var(--focus-ring);outline-offset:3px}
html #stats .sv-choisir:focus-within .sv-choisir-mot{text-decoration:none}
html #stats .sv-repere{border:0;border-radius:18px;background:var(--bloc-fond);color:var(--text);box-shadow:none}
html #stats .sv-repere:hover{background:var(--t-fond)}
html #stats .sv-repere .sv-type{color:var(--t-encre)}
html #stats .sv-repere .sv-aller{background:var(--surface);color:var(--text);border-radius:999px}
html #stats .sv-repere[aria-current="true"]{background:var(--f-vif)}
html #stats .sv-repere[aria-current="true"] .sv-aller{background:var(--text);color:var(--surface);text-decoration:none}
html #stats .sv-repere[data-hors="oui"]{background:transparent;box-shadow:inset 0 0 0 2px var(--border)}
html #stats .sv-repere[data-hors="oui"] .sv-aller{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border)}
html #stats .sv-periode{background:var(--surface-2)}
html #stats .sv-h small,html #stats .sv-quoi small{color:var(--text)}
html:root[data-style] #stats .sv-lecteur{border:var(--f-bord,0px) solid var(--f-encre)}
html:root[data-contrast="high"] #stats .sv-repere{box-shadow:inset 0 0 0 2px var(--t-encre)}
html:root[data-contrast="high"] #stats .sv-repere[aria-current="true"]{box-shadow:inset 0 0 0 3px var(--text)}
html:root[data-contrast="high"] #stats .sv-filtre{box-shadow:inset 0 0 0 2px var(--text)}
html:root[data-contrast="high"] #stats .sv-telephone{box-shadow:inset 0 0 0 2px var(--ok)}
@media (forced-colors:active){
  html #stats :is(.sv-repere,.sv-filtre,.sv-ecran,.sv-telephone){border:1px solid CanvasText;forced-color-adjust:auto}
  html #stats .sv-repere[aria-current="true"]{border-width:3px}
}
/* TEM-STATS3 fin */
/* TEM-STATS3 début */
/* ======================================================================
   Lot K-STATS-3, agent B4 : « Import de la feuille » et « Ce qu on sait de cet adversaire » (public/app/stats.html)
   dans le design Mosaïque. © 2026 Ghislain DEMONDA – Tous droits réservés.
   À coller par l orchestrateur dans public/assets/themes/theme-mosaique.css, juste après le dernier bloc TEM-STATS.
   Teintes reprises du bloc TEM-STATS (--t-fond, --t-vif, --t-encre par data-tache) : ton équipe en rose des points,
   l adversaire en ardoise, alertes en sable (jamais de rouge d alerte), réussite en vert du socle (--okbg).
   Texte toujours en --text sur fond, chiffres et titres en encre de la teinte (nuancier contrôlé par
   tests/mosaique_test.py) ; cadres du contraste renforcé dans l encre de la teinte.
   ====================================================================== */
html #stats .si-etapes li{background:var(--mosa-rail);color:var(--text);border-radius:999px}
html #stats .si-etapes li > span{background:var(--surface);color:var(--text);border-radius:50%}
html #stats .si-etapes li.fait > span{background:var(--f-encre);color:var(--fn-sur-encre)}
html #stats .si-etapes li[aria-current="step"]{background:var(--f-vif)}
html #stats .si-depot{background:var(--f-fond);color:var(--text);border:2.5px dashed var(--f-encre);border-radius:var(--st-R)}
html #stats .si-depot.survol{background:var(--f-vif)}
html #stats .si-depot b{color:var(--f-encre)}
html #stats .si-doc{background:var(--surface);border-radius:8px 20px 8px 8px;box-shadow:inset 0 0 0 3px var(--f-encre)}
html #stats .si-doc::before{background:var(--f-encre);box-shadow:0 10px 0 var(--f-encre),0 20px 0 var(--f-encre),0 30px 0 var(--f-encre)}
html #stats .si-doc.petit{border-radius:5px 11px 5px 5px;box-shadow:inset 0 0 0 2px var(--f-encre)}
html #stats .si-doc.petit::before{box-shadow:0 5px 0 var(--f-encre),0 10px 0 var(--f-encre)}
html #stats .si-fichier{background:var(--bloc-fond);color:var(--text);border-radius:16px}
html #stats .si-fichier[data-etat="refus"]{background:var(--mosa-sable)}
html #stats .si-aide summary{color:var(--text)}
html #stats .si-independance{color:var(--text)}
html #stats .si-apercu .st-nombre{color:var(--f-encre)}
html #stats .si-badge{background:var(--mosa-sable);color:var(--text);border-radius:999px}
html #stats .si-badge::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;border:2px solid var(--mosa-sable-encre)}
html #stats .si-badge[data-origine="saisie"]{background:var(--bloc-fond)}
html #stats .si-info{background:var(--mosa-sable);color:var(--text);border-radius:14px}
html #stats .si-ok{background:var(--okbg);color:var(--text);border-radius:14px}
html #stats .si-modes .si-mode{background:var(--bloc-fond);color:var(--text);border-radius:18px}
html #stats .si-modes .si-mode:has(input:checked){background:var(--f-vif)}
html #stats .si-equipe{background:var(--t-fond);color:var(--text);border-radius:var(--st-R)}
html #stats .si-equipe h3{color:var(--text)}
html #stats .si-equipe .st-maillot{background:var(--surface)}
html #stats .si-table th,html #stats .si-table td{border:0;border-bottom:1.5px solid var(--border);color:var(--text)}
html #stats .si-table tbody tr:last-child > *{border-bottom:0}
html #stats .si-nb,html #stats .si-num,html #stats .si-rattacher{background:var(--surface);color:var(--text);border:1.5px solid var(--ctl-border);border-radius:12px}
html #stats .si-qui.alerte .si-rattacher{border:2px solid var(--mosa-sable-encre)}
html #stats .si-compteur li{background:var(--surface);color:var(--text);border-radius:999px;box-shadow:inset 0 0 0 2px var(--mosa-menthe-encre)}
html #stats .si-compteur li[data-ok="non"]{background:var(--mosa-sable);box-shadow:inset 0 0 0 2px var(--mosa-sable-encre)}
html #stats .si-alertes li{background:var(--mosa-sable);color:var(--text);border-radius:14px}
html #stats .si-alertes li::before{border-radius:50%;border:2px solid var(--mosa-sable-encre)}
html #stats .si-alertes:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:14px}
html #stats .si-maillots li{background:var(--bloc-fond);color:var(--text);border-radius:16px}
html #stats .si-memoire .si-tuiles li{background:var(--bloc-fond);color:var(--text);border-radius:18px}
html #stats .si-memoire .si-tuiles li[data-defense]{background:var(--t-fond)}
html #stats .si-memoire .si-tuiles b,html #stats .si-memoire .si-tuile-titre{color:var(--t-encre)}
html #stats .si-tuiles li:not([data-defense]){--t-encre:var(--mosa-ardoise-encre)}
html:root[data-contrast="high"] #stats :is(.si-equipe,.si-modes .si-mode,.si-tuiles li,.si-maillots li,.si-fichier){box-shadow:inset 0 0 0 2px var(--t-encre)}
html:root[data-contrast="high"] #stats :is(.si-alertes li,.si-info,.si-badge){box-shadow:inset 0 0 0 2px var(--mosa-sable-encre)}
@media (forced-colors:active){
  html #stats :is(.si-depot,.si-equipe,.si-modes .si-mode,.si-tuiles li,.si-alertes li,.si-compteur li){border:1px solid CanvasText;forced-color-adjust:auto}
}
/* TEM-STATS3 fin */


/* TEM-BENEVOLES début */
/* ======================================================================
   Écran « Permanences du club » (public/app/benevoles.html, lot BENEVOLES, agent P4) : teinte prairie
   pour data-fonction="benevoles" (décision 12), portée déjà posée dans le bloc TEM-MOSAIQUE (ligne
   [data-fonction="benevoles"], TEM-CLUBS) et non redéclarée ici. Maquettes validées : clubs-travail/
   maquette-permanences. Tuiles de match teintées par leur état : complet en menthe, postes à pourvoir en
   sable, relais d arbitres en rose, postes pas encore ouverts en brume ; chiffres en menthe, sable, prairie
   et rose ; groupes de postes en vif (arbitrage lavande, table ciel, salle ardoise, buvette pêche),
   toujours doublés du libellé ; états en pastille sémantique doublée du mot. Texte toujours --text sur fond
   et vif ; aucun liseré d encre : seuls cadres admis, les tirets des postes libres et --f-bord en renforcé,
   dans l encre de la teinte.
   ====================================================================== */
html:root[data-style] #benevoles [data-teinte="prairie"]{--f-fond:var(--mosa-prairie);--f-vif:var(--mosa-prairie-vif);--f-encre:var(--mosa-prairie-encre)}
html:root[data-style] #benevoles [data-teinte="menthe"]{--f-fond:var(--mosa-menthe);--f-vif:var(--mosa-menthe-vif);--f-encre:var(--mosa-menthe-encre)}
html:root[data-style] #benevoles [data-teinte="sable"]{--f-fond:var(--mosa-sable);--f-vif:var(--mosa-sable-vif);--f-encre:var(--mosa-sable-encre)}
html:root[data-style] #benevoles [data-teinte="rose"]{--f-fond:var(--mosa-rose);--f-vif:var(--mosa-rose-vif);--f-encre:var(--mosa-rose-encre)}
html:root[data-style] #benevoles [data-teinte="brume"]{--f-fond:var(--mosa-brume);--f-vif:var(--mosa-brume-vif);--f-encre:var(--mosa-brume-encre)}
html:root[data-style] #benevoles [data-teinte]{--fn-tuile:var(--f-fond);--fn-vif:var(--f-vif);--fn-encre:var(--f-encre);--typo-creux-fond:var(--f-fond)}
html:root[data-style] #benevoles [data-groupe="arbitrage"]{--g-vif:var(--mosa-lavande-vif)}
html:root[data-style] #benevoles [data-groupe="table"]{--g-vif:var(--mosa-ciel-vif)}
html:root[data-style] #benevoles [data-groupe="salle"]{--g-vif:var(--mosa-ardoise-vif)}
html:root[data-style] #benevoles [data-groupe="buvette"]{--g-vif:var(--mosa-peche-vif)}

/* Onglets du responsable : commande segmentée sur le rail, onglet courant sur le vif prairie. */
html:root[data-style] #benevoles .perm-onglets{background:var(--mosa-rail);border-radius:999px}
html:root[data-style] #benevoles .perm-onglets a{color:var(--text);border-radius:999px}
html:root[data-style] #benevoles .perm-onglets [aria-current="page"]{background:var(--f-vif)}

/* En-tête : chiffre géant en contour dans l encre. */
html:root[data-style] #benevoles .perm-geant b{color:transparent;-webkit-text-stroke:max(2px,.022em) var(--f-encre)}
html:root[data-style] #benevoles :is(.perm-geant span,.perm-tete-droite .meta){color:var(--text)}

/* Quatre chiffres, tuiles de match et panneaux : aplats de la teinte, coins larges, cadre nul hors renforcé. */
html:root[data-style] #benevoles :is(.perm-chiffre,.perm-match,.perm-panneau){background:var(--f-fond);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r-grand);box-shadow:none;--typo-creux-fond:var(--f-fond)}
html:root[data-style] #benevoles :is(.perm-chiffre h2,.perm-chiffre p:not(.perm-nombre),.perm-panneau .meta){color:var(--text)}
html:root[data-style] #benevoles :is(.perm-nombre,.perm-compte,.perm-panneau h2 .num,.perm-sous,.perm-qui-nom small,.perm-adulte){color:var(--f-encre)}
html:root[data-style] #benevoles .perm-jour{color:var(--text)}
html:root[data-style] #benevoles .perm-jour-date{background:var(--f-vif);color:var(--text);border-radius:12px}
html:root[data-style] #benevoles :is(.perm-cat,.perm-etiquette){background:var(--surface);color:var(--text);border-radius:999px}
html:root[data-style] #benevoles .perm-etiquette::before{background:var(--f-encre);border-radius:50%}
html:root[data-style] #benevoles .perm-heure{background:var(--f-vif);color:var(--text);border-radius:10px}
html:root[data-style] #benevoles .perm-relais{background:var(--f-vif);color:var(--text);border-radius:16px}

/* Postes : ligne blanche pour un poste tenu ; tirets dans l encre pour un poste libre ; groupe sur son vif. */
html:root[data-style] #benevoles .perm-poste{background:var(--surface);color:var(--text);border:0;border-radius:15px;box-shadow:none}
html:root[data-style] #benevoles .perm-poste:is([data-etat="a_pourvoir"],[data-etat="libere"]){background:color-mix(in srgb,var(--surface) 42%,transparent);border:2px dashed color-mix(in srgb,var(--f-encre) 80%,transparent)}
html:root[data-style] #benevoles .perm-poste.choisi{outline:3px solid var(--f-encre);outline-offset:2px;border-style:solid}
html:root[data-style] #benevoles .perm-poste-b:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:13px}
html:root[data-style] #benevoles .perm-type{background:var(--g-vif,var(--surface-2));color:var(--text);border-radius:9px}
html:root[data-style] #benevoles :is(.perm-qui small,.perm-vide){color:var(--text)}
html:root[data-style] #benevoles .perm-adulte{text-decoration:none}

/* États : pastille sémantique et mot, jamais la couleur seule. */
html:root[data-style] #benevoles .perm-etat{border-radius:999px;box-shadow:none;outline:0}
html:root[data-style] #benevoles .perm-etat.confirme{background:var(--okbg);color:var(--ok)}
html:root[data-style] #benevoles .perm-etat.pris{background:var(--warnbg);color:var(--warn)}
html:root[data-style] #benevoles .perm-etat.a_pourvoir{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--f-encre)}
html:root[data-style] #benevoles .perm-etat.a_pourvoir::before{border:2px solid var(--f-encre);border-radius:50%}
html:root[data-style] #benevoles .perm-etat.libere{background:var(--surface);color:var(--text);outline:1.5px dashed var(--f-encre);outline-offset:-1.5px}
html:root[data-style] #benevoles .perm-etat.libere::before{border-top:2px dashed var(--f-encre)}
html:root[data-style] #benevoles .perm-etat.attente{background:var(--mosa-lavande-vif);color:var(--text)}
html:root[data-style] #benevoles .perm-legende{background:var(--surface);color:var(--text);border:0;border-radius:var(--stade-r);--f-encre:var(--mosa-prairie-encre)}
html:root[data-style] #benevoles .perm-vide-club{background:transparent;color:var(--text);border:2px dashed var(--f-encre);border-radius:var(--stade-r-grand)}
html:root[data-style] #benevoles .perm-vide-titre{color:var(--f-encre)}

/* Panneau « Qui peut compléter » : carte blanche, raisons en pastilles sur la teinte. */
html:root[data-style] #benevoles .perm-qui-carte{background:var(--surface);color:var(--text);border-radius:18px}
html:root[data-style] #benevoles .perm-raisons{background:var(--f-fond);border-radius:14px}
html:root[data-style] #benevoles .perm-raisons li{background:var(--surface);color:var(--text);border-radius:999px}
html:root[data-style] #benevoles .perm-raisons li::before{background:var(--f-encre);border-radius:50%}
html:root[data-style] #benevoles :is(.perm-relais-liste li,.perm-benevoles-liste li,.perm-defaut-liste li){background:var(--surface);color:var(--text);border-radius:15px}
html:root[data-style] #benevoles .perm-texte textarea{background:var(--surface);color:var(--text);border-radius:18px 18px 18px 6px}

/* Vue famille : identité sur blanc, deux clics en pastilles, choix en tuiles à tirets, coche dans l encre. */
html:root[data-style] #benevoles :is(.perm-moi,.perm-dimanche){background:var(--surface);color:var(--text);border:var(--f-bord) solid var(--f-encre);border-radius:var(--stade-r)}
html:root[data-style] #benevoles :is(.perm-dimanche > b,.perm-miennes-tete b,.perm-voir){color:var(--f-encre)}
html:root[data-style] #benevoles .perm-etapes li{background:var(--surface);color:var(--text);border-radius:999px}
html:root[data-style] #benevoles .perm-etapes li span{background:var(--f-encre);color:var(--fn-sur-encre);border-radius:50%}
html:root[data-style] #benevoles .perm-etapes li[aria-current="step"]{background:var(--f-vif)}
html:root[data-style] #benevoles .perm-choix button{background:var(--surface);color:var(--text);border:2px dashed color-mix(in srgb,var(--f-encre) 75%,transparent);border-radius:20px;box-shadow:none}
html:root[data-style] #benevoles .perm-choix button[aria-pressed="true"]{background:var(--f-vif);border:2px solid var(--f-encre)}
html:root[data-style] #benevoles .perm-choix button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
html:root[data-style] #benevoles .perm-choix .coche{background:var(--surface);border-radius:50%;box-shadow:inset 0 0 0 2px var(--f-encre)}
html:root[data-style] #benevoles .perm-choix [aria-pressed="true"] .coche{background:var(--f-encre);box-shadow:none}
html:root[data-style] #benevoles .perm-choix [aria-pressed="true"] .coche::after{border-right:3px solid var(--fn-sur-encre);border-bottom:3px solid var(--fn-sur-encre)}
html:root[data-style] #benevoles .perm-fait{background:var(--okbg);color:var(--text);border-radius:var(--stade-r-grand)}
html:root[data-style] #benevoles .perm-fait h3{color:var(--ok)}
html:root[data-style] #benevoles .perm-fait[data-statut="attente"]{background:var(--mosa-lavande)}
html:root[data-style] #benevoles .perm-fait[data-statut="attente"] h3{color:var(--mosa-lavande-encre)}
html:root[data-style] #benevoles .perm-fait[data-statut="attente"] .perm-fait-icone{background:var(--mosa-lavande-encre)}
html:root[data-style] #benevoles .perm-fait[data-statut="attente"] .perm-fait-icone::after{border-color:var(--mosa-lavande)}
html:root[data-style] #benevoles .perm-liste li{background:var(--bloc-fond);color:var(--text);border-radius:15px}
html:root[data-style] #benevoles :is(.perm-ages li,.perm-accord){background:var(--surface);color:var(--text);border-radius:15px}
html:root[data-style] #benevoles .perm-ages b{color:var(--f-encre)}
html:root[data-style] #benevoles .perm-case input{accent-color:var(--f-encre)}
html:root[data-style] #benevoles .perm-resp{color:var(--text)}

/* Contraste renforcé : cadres de 2 px dans l encre de la teinte, tirets de 3 px sur les postes libres. */
html:root[data-style][data-contrast="high"] #benevoles :is(.perm-chiffre,.perm-match,.perm-panneau,.perm-moi,.perm-dimanche,.perm-legende,.perm-poste){border:var(--f-bord) solid var(--f-encre)}
html:root[data-style][data-contrast="high"] #benevoles .perm-poste:is([data-etat="a_pourvoir"],[data-etat="libere"]){border:3px dashed var(--f-encre)}
html:root[data-style][data-contrast="high"] #benevoles .perm-type{box-shadow:inset 0 0 0 2px var(--f-encre)}

/* Accueil : avec les deux tuiles du club (« Ton club » et « Permanences du club », même interrupteur feat_benevoles),
   la rangée « Gérer ton équipe » reste sans trou : Ta saison reprend deux colonnes, les deux tuiles du club deux
   colonnes chacune à 1 000 px et plus, et la tuile des statistiques, si elle est là, toute la rangée. */
@media (min-width:600px){
  html:root[data-style] #contenu .kpis:has(> .kpi[data-fonction="benevoles"] ~ .kpi[data-fonction="benevoles"]) > .kpi[data-fonction="saison"]{grid-column:span 2}
  html:root[data-style] #contenu .kpis:has(> .kpi[data-fonction="benevoles"] ~ .kpi[data-fonction="benevoles"]) > .kpi[data-fonction="score"]{grid-column:1 / -1}
}
@media (min-width:1000px){
  html:root[data-style] #contenu .kpis:has(> .kpi[data-fonction="benevoles"] ~ .kpi[data-fonction="benevoles"]) > .kpi[data-fonction="benevoles"]{grid-column:span 2}
}

/* Mouvement : apparition douce de la confirmation et des propositions, seulement si le système l accepte. */
@keyframes perm-entre{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  html:root[data-style] #benevoles :is(.perm-fait,.perm-qui-carte):not([hidden]){animation:perm-entre .28s cubic-bezier(.2,.8,.2,1) both}
}
@media (forced-colors:active){
  html:root[data-style] #benevoles :is(.perm-poste,.perm-match,.perm-chiffre,.perm-panneau,.perm-etat){border:1px solid CanvasText}
}
/* TEM-BENEVOLES fin */