/* ==========================================================================
   GRIIK — street food grecque
   Direction : affiches plein écran, logo géant, typo condensée massive.
   Palette Griik : ultramarine #2E3092 · crème · or.
   ========================================================================== */

:root{
  --blue:      #2E3092;   /* pastille officielle */
  --blue-deep: #312783;   /* logotype officiel */
  --navy:      #1A1B4B;
  --cream:     #F4F0E4;
  --cream-hi:  #FBF8F0;
  --gold:      #F2C230;
  --coral:     #E8503A;
  --white:     #FFFFFF;
  --ink:       #12142E;

  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-h: 64px;
  --gut: clamp(20px, 4.2vw, 68px);
  --maxw: 1440px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p,figure,ul,dl,dd{margin:0}
ul{padding:0; list-style:none}
::selection{background:var(--blue); color:var(--cream)}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}

/* ---------- typographie ---------- */
.dsp{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:.005em;
}
.dsp--xl{font-size:clamp(3.2rem,9.5vw,8.5rem)}
.dsp--l {font-size:clamp(2.6rem,7vw,6rem)}
.dsp--m {font-size:clamp(2rem,4.6vw,3.6rem)}
.dsp--s {font-size:clamp(1.5rem,3vw,2.4rem)}

.kick{
  font-size:clamp(.72rem,1.05vw,.84rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.kick--blue{color:var(--blue)}
.kick--gold{color:var(--gold)}

.lede{font-size:clamp(1rem,1.35vw,1.15rem); line-height:1.6; font-weight:400}
.body{font-size:clamp(.94rem,1.1vw,1.02rem); line-height:1.7; font-weight:400; opacity:.85}
.mini{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600}

/* ---------- boutons pilule ---------- */
.pill{
  --bg:var(--blue); --fg:var(--cream-hi);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.7em;
  background:var(--bg); color:var(--fg);
  border-radius:999px;
  font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
  transition:transform .3s var(--ease), background .25s, color .25s, box-shadow .3s;
}
.pill:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,27,75,.28)}
.pill--white{--bg:var(--white); --fg:var(--blue)}
.pill--gold{--bg:var(--gold); --fg:var(--blue)}
.pill--navy{--bg:var(--navy); --fg:var(--cream-hi)}
.pill--outline{--bg:transparent; --fg:currentColor; box-shadow:inset 0 0 0 1.5px currentColor}
.pill--outline:hover{--bg:var(--blue); --fg:var(--cream-hi); box-shadow:none}
.pill--sm{padding:.7em 1.25em; font-size:.7rem}

/* ---------- barre de navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-inline:var(--gut);
  background:var(--cream-hi);
  border-bottom:1px solid rgba(18,20,46,.08);
  transition:transform .45s var(--ease);
}
.nav.is-hidden{transform:translateY(-100%)}
.nav__brand{display:flex; align-items:center; gap:10px}
.nav__brand img{width:40px; height:40px}
.nav__brand span{
  font-weight:800; font-size:1.18rem; letter-spacing:-.03em; color:var(--blue);
}
@media (max-width:520px){ .nav__brand span{display:none} }
.nav__links{display:none; align-items:center; gap:clamp(16px,2.2vw,34px)}
@media (min-width:920px){ .nav__links{display:flex} }
.nav__link{
  font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--blue); position:relative; padding-block:8px;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__right{display:flex; align-items:center; gap:12px}
.nav .pill{padding:.7em 1.3em; font-size:.7rem}
@media (max-width:919px){ .nav__right .pill{display:none} }

.burger{display:flex; width:40px; height:40px; align-items:center; justify-content:center; z-index:120}
@media (min-width:920px){ .burger{display:none} }
.burger span{display:block; width:22px; height:2.5px; background:var(--blue); position:relative; border-radius:2px; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:2.5px; background:var(--blue); border-radius:2px; transition:transform .38s var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:110;
  background:var(--blue); color:var(--cream-hi);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:0 var(--gut);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
body.nav-open .drawer{opacity:1; pointer-events:auto}
.drawer a{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.2rem,10vw,4.4rem); line-height:1.08;
  opacity:0; transform:translateY(18px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
body.nav-open .drawer a{opacity:1; transform:none}
body.nav-open .drawer a:nth-child(1){transition-delay:.08s}
body.nav-open .drawer a:nth-child(2){transition-delay:.13s}
body.nav-open .drawer a:nth-child(3){transition-delay:.18s}
body.nav-open .drawer a:nth-child(4){transition-delay:.23s}
body.nav-open .drawer a:nth-child(5){transition-delay:.28s}
body.nav-open .drawer a:nth-child(6){transition-delay:.33s}
.drawer__foot{
  margin-top:36px; display:flex; flex-wrap:wrap; gap:10px 24px;
  font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  opacity:0; transition:opacity .4s .38s;
}
body.nav-open .drawer__foot{opacity:.85}
.drawer__foot a{font-family:var(--text); font-size:inherit; opacity:1; transform:none}

/* ---------- hero : le logo en grand ---------- */
.hero{
  min-height:100svh;
  position:relative;
  padding-top:var(--nav-h);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  background:var(--cream);
}
.hero__kick{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-bottom:clamp(14px,2.4vw,26px);
}
.hero__kick .sub{
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); opacity:.55;
}
.hero__logo{
  width:min(80vw, 1180px);
  max-height:52vh;
  object-fit:contain;
  margin-inline:auto;
  opacity:0; transform:translateY(22px) scale(.985);
}
.hero.is-in .hero__logo{animation:logoIn 1s var(--ease) .1s forwards}
@keyframes logoIn{to{opacity:1; transform:none}}
.hero__foot{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(20px,3.4vw,42px);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px;
}
.hero__loc{
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); opacity:.5; line-height:1.9;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-left:auto}

