/**
 * Bloc « Accès rapides ».
 *
 * Trois DISQUES côte à côte sur grand écran, empilés en dessous. La
 * couleur de chacun vient de sa classe de rubrique : rien n'est écrit
 * en dur ici, et changer la palette d'une rubrique change le disque du
 * même coup.
 *
 * Mesures relevées sur la maquette d'origine : trois disques de 300 px
 * pour des gouttières de 39, soit un bloc de 978 de large — 30,67 % et
 * 3,99 %. Dans le disque, le titre commence à 51 du haut (17 %) et le
 * bouton occupe 236 à 278, soit 78,7 % à 92,7 % de la hauteur. Les
 * corps viennent du client : 24, 20, 16 et 16 px.
 *
 * Le bloc était une carte blanche à filet supérieur, pictogramme noir
 * et lien fléché. Il n'en reste rien que le motif en filigrane — ce
 * n'est pas un réglage de l'ancien, c'est un autre dessin.
 */

.acces-rapides { margin-block: var(--e-xl); }

.acces-rapides__titre {
  margin-bottom: var(--e-m);
  padding-bottom: var(--e-2xs);
  border-bottom: 3px solid var(--couleur-rubrique);
}

/* auto-fit plutôt qu'un nombre de colonnes figé : trois encarts en
   donnent trois, quatre en donnent quatre, et la maquette ne casse
   pas si le client en ajoute un. */
/*
 * TROIS, PUIS DEUX, PUIS UN — ET TOUJOURS CENTRÉS.
 *
 * Une grille ne convenait pas : avec deux colonnes et trois disques, le
 * troisième se range à gauche de sa ligne et la rangée paraît
 * abandonnée. Une ligne flexible centrée le pose au milieu, ce qui est
 * la demande.
 *
 * Les largeurs viennent de la maquette — disque à 30,67 %, gouttière à
 * 3,99 %, et trois fois l'un plus deux fois l'autre font exactement
 * cent. À deux par ligne, 48 % et la même gouttière font de même.
 *
 * Les ruptures sont celles demandées : trois jusqu'à 1360 px, deux
 * jusqu'à 768, un en dessous.
 */
.acces-rapides__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /*
   * LA GOUTTIÈRE HORIZONTALE EN POURCENTAGE, LA VERTICALE EN LONGUEUR.
   *
   * Écrites ensemble — « gap: 3.99% » — les deux ne valaient pas la
   * même chose : un pourcentage d'écart entre LIGNES se mesure sur la
   * hauteur du conteneur, et une hauteur libre vaut zéro pour ce
   * calcul. L'écart latéral tenait donc, et le vertical tombait à
   * rien ; les disques se touchaient dès qu'ils passaient à la ligne.
   * Il n'y a pas de bon pourcentage ici : il fallait une longueur.
   *
   * Deux disques ne se touchent que par un point, et la pointe se
   * remarque plus que le vide : 2 rem suffisent à la séparer sans
   * ouvrir un couloir au milieu de la section.
   */
  column-gap: 3.99%;
  row-gap: var(--e-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * LE DISQUE.
 *
 * Les réserves sont relatives au diamètre, et portées par les enfants
 * (voir « cqw » plus bas) : 15 en haut posent la capitale du titre à
 * 51 px sur 300, 7 en bas laissent le bouton finir à 92,7 %, et les 13
 * de côté tiennent le texte à l'intérieur de la corde à la hauteur du
 * titre — un disque est plus étroit en haut qu'au milieu, et un retrait
 * constant suffit tant qu'il est calculé là où le disque est le plus
 * serré.
 *
 * Le titre est collé en haut et le bouton en bas ; ce qui est entre eux
 * se centre, par les deux marges automatiques. C'est ce que fait la
 * maquette : les trois disques ont leur titre à 51 et leur bouton à
 * 236, alors qu'ils portent trois, quatre et cinq lignes de texte.
 */
.acces-rapides__item {
  /* position: relative borne le lien étendu à son disque, et le
     graphisme de fond à ses limites. */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 30.67%;                      /* 300 sur 978 */

  /*
   * LES RÉSERVES NE PEUVENT PAS ÊTRE EN POURCENTAGE ICI.
   *
   * Un pourcentage de remplissage se calcule toujours sur la largeur du
   * BLOC CONTENEUR, et le bloc conteneur d'un élément flexible est la
   * ligne entière, pas lui-même. Les 13 % voulus donnaient donc 140 px
   * au lieu de 43, et le texte tombait en colonne d'un mot par ligne.
   * En grille, la même écriture marchait — le bloc conteneur y est la
   * case, qui a la largeur du disque. Deux dispositions, deux
   * références, pour une écriture identique : c'est le genre de
   * différence qu'on ne voit qu'en mesurant.
   *
   * Le disque devient donc un CONTENEUR de requête, et ses enfants se
   * mesurent en « cqw » — un pour cent de sa propre largeur. Ce que le
   * pourcentage ne pouvait pas dire, l'unité de conteneur le dit. Les
   * réserves passent du disque à ses enfants, en marges.
   */
  container-type: inline-size;

  /*
   * « isolation » et non un z-index : le filigrane est au rang -1, et
   * un rang négatif passe sous le FOND de son parent tant que ce parent
   * ne forme pas de contexte d'empilement. Le disque a bien « position:
   * relative », mais sans z-index il n'en crée pas — le motif
   * disparaissait donc entièrement derrière l'aplat. « isolate » en
   * crée un sans toucher à l'ordre des disques entre eux.
   *
   * Le conteneur de requête juste au-dessus en créerait un lui aussi.
   * On ne s'appuie pas dessus : il est là pour les unités, et si les
   * unités changent un jour, le filigrane ne doit pas tomber avec.
   */
  isolation: isolate;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--couleur-rubrique);
  color: var(--couleur-texte-inverse);
  text-align: center;
  transition: transform var(--transition);
}

