/**
 * Les quatre motifs de page repris de la maquette Oxygen.
 *
 * Présentation, Thématique, Actions, Séparateur : à eux quatre ils
 * couvrent 300 des 425 sections du site. Toute leur couleur vient de la
 * rubrique de la page — aucune valeur n'est écrite ici.
 */

/* ---------------------------------------------------------------
 * Présentation de rubrique
 * --------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * Présentation de rubrique
 *
 * Deux colonnes sur les pages de rubrique : à gauche l'identité de la
 * page, à droite ce qu'elle raconte.
 * --------------------------------------------------------------- */

.presentation {
  display: grid;
  gap: var(--colonnes-gap);
  align-items: start;
}

/*
 * Les réserves du bloc sont mesurées depuis le filet du fil d'Ariane,
 * pas depuis le bord de la section : 52 px au-dessus, 75 en dessous.
 * La section, elle, pose sa propre réserve autour de son contenu —
 * elle s'ajouterait à celle-ci, d'où le rattrapage plus bas quand le
 * bloc ouvre la page.
 */
.presentation { margin-block: 52px 75px; }

.page-simple__contenu > .presentation:first-child {
  margin-top: calc(52px - var(--e-section));
}

/*
 * 35 / 65, gouttière de 40 px : mesures de la maquette. En « fr » et
 * non en pourcentages, pour que le partage porte sur ce qui reste une
 * fois la gouttière prise — deux colonnes de 35 % et 65 % plus 40 px
 * déborderaient de la largeur.
 *
 * Les deux colonnes ne tiennent qu'au-dessus de 992 px : en dessous, le
 * chapô se retrouvait dans une colonne trop étroite pour se lire.
 */
@media (min-width: 62.0625rem) {
  .presentation {
    grid-template-columns: 35fr 65fr;
    gap: 40px;
  }
}

/*
 * À 992 px et en dessous, l'entête et le corps s'empilent — et le corps
 * reprend au début du titre, pas au bord du bloc : le chevron garde sa
 * gouttière, et le texte qui suit s'aligne sur le texte qui l'annonce.
 * Le décalage est celui de la colonne du chevron, écrit une fois.
 */
@media (max-width: 62rem) {
  .presentation--profond .presentation__corps {
    margin-left: calc(var(--chevrons-largeur) + var(--chevrons-ecart));
  }
}

/* Le nom de la rubrique reste en marine ; c'est le titre de la page qui
   porte la couleur. L'inverse ferait du repère le sujet. */
.presentation__surtitre {
  margin: 0 0 var(--e-2xs);
  font-family: var(--police-titre);
  font-size: var(--t-h3);
  font-weight: var(--graisse-extra);
  line-height: var(--interligne-titre);
  text-transform: uppercase;
  color: var(--couleur-titre);
}

/*
 * Le titre de la rubrique, encadré de deux pastilles de 15 px espacées
 * de 15.
 *
 * La pastille d'ouverture est en débord et non simplement posée dans le
 * flux : « padding-left » écarte le titre de 30 px, « text-indent »
 * négatif ramène la première ligne dessus. Les deux s'annulent donc sur
 * la première ligne — la pastille commence au bord, le texte qui la
 * suit tombe à 30 — et les lignes suivantes gardent le retrait et
 * s'alignent sous ce texte. Posée simplement dans le flux, la pastille
 * aurait laissé les lignes suivantes revenir au bord.
 *
 * L'approche revient à sa valeur normale : les titres du thème sont
 * resserrés de 0,015 em, ce qui convient à des bas de casse et serre
 * des capitales.
 */
.presentation__titre {
  margin: 0;
  padding-left: 30px;
  text-indent: -30px;
  font-size: var(--t-rubrique);
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--couleur-rubrique-texte);
}

/*
 * La pastille encadre aussi le titre du carrousel de partenaires : même
 * motif, mêmes quinze pixels, même écart. Les deux titres sont déclarés
 * ensemble plutôt que recopiés, pour qu'une retouche du dessin ne
 * puisse pas n'en atteindre qu'un. La géométrie propre au carrousel —
 * corps, couleur, retrait — reste dans sa feuille.
 */
