/* Sunshine Coffee — motion, mobile navigation and small-screen refinements.
   Cat-paced: unhurried, a little springy. Everything decorative is off under prefers-reduced-motion. */

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
/* Smoothness is owned by Lenis / main.ts. Native smooth would turn the router's cross-page
   hash jump (/#chats) into a slow scroll that the fresh Lenis instance then fights. */
html{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
main [id],.carte-cat,.legal-sec{scroll-margin-top:88px}
/* hero photo overscans upward so the scroll parallax never shows an empty edge */
.hero-photo .slot{inset:-16% 0 0}

/* ---------- Keyframes ---------- */
@keyframes rv-up{from{opacity:0;translate:0 24px}}
@keyframes rv-scale{from{opacity:0;translate:0 20px;scale:.95}}
@keyframes rv-left{from{opacity:0;translate:-24px 0}}
@keyframes rv-word{from{opacity:0;translate:0 .5em;rotate:7deg}}
@keyframes pop{0%{opacity:0;scale:.8}60%{opacity:1}}
@keyframes photo-in{from{clip-path:inset(14% 10% 0 10% round 48px);translate:0 40px}}
@keyframes photo-zoom{from{scale:1.35}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes wobble{0%,100%{rotate:0deg}25%{rotate:-7deg}75%{rotate:6deg}}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Scroll reveal (hidden state only when JS can bring it back) ---------- */
  @media (scripting:enabled){
    [data-reveal]:not(.is-in){opacity:0}
    [data-reveal].is-in{animation:rv-up .7s var(--ease-out) calc(var(--d,0) * 90ms) backwards}
    [data-reveal="scale"].is-in{animation-name:rv-scale}
    [data-reveal="left"].is-in{animation-name:rv-left}
    [data-reveal="split"]:not(.is-in){opacity:1}
    [data-reveal="split"]:not(.is-in) .w{opacity:0}
    [data-reveal="split"].is-in{animation:none}
    [data-reveal="split"].is-in .w{animation:rv-word .85s var(--ease-stretch) calc(var(--d,0) * 90ms + var(--i) * 55ms) backwards}
  }

  /* ---------- Entrance of page heads (hero, carte, légal) ---------- */
  .enter>:not([data-reveal]){animation:rv-up .7s var(--ease-out) calc((var(--e,0) + var(--n,0)) * 90ms + 80ms) backwards}
  .enter>:nth-child(2){--n:1}.enter>:nth-child(3){--n:2}.enter>:nth-child(4){--n:3}
  .enter>:nth-child(5){--n:4}.enter>:nth-child(6){--n:5}.enter>:nth-child(7){--n:6}
  .enter>img{animation-name:pop!important;animation-timing-function:var(--ease-stretch)!important}

  /* Hero: photo unveils, then the stickers land one by one */
  .hero-photo{animation:photo-in 1.2s var(--ease-out) .3s backwards}
  .hero-photo .slot{animation:photo-zoom 1.8s var(--ease-out) .3s backwards}
  .hero-croissant{animation:pop .9s var(--ease-stretch) .95s backwards,bob 6s ease-in-out 2s infinite}
  .stamp{animation:pop .8s var(--ease-stretch) 1.1s backwards}
  .float-card{animation:rv-left .9s var(--ease-stretch) 1.25s backwards}
  .addr-pill{animation:pop .8s var(--ease-stretch) 1.4s backwards}
  .hero .btn .i-arrow-right{transition:translate var(--dur-2) var(--ease-stretch)}
  @media (hover:hover) and (pointer:fine){.btn:hover .i-arrow-right{translate:4px 0}}
  /* Page transitions live in fx.css. */

  /* ---------- Hover ---------- */
  .tile{transition:transform var(--dur-3) var(--ease-stretch),box-shadow var(--dur-2) var(--ease-out)}
  .tile .slot,.cat-photo .slot,.carte-photo .slot,.plan .slot{transition:scale .45s var(--ease-out)}
  @media (hover:hover) and (pointer:fine){
    .tile:hover{transform:rotate(0deg);box-shadow:var(--shadow-2)}
    .tile:hover .slot,.cat-card:hover .cat-photo .slot,.carte-card:hover .carte-photo .slot,.plan:hover .slot{scale:1.07}
    .pillars>div:hover .pillar-ic{animation:wobble .6s var(--ease-out)}
    .step{transition:translate var(--dur-3) var(--ease-stretch),box-shadow var(--dur-2) var(--ease-out)}
    .step:hover{translate:0 -6px;box-shadow:var(--shadow-2)}
    .step:hover .step-top .ic{animation:wobble .6s var(--ease-out)}
    .band img:hover{animation:wobble .6s var(--ease-out)}
    .marquee:hover .marquee-track{animation-play-state:paused}
    .stamp-pos:hover .stamp svg{animation-duration:6s}
    .stamp{transition:scale var(--dur-3) var(--ease-stretch)}
    .stamp-pos:hover .stamp{scale:1.08}
    .float-card,.addr-pill{transition:translate var(--dur-3) var(--ease-stretch),box-shadow var(--dur-2) var(--ease-out)}
    .float-card:hover,.addr-pill:hover{translate:0 -4px;box-shadow:var(--shadow-3)}
    .carte-item:hover::before{opacity:1}
    .carte-item-price{transition:color var(--dur-2) var(--ease-out)}
    .carte-item:hover .carte-item-price{color:var(--miel-600)}
    .legal-sec{transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
    .legal-sec:hover{border-color:var(--cream-400);box-shadow:var(--shadow-2)}
    .toc a{transition:background var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-stretch)}
    .toc a:hover{translate:4px 0}
    .mood-card{transition:transform var(--dur-3) var(--ease-stretch)}
    .mood-card:hover{transform:rotate(0deg)}
    .tips-card{transition:transform var(--dur-3) var(--ease-stretch)}
    .tips-card:hover{transform:rotate(0deg)}
    .carte-cta-copy img{transition:rotate var(--dur-3) var(--ease-stretch)}
    .carte-cta:hover .carte-cta-copy img{rotate:20deg}
    .wordmark-in{display:inline-block;transition:translate .6s var(--ease-stretch),color .4s var(--ease-out)}
    .wordmark:hover .wordmark-in{translate:0 -.06em;color:var(--brown-500)}
  }
}

/* Underline sweep for text links */
.u-sweep{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size var(--dur-3) var(--ease-out),color var(--dur-2) var(--ease-out)}
.u-sweep:hover,.u-sweep:focus-visible{background-size:100% 1.5px}

/* ---------- NavBar: scrolled state, progress, burger ---------- */
/* Scrolled state only shrinks the logo (transform) and deepens the shadow: the bar keeps its height,
   so nothing below it reflows. */
.navbar{transition:box-shadow var(--dur-3) var(--ease-out)}
.navbar-logo img{transition:scale var(--dur-3) var(--ease-out);transform-origin:0 50%;width:auto}
.nav-sticky.is-scrolled .navbar{box-shadow:0 8px 24px -18px rgba(60,30,10,.45)}
.nav-sticky.is-scrolled .navbar-logo img{scale:.82}
.navbar nav a:not([aria-current]){position:relative}
.scroll-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--miel-500);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

