/* ============================================================
   Double Impact — Layout & composants
   Mobile-first. Registre éditorial : alternance encre/papier
   (« dialoguer les contraires »), filets fins, marges larges.
   ============================================================ */

/* — Conteneurs — */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--read{ max-width:var(--maxw-read); }
.section{ padding-block:var(--sp-6); }
@media (min-width:768px){ .section{ padding-block:var(--sp-7); } }

/* Inversion de section = motif central de la DA */
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink .kicker{ color:var(--paper-45); }
.section--paper .kicker{ color:var(--ink-55); }

/* Marqueur de chapitre (numéro romain, esprit livre) */
.chapter-mark{
  font-family:var(--font-display); font-style:italic;
  font-size:var(--fs-lg); opacity:.5; margin-bottom:var(--sp-2);
}

/* ============================================================
   Logo (wordmark) — coloré via mask = currentColor du contexte
   Le SVG (img/logo-vertical.svg) est traité comme une forme :
   sa couleur suit color, donc papier sur fond sombre, encre sinon.
   ============================================================ */
.logo{
  display:block; aspect-ratio:1344/265; background-color:currentColor;
  -webkit-mask:url("../img/logo-vertical.svg") no-repeat center/contain;
          mask:url("../img/logo-vertical.svg") no-repeat center/contain;
}

/* ============================================================
   En-tête
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
  color:var(--paper);                 /* par défaut au-dessus du hero sombre */
}
.site-header.is-scrolled{
  background:var(--paper); color:var(--ink);
  border-bottom-color:var(--hairline);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.brand-link{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:var(--fs-lg); letter-spacing:.02em; }
.brand-link .logo{ height:.95rem; }

/* Sélecteur de langue (toujours visible, mobile inclus) */
.lang{ display:flex; gap:.55rem; align-items:center; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; }
.lang a{ opacity:.5; transition:opacity var(--dur-fast) var(--ease); }
.lang a:hover, .lang a:focus-visible{ opacity:1; }
.lang a[aria-current="page"]{ opacity:1; font-weight:600; }
.header-right{ display:flex; align-items:center; gap:var(--sp-3); }

.nav{ display:none; }
@media (min-width:880px){
  .nav{ display:flex; align-items:center; gap:var(--sp-4); }
  .nav a{ font-size:var(--fs-sm); font-weight:400; position:relative; padding-block:.25rem; }
  .nav a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:currentColor; transition:width var(--dur) var(--ease);
  }
  .nav a:hover::after, .nav a:focus-visible::after{ width:100%; }
}

/* ============================================================
   Boutons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-text); font-weight:500; font-size:var(--fs-sm);
  letter-spacing:.04em; text-transform:uppercase;
  padding:.85rem 1.6rem; border:1px solid currentColor;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:hover, .btn:focus-visible{ transform:translateY(-1px); }
/* Sur fond clair : bouton plein encre */
.btn--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible{ background:transparent; color:var(--ink); }
/* Sur fond sombre : bouton plein papier */
.section--ink .btn--solid, .btn--solid-inv{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.section--ink .btn--solid:hover, .btn--solid-inv:hover, .btn--solid-inv:focus-visible{ background:transparent; color:var(--paper); }
.btn--ghost{ background:transparent; }

/* Bouton header (compact) */
.btn--sm{ padding:.6rem 1.1rem; }

/* ============================================================
   Hero — CTA visible sans scroll sur mobile
   ============================================================ */
.hero{
  position:relative; min-height:100svh; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--header-h) + var(--sp-4)) var(--sp-5);
  overflow:hidden;
}
/* Texture sobre : double dégradé radial très discret (le « double » impact) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(248,247,244,.07), transparent 55%),
    radial-gradient(120% 90% at 88% 96%, rgba(248,247,244,.05), transparent 55%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero__logo{ width:min(62vw, 280px); margin-bottom:var(--sp-4); }
.hero__logo .logo{ width:100%; }
/* Bandeau de plats — défilement continu, automatique (hero) */
.dish-strip{
  position:relative; width:100%; margin:var(--sp-2) 0 var(--sp-3); overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.dish-strip__track{ display:flex; gap:.7rem; width:max-content; animation:dish-scroll 48s linear infinite; }
.dish-strip:hover .dish-strip__track, .dish-strip:focus-within .dish-strip__track{ animation-play-state:paused; }
.dish-strip__item{ flex:0 0 auto; width:clamp(84px,23vw,128px); aspect-ratio:3/4; overflow:hidden; background:rgba(248,247,244,.04); box-shadow:inset 0 0 0 1px rgba(248,247,244,.16); }
.dish-strip__item img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes dish-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .dish-strip__track{ animation:none; } }

