@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--cream:#f5f0e6;--ink:#171717;--orange:#ff704f;--line:#d7d0c3;--title:'Barlow Condensed','Arial Narrow',Impact,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #297263;outline-offset:5px}button{color:inherit}header{height:100px;margin:0 4.8%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:900 29px/.82 var(--title);letter-spacing:-1px;display:flex;flex-direction:column;transform:rotate(-3deg)}.brand span{font-size:32px}.brand span::first-letter{color:var(--orange)}nav{display:flex;gap:34px;font-size:14px;font-weight:600}nav a{position:relative;padding:10px 0}nav a:after{content:'';position:absolute;bottom:2px;left:0;height:2px;background:var(--orange);width:0;transition:width .25s}nav a:hover:after{width:100%}.button{border:0;border-radius:5px;padding:17px 25px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-3px);box-shadow:4px 5px 0 #17171725}.orange{background:var(--orange)}.dark{background:var(--ink);color:var(--cream)}.basket{gap:13px}#count{background:var(--cream);color:var(--ink);padding:4px 8px;border-radius:50%;font-size:12px}.hero{position:relative;padding:64px 4.8% 24px;min-height:690px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:700;display:flex;gap:9px;align-items:center}.eyebrow span{background:var(--orange);width:7px;height:7px;border-radius:50%}h1,h2,h3,p{margin-top:0}h1{font:800 clamp(60px,6.95vw,110px)/.94 var(--title);letter-spacing:-1.8px;margin:27px 0}em{font-style:normal;color:var(--orange)}.intro{line-height:1.65;max-width:360px;font-size:17px;margin-bottom:26px}.micro{font-size:12px;margin:20px 0 30px;color:#6e665a}.hero-art{position:relative;min-height:490px;display:flex;align-items:center;justify-content:center}.hero-art img{width:106%;height:auto;mix-blend-mode:multiply;position:relative;z-index:1;animation:arrive 1s ease-out}.orbit{position:absolute;width:90%;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;transform:rotate(10deg)}.orbit:after{content:'';position:absolute;inset:20px;border:1px dashed var(--line);border-radius:50%}.art-note{position:absolute;top:0;right:5%;font-size:14px;line-height:1.35;transform:rotate(8deg);z-index:2}.stamp{position:absolute;z-index:2;bottom:28px;right:0;background:var(--orange);width:124px;height:124px;border-radius:50%;text-align:center;display:flex;flex-direction:column;justify-content:center;font-size:11px;font-weight:700;transform:rotate(13deg)}.stamp b{font-size:43px;line-height:.7}.food-label{position:absolute;bottom:7%;left:0;z-index:2;background:var(--cream);border:1px solid var(--ink);padding:10px;font-size:11px;letter-spacing:1px;transform:rotate(-7deg)}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:23px;margin-top:20px;font-size:11px;letter-spacing:1px}.ticker{overflow:hidden;background:var(--orange);padding:17px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.ticker div{width:max-content;font:700 29px var(--title);letter-spacing:1px;animation:marquee 28s linear infinite}.ticker span{margin:0 40px}.menu-section{padding:95px 4.8%}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}h2{font:700 clamp(48px,5vw,76px)/.96 var(--title);letter-spacing:-1px;margin-bottom:24px}.section-top>p{font-size:15px;line-height:1.7;padding-bottom:7px}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px}.filters button{padding:12px 22px;border:1px solid var(--line);border-radius:30px;background:transparent;font-size:14px;transition:.2s}.filters button.active,.filters button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.product{border-top:1px solid var(--ink);padding-top:17px;animation:arrive .4s both}.product-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px}.product-top span:last-child{color:#766c5c}.product-img{aspect-ratio:1.23;overflow:hidden;position:relative;background:#eae2d4;border-radius:5px;margin-top:17px}.product-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .55s}.product:hover img{transform:scale(1.07) rotate(2deg)}.product-img .badge{position:absolute;left:15px;bottom:15px;background:var(--cream);padding:8px 11px;border-radius:2px;font-size:11px;font-weight:700}.product h3{font:700 32px var(--title);margin:18px 0 7px}.product p{font-size:14px;line-height:1.6;color:#62594d;min-height:45px}.product-bottom{display:flex;align-items:center;justify-content:space-between}.price{font-weight:700}.add{background:var(--ink);color:var(--cream);border:0;width:42px;height:42px;border-radius:50%;font-size:27px;transition:.25s}.add:hover{background:var(--orange);color:var(--ink);transform:rotate(90deg)}.menu-note{font-size:12px;color:#766c5c;margin-top:26px}.signature{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.signature-visual{position:relative;overflow:hidden;background:#eae2d4;display:flex;align-items:center}.signature-visual img{width:100%;height:auto;mix-blend-mode:multiply}.signature-copy{padding:76px 10%}.signature-copy>p{line-height:1.7;font-size:15px}.hotspot{position:absolute;border:1px solid var(--cream);background:var(--ink);color:white;width:38px;height:38px;border-radius:50%;font-size:24px;box-shadow:0 0 0 7px #ffffff25;transition:.2s}.hotspot.active,.hotspot:hover{background:var(--orange);color:var(--ink);transform:scale(1.12)}.h1{top:38%;left:38%}.h2{top:58%;left:67%}.h3{top:64%;left:35%}.visual-caption{position:absolute;bottom:22px;left:30px;font-size:11px;letter-spacing:2px}.ingredient-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);margin-top:30px;flex-wrap:wrap}.ingredient-tabs button{border:0;background:transparent;padding:12px 0;margin-right:13px;font-size:13px;border-bottom:2px solid transparent}.ingredient-tabs button.active{border-color:var(--orange)}.ingredient-detail{padding-top:22px;min-height:120px}.ingredient-detail h3{font-size:18px;margin-bottom:10px}.ingredient-detail p{font-size:14px;line-height:1.6;color:#62594d}.sharing{background:var(--ink);color:var(--cream);padding:85px 7%;position:relative;overflow:hidden}.sharing h2{font:800 clamp(64px,8vw,124px)/.94 var(--title);letter-spacing:-2px}.sharing h2 span{color:var(--orange)}.sharing p:not(.eyebrow){line-height:1.7;font-size:16px}.share-sticker{position:absolute;right:9%;top:28%;border:1px solid var(--orange);width:215px;height:215px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--orange);font:700 30px/1 var(--title);transform:rotate(12deg)}.share-sticker b{font-size:33px;margin-top:9px}.club{padding:90px 7%;display:grid;grid-template-columns:1fr 1fr;gap:12%}.club p{line-height:1.7}.visit{border-top:1px solid var(--ink);padding-top:24px}.tag{font-size:11px;letter-spacing:1.6px}.visit h3{font:700 37px var(--title);margin:20px 0 8px}.visit>p{font-size:14px}dl{margin-top:24px}dl div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}dd{margin:0}.visit .button{margin-top:15px}footer{margin:0 4.8%;border-top:1px solid var(--ink);padding:32px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}footer>p{font-size:12px;margin:0}.footer-note{color:#766c5c;line-height:1.8;text-align:right}.mobile-bar{display:none}dialog{background:var(--cream);border:1px solid var(--ink);border-radius:8px;padding:30px;max-width:550px;width:calc(100% - 32px);max-height:85vh;color:var(--ink)}dialog::backdrop{background:#17171799;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.dialog-head h2{font-size:43px}.close{font-size:30px;background:transparent;border:0;line-height:1}.dialog-intro{font-size:14px;line-height:1.6}.selection-row{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:16px 0;align-items:center;font-size:14px}.selection-row small{display:block;margin-top:6px;color:#62594d}.quantity{display:flex;align-items:center;gap:10px;white-space:nowrap}.quantity button{width:29px;height:29px;border:1px solid var(--line);border-radius:50%;background:transparent}.total{border-top:1px solid var(--ink);padding:22px 0;display:flex;justify-content:space-between}.demo-note{font-size:13px;line-height:1.65;color:#62594d}.close-button{width:100%;margin-top:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:14px 24px;background:var(--ink);color:var(--cream);border-radius:5px;z-index:5;font-size:14px;opacity:0;pointer-events:none;transition:.25s}#toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes marquee{to{transform:translateX(-50%)}}@media(min-width:1600px){header,main,footer{max-width:1600px;margin-left:auto;margin-right:auto}.hero{padding-left:6%;padding-right:6%}}@media(max-width:900px){header{height:85px}nav{gap:18px}.hero{padding-top:40px;min-height:580px}.hero-art{min-height:350px}.art-note{top:-20px}.stamp{width:100px;height:100px;bottom:5px;font-size:9px}h1{font-size:clamp(49px,7.4vw,75px)}.hero-copy{z-index:2}.signature-copy{padding:45px 8%}.share-sticker{width:160px;height:160px;font-size:23px;right:7%}.share-sticker b{font-size:26px}}@media(max-width:640px){html{scroll-padding-top:20px}header{height:80px;margin:0 6%}header .button{padding:12px 14px;font-size:12px}.brand{font-size:23px}.brand span{font-size:26px}nav{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding:35px 6% 24px}.hero-copy .eyebrow{font-size:10px}h1{font-size:clamp(53px,12.5vw,78px);margin:20px 0;letter-spacing:-1px}.intro{font-size:15px;max-width:280px}.micro{margin-bottom:5px}.hero-art{min-height:0;height:auto;margin:15px -3% 0}.hero-art img{width:95%;margin:0 auto}.art-note{top:10px;right:0;font-size:12px}.food-label{bottom:8%;left:1%}.stamp{right:0;bottom:8%;width:91px;height:91px}.hero-bottom{margin-top:25px;font-size:9px}.hero-bottom span{max-width:180px;line-height:1.6}.ticker{padding:13px 0}.ticker div{font-size:23px}.ticker span{margin:0 24px}.menu-section{padding:55px 6%}.section-top{display:block}.section-top>p{font-size:14px}h2{font-size:54px}.filters{gap:6px}.filters button{padding:10px 13px;font-size:12px}.products{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:20px}.product{flex:0 0 85%;scroll-snap-align:start}.product p{min-height:0}.signature{grid-template-columns:1fr}.signature-copy{padding:45px 6%}.signature-visual{max-height:450px}.signature-copy h2{font-size:56px}.sharing{padding:60px 6% 65px}.sharing h2{font-size:64px;letter-spacing:-1px}.share-sticker{right:7%;top:auto;bottom:25px;width:102px;height:102px;font-size:15px}.share-sticker b{font-size:15px}.sharing .button{padding:16px}.sharing>p:not(.eyebrow){font-size:14px;max-width:240px}.club{padding:55px 6%;grid-template-columns:1fr;gap:28px}footer{margin:0 6%;padding-bottom:95px;align-items:start;flex-wrap:wrap}footer>p{font-size:10px}.footer-note{width:100%;text-align:left}.mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--cream);padding:13px 6%;justify-content:space-between;align-items:center;z-index:4;font-size:14px;border-top:1px solid #ffffff30}.mobile-bar button{border:0;background:var(--orange);padding:10px 13px;border-radius:4px;font-size:13px}.mobile-bar span{margin-left:6px}#toast{bottom:83px;width:max-content;max-width:90%}.dialog-head h2{font-size:36px}dialog{padding:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Assiettes rondes, entièrement visibles et détachées du fond. */
.product-img{aspect-ratio:1;background:transparent;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center;margin:24px 0 30px}
.product-img img{width:96%;height:96%;object-fit:contain;border-radius:50%;clip-path:circle(46% at 50% 50%);filter:drop-shadow(0 12px 12px #17171718)}
.product-img .badge{left:50%;bottom:-10px;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;border:1px solid var(--line);z-index:1}
#ingredient-dialog{border-radius:16px;padding:36px}
#ingredient-dialog .eyebrow{color:#766c5c;margin-bottom:15px}
#ingredient-dialog h2{font-size:48px;max-width:360px}
#popup-text{font-size:16px;line-height:1.8;margin:8px 0 26px}
@media(max-width:640px){#ingredient-dialog{padding:25px}#ingredient-dialog h2{font-size:40px}.product-img{margin-bottom:28px}}

/* Une animation unique évite les conflits entre style inline et survol. */
.product-img img{clip-path:none;border-radius:50%;filter:none;transform:scale(1);transition:transform .45s ease;backface-visibility:hidden}
.product:hover img{transform:scale(1)}
@media(hover:hover){.product-img:hover img{transform:scale(1.035)}}
.hero-art img{width:96%;border-radius:50%;clip-path:circle(46% at 50% 50%);animation:plate-spin 65s linear infinite;transform-origin:center}
@keyframes plate-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.share-sticker{animation:badge-sway 5s ease-in-out infinite}
@keyframes badge-sway{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(17deg) translateY(-10px)}}
.hotspot-wrap{position:absolute;z-index:2;width:38px;height:38px}
.hotspot-wrap .hotspot{position:relative;top:auto;left:auto}
.hotspot-wrap:has(.hotspot:focus),.hotspot-wrap:hover,.hotspot-wrap.open{z-index:3}
.ingredient-tooltip{position:absolute;left:48px;top:-14px;width:245px;background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:17px;box-shadow:0 8px 30px #17171725;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.ingredient-tooltip strong{display:block;font-size:16px;line-height:1.3;margin-bottom:8px}
.ingredient-tooltip span{display:block;font-size:14px;line-height:1.6}
.hotspot-wrap:hover .ingredient-tooltip,.hotspot-wrap:focus-within .ingredient-tooltip,.hotspot-wrap.open .ingredient-tooltip{visibility:visible;opacity:1;transform:translateX(0);pointer-events:auto}
.hotspot-wrap.h2 .ingredient-tooltip{left:auto;right:48px}
@media(max-width:900px){.ingredient-tooltip{width:210px;left:50%;top:48px;transform:translate(-50%,-5px)}.hotspot-wrap.h2 .ingredient-tooltip{left:auto;right:-25px}.hotspot-wrap.h3 .ingredient-tooltip{left:-35px}.hotspot-wrap:hover .ingredient-tooltip,.hotspot-wrap:focus-within .ingredient-tooltip,.hotspot-wrap.open .ingredient-tooltip{transform:translate(-50%,0)}.hotspot-wrap.h2:hover .ingredient-tooltip,.hotspot-wrap.h2:focus-within .ingredient-tooltip,.hotspot-wrap.h2.open .ingredient-tooltip,.hotspot-wrap.h3:hover .ingredient-tooltip,.hotspot-wrap.h3:focus-within .ingredient-tooltip,.hotspot-wrap.h3.open .ingredient-tooltip{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.hero-art img,.share-sticker{animation:none}.product-img img,.ingredient-tooltip{transition:none}}

/* Portfolio return link, scoped to this exported demonstration. */
.tg-demo-banner{background:#101215;color:#f1f3f2;padding:12px 4.8%;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font:13px/1.5 Arial,sans-serif;border-bottom:1px solid #7cf3eb44}.tg-demo-banner a{color:#7cf3eb;text-decoration:underline;text-underline-offset:3px}.tg-demo-banner span{color:#bdc5cc}@media(max-width:650px){.tg-demo-banner{font-size:12px;padding:12px 20px}}
