/**
 * Bloc « Rappel » — les trois cartes pleines Actualités / Agenda /
 * Événements, présentes sur toutes les pages sauf l'accueil.
 *
 * Aplat de couleur, texte blanc, bec débordant : c'est la maquette,
 * y compris son contraste. Le jeton --couleur-sur-bulle commande le
 * blanc, comme sur les bulles d'actions.
 */

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

/* ---------------------------------------------------------------
 * L'en-tête — exactement la composition du bloc Actions
 *
 * Le chevron tient la colonne de gauche, dans la gouttière de
 * composition, et se cale sur la ligne du titre et non sur le surtitre.
 * Le corps est déclaré sur l'en-tête pour que les deux lignes s'y
 * réfèrent.
 * --------------------------------------------------------------- */

.rappel__entete {
  display: grid;
  grid-template-columns: var(--chevrons-largeur) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  column-gap: var(--chevrons-ecart);
  margin-bottom: var(--e-xl);
  font-size: var(--t-h2);
}

.rappel__entete--surtitre { grid-template-rows: auto auto; }

/* « contents » pour que surtitre et titre soient des cases de cette
   grille-ci : le chevron peut alors se caler sur la ligne du titre. */
.rappel__intitule { display: contents; }

.rappel__surtitre,
.rappel__titre { grid-column: 2; }

.rappel__chevrons { grid-column: 1; grid-row: 1; }
.rappel__entete--surtitre .rappel__chevrons { grid-row: 2; }

/* Le chevron et les pastilles restent en marine : la couleur, ici, dit
   de quelle carte on parle — elle ne doit pas servir à autre chose. */
.rappel__chevrons { background-color: var(--couleur-titre); }

.rappel__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-titre);
}

.rappel__titre {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--interligne-titre);
  text-transform: uppercase;
}

/* Chaque mot porte la couleur de sa carte, prise au jeton de texte :
   c'est celui qui suivra la décision du registre RGAA. */
.rappel__mot { color: var(--couleur-rubrique-texte); }

.rappel__point {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-inline: var(--rappel-point-ecart, 0.28em);
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-titre);
  vertical-align: 0.2em;
}

/* La dernière pastille ferme la ligne : rien ne la suit. */
.rappel__paire:last-child .rappel__point { margin-right: 0; }

/* ---------------------------------------------------------------
 * Les cartes
 *
 * 31 % chacune, le reste réparti entre elles : trois colonnes de 31 et
 * deux gouttières de 3,5. Écrit en « space-between » plutôt qu'en
 * « gap », pour que la largeur relevée soit celle qui est écrite.
 * --------------------------------------------------------------- */

/*
 * Le bloc entier est reculé dans la gouttière pour y loger son chevron ;
 * les cartes, elles, repartent de la ligne de composition, comme tout
 * le reste de la page. D'où le retrait rendu ici, et lui seul.
 */
.rappel__liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 31%;
  justify-content: space-between;
  margin: 0 0 0 var(--retrait-composition);
  padding: 0;
  list-style: none;
}

.rappel__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 21px var(--e-s) 10px;
  background-color: var(--couleur-rubrique);
  color: var(--couleur-sur-bulle);
  text-align: center;
}

/* ---------------------------------------------------------------
 * Le bec, en SVG inline
 *
 * Un aplat blanc cerné d'un filet d'un pixel à la couleur de la carte.
 * Sur la carte, le filet est invisible — il a la couleur du fond ; il
 * ne se révèle que sur la part du bec qui déborde sur la page, et c'est
 * tout ce qu'on lui demande.
 *
 * « non-scaling-stroke » garde le filet à un pixel quelle que soit la
 * taille rendue : sans lui, un trait d'une unité sur un dessin de 30
 * porté à 68 px ferait 2,3 px.
 *
 * « overflow: visible » parce que le tracé touche les bords de son
 * cadre : la moitié extérieure du filet serait coupée.
 * --------------------------------------------------------------- */

.rappel__bec {
  position: absolute;
  z-index: 2;
  width: var(--rappel-bec-largeur, 68px);
  height: var(--rappel-bec-largeur, 68px);
  overflow: visible;

  /* Les quatre côtés sont écrits ; seuls deux sont donnés par carte. */
  top: var(--rappel-bec-haut, auto);
  right: var(--rappel-bec-droite, auto);
  bottom: var(--rappel-bec-bas, auto);
  left: var(--rappel-bec-gauche, auto);
}

.rappel__bec path {
  fill: var(--couleur-sur-bulle);
  stroke: var(--couleur-rubrique);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/*
 * Trois placements, relevés un par un sur la maquette. Ils tiennent au
 * rang de la carte et non à sa couleur : c'est une composition, pas une
 * règle de rubrique.
 */
.rappel__carte:nth-child(1) { --rappel-bec-gauche: 12px;  --rappel-bec-haut: -17px; }
.rappel__carte:nth-child(2) { --rappel-bec-gauche: 16px;  --rappel-bec-bas: 7px; }
.rappel__carte:nth-child(3) { --rappel-bec-droite: -12px; --rappel-bec-bas: 11px; }

/* ---------------------------------------------------------------
 * Le survol
 *
 * Même parti que les bulles d'actions : rien ne change de couleur, un
 * voile noir à 20 % passe sur la carte.
 *
 * Il ne couvre que l'aplat. Le bec est à cheval sur le bord de la carte
 * et le voile s'arrête à ce bord : l'assombrir laisserait une couture
 * nette au milieu du dessin, sa pointe claire et son corps gris. Il
 * passe donc devant, avec le texte, et garde son blanc franc.
 * --------------------------------------------------------------- */

.rappel__carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(0 0 0 / 0);
  pointer-events: none;
  transition: background-color var(--transition);
}

