/* Lot P (Claude, 07/10) : plus d @import de coquille.css ici. Le layout racine la charge déjà pour TOUTES les pages,
   versionnée (?v=BUILD_ID), avant cet app.css ajouté par CoquilleV5 : même ordre, sans copie périmée en cache. */
/* Turf Pépite — prototype de refonte (variante Opus, 29/09/2026).
   Jetons repris de SPEC-UI-V2 §1 (fond sombre, menthe, or, Playfair). Aucune couleur en dur
   hors de ce bloc :root, sauf les noirs de profondeur (ombres, voile) qui ne portent aucun texte.
   Seuls transform et opacity sont animés.
   Lot 1 (coquille unique, 05/10/2026) : coquille.css, importé en tête, porte l'en-tête de 56 px (marque-lien,
   loupe, crayon, Menu), la boîte de la barre du bas, les feuilles et le Menu en cartes ; les règles de ce fichier
   viennent après et gardent à l'app son verre (verre.js) et son positionnement dans le cadre du téléphone. */

@font-face {
  font-family: 'Playfair';
  src: url('/v5/playfair-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-page: #04130F;
  --surface-card: #0C231B;
  --surface-raised: #133126;
  --surface-sunken: #081B15;
  --surface-dock: #0A1F18;
  --border-subtle: #1F4234;
  --border-strong: #2E5A48;
  --text-primary: #F1EBDD;
  --text-secondary: #AFC3B8;
  --text-muted: #8CA398;
  --accent: #8CE8BE;
  --on-accent: #06251A;
  --gold: #E3B45A;
  --on-gold: #2A1C03;
  --silver: #C9D1CE;
  --on-silver: #1B2321;
  --bronze: #D69463;
  --on-bronze: #2A1405;
  --danger: #F08A7E;
  --danger-chip: #A8403A;
  --on-danger-chip: #FFF3F1;
  --info: #9CC3EE;
  --mus-win: #E3B45A;
  --on-mus-win: #2A1C03;
  --mus-place: #2B7F58;
  --on-mus-place: #F3FFF8;
  --mus-other: #3B5047;
  --on-mus-other: #E4ECE8;
  --mus-bad: #A8403A;
  --on-mus-bad: #FFF3F1;
  --ombre: #000000;
  --f-titre: 'Playfair', Georgia, 'Times New Roman', serif;
  --f-texte: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --barre-h: 56px;
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
  --carte-w: 292px;
  --txt: 1;
  --gold-fond: #E3B45A;
  --on-gold-fond: #2A1C03;
  --encre-rgb: 255, 255, 255;
  --degrade-milieu: #F2D694;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--f-texte);
  font-size: calc(15px * var(--txt));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button, input {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { display: block; }
.chiffres, .num { font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------------ banc PC et cadre */

.banc { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 48px; }
.telephone { position: relative; width: 100%; height: 100%; }
.app { position: absolute; inset: 0; overflow: hidden; background: var(--bg-page); isolation: isolate; contain: layout paint; }
.banc-notes, .banc-reglages { display: none; }

@media (min-width: 600px) {
  .telephone {
    flex: none;
    width: 390px;
    height: min(844px, calc(100vh - 32px));
    border-radius: 50px;
    box-shadow: 0 0 0 10px var(--surface-sunken), 0 0 0 11px var(--border-strong), 0 40px 90px rgba(0, 0, 0, .6);
  }
  .app { border-radius: 46px; }
}
@media (min-width: 1100px) {
  .banc-notes, .banc-reglages { display: block; width: 300px; flex: none; max-height: calc(100vh - 32px); overflow: auto; scrollbar-width: none; }
}
.banc-notes { color: var(--text-secondary); font-size: calc(14px * var(--txt)); line-height: 1.55; }
.banc-notes h1 { margin: 0 0 6px; font-family: var(--f-titre); font-weight: 600; font-size: calc(26px * var(--txt)); color: var(--text-primary); }
.banc-notes h2 { margin: 22px 0 6px; font-size: calc(13px * var(--txt)); letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
.banc-notes p { margin: 0 0 8px; }
.banc-notes ul { margin: 0; padding-left: 18px; }
.banc-notes li { margin: 0 0 6px; }
.banc-reglages { color: var(--text-secondary); font-size: calc(14px * var(--txt)); }
.banc-reglages h2 { margin: 0 0 10px; font-size: calc(13px * var(--txt)); letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
.banc-groupe { margin: 0 0 22px; }
.banc-groupe p { margin: 8px 0 0; font-size: calc(13px * var(--txt)); }
.banc-mesure { margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: calc(13px * var(--txt)); }

/* ------------------------------------------------------------------------ écrans */

.ecran { position: absolute; inset: 0; overflow: hidden; background: var(--bg-page); transform-origin: 50% 35%; }
.ecran--journee { z-index: 1; }
.ecran--course { z-index: 2; visibility: hidden; }
.ecran--course.est-ouvert { visibility: visible; }
.ecran.est-recule { border-radius: 26px; }
.ecran-ombre { position: absolute; inset: 0; z-index: 60; background: var(--ombre); opacity: 0; pointer-events: none; }

/* Lot 1 (coquille unique) : la géométrie de l'en-tête (56 px, ronds de 44, marque-lien) est celle de coquille.css
   (.coq-entete) ; l'app la place dans le cadre du téléphone et garde son fond uni ou son verre (verre.js), sans le
   filet ni l'ombre de la coquille publique. */
.barre {
  position: absolute; left: 0; right: 0; top: 0; z-index: 40;
  height: calc(var(--barre-h) + var(--haut));
  padding: var(--haut) 6px 0 16px;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-page); background-image: none; box-shadow: none; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.barre::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-subtle); opacity: 0; transition: opacity .12s linear; }
.barre.a-defile::after { opacity: 1; }
.barre--course { padding-left: 6px; }
.marque { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-titre); font-weight: 600; font-size: calc(20px * var(--txt)); letter-spacing: .06em; color: var(--text-primary); text-decoration: none; }
.marque b { font-weight: 600; color: var(--accent); }
.barre .coq-actions { margin-left: auto; }
.barre-titre { flex: 1; min-width: 0; text-align: center; font-family: var(--f-titre); font-weight: 600; font-size: calc(17px * var(--txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.rond { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-primary); }
.rond svg { width: 24px; height: 24px; }
.rond:active { background: var(--surface-raised); }
.rond[hidden] { display: none; }
.rond--texte { width: auto; min-width: 44px; padding: 0 12px; border-radius: 22px; gap: 6px; display: inline-flex; align-items: center; font-size: calc(14px * var(--txt)); font-weight: 600; color: var(--accent); }
.rond--texte svg { width: 20px; height: 20px; }

.defile {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--barre-h) + var(--haut));
}
.defile::-webkit-scrollbar, .panneau::-webkit-scrollbar, .feuille-corps::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
.contenu { position: relative; z-index: 1; padding: 0 16px calc(120px + var(--bas)); background: var(--bg-page); will-change: transform; }

/* --------------------------------------------------------------- tirer pour relire */

.tirer { position: absolute; left: 0; right: 0; top: calc(var(--barre-h) + var(--haut)); z-index: 0; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; pointer-events: none; }
.tirer-anneau { width: 30px; height: 30px; color: var(--accent); will-change: transform; }
.tirer-anneau svg { width: 30px; height: 30px; }
.tirer-texte { font-size: calc(12px * var(--txt)); color: var(--text-secondary); }

/* ------------------------------------------------------------------------ accueil */

.surtitre { margin: 14px 0 2px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); letter-spacing: .01em; }
.grand-titre { margin: 0; font-family: var(--f-titre); font-weight: 600; font-size: calc(32px * var(--txt)); line-height: 1.12; }
.titre-bloc { margin: 30px 0 12px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.titre-bloc b { color: var(--text-primary); font-weight: 700; }

.puce-horloge {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 12px; padding: 0 16px 0 12px;
  border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border-subtle);
  font-size: calc(14px * var(--txt)); font-weight: 600;
}
.puce-horloge svg { width: 20px; height: 20px; color: var(--accent); }
.puce-horloge[data-actif="1"] { border-color: var(--accent); }

.maintenant { margin-top: 16px; padding: 14px 16px 16px; border-radius: 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); }
.maintenant .k { display: block; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.maintenant p { margin: 6px 0 0; font-size: calc(15px * var(--txt)); }
.maintenant .discret { color: var(--text-secondary); font-size: calc(14px * var(--txt)); }
.maintenant-course { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-raised); }
.maintenant-course .h { font-family: var(--f-titre); font-size: calc(22px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.maintenant-course .n { display: block; font-weight: 650; }
.maintenant-course .f { display: block; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.chevron { width: 20px; height: 20px; color: var(--text-secondary); }

/* vedette (Quinté+) */
.vedette { position: relative; display: block; width: 100%; border-radius: 24px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.vedette:active { transform: scale(.985); transition: transform .12s var(--ease); }
.photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-raised); }
.photo img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.etiquette { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: 8px; background: var(--bg-page); font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.puces-photo { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 2; display: flex; justify-content: space-between; gap: 8px; }
.puce-photo { padding: 4px 9px; border-radius: 10px; background: var(--bg-page); font-size: calc(13px * var(--txt)); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.puce-photo--or { background: var(--gold-fond); color: var(--on-gold-fond); }
.vedette-corps { display: block; padding: 14px 16px 16px; }
.ligne-sur { display: block; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.vedette-nom { display: block; margin: 2px 0 2px; font-family: var(--f-titre); font-weight: 600; font-size: calc(26px * var(--txt)); line-height: 1.15; }
.faits { display: block; margin: 0; font-size: calc(14px * var(--txt)); color: var(--text-secondary); line-height: 1.45; }
.duo { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.duo-bloc { display: block; padding: 12px; border-radius: 14px; background: var(--surface-raised); }
.duo-bloc .k { display: block; margin-bottom: 8px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.lecture { display: block; margin-top: 10px; font-size: calc(14px * var(--txt)); color: var(--text-primary); }
.reserve { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: calc(13px * var(--txt)); color: var(--info); }
.reserve svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.appel { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.appel svg { width: 20px; height: 20px; }
.appel .chevron { color: var(--on-accent); }

/* rôles Pépite */
.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.role { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--surface-card); font-size: calc(13px * var(--txt)); font-weight: 650; }
.duo-bloc .role { background: var(--surface-card); }
.role svg { width: 16px; height: 16px; flex: none; }
.role b { font-family: var(--f-titre); font-weight: 600; font-size: calc(16px * var(--txt)); color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.role--base, .role--or { color: var(--gold); }
.role--value { color: var(--accent); }
.role--tocard { color: var(--danger); }
.role--ligne { background: transparent; padding: 0; min-height: 0; }

/* médailles et places */
.meds { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.med { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 999px; font-family: var(--f-titre); font-weight: 600; font-size: calc(15px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.med--petit { min-width: 26px; height: 26px; font-size: calc(14px * var(--txt)); }
.med--1 { background: var(--gold-fond); color: var(--on-gold-fond); }
.med--2 { background: var(--silver); color: var(--on-silver); }
.med--3 { background: var(--bronze); color: var(--on-bronze); }
.med--4, .med--5 { box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-primary); }
.place { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 7px; border-radius: 999px; font-family: var(--f-titre); font-weight: 600; font-size: calc(14px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.place--1 { background: var(--gold-fond); color: var(--on-gold-fond); }
.place--2 { background: var(--silver); color: var(--on-silver); }
.place--3 { background: var(--bronze); color: var(--on-bronze); }
.place--cercle { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.place--texte { font-family: var(--f-texte); font-size: calc(13px * var(--txt)); font-weight: 600; color: var(--text-secondary); min-width: 0; padding: 0; }
.place--d, .place--np { font-family: var(--f-texte); font-size: calc(12px * var(--txt)); font-weight: 800; background: var(--danger-chip); color: var(--on-danger-chip); }
.place--nc { color: var(--text-muted); font-family: var(--f-texte); }

/* rail des réunions */
.rail { position: relative; display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
/* La pastille glisse d'une réunion à l'autre en suivant le carrousel : fond sombre et contour
   lumineux, pour que le texte qu'elle traverse reste lisible pendant tout le trajet. */
.rail-pastille { position: absolute; left: 0; top: 0; z-index: 0; width: 100px; height: 52px; border-radius: 16px; background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--accent); transform-origin: 0 0; will-change: transform; }
.rail-puce { position: relative; z-index: 1; flex: none; min-width: 100px; min-height: 52px; padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border-subtle); text-align: left; color: var(--text-secondary); font-size: calc(12px * var(--txt)); }
.rail-puce b { display: block; font-family: var(--f-titre); font-weight: 600; font-size: calc(17px * var(--txt)); color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.rail-puce[aria-selected="true"] { color: var(--text-primary); border-color: transparent; }
.rail-puce[aria-selected="true"] b { color: var(--accent); }
[data-section] { scroll-margin-top: calc(var(--barre-h) + var(--haut) + 4px); }
/* Titres et panneaux reçoivent le focus pour les lecteurs d'écran, jamais au clavier : pas d'anneau. */
[tabindex="-1"]:focus { outline: none; }
.carte .meds { flex-wrap: nowrap; }
.carte-bas .badges { flex: 1; min-width: 0; }
.bloc-carte .forme-texte { margin-top: 12px; }
.regle-course { position: absolute; top: 80px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--info); }
.regle-course[data-quinte="1"] { width: 12px; height: 12px; margin-left: -6px; top: 78px; background: var(--gold-fond); }
@media (max-height: 700px) { .course-photo { aspect-ratio: 2 / 1; } }

/* le pont : carrousel en coverflow sculpté */
.pont { position: relative; height: 440px; margin: 10px -16px 0; perspective: 1000px; perspective-origin: 50% 42%; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.pont:focus-visible { outline-offset: -4px; }
.pont-sol { position: absolute; left: 50%; bottom: 8px; width: 280px; height: 40px; margin-left: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); will-change: transform, opacity; }
.pont-halo { position: absolute; left: 50%; top: 20px; width: 340px; height: 360px; margin-left: -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 232, 190, .22), rgba(140, 232, 190, 0)); will-change: transform, opacity; pointer-events: none; }
.pont-piste { position: absolute; left: 50%; top: 16px; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.carte {
  position: absolute; top: 0; left: calc(var(--carte-w) / -2);
  display: block; width: var(--carte-w);
  border-radius: 22px; background: var(--surface-card); border: 1px solid var(--border-subtle);
  overflow: hidden; backface-visibility: hidden; will-change: transform, opacity;
  box-shadow: 0 24px 46px rgba(0, 0, 0, .45);
  text-align: left;
}
.carte[data-loin="1"] { visibility: hidden; }
.carte .photo img { left: -8%; top: 0; width: 116%; height: 100%; }
.carte-brillance { position: absolute; inset: 0; z-index: 3; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, 0) 70%); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.carte-ombre { position: absolute; inset: 0; z-index: 4; background: var(--ombre); opacity: 0; pointer-events: none; }
.carte-corps { display: block; padding: 12px 14px 14px; }
.carte-nom { display: block; margin: 4px 0 2px; font-family: var(--f-titre); font-weight: 600; font-size: calc(21px * var(--txt)); line-height: 1.18; }
.carte-sous { display: block; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; min-height: 30px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: calc(12px * var(--txt)); font-weight: 700; background: var(--surface-raised); color: var(--text-primary); }
.badge--quinte { background: var(--gold-fond); color: var(--on-gold-fond); }
.badge--prono { color: var(--accent); }
.badge--avenir { color: var(--info); }
.pont-compteur { margin: 6px 0 0; text-align: center; font-size: calc(13px * var(--txt)); color: var(--text-secondary); min-height: 20px; }
.pont-compteur b { color: var(--text-primary); }

/* toute la journée */
.fil { list-style: none; margin: 0; padding: 0; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; }
.fil > li + li { border-top: 1px solid var(--border-subtle); }
.fil-ligne { display: grid; grid-template-columns: calc(58px * var(--txt)) minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 10px 14px; }
.fil-ligne:active { background: var(--surface-raised); }
.fil-heure { font-family: var(--f-titre); font-weight: 600; font-size: calc(18px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.fil-cle { display: block; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.fil-cle b { color: var(--accent); font-weight: 700; margin-right: 4px; }
.fil-nom { display: block; font-size: calc(15px * var(--txt)); font-weight: 650; line-height: 1.25; }
.fil-faits { display: block; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.fil-fin { display: flex; gap: 4px; align-items: center; }
.fil-maintenant { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; font-size: calc(13px * var(--txt)); font-weight: 700; color: var(--accent); background: var(--surface-sunken); }
.fil-maintenant::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pied { margin: 24px 0 0; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.pied p { margin: 0 0 6px; }

/* ------------------------------------------------------------------------ course */

.course-tete { position: absolute; left: 0; right: 0; top: calc(var(--barre-h) + var(--haut)); z-index: 20; padding: 6px 16px 14px; background: var(--bg-page); will-change: transform; pointer-events: none; }
.course-photo { border-radius: 22px; }
.course-titre { margin: 14px 0 4px; font-family: var(--f-titre); font-weight: 600; font-size: calc(28px * var(--txt)); line-height: 1.15; }
.course-tete .surtitre { margin: 0; }
.resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.resume .meds { gap: 4px; }
.pager { position: absolute; inset: 0; z-index: 10; overflow: hidden; touch-action: pan-y; }
.pager-piste { position: absolute; left: 0; top: 0; height: 100%; width: 400%; display: flex; will-change: transform; }
.panneau { position: relative; flex: 0 0 25%; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 0 16px; }
.panneau[data-cache="1"] { visibility: hidden; }
.panneau-espace { height: var(--tete-h, 420px); }
.panneau-contenu { min-height: 100%; padding: 12px 0 calc(120px + var(--bas)); }
.bord-retour { position: absolute; left: 0; top: calc(var(--barre-h) + var(--haut)); bottom: 0; z-index: 30; width: 22px; touch-action: none; }

.outils { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.segment { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 15px; background: var(--surface-card); border: 1px solid var(--border-subtle); }
.segment button { position: relative; z-index: 1; min-height: 44px; min-width: 92px; padding: 0 12px; border-radius: 12px; font-size: calc(14px * var(--txt)); font-weight: 650; text-align: center; color: var(--text-secondary); }
.segment button[aria-checked="true"] { color: var(--on-accent); }
.segment-pastille { position: absolute; z-index: 0; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 12px; background: var(--accent); transition: transform .24s var(--ease); }
.segment[data-valeur="cote"] .segment-pastille { transform: translateX(100%); }
.bouton-ligne { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--border-strong); font-size: calc(14px * var(--txt)); font-weight: 650; color: var(--text-primary); }
.bouton-ligne svg { width: 18px; height: 18px; color: var(--accent); }
.bouton-ligne[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bouton-ligne[aria-pressed="true"] svg { color: var(--on-accent); }
.note { margin: 0 0 10px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }

.partants { list-style: none; margin: 0; padding: 0; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; }
.partant { position: relative; background: var(--surface-card); }
.partant + .partant { border-top: 1px solid var(--border-subtle); }
.partant-bouton { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; width: 100%; min-height: 100px; padding: 12px 12px 12px 10px; align-items: start; }
.partant-bouton:active { background: var(--surface-raised); }
.partant-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-raised); font-family: var(--f-titre); font-weight: 600; font-size: calc(17px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.partant-corps { min-width: 0; }
.partant-corps .role { margin-bottom: 4px; min-height: 26px; padding: 0 8px 0 6px; background: var(--surface-raised); font-size: calc(12px * var(--txt)); }
.partant-nom { display: block; font-size: calc(16px * var(--txt)); font-weight: 650; line-height: 1.25; }
.partant-entourage { display: block; margin-top: 2px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.partant-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.partant-age { font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.partant-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 62px; }
.partant-cote { font-family: var(--f-titre); font-weight: 600; font-size: calc(19px * var(--txt)); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.partant-gains { font-size: calc(13px * var(--txt)); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.partant[data-np="1"] .partant-nom { color: var(--text-muted); text-decoration: line-through; }
.partant[data-choisi="1"] .partant-bouton { background: var(--surface-raised); }
.partant-coche { display: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); }
.mode-comparer .partant-coche { display: grid; place-items: center; }
.partant[data-choisi="1"] .partant-coche { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.partant-coche svg { width: 14px; height: 14px; }

.musique { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mus { display: inline-flex; align-items: baseline; justify-content: center; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 5px; font-size: calc(12px * var(--txt)); font-weight: 800; line-height: 22px; font-variant-numeric: lining-nums tabular-nums; }
.mus small { font-size: calc(12px * var(--txt)); font-weight: 600; margin-left: 1px; }
.mus[data-cat="victoire"] { background: var(--mus-win); color: var(--on-mus-win); }
.mus[data-cat="place"] { background: var(--mus-place); color: var(--on-mus-place); }
.mus[data-cat="autre"], .mus[data-cat="inconnu"] { background: var(--mus-other); color: var(--on-mus-other); }
.mus[data-cat="incident"] { background: var(--mus-bad); color: var(--on-mus-bad); }
.annee { width: 1px; height: 18px; margin: 0 2px; background: var(--text-muted); }
.ferrure { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--txt)); font-weight: 650; color: var(--text-secondary); }
.ferrure svg { width: 18px; height: 18px; color: var(--text-primary); }
.brut { font-size: calc(13px * var(--txt)); color: var(--text-muted); }

.bloc-carte { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); }
.bloc-carte h3 { margin: 0 0 10px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.bloc-carte p { margin: 0 0 8px; }
.bloc-carte p:last-child { margin-bottom: 0; }
.role-ligne { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; min-height: 64px; padding: 10px 0; }
.role-ligne + .role-ligne { border-top: 1px solid var(--border-subtle); }
.role-ligne .qui { display: block; margin-top: 4px; font-size: calc(16px * var(--txt)); font-weight: 650; }
.role-ligne .qui small { display: block; font-size: calc(13px * var(--txt)); font-weight: 400; color: var(--text-secondary); }
.resultat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: calc(12px * var(--txt)); color: var(--text-secondary); text-align: right; }
.podium { list-style: none; margin: 0; padding: 0; }
.podium li { display: grid; grid-template-columns: 40px 34px 1fr auto; gap: 10px; align-items: center; min-height: 62px; padding: 8px 0; }
.podium li + li { border-top: 1px solid var(--border-subtle); }
.podium .qui { font-size: calc(16px * var(--txt)); font-weight: 650; }
.podium .qui small { display: block; font-size: calc(13px * var(--txt)); font-weight: 400; color: var(--text-secondary); }
.podium .cote { font-family: var(--f-titre); font-size: calc(17px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.suite { font-size: calc(14px * var(--txt)); line-height: 1.7; color: var(--text-primary); }
.suite span { white-space: nowrap; margin-right: 10px; }
.dl { margin: 0; }
.dl div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.dl div + div { border-top: 1px solid var(--border-subtle); }
.dl dt { font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.dl dd { margin: 0; font-size: calc(15px * var(--txt)); }
.condition { font-size: calc(15px * var(--txt)); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.liste-simple { margin: 0; padding-left: 18px; }
.liste-simple li { margin: 0 0 6px; }

/* squelette : la place exacte du contenu, révélé à l'arrivée du vol */
.squelette { border-radius: 20px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; position: relative; }
.sq-ligne { display: grid; grid-template-columns: 34px 1fr 56px; gap: 10px; min-height: 100px; padding: 14px 12px; }
.sq-ligne + .sq-ligne { border-top: 1px solid var(--border-subtle); }
.sq { display: block; height: 12px; border-radius: 6px; background: var(--surface-raised); }
.sq--carre { width: 34px; height: 34px; border-radius: 10px; }
.sq-lumiere { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 80%); transform: translateX(-100%); }

/* chiffres qui se révèlent (jamais de valeurs intermédiaires) */
.rv-masque { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rv { display: inline-block; }

/* ------------------------------------------------------------------------ dock */

/* Lot 1 (coquille unique) : la boîte (66 px, 12 px des bords, coins de 24) est la règle commune de coquille.css ; l'app la
   place dans le cadre du téléphone, sans rembourrage (la grille .dock-boutons porte le sien) et avec son propre verre. */
.dock { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--bas)); z-index: 50; height: 66px; padding: 0; border-radius: 24px; background: var(--surface-dock); background-image: none; border: 1px solid var(--border-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); -webkit-backdrop-filter: none; backdrop-filter: none; will-change: transform; }
.dock-boutons { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; padding: 6px; }
.dock-bouton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 18px; font-size: calc(12px * var(--txt)); font-weight: 650; color: var(--text-secondary); }
.dock-bouton svg { width: 22px; height: 22px; }
/* AV5 : repli de --item-w = ce que calcule app.js (mesurerDock : (clientWidth du .dock − 12) / nombre de cases) ; 100 % = clientWidth du .dock, le bloc contenant. */
.dock-bulle, .dock-fenetre { position: absolute; left: 6px; top: 6px; height: 52px; width: var(--item-w, calc((100% - 12px) / var(--dock-n, 4))); border-radius: 18px; will-change: transform; }
.dock-bulle { z-index: 1; background: var(--accent); }
.dock-fenetre { z-index: 3; overflow: hidden; background: var(--accent); pointer-events: none; }
.dock-rang { position: absolute; left: 0; top: 0; height: 52px; width: calc(var(--item-w, 100%) * var(--dock-n, 4)); display: grid; grid-template-columns: repeat(var(--dock-n, 4), 1fr); will-change: transform; }
.dock-rang span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: calc(12px * var(--txt)); font-weight: 650; color: var(--on-accent); }
.dock-rang svg { width: 22px; height: 22px; }
.dock[data-sans-pastille="1"] .dock-bulle, .dock[data-sans-pastille="1"] .dock-fenetre { opacity: 0; }

/* ------------------------------------------------------------------------ feuille */

.voile { position: absolute; inset: 0; z-index: 70; background: var(--ombre); opacity: 0; pointer-events: none; }
.voile.est-actif { pointer-events: auto; }
/* Lot 2 (plein écran) : la feuille monte jusqu'à l'encoche (palier 1,0 pour Fiches, Lire, Menu, Chercher, Outils,
   Légende ; Revivre reste à 0,62) ; sa tête fait 56 px — poignée dessinée (36×4 à 8 px), titre à gauche, croix 44×44 à
   droite — et le corps commence dès 56 px. Mesuré avant : hauteur 100 % − 44 px, poignée 44 + tête 48 : corps à 138 px,
   croix à 86 px. La prise entière (56 px) porte le geste « tirer pour fermer ». */
.feuille {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 71;
  height: calc(100% - var(--haut));
  display: flex; flex-direction: column;
  border-radius: 26px 26px 0 0; background: var(--surface-card);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
  transform: translate3d(0, 110%, 0); visibility: hidden; will-change: transform;
}
.feuille.est-ouverte { visibility: visible; }
/* Collée en haut (y ≤ 1 px, app.js data-plein) : coins droits et plus de filet (box-sizing border-box : la hauteur ne bouge pas),
   la tête commence à 0 comme sur les feuilles publiques ; mesuré avec le filet : croix à 8 px et corps à 57 px au lieu de 7 et 56. */
.feuille[data-plein="1"] { border-radius: 0; border-top-width: 0; }
.feuille-prise { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 16px; touch-action: none; cursor: grab; }
.feuille-prise::before { content: ''; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(var(--encre-rgb), .28); }
.feuille-titre { flex: 1; min-width: 0; margin: 6px 0 0; font-family: var(--f-titre); font-weight: 600; font-size: calc(22px * var(--txt)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feuille-prise .rond { margin-top: 2px; }
.feuille-corps { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 4px 16px calc(28px + var(--bas)); }
.feuille .bloc-carte { background: var(--surface-raised); border-color: var(--border-strong); }
.feuille .bloc-carte .role, .feuille .bloc-carte .partant-num { background: var(--surface-card); }
.feuille-actions { display: grid; gap: 10px; margin-top: 14px; }
.bouton-plein { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.bouton-plein svg { width: 20px; height: 20px; }
.bouton-contour { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border-strong); font-weight: 650; }
.cheval-tete { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; margin: 4px 0 12px; }
.cheval-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-raised); font-family: var(--f-titre); font-weight: 600; font-size: calc(26px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.cheval-qui { display: block; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.chiffres-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chiffres-4 div { padding: 10px 8px; border-radius: 12px; background: var(--surface-card); text-align: center; }
.chiffres-4 b { display: block; font-family: var(--f-titre); font-weight: 600; font-size: calc(20px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.chiffres-4 span { font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.forme-texte { margin: 10px 0 0; font-size: calc(14px * var(--txt)); color: var(--text-secondary); }
details.source { margin-top: 12px; }
details.source summary { display: flex; align-items: center; min-height: 44px; font-weight: 650; cursor: pointer; }
details.source pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }

.comparer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comparer-tete { display: block; padding: 10px; border-radius: 14px; background: var(--surface-raised); }
.comparer-tete b { display: block; font-size: calc(15px * var(--txt)); }
.comparer-tete .partant-num { margin-bottom: 6px; }
.critere { grid-column: 1 / -1; margin: 12px 0 2px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.valeur { display: block; min-height: 36px; padding: 8px 10px; border-radius: 12px; background: var(--surface-raised); font-size: calc(14px * var(--txt)); overflow-wrap: anywhere; }

.champ { display: block; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-sunken); color: var(--text-primary); font-size: calc(16px * var(--txt)); }
.champ::placeholder { color: var(--text-muted); }
.groupe-titre { margin: 18px 0 8px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.resultats { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--surface-raised); overflow: hidden; }
.resultats li + li { border-top: 1px solid var(--border-strong); }
.resultat-ligne { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 14px; }
.resultat-ligne b { display: block; font-size: calc(15px * var(--txt)); }
.resultat-ligne span { display: block; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.resultat-ligne mark { background: none; color: var(--accent); }

.choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: var(--surface-sunken); }
.choix--2 { grid-template-columns: repeat(2, 1fr); }
.choix button { min-height: 44px; border-radius: 12px; font-size: calc(14px * var(--txt)); font-weight: 650; text-align: center; color: var(--text-secondary); }
.choix button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.legende-ligne { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: center; padding: 8px 0; font-size: calc(14px * var(--txt)); }
.legende-ligne + .legende-ligne { border-top: 1px solid var(--border-strong); }

.versions { list-style: none; margin: 0; padding: 0; position: relative; }
.versions::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border-strong); }
.versions li { position: relative; padding: 6px 0 6px 26px; font-size: calc(14px * var(--txt)); }
.versions li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-card); box-shadow: inset 0 0 0 2px var(--accent); }
.versions li[data-retenue="1"]::before { background: var(--accent); }

/* horloge de relecture */
.horloge-lecture { margin: 4px 0 0; text-align: center; font-family: var(--f-titre); font-weight: 600; font-size: calc(56px * var(--txt)); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.horloge-sous { margin: 6px 0 0; text-align: center; font-size: calc(14px * var(--txt)); color: var(--text-secondary); min-height: 40px; }
.regle { position: relative; height: 96px; margin: 12px -16px 0; overflow: hidden; touch-action: none; cursor: grab; background: var(--surface-sunken); }
.regle-piste {
  position: absolute; left: 50%; top: 0; height: 100%;
  background-image: repeating-linear-gradient(90deg, var(--text-muted) 0 2px, transparent 2px 240px), repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 20px);
  background-size: 100% 40px, 100% 22px; background-repeat: repeat-x;
  will-change: transform;
}
.regle-heure { position: absolute; top: 50px; width: 60px; margin-left: -30px; text-align: center; font-family: var(--f-titre); font-size: calc(16px * var(--txt)); color: var(--text-primary); font-variant-numeric: lining-nums tabular-nums; }
.regle-aiguille { position: absolute; left: 50%; top: 0; width: 3px; height: 56px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); z-index: 2; }
.regle-ombre { position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.regle-ombre--g { left: 0; background: linear-gradient(90deg, var(--surface-sunken), rgba(8, 27, 21, 0)); }
.regle-ombre--d { right: 0; background: linear-gradient(270deg, var(--surface-sunken), rgba(8, 27, 21, 0)); }

/* annonce (toast) */
.annonce { position: absolute; left: 16px; right: 16px; bottom: calc(92px + var(--bas)); z-index: 90; padding: 12px 14px; border-radius: 16px; background: var(--surface-raised); border: 1px solid var(--border-strong); font-size: calc(14px * var(--txt)); opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; transition: opacity .2s linear, transform .3s var(--ease); }
.annonce.est-visible { opacity: 1; transform: none; }

/* couche des éléments partagés en vol */
.vol { position: absolute; inset: 0; z-index: 80; pointer-events: none; }
.vol-photo { position: absolute; overflow: hidden; border-radius: 22px; transform-origin: 0 0; will-change: transform; background: var(--surface-raised); }
.vol-photo img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.vol-titre { position: absolute; margin: 0; transform-origin: 0 0; will-change: transform, opacity; font-family: var(--f-titre); font-weight: 600; color: var(--text-primary); }

/* ------------------------------------------------------------------ mouvement réduit */

html[data-mouvement="reduit"] *, html[data-mouvement="reduit"] *::before, html[data-mouvement="reduit"] *::after {
  transition-property: opacity !important;
  transition-duration: .12s !important;
  animation: none !important;
}
html[data-mouvement="reduit"] .vedette:active { transform: none; }
html[data-mouvement="reduit"] .pont { perspective: none; }

@media (max-width: 359px) {
  .grand-titre { font-size: calc(28px * var(--txt)); }
  .course-titre { font-size: calc(24px * var(--txt)); }
  .outils { flex-wrap: wrap; }
  .segment { flex: 1 1 100%; }
  .segment button { min-width: 0; padding: 0 8px; }
  .outils .bouton-ligne { flex: 1 1 100%; justify-content: center; }
  .fil-ligne { grid-template-columns: 50px 1fr auto; gap: 10px; padding: 10px 12px; }
  .chiffres-4 b { font-size: calc(18px * var(--txt)); }
}

/* ==========================================================================================
   v2 (30/09/2026) : retouches de Drew (planches 01 à 04), verre liquide, atelier d'options.
   Les règles ci-dessous complètent ou remplacent celles du dessus ; le niveau « aucun » garde
   le rendu de la v1 (surfaces opaques). Toujours : seuls transform et opacity sont animés.
   ========================================================================================== */

:root {
  --bg-page-rgb: 4, 19, 15;
  --blanc-rgb: 255, 255, 255;
  --gold-rgb: 227, 180, 90;
  --v-teinte: 7, 24, 18;
  --v-flou: 17.6px;
  --v-alpha: .596;
  --v-alpha-fort: .804;
  --v-lum: .776;
  --v-sat: 1.52;
  --mint-rgb: 140, 232, 190;
  --v-rim: .5;
  --v-spec: .2;
  /* Grain du givré profond : bruit blanc à 7 %, dessiné une fois (pas une image téléchargée). */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");
}

/* ------------------------------------------------------------------ fond d'ambiance */
.ambiance { position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; opacity: .6; transform: scale(1.2); pointer-events: none; }
:root[data-verre-actif="1"] .ambiance { display: block; }
:root[data-verre-actif="1"] .contenu { background: transparent; }
.ecran--journee.est-dessous { visibility: hidden; }

/* ------------------------------------------------------------------ le verre
   .v-flou : vraie surface de verre (flou du fond) ; jamais sur une ligne de liste, au plus 6
   visibles. .v-plat et les conteneurs listés : verre sans flou (teinte translucide, liseré,
   reflet fixe) posé sur le fond d'ambiance, déjà doux. */
/* v3 : le verre se voit sur fond sombre. Épaisseur (reflet haut, ombre interne basse), liseré
   lumineux en haut, liseré irisé tout autour (::after, la « dispersion » du bord), reflet
   spéculaire (::before) ; la teinte --v-teinte est posée par verre.js selon ce qui passe dessous
   (photo dorée, fond vert). La lentille des bords (liquide, cristal) est un filtre SVG posé en
   ligne par verre.js sur les petites surfaces. */
:root[data-verre-actif="1"] .v-flou {
  overflow: hidden;
  isolation: isolate;
  background-color: rgba(var(--v-teinte), var(--v-alpha));
  background-image: linear-gradient(180deg, rgba(var(--blanc-rgb), calc(var(--v-rim) * .2)) 0%, rgba(var(--blanc-rgb), 0) 36%), linear-gradient(0deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 28%);
  -webkit-backdrop-filter: blur(var(--v-flou)) saturate(var(--v-sat)) brightness(var(--v-lum));
  backdrop-filter: blur(var(--v-flou)) saturate(var(--v-sat)) brightness(var(--v-lum));
  border-color: rgba(var(--blanc-rgb), .16);
  box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), var(--v-rim)), inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 0 12px 16px -14px rgba(var(--blanc-rgb), calc(var(--v-rim) * .55)), inset 0 -14px 18px -14px rgba(0, 0, 0, .6),
    0 16px 36px rgba(0, 0, 0, .42);
}
:root[data-verre-actif="1"] .v-flou.v-fort { background-color: rgba(var(--v-teinte), var(--v-alpha-fort)); }
/* La pièce Lire dépasse du dock ; chaque couche de verre garde son propre cadre arrondi. */
:root[data-verre-actif="1"] .dock.v-flou { overflow: visible; }
:root[data-verre-actif="1"] .dock.v-flou::before {
  left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; transform: none;
  background: radial-gradient(ellipse 35% 80% at calc(41% + var(--rx, 0px)) calc(0% + var(--ry, 0px)), rgba(var(--blanc-rgb), var(--v-spec)), rgba(var(--blanc-rgb), 0));
}
/* Givré profond : un grain très fin dans l'épaisseur du verre. */
:root[data-verre-actif="1"][data-verre-effectif="givre"] .v-flou {
  background-image: linear-gradient(180deg, rgba(var(--blanc-rgb), calc(var(--v-rim) * .2)) 0%, rgba(var(--blanc-rgb), 0) 36%), linear-gradient(0deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 28%), var(--grain);
  background-size: auto, auto, 140px 140px;
}
/* Reflet : une tache de lumière sous le contenu ; fixe en givré, elle suit le doigt, le
   défilement et l'inclinaison en liquide et cristal (verre.js pose --rx/--ry, seul transform bouge). */
:root[data-verre-actif="1"] .v-flou::before {
  content: ''; position: absolute; z-index: -1; left: 6%; top: -80%; width: 70%; height: 160%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--blanc-rgb), var(--v-spec)), rgba(var(--blanc-rgb), 0));
  transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0);
}
/* Liseré irisé : lumière blanche en haut à gauche, reflets menthe, rose, bleu et or le long du
   bord (la lumière se sépare dans l'épaisseur). Un anneau de 1,2 px, masqué au centre. */
:root[data-verre-actif="1"] .v-flou::after {
  content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 2;
  opacity: 1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from 210deg at 50% 50%, rgba(var(--blanc-rgb), calc(var(--v-rim) * .95)), rgba(var(--mint-rgb), calc(var(--v-rim) * .5)) 12%, rgba(255, 170, 210, calc(var(--v-rim) * .38)) 20%, rgba(var(--blanc-rgb), .05) 33%, rgba(var(--blanc-rgb), .03) 50%, rgba(150, 190, 255, calc(var(--v-rim) * .42)) 64%, rgba(var(--gold-rgb), calc(var(--v-rim) * .5)) 76%, rgba(var(--blanc-rgb), calc(var(--v-rim) * .95)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
:root[data-verre-actif="1"] .barre--course:not(.a-defile)::after { opacity: 0; }
/* Grandes feuilles (fiche, atelier, feuilles) : la tache de reflet y serait immense et passerait
   sous les titres ; elle reste plus discrète. */
:root[data-verre-actif="1"] .v-flou.v-fort::before { opacity: .6; }
/* Lot 2 (plein écran) : la feuille est collée au bas de l'écran (et au haut quand data-plein) ; le liseré irisé (::after, anneau de
   1,2 px au-dessus du contenu) n'y borde rien et passait SUR la dernière ligne de texte coupée par l'écran — mesuré (sonde, Fiches à
   390, verre liquide) : rangée de pixels y = 843 à rgb(121, 131, 122) sous « F. de Giles », 2,03:1 au lieu de 8,9:1 (ui-v5app,
   contraste des pixels). Les segments bas, et haut en plein écran, sortent du cadre (overflow hidden du verre). */
:root[data-verre-actif="1"] .feuille.v-flou::after { bottom: -3px; }
:root[data-verre-actif="1"] .feuille[data-plein="1"].v-flou::after { top: -3px; }
/* Barre repliée de la course : la liste défile dessous et le titre est au milieu ; un peu plus
   de teinte et un reflet plus discret gardent le titre lisible (contraste mesuré à 320 px). */
:root[data-verre-actif="1"] .barre--course.a-defile.v-flou { background-color: rgba(var(--v-teinte), calc(var(--v-alpha) + .14)); }
:root[data-verre-actif="1"] .barre.v-flou::before { opacity: .55; }
/* Les pastilles de l'horloge C portent un petit texte or dès leur bord haut, sur la photo. */
:root[data-verre-actif="1"] .pastille-visuel.v-flou::before { opacity: .5; }
/* Écrasement lumineux au point touché (verre.js) : une couche rognée à la surface, une onde. */
.v-ondes { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.v-onde { position: absolute; left: 0; top: 0; width: 92px; height: 92px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--blanc-rgb), .5), rgba(var(--blanc-rgb), .16) 55%, rgba(var(--blanc-rgb), 0)); }
:root[data-verre-actif="1"] :is(.v-plat, .carte, .fil, .rail-puce, .bloc-carte, .puce-horloge) {
  background-color: rgba(var(--v-teinte), calc(var(--v-alpha) + .12));
  background-image: linear-gradient(180deg, rgba(var(--blanc-rgb), .06), rgba(var(--blanc-rgb), 0) 40%);
  border-color: rgba(var(--blanc-rgb), .11);
  box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .14);
}
:root[data-verre-actif="1"] .carte { background-color: var(--surface-card); box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .16), 0 24px 46px rgba(0, 0, 0, .45); }
:root[data-verre-actif="1"] :is(.partant, .panneau) { background: transparent; }
:root[data-verre-actif="1"] .feuille .bloc-carte { background-color: rgba(var(--v-teinte), .55); }
/* Replis : pas de flou possible, ou « transparence réduite » → surfaces opaques. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v-flou { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--surface-dock) !important; }
  .v-flou::before { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .v-flou, .v-plat { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--surface-dock) !important; }
  .v-flou::before, .ambiance { display: none !important; }
}

/* ------------------------------------------------------------------ bouton de l'atelier */
.bouton-atelier { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 10px; border-radius: 22px; border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary); font-size: calc(12px * var(--txt)); font-weight: 700; white-space: nowrap; }
.bouton-atelier svg { width: 16px; height: 16px; color: var(--gold); }
.bouton-atelier[aria-expanded="true"] { border-color: var(--gold); }

/* ------------------------------------------------------------------ 1a. horloge compacte */
.puce-horloge { min-height: 44px; margin-top: 10px; }
.horloge-bloc { margin-top: 10px; }
.journee-date { margin: 10px 0 -4px; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.outils-test summary { display: list-item; min-height: 44px; padding: 12px 0; cursor: pointer; }
.outils-test label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.outils-test select { min-height: 44px; max-width: 100%; padding: 8px; border-radius: 12px; border: 1px solid var(--border-subtle); font: inherit; color: var(--text-primary); background: var(--surface-card); }
.horloge-bloc[hidden] { display: none; }
/* A — bandeau défilant */
.bandeau { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 62px; border-radius: 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; }
.bandeau-fleche { display: grid; place-items: center; width: 44px; height: 60px; color: var(--text-secondary); }
.bandeau-fleche svg { width: 20px; height: 20px; }
.bandeau-fenetre { position: relative; height: 100%; min-width: 0; overflow: hidden; }
.bandeau-piste { display: flex; height: 100%; transition: transform .5s var(--ease); }
.bandeau-info { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; min-width: 0; height: 100%; padding: 0 2px; text-align: left; }
.etiq { flex: none; max-width: 74px; padding: 4px 8px; border-radius: 10px; background: var(--surface-raised); color: var(--text-primary); font-size: calc(12px * var(--txt)); font-weight: 700; line-height: 1.2; text-align: center; }
.etiq--avenir { background: var(--gold-fond); color: var(--on-gold-fond); }
.bi-corps { display: flex; flex-direction: column; min-width: 0; }
.bi-l1 { font-size: calc(14px * var(--txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-l1 b { font-family: var(--f-titre); font-weight: 600; font-size: calc(19px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.bi-l2 { font-size: calc(12px * var(--txt)); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* B — capsule double */
.capsule { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 74px; border-radius: 20px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; }
.capsule-moitie { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 6px 26px 6px 12px; text-align: left; }
.capsule-moitie + .capsule-moitie { border-left: 1px solid rgba(var(--encre-rgb), .12); }
.cap-k { display: flex; align-items: center; gap: 5px; font-size: calc(12px * var(--txt)); font-weight: 700; color: var(--gold); white-space: nowrap; }
.capsule-moitie + .capsule-moitie .cap-k { color: var(--accent); }
.cap-k svg { flex: none; width: 14px; height: 14px; }
.cap-court { display: none; }
@media (max-width: 359px) { .cap-long { display: none; } .cap-court { display: inline; } .capsule-moitie { padding: 6px 22px 6px 10px; } :is(.bandeau, .capsule) .dans { display: none; } }
.cap-h { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.cap-h b { font-family: var(--f-titre); font-weight: 600; font-size: calc(20px * var(--txt)); line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.cap-h span { min-width: 0; font-size: calc(12px * var(--txt)); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.cap-s { font-size: calc(12px * var(--txt)); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-fleche { position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-secondary); }
.cap-fleche svg { width: 18px; height: 18px; }
.capsule-moitie[aria-expanded="true"] .cap-fleche { transform: rotate(180deg); }
.capsule-detail { margin-top: 8px; border-radius: 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; }
.capsule-detail[hidden] { display: none; }
.capsule-course { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px 12px; width: 100%; min-height: 64px; padding: 10px 12px; text-align: left; }
.capsule-disc { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-raised); color: var(--accent); }
.capsule-disc svg { width: 24px; height: 24px; }
.capsule-txt b { display: block; font-size: calc(15px * var(--txt)); font-weight: 700; }
.capsule-txt span { display: block; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.capsule-dans { grid-column: 2; justify-self: start; padding: 3px 8px; border-radius: 8px; background: var(--gold-fond); color: var(--on-gold-fond); font-size: calc(12px * var(--txt)); font-weight: 700; }
/* C — pastilles dans le visuel */
.pastille-visuel { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; max-width: 74%; min-height: 44px; padding: 7px 12px 8px; border-radius: 16px; background: rgba(var(--v-teinte), .9); border: 1px solid rgba(var(--blanc-rgb), .14); color: var(--text-primary); text-align: left; }
.pastille--avenir { align-self: flex-start; margin-top: 12px; }
.pastille--derniere { align-self: flex-end; margin-bottom: 8px; }
.pv-k { display: flex; align-items: center; gap: 5px; font-size: calc(12px * var(--txt)); font-weight: 700; color: var(--gold); }
.pastille--derniere .pv-k { color: var(--accent); }
.pv-k svg { width: 14px; height: 14px; }
.pv-h { font-size: calc(13px * var(--txt)); white-space: nowrap; }
.pv-h b { font-family: var(--f-titre); font-weight: 600; font-size: calc(20px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.pv-s { font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.pastille-visuel { min-width: 0; overflow: hidden; }
.pastille-visuel :is(.pv-h, .pv-s) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les pastilles se touchent au-dessus du bouton qui couvre la carte ; le texte de la photo, lui,
   reste sous ce bouton (toucher le titre ouvre la course). */
.vedette .photo-flux { z-index: auto; }
.vedette .photo-flux > :not(.edito-heure) { position: relative; z-index: 2; }
.vedette .photo-flux > .pastille-visuel { z-index: 4; }

/* ------------------------------------------------------------------ 1b. carte Quinté+ */
.vedette { isolation: isolate; text-align: left; }
.vedette-toucher { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border-radius: inherit; }
.vedette-toucher:focus-visible { outline-offset: -3px; }
.vedette-photo { display: flex; flex-direction: column; aspect-ratio: 16 / 12; }
/* 17/10 vedette : titre rogné à 320 px (photo 169,8 px) ; clip (et non hidden) et une base égale au contenu laissent la boîte à ratio grandir (214,4 px), 390 px inchangé. */
.vedette .vedette-photo { overflow: clip; }
.vedette .photo-flux { flex: 1 0 auto; }
.vedette[data-carte="B"] .vedette-photo { aspect-ratio: 16 / 9.5; }
.vedette[data-carte="C"] .vedette-photo { aspect-ratio: 16 / 10.5; }
/* Horloge C : la photo prend la hauteur de ce qu'elle porte (deux pastilles + titre), au moins
   300 px ; les pastilles ne rétrécissent pas (leur texte n'est jamais rogné, même à 320 px). */
.vedette[data-horloge-c="1"] .vedette-photo { aspect-ratio: auto; min-height: 300px; }
.vedette .photo-flux > .pastille-visuel { flex-shrink: 0; }
.photo-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--bg-page-rgb), .5) 0%, rgba(var(--bg-page-rgb), 0) 24%, rgba(var(--bg-page-rgb), 0) 40%, rgba(var(--bg-page-rgb), .74) 68%, rgba(var(--bg-page-rgb), .96) 100%); }
/* 18/10 vedette : voile continu sous le surtitre et le titre ; .photo garde --bg-page-rgb à 4, 19, 15 dans les deux thèmes. */
.vedette:not([data-carte="C"]) .photo-voile { background: linear-gradient(180deg, rgba(var(--bg-page-rgb), .5) 0%, rgba(var(--bg-page-rgb), .40) 24%, rgba(var(--bg-page-rgb), .55) 40%, rgba(var(--bg-page-rgb), .78) 68%, rgba(var(--bg-page-rgb), .96) 100%); }
/* 18/10 vedette : bande sombre qui suit le surtitre et le titre, sans rien déplacer (titre long à 320 px : R1 · C3 à 2,1:1 avec le seul voile). */
.vedette:not([data-carte="C"]) .photo-titre::before { content: ""; position: absolute; inset: -18px -12px -12px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0), rgba(var(--bg-page-rgb), .62) 18px); }
.photo-flux { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; }
.photo-espace { flex: 1; min-height: 8px; }
.vedette .puces-photo { position: static; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vedette .puce-photo { background: rgba(var(--bg-page-rgb), .82); }
.vedette .puce-photo--or { background: var(--gold-fond); color: var(--on-gold-fond); }
.vedette .etiquette { position: static; display: block; padding: 0; background: none; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.vedette[data-carte="B"] .puces-photo .etiquette { padding: 4px 8px; border-radius: 8px; background: rgba(var(--bg-page-rgb), .82); }
.photo-bas { display: flex; align-items: flex-end; gap: 10px; }
.photo-titre { display: block; flex: 1; min-width: 0; }
.photo-titre .ligne-sur { font-size: calc(13px * var(--txt)); color: var(--text-primary); }
.vedette .vedette-nom { margin: 0; font-size: calc(28px * var(--txt)); line-height: 1.12; }
.photo-titre .faits { margin-top: 2px; font-size: calc(13px * var(--txt)); color: var(--text-primary); }
.photo-titre .etiquette { margin-top: 3px; }
.vedette-fleche { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--bg-page-rgb), .78); border: 1px solid rgba(var(--blanc-rgb), .2); color: var(--text-primary); }
.vedette-fleche svg { width: 20px; height: 20px; }
.photo-titre--bandeau { display: flex; align-items: flex-end; gap: 12px; }
.pt-g { flex: 1; min-width: 0; }
.pt-heure { flex: none; padding-left: 12px; border-left: 1px solid rgba(var(--blanc-rgb), .4); font-family: var(--f-titre); font-weight: 600; font-size: calc(26px * var(--txt)); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.vedette[data-carte="C"] { border-color: rgba(var(--gold-rgb), .6); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .18), 0 0 28px rgba(var(--gold-rgb), .16), 0 18px 40px rgba(0, 0, 0, .35); }
.vedette[data-carte="C"] .photo-voile { background: linear-gradient(180deg, rgba(var(--bg-page-rgb), .88) 0%, rgba(var(--bg-page-rgb), .4) 36%, rgba(var(--bg-page-rgb), .18) 62%, rgba(var(--bg-page-rgb), .82) 100%); }
.vedette[data-carte="C"] .photo-flux { padding-left: 94px; }
.edito-heure { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, rgba(var(--bg-page-rgb), .94), rgba(var(--bg-page-rgb), .8)); border-right: 1px solid rgba(var(--gold-rgb), .7); }
.edito-heure b { font-family: var(--f-titre); font-weight: 600; font-size: calc(28px * var(--txt)); line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.edito-heure i { width: 34px; height: 2px; background: var(--gold); }
.photo-titre--edito { flex: none; text-align: right; }
.edito-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.vedette-corps { position: relative; z-index: 2; display: block; padding: 10px 12px 12px; }
.vedette-faits { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-bottom: 8px; font-size: calc(14px * var(--txt)); color: var(--text-secondary); }
.vedette-chevron svg { width: 20px; height: 20px; color: var(--text-secondary); }
.vedette-duo { display: block; container-type: inline-size; }
.prono-ligne { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; min-height: 34px; }
.prono-k { flex: none; padding-right: 7px; margin-right: 1px; border-right: 1px solid var(--border-strong); font-size: calc(12px * var(--txt)); font-weight: 700; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.prono-vide { font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.role--pastille { flex: none; gap: 4px; min-height: 30px; padding: 0 8px 0 6px; background: var(--surface-raised); font-size: calc(13px * var(--txt)); }
.role--pastille svg { width: 14px; height: 14px; }
.role--pastille b { font-size: calc(16px * var(--txt)); }
.role-court { white-space: nowrap; }
/* app.js pose .compact quand les libellés courts ne tiennent pas sur la ligne (320 px, grands textes). */
.prono-ligne.compact .role-court { display: none; }
.prono-ligne.compact .role--pastille { padding: 0 9px 0 8px; }
.vedette-arrivee { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.va-k { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-right: 8px; border-right: 1px solid var(--border-strong); font-size: calc(13px * var(--txt)); font-weight: 700; color: var(--text-secondary); }
.va-k svg { width: 18px; height: 18px; color: var(--gold); }
.vedette-arrivee .meds { flex-wrap: nowrap; gap: 5px; }
.lecture-courte { display: block; margin-top: 6px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
/* Invitation au toucher : un reflet qui longe le bord de la carte (masque en anneau). */
.vedette-reflet { position: absolute; inset: 0; z-index: 5; padding: 1.5px; border-radius: inherit; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.vedette-reflet-bande { position: absolute; top: -40%; bottom: -40%; left: 0; width: 30%; opacity: 0; background: linear-gradient(90deg, rgba(var(--blanc-rgb), 0), rgba(var(--blanc-rgb), .9), rgba(var(--blanc-rgb), 0)); }

/* ------------------------------------------------------------------ 1c. en-tête de course */
.course-tete { padding: 8px 16px 12px; background: transparent; }
.course-tete .course-photo { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: auto; min-height: 236px; }
.course-tete .etiquette { position: absolute; left: auto; right: 10px; top: 10px; bottom: auto; z-index: 2; padding: 4px 8px; border-radius: 8px; background: rgba(var(--bg-page-rgb), .8); font-size: calc(12px * var(--txt)); }
.tete-texte { position: relative; z-index: 2; padding: 12px 14px; }
/* 18/10 page course : bande sombre sous le texte de l'en-tête photo (titre à 1,2:1 sur la tribune claire avec le seul voile), sans rien déplacer. */
.course-tete:not([data-entete="B"]) .tete-texte::before { content: ""; position: absolute; inset: -24px 0 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0), rgba(var(--bg-page-rgb), .72) 24px); }
.tete-sur { margin: 0; font-size: calc(13px * var(--txt)); color: var(--text-primary); }
.course-tete .course-titre { margin: 2px 0; font-size: calc(28px * var(--txt)); line-height: 1.12; }
.tete-faits { margin: 0; font-size: calc(13px * var(--txt)); line-height: 1.4; color: var(--text-secondary); }
.course-tete .resume { gap: 4px 8px; margin: 6px 0 0; font-size: calc(13px * var(--txt)); color: var(--text-primary); }
.rs-arr { display: inline-flex; align-items: center; gap: 5px; }
.rs-arr > svg { width: 18px; height: 18px; color: var(--gold); }
.course-tete .resume .meds { gap: 3px; flex-wrap: nowrap; }
.course-tete .resume .med--petit { min-width: 23px; height: 23px; padding: 0 4px; font-size: calc(13px * var(--txt)); }
.rs-sep { color: var(--text-secondary); }
/* v3 : le « ! » façon GPT (image 24) : un anneau or de 23 px, bordure 1,5 px, fond de la page,
   « ! » or 17 px gras ; zone de toucher 44 px ; la bulle garde son comportement, bordure or fine. */
.alerte { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: -12px -8px -12px -4px; border-radius: 50%; pointer-events: auto; color: var(--gold); }
/* Anneau « ! » (style GPT) : 23 px, bord or de 1,5 px (dessiné par une ombre intérieure : un
   border de 1,5 px est arrondi à 1 px par le navigateur), fond de la page, « ! » or 17 px gras. */
.alerte > span { display: grid; place-items: center; box-sizing: border-box; width: 23px; height: 23px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold); background: var(--bg-page); color: var(--gold); font-size: calc(17px * var(--txt)); font-weight: 700; line-height: 1; }
.alerte[aria-expanded="true"] > span { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .3); }
.bulle { position: absolute; left: 16px; right: 16px; z-index: 3; padding: 12px 14px; border-radius: 16px; background: var(--surface-raised); border: 1px solid rgba(var(--gold-rgb), .75); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); pointer-events: auto; }
:root[data-verre-actif="1"] .bulle.v-flou { border-color: rgba(var(--gold-rgb), .75); }
.bulle[hidden] { display: none; }
.bulle-titre { margin: 0; font-size: calc(14px * var(--txt)); font-weight: 700; color: var(--text-primary); }
.bulle-sous { margin: 6px 0 0; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
/* A — photo immersive : pleine largeur, sous la barre transparente */
.course-tete[data-entete="A"] { top: 0; padding: 0; }
.course-tete[data-entete="A"] .course-photo { min-height: calc(292px + var(--haut)); border-radius: 0 0 26px 26px; }
.course-tete[data-entete="A"] .etiquette { top: calc(var(--barre-h) + var(--haut) + 4px); }
.course-tete[data-entete="A"] .tete-texte { padding: 12px 16px 14px; }
.course-tete[data-entete="A"] .course-titre { font-size: calc(30px * var(--txt)); }
/* B — bandeau intégré : une bande de verre au bas de la photo */
.course-tete[data-entete="B"] .tete-texte { margin: 0 8px 8px; border-radius: 16px; background: rgba(var(--v-teinte), .86); border: 1px solid rgba(var(--blanc-rgb), .1); }
/* Le bandeau B porte du texte dès son bord haut : son reflet reste plus discret (contraste). */
:root[data-verre-actif="1"] .course-tete[data-entete="B"] .tete-texte.v-flou::before { opacity: .45; }
.course-tete[data-entete="B"] .photo-voile { background: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0) 45%, rgba(var(--bg-page-rgb), .5) 100%); }
/* C — ruban cinéma : bandeau photo très compact, lumière de côté */
.course-tete[data-entete="C"] .course-photo { min-height: 0; border-radius: 16px; }
.course-tete[data-entete="C"] .photo-voile { background: linear-gradient(90deg, rgba(var(--bg-page-rgb), .94) 0%, rgba(var(--bg-page-rgb), .82) 56%, rgba(var(--bg-page-rgb), .42) 100%); box-shadow: inset 0 7px 0 rgba(0, 0, 0, .5), inset 0 -7px 0 rgba(0, 0, 0, .5); }
.course-tete[data-entete="C"] .etiquette { position: static; align-self: flex-end; margin: 12px 10px 0 0; }
.course-tete[data-entete="C"] .tete-texte { padding: 4px 14px 14px; }
.course-tete[data-entete="C"] .course-titre { font-size: calc(25px * var(--txt)); }
/* barre de la course : transparente sur l'en-tête, barre fine (verre en givré/liquide) une fois repliée */
.barre--course:not(.a-defile) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.barre--course:not(.a-defile)::before { display: none; }
.barre-titre { display: flex; flex-direction: column; align-items: center; min-width: 0; font-size: calc(16px * var(--txt)); line-height: 1.15; }
.barre-titre b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.barre-titre span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-texte); font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.rond--verre { background: rgba(var(--bg-page-rgb), .72); }
:root[data-atelier="1"] .barre--course .rond--preuves { width: 44px; padding: 0; justify-content: center; }
:root[data-atelier="1"] .barre--course .rond--preuves span { display: none; }
.barre--course .rond--preuves { background: rgba(var(--bg-page-rgb), .72); }

/* ------------------------------------------------------------------ 1d. partants */
.outils { flex-wrap: nowrap; }
.outils .segment button { min-width: 0; padding: 0 14px; }
.outils .bouton-ligne { flex: none; }
.note-comparer[hidden] { display: none; }
.partants { border-radius: 18px; }
.partant-bouton { min-height: 0; }
.partant-num { width: 28px; height: 28px; border-radius: 8px; font-size: calc(16px * var(--txt)); }
.partant-nom { min-width: 0; overflow: hidden; font-size: calc(15px * var(--txt)); font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.p-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.role--mini { flex: none; gap: 4px; min-height: 20px; padding: 0 7px 0 5px; background: var(--surface-raised); font-size: calc(12px * var(--txt)); font-weight: 700; }
.role--mini svg { width: 12px; height: 12px; }
.partant .partant-cote { font-size: calc(17px * var(--txt)); line-height: 1.1; }
.p-place .place { min-width: 28px; height: 20px; padding: 0 5px; font-size: calc(12px * var(--txt)); }
.p-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.p-l2 .musique { flex: none; flex-wrap: nowrap; gap: 3px; }
.p-l2 .mus { min-width: 20px; height: 20px; line-height: 20px; }
.p-l2 .annee { height: 16px; }
.p-l2 .ferrure { flex: none; font-size: calc(12px * var(--txt)); }
.p-l2 .ferrure svg { width: 16px; height: 16px; }
.p-driver { min-width: 0; overflow: hidden; font-size: calc(12px * var(--txt)); color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.partant .partant-gains { font-size: calc(12px * var(--txt)); }
.p-cache { display: none !important; }
/* A — liste deux lignes (≤ 64 px) */
.partant--A .partant-bouton { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 8px 12px 8px 10px; }
.partant--A .partant-num { grid-row: 1 / span 2; }
.p-d1 { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.p-d2 { justify-self: end; }
/* B — tableau hybride (≤ 56 px) */
.tableau-tete { display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px 50px; gap: 8px; padding: 0 12px 6px 10px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.tableau-tete span:nth-child(3) { text-align: center; }
.tableau-tete span:last-child { text-align: right; }
.partant--B .partant-bouton { display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px 50px; column-gap: 8px; align-items: center; padding: 5px 12px 5px 10px; }
.p-cf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-fer { display: flex; justify-content: center; }
.p-fer .ferrure { flex-direction: column; gap: 0; font-size: calc(12px * var(--txt)); line-height: 1.2; }
.p-fer .ferrure svg { width: 16px; height: 16px; }
.p-cote-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* C — accordéon (ligne fermée ≤ 56 px, un seul cheval ouvert) */
.partant--C .p-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.partant--C .partant-bouton { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 5px 4px 5px 10px; }
.p-deplier { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 0 10px 0 6px; font-size: calc(12px * var(--txt)); font-weight: 650; color: var(--text-secondary); }
.p-deplier svg { width: 16px; height: 16px; }
.partant[data-ouvert="1"] .p-deplier svg { transform: rotate(180deg); }
.partant--C[data-ouvert="1"] { border-radius: 14px; background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--accent); }
.p-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 2px 12px 12px 46px; }
.p-detail[hidden] { display: none; }
.pd-l { display: flex; flex-direction: column; min-width: 0; font-size: calc(13px * var(--txt)); }
.pd-k { font-size: calc(12px * var(--txt)); font-weight: 700; color: var(--text-secondary); }
.pd-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.pd-actions .bouton-contour { flex: 1; min-height: 44px; font-size: calc(14px * var(--txt)); }
.pd-actions svg { width: 16px; height: 16px; }
.partants { container-type: inline-size; }
.p-d2 { display: flex; align-items: center; gap: 6px; }
/* Liste étroite (téléphone de 320 px) : rôle en icône seule (libellé dans aria-label), gains
   dans la fiche, code de ferrure dans le pictogramme (aria-label) : le nom garde sa place. */
@container (max-width: 300px) {
  .p-l2 .ferrure span, .p-fer .ferrure span, .p-deplier-txt, .role--mini span { display: none; }
  .role--mini { padding: 0 5px; }
  .p-l2 .mus { min-width: 18px; padding: 0 2px; }
  .partant--A .partant-gains { display: none; }
  .partant--B .partant-bouton, .tableau-tete { grid-template-columns: 26px minmax(0, 1fr) 20px 46px; column-gap: 6px; }
  .tableau-tete span:nth-child(3) { visibility: hidden; }
}
.panneau-contenu { container-type: inline-size; }
.squelette .sq-ligne { min-height: 54px; padding: 10px 12px; }
.squelette--A .sq-ligne { min-height: 60px; }

/* ------------------------------------------------------------------ atelier */
.atelier { position: absolute; left: 0; right: 0; bottom: 0; z-index: 76; display: flex; flex-direction: column; max-height: 74%; border-radius: 26px 26px 0 0; background: var(--surface-card); border-top: 1px solid var(--border-strong); box-shadow: 0 -18px 50px rgba(0, 0, 0, .55); }
.atelier[hidden] { display: none; }
.atelier-tete { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 8px 2px 18px; }
.atelier-titre { flex: 1; margin: 0; font-family: var(--f-titre); font-weight: 600; font-size: calc(21px * var(--txt)); }
.atelier-corps { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 0 16px calc(22px + var(--bas)); }
.atelier-corps::-webkit-scrollbar { display: none; }
.atelier-note { margin: 4px 0 8px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.atelier-h { margin: 16px 0 8px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.atelier-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.atelier-presets button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 4px 6px; border-radius: 14px; border: 1px solid var(--border-strong); font-size: calc(14px * var(--txt)); text-align: center; }
.atelier-presets button span { font-size: calc(12px * var(--txt)); font-weight: 650; color: var(--gold); }
.atelier-presets button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.atelier-presets button[aria-pressed="true"] span { color: var(--on-accent); }
.atelier-zone { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.atelier-zone legend { margin: 0 0 6px; padding: 0; font-size: calc(14px * var(--txt)); font-weight: 700; color: var(--text-primary); }
.atelier-zone legend small { font-size: calc(12px * var(--txt)); font-weight: 600; color: var(--text-secondary); }
.atelier-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px; border-radius: 16px; background: var(--surface-sunken); }
.atelier-options button { min-height: 48px; padding: 4px 6px; border-radius: 12px; font-size: calc(13px * var(--txt)); font-weight: 650; line-height: 1.2; text-align: center; color: var(--text-secondary); }
.atelier-options button b { display: block; font-family: var(--f-titre); font-size: calc(15px * var(--txt)); color: var(--text-primary); }
.atelier-options button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.atelier-options button[aria-pressed="true"] b { color: var(--on-accent); }
.atelier-intensite { display: block; margin-top: 10px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.atelier-intensite input { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.atelier-jeux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.atelier-jeux button, .atelier-lien button, .atelier-mini button { min-height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border-strong); font-size: calc(14px * var(--txt)); font-weight: 650; }
.atelier-jeux .atelier-bascule { grid-column: 1 / -1; }
.atelier-bascule { background: var(--gold-fond); border-color: var(--gold-fond) !important; color: var(--on-gold-fond); }
.atelier-bascule[hidden] { display: none; }
.atelier-lien { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.atelier-lien input { min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-sunken); color: var(--text-secondary); font-size: calc(12px * var(--txt)); }
.atelier-mini { display: none; }
.atelier[data-etat="reduit"] { left: 10px; right: 10px; bottom: calc(86px + var(--bas)); max-height: none; border: 1px solid var(--border-strong); border-radius: 20px; }
.atelier[data-etat="reduit"] :is(.atelier-tete, .atelier-corps) { display: none; }
.atelier[data-etat="reduit"] .atelier-mini { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; }
.atelier-mini-texte { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: calc(12px * var(--txt)); color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 359px) {
  .marque { font-size: calc(16px * var(--txt)); letter-spacing: .04em; }
  .bouton-atelier { padding: 0 10px; }
  .bouton-atelier svg { display: none; }
  .outils { flex-wrap: nowrap; }
  .outils .segment { flex: 1 1 auto; }
  .outils .segment button { padding: 0 6px; font-size: calc(13px * var(--txt)); }
  .outils .bouton-ligne { flex: none; gap: 4px; padding: 0 8px; font-size: calc(13px * var(--txt)); }
  .vedette .vedette-nom { font-size: calc(25px * var(--txt)); }
  .course-tete .course-titre { font-size: calc(24px * var(--txt)); }
}

/* ==========================================================================================
   v3 (30/09/2026) : réglages de Drew par défaut ; verre beaucoup plus travaillé (plus haut, dans
   le bloc v2) ; fiche cheval en pleine page en verre ; « ! » en anneau ; couleur des titres ;
   menu Programme / Cote / Comparer ; pastilles de musique. Toujours : seuls transform et opacity
   sont animés, aucune animation CSS à images clés (les mouvements passent par physique.js).
   ========================================================================================== */

.atelier-options { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.atelier-presets button span { color: var(--gold); }
/* Dans la barre de la course, l'atelier n'est qu'une icône : la barre repliée garde la place du
   titre et de l'heure de départ (320 px compris). */
.bouton-atelier--icone { width: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.bouton-atelier--icone svg { display: block !important; width: 20px; height: 20px; }
.barre--course .rond--verre[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------------ barre du bas : une goutte */
:root[data-verre-actif="1"] :is(.dock-bulle, .dock-fenetre) {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(var(--blanc-rgb), .42), rgba(var(--blanc-rgb), 0) 52%, rgba(0, 60, 40, .12));
}
:root[data-verre-actif="1"] .dock-bulle { box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .7), inset 0 -2px 5px rgba(0, 60, 40, .28), 0 5px 16px rgba(var(--mint-rgb), .34); }

/* ------------------------------------------------------------------ menu Programme / Cote / Comparer */
.note-comparer { margin: 0 0 8px; }
/* A — mini-capsule : 34 px à l'œil, 44 px au doigt ; indicateur en goutte ; icônes rondes. */
.outils--A { display: flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 6px; }
.outils-espace { flex: 1; }
.menu-capsule { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: none; width: 206px; height: 44px; isolation: isolate; }
.menu-fond { position: absolute; left: 0; right: 0; top: 5px; height: 34px; z-index: 0; border-radius: 17px; background: var(--surface-card); border: 1px solid var(--border-subtle); }
.menu-goutte { position: absolute; left: 3px; top: 8px; z-index: 1; width: calc(50% - 3px); height: 28px; border-radius: 14px;
  background-color: var(--accent); background-image: linear-gradient(180deg, rgba(var(--blanc-rgb), .38), rgba(var(--blanc-rgb), 0) 55%);
  box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .6), 0 3px 10px rgba(var(--mint-rgb), .28); will-change: transform; }
.menu-capsule[data-valeur="cote"] > .menu-goutte { transform: translate3d(100%, 0, 0); }
.menu-capsule button { position: relative; z-index: 2; min-width: 0; min-height: 44px; padding: 0 12px; font-size: calc(14px * var(--txt)); font-weight: 650; text-align: center; color: var(--text-secondary); }
.menu-capsule button[aria-checked="true"] { color: var(--on-accent); }
.menu-icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-primary);
  background: radial-gradient(circle closest-side, rgba(var(--encre-rgb), .07) 0 74%, rgba(var(--encre-rgb), .2) 75% 79%, rgba(var(--encre-rgb), 0) 80%); }
.menu-icone svg { width: 19px; height: 19px; color: var(--accent); }
.menu-icone[aria-pressed="true"] { color: var(--on-accent); background: radial-gradient(circle closest-side, var(--accent) 0 78%, rgba(var(--blanc-rgb), 0) 79%); }
.menu-icone[aria-pressed="true"] svg { color: var(--on-accent); }
/* B — le tri dans les titres de colonnes : toucher « Cote » trie par cote, encore une fois
   inverse le sens (flèche) ; Comparer devient une icône dans la barre du haut. */
.tri-tete { display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px 50px; column-gap: 8px; align-items: center; height: 44px; margin: 0 0 2px; padding: 0 12px 0 10px; }
.tri-tete--A, .tri-tete--C { grid-template-columns: 28px minmax(0, 1fr) 50px; }
.tri-tete button, .tt-cheval { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.tri-tete .tt-num { width: 44px; margin-left: -8px; padding-left: 8px; }
.tri-tete .tt-cote { justify-self: end; justify-content: flex-end; width: 58px; margin-right: -4px; }
.tri-tete .tt-fers { font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); text-align: center; }
.tri-tete button[aria-pressed="true"] { color: var(--text-primary); }
.tt-sens { display: inline-block; min-width: 12px; font-size: calc(13px * var(--txt)); letter-spacing: 0; color: var(--accent); }
.tt-cheval { min-width: 0; }
.tt-info { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 -6px; color: var(--text-secondary); }
.tt-cheval .tt-long { white-space: nowrap; }
@media (max-width: 359px) { .tt-cheval .tt-long { display: none; } }
.tt-info svg { width: 17px; height: 17px; }
/* C — puce flottante en verre au-dessus de la barre du bas (onglet Partants seulement). */
.menu-puce { position: absolute; left: 50%; bottom: calc(88px + var(--bas)); z-index: 45; display: flex; align-items: center; gap: 0; height: 44px; padding: 0 2px 0 0; border-radius: 22px;
  transform: translate3d(-50%, 0, 0); background: var(--surface-dock); border: 1px solid var(--border-strong); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.menu-puce .menu-capsule { width: 190px; }
.menu-puce .menu-goutte { top: 7px; height: 30px; border-radius: 15px; }
.menu-puce .menu-icone { background: none; }
.menu-puce .menu-icone[aria-pressed="true"] { background: radial-gradient(circle closest-side, var(--accent) 0 78%, rgba(var(--blanc-rgb), 0) 79%); }
.ecran--course:not([data-onglet="0"]) .menu-puce { opacity: 0; visibility: hidden; }
:root[data-menu="C"] #panneau-partants .panneau-contenu { padding-bottom: calc(176px + var(--bas)); }

/* ------------------------------------------------------------------ couleur des titres */
/* Titres : course, carte Quinté+, cartes du programme, journée, feuilles, fiche cheval ; ligne
   d'infos : lieu (.ts-lieu), R·C (.ts-rc), heure (.ts-heure) ; titres de section. */
:root[data-titres="or"] :is(.course-titre, .vedette-nom, .carte-nom, .grand-titre, .feuille-titre, .fiche-nom, .fiche-mini, .barre-titre b, .vol-titre, .fiche-clone--nom) { color: var(--gold); }
:root[data-titres="or"] :is(.titre-bloc, .bloc-carte h3, .ts-rc, .ts-heure) { color: var(--gold); }
:root[data-titres="menthe"] :is(.course-titre, .vedette-nom, .carte-nom, .grand-titre, .feuille-titre, .fiche-nom, .fiche-mini, .barre-titre b, .vol-titre, .fiche-clone--nom) { color: var(--accent); }
:root[data-titres="menthe"] :is(.titre-bloc, .bloc-carte h3, .ts-lieu) { color: var(--accent); }
/* Dégradé : or vers menthe DANS le texte. La couleur déclarée (or) est la moins contrastée des
   deux : c'est elle que mesure le contrôle de contraste. */
:root[data-titres="degrade"] :is(.course-titre, .vedette-nom, .carte-nom, .grand-titre, .feuille-titre, .fiche-nom, .fiche-mini, .titre-bloc, .vol-titre, .fiche-clone--nom) {
  color: var(--gold);
  background-image: var(--titre-degrade, linear-gradient(100deg, var(--gold) 0%, var(--degrade-milieu) 42%, var(--accent) 100%));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-titres="degrade"] .titre-bloc b { -webkit-text-fill-color: var(--text-primary); }
:root[data-titres="degrade"] :is(.bloc-carte h3, .ts-lieu) { color: var(--gold); }
:root[data-titres="degrade"] .ts-heure { color: var(--accent); }
/* Accents : titres blancs, lieu en menthe, heure en or, titres de section en menthe. */
:root[data-titres="accents"] :is(.ts-lieu, .titre-bloc, .bloc-carte h3) { color: var(--accent); }
:root[data-titres="accents"] .ts-heure { color: var(--gold); }
:root[data-titres="accents"] .ts-rc { color: var(--text-primary); }

/* ------------------------------------------------------------------ pastilles de musique */
/* Toutes les options : même largeur pour chaque pastille (chiffres tabulaires), mêmes
   caractères, même ordre, même séparateur d'année que la v2. */
:root[data-musique] .musique { gap: 2px; flex-wrap: nowrap; }
:root[data-musique] .musique .mus { box-sizing: border-box; width: 21px; min-width: 21px; padding: 0; justify-content: center; letter-spacing: 0; }
:root[data-musique] .musique .mus small { margin-left: 0; font-size: calc(12px * var(--txt)); }
:root[data-musique] .musique .annee { height: 14px; margin: 0 1px; background: rgba(var(--encre-rgb), .32); }
/* Un peu plus de place pour le driver (initiale et nom) sur la même ligne. */
:root[data-musique] .p-l2 { gap: 6px; }
/* A — adoucies : fond teinté, texte coloré, sans liseré (un liseré collé aux lettres de « Dm » les brouille). */
:root[data-musique="A"] .musique .mus { height: 20px; line-height: 20px; border-radius: 6px; font-size: calc(12px * var(--txt)); font-weight: 750; }
:root[data-musique="A"] .mus[data-cat="victoire"] { background: rgba(var(--gold-rgb), .2); color: var(--gold); box-shadow: none; }
:root[data-musique="A"] .mus[data-cat="place"] { background: rgba(var(--mint-rgb), .13); color: var(--accent); box-shadow: none; }
:root[data-musique="A"] .mus:is([data-cat="autre"], [data-cat="inconnu"]) { background: rgba(var(--encre-rgb), .07); color: var(--text-secondary); }
:root[data-musique="A"] .mus[data-cat="incident"] { background: rgba(240, 138, 126, .15); color: var(--danger); box-shadow: none; }
/* B — texte coloré, sans boîte. */
:root[data-musique="B"] .musique .mus { height: 20px; line-height: 20px; background: none; border-radius: 0; font-size: calc(14px * var(--txt)); font-weight: 800; }
:root[data-musique="B"] .mus[data-cat="victoire"] { color: var(--gold); }
:root[data-musique="B"] .mus[data-cat="place"] { color: var(--accent); }
:root[data-musique="B"] .mus:is([data-cat="autre"], [data-cat="inconnu"]) { color: var(--text-secondary); font-weight: 600; }
:root[data-musique="B"] .mus[data-cat="incident"] { color: var(--danger); }
/* C — petites pastilles rondes : or, argent, bronze pour le podium, anneau rouge pour un incident. */
:root[data-musique="C"] .musique .mus { height: 22px; line-height: 22px; border-radius: 50%; font-size: calc(12px * var(--txt)); font-weight: 750; background: none; color: var(--text-secondary); box-shadow: inset 0 0 0 1.5px rgba(var(--encre-rgb), .26); }
:root[data-musique="C"] .mus[data-res="1"] { background: var(--gold-fond); color: var(--on-gold-fond); box-shadow: none; }
:root[data-musique="C"] .mus[data-res="2"] { background: var(--silver); color: var(--on-silver); box-shadow: none; }
:root[data-musique="C"] .mus[data-res="3"] { background: var(--bronze); color: var(--on-bronze); box-shadow: none; }
/* Incident : disque rouge sombre plein (un anneau rouge collé aux lettres de « Dm » les brouille). */
:root[data-musique="C"] .mus[data-cat="incident"] { color: var(--danger); background: rgba(240, 138, 126, .17); box-shadow: none; }
:root[data-musique="C"] .musique .mus small { margin-left: -1px; }
.p-l2 .musique { flex: none; }

/* ------------------------------------------------------------------ fiche cheval en pleine page */
/* Une page entière en verre au-dessus de la course. Trois ouvertures (fiche.js, transform et
   opacity seulement) : A la ligne grandit jusqu'à devenir la page, numéro et nom volent ; B une
   vitre monte et floute la liste ; C la liste recule, la fiche vient au premier plan. */
.fiche { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 74; overflow: hidden; }
.fiche[hidden] { display: none; }
.fiche[data-phase="ouverture"], .fiche[data-phase="fermeture"] { pointer-events: none; }
.fiche-voile { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--ombre); opacity: 0; pointer-events: none; }
.fiche-verre { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; background: var(--surface-card); will-change: transform, opacity; }
.fiche-page { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform, opacity; }
/* Au repos, le transform neutre isolait la ligne 18+ sous la bande de geste ; les transforms animés restent actifs. */
.fiche[data-phase="ouverte"] .fiche-page--repos { transform: none; will-change: auto; }
.fiche-barre { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: calc(var(--barre-h) + var(--haut)); padding: var(--haut) 6px 0; background: var(--surface-card); touch-action: none; cursor: grab; }
.fiche-mini { flex: 1; min-width: 0; margin: 0; text-align: center; font-family: var(--f-titre); font-weight: 600; font-size: calc(17px * var(--txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.fiche-poignee { position: absolute; left: 50%; top: calc(var(--haut) + 5px); width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(var(--encre-rgb), .28); pointer-events: none; }
.fiche-barre .rond svg { width: 22px; height: 22px; }
.fiche-barre .rond--verre { background: rgba(var(--bg-page-rgb), .5); }
/* v4 : le texte s'arrête 2 px au-dessus du liseré du verre (un titre ne passe plus sur le bord clair, mesuré en liquide et cristal 100). */
.fiche-corps { position: absolute; left: 0; top: calc(var(--barre-h) + var(--haut)); right: 0; bottom: calc(var(--bas) + 8px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 8px 12px; }
.fiche-corps::-webkit-scrollbar { display: none; }
.fiche-bord { position: absolute; left: 0; top: calc(var(--barre-h) + var(--haut)); bottom: 0; z-index: 4; width: 22px; touch-action: none; }
.fiche-vol { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; }
.fiche-clone { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; will-change: transform; }
.fiche-clone--nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--fc-nom, calc(30px * var(--txt))); line-height: 1.1; color: var(--text-primary); white-space: nowrap; }
.fiche-hero { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 8px 0 14px; }
.fiche-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface-raised); box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .16); font-family: var(--f-titre); font-weight: 600; font-size: calc(28px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.fiche-id { min-width: 0; }
.fiche-nom { margin: 0; font-family: var(--f-titre); font-weight: 600; font-size: calc(30px * var(--txt)); line-height: 1.1; overflow-wrap: anywhere; }
.fiche-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }
.fiche-sous .role { min-height: 28px; background: var(--surface-raised); }
.fiche-cote { display: flex; flex-direction: column; align-items: flex-end; }
.fiche-cote b { font-family: var(--f-titre); font-weight: 600; font-size: calc(32px * var(--txt)); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.fiche-cote span { margin-top: 4px; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.fiche-lignes { display: grid; gap: 8px; }
.fiche-ligne { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.fiche-ligne .k { font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.fiche-corps .bloc-carte { margin-bottom: 12px; }
.fiche-corps .musique { gap: 4px; }
:root[data-verre-actif="1"] .fiche-corps .bloc-carte { background-color: rgba(var(--v-teinte), .5); border-color: rgba(var(--blanc-rgb), .12); box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .14); }
:root[data-verre-actif="1"] .fiche-corps .chiffres-4 div { background-color: rgba(var(--blanc-rgb), .06); box-shadow: inset 0 1px 0 rgba(var(--blanc-rgb), .12); }
:root[data-verre-actif="1"] .fiche-barre.v-flou:not(.a-defile) { background-color: rgba(var(--v-teinte), calc(var(--v-alpha) * .6)); }
.fiche-barre.a-defile .fiche-mini { opacity: 1; }
html[data-mouvement="reduit"] .fiche-barre { cursor: default; }

/* Toutes les valeurs entre la barre de retour et l'espace du dock, sans les couper. */
.fiche-contenu { display: grid; gap: 6px; font-size: calc(13px * var(--txt)); line-height: 1.25; }
.fiche-contenu .fiche-hero { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; margin: 0 0 2px; }
.fiche-contenu .fiche-num { width: 44px; height: 44px; font-size: calc(24px * var(--txt)); border-radius: 12px; }
.fiche-contenu .fiche-nom { font-size: calc(24px * var(--txt)); line-height: 1.1; }
.fiche-contenu .fiche-cote b { font-size: calc(24px * var(--txt)); }
.fiche-contenu .fiche-sous { gap: 4px 6px; margin-top: 4px; font-size: calc(12px * var(--txt)); }
.fiche-contenu .fiche-sous .role { min-height: 24px; font-size: calc(12px * var(--txt)); }
.fiche-contenu .bloc-carte { margin: 0; padding: 6px 10px; border-radius: 14px; min-width: 0; }
.fiche-contenu .bloc-carte h3 { margin: 0 0 6px; font-size: calc(13px * var(--txt)); line-height: 1.25; }
.fiche-contenu .fiche-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.fiche-contenu .fiche-grille > div { min-width: 0; padding: 0; border: 0; }
.fiche-contenu [data-cote],
.fiche-contenu [data-bloc="equipement"] .fiche-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiche-contenu .fiche-large { grid-column: 1 / -1; }
.fiche-contenu .dl dt { font-size: calc(12px * var(--txt)); line-height: 1.2; letter-spacing: 0; text-transform: none; }
.fiche-contenu .dl dd { font-size: calc(13px * var(--txt)); line-height: 1.25; overflow-wrap: anywhere; }
.fiche-contenu .musique { flex-wrap: wrap; gap: 4px; white-space: normal; }
.fiche-contenu .musique small, .fiche-contenu .mtu, .fiche-contenu .mt { font-size: calc(12px * var(--txt)); }
.fiche-contenu .mtu { min-width: 26px; min-height: 24px; padding: 2px 3px; }
.fiche-contenu .chiffres-4 { gap: 4px; }
.fiche-contenu .chiffres-4 div { min-width: 0; padding: 6px 2px; }
.fiche-contenu .chiffres-4 b { font-size: calc(16px * var(--txt)); overflow-wrap: anywhere; }
.fiche-contenu .chiffres-4 span { font-size: calc(12px * var(--txt)); }
.fiche-contenu .feuille-actions { margin: 0; }
.fiche-contenu .feuille-actions button { min-height: 44px; padding: 8px; }
.fiche-contenu .fer { display: inline-flex; vertical-align: middle; }
.fiche-contenu :is(.note, small) { font-size: calc(12px * var(--txt)); }

/* fiche Carte en verre (lot F) */
:root { --fc-nom: calc(30px * var(--txt)); }
.fiche-contenu {
  --fc-face: linear-gradient(160deg, var(--surface-raised), var(--surface-card) 45%, var(--surface-sunken));
  --fc-bord: #FFFFFF2E; --fc-scan: #FFFFFF06; --fc-or-voile: #E3B45A38; --fc-menthe-voile: #8CE8BE1A; --fc-or-haut: #F2D694;
  --fc-rim: inset 0 1px 0 #FFFFFF80, inset 0 0 0 1px #E3B45A1F, inset 0 -18px 30px -20px #000, 0 22px 44px #000000A0;
}
:root[data-theme="clair"] .fiche-contenu {
  --fc-bord: #142B2322; --fc-scan: #142B2306; --fc-or-voile: #7A520A1F; --fc-menthe-voile: #146B4A14; --fc-or-haut: var(--gold);
  --fc-rim: inset 0 1px 0 #FFFFFFF2, inset 0 0 0 1px #7A520A1F, 0 12px 30px #142B2329;
}
.fc-scene { perspective: 1100px; min-width: 0; }
.fc-carte { display: grid; transform-style: preserve-3d; transition: transform .75s var(--ease); min-width: 0; }
.fc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 12px; border-radius: 22px; border: 1px solid var(--fc-bord); background: repeating-linear-gradient(115deg, var(--fc-scan) 0 2px, transparent 2px 10px), radial-gradient(120% 70% at 85% 0%, var(--fc-or-voile), transparent 55%), radial-gradient(100% 80% at 0% 100%, var(--fc-menthe-voile), transparent 60%), var(--fc-face); box-shadow: var(--fc-rim); }
.fc-arriere { transform: rotateY(180deg); }
.fc-carte.retournee { transform: rotateY(180deg); }
.fc-avant::after { content: ''; position: absolute; inset: -30% -80%; background: linear-gradient(100deg, transparent 42%, var(--fc-or-voile) 49%, var(--fc-bord) 50%, var(--fc-or-voile) 51%, transparent 58%); transform: translateX(-60%); opacity: 0; pointer-events: none; animation: fc-reflet 2.4s .5s var(--ease) 1 both; }
@keyframes fc-reflet { 0% { transform: translateX(-60%); opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
.fc-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.fc-qui { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fc-type, .fc-lbl { font-size: calc(12px * var(--txt)); line-height: 1.25; color: var(--text-secondary); }
.fc-type { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); overflow-wrap: anywhere; }
.fc-type .role { min-height: 28px; font-size: calc(12px * var(--txt)); }
.fc-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: var(--fc-menthe-voile); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: calc(12px * var(--txt)); }
:root[data-theme="clair"] .fc-badge { color: #105238; }
.fc-vif { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.fc-vif::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: fc-battement 2.4s ease-out 3; }
@keyframes fc-battement { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.fiche-num, .fiche-contenu .fiche-num { flex: none; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(160deg, var(--fc-or-haut, var(--gold)), var(--gold)); color: var(--on-gold); font-family: var(--f-titre); font-size: calc(24px * var(--txt)); box-shadow: inset 0 1px 0 #FFFFFF80; }
.fiche-contenu .fiche-nom { margin-top: 4px; font-size: var(--fc-nom); line-height: 1.04; overflow-wrap: anywhere; }
.fc-id { margin: 4px 0 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.fc-id dt:not(.coq-sr) { font-size: calc(12px * var(--txt)); }
.fc-id dd { margin: 0; }
.fc-chiffres { display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fc-bord); }
.fc-chiffres > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.fc-chiffres b { font-family: var(--f-titre); font-size: calc(21px * var(--txt)); line-height: 1.08; font-weight: 600; color: var(--fc-or-haut); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.fc-chiffres > div:last-child { text-align: right; }
.fc-chiffres span { font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.fc-signature { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fc-bord); min-width: 0; }
.fc-sig-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; }
.fc-barres { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.fc-barres li { display: grid; justify-items: stretch; }
.fc-barres .b { display: flex; align-items: flex-end; height: 36px; }
.fc-barres i { display: block; width: 100%; height: calc(var(--h) * 100%); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--accent), var(--fc-menthe-voile)); transform-origin: 50% 100%; animation: fc-monte .8s .3s var(--ease) both; }
.fc-barres .p2 i { background: linear-gradient(180deg, #FFFFFF, #C9D1CE 60%, #C9D1CE40); }
.fc-barres .p3 i { background: linear-gradient(180deg, #FFE3CC, #D69463 60%, #D6946340); }
.fc-barres .p0 i { background: var(--border-strong); }
@keyframes fc-monte { from { transform: scaleY(.03); } to { transform: scaleY(1); } }
.fc-codes { margin: 6px 0 0; }
.fc-dos-titre { margin: 10px 0 0; font-family: var(--f-titre); font-weight: 600; font-size: calc(17px * var(--txt)); line-height: 1.2; color: var(--fc-or-haut); }
.fc-grille, .fc-grille .dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.fc-grille .dl { grid-column: 1 / -1; margin: 0; }
.fc-grille > div:not(.dl), .fc-grille .dl > div { min-width: 0; padding: 7px 9px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--fc-bord); }
.fc-grille dt { font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.fc-grille dd { margin: 0; font-size: calc(13px * var(--txt)); font-weight: 650; overflow-wrap: anywhere; }
.fc-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.fc-actions .feuille-actions { display: contents; }
.fc-retourner { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary); font-size: calc(13px * var(--txt)); font-weight: 700; cursor: pointer; }
.fc-retourner svg { flex: none; width: 20px; height: 20px; transition: transform .5s var(--ease); }
.fc-retourner[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.fc-retourner[aria-pressed="true"] svg { transform: rotate(180deg); }
.fc-retourner:active { transform: scale(.96); }
.fc-actions .bouton-plein { gap: 4px; font-size: calc(13px * var(--txt)); }
.fc-rdv { display: grid; grid-template-columns: 74px minmax(0, 1fr); min-height: 66px; border-radius: 16px; background: radial-gradient(circle at 74px 0, transparent 8px, var(--surface-card) 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 74px 100%, transparent 8px, var(--surface-card) 8.5px) bottom / 100% 51% no-repeat; }
.fc-rdv-heure { display: grid; place-content: center; gap: 4px; text-align: center; border-right: 2px dashed var(--accent); color: var(--accent); font-family: var(--f-titre); font-weight: 600; font-size: calc(21px * var(--txt)); line-height: 1; }
.fc-rdv-heure small { font-family: var(--f-texte); font-weight: 700; font-size: calc(12px * var(--txt)); line-height: 1.1; letter-spacing: .08em; color: var(--text-secondary); }
.fc-rdv-texte { display: grid; align-content: center; gap: 1px; padding: 7px 10px 7px 12px; min-width: 0; overflow-wrap: anywhere; }
.fc-rdv-texte > b { font-size: calc(14px * var(--txt)); }
.fc-rdv-texte span { font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.fc-rdv-texte .fc-or, .fc-or { color: var(--gold); font-weight: 700; }
.fc-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fc-mini { min-width: 0; min-height: 64px; border-radius: 16px; border: 1px solid var(--fc-bord); background: radial-gradient(100% 90% at 100% 0%, var(--fc-or-voile), transparent 60%), var(--fc-face); box-shadow: inset 0 1px 0 var(--fc-bord); }
.fc-mini-lien { display: grid; align-content: center; gap: 1px; min-height: 62px; padding: 8px 10px; color: var(--text-primary); text-decoration: none; overflow-wrap: anywhere; }
.fc-mini b { font-family: var(--f-titre); font-weight: 600; font-size: calc(16px * var(--txt)); line-height: 1.2; }
.fiche-contenu .fc-jr { display: flex; position: relative; z-index: 5; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; margin: 0; padding: 0 0 0 12px; border: 1px solid var(--gold); border-radius: 14px; background: var(--fc-or-voile); font-size: calc(12px * var(--txt)); }
.fc-jr a { display: inline-flex; align-items: center; min-height: 44px; padding-right: 12px; color: var(--text-primary); font-weight: 650; }
@media (max-width: 359px) {
  :root { --fc-nom: calc(27px * var(--txt)); }
  .fc-face { padding: 10px; }
  .fc-chiffres { column-gap: 8px; }
  .fc-chiffres b { font-size: calc(18px * var(--txt)); }
  .fc-barres { gap: 3px; }
  .fc-actions { gap: 6px; }
  .fc-retourner { flex-wrap: wrap; gap: 2px; padding: 4px; }
  .fc-actions .bouton-plein { flex-wrap: wrap; }
}
html[data-mouvement="reduit"] .fc-scene { perspective: none; }
html[data-mouvement="reduit"] :is(.fc-carte, .fc-carte.retournee, .fc-arriere) { transform: none; }
html[data-mouvement="reduit"] .fc-arriere { opacity: 0; pointer-events: none; }
html[data-mouvement="reduit"] .fc-carte.retournee .fc-avant { opacity: 0; pointer-events: none; }
html[data-mouvement="reduit"] .fc-carte.retournee .fc-arriere { opacity: 1; pointer-events: auto; }

/* ==========================================================================================
   v4 (30/09/2026) : thème clair (palette R11 §9), édition en direct sur la vraie page (bande en
   verre, cadre du bloc choisi, poignée), construction de la page (blocs, tailles, densité, taille
   du texte), modes d'affichage des statistiques. Le thème est posé par theme.js avant la
   feuille de style ; la bascule change des jetons, jamais une animation de couleur.
   ========================================================================================== */

/* ------------------------------------------------------------------ thème clair */
:root[data-theme="clair"] {
  --bg-page: #F5F4EE; --bg-page-rgb: 245, 244, 238;
  --surface-card: #FFFEFA; --surface-raised: #EBF3ED; --surface-sunken: #EEEEE7; --surface-dock: #FFFEFA;
  --border-subtle: #D3DDD6; --border-strong: #9FB2A7;
  --text-primary: #142B23; --text-secondary: #425C50; --text-muted: #526A5E;
  --accent: #146B4A; --on-accent: #FFFFFF; --gold: #7A520A; --on-gold: #FFFFFF;
  --danger: #8E2B22; --danger-chip: #8E2B22; --on-danger-chip: #FFFFFF; --info: #245D8C;
  --mus-other: #DCE6E0; --on-mus-other: #142B23;
  --encre-rgb: 20, 43, 35; --v-teinte: 250, 250, 246; --degrade-milieu: #6B5A12;
}
/* Zones photo : elles restent sombres dans les deux thèmes (texte clair sur voile sombre) ; une
   photo n'est jamais inversée. */
:root[data-theme="clair"] :is(.photo, .vol-photo) {
  --bg-page: #04130F; --bg-page-rgb: 4, 19, 15; --surface-card: #0C231B; --surface-raised: #133126; --surface-sunken: #081B15; --surface-dock: #0A1F18;
  --border-subtle: #1F4234; --border-strong: #2E5A48; --text-primary: #F1EBDD; --text-secondary: #AFC3B8; --text-muted: #8CA398;
  --accent: #8CE8BE; --on-accent: #06251A; --gold: #E3B45A; --on-gold: #2A1C03; --danger: #F08A7E; --danger-chip: #A8403A; --on-danger-chip: #FFF3F1; --info: #9CC3EE;
  --mus-other: #3B5047; --on-mus-other: #E4ECE8; --encre-rgb: 255, 255, 255; --v-teinte: 7, 24, 18; --degrade-milieu: #F2D694;
  --v-alpha: var(--v-alpha-s, .6); --v-alpha-fort: var(--v-alpha-fort-s, .8); --v-lum: var(--v-lum-s, .78);
  color: var(--text-primary);
}
/* En clair, l'ambiance tirée de la photo reste une teinte : plus forte, elle grisait la page et faisait tomber le texte secondaire sous AA (mesuré : 4,07 en verre 100). */
:root[data-theme="clair"] .ambiance { opacity: .07; }
:root[data-theme="clair"] .pont-sol { background: radial-gradient(closest-side, rgba(20, 43, 35, .2), rgba(20, 43, 35, 0)); }
:root[data-theme="clair"] :is(.vedette, .carte) { box-shadow: 0 14px 30px rgba(20, 43, 35, .16); }
:root[data-theme="clair"] :is(.dock, .menu-puce) { box-shadow: 0 10px 28px rgba(20, 43, 35, .18); }
:root[data-theme="clair"] :is(.feuille, .bulle, .annonce) { box-shadow: 0 -8px 34px rgba(20, 43, 35, .16); }
:root[data-theme="clair"] :is(.rond--verre, .barre--course .rond--preuves) { background: rgba(var(--bg-page-rgb), .9); }
:root[data-theme="clair"] .regle-ombre--g { background: linear-gradient(90deg, var(--surface-sunken), rgba(238, 238, 231, 0)); }
:root[data-theme="clair"] .regle-ombre--d { background: linear-gradient(270deg, var(--surface-sunken), rgba(238, 238, 231, 0)); }
/* Verre clair : les commandes sont en verre, les surfaces de chiffres restent opaques (R11). */
:root[data-theme="clair"][data-verre-actif="1"] .v-flou {
  border-color: rgba(var(--encre-rgb), .12);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(20, 43, 35, .12), inset 0 12px 16px -14px rgba(255, 255, 255, .8), inset 0 -14px 18px -14px rgba(20, 43, 35, .12), 0 12px 30px rgba(20, 43, 35, .16);
}
:root[data-theme="clair"][data-verre-actif="1"][data-verre-effectif="givre"] .v-flou {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 40%), var(--grain);
  background-size: auto, 140px 140px;
}
:root[data-theme="clair"][data-verre-actif="1"] :is(.photo, .vol-photo) .v-flou {
  border-color: rgba(255, 255, 255, .16);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--v-rim) * .2)) 0%, rgba(255, 255, 255, 0) 36%), linear-gradient(0deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 28%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--v-rim)), inset 0 -1px 0 rgba(0, 0, 0, .5), inset 0 12px 16px -14px rgba(255, 255, 255, calc(var(--v-rim) * .55)), inset 0 -14px 18px -14px rgba(0, 0, 0, .6), 0 16px 36px rgba(0, 0, 0, .42);
}
:root[data-theme="clair"][data-verre-actif="1"] :is(.v-plat, .carte, .fil, .bloc-carte, .partants) { background-color: var(--surface-card); background-image: none; border-color: var(--border-subtle); box-shadow: 0 1px 2px rgba(20, 43, 35, .06); }
:root[data-theme="clair"][data-verre-actif="1"] :is(.rail-puce, .puce-horloge) { background-color: rgba(255, 255, 255, .78); background-image: none; border-color: rgba(var(--encre-rgb), .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
:root[data-theme="clair"][data-verre-actif="1"] :is(.feuille, .fiche-corps) .bloc-carte { background-color: var(--surface-card); }
:root[data-theme="clair"][data-verre-actif="1"] .fiche-corps .chiffres-4 div { background-color: var(--surface-raised); box-shadow: none; }
:root[data-theme="clair"][data-verre-actif="1"] .carte { box-shadow: 0 14px 30px rgba(20, 43, 35, .16); }
:root[data-theme="clair"][data-verre-actif="1"] :is(.dock-bulle, .dock-fenetre) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 52%); }
:root[data-theme="clair"][data-verre-actif="1"] .dock-bulle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 5px 14px rgba(20, 107, 74, .25); }
:root[data-theme="clair"] .menu-goutte { background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 10px rgba(20, 107, 74, .22); }
:root[data-theme="clair"][data-musique="A"] .mus[data-cat="incident"], :root[data-theme="clair"][data-musique="C"] .mus[data-cat="incident"] { background: rgba(163, 55, 44, .1); }

/* ------------------------------------------------------------------ taille du texte, densité */
:root[data-texte="grand"] { --txt: 1.15; }
:root[data-texte="tres-grand"] { --txt: 1.3; }
:root:not([data-texte="normal"]) :is(.bandeau, .capsule) { height: auto; min-height: 62px; }
:root:not([data-texte="normal"]) .capsule-moitie { padding-top: 8px; padding-bottom: 8px; }
:root[data-densite="compact"] .fil-ligne { min-height: 56px; padding: 6px 12px; }
:root[data-densite="compact"] .partant--A .partant-bouton { padding-top: 5px; padding-bottom: 5px; }
:root[data-densite="compact"] .partant--B .partant-bouton { padding-top: 3px; padding-bottom: 3px; }
:root[data-densite="compact"] .bloc-carte { padding: 10px 12px; margin-bottom: 8px; }
:root[data-densite="compact"] .titre-bloc { margin: 22px 0 8px; }
:root[data-densite="compact"] :is(.role-ligne, .podium li) { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
:root[data-densite="confort"] body { line-height: 1.5; }
:root[data-densite="confort"] .fil-ligne { min-height: 84px; padding: 14px 16px; }
:root[data-densite="confort"] .partant--A .partant-bouton { padding-top: 12px; padding-bottom: 12px; }
:root[data-densite="confort"] .partant--B .partant-bouton { padding-top: 9px; padding-bottom: 9px; }
:root[data-densite="confort"] .bloc-carte { padding: 18px; }
:root[data-densite="confort"] .titre-bloc { margin: 36px 0 14px; }

/* ------------------------------------------------------------------ bouton « Modifier » (lot 1 : le crayon de la coquille) */
/* Le rond de 44 px, le mot caché hors modification et la pilule « OK » sont dans coquille.css (.bouton-perso y est nommé,
   la fiche cheval garde son balisage). Ici : le disque translucide sur la photo de la course et le plein de « OK ». */
.bouton-perso { white-space: nowrap; }
.bouton-perso--barre { background: rgba(var(--bg-page-rgb), .78); }
:root[data-theme="clair"] .bouton-perso--barre { background: rgba(var(--bg-page-rgb), .92); }
.bouton-perso[aria-pressed="true"], :root[data-theme] .bouton-perso[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.bouton-perso[aria-pressed="true"] svg { color: var(--on-accent); }

/* ------------------------------------------------------------------ blocs de l'accueil */
.bloc-accueil[hidden], .bloc-fiche[hidden] { display: none; }
.vedette[data-taille="court"][data-carte="A"]:not([data-horloge-c="1"]) .vedette-photo { aspect-ratio: 16 / 9.5; }
.vedette[data-taille="court"][data-carte="B"]:not([data-horloge-c="1"]) .vedette-photo { aspect-ratio: 16 / 8; }
.vedette[data-taille="court"][data-carte="C"]:not([data-horloge-c="1"]) .vedette-photo { aspect-ratio: 16 / 8.5; }
.vedette[data-taille="court"] .vedette-faits { display: none; }
.vedette-detail { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.vedette-detail b { color: var(--text-primary); font-weight: 650; }
.fil[data-taille="court"] .fil-faits { display: none; }
.fil[data-taille="court"] .fil-ligne { min-height: 56px; }
.fil-plus { display: block; margin-top: 2px; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.dock-boutons { grid-template-columns: repeat(var(--dock-n, 4), 1fr); }
.dock-rang { width: calc(var(--item-w, 100%) * var(--dock-n, 4)); grid-template-columns: repeat(var(--dock-n, 4), 1fr); }

/* ------------------------------------------------------------------ modifier sa page (v5, façon iPhone) */
:root {
  /* Vignettes du thème (apercus.js) : les jetons des deux thèmes, repris tels quels. */
  --vig-sombre-fond: #04130F; --vig-sombre-carte: #0C231B; --vig-sombre-texte: #F1EBDD; --vig-sombre-or: #E3B45A;
  --vig-clair-fond: #F5F4EE; --vig-clair-carte: #FFFEFA; --vig-clair-bord: #D3DDD6; --vig-clair-texte: #142B23; --vig-clair-vert: #146B4A;
}
.app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.app :is(input, textarea) { -webkit-user-select: text; user-select: text; }
:root[data-edition="1"] [data-dock] { visibility: hidden; }
:root[data-edition="1"] :is(.bord-retour, .fiche-bord) { pointer-events: none; }
:root[data-edition="1"] .fiche-barre { pointer-events: none; }
:root[data-edition="1"] .fiche-barre button { pointer-events: auto; }
:root[data-edition="1"] .annonce { visibility: hidden; }
/* Pendant la modification, la page s'arrête au-dessus de la zone du bas : un message n'y passe
   jamais par-dessus un bloc ; le doigt glisse de côté sur un bloc sans que le navigateur le prenne. */
:root[data-edition="1"] :is(.defile, .pager) { bottom: var(--bande-h, 132px); }
:root[data-edition="1"] .fiche-corps { bottom: var(--bande-h, 132px); padding-bottom: 24px; }
:root[data-edition="1"] :is(.contenu, .panneau-contenu) { padding-bottom: 32px; }
:root[data-edition="1"] .menu-puce { bottom: calc(var(--bande-h, 132px) + 12px); }
:root[data-edition="1"] :is(.ecran, .defile, .panneau, .fiche-corps, .course-tete) { touch-action: pan-y; }

/* la zone du bas : message (ou aide), feuille éventuelle, barre de commandes */
.editeur { position: absolute; left: 6px; right: 6px; bottom: calc(6px + var(--bas)); z-index: 88; display: flex; flex-direction: column; gap: 4px; max-height: calc(100% - var(--barre-h) - var(--haut) - 104px); padding: 6px; border-radius: 22px; background: var(--surface-dock); border: 1px solid var(--border-strong); box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); }
:root[data-theme="clair"] .editeur { box-shadow: 0 -8px 34px rgba(20, 43, 35, .18); }
.editeur[hidden] { display: none; }
.ed-message { flex: none; display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
.ed-message[hidden] { display: none; }
.ed-statut, .ed-toast, .ed-aide { display: flex; align-items: center; gap: 8px; min-height: 44px; }
:is(.ed-statut, .ed-toast, .ed-aide)[hidden] { display: none; }
:is(.ed-statut, .ed-toast, .ed-aide) p { flex: 1; min-width: 0; margin: 0; font-size: calc(13px * var(--txt)); line-height: 1.3; }
.ed-statut { padding-left: 8px; }
.ed-statut p { color: var(--text-secondary); }
.ed-statut p:focus { outline: none; }
.ed-toast { padding: 0 0 0 12px; border-radius: 14px; background: var(--surface-raised); }
.ed-toast p { color: var(--text-primary); font-weight: 600; }
.ed-aide { padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--surface-raised); border: 1.5px solid var(--accent); }
.ed-aide p { color: var(--text-primary); }
.ed-aide p b { color: var(--accent); }
.ed-ic { display: inline-flex; vertical-align: -0.2em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--text-primary); color: var(--bg-page); align-items: center; justify-content: center; }
.ed-ic svg { width: .95em; height: .95em; }
.ed-bouton { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border-strong); font-size: calc(14px * var(--txt)); font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.ed-bouton svg { width: 18px; height: 18px; flex: none; }
.ed-bouton--plein { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ed-bouton[aria-pressed="true"] { background: var(--surface-raised); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ed-bouton:disabled { border-style: dashed; color: var(--text-secondary); }
.ed-bouton[hidden] { display: none; }
.ed-bouton--ligne { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; padding: 8px 14px; }
.ed-bouton--ligne svg { color: var(--accent); }
.ed-bouton--danger { color: var(--danger); }
.ed-bouton--danger svg { color: var(--danger); }
.ed-bouton--plein.ed-bouton--danger { background: var(--danger-chip); border-color: var(--danger-chip); color: var(--on-danger-chip); }
.ed-barre { flex: none; display: flex; flex-wrap: wrap; gap: 4px; }
.ed-barre-bouton { flex: 1 1 auto; min-width: 44px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 3px; border-radius: 15px; color: var(--text-primary); font-size: calc(12px * var(--txt)); font-weight: 700; line-height: 1.15; text-align: center; }
.ed-barre-bouton svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
.ed-barre-bouton[hidden] { display: none; }
.ed-barre-bouton:disabled { color: var(--text-secondary); }
.ed-barre-bouton:disabled svg { color: var(--text-secondary); }
.ed-barre-bouton[aria-pressed="true"] { background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ed-barre-bouton--plein { background: var(--accent); color: var(--on-accent); }
.ed-barre-bouton--plein svg { color: var(--on-accent); }

/* les feuilles (Réglages, Apparence, Blocs cachés, choix) : tout visible sans défiler de côté */
.ed-feuille { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 4px 2px 2px; border-top: 1px solid var(--border-subtle); }
.ed-feuille::-webkit-scrollbar { display: none; }
.ed-feuille[hidden] { display: none; }
.ed-feuille-tete { display: flex; align-items: center; gap: 8px; padding: 0 0 4px 8px; }
.ed-feuille-tete h2 { flex: 1; min-width: 0; margin: 0; font-size: calc(16px * var(--txt)); font-weight: 700; }
.ed-feuille-tete h2:focus { outline: none; }
.ed-feuille-corps { display: grid; gap: 12px; padding: 2px 4px 4px; }
.ed-groupe h3 { margin: 0 0 6px; font-size: calc(12px * var(--txt)); font-weight: 700; color: var(--text-secondary); }
.ed-choix-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.ed-vignette { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding: 5px 2px 6px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface-card); text-align: center; }
.ed-vignette[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--accent); }
.ed-vignette[data-indispo="1"] { border-style: dashed; }
.ed-vignette-nom { max-width: 100%; font-size: calc(12px * var(--txt)); font-weight: 650; line-height: 1.2; color: var(--text-primary); overflow-wrap: break-word; }
.ed-vignette-sous { font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.ed-curseur { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 6px; padding: 0 4px; font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
.ed-curseur input { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent); }
.ed-curseur b { min-width: 34px; text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ed-groupe .ed-bouton--ligne { margin-top: 6px; }
.ed-lien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ed-lien input { flex: 1 1 150px; min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-sunken); color: var(--text-secondary); font-size: calc(12px * var(--txt)); }
.ed-ligne-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-ligne-boutons .ed-bouton--ligne { justify-content: center; }
.ed-caches { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ed-caches li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 12px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--border-subtle); }
.ed-caches li span { flex: 1; min-width: 0; font-weight: 650; }
.ed-vide { margin: 4px 8px; color: var(--text-secondary); font-size: calc(14px * var(--txt)); }
.ed-alerte { padding: 10px; border-radius: 16px; background: var(--surface-raised); border: 1px solid rgba(var(--gold-rgb), .8); }
.ed-alerte p { margin: 0 0 10px; font-size: calc(14px * var(--txt)); }
.ed-choix-actions { display: grid; gap: 8px; }
.ed-choix-actions .ed-bouton { width: 100%; white-space: normal; text-align: center; padding: 6px 12px; }

/* les commandes posées sur chaque bloc */
.ed-calque { position: absolute; inset: 0; z-index: 86; pointer-events: none; overflow: hidden; }
.ed-calque[hidden] { display: none; }
.ed-bloc { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.ed-bloc[hidden] { display: none; }
.ed-contour { position: absolute; inset: 0; border-radius: 18px; border: 2px dashed var(--accent); opacity: .7; }
.ed-bloc[data-choisi="1"] .ed-contour { border-style: solid; border-width: 2.5px; opacity: 1; box-shadow: 0 0 0 5px rgba(var(--mint-rgb), .2); }
.ed-bloc[data-glisse="1"] .ed-contour { border-style: solid; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.ed-rond { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; pointer-events: auto; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
/* En clair, des ombres légères : elles n'assombrissent pas le texte de la page autour. */
:root[data-theme="clair"] :is(.ed-rond, .ed-pilule) { box-shadow: 0 2px 6px rgba(20, 43, 35, .16); }
:root[data-theme="clair"] .ed-puce-nom { box-shadow: 0 4px 12px rgba(20, 43, 35, .18); }
.ed-rond svg { width: 22px; height: 22px; }
.ed-moins, .ed-poignee { top: calc(var(--y-haut, 4px) - 22px); background: var(--text-primary); color: var(--bg-page); }
.ed-moins { left: -4px; }
.ed-poignee { right: -4px; touch-action: none; cursor: grab; }
.ed-fleche { top: calc(var(--y-milieu, 60px) - 22px); background: var(--accent); color: var(--on-accent); }
.ed-fleche--g { left: -4px; }
.ed-fleche--d { right: -4px; }
/* Bloc dont on voit peu : une seule rangée, « Réglages » réduit à son dessin (son nom reste lu). */
.ed-bloc--ligne[data-liste="1"] .ed-fleche--g { left: 46px; }
.ed-bloc--ligne[data-liste="1"] .ed-fleche--d { right: 46px; }
.ed-bloc--ligne .ed-etiquette { display: none; }
.ed-bloc--ligne .ed-pilule { width: 44px; max-width: none; padding: 0; justify-content: center; border-radius: 50%; }
.ed-bloc--ligne .ed-pilule span { display: none; }
.ed-pilule { position: absolute; left: 50%; top: calc(var(--y-haut, 4px) - 22px); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: calc(100% - 104px); padding: 0 14px 0 11px; border-radius: 22px; border: 1.5px solid var(--accent); background: var(--surface-raised); color: var(--text-primary); font-size: calc(13px * var(--txt)); font-weight: 700; white-space: nowrap; pointer-events: auto; transform: translateX(-50%); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.ed-pilule svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.ed-etiquette { position: absolute; left: 10px; top: 8px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: calc(12px * var(--txt)); font-weight: 750; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-puce-nom { position: absolute; left: 50%; top: calc(var(--y-milieu, 60px) - 26px); display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: calc(100% - 120px); padding: 7px 14px; border-radius: 16px; background: var(--accent); color: var(--on-accent); transform: translateX(-50%); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); text-align: center; }
.ed-puce-nom[hidden] { display: none; }
.ed-puce-nom b { font-size: calc(15px * var(--txt)); font-weight: 750; line-height: 1.2; }
.ed-points { display: flex; align-items: center; gap: 5px; font-size: calc(12px * var(--txt)); font-weight: 700; }
.ed-points:empty { display: none; }
.ed-points i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.ed-points i.est-actif { opacity: 1; }
.ed-points span { margin-left: 3px; }
.ed-bloc[data-pret="1"] .ed-puce-nom { box-shadow: 0 0 0 3px var(--on-accent), 0 6px 18px rgba(0, 0, 0, .35); }
.ed-repere { position: absolute; left: 16px; right: 16px; top: 0; z-index: 87; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.ed-repere[hidden] { display: none; }
.apercu { position: absolute; left: 8px; right: 8px; top: calc(var(--barre-h) + var(--haut) + 6px); z-index: 87; padding: 10px 12px; border-radius: 16px; background: var(--surface-raised); border: 1px solid var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.apercu--attention { box-shadow: 0 0 0 3px var(--accent), 0 10px 30px rgba(0, 0, 0, .3); }
.apercu[hidden] { display: none; }
.apercu p { margin: 0; font-size: calc(14px * var(--txt)); }
.apercu-actions { display: flex; gap: 8px; margin-top: 8px; }
.apercu-actions .ed-bouton { flex: 1; }
/* « Cartes seules » : le programme en cartes sans le rail des réunions. */
:root[data-programme="seules"] [data-rail] { display: none; }

/* les vignettes (apercus.js) : vraies couleurs, vraie police, vraie photo, vraie musique */
.vig { position: relative; display: grid; place-items: center; width: 56px; height: 38px; border-radius: 9px; overflow: hidden; background: var(--surface-sunken); color: var(--text-primary); }
.vig svg { width: 100%; height: 100%; }
.vig-icone { display: block; width: 100%; height: 100%; padding: 3px; color: var(--accent); }
.vig-theme { position: absolute; inset: 0; display: block; background: var(--vig-sombre-fond); }
.vig-theme i { position: absolute; display: block; border-radius: 3px; }
.vig-theme .vt-barre { left: 0; right: 0; top: 0; height: 7px; border-radius: 0; background: var(--vig-sombre-carte); }
.vig-theme .vt-titre { left: 6px; top: 12px; width: 28px; height: 5px; background: var(--vig-sombre-or); }
.vig-theme .vt-carte { left: 6px; right: 6px; top: 21px; height: 13px; background: var(--vig-sombre-carte); }
.vig-theme .vt-carte i { left: 5px; top: 4px; width: 18px; height: 4px; background: var(--vig-sombre-texte); }
.vig-theme--clair { background: var(--vig-clair-fond); }
.vig-theme--clair .vt-barre, .vig-theme--clair .vt-carte { background: var(--vig-clair-carte); box-shadow: 0 0 0 1px var(--vig-clair-bord); }
.vig-theme--clair .vt-titre { background: var(--vig-clair-vert); }
.vig-theme--clair .vt-carte i { background: var(--vig-clair-texte); }
.vig-theme--systeme { background: linear-gradient(135deg, var(--vig-clair-fond) 0 50%, var(--vig-sombre-fond) 50% 100%); }
.vig-theme--systeme .vt-barre { background: linear-gradient(135deg, var(--vig-clair-carte) 0 50%, var(--vig-sombre-carte) 50% 100%); }
.vig-verre { position: absolute; inset: 0; display: block; }
.vig-verre > img, .vv-plaque img { position: absolute; left: 0; top: 0; width: 56px; height: 38px; object-fit: cover; }
.vv-plaque { position: absolute; left: 7px; right: 7px; top: 12px; height: 16px; border-radius: 8px; overflow: hidden; background: var(--surface-card); }
.vv-plaque img { left: -7px; top: -12px; }
.vv-plaque b { position: absolute; inset: 0; border-radius: 8px; }
.vig-verre--givre .vv-plaque img { filter: blur(3.5px) saturate(1.2); }
.vig-verre--givre .vv-plaque b { background: rgba(var(--bg-page-rgb), .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.vig-verre--liquide .vv-plaque img { filter: blur(1.6px) saturate(1.3); }
.vig-verre--liquide .vv-plaque b { background: rgba(var(--bg-page-rgb), .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), inset 0 4px 4px -3px rgba(255, 255, 255, .7); }
.vig-verre--cristal .vv-plaque img { filter: blur(.8px) saturate(1.4); }
.vig-verre--cristal .vv-plaque b { background: rgba(var(--bg-page-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), inset 0 5px 5px -3px rgba(255, 255, 255, .9); }
.vig-titres { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%; padding: 0 7px; line-height: 1.05; }
.vig-titres b { font-family: var(--f-titre); font-weight: 600; font-size: 17px; color: var(--gold); }
.vig-titres i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--text-secondary); }
.vig-titres--menthe b, .vig-titres--menthe i, .vig-titres--accents i { color: var(--accent); }
.vig-titres--accents b { color: var(--text-primary); }
.vig-titres--degrade b { color: var(--gold); background-image: var(--titre-degrade, linear-gradient(100deg, var(--gold) 0%, var(--degrade-milieu) 42%, var(--accent) 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vig-texte { font-family: var(--f-titre); font-weight: 600; font-size: 15px; color: var(--text-primary); }
.vig-texte--grand { font-size: 17.25px; }
.vig-texte--tres-grand { font-size: 19.5px; }
.vig-densite, .vig-stat--lignes { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 0 8px; }
.vig-densite i, .vig-stat--lignes i { display: block; border-radius: 2px; background: var(--text-secondary); }
.vig-densite i:first-child, .vig-stat--lignes i:first-child { margin-top: 0 !important; }
.vig-carte { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding: 3px 8px; }
.vig-carte .vc-photo { display: block; height: 14px; border-radius: 4px; background: linear-gradient(160deg, var(--surface-raised), var(--gold)); }
.vig-carte--court .vc-photo { height: 10px; }
.vig-carte > i:not(.vc-photo) { display: block; border-radius: 2px; background: var(--text-secondary); }
.vig-preset { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 0 9px; }
.vig-preset i { display: block; border-radius: 2px; background: var(--text-secondary); }
.vig-preset .vp-quinte { background: var(--gold); }
.vig-preset .vp-cartes { margin: 0 6px; background: var(--accent); }
.vig-stat--cases { display: flex; align-items: center; gap: 4px; padding: 0 7px; }
.vig-stat--cases i { width: 12px; height: 14px; border-radius: 3px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-strong); }
.vig-stat--barres { display: flex; align-items: flex-end; gap: 5px; height: 100%; padding: 4px 9px; }
.vig-stat--barres i { width: 6px; border-radius: 2px 2px 0 0; background: var(--accent); }
.vig-stat--vide { display: block; width: 100%; height: 100%; padding: 2px; color: var(--text-secondary); }
.vig-mus { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 3px; overflow: hidden; background: var(--surface-card); }
.vig-mus .musique { gap: 3px; flex-wrap: nowrap; }
.vig-mus .mt-reste, .vig-mus .mt-annee { display: none; }
/* Pastilles A, B, C : les règles de la liste (:root[data-musique]) rejouées pour la vignette, quel que soit le mode de la page. */
.vig .vig-mus[data-m] .musique .mus { box-sizing: border-box; width: 21px; min-width: 21px; height: 20px; line-height: 20px; padding: 0; justify-content: center; border-radius: 6px; font-size: 12px; font-weight: 750; background: rgba(var(--encre-rgb), .07); color: var(--text-secondary); box-shadow: none; }
.vig .vig-mus[data-m] .mus small { display: none; }
.vig .vig-mus[data-m="A"] .mus[data-cat="victoire"] { background: rgba(var(--gold-rgb), .2); color: var(--gold); }
.vig .vig-mus[data-m="A"] .mus[data-cat="place"] { background: rgba(var(--mint-rgb), .13); color: var(--accent); }
.vig .vig-mus[data-m="A"] .mus[data-cat="incident"] { background: rgba(240, 138, 126, .15); color: var(--danger); }
.vig .vig-mus[data-m="B"] .mus { background: none; border-radius: 0; font-size: 14px; font-weight: 800; color: var(--text-secondary); }
.vig .vig-mus[data-m="B"] .mus[data-cat="victoire"] { color: var(--gold); }
.vig .vig-mus[data-m="B"] .mus[data-cat="place"] { color: var(--accent); }
.vig .vig-mus[data-m="B"] .mus[data-cat="incident"] { color: var(--danger); }
.vig .vig-mus[data-m="C"] .mus { height: 21px; line-height: 21px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px rgba(var(--encre-rgb), .26); }
.vig .vig-mus[data-m="C"] .mus[data-res="1"] { background: var(--gold-fond); color: var(--on-gold-fond); box-shadow: none; }
.vig .vig-mus[data-m="C"] .mus[data-res="2"] { background: var(--silver); color: var(--on-silver); box-shadow: none; }
.vig .vig-mus[data-m="C"] .mus[data-res="3"] { background: var(--bronze); color: var(--on-bronze); box-shadow: none; }
.vig .vig-mus[data-m="C"] .mus[data-cat="incident"] { color: var(--danger); background: rgba(240, 138, 126, .17); box-shadow: none; }
.vig .vig-mus :is(.mt, .mtu) { font-size: 12px; }

/* ------------------------------------------------------------------ statistiques (R11) */
/* Musique M1 texte espacé et M2 tuiles sobres : les codes complets, l'année écrite. */
.musique--texte, .musique--tuiles { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 0 5px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.mt { font-size: calc(13px * var(--txt)); font-weight: 700; color: var(--text-primary); }
.mt small, .mtu small { font-size: calc(12px * var(--txt)); font-weight: 600; color: var(--text-secondary); }
.mt[data-cat="incident"], .mtu[data-cat="incident"] { color: var(--danger); }
.mt-annee, .mt-reste { font-size: calc(12px * var(--txt)); font-weight: 650; color: var(--text-secondary); }
.musique--tuiles { gap: 0 3px; align-items: center; }
.mtu { display: inline-flex; align-items: baseline; justify-content: center; min-width: 27px; height: 22px; padding: 0 3px; border-radius: 6px; background: rgba(var(--encre-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--encre-rgb), .18); font-size: calc(12px * var(--txt)); font-weight: 750; line-height: 22px; color: var(--text-primary); }
.mtu[data-cat="victoire"] { box-shadow: inset 0 0 0 1.5px var(--gold); }
.mtu[data-cat="place"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.p-l2 :is(.musique--texte, .musique--tuiles) { flex: none; }
.musique-fiche { margin: 0; }
.musique-fiche .musique--texte { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
/* M3 points de classement : les textes du SVG ont leur couleur en color (mesurée) ET en fill. */
.m3 { margin: 0 0 8px; }
.m3 svg { display: block; width: 100%; height: auto; overflow: visible; }
.m3-grille { stroke: var(--border-subtle); stroke-width: 1; }
.m3-grille--bande { stroke-dasharray: 3 3; }
.m3-axe, .m3-code { color: var(--text-secondary); fill: currentColor; font-family: var(--f-texte); font-size: 15px; }
.m3-code { color: var(--text-primary); font-weight: 700; }
.m3-annee { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.m3-point { fill: var(--accent); stroke: var(--surface-card); stroke-width: 2; }
.m3 figcaption { margin-top: 6px; }
.stat-detail div { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; align-items: baseline; }
.stat-detail dd { font-size: calc(14px * var(--txt)); }
.stat-indispo { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; font-size: calc(13px * var(--txt)); color: var(--info); }
.stat-indispo svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.chiffres-3 { grid-template-columns: repeat(3, 1fr); }
.chiffres-1 { grid-template-columns: 1fr; margin-top: 10px; }
.cote-grande { font-family: var(--f-titre); font-weight: 600; font-size: calc(22px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.partant-gains-exact { font-family: var(--f-titre); font-weight: 600; font-size: calc(18px * var(--txt)); font-variant-numeric: lining-nums tabular-nums; }
.jauges { display: grid; gap: 4px; margin: 2px 0 8px; }
.jauge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, 32%) 58px; gap: 8px; align-items: center; min-height: 24px; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.jauge-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jauge-piste { display: block; height: 8px; border-radius: 4px; background: rgba(var(--encre-rgb), .1); overflow: hidden; }
.jauge-plein { display: block; height: 100%; border-radius: 4px; background: var(--text-muted); }
.jauge-val { text-align: right; font-variant-numeric: tabular-nums; }
.jauge--moi { color: var(--text-primary); font-weight: 700; }
.jauge--moi .jauge-plein { background: var(--accent); }
.pieds { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; }
.pieds svg { flex: none; width: 88px; height: 88px; color: var(--text-primary); }
.pieds figcaption { font-size: calc(14px * var(--txt)); }
.echelle-avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 6px; }
.ea-case { display: grid; place-items: center; min-height: 32px; border-radius: 10px; border: 1px dashed var(--border-strong); font-size: calc(12px * var(--txt)); font-weight: 650; color: var(--text-secondary); }
.ea-case--oui { border-style: solid; border-color: var(--accent); background: var(--surface-raised); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent); }
.arbre { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 0; }
.arbre-parent { display: flex; flex-direction: column; min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-strong); font-size: calc(14px * var(--txt)); font-weight: 650; overflow-wrap: anywhere; }
.arbre-parent small { font-size: calc(12px * var(--txt)); font-weight: 600; color: var(--text-secondary); }
.arbre-cheval { grid-column: 1 / -1; justify-self: center; padding: 6px 14px; border-radius: 12px; background: var(--surface-raised); font-family: var(--f-titre); font-weight: 600; font-size: calc(16px * var(--txt)); }

/* ==========================================================================================
   v5 B — barre Quinté+ · Journée · Fiches · Lire ; feuilles Fiches et Lire ; date-bouton ; À la une
   ========================================================================================== */
/* Les quatre mots de la barre tiennent sur une ligne, même à 320 px : un débordement se mesure. */
.dock-bouton > span, .dock-rang span > span { max-width: 100%; white-space: nowrap; }
/* La date de la journée est un bouton discret : il ouvre les outils de test (changer de jour, revivre). */
.journee-date { margin: -6px 0 -14px; }
.journee-date-bouton { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -8px; padding: 0 6px 0 8px; border-radius: 12px; font-size: calc(12px * var(--txt)); color: var(--text-secondary); }
.journee-date-bouton svg { width: 14px; height: 14px; }
.journee-date-bouton time { font: inherit; color: inherit; }
/* Sans programme : « À la une » suit la date et le message. */
[data-programme-absent] + .bloc-accueil { margin-top: 18px; }
/* Feuille Outils de test : la journée affichée en tête, les commandes directement visibles. */
.outils-test h3 + label { margin-top: 0; }
/* Feuille Fiches : partants qui courent, portes des quatre fiches, fiches vues.
   Lot 2 (plein écran) : les chevaux de la feuille Fiches (« Courent dans… », « Vues récemment ») en lignes complètes
   comme l'écran course — numéro, nom (et rôle Pépite), jockey, cote ou « — » — 56 px, une colonne, toute la ligne ouvre
   la fiche. Remplace les pastilles numéro + nom (mesuré : 13 rangées à 320). Les portes (cartes à icônes) sont dans
   coquille.css, partagées avec les pages publiques. */
.lignes-chevaux { list-style: none; margin: 0; padding: 0; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface-card); overflow: hidden; }
.ligne-cheval + .ligne-cheval { border-top: 1px solid var(--border-subtle); }
.ligne-cheval-bouton { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 12px 6px 10px; color: var(--text-primary); font-size: calc(15px * var(--txt)); text-align: left; text-decoration: none; }
.ligne-cheval-bouton:active { background: var(--surface-raised); }
.feuille .bloc-carte .ligne-cheval-bouton .partant-num { background: var(--surface-raised); }
.lc-corps { min-width: 0; display: grid; gap: 1px; }
.lc-corps .partant-nom { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(15px * var(--txt)); font-weight: 650; line-height: 1.25; }
.lc-corps .partant-nom > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-sous { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px * var(--txt)); color: var(--text-secondary); }
.ligne-cheval-bouton .partant-cote { font-size: calc(17px * var(--txt)); }
.ligne-cheval[aria-disabled="true"] .ligne-cheval-bouton { color: var(--text-muted); }
.liste-liens { list-style: none; margin: 0; padding: 0; }
.liste-liens li + li { border-top: 1px solid var(--border-strong); }
.liste-liens a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px; color: var(--text-primary); font-size: calc(15px * var(--txt)); text-decoration: none; }
.liste-liens a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.liste-liens time { flex: none; font-size: calc(13px * var(--txt)); color: var(--text-secondary); font-variant-numeric: lining-nums tabular-nums; }
.fil-jour-rubrique { flex: none; font-size: calc(11px * var(--txt)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.fil-jour h4 { margin: 14px 0 2px; font-size: calc(12px * var(--txt)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.fil-jour-fiches { display: flex; align-items: center; min-height: 44px; padding: 8px 4px; font-size: calc(14px * var(--txt)); color: var(--text-secondary); }
.feuille .chips { margin-bottom: 8px; }
.lire-details summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 650; }
.lire-legende { width: 100%; min-height: 44px; margin-top: 10px; }
/* Feuille Lire : le jeu responsable d'abord, lisible, jamais caché. */
.jr { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 4px 0 12px; padding: 10px 14px; border-radius: 16px; background: var(--surface-raised); color: var(--text-primary); text-decoration: none; }
.jr svg { flex: none; width: 24px; height: 24px; color: var(--gold); }
.jr > span { display: grid; gap: 2px; min-width: 0; }
.jr b { font-weight: 700; }
.jr span span { font-size: calc(13px * var(--txt)); color: var(--text-secondary); }
/* Vignette des préréglages : le bloc À la une. */
.vig-preset .vp-alaune { background: var(--border-strong); }
/* Lot 2 : dans la fiche, jockey, entraîneur et hippodrome deviennent des liens quand leur fiche existe ; le bouton
   « Fiche Turf Pépite » prend place à côté de Comparer, sur la même ligne, sans allonger la fiche. */
.fiche-contenu .dl dd a, [data-contenu="infos"] .dl dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fiche-contenu .feuille-actions[data-deux] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fiche-contenu .fiche-wp { margin: 0; min-width: 0; }
.fiche-contenu .fiche-wp a { min-height: 44px; padding: 8px 6px; color: var(--text-primary); font-size: calc(13px * var(--txt)); text-decoration: none; text-align: center; }
/* pause et sans cotes (lot B) */
:root[data-pause] :is([data-prono], [data-cote], .role, .badge--prono, .rs-prono, .tt-cote, [data-tri="cote"], [data-bloc="cote"]) { display: none !important; }
:root[data-sans-cotes] :is([data-cote], .tt-cote, [data-tri="cote"], [data-bloc="cote"]) { display: none !important; }
.esp-pause-note { margin: 0 0 10px; }

/* AV2 : le pré-script autorise le premier affichage avant les scripts différés. */
:root:not([data-premier-ecran="serveur"]) [data-rendu="serveur"] { visibility: hidden; }
:root[data-premier-ecran="refaire"] [data-ecran="journee"],
:root[data-premier-ecran="refaire"] nav[data-dock] { visibility: hidden; }