/* ============================================================
   CUISINOVORES : la page des articles de fond.
   Une liste de cartes, la première en grand. Tout le reste (tête de page,
   bandes, boutons, gouttière) vient de cuisinovores-simple.css et
   de cuisinovores-chrome.css : rien n'est redéfini ici.

   Les règles sont portées par « .cuisi-simple » : l'accueil possède
   déjà des classes .cuisi-article, dessinées pour un aperçu à deux
   colonnes. Les deux feuilles ne se croisent jamais aujourd'hui,
   mais le préfixe garantit que la mise en avant d'ici ne partira
   pas contaminer la mosaïque de l'accueil.
   ============================================================ */

/* ---------- La grille ---------- */
.cuisi-simple .cuisi-articles{display:grid;gap:var(--sp-6)}

/* ---------- Une carte ---------- */
.cuisi-simple .cuisi-article{display:block;color:var(--ink);
  transition:transform var(--dur-2) var(--ease)}

/* Le cadre porte le format, l'image le remplit. Poser la hauteur sur la
   balise image elle-même n'est pas une option : une vignette différée n'a
   pas encore de dimensions, et le bloc s'étire alors sur des milliers de
   pixels le temps du chargement. */
.cuisi-simple .cuisi-article__cadre{position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;border-radius:var(--r-m);background:var(--accent-soft);
  box-shadow:var(--shadow-1)}
.cuisi-simple .cuisi-article__cadre img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}

.cuisi-simple .cuisi-article__txt{margin-top:var(--sp-3)}
.cuisi-simple .cuisi-article h2{font-size:var(--t-lg);line-height:1.16;
  letter-spacing:-.03em;color:var(--ink);
  transition:color var(--dur-1) var(--ease)}
.cuisi-simple .cuisi-article__sous{margin:var(--sp-2) 0 0;color:var(--ink-2);
  font-size:var(--t-s);max-width:44ch}
.cuisi-simple .cuisi-article__all{display:inline-block;margin-top:var(--sp-3);
  font-size:var(--t-s);font-weight:800;color:var(--accent)}

/* ---------- Le premier, mis en avant ----------
   Il ne porte pas .cuisi-reveal, contrairement aux cinq autres : c'est lui
   que le navigateur mesure pour juger de la vitesse d'affichage, et le faire
   naître à l'opacité zéro retarde ce repère sans rien apporter à l'œil. */
.cuisi-simple .cuisi-article--une{padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--line)}
/* 4/3 et non 16/9 : les vignettes de ces articles sont des illustrations
   carrées de 500 pixels de côté. Plus le cadre s'allonge, plus le recadrage
   mange le dessin ; 4/3 est le compromis qui garde l'illustration lisible
   tout en donnant à la carte sa largeur d'ouverture. */
.cuisi-simple .cuisi-article--une .cuisi-article__cadre{aspect-ratio:4/3;
  border-radius:var(--r-l);box-shadow:var(--shadow-2)}
.cuisi-simple .cuisi-article--une h2{font-size:var(--t-2xl);letter-spacing:-.035em}
.cuisi-simple .cuisi-article--une .cuisi-article__sous{font-size:var(--t-md);max-width:52ch}
/* La raison de la mise en avant, écrite. Sans elle, le premier article
   paraissait choisi sans motif. */
.cuisi-simple .cuisi-article__dernier{display:inline-flex;align-items:center;
  gap:var(--sp-2);margin:0 0 var(--sp-2);padding:4px var(--sp-3);
  background:var(--accent-soft);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- Survol ----------
   Réservé aux pointeurs fins : sur écran tactile, un survol simulé laisse la
   carte figée dans son état levé après le tapotement. */
@media (hover:hover) and (pointer:fine){
  .cuisi-simple .cuisi-article:hover{transform:translateY(-3px);color:var(--ink)}
  .cuisi-simple .cuisi-article:hover h2{color:var(--accent)}
  .cuisi-simple .cuisi-article:hover .cuisi-arw{transform:translateX(4px)}
  /* La carte mise en avant garde ses pieds au sol : elle est posée sur un
     filet, et le décoller ferait bouger la séparation avec la suite. */
  .cuisi-simple .cuisi-article--une:hover{transform:none}
}

/* ---------- Tablette ---------- */
@media (min-width:768px){
  .cuisi-simple .cuisi-articles{grid-template-columns:1fr 1fr;
    gap:var(--sp-6) var(--sp-5)}
  /* La mise en avant traverse la grille et passe en deux colonnes : à cette
     largeur, une image pleine largeur pousserait le titre sous la ligne de
     flottaison. */
  .cuisi-simple .cuisi-article--une{grid-column:1 / -1;
    display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-5);
    align-items:center;margin-bottom:var(--sp-2)}
  .cuisi-simple .cuisi-article--une .cuisi-article__txt{margin-top:0}
}

/* ---------- Bureau ---------- */
@media (min-width:1024px){
  .cuisi-simple .cuisi-articles{grid-template-columns:repeat(3,1fr);
    gap:var(--sp-7) var(--sp-5)}
  .cuisi-simple .cuisi-article--une{grid-template-columns:1.25fr 1fr;
    gap:var(--sp-7);padding-bottom:var(--sp-7)}
  /* La règle générale passe avant la mise en avant : à spécificité égale,
     c'est la dernière déclarée qui l'emporte, et l'ordre inverse ramenait le
     grand titre à la taille des petits. */
  .cuisi-simple .cuisi-article h2{font-size:var(--t-xl)}
  .cuisi-simple .cuisi-article--une h2{font-size:var(--t-3xl)}
}