/* Heidrun — écran de lancement. Pensé pour une TV 16:9, dégrade en scroll ailleurs. */

:root {
  color-scheme: dark;
  --bg:    #0B0E13;
  --pane2: #0E1218;
  --line:  #222A36;
  --line2: #1A212B;
  --ink:   #EEF2F7;
  --ink2:  #8D97A6;
  --ink3:  #5E6877;
  --h:     #4A73FF;   /* Homme */
  --f:     #E07242;   /* Femme */
  --good:  #3FC97A;
  --or:    #F5C451;
  --crit:  #E36A60;
  --pre:   #EDF0E6;   /* le pré, volontairement clair */
  --pre-l: #7C7668;
  --pre-d: #3D382E;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.defs { position: absolute; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.lab {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3);
}
.r { text-align: right; }

/* ---------------- structure ----------------
   Flex plutôt que grid-template-rows : le bandeau d'erreur apparaît et
   disparaît en cours de route, et une grille positionnelle décalerait
   toutes les sections d'une ligne le jour où il se montre. */
.ecran {
  height: 100vh;
  display: flex; flex-direction: column;
  gap: 1px; background: var(--line);
}
.ecran > * { background: var(--bg); min-width: 0; flex: 0 0 auto; }

.vue {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  gap: 1px; background: var(--line);
}
.vue > * { background: var(--bg); min-width: 0; flex: 0 0 auto; }

/* ---------------- barre haute ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 22px; background: var(--pane2);
}
.brand {
  font-variation-settings: "wdth" 118, "wght" 850;
  text-transform: uppercase; font-size: 15px; letter-spacing: -.01em; white-space: nowrap;
}
.brand span {
  color: var(--ink3); font-variation-settings: "wdth" 100, "wght" 500;
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}

.tabs { display: flex; gap: 4px; }
.tab {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink2);
  border-radius: 2px; padding: 6px 14px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  transition: color .14s, border-color .14s, background .14s;
}
.tab:hover { color: var(--ink); border-color: var(--ink3); }
.tab:focus-visible { outline: 2px solid var(--h); outline-offset: 2px; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.etat { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--good);
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; animation: blip 1.8s ease-in-out infinite; }
.live.ko { color: var(--crit); }
.live.ko i { animation: none; }
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.chrono { font-size: 14px; color: var(--ink2); }

.bandeau-erreur {
  padding: 7px 22px; background: rgba(227,106,96,.12);
  color: #F0A49D; border-bottom: 1px solid rgba(227,106,96,.3);
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
}

/* ================= A · LA RÉGIE ================= */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.kpi { background: var(--bg); padding: 13px 22px 14px; }
.kpi .v {
  font-size: clamp(28px, 2.6vw, 42px); font-weight: 600;
  letter-spacing: -.045em; line-height: 1.08; margin-top: 6px;
}
.kpi .d { font-size: 11.5px; color: var(--ink3); margin-top: 3px; }

.milieu {
  flex: 1 1 auto !important; min-height: 190px;
  display: grid; grid-template-columns: 1fr 300px; gap: 1px; background: var(--line);
}
.pane { background: var(--bg); min-width: 0; }
.pane-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 22px 6px;
}
.legend { display: flex; gap: 16px; }
.legend span {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--ink2);
  display: inline-flex; align-items: center; gap: 7px;
}
.legend i { width: 15px; height: 2px; display: block; border-radius: 1px; }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--ink3) 0 5px, transparent 5px 9px); }

.chart-pane { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.chart-wrap { min-height: 0; overflow: hidden; padding: 0 22px 10px; }
#chart { display: block; width: 100%; height: 100%; }

.rail { display: grid; grid-template-rows: auto 1fr; gap: 1px; background: var(--line); overflow-y: auto; }
.rail-bloc { background: var(--bg); padding: 13px 18px 14px; }
.rail-bloc > .lab { display: block; margin-bottom: 11px; }

.vs { margin-bottom: 11px; }
.vs:last-child { margin-bottom: 0; }
.vs .t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.vs .t b { font-size: 12.5px; font-weight: 500; }
.vs .t span { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink2); }
.bar { height: 9px; background: var(--line2); border-radius: 1px; overflow: hidden; }
.bar i { display: block; height: 100%; transition: width .5s ease; }

