/* =============================================================================
   assets/css/prono-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   Encart « Pronostic IA Turf.bzh » de la page de course (borda-custom.php, inclus
   par index.php). Version 2.1.0 du 15/10/2026 : le tableau d'affichage, version claire.

   Idée : l'encart se lit comme le tableau d'un hippodrome. Les numéros du
   pronostic sont des plaques blanches sur un panneau très clair, la plaque choisie
   s'allume, une barre sous chaque numéro montre l'écart de points avec le premier,
   et un lecteur donne le nom du cheval dont on touche la plaque. Tout ce qui est
   autour reste calme : 6 boutons clairs à largeur égale, un seul plein (Copier),
   et l'interrupteur IA / Borda dans l'en-tête du panneau.

   Couleur : le teal n'apparaît qu'en accent (interrupteur, barres, plaque choisie,
   bouton Copier). Un panneau sombre a été essayé en 2.0.0 et écarté : trop
   contrasté avec les cartes blanches voisines, il attirait l'œil vers le cadre
   plutôt que vers les numéros.

   Ce qui ne change pas : les numéros, les points, les cotes, les pourcentages, les
   libellés, le calcul, les fenêtres Personnaliser et Détail, la couleur de podium
   des plaques quand l'arrivée est publiée.

   Mouvement : une seule séquence, à l'ouverture d'une vue (les plaques montent,
   les barres se remplissent, dans l'ordre du classement), et une onde au clic sur
   Copier. Rien de tout cela sans prefers-reduced-motion: no-preference.

   Les rangées dépendent de la largeur de l'encart, pas de celle de la fenêtre :
   requêtes de conteneur sur #customBordaSection seulement. Elles ne sont PAS posées
   sur .pronostic-bzh : un conteneur crée un bloc de contenu pour les éléments fixes,
   et les fenêtres Personnaliser et Détail (position: fixed) sont dans cette carte.
   Sans requêtes de conteneur, le rendu reste complet : plaques de 64 px, boutons
   par 2, en-tête empilé.

   Aucune bordure gauche colorée. Aucun !important. Sélecteurs précédés de
   #customBordaSection pour passer devant global.css, borda-custom.css et
   borda-v2.css, qui ne sont pas modifiés.

   @author Claude (2026-10-15)
   @version 2.1.0
   ========================================================================== */

#customBordaSection {
  --pz-board:   #eff6f9;
  --pz-line:    #d0dfe6;
  --pz-medal:   #0b2f3a;
  --pz-ink:     #0f172a;
  --pz-ink-2:   #334155;
  --pz-ink-3:   #475569;
  --pz-acc:     #0a7c91;
  --pz-acc-d:   #075d6e;
  --pz-acc-l2:  #ecf7fa;
  --pz-ok:      #047857;
  --pz-ease:    cubic-bezier(.16, 1, .3, 1);
  container: tbz-prono / inline-size;
}

/* ------------------------------------------------------------------ panneau -- */

#customBordaSection .pz-board {
  position: relative;
  padding: 14px 12px 12px;
  border-radius: 16px;
  color: var(--pz-ink);
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(10, 124, 145, .08), transparent 58%),
    linear-gradient(180deg, #f7fbfc, var(--pz-board));
  box-shadow: inset 0 0 0 1px var(--pz-line), inset 0 1px 0 #fff;
}

/* En-tête : sur téléphone l'interrupteur passe au-dessus du libellé. */
#customBordaSection .pz-head {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  text-align: center;
}

#customBordaSection #displayModeLabel {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pz-ink);
  text-wrap: balance;
}

/* Le nom de la configuration active est écrit par le script avec une couleur en ligne
   (#22b8a7, trop clair sur fond clair) : on l'assombrit par un filtre, car une couleur
   en ligne ne se corrige pas sans !important. */
#customBordaSection #displayModeLabel span { filter: brightness(.58); }

/* ------------------------------------------------------------- interrupteur -- */

#customBordaSection .pz-switch {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 9.5rem;
  height: 2.25rem;
  margin: 0;
  padding: 3px;
  border: 1px solid #bccfd7;
  border-radius: 999px;
  background-color: #e2ecf0;
  color: var(--pz-ink-3);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#customBordaSection .pz-switch:hover { background-color: #d8e5ea; }
#customBordaSection .pz-switch:focus-visible { outline: 2px solid var(--pz-acc-d); outline-offset: 3px; }

#customBordaSection .pz-switch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--pz-acc);
  box-shadow: 0 2px 8px rgba(10, 124, 145, .4);
}
#customBordaSection[data-mode="borda"] .pz-switch::before { transform: translateX(100%); }

#customBordaSection .pz-sw-opt { display: block; padding: .5rem 0; text-align: center; }
#customBordaSection[data-mode="ia"] .pz-sw-opt[data-v="ia"],
#customBordaSection[data-mode="borda"] .pz-sw-opt[data-v="borda"] { color: #fff; }