.burger{display:none;position:relative;width:44px;height:44px;flex:none;border-radius:var(--radius-pill);border:1.5px solid var(--cream-400);background:var(--surface-card);cursor:pointer;
  transition:var(--transition-control);color:var(--text-heading)}
.burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--dur-3) var(--ease-stretch),opacity var(--dur-2)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20px;right:17px}.burger span:nth-child(3){top:25px}
@media (hover:hover) and (pointer:fine){.burger:hover span:nth-child(2){right:12px}}
.burger:active{transform:var(--press-scale)}

/* ---------- Drawer (mobile menu) ---------- */
.drawer{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:var(--space-6);overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top)) var(--gutter-inline) max(24px,env(safe-area-inset-bottom));
  background:var(--surface-page);background-image:var(--texture-grain);
  clip-path:circle(0 at calc(100% - 42px) 42px);visibility:hidden;
  transition:clip-path .28s var(--ease-out),visibility 0s linear .28s}
.drawer[hidden]{display:none}
.drawer.is-open{clip-path:circle(150% at calc(100% - 42px) 42px);visibility:visible;transition:clip-path .45s cubic-bezier(.32,.72,0,1),visibility 0s}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.drawer-top .navbar-logo img{height:40px}
.i-x{--i:url("/icons/lucide/x.svg")}
.drawer-links{display:flex;flex-direction:column;border-top:1.5px solid var(--border-hairline)}
.drawer-links a{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1.5px solid var(--border-hairline);text-decoration:none;color:var(--text-heading)}
.drawer-num{font-weight:700;font-size:var(--fs-caption);color:color-mix(in srgb,var(--miel-600) 75%,#000);width:2ch}
.drawer-label{flex:1;font-family:var(--font-display);font-size:clamp(2rem,9.6vw,3.2rem);line-height:1;white-space:nowrap}
.drawer-links .ic{color:var(--brown-400);transition:translate var(--dur-2) var(--ease-stretch),color var(--dur-2)}
.drawer-links a:hover .ic,.drawer-links a:focus-visible .ic{translate:-6px 0;color:var(--accent-primary)}
.drawer-links a[aria-current="page"] .drawer-label{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--miel-500)}
.drawer-foot{display:flex;flex-direction:column;gap:var(--space-3);margin-top:auto;font-weight:700;color:var(--text-heading)}
.drawer-info{display:flex;gap:var(--space-3);align-items:center}
.drawer-art{position:absolute;right:-22px;bottom:calc(env(safe-area-inset-bottom) + 170px);width:104px;rotate:-14deg;opacity:.9;pointer-events:none;z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .drawer-links a,.drawer-foot{opacity:0;translate:0 16px;transition:opacity .3s var(--ease-out),translate .4s var(--ease-stretch)}
  .drawer.is-open .drawer-links a,.drawer.is-open .drawer-foot{opacity:1;translate:none;transition-delay:calc(.1s + var(--i) * 40ms)}
}
@media (prefers-reduced-motion:reduce){.drawer,.drawer.is-open{transition:none}}

/* ---------- Cats carousel: drag + arrows ---------- */
.cats-track{scroll-padding-inline:var(--gutter-inline);overscroll-behavior-x:contain}
.cats-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.cats-track.is-dragging *{pointer-events:none}
@media (hover:hover) and (pointer:fine){.cats-track{cursor:grab}}
[data-cats][aria-disabled="true"]{opacity:.4;cursor:default}

/* ==========================================================================
   Responsive refinements
   ========================================================================== */
@media (max-width:760px){
  .navbar{gap:var(--space-3);padding:12px var(--gutter-inline)}
  .navbar-logo img{height:40px}
  .navbar nav,.nav-insta{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:block}

  .hero{padding-top:var(--space-8)}
  .hero-copy{gap:var(--space-4)}
  .hero-visual{margin-top:var(--space-10)}
  .hero-photo{height:clamp(300px,95vw,420px);border-radius:var(--radius-xl)}
  .float-card{left:8px;right:auto;bottom:24px;max-width:min(260px,72%)}
  .addr-pill{right:8px;padding:8px 14px;font-size:var(--fs-body-s)}

  .maison-deco-l,.maison-deco-r{opacity:.55}
  .maison-head{margin-bottom:var(--space-7)}
  .pillars{margin-top:var(--space-8);gap:var(--space-6)}

  .cat-card,.cat-more{width:min(280px,76vw)}
  .cat-photo{height:240px}

  .humeur{margin-inline:8px;border-radius:var(--radius-xl)}
  .humeur .split{gap:var(--space-8)}
  .mood-card{transform:rotate(1deg)}

  .rules li{border-radius:var(--radius-xl)}
  .regles-head h2{max-width:none}

  .tips-card{transform:none;margin-top:var(--space-4)}
  .footer-top{flex-direction:column;align-items:flex-start}
  .footer-nav{gap:var(--space-3) var(--space-5)}

  .carte-hero,.legal-head{padding-top:var(--space-8)}
  .carte-item{grid-template-columns:minmax(0,1fr) auto}
  .carte-cta{flex-direction:column;align-items:stretch}
  .carte-cta .btn{width:100%;box-sizing:border-box}
}
@media (max-width:520px){
  .hero .row-wrap:last-child{flex-direction:column;align-self:stretch}
  .hero .row-wrap:last-child .btn{width:100%;box-sizing:border-box}
  .hero h1{font-size:clamp(2.9rem,14vw,3.6rem)}
  .stamp-pos{transform:rotate(-8deg) scale(.62);top:-78px;right:-12px}
  .hero-croissant{width:84px;top:-44px;left:4px}
  .moods{max-width:none}
  .mood{aspect-ratio:auto;min-height:132px;padding:var(--space-4)}
  .mood b{font-size:var(--fs-body-s)}
  .collage{gap:var(--space-3)}
  .t-count b{font-size:var(--fs-display-s)}
  .visite h2{font-size:var(--fs-display-l)}
  .nav-cta{padding:0 12px}
  .carte-cta-copy{flex-direction:column;align-items:flex-start}
  .carte-item-name h3{font-size:1.4rem}
  .legal-head h1{font-size:var(--fs-display-l)}
  .legal-sec-title{gap:var(--space-3)}
  /* legal page switcher scrolls sideways instead of wrapping into a wall of chips */
  .legal-head .tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter-inline) * -1);padding:2px var(--gutter-inline);scroll-padding-inline:var(--gutter-inline)}
  .legal-head .tags::-webkit-scrollbar{display:none}
  .legal-head .tags .tag{flex:none}
  .carte-hero .tags{gap:var(--space-2)}
}
@media (max-width:360px){
  .nav-cta .ic{display:none}
}

