/* Sunshine Coffee — home page. Ported from "Sunshine Coffee.dc.html" (Claude Design). */

html{scroll-behavior:smooth}
body{overflow-x:clip}
@keyframes sc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sc-anim{animation:none!important}html{scroll-behavior:auto}}

.page{display:flex;flex-direction:column;min-height:100vh;background:var(--surface-page);overflow-x:clip}
.wrap{max-width:var(--container-max);margin:0 auto}
.eyebrow{color:var(--miel-600)}
.on-ink .eyebrow{color:var(--miel-200)}
.h-display{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-l);line-height:.95;color:var(--text-heading)}
.h-s{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-s);color:var(--text-heading);line-height:1}
.lead{margin:0;font-size:var(--fs-lead);line-height:1.5}
.stack{display:flex;flex-direction:column}
.g2{gap:var(--space-2)}.g3{gap:var(--space-3)}.g4{gap:var(--space-4)}.g5{gap:var(--space-5)}.g6{gap:var(--space-6)}
.center{align-items:center;text-align:center}
.nolink{text-decoration:none}

/* ---------- Icon (Lucide via mask, paints in currentColor) ---------- */
.ic{--s:20px;display:inline-block;width:var(--s);height:var(--s);flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-16{--s:16px}.ic-18{--s:18px}.ic-24{--s:24px}.ic-28{--s:28px}
.i-cat{--i:url("/icons/lucide/cat.svg")}
.i-arrow-right{--i:url("/icons/lucide/arrow-right.svg")}
.i-arrow-left{--i:url("/icons/lucide/arrow-left.svg")}
.i-map-pin{--i:url("/icons/lucide/map-pin.svg")}
.i-quote{--i:url("/icons/lucide/quote.svg")}
.i-play{--i:url("/icons/lucide/play.svg")}
.i-images{--i:url("/icons/lucide/images.svg")}
.i-map{--i:url("/icons/lucide/map.svg")}
.i-navigation{--i:url("/icons/lucide/navigation.svg")}
.i-heart{--i:url("/icons/lucide/heart.svg")}
.i-leaf{--i:url("/icons/lucide/leaf.svg")}
.i-users{--i:url("/icons/lucide/users.svg")}
.i-zap{--i:url("/icons/lucide/zap.svg")}
.i-coffee{--i:url("/icons/lucide/coffee.svg")}
.i-cup-soda{--i:url("/icons/lucide/cup-soda.svg")}
.i-cake-slice{--i:url("/icons/lucide/cake-slice.svg")}.i-cookie{--i:url("/icons/lucide/cookie.svg")}.i-sandwich{--i:url("/icons/lucide/sandwich.svg")}.i-utensils{--i:url("/icons/lucide/utensils.svg")}.i-droplet{--i:url("/icons/lucide/droplet.svg")}
.i-phone{--i:url("/icons/lucide/phone.svg")}
.i-clock{--i:url("/icons/lucide/clock.svg")}
.i-paw-print{--i:url("/icons/lucide/paw-print.svg")}
.i-instagram{--i:url("/icons/lucide/instagram.svg")}
.i-mail{--i:url("/icons/lucide/mail.svg")}
.i-calendar-days{--i:url("/icons/lucide/calendar-days.svg")}
.i-plus{--i:url("/icons/lucide/plus.svg")}
.i-arrow-up-right{--i:url("/icons/lucide/arrow-up-right.svg")}
.i-image{--i:url("/icons/lucide/image.svg")}

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--fs-body);line-height:1;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;transition:var(--transition-control);
  background:var(--accent-primary);color:var(--text-inverse);border:1.5px solid var(--accent-primary)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:var(--lift-hover);box-shadow:var(--shadow-2);background:var(--accent-primary-hover);border-color:var(--accent-primary-hover);color:var(--text-inverse)}}