.hero__title{ font-size:var(--fs-hero); max-width:14ch; }
.hero__title em{ font-style:italic; }
.hero__lede{
  margin-top:var(--sp-3); max-width:34ch;
  font-size:var(--fs-lg); font-weight:300; color:var(--paper-70);
}
.hero__cta{ margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.hero__meta{
  margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:.4rem var(--sp-3);
  font-size:var(--fs-sm); color:var(--paper-45);
}
.hero__meta span{ white-space:nowrap; }

.scroll-cue{
  position:absolute; left:50%; bottom:var(--sp-3); transform:translateX(-50%);
  z-index:1; font-size:var(--fs-xs); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--paper-45);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-cue::after{
  content:""; width:1px; height:2.2rem; background:linear-gradient(var(--paper-45), transparent);
  animation:cueline 2.4s var(--ease) infinite;
}
@keyframes cueline{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }

/* ============================================================
   Médias / figures (photos du shooting)
   ============================================================ */
.split{ display:grid; gap:var(--sp-4); }
@media (min-width:880px){
  .split{ grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:center; }
  .split--media-right .split__media{ order:2; }
}
.figure{ margin:0; overflow:hidden; background:var(--taupe); }
.figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.figure--portrait{ aspect-ratio:4/5; }
.figure--tall{ aspect-ratio:3/4; }
.figcaption{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; opacity:.5; margin-top:.7rem; }
.media-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-top:var(--sp-4); }

/* Capsule vidéo — click-to-play (la vidéo ne charge qu'au clic) */
.video-feature{ margin:var(--sp-5) auto 0; max-width:760px; }
.video-play{
  position:relative; display:block; width:100%; padding:0; cursor:pointer;
  overflow:hidden; background:var(--ink); aspect-ratio:4/3; line-height:0;
}
.video-play img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur) var(--ease); }
.video-play:hover img, .video-play:focus-visible img{ transform:scale(1.03); }
.video-play__btn{
  position:absolute; inset:0; margin:auto; width:74px; height:74px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(248,247,244,.92); color:var(--ink); font-size:1.3rem; padding-left:4px;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.video-play:hover .video-play__btn{ transform:scale(1.08); background:var(--paper); }
.video-play__label{
  position:absolute; left:1rem; bottom:1rem; color:var(--paper); line-height:1.2;
  font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.video-feature video{ width:100%; height:auto; display:block; background:var(--ink); aspect-ratio:4/3; }
.video-feature__caption{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; opacity:.5; margin-top:.7rem; text-align:center; }

/* ============================================================
   Sections de contenu
   ============================================================ */
.lead{ font-size:var(--fs-xl); font-weight:300; line-height:var(--lh-snug); max-width:24ch; font-family:var(--font-display); }
.section__head{ margin-bottom:var(--sp-4); }
.section__title{ font-size:var(--fs-3xl); margin-top:var(--sp-2); }
.prose p{ margin-bottom:var(--sp-2); max-width:60ch; }
.prose p:last-child{ margin-bottom:0; }

/* Le dialogue : deux colonnes qui « se répondent » */
.dialogue{ display:grid; gap:var(--sp-4); }
@media (min-width:768px){ .dialogue{ grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:start; } }
.dialogue__pair{ border-top:1px solid var(--hairline-i); padding-top:var(--sp-2); }
.dialogue__pair dt{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-xl); }
.dialogue__pair dd{ margin-top:.4rem; color:var(--paper-70); font-size:var(--fs-base); }

/* Duo Étienne & Mickaël */
.duo{ display:grid; gap:var(--sp-4); margin-top:var(--sp-5); }
@media (min-width:680px){ .duo{ grid-template-columns:1fr 1fr; } }
.duo__card{ border-top:1px solid var(--hairline); padding-top:var(--sp-2); }
.duo__name{ font-family:var(--font-display); font-size:var(--fs-2xl); }
.duo__role{ display:block; font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-55); margin-top:.4rem; }
.duo__bio{ margin-top:var(--sp-2); color:var(--ink-80); }

