/* ============================================================
   CUISINOVORES : les articles de fond.
   Six articles, treize mille cinq cents mots. La typographie du
   texte long vient de cuisinovores-legal.css, chargée avant :
   il ne reste ici que ce qui leur est propre.
   ============================================================ */

/* Le texte d'un article suit les mêmes règles que celui d'une page légale :
   même longueur de ligne, mêmes titres, mêmes listes. On ne recopie pas, on
   étend le sélecteur. */
.cuisi-art__texte{color:var(--ink-2);font-size:var(--t-md);line-height:1.7}
.cuisi-art__texte h2{margin:var(--sp-8) 0 var(--sp-3);font-size:var(--t-2xl);
  color:var(--ink);line-height:1.15;scroll-margin-top:calc(var(--hdr) + var(--sp-4))}
.cuisi-art__texte h3{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--t-xl);
  color:var(--ink);line-height:1.2;scroll-margin-top:calc(var(--hdr) + var(--sp-4))}
.cuisi-art__texte h4{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--t-lg);
  color:var(--ink);font-weight:800}
.cuisi-art__texte > :first-child{margin-top:0}
.cuisi-art__texte p{margin:0 0 var(--sp-4)}
.cuisi-art__texte strong,.cuisi-art__texte b{color:var(--ink);font-weight:800}
.cuisi-art__texte a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;overflow-wrap:break-word}
.cuisi-art__texte ul,.cuisi-art__texte ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5)}
.cuisi-art__texte li{margin-bottom:var(--sp-2)}
.cuisi-art__texte ul{list-style:disc}
.cuisi-art__texte ol{list-style:decimal}

/* ---------- Les repères sous le titre ---------- */
.cuisi-art__reperes{margin:var(--sp-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-2);
  align-items:center;font-size:var(--t-s);color:rgba(244,242,238,.72)}

/* ---------- La photo d'ouverture ----------
   Le cadre porte le format, l'image le remplit : une image différée n'a pas
   encore de dimensions propres, et le bloc s'étirerait. */
.cuisi-art__photo{position:relative;display:block;overflow:hidden;margin:0 0 var(--sp-7);
  aspect-ratio:16/9;border-radius:var(--r-l);background:var(--card)}
.cuisi-art__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- La zone de lecture ----------
   Une colonne sur téléphone, deux dès qu'il y a la place : le sommaire d'un
   côté, le texte de l'autre. En une seule colonne, un article de six mille
   mots laissait la moitié droite de l'écran vide, et son sommaire de dix-huit
   entrées occupait un écran entier avant la première ligne de texte. */
.cuisi-art__zone > *{max-width:38rem}

/* ---------- Le sommaire ----------
   Fabriqué à partir des titres, il remplace le widget d'Elementor Pro. */
.cuisi-art__somm{margin:0 0 var(--sp-7);padding:var(--sp-5);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l)}
.cuisi-art__somm h2{margin:0 0 var(--sp-3);font-size:var(--t-s);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cuisi-art__somm ol{margin:0;padding:0;list-style:none;counter-reset:somm;
  display:grid;gap:2px}
.cuisi-art__somm li{counter-increment:somm}
.cuisi-art__somm a{display:flex;gap:var(--sp-3);align-items:baseline;
  min-height:var(--tap);padding:var(--sp-2) var(--sp-2);border-radius:var(--r-s);
  font-size:var(--t-s);line-height:1.4;color:var(--ink);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cuisi-art__somm a::before{content:counter(somm);flex:none;min-width:1.4em;
  font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.cuisi-art__somm a:hover,.cuisi-art__somm a:focus-visible{background:var(--accent-soft);
  color:var(--accent)}

/* ---------- Une illustration dans le texte ---------- */
.cuisi-art__ill{margin:var(--sp-6) 0}
.cuisi-art__ill img{width:100%;height:auto;border-radius:var(--r-m);display:block}
.cuisi-art__ill figcaption{margin-top:var(--sp-2);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.4}

/* ---------- Les questions fréquentes ----------
   Dépliées : un accordéon fermé se rate quand on parcourt, et les moteurs
   lisent plus volontiers ce qui est visible. */
.cuisi-art__faq{margin:var(--sp-6) 0;padding:var(--sp-5);
  background:var(--accent-soft);border-radius:var(--r-l)}
.cuisi-art__faq h3{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--t-base);
  color:var(--ink);font-weight:800}
.cuisi-art__faq > :first-child{margin-top:0}
.cuisi-art__faq p{margin:0 0 var(--sp-3)}
.cuisi-art__faq > :last-child{margin-bottom:0}

/* ---------- Le partage ----------
   Des liens, pas de widget : aucun réseau ne sait qu'on a ouvert la page
   tant qu'on n'a pas cliqué. */
.cuisi-art__partage{margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--line)}
.cuisi-art__partage h2{margin:0;font-size:var(--t-xl)}
.cuisi-art__partage p{margin:var(--sp-2) 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-s)}
.cuisi-art__partage ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cuisi-part{display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--sp-4);border-radius:var(--r-pill);font-size:var(--t-s);font-weight:800;
  color:var(--ink);background:var(--card);border:1px solid var(--line-2);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease)}