/* ---------- bandeau défilant ---------- */
.ticker{
  background:var(--blue); color:var(--cream-hi);
  padding-block:13px; overflow:hidden; white-space:nowrap;
}
.ticker--gold{background:var(--gold); color:var(--blue)}
.ticker__track{display:inline-flex; animation:tick 32s linear infinite; will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker__item{
  display:inline-flex; align-items:center; gap:18px; padding-inline:18px;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(.95rem,1.7vw,1.3rem); letter-spacing:.03em;
}
.ticker__item::after{content:"★"; font-family:var(--text); font-size:.6em; opacity:.65}

/* ---------- affiche plein écran ---------- */
.poster{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(100svh, 860px);
  display:flex; align-items:center;
  padding-block:clamp(80px,10vw,120px);
  color:var(--cream-hi);
}
.poster__bg{position:absolute; inset:0; z-index:-2}
.poster__bg img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,center)}
.poster::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--scrim, linear-gradient(90deg, rgba(26,27,75,.84) 0%, rgba(26,27,75,.55) 42%, rgba(26,27,75,.12) 75%, rgba(26,27,75,.3) 100%));
}
.poster--right::after{
  background:var(--scrim, linear-gradient(270deg, rgba(26,27,75,.84) 0%, rgba(26,27,75,.55) 42%, rgba(26,27,75,.12) 75%, rgba(26,27,75,.3) 100%));
}
.poster--center::after{
  background:var(--scrim, linear-gradient(180deg, rgba(26,27,75,.55) 0%, rgba(26,27,75,.3) 40%, rgba(26,27,75,.72) 100%));
}
.poster__inner{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.poster__box{max-width:min(620px, 92%)}
.poster--right .poster__box{margin-left:auto; text-align:right}
.poster--center .poster__box{margin-inline:auto; text-align:center; max-width:min(760px,94%)}
.poster__title{margin-block:14px 16px; text-shadow:0 2px 30px rgba(26,27,75,.35)}
.poster__text{font-size:clamp(.95rem,1.25vw,1.08rem); line-height:1.65; max-width:46ch; opacity:.92}
.poster--right .poster__text{margin-left:auto}
.poster--center .poster__text{margin-inline:auto}
.poster__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,2.8vw,32px)}
.poster--right .poster__actions{justify-content:flex-end}
.poster--center .poster__actions{justify-content:center}
.poster__stack{display:flex; flex-direction:column; gap:2px; margin-top:16px}
.poster__stack li{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.35rem); letter-spacing:.04em; opacity:.9;
}

/* contour type "affiche" pour un titre sur photo chargée */
.outline{
  color:var(--cream-hi);
  text-shadow:
     3px 0 0 var(--blue), -3px 0 0 var(--blue),
     0 3px 0 var(--blue), 0 -3px 0 var(--blue),
     3px 3px 0 var(--blue), -3px -3px 0 var(--blue),
     3px -3px 0 var(--blue), -3px 3px 0 var(--blue);
}