/* Une ligne = UN produit, tous coloris confondus. La barre empilée montre
   comment ses coloris se partagent ses pièces — l'ancienne pastille unique
   laissait croire à une ligne par produit-couleur. */
.table-pane { padding-bottom: 2px; }
.prod-row {
  display: grid;
  grid-template-columns: 22px minmax(130px, 1fr) minmax(110px, 1fr) 142px 66px 94px 152px;
  align-items: center; gap: 14px;
  padding: 8px 22px; border-bottom: 1px solid var(--line2); font-size: 14px;
}
.prod-row.head {
  color: var(--ink3); font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-block: 7px;
}
#produits .prod-row:last-child { border-bottom: 0; }
.prod-row .rk {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: var(--ink3); text-align: center;
}

.sw { width: 13px; height: 13px; border-radius: 2px; border: 1px solid rgba(255,255,255,.22); }

.nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nm b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm em {
  font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; flex: none;
  padding: 2px 7px; border-radius: 2px;
}
.nm em.Homme { background: rgba(74,115,255,.16); color: #8BA4FF; border: 1px solid rgba(74,115,255,.34); }
.nm em.Femme { background: rgba(224,114,66,.15); color: #EE9367; border: 1px solid rgba(224,114,66,.32); }

/* Barre empilée des coloris. Le liseré est une ombre intérieure et non une
   bordure : il sépare les segments sans manger leur largeur. */
.mix { display: flex; height: 13px; border-radius: 2px; overflow: hidden; background: var(--line2); }
.mix i { display: block; height: 100%; }
.mix i + i { box-shadow: inset 2px 0 0 var(--bg); }
.mix.vide { opacity: .35; }

.dom {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink2);
}
.dom i { width: 11px; height: 11px; border-radius: 2px; flex: none; border: 1px solid rgba(255,255,255,.22); }
.dom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dom b { color: var(--ink3); font-weight: 400; flex: none; }

.n { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; }
.part { display: grid; grid-template-columns: 1fr 50px; align-items: center; gap: 10px; }
.part .pc {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500;
  text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums;
}
.share { height: 7px; background: var(--line2); border-radius: 1px; overflow: hidden; }
.share i { display: block; height: 100%; transition: width .5s ease; }

/* ================= B · LE TROUPEAU ================= */

.tr-hero {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 13px 24px 11px;
}
.tr-count { display: flex; align-items: baseline; gap: 13px; }
.tr-count .big { font-size: clamp(40px, 4.4vw, 66px); font-weight: 600; letter-spacing: -.055em; line-height: .85; }
.tr-count .unit {
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(18px, 1.9vw, 27px); text-transform: uppercase; letter-spacing: -.02em;
}
.tr-equiv { margin: 0; font-size: 13.5px; color: var(--ink2); }
.tr-equiv b { color: var(--ink); font-weight: 600; }

.tr-reglage { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.segm { display: flex; gap: 3px; }
.segm button {
  appearance: none; cursor: pointer; border: 1px solid var(--line); background: transparent;
  color: var(--ink2); border-radius: 2px; padding: 4px 10px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s, background .14s;
}
.segm button:hover { color: var(--ink); border-color: var(--ink3); }
.segm button:focus-visible { outline: 2px solid var(--h); outline-offset: 2px; }
.segm button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.bloc-pre { display: flex; flex-direction: column; gap: 7px; padding: 9px 24px 13px; min-height: 0; }
/* L'enclos grossit avec son effectif — sa hauteur est posée en JS, qui sait
   combien de rangs il faut. Le pré prend tout ce qui reste, donc il se resserre
   quand les arrivées s'accumulent et se rouvre quand elles s'espacent. */
.enclos-zone { flex: 0 0 auto !important; }
.enclos-zone .cloture { flex: 0 0 auto; height: 160px; transition: height .45s cubic-bezier(.3,.8,.35,1); }
.pre-zone { flex: 1 1 auto !important; min-height: 168px; }
.pre-zone .cloture { flex: 1 1 auto; }
.pre-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex: none; }
.pre-hd .lab b { color: var(--ink); }
.pre-count { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink2); }

