/* ==========================================================================
   LOUKOUMADES — page dédiée, restructurée pour cibler "loukoumades
   Montpellier" (voir includes/pages.php pour le détail du cocon SEO,
   et templates/loukoumades.php pour les 13 sections et les liens internes
   contextuels vers la home/la carte/infos/le concept). Le configurateur
   est un assistant en 4 étapes propre à cette page (.lw-*, voir plus bas +
   assets/js/pages/loukoumades.js) — la homepage garde son teaser
   mono-écran plus simple (.composer-box/.cfg-row/.chips/.chip, moteur
   #sizeChips/#napChips/#topChips/#loukSummary de donkey-base.js,
   inchangé). Le reste réutilise les composants de donkey-base.css :
   .louk-reassure/.lr-item, .hero-wave, .louk-photo/.louk-grid,
   .menu-visible .menu-grid/.mdish/.nutri, .louk-events, .contact-form/
   .contact-row/.contact-field (partagés avec la page Infos), .cta-band
   (bloc "Commander des loukoumades"), et .faq-list/.faq-item pour la FAQ
   (contenu miroir du FAQPage JSON-LD, voir includes/schema.php).
   ========================================================================== */

/* 1. HERO — fond bleu plein + vague de sortie habituelle (.hero-wave,
   même path que le hero homepage/concept), texte clair pour le contraste.
   padding-top réduit par rapport aux autres heros bleus du site : le
   breadcrumb (Accueil > Loukoumades, 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. */
.louk-hero{position:relative;background:var(--blue-800);color:#fff;padding-top:150px;padding-bottom:100px}
.louk-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center}
.louk-hero h1{color:#fff}
/* .tag-phare est blanc sur bleu par défaut (donkey-base.css) — invisible
   sur ce hero, lui aussi bleu. On l'inverse ici uniquement. */
.louk-hero .tag-phare{background:#fff;color:var(--blue-800)}
.louk-hero-desc{color:rgba(255,255,255,.85);font-size:1.08rem;margin:14px 0 24px}
.louk-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}
.louk-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 2. RÉASSURANCE — bandeau autonome, .louk-reassure vient de donkey-base.css */
.louk-trust{padding:10px 0 50px}
.louk-reassure.center{justify-content:center;text-align:center;margin:0}

/* Intro du configurateur : sur mobile la version courte reprend le
   message de .louk-savoirfaire (section repliée, voir plus bas) —
   par défaut seule la version desktop est visible. */
.louk-composer-intro-mobile{display:none}

/* 3. CONFIGURATEUR — assistant en 4 étapes propre à cette page (box →
   nappage → toppings → commander), voir templates/loukoumades.php et
   assets/js/pages/loukoumades.js. La homepage garde son teaser
   mono-écran (.composer-box de donkey-base.css), inchangé. */
.louk-composer-sec{background:var(--off);padding-top:80px;padding-bottom:90px}

.lw-wizard{max-width:720px;margin:0 auto 22px;background:#fff;border-radius:26px;box-shadow:0 30px 60px -30px rgba(1,36,95,.35);overflow:hidden}

/* Indicateur d'étapes — pastille pleine + libellé bleu pour l'étape
   active, pastille "done" (contour bleu, fond clair) pour les étapes
   déjà vues et cliquables en arrière, pastille neutre pour ce qui suit
   (on avance uniquement via "Suivant", jamais en sautant en avant). */
.lw-steps{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 24px 22px;background:var(--off);border-bottom:1px solid var(--line)}
.lw-step-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;font-family:'Inter',sans-serif;cursor:default}
.lw-step-btn.active,.lw-step-btn.done{cursor:pointer}
.lw-step-dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--muted);display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:.9rem;transition:.2s}
.lw-step-name{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;transition:.2s}
.lw-step-btn.active .lw-step-dot{background:var(--blue-800);border-color:var(--blue-800);color:#fff}
.lw-step-btn.active .lw-step-name{color:var(--blue-800)}
.lw-step-btn.done .lw-step-dot{background:var(--blue-050);border-color:var(--blue-800);color:var(--blue-800)}
.lw-step-line{width:34px;height:2px;background:var(--line);flex:none;margin-bottom:22px}

.lw-panel{display:none;padding:32px 28px}
.lw-panel.active{display:block}
.lw-panel-title{font-family:'Baby Stingrays','Poppins',sans-serif;text-transform:uppercase;color:var(--blue-800);font-size:1.3rem;font-weight:400;letter-spacing:.02em;text-align:center;margin-bottom:6px}
.lw-panel-hint{text-align:center;color:var(--muted);font-size:.86rem;margin-bottom:22px}

/* Étape 1 — une box "imagée" plutôt qu'un simple chiffre : à défaut de
   4 photos produit distinctes par quantité, une icône boîte à emporter
   (même dessin) grandit réellement d'une carte à l'autre — la taille
   visuelle suit la quantité, ce qui reste plus honnête qu'une même
   photo recadrée avec juste un badge qui change. */
.lw-box-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lw-box-card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:border-color .2s,transform .2s,box-shadow .2s}
.lw-box-card:hover{transform:translateY(-3px)}
.lw-box-card.active{border-color:var(--blue-800);box-shadow:0 14px 26px -14px rgba(1,61,185,.5)}
.lw-box-icon{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;background:var(--blue-050);display:flex;align-items:center;justify-content:center}
.lw-box-icon svg{width:38%;height:38%;transition:width .2s,height .2s}
.lw-box-icon-sm svg{width:34%;height:34%}
.lw-box-icon-md svg{width:42%;height:42%}
.lw-box-icon-lg svg{width:52%;height:52%}
.lw-box-icon-xl svg{width:64%;height:64%}
.lw-box-count{position:absolute;bottom:6px;right:6px;background:var(--blue-800);color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:.78rem;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 10px -3px rgba(0,0,0,.4)}
.lw-box-name{font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;color:var(--ink)}
.lw-box-card.active .lw-box-name{color:var(--blue-800)}
.lw-box-price{font-family:'Poppins',sans-serif;font-weight:800;font-size:.86rem;color:var(--blue-800)}

