/* Pizza Thaololo, demo
   Palette : charbon (--ink), creme (--cream), braise (--ember), sauge discrete (--basil) */

:root{
  --ink:#14110f;
  --ink-2:#1c1815;
  --ink-3:#252019;
  --cream:#f4ead9;
  --cream-dim:rgba(244,234,217,.72);
  --cream-faint:rgba(244,234,217,.6);
  --ember:#ff6b35;
  --ember-dark:#c8481f;
  --basil:#8a9764;
  --line:rgba(244,234,217,.14);

  --font-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:"Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;

  --container:78rem;
  --gap:clamp(1.25rem, 3vw, 2.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0 0 .5em;line-height:1.08}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* grain overlay, pure CSS, no asset */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  animation:grain 8s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2%,2%)}
  40%{transform:translate(2%,-1%)}
  60%{transform:translate(-1%,-2%)}
  80%{transform:translate(1%,1%)}
  100%{transform:translate(0,0)}
}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ember);color:var(--ink);
  padding:.6em 1em;z-index:100;
}
.skip-link:focus{left:.5em;top:.5em}

:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--gap);
  padding:calc(1rem + env(safe-area-inset-top,0px)) clamp(1rem,4vw,2.5rem) 1rem;
  background:rgba(20,17,15,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-right:auto}
.main-nav{display:none;gap:1.75rem;font-size:.95rem}
.main-nav a{padding:.25rem 0;border-bottom:1px solid transparent;transition:border-color .2s}
.main-nav a:hover{border-color:var(--ember)}
.nav-call{display:none}
@media (min-width:760px){
  .main-nav{display:flex}
  .nav-call{display:inline-flex}
}

/* ---------- burger toggle (mobile) ---------- */
.burger-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:10px;min-width:44px;min-height:44px;
}
.burger-toggle span{
  display:block;width:22px;height:2px;
  background:var(--cream);border-radius:1px;
  transition:transform .25s var(--ease), opacity .2s;
  pointer-events:none;
}
.burger-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:760px){.burger-toggle{display:none}}

/* ---------- menu mobile ---------- */
.mobile-menu{
  position:fixed;
  top:0;left:0;right:0;
  z-index:49;
  padding:calc(clamp(4.5rem,14vw,6rem) + env(safe-area-inset-top,0px)) clamp(1.25rem,5vw,4rem) 2rem;
  background:rgba(20,17,15,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:0;
  animation:menu-in .2s var(--ease) both;
}
.mobile-menu[hidden]{display:none}
.mobile-menu a{
  padding:1rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:clamp(1.4rem,6vw,1.8rem);
  font-weight:600;
  transition:color .2s;
}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--ember)}
@media (min-width:760px){.mobile-menu,.burger-toggle{display:none!important}}
@keyframes menu-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.7em 1.4em;
  border-radius:2px;
  font-size:.95rem;font-weight:600;letter-spacing:.01em;
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn-ember{background:var(--ember);color:var(--ink)}
.btn-ember:hover{background:var(--ember-dark);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--ember);color:var(--ember)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--ink) url('assets/img/detail-sauce-tomate-spirale-v.webp') center/cover no-repeat}
.hero-video,.hero-fallback{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero-fallback[hidden]{display:none}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(20,17,15,.58) 0%, transparent 100%),
    linear-gradient(180deg, rgba(20,17,15,.3) 0%, rgba(20,17,15,.44) 42%, rgba(20,17,15,.9) 82%, var(--ink) 100%);
}
.hero-content{
  position:relative;
  padding:0 clamp(1.25rem,5vw,4rem);
  max-width:42rem;
}
.hero-wordmark{
  font-size:clamp(2.8rem,10vw,6.5rem);
  margin-bottom:.3em;
  line-height:1;
  text-shadow:0 2px 22px rgba(20,17,15,.75),0 1px 6px rgba(20,17,15,.55);
}
.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.word{display:inline-block}
.hero-tagline{
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  color:var(--cream-dim);
  max-width:30rem;margin:0 auto 1.5em;
  text-shadow:0 1px 12px rgba(20,17,15,.65);
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}


/* ---------- generic section rhythm ---------- */
main > section{
  padding:clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,4rem);
  max-width:var(--container);
  margin:0 auto;
}
section h2{font-size:clamp(2rem,5vw,3rem)}

/* clip reveal on scroll. IntersectionObserver watches the unclipped PARENT wrapper,
   never the clipped element itself: a clip-path:inset(0 0 100% 0) element has a
   visible area of zero, and some browsers compute intersection against that
   post-clip rect, so observing the clipped element directly never fires (deadlock). */
.reveal-clip{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ease);
}
.in .reveal-clip{clip-path:inset(0 0 0% 0)}

/* ---------- savoir-faire / le feu ---------- */
.savoir-faire{
  display:grid;
  gap:var(--gap);
}
.sf-text{max-width:34rem}
.sf-text p{color:var(--cream-dim);font-size:1.05rem}
.sf-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.sf-video-wrap{grid-column:1/-1;aspect-ratio:16/9;background:var(--ink-2) url('assets/img/four-flammes-v.webp') center/cover no-repeat;overflow:hidden}
.sf-video-wrap video{width:100%;height:100%;object-fit:cover}
.sf-media img{aspect-ratio:3/4;object-fit:cover;width:100%;height:100%}