.btn:active{transform:var(--press-scale)}
.btn .ic{--s:18px}
.btn-sm{height:36px;padding:0 16px;font-size:var(--fs-body-s);gap:6px}.btn-sm .ic{--s:16px}
.btn-lg{height:54px;padding:0 30px;font-size:var(--fs-lead);gap:10px}.btn-lg .ic{--s:20px}
.btn-block{display:flex;width:100%;box-sizing:border-box}
.btn-secondary{background:var(--surface-card);color:var(--text-heading);border:1.5px solid var(--cream-400)}
@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:var(--cream-100);border-color:var(--brown-300);color:var(--text-heading)}}
.btn-sticker{background:var(--cream-100);color:var(--brown-700);border:var(--border-inked);box-shadow:var(--shadow-sticker)}
@media (hover:hover) and (pointer:fine){.btn-sticker:hover{background:var(--cream-50);color:var(--brown-700);border-color:var(--border-ink);box-shadow:var(--shadow-sticker)}}

/* ---------- IconButton ---------- */
.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--radius-pill);cursor:pointer;
  transition:var(--transition-control);background:var(--surface-card);color:var(--text-heading);border:1.5px solid var(--cream-400);text-decoration:none}
@media (hover:hover) and (pointer:fine){.ibtn:hover{transform:var(--lift-hover);box-shadow:var(--shadow-2);color:var(--text-heading)}}
.ibtn:active{transform:var(--press-scale)}
.ibtn-sm{width:36px;height:36px}.ibtn-sm .ic{--s:16px}
.ibtn-ghost{background:transparent;border-color:transparent}@media (hover:hover) and (pointer:fine){.ibtn-ghost:hover{background:var(--cream-200)}}
.ibtn-ink{background:var(--brown-600);color:var(--text-inverse);border-color:var(--brown-600)}@media (hover:hover) and (pointer:fine){.ibtn-ink:hover{color:var(--text-inverse)}}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--radius-pill);font-family:var(--font-body);
  font-size:var(--fs-caption);font-weight:var(--weight-bold);line-height:1.4;background:var(--cream-300);color:var(--brown-600)}
.badge::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--brown-400)}
.badge[data-tone="open"]{background:var(--status-open-bg);color:var(--sage-600)}.badge[data-tone="open"]::before{background:var(--status-open)}
.badge[data-tone="attention"]{background:var(--status-attention-bg);color:#8A6222}.badge[data-tone="attention"]::before{background:var(--status-attention)}
.badge[data-tone="closed"]{background:var(--status-closed-bg);color:#8B3A27}.badge[data-tone="closed"]::before{background:var(--status-closed)}

/* ---------- Image slot (placeholder until a photo is dropped in) ---------- */
.slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-5);
  text-align:center;color:var(--brown-500);font-size:var(--fs-caption);font-weight:700;line-height:1.35;
  background:repeating-linear-gradient(-45deg,var(--cream-200) 0 14px,var(--cream-300) 14px 28px)}
.slot .ic{--s:28px;opacity:.7}
.slot span{max-width:32ch;background:color-mix(in oklab,var(--cream-50) 80%,transparent);padding:4px 10px;border-radius:var(--radius-sm)}
.slot img,img.slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}

/* ---------- Marquees ---------- */
.marquee{overflow:hidden}
.marquee-track{display:flex;width:max-content}
.marquee-run{display:flex;flex:none;align-items:center;gap:var(--gap);padding-right:var(--gap)}
.marquee-run>span{white-space:nowrap;line-height:1}
.top-marquee{background:var(--surface-ink);color:var(--text-inverse);padding:10px 0;font-size:var(--fs-caption);font-weight:700}
.top-marquee .marquee-track{--gap:28px;animation:sc-marquee 40s linear infinite}
.top-marquee .marquee-run>span{font-size:13px}
.band{background:var(--miel-500);color:var(--brown-800);padding:18px 0;transform:rotate(-1.5deg);margin:var(--space-6) -20px;box-shadow:var(--shadow-1)}
.band .marquee-track{--gap:36px;animation:sc-marquee 34s linear infinite}
.band .marquee-run>span{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem)}
.band .marquee-run>img{height:57.6px;width:auto;flex:none}
.band .marquee-run>img:nth-of-type(odd){transform:rotate(-8deg)}
.band .marquee-run>img:nth-of-type(even){transform:rotate(8deg)}

/* ---------- NavBar ---------- */
.nav-sticky{position:sticky;top:0;z-index:30}
.navbar{display:flex;align-items:center;gap:var(--space-6);padding:18px var(--gutter-inline);
  background:color-mix(in oklab,var(--cream-100) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--border-hairline);font-family:var(--font-body)}
