/* ════════════════════════════════════════════════════════════════
   Bandeau « base de données » HORS ACCUEIL (25/09/2026).

   ⚠️ MÊME BALISAGE ET MÊMES CLASSES QUE L'ACCUEIL, à la demande de Félix.
   Une première version avait son propre balisage (.itsr-dbbar) pour éviter
   de charger itsrugby-home.css partout : elle s'affichait correctement sur
   le web mais rendait une bande noire VIDE dans l'app. Reprendre le
   composant de l'accueil fait hériter d'un coup de tout ce que
   its-app-shell.css sait déjà faire avec `nav.scores-ticker` : bord à bord
   sous l'encoche, largeur auto en paysage, couleur de la bande d'état.

   Les règles ci-dessous sont COPIÉES de itsrugby-home.css (section « Scores
   ticker » + compteurs), sans le slider de stats ni la rangée de scores, qui
   restent propres à l'accueil. ⚠️ Les deux fichiers ne se rencontrent jamais :
   celui-ci n'est chargé que hors accueil. Si l'un des deux change, aligner
   l'autre.

   Feuille à tenir HORS RUCSS et HORS minification Rocket (exclusions dans
   its-rugby-templates.php) : sans ça, un sélecteur neuf reste invisible sur
   les pages déjà optimisées, et le ?ver se fige (incident du 25/09).
   ════════════════════════════════════════════════════════════════ */

