/* ==========================================================================
   LA CARTE — restructurée pour cibler "pita grecque Montpellier" (voir
   includes/pages.php pour le cocon SEO, templates/menu.php pour les 12
   sections et les liens internes contextuels vers la home/Loukoumades/
   Infos/Le concept). Les catégories produit gardent le bleu du hero (pas
   d'alternance blanc/off-white), et les .mdish deviennent des cartes
   blanches flottantes plutôt que du texte à même le fond — sinon le
   contenu (texte foncé sur fond bleu) deviendrait illisible. Les
   sections plus "SEO/service" en fin de page (options alimentaires,
   bloc local, FAQ) repassent en blanc/off-white, comme sur Loukoumades/
   Infos. Réutilise .mdish/.mdish-photo/.nutri/.tag/.mdish-more,
   .menu-grid (donkey-base.css), .faq-list/.faq-item, et .order/
   .order-cta/.delivery-btns/.btn-ubereats/.btn-deliveroo/.btn-justeat
   pour la commande finale.
   ========================================================================== */

/* 1. HERO — texte à gauche / vraie photo à droite (même langage que
   .louk-hero-grid/.louk-hero-photo sur la page Loukoumades), reste court.
   padding-top réduit : le breadcrumb (Accueil > La carte, activé pour
   cette page en SEO) rendu juste au-dessus a déjà sa propre marge de
   dégagement du header (.donkey-breadcrumb{padding-top:130px},
   donkey-base.css) — pas besoin de la cumuler ici. */
.menu-hero{background:var(--blue-800);padding-top:150px;padding-bottom:90px}
.menu-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center}
.menu-hero-desc{color:rgba(255,255,255,.85);font-size:1.08rem;margin:14px 0 24px}
.menu-hero-photo{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(1,20,64,.55);border:6px solid #fff;aspect-ratio:4/5}
.menu-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 2. NAV DE CATÉGORIES COLLANTE — bleue comme le reste de la page ; les
   pastilles passent donc en "chips translucides sur bleu" (même langage
   que .le-tags span ailleurs sur le site), avec la pastille active en
   blanc plein pour rester bien visible (l'inverse de l'ancien blanc/bleu
   aurait rendu la pastille active invisible, bleu sur bleu). */
.menu-jumpnav{position:sticky;top:84px;z-index:90;background:var(--blue-800);box-shadow:0 12px 24px -18px rgba(1,36,95,.45);transition:transform .35s ease,opacity .35s ease}
.menu-jumpnav.is-hidden{transform:translateY(-130%);opacity:0;pointer-events:none}
.menu-jumpnav-inner{display:flex;gap:10px;overflow-x:auto;padding:14px 24px;scrollbar-width:none}
.menu-jumpnav-inner::-webkit-scrollbar{display:none}
.jump-btn{flex:none;font-family:'Inter',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.14);white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.jump-btn:hover{border-color:rgba(255,255,255,.6)}
.jump-btn.active{background:#fff;border-color:#fff;color:var(--blue-800)}

/* 3. SECTIONS PAR CATÉGORIE — toutes en bleu plein */
.menu-cat-section{background:var(--blue-800);padding-top:70px;padding-bottom:70px;scroll-margin-top:150px}
.menu-cat-head{margin-bottom:36px}
.menu-cat-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-top:6px}
.menu-cat-desc{color:rgba(255,255,255,.85);font-size:1rem;max-width:520px;margin:10px 0 0}

/* CTA "Commander"/"Découvrir tous nos loukoumades" en bas de certaines
   catégories (Pitas, Loukoumades) — le bouton Commander doit pouvoir
   apparaître à plusieurs endroits de la page, pas seulement en bloc 11. */
.menu-cat-cta{text-align:center;margin-top:40px}

/* .mdish devient une carte blanche flottante (le texte foncé d'origine
   ne peut pas rester à même le fond bleu) */
.menu-cat-section .mdish{background:#fff;border-radius:22px;padding:16px 16px 22px;box-shadow:0 26px 48px -26px rgba(1,20,64,.5)}
.menu-cat-section .mdish-photo{border-radius:16px}

/* Pitas (Meraki/Greeko/Klassiko) — sélecteurs pain/viande + prix réel,
   voir templates/menu.php ($donkey_pitas) et assets/js/pages/menu.js
   pour la bascule photo/prix au clic. */
.mdish-pita-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .32s ease,transform .32s ease}
.mdish-pita-img.is-swapping{opacity:0;transform:scale(.96)}
.mdish-pita-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.mdish-pita-opt-row{display:flex;align-items:center;gap:10px}
.mdish-pita-opt-label{font-family:'Poppins',sans-serif;font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);flex:none;width:58px}
.mdish-pita-bread,.mdish-pita-meat,.mdish-frites-feta,.mdish-salad-meat{flex:1}
.mdish-pita-bread .chip,.mdish-pita-meat .chip,.mdish-frites-feta .chip,.mdish-salad-meat .chip{padding:6px 12px;font-size:.78rem}
.mdish-pita-footer{display:flex;align-items:baseline;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.mdish-pita-cal{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--muted)}
/* FRITES GRECQUES — réutilise .mdish-pita-opts/.mdish-pita-opt-row/.mdish-pita-opt-label
   (mise en page identique aux sélecteurs pitas) pour l'option feta râpée
   (toggle simple sur chacune des 2 fiches, pas de paire exclusive). */
