/* AyoPlus Blog — la liste des articles.

   Trois portées : .ayo-vitrine pour la bannière pleine largeur, .ayo-liste pour
   la colonne de contenu, et les cartes qu'elles partagent. La feuille ne part
   que sur /blog, les catégories, les étiquettes et la recherche du blog ;
   l'en-tête et le pied de page d'Astra vivent dans la même page et n'ont rien
   demandé.

   La maquette est reprise dans sa structure et ses proportions, mais aux
   couleurs d'AyoPlus : les jetons de assets/ayo-tokens.css sont ceux du gabarit
   d'article, et --ayo-chaud y tient déjà le rôle de l'orange. Les emprunter
   ailleurs aurait fait jurer la liste avec l'article qu'elle ouvre.

   La maquette est dessinée à l'échelle d'une colonne de 600 px ; tout est ici
   remis à l'échelle d'une page de 1180 px, soit un facteur d'environ deux. */

.ayo-blog,
.ayo-blog *,
.ayo-blog *::before,
.ayo-blog *::after { box-sizing: border-box; }

/* Astra encadre son propre contenu : une largeur maximale, des marges
   intérieures et le fond gris de « ast-separate-container ». Le gabarit
   n'imprime plus ce contenu-là, mais la boîte qui l'entourait vient de
   header.php - elle reste en place, et la bannière ne toucherait jamais les
   bords sans la défaire.

   La seconde ligne du sélecteur n'est pas une redite : la largeur du conteneur
   vient du réglage « narrow » d'Astra, servi en CSS dynamique après cette
   feuille et à spécificité égale. La classe du body en ajoute une, ce qui
   tranche sans dépendre de l'ordre de chargement. */
body.ayo-blog-liste .site-content > .ast-container,
body.ayo-blog-liste.ast-narrow-container .site-content > .ast-container {
  max-width: none;
  padding: 0;
  /* Au-dessus de 922 px, ce conteneur est une boîte flexible en ligne. Le
     gabarit n'y pose qu'un enfant, mais astra_content_top() se déclenche à
     l'intérieur, avant lui : il suffirait qu'une extension y accroche quoi que
     ce soit pour qu'un seconde colonne apparaisse et que tout se partage la
     largeur. Le retour à la ligne rend ce voisinage sans conséquence. */
  flex-wrap: wrap;
}

body.ayo-blog-liste .site-content {
  background: #fff;
}

/* La largeur est reprise explicitement : le conteneur d'Astra est une boîte
   flexible, où un enfant se réduit à la largeur de son contenu. « flex » et
   « width » se couvrent l'un l'autre selon que le conteneur soit flexible ou
   non, sans qu'il faille parier sur la version d'Astra. */
body.ayo-blog-liste .ayo-blog {
  flex: 1 1 100%;
  width: 100%;
  /* Un élément flexible ne descend pas sous la largeur de son contenu tant que
     min-width vaut « auto » : une grille interne un peu large repousserait
     alors la page entière vers la droite. */
  min-width: 0;
}

/* La fonte de la maquette, avec de quoi tenir si Google ne répond pas. */
.ayo-vitrine,
.ayo-liste {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ayo-texte);
}

.ayo-vitrine__inner,
.ayo-liste {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Réservé aux lecteurs d'écran : Astra masque déjà sa propre classe, mais la
   règle est répétée ici pour ne pas dépendre de ses réglages. */
.ayo-hors-ecran {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* -- La bannière ---------------------------------------------------------- */

.ayo-vitrine {
  position: relative;
  padding: 52px 0 56px;
  border-bottom: 1px solid #eee;
  background: var(--ayo-fond-doux);
  overflow: hidden;
}

/* Les ronds dessinés en fond. Le conteneur est en z-index 0 et le contenu
   au-dessus : sans cela, un rond posé sur une carte en intercepterait le clic. */
.ayo-vitrine__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.ayo-vitrine__deco span {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #d9dddf;
  border-radius: 50%;
}

.ayo-vitrine__deco span:nth-child(1) { left: 3%;  top: 220px; }
.ayo-vitrine__deco span:nth-child(2) { left: 12%; top: 88px; }
.ayo-vitrine__deco span:nth-child(3) { left: 36%; top: 380px; }
.ayo-vitrine__deco span:nth-child(4) { left: 72%; top: 128px; }
.ayo-vitrine__deco span:nth-child(5) { right: 4%; top: 300px; }

.ayo-vitrine__inner {
  position: relative;
  z-index: 1;
}

.ayo-vedettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ayo-vedette {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 360px;
  padding: 30px 34px 34px;
  border-radius: 4px;
  background-color: var(--ayo-encre);
  color: #fff;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Ouvre un contexte d'empilement local : sans lui, l'image et le voile en
     z-index négatif passeraient derrière le fond de la carte, et derrière la
     page elle-même. */
  isolation: isolate;
  overflow: hidden;
}

.ayo-vedette__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: 110%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ayo-vedette:hover .ayo-vedette__image { transform: scale(1.03); }

/* Le voile. Un titre blanc sur une photo claire ne se lit pas ; il est plus
   dense en bas, là où le texte se pose, et s'efface vers le haut pour ne pas
   éteindre l'image. */
.ayo-vedette:not(.ayo-vedette--sans-image)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.62) 100%);
}

