/* ════════════════════════════════════════════════════════════════
   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: uppercase;
  letter-spacing: 0.4px;
  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. */
html.is-app:has(nav.scores-ticker)::before{background:#1A1A1A;}

/* ⚠️ 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. */
html.is-app:has(nav.scores-ticker) .arch-hero--compact {
  min-height: 300px;
}
html.is-app:has(nav.scores-ticker) .arch-hero--compact .arch-hero__head {
  padding-top: 60px;
}
html.is-app:has(nav.scores-ticker) .arch-hero__nav {
  top: 8px;
}