/* ---------- section claire ---------- */
.band{padding-block:clamp(66px,8.5vw,120px); position:relative}
.band--cream{background:var(--cream)}
.band--hi{background:var(--cream-hi)}
.band--blue{background:var(--blue); color:var(--cream-hi)}
.band--navy{background:var(--navy); color:var(--cream-hi)}
.band__head{margin-bottom:clamp(30px,4vw,54px)}
.band__head--split{display:flex; flex-wrap:wrap; gap:20px 34px; align-items:flex-end; justify-content:space-between}
.band__title{margin-top:14px}

/* ---------- cartes pitas ---------- */
.cards{display:grid; gap:clamp(16px,2vw,26px)}
@media (min-width:820px){ .cards{grid-template-columns:repeat(3,1fr)} }

/* ---------- espace menu : typographie seule, aucune photo de plat ---------- */
.menuspace{max-width:1000px; margin-inline:auto}
.menuspace__rows{display:grid; gap:0}
@media (min-width:780px){ .menuspace__rows{grid-template-columns:1fr 1fr; column-gap:clamp(34px,5vw,80px)} }
.mrow2{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; column-gap:12px;
  padding-block:clamp(14px,1.8vw,20px);
  border-bottom:1px solid rgba(26,27,75,.16);
}
.mrow2__n{
  grid-column:1; grid-row:1;
  font-family:var(--display); text-transform:uppercase; color:var(--blue);
  font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.22;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:9px;
}
.mrow2__t{font-family:var(--text); font-size:.52em; font-weight:700; letter-spacing:.12em; opacity:.55; color:var(--ink)}
.mrow2__d{grid-column:2; grid-row:1; border-bottom:1px dotted rgba(26,27,75,.3); transform:translateY(-.42em); min-width:14px}
.mrow2__p{grid-column:3; grid-row:1; font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--blue); white-space:nowrap}
.mrow2__s{grid-column:1/-1; grid-row:2; font-size:.8rem; line-height:1.5; opacity:.65; margin-top:5px}
.menuspace__cats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:clamp(30px,3.6vw,46px);
}
.card{
  position:relative; overflow:hidden; border-radius:10px;
  background:var(--blue); color:var(--cream-hi);
  display:flex; flex-direction:column;
  min-height:clamp(380px,44vw,480px);
  isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 54px rgba(26,27,75,.2)}
.card__img{position:absolute; inset:0; z-index:-2}
.card__img img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,center); transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.06)}
.card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,27,75,.12) 0%, rgba(26,27,75,.28) 44%, rgba(26,27,75,.9) 100%);
}
.card__top{padding:clamp(18px,2vw,24px); display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.card__tag{
  font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:rgba(251,248,240,.16); backdrop-filter:blur(4px);
  border-radius:999px; padding:.5em 1em;
}
.card__price{font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2rem); line-height:1}
.card__body{margin-top:auto; padding:clamp(18px,2vw,26px)}
.card__name{font-family:var(--display); text-transform:uppercase; font-size:clamp(2rem,3.6vw,2.9rem); line-height:.94}
.card__sub{display:block; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; opacity:.8; margin-top:8px}
.card__desc{font-size:.86rem; line-height:1.55; opacity:.86; margin-top:12px}

/* ---------- compose ---------- */
.steps{display:grid; gap:clamp(26px,3.4vw,44px)}
@media (min-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
.step__hd{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.step__n{font-family:var(--display); font-size:1.1rem; opacity:.55}
.step__t{font-size:.82rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  border-radius:999px; padding:.66em 1.15em;
  font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:inset 0 0 0 1.5px rgba(251,248,240,.4);
  transition:background .25s, color .25s, box-shadow .25s, transform .25s var(--ease);
}
.chip:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--cream-hi)}
.chip[aria-pressed="true"]{background:var(--cream-hi); color:var(--blue); box-shadow:none}
.chip--veg[aria-pressed="true"]{background:var(--gold)}
.ticketbox{
  background:var(--cream-hi); color:var(--ink);
  border-radius:10px; padding:clamp(24px,3vw,34px);
  display:flex; flex-direction:column; gap:16px;
}
.ticketbox__lbl{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.5}
.ticketbox__name{font-family:var(--display); text-transform:uppercase; font-size:clamp(2rem,3.6vw,3rem); line-height:.95; color:var(--blue)}
.ticketbox dl{display:flex; flex-direction:column; gap:0}
.ticketbox .row{display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding-block:10px; border-bottom:1px dashed rgba(18,20,46,.2)}
.ticketbox .row dt{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.5}
.ticketbox .row dd{margin:0; font-size:.84rem; font-weight:600; text-align:right; text-transform:uppercase; letter-spacing:.04em}
.ticketbox__note{font-size:.78rem; line-height:1.6; opacity:.6}

