/* ============================================================
   You Sushi — styles personnalisés du site.
   ============================================================ */

/* Bouton "Commander" (#343a40) — libellé blanc sur foncé, contraste AA large. */
.btn-commander{
  background-color:#343a40;
  border-color:#343a40;
  color:#fff;
  font-weight:700;
}
.btn-commander:hover,
.btn-commander:focus,
.btn-commander:active{
  background-color:#23272b;
  border-color:#1d2124;
  color:#fff;
}

/* Barre commande collante (mobile uniquement), en overlay. */
.mobile-order-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:none; align-items:center; gap:14px;
  background:#fff;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid #ECE7DD;
  box-shadow:0 -8px 24px -10px rgba(14,91,112,.35);
  transform:translateZ(0); /* couche de composition isolée */
}
.mobile-order-bar .mob-label{ font-weight:800; color:#0E5B70; font-size:.98rem; line-height:1.12; }
.mobile-order-bar .mob-label small{ display:block; color:#5C6B68; font-weight:600; font-size:.78rem; }
.mobile-order-bar .btn{ margin-left:auto; white-space:nowrap; border-radius:8px; padding:13px 22px; }

@media (max-width:767.98px){
  .mobile-order-bar{ display:flex; }
}

/* ============================================================
   Bandeau horizontal des catégories — défilement au doigt sur mobile/tablette.
   On force le scroll natif et on masque les flèches (inutiles au tactile),
   en !important pour battre un éventuel style inline du plugin du thème.
   Desktop : bandeau inchangé (flèches conservées).
   ============================================================ */
@media (max-width:991.98px){
  .hscroll .scroll{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x !important;
    transform:none !important;
    scroll-snap-type:x proximity;
  }
  .hscroll .scroll li{ scroll-snap-align:center; }
  .hscroll .prevsymbol, .hscroll .nextsymbol{ display:none !important; }
}

/* ============================================================
   Menu de navigation mobile — lisibilité + cibles tactiles
   (desktop inchangé). La collapse ouverte reçoit un fond lisible.
   ============================================================ */
@media (max-width:991.98px){
  #navbarCollapse.show, #navbarCollapse.collapsing{
    background:#fff; border-radius:14px; margin-top:8px; padding:8px 6px 12px;
    box-shadow:0 18px 40px -18px rgba(14,91,112,.45);
  }
  #navbarCollapse.show .nav-link, #navbarCollapse.collapsing .nav-link{
    padding:14px 14px; font-size:1.06rem; border-bottom:1px solid #f4f1ea; color:#0E5B70;
  }
  #navbarCollapse.show .nav-item:last-of-type .nav-link{ border-bottom:0; }
  #navbarCollapse.show .btn-commander{ display:block; width:100%; margin-top:12px; }
}

/* ============================================================
   Fenêtre flottante "détail produit" — design moderne (in-page).
   Carte 2 colonnes (photo / détail), composition à puces, pied prix+CTA.
   Ouverte au clic sur un produit ; fermée au clic ailleurs / croix / Échap.
   ============================================================ */
.js-product{ cursor:pointer; transition:transform .18s ease; }
.js-product:hover{ transform:translateY(-4px); }
.js-product:focus-visible{ outline:3px solid rgba(14,91,112,.4); outline-offset:3px; border-radius:8px; }