/* Deux par ligne, le troisième centré sous eux. */
@media (max-width: 84.999rem) {
  .acces-rapides__item { flex-basis: 48%; }
}

/* Un par ligne, et pas sur toute la largeur : un cercle de onze cents
   pixels de diamètre n'est plus un ornement, c'est un mur. */
@media (max-width: 47.999rem) {
  .acces-rapides__item {
    flex-basis: 100%;
    max-width: 22rem;
  }
}

/*
 * Le graphisme de fond, en masque et non en image — même mécanique que
 * les bulles d'actions. Décoratif : il passe sous le contenu et ne
 * change rien à ce qui est lu.
 *
 * Il n'apparaît que si un fichier a été choisi : « --forme » est posée
 * sur l'encart par le gabarit, et sans elle la règle ne peint rien.
 */
.acces-rapides__item::before {
  content: "";
  position: absolute;
  inset: 0;

  /*
   * Sous le contenu, et non au-dessus avec le contenu remonté par
   * dessus. Le rang négatif le place entre le fond du disque et le
   * texte en flux, ce qui dispense de positionner les enfants — et
   * c'est leur positionnement qui cassait le lien étendu.
   */
  z-index: -1;

  /*
   * Blanc et non la couleur de rubrique : le motif est désormais SUR
   * l'aplat de cette couleur, et une teinte sur elle-même ne se voit
   * pas. Le blanc à 15 % en donne la version claire, exactement comme
   * la maquette le montre.
   */
  background-color: #fff;
  opacity: 0.15;
  -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;
  pointer-events: none;
}

/*
 * LA RÈGLE QUI CASSAIT LE LIEN ÉTENDU, RETIRÉE.
 *
 * Elle posait « position: relative » sur chaque enfant du disque, pour
 * les faire passer au-dessus du filigrane. Effet de bord : le titre
 * devenait le bloc conteneur du « ::after » que « .lien-etendu » étend
 * à « inset: 0 ». Cette surface ne couvrait donc plus le disque mais la
 * seule ligne du titre — le reste n'était pas cliquable, pendant que le
 * survol continuait de répondre puisqu'il est porté par le disque. Un
 * lien qui s'allume et ne s'ouvre pas.
 *
 * Le filigrane étant passé sous le flux, plus rien n'a besoin d'être
 * remonté, et le seul ancêtre positionné redevient le disque lui-même.
 */

/*
 * Le pictogramme en tête disparaît : la maquette n'en montre pas dans
 * le disque, le motif en filigrane jouant ce rôle. Il reste dans le
 * balisage, où il ne coûte rien — il est déjà décoratif et hors de
 * l'arbre d'accessibilité — pour le jour où une autre disposition le
 * remettrait à l'écran.
 */
.acces-rapides__icone { display: none; }

/* Le titre est collé en haut : la marge automatique pousse tout le
   reste vers le bas. */