/* ============================================================
   Le chapitre actuel — menus
   ============================================================ */
.menus{ display:grid; gap:var(--sp-4); margin-top:var(--sp-4); }
@media (min-width:768px){ .menus{ grid-template-columns:1fr 1fr; gap:var(--sp-5); } }
.menu-card{ border:1px solid var(--hairline-i); padding:var(--sp-4); display:flex; flex-direction:column; }
.menu-card__name{ font-family:var(--font-display); font-size:var(--fs-2xl); }
.menu-card__price{ font-size:var(--fs-3xl); font-family:var(--font-display); margin-top:var(--sp-1); }
.menu-card__pairing{ font-size:var(--fs-sm); color:var(--paper-45); margin-top:.4rem; }
.menu-card__desc{ margin-top:var(--sp-2); color:var(--paper-70); }
.menu-note{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--paper-45); max-width:60ch; }

/* Allergènes — volet dépliable (données réelles client) */
.allergenes{ margin-top:var(--sp-4); border-top:1px solid var(--hairline-i); padding-top:var(--sp-3); }
.allergenes summary{
  cursor:pointer; font-family:var(--font-text); font-size:var(--fs-sm);
  letter-spacing:.06em; text-transform:uppercase; color:var(--paper-70);
  list-style:none; display:flex; align-items:center; gap:.6rem;
}
.allergenes summary::-webkit-details-marker{ display:none; }
.allergenes summary::before{ content:"+"; font-size:1.2em; line-height:1; }
.allergenes[open] summary::before{ content:"\2013"; }
.allergen-list{ margin-top:var(--sp-3); display:grid; gap:.55rem; }
.allergen-list > div{ padding-bottom:.55rem; border-bottom:1px solid var(--hairline-i); }
@media (min-width:600px){
  .allergen-list > div{ display:grid; grid-template-columns:11rem 1fr; gap:var(--sp-2); align-items:baseline; }
}
.allergen-list dt{ font-family:var(--font-display); font-size:var(--fs-lg); }
.allergen-list dd{ color:var(--paper-45); font-size:var(--fs-sm); margin:0; }

/* Boutique cadeaux embarquée (MyBeezBox / Bonkdo) */
.boutique{ margin-top:var(--sp-4); }
.boutique iframe{ width:100%; min-height:1100px; border:0; display:block; }

/* Drapeau « donnée manquante » — visible mais sobre */
.todo{
  display:inline-block; font-size:var(--fs-xs); letter-spacing:.04em;
  border:1px dashed currentColor; padding:.15rem .5rem; opacity:.65;
  font-style:normal; font-family:var(--font-text);
}

/* ============================================================
   Infos pratiques
   ============================================================ */
.infos{ display:grid; gap:var(--sp-4); }
@media (min-width:768px){ .infos{ grid-template-columns:1fr 1fr; gap:var(--sp-5); } }
.info-list dt{ font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-55); margin-top:var(--sp-3); }
.info-list dt:first-child{ margin-top:0; }
.info-list dd{ font-size:var(--fs-lg); margin-top:.25rem; }
.info-list a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   Funnel MyBeezBox (canal additionnel)
   ============================================================ */
.funnel{ border:1px solid var(--hairline); padding:var(--sp-4); display:grid; gap:var(--sp-2); }
@media (min-width:680px){ .funnel{ grid-template-columns:1fr auto; align-items:center; } }

/* ============================================================
   Presse
   ============================================================ */
.presse{ margin-top:var(--sp-2); }
.presse__item{ border-top:1px solid var(--hairline); }
.presse__item:last-child{ border-bottom:1px solid var(--hairline); }
.presse__item a{
  display:grid; grid-template-columns:11rem 1fr auto; gap:var(--sp-2) var(--sp-3);
  align-items:baseline; padding:var(--sp-3) 0;
  transition:padding-left var(--dur) var(--ease);
}
.presse__item a:hover, .presse__item a:focus-visible{ padding-left:.6rem; }
.presse__pub{ font-family:var(--font-display); font-size:var(--fs-xl); }
.presse__title{ color:var(--ink-80); }
.presse__arrow{ color:var(--ink-55); }
@media (max-width:620px){
  .presse__item a{ grid-template-columns:1fr auto; gap:.3rem var(--sp-2); }
  .presse__title{ grid-column:1 / -1; font-size:var(--fs-sm); }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:var(--sp-4); max-width:var(--maxw-read); }
