/* ==========================================================================
   Sport Pulse : composants partagés des gabarits (article, quinte, comparateur,
   categorie, 404). Chargé APRÈS accueil.css (jetons de couleur, en-tête, pied,
   onglets, titres à liseré rouge, cartes vedette / liste / pile / « À ne pas
   manquer », tableaux, publicité), AVANT le CSS propre du gabarit.
   Ici : lien actif de la navigation, mise en page à colonne droite, fil
   d'Ariane, cartes en grille, bloc « Meilleurs sites de paris » (repris de la
   page scores), publicité cliquable, page introuvable.
   ========================================================================== */

/* Navigation : lien de la page ou de la rubrique courante (comme « Scores » sur la page des scores) */
.nav-principale__lien--actif { border-bottom-color: var(--rouge); }

/* ---------- Mise en page : colonne principale + colonne droite de 320 px ---------- */
.page { padding-top: 26px; }
.page__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.page__titre { font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.page__soustitre { font-size: 15px; color: var(--texte-3); }
.page__grille {
  margin-top: 18px; display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1fr) 320px; align-items: start;
}
.page__principal { min-width: 0; }
/* Colonne droite : .colonne-droite d'accueil.css (blocs empilés, 28 px d'écart ; deux colonnes puis une en dessous de 1024 px) */

/* Fil d'Ariane : Accueil / Football / … */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13px; color: var(--texte-3); }
.fil-ariane li { display: inline-flex; align-items: center; min-width: 0; }
.fil-ariane li + li::before { content: "/"; margin: 0 8px; color: var(--bordure-2); }
.fil-ariane a { color: var(--texte-2); text-decoration: none; font-weight: 600; }
.fil-ariane a:hover { color: var(--bleu); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* ---------- Cartes d'articles en grille (fond clair) : même famille que la vedette ---------- */
.grille-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
.grille-articles > .etat { grid-column: 1 / -1; }
.carte-grille { display: flex; flex-direction: column; min-width: 0; }
.carte-grille__media { display: block; border-radius: 4px; overflow: hidden; background: var(--bordure); margin-bottom: 12px; }
.carte-grille__image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .3s ease; }
.carte-grille__media:hover .carte-grille__image { transform: scale(1.02); }
.carte-grille .rubrique-texte { display: block; }
.carte-grille__titre { font-weight: 600; font-size: 17px; line-height: 1.28; margin-top: 4px; text-wrap: pretty; }
.carte-grille__titre a { color: var(--texte); text-decoration: none; }
.carte-grille__titre a:hover { color: var(--bleu); text-decoration: underline; }
.carte-grille .temps { display: block; margin-top: 6px; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .carte-grille__image { transition: none; }
  .carte-grille__media:hover .carte-grille__image { transform: none; }
}

/* ---------- Meilleurs sites de paris : liste compacte, une ligne cliquable par opérateur ---------- */
.operateurs__liste { margin-top: 12px; border-top: 1px solid var(--bordure); }
.operateur { border-bottom: 1px solid var(--bordure); }
.operateur[aria-hidden="true"] { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; }
.operateur__lien {
  display: grid; grid-template-columns: 14px 36px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center;
  padding: 10px 0; color: inherit; text-decoration: none;
}
a.operateur__lien:hover { background: #FAFBFC; }
a.operateur__lien:hover .operateur__nom { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.operateur__rang {
  font-family: var(--police-etroite); font-weight: 700; font-size: 15px; color: var(--texte-3);
  text-align: center; font-variant-numeric: tabular-nums;
}
.operateur__logo { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--fond); }
.operateur__logo--texte { display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--texte-2); }
.operateur__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.operateur__nom { font-weight: 700; font-size: 15px; line-height: 1.2; }
.operateur__offre { font-size: 12.5px; line-height: 1.3; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.operateur__bonus { text-align: right; line-height: 1; white-space: nowrap; }
.operateur__jusqua { display: block; margin-bottom: 1px; font-size: 10.5px; color: var(--texte-3); }
.operateur__montant { font-family: var(--police-etroite); font-weight: 700; font-size: 21px; color: var(--texte); }
.operateurs[data-type="hippique"] .operateur__montant, .operateurs--hippique .operateur__montant { color: var(--vert); }
.operateur__fleche { width: 14px; height: 14px; color: var(--texte-3); }
.operateurs__liste .etat { padding: 14px 0; }
.operateurs__mention { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--texte-3); }
.operateurs__mention:empty { display: none; }
.operateurs__mention + .lien-fleche { margin-top: 6px; }

