/**
 * Articles, archives et pages de liste.
 */

/* ---------------------------------------------------------------
 * Entêtes de liste — archives et pages de catégorie
 * --------------------------------------------------------------- */

.liste__entete {
  margin-bottom: var(--e-m);
  padding-bottom: var(--e-s);
  border-bottom: 1px solid var(--couleur-separateur);
}

.liste__titre { margin: 0; }

.liste__intro {
  margin: var(--e-2xs) 0 0;
  max-width: var(--largeur-texte);
  color: var(--couleur-texte-doux);
  font-size: var(--t-corps-grand);
}

.liste__contenu { margin-bottom: var(--e-l); }

.liste__compte {
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}

.liste__vide {
  padding: var(--e-l);
  background-color: var(--couleur-fond-alt);
  text-align: center;
}

/* Message d'administration : visible seulement des éditeurs. */
.liste__alerte {
  padding: var(--e-s);
  border-left: 4px solid var(--couleur-accent-4);
  background-color: var(--couleur-fond-alt);
}

/* ---------------------------------------------------------------
 * Article
 * --------------------------------------------------------------- */

/*
 * L'EN-TÊTE D'UN ARTICLE : LE TITRE, PUIS LA DATE.
 *
 * Relevé en production : titre de 35,2 px en graisse 700, marine, calé
 * à gauche, et la date dessous en corps courant. L'étiquette date +
 * catégorie qui précédait le titre a disparu — on arrive d'une liste
 * qui porte déjà la catégorie en titre de bloc, et la répéter au-dessus
 * du titre de l'article repoussait ce qu'on est venu lire.
 *
 * Plus de largeur maximale sur le titre non plus : elle le coupait à
 * 30 caractères pour en faire un pavé, quand la maquette le laisse
 * courir sur la colonne.
 */
.article__entete { padding-block: var(--e-l) var(--e-s); }

.article__titre {
  margin: 0 0 var(--e-2xs);
  font-size: var(--t-rubrique);
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  color: var(--couleur-titre);
}

.article__date {
  margin: 0;
  font-size: var(--t-corps);
  color: var(--couleur-texte);
}

/*
 * L'IMAGE À SA TAILLE, DANS LA COLONNE.
 *
 * Elle était en bandeau pleine largeur, recadrée sur 26 rem de haut :
 * les illustrations du CDOS sont souvent des affiches en portrait, et
 * le recadrage leur coupait le haut et le bas. Ici elle garde ses
 * proportions, et ne dépasse pas la colonne de lecture — une affiche
 * plus large que le texte qu'elle illustre ne se lit pas mieux.
 */
.article__image {
  margin: var(--e-m) 0;
}

/*
 * La hauteur bornée, et elle seule.
 *
 * L'image de tête prend la largeur de la colonne quand elle l'a —
 * « width: auto » lui interdit de s'étirer au-delà de sa taille réelle,
 * et quarante des cent six articles illustrés ont une image plus
 * étroite que la colonne. C'est alors la largeur de l'image qui
 * l'emporte, pour ne pas la pixelliser, et elle se centre dans la
 * colonne plutôt que de rester collée à gauche — « margin-inline »,
 * qui ne fait rien dès que l'image occupe toute la place.
 *
 * Reste le cas inverse : vingt-six de ces images sont des affiches en
 * portrait. À 1196 px de large, la plus haute ferait 2136 px — deux
 * écrans avant la première ligne du texte. La borne de hauteur est donc
 * celle que « large » donnait déjà, 1024 px : les portraits s'affichent
 * exactement comme avant, les paysages gagnent la colonne entière.
 * Rien n'est recadré ; l'image se réduit entière.
 */
.article__image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 1024px;
  height: auto;
  margin-inline: auto;
}

/*
 * LE TEXTE SUR LA LARGEUR DE LA PAGE.
 *
 * « .editorial » borne le texte à la mesure de lecture — 68 signes.
 * Sur un article, le titre, l'image, la galerie et le carrousel partent
 * tous de la marge de page : une colonne de texte deux fois plus
 * étroite au milieu se lisait comme un décrochage, et c'est la
 * composition de la maquette qui tranche.
 *
 * Ce que cela coûte est réel et noté au registre : mesuré en Barlow 16,
 * la ligne passe de 90 signes à 176, là où le confort de lecture en
 * demande 80.
 * Rien dans le RGAA ne l'interdit — la mesure relève du critère AAA
 * 1.4.8 de WCAG — mais l'œil perd sa ligne au retour chariot.
 */
