/**
 * @file
 * Zones 7 à 12 : sujets suivis, citation, mosaïque sombre, indicateurs,
 * magazine, résultats sportifs, rubriques basses.
 */

/* ============================================================
   7. SUJETS SUIVIS
   ============================================================ */
.chips {
  border-top: var(--ccd-rule);
  border-bottom: var(--ccd-rule);
  background: var(--ccd-white);
}

/*
 * Masque la bande entière faute de pastille.
 *
 * Le cadre de la zone 7 — filets, fond, intitulé « Sujets suivis » — est posé
 * par page.html.twig, qui ne teste que la présence d'un bloc dans la région,
 * pas le fait qu'il produise quelque chose. Une vue sans résultat laisserait
 * donc une bande vide. On s'en remet au rendu réel : pas de <li>, pas de bande.
 */
.chips:not(:has(li)) {
  display: none;
}

.chips .wrap {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.chips__label {
  flex: none;
  align-self: center;
  margin-right: 4px;
  color: var(--ccd-grey-400);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Aplatit région, bloc et enveloppes de vue pour que la liste de pastilles
   partage la ligne de l'intitulé. Même procédé que le fil de la zone 5. */
.chips .wrap :where(div) {
  display: contents;
}

.chips ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips a {
  display: block;
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--ccd-grey-200);
  background: var(--ccd-grey-050);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.chips a:hover {
  border-color: var(--ccd-red);
  background: var(--ccd-red);
  color: #fff;
}

/* ============================================================
   8. ENCADRÉ CITATION
   ============================================================ */
.quote {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--ccd-black);
  color: #fff;
}

.quote__mark {
  margin-bottom: 14px;
  color: var(--ccd-red);
  font-family: var(--ccd-font-serif);
  font-size: 62px;
  line-height: 0.6;
}

.quote blockquote {
  margin: 0;
  font-family: var(--ccd-font-serif);
  font-size: 20px;
  line-height: 1.38;
}

.quote cite {
  margin-top: auto;
  padding-top: 20px;
  color: var(--ccd-grey-400);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.quote cite b {
  display: block;
  color: #fff;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   9. MOSAÏQUE SOMBRE (view mode « tile »)
   ============================================================ */
.tile {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  min-height: 230px;
}

.tile .ph,
.tile .teaser__media,
.tile .teaser__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tile:hover .ph,
.tile:hover .teaser__media img {
  transform: scale(1.04);
}

.tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 14, 16, 0.94) 0%, rgba(14, 14, 16, 0.35) 55%, transparent 100%);
}

.tile__body {
  position: relative;
  padding: 18px;
  color: #fff;
}

.tile h4 {
  font-size: 17px;
  line-height: 1.2;
}

.tile .meta {
  color: var(--ccd-grey-400);
}

/*
 * Dimensionnement des tuiles.
 *
 * Surtout PAS de :first-child / :nth-child ici : display:contents retire les
 * conteneurs Drupal (région, bloc, views-row) de la mise en page mais les
 * laisse dans l'arbre DOM. Les tuiles restent donc chacune « premier enfant »
 * de leur propre views-row, et un :first-child les sélectionnerait toutes.
 * Les classes de portée sont posées explicitement par le gabarit de vue
 * templates/views/views-view-unformatted--mosaique.html.twig.
 */
.mosaic__cell {
  display: flex;
  min-width: 0;
}

.mosaic__cell > * {
  flex: 1;
  min-width: 0;
}

.mosaic__cell--xl {
  grid-row: span 2;
  grid-column: span 2;
}

.mosaic__cell--wide {
  grid-column: span 2;
}

.mosaic__cell--xl .tile__body,
.tile--xl .tile__body {
  padding: 26px;
}

.mosaic__cell--xl h4,
.tile--xl h4 {
  font-size: 28px;
}

.tile--wide {
  grid-column: span 2;
}

/*
 * Aplatissement de la chaîne de conteneurs Drupal dans la mosaïque, pour que
 * les cellules deviennent les éléments de grille directs.
 *
 * .views-row est volontairement ABSENT de cette liste : le gabarit de vue
 * pose .mosaic__cell sur la views-row elle-même, qui est donc la cellule.
 * L'aplatir réduirait toutes les tuiles à une taille nulle.
 */