.cuisi-part:hover,.cuisi-part:focus-visible{border-color:var(--accent);color:var(--accent)}
.cuisi-part:active{transform:scale(.97)}

/* ---------- À lire ensuite ---------- */
.cuisi-art__suite{margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--line)}
.cuisi-art__suite h2{margin:0 0 var(--sp-4);font-size:var(--t-xl)}
.cuisi-art__suite ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.cuisi-art__suite a{display:flex;gap:var(--sp-4);align-items:center;
  padding:var(--sp-2);border-radius:var(--r-m);color:var(--ink);
  transition:background var(--dur-1) var(--ease)}
.cuisi-art__suite a:hover,.cuisi-art__suite a:focus-visible{background:var(--accent-soft)}
.cuisi-art__suite-img{position:relative;flex:none;width:84px;aspect-ratio:1/1;
  overflow:hidden;border-radius:var(--r-s);background:var(--card)}
.cuisi-art__suite-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cuisi-art__suite-txt{font-size:var(--t-s);font-weight:700;line-height:1.35}

/* ---------- Le bloc des recueils ----------
   Rendu en fin de lecture, jamais au milieu du texte : il vient d'un modèle
   partagé qu'Elementor plaçait dans une colonne latérale, et qui remontait en
   ouverture d'article une fois la mise en page aplatie. */
.cuisi-art__promo{margin-top:var(--sp-8)}

/* ---------- Tablette et bureau ---------- */
@media (min-width:768px){
  .cuisi-art__photo{aspect-ratio:21/9}
  .cuisi-art__somm{padding:var(--sp-6)}
  .cuisi-art__suite ul{grid-template-columns:1fr 1fr}
}

@media (min-width:1080px){
  /* Le sommaire prend la colonne de gauche et suit le défilement ; le texte
     garde sa largeur de lecture. La règle générale plafonne les enfants de la
     zone à 38 rem : ici c'est la grille qui décide, on la lève. */
  .cuisi-art__zone--somm{display:grid;gap:var(--sp-7);
    grid-template-columns:19rem minmax(0,38rem);align-items:start}
  .cuisi-art__zone--somm > *{max-width:none}

  .cuisi-art__zone--somm .cuisi-art__somm{position:sticky;
    top:calc(var(--hdr) + var(--sp-4));margin:0;
    max-height:calc(100vh - var(--hdr) - var(--sp-7));overflow-y:auto}
  /* Le sommaire de l'article sur la migraine compte dix-huit entrées : il
     défile dans son propre cadre plutôt que de dépasser de l'écran. */
  .cuisi-art__zone--somm .cuisi-art__somm a{font-size:var(--t-xs)}
}

/* Le clic sur une entrée du sommaire glisse jusqu'au titre au lieu d'y sauter.
   Le décalage est déjà posé par scroll-margin-top sur les titres, pour que
   l'en-tête collant ne les recouvre pas. */
@media (prefers-reduced-motion:no-preference){
  .cuisi-art{scroll-behavior:smooth}
  html:has(.cuisi-art){scroll-behavior:smooth}
}