@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
:root{--cream:#fbf6ec;--sand:#efe5d4;--ink:#35271f;--red:#a64030;--red2:#823225;--muted:#76675b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit}button{font:inherit}.top{height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,6vw,90px);border-bottom:1px solid #e5d9c8;background:#fffaf1;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;letter-spacing:.07em;text-decoration:none;white-space:nowrap}.brand em{font-style:normal;color:var(--red)}.mark{display:grid;place-items:center;background:var(--red);color:#fff;width:45px;height:45px;border-radius:50%;font-family:Georgia,serif;font-size:17px;letter-spacing:0}.top nav{display:flex;gap:28px}.top nav a,.head-actions a{text-decoration:none;font-weight:700;font-size:13px}.top nav a:hover{color:var(--red)}.head-actions{display:flex;align-items:center;gap:12px}.lang{background:none;border:1px solid #d3c4b2;padding:9px 12px;border-radius:6px;cursor:pointer}.small-cta,.btn{background:var(--red);color:#fff!important;border-radius:5px;padding:13px 18px;display:inline-block;text-decoration:none;font-weight:700}.small-cta:hover,.btn:hover{background:var(--red2)}.hero{min-height:590px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.hero-copy{padding:clamp(65px,9vw,130px) 7vw 60px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--red)}h1,h2{font-family:'Playfair Display',Georgia,serif;line-height:1.12;letter-spacing:-.03em}h1{font-size:clamp(45px,5.3vw,82px);margin:22px 0}h1 i{color:var(--red)}.hero-copy>p{font-size:17px;line-height:1.8;max-width:510px;color:var(--muted)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.btn.outline{background:transparent;color:var(--red)!important;border:1px solid var(--red)}.btn.outline:hover{background:#f4e8dd}.hero-foot{display:flex;gap:25px;margin-top:48px;font-size:12px;font-weight:700;color:var(--muted)}.hero-art{background:#e9d6bc;position:relative;min-height:470px;display:flex;align-items:center;justify-content:center;overflow:hidden}.sun{width:430px;height:430px;border-radius:50%;background:#d4a877;position:absolute;opacity:.75}.bowl{width:360px;height:220px;border-radius:25px 25px 170px 170px;background:var(--red);position:relative;margin-top:140px;box-shadow:0 22px 0 #bfa07e,0 35px 60px #7d563b66;border:12px solid #fff4e5;text-align:center;display:flex;align-items:center;justify-content:center}.greens{position:absolute;top:-128px;left:10px;right:10px;font-size:72px;letter-spacing:12px;color:#557e49;transform:rotate(-8deg)}.noodles{position:absolute;top:-55px;left:20px;right:20px;font-size:50px;color:#f9e8b8;letter-spacing:-12px}.bowl-inner{font-family:Georgia,serif;color:#f9e8d5;font-size:37px;line-height:1.1;letter-spacing:.08em;font-weight:bold}.art-caption{position:absolute;bottom:32px;letter-spacing:.24em;font-size:11px;font-weight:700;color:#77503b}.announcement{display:flex;justify-content:center;align-items:center;gap:25px;background:var(--red);color:#fff;padding:16px 20px;text-align:center;font-size:13px;font-weight:600}.announcement p{margin:0}.section{padding:95px clamp(20px,7vw,110px)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px}.section-head p{max-width:340px;line-height:1.7;color:var(--muted);font-size:14px}h2{font-size:clamp(35px,4vw,58px);margin:15px 0 30px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}.dish{background:#fffaf3;border:1px solid #e8dccd;border-radius:12px;overflow:hidden}.dish-art{height:175px;background:#eee0cd;display:grid;place-items:center;font-size:75px}.dish:nth-child(2n) .dish-art{background:#e6d1bc}.dish:nth-child(3n) .dish-art{background:#e8e4ce}.dish-content{padding:20px}.dish h3{font-size:19px;margin:0 0 9px}.dish p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}.menu-disclaimer{font-size:12px;color:var(--muted);margin-top:23px}.story{background:var(--sand);padding:85px clamp(20px,10vw,160px);display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:60px}.story p{line-height:1.85;max-width:620px;color:var(--muted)}.text-link{color:var(--red);font-weight:800;text-decoration:none}.story-stamp{width:245px;height:245px;border:3px solid var(--red);border-radius:50%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--red);font-family:Georgia,serif;font-size:31px;transform:rotate(-9deg);outline:1px dashed var(--red);outline-offset:9px}.story-stamp small{font:700 11px 'DM Sans',sans-serif;letter-spacing:.25em;margin-top:12px}.contact{text-align:center}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:left;border-top:1px solid #d8c8b5;padding-top:30px}.contact-grid h3{color:var(--red);font-size:16px}.contact-grid p{line-height:1.7;color:var(--muted)}.contact-grid a{font-weight:700;text-decoration:none}footer{background:var(--ink);color:#f5e9d9;padding:30px clamp(20px,7vw,110px);display:flex;justify-content:space-between;gap:20px;font-size:12px}@media(max-width:900px){.top{height:75px;padding:0 20px}.top nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:65px 25px}.hero-art{min-height:390px}.sun{width:310px;height:310px}.bowl{transform:scale(.8)}.menu-grid{grid-template-columns:repeat(2,1fr)}.story{grid-template-columns:1fr}.story-stamp{margin:30px auto}.section-head{display:block}}@media(max-width:550px){.brand{font-size:15px}.mark{width:38px;height:38px}.small-cta{display:none!important}.hero-foot{flex-wrap:wrap;gap:10px}.menu-grid,.contact-grid{grid-template-columns:1fr}.section{padding:65px 20px}.story{padding:70px 25px}.announcement{gap:10px}footer{flex-direction:column}.hero-art{min-height:330px}}

.cart{margin-top:35px;padding:25px;background:#fffaf3;border:1px solid #e8dccd;border-radius:12px}.cart input{padding:10px;border:1px solid #d3c4b2;border-radius:6px}.cart button{cursor:pointer}.cart-line,.dish-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.dish-actions button,.cart-line button{background:#a64030;color:white;border:0;border-radius:5px;padding:9px 13px;cursor:pointer}.cart-line button{font-size:20px;padding:2px 12px}.cart #demoNotice{color:#823225;font-size:13px}.cart #cartMessage{font-weight:700}
.dish-art img{display:block;width:100%;height:100%;object-fit:cover}.dish-art{overflow:hidden}.dish-art img:hover{transform:scale(1.035);transition:transform .25s ease}

/* Fenêtre d'agrandissement : l'image entière reste visible sans recadrage. */
.dish-art.photo-zoom{cursor:zoom-in;position:relative}
.dish-art.photo-zoom:focus-visible{outline:3px solid #a64030;outline-offset:-3px}
.photo-viewer[hidden]{display:none!important}
.photo-viewer{position:fixed;inset:0;z-index:1000;background:rgba(18,13,10,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 18px 28px;gap:14px}
.photo-viewer img{display:block;max-width:min(100%,1100px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 12px 50px #0008}
.photo-viewer-caption{color:white;font-weight:700;font-size:18px;margin:0;text-align:center}
.photo-viewer-close{position:absolute;right:18px;top:12px;color:white;background:#a64030;border:0;border-radius:50%;width:46px;height:46px;font-size:32px;line-height:1;cursor:pointer}
.photo-viewer-close:focus-visible{outline:3px solid white;outline-offset:3px}

.dish-art img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}.dish-art{overflow:hidden}.photo-viewer[hidden]{display:none!important}.photo-viewer{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.89);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:55px 15px 25px}.photo-viewer img{max-width:95vw;max-height:77vh;object-fit:contain}.photo-viewer-caption{color:white;text-align:center}.photo-viewer-close{position:absolute;top:12px;right:25px;font-size:42px;background:none;color:white;border:0;cursor:pointer}

/* Identité visuelle officielle et présentation des plats */
.top{min-height:90px;height:auto;padding-top:8px;padding-bottom:8px}
.brand-logo{width:68px;height:68px;object-fit:contain;border-radius:50%;flex-shrink:0}
.brand-name{font-size:18px}
.dish-art{height:auto;aspect-ratio:1.32 / 1;background:#f2e5d3}
.dish-art img{width:100%;height:100%;object-fit:contain;background:#f2e5d3}
.dish-art img:hover{transform:none}
.dish-content{padding:17px 18px 19px}
.dish-actions strong{font-size:14px;font-weight:500;color:#493d33}
.dish-actions button{font-size:14px;font-weight:700;padding:12px 19px;border-radius:7px}
@media(max-width:550px){.brand-logo{width:55px;height:55px}.brand-name{font-size:14px}.top{min-height:76px}.dish-art{aspect-ratio:1.32 / 1}}

/* Boutons principaux plus visibles */
.hero-actions .btn{font-size:clamp(16px,1.4vw,20px);padding:19px 27px;min-height:62px;display:inline-flex;align-items:center;justify-content:center;text-align:center;border-radius:9px;box-shadow:0 5px 16px #35271f16}.hero-actions .btn.outline{border-width:2px}.hero-actions{gap:16px}.cart #demoCheckout{font-size:17px;padding:17px 24px;border-radius:8px}@media(max-width:550px){.hero-actions .btn{width:100%;padding:17px 18px}}

/* Nouvelle bannière approuvée : visuel décoratif, boutons HTML accessibles. */
@media(min-width:901px){
.hero-trocadero{position:relative;display:block;min-height:0;aspect-ratio:1786 / 741;background:#f9f5ee url('hero-trocadero.webp') center center / 100% 100% no-repeat}
.hero-trocadero .hero-copy{position:absolute;inset:0;padding:0;pointer-events:none}
.hero-trocadero .hero-copy>.eyebrow,.hero-trocadero h1,.hero-trocadero .hero-copy>p,.hero-trocadero .hero-foot,.hero-trocadero .hero-art{display:none}
.hero-trocadero .hero-actions{position:absolute;left:4.15%;top:63.6%;width:31%;height:19.5%;display:flex;flex-direction:column;gap:1%;margin:0;pointer-events:auto}
.hero-trocadero .hero-actions .btn{width:100%;height:48%;min-height:0;opacity:0;border:0;padding:0;box-shadow:none}
.hero-trocadero .hero-actions .btn:focus-visible{opacity:1;outline:3px solid #a64030;background:#a64030}
}
@media(max-width:900px){
.hero-trocadero .hero-art{background:linear-gradient(0deg,#f6e5d1,#e8d1b5);display:block;min-height:430px;padding:22px}
.hero-trocadero .hero-art img{width:100%;max-height:260px;object-fit:contain;border-radius:12px}
.hero-trocadero .hero-location{text-align:center;padding:15px 8px}
.hero-trocadero .hero-location h2{font-size:clamp(24px,5vw,38px);margin:8px 0}
.hero-trocadero .hero-location em{color:var(--red)}
.hero-trocadero .hero-location p{font-size:14px;line-height:1.5}
}

/* Version 20 octobre : maquette approuvée, sans cartons ni câbles */
@media(min-width:901px){
.hero-trocadero{aspect-ratio:1839 / 769;background-image:url('hero-trocadero.webp?v=20261020facade2')}
.hero-trocadero .hero-actions{left:4.2%;top:62.5%;width:30%;height:20.5%;gap:1.4%}
.hero-trocadero .hero-actions .btn{height:49%;cursor:pointer}
}
@media(max-width:900px){.hero-trocadero .hero-art img{max-height:360px;object-fit:cover}.hero-trocadero .hero-art{min-height:0}}

.options-dialog{width:min(94vw,650px);max-height:85vh;overflow:auto;border:1px solid #decbb7;border-radius:15px;background:#fffaf3;padding:25px;box-shadow:0 18px 70px #0004}.options-dialog::backdrop{background:#231a16a8}.options-dialog h2{font-size:28px;margin:0 0 22px}.options-dialog fieldset{border:0;border-top:1px solid #e5d9c8;padding:14px 0 6px;margin:0}.options-dialog legend{font-weight:800;padding-top:15px}.option-line{display:flex;align-items:center;gap:12px;min-height:49px;cursor:pointer}.option-line input{accent-color:#a64030;width:18px;height:18px}.option-line span{flex:1}.option-line small{color:#76675b;min-width:72px;text-align:right;margin-left:20px}.options-footer{display:flex;align-items:center;gap:10px;justify-content:flex-end;position:sticky;bottom:-25px;background:#fffaf3;padding:15px 0}.options-footer strong{margin-right:auto}.options-footer button{background:#a64030;color:white;border:0;border-radius:7px;padding:12px;cursor:pointer}.options-footer button.cancel{background:#e8ded2;color:#35271f}.dish-actions button{font-size:13px;padding:9px 13px}.dish-actions strong{font-size:14px}@media(max-width:550px){.options-dialog{padding:16px}.options-dialog h2{font-size:24px}}

/* Photo avant les options de commande */
.options-dish-photo{display:block;width:100%;height:245px;object-fit:contain;background:#f7eee3;border-radius:12px;margin:0 0 22px;}
.options-dish-photo[hidden]{display:none;}
@media(max-width:550px){.options-dish-photo{height:195px;margin-bottom:16px}}

/* Catégories Saigon Bowl */
.menu-categories{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 22px;align-items:center}
.category-filter{border:1px solid #d8c8b5;border-radius:999px;background:#fffaf3;color:#35271f;padding:11px 16px;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.category-filter:hover,.category-filter:focus-visible{border-color:#a64030;outline-offset:2px}
.category-filter.is-active{background:#a64030;color:white;border-color:#a64030}
/* Afficher les produits entiers sans rogner les images */
.dish-art{height:auto;aspect-ratio:1.32 / 1;background:#f2e5d3;overflow:hidden}
.dish-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#f2e5d3}
@media(max-width:550px){.menu-categories{gap:7px}.category-filter{padding:9px 12px;font-size:12px}}

/* Zone cliquable sur le libellé de localisation de la bannière (desktop). */
.hero-map-hotspot{display:none}
.hero-map-mobile{display:none}
@media(min-width:901px){
 .hero-trocadero .hero-map-hotspot{display:block;position:absolute;left:69%;top:3.5%;width:17%;height:9%;z-index:3;cursor:pointer;border-radius:8px}
 .hero-trocadero .hero-map-hotspot:focus-visible{outline:3px solid #a64030;outline-offset:3px}
}
@media(max-width:900px){
 .hero-trocadero .hero-map-mobile{display:inline-block;color:#a64030;font-size:13px;font-weight:800;letter-spacing:.07em;text-decoration:underline;margin-bottom:12px}
}

/* Navigation Google Maps Saigon Bowl */
.top nav .nav-directions{color:#a64030;border:1px solid #a64030;border-radius:7px;padding:10px 13px;white-space:nowrap;transition:background .2s,color .2s}
.top nav .nav-directions:hover,.top nav .nav-directions:focus-visible{background:#a64030;color:#fff}
@media(max-width:900px){.top nav{display:flex;gap:10px}.top nav>a:not(.nav-directions){display:none}.top nav .nav-directions{font-size:11px;padding:9px 10px}.head-actions .small-cta{display:none}}
@media(max-width:550px){.top{gap:8px}.top nav .nav-directions{font-size:10px;padding:8px}.brand-name{display:none}}

/* Lisibilité accrue : menu de navigation, titre Les incontournables et filtres */
@media (min-width:901px) {
  .top nav a {font-size:17px;line-height:1.4;}
  .top nav {gap:26px;}
}
#menu .eyebrow {font-size:19px;font-weight:800;letter-spacing:.11em;line-height:1.5;}
#menu .section-head h2 {font-size:clamp(40px,4.3vw,64px);}
#menu .category-filter {font-size:16px;padding:13px 19px;}
@media (max-width:550px) {
  #menu .eyebrow {font-size:16px;}
  #menu .category-filter {font-size:14px;padding:11px 14px;}
}

/* Catégories agrandies : ordinateur, tablette et mobile */
#menu .menu-categories{gap:12px;margin-top:28px;margin-bottom:26px}
#menu .category-filter{font-size:17px;font-weight:700;line-height:1.35;padding:15px 21px;min-height:52px;border-radius:999px}
@media(max-width:550px){#menu .menu-categories{gap:9px}#menu .category-filter{font-size:15px;padding:12px 16px;min-height:46px}}

/* Navigation harmonisée — boutons cohérents, CTA mis en valeur */
@media(min-width:901px){
 .top nav{align-items:center;gap:10px;}
 .top nav a{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:10px 17px;border:1px solid #decbb7;border-radius:999px;background:transparent;color:var(--ink);font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;transition:background .2s,border-color .2s,color .2s;}
 .top nav a:hover,.top nav a:focus-visible{background:#f3e8dc;border-color:#bfa18c;color:var(--red);}
 .top nav a.nav-directions{min-height:43px;padding:10px 19px;border:1px solid var(--red);border-radius:999px;background:var(--red);color:#fff;font-size:15px;font-weight:800;letter-spacing:.015em;}
 .top nav a.nav-directions:hover,.top nav a.nav-directions:focus-visible{background:var(--red2);border-color:var(--red2);color:#fff;}
}
@media(max-width:900px){
 .top nav a.nav-directions{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:white;border-color:var(--red);border-radius:999px;font-weight:800;}
 .top nav a.nav-directions:hover{background:var(--red2);color:#fff;}
}

/* Sections avis et réseaux sociaux */
.social-proof{padding-top:46px;padding-bottom:46px;border-top:1px solid rgba(120,120,120,.2)}
.social-proof p{max-width:720px;line-height:1.7;margin:12px 0 20px}
.social-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.social-card{border:1px solid rgba(120,120,120,.25);border-radius:16px;padding:22px;background:rgba(255,255,255,.04)}
.social-card h3{margin:0 0 10px}
@media(max-width:650px){.social-cards{grid-template-columns:1fr}}

/* Facebook Page Plugin : flux public responsive */
.facebook-feed-card{min-width:0}
.facebook-feed{width:100%;max-width:500px;overflow:hidden;margin:1rem auto;border-radius:12px;min-height:400px}
.facebook-feed iframe{display:block;width:100%;max-width:500px;height:650px}
.facebook-feed-note{font-size:.85rem;opacity:.75}
@media(max-width:600px){.facebook-feed{max-width:100%}.facebook-feed iframe{width:100%}}

/* Reels Instagram officiels intégrés */
.instagram-feed-card{min-width:0}
.instagram-reels{display:grid;grid-template-columns:1fr;gap:18px;margin:18px 0}
.instagram-embed{min-width:0;width:100%;max-width:540px;margin:auto;overflow:hidden}
.instagram-embed .instagram-media{width:100%!important;min-width:0!important;max-width:540px!important;margin:0 auto!important}
@media(max-width:650px){.instagram-embed{max-width:100%}}

/* Mobile uniquement : masquer le doublon du libellé sous la façade ; conserver le lien Google Maps. */
@media (max-width:900px) {
  .hero-trocadero .hero-location > .eyebrow { display: none; }
}

/* Saigon Bowl – affichage double tarif, version informative */
.dish-actions{display:block!important;width:100%;}
.dual-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;margin-top:12px;}
.price-option{background:#fff3e4;border-radius:13px;padding:12px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-width:0;}
.price-option.delivery{background:#fbece8;}
.price-symbol{font-size:23px;line-height:1.1;color:#a52b20;}
.price-label{font-size:13px;font-weight:700;line-height:1.25;min-height:33px;color:#241a17;}
.price-option strong{font-size:clamp(17px,2.2vw,26px);color:#a5261c;white-space:nowrap;line-height:1.2;}
.price-pending{font-size:14px;color:#665b55;padding:12px 0;}
@media(max-width:480px){.dual-prices{gap:7px}.price-option{padding:10px 3px}.price-label{font-size:12px}.price-option strong{font-size:20px}}