.faq details{ border-top:1px solid var(--hairline); }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:baseline; gap:var(--sp-3); padding:var(--sp-3) 0;
  font-family:var(--font-display); font-size:var(--fs-lg);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-text); opacity:.5; flex:0 0 auto; }
.faq details[open] summary::after{ content:"\2013"; }
.faq__a{ padding:0 0 var(--sp-3); margin:0; color:var(--ink-80); max-width:62ch; }
.faq__a a{ text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   Galerie
   ============================================================ */
.galerie{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:var(--sp-4); }
@media (min-width:680px){ .galerie{ grid-template-columns:repeat(3,1fr); gap:var(--sp-2); } }
@media (min-width:1000px){ .galerie{ grid-template-columns:repeat(4,1fr); } }
.galerie figure{ margin:0; overflow:hidden; aspect-ratio:4/5; background:rgba(248,247,244,.05); }
.galerie img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); }
.galerie figure:hover img, .galerie figure:focus-within img{ transform:scale(1.05); }

/* ============================================================
   Pied de page
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--paper); padding-block:var(--sp-5) var(--sp-4); }
.site-footer .wrap{ display:grid; gap:var(--sp-4); }
@media (min-width:680px){ .site-footer .wrap{ grid-template-columns:1.2fr 1fr 1fr; } }
.site-footer a:hover{ color:var(--paper-70); }
.footer__logo{ width:180px; margin-bottom:var(--sp-3); }
.footer__logo .logo{ width:100%; }
.footer__legal{ grid-column:1/-1; border-top:1px solid var(--hairline-i); padding-top:var(--sp-3); margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--paper-45); display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); justify-content:space-between; }

/* ============================================================
   Barre CTA mobile collante (conversion permanente)
   ============================================================ */
.cta-bar{
  position:fixed; inset:auto 0 0 0; z-index:90;
  background:var(--paper); border-top:1px solid var(--hairline);
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  display:flex; gap:var(--sp-2); align-items:center; justify-content:space-between;
  transform:translateY(110%); transition:transform var(--dur) var(--ease-out);
}
.cta-bar.is-visible{ transform:translateY(0); }
.cta-bar__label{ font-family:var(--font-display); font-size:var(--fs-base); }
.cta-bar .btn{ flex:0 0 auto; }
@media (min-width:880px){ .cta-bar{ display:none; } }

/* ============================================================
   Bandeau de consentement (RGPD / Consent Mode)
   ============================================================ */
.consent{
  position:fixed; left:var(--gutter); right:var(--gutter); bottom:var(--sp-2); z-index:130;
  background:var(--ink); color:var(--paper); padding:var(--sp-3);
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center; justify-content:space-between;
  box-shadow:0 12px 44px rgba(0,0,0,.4); border:1px solid var(--hairline-i);
}
@media (min-width:680px){ .consent{ left:auto; max-width:30rem; } }
.consent__txt{ margin:0; font-size:var(--fs-sm); color:var(--paper-70); max-width:44ch; }
.consent__txt a{ color:var(--paper); text-decoration:underline; text-underline-offset:2px; }
.consent__btns{ display:flex; gap:var(--sp-1); flex:0 0 auto; }

/* ============================================================
   Animations — reveals orchestrés
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change:opacity,transform; }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
[data-reveal][data-delay="5"]{ transition-delay:.40s; }

/* Hero : reveal au chargement (orchestré par .hero-ready posé en JS) */
.hero [data-hero]{ opacity:0; transform:translateY(20px); }
.hero.hero-ready [data-hero]{ opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.hero.hero-ready [data-hero="1"]{ transition-delay:.10s; }
.hero.hero-ready [data-hero="2"]{ transition-delay:.26s; }
.hero.hero-ready [data-hero="3"]{ transition-delay:.42s; }
.hero.hero-ready [data-hero="4"]{ transition-delay:.58s; }
.hero.hero-ready [data-hero="5"]{ transition-delay:.74s; }

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-hero],.hero.hero-ready [data-hero]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .scroll-cue::after{ animation:none; }
  .cta-bar{ transition:none; }
}