.picto-row{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,30px); text-align:center}
@media (min-width:640px){ .picto-row{grid-template-columns:repeat(4,1fr)} }
.picto__icon{height:clamp(56px,6.4vw,78px); display:flex; align-items:flex-end; justify-content:center; margin-bottom:12px}
.picto__icon svg{height:100%; width:auto}
.picto strong{display:block; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.picto span{display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.65; margin-top:4px}

/* ---------- adresses ---------- */
.shops{display:grid; gap:clamp(18px,2.4vw,30px)}
@media (min-width:860px){ .shops{grid-template-columns:repeat(2,1fr)} }
.shop{
  background:var(--cream-hi); border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.shop:hover{transform:translateY(-5px); box-shadow:0 22px 48px rgba(18,20,46,.13)}
.shop__img{aspect-ratio:16/9; overflow:hidden; background:var(--blue)}
.shop__img img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,center); transition:transform 1.1s var(--ease)}
.shop:hover .shop__img img{transform:scale(1.05)}
.shop__body{padding:clamp(22px,2.8vw,34px); display:flex; flex-direction:column; gap:14px; flex:1}
.shop__name{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:.96; color:var(--blue)}
.shop__addr{font-size:.92rem; line-height:1.6; opacity:.78}
.hours{margin-top:auto; display:flex; flex-direction:column}
.hours div{display:flex; justify-content:space-between; gap:16px; padding-block:8px; border-top:1px solid rgba(18,20,46,.1); font-size:.84rem}
.hours dt, .hours span:first-child{font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; opacity:.55}
.hours span:last-child{font-variant-numeric:tabular-nums; font-weight:600}
.shop__links{display:flex; flex-wrap:wrap; gap:8px; padding-top:4px}

/* ---------- liens de commande ---------- */
.orderlist{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}

/* ---------- chiffres ---------- */
.figures{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(251,248,240,.22); margin-top:clamp(26px,3.4vw,40px)}
@media (min-width:760px){ .figures{grid-template-columns:repeat(4,1fr)} }
.figure{background:var(--blue); padding:20px}
.band--navy .figure{background:var(--navy)}
.figure b{display:block; font-family:var(--display); font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1; font-weight:400}
.figure span{display:block; font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; opacity:.65; margin-top:8px; line-height:1.45}

/* ---------- formulaire ---------- */
.form{display:grid; gap:16px}
@media (min-width:640px){ .form{grid-template-columns:1fr 1fr} .form .full{grid-column:1/-1} }
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6}
.field input,.field textarea{
  font:inherit; font-size:.95rem; color:inherit;
  background:var(--cream-hi);
  border:1.5px solid rgba(18,20,46,.14); border-radius:8px;
  padding:.8em .9em;
  transition:border-color .25s;
}
.band--blue .field input,.band--blue .field textarea,
.band--navy .field input,.band--navy .field textarea{
  background:rgba(251,248,240,.08); border-color:rgba(251,248,240,.25); color:var(--cream-hi);
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.field textarea{resize:vertical; min-height:110px}
.form__note{font-size:.78rem; line-height:1.6; opacity:.65}

/* ---------- pied de page ---------- */
.foot{background:var(--cream-hi); padding-top:clamp(50px,6.5vw,80px)}
.foot__grid{display:grid; gap:32px}
@media (min-width:760px){ .foot__grid{grid-template-columns:repeat(4,1fr)} }
.foot h4{font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin-bottom:14px}
.foot li{margin-bottom:9px; font-size:.9rem; opacity:.82}
.foot li a:hover{color:var(--blue); text-decoration:underline}
.foot__mark{
  display:block; width:min(62%, 620px); height:auto;
  margin:clamp(26px,4vw,50px) auto 0;
  opacity:.13; user-select:none; pointer-events:none;
}
@media (max-width:760px){ .foot__mark{width:78%} }
.foot__bar{
  background:var(--navy); color:var(--cream-hi);
  margin-top:clamp(20px,3vw,34px);
}
.foot__bar .wrap{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding-block:18px; font-size:.72rem; letter-spacing:.06em; opacity:.7;
}

/* ---------- apparition ---------- */
[data-rv]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-rv].is-in{opacity:1; transform:none}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1; transform:none; transition:none}
  .hero__logo{opacity:1; transform:none; animation:none}
  .ticker__track{animation:none}
}