/* ---------------------------------------------------------------- plaques -- */

#customBordaSection #bordaContainer,
#customBordaSection #iaContainer { margin: 14px 0 0; padding: 0; text-align: center; }

#customBordaSection .pz-rang { text-align: center; text-wrap: balance; }

#customBordaSection .arrival-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 4rem;
  height: auto;
  margin: 4px 3px;
  padding: 0;
  border: 1px solid #cddbe2;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 8px 14px -10px rgba(15, 23, 42, .5);
}

#customBordaSection .pz-hit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 4px 11px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
#customBordaSection .pz-hit:focus-visible { outline: 2px solid var(--pz-acc-d); outline-offset: -3px; }

#customBordaSection .arrival-item .horse-number {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pz-ink);
  font-variant-numeric: tabular-nums;
}

#customBordaSection .arrival-item .horse-score,
#customBordaSection .arrival-item .horse-odds,
#customBordaSection .arrival-item .horse-percent {
  position: static;
  display: block;
  margin: 6px 0 0;
  padding: 0;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--pz-ink-2);
  font-variant-numeric: tabular-nums;
}

/* Barre : points du cheval sur points du premier, mesurés depuis zéro. */
#customBordaSection .pz-bar {
  display: block;
  height: 5px;
  margin: 9px 3px 0;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
}
#customBordaSection .pz-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pz-acc-d), var(--pz-acc));
  transform-origin: left center;
  transform: scaleX(var(--pz-p, 0));
}

/* Plaque choisie : elle s'allume. */
#customBordaSection .arrival-item.is-sel {
  box-shadow: 0 0 0 2px var(--pz-acc), 0 8px 18px -6px rgba(10, 124, 145, .55);
}

/* Place d'arrivée : une médaille posée sur l'angle de la plaque, qui ne cache plus
   le numéro. Les couleurs de podium des plaques viennent des feuilles anciennes. */
#customBordaSection .pos-bubble {
  top: -8px;
  left: -6px;
  z-index: 1;
  display: block;
  width: auto;
  min-width: 26px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 9px;
  background-color: var(--pz-medal);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .3);
}
#customBordaSection .arrival-item[class*="win-"] .pz-bar { background: rgba(15, 23, 42, .16); }
#customBordaSection .arrival-item[class*="win-"] .pz-bar i { background: var(--pz-ink); }
#customBordaSection .arrival-item[class*="win-"] .horse-number,
#customBordaSection .arrival-item[class*="win-"] .horse-score,
#customBordaSection .arrival-item[class*="win-"] .horse-odds,
#customBordaSection .arrival-item[class*="win-"] .horse-percent { color: var(--pz-ink); }

/* ----------------------------------------------------------------- lecteur -- */

/* Une fiche par plaque, empilées dans la même case : le lecteur prend la hauteur de
   la plus haute, et ne saute plus quand on passe d'un cheval à l'autre. */
#customBordaSection .pz-lecteur {
  display: grid;
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--pz-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  text-align: left;
}
#customBordaSection .pz-lecteur[hidden] { display: none; }
#customBordaSection .pz-l-fiche {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  visibility: hidden;
}
#customBordaSection .pz-l-fiche.is-on { visibility: visible; }

#customBordaSection .pz-l-plaque {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--pz-acc-l2);
  box-shadow: inset 0 0 0 1px #bcdce4;
  color: var(--pz-ink);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#customBordaSection .pz-l-texte { flex: 1 1 auto; min-width: 0; }
#customBordaSection .pz-l-nom {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pz-ink);
  overflow-wrap: anywhere;
}
#customBordaSection .pz-l-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 14px;
  margin-top: 2px;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--pz-ink-3);
}

/* ----------------------------------------------------------------- actions -- */

#customBordaSection .pz-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
}

#customBordaSection .pz-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0 .6rem;
  border: 1px solid #b3bfcd;
  border-radius: 10px;
  background-color: #fff;
  color: var(--pz-ink);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .05);
}
#customBordaSection .pz-btn i { margin: 0; font-size: 1rem; color: var(--pz-acc); }
#customBordaSection .pz-btn:hover {
  background-color: var(--pz-acc-l2);
  border-color: var(--pz-acc);
  color: var(--pz-ink);
  box-shadow: 0 8px 14px -10px rgba(10, 124, 145, .8);
}
#customBordaSection .pz-btn:focus-visible { outline: 2px solid var(--pz-acc-d); outline-offset: 2px; }