/* Sans image à la une, un aplat sombre nu laisserait le titre suspendu dans le
   vide : le dégradé de marque tient la place de la photo. */
.ayo-vedette--sans-image {
  background-image: linear-gradient(130deg, #1b2637 0%, #33415e 52%, #b4441a 128%);
}

/* Volontairement sans « position » : le lien étiré cherche son plus proche
   ancêtre positionné, et doit trouver la carte, pas ce bloc. Le voile étant en
   z-index négatif, le contenu passe déjà au-dessus sans y toucher. */
.ayo-vedette__contenu {
  max-width: 460px;
}

.ayo-vedette__titre {
  margin: 14px 0 8px;
  color: #fff;
  font-size: clamp(20px, 2.3vw, 29px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.ayo-vedette__date {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

/* -- Les cartes courtes --------------------------------------------------- */

.ayo-rapides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ayo-rapide {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 108px;
  padding: 15px;
  border: 1px solid #e7e7e7;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ayo-rapide:hover,
.ayo-rapide:focus-within {
  border-color: var(--ayo-chaud);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

/* La vignette garde sa place même sans image : le dégradé de marque évite le
   trou rond au milieu d'une rangée. */
.ayo-rapide__vignette {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #ffd9c2, #ffb4a4);
  overflow: hidden;
}

.ayo-rapide__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ayo-rapide__texte { min-width: 0; }

.ayo-rapide__titre {
  display: block;
  color: var(--ayo-encre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.ayo-rapide:hover .ayo-rapide__titre { color: var(--ayo-chaud); }

.ayo-rapide__date {
  display: block;
  margin-top: 6px;
  color: #999;
  font-size: 12.5px;
}

/* -- La pastille de catégorie --------------------------------------------- */

/* Au-dessus du lien étiré, pour garder sa propre destination. */
.ayo-pastille {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--ayo-chaud);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
}

.ayo-pastille:hover,
.ayo-pastille:focus {
  background: #d94f16;
  color: #fff;
}

/* -- Le lien étiré --------------------------------------------------------- */

/* Le lien est porté par le titre, mais sa zone cliquable couvre la carte
   entière : envelopper la carte dans un <a> aurait enfermé la pastille dans un
   second lien, ce qu'aucun navigateur ne sait rendre. */
.ayo-lien-etendu {
  color: inherit;
  text-decoration: none;
}

.ayo-lien-etendu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* -- La mise en page à deux colonnes -------------------------------------- */

.ayo-liste {
  padding-top: 54px;
  padding-bottom: 80px;
}

.ayo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}

.ayo-section-titre {
  margin: 0 0 26px;
  color: var(--ayo-encre);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
}

.ayo-section-chapeau {
  margin: -14px 0 26px;
  color: var(--ayo-doux);
  font-size: 15.5px;
  line-height: 1.65;
}

.ayo-section-chapeau p { margin: 0 0 10px; }
.ayo-section-chapeau > *:last-child { margin-bottom: 0; }

/* -- Une ligne de la liste ------------------------------------------------ */

.ayo-carte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 26px;
  margin-bottom: 26px;
  padding: 22px;
  border: 1px solid #e7e7e7;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ayo-carte:hover,
.ayo-carte:focus-within {
  transform: translateY(-2px);
  border-color: #ddd;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Sans « position » — même raison que .ayo-vedette__contenu : le lien étiré
   doit couvrir la carte, pas seulement ce bloc. */
.ayo-carte__contenu {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ayo-carte__titre {
  margin: 14px 0 10px;
  color: var(--ayo-encre);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.ayo-carte:hover .ayo-carte__titre,
.ayo-carte:focus-within .ayo-carte__titre { color: var(--ayo-chaud); }

/* Pousse la ligne de service en bas de la carte : deux extraits de longueurs
   différentes gardent malgré tout leurs liens alignés. */
.ayo-carte__extrait {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ayo-doux);
  font-size: 15px;
  line-height: 1.6;
}

.ayo-carte__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 0;
  color: #aaa;
  font-size: 13px;
}

.ayo-carte__lire {
  font-weight: 600;
  color: var(--ayo-doux);
}

.ayo-carte__lire::after {
  content: " ›";
  transition: padding-left 0.15s ease;
}

.ayo-carte:hover .ayo-carte__lire { color: var(--ayo-chaud); }
.ayo-carte:hover .ayo-carte__lire::after { padding-left: 4px; }

/* Le rapport de forme tient la liste alignée quelles que soient les images -
   sans lui, une vignette carrée et une panoramique décaleraient deux lignes
   voisines. Le dégradé est celui des vignettes du gabarit d'article : il reste
   visible quand l'article n'a pas d'image. */
.ayo-carte__vignette {
  align-self: start;
  aspect-ratio: 116 / 99;
  background-image: linear-gradient(135deg, #ffd9c2, #ffb4a4);
  overflow: hidden;
}

.ayo-carte__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- L'absence de résultat ------------------------------------------------ */

.ayo-vide {
  margin: 0;
  padding: 62px 20px;
  border: 1px dashed var(--ayo-ligne);
  color: var(--ayo-doux);
  font-size: 15.5px;
  text-align: center;
}

/* -- La pagination -------------------------------------------------------- */

.ayo-pagination { margin: 34px 0 0; }

.ayo-pagination .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.ayo-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.ayo-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: var(--ayo-doux);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ayo-pagination a.page-numbers:hover,
.ayo-pagination a.page-numbers:focus {
  border-color: var(--ayo-chaud);
  color: var(--ayo-chaud);
}

.ayo-pagination .page-numbers.current {
  background: #f6f6f6;
  color: #333;
  font-weight: 600;
}

/* Les points de suspension ne mènent nulle part : leur donner le cadre d'un
   bouton laisserait croire qu'on peut cliquer dessus. */
.ayo-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* -- La colonne de droite ------------------------------------------------- */

.ayo-colonne__titre {
  margin: 30px 0 12px;
  color: var(--ayo-encre);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ayo-colonne__titre:first-child { margin-top: 0; }

/* Le champ et son bouton se superposent : la loupe est posée dans la marge
   intérieure droite du champ, plutôt qu'à côté de lui. */
.ayo-recherche {
  position: relative;
  margin: 0;
}

.ayo-recherche__champ {
  width: 100%;
  padding: 11px 40px 11px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background: #fff;
  color: var(--ayo-texte);
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.5;
}

/* Chrome et Safari posent leur propre croix dans un champ « search ». Elle ne
   vide que la saisie, sans relancer quoi que ce soit : la laisser afficherait
   deux croix côte à côte pour deux gestes différents. */
.ayo-recherche__champ::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* La place n'est réservée que quand la croix est là : sans elle, ce creux se
   lirait comme un champ mal centré. */
.ayo-recherche--remplie .ayo-recherche__champ {
  padding-right: 66px;
}

.ayo-recherche__effacer {
  position: absolute;
  top: 50%;
  right: 32px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ayo-doux);
  text-decoration: none;
  transform: translateY(-50%);
  transition: background 0.15s ease, color 0.15s ease;
}

.ayo-recherche__effacer:hover,
.ayo-recherche__effacer:focus {
  background: #ececec;
  color: var(--ayo-encre);
}

.ayo-recherche__champ:focus {
  outline: none;
  border-color: var(--ayo-chaud);
  box-shadow: 0 0 0 3px rgba(246, 97, 35, 0.14);
}

.ayo-recherche__bouton {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ayo-doux);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.15s ease;
}

.ayo-recherche__bouton:hover,
.ayo-recherche__bouton:focus { color: var(--ayo-chaud); }

/* -- Les tuiles de catégorie ---------------------------------------------- */

.ayo-tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Carrée plutôt que d'une hauteur fixe : la colonne se rétrécit avec l'écran,
   et une hauteur en dur y aurait aplati les tuiles au fur et à mesure. */
.ayo-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--ayo-encre);
  background-image: linear-gradient(140deg, #2a3a55, #16202f);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
}

.ayo-tuile__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le voile est fixe : la tuile montre son nom et son décompte tels quels, sans
   rien qui dépende du survol. Une valeur qu'il faut aller chercher avec la
   souris n'existe pas pour qui lit au doigt ou au clavier. */
.ayo-tuile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.38);
}

.ayo-tuile__nom {
  padding: 8px 12px 6px 12px;
  border-radius: 999px;
  background: var(--ayo-chaud);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.ayo-tuile__compte {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* -- Les réseaux ---------------------------------------------------------- */

/* Trois colonnes égales, comme les tuiles au-dessus : les deux grilles se
   calent sur la même largeur, et la colonne garde une seule verticale. */
.ayo-reseaux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ayo-reseau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border: 1px solid var(--ayo-ligne);
  border-radius: 8px;
  background: #fff;
  color: var(--ayo-encre);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ayo-reseau__rond {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ayo-fond-doux);
  color: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.ayo-reseau__nom {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

/* Au survol, la pastille prend la couleur du réseau : c'est le seul repère qui
   distingue les trois cases d'un coup d'oeil, le reste de la carte restant
   volontairement neutre pour ne pas barioler la colonne. */
.ayo-reseau:hover,
.ayo-reseau:focus-visible {
  border-color: currentColor;
  box-shadow: 0 4px 14px rgba(22, 32, 47, 0.1);
  transform: translateY(-1px);
}

.ayo-reseau:hover .ayo-reseau__rond,
.ayo-reseau:focus-visible .ayo-reseau__rond {
  background: currentColor;
  color: #fff;
}

.ayo-reseau--facebook:hover,
.ayo-reseau--facebook:focus-visible { color: #1877f2; }

.ayo-reseau--instagram:hover,
.ayo-reseau--instagram:focus-visible { color: #c9358a; }

.ayo-reseau--tiktok:hover,
.ayo-reseau--tiktok:focus-visible { color: var(--ayo-encre); }

/* Le rond hérite du color du lien, et le glyphe doit repasser en blanc par
   dessus - sans quoi il disparaîtrait dans le fond qu'il vient de prendre. */
.ayo-reseau:hover .ayo-reseau__rond svg,
.ayo-reseau:focus-visible .ayo-reseau__rond svg { stroke: #fff; }

/* -- Instagram ------------------------------------------------------------ */

.ayo-instagram { font-size: 14px; }

.ayo-instagram__tete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.ayo-instagram__rond {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ayo-encre);
  border-radius: 50%;
  color: var(--ayo-encre);
}

.ayo-instagram__pseudo {
  color: var(--ayo-encre);
  font-size: 14px;
  font-weight: 700;
}

.ayo-instagram__suivre {
  display: inline-block;
  padding: 9px 15px;
  background: #20a9dc;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.ayo-instagram__suivre:hover,
.ayo-instagram__suivre:focus { background: #1892c1; color: #fff; }

/* -- Écrans moyens -------------------------------------------------------- */

/* La maquette masque la colonne latérale sous 760 px. Elle passe ici sous la
   liste plutôt que de disparaître : elle porte la recherche et les catégories,
   les deux seules façons de naviguer dans le blog une fois la bannière passée. */
@media (max-width: 980px) {
  .ayo-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .ayo-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* La colonne fait toute la largeur : trois cases étirées y auraient été
     démesurées à côté des tuiles. */
  .ayo-reseaux {
    grid-template-columns: repeat(3, minmax(0, 200px));
    justify-content: center;
  }

  .ayo-rapides { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Le troisième article n'a plus de voisine sur sa rangée : il la prend
     entière plutôt que de laisser un vide à sa droite. */
  .ayo-rapide:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* -- Écrans étroits ------------------------------------------------------- */

@media (max-width: 700px) {
  .ayo-vitrine { padding: 32px 0 34px; }

  .ayo-vitrine__inner,
  .ayo-liste { padding-left: 16px; padding-right: 16px; }

  .ayo-liste { padding-top: 34px; padding-bottom: 56px; }

  .ayo-vedettes { grid-template-columns: minmax(0, 1fr); }

  .ayo-vedette {
    min-height: 250px;
    padding: 22px;
  }

  .ayo-rapides { grid-template-columns: minmax(0, 1fr); }
  .ayo-rapide:last-child:nth-child(odd) { grid-column: auto; }

  .ayo-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ayo-carte {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 16px;
    padding: 16px;
  }

  .ayo-carte__titre { font-size: 17px; margin-top: 12px; }
  .ayo-carte__extrait { font-size: 14px; }

  .ayo-pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
  }
}