/*
 * Énumérer les classes (.block, .view, .view-content) ne fonctionne pas :
 * stable9 produit un balisage volontairement sans classes, et la chaîne
 * réelle comporte des <div> nus. On vise donc par la structure — tout
 * descendant qui n'est ni une cellule ni contenu dans une cellule — ce qui
 * reste juste quel que soit le balisage produit par Views.
 */
.mosaic :where(div):not(.mosaic__cell):not(.mosaic__cell *) {
  display: contents;
}

/* ============================================================
   10. RUBRIQUES JUMELLES + INDICATEURS
   ============================================================ */
.duo__head .teaser__media img,
.duo__head .ph {
  aspect-ratio: 16 / 9;
}

.duo__head h3 {
  margin-top: 14px;
  font-size: 21px;
}

/* Tableau d'indicateurs — le « légèrement flashy » utile. */
.indics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 18px;
  border: var(--ccd-rule);
  background: var(--ccd-grey-200);
}

.indics > div {
  padding: 13px 14px;
  background: var(--ccd-white);
}

.indics dt {
  color: var(--ccd-grey-600);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.indics dd {
  margin: 5px 0 0;
  font-family: var(--ccd-font-display);
  font-size: 19px;
  font-weight: 800;
}

.indics .is-up {
  color: var(--ccd-red);
}

.indics .is-flat {
  color: var(--ccd-grey-600);
}

/* ============================================================
   11. MAGAZINE + RÉSULTATS SPORTIFS
   ============================================================ */
.magazine .card__body p {
  margin-top: 10px;
  color: var(--ccd-grey-600);
  font-size: 14.5px;
}

.magazine__main h3 {
  font-size: 23px;
}

.magazine__side h4 {
  font-size: 17px;
  line-height: 1.22;
}

.scores {
  padding: 16px 18px;
  border: var(--ccd-rule);
  border-left: 3px solid var(--ccd-red);
  background: var(--ccd-white);
}

.scores h4 {
  margin-bottom: 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.scores table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.scores td {
  padding: 9px 0;
  border-top: var(--ccd-rule);
}

.scores tr:first-child td {
  border-top: 0;
}

.scores td:last-child {
  font-family: var(--ccd-font-display);
  font-weight: 800;
  text-align: right;
}

.scores .is-win {
  color: var(--ccd-red);
}

/* ============================================================
   12. RUBRIQUES BASSES
   ============================================================ */
/*
 * On vise `.block` et non `.trio > *` : la région qui contient les blocs est
 * en display:contents, ce qui la retire de la mise en page mais la laisse
 * dans l'arbre DOM. Elle reste donc le seul enfant direct de `.trio`, et un
 * sélecteur d'enfant direct styliserait la région au lieu des blocs — même
 * piège que sur la mosaïque de la zone 9.
 */
.trio .block {
  padding: 20px;
  border: var(--ccd-rule);
  background: var(--ccd-white);
}

/*
 * Chaque colonne de la zone 12 est faite de deux blocs — vedette puis
 * brèves. Le second se raccorde au premier pour que la colonne se lise
 * comme une seule carte. Avec `grid-auto-flow: column` sur deux lignes,
 * les blocs de rang pair sont les listes de brèves.
 */
.trio .block:nth-child(even) {
  padding-top: 0;
  border-top: 0;
}

/*
 * Le cadre blanc est porté par le bloc, pas par la carte interne : sans
 * cette neutralisation, l'article vedette afficherait un second filet à
 * l'intérieur du premier.
 */
.duo .card,
.trio .card {
  border: 0;
  background: none;
}

.trio .sechead {
  margin-bottom: 16px;
}

.trio .sechead h2 {
  font-size: 18px;
}

.trio .teaser__media img,
.trio .ph {
  margin-bottom: 14px;
  aspect-ratio: 16 / 9;
}

.trio h3 {
  font-size: 19px;
  line-height: 1.2;
}