.navbar-logo{display:flex;align-items:center;text-decoration:none}
.navbar-logo img{height:52px;display:block}
.navbar nav{display:flex;gap:var(--space-2);margin-left:auto;align-items:center}
.navbar nav a{padding:10px 16px;border-radius:var(--radius-pill);font-size:var(--fs-body);font-weight:var(--weight-bold);text-decoration:none;color:var(--text-body);transition:var(--transition-control)}
.navbar nav a:hover{background:var(--cream-200);color:var(--text-heading)}
/* Language switch (FR / EN): a round button holding two letters instead of an icon. */
.nav-lang{font-size:13px;font-weight:var(--weight-bold);letter-spacing:.04em;text-decoration:none}

/* ---------- Hero ---------- */
.hero{position:relative;padding:var(--space-10) var(--gutter-inline) var(--space-9)}
.hero-copy{gap:var(--space-5)}
.hero h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,9vw,7.5rem);line-height:.92;color:var(--text-heading);max-width:14ch;text-wrap:balance}
.pill-word{display:inline-block;background:var(--miel-200);border-radius:var(--radius-pill);padding:0 .18em .06em;transform:rotate(-3deg)}
.hero .lead{max-width:46ch;text-wrap:pretty}
.row-wrap{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;align-items:center}
.hero-visual{position:relative;max-width:var(--container-max);margin:var(--space-9) auto 0}
.hero-photo{position:relative;height:clamp(320px,52vw,600px);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-2);border:1.5px solid var(--border-hairline)}
.hero-croissant{position:absolute;top:clamp(-64px,-5vw,-40px);left:clamp(12px,4vw,56px);width:clamp(96px,13vw,160px);transform:rotate(-14deg);pointer-events:none}
.stamp-pos{position:absolute;top:-58px;right:clamp(8px,4vw,48px);width:136px;height:136px;display:grid;place-items:center;transform:rotate(-8deg)}
.stamp{position:relative;width:136px;height:136px;border-radius:50%;background:var(--miel-500);border:2.5px solid var(--border-ink);box-shadow:var(--shadow-sticker);display:grid;place-items:center;color:var(--brown-800)}
.stamp svg{position:absolute;inset:0;animation:sc-spin 22s linear infinite}
.stamp text{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.12em;fill:var(--brown-800);text-transform:uppercase}
.stamp .ic{position:relative}
.float-card{position:absolute;left:clamp(-8px,-1vw,0px);bottom:clamp(16px,4vw,40px);transform:rotate(-3deg);background:var(--surface-card);border:1.5px solid var(--border-hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:var(--space-4) var(--space-5);display:flex;gap:var(--space-3);align-items:center;max-width:300px;text-align:left}
.float-card strong{display:block;font-weight:700;color:var(--text-heading);line-height:1.3}
.float-card small{display:block;font-size:var(--fs-caption);color:var(--text-muted)}
.disc{flex:none;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-page-alt);display:grid;place-items:center;color:var(--text-heading)}
.addr-pill{position:absolute;right:clamp(12px,3vw,32px);bottom:-22px;transform:rotate(4deg);background:var(--miel-100);color:var(--brown-800);border-radius:var(--radius-pill);
  padding:10px 18px;font-weight:700;box-shadow:var(--shadow-1);display:flex;gap:8px;align-items:center}

/* ---------- La maison ---------- */
.section{position:relative;padding:var(--section-y) var(--gutter-inline)}
.maison-deco-l{position:absolute;left:0;top:0;width:clamp(64px,10vw,130px);transform:rotate(-10deg);pointer-events:none}
.maison-deco-r{position:absolute;right:0;top:clamp(20px,4vw,60px);width:clamp(70px,11vw,140px);transform:rotate(8deg);pointer-events:none}
.maison-head{margin-bottom:var(--space-9)}
.maison-head h2{max-width:16ch}
.maison-head p{max-width:52ch}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(80px,auto);gap:var(--space-4)}
.tile{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-1)}
.t-mains{grid-column:span 4;grid-row:span 3;min-height:340px;transform:rotate(-2deg)}
.t-comptoir{grid-column:span 5;grid-row:span 2;min-height:240px}
.t-latte{grid-column:span 3;grid-row:span 2;min-height:240px;transform:rotate(3deg)}
.t-count{grid-column:span 3;grid-row:span 1;background:var(--surface-ink);color:var(--text-inverse);border-radius:var(--radius-xl);padding:var(--space-5);display:flex;align-items:center;gap:var(--space-3)}
.t-count b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-m);line-height:1}
.t-count span{line-height:1.3;font-weight:700}
.t-patisserie{grid-column:span 5;grid-row:span 1;min-height:120px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-7);margin-top:var(--space-9)}
.pillar-ic{width:56px;height:56px;border-radius:var(--radius-pill);background:var(--surface-card);border:1.5px solid var(--border-hairline);display:grid;place-items:center;color:var(--text-heading)}
.pillars p{margin:0;line-height:1.55;max-width:34ch}