.article__texte { max-width: none; }

.pagination-article {
  margin-top: var(--e-m);
  font-variant-numeric: tabular-nums;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3xs);
  margin-top: var(--e-l);
  padding-top: var(--e-s);
  border-top: 1px solid var(--couleur-filet);
}

.tag {
  padding: 2px var(--e-2xs);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-bouton);
  color: var(--couleur-texte-doux);
  font-family: var(--police-label);
  font-size: var(--t-mini);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  text-decoration: none;
}

.tag:hover {
  border-color: var(--couleur-lien);
  color: var(--couleur-lien);
}

.suite__titre {
  margin-bottom: var(--e-s);
  font-size: var(--t-h3);
}

/* ---------------------------------------------------------------
 * Carte d'article
 * --------------------------------------------------------------- */

.carte__meta { margin: 0; }

.carte__extrait {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
}

/* ---------------------------------------------------------------
 * Pagination
 * --------------------------------------------------------------- */

.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3xs);
  margin-top: var(--e-l);
}

.page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;       /* cible tactile */
  padding-inline: var(--e-2xs);
  border: 1px solid var(--couleur-filet);
  color: var(--couleur-titre);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.page-numbers:hover { border-color: var(--couleur-titre); }

.page-numbers.current {
  background-color: var(--couleur-fond-inverse);
  border-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
}

.page-numbers.dots { border-color: transparent; }

/* ---------------------------------------------------------------
 * Page simple et 404
 * --------------------------------------------------------------- */

.page-simple__entete {
  padding-block: var(--e-xl) 0;
}

/*
 * Un hero en tête de contenu doit toucher l'en-tête, pour que le bloc
 * blanc du logo morde dessus. La réserve verticale de la section l'en
 * décollait de quarante à soixante-quinze pixels — c'est ce blanc qu'on
 * prenait pour un défaut du chevauchement.
 */
.page-simple__contenu > .slider:first-child {
  margin-top: calc(-1 * var(--e-section));
}

/* Le titre des pages qui n'ouvrent pas sur un bloc « Présentation » est
   le h1 sur lequel tout s'aligne : il prend le même retrait. */
.page-simple__titre {
  margin: 0 0 0 var(--retrait-composition);
  max-width: 26ch;
}

.erreur__pistes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-s);
  margin-top: var(--e-m);
  padding: 0;
  list-style: none;
}

/* Le formulaire de recherche natif de WordPress. */
.search-form {
  display: flex;
  gap: var(--e-2xs);
  margin-block: var(--e-s);
}

.search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--e-2xs) var(--e-xs);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-bouton);
}