/* ---------- Editable content (Keystatic) ---------- */
.notices{display:grid}
.notice{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:10px var(--gutter-inline, 20px);
  background:var(--miel-200);color:var(--brown-800);font-size:var(--fs-body-s);line-height:1.35;text-align:center;border-bottom:1.5px solid var(--border-hairline)}
.notice[hidden]{display:none}
.notice p{margin:0}
.notice .ic{flex:none}
.notice-info{background:var(--sage-100)}
@media (prefers-reduced-motion:no-preference){.notice:not([hidden]){animation:rv-up .6s var(--ease-out) backwards}}
@media (max-width:520px){.notice{justify-content:flex-start;text-align:left}}

.float-card .disc,.mood-cat .disc{overflow:hidden}
.float-card .disc img{width:100%;height:100%;object-fit:cover}
.mood-photo img[hidden]{display:none}

.carte-item.has-photo{grid-template-columns:64px minmax(0,1fr) auto;align-items:center}
.carte-item-photo{grid-row:span 2;width:64px;height:64px;border-radius:var(--radius-md, 14px);object-fit:cover;align-self:start}
.carte-item.has-photo p{grid-column:2 / -1}
@media (max-width:520px){
  .carte-item.has-photo{grid-template-columns:52px minmax(0,1fr) auto}
  .carte-item-photo{width:52px;height:52px}
}

/* Carte: item photos stacked over the rubrique photo, shown on hover (desktop) or tap. */
.carte-photo-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.carte-photo-alt.is-shown{opacity:1}
.carte-item.has-photo{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Row highlight bleeds past the text on a pseudo-element, so hovering never reflows the row. */
.carte-item{position:relative;isolation:isolate}
.carte-item::before{content:"";position:absolute;inset:0 calc(var(--space-3) * -1);z-index:-1;background:var(--cream-50);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out)}
.carte-item.is-active::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .carte-photo-alt{transition:opacity .45s var(--ease-out),scale .45s var(--ease-out);scale:1.04}
  .carte-photo-alt.is-shown{scale:1}
}
/* Below 860px the rubrique card is no longer sticky and scrolls out of view: the tapped item
   opens its own photo instead. */