.presentation__titre::before,
.presentation__titre::after,
.carrousel__titre::before,
.carrousel__titre::after,
.organigramme__titre::before,
.organigramme__titre::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: var(--rayon-rond);
  background-color: currentcolor;
  vertical-align: middle;
}

.presentation__titre::before,
.carrousel__titre::before,
.organigramme__titre::before { margin-right: 15px; }

.presentation__titre::after,
.carrousel__titre::after,
.organigramme__titre::after  { margin-left: 15px; }

/*
 * LA GÉOMÉTRIE DU TITRE DE SECTION, DÉCLARÉE UNE FOIS.
 *
 * Le carrousel et l'organigramme portent le même titre : capitales,
 * corps de rubrique, marine, calé à gauche, encadré des deux pastilles.
 * Il était écrit dans la feuille du carrousel ; l'organigramme en
 * aurait fait une seconde copie, et la troisième aurait fini par
 * diverger. Il vit donc ici, avec le dessin des pastilles.
 *
 * Le marine, et non la couleur de rubrique : la maquette l'emploie sur
 * l'accueil, où la rubrique est pourtant le bleu. Ces titres nomment le
 * CDOS, pas la rubrique qui les héberge — c'est ce qui les distingue du
 * titre de présentation, juste au-dessus.
 *
 * Le retrait de 30 px avec première ligne ramenée de 30 est le même
 * mécanisme qu'à la présentation : la pastille part du bord, le texte
 * tombe à 30, et les lignes suivantes s'alignent sous ce texte au lieu
 * de revenir sous la pastille.
 */
.carrousel__titre,
.organigramme__titre {
  margin-bottom: var(--e-l);
  padding-left: 30px;
  text-indent: -30px;
  font-size: var(--t-rubrique);
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--couleur-titre);
  text-align: left;
}

/* ---------------------------------------------------------------
 * Deuxième niveau et en dessous
 *
 * La maquette change trois choses, et seulement trois : un triple
 * chevron remplace la pastille d'ouverture, le nom de la rubrique passe
 * devant le titre au même corps que lui, et les rôles de couleur
 * s'échangent — le repère en marine, le titre de la page en couleur de
 * rubrique. La grille, elle, ne bouge pas : 35 / 65 et 40 px, comme au
 * premier niveau. La production en ligne y met 39 / 61 et 20 px ; c'est
 * la maquette qui fait foi, l'écart est une dérive d'Oxygen.
 * --------------------------------------------------------------- */

/*
 * L'en-tête devient une grille à deux colonnes pour que le chevron
 * tienne à gauche du bloc entier — et non au-dessus, ni dans le flux du
 * texte, où il aurait suivi la césure du nom de rubrique.
 *
 * Le corps est déclaré ici, sur l'en-tête, et non seulement sur ses
 * enfants : les « em » du calage vertical du chevron parlent alors du
 * titre, et suivent son clamp sans qu'on ait à le répéter.
 */
.presentation--profond .presentation__entete {
  display: grid;
  grid-template-columns: var(--chevrons-largeur) minmax(0, 1fr);
  column-gap: var(--chevrons-ecart);
  font-size: var(--t-rubrique);
  line-height: 1.2;
}

.presentation--profond .presentation__surtitre,
.presentation--profond .presentation__titre { grid-column: 2; }

/* Le chevron tient la première ligne du bloc de titre. */
.presentation--profond .presentation__entete::before {
  grid-column: 1;
  grid-row: 1;
}

/*
 * Le nom de la rubrique prend le corps du titre : ce n'est plus un
 * surtitre discret mais la première moitié d'un même bloc de titre,
 * coupé par une pastille. Il reste un paragraphe et non un titre — le
 * plan du document n'a qu'un seul nom pour cette page, celui du h1.
 */