/* ==========================================================================
   PAGE MENU
   ========================================================================== */
.menuhead{
  padding-top:calc(var(--nav-h) + clamp(50px,7vw,90px));
  padding-bottom:clamp(40px,5vw,64px);
  background:var(--cream);
  text-align:center;
}
.menubar{
  position:sticky; top:var(--nav-h); z-index:60;
  background:var(--cream-hi); border-block:1px solid rgba(18,20,46,.1);
  display:flex; gap:6px; overflow-x:auto; padding:11px var(--gut);
  scrollbar-width:none;
}
.menubar::-webkit-scrollbar{display:none}
.menubar a{
  white-space:nowrap; font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:.6em 1em; border-radius:999px; color:var(--blue);
  box-shadow:inset 0 0 0 1.5px rgba(46,48,146,.22);
  transition:background .25s, color .25s, box-shadow .25s;
}
.menubar a:hover,.menubar a.is-active{background:var(--blue); color:var(--cream-hi); box-shadow:none}

.mcard{scroll-margin-top:calc(var(--nav-h) + 70px); padding-block:clamp(44px,6vw,80px)}
.mcard + .mcard{border-top:1px solid rgba(18,20,46,.12)}
.mcard--blue{background:var(--blue); color:var(--cream-hi); border-top:0!important}
.mcard--navy{background:var(--navy); color:var(--cream-hi); border-top:0!important}
.mcard__hd{text-align:center; margin-bottom:clamp(28px,3.6vw,48px)}
.mcard__title{color:var(--blue)}
.mcard--blue .mcard__title,.mcard--navy .mcard__title{color:var(--cream-hi)}
.mcard__note{font-size:.8rem; margin-top:10px; opacity:.6}

.list{max-width:840px; margin-inline:auto}
.item{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; column-gap:12px;
  padding-block:clamp(13px,1.6vw,18px);
  border-bottom:1px solid rgba(18,20,46,.12);
}
.mcard--blue .item,.mcard--navy .item{border-color:rgba(251,248,240,.2)}
.item:last-child{border-bottom:0}
.item__name{
  grid-column:1; grid-row:1;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.22;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:9px;
}
.item__tag{font-family:var(--text); font-size:.58em; font-weight:700; letter-spacing:.12em; opacity:.6}
.item__dots{grid-column:2; grid-row:1; border-bottom:1px dotted rgba(18,20,46,.3); transform:translateY(-.3em); min-width:16px}
.mcard--blue .item__dots,.mcard--navy .item__dots{border-color:rgba(251,248,240,.32)}
.item__price{grid-column:3; grid-row:1; font-family:var(--display); font-size:clamp(1.05rem,1.8vw,1.35rem); white-space:nowrap}
.item__desc{grid-column:1/-1; grid-row:2; font-size:.82rem; line-height:1.5; opacity:.7; margin-top:6px; max-width:62ch}

.veg{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.4em; height:1.4em; border-radius:50%; flex:0 0 auto;
  background:var(--gold); color:var(--blue); font-size:.72em; vertical-align:.1em;
}
.veg svg{width:.78em; height:.78em}

.duo{display:grid; gap:clamp(26px,4vw,60px)}
@media (min-width:880px){ .duo{grid-template-columns:1fr 1fr; align-items:start} }

.deal{text-align:center; padding-block:clamp(18px,2.4vw,26px)}
.deal__icon{width:clamp(66px,8vw,100px); margin:0 auto 16px; opacity:.95}
.deal__badge{
  display:inline-block; border-radius:8px; padding:.35em 1.2em; margin-bottom:14px;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.05rem,1.9vw,1.4rem); letter-spacing:.09em;
  box-shadow:inset 0 0 0 2px var(--gold); color:var(--gold);
}
.deal__badge--coral{box-shadow:inset 0 0 0 2px var(--coral); color:var(--coral)}
.deal__desc{font-size:.95rem; line-height:1.65}
.deal__fine{font-size:.78rem; line-height:1.7; opacity:.62; margin-top:10px}
.deal__price{font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:14px}
.deal__rule{max-width:190px; margin:clamp(22px,3vw,34px) auto; border-top:1px solid rgba(251,248,240,.28)}