/*
 * « color: inherit » n'est pas une précaution : base.css peint TOUS les
 * titres en « --couleur-titre », le marine. Sans cette ligne le titre
 * du disque restait sombre sur son aplat de couleur, alors que tout le
 * reste du contenu était blanc.
 *
 * La question du clic se règle ailleurs : voir le filigrane et la règle
 * retirée juste au-dessus.
 */

/*
 * Les 74 cqw sont les 100 du disque moins deux fois les 13 de réserve
 * latérale — le retrait calculé là où le disque est le plus serré, à
 * la hauteur du titre.
 */
.acces-rapides__item > * { width: 74cqw; }

.acces-rapides__nom {
  margin: 15cqw 0 auto;
  color: inherit;
  font-size: 1.5rem;                     /* 24 px */
  line-height: 1.2;
  text-transform: uppercase;
}

/* En phrase, et non en capitales espacées : c'est une question posée au
   visiteur — « Le savez-vous ? » — pas une étiquette de rubrique. */
.acces-rapides__surtitre {
  margin: 0;
  font-size: 1.25rem;                    /* 20 px */
  font-weight: var(--graisse-normale);
  line-height: 1.25;
  color: inherit;
}

.acces-rapides__lien {
  color: inherit;
  text-decoration: none;
}

/*
 * LE SURVOL : UN GRIS TRÈS CLAIR, ET NON UN GRIS MOYEN.
 *
 * Le titre passait au bleu de lien, invisible sur le disque bleu. Mais
 * un gris MOYEN serait pire : sur ces trois aplats, le blanc est déjà
 * l'encre la plus contrastée dont on dispose, et tout gris ne fait que
 * s'en éloigner. Mesuré :
 *
 *                    bleu    ambre   rouge
 *   blanc            4,19     1,84    4,05
 *   gris très clair  3,35     1,48    3,24
 *   gris moyen       1,47     1,55    1,42
 *
 * Un gris moyen rendrait donc le titre moins lisible que le bleu qu'on
 * cherche à corriger. On s'arrête au gris très clair : l'assombrissement
 * se voit, et le titre reste lisible. Le soulignement reste, car c'est
 * lui qui dit « lien » à ceux qui ne distinguent pas la nuance.
 */
.acces-rapides__lien:hover,
.acces-rapides__item:hover .acces-rapides__lien {
  color: #e6e6e6;
  text-decoration: underline;
}

/* Le lien étendu recouvre la carte : le contour de focus doit donc être
   dessiné par la carte, sinon il encadrerait le texte seul et le
   clavier ne verrait pas ce qui est réellement activable. */
.acces-rapides__lien:focus-visible { outline: none; }

/* Le liseré de focus est blanc : il est tracé sur l'aplat de rubrique,
   où la couleur de focus du thème se perdrait sur les teintes proches. */
.acces-rapides__item:has(.acces-rapides__lien:focus-visible) {
  outline: var(--focus-epaisseur) solid #fff;
  outline-offset: calc(-1 * var(--focus-epaisseur) * 2);
}

.acces-rapides__texte {
  margin: 0;
  max-width: none;
  font-size: 1rem;                       /* 16 px */
  line-height: 1.3;
  color: inherit;
}

/*
 * L'appel devient un bouton à filet, collé en bas du disque. Ce n'est
 * pas un lien : le vrai lien est sur le titre et recouvre le disque
 * entier. Il garde donc l'apparence d'un bouton sans en être un, ce
 * qui est exact — il n'y a bien qu'une seule cible ici.
 */
.acces-rapides__appel {
  width: auto;                           /* le bouton se règle sur son texte */
  margin: auto auto 7cqw;
  padding: 0.6rem 1.1rem;
  border: 1px solid currentcolor;
  font-size: 1rem;                       /* 16 px */
  line-height: 1.3;
  color: inherit;
}

/*
 * Au survol, le bouton se remplit au lieu que le disque se soulève :
 * une ombre portée sous un cercle de couleur pleine ne se lit pas, et
 * le déplacement vertical faisait vibrer les trois disques côte à côte.
 */
@media (hover: hover) {
  .acces-rapides__item:hover .acces-rapides__appel {
    background-color: #fff;
    color: var(--couleur-rubrique);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acces-rapides__item,
  .acces-rapides__appel { transition: none; }
}

/* Sans :has(), le contour de focus retombe sur le lien lui-même :
   moins précis, mais jamais absent. */
@supports not selector(:has(*)) {
  .acces-rapides__lien:focus-visible {
    outline: var(--focus-epaisseur) solid var(--couleur-focus);
    outline-offset: var(--focus-decalage);
  }
}