.presentation--profond .presentation__surtitre {
  margin: 0;
  font-size: 1em;
  font-weight: var(--graisse-forte);
  line-height: inherit;
  letter-spacing: normal;
  color: var(--couleur-titre);
}

/* La pastille ferme le nom de la rubrique au lieu d'ouvrir le titre :
   elle sépare les deux, et porte la couleur comme le titre qui suit. */
.presentation--profond .presentation__surtitre::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 15px;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-rubrique-texte);
  vertical-align: middle;
}

/*
 * Le titre perd ses deux pastilles et ses capitales : à ce niveau il
 * porte un intitulé de page, pas un nom de rubrique, et la maquette le
 * compose en bas de casse.
 */
.presentation--profond .presentation__titre {
  padding-left: 0;
  text-indent: 0;
  font-size: 1em;
  line-height: inherit;
  text-transform: none;
}

.presentation--profond .presentation__titre::before,
.presentation--profond .presentation__titre::after { content: none; }

/*
 * Le chapô était un h6 dans la maquette — un titre de niveau six pour
 * du texte d'introduction, ce qui faussait le plan du document.
 *
 * La famille est déclarée ici plutôt que laissée à l'héritage du
 * <body> : c'est ainsi que le fil d'Ariane et le pied la déclarent, et
 * un texte qui dit lui-même sa police ne dépend d'aucune feuille posée
 * plus tard dans la cascade.
 */
.presentation__chapo {
  margin: 0 0 var(--e-m);
  font-family: var(--police-texte);
  font-size: clamp(1.2rem, 1.149rem + 0.209vw, 1.4rem);
  font-weight: var(--graisse-normale);   /* 400 — relevé sur la production */
  line-height: 1.2;                      /* production : 26,88 / 22,4 */
  color: var(--couleur-rubrique-texte);
}

.presentation__texte {
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  font-weight: var(--graisse-normale);
}

.presentation__texte > :first-child { margin-top: 0; }
.presentation__texte > :last-child { margin-bottom: 0; }
.presentation__texte p + p { margin-top: var(--e-s); }

.presentation__suite { margin-top: var(--e-m); }

/* Le « Lire la suite » lui-même vit dans boutons.css : trois blocs s'en
   servent désormais — présentation, thématique et liste de fiches — et le
   dernier s'affiche sur des pages où cette feuille-ci n'est pas chargée. */

/* ---------------------------------------------------------------
 * Thématique
 *
 * Le bloc de titre est toujours à gauche ; ce qui change, c'est ce qui
 * l'accompagne. Les quatre dispositions se décrivent en zones de
 * grille : l'ordre du document ne bouge jamais, seule la carte change.
 * --------------------------------------------------------------- */

.thematique {
  display: grid;
  gap: var(--colonnes-gap);
  margin-block: var(--e-section);
}

@media (min-width: 48rem) {

  /* Titre et texte à gauche, illustration à droite. */
  .thematique--image-droite {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "entete media"
      "corps  media";
    align-content: start;
  }

  .thematique--image-gauche {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "media entete"
      "media corps";
    align-content: start;
  }

  /* Titre à gauche, texte à droite : deux colonnes de même largeur. */
  .thematique--texte-droite {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "entete corps";
    align-items: start;
  }

  /*
   * Titre et texte à gauche, la colonne de droite laissée vide. Une
   * illustration, si le bloc en porte une, vient sous le texte dans la
   * même colonne : la moitié droite reste vide, c'est ce que la
   * disposition promet.
   */
  .thematique--texte-gauche {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "entete ."
      "corps  ."
      "media  .";
    align-content: start;
  }

  /* Titre à gauche, texte en dessous sur deux colonnes. */
  .thematique--texte-colonnes {
    grid-template-areas:
      "entete"
      "corps";
  }

  .thematique--texte-colonnes .thematique__texte {
    columns: 2;
    column-gap: var(--colonnes-gap);
  }

  /* Une coupure de colonne au milieu d'un paragraphe se lit mal. */
  .thematique--texte-colonnes .thematique__texte p { break-inside: avoid; }

  .thematique__entete { grid-area: entete; }
  .thematique__corps  { grid-area: corps; }
  .thematique__media  { grid-area: media; align-self: center; }
}