.inline{
  text-align:center; line-height:2;
  font-size:clamp(.82rem,1.4vw,.98rem); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- duo de photos (food truck) ---------- */
.twoshot{display:grid; gap:clamp(12px,1.6vw,20px)}
@media (min-width:760px){ .twoshot{grid-template-columns:1.45fr 1fr} }
.twoshot figure{
  margin:0; overflow:hidden; border-radius:10px;
  background:rgba(251,248,240,.06);
  min-height:clamp(260px,34vw,520px);
}
.twoshot img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos,center);
  transition:transform 1.1s var(--ease);
}
.twoshot figure:hover img{transform:scale(1.04)}

/* espace entre paragraphes d'une même affiche */
.poster__text + .poster__text{margin-top:.85em}

/* ---------- intitulé de catégorie dans l'espace menu ---------- */
.menucat{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.1rem,1.9vw,1.5rem); letter-spacing:.06em; line-height:1;
  color:var(--ink); opacity:.55;
  margin-top:clamp(14px,1.8vw,20px);
}

/* ==========================================================================
   Carte : tout en bleu de marque sur fond clair, plus aucun texte en noir.
   Les rubriques sur fond bleu ou navy gardent le crème.
   ========================================================================== */
.item__name, .item__price{color:var(--blue)}
.item__tag{color:var(--blue); opacity:.6}
.item__desc{color:var(--blue); opacity:.72}
.mcard__note{color:var(--blue); opacity:.75}
.item{border-color:rgba(46,48,146,.18)}
.item__dots{border-color:rgba(46,48,146,.34)}
.mcard .inline, .mcard .body, .mcard .lede{color:var(--blue)}
.mcard .body{opacity:.78}

.mcard--blue .item__name, .mcard--blue .item__price,
.mcard--navy .item__name, .mcard--navy .item__price,
.mcard--blue .inline, .mcard--navy .inline,
.mcard--blue .body,  .mcard--navy .body{color:var(--cream-hi)}
.mcard--blue .item__tag, .mcard--blue .item__desc, .mcard--blue .mcard__note,
.mcard--navy .item__tag, .mcard--navy .item__desc, .mcard--navy .mcard__note{color:var(--cream-hi); opacity:.72}
.mcard--blue .item, .mcard--navy .item{border-color:rgba(251,248,240,.2)}

/* espace menu de l'accueil */
.mrow2__t{color:var(--blue); opacity:.6}
.mrow2__s{color:var(--blue); opacity:.72}
.mrow2{border-color:rgba(46,48,146,.18)}
.mrow2__d{border-color:rgba(46,48,146,.34)}

/* ---------- espace menu groupé par catégorie ---------- */
.menuspace__cols{display:grid; gap:0 clamp(34px,5vw,80px)}
@media (min-width:820px){ .menuspace__cols{grid-template-columns:1fr 1fr; align-items:start} }
.menuspace__cols .menucat{
  margin-top:clamp(26px,3.2vw,40px);
  padding-bottom:10px;
  border-bottom:2px solid var(--blue);
  color:var(--blue); opacity:1;
}
.menuspace__cols > div > .menucat:first-child{margin-top:0}
@media (max-width:819px){ .menuspace__cols > div:last-child > .menucat:first-child{margin-top:clamp(26px,3.2vw,40px)} }

/* texte réservé aux lecteurs d'écran et aux moteurs de recherche */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
address.shop__addr{font-style:normal}

/* ==========================================================================
   Page de garde en photo plein écran, logotype crème par-dessus
   ========================================================================== */
.hero--photo{background:var(--navy); color:var(--cream-hi); isolation:isolate}
.hero--photo .hero__bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero--photo .hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 9%;
  transform:scale(1.04);
  animation:heroZoom 24s var(--ease) infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1.03)} to{transform:scale(1.11)}}