/* --- herbe et clôture --- */
.cloture {
  --bois:   #9A7550;
  --bois-f: #6E5133;
  /* Les ouvertures sont posées en dur : les portails et les découpes des
     clôtures s'alignent dessus sans que JS ait à mesurer quoi que ce soit. */
  --porte-x1: 10px;
  --porte-x2: 104px;
  --porte-h: 76px;
  position: relative; flex: 1 1 auto; min-height: 0;
  border-radius: 4px; overflow: hidden;
  padding: 25px 14px;
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(84deg, rgba(0,0,0,.05) 0 2px, transparent 2px 10px),
    radial-gradient(130% 90% at 28% -10%, #8AAC5D 0%, #71934A 55%, #5E7D3D 100%);
}

/* Les lisses du haut et du bas : poteaux verticaux et deux barres. */
.cloture::before, .cloture::after {
  content: ""; position: absolute; left: 0; right: 0; height: 25px;
  pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(90deg, var(--bois-f) 0 6px, transparent 6px 62px),
    linear-gradient(var(--bois) 0 0) left 0 top 5px / 100% 5px no-repeat,
    linear-gradient(var(--bois) 0 0) left 0 top 15px / 100% 5px no-repeat;
}
.cloture::before { top: 0; }
.cloture::after  { bottom: 0; transform: scaleY(-1); }

/* Les lisses du haut sont percées : c'est par là qu'on entre, dans l'enclos
   comme dans le pré. On masque plutôt qu'on ne recouvre, pour que l'ouverture
   laisse voir la vraie herbe derrière et non une rustine d'une autre teinte. */
.cloture.enclos::before, .cloture.pre::before {
  -webkit-mask-image: linear-gradient(to right, #000 0 var(--porte-x1), transparent var(--porte-x1) var(--porte-x2), #000 var(--porte-x2));
          mask-image: linear-gradient(to right, #000 0 var(--porte-x1), transparent var(--porte-x1) var(--porte-x2), #000 var(--porte-x2));
}

/* Montants latéraux. Ils remplacent les anciennes bordures, qu'on ne pouvait
   pas percer. */
.montant {
  position: absolute; top: 0; bottom: 0; width: 5px;
  background: var(--bois-f); z-index: 2; pointer-events: none;
}
.montant.g { left: 0; }
.montant.d { right: 0; }
.montant.perce {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 calc(50% - var(--porte-h) / 2), transparent calc(50% - var(--porte-h) / 2) calc(50% + var(--porte-h) / 2), #000 calc(50% + var(--porte-h) / 2));
          mask-image: linear-gradient(to bottom, #000 0 calc(50% - var(--porte-h) / 2), transparent calc(50% - var(--porte-h) / 2) calc(50% + var(--porte-h) / 2), #000 calc(50% + var(--porte-h) / 2));
}

/* Le battant. Il s'ouvre vers l'intérieur : la clôture rogne ce qui déborde,
   un battant qui s'ouvrirait vers l'extérieur serait coupé net. */
.portail { position: absolute; z-index: 4; pointer-events: none; }
.portail .battant {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--bois) 0 0) 0 26% / 100% 20% no-repeat,
    linear-gradient(var(--bois) 0 0) 0 62% / 100% 20% no-repeat,
    var(--bois-f);
  border-radius: 1px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .34s cubic-bezier(.32,.86,.36,1);
}

.portail.haut { top: 0; height: 25px; left: var(--porte-x1); width: calc(var(--porte-x2) - var(--porte-x1)); }
.portail.haut .battant { transform-origin: left center; }
.portail.haut.ouvert .battant { transform: rotate(74deg); }

.portail.droite { right: 0; width: 5px; top: calc(50% - var(--porte-h) / 2); height: var(--porte-h); }
.portail.droite .battant { transform-origin: top center; }
.portail.droite.ouvert .battant { transform: rotate(76deg); }


/* Le battant de sortie est fin : on l'élargit un peu pour qu'il se lise
   une fois ouvert. */
.portail.droite .battant { width: 7px; right: 0; left: auto; }
.cloture.enclos { padding: 23px 12px; }


.flock {
  position: relative; z-index: 1;
  height: 100%; min-height: 0; overflow: hidden;
  /* Colonnes de largeur fixe et en nombre imposé : le placement en serpentin
     a besoin de savoir exactement combien il y a de colonnes, et `auto-fill`
     ne le dit pas. Les gouttières valent ce que `grille()` suppose. */
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), var(--taille-mouton, 44px));
  justify-content: space-between;
  gap: 8px 4px; align-content: start;
}
.flock .s { aspect-ratio: 44/36; }
.flock .s svg { width: 100%; height: 100%; display: block; }