.mdish-frites .mdish-pita-opts{margin-top:14px;margin-bottom:0}
.menu-cat-section .mdish-more{background:#fff;color:var(--blue-900);padding:26px}
.menu-cat-section .mdish-more .mm-badge{background:var(--blue-050);color:var(--blue-800)}
.menu-cat-section .mdish-more h3{color:var(--blue-800)}
.menu-cat-section .mdish-more p{color:var(--muted)}
.menu-cat-section .mdish-more .mm-go{color:var(--blue-800)}

/* CARROUSEL GÉNÉRIQUE (.carousel/.carousel-track/.mdish-compact) —
   scroll-snap (même principe que .reviews-track sur la home,
   assets/css/pages/home.css), complété par des flèches prev/next et un
   drag souris (assets/js/pages/menu.js) : un simple overflow-x ne se
   défile qu'au swipe tactile ou au trackpad, pas à la molette d'une
   souris classique côté desktop. Snap en "proximity" (pas "mandatory"
   comme .reviews-track) pour ne pas forcer un re-snap brusque pendant le
   drag. Utilisé par Boissons (liste à noms courts, sans
   description) ; réutilise .mdish/.mdish-photo pour rester cohérent avec
   le reste de la carte. */
.carousel{position:relative}
.carousel-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 24px;padding:10px 4px 18px;scrollbar-width:none;cursor:grab}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.mdish-compact{flex:0 0 190px;scroll-snap-align:start;text-align:center}
.mdish-compact .mdish-photo{margin-bottom:12px}
.mdish-compact .mdish-placeholder svg{width:46px;height:46px}
.mdish-compact h3{font-size:1rem;line-height:1.3}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--blue-800);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 22px -10px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s,opacity .2s}
.carousel-nav svg{width:18px;height:18px}
.carousel-nav:hover{transform:translateY(-50%) scale(1.08)}
.carousel-nav:active{transform:translateY(-50%) scale(.94)}
.carousel-nav:disabled{opacity:0;pointer-events:none}
.carousel-prev{left:-16px}
.carousel-prev svg{transform:scaleX(-1)}
.carousel-next{right:-16px}
@media(max-width:760px){
  .carousel-nav{display:none}
  .mdish-compact{flex-basis:42vw}
}

/* NOS MENUS — accordéon photo horizontal : un panneau déplié (photo
   pleine hauteur, prix en sceau, composition, CTA), les 2 autres réduits
   à une bande verticale avec le nom du menu. Le déplacement de largeur
   est animé (flex-basis), pas juste un fondu, pour que le clic se
   ressente comme une vraie ouverture plutôt qu'un changement d'onglet. */
.mma{display:flex;gap:14px;height:460px}
.mma-panel{position:relative;flex:0 0 92px;min-width:92px;border-radius:20px;overflow:hidden;cursor:pointer;background:var(--blue-900);transition:flex-basis .55s cubic-bezier(.65,0,.35,1),min-width .55s cubic-bezier(.65,0,.35,1)}
.mma-panel.active{flex:1 1 0;min-width:0}
.mma-bg{position:absolute;inset:0;display:block}
.mma-bg img{width:100%;height:100%;object-fit:cover;display:block}
.mma-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,20,64,.88),rgba(1,20,64,.15) 55%,rgba(1,20,64,.55))}
.mma-panel:not(.active) .mma-overlay{background:linear-gradient(0deg,rgba(1,20,64,.85),rgba(1,20,64,.35))}
/* Menu Étudiant — seule formule avec un prix affiché : tarif classique
   barré + bulle orange (#ff7a3d, même accent que /concept/) pour le
   tarif étudiant, voir templates/menu.php. */
.mma-price-wrap{position:absolute;top:18px;left:18px;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mma-price-barred{font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem;color:rgba(255,255,255,.8);text-decoration:line-through;white-space:nowrap}
.mma-price-bubble{font-family:'Poppins',sans-serif;font-weight:800;font-size:.85rem;color:#fff;background:#ff7a3d;padding:8px 16px;border-radius:999px;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);white-space:nowrap}
.mma-label{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;opacity:1;transition:opacity .3s ease}
.mma-panel.active .mma-label{opacity:0;pointer-events:none}
.mma-label-txt{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Poppins',sans-serif;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;white-space:nowrap}
.mma-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 30px;opacity:0;transform:translateY(14px);transition:opacity .35s ease .1s,transform .35s ease .1s;pointer-events:none}
.mma-panel.active .mma-content{opacity:1;transform:translateY(0);pointer-events:auto}
.mma-content .mma-eyebrow{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75);margin-bottom:6px}
.mma-title{display:block;font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;font-size:1.7rem;font-weight:400;letter-spacing:.02em;color:#fff;margin-bottom:8px}
.mma-desc{display:block;color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.5;max-width:360px;margin-bottom:14px}
.mma-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mma-tags span{font-family:'Poppins',sans-serif;font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 13px;border-radius:999px}
.mma-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-weight:800;font-size:.85rem;color:var(--blue-800);background:#fff;padding:12px 22px;border-radius:999px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.mma-cta svg{width:16px;height:16px;transition:transform .25s ease}
.mma-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,0,0,.4)}
.mma-cta:hover svg{transform:translateX(3px)}
.mma-panel:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* En mobile, un accordéon HORIZONTAL (5 bandes côte à côte) n'a pas la
   largeur pour exister — et empiler les 5 formules toujours dépliées
   forçait un scroll interminable de photos plein écran. On garde donc
   le même principe qu'en desktop (une formule ouverte à la fois) mais
   décliné à la verticale : la formule active devient une carte complète,
   les autres se réduisent à une ligne compacte (miniature + nom + prix),
   pour que les 5 formules tiennent presque toutes à l'écran d'un coup. */
