/* ============================================================
   CUISINOVORES : les listes.
   Catégories, étiquettes, auteur, années, recherche, page 404.
   L'en-tête, le fil et la typographie viennent de
   cuisinovores-simple.css, chargée avant : il ne reste ici que la
   grille de vignettes, la pagination et la page 404.
   ============================================================ */

/* ---------- La grille ----------
   Deux colonnes sur téléphone, trois sur tablette, six sur grand écran :
   vingt-quatre résultats font alors quatre rangées pleines. */
.cuisi-tuiles{list-style:none;margin:var(--sp-6) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-3)}

.cuisi-liste .cuisi-tuile{display:block;text-decoration:none;color:var(--ink);
  transition:transform var(--dur-2) var(--ease)}
/* Le cadre porte le format, l'image le remplit : une vignette différée n'a
   pas encore de dimensions propres, et la carte s'étirerait au chargement. */
.cuisi-tuile__cadre{position:relative;display:block;overflow:hidden;
  aspect-ratio:1/1;border-radius:var(--r-m);background:var(--card)}
.cuisi-tuile__cadre img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 420ms var(--ease)}
.cuisi-tuile__titre{display:block;margin-top:var(--sp-2);
  font-size:var(--t-s);font-weight:800;line-height:1.3;letter-spacing:-.01em}

@media (hover:hover) and (pointer:fine){
  .cuisi-liste .cuisi-tuile:hover{transform:translateY(-3px)}
  .cuisi-liste .cuisi-tuile:hover img{transform:scale(1.05)}
  .cuisi-liste .cuisi-tuile:hover .cuisi-tuile__titre{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .cuisi-liste .cuisi-tuile,.cuisi-tuile__cadre img{transition:none}
  .cuisi-liste .cuisi-tuile:hover{transform:none}
  .cuisi-liste .cuisi-tuile:hover img{transform:none}
}

/* ---------- La pagination ----------
   Des liens, pas de script : la liste doit rester parcourable sans
   JavaScript, et les moteurs doivent pouvoir la suivre page après page.
   Chaque cible fait au moins la taille d'un pouce. */
.cuisi-pages{margin-top:var(--sp-7)}
.cuisi-pages ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}
.cuisi-pages a,.cuisi-pages span{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);padding:0 var(--sp-3);
  border-radius:var(--r-s);border:1px solid var(--line-2);
  font-size:var(--t-s);font-weight:700;color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cuisi-pages a:hover,.cuisi-pages a:focus-visible{border-color:var(--accent);color:var(--accent)}
.cuisi-pages .current{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.cuisi-pages .dots{border-color:transparent;color:var(--ink-3)}

/* ---------- Rien trouvé, et la sortie ---------- */
.cuisi-liste__vide{margin:var(--sp-7) 0 0;font-size:var(--t-md);color:var(--ink-2)}
/* Le passage vers le filtre, sous le titre de la liste. La personne arrive
   ici depuis un moteur, sur trois cent quarante recettes : lui faire dérouler
   quatorze pages avant de lui dire qu'elle peut croiser les critères n'aurait
   pas de sens. */
.cuisi-liste__filtre{margin:var(--sp-4) 0 0}

.cuisi-liste__sortie{margin:var(--sp-7) 0 0;text-align:center}

/* ---------- La page 404 ----------
   Elle ne se contente pas d'annoncer l'erreur : quelqu'un qui arrive ici
   cherchait quelque chose, et n'a aucune raison de repartir. */
.cuisi-chercher--perdu{margin-top:var(--sp-6);max-width:38rem}
.cuisi-perdu{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.cuisi-perdu a{display:block;padding:var(--sp-4) var(--sp-5);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m);
  text-decoration:none;color:var(--ink);
  transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.cuisi-perdu strong{display:block;font-size:var(--t-md);font-weight:800;letter-spacing:-.01em}
.cuisi-perdu span{display:block;margin-top:2px;font-size:var(--t-s);color:var(--ink-3)}
.cuisi-perdu a:hover,.cuisi-perdu a:focus-visible{border-color:var(--accent)}
.cuisi-perdu a:hover strong{color:var(--accent)}
.cuisi-perdu a:active{transform:scale(.995)}

@media (min-width:768px){
  .cuisi-tuiles{grid-template-columns:repeat(3,1fr);gap:var(--sp-5) var(--sp-4)}
  .cuisi-perdu{grid-template-columns:1fr 1fr}
}
@media (min-width:1240px){
  .cuisi-tuiles{grid-template-columns:repeat(6,1fr)}
}