/*
 * L'en-tête devient une grille : le chevron tient la colonne de gauche,
 * calé sur la première ligne — le titre, en marine — et non au-dessus du
 * bloc. Le corps déclaré ici sert au calage vertical du chevron ; les
 * deux lignes portent de toute façon le leur.
 */
.thematique__entete {
  display: grid;
  grid-template-columns: var(--chevrons-largeur) minmax(0, 1fr);
  column-gap: var(--chevrons-ecart);
  font-size: var(--t-h4);
}

/* Plus étroit que sur les titres de page : 40 px au lieu de 65. */
.thematique__entete { --chevrons-largeur: 40px; }

.thematique__entete::before { grid-column: 1; grid-row: 1; }
.thematique__titre,
.thematique__sous-titre { grid-column: 2; }

.thematique__titre {
  margin: 0 0 var(--e-3xs);
  font-size: var(--t-h4);
  text-transform: uppercase;
  color: var(--couleur-texte);
}

/*
 * Sous le titre, et non au-dessus : la maquette le place là. Et en bas
 * de casse, à l'inverse du titre — c'est le titre qui porte les
 * capitales dans ce bloc-ci.
 */
.thematique__sous-titre {
  margin: 0 0 var(--e-s);
  font-family: var(--police-titre);
  font-size: var(--t-h4);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  text-transform: none;
  color: var(--couleur-rubrique-texte);
}

.thematique__texte > :first-child { margin-top: 0; }
.thematique__texte > :last-child { margin-bottom: 0; }
.thematique__texte p + p { margin-top: var(--e-s); }

.thematique__suite { margin-top: var(--e-s); }

.thematique__corps .boutons { margin-top: var(--e-m); }

/*
 * L'illustration est centrée dans son emplacement : verticalement par
 * « align-self » sur la case de grille, horizontalement par les marges
 * automatiques de l'image. Le cadre garde la pleine largeur — c'est
 * l'image qui rétrécit — sans quoi il n'y aurait plus de place à
 * l'intérieur de laquelle se centrer.
 */
.thematique__media { margin: 0; }

