/* ============================================================================
   AM — COMPOSANTS « RECETTE »  ·  am-recipe.css
   Chargée UNIQUEMENT sur les articles de la catégorie Recettes (387)
   via mu-plugin am-recipe.php (body.am-rf-article + has_category(387)).
   Porte les composants VALIDÉS de la maquette design (maquette-type-recette.html) :
     .am-photoph / .am-illus  ·  .am-recipe-head (+chips .am-chip)
     .am-recipe-cols (.am-ingredients / .am-steps)  ·  .am-shopcta  ·  .am-softcta
     .am-recipe-dl
   Les BOUTONS (.am-btn / .am-cta-group) et la FAQ (.am-faq__item) restent gérés
   par la feuille PARTAGÉE am-article.css : on NE les ré-implémente pas (règle d'or).
   Couleurs = charte SITE monochrome : anthracite #1a1a1a / near-black #0e0f11 + blanc.
   Zéro accent inventé. 100% réversible (retirer l'enqueue = retour gabarit article).
   Scopée .am-rf-article -> aucune fuite hors des articles ; les classes .am-recipe*
   n'existant que sur les posts recette, les autres articles ne sont pas impactés.
   ============================================================================ */

.am-rf-article #left-area .entry-content{
  --ink:#1a1a1a; --ink-body:#3a3f45; --muted:#6b7075; --faint:#8a9099;
  --hairline:#ececec; --surface-alt:#f4f5f6; --anthracite:#0e0f11;
  --r-radius:14px; --r-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* ============================================================
   PHOTO PLACEHOLDER (emplacement d'une VRAIE photo, étiqueté)
   ============================================================ */
.am-rf-article #left-area .entry-content .am-photoph{
  position:relative;border-radius:var(--r-radius);overflow:hidden;
  background:radial-gradient(120% 90% at 30% 15%, #2b2f33 0%, #17191c 55%, #0d0e10 100%);
  box-shadow:var(--r-shadow);display:grid;place-items:center;isolation:isolate;
}
.am-rf-article #left-area .entry-content .am-photoph::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px);
  mix-blend-mode:screen;
}
.am-rf-article #left-area .entry-content .am-photoph__lbl{position:relative;z-index:2;text-align:center;color:#e7e9ea;padding:10px 18px}
.am-rf-article #left-area .entry-content .am-photoph__lbl .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9aa0a6;margin-bottom:7px}
.am-rf-article #left-area .entry-content .am-photoph__lbl .t{font-size:14.5px;font-weight:600;color:#f3f4f5;letter-spacing:.01em}
.am-rf-article #left-area .entry-content .am-photoph__lbl .s{font-size:12px;color:#9aa0a6;margin-top:4px}
.am-rf-article #left-area .entry-content .am-photoph .wm{position:absolute;right:14px;bottom:12px;z-index:3;height:20px;opacity:.6;border-radius:0;box-shadow:none}
.am-rf-article #left-area .entry-content .am-photoph.ratio-16x9{aspect-ratio:16/9}
.am-rf-article #left-area .entry-content .am-photoph.ratio-4x3{aspect-ratio:4/3}
.am-rf-article #left-area .entry-content .am-photoph.ratio-21x9{aspect-ratio:21/9}
.am-rf-article #left-area .entry-content .am-photoph.ratio-1x1{aspect-ratio:1/1}

/* vignette média encadrée (repris du gabarit) */
.am-rf-article #left-area .entry-content figure.am-illus{
  margin:1.6em 0 1.9em;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-radius);
  box-shadow:var(--r-shadow);overflow:hidden;
}
.am-rf-article #left-area .entry-content figure.am-illus .am-photoph{border-radius:0;box-shadow:none}
.am-rf-article #left-area .entry-content figure.am-illus figcaption{
  padding:13px 18px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--hairline);margin:0;
}
.am-rf-article #left-area .entry-content figure.am-illus img.am-illus-img{
  display:block;width:100%;height:auto;margin:0;border-radius:0;box-shadow:none;
}
.am-rf-article #left-area .entry-content figure.am-recipe-featured{margin:.2em 0 1.4em}