.hero--photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(26,27,75,.55) 0%, rgba(26,27,75,.3) 30%, rgba(26,27,75,.34) 62%, rgba(26,27,75,.78) 100%),
    radial-gradient(85% 55% at 50% 48%, rgba(26,27,75,.62) 0%, rgba(26,27,75,.2) 60%, rgba(26,27,75,0) 100%);
}
.hero--photo .hero__kick .kick{text-shadow:0 2px 18px rgba(26,27,75,.5)}
.hero--photo .hero__logo{
  filter:drop-shadow(0 8px 40px rgba(26,27,75,.55));
  width:min(68vw, 940px);
  max-height:40vh;
}
@media (prefers-reduced-motion:reduce){ .hero--photo .hero__bg img{animation:none} }

/* ==========================================================================
   Réglages mobile et tablette
   ========================================================================== */
@media (max-width:760px){

  /* le logotype doit occuper l'écran, pas flotter au milieu */
  .hero--photo .hero__logo{width:86vw; max-height:34vh}
  .hero__kick{margin-bottom:clamp(18px,4vw,26px)}

  /* les boutons du hero passent pleine largeur, plus faciles au pouce */
  .hero__foot{left:var(--gut); right:var(--gut)}
  .hero__cta{width:100%; margin-left:0; justify-content:center}
  .hero__cta .pill{flex:1 1 0; justify-content:center; min-width:0}

  /* un paragraphe aligné à droite se lit mal sur un écran étroit */
  .poster--right .poster__box{text-align:left}
  .poster--right .poster__text{margin-left:0}
  .poster--right .poster__actions{justify-content:flex-start}
  .poster__box{max-width:100%}
  .poster__actions .pill{flex:1 1 auto; justify-content:center}

  /* affiches moins hautes : on enchaîne plus vite */
  .poster{min-height:auto; padding-block:clamp(90px,22vw,130px)}

  /* titres de carte un cran plus bas pour tenir sur une ligne */
  .card-menu__title, .mcard__title{letter-spacing:.05em}

  /* la fiche boutique respire */
  .shop__body{gap:12px}
  .shop__links{width:100%}
  .shop__links .pill{flex:1 1 auto; justify-content:center}

  /* formulaire : cibles plus hautes */
  .field input, .field textarea{padding:.95em .9em; font-size:16px}
  .form .full .pill, .form button.pill{width:100%; justify-content:center}
  .form__note{text-align:center}

  /* pied de page aéré */
  .foot__grid{gap:26px}
  .foot__bar .wrap{flex-direction:column; gap:6px}
}

@media (max-width:420px){
  .hero--photo .hero__logo{width:90vw}
  .ticker__item{font-size:.92rem; padding-inline:14px}
  .menubar{padding-inline:16px}
  .item__price, .mrow2__p{font-size:1rem}
}

/* tablette : on évite une colonne unique trop large */
@media (min-width:760px) and (max-width:1023px){
  .poster__box{max-width:min(560px, 86%)}
  .band__head--split{align-items:flex-start}
}

/* zones tactiles : 44 px minimum, recommandation Apple et Google */
@media (hover:none){
  .pill{min-height:44px}
  .pill--sm{min-height:40px}
  .menubar a{min-height:40px; display:inline-flex; align-items:center}
  .foot li a{display:inline-block; padding-block:3px}
}

/* ---------- troisième adresse, pas encore ouverte ---------- */
@media (min-width:860px){ .shops{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1160px){ .shops{grid-template-columns:repeat(3,1fr)} }
.shop--soon{
  background:var(--blue); color:var(--cream-hi);
  box-shadow:inset 0 0 0 1px rgba(46,48,146,.18);
}
.shop__soon{
  aspect-ratio:16/9;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    repeating-linear-gradient(135deg, rgba(251,248,240,.05) 0 10px, transparent 10px 20px),
    var(--blue-deep);
  color:var(--gold);
}
.shop__soon svg{width:clamp(44px,5vw,58px); height:auto}
.shop__soon span{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.shop--soon .shop__name{color:var(--cream-hi)}
.shop--soon .shop__addr{color:var(--cream-hi); opacity:.82}
.shop--soon .pill--outline{color:var(--cream-hi)}
.shop--soon .pill--outline:hover{background:var(--cream-hi); color:var(--blue); box-shadow:none}
.shop--soon .pill:not(.pill--outline){background:var(--gold); color:var(--blue)}