.flock .s.neuf { animation: pop .45s cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes pop { from { transform: scale(.2) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Dans le pré, le nouveau se place en tête, juste sous le portail : il tombe
   donc à la verticale plutôt que de surgir sur place. */
.pre .s.neuf { animation: tomber-pre .58s cubic-bezier(.3,.82,.34,1) backwards; }
@keyframes tomber-pre {
  from { transform: translateY(-58px) scale(.82); opacity: 0; }
  58%  { transform: translateY(0) scale(1.08, .9); opacity: 1; }
  78%  { transform: translateY(-5px) scale(.97, 1.04); }
  to   { transform: none; opacity: 1; }
}

/* L'enclos ne tient que quelques dizaines de moutons : on peut s'y offrir
   une vraie entrée par la gauche et un balancement au repos. */
.enclos .s.neuf { animation: entre .62s cubic-bezier(.22,.9,.3,1) backwards; }
@keyframes entre {
  from { transform: translateX(-46px) scale(.62); opacity: 0; }
  62%  { transform: translateX(5px) scale(1.05); opacity: 1; }
  to   { transform: none; opacity: 1; }
}

.pre-vide {
  grid-column: 1 / -1; align-self: center; text-align: center;
  color: rgba(255,255,255,.82); font-size: 13px;
  font-family: "IBM Plex Mono", monospace; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.pre-plus {
  grid-column: 1 / -1; text-align: center; padding-top: 5px;
  color: rgba(255,255,255,.85); font-size: 12px; font-family: "IBM Plex Mono", monospace;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.tr-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.tr-col { background: var(--bg); padding: 12px 22px 14px; }
.tr-col > .lab { display: block; margin-bottom: 10px; }

/* Une ligne par entrée, pas deux : en deux lignes la rangée de podiums
   montait à 400 px et prenait la place du grand pré. */
.pod {
  display: grid; grid-template-columns: 14px minmax(0, 92px) 1fr 88px;
  align-items: center; gap: 9px; margin-bottom: 4px;
}
.pod:last-child { margin-bottom: 0; }
.pod .rk { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink3); text-align: center; }
.pod .sw { width: 12px; height: 12px; justify-self: center; }
.pod .nom { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .track { height: 7px; background: var(--line2); border-radius: 1px; overflow: hidden; }
.pod .track i { display: block; height: 100%; transition: width .5s ease; }
.pod .pc {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink2);
  /* Sans ça « 105 · 31 % » passe à la ligne et double la hauteur du rang. */
  white-space: nowrap;
}

/* ================= C · LE MATCH ================= */

.board {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 20px 26px 18px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 2px, transparent 2px 5px), var(--pane2);
}
.side { display: grid; gap: 4px; justify-items: start; }
.side.r { justify-items: end; text-align: right; }
.side .team { font-variation-settings: "wdth" 120, "wght" 850; text-transform: uppercase; font-size: 15px; }
.side .score { font-size: clamp(50px, 6.4vw, 92px); font-weight: 600; line-height: .82; letter-spacing: -.06em; }
.side.h .score { color: var(--h); }
.side.f .score { color: var(--f); }
.side .sub { font-size: 12px; color: var(--ink2); }
.side .lead {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
}
.side.h .lead { background: rgba(74,115,255,.16); color: #8BA4FF; border: 1px solid rgba(74,115,255,.34); }
.side.f .lead { background: rgba(224,114,66,.14); color: #EE9367; border: 1px solid rgba(224,114,66,.32); }
.mid { text-align: center; display: grid; gap: 5px; }
.mid .clk { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.mid .ecart { font-size: 11.5px; color: var(--ink2); border-top: 1px solid var(--line); padding-top: 6px; }
.mid .ecart b { color: var(--ink); }

.lanes { padding: 16px 26px 18px; }
.lanes > .lab { display: block; margin-bottom: 13px; }
.lane { margin-bottom: 12px; }
.lane:last-child { margin-bottom: 0; }
.lane .lh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.lane .lh b { font-weight: 500; font-size: 13px; }
.lane .lh span { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink2); }
.lane .lh span em { font-style: normal; color: var(--ink); font-weight: 500; }
.track-l { height: 20px; background: var(--line2); border: 1px solid var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.track-l .fill { position: absolute; inset: 0 auto 0 0; opacity: .24; transition: width .5s ease; }
.track-l .runner { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 13px; border-radius: 1px; transition: left .5s ease; }

.m-bottom {
  flex: 1 1 auto !important; min-height: 0;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 1px; background: var(--line);
}
.m-cell { background: var(--bg); padding: 14px 24px 16px; display: flex; flex-direction: column; min-height: 0; }
.m-cell > .lab { display: block; margin-bottom: 11px; flex: none; }
.ligue, .faits { overflow-y: auto; min-height: 0; }

.cl-row {
  display: grid; grid-template-columns: 20px 13px 1fr 56px 84px;
  align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px;
}
.cl-row:last-child { border-bottom: 0; }
.cl-row .rk { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink3); }
.cl-row .v { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row .v i { font-style: normal; color: var(--ink3); }

.fait { display: grid; grid-template-columns: 42px 1fr; gap: 11px; font-size: 12.5px; line-height: 1.45; color: var(--ink2); margin-bottom: 9px; }
.fait:last-child { margin-bottom: 0; }
.fait time { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink3); }
.fait b { color: var(--ink); font-weight: 500; }
.fait.fort b { color: var(--or); }
.vide { color: var(--ink3); font-size: 12.5px; }

/* --- le mouton qui broute ---
   Le symbole embarque ses deux poses ; on en masque une. Impossible de viser
   la tête depuis l'extérieur : seules les propriétés héritées franchissent le
   shadow DOM de <use>, pas les sélecteurs de classe. On commute donc par deux
   variables, que l'animation fait basculer sur l'hôte — en light DOM, lui.
   Un mouton sans la classe .broute garde simplement la tête haute, sans
   animation du tout. */
/* Le broutage vit sur le <svg>, l'arrivée sur le <span> qui l'enveloppe :
   deux animations sur le même élément s'annuleraient. */
.s.broute > svg {
  animation-name: brouter;
  animation-duration: var(--rythme, 6s);
  animation-delay: var(--phase, 0s);
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

@keyframes brouter {
  0%   { --tete-haute: visible; --tete-basse: hidden; }
  38%  { --tete-haute: hidden;  --tete-basse: visible; }   /* plonge dans l'herbe */
  62%  { --tete-haute: visible; --tete-basse: hidden; }    /* relève, mâche */
  70%  { --tete-haute: hidden;  --tete-basse: visible; }   /* replonge */
  90%  { --tete-haute: visible; --tete-basse: hidden; }
  100% { --tete-haute: visible; --tete-basse: hidden; }
}

/* --- l'arrivée d'un mouton : chute, poussière, « +1 » ---
   Ces trois éléments vivent sur <body> en position fixe : l'enclos rogne ce
   qui déborde, il ne pouvait donc pas héberger un mouton venu du hors-champ. */

.mouton-chute, .mouton-sortie {
  position: fixed; z-index: 60; pointer-events: none; will-change: transform;
}
.mouton-chute svg, .mouton-sortie svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4));
}

.impact {
  position: fixed; z-index: 59; pointer-events: none;
  width: 58px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
}

.plus-un {
  position: fixed; z-index: 61; pointer-events: none;
  display: grid; justify-items: center; gap: 6px;
  /* État de départ explicite : sans lui, l'étiquette clignoterait au centre
     de l'écran entre son insertion et le premier pas de l'animation. */
  transform: translate(-50%, 10px);
  opacity: 0;
}
.plus-un .chiffre {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 116, "wght" 850;
  font-size: 34px; line-height: 1; letter-spacing: -.04em; color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6), 0 0 3px rgba(0, 0, 0, .7);
}
.plus-un .detail {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  background: rgba(11, 14, 19, .94); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 2px; padding: 4px 9px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.plus-un .detail i {
  width: 10px; height: 10px; border-radius: 2px; flex: none;
  border: 1px solid rgba(255, 255, 255, .28);
}

/* ---------------- ticker ---------------- */
.ticker { background: var(--pane2); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: slide 50s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 20px; border-right: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; white-space: nowrap; color: var(--ink2);
}
.tick time { color: var(--ink3); }
.tick b { color: var(--ink); font-weight: 500; }
.tick .amt { color: var(--good); }
.tick .moutons { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.tick .moutons svg { width: 19px; height: 15.5px; display: block; }

/* ---------------- petits écrans : on laisse défiler ---------------- */
@media (max-width: 1100px), (max-height: 900px) {
  body { overflow: auto; }
  .ecran { height: auto; display: block; }
  .ecran > * { margin-bottom: 1px; }
  .vue { display: block; }
  .vue[hidden] { display: none !important; }
  .vue > * { margin-bottom: 1px; }
  .milieu { grid-template-columns: 1fr; }
  .chart-wrap { height: 260px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .pre-zone .cloture { height: 420px; flex: 0 0 auto; }
  .enclos-zone .cloture { height: 190px !important; }
  .m-bottom { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .kpis, .tr-cols { grid-template-columns: 1fr; }
  .prod-row { grid-template-columns: 22px 1fr 60px 84px; }
  .prod-row > :nth-child(3), .prod-row > :nth-child(4), .prod-row > :last-child { display: none; }
  .board { grid-template-columns: 1fr; gap: 14px; }
  .side.r { justify-items: start; text-align: left; }
}

/* ================= BANDEAU DÉMO ================= */

/* Volontairement criard : en mode démo l'écran affiche des chiffres inventés,
   et personne ne doit pouvoir le confondre avec le vrai lancement. */
.badge-demo {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  padding: 2px 8px; border-radius: 2px;
  background: var(--or); color: #1A1406;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}

/* ================= AVANT L'OUVERTURE ================= */

.attente {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #131A24 0%, var(--bg) 62%);
}
.attente-carte { text-align: center; max-width: 720px; }
.attente-carte .lab { margin: 0 0 18px; }

.attente-compte {
  font-size: clamp(56px, 13vw, 168px);
  line-height: .92; letter-spacing: -.02em; color: var(--ink);
  font-variation-settings: "wght" 600;
}
.attente-quand { margin: 18px 0 0; color: var(--ink2); font-size: 16px; }
.attente-quand b { color: var(--ink); font-weight: 600; }
.attente-note {
  margin: 26px 0 0; color: var(--ink3);
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}

/* Le troupeau qui patiente au portail, sur une bande de pré : même matière
   que l'onglet Le Troupeau, pour que l'attente appartienne au même monde. */
.attente-troupeau {
  margin: 30px auto 0; padding: 12px 18px;
  display: flex; justify-content: center; align-items: flex-end; gap: 10px;
  background: var(--pre); border: 1px solid var(--pre-d); border-radius: 3px;
  width: fit-content;
}
.attente-troupeau .s { width: 44px; aspect-ratio: 44/36; display: block; }
.attente-troupeau .s svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* Sans ça, la règle ci-dessus fige le cycle sur sa dernière image et tout le
     troupeau reste la tête plantée dans l'herbe. */
  .s.broute > svg { animation: none !important; }
  .portail .battant { transition: none !important; }
}