/* ---------- Les chats ---------- */
.chats{background:var(--surface-page-alt);padding:var(--section-y) 0}
.chats-head{padding:0 var(--gutter-inline);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.chats-head h2{max-width:12ch}
.chats-head p{margin:0;line-height:1.55}
.cats-track{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-8) var(--gutter-inline) var(--space-6);scrollbar-width:none}
.cats-track::-webkit-scrollbar{display:none}
.cat-card{flex:none;width:280px;scroll-snap-align:start;background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-4);transform:rotate(var(--tilt,0deg));
  transition:transform var(--dur-3) var(--ease-stretch),box-shadow var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cat-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--shadow-2)}}
.cat-photo{position:relative;height:300px;border-radius:var(--radius-lg);overflow:hidden}
.cat-photo .badge{position:absolute;top:12px;left:12px;pointer-events:none}
.cat-body{padding:0 var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.cat-name{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.cat-name h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1;color:var(--text-heading)}
.cat-name span{font-size:var(--fs-caption);color:var(--text-muted);font-weight:700}
.cat-body p{margin:0;line-height:1.45;font-size:var(--fs-body-s)}
.cat-more{flex:none;width:280px;scroll-snap-align:start;border:2px dashed var(--cream-500);border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);text-align:center;padding:var(--space-6)}
.cat-more .disc{width:64px;height:64px}
.cat-more p{margin:0;font-size:var(--fs-body-s);line-height:1.45}

/* ---------- Humeur ---------- */
.ink{background:var(--surface-ink);color:var(--text-inverse)}
.ink h2{color:var(--text-inverse)}
.ink .muted{color:var(--text-inverse-muted);line-height:1.55}
.humeur{border-radius:var(--radius-2xl);margin:var(--space-9) clamp(8px,2vw,24px)}
.split{display:grid;gap:var(--space-9);align-items:center}
.humeur .split{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.humeur .split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.moods{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);max-width:460px}
.mood{aspect-ratio:1.35;border:2px solid var(--cream-100);background:transparent;color:var(--cream-100);font-family:var(--font-body);cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;padding:var(--space-5);text-align:left;
  transition:transform var(--dur-2) var(--ease-stretch),background var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mood:hover{transform:translateY(-3px)}}
.mood:active{transform:scale(.97)}
.mood[aria-pressed="true"]{background:var(--miel-500);color:var(--brown-800)}
.mood b{font-weight:700;font-size:var(--fs-body);line-height:1.2}
.mood small{font-size:var(--fs-caption);line-height:1.3}
.mood:nth-child(1){border-radius:var(--radius-2xl) var(--radius-sm) var(--radius-sm) var(--radius-sm)}
.mood:nth-child(2){border-radius:var(--radius-sm) var(--radius-2xl) var(--radius-sm) var(--radius-sm)}
.mood:nth-child(3){border-radius:var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-2xl)}
.mood:nth-child(4){border-radius:var(--radius-sm) var(--radius-sm) var(--radius-2xl) var(--radius-sm)}
.mood-card{position:relative;width:min(100%,400px);background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-3);transform:rotate(2deg)}
.mood-photo{position:relative;height:260px;border-radius:var(--radius-lg);overflow:hidden}
.mood-body{padding:var(--space-5) var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}
.mood-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.mood-title h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:2.25rem;line-height:1;color:var(--text-heading)}
.mood-title span{font-weight:700;color:var(--text-heading);white-space:nowrap}
.mood-body p{margin:0;font-size:var(--fs-body-s);line-height:1.45}
.mood-cat{display:flex;gap:var(--space-3);align-items:center;padding-top:var(--space-3);border-top:1.5px solid var(--border-hairline);font-size:var(--fs-body-s);line-height:1.35}
/* Stacked (card under the buttons): both use the full width instead of floating in empty space */
@media (max-width:999px){
  .moods{max-width:none}
  .mood{aspect-ratio:auto;min-height:132px}
  .mood-card{width:100%}
}
@media (min-width:640px) and (max-width:999px){
  .mood-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-2)}
  .mood-photo{height:auto;min-height:240px}
  .mood-body{padding:var(--space-4) var(--space-3) var(--space-3) var(--space-4);justify-content:center}
}
.mood-cat .disc{width:36px;height:36px}
.mood-cat strong{color:var(--text-heading)}

