/* =========================================================================
   Polices auto-hébergées (ex-Google Fonts, subset latin, woff2)
   RGPD : aucune requête vers fonts.googleapis.com / fonts.gstatic.com.
   Cormorant Garamond = font variable (une graisse 400–600 par fichier).
   ========================================================================= */
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/AlfaSlabOne-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Yellowtail-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Special Elite';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SpecialElite-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/CormorantGaramond-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/CormorantGaramond-400i.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =========================================================================
   styles.css — veuxtumonburger.fr (Veux-tu mon burger ?)
   =========================================================================
   
   Site vitrine vanilla — palette vintage (crème/brun/rouille/doré).
   Mobile-first, layout diptyque desktop dès 900px.
   
   Sections (suivre l'ordre du fichier) :
     Tokens (variables CSS)       Reset & base
     Shell / paper texture        Topbar / stamp
     Hero card + ornements        Sections (eyebrow, h2)
     Tabs & panels                Items (carte)
     Badges HOT / VEGGIE          Postcard & hours
     CTA Instagram                Mail anti-scrap (footer)
     Photos burgers + lightbox    Téléphone protégé
     Placeholder photo-soon       Lien IG inline (postcard)
     Reliure desktop diptyque     Food & Truck (titre slab)
     Évents & cta-events-pair     Panel-note (disclaimers)
   
   Responsive (en fin de fichier) :
     @media (min-width: 900px)    desktop / diptyque
     @media (min-width: 1280px)   grand écran
   ========================================================================= */

:root{
    --creme:#F5E6C8;
    --creme-l:#FAF1DA;
    --creme-d:#E6D2A8;
    --paper:#EFDBB0;
    --brun:#2A1208;
    --brun-d:#1a0a04;
    --rouille:#8B3A1E;
    --rouille-d:#6E2C14;
    --dore:#C4935A;
    --dore-d:#A77A42;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#3a2412;color:var(--brun);font-family:"Cormorant Garamond",serif;-webkit-font-smoothing:antialiased}
  body{min-height:100vh;overflow-x:hidden}

  .shell{
    max-width:430px;margin:0 auto;position:relative;z-index:1;min-height:100vh;
    background:var(--creme);
    /* paper grain + speckle */
    background-image:
      radial-gradient(1px 1px at 12% 8%, rgba(42,18,8,.18) 50%, transparent 51%),
      radial-gradient(1px 1px at 38% 22%, rgba(42,18,8,.14) 50%, transparent 51%),
      radial-gradient(1px 1px at 72% 14%, rgba(42,18,8,.16) 50%, transparent 51%),
      radial-gradient(1px 1px at 88% 38%, rgba(42,18,8,.12) 50%, transparent 51%),
      radial-gradient(1px 1px at 22% 56%, rgba(42,18,8,.13) 50%, transparent 51%),
      radial-gradient(1px 1px at 64% 72%, rgba(42,18,8,.15) 50%, transparent 51%),
      radial-gradient(1px 1px at 8% 88%, rgba(42,18,8,.14) 50%, transparent 51%),
      radial-gradient(1px 1px at 92% 94%, rgba(42,18,8,.12) 50%, transparent 51%),
      radial-gradient(1500px 800px at 50% 30%, rgba(196,147,90,.08), transparent 70%),
      radial-gradient(800px 400px at 100% 100%, rgba(139,58,30,.06), transparent 60%),
      var(--creme);
    background-size:auto;
    box-shadow:0 0 40px rgba(0,0,0,.45);
  }
  /* darker edges (tea-stain) */
  .shell::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(110,44,20,.18) 100%);
  }
  /* subtle paper fibers */
  .shell::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;
    background-image:repeating-linear-gradient(115deg, transparent 0 23px, rgba(42,18,8,.025) 23px 24px);
    mix-blend-mode:multiply;
  }

  .inner{position:relative;z-index:2;padding:18px 18px 0}

  /* ===== HERO / MENU CARD ===== */
  .card{
    margin-top:18px;padding:24px 18px 26px;position:relative;
    border:1px solid var(--brun);
    box-shadow:inset 0 0 0 4px var(--creme), inset 0 0 0 5px var(--brun);
  }
  /* corner ornaments */
  .corner{position:absolute;width:30px;height:30px;color:var(--rouille)}
  .corner.tl{top:-10px;left:-10px}
  .corner.tr{top:-10px;right:-10px;transform:rotate(90deg)}
  .corner.bl{bottom:-10px;left:-10px;transform:rotate(-90deg)}
  .corner.br{bottom:-10px;right:-10px;transform:rotate(180deg)}

  .poster{
    display:block;width:100%;max-width:340px;margin:14px auto 0;
    background:var(--creme);
    padding:6px;
    border:1px solid var(--brun);
    box-shadow:
      0 0 0 4px var(--creme),
      0 0 0 5px var(--brun),
      0 8px 0 -2px rgba(0,0,0,.15);
    position:relative;
  }
  .poster img{display:block;width:100%;height:auto}
  .poster-tape{
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    background:var(--rouille);color:var(--creme-l);
    font-family:"Alfa Slab One",serif;font-size:10px;letter-spacing:.22em;
    padding:5px 14px 4px;text-transform:uppercase;white-space:nowrap;
    box-shadow:0 0 0 2px var(--creme), 0 0 0 3px var(--rouille);
  }

  /* Ornament divider */
  .ornament{
    display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:var(--rouille);
  }
  .ornament .line{flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--rouille) 30%, var(--rouille) 70%, transparent)}
  .ornament .mid{font-family:"Cormorant Garamond",serif;font-size:18px;color:var(--rouille)}
  .ornament .mid svg{width:24px;height:14px;vertical-align:middle}

  .sub{
    text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;color:var(--brun);opacity:.85;
    margin-top:4px;
  }
  .sub b{font-style:normal;font-weight:600;color:var(--rouille)}

  /* ===== SECTIONS ===== */
  section{padding:30px 22px;position:relative;z-index:2}
  /* Reveal au scroll — masqué uniquement si JS actif (html.js), sinon tout reste
     visible (no-JS, crawlers). Transition CSS en fallback quand anime.js est
     absent ; quand anime.js pilote (html.anim), pas de transition concurrente. */
  .js .reveal{opacity:0;transform:translateY(14px)}
  .js:not(.anim) .reveal{transition:opacity .65s ease, transform .65s ease}
  .js .reveal.in{opacity:1;transform:none}

  .eyebrow{
    text-align:center;font-family:"Special Elite",monospace;font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--rouille);
  }
  .eyebrow::before,.eyebrow::after{content:"~ ";color:var(--dore-d)}
  .eyebrow::after{content:" ~"}
  .h2{
    text-align:center;font-family:"Yellowtail",cursive;font-size:54px;line-height:1;color:var(--brun);margin-top:4px;
    text-shadow:0 2px 0 rgba(196,147,90,.3);
  }
  .h2-slab{
    text-align:center;font-family:"Alfa Slab One",serif;font-size:18px;letter-spacing:.32em;color:var(--rouille);text-transform:uppercase;margin-top:6px;
  }

  /* TABS */
  .tabs{
    display:flex;gap:0;margin:20px 0 22px;
    border:1px solid var(--brun);background:var(--creme-l);
    box-shadow:3px 3px 0 var(--rouille);
  }
  .tab{
    flex:1;font-family:"Alfa Slab One",serif;font-size:13px;letter-spacing:.06em;
    padding:13px 6px;background:transparent;color:var(--brun);
    border:none;border-right:1px solid var(--brun);
    text-transform:uppercase;cursor:pointer;transition:background .2s ease, color .2s ease;
    position:relative;
  }
  .tab:last-child{border-right:none}
  .tab.active{background:var(--brun);color:var(--creme)}
  .tab.active::after{
    content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    width:0;height:0;border:5px solid transparent;border-top-color:var(--brun);
  }

  /* ITEMS — typeset menu */
  .panel{display:none}
  .panel.show{display:block;animation:fadeUp .4s ease both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .item{
    padding:18px 0 14px;border-bottom:1px dashed rgba(42,18,8,.32);
    position:relative;
  }
  .item:last-child{border-bottom:none}
  .item-head{
    display:flex;align-items:baseline;gap:8px;
    font-family:"Alfa Slab One",serif;
  }
  .item-name{
    font-size:22px;letter-spacing:.005em;color:var(--brun);line-height:1.1;
    flex-shrink:0;
  }
  .item-leader{
    flex:1;border-bottom:1.5px dotted rgba(42,18,8,.45);
    margin:0 4px 6px;
  }
  .item-price{
    font-size:20px;color:var(--rouille);white-space:nowrap;letter-spacing:.005em;
  }
  .item-tag{
    display:inline-flex;align-items:center;gap:8px;
    font-family:"Special Elite",monospace;font-size:9.5px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--rouille);margin-top:6px;line-height:1;
  }
  .item-tag::before{content:"№ ";letter-spacing:.08em}
  .item-weight{
    font-family:"Special Elite",monospace;font-size:9.5px;letter-spacing:.14em;
    color:var(--rouille);opacity:.8;margin-left:12px;
  }
  /* ===== Badges HOT / VEGGIE — banniere deux blocs (icone + label) ===== */
  .menu-badge{
    display:inline-flex;align-items:stretch;
    font-family:"Alfa Slab One",serif;font-size:8.5px;letter-spacing:.16em;
    text-transform:uppercase;line-height:1;vertical-align:middle;
    margin-left:8px;
    box-shadow:1px 1px 0 rgba(42,18,8,.18);
  }
  .menu-badge .ico-cap{
    width:18px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid;
  }
  .menu-badge .ico-cap svg{width:11px;height:11px}
  .menu-badge .lbl{
    padding:3px 8px 2px;
    border:1px solid;border-left:none;
    display:inline-flex;align-items:center;
  }
  /* variante HOT - rouille */
  .menu-badge.hot .ico-cap{background:#8B3A1E;border-color:#8B3A1E;color:#F5E6C8}
  .menu-badge.hot .lbl{background:#FAF1DA;border-color:#8B3A1E;color:#8B3A1E}
  /* variante VEGGIE - dore fonce */
  .menu-badge.veg .ico-cap{background:#A77A42;border-color:#A77A42;color:#F5E6C8}
  .menu-badge.veg .lbl{background:#FAF1DA;border-color:#A77A42;color:#2A1208}
  .item-desc{
    margin-top:8px;font-family:"Cormorant Garamond",serif;font-size:15.5px;line-height:1.45;color:var(--brun);opacity:.88;text-wrap:pretty;
  }
  .item-desc em{font-style:italic;color:var(--rouille);font-weight:600}
  .item-sauce{
    margin-top:8px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:14px;color:var(--rouille);
  }
  .item-sauce::before{content:"« sauce ";color:var(--dore-d)}
  .item-sauce::after{content:" »";color:var(--dore-d)}

  /* INFO — postcard style */
  .postcard{
    margin-top:14px;border:1px solid var(--brun);padding:18px;background:var(--creme-l);
    box-shadow:3px 3px 0 var(--rouille);
    position:relative;
  }
  .postcard::before{
    content:"";position:absolute;top:8px;right:8px;width:50px;height:60px;
    border:1px solid var(--brun);background:repeating-linear-gradient(45deg, transparent 0 6px, rgba(139,58,30,.25) 6px 7px);
  }
  .postcard .pc-label{
    position:absolute;top:14px;right:14px;font-family:"Special Elite",monospace;font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rouille);transform:rotate(-8deg);
    background:var(--creme-l);padding:2px 4px;z-index:2;
  }
  .postcard .pc-row{margin-bottom:14px}
  .postcard .pc-row:last-child{margin-bottom:0}
  .pc-key{font-family:"Special Elite",monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--rouille)}
  .pc-val{font-family:"Alfa Slab One",serif;font-size:18px;color:var(--brun);line-height:1.2;margin-top:4px;letter-spacing:.01em}
  .pc-val small{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:14px;color:var(--brun);opacity:.8;margin-top:3px;letter-spacing:0;text-transform:none;font-weight:400}

  .hours{
    margin-top:14px;border:1px solid var(--brun);padding:6px 16px;background:var(--creme-l);
    box-shadow:3px 3px 0 var(--rouille);
  }
  .hours h3{
    text-align:center;font-family:"Yellowtail",cursive;font-size:30px;color:var(--rouille);
    line-height:1;padding:10px 0 8px;border-bottom:1px solid rgba(42,18,8,.25);margin-bottom:4px;font-weight:400;
  }
  .hours .row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-family:"Cormorant Garamond",serif;font-size:15px;color:var(--brun);gap:8px}
  .hours .row:not(:first-of-type){border-top:1px dashed rgba(42,18,8,.22)}
  .hours .row .d{font-family:"Alfa Slab One",serif;font-size:13px;letter-spacing:.04em;color:var(--brun);text-transform:uppercase;flex-shrink:0}
  .hours .row .leader{flex:1;border-bottom:1.5px dotted rgba(42,18,8,.35);margin:0 6px 4px}
  .hours .row .h{font-family:"Cormorant Garamond",serif;font-size:14.5px;color:var(--rouille);white-space:nowrap}
  .hours .row.closed .h{font-style:italic;color:var(--rouille-d)}
  /* Jour d'ouverture mis en avant : heure plus grande, en slab rouille */
  .hours .row.open{padding:10px 0 8px}
  .hours .row.open .d{color:var(--rouille)}
  .hours .row.open .h{
    font-family:"Alfa Slab One",serif;font-weight:400;
    font-size:18px;letter-spacing:.01em;color:var(--rouille);
  }

  /* Lien adresse dans la carte postale (Emplacement) */
  .pc-val small a{color:var(--rouille);text-decoration:none;border-bottom:1px dotted rgba(139,58,30,.5)}
  .pc-val small a:hover{color:var(--rouille-d)}

  /* Emplacement du week-end — encadré épinglé sous la ligne d'horaires */
  .row-sub.loc{
    display:flex;align-items:center;gap:10px;
    margin:2px 0 2px;padding:9px 11px;
    background:var(--creme-l);border:1px solid rgba(42,18,8,.3);
    box-shadow:2px 2px 0 var(--rouille);
  }
  .row-sub.loc .pin{flex-shrink:0;width:20px;height:20px;color:var(--rouille)}
  .row-sub.loc .loc-body{display:flex;flex-direction:column;line-height:1.3}
  .row-sub.loc .loc-body b{
    font-family:"Cormorant Garamond",serif;font-weight:600;
    font-size:16px;color:var(--brun);
  }
  .row-sub.loc .loc-body a{
    font-family:"Cormorant Garamond",serif;font-style:italic;
    font-size:13.5px;color:var(--rouille);text-decoration:none;
    border-bottom:1px dotted rgba(139,58,30,.5);
    align-self:flex-start;margin-top:1px;
  }
  .row-sub.loc .loc-body a:hover{color:var(--rouille-d)}

  /* Photo du camion — cadre polaroid dans le cadre horaires */
  .truck-photo{
    margin:10px 0 12px;padding:5px;
    background:var(--creme);
    border:1px solid var(--brun);
    box-shadow:2px 2px 0 var(--rouille);
    cursor:zoom-in;
    transition:transform .28s ease, box-shadow .28s ease;
  }
  .truck-photo:hover{
    transform:translate(-2px,-2px);
    box-shadow:5px 5px 0 var(--rouille);
  }
  .truck-photo img{display:block;width:100%;height:auto}


  /* CTA Instagram — ticket */
  .cta-ig{
    display:block;text-decoration:none;margin:22px -4px 6px;position:relative;
    background:var(--rouille);color:var(--creme-l);
    padding:20px 22px 18px;
    box-shadow:4px 4px 0 var(--brun);
    border:1px solid var(--brun);
  }
  /* perforated edges */
  .cta-ig::before,.cta-ig::after{
    content:"";position:absolute;top:0;bottom:0;width:14px;
    background-image:radial-gradient(circle at 50% 6px, var(--creme) 4px, transparent 5px);
    background-size:14px 16px;background-repeat:repeat-y;
  }
  .cta-ig::before{left:-7px}
  .cta-ig::after{right:-7px}
  .cta-ig .label{font-family:"Special Elite",monospace;font-size:10px;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
  .cta-ig .handle{
    font-family:"Yellowtail",cursive;font-size:34px;line-height:1.05;margin-top:6px;
    display:flex;justify-content:space-between;align-items:center;gap:10px;
  }
  .cta-ig .handle svg{width:26px;height:26px;color:var(--creme-l);flex-shrink:0}
  .cta-ig .sub{
    margin-top:4px;color:var(--creme-l);opacity:.85;text-align:left;font-style:italic;font-size:13px;
  }

  footer{
    padding:24px 22px;text-align:center;
    font-family:"Special Elite",monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brun);opacity:.7;
    border-top:1px dashed rgba(42,18,8,.32);margin-top:10px;
  }
  footer .s{color:var(--rouille);margin:0 6px}

  @media (hover:hover){
    .tab:hover:not(.active){background:rgba(42,18,8,.08)}
    .cta-ig:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--brun)}
  }

  /* =========================================================================
     DESKTOP — "menu ouvert" en diptyque
     Mobile (<900px) : aucun changement, layout vertical classique 430px
     Desktop (>=900px) : shell 920px, hero pleine largeur, puis 2 colonnes
                          (carte a gauche, info a droite), reliure centrale.
     ========================================================================= */
  

  

  /* ===== FOOD TRUCK — Slab grand format ===== */
  .ft-slab{text-align:center;padding:6px 0 8px;margin:18px 0}
  .ft-slab .ft-stage{position:relative;display:block;height:86px;overflow:hidden}
  .ft-slab .ft-bg{
    position:absolute;inset:0 0 7px;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;
  }
  .ft-slab .ft-truck{
    flex-shrink:0;opacity:.85;
    animation:ft-roll 7s linear infinite;
  }
  @keyframes ft-roll{
    0%{transform:translateX(-170px)}
    100%{transform:translateX(440px)}
  }
  .ft-slab .ft-wrap{
    position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  }
  .ft-slab .ft-word{
    display:inline-block;white-space:nowrap;
    font-family:"Alfa Slab One",serif;font-size:clamp(22px, 8.2vw, 36px);line-height:1;letter-spacing:.04em;
    color:#2A1208;text-transform:uppercase;
    padding:2px 14px;background:#F5E6C8;box-shadow:0 0 0 3px #F5E6C8;
  }
  .ft-slab .ft-amp{
    font-family:"Yellowtail",cursive;font-weight:400;font-size:clamp(25px, 9.2vw, 40px);
    color:#8B3A1E;letter-spacing:0;display:inline-block;
    transform:translateY(4px);margin:0 -4px;
  }
  .ft-slab .ft-wheel{transform-origin:center;animation:ft-spin .6s linear infinite}
  @keyframes ft-spin{to{transform:rotate(360deg)}}

  /* Lien email footer — style "tampon CTA" très visible */
  .mail-link{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--creme-l);background:var(--rouille);text-decoration:none;
    font-weight:bold;font-size:11px;letter-spacing:.18em;
    padding:7px 14px 6px;border:1.5px solid var(--brun);
    box-shadow:2px 2px 0 var(--brun);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    margin-left:6px;vertical-align:middle;
  }
  .mail-link::before{content:"\2709";font-size:14px;font-weight:normal}
  .mail-link:hover{
    transform:translate(-1px,-1px);
    box-shadow:3px 3px 0 var(--brun);
    background:var(--rouille-d);
  }
  .foot-sep{margin:0 8px;opacity:.5}

  /* Photos burgers — cadre polaroid vintage (style statique) */
  .item.has-photo{display:flex;gap:14px;align-items:flex-start}
  .item-photo{
    flex-shrink:0;display:block;
    width:88px;height:88px;
    background:var(--creme);padding:4px;
    border:1px solid var(--brun);
    box-shadow:2px 2px 0 var(--rouille);
    margin-top:16px;
  }
  .item-photo img{display:block;width:100%;height:100%;object-fit:cover}

  /* Placeholder "photo à venir" — tampon typographique, pas de lightbox */
  .item-photo.photo-soon{
    display:flex;align-items:center;justify-content:center;
    cursor:default;
  }
  .item-photo.photo-soon:hover{
    transform:none;
    box-shadow:2px 2px 0 var(--rouille);
  }
  .soon-txt{
    font-family:'Special Elite','Courier New',monospace;
    font-size:9px;line-height:1.45;letter-spacing:.05em;
    color:var(--rouille);text-align:center;
    border:1.5px dashed var(--rouille);border-radius:4px;
    padding:5px 7px;transform:rotate(-7deg);opacity:.9;
  }
  .item-text{flex:1;min-width:0}
  

  /* Lien téléphone — protection anti-démarchage : masqué jusqu'au clic */
  .tel-link{
    color:var(--brun);text-decoration:none;
    border-bottom:1px dotted rgba(42,18,8,.4);
    transition:color .2s ease, border-color .2s ease;
    cursor:pointer;font-variant-numeric:tabular-nums;
  }
  .tel-link:hover{color:var(--rouille);border-color:var(--rouille)}
  .tel-link.revealed{cursor:default}

  /* Photos burgers — interaction zoom au hover (curseur loupe) */
  .item-photo{cursor:zoom-in;transition:transform .28s ease, box-shadow .28s ease}
  .item-photo:hover{
    transform:translate(-2px,-2px) scale(1.06);
    box-shadow:5px 5px 0 var(--rouille);
    z-index:2;position:relative;
  }

  /* Lightbox plein écran au clic */
  #lightbox{
    position:fixed;inset:0;z-index:9999;
    background:rgba(20,8,4,.94);
    display:none;align-items:center;justify-content:center;
    padding:24px;cursor:zoom-out;
    animation:lb-fade .25s ease;
  }
  #lightbox.open{display:flex}
  #lightbox img{
    max-width:min(92vw,720px);max-height:88vh;
    background:var(--creme);padding:12px;
    border:1px solid var(--brun);
    box-shadow:0 14px 50px rgba(0,0,0,.7), 5px 5px 0 var(--rouille);
    animation:lb-zoom .3s ease;
  }
  #lightbox .lb-close{
    position:absolute;top:18px;right:22px;
    width:36px;height:36px;border:1px solid var(--creme);
    background:transparent;color:var(--creme);font-size:20px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-family:"Special Elite",monospace;
  }
  #lightbox .lb-caption{
    position:absolute;bottom:24px;left:0;right:0;text-align:center;
    color:var(--creme);font-family:"Special Elite",monospace;
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.85;
  }
  @keyframes lb-fade{from{opacity:0}to{opacity:1}}
  @keyframes lb-zoom{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

  /* Lien Instagram inline (postcard) — handle + icône cliquables */
  .ig-inline{
    display:inline-flex;align-items:center;gap:7px;
    text-decoration:none;color:var(--brun);
    font-family:"Alfa Slab One",serif;font-size:18px;letter-spacing:.01em;line-height:1.2;
    transition:color .2s ease, transform .2s ease;
  }
  .ig-inline:hover{color:var(--rouille);transform:translateX(2px)}
  .ig-inline .ig-icon{
    width:20px;height:20px;flex-shrink:0;color:var(--rouille);
    transition:transform .25s ease;
  }
  .ig-inline:hover .ig-icon{transform:rotate(-8deg) scale(1.08)}

  /* Disclaimer en bas de panel (ex: poids cookies) */
  .panel-note{
    text-align:center;font-family:"Special Elite",monospace;
    font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--rouille);opacity:.9;font-weight:bold;
    margin-top:14px;padding:14px 0 4px;
    border-top:1px dashed rgba(42,18,8,.25);
  }
  .panel-note::before,.panel-note::after{content:"·····";color:var(--dore-d);margin:0 10px;letter-spacing:.1em}

  /* Bandeau formule — burgers servis en menu (frites + boisson) */
  .menu-deal{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin:16px 0 6px;padding:11px 14px 10px;
    background:var(--creme-l);
    border:1px solid var(--brun);
    box-shadow:3px 3px 0 var(--rouille);
    position:relative;
  }
  /* liseré intérieur pointillé, façon ticket */
  .menu-deal::before{
    content:"";position:absolute;inset:3px;
    border:1px dashed rgba(139,58,30,.45);pointer-events:none;
  }
  .deal-txt{text-align:center}
  .deal-txt b{
    display:block;font-family:"Alfa Slab One",serif;font-weight:400;
    font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--rouille);line-height:1.2;
  }
  .deal-txt i{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    font-size:14.5px;color:var(--brun);margin-top:2px;
  }

  /* Fine print de carte — prix TTC & allergènes (hors panels, toujours visible) */
  .menu-legal{
    text-align:center;font-family:"Special Elite",monospace;
    font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--brun);opacity:.55;margin-top:16px;
  }

  /* Page mentions légales */
  .legal{padding:10px 22px 34px}
  .legal h3{
    font-family:"Alfa Slab One",serif;font-size:14px;color:var(--rouille);
    text-transform:uppercase;letter-spacing:.05em;margin:26px 0 8px;
  }
  .legal p{font-family:"Cormorant Garamond",serif;font-size:15.5px;line-height:1.65;color:var(--brun)}
  .legal p + p{margin-top:8px}
  .legal a{color:var(--rouille)}
  .legal b{font-weight:600}
  .back-link{
    font-family:"Special Elite",monospace;font-size:12px;letter-spacing:.08em;
    color:var(--rouille);text-decoration:none;
    border-bottom:1px dotted rgba(139,58,30,.5);
  }
  .back-link:hover{color:var(--rouille-d);border-color:var(--rouille-d)}
  /* Sur la page légale, le lien mail redevient un lien texte sobre */
  .legal .mail-link{
    display:inline;background:none;color:var(--rouille);
    border:none;box-shadow:none;padding:0;margin:0;
    font-weight:600;letter-spacing:0;font-size:inherit;font-family:inherit;
    text-decoration:underline dotted;
  }
  .legal .mail-link::before{content:none}
  .legal .mail-link:hover{transform:none;box-shadow:none;background:none;color:var(--rouille-d)}

  /* Boissons : retirer le préfixe « sauce » et les guillemets sur item-sauce */
  [data-panel="boissons"] .item-sauce::before,
  [data-panel="boissons"] .item-sauce::after{content:none}

  /* Hint "cliquer pour révéler" — gras + clignotement, masqué après révélation */
  .tel-hint{
    font-weight:bold;color:var(--rouille);letter-spacing:.02em;
    animation:tel-blink 1.4s ease-in-out infinite;
  }
  @keyframes tel-blink{
    0%,100%{opacity:1}
    50%{opacity:.35}
  }
  .tel-link.revealed + .tel-hint{display:none}

  /* ===== ÉVÉNEMENTS — prestations privées ===== */
  .event-intro{
    text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;
    font-size:16px;color:var(--brun);opacity:.88;margin:8px auto 22px;max-width:46ch;
  }
  .events-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
  .event{
    display:flex;align-items:center;gap:16px;
    padding:14px 16px;background:var(--creme-l);
    border:1px solid var(--brun);box-shadow:3px 3px 0 var(--rouille);
  }
  .event-icon{
    flex-shrink:0;width:52px;height:52px;border-radius:50%;
    background:var(--creme);border:1.5px solid var(--brun);
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--rouille);
  }
  .event-icon svg{width:28px;height:28px;stroke-width:1.6}
  .event-name{
    flex:1;font-family:"Alfa Slab One",serif;font-size:15px;letter-spacing:.06em;
    color:var(--brun);text-transform:uppercase;line-height:1.15;
  }
  /* Dernière entrée — "Et bien plus encore" en style différent */
  .event.more{background:transparent;box-shadow:none;border-style:dashed}
  .event.more .event-name{font-family:"Cormorant Garamond",serif;font-style:italic;
    text-transform:none;letter-spacing:0;font-size:17px;color:var(--rouille)}

  /* CTA Devis — style ticket discret */
  .cta-events{
    display:block;text-align:center;text-decoration:none;
    margin:22px auto 4px;max-width:340px;
    padding:14px 22px;color:var(--creme-l);background:var(--brun);
    border:1px solid var(--brun-d);box-shadow:3px 3px 0 var(--rouille);
    font-family:"Alfa Slab One",serif;font-size:14px;letter-spacing:.16em;
    text-transform:uppercase;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .cta-events:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--rouille)}
  .cta-events::after{content:" →";color:var(--dore)}

  /* Desktop : section events pleine largeur + grid 2 col d'événements */
  

  /* Paire de CTA Devis — Instagram + Mail */
  .cta-events-pair{
    display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
    margin:22px auto 4px;
  }
  .cta-events-pair .cta-events{margin:0;flex:1 1 200px;max-width:240px}
  .cta-events::after{content:none}  /* override : on retire la flèche du CTA seul */
  .cta-events .cta-ico{width:18px;height:18px;flex-shrink:0;vertical-align:middle}
  .cta-events{display:inline-flex;align-items:center;justify-content:center;gap:10px}
  /* Variante alt — fond crème + texte brun (style inverse pour différencier mail/insta) */
  .cta-events.alt{
    color:var(--brun);background:var(--creme-l);
    border:1px solid var(--brun);
  }
  .cta-events.alt:hover{background:var(--creme);box-shadow:4px 4px 0 var(--rouille)}

  /* Label "Demander un devis" au-dessus des 2 boutons CTA */
  .cta-events-label{
    text-align:center;font-family:"Special Elite",monospace;
    font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--rouille);font-weight:bold;
    margin:22px auto 12px;
  }
  .cta-events-label::before,.cta-events-label::after{
    content:"·····";color:var(--dore-d);margin:0 10px;letter-spacing:.1em;font-weight:normal;
  }
  /* Réduire la marge-top du pair puisque le label la fournit maintenant */
  .cta-events-pair{margin-top:0}

  /* Desserts : alignement strict des prix via grid (cookies à noms longs) */
  [data-panel="desserts"] .item-head{
    display:grid;grid-template-columns:1fr auto;
    align-items:baseline;gap:10px;
    border-bottom:1px dotted rgba(42,18,8,.3);padding-bottom:5px;
  }
  [data-panel="desserts"] .item-leader{display:none}
  [data-panel="desserts"] .item-name{font-size:20px;line-height:1.2}
  [data-panel="desserts"] .item-price{align-self:start}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (min-width: 900px) {
body{padding:32px 0}
    .shell{
      max-width:920px;
      min-height:auto;
      box-shadow:
        0 0 0 1px rgba(42,18,8,.25),
        0 30px 60px rgba(0,0,0,.55),
        0 12px 24px rgba(0,0,0,.35);
      border-radius:2px;
    }
    .inner{
      display:grid;
      grid-template-columns:1fr 1fr;
      column-gap:40px;
      padding:26px 36px 0;
    }
    .topbar,
    .card{grid-column:1 / -1}
    /* Hero card : layout vertical centré sur desktop (pas de diptyque ici),
       seul le titre Food & Truck reste en bandeau pleine largeur en haut.
       Le diptyque 2-col commence après, sur les sections #menu / #info. */
    .card{
      padding:32px 36px 36px;
      text-align:center;
    }
    .card .ft-slab{margin:0 0 4px}
    .card .ft-slab .ft-stage{height:96px}
    .card .ft-slab .ft-word{font-size:48px;padding:4px 20px}
    .card .ft-slab .ft-amp{font-size:54px}
    /* Trajectoire camion adaptée à la largeur de la card desktop */
    @keyframes ft-roll-desktop{0%{transform:translateX(-200px)}100%{transform:translateX(820px)}}
    .card .ft-slab .ft-truck{animation-name:ft-roll-desktop;animation-duration:11s}
    .card .poster{margin:14px auto 0;max-width:380px}
    .card .ornament{margin:22px auto 0;max-width:420px}
    .card .sub{
      font-size:18px;line-height:1.5;text-align:center;margin:12px auto 0;
      max-width:46ch;
    }
    #menu,#info{padding:30px 0 10px;position:relative}
    #menu{grid-column:1;grid-row:3;padding-right:28px}
    #info{
      grid-column:2;grid-row:3;padding-left:28px;
      border:none;
    }
    /* Reliure centrale — gradient vertical qui s'estompe (effet pli papier) */
    #info::before{
      content:"";position:absolute;
      left:0;top:8%;bottom:8%;width:1px;
      background:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(42,18,8,.10) 8%,
        rgba(42,18,8,.28) 35%,
        rgba(42,18,8,.28) 65%,
        rgba(42,18,8,.10) 92%,
        transparent 100%
      );
      pointer-events:none;
    }
    /* Petit ornement losange doré au centre de la reliure */
    #info::after{
      content:"";position:absolute;
      left:-3.5px;top:50%;
      width:7px;height:7px;
      background:var(--dore-d);
      transform:translateY(-50%) rotate(45deg);
      opacity:.55;
      pointer-events:none;
    }
    .tabs{margin:24px 0 26px}
    .tab{font-size:14px;padding:14px 8px}
    .h2{font-size:62px}
    .h2-slab{font-size:19px}
    footer{padding:28px 36px;margin-top:14px}

.item-photo{width:110px;height:110px}

#events{grid-column:1 / -1;grid-row:4;padding:20px 0 10px}
    #events .events-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
    #events .event.more{grid-column:1 / -1}
}

@media (min-width: 1280px) {
.shell{max-width:1040px}
    .inner{column-gap:56px;padding:28px 44px 0}
    #menu{padding-right:36px}
    #info{padding-left:36px}
    .h2{font-size:72px}
}

/* =========================================================================
   ACCESSIBILITÉ — réduction des animations (vestibular disorders)
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .ft-truck,.ft-wheel,
  .tel-hint{animation:none !important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .panel.show{animation:none}
  #lightbox,#lightbox img{animation:none}
  .item-photo,.cta-ig,.cta-events,.mail-link,.ig-inline{transition:none}
}