@media (min-width:860px){
  .savoir-faire{grid-template-columns:.8fr 1.2fr;align-items:start}
  .sf-text{padding-top:2rem}
  .sf-media{grid-template-columns:1.3fr .7fr .7fr}
  .sf-video-wrap{grid-column:auto;grid-row:1/3;aspect-ratio:auto;height:100%}
}

/* ---------- tao ---------- */
.tao{
  display:grid;
  gap:var(--gap);
}
.tao-media{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
}
.tao-media img:first-child{aspect-ratio:3/4;object-fit:cover;width:100%;height:100%}
.tao-media img:last-child{aspect-ratio:3/4;object-fit:cover;width:100%;height:100%;margin-top:2rem}
.tao-text{max-width:30rem}
.tao-text p{color:var(--cream-dim);font-size:1.05rem}

@media (min-width:860px){
  .tao{grid-template-columns:1.1fr .9fr}
  .tao-text{padding-top:3rem;order:2}
  .tao-media{order:1}
}

/* ---------- carte ---------- */
.carte-intro{color:var(--cream-dim);max-width:34rem}

.pizza-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.1rem;
  margin:2.5rem 0;
}
@media (min-width:640px){.pizza-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.pizza-grid{grid-template-columns:repeat(5,1fr)}}

.pizza-card-trigger{
  display:block;width:100%;text-align:left;
  border-radius:3px;overflow:hidden;
  background:var(--ink-2);
}
.pizza-card-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  display:block;
}
.pizza-card-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.pizza-card-media img:first-child{position:relative}
.pizza-card-trigger:hover img,
.pizza-card-trigger:focus-visible img{
  transform:scale(1.06);
}
.pizza-card-name{
  display:block;font-family:var(--font-display);font-size:1.05rem;
  padding:.7em .8em 0;
}
.pizza-card-price{
  display:block;font-size:.85rem;color:var(--cream-dim);
  padding:.1em .8em .8em;
}

.lightbox{
  border:0;padding:0;background:var(--ink-2);color:var(--cream);
  max-width:min(90vw,40rem);width:100%;border-radius:4px;
}
.lightbox::backdrop{background:rgba(20,17,15,.88)}
.lightbox-img{width:100%;max-height:70vh;object-fit:contain;background:var(--ink)}
.lightbox-caption{padding:.9rem 1.2rem;color:var(--cream-dim);font-size:.9rem}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,17,15,.6);color:var(--cream);font-size:1.6rem;border-radius:2px;
}
.lightbox-close{top:.6rem;right:.6rem}
.lightbox-prev{left:.6rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:.6rem;top:50%;transform:translateY(-50%)}
.lightbox-prev[hidden],.lightbox-next[hidden]{display:none}

.carte-complete{
  margin-top:3.5rem;
  border-top:1px solid var(--line);
  padding-top:2.5rem;
}
.carte-cols{
  display:grid;gap:2.5rem;
  margin-top:1.5rem;
}
@media (min-width:700px){.carte-cols{grid-template-columns:1fr 1fr}}
.carte-col h4{font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.85rem;color:var(--basil);margin-bottom:1em}
.carte-liste li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.55em 0;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.carte-liste li span:last-child{color:var(--cream-dim);white-space:nowrap}
.carte-liste li.signature{
  border-color:var(--ember);
  background:rgba(255,107,53,.08);
  margin:0 -.6em;padding:.55em .6em;border-radius:2px;
}
.carte-liste li.signature .badge-signature{
  display:inline-block;margin-left:.6em;padding:.15em .55em;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);background:var(--ember);border-radius:2px;vertical-align:middle;
}
.carte-supplement{margin-top:1em;font-size:.85rem;color:var(--cream-faint)}

/* ---------- ambiance ---------- */
.ambiance-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:2rem;
}
@media (min-width:700px){.ambiance-grid{grid-template-columns:repeat(3,1fr)}}
.ambiance-grid img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.ambiance-grid li:nth-child(odd){margin-top:0}
@media (min-width:700px){
  .ambiance-grid li:nth-child(2){margin-top:2rem}
  .ambiance-grid li:nth-child(5){margin-top:-2rem}
}

/* ---------- experience ---------- */
.experience{
  display:grid;gap:1.5rem;
}
.experience-video-wrap{aspect-ratio:16/9;background:var(--ink-2) url('assets/img/camion-comptoir-boites-soir-h.webp') center/cover no-repeat;overflow:hidden;border-radius:2px}
.experience-video{width:100%;height:100%;object-fit:cover}
.experience-text{color:var(--cream-dim);max-width:30rem}