/* ---------- Adoption ---------- */
.adoption{background:var(--surface-warm)}
.adoption-head{margin-bottom:var(--space-9);max-width:560px}
.adoption-head p,.regles-head p{margin:0;line-height:1.55}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5)}
.step{background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-1);margin-top:var(--offset,0)}
.step-top{display:flex;justify-content:space-between;align-items:center;color:var(--text-heading)}
.step-top b{font-family:var(--font-display);font-weight:400;font-size:3.5rem;line-height:.8;color:var(--miel-600)}
.step p{margin:0;font-size:var(--fs-body-s);line-height:1.5}

/* ---------- Règles ---------- */
.regles .split{grid-template-columns:minmax(0,1fr);align-items:start}
/* Two columns with a sticky title only when there is room; stacked, a sticky title would cover the rules. */
@media (min-width:1000px){.regles .split{grid-template-columns:repeat(2,minmax(0,1fr))}.regles-head{position:sticky;top:120px}}
.regles-head h2{max-width:10ch}
.regles-head p{max-width:40ch}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.rules li{display:flex;gap:var(--space-4);align-items:center;background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-6) var(--space-3) var(--space-3);transition:transform var(--dur-2) var(--ease-stretch);font-weight:700;color:var(--text-heading);line-height:1.35}
@media (hover:hover) and (pointer:fine){.rules li:hover{transform:translateX(6px) rotate(-1deg)}}
.rules .disc{width:48px;height:48px}

/* ---------- Visite + footer ---------- */
.visite{padding-bottom:0;overflow:hidden}
.visite .split{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start}
.visite h2{font-size:var(--fs-display-xl);line-height:.92}
.visite .muted{max-width:42ch}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}
.info{display:flex;gap:var(--space-3);align-items:flex-start;line-height:1.4}
.info .ic{color:var(--miel-200)}
.plan{position:relative;height:220px;border-radius:var(--radius-xl);overflow:hidden;border:1.5px solid var(--brown-500)}
.tips-card{position:relative;background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-xl);padding:clamp(20px,4vw,40px);box-shadow:var(--shadow-3);display:flex;flex-direction:column;gap:var(--space-5);transform:rotate(1.5deg)}
.tips-card>img{position:absolute;right:clamp(-20px,-2vw,-8px);top:-48px;width:clamp(90px,10vw,124px);transform:rotate(10deg);pointer-events:none}
.tips-card h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-m);color:var(--text-heading);line-height:1}
.tip{display:flex;gap:var(--space-4);align-items:flex-start;padding-bottom:var(--space-4);border-bottom:1.5px dashed var(--border-hairline)}
.tip b{font-weight:700;color:var(--text-heading)}
.tip span{font-size:var(--fs-body-s);line-height:1.45}

.footer{max-width:var(--container-max);margin:var(--space-10) auto 0;padding-top:var(--space-6);border-top:1.5px solid var(--brown-500);display:flex;flex-direction:column;gap:var(--space-6)}
.footer-top{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;align-items:center}
.footer-logo{display:inline-flex}
.footer-logo img{height:56px;display:block}
.footer-nav{display:flex;gap:var(--space-5);flex-wrap:wrap;font-weight:700}
.footer-nav a{color:var(--cream-100)}
.footer-nav a:hover{color:var(--cream-50)}
.footer-legal{display:flex;gap:var(--space-2) var(--space-5);flex-wrap:wrap;font-size:var(--fs-caption)}
.footer-legal a{color:var(--cream-300)}
.footer-legal a:hover{color:var(--cream-100)}
.footer-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);font-size:var(--fs-caption);color:var(--text-inverse-muted)}
.wordmark{font-family:var(--font-display);font-size:clamp(5rem,21vw,18rem);line-height:.8;color:var(--brown-600);text-align:center;margin-bottom:-.12em;white-space:nowrap;letter-spacing:-.01em;user-select:none}