/* ============================================================
   1) CARTE D'EN-TÊTE RECETTE  .am-recipe-head
   ============================================================ */
.am-rf-article #left-area .entry-content .am-recipe-head{
  position:relative;margin:1.6em 0 1.8em;padding:30px 34px;
  border:1px solid var(--hairline);border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.am-rf-article #left-area .entry-content .am-recipe-head__top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.am-rf-article #left-area .entry-content .am-recipe-head__eyebrow{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--faint);
  margin:0 0 10px;display:flex;align-items:center;gap:9px;
}
.am-rf-article #left-area .entry-content .am-recipe-head__eyebrow::before{content:"";width:22px;height:1px;background:var(--faint)}
.am-rf-article #left-area .entry-content .am-recipe-head h2.dish{
  font-size:26px;font-weight:800;letter-spacing:-.015em;line-height:1.18;color:var(--ink);margin:0 0 10px;text-wrap:balance;
}
.am-rf-article #left-area .entry-content .am-recipe-head .accroche{font-size:16px;line-height:1.55;color:var(--ink-body);margin:0;max-width:640px}
.am-rf-article #left-area .entry-content .am-recipe-head__badge{
  flex:0 0 auto;width:60px;height:60px;border-radius:15px;background:var(--anthracite);display:grid;place-items:center;
}
.am-rf-article #left-area .entry-content .am-recipe-head__badge svg{width:32px;height:32px;stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* méta-chips */
.am-rf-article #left-area .entry-content .am-recipe-meta{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--hairline);list-style:none;
}
.am-rf-article #left-area .entry-content .am-chip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--hairline);
  border-radius:11px;background:var(--surface-alt);margin:0;
}
.am-rf-article #left-area .entry-content .am-chip svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.am-rf-article #left-area .entry-content .am-chip .lab{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);line-height:1}
.am-rf-article #left-area .entry-content .am-chip .val{font-size:14px;font-weight:600;color:var(--ink);line-height:1.15;display:block;margin-top:2px}
.am-rf-article #left-area .entry-content .am-chip .stack{display:flex;flex-direction:column}

/* ============================================================
   3) INGRÉDIENTS + ÉTAPES (deux colonnes)  .am-recipe-cols
   ============================================================ */
.am-rf-article #left-area .entry-content .am-recipe-cols{
  display:grid;grid-template-columns:300px 1fr;gap:40px;margin:1.8em 0;align-items:start;
}
/* — ingrédients — */
.am-rf-article #left-area .entry-content .am-ingredients{
  border:1px solid var(--hairline);border-radius:16px;padding:24px 24px 20px;background:var(--surface-alt);position:sticky;top:20px;margin:0;
}
.am-rf-article #left-area .entry-content .am-ingredients h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:0 0 4px}
.am-rf-article #left-area .entry-content .am-ingredients .yield{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.am-rf-article #left-area .entry-content .am-ingredients .grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:16px 0 2px}
.am-rf-article #left-area .entry-content .am-ingredients ul{list-style:none;margin:0;padding:0}
.am-rf-article #left-area .entry-content .am-ingredients li{
  display:flex;gap:11px;align-items:baseline;font-size:14.5px;color:var(--ink-body);
  padding:9px 0;border-bottom:1px solid rgba(0,0,0,.055);line-height:1.4;margin:0;
}
.am-rf-article #left-area .entry-content .am-ingredients li:last-child{border-bottom:0}
.am-rf-article #left-area .entry-content .am-ingredients li::before,
.am-rf-article #left-area .entry-content .am-ingredients li::marker{content:none}
.am-rf-article #left-area .entry-content .am-ingredients li .dot{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--ink);transform:translateY(6px)}
.am-rf-article #left-area .entry-content .am-ingredients li b{color:var(--ink);font-weight:700}
.am-rf-article #left-area .entry-content .am-ingredients li .q{margin-left:auto;padding-left:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* — étapes numérotées — */
.am-rf-article #left-area .entry-content ol.am-steps{list-style:none;margin:0;padding:0;counter-reset:step}
.am-rf-article #left-area .entry-content ol.am-steps > li{position:relative;counter-increment:step;padding:0 0 22px 56px;min-height:40px;margin:0;line-height:inherit}
.am-rf-article #left-area .entry-content ol.am-steps > li::marker{content:none}
.am-rf-article #left-area .entry-content ol.am-steps > li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:11px;
  background:var(--anthracite);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.am-rf-article #left-area .entry-content ol.am-steps > li::after{content:"";position:absolute;left:18.5px;top:42px;bottom:6px;width:1px;background:var(--hairline)}