#customBordaSection .pz-btn-primary {
  background-color: var(--pz-acc);
  border-color: var(--pz-acc-d);
  color: #fff;
}
#customBordaSection .pz-btn-primary i { color: #fff; }
#customBordaSection .pz-btn-primary:hover { background-color: var(--pz-acc-d); border-color: var(--pz-acc-d); color: #fff; }
#customBordaSection .pz-btn-primary:disabled,
#customBordaSection .pz-btn-primary:disabled:hover {
  background-color: var(--pz-ok);
  border-color: #065f46;
  color: #fff;
  cursor: default;
  box-shadow: none;
}

/* Vue IA : il ne reste que Voir et Copier. */
#customBordaSection[data-mode="ia"] .pz-actions { max-width: 21rem; margin-inline: auto; }

/* ------------------------------------------------- selon la largeur de l'encart -- */

/* 28 rem et plus : en-tête sur une ligne, plaques un peu plus larges. */
@container tbz-prono (min-width: 28rem) {
  #customBordaSection .pz-board { padding: 16px 16px 14px; }
  #customBordaSection .pz-head { flex-direction: row; justify-content: space-between; text-align: left; }
  #customBordaSection .arrival-item { width: 4.5rem; margin: 4px 3px; }
  #customBordaSection .arrival-item .horse-number { font-size: 1.8rem; }
}

/* De 32 rem à 37 rem (ordinateur de 1200 à 1399 px de large) : avec 7 plaques ou plus, on resserre
   un peu les plaques pour que les 7 premiers tiennent sur une seule ligne, dans l'ordre du classement.
   Sans :has() (navigateur ancien), la règle est ignorée et les plaques passent sur 2 rangées. */
@container tbz-prono (min-width: 32rem) and (max-width: 36.99rem) {
  #customBordaSection .pz-rang:has(.arrival-item:nth-child(7)) .arrival-item { width: 4rem; margin: 4px 2px; }
  #customBordaSection .pz-rang:has(.arrival-item:nth-child(7)) .arrival-item .horse-number { font-size: 1.65rem; }
}

/* 29 rem et plus : 3 boutons par rangée (Personnaliser, Gérer, Détail ; puis Voir,
   XLSX, Copier). En dessous, 2 par rangée. */
@container tbz-prono (min-width: 29rem) {
  #customBordaSection .pz-btn { flex-basis: calc((100% - 16px) / 3); }
}

/* Moins de 20 rem (écran de 320 px) : police et marges un peu réduites pour que
   « Personnaliser » tienne dans son bouton. */
@container tbz-prono (max-width: 19.99rem) {
  #customBordaSection .pz-btn { gap: 5px; padding: 0 .3rem; font-size: .85rem; }
  #customBordaSection .pz-btn i { font-size: .9rem; }
  #customBordaSection .pz-board { padding: 12px 8px 10px; }
}

/* -------------------------------------------------------------- mouvement -- */

@media (prefers-reduced-motion: no-preference) {
  #customBordaSection .pz-switch::before { transition: transform .24s var(--pz-ease); }
  #customBordaSection .pz-sw-opt { transition: color .2s; }
  #customBordaSection .pz-switch { transition: background-color .2s; }

  #customBordaSection .arrival-item { transition: transform .18s var(--pz-ease), box-shadow .2s; }
  #customBordaSection .pz-btn { transition: background-color .15s, border-color .15s, transform .15s, box-shadow .2s; }
  #customBordaSection .pz-btn:active { transform: translateY(1px); }

  @media (hover: hover) {
    #customBordaSection .arrival-item:hover { transform: translateY(-3px); }
    #customBordaSection .pz-btn:hover { transform: translateY(-1px); }
  }

  /* La séquence d'ouverture : les plaques montent l'une après l'autre, puis les
     barres se remplissent dans le même ordre. */
  #customBordaSection .pz-rang[data-anim] .arrival-item {
    animation: pz-entree .5s var(--pz-ease) backwards;
    animation-delay: calc(var(--pz-i, 0) * 60ms);
  }
  #customBordaSection .pz-rang[data-anim] .pz-bar i {
    animation: pz-barre .8s var(--pz-ease) backwards;
    animation-delay: calc(var(--pz-i, 0) * 60ms + 180ms);
  }

  /* Copier : une onde parcourt les plaques copiées. */
  #customBordaSection .pz-rang.pz-copie .arrival-item {
    animation: pz-onde .6s var(--pz-ease);
    animation-delay: calc(var(--pz-i, 0) * 55ms);
  }

  #customBordaSection .pz-l-fiche.is-on { animation: pz-fondu .22s var(--pz-ease); }

  @keyframes pz-entree { from { opacity: 0; transform: translateY(10px) scale(.96); } }
  @keyframes pz-barre  { from { transform: scaleX(0); } }
  @keyframes pz-onde   { 40% { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--pz-acc), 0 8px 18px -6px rgba(10, 124, 145, .55); } }
  @keyframes pz-fondu  { from { opacity: 0; transform: translateY(3px); } }
}