/* ---------- Small screens (not specified by the design; keeps layout usable) ---------- */
@media (max-width:760px){
  .collage{grid-template-columns:repeat(6,minmax(0,1fr))}
  .t-mains{grid-column:span 6;grid-row:auto;min-height:280px}
  .t-comptoir{grid-column:span 6;grid-row:auto}
  .t-latte{grid-column:span 3;grid-row:auto;min-height:200px}
  .t-count{grid-column:span 3;flex-direction:column;align-items:flex-start;justify-content:center}
  .t-patisserie{grid-column:span 6;min-height:180px}
  .steps .step{margin-top:0}
  .float-card{max-width:240px;padding:var(--space-3) var(--space-4)}
  .stamp-pos{transform:rotate(-8deg) scale(.75);top:-70px}
}
@media (max-width:640px){
  .navbar{gap:var(--space-3);padding:12px var(--gutter-inline)}
  .navbar-logo img{height:40px}
  .navbar nav{display:none}
  .navbar .btn{margin-left:auto}
  .moods .mood{padding:var(--space-4)}
}

/* ======================================================================
   Subpages: la carte + pages légales
   ====================================================================== */

/* NavBar: active link (DS NavBar `active` prop) */
.navbar nav a[aria-current="page"]{background:var(--cream-300);color:var(--text-heading)}

/* Tag (DS Tag) */
.tag{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--fs-body-s);
  font-weight:var(--weight-medium);line-height:1.3;background:var(--cream-200);color:var(--brown-600);border:1.5px solid var(--cream-400);
  text-decoration:none;transition:var(--transition-control)}
.tag .ic{--s:15px}
a.tag{cursor:pointer}
a.tag:hover{background:var(--cream-300);color:var(--brown-600)}
.tag[aria-current="page"]{background:var(--brown-700);border-color:var(--brown-700);color:var(--cream-100)}
.tags{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* Standalone footer (outside the #visite section) */
.site-footer{position:relative;padding:var(--space-9) var(--gutter-inline) 0;overflow:hidden}
.site-footer .footer{margin-top:0;padding-top:0;border-top:0}

/* ---------- La carte ---------- */
.carte-hero{position:relative;padding:var(--space-10) var(--gutter-inline) var(--space-8)}
.carte-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--space-8);align-items:end}
.carte-hero-title{position:relative;display:flex;flex-direction:column;gap:var(--space-5)}
.carte-hero-title img{position:absolute;right:clamp(0px,2vw,24px);top:clamp(-40px,-3vw,-16px);width:clamp(84px,11vw,140px);transform:rotate(9deg);pointer-events:none}
.carte-hero h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,9vw,7.5rem);line-height:.92;color:var(--text-heading)}
.carte-hero .lead{max-width:44ch;text-wrap:pretty}

.carte-cat{position:relative;padding:var(--space-8) var(--gutter-inline);scroll-margin-top:90px}
.carte-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--space-7);align-items:start}
.carte-card{position:sticky;top:110px;background:var(--surface-ink);color:var(--text-inverse);border-radius:var(--radius-xl);padding:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-4);transform:rotate(var(--tilt,0deg));box-shadow:var(--shadow-2)}
.carte-photo{position:relative;height:260px;border-radius:var(--radius-lg);overflow:hidden}
.carte-card-body{padding:var(--space-2) var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.carte-card-body .sc-caps{color:var(--miel-200)}
.carte-card h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-m);line-height:.95;color:var(--text-inverse)}
.carte-card p{margin:0;color:var(--text-inverse-muted);font-size:var(--fs-body-s);line-height:1.45}
.carte-list{position:relative;background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);padding:var(--space-3) clamp(20px,4vw,40px)}
.carte-list-art{position:absolute;right:clamp(-16px,-1.5vw,-8px);top:-44px;width:clamp(84px,10vw,120px);transform:rotate(12deg);pointer-events:none}
.carte-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-5);padding:var(--space-5) 0;border-bottom:1.5px dashed var(--border-hairline);align-items:baseline}
.carte-item-name{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.carte-item-name h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1;color:var(--text-heading)}
.carte-item-price{font-weight:700;color:var(--text-heading);font-size:var(--fs-lead);white-space:nowrap}
.carte-item p{grid-column:1 / -1;margin:0;font-size:var(--fs-body-s);line-height:1.45}