.am-rf-article #left-area .entry-content ol.am-steps > li:last-child{padding-bottom:0}
.am-rf-article #left-area .entry-content ol.am-steps > li:last-child::after{display:none}
.am-rf-article #left-area .entry-content ol.am-steps > li h4{font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 5px;letter-spacing:-.005em}
.am-rf-article #left-area .entry-content ol.am-steps > li p{font-size:14.5px;line-height:1.55;color:var(--ink-body);margin:0;max-width:none}

/* ============================================================
   4) CTA SHOP « L'appareil qui fait la différence »  .am-shopcta
   (boutons = .am-cta-group / .am-btn PARTAGÉS ; on gère juste le layout)
   ============================================================ */
.am-rf-article #left-area .entry-content .am-shopcta{
  display:grid;grid-template-columns:230px 1fr;gap:0;margin:2em 0;
  border:1px solid var(--hairline);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--r-shadow);
}
.am-rf-article #left-area .entry-content .am-shopcta__media{background:#fff;border-right:1px solid var(--hairline);position:relative;min-height:230px}
.am-rf-article #left-area .entry-content .am-shopcta__media .am-photoph{
  position:absolute;inset:0;border-radius:0;box-shadow:none;
  background:radial-gradient(120% 100% at 50% 20%,#fbfbfc 0%,#f1f2f3 100%);
}
.am-rf-article #left-area .entry-content .am-shopcta__media img.am-shopcta__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;box-shadow:none;
}
.am-rf-article #left-area .entry-content .am-shopcta__media .am-photoph__lbl .k{color:#9aa0a6}
.am-rf-article #left-area .entry-content .am-shopcta__media .am-photoph__lbl .t{color:#3a3f45}
.am-rf-article #left-area .entry-content .am-shopcta__media .am-photoph__lbl .s{color:#8a9099}
.am-rf-article #left-area .entry-content .am-shopcta__body{padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
.am-rf-article #left-area .entry-content .am-shopcta__eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--faint);margin:0 0 10px}
.am-rf-article #left-area .entry-content .am-shopcta h3{font-size:21px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.am-rf-article #left-area .entry-content .am-shopcta p{font-size:15px;line-height:1.55;color:var(--ink-body);margin:0 0 6px;max-width:460px}
.am-rf-article #left-area .entry-content .am-shopcta .price{font-size:15px;color:var(--ink);font-weight:700;margin:8px 0 4px}
.am-rf-article #left-area .entry-content .am-shopcta .price::before{content:"CHF";font-size:.7em;font-weight:400;color:#5f646b;margin-right:.35em;letter-spacing:.02em}
.am-rf-article #left-area .entry-content .am-shopcta .price .from{font-weight:400;color:var(--muted);font-size:.82em}
/* boutons du shop CTA : reprennent le groupe PARTAGÉ, marge resserrée dans la carte */
.am-rf-article #left-area .entry-content .am-shopcta .am-cta-group{margin:14px 0 0;max-width:340px}