/* Étapes 2 & 3 — nappages/toppings, même langage que .chip mais en
   plus grand (l'écran leur est entièrement dédié) */
.lw-chip-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lw-chip{font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;color:var(--blue-800);background:#fff;border:1.5px solid var(--line);padding:11px 20px;border-radius:999px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px}
.lw-chip:hover{border-color:var(--blue-300)}
.lw-chip.active{background:var(--blue-800);border-color:var(--blue-800);color:#fff;box-shadow:0 6px 14px -6px rgba(1,61,185,.6)}
.lw-chip.active::before{content:"✓";font-size:.76rem;font-weight:800}

/* Étape 4 — récap + CTA réelle vers le bloc de commande (donkey_nav_url
   home + #commander, comme le reste du site) */
.lw-summary-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:2px}
.lw-summary-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px dashed var(--line);font-size:.92rem;color:var(--ink)}
.lw-summary-list li:last-child{border-bottom:0}
.lw-summary-list b{font-weight:700}
.lw-summary-list span{font-family:'Poppins',sans-serif;font-weight:800;color:var(--blue-800);white-space:nowrap}
.lw-summary-total{display:flex;align-items:center;justify-content:space-between;background:var(--blue-050);border-radius:12px;padding:14px 18px;margin-bottom:22px;font-family:'Inter',sans-serif;font-weight:700;color:var(--blue-900)}
.lw-summary-total b{font-family:'Poppins',sans-serif;font-size:1.3rem;color:var(--blue-800)}
.lw-cta{display:flex;width:fit-content;margin:0 auto}

/* Pied — total qui se met à jour en direct + navigation ; masqué à la
   dernière étape (le total et le CTA sont déjà dans le récap). */