.carte-cta-wrap{position:relative;padding:var(--space-8) var(--gutter-inline) var(--section-y)}
.carte-cta{background:var(--surface-warm);border-radius:var(--radius-2xl);padding:clamp(24px,5vw,56px);display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;justify-content:space-between}
.carte-cta-copy{display:flex;gap:var(--space-5);align-items:center;flex:1 1 380px}
.carte-cta-copy img{flex:none;width:84px;transform:rotate(-8deg)}
.carte-cta h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-s);color:var(--text-heading);line-height:1}
.carte-cta p{margin:0;font-size:var(--fs-body-s);line-height:1.45}

/* ---------- Pages légales ---------- */
.legal-head{position:relative;padding:var(--space-10) var(--gutter-inline) var(--space-8)}
.legal-head-inner{position:relative;display:flex;flex-direction:column;gap:var(--space-5)}
.legal-head-art{position:absolute;right:0;bottom:0;width:clamp(88px,16vw,210px);transform:rotate(8deg);pointer-events:none}
.legal-head h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-xl);line-height:.92;color:var(--text-heading);max-width:16ch}
.legal-head .lead{max-width:52ch;text-wrap:pretty}
.legal-updated{font-size:var(--fs-caption);color:var(--text-muted);font-weight:700}

.legal-main{position:relative;padding:0 var(--gutter-inline) var(--section-y)}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-8);align-items:start}
.toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:var(--space-1);background:var(--surface-page-alt);border-radius:var(--radius-xl);padding:var(--space-5);max-width:320px}
.toc .sc-caps{color:color-mix(in srgb,var(--miel-600) 75%,#000);padding:0 var(--space-3) var(--space-2)}
.toc a{display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);text-decoration:none;color:var(--text-heading);
  font-weight:700;font-size:var(--fs-body-s);line-height:1.3;transition:background var(--dur-2) var(--ease-out)}
.toc a:hover{background:var(--cream-50);color:var(--text-heading)}
.toc a span:first-child{color:color-mix(in srgb,var(--miel-600) 75%,#000);flex:none}
.legal-body{min-width:0;display:flex;flex-direction:column;gap:var(--space-5)}
.legal-sec{background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);
  padding:clamp(20px,4vw,40px);display:flex;flex-direction:column;gap:var(--space-4);scroll-margin-top:110px}
.legal-sec-title{display:flex;gap:var(--space-4);align-items:baseline}
.legal-sec-title span{font-family:var(--font-display);font-size:var(--fs-display-s);line-height:1;color:var(--miel-600)}
.legal-sec h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-s);line-height:1.05;color:var(--text-heading)}
.legal-sec p{margin:0;line-height:1.6;max-width:62ch;text-wrap:pretty}
.legal-sec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.legal-sec li{display:flex;gap:var(--space-3);align-items:flex-start;line-height:1.5;max-width:62ch}
.legal-sec li .ic{margin-top:2px;color:var(--text-heading)}
.legal-note{margin:0;font-size:var(--fs-caption);color:var(--text-muted);line-height:1.5;max-width:62ch}
.legal-sec a{color:var(--text-heading);font-weight:700}
.toc a span:first-child .ic{font-size:1em}
/* Règlement intérieur: the poster version, grouped like at the door */
.rules-short{background:var(--surface-page-alt)}
.rules-short-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-5) var(--space-6)}
.rules-short-group{display:flex;flex-direction:column;gap:var(--space-3)}
.rules-short h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);line-height:1.1;color:var(--text-heading)}
.rules-callout{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--surface-card);border:1.5px solid var(--border-hairline)}
.rules-pre{white-space:pre-line}

@media (max-width:860px){
  .legal-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-width:none}
  .carte-card{position:relative;top:auto}
}
@media (max-width:640px){
  .legal-head-art{opacity:.35}
}