/* — CTA secondaire léger (conservation)  .am-softcta — */
.am-rf-article #left-area .entry-content .am-softcta{
  display:flex;align-items:center;gap:16px;margin:1.8em 0;
  padding:16px 22px;border:1px solid var(--hairline);border-left:4px solid var(--ink);
  border-radius:0 var(--r-radius) var(--r-radius) 0;background:var(--surface-alt);
}
.am-rf-article #left-area .entry-content .am-softcta__ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--hairline);display:grid;place-items:center}
.am-rf-article #left-area .entry-content .am-softcta__ico svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.am-rf-article #left-area .entry-content .am-softcta__txt{flex:1 1 auto;font-size:14.5px;color:var(--ink-body);line-height:1.45}
.am-rf-article #left-area .entry-content .am-softcta__txt b{color:var(--ink)}
.am-rf-article #left-area .entry-content .am-softcta a{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.am-rf-article #left-area .entry-content .am-softcta a:hover{text-decoration:underline}
.am-rf-article #left-area .entry-content .am-softcta a svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* — BLOC « Télécharger la recette » (PDF imprimable)  .am-recipe-dl — */
.am-rf-article #left-area .entry-content .am-recipe-dl{
  display:flex;align-items:center;gap:20px;margin:2em 0;
  padding:22px 26px;border:1px solid var(--hairline);border-radius:16px;background:linear-gradient(180deg,#fff,#fafafb);
}
.am-rf-article #left-area .entry-content .am-recipe-dl__ico{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:var(--anthracite);display:grid;place-items:center}
.am-rf-article #left-area .entry-content .am-recipe-dl__ico svg{width:24px;height:24px;stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.am-rf-article #left-area .entry-content .am-recipe-dl__txt{flex:1 1 auto}
.am-rf-article #left-area .entry-content .am-recipe-dl__txt h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:0 0 3px}
.am-rf-article #left-area .entry-content .am-recipe-dl__txt p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45;max-width:none}
.am-rf-article #left-area .entry-content .am-recipe-dl a.am-btn{flex:0 0 auto;width:auto;display:inline-block}

/* — BARRE D'ACTIONS bas d'article (VERSION FINALE design) : 2 cartes empilées PLEINE
   LARGEUR de colonne, chacune = [ icône | texte flex:1 | actions à droite ]. Boutons
   PDF & Partager = jumeaux noirs (min-width:158px), bords droits alignés, zéro escalier.
   Boutons = .am-btn PARTAGÉ (am-article.css) : on ne redéclare QUE la barre + les chips. */