.rappel__carte:hover::before,
.rappel__carte:has(.rappel__lien:focus-visible)::before {
  background-color: rgb(0 0 0 / 0.2);
}

/*
 * La couleur est rappelée au survol : « a:hover » du socle pèse plus
 * qu'une classe et virerait le libellé au bleu sur l'aplat. C'est le
 * piège déjà rencontré sur les bulles, et il ne se voit pas sur une
 * capture — une capture ne survole rien.
 */
.rappel__lien:hover,
.rappel__lien:focus-visible { color: inherit; }

/* Le contenu passe devant le voile, et le lien étendu avec lui. */
.rappel__nom,
.rappel__plus {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------
 * Le texte et le bouton
 *
 * Les écarts sont ceux de la maquette : 7 px entre les deux lignes,
 * 13 px avant le bouton. Ils sont posés en marge et non en « gap » de
 * la boîte flexible, parce que les deux lignes appartiennent au même
 * lien et ne sont pas deux enfants de la carte.
 * --------------------------------------------------------------- */

.rappel__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.5rem;   /* 24 px */
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  text-transform: uppercase;
}

.rappel__lien {
  color: inherit;
  text-decoration: none;
}

/* L'accroche appartient au lien : « Actualités, je m'informe » se lit
   mieux, à la voix comme à l'œil, que deux fragments séparés. */
.rappel__accroche {
  display: block;
  margin-top: 7px;
  font-weight: var(--graisse-normale);
}

.rappel__plus {
  width: 35px;
  height: 35px;
  margin-top: 13px;
}

.rappel__plus :is(circle, path) { vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------
 * Focus et responsive
 * --------------------------------------------------------------- */

/* Le lien recouvre la carte : le contour de focus est donc porté par
   la carte, sinon il encadrerait le texte et non la zone activable. */
.rappel__lien:focus-visible { outline: none; }

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

@supports not selector(:has(*)) {
  .rappel__lien:focus-visible {
    outline: var(--focus-epaisseur) solid var(--couleur-focus);
    outline-offset: var(--focus-decalage);
  }
}

/* ---------------------------------------------------------------
 * Les deux ruptures
 *
 * 1210 px — la carte devient assez étroite pour que son texte, centré,
 * atteigne le bec. Les trois colonnes restent, mais les cartes
 * grandissent en hauteur et le groupe texte + bouton se centre entre
 * les becs. Empiler à cette largeur donnerait trois bandeaux
 * démesurés ; on gagne du vide, pas de la place.
 *
 * La hauteur n'est pas choisie à l'œil : c'est celle qui dégage le
 * groupe du bec le plus envahissant. Le bec du bloc vert monte à 79 px
 * du bas — 11 de marge plus 68 de dessin. Le groupe fait 113 px : deux
 * lignes de 24 à 1,2, les 7 et les 13 d'écart, les 35 du bouton. Et il
 * ne se centre pas tout à fait au milieu de la carte : les réserves
 * étant de 21 en haut et 10 en bas, il descend de 5,5. D'où une hauteur
 * minimale de 113 + 2 × 79 + 2 × 5,5, soit 282 — arrondie à 284.
 * --------------------------------------------------------------- */

@media (max-width: 75.625rem) {

  .rappel__carte {
    justify-content: center;
    min-height: var(--rappel-hauteur-serree, 284px);
  }
}

/*
 * 768 px — tout passe à la verticale : un nom par ligne dans le titre,
 * une carte par ligne en dessous, sur toute la largeur. Les cartes
 * reprennent leur hauteur de contenu : à pleine largeur, le texte
 * centré ne rencontre plus aucun bec.
 */
@media (max-width: 47.999rem) {

  .rappel__paire { display: block; }

  /*
   * La coupure de largeur nulle ne sert plus, puisque chaque paire est
   * un bloc — et elle nuit : restée seule entre deux blocs, elle forme
   * un contenu en ligne à elle seule, donc une ligne vide, et double
   * l'interligne du titre.
   */
  .rappel__titre wbr { display: none; }

  /*
   * Une carte par ligne, sur toute la largeur. « space-between » reste
   * posé plus haut : sur une colonne unique il laisserait la carte à sa
   * largeur de contenu au lieu de l'étirer, d'où le retour à « stretch »
   * et la colonne déclarée en « 1fr ».
   */
  .rappel__liste {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: var(--e-m);
  }

  .rappel__carte {
    justify-content: flex-start;
    min-height: 0;
  }
}