/* ---------- contact ---------- */
.contact{
  display:grid;gap:var(--gap);
}
.contact-media img{aspect-ratio:4/3;object-fit:cover;width:100%;height:100%;border-radius:2px}
.contact-address{font-size:1.1rem}
.contact-hours{color:var(--ember);font-weight:600}
.contact-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}
.contact-map{aspect-ratio:4/3;border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.contact-map iframe{width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.05)}

@media (min-width:860px){
  .contact{grid-template-columns:1fr 1fr}
}

/* ---------- footer ---------- */
.site-footer{
  padding:2.5rem clamp(1.25rem,5vw,4rem) 3.5rem;
  border-top:1px solid var(--line);
  font-size:.85rem;color:var(--cream-faint);
  max-width:var(--container);margin:0 auto;
}
.footer-note{margin-top:.5em;font-style:italic}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .reveal-clip{transition:none;clip-path:inset(0)}
  .reveal-fade{opacity:1;transform:none;transition:none}
  .pizza-card-media img,.btn{transition:none}
  .strip-track{animation:none}
}

/* ---------- scroll reveal : fade + slide-up ---------- */
.reveal-fade{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-fade.visible{opacity:1;transform:translateY(0)}

/* ---------- bandeau photo défilant ---------- */
.photo-strip{
  padding:clamp(3rem,7vw,5rem) 0;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.strip-track-wrap{overflow:hidden;cursor:grab}
.strip-track-wrap:active{cursor:grabbing}
.strip-track{
  display:flex;
  gap:.7rem;
  width:max-content;
  animation:strip-scroll 55s linear infinite;
  will-change:transform;
}
.strip-track-wrap:hover .strip-track{animation-play-state:paused}
.strip-track li{flex-shrink:0;height:clamp(14rem,22vw,20rem)}
.strip-track li img{height:100%;width:auto;object-fit:cover;display:block;border-radius:2px}
@keyframes strip-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ---------- pizza maison (encart Thaololo) ---------- */
.pizza-maison-encart{
  margin:2rem 0 2.5rem;
  padding:1.75rem 2rem;
  border:1.5px solid var(--ember);
  border-radius:4px;
  background:rgba(255,107,53,.06);
}
.pizza-maison-label{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ember);margin:0 0 .9rem;
}
.pizza-maison-header{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;margin-bottom:.5em;
}
.pizza-maison-name{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4vw,2.6rem);
  font-weight:600;line-height:1;
}
.pizza-maison-price{
  font-size:1.15rem;color:var(--cream-dim);white-space:nowrap;
}
.pizza-maison-ingredients{color:var(--cream-dim);font-size:.95rem;margin:0}

/* ---------- avis (carrousel scroll) ---------- */
.avis{
  max-width:var(--container);margin:0 auto;
  padding:clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,4rem);
  text-align:center;
}
.avis-note{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 .25em}
.avis-stars{color:var(--ember);letter-spacing:.1em;margin-right:.3em}
.avis-count{
  display:block;font-family:var(--font-body);font-size:.9rem;
  color:var(--cream-dim);margin-top:.2rem;margin-bottom:2rem;
}
.avis-track-outer{overflow:hidden;position:relative}
.avis-track{
  display:flex;gap:1.5rem;
  transition:transform .5s var(--ease);
}
.avis-card{
  flex:0 0 100%;
  box-sizing:border-box;
}
@media (min-width:760px){
  .avis-track-outer{overflow:visible}
  .avis-track{flex-wrap:wrap}
  .avis-card{flex:0 0 calc((100% - 3rem) / 3)}
  .avis-dots{display:none}
}
.avis-card blockquote{
  margin:0;padding:1.75rem;
  border:1px solid var(--line);border-radius:4px;
  background:var(--ink-2);text-align:left;height:100%;box-sizing:border-box;
}
.avis-card blockquote p{
  font-style:italic;color:var(--cream);font-size:1rem;
  line-height:1.65;margin:0 0 1rem;
}
.avis-card footer{color:var(--cream-dim);font-size:.875rem}
.avis-card cite{font-style:normal;font-weight:600}
.avis-source{color:var(--cream-faint)}
.avis-dots{
  display:flex;gap:.55rem;justify-content:center;margin-top:1.5rem;
}
.avis-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cream-faint);border:0;padding:0;cursor:pointer;
  transition:background .3s, transform .3s;
  position:relative;-webkit-tap-highlight-color:transparent;
}
.avis-dot::before{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;
}
.avis-dot.active{background:var(--ember);transform:scale(1.35)}

/* ---------- barre d'action mobile fixe ---------- */
.mobile-bar{display:none}
@media (max-width:759px){
  .mobile-bar{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    z-index:48;
    padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom,0px));
    gap:.75rem;
    background:rgba(20,17,15,.93);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .mobile-bar-btn{
    flex:1;display:flex;align-items:center;justify-content:center;
    min-height:44px;border-radius:2px;
    font-size:.95rem;font-weight:600;
  }
  .mobile-bar-call{background:var(--ember);color:var(--ink)}
  .mobile-bar-carte{border:1px solid var(--line);color:var(--cream)}
  .site-footer{
    padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));
  }
}