.search-form input[type="submit"] {
  padding: var(--e-2xs) var(--e-m);
  border: 0;
  border-radius: var(--rayon-bouton);
  background-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * Page composée de blocs
 *
 * Contrairement à « editorial », qui borne le texte à la mesure de
 * lecture, ce conteneur laisse chaque bloc décider de sa largeur : une
 * thématique a besoin de ses deux colonnes, une grille de bulles de
 * toute la place. Les blocs qui portent du texte long, eux, se bornent
 * eux-mêmes.
 * --------------------------------------------------------------- */

/*
 * L'alignement de composition.
 *
 * La maquette ne cale pas la page sur la marge du conteneur mais sur le
 * début du titre h1 : les chevrons des blocs de titre débordent à
 * gauche de cette ligne, et tout le reste — encarts, grilles de fiches,
 * thématiques, séparateurs — commence dessus. D'où une seule réserve
 * posée ici, et un rattrapage négatif pour les trois blocs qui doivent
 * repartir du bord : les blocs qui portent un chevron dans la gouttière
 * — présentation de deuxième niveau, Actions, Rappel — et le bandeau
 * défilant, qui n'a pas à se décaler du tout.
 *
 * Sous la rupture, la gouttière disparaît : les chevrons rentrent dans
 * le flux de leur bloc, qui les gère déjà dans sa propre grille.
 */
.page-simple__contenu { padding-left: var(--retrait-composition); }

.page-simple__contenu > :is(.presentation--profond, .actions, .rappel) {
  margin-left: calc(-1 * var(--retrait-composition));
}

/*
 * Le bandeau défilant sort de TOUT, et pas seulement du retrait.
 *
 * Il figurait dans la liste ci-dessus, avec « qui n'a pas à se décaler
 * du tout » pour commentaire. L'intention était juste, le résultat non.
 * « margin-left » y est une déclaration à part entière : elle écrase la
 * moitié gauche du « margin-inline » que le bandeau pose sur lui-même
 * pour occuper la fenêtre. Il repartait donc du bord du CONTENEUR et
 * non du bord de la FENÊTRE — trois cent vingt-quatre pixels de blanc à
 * gauche, et autant qui débordaient à droite.
 *
 * Ce genre de collision ne se voit pas à la lecture : une règle plus
 * spécifique qui ne redéfinit qu'un côté d'un raccourci a l'air de
 * parler d'autre chose. Seule la valeur calculée le dit — margin-left
 * à -85px pendant que margin-right valait -373.5px.
 *
 * Et « calc(50% - 50vw) » seul ne suffirait pas ici. Il suppose que le
 * bloc parent est CENTRÉ dans la fenêtre, ce que
 * « .page-simple__contenu » n'est pas : il porte un retrait à gauche et
 * rien à droite, donc son centre est décalé d'une demi-largeur de
 * retrait, et tout ce qui s'en sert avec lui. Mesuré sur l'accueil :
 * 35 px au lieu de 0. D'où la demi-correction, qui ramène à -7,5 px.
 *
 * Ces sept pixels et demi de chaque côté sont la barre de défilement,
 * que « 100vw » compte et que « overflow-x: clip » sur la racine rogne.
 * C'est le compromis déjà assumé dans base.css, et il est symétrique —
 * donc invisible.
 */
.page-simple__contenu > .slider {
  margin-left: calc(50% - 50vw - var(--retrait-composition) / 2);
  margin-right: calc(50% - 50vw + var(--retrait-composition) / 2);
}

.page-simple__contenu > * + * { margin-top: var(--e-m); }

/*
 * Le dernier bloc ne garde pas sa marge basse.
 *
 * « .section » réserve --e-section en haut comme en bas. En haut, la
 * marge du premier bloc se fond dans celle de son voisin et rien ne
 * s'ajoute. En bas, la réserve de la section empêche la marge du
 * dernier bloc de sortir : les deux s'additionnent, et l'on obtient 150
 * sous le bloc pour 75 au-dessus. Relevé sur l'Inscription newsletter
 * le 24 septembre, mais le défaut n'était pas le sien — il est de tout
 * dernier bloc, quel qu'il soit. C'est donc la réserve de la section,
 * et elle seule, qui compte désormais.
 */
.page-simple__contenu > :last-child { margin-bottom: 0; }

/*
 * Une photo posée au milieu du contenu respire comme un bloc.
 *
 * Les blocs du thème portent --e-section de part et d'autre ; entre
 * deux voisins ordinaires, l'écart est de --e-m. Une image glissée
 * entre les deux héritait donc de 75 au-dessus, quand son voisin du
 * haut était un bloc, et de 24 en dessous. L'écart ne disait rien : il
 * ne dépendait que de ce qui l'entourait. Elle prend la marge des blocs,
 * et l'entourage ne décide plus.
 */
.page-simple__contenu > :is(figure, .wp-block-image, .wp-block-gallery) {
  margin-block: var(--e-section);
}

/*
 * LE TEXTE LIBRE PART DE LA MARGE ET VA JUSQU'À L'AUTRE.
 *
 * Il était borné à la mesure de lecture — 615 px dans une composition
 * qui en offre 1111 — et le décrochage se voyait : le titre, les
 * sections voisines et les filets allaient d'un bord à l'autre pendant
 * que le texte s'arrêtait au milieu. Même constat que sur la page d'un
 * article, et même arbitrage, le 4 novembre.
 *
 * Ce que cela coûte est le même, et c'est la réserve 9 du registre :
 * environ 160 signes par ligne au plus large, là où le confort de
 * lecture en demande 80. Vérifié avant de changer la règle : une seule
 * page du site portait du texte libre au moment de la bascule.
 */
.page-simple__contenu > :is(p, h2, h3, h4, ul, ol, blockquote) {
  max-width: none;
}

/* ---------------------------------------------------------------
 * Contenu libre — texte, image, galerie
 *
 * Trois dispositions pour ce qu'une composition en sections ne savait
 * pas porter : douze pages mêlaient des blocs natifs au fil de leur
 * composition, et une page en sections n'affiche plus son
 * « post_content ».
 *
 * Le texte libre n'a aucune règle ici, et c'est voulu : son gabarit
 * n'écrit pas de conteneur, donc ses paragraphes et ses titres sont
 * enfants directs du contenu, où les deux règles ci-dessus — mesure de
 * lecture, écart entre voisins — les prennent déjà en charge comme
 * elles prenaient les blocs natifs. L'image et la galerie, elles, sont
 * des « figure » : la réserve des blocs leur vient de la même façon.
 * --------------------------------------------------------------- */

.image-libre {
  width: var(--image-libre-largeur, 100%);
  margin-inline: auto;
}

.image-libre img {
  display: block;
  width: 100%;
  height: auto;
}

/* La légende d'un carrousel d'article est celle d'une galerie : même
   rôle, même dessin, une seule règle. */
.image-libre__legende,
.galerie__legende,
.carrousel__legende {
  margin-top: var(--e-2xs);
  max-width: var(--largeur-texte);
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
}

/*
 * Une colonne d'abord, puis deux, puis le nombre choisi : trois
 * vignettes côte à côte sur un téléphone ne montrent rien.
 */
.galerie__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .galerie__liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 700px) {
  .galerie__liste {
    grid-template-columns: repeat(var(--galerie-colonnes, 3), 1fr);
  }
}