.thematique__media img {
  display: block;
  width: var(--thematique-image-largeur, 100%);
  height: auto;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
 * L'encadré coloré de la Thématique
 *
 * Un intitulé en capitales, puis un aplat de rubrique où la première
 * ligne énonce et les suivantes mènent quelque part. Il vit dans le
 * corps du bloc et en prend donc la largeur : posé dans la disposition
 * « Titre à gauche, texte à droite », il occupe la colonne de droite,
 * ce qui est la maquette.
 * --------------------------------------------------------------- */

.encadre { margin-top: var(--e-m); }

/* Premier enfant du corps, il n'a rien à décoller. */
.thematique__corps > .encadre:first-child { margin-top: 0; }

.encadre__intitule {
  margin: 0 0 var(--e-2xs);
  font-family: var(--police-titre);
  font-size: 0.875rem;   /* 14 px */
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  text-transform: uppercase;
  color: var(--couleur-titre);
}

/*
 * Les quatre réserves sont celles de la maquette, et ne sont pas
 * égales : 20 à gauche, 24 à droite. Écrites dans l'ordre horaire.
 */
.encadre__cadre {
  padding: 18px 24px 18px 20px;
  background-color: var(--couleur-rubrique);
  color: var(--couleur-sur-bulle);
  font-size: 1.125rem;   /* 18 px */
  line-height: 1.3;
}

.encadre__intro {
  margin: 0;
  font-weight: var(--graisse-normale);
}

.encadre__liste {
  /*
   * Le chevron qui ouvre chaque ligne : sa hauteur est celle des
   * capitales du texte — les lignes sont en capitales, elles se calent
   * donc dessus — et sa largeur suit la proportion du dessin. En « em »,
   * il suivra le corps si celui-ci change un jour.
   */
  --encadre-chevron-hauteur: 0.72em;
  --encadre-chevron-largeur: calc(0.72em * 12.34 / 19.98);
  --encadre-chevron-ecart: 4px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.encadre__intro + .encadre__liste { margin-top: var(--e-2xs); }
.encadre__item + .encadre__item { margin-top: var(--e-3xs); }

/*
 * Le chevron est en débord, comme les pastilles des titres de page :
 * « padding-left » écarte la ligne de la largeur du dessin plus son
 * écart, « text-indent » négatif ramène la première ligne dessus. Les
 * deux s'annulent donc sur la première ligne, et un libellé qui passe à
 * la ligne s'aligne sous son propre texte et non sous le chevron.
 *
 * Il est porté par l'élément de liste et non par le lien : hors du lien,
 * il échappe au souligné, ne s'ajoute pas au nom accessible, et n'agrandit
 * pas la zone cliquable d'un ornement.
 */
.encadre__item {
  padding-left: calc(var(--encadre-chevron-largeur) + var(--encadre-chevron-ecart));
  text-indent: calc(-1 * (var(--encadre-chevron-largeur) + var(--encadre-chevron-ecart)));
}

.encadre__item::before {
  content: "";
  display: inline-block;
  width: var(--encadre-chevron-largeur);
  height: var(--encadre-chevron-hauteur);
  margin-right: var(--encadre-chevron-ecart);
  background-color: currentcolor;
  -webkit-mask-image: var(--chevron-simple-fichier);
  mask-image: var(--chevron-simple-fichier);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Lien ou non, la ligne a la même voix. */
.encadre__lien,
.encadre__texte {
  font-weight: var(--graisse-forte);
  text-transform: uppercase;
}

/*
 * Le souligné, lui, ne se met que sur ce qui mène quelque part : c'est
 * lui qui dit qu'on peut cliquer, il ne doit pas le dire à tort.
 *
 * La couleur est rappelée, et pas seulement héritée : « a:hover » du
 * socle pèse plus qu'une classe et virerait le libellé au bleu sur
 * l'aplat. Le même piège avait été tendu par les bulles.
 */
.encadre__lien {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.encadre__lien:hover,
.encadre__lien:focus-visible {
  color: inherit;
  text-decoration-thickness: 2px;
}

/* Sur l'aplat, un contour de focus de la couleur du thème disparaîtrait :
   il prend celle du texte, qui est lisible par construction. */
.encadre__lien:focus-visible {
  outline: var(--focus-epaisseur) solid currentcolor;
  outline-offset: var(--focus-decalage);
}

/* Le poids d'un PDF reste visible, mais discret. */
.encadre__precision {
  font-weight: var(--graisse-normale);
  text-transform: none;
}

/*
 * Sous 48 rem, l'en-tête ne bouge pas : le chevron garde sa colonne et
 * reste calé sur le surtitre, comme à toutes les largeurs. Ce qui
 * change, c'est le corps — il reprend au bord du bloc, donc au bord du
 * chevron, et non plus au début du titre. La gouttière de composition
 * ayant disparu à cette largeur, c'est là que commence tout le reste de
 * la page : le texte s'aligne sur ses voisins plutôt que sur son titre.
 * Relevé sur la production.
 */
@media (max-width: 62rem) {
  .presentation--profond .presentation__corps { margin-left: 0; }
}

/* ---------------------------------------------------------------
 * Actions — le titre et sa grille de pastilles
 * --------------------------------------------------------------- */

.actions { margin-block: var(--e-section); }

/*
 * L'en-tête : les chevrons à gauche, le bloc de titre, puis le grand bec.
 *
 * Les chevrons s'alignent sur la dernière ligne du titre, comme dans la
 * maquette — d'où « align-self: end » plutôt qu'un centrage qui les
 * ferait flotter au milieu d'un titre de deux lignes.
 */
/*
 * Trois colonnes : le chevron, l'intitulé, le bec. L'intitulé est en
 * « display: contents » pour que son surtitre et son titre soient des
 * cases de cette grille-ci : le chevron peut alors se caler sur la ligne
 * « Les actions » — la ligne marine — et non sur le bloc entier.
 *
 * La rangée du chevron est dite par une classe posée en PHP et non par
 * « :has() » : le gabarit sait déjà s'il a écrit un surtitre, autant
 * qu'il le dise.
 */
.actions__entete {
  display: grid;
  /*
   * Le bec se pose contre le bloc de titre et non contre le bord de la
   * page : c'est la deuxième colonne qui prend la largeur de son texte,
   * et la troisième qui absorbe le reste. L'inverse — un « 1fr » sur le
   * titre — poussait le bec à l'autre bout de l'écran.
   */
  grid-template-columns: var(--chevrons-largeur) minmax(0, auto) 1fr;
  grid-template-rows: auto;
  align-items: start;
  column-gap: var(--chevrons-ecart);
  margin-bottom: var(--e-xl);
  font-size: var(--t-h2);
}

/*
 * Les rangées sont déclarées, et pas seulement implicites : « grid-row:
 * 1 / -1 » sur le bec compte les lignes de la grille *explicite*. Sans
 * cette déclaration, -1 désigne la ligne 1, le bec ne couvre plus que la
 * première rangée et sa hauteur la fait enfler de 28 à 88 px — le
 * surtitre se retrouvait à 64 px du titre.
 */
.actions__entete--surtitre { grid-template-rows: auto auto; }

.actions__intitule { display: contents; }

.actions__surtitre,
.actions__titre { grid-column: 2; }

.actions__chevrons { grid-column: 1; grid-row: 1; }
.actions__entete--surtitre .actions__chevrons { grid-row: 2; }

/*
 * Le grand bec, en teinte claire de la rubrique : une même couleur, une
 * opacité réduite, plutôt qu'une seconde valeur à tenir dans la palette.
 *
 * Il occupe la troisième colonne sur toute la hauteur de l'en-tête,
 * sans quoi le placement automatique le rangerait sous le titre.
 */
.actions__bec {
  grid-column: 3;
  grid-row: 1 / -1;
  justify-self: start;
  /*
   * Sa hauteur est celle des lignes qu'il accompagne — surtitre et
   * titre réunis — et non une valeur fixe : « stretch » la lui donne,
   * « aspect-ratio » en déduit la largeur. Il suit donc le clamp du
   * titre sans qu'on ait à le répéter.
   */
  align-self: stretch;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  margin-left: var(--e-m);
  background-color: var(--couleur-rubrique);
  opacity: 0.3;
  -webkit-mask-image: var(--bec-fichier);
  mask-image: var(--bec-fichier);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* L'en-tête ne bouge pas non plus : seul le bec s'efface, faute de
   place pour l'accompagner. */
@media (max-width: 47.999rem) {
  .actions__bec { display: none; }
}

/*
 * Le surtitre suit le titre au lieu d'avoir son propre clamp : 26 px
 * quand « LES ACTIONS » atteint ses 35,2, et la même proportion à toutes
 * les largeurs intermédiaires. Deux clamps indépendants se seraient
 * croisés quelque part entre le téléphone et le grand écran.
 */
.actions__surtitre {
  margin: 0 0 var(--e-3xs);
  font-family: var(--police-titre);
  font-size: calc(var(--t-h2) * 26 / 35.2);
  font-weight: var(--graisse-extra);
  line-height: var(--interligne-titre);
  text-transform: uppercase;
  color: var(--couleur-rubrique-texte);
}

.actions__titre {
  margin: 0;
  font-size: var(--t-h2);
  text-transform: uppercase;
}

.actions__titre-second { display: block; }

/* La pastille ronde qui ferme le titre. */
.actions__point {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.4em;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-rubrique);
  vertical-align: 0.28em;
}

/*
 * Une seule rangée tant que la place le permet, puis deux par rangée,
 * puis une. Les ruptures sont écrites et non déduites d'un « auto-fit » :
 * le passage à deux doit se faire au même endroit qu'il y ait trois
 * bulles ou six, sans quoi la page change de rythme selon la rubrique.
 */
.actions__liste {
  display: grid;
  /*
   * Une colonne par bulle, quel qu'en soit le nombre : « auto-flow:
   * column » les pose toutes sur une rangée là où un « auto-fit »
   * repliait la cinquième dès que le compte tombait mal. La bulle garde
   * son diamètre maximal et se centre dans sa colonne.
   */
  grid-auto-flow: column;
  /*
   * Les bulles gardent leur diamètre et la rangée se centre, au lieu de
   * s'étaler sur toute la largeur : c'est la maquette. « minmax(0, …) »
   * laisse la colonne se comprimer quand la place manque, sans
   * débordement.
   */
  grid-auto-columns: minmax(0, 13rem);
  justify-content: center;
  gap: var(--colonnes-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  justify-items: center;
}

.actions__item { width: 100%; max-width: 13rem; }

@media (max-width: 992px) {

  .actions__liste {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * En nombre impair, la dernière bulle reste seule : elle prend les deux
   * colonnes et se centre dessus. « :last-child:nth-child(odd) » se lit
   * « la dernière, et à un rang impair » — ce qui n'arrive que si le
   * total est impair. Aucun compte à tenir en PHP.
   */
  .actions__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .actions__liste { grid-template-columns: minmax(0, 1fr); }
  .actions__item:last-child:nth-child(odd) { grid-column: auto; }
}

/*
 * La pastille : un cercle de la couleur de la rubrique. Sous Oxygen,
 * c'était un empilement de quatre PNG — fond rond, bec, picto et texte
 * par-dessus. Vingt-quatre fichiers image pour dessiner des cercles.
 */
.actions__pastille {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
   * Le bec, le texte et le « plus » se répartissent sur la hauteur. La
   * réserve est en pourcentage et non en rem : elle suit le diamètre de
   * la bulle, qui change avec la largeur de la colonne, là où une valeur
   * fixe aurait collé au bord sur une petite bulle et flotté sur une
   * grande.
   */
  justify-content: space-between;
  gap: var(--e-2xs);
  aspect-ratio: 1;
  padding: 12%;
  overflow: hidden;
  border: 0;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-bulle);
  color: var(--couleur-sur-bulle);
  font-family: var(--police-titre);
  font-size: 1.125rem;              /* 18 px */
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: box-shadow var(--transition);
}

/*
 * Le graphisme de fond, en masque et non en image.
 *
 * Une image, le document ne peut pas la colorier — ni en <img>, ni en
 * background-image. Un masque, si : le SVG devient un pochoir, seul son
 * opacité compte, et c'est background-color qui le peint. La couleur du
 * fichier n'a donc aucune importance, et les huit mêmes formes servent
 * les sept rubriques au lieu d'en demander huit par couleur.
 *
 * --forme est posée sur l'élément par le gabarit, d'après le rang de la
 * bulle.
 */
/*
 * La bulle des newsletters emploie le même graphisme, et il est déclaré
 * ici plutôt que recopié dans sa feuille : c'est un motif, et les
 * motifs vivent dans ce fichier. Elle n'a pas de bec — la maquette ne
 * lui en donne pas — donc rien à partager de ce côté.
 */
.actions__pastille::before,
.newsletters-recentes__pastille::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--couleur-bulle-accent);
  -webkit-mask-image: var(--forme);
  mask-image: var(--forme);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity var(--transition);
}

/*
 * Le bec, en haut de la bulle.
 *
 * Un second masque : le premier ne peut porter qu'une couleur, et
 * celui-ci se peint dans la teinte lisible sur la rubrique — blanc sur
 * le rouge et les bleus, marine sur le jaune et le vert.
 */
.actions__pastille::after {
  content: "";
  /*
   * Posé dans le flux et non plus en absolu : c'est ce qui lui permet
   * d'entrer dans la répartition. « order: -1 » le remonte en tête, ce
   * qu'un ::after ne peut pas faire autrement — et il ne déplace rien
   * pour un lecteur d'écran, qui ne voit pas les pseudo-éléments.
   */
  order: -1;
  flex: none;
  /*
   * Positionné et remonté d'un cran, sans quoi le graphisme de fond
   * passe devant.
   *
   * Le graphisme est un ::before en absolu : il peint au-dessus de tout
   * contenu resté dans le flux. « position: relative » seul ne suffit
   * pas ici — dans une boîte flexible, « order » ne réordonne pas que la
   * mise en page, il réordonne aussi la peinture, et l'ordre -1 qui
   * remonte le bec en tête le fait donc peindre AVANT le graphisme.
   * Un z-index explicite tranche la question dans les deux sens.
   */
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  background-color: var(--couleur-sur-bulle);
  -webkit-mask-image: var(--bec-fichier);
  mask-image: var(--bec-fichier);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Le contenu passe au-dessus du graphisme. */
.actions__libelle { position: relative; }

/*
 * Le « plus » de la charte, en masque : il prend la couleur du texte de
 * la bulle et s'assombrit avec elle au survol, sans second fichier.
 */
.actions__plus,
.newsletters-recentes__plus {
  flex: none;
  position: relative;
  width: 23px;
  height: 23px;
  background-color: currentcolor;
  -webkit-mask-image: var(--plus-fichier);
  mask-image: var(--plus-fichier);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
 * Le survol assombrit la bulle de 20 % sans rien changer d'autre :
 * ni couleur, ni taille, ni contour — la maquette n'en prévoit aucun.
 *
 * Une ombre intérieure d'une portée démesurée plutôt qu'une troisième
 * couche : les deux pseudo-éléments portent déjà le graphisme et le bec,
 * et une ombre suit le bord arrondi sans qu'on ait à le lui répéter.
 *
 * Le contour de focus, lui, reste. Il n'apparaît qu'au clavier, ne
 * change rien à ce que voit une personne à la souris, et sans lui on ne
 * saurait plus où l'on se trouve en tabulant.
 */
.actions__pastille:hover,
.actions__pastille:focus-visible {
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.2);

  /*
   * base.css donne une couleur de survol à tous les liens, avec une
   * spécificité supérieure à celle du composant. Sans ce rappel, le
   * libellé de la bulle virait au bleu sous la souris — les trois
   * éléments doivent rester blancs, quoi qu'il arrive.
   */
  color: var(--couleur-sur-bulle);
}

/*
 * L'ombre intérieure ne voile que le fond : le graphisme est un ::before
 * posé en absolu, donc peint au-dessus d'elle. « brightness(0,8) » lui
 * applique exactement le même assombrissement — un noir à 20 % sur une
 * couleur opaque, c'est cette couleur multipliée par 0,8.
 */
.actions__pastille:hover::before,
.actions__pastille:focus-visible::before {
  filter: brightness(0.8);
}

/*
 * Sans masque — Safari ancien, ou fichier de forme absent — la bulle
 * reste un aplat de couleur : elle perd sa décoration, jamais son sens.
 */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .actions__pastille::before { display: none; }
}

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

/* ---------------------------------------------------------------
 * Séparateur
 * --------------------------------------------------------------- */

.separateur {
  height: 0;
  margin-block: var(--e-section);
  border: 0;
  border-top: 1px solid var(--couleur-separateur);
}

.separateur--pointilles {
  border-top-style: dotted;
  border-top-width: 2px;
  border-top-color: var(--couleur-rubrique);
}

.separateur--rubrique { border-top-color: var(--couleur-rubrique); }

/* Sous prefers-contrast, un pointillé de rubrique reste visible là où un
   filet gris clair disparaît. */
@media (prefers-contrast: more) {
  .separateur { border-top-color: var(--couleur-texte); }
}

/*
 * Le séparateur prend la largeur de composition, quelle que soit la
 * largeur du bloc qui le précède : c'est lui qui marque le rythme de la
 * page, pas la colonne de lecture.
 */
.page-simple__contenu > .separateur { max-width: none; }