/* ============================================================
   ACTUALITÉS

   Une page qui se lit en diagonale. On n'y cherche pas un chiffre
   précis, on balaie des titres jusqu'à ce que l'un accroche.

   D'où la composition : le titre porte tout le poids, la source
   et l'heure restent en retrait au-dessus, et l'extrait n'est là
   que pour départager deux titres proches. Trois niveaux, pas
   quatre.

   Chaque article est un lien entier — pas un titre cliquable
   perdu dans un bloc. On vise une cible large : la ligne complète
   réagit, ce qui compte autant au doigt qu'à la souris.
   ============================================================ */

.actus-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.actu + .actu { border-top: 1px solid var(--line-soft); }

/* Le texte à gauche, la photo calée en haut à droite. La photo vient
   après le texte dans le code : à la lecture comme au clavier, on
   rencontre d'abord le titre, qui est l'information. */
.actu-lien {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 2.5vw, var(--s4));
  padding: var(--s4) clamp(1.1rem, 3vw, 1.75rem);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

/* min-width: 0 — sans lui, un titre long refuse de se couper et pousse
   la vignette hors de la ligne au lieu de passer à la ligne lui-même. */
.actu-texte {
  display: grid;
  gap: var(--s1);
  flex: 1 1 auto;
  min-width: 0;
}

.actu-lien:hover,
.actu-lien:focus-visible { background: var(--surface-alt); }

.actu-lien:hover .actu-titre { color: var(--a); }

/* ---- la vignette : l'accroche, pas le sujet ----

   Assez grande pour qu'on reconnaisse un joueur ou un maillot, assez
   petite pour que le titre reste ce qu'on lit en premier. Largeur fixe
   plutôt qu'un pourcentage : toutes les photos s'alignent alors sur une
   même colonne à droite, et l'œil descend la liste sans zigzaguer.

   flex-shrink: 0 — la vignette ne se laisse pas écraser par un titre
   long ; c'est le texte qui cède. */
.actu-visuel {
  flex: 0 0 auto;
  width: clamp(4.5rem, 20vw, 7.5rem);
  /* 16/9 — c'est exactement le format dans lequel les deux rédactions
     publient leurs photos, donc rien n'est rogné. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface-alt);
}

.actu-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover — les rédactions ne cadrent pas au même format ; on remplit le
     cadre quitte à rogner, plutôt que d'accepter des bandes vides. */
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* Un léger rapprochement au survol : la ligne entière est cliquable, la
   photo le confirme. */
.actu-lien:hover .actu-visuel img,
.actu-lien:focus-visible .actu-visuel img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .actu-visuel img { transition: none; }
  .actu-lien:hover .actu-visuel img,
  .actu-lien:focus-visible .actu-visuel img { transform: none; }
}

/* ---- la ligne du haut : d'où ça vient, et quand ---- */

.actu-haut {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-xs);
}

.actu-src {
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--b);
}

.actu-quand {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- le titre : c'est lui qu'on lit ---- */

.actu-titre {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 600;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
  transition: color 0.15s ease;
}

/* ---- l'extrait : il départage, il ne raconte pas ----
   Deux lignes au maximum. Au-delà, on recopierait l'article au
   lieu d'y renvoyer, et la page cesserait d'être balayable. */

.actu-resume {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 78ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- attente et panne ---- */

.actus-attente,
.actus-panne {
  padding: var(--s6) clamp(1.1rem, 3vw, 1.75rem);
  color: var(--ink-soft);
  font-size: var(--t-md);
}

.actus-panne p { margin: 0 0 var(--s3); }
.actus-panne p:last-child { margin-bottom: 0; }
.actus-panne strong { color: var(--warn); }
.actus-aide { color: var(--ink-faint); font-size: var(--t-sm); }

@media (max-width: 30rem) {
  .actu-lien { padding-top: var(--s3); padding-bottom: var(--s3); }
  .actu-titre { font-size: var(--t-base); }
}

/* ============================================================
   LA COLONNE DES RÉSULTATS

   La page laissait un grand vide à droite : une liste de titres
   n'a pas besoin de toute la largeur, et des lignes de 64rem se
   lisent mal. On coupe donc la page en deux — les dépêches à
   gauche, les scores à droite — sans élargir la page, pour que
   tout reste aligné sur la barre du haut.

   Les actualités y perdent un tiers de largeur. C'est un gain :
   des titres de 41rem se balaient mieux que des titres qui
   traversent l'écran.
   ============================================================ */

.actus-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--s5);
  align-items: start;
}

/* min-width: 0 — sans lui, une grille laisse une colonne déborder
   plutôt que de la faire rétrécir, et les longs titres passeraient
   sous les résultats. */
.actus-col {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
}

/* Les scores restent à l'écran pendant qu'on descend dans les
   dépêches : c'est tout l'intérêt de les avoir mis à côté. */
.resultats {
  position: sticky;
  top: calc(var(--h-topbar, 4rem) + var(--s3));
  max-height: calc(100vh - var(--h-topbar, 4rem) - var(--s5));
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.res-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.res-tete h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
}

.res-compte { font-size: var(--t-xs); color: var(--ink-faint); }

/* d'où viennent ces chiffres : dans la page, pas dans une note de bas
   de page qu'on ne lira jamais */
.res-source {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* La note sur les coupes est une réserve, pas la source principale :
   un filet à gauche la donne pour ce qu'elle est — une précision en
   marge — sans qu'elle se confonde avec la ligne de provenance. */
.res-coupes {
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  margin-top: var(--s2);
}

.res-mot {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  padding: var(--s3) 0;
}

.res-panne { color: var(--warn); }

/* « on cherche encore » : discret, et centré pour ne pas se faire
   prendre pour un résultat de plus */
.res-suite {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  margin-top: var(--s2);
}

/* ---- le jour, puis le championnat, puis les matchs ---- */

.res-jour {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  margin-top: var(--s2);
}

.res-liste { list-style: none; margin: 0; padding: 0; }

.res-compet {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  padding: var(--s3) 0 var(--s1);
}

.res-m {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--s2) 0;
  border-top: 1px solid var(--line-soft);
}

.res-compet + .res-m { border-top: none; }

.res-eq {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--t-md);
  color: var(--ink-soft);
}

/* La colonne est étroite : un nom trop long se coupe proprement
   plutôt que de pousser le score hors du cadre. */
.res-nom {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.res-nom:hover { color: var(--a); text-decoration: underline; }

.res-b { font-size: var(--t-md); color: var(--ink-faint); flex: none; }

/* le vainqueur ressort : c'est ce qu'on cherche en balayant */
.res-eq.gagne { color: var(--ink); font-weight: 650; }
.res-eq.gagne .res-b { color: var(--ink); }

/* un nul : les deux équipes lisibles, aucune en avant */
.res-eq.nul { color: var(--ink); }
.res-eq.nul .res-b { color: var(--ink-soft); }

/* ---- écrans étroits : une seule colonne, les scores dessous ---- */

@media (max-width: 58rem) {
  .actus-grille { grid-template-columns: minmax(0, 1fr); }

  .resultats {
    position: static;
    max-height: none;
    overflow: visible;
  }
}