.am-rf-article #left-area .entry-content .am-recipe-actions{display:flex;flex-direction:column;gap:14px;margin:2em 0;max-width:none}
.am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl,
.am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-share{
  display:flex;align-items:center;gap:20px;margin:0;max-width:none;width:100%;
  padding:22px 26px;border:1px solid var(--hairline);border-radius:16px;background:linear-gradient(180deg,#fff,#fafafb);
}
.am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl__txt{flex:1 1 auto;min-width:0}
.am-rf-article #left-area .entry-content .am-recipe-share__actions{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.am-rf-article #left-area .entry-content .am-recipe-share__alt{display:flex;align-items:center;gap:8px}
.am-rf-article #left-area .entry-content .am-recipe-actions .am-btn{width:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.am-rf-article #left-area .entry-content .am-recipe-actions .am-btn--primary{min-width:158px}
/* am-article.css ne dimensionne pas .am-btn svg -> on borne les glyphes des boutons PDF/Partager */
.am-rf-article #left-area .entry-content .am-recipe-actions .am-btn svg{
  width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.am-rf-article #left-area .entry-content .am-share-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 15px;border-radius:10px;
  border:1.5px solid var(--hairline);background:#fff;color:var(--ink);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;font-family:inherit;line-height:1;white-space:nowrap;
  transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.am-rf-article #left-area .entry-content .am-share-chip svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.am-rf-article #left-area .entry-content .am-share-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-1px)}
.am-rf-article #left-area .entry-content .am-share-chip.is-copied{background:var(--ink);color:#fff;border-color:var(--ink)}
.am-rf-article #left-area .entry-content .am-recipe-share [hidden]{display:none}
/* ============================================================
   CORRECTIF MOBILE barre d'actions (<= 782px) — DESIGN §1 finitions-css.md
   2 cartes alignées à l'identique : entête puis actions pleine largeur.
   (déclarations DESIGN telles quelles ; sélecteurs scopés .am-rf-article
    #left-area .entry-content .am-recipe-actions pour battre la base ID-scopée)
   ============================================================ */
@media (max-width:782px){
  /* même gabarit pour les 2 cartes */
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl,
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-share{
    flex-wrap:wrap;
    align-items:flex-start;      /* icône alignée au titre, pas centrée sur le bloc */
    column-gap:16px;
    row-gap:18px;
    padding:20px;
  }
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl__ico{ width:44px; height:44px; border-radius:11px; }
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl__ico svg{ width:22px; height:22px; }
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl__txt{ flex:1 1 0; min-width:0; }   /* même x de texte dans les 2 cartes */

  /* la ZONE D'ACTIONS passe pleine largeur sous l'entête, flush aux bords de la carte */
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-dl .am-btn,          /* bouton PDF (carte Télécharger) */
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-share__actions{      /* bloc actions (carte Partager)  */
    flex:1 1 100%;
    width:100%;
    margin:0;
  }
  /* PDF / Partager homogènes : pleine largeur + même hauteur (min-height:44px du .am-btn) */
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-btn--primary{ min-width:0; width:100%; }

  /* carte Partager : Partager (jumeau du PDF) EN HAUT, chips en dessous */
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-share__actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-share__actions .am-btn--primary{ order:1; }
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-recipe-share__alt{
    order:2;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); /* 3 chips, wrap propre */
    gap:8px;
    width:100%;
  }
  .am-rf-article #left-area .entry-content .am-recipe-actions .am-share-chip{
    width:100%;
    min-height:42px;
    padding:9px 10px;            /* compact : 3 chips par rangée */
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .am-rf-article #left-area .entry-content .am-recipe-cols{grid-template-columns:1fr;gap:26px}
  .am-rf-article #left-area .entry-content .am-ingredients{position:static}
  .am-rf-article #left-area .entry-content .am-shopcta{grid-template-columns:1fr}
  .am-rf-article #left-area .entry-content .am-shopcta__media{border-right:0;border-bottom:1px solid var(--hairline);min-height:180px}
}
@media (max-width:600px){
  .am-rf-article #left-area .entry-content .am-recipe-head{padding:24px 22px}
  .am-rf-article #left-area .entry-content .am-recipe-head__top{flex-wrap:wrap-reverse;gap:14px}
  .am-rf-article #left-area .entry-content .am-recipe-dl{flex-wrap:wrap}
  .am-rf-article #left-area .entry-content .am-softcta{flex-wrap:wrap}
}

/* ============================================================
   MOBILE/TABLETTE (<=860px) — carte « L'appareil qui fait la différence »
   (.am-shopcta__media, composant PARTAGÉ des 3 recettes).
   Aligné sur le vrai point de bascule : la carte passe en colonne dès <=860px.
   En colonne, la bande paysage courte (min-height:180px) recadrait l'image
   ~1:1 (appareil-1x1.webp, 1200x1200) -> on ne voyait que le haut du four.
   Fix : media en RATIO 1:1 -> l'appareil s'affiche EN ENTIER, centré, sans crop.
   Couvre aussi l'iPad portrait (834px). Placé APRÈS le bloc <=860px pour battre
   son min-height:180px (même spécificité, source-order). Desktop (>860px) inchangé.
   ============================================================ */
@media (max-width:860px){
  .am-rf-article #left-area .entry-content .am-shopcta__media{
    min-height:0;            /* neutralise la bande courte 180px */
    aspect-ratio:1/1;        /* conteneur carré = image carrée entière */
    border-bottom:1px solid var(--hairline);
  }
  .am-rf-article #left-area .entry-content .am-shopcta__media img.am-shopcta__img{
    object-fit:cover;        /* 1:1 dans 1:1 = plein cadre, zéro rognage */
    object-position:center;
  }
}