@property --ombre{syntax:'<color>';inherits:true;initial-value:#3A2304}
@property --lumiere{syntax:'<color>';inherits:true;initial-value:#FFC02E}
:root{--safran:#F5A50A;--miel:#FFC738;--brun:#2E1A0B;--creme:#FFF5DC;--doux:#6B5138;--vert:#3F7D38;--titre:'Bagel Fat One','Arial Rounded MT Bold',system-ui,sans-serif;--texte:'Figtree',system-ui,sans-serif;--sol:15svh;--r:clamp(170px,min(34vw,38svh),360px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--safran);overflow-x:clip}
body{margin:0;background:var(--creme);color:var(--brun);font:400 16.5px/1.5 var(--texte);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--miel);outline-offset:3px}
.bloque,.bloque body{overflow:hidden}
.sur{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.grain{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.13;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

.barre{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:13px clamp(16px,3vw,40px);pointer-events:none}
.barre>*{pointer-events:auto}
.marque{padding:6px 14px 8px;border-radius:99px;background:var(--safran);color:var(--brun);font:400 1.35rem/1 var(--titre);text-decoration:none}
.barre-lien{min-height:44px;padding:0 20px;border-radius:99px;background:var(--brun);color:var(--creme);font-size:.95rem;font-weight:700;box-shadow:0 0 0 2px rgba(255,245,220,.28);transition:transform .2s,background .2s}
.barre-lien:hover{transform:scale(1.05);background:#000}

/* La route : la meule roule du lac jusqu'à la table */
.route{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--safran);color:var(--creme)}
.piste{position:relative;display:flex;height:100%;width:calc(var(--n)*100vw);will-change:transform}
.etape{position:relative;flex:none;width:100vw;height:100%;overflow:hidden;padding:clamp(76px,12svh,110px) clamp(18px,6vw,90px) 0}
.plein{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,1,.82) 0,rgba(5,3,1,.28) 44%,transparent 62%,rgba(5,3,1,.5) 100%)}
.etape-texte{position:relative;z-index:2;max-width:min(62vw,820px)}
.etape-titre{margin:6px 0 10px;font:400 clamp(3.2rem,9.6vw,9rem)/.94 var(--titre);text-shadow:0 6px 30px rgba(0,0,0,.35)}
.etape-phrase{max-width:460px;font-size:clamp(1.02rem,1.5vw,1.25rem);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ouverture{color:var(--brun);text-align:center;padding-top:clamp(70px,10svh,96px)}
.ouverture .etape-texte{max-width:none}
.ouverture .etape-titre{margin:0 0 4px;font-size:clamp(5rem,23vw,20rem);line-height:.86;color:var(--brun);text-shadow:none}
.ouverture .etape-phrase{max-width:none;font-weight:700;font-size:clamp(1.05rem,2vw,1.6rem);text-shadow:none}
.ouvrir.grand{margin-top:18px;min-height:56px;padding:0 28px;border-radius:99px;background:var(--safran);color:var(--brun);font-weight:700;font-size:1.05rem;box-shadow:0 12px 34px rgba(245,165,10,.45);transition:transform .2s}
.ouvrir.grand:hover{transform:scale(1.05)}
.sol{position:absolute;left:0;right:0;bottom:0;z-index:3;height:var(--sol);background:linear-gradient(90deg,var(--creme) 0 44px,transparent 44px 92px) 0 16px/92px 5px repeat-x,#160D05}
.roue{position:absolute;left:calc(50% - var(--r)/2);bottom:calc(var(--sol) - 3px);z-index:5;display:block;width:var(--r);height:var(--r);will-change:transform;pointer-events:none}
.roue img{width:100%;height:100%;will-change:transform;-webkit-user-drag:none}
.ombre-roue{position:absolute;left:calc(50% - var(--r)*.42);bottom:calc(var(--sol) - var(--r)*.05);z-index:4;width:calc(var(--r)*.84);height:calc(var(--r)*.1);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.conseil{position:absolute;left:50%;bottom:calc(var(--sol)*.32);z-index:6;transform:translateX(-50%);display:flex;gap:8px;align-items:center;color:var(--creme);font-weight:700;font-size:.92rem;white-space:nowrap}
.conseil i{font-style:normal;animation:rebond 1.4s ease-in-out infinite}
@keyframes rebond{50%{transform:translateY(6px)}}

.bandeau{overflow:hidden;background:var(--brun);color:var(--miel);padding:13px 0;font:400 clamp(1.2rem,2.4vw,1.8rem)/1.2 var(--titre);white-space:nowrap}
.bandeau>div{display:inline-flex;animation:defile 36s linear infinite;will-change:transform}
.bandeau span{padding:0 22px}
.bandeau span::after{content:"●";margin-left:44px;font-size:.6em;vertical-align:middle;color:var(--safran)}
@keyframes defile{to{transform:translateX(-50%)}}

/* Où trouver */
.trouver{display:grid;grid-template-columns:1fr 1.1fr;background:var(--safran);color:var(--brun)}
.trouver-photo{min-height:340px;overflow:hidden}
.trouver-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.trouver-texte{display:grid;align-content:center;justify-items:start;gap:16px;padding:clamp(34px,6vw,80px) clamp(18px,5vw,70px)}
.trouver h2{font:400 clamp(2.7rem,6vw,5.2rem)/1 var(--titre)}
.magasins{display:flex;flex-wrap:wrap;gap:6px}
.magasins li{padding:6px 13px;border-radius:99px;background:var(--brun);color:var(--creme);font-weight:500;font-size:.92rem}
.trouver-boutons{display:flex;flex-wrap:wrap;gap:8px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:99px;background:var(--brun);color:var(--creme);font-weight:700;text-align:center;text-decoration:none;transition:transform .15s}
.bouton:hover{transform:scale(1.03)}
.bouton.creux{background:transparent;color:var(--brun);box-shadow:inset 0 0 0 2px var(--brun)}
.pied{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding:15px clamp(18px,5vw,70px);background:var(--brun);color:rgba(255,245,220,.8);font-size:.84rem}

/* Le rayon : la lumière et la couleur suivent le produit devant soi */
.rayon{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#000;color:var(--creme);--lumiere:#FFC02E;--ombre:#3A2304;transition:--lumiere .7s,--ombre .7s}
.rayon[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
.rayon::backdrop{background:#000}
.rayon-fond{position:absolute;inset:0;background:radial-gradient(74% 56% at 50% 40%,color-mix(in srgb,var(--lumiere) 78%,var(--ombre)) 0,color-mix(in srgb,var(--lumiere) 30%,var(--ombre)) 46%,var(--ombre) 72%,#050302 100%)}
.rayon-tete{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(14px,3vw,36px)}
.etapes-achat{display:flex;gap:5px;font-size:.78rem;font-weight:500;min-width:0}
.etapes-achat li{padding:6px 10px;border-radius:99px;background:rgba(255,245,220,.12);color:rgba(255,245,220,.72);white-space:nowrap;transition:background .3s,color .3s}
.etapes-achat li.fait{background:var(--creme);color:#150C04;font-weight:700}
.rayon-fermer{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,245,220,.14);font-size:1.5rem;line-height:1;transition:background .2s}
.rayon-fermer:hover{background:rgba(255,245,220,.28)}
.rayon-nom{position:relative;z-index:2;padding:0 16px;text-align:center;font:400 clamp(2.1rem,7.6vw,5.6rem)/.98 var(--titre);min-height:2em;display:grid;place-items:center;text-shadow:0 8px 36px rgba(0,0,0,.45)}
.allee{position:relative;z-index:3;min-height:0;display:flex;align-items:flex-end;gap:clamp(4px,1vw,14px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(50% - var(--art)/2);--art:clamp(170px,min(46vw,34svh),330px);-webkit-overflow-scrolling:touch}
.allee::-webkit-scrollbar{display:none}
.article{position:relative;flex:none;width:var(--art);height:100%;display:flex;align-items:flex-end;justify-content:center;scroll-snap-align:center;-webkit-tap-highlight-color:transparent}
.article img{position:relative;z-index:2;max-width:100%;max-height:92%;width:auto;height:auto;transform-origin:50% 100%;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.article-spot{position:absolute;left:50%;bottom:0;width:150%;height:100%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.3) 22%,rgba(255,255,255,0) 92%);clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);opacity:0;transition:opacity .5s;pointer-events:none}
.article.devant .article-spot{opacity:1}
.etagere{position:relative;z-index:4;height:14px;background:linear-gradient(180deg,#F4DEA8,#A97F3C 40%,#2A1A08);box-shadow:0 14px 26px rgba(0,0,0,.6)}
.rayon-fiche{position:relative;z-index:5;display:grid;justify-items:center;gap:10px;width:min(620px,100%);margin:0 auto;padding:12px clamp(14px,3vw,24px) 10px;text-align:center}
.rayon-detail{font-size:clamp(.96rem,1.4vw,1.1rem);min-height:3em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.formats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.formats[hidden]{display:none}
.format{display:grid;justify-items:center;gap:1px;padding:7px 8px;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(255,245,220,.55);transition:background .2s,color .2s}
.format strong{font:400 1.2rem/1.1 var(--titre)}
.format span{font-size:.86rem;font-weight:500}
.format[aria-pressed=true]{background:var(--creme);color:#150C04;box-shadow:none}
.prix-note{font-weight:700;font-size:.95rem;min-height:1.4em}
.prendre{display:flex;gap:8px;width:100%}
.quantite{flex:none;display:inline-flex;align-items:center;gap:2px;padding:0 4px;border-radius:99px;box-shadow:inset 0 0 0 2px rgba(255,245,220,.55)}
.quantite button{width:44px;height:48px;font-size:1.3rem;line-height:1}
.quantite output{min-width:22px;text-align:center;font-weight:700;font-size:1.05rem}
.poser{flex:1;min-height:52px;border-radius:99px;background:var(--lumiere);color:#150C04;font-weight:700;font-size:1.02rem;transition:transform .15s}
.poser:hover{transform:scale(1.02)}
.rayon-plateau{position:relative;z-index:6;display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:8px clamp(14px,3vw,36px) max(8px,env(safe-area-inset-bottom));background:#0B0603;color:var(--creme);text-align:left;border-top:1px solid rgba(217,179,111,.5)}
.plateau-mini{flex:none;display:flex;min-width:36px;min-height:36px}
.plateau-mini img{width:36px;height:36px;object-fit:contain;margin-left:-14px;border-radius:50%}
.plateau-mini img:first-child{margin-left:0}
.plateau-resume{flex:1;min-width:0;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rayon-plateau strong{flex:none;min-height:42px;display:grid;place-items:center;padding:0 20px;border-radius:99px;background:#25D366;color:#06210F;font-size:.95rem}
.rayon-plateau.vide{opacity:.72;pointer-events:none}
.rayon-plateau.vide strong{background:rgba(255,245,220,.16);color:rgba(255,245,220,.6)}

/* Le plateau : relire et envoyer */
.plateau{position:fixed;inset:auto 0 0;width:min(520px,100vw);max-width:none;max-height:92svh;margin:0 auto;overflow-y:auto;padding:24px clamp(16px,4vw,28px) max(18px,env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;background:var(--creme);color:var(--brun)}
.plateau::backdrop{background:rgba(6,3,1,.7)}
.plateau h2{font:400 2.2rem/1 var(--titre);margin-bottom:12px;padding-right:44px}
.fermer{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:var(--brun);color:var(--creme);font-size:1.5rem;line-height:1}
.lignes li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #DCCEAE}
.ligne-nom{font-weight:700}
.ligne-nom small{display:block;font-weight:400;font-size:.88rem;color:var(--doux)}
.ligne-prix{font-weight:700;white-space:nowrap}
.ligne-moins{width:44px;height:44px;border-radius:50%;border:1px solid #BFAE8A;font-size:1.1rem;line-height:1}
.total{margin:12px 0;font:400 1.5rem/1.15 var(--titre)}
.total small{display:block;font:400 .9rem/1.3 var(--texte);color:var(--doux)}
.quartier{display:grid;gap:4px;font-size:.92rem;font-weight:500}
.quartier input{height:48px;padding:0 14px;border:1px solid #A8966F;border-radius:12px;background:#fff;color:var(--brun);font:16px/1 var(--texte)}
.envoyer{display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:12px;border-radius:99px;background:var(--vert);color:#fff;font-weight:700;text-decoration:none}
.envoyer:hover{background:#34692E}
.plateau small{display:block;margin-top:6px;color:var(--doux);font-size:.84rem;text-align:center}

/* Sans animation : l'histoire se lit de haut en bas */
.statique .route,html:not(.js) .route{height:auto;background:#160D05}
.statique .piste,html:not(.js) .piste{display:block;width:100%;transform:none}
.statique .etape,html:not(.js) .etape{height:auto;min-height:70svh;width:100%;padding-bottom:40px}
.statique .sol,.statique .ombre-roue,.statique .conseil,html:not(.js) .sol,html:not(.js) .ombre-roue,html:not(.js) .conseil,html:not(.js) .roue,html:not(.js) .ouvrir{display:none}
.statique .roue{position:static;display:block;margin:20px auto}

@media (max-width:760px){
  :root{--sol:13svh;--r:clamp(150px,min(46vw,24svh),230px)}
  .etape{padding-top:72px}
  .etape-texte{max-width:none}
  .etape-titre{font-size:clamp(3rem,15vw,5rem)}
  .ouverture .etape-titre{font-size:29vw}
  .trouver{grid-template-columns:1fr}
  .trouver-photo{min-height:0;height:62vw}
  .etapes-achat{font-size:.72rem;gap:3px}
  .etapes-achat li{padding:5px 8px}
  .rayon-nom{min-height:1.9em;font-size:clamp(1.9rem,9.4vw,3rem)}
  .rayon-detail{min-height:2.9em}
}
@media (max-height:700px){
  .rayon-detail{display:none}
  .rayon-nom{min-height:1em}
}
@media (prefers-reduced-motion:reduce){.conseil i,.bandeau>div{animation:none}.rayon{transition:none}}