@media(max-width:760px){
  .mma{flex-direction:column;height:auto;gap:10px}
  .mma-panel,.mma-panel.active{flex:none;min-width:0;width:100%}
  .mma-bg{position:relative;inset:auto}
  .mma-overlay{display:none}

  .mma-panel:not(.active){display:flex;align-items:center;gap:12px;padding:8px;border-radius:16px}
  .mma-panel:not(.active) .mma-bg{order:1;width:56px;height:56px;flex:none;border-radius:12px;overflow:hidden}
  .mma-panel:not(.active) .mma-label{order:2;position:static;flex:1;display:block;padding:0;opacity:1}
  .mma-panel:not(.active) .mma-label-txt{writing-mode:horizontal-tb;transform:none;font-size:.92rem}
  .mma-panel:not(.active) .mma-price-wrap{order:3;position:static;flex:none;gap:5px}
  .mma-panel:not(.active) .mma-price-barred{font-size:.66rem}
  .mma-panel:not(.active) .mma-price-bubble{font-size:.74rem;padding:5px 11px}
  .mma-panel:not(.active) .mma-content{display:none}
  .mma-panel:not(.active)::after{content:'';order:4;flex:none;width:7px;height:7px;margin-right:4px;border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);transform:rotate(-45deg)}

  .mma-panel.active .mma-bg{height:190px}
  .mma-panel.active .mma-label{display:none}
  .mma-panel.active .mma-content{display:block;position:static;opacity:1;transform:none;pointer-events:auto;padding:34px 20px 20px}
  .mma-desc{max-width:none}

  /* CTA centré et de taille raisonnable (pas pleine largeur) : bonne
     zone de tap sans pour autant écraser visuellement la carte. Coins
     en rectangle plutôt qu'en pilule, comme demandé. */
  .mma-cta{display:flex;width:fit-content;margin:14px auto 0;padding:13px 24px;border-radius:14px;font-size:.85rem}
}

/* Placeholder "photo à venir" — l'œil Donkey plutôt qu'une icône
   générique, sur un dégradé bleu clair pour rester repérable même sans
   photo (voir donkey_menu_photo_placeholder() dans templates/menu.php). */
.mdish-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--blue-050),#dfe9fb)}
.mdish-placeholder svg{width:38px;height:38px}
.mdish-placeholder span{font-family:'Poppins',sans-serif;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-500)}

/* 11. COMMANDER — le bloc utilise un H2 ("Commander Donkey à Montpellier")
   plutôt que le H3 par défaut de .order-cta (donkey-base.css, partagé
   avec la homepage) : même style, juste le bon niveau de titre pour la
   hiérarchie Hn de cette page. */
.order-cta h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px;color:#fff}

/* 12. FAQ — même convention que Loukoumades/Infos : fond off-white. */
.menu-faq{background:var(--off)}

@media(max-width:900px){
  .menu-hero-grid{grid-template-columns:1fr;gap:36px}
  .menu-hero-photo{aspect-ratio:16/10;max-width:520px;margin:0 auto}
}
@media(max-width:760px){
  .menu-hero{padding-top:120px;padding-bottom:60px}
  .menu-cat-section{padding-top:50px;padding-bottom:50px;scroll-margin-top:120px}

  /* Nav de catégories mobile — même logique que la barre de commande
     flottante : détachée des bords plutôt que collée en bandeau bleu
     plein, verre dépoli, pastilles sans bordure. Ne devient plus une
     barre solide mais une "vitre" qui laisse deviner le bleu de la page
     en dessous, avec la catégorie active en plein blanc pour rester
     bien repérable au défilement. */
  .menu-jumpnav{top:70px;background:var(--blue-800);box-shadow:none;padding:10px 0 0}
  .menu-jumpnav-inner{width:auto;max-width:none;margin:0 14px;padding:6px;gap:4px;background:rgba(255,255,255,.16);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.28);border-radius:18px;box-shadow:0 14px 32px -18px rgba(1,20,64,.6)}
  .jump-btn{padding:9px 16px;font-size:.72rem;border:none;background:transparent;transition:background .15s ease,color .15s ease,transform .15s ease}
  .jump-btn:active{transform:scale(.94)}
  .jump-btn.active{background:#fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
}