/* =====================================================================
   AFRO BUFFET — Styles communs (accueil + fiches recette)
   HTML = structure | CSS = mise en forme | JS = interactions
   ===================================================================== */

/* ---------- POLICES (locales woff2) ---------- */
@font-face{font-family:"Cherry Bomb One";src:url("../fonts/CherryBombOne-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url("../fonts/Fredoka-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url("../fonts/Fredoka-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url("../fonts/Fredoka-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- VARIABLES ---------- */
:root{
  --c-orange:#fe7f02; --c-rouge:#e51e29; --c-vert:#8db625; --c-jaune:#fdc42f;
  --c-rose:#e946a5;   --c-violet:#8645bf; --c-bleu:#01958a;
  --c-marron:#542d1e; --c-creme:#fff8e8; --c-blanc:#ffffff;
  --ink:#3a241a; --ink-soft:#6f5544;
  --font-title:"Cherry Bomb One", system-ui, sans-serif;
  --font-head:"Fredoka", system-ui, sans-serif;
  --font-body:"Poppins", system-ui, sans-serif;
  --wrap:1120px; --radius:18px; --radius-lg:26px;
  --shadow:0 8px 24px rgba(84,45,30,.10);
  --shadow-hover:0 14px 30px rgba(84,45,30,.18);
  --fam:#8db625; --fam-accent:#5f7d13; --fam-soft:rgba(141,182,37,.16);
}

/* ---------- COULEURS PAR FAMILLE ---------- */
.famille-accompagnements{--fam:#8db625;--fam-accent:#5f7d13;--fam-soft:rgba(141,182,37,.16)}
.famille-snacks{--fam:#8645bf;--fam-accent:#5f2f88;--fam-soft:rgba(134,69,191,.16)}
.famille-boissons{--fam:#fdc42f;--fam-accent:#c8940b;--fam-soft:rgba(253,196,47,.22)}
.famille-plats-mijotes{--fam:#fe7f02;--fam-accent:#c25e00;--fam-soft:rgba(254,127,2,.16)}
.famille-poissons{--fam:#01958a;--fam-accent:#016b63;--fam-soft:rgba(1,149,138,.16)}
.famille-desserts{--fam:#e946a5;--fam-accent:#b21f78;--fam-soft:rgba(233,70,165,.16)}
.famille-viandes{--fam:#e51e29;--fam-accent:#ab131c;--fam-soft:rgba(229,30,41,.16)}

/* ---------- PATTERNS DE FAMILLE (fond du hero fiche) ---------- */
.famille-accompagnements .recipe-hero{background-image:url(../patterns/pattern-accompagnements.svg)}
.famille-snacks .recipe-hero{background-image:url(../patterns/pattern-snacks.svg)}
.famille-boissons .recipe-hero{background-image:url(../patterns/pattern-boissons.svg)}
.famille-plats-mijotes .recipe-hero{background-image:url(../patterns/pattern-plats-mijotes.svg)}
.famille-poissons .recipe-hero{background-image:url(../patterns/pattern-poissons.svg)}
.famille-desserts .recipe-hero{background-image:url(../patterns/pattern-desserts.svg)}
.famille-viandes .recipe-hero{background-image:url(../patterns/pattern-viandes.svg)}

/* ---------- RESET LÉGER ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--c-creme);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--fam);outline-offset:2px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- ICÔNES (sprite <use>) ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;stroke:currentColor;flex:none}
.ic--lien-externe{width:.9em;height:.9em}

/* ---------- HEADER ---------- */
.site-header{background:var(--c-creme);border-bottom:1px solid rgba(84,45,30,.10)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.site-header__logo img{height:44px;width:auto}
.site-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.site-nav__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:600;text-decoration:none;color:var(--c-marron);padding:8px 14px;border-radius:999px;transition:background .2s,color .2s}
.site-nav__link:hover{background:var(--fam);color:#fff}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--c-marron);color:#fff;text-align:center;padding-block:18px;margin-top:20px}
.site-footer p{margin:0;font-size:.92rem}

/* =====================================================================
   ACCUEIL
   ===================================================================== */
.home-head{text-align:center;padding-block:34px 6px}
.home-head__title{font-family:var(--font-title);font-weight:400;color:var(--c-marron);font-size:clamp(2.4rem,7vw,4rem);margin:0;text-transform:uppercase;letter-spacing:1px}
.home-head__sub{font-style:italic;max-width:680px;margin:12px auto 0;color:var(--ink-soft)}
.home-families{padding-block:20px 44px}

.family{border-radius:22px;background:var(--fam);color:#fff;margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
.family__bar{width:100%;display:flex;align-items:center;gap:12px;padding:15px 22px;background:transparent;border:0;color:inherit;cursor:pointer;text-align:left}
.family__pm{width:1.15em;height:1.15em;stroke:currentColor;flex:none}
.family__name{font-family:var(--font-title);font-weight:400;font-size:clamp(1.15rem,3.4vw,1.6rem);text-transform:uppercase;letter-spacing:.5px}
.family__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s ease}
.family.is-collapsed .family__panel{grid-template-rows:0fr}
.family__panel-inner{overflow:hidden;min-height:0}
.family__grid{padding:6px 18px 20px}
.family__empty{padding:2px 22px 20px;font-family:var(--font-head);opacity:.9}

/* couleur claire (boissons/jaune) : texte foncé */
.family--boissons{color:var(--c-marron)}

/* ---------- CARTES ---------- */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--c-blanc);border-radius:var(--radius-lg);padding:16px 12px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card__img{width:104px;height:104px;border-radius:50%;object-fit:contain;background:var(--fam-soft);padding:6px}
.card__name{font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--c-marron);line-height:1.2}
.card__time{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;color:var(--ink-soft)}
.card__time .ic{width:1em;height:1em;color:var(--fam-accent)}
.card__cta{margin-top:2px;font-family:var(--font-head);font-weight:600;font-size:.82rem;color:#fff;background:var(--fam);padding:6px 14px;border-radius:999px}
.family--boissons .card__cta{color:var(--c-marron)}

/* =====================================================================
   FICHE RECETTE
   ===================================================================== */
.recipe-hero{background-size:cover;background-position:center;border-bottom:4px solid var(--fam)}
.recipe-hero__inner{display:flex;align-items:center;gap:36px;flex-wrap:wrap;padding-block:30px;min-height:230px}
.recipe-hero__media{flex:none;align-self:flex-end;line-height:0}
.recipe-hero__img{width:290px;height:290px;border-radius:50%;object-fit:contain;background:rgba(255,255,255,.6);padding:10px;filter:drop-shadow(0 12px 22px rgba(84,45,30,.28));margin-bottom:-46px;position:relative;z-index:2}
.recipe-hero__title{margin:0;flex:1;text-align:center}
.recipe-hero__title span{display:inline-block;font-family:var(--font-title);font-weight:400;font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.05;color:#fff;background:var(--fam-accent);padding:.16em .55em;border-radius:18px;box-shadow:var(--shadow);text-transform:uppercase;letter-spacing:.5px}

.recipe-body{padding-block:62px 48px}

/* bandeau durées */
.stat-band{list-style:none;margin:0 0 20px;padding:16px;background:var(--c-blanc);border-radius:var(--radius-lg);box-shadow:var(--shadow);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 6px;color:var(--c-marron)}
.stat + .stat{border-left:1px solid rgba(84,45,30,.10)}
.stat .ic{width:26px;height:26px;color:var(--fam-accent)}
.stat__value{font-family:var(--font-head);font-weight:600;font-size:1.02rem;color:var(--ink)}
.stat__label{font-size:.78rem;color:var(--ink-soft);line-height:1.25}

/* ligne méta */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 4px;border-block:1px solid rgba(84,45,30,.12);margin-bottom:22px}
.meta-row__info{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.meta-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:500;color:var(--c-marron)}
.meta-chip .ic{color:var(--fam-accent)}
.meta-row__actions{display:flex;gap:8px}
.action-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--font-head);font-weight:600;color:var(--c-marron);background:var(--c-blanc);border:1px solid rgba(84,45,30,.16);padding:8px 14px;border-radius:999px;transition:background .2s,color .2s,box-shadow .2s}
.action-btn:hover{background:var(--fam);color:#fff;box-shadow:var(--shadow)}

/* intro */
.recipe-intro{font-style:italic;font-size:1.08rem;text-align:center;max-width:760px;margin:0 auto 30px;color:var(--ink)}

/* blocs */
.block{margin-bottom:30px}
.block__title{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--c-marron);margin:0 0 14px;padding-bottom:8px;border-bottom:3px solid var(--fam)}
.block__title .ic{color:var(--fam-accent);width:1.2em;height:1.2em}

.ingredients{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ingredient{background:var(--c-blanc);border:1.5px solid rgba(84,45,30,.14);border-radius:999px;padding:9px 16px;font-weight:500;color:var(--ink);transition:background .18s,border-color .18s,color .18s,transform .18s}
.ingredient:hover,.ingredient:focus{background:var(--fam);border-color:var(--fam-accent);color:#fff;transform:translateY(-2px);outline:none}

.ustensiles{background:var(--c-blanc);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);margin:0}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step{background:var(--c-blanc);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-left:6px solid var(--fam)}
.step__num{display:inline-block;font-family:var(--font-head);font-weight:700;color:var(--fam-accent);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;margin-bottom:4px}
.step p{margin:0}

.anecdote{background:var(--fam);color:#fff;border-radius:var(--radius-lg);padding:22px 24px;margin:36px 0 30px;box-shadow:var(--shadow)}
.anecdote__title{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:#fff}
.anecdote__title .ic{color:#fff}
.anecdote p{margin:0}

/* famille boissons (jaune clair) : texte foncé pour lisibilité */
.famille-boissons .anecdote{color:var(--c-marron)}
.famille-boissons .anecdote__title,.famille-boissons .anecdote__title .ic{color:var(--c-marron)}
.famille-boissons .site-nav__link:hover,.famille-boissons .action-btn:hover,
.famille-boissons .ingredient:hover,.famille-boissons .ingredient:focus{color:var(--c-marron)}

/* voir aussi */
.see-also{margin-top:8px}
.see-also__title{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--c-marron);margin:0 0 16px}
.see-also .cards{grid-template-columns:repeat(4,1fr)}
.see-also .card__img{width:120px;height:120px}

/* recette alternative (repliable) */
.alt-recipe{margin-top:34px;border-top:1px solid rgba(84,45,30,.12);padding-top:14px}
.alt-recipe__summary{cursor:pointer;font-family:var(--font-head);font-weight:600;color:var(--ink-soft);list-style:none;display:inline-flex;align-items:center;gap:8px}
.alt-recipe__summary::before{content:"+";font-size:1.1em;color:var(--fam-accent)}
.alt-recipe[open] .alt-recipe__summary::before{content:"–"}
.alt-recipe__summary::-webkit-details-marker{display:none}
.alt-recipe__list{margin:12px 0 0;padding-left:18px;color:var(--ink-soft)}
.alt-recipe__list li{margin-bottom:6px}
.alt-recipe__list a{display:inline-flex;align-items:center;gap:6px;color:var(--fam-accent);text-decoration:none}
.alt-recipe__list a:hover{text-decoration:underline}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--c-marron);color:#fff;padding:12px 22px;border-radius:999px;font-family:var(--font-head);font-weight:600;box-shadow:var(--shadow-hover);opacity:0;transition:opacity .25s,transform .25s;z-index:50}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .see-also .cards{grid-template-columns:repeat(2,1fr)}
}

/* fiche : image centrée en haut, titre dessous (mobile) */
@media (max-width:720px){
  .recipe-hero__inner{flex-direction:column;justify-content:center;text-align:center;gap:14px;padding-block:24px;min-height:0}
  .recipe-hero__media{align-self:center}
  .recipe-hero__img{width:clamp(190px,58vw,240px);height:clamp(190px,58vw,240px);margin-bottom:0}
  .recipe-hero__title{flex:none}
  .recipe-body{padding-top:34px}
  .meta-row{justify-content:center}
}

/* mobile : cartes en carrousel avec peek + indice de swipe */
@media (max-width:640px){
  .cards,.see-also .cards{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:none;
  }
  .cards::-webkit-scrollbar,.see-also .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 76%;scroll-snap-align:center}
  .swipe-hint{display:flex}
}
.swipe-hint{display:none;align-items:center;justify-content:center;gap:8px;color:var(--ink-soft);font-size:.82rem;margin-top:2px}
.swipe-hint .ic{width:1.1em;height:1.1em}
.family--boissons .swipe-hint{color:var(--c-marron)}

@media (max-width:560px){
  .stat-band{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
  .stat + .stat{border-left:1px solid rgba(84,45,30,.10)}
  .stat:nth-child(odd){border-left:0}
}

/* réduction des animations */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}