.lw-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:var(--off);border-top:1px solid var(--line)}
.lw-footer.lw-footer-hide{display:none}
.lw-total{display:flex;flex-direction:column;gap:2px;font-family:'Inter',sans-serif}
.lw-total span{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.lw-total b{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.25rem;color:var(--blue-800)}
.lw-nav{display:flex;align-items:center;gap:10px}
.lw-back{font-family:'Inter',sans-serif;font-weight:700;font-size:.88rem;color:var(--muted);background:none;border:0;cursor:pointer;padding:12px 6px}
.lw-back:hover{color:var(--blue-800)}
.lw-next{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-weight:800;font-size:.88rem;color:#fff;background:var(--blue-800);padding:13px 24px;border:0;border-radius:999px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.lw-next svg{width:16px;height:16px}
.lw-next:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(1,61,185,.6)}

@media(max-width:640px){
  .lw-steps{gap:6px;padding:22px 14px 18px}
  .lw-step-line{width:16px;margin-bottom:20px}
  .lw-step-name{display:none}
  .lw-panel{padding:26px 18px}
  .lw-box-grid{grid-template-columns:repeat(2,1fr)}
  .lw-footer{padding:16px 18px;flex-wrap:wrap}
}

/* Commande sur-mesure (> 16) — repliée par défaut (<details>, sans JS),
   ouverte automatiquement si on revient dessus après soumission
   (voir templates/loukoumades.php : attribut "open" si donkey_louk_order
   est présent dans l'URL). */
.louk-bulk{max-width:640px;margin:34px auto 0;background:#fff;border:1.5px dashed var(--line);border-radius:18px}
.louk-bulk summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 24px;font-family:'Inter',sans-serif;font-weight:700;color:var(--blue-800);font-size:.95rem}
.louk-bulk summary::-webkit-details-marker{display:none}
.louk-bulk summary::after{content:"+";font-size:1.4rem;line-height:1;font-weight:400;color:var(--blue-500);transition:transform .2s}
.louk-bulk[open] summary::after{transform:rotate(45deg)}
.louk-bulk-body{padding:0 24px 28px}
.louk-bulk-note{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 18px}
.louk-bulk-form{max-width:none;margin:0;box-shadow:none;border:0;padding:0;background:transparent}

/* 4. HISTOIRE — .louk-grid/.louk-photo viennent de donkey-base.css.
   Résumé court mobile uniquement (voir @media(max-width:640px) plus bas) :
   raccourcit la lecture avant d'atteindre le configurateur #composer. */
.louk-history{padding-top:100px;padding-bottom:100px}
.louk-history-mobile-summary{display:none}

/* 5. QUESTIONS FRÉQUENTES — .faq-list/.faq-item viennent de donkey-base.css */
.louk-faq{background:var(--off);padding-top:90px;padding-bottom:90px}

/* 6. NOS RECETTES — .menu-grid/.mdish/.nutri viennent de donkey-base.css
   (scopés à .menu-visible). Grille à 6 cartes plutôt que 3 (voir
   .menu-grid en repeat(3,1fr) par défaut, ajusté ici pour ne pas laisser
   une 6e carte orpheline sur une ligne de 3). */
.louk-flavors{padding-top:20px;padding-bottom:100px}
.louk-flavors .menu-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.louk-flavors .menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.louk-flavors .menu-grid{grid-template-columns:1fr}}

/* Placeholder "photo à venir" pour les recettes sans photo dédiée pour
   l'instant (voir donkey_louk_recipe_placeholder() dans
   templates/loukoumades.php) — même traitement que 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)}

/* 7. ÉVÉNEMENTS — .louk-events vient de donkey-base.css */
.louk-events-sec{padding-top:0;padding-bottom:110px}

@media(max-width:900px){
  .louk-hero-grid{grid-template-columns:1fr;gap:36px}
  .louk-hero-photo{aspect-ratio:16/10;max-width:520px;margin:0 auto}
}
@media(max-width:640px){
  /* Réassurance en carte "grouped list" iOS : une seule carte blanche
     arrondie, lignes séparées par un filet, icône + libellé alignés à
     gauche — plus app, moins de badges flottants centrés. */
  .louk-reassure.center{flex-direction:column;align-items:stretch;justify-content:center;gap:0;max-width:360px;margin:0 auto;background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 20px 44px -28px rgba(1,36,105,.28);overflow:hidden}
  .louk-reassure.center .lr-item{justify-content:flex-start;text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
  .louk-reassure.center .lr-item:last-child{border-bottom:0}
  .louk-bulk summary{padding:16px 20px}
  .louk-bulk-body{padding:0 20px 24px}

  /* Hero : le cadre photo dédié devient le fond plein bloc (voile bleu
     par-dessus pour garder le texte lisible) au lieu d'une image encadrée
     à part — plus compact, gagne de la hauteur. Même technique grid-area:1/1
     que .hero-bg (donkey-base.css) pour un remplissage fiable. */
  .louk-hero-grid{grid-template-columns:1fr;gap:0}
  .louk-hero-grid > .reveal:first-child{position:relative;z-index:1}
  .louk-hero-photo{position:absolute;inset:0;z-index:0;display:grid;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;opacity:1;transform:none;transition:none}
  .louk-hero-photo img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
  .louk-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,61,185,.80),rgba(1,61,185,.88))}

  /* Histoire + savoir-faire : blocs raccourcis pour arriver plus vite au
     configurateur #composer (moins de scroll avant de comprendre qu'on
     peut composer sa commande directement sur la page). */
  .louk-history{padding-top:56px;padding-bottom:44px}
  .louk-history .louk-photo{aspect-ratio:16/9}
  .louk-history-mobile-summary{display:block}
  .louk-history-full-text{display:none}

  /* Savoir-faire : plus un bloc à part sur mobile — son message est
     replié dans l'intro du configurateur juste en dessous (voir
     .louk-composer-intro-mobile), qui l'affiche à sa place. */
  .louk-savoirfaire{display:none}
  .louk-composer-intro-full{display:none}
  .louk-composer-intro-mobile{display:block}
}