/*
 * PAR DÉFAUT, L'IMAGE ENTIÈRE.
 *
 * La galerie native des pages reprises portait « is-cropped », et la
 * reprise avait suivi : format 3/2 et remplissage. Ce qui convient à
 * des photographies détruit des documents — les trois couvertures de
 * « Promotion du fair-play » sont en 362 × 513, du portrait, dont le
 * cadre 3/2 ne montrait plus que 47 % de la hauteur. Le bas de chaque
 * affiche était coupé, logo compris, et rien à l'écran ne disait qu'il
 * manquait quelque chose.
 *
 * Des hauteurs inégales font un peigne, c'est vrai — mais un peigne se
 * voit et se corrige, un rognage silencieux non. Le recadrage reste
 * donc disponible, en option du bloc.
 */
.galerie__element img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
 * La vignette, sa légende, et la loupe
 * --------------------------------------------------------------- */

.galerie__vignette {
  display: flex;
  flex-direction: column;
  gap: var(--e-3xs);
  margin: 0;
}

/*
 * Le lien d'agrandissement n'a pas de dessin à lui : il épouse l'image
 * et ne se signale qu'au survol et au focus. Le curseur dit le reste —
 * une loupe qui grossit, c'est le seul geste proposé.
 */
.galerie__agrandir {
  display: block;
  cursor: zoom-in;
}

.galerie__agrandir img { transition: opacity var(--transition); }
.galerie__agrandir:hover img { opacity: 0.85; }

.galerie__agrandir:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

.galerie__legende-image {
  margin: 0;
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
  line-height: 1.3;
}

/*
 * LA LOUPE.
 *
 * Un « dialog » natif : le fond est son « ::backdrop », le piège à
 * focus et la touche d'échappement viennent du navigateur. On ne pose
 * ici qu'une taille et un fond.
 */
.loupe {
  width: min(92vw, 70rem);
  max-width: none;
  max-height: 92vh;
  padding: var(--e-s);
  border: 0;
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
}

.loupe::backdrop { background-color: rgb(10 31 71 / 0.82); }

.loupe__cadre {
  display: flex;
  flex-direction: column;
  gap: var(--e-2xs);
  margin: 0;
}

.loupe__image {
  display: block;
  width: auto;
  max-width: 100%;
  /* La légende et la réserve doivent rester visibles sous l'image. */
  max-height: 74vh;
  margin-inline: auto;
  object-fit: contain;
}

.loupe__legende {
  margin: 0;
  text-align: center;
  font-size: var(--t-petit);
  color: var(--couleur-texte-doux);
}

/*
 * Le bouton de fermeture est une croix dessinée en deux traits : un
 * caractère « × » n'a pas la même taille d'une police à l'autre, et
 * serait lu par les technologies d'assistance en plus du libellé.
 */
.loupe__fermer {
  position: absolute;
  top: var(--e-2xs);
  right: var(--e-2xs);
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--couleur-titre);
  cursor: pointer;
}

.loupe__fermer::before,
.loupe__fermer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: currentcolor;
}

.loupe__fermer::before { rotate: 45deg; }
.loupe__fermer::after { rotate: -45deg; }

.loupe__fermer:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: calc(-1 * var(--focus-epaisseur));
}

.galerie--recadree .galerie__element img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}