@media (max-width:860px){
  .carte-item.has-photo.is-active{grid-template-columns:minmax(0,1fr) auto}
  .carte-item.has-photo.is-active p{grid-column:1 / -1}
  .carte-item.is-active .carte-item-photo{grid-row:auto;grid-column:1 / -1;order:10;width:100%;height:auto;aspect-ratio:4 / 3;margin-top:var(--space-2)}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .carte-item.is-active .carte-item-photo{animation:rv-up .45s var(--ease-out) backwards}
}

/* Access map (Google Maps, loaded on click) */
.plan-wrap{display:flex;flex-direction:column;gap:var(--space-3)}
.plan{height:260px}
.plan iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s var(--ease-out)}
.plan.is-loaded iframe{opacity:1}
.plan.is-loaded .plan-facade{visibility:hidden}
.plan-facade .btn{margin-top:var(--space-1)}
.plan-facade small{max-width:34ch;font-weight:500;font-size:.75rem}
.plan-route{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);color:var(--miel-200);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.plan-route:hover{color:var(--cream-50)}
@media (hover:hover) and (pointer:fine){.plan.is-loaded:hover .slot{scale:1}}

/* ---------- Avis clients ---------- */
.avis-head{margin-bottom:var(--space-8);max-width:560px}
.avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-6);align-items:start}
.avis-card{position:relative;margin:0;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);
  background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);
  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){.avis-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--shadow-2)}}
.avis-quote{--s:44px;position:absolute;top:var(--space-5);right:var(--space-5);color:var(--miel-200)}
.avis-stars{display:flex;gap:2px;color:var(--miel-500)}
.avis-stars svg{width:18px;height:18px;fill:currentColor}
.avis-card blockquote{margin:0}
.avis-card blockquote p{margin:0;font-size:var(--fs-lead);line-height:1.5;color:var(--text-heading);text-wrap:pretty}
.avis-card figcaption{display:flex;align-items:center;gap:var(--space-3);margin-top:auto;padding-top:var(--space-4);border-top:1.5px dashed var(--border-hairline)}
.avis-card figcaption .disc{font-family:var(--font-display);font-size:1.3rem;background:var(--miel-200);color:var(--brown-700)}
.avis-card figcaption b{color:var(--text-heading)}
.avis-card figcaption small{font-size:var(--fs-caption);color:var(--text-muted)}

/* ---------- Instagram ---------- */
.insta{background:var(--surface-warm)}
.insta-head{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-8)}
.insta-head .stack{max-width:560px}
.insta-head p{margin:0;line-height:1.55}
.insta-head .btn[hidden]{display:none}
.insta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.5vw,20px)}
.insta-grid[hidden]{display:none}
.insta-tile{position:relative;display:block;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-200)}
.insta-tile.is-loading{background:repeating-linear-gradient(-45deg,var(--cream-200) 0 14px,var(--cream-300) 14px 28px)}
.insta-tile img{width:100%;height:100%;object-fit:cover;display:block}
.insta-badge{position:absolute;top:10px;right:10px;color:var(--cream-50);filter:drop-shadow(0 1px 3px rgb(0 0 0 / .5))}
.insta-cap{position:absolute;inset:auto 0 0;padding:var(--space-7) var(--space-3) var(--space-3);color:var(--cream-50);font-size:var(--fs-caption);line-height:1.35;
  background:linear-gradient(transparent,rgb(40 20 8 / .85));opacity:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.insta-tile:focus-visible .insta-cap{opacity:1}
@media (hover:hover) and (pointer:fine){.insta-tile:hover .insta-cap{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .insta-tile img{opacity:0;transition:opacity .5s var(--ease-out),scale .45s var(--ease-out)}
  .insta-tile img.is-in{opacity:1}
  .insta-cap{transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-3) var(--ease-out);translate:0 8px}
  .insta-tile:focus-visible .insta-cap{translate:0}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .insta-tile:hover img{scale:1.06}
  .insta-tile:hover .insta-cap{translate:0}
}
@media (max-width:640px){.insta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- La carte: sticky rubrique bar, formats, compact rubriques ---------- */
.carte-nav{position:sticky;top:var(--nav-h,66px);z-index:20;padding:var(--space-3) var(--gutter-inline);
  background:color-mix(in oklab,var(--cream-100) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--border-hairline)}
.carte-nav .tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--gutter-inline)}
.carte-nav .tags::-webkit-scrollbar{display:none}
.carte-nav .tag{flex:none;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.carte-nav .tag.is-current{background:var(--surface-ink);border-color:var(--surface-ink);color:var(--text-inverse)}
.carte-cat,.carte-extra{scroll-margin-top:calc(var(--nav-h,66px) + 72px)}
@media (min-width:861px){.carte-card{top:calc(var(--nav-h,66px) + 88px)}}

.tag.tag-note{padding:4px 10px;font-size:.8rem;background:transparent;border-style:dashed}
.carte-formats{margin:0;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.carte-formats div{display:flex;gap:var(--space-2);align-items:baseline;white-space:nowrap}
.carte-formats dt{font-size:var(--fs-body-s);color:var(--text-muted,inherit)}
.carte-formats dd{margin:0;font-weight:700;color:var(--text-heading);font-size:var(--fs-lead)}

.carte-extra{position:relative;padding:0 var(--gutter-inline) var(--space-6)}
.carte-extra-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);padding:var(--space-4) clamp(20px,4vw,40px);
  border:1.5px dashed var(--border-hairline);border-radius:var(--radius-xl)}