.its-v2 nav.scores-ticker,
nav.scores-ticker {
  background: #1A1A1A;
  color: var(--vanilla, #F2E5D2);
  padding: 0;
  overflow: hidden;
  border-bottom: 2px solid #8ED968;
  display: flex;
  align-items: stretch;
  min-height: 56px;
  width: 100%;
  max-width: 100%;
}

/* display:contents → les compteurs deviennent frères flex du ticker. */
.db-band {
  display: contents;
}

.db-band a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 56px;
  padding: 4px 20px;
  text-decoration: none;
  color: var(--vanilla, #F2E5D2);
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.db-band strong {
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  color: var(--g-bright, #8ED968);
}
.db-band span {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-transform:none;
  letter-spacing:0;
  color: var(--vanilla, #F2E5D2);
}
.db-band a:hover,
.db-band a:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
.db-band a:hover strong,
.db-band a:focus-visible strong {
  color: #fff;
}

.db-band-counts {
  display: flex;
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.db-band-counts > li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.db-band-counts a {
  flex: 1;
}
.db-band-counts > li:first-child a {
  border-left: none;
}

/* Mobile : quatre colonnes serrées, comme sur l'accueil. */
@media (max-width: 781px) {
  .db-band a {
    height: 46px;
    padding: 4px 6px;
  }
  .db-band strong {
    font-size: 15px;
  }
  .db-band span {
    font-size: 8px;
    letter-spacing: 0.3px;
  }
  .its-v2 nav.scores-ticker,
  nav.scores-ticker {
    min-height: 46px;
  }
}

/* App : les MÊMES valeurs compactes, hors media query. La webview Capacitor
   ne rend pas toujours à device-width (incident ICB=1706 documenté dans
   its-app-shell.css) : une largeur peut ne jamais correspondre. */
html.is-app .db-band a {
  height: 46px;
  padding: 4px 6px;
}
html.is-app .db-band strong {
  font-size: 15px;
}
html.is-app .db-band span {
  font-size: 8px;
  letter-spacing: 0.3px;
}
html.is-app nav.scores-ticker {
  min-height: 46px;
}

/* Ordinateur : le menu porte déjà ces entrées, le bandeau ferait doublon.
   ⚠️ `html:not(.is-app)` est OBLIGATOIRE : si la webview annonce une largeur
   de 1706, cette règle masquerait le bandeau dans l'app, ce qui est exactement
   le symptôme qu'on a mis deux heures à comprendre le 25/09.
   Masquage en CSS et jamais en PHP : Rocket garde deux variantes de cache
   mobile et ordinateur, un test sur l'agent se figerait dans la mauvaise. */
@media (min-width: 782px) {
  html:not(.is-app) body:not(.home) nav.scores-ticker {
    display: none;
  }
}

/* App : la bande FIXE de l'encoche prend la couleur du bandeau.
   its-app-shell.css la peint en teal, et la passe déjà en #1A1A1A sur
   l'accueil « parce que le premier bloc est le ticker noir ». C'est désormais
   vrai sur toutes les pages qui portent ce bandeau : sans cette règle, un
   liseré vert restait au-dessus du noir et se décollait au défilement. */
/* Rien à faire ici pour la bande d'encoche : depuis le 25/09 au soir, elle est
   NOIRE par défaut dans its-app-shell.css, donc déjà de la couleur de ce
   bandeau. La règle `html.is-app:has(nav.scores-ticker)::before` qui vivait
   ici est retirée : `:has()` ne prend pas dans la webview iOS, c'est ce qui
   laissait une bande verte au-dessus du bandeau noir. */

/* ⚠️ Ces trois règles étaient écrites en `html.is-app:has(nav.scores-ticker)` :
   `:has()` ne prend pas dans la webview iOS (bande verte du 25/09), donc elles
   ne s'appliquaient PAS là-bas, ce qui est justement le seul endroit qu'elles
   visent. La condition est de toute façon superflue : cette feuille n'est
   chargée QUE sur les pages qui portent le bandeau. `:not(#its-app-x)` garde
   l'avantage sur itsrugby-archive-hero.css quel que soit l'ordre des feuilles.
⚠️ App : le haut de page d'archive ne doit plus réserver l'encoche quand le
   bandeau est là. its-app-shell.css et itsrugby-archive-hero.css partent du
   principe que le haut de page DÉMARRE sous l'horloge, et ajoutent donc
   env(safe-area-inset-top) à sa hauteur minimale et à son rembourrage haut.
   Depuis le 25/09 c'est le bandeau qui occupe cette place : la réserve était
   comptée deux fois et laissait ~50 px de photo vide au-dessus du titre
   (remonté par Félix). On la retire, uniquement sur les pages qui portent le
   bandeau — l'accueil et les articles gardent le comportement d'origine. */
/* ⚠️ Et SURTOUT PAS une hauteur fixe de 300 px : le haut de page compact n'en
   a besoin que de ~250. Le reste devenait une bande de photo NUE au-dessus du
   voile vert, qui lui s'arrête au bord du bloc de texte : un trait horizontal
   net en travers de la photo, à mi-immeuble (remonté par Félix sur /mercato/,
   25/09). La convention mobile d'itsrugby-archive-hero.css est justement
   « pas de hauteur minimale » (Félix, 22/09 : « ce trou ») ; on s'y range,
   le bandeau de scores tenant lieu de réserve d'encoche. */
html.is-app:not(#its-app-x) .arch-hero--compact {
  min-height: 0;
}
html.is-app:not(#its-app-x) .arch-hero--compact .arch-hero__head {
  padding-top: 60px;
}
html.is-app:not(#its-app-x) .arch-hero__nav {
  top: 8px;
}
/* App : le fil d'Ariane ne réserve plus l'encoche quand le bandeau est là
   (12/10). its-app-shell.css lui donne une bordure teal de la hauteur de
   l'heure parce qu'il est censé être le premier bloc ; ici c'est le bandeau
   qui l'est déjà. Sur les fiches refondues (joueur, équipe, compétition,
   match), le fil d'Ariane est un calque invisible qui ne porte que le bouton
   « ‹ » : la bordure y faisait une bande teal vide sous le bandeau et coupait
   le haut de la photo (« une ligne en haut », Félix). */
html.is-app:not(#its-app-x) body nav.breadcrumb {
  border-top: 0;
}
/* App, hub « Compte » (/plus/, /more/) : its-app-shell.css pose une bordure de la
   hauteur de l'heure sur le body, prévue quand le hub n'avait pas de bandeau. Avec
   le bandeau, l'encoche était comptée deux fois (sonde itsdbg du 14/10 : body
   visible à 4 et 30 px, bandeau à partir de 47). */
html.is-app:not(#its-app-x) body {
  border-top: 0;
}