.product-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; }
.product-modal.open{ opacity:1; visibility:visible; }
.product-modal[hidden]{ display:none; }
.product-modal__backdrop{ position:absolute; inset:0; background:rgba(14,30,34,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

.product-modal__card{ position:relative; z-index:1; width:100%; max-width:760px; max-height:90vh; overflow:hidden;
  display:grid; grid-template-columns:1.05fr 1fr;
  background:#fff; border-radius:24px; box-shadow:0 40px 90px -25px rgba(10,30,35,.6);
  transform:translateY(20px) scale(.96); opacity:.5;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .32s; font-family:"Raleway",sans-serif; }
.product-modal.open .product-modal__card{ transform:none; opacity:1; }

.product-modal__close{ position:absolute; top:16px; right:16px; z-index:3; width:42px; height:42px; border:0;
  background:rgba(255,255,255,.92); border-radius:50%; color:#16242A; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.45); transition:background .2s, transform .25s; }
.product-modal__close:hover{ background:#fff; transform:rotate(90deg); }

.pm-photo{ position:relative; background:#EAF2F3; }
.pm-photo img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }

.pm-body{ padding:34px 32px 28px; display:flex; flex-direction:column; overflow-y:auto; }
.pm-sub{ align-self:flex-start; background:#EAF2F3; color:#0E5B70; font-weight:800; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.12em; padding:6px 13px; border-radius:999px; margin-bottom:14px; }
.pm-name{ font-size:1.85rem; color:#0E5B70; font-weight:800; line-height:1.08; margin:0 0 18px; letter-spacing:-.01em; }

.pm-compo{ margin:0 0 6px; }
.pm-compo__label{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:800; color:#7A8480; margin:0 0 10px; }
.pm-compo__list{ list-style:none; margin:0; padding:0; }
.pm-compo__list li{ position:relative; padding:0 0 9px 22px; color:#3b4a47; font-size:.97rem; font-weight:600; }
.pm-compo__list li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:#90C79B; }

.pm-foot{ margin-top:auto; padding-top:20px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.pm-price{ font-size:1.85rem; font-weight:800; color:#0E5B70; line-height:1; }
.pm-cta{ margin:0; }
.pm-note{ color:#727C78; font-size:.78rem; font-weight:600; margin:14px 0 0; }

@media (max-width:680px){
  .product-modal__card{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; border-radius:20px; }
  .pm-photo img{ min-height:0; height:auto; aspect-ratio:16/10; }
  .pm-body{ padding:24px 22px; }
  .pm-name{ font-size:1.5rem; }
  .pm-cta{ margin-left:0; width:100%; }
}

/* ============================================================
   Améliorations UX & accessibilité.
   ============================================================ */

/* a11y : focus clavier visible partout. */
.btn:focus-visible, a:focus-visible, [role="button"]:focus-visible,
.product-modal__close:focus-visible{
  outline:3px solid #0E5B70 !important; outline-offset:2px; border-radius:6px;
}
.btn-commander:focus-visible{ outline-color:#0E5B70 !important; box-shadow:0 0 0 4px rgba(14,91,112,.35); }

/* Prix produit (carte) : bleu canard lisible (AA), corail réservé à l'action */
.product-price{ color:#0E5B70; font-weight:800; font-size:1.25rem; line-height:1; }

/* Contraste des textes secondaires sur la carte produit */
.product .text-muted{ color:#5E6A6E; }

/* Navbar : onglet de la page courante */
.navbar-nav .nav-link.active{ color:#0E5B70 !important; font-weight:800; position:relative; }
.navbar-nav .nav-link.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#0E5B70; border-radius:2px; }
/* CTA navbar : léger surpoids pour le détacher des liens (desktop) */
.navbar .btn-commander{ padding-left:1.4em; padding-right:1.4em; }

/* Bandeau catégories : état actif marqué + repère de défilement mobile */
.hscroll .scroll .nav-link.active span{ color:#0E5B70 !important; font-weight:800; }
@media (max-width:991.98px){
  .hscroll{ position:relative; }
  /* Fondu à droite : signale qu'on peut faire défiler, en laissant un demi-item visible estompé */
  .hscroll::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:60px; pointer-events:none; z-index:2;
    background:linear-gradient(90deg, rgba(254,250,234,0), rgba(254,250,234,.6) 50%, #fefaea); }
  /* Icônes plus compactes : on voit davantage de catégories d'un coup */
  .hscroll .scroll li a svg{ width:70px !important; margin-top:-24px !important; margin-bottom:-10px !important; }
  .hscroll .scroll li a{ padding:.85em .9em !important; }
  .hscroll .scroll li a span{ font-size:.72rem !important; }
}

/* Mobile : barre commande sticky ne doit pas masquer le footer / chevaucher scrollTop */
@media (max-width:767.98px){
  body{ padding-bottom:74px; }
  #scrollTop{ bottom:84px !important; }
}

/* a11y : cible tactile de la croix de modale >= 44px */
.product-modal__close{ width:44px; height:44px; }

/* Réassurance accolée aux CTA Commander pleine largeur */
.cta-reassure{ color:#727C78; font-size:.82rem; font-weight:600; margin:12px 0 0; text-align:center; }

/* Formulaires : message de résultat + captcha */
.h-captcha{ margin:1rem 0; }
.form-result{ font-weight:700; min-height:1.4em; }
.form-result.text-success{ color:#0E5B70 !important; }

/* Contraste AA : le .text-muted du thème (#868e96 ≈ 3.3:1) est trop clair -> assombri (>4.5:1). */
.text-muted{ color:#5C6B68 !important; }

/* Header (navbar figée) : voile translucide léger, SANS backdrop-filter
   (le flou recalcule un repaint à chaque frame de scroll = saccades). */
.navbar.bg-fixed-white,
.navbar.bg-fixed-white.fixed-top{
  background-color:rgba(255,255,255,.9) !important;
}
/* Navbar figée : pas d'ombre portée (repaint à chaque frame quand le contenu
   défile dessous) + couche de composition isolée pour ne pas repeindre au scroll. */
.navbar.bg-fixed-white.fixed-top{
  box-shadow:none !important;
  border-bottom:1px solid rgba(14,91,112,.10);
  transform:translateZ(0);
}

/* Menu mobile : animation d'ouverture/fermeture via grid-template-rows 0fr->1fr
   (s'anime sur la hauteur RÉELLE du contenu = symétrique ouverture/fermeture,
   contrairement à max-height). Le contenu est dans .navbar-collapse-inner. */
@media (max-width:991.98px){
  #navbarCollapse.navbar-collapse{
    display:grid !important; grid-template-rows:0fr;
    opacity:0; visibility:hidden;
    transition:grid-template-rows .33s ease, opacity .25s ease, visibility 0s linear .33s;
  }
  #navbarCollapse.navbar-collapse.show{
    grid-template-rows:1fr; opacity:1; visibility:visible;
    transition:grid-template-rows .33s ease, opacity .25s ease, visibility 0s;
  }
  #navbarCollapse .navbar-collapse-inner{ overflow:hidden; min-height:0; }
}
/* Desktop : le wrapper s'efface pour ne pas perturber la mise en page d'origine. */
@media (min-width:992px){
  #navbarCollapse .navbar-collapse-inner{ display:contents; }
}

/* Menu mobile : items alignés à droite (indépendant de .show, sinon l'alignement
   saute à gauche pendant l'animation de fermeture). */
@media (max-width:991.98px){
  #navbarCollapse .navbar-nav{ text-align:right; align-items:flex-end; }
  #navbarCollapse .navbar-nav .nav-link{ text-align:right; }
  #navbarCollapse .d-flex{ justify-content:flex-end !important; }
}

/* Restaurants (home) : toute la carte (picto + nom) est cliquable, grande zone */
.resto-link{ display:block; text-decoration:none; border-radius:14px; transition:transform .18s ease, background .18s ease; }
.resto-link:hover, .resto-link:focus-visible{ transform:translateY(-3px); background:rgba(14,91,112,.05); outline:none; }
.resto-link:focus-visible{ box-shadow:0 0 0 3px rgba(14,91,112,.35); }
.resto-link p{ margin-bottom:0; }

/* "Commander" flottant en bas à droite (desktop, pages carte) */
.carte-fab-order{ display:none; }
@media (min-width:768px){
  .carte-fab-order{
    display:inline-flex; align-items:center; gap:.5em; position:fixed; right:24px; bottom:24px; z-index:1025;
    background:#343a40; color:#fff; font-weight:700; text-decoration:none;
    padding:14px 24px; border-radius:8px; box-shadow:0 16px 34px -12px rgba(0,0,0,.5);
    transition:background .2s, transform .2s;
  }
  .carte-fab-order:hover, .carte-fab-order:focus-visible{ background:#23272b; color:#fff; transform:translateY(-2px); }
}

/* Fiche produit (fenêtre) : description / composition centrée */
.pm-body{ align-items:center; text-align:center; }
.pm-sub{ align-self:center; }
.pm-compo{ width:100%; }
.pm-compo__list{ display:inline-block; text-align:left; }

/* Bandeau des catégories : collant sous le header, bandeau ENTIER (pictos + noms) visible */
/* top légèrement < hauteur navbar (56,8px) : recouvrement masqué par le header,
   donc aucun fond visible entre le header et le bandeau. */
.hscroll{ position:sticky; top:55px; z-index:1019; background:#fefaea; transform:translateZ(0); }

/* Pages SEO (contenu rédactionnel) */
.seo-content h2{ font-size:1.55rem; color:#0E5B70; font-weight:800; margin:2rem 0 .7rem; }
.seo-content h3{ font-size:1.18rem; color:#0E5B70; font-weight:700; margin:1.4rem 0 .5rem; }
.seo-content p{ color:#3b4a47; line-height:1.75; margin:0 0 1rem; }
.seo-content ul, .seo-content ol{ color:#3b4a47; line-height:1.7; margin:0 0 1.2rem 1.2rem; }
.seo-content li{ margin-bottom:.4rem; }
.seo-content a{ color:#0E5B70; text-decoration:underline; }
.seo-content section{ margin-bottom:1.4rem; }

/* Cartes produit : socle moderne (fond, coins, ombre) + image cadrée homogène */
.products-grid .product{
  background:#fff; border-radius:18px; padding:14px 14px 18px;
  box-shadow:0 12px 30px -18px rgba(14,91,112,.35);
  transition:box-shadow .2s ease;
}
.products-grid .product:hover{ box-shadow:0 22px 46px -16px rgba(14,91,112,.5); }
.products-grid .product-image{ border-bottom:0 !important; width:100%; }
.products-grid .product-image img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.products-grid .product .product-price{ display:inline-block; margin-top:.4rem; }