.carte-extra-title{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.4rem;color:var(--text-heading)}
.carte-extra-title .ic{--s:18px}
.carte-extra-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.carte-extra-list li{display:inline-flex;gap:8px;align-items:baseline;padding:6px 14px;border-radius:var(--radius-pill);background:var(--surface-card);border:1.5px solid var(--border-hairline);font-size:var(--fs-body-s)}
.carte-extra-list b{color:var(--text-heading)}
.carte-extra-row p{flex-basis:100%;margin:0;font-size:var(--fs-body-s)}
@media (max-width:860px){
  .carte-photo{height:180px}
}

/* ---------- 404 ---------- */
.lost{padding:var(--space-10) var(--gutter-inline) var(--section-y);min-height:60vh;display:grid;align-items:center}
.lost-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}
.lost 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:14ch}
.lost .lead{max-width:44ch;text-wrap:pretty}
.lost .row-wrap{justify-content:center}
.lost-disc{width:120px;height:120px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-card);border:2px dashed var(--cream-500);rotate:-6deg}
.lost-disc img{width:100%;height:100%;object-fit:cover}
.lost-disc .ic{--s:48px}

/* ---------- Fiche chat ---------- */
.fiche{padding:var(--space-8) var(--gutter-inline) var(--section-y)}
.fiche-back{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text-heading);text-decoration:none;margin-bottom:var(--space-6)}
.fiche-back .ic{--s:18px}
.fiche-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:start}
.fiche-media{position:sticky;top:calc(var(--nav-h,66px) + 24px);display:flex;flex-direction:column;gap:var(--space-3)}
.fiche-photo{position:relative;aspect-ratio:4 / 5;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-2);rotate:-1.5deg}
.fiche-photo .slot{height:100%}
.fiche-photo .slot img{width:100%;height:100%;object-fit:cover}
.fiche-photo .badge{position:absolute;top:14px;left:14px}
.fiche-galerie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}
.fiche-galerie img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg)}
.fiche-body{display:flex;flex-direction:column;gap:var(--space-5)}
.fiche-body h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-xl);line-height:.92;color:var(--text-heading)}
.fiche-body .lead{margin:0;max-width:44ch;text-wrap:pretty}
.fiche-tags{list-style:none;margin:0;padding:0}
.fiche-facts{margin:0;display:grid;gap:var(--space-3);padding:var(--space-4) var(--space-5);border:1.5px dashed var(--border-hairline);border-radius:var(--radius-xl)}
.fiche-facts div{display:grid;grid-template-columns:130px 1fr;gap:var(--space-3)}
.fiche-facts dt{font-weight:700;color:var(--text-heading)}
.fiche-facts dd{margin:0}
.fiche-histoire{display:flex;flex-direction:column;gap:var(--space-3)}
.fiche-histoire h2{margin:0}
.fiche-histoire p{margin:0;max-width:60ch;line-height:1.6;text-wrap:pretty}
.fiche-cta{background:var(--surface-ink);color:var(--text-inverse);border-radius:var(--radius-xl);padding:clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:var(--space-4);rotate:.5deg}
.fiche-cta h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-display-s);line-height:1;color:var(--text-inverse)}
.fiche-cta p{margin:0;color:var(--text-inverse-muted);line-height:1.5}
.fiche-cta b{color:var(--text-inverse)}
.fiche-cta .row-wrap{justify-content:flex-start}
.fiche-cta .btn-secondary{background:transparent;color:var(--text-inverse);border-color:currentColor}
.fiche-note{display:flex;gap:var(--space-3);align-items:flex-start;margin:0;padding:var(--space-4) var(--space-5);background:var(--surface-card);border-radius:var(--radius-xl);border:1.5px solid var(--border-hairline)}
.fiche-note .ic{flex:none;margin-top:3px}
.fiche-asso{display:flex;flex-direction:column;gap:4px;padding:var(--space-4) var(--space-5);background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl)}
.fiche-asso b{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--text-heading)}
.fiche-asso p{margin:var(--space-2) 0 0;font-size:var(--fs-body-s);line-height:1.5}
.fiche-asso a{display:inline-flex;gap:6px;align-items:center;align-self:flex-start;margin-top:var(--space-2);font-weight:700;color:var(--text-heading);text-decoration:none}
.fiche-asso a .ic{--s:16px}
.fiche-autres{padding-top:var(--section-y)}
.fiche-autres h2{margin:0 0 var(--space-4)}
.fiche-autres-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.fiche-autres-list a{display:flex;align-items:center;gap:var(--space-3);padding:8px 18px 8px 8px;border-radius:var(--radius-pill);background:var(--surface-card);border:1.5px solid var(--border-hairline);text-decoration:none;color:var(--text-body);transition:var(--transition-control)}
@media (hover:hover) and (pointer:fine){.fiche-autres-list a:hover{border-color:var(--brown-300);translate:0 -2px}}
.fiche-autres-list .disc{width:44px;height:44px;overflow:hidden}
.fiche-autres-list .disc img{width:100%;height:100%;object-fit:cover}
.fiche-autres-list b{color:var(--text-heading)}
.fiche-autres-list small{font-size:var(--fs-caption);color:var(--text-muted)}
@media (max-width:860px){
  .fiche{padding-top:var(--space-6)}
  .fiche-grid{grid-template-columns:1fr}
  .fiche-media{position:relative;top:auto}
  .fiche-photo{aspect-ratio:1;rotate:0deg}
  .fiche-facts div{grid-template-columns:1fr;gap:2px}
}