/* ---------- Allergens (menu) ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.carte-item p.carte-allergenes{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:.78rem;line-height:1.3;color:var(--text-muted)}
.carte-allergenes [data-a]{padding:2px 8px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);background:var(--cream-50);transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.carte-allergenes.is-unknown{font-style:italic}
.carte-item p.carte-traces{margin-top:-2px;align-items:center}
.carte-traces [data-a]{border-style:dashed;background:transparent}
.allergen-note{font-size:.85rem;color:var(--text-muted);max-width:65ch}
.carte-allergenes [data-a].is-hit{background:var(--brown-700);border-color:var(--brown-700);color:var(--cream-100);font-weight:700}
.carte-list .carte-item{transition:opacity var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease-out)}
.carte-extra-list li{transition:opacity var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease-out)}
.carte-item.is-avoid,.carte-extra-list li.is-avoid{opacity:.6;filter:grayscale(.7)}
.carte-item.is-avoid h3,.carte-extra-list li.is-avoid span{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--miel-500)}
.carte-item.is-unchecked .carte-allergenes{color:var(--miel-600,#b85c4f);font-weight:700}
.carte-extra-list li.is-unchecked{outline:1.5px dashed var(--miel-500);outline-offset:2px}

.allergen-filter-wrap{padding:0 var(--gutter-inline) var(--space-6)}
.allergen-filter{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) clamp(20px,4vw,40px);background:var(--surface-card);border:1.5px dashed var(--border-hairline);border-radius:var(--radius-xl)}
.allergen-filter-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4)}
.allergen-filter-head .sc-caps{display:inline-flex;align-items:center;gap:8px}
.allergen-filter-head .ic{--s:16px}
.allergen-filter-head a{font-size:var(--fs-body-s);font-weight:700;color:var(--text-heading);text-decoration:none}
.allergen-chips button.tag{cursor:pointer;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),scale var(--dur-3) var(--ease-stretch)}
.allergen-chips button.tag:hover{background:var(--cream-300)}
.allergen-chips button.tag:active{scale:.95}
.allergen-chips button.tag[aria-pressed="true"]{background:var(--brown-700);border-color:var(--brown-700);color:var(--cream-100)}
.allergen-chips button.tag[aria-pressed="true"]::before{content:"✕" / "";font-size:.75em}
.allergen-reset{background:transparent;border-style:dashed}
.allergen-reset[hidden]{display:none}
.allergen-status{margin:0;font-size:var(--fs-body-s);color:var(--text-muted)}

.allergen-table-scroll{overflow-x:auto;border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);background:var(--surface-card)}
.allergen-table-scroll:focus-visible{outline:3px solid var(--focus-ring,var(--brown-500));outline-offset:3px}
.allergen-table{width:100%;border-collapse:collapse;font-size:var(--fs-body-s)}
.allergen-table th,.allergen-table td{padding:8px 6px;border-bottom:1px solid var(--border-hairline);text-align:center}
.allergen-table thead th{vertical-align:bottom;font-size:.75rem;font-weight:700;color:var(--text-heading)}
.allergen-table thead th span{writing-mode:vertical-rl;rotate:180deg;white-space:nowrap;display:inline-block}
.allergen-table th[scope="row"],.allergen-table thead th:first-child{text-align:left;padding-left:var(--space-4);min-width:150px;position:sticky;left:0;background:var(--surface-card);z-index:1;font-weight:700;color:var(--text-heading)}
.allergen-table th[scope="row"] small{display:block;font-weight:400;font-style:italic;color:var(--text-muted)}
.allergen-table .allergen-group th{text-align:left;padding:14px var(--space-4) 6px;font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--text-heading);background:var(--cream-50);position:sticky;left:0}
.allergen-table tbody tr:not(.allergen-group):hover{background:var(--cream-50)}
.allergen-table tbody tr:not(.allergen-group):hover th{background:var(--cream-50)}
.allergen-table tr.is-unknown td{background:repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in oklab,var(--miel-500) 12%,transparent) 6px 8px)}
.allergen-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--brown-700);box-shadow:0 0 0 3px color-mix(in oklab,var(--miel-500) 25%,transparent)}
.allergen-dot.is-trace{width:10px;height:10px;background:transparent;border:2px solid var(--brown-700);box-shadow:none}
@media print{.allergen-table-scroll{overflow:visible;border:0}.allergen-table th[scope="row"]{position:static}}