/* ---------- Publicité PMU cliquable (création à taille native ; bandeaux réduits si la place manque) ---------- */
.pub__lien { display: block; line-height: 0; }
.pub__lien:focus-visible { outline-offset: 3px; }
.pub--bandeau { width: 100%; }
.pub--bandeau .pub__lien { max-width: 100%; }
.pub--bandeau img { max-width: 100%; height: auto; }

/* ---------- Page introuvable ---------- */
.introuvable { padding: 8px 0 4px; }
.introuvable__code {
  font-family: var(--police-etroite); font-weight: 700; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rouge);
}
.introuvable .page__titre { margin-top: 6px; }
.introuvable__texte { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--texte-2); max-width: 62ch; }
.introuvable__liens { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
/* Agent pages : recherche simple et rubriques de la page introuvable (le champ sert aussi à /recherche/) */
.introuvable__recherche { margin-top: 20px; max-width: 560px; }
.introuvable__rubriques .onglets { flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.introuvable__rubriques .onglet { display: block; text-decoration: none; background: var(--fond); color: var(--texte); font-weight: 600; border-radius: 4px; }
.introuvable__rubriques .onglet:hover { background: var(--bordure); }

/* ---------- Champ de recherche (page introuvable, page /recherche/) ---------- */
.champ-recherche { display: flex; align-items: stretch; gap: 0; }
.champ-recherche__saisie {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--texte);
  background: var(--blanc); border: 1.5px solid var(--bordure-2); border-right: 0; border-radius: 4px 0 0 4px;
}
.champ-recherche__saisie::placeholder { color: var(--texte-3); }
.champ-recherche__saisie:focus-visible { outline-offset: -1px; border-color: var(--bleu); }
.champ-recherche__bouton {
  flex: none; height: 46px; padding: 0 18px; border: 0; border-radius: 0 4px 4px 0; cursor: pointer;
  background: var(--texte); color: #fff; font-weight: 700; font-size: 15px;
}
.champ-recherche__bouton:hover { background: var(--rouge); }
.introuvable__suite { margin-top: 40px; }
.introuvable__articles { margin-top: 18px; }
.introuvable__articles .grille-articles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .page__grille { grid-template-columns: minmax(0, 1fr); }
  .grille-articles, .introuvable__articles .grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page { padding-top: 18px; }
  .page__titre { font-size: 26px; }
  .page__grille { margin-top: 12px; }
  .introuvable__texte { font-size: 16px; }
}

@media (max-width: 560px) {
  /* Téléphone : une colonne, chaque carte au format de la liste à vignettes (vignette à gauche, texte à droite) */
  .grille-articles, .introuvable__articles .grille-articles { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grille-articles > .carte-grille { padding: 14px 0; border-bottom: 1px solid var(--bordure-2); }
  .grille-articles > .carte-grille:first-child { padding-top: 0; }
  .grille-articles > .carte-grille:last-child { border-bottom: 0; padding-bottom: 0; }
  .carte-grille:has(> .carte-grille__media) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-content: start; }
  .carte-grille:has(> .carte-grille__media) > :not(.carte-grille__media) { grid-column: 2; }
  .carte-grille__media { grid-row: 1 / span 3; margin-bottom: 0; align-self: start; }
  .carte-grille__image { width: 96px; height: 72px; aspect-ratio: auto; }
  .carte-grille__titre { font-size: 16px; margin-top: 3px; }
  .carte-grille .temps { margin-top: 5px; }
}

/* ==========================================================================
   WordPress : barre d'administration (visiteurs connectés seulement, ex. aperçu
   du thème) : les barres collantes se placent dessous au lieu d'être masquées.
   ========================================================================== */
.admin-bar .scores__barre, .admin-bar .barre-course { top: 32px; }
@media (max-width: 782px) { .admin-bar .scores__barre, .admin-bar .barre-course { top: 46px; } }
@media (max-width: 600px) { .admin-bar .scores__barre, .admin-bar .barre-course { top: 0; } }