/* ---------- Home: whole cat card links to its page ---------- */
.cat-card{position:relative}
.cat-link{color:inherit;text-decoration:none}
.cat-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.cat-link:focus-visible{outline:none}
.cat-card:has(.cat-link:focus-visible){outline:3px solid var(--focus-ring,var(--brown-500,#6b3f1d));outline-offset:4px}
.cat-more-link{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-caption);font-weight:700;color:var(--text-heading)}
.cat-more-link .ic{--s:14px;transition:translate var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cat-card:hover .cat-more-link .ic{translate:4px 0}}
.cats-track.is-dragging .cat-link::after{pointer-events:none}
a.float-card{color:inherit;text-decoration:none;transition:transform var(--dur-3) var(--ease-stretch)}
@media (hover:hover) and (pointer:fine){a.float-card:hover{transform:rotate(0deg) translateY(-4px)}}

/* ---------- Adoption: cats waiting + partner associations ---------- */
.adopt-cta{margin-top:calc(var(--space-9) + 96px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-5) var(--space-6);background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-1)}
.adopt-cta h3{margin:0}
.adopt-cats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.adopt-cats a{display:flex;align-items:center;gap:var(--space-2);padding:4px 14px 4px 4px;border-radius:var(--radius-pill);background:var(--surface-page-alt);
  color:var(--text-heading);font-weight:700;text-decoration:none;transition:var(--transition-control)}
@media (hover:hover) and (pointer:fine){.adopt-cats a:hover{background:var(--miel-200);translate:0 -2px}}
.adopt-cats .disc{width:36px;height:36px;overflow:hidden;background:var(--surface-card)}
.adopt-cats .disc img{width:100%;height:100%;object-fit:cover}
.partenaires{margin-top:var(--space-6);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3) var(--space-6)}
.partenaires ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.partenaires li{display:flex;gap:8px;align-items:baseline}
.partenaires b{color:var(--text-heading)}
.partenaires a{color:inherit;text-decoration:none}
.partenaires small{font-size:var(--fs-caption);color:var(--text-muted)}
/* Adopted cats: a small wall of polaroids, no link (their page is gone). */
.adoptes{margin-top:var(--space-7);display:grid;gap:var(--space-4)}
.adoptes h3,.adoptes p{margin:0}
.adoptes p{color:var(--text-muted);max-width:60ch}
.adoptes-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--space-4)}
.adoptes-list li{display:grid;gap:6px;padding:6px 6px 10px;background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-md,12px);
  box-shadow:var(--shadow-1);rotate:var(--tilt,0deg);text-align:center}
.adoptes-photo{aspect-ratio:1;border-radius:calc(var(--radius-md,12px) - 4px);overflow:hidden;background:var(--surface-page-alt);display:grid;place-items:center;color:var(--text-muted)}
.adoptes-photo img{width:100%;height:100%;object-fit:cover}
.adoptes-list b{color:var(--text-heading);font-size:var(--fs-body-s)}
@media (max-width:860px){.adopt-cta{margin-top:var(--space-8)}}

/* ---------- Événements ---------- */
.events-head{margin-bottom:var(--space-8);max-width:560px}
.events-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--space-6)}
.event-card{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);overflow:hidden;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){.event-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-2)}}
.event-date{position:absolute;top:14px;left:14px;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 10px 10px;
  background:var(--miel-500);color:var(--brown-800);border:var(--border-inked);border-radius:var(--radius-lg);box-shadow:var(--shadow-sticker);rotate:-4deg}
.event-date b{font-family:var(--font-display);font-weight:400;font-size:2.25rem;line-height:.9}
.event-date span{font-weight:700;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em}
.event-photo{display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover}
.event-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-5)}
.event-card:not(:has(.event-photo)) .event-body{padding-top:calc(14px + 76px + var(--space-3))}
.event-body h3{margin:0}
.event-body p{margin:0;font-size:var(--fs-body-s);line-height:1.5}
.event-when{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--text-heading)}
.event-when .ic{--s:16px}
.event-foot{margin-top:auto;padding-top:var(--space-3);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3)}
.event-prix{font-weight:700;color:var(--text-heading)}

/* ---------- FAQ ---------- */
.faq .split{grid-template-columns:minmax(0,1fr);align-items:start}
/* Same as the rules: sticky title only side by side, never stacked over the questions. */
@media (min-width:1000px){.faq .split{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-head{position:sticky;top:120px}}
.faq-head h2{max-width:10ch}
.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{background:var(--surface-card);border:1.5px solid var(--border-hairline);border-radius:var(--radius-xl);transition:border-color var(--dur-2) var(--ease-out)}
.faq-item[open]{border-color:var(--brown-300)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);font-weight:700;color:var(--text-heading);line-height:1.35;border-radius:inherit}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{transition:rotate var(--dur-2) var(--ease-stretch)}
.faq-item[open] summary .ic{rotate:45deg}
.faq-answer{padding:0 var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.faq-answer p{margin:0;line-height:1.55;max-width:60ch}
.event-card[hidden],.events[hidden]{display:none}

/* ---------- Accessibility ---------- */
.skip-link{position:fixed;top:12px;left:12px;z-index:1000;padding:10px 18px;border-radius:var(--radius-pill);background:var(--surface-ink);color:var(--text-inverse);
  font-weight:700;text-decoration:none;translate:0 -200%;transition:translate var(--dur-2) var(--ease-out)}
.skip-link:focus{translate:0 0}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--brown-700);outline-offset:3px}
.on-ink :focus-visible,.ink :focus-visible{outline-color:var(--miel-200)}
.on-ink .mood-card :focus-visible,.on-ink .tips-card :focus-visible{outline-color:var(--brown-700)}
/* AA contrast for small text (≥ 4.5:1) on every accent theme */
.eyebrow{color:color-mix(in srgb,var(--miel-600) 75%,#000)}
.on-ink .mood-card .eyebrow,.on-ink .tips-card .eyebrow{color:color-mix(in srgb,var(--miel-600) 75%,#000)}
.badge[data-tone="open"]{color:color-mix(in srgb,var(--sage-600) 75%,#000)}
.slot small{color:var(--text-body)}
.partenaires small{color:var(--text-body)}
.fiche-cta :focus-visible{outline-color:var(--miel-200)}
[tabindex="-1"]:focus{outline:none}
/* Reduced motion keeps a soft fade for content arriving, no movement. */
@media (prefers-reduced-motion:reduce){
  @keyframes rv-fade{from{opacity:0}}
  .enter>*,[data-reveal].is-in{animation:rv-fade .4s var(--ease-out) backwards}
}
@media (prefers-reduced-motion:reduce){.event-card,.cat-card,a.float-card,.adopt-cats a,.fiche-autres-list a,.skip-link,.faq-item summary .ic{transition:none}.event-card:hover,a.float-card:hover{transform:rotate(var(--tilt,0deg))}}

/* ---------- Ouverture prochaine (teaser) ---------- */
.nav-cta-bientot{margin-left:auto}
.nav-cta-bientot .ic{display:inline-block}
.bientot-hero{overflow:hidden;padding-bottom:calc(var(--section-y) + 120px)}
/* Chantier tapes: hazard stripes on the edges, honey band with the text in the middle. */
.bientot-tapes{position:absolute;inset:auto 0 0;height:150px;pointer-events:none;isolation:isolate}
.bientot-tapes .tape{--stripes:repeating-linear-gradient(-45deg,var(--brown-800) 0 10px,var(--miel-500) 10px 20px);
  position:absolute;left:-5%;width:110%;bottom:46px;overflow:hidden;padding:14px 0;rotate:-3deg;
  background:var(--stripes) top/100% 9px no-repeat,var(--stripes) bottom/100% 9px no-repeat,var(--miel-500);
  border-block:2.5px solid var(--border-ink);box-shadow:var(--shadow-sticker)}
.bientot-tapes .tape + .tape{bottom:40px;rotate:2.5deg;z-index:-1;filter:brightness(.92)}
.tape-track{display:flex;width:max-content}
.tape-track span{white-space:pre;font-family:var(--font-display);font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brown-800)}
@keyframes tape-run{to{translate:-50% 0}}
@media (prefers-reduced-motion:no-preference){
  .tape-track{animation:tape-run 60s linear infinite}
  .tape + .tape .tape-track{animation-direction:reverse}
}
.bientot-hero h1{max-width:12ch}
.bientot-quand{display:inline-flex;align-items:center;gap:8px;background:var(--miel-500);color:var(--brown-800);border:2.5px solid var(--border-ink);
  box-shadow:var(--shadow-sticker);border-radius:var(--radius-pill);padding:10px 22px;font-weight:700;font-size:1.125rem;rotate:-3deg}
.bientot-addr{margin:var(--space-2) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center;font-weight:700;color:var(--text-body)}
.bientot-deco-l,.bientot-deco-r{position:absolute;pointer-events:none;width:clamp(72px,11vw,150px)}
.bientot-deco-l{left:clamp(-12px,3vw,64px);top:clamp(24px,8vw,120px);rotate:-14deg}
.bientot-deco-r{right:clamp(-12px,3vw,64px);bottom:calc(clamp(24px,6vw,96px) + 120px);rotate:10deg}
.bientot-concept .pillars{margin-top:0}
.bientot-cats{list-style:none;margin:0 auto;padding:var(--space-8) var(--gutter-inline) 0;max-width:var(--container-max);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-6)}
.bientot-cats .cat-card{width:auto}
.bientot-final{text-align:center}
.bientot-final h2{margin:0;max-width:16ch;color:var(--text-inverse)}
.bientot-final p{margin:0;max-width:48ch}
.bientot-final > .wrap > .ic{color:var(--miel-200)}
@media (max-width:640px){.bientot-deco-l,.bientot-deco-r{opacity:.5;width:64px}.bientot-deco-l{top:16px}.bientot-deco-r{bottom:auto;top:20px}}

/* ---------- Floating NavBar (test): rounded pill detached from the page edges ---------- */
.nav-sticky{--float-gap:12px;padding:var(--float-gap) var(--gutter-inline) 0;pointer-events:none}
.nav-sticky>*{pointer-events:auto}
.navbar{max-width:1240px;margin-inline:auto;padding:12px 12px 12px 24px;border:1.5px solid var(--border-hairline);border-radius:var(--radius-pill);
  background:color-mix(in oklab,var(--cream-100) 82%,transparent);box-shadow:0 10px 30px -22px rgba(60,30,10,.5)}
.nav-sticky.is-scrolled .navbar{box-shadow:0 14px 34px -18px rgba(60,30,10,.55)}
/* Progress bar sits along the bottom edge of the pill. */
.nav-sticky .scroll-progress{left:calc(var(--gutter-inline) + 28px);right:calc(var(--gutter-inline) + 28px);bottom:0;height:2.5px;border-radius:2px;
  max-width:calc(1240px - 56px);margin-inline:auto}
.navbar nav a,.nav-cta{white-space:nowrap}
@media (max-width:1000px){
  .navbar{gap:var(--space-3)}
  .navbar nav{gap:0}
  .navbar nav a{padding-inline:12px}
}
@media (max-width:760px){
  .nav-sticky{--float-gap:10px;padding-inline:12px}
  .navbar{padding:8px 8px 8px 16px}
  .nav-sticky .scroll-progress{left:36px;right:36px}
}

/* Carte rubrique bar follows the floating nav: plain row in the page, pill once stuck under the header. */
.carte-nav{padding:10px var(--gutter-inline);background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;pointer-events:none}
.carte-nav .tags{pointer-events:auto;max-width:1240px;padding:6px;border:1.5px solid transparent;border-radius:var(--radius-pill);
  transition:background var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),translate var(--dur-3) var(--ease-out)}
.carte-nav.is-stuck .tags{background:color-mix(in oklab,var(--cream-100) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:var(--border-hairline);box-shadow:0 10px 30px -22px rgba(60,30,10,.5)}
main [id],.legal-sec{scroll-margin-top:calc(var(--nav-h,88px) + 16px)}
@media (min-width:861px){.fiche-media{top:calc(var(--nav-h,88px) + 24px)}}
@media (max-width:760px){.carte-nav{padding-inline:12px}}

/* ---------- Picked from the refonte branches: pill eyebrows, sun stamp, taped cat cards, clipped steps, inked polaroids ---------- */
:root{--sun-200:#FBE7AE;--sun-300:#F7D57A;--sun-500:#F2B93B;--ink-line:2.5px solid var(--brown-800)}
.eyebrow{display:inline-block;width:fit-content;padding:6px 14px 5px;border:1.5px solid var(--brown-700);border-radius:var(--radius-pill);background:var(--sun-300);color:var(--brown-800)}
.on-ink .eyebrow{background:var(--miel-500);color:var(--brown-800);border-color:var(--cream-100)}
.on-ink .mood-card .eyebrow,.on-ink .tips-card .eyebrow{color:var(--brown-800)}
/* Stamp as a sun star; drop-shadow follows the star's outline. */
.stamp-pos{filter:drop-shadow(3px 3px 0 var(--brown-700))}
.stamp{border:0;border-radius:0;box-shadow:none;background:var(--sun-500);
  clip-path:path('M68.0 2.0L78.1 10.9L90.6 6.0L97.0 17.8L110.4 17.4L112.4 30.7L125.2 35.0L122.5 48.2L133.0 56.5L126.0 68.0L133.0 79.5L122.5 87.8L125.2 101.0L112.4 105.3L110.4 118.6L97.0 118.2L90.6 130.0L78.1 125.1L68.0 134.0L57.9 125.1L45.4 130.0L39.0 118.2L25.6 118.6L23.6 105.3L10.8 101.0L13.5 87.8L3.0 79.5L10.0 68.0L3.0 56.5L13.5 48.2L10.8 35.0L23.6 30.7L25.6 17.4L39.0 17.8L45.4 6.0L57.9 10.9Z')}
/* Cat cards: inked polaroid with a strip of tape on top. */
.cat-card{background:var(--cream-50);border:var(--ink-line);border-radius:10px;box-shadow:4px 4px 0 var(--brown-800)}
.cat-card::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:26px;translate:-50% 0;rotate:-4deg;background:color-mix(in oklab,var(--miel-500) 70%,transparent);border:1.5px solid color-mix(in oklab,var(--brown-800) 25%,transparent);z-index:4;pointer-events:none}
.cat-photo{border-radius:4px}
@media (hover:hover) and (pointer:fine){.cat-card:hover{box-shadow:7px 7px 0 var(--brown-800)}}
/* Steps: colored notes with a paper clip (::after is the grain overlay, so the clip is ::before). */
.step{position:relative;border:2px solid var(--brown-700);border-radius:6px 6px 28px 6px;box-shadow:4px 4px 0 var(--brown-700);background:var(--sun-200);rotate:-2deg}
.step:nth-child(2){background:var(--miel-200);rotate:1.5deg}
.step:nth-child(3){background:var(--sage-100);rotate:-1deg}
.step:nth-child(4){background:var(--cream-100);rotate:2deg}
.step::before{content:"";position:absolute;top:-18px;left:28px;width:16px;height:44px;border:3px solid var(--brown-700);border-radius:999px;rotate:8deg}
.step-top b{color:var(--brown-700)}
/* Adopted cats: inked polaroids. */
.adoptes-list{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.adoptes-list li{width:130px;padding:8px 8px 12px;background:var(--cream-50);border:var(--ink-line);border-radius:6px;box-shadow:3px 3px 0 var(--brown-800)}
.adoptes-photo{border-radius:3px}
.adoptes-photo img{filter:sepia(.25)}
.adoptes-list b{font-family:var(--font-display);font-weight:400;font-size:1.4rem}