/* ── Tokens — clair par défaut ── */
:root{
  --bg:#f5f4f7;
  --panel:#ffffff;
  --panel-2:#eeecf1;
  --line:rgba(24,14,34,.09);
  --line-strong:rgba(24,14,34,.2);
  --text:#15111a;
  --muted:#6a6273;
  --dim:#9b94a4;
  --accent:#15111a;
  --ok:#0e8a4f;
  --bad:#c42b45;
  --glass:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(24,14,34,.05),0 8px 24px -12px rgba(24,14,34,.12);
  --surface:0 0 0 1px rgba(24,14,34,.07),0 1px 2px rgba(24,14,34,.04),0 8px 24px -14px rgba(24,14,34,.14);
  --img-outline:rgba(0,0,0,.1);
  --grain:.035;
  /* dégradé du logo, adouci : lisible en texte, léger en fond */
  --grad:linear-gradient(100deg,#e8338f 0%,#f2702a 30%,#e9a40c 50%,#12b5c2 74%,#3a6cf0 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,45,141,.2),rgba(255,138,31,.2) 35%,rgba(255,194,26,.24) 55%,rgba(25,227,224,.24) 78%,rgba(42,107,255,.2));
  --display:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --body:"Figtree","Avenir Next","Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.05,.7,.1,1);
  --t-quick:160ms;
  --t-std:320ms;
  --r:14px;
  --gutter:18px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  --bg:#08070b;
  --panel:#131118;
  --panel-2:#1c1922;
  --line:rgba(255,240,250,.09);
  --line-strong:rgba(255,240,250,.2);
  --text:#f6f2f8;
  --muted:#a59cb0;
  --dim:#6f6779;
  --accent:#f6f2f8;
  --ok:#3ee38f;
  --bad:#ff7a8a;
  --glass:rgba(30,27,36,.82);
  --shadow:none;
  --surface:0 0 0 1px rgba(255,240,250,.09);
  --img-outline:rgba(255,255,255,.1);
  --grain:.05;
  --grad:linear-gradient(100deg,#ff4f9f 0%,#ff9140 30%,#ffc72e 50%,#2fe0dc 74%,#5a8bff 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,45,141,.3),rgba(255,138,31,.26) 35%,rgba(255,194,26,.26) 55%,rgba(25,227,224,.26) 78%,rgba(42,107,255,.3));
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{
  font:400 15px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  transition:background-color var(--t-std) var(--ease);
}
img{max-width:100%;display:block}
p,.sub,.note,.lede{text-wrap:pretty}
button,input{font:inherit;color:var(--text)}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.caps{font:600 11px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.01em;text-wrap:balance}
.accent-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.num{font-variant-numeric:tabular-nums}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before{mix-blend-mode:overlay}

.shell{max-width:480px;margin:0 auto;position:relative;min-height:100vh}
main{padding-inline:var(--gutter);padding-bottom:calc(120px + var(--safe-bot))}

.tog{
  flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;position:relative;
  background:var(--panel);box-shadow:var(--surface);color:var(--text);
  transition:transform var(--t-quick) var(--ease);
}
.tog:active{transform:scale(.96)}
.tog svg{width:20px;height:20px;grid-area:1 / 1;transition:opacity 300ms var(--ease),transform 300ms var(--ease),filter 300ms var(--ease)}
.hero-id > div:not(.logo-wrap){min-width:0}
.hero-id .tog{margin-left:auto;align-self:flex-start}
/* icônes lune/soleil en fondu croisé */
.tog .sun,:root[data-theme="dark"] .tog .moon{opacity:0;transform:scale(.25);filter:blur(4px)}
:root[data-theme="dark"] .tog .sun{opacity:1;transform:none;filter:none}


/* ── HERO ── */
.hero{padding-top:calc(var(--safe-top) + 16px);display:grid;gap:0;grid-template-areas:"id" "copy"}
.hero-id{grid-area:id;display:flex;align-items:center;gap:16px}
.hero-copy{grid-area:copy}
.logo-wrap{position:relative;width:96px;height:96px;flex:none}
.logo-wrap::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 200deg,#ff2d8d,#ff8a1f,#ffc21a,#19e3e0,#2a6bff,#ff2d8d);
  filter:blur(26px);opacity:.3;animation:spin 18s linear infinite;
}
:root[data-theme="dark"] .logo-wrap::before{opacity:.4}
.logo-wrap img{position:relative;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px var(--img-outline),var(--shadow);animation:logoIn 900ms var(--ease-out) both}
@keyframes logoIn{from{transform:scale(.86) rotate(-12deg);opacity:.001}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(1turn)}}
.handle{font:700 15px/1.2 var(--body)}
.hero-id .caps{margin-top:6px;display:block}
.status{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font:600 12px/1 var(--body)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}

.hero h1{font-size:clamp(58px,17.5vw,132px);margin:24px 0 0;line-height:.92}
.hero h1 > span{display:block;animation:rise 700ms var(--ease-out) both}
.hero h1 > span:nth-child(2){animation-delay:90ms}
.hero h1 .where{font-size:.46em;line-height:1;margin-top:.28em;animation-delay:180ms;letter-spacing:.02em}
@keyframes rise{from{transform:translateY(38%);opacity:.001}to{transform:none;opacity:1}}
.lede{color:var(--muted);font-size:16px;max-width:40ch;margin:18px 0 0;animation:rise 700ms 260ms var(--ease-out) both}
.lede b{color:var(--text);font-weight:600}

.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border-block:1px solid var(--line)}
.facts div{padding:14px 0 13px;display:grid;gap:6px;min-width:0}
.facts div+div{padding-left:14px;border-left:1px solid var(--line)}
.facts strong{font:800 26px/1 var(--display);text-transform:uppercase}
.btn-main.hero-cta{display:none}

/* ── Sections ── */
section.block{margin-top:48px}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.block-head h2{font-size:40px;margin:0}

.board{list-style:none;margin:0;padding:0}
.board li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.board .svc{font:700 17px/1.2 var(--body)}
.board .svc small{display:block;font:400 13px/1.35 var(--body);color:var(--muted);margin-top:3px}
.board .leader{border-bottom:1px dotted var(--line-strong);transform:translateY(-4px)}
.board .price{font:800 30px/1 var(--display)}
.board .price sup{font-size:.5em;vertical-align:.6em;margin-left:1px}
.tag{display:inline-block;margin-left:6px;font:700 9px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:var(--grad-soft);color:var(--text);vertical-align:2px}
.note{font-size:12.5px;color:var(--dim);margin-top:10px}

/* Vidéos TikTok */
.reel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.tile{
  flex:none;width:42%;aspect-ratio:9/16;border-radius:var(--r);scroll-snap-align:start;position:relative;overflow:hidden;
  background:var(--panel-2);text-decoration:none;color:#fff;box-shadow:var(--shadow);
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78));box-shadow:inset 0 0 0 1px var(--img-outline)}
.tile .views{position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:700 11px/1 var(--body)}
.tile .cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:1}
.tile .cap b{display:block;font:800 22px/1 var(--display);text-transform:uppercase;text-wrap:balance}
.tile .cap span{font-size:12px;opacity:.8}

/* Où */
.places{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.place{padding:16px 14px 14px;border-radius:var(--r);background:var(--panel);box-shadow:var(--surface);min-width:0}
.place.salon{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.place .big{font:900 60px/.8 var(--display)}
.place h3{margin:12px 0 4px;font:700 15px/1.2 var(--body)}
.place.salon h3{margin:0}
.place p{margin:0;font-size:13px;color:var(--muted)}
.days{display:flex;gap:3px;margin-top:12px}
.days i{flex:1;min-width:0;height:22px;border-radius:5px;background:var(--panel-2);font:700 10px/22px var(--body);text-align:center;font-style:normal;color:var(--dim)}
.days i.on{color:var(--bg);background:var(--text)}
.place.salon .days{grid-column:1 / -1}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font:900 40px/.85 var(--display);color:transparent;-webkit-text-stroke:1px var(--line-strong)}
.steps b{display:block;font-weight:700}
.steps span{color:var(--muted);font-size:14px}

footer.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;color:var(--dim);font-size:12px}

/* ── Boutons ── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:14px var(--gutter) calc(14px + var(--safe-bot));
  background:linear-gradient(transparent,var(--bg) 40%);
  display:flex;justify-content:center;
}
.dock[hidden]{display:none}
.btn-main{
  position:relative;width:100%;max-width:444px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 22px;
  color:var(--bg);font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;
  background:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 28px -14px rgba(0,0,0,.45);
  transition:transform var(--t-quick) var(--ease),opacity var(--t-quick) var(--ease);
}
.btn-main:active{transform:scale(.96)}
/* rayon concentrique : 16px − 8px de marge = 8px */
.btn-main .arrow{width:42px;height:42px;border-radius:8px;background:var(--bg);color:var(--text);display:grid;place-items:center;transition:transform var(--t-std) var(--ease)}
.btn-main .arrow svg{transform:translateX(1px)}
.btn-main:hover .arrow{transform:translateX(3px)}
.btn-main[disabled]{opacity:.35;box-shadow:none;cursor:not-allowed}
.btn-main small{font:600 13px/1 var(--body);text-transform:none;letter-spacing:0;opacity:.85;margin-left:auto;margin-right:12px}

/* ── Réservation ── */
.sheet{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  transform:translateY(100%);visibility:hidden;
  transition:transform 420ms var(--ease-out),visibility 0s 420ms;
}
.sheet.open{transform:none;visibility:visible;transition:transform 420ms var(--ease-out),visibility 0s}
.sheet-inner{max-width:480px;width:100%;margin:0 auto;display:flex;flex-direction:column;height:100%;background:var(--bg)}
.sheet-head{padding:calc(var(--safe-top) + 12px) var(--gutter) 12px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--panel);box-shadow:var(--surface);transition:transform var(--t-quick) var(--ease),opacity var(--t-quick)}
.icon-btn:active{transform:scale(.96)}
.icon-btn[aria-hidden="true"]{opacity:0;pointer-events:none}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.progress i{height:4px;border-radius:4px;background:var(--panel-2);position:relative;overflow:hidden}
.progress i::after{content:"";position:absolute;inset:0;background:var(--grad);background-size:300% 100%;transform:scaleX(0);transform-origin:left;transition:transform var(--t-std) var(--ease)}
.progress i:nth-child(2)::after{background-position:50% 0}
.progress i:nth-child(3)::after{background-position:100% 0}
.progress i.on::after{transform:none}
.sheet-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px var(--gutter) 24px}
.step{display:none}
.step.is-active{display:block;animation:stepIn var(--t-std) var(--ease-out) both}
.step.back.is-active{animation-name:stepBack}
@keyframes stepIn{from{opacity:.001;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:.001;transform:translateX(-28px)}to{opacity:1;transform:none}}
.step h2{font-size:46px;margin:10px 0 4px}
.step .sub{color:var(--muted);margin:0 0 18px}

.opts{display:grid;gap:8px}
.opt{
  position:relative;text-align:left;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  transition:transform var(--t-quick) var(--ease),background var(--t-quick) var(--ease);
}
.opt:active{transform:scale(.96)}
.opt::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t-quick) var(--ease);pointer-events:none;
}
.opt[aria-checked="true"]::after{opacity:1}
.opt b{font-weight:700;font-size:16px}
.opt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.opt .p{font:800 26px/1 var(--display);text-align:right}

.where-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.where-toggle .opt{grid-template-columns:1fr;align-content:start;padding:14px}
.where-toggle .opt svg{width:26px;height:26px;color:var(--muted);margin-bottom:8px}
.where-toggle .opt[aria-checked="true"] svg{color:var(--text)}
.sub-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sub-toggle .opt{grid-template-columns:auto 1fr;padding:12px 14px}
.sub-toggle .dep{font:900 36px/.8 var(--display)}

.field{display:grid;gap:8px;margin-top:16px}
.field > .lbl{font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  height:44px;padding:0 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font:600 14px/1 var(--body);
  display:inline-flex;align-items:center;gap:8px;transition:background var(--t-quick) var(--ease),transform var(--t-quick) var(--ease)
}
.chip:active{transform:scale(.96)}
.chip em{font-style:normal;font-size:12px;color:var(--dim)}
.chip[aria-checked="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip[aria-checked="true"] em{color:inherit;opacity:.65}
.infobox{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;border:1px dashed var(--line-strong);color:var(--muted);font-size:14px}
.infobox b{color:var(--text)}
.infobox svg{flex:none}
.salon-card{margin-top:16px;padding:16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);display:grid;gap:4px}
.salon-card b{font:800 26px/1 var(--display);text-transform:uppercase}
.salon-card span{color:var(--muted);font-size:14px}
.reveal{animation:stepIn var(--t-std) var(--ease-out) both}

.summary{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 10px 10px 14px;border-radius:12px;background:var(--panel);box-shadow:var(--surface);font-size:14px}
.summary span{flex:1;min-width:0;color:var(--muted)}
.summary b{color:var(--text);font-weight:600}
.summary .num{font:800 22px/1 var(--display);color:var(--text)}
.link-btn{flex:none;height:32px;padding:0 10px;border-radius:8px;background:var(--panel-2);font:600 12px/1 var(--body)}

/* ── Agenda Cal.com ── */
.cal-wrap{position:relative;min-height:440px;margin-inline:calc(var(--gutter) * -1)}
.cal-wrap iframe{color-scheme:normal}
.cal-error{margin-inline:var(--gutter);padding:16px;border-radius:var(--r);border:1px dashed var(--line-strong);color:var(--muted);font-size:14px}
.cal-error b{display:block;color:var(--text);margin-bottom:4px}
.cal-error a{display:inline-block;margin-top:10px;font-weight:600;color:var(--text)}

.recap{border-radius:var(--r);background:var(--panel);border:1px solid var(--line);padding:4px 16px}
.recap div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.recap div:last-child{border:0}
.recap span{color:var(--muted);flex:none}
.recap b{text-align:right;font-weight:600}
.recap .total b{font:800 28px/1 var(--display)}
.sheet-foot{padding:12px var(--gutter) calc(12px + var(--safe-bot));border-top:1px solid var(--line);background:var(--bg)}
.spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;animation:spin 700ms linear infinite}

.done{text-align:center;padding-top:20px}
.ring{width:160px;height:160px;margin:10px auto 0;position:relative}
.ring > svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .track{stroke:var(--panel-2)}
.ring .draw{stroke:url(#softStroke);stroke-dasharray:440;stroke-dashoffset:440}
.done.play .ring .draw{animation:draw 900ms var(--ease-out) forwards}
.ring .check{position:absolute;inset:0;display:grid;place-items:center}
.ring .check svg{width:64px;height:64px}
.ring .check path{fill:none;stroke:var(--text);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.done.play .ring .check path{animation:draw 420ms 700ms var(--ease-out) forwards}
.done.play .ring{animation:thump 500ms 1050ms var(--ease) both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes thump{40%{transform:scale(1.06)}100%{transform:none}}
.done h2{font-size:56px;margin:26px 0 8px}
.done .sub{max-width:30ch;margin-inline:auto}
.ticket{margin-top:22px;text-align:left}
.sparks{position:absolute;inset:0;pointer-events:none}
.sparks i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:2px;opacity:0}
.done.play .sparks i{animation:spark 800ms 950ms var(--ease-out) forwards}
@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(220deg)}}
.ghost{margin-top:12px;height:52px;width:100%;border-radius:14px;border:1px solid var(--line-strong);font:600 15px/1 var(--body)}


/* ── Desktop ── */
@media (min-width:900px){
  :root{--gutter:40px}
  .shell{max-width:1200px}
  .hero{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-areas:"copy id";column-gap:56px;align-items:center;padding-top:40px}
  .hero-id{flex-direction:column;align-items:flex-start;padding:28px;border-radius:24px;background:var(--panel);box-shadow:var(--surface)}
  .logo-wrap{width:200px;height:200px;align-self:center;margin-bottom:12px}
  .hero h1{margin-top:0}
  .lede{font-size:18px}
  .btn-main.hero-cta{display:flex;margin-top:28px;max-width:380px}
  .dock{display:none}
  .duo{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  .reel{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin-inline:0;padding-inline:0}
  .tile{width:auto}
  .steps.row{grid-template-columns:repeat(3,1fr);column-gap:32px}
  .steps.row li{border-bottom:0;border-top:1px solid var(--line)}
  main{padding-bottom:80px}
  .block-head h2{font-size:52px}
  section.block{margin-top:72px}
  .hero-id{position:relative}
  .hero-id .tog{position:absolute;top:16px;right:16px}

  .sheet{background:color-mix(in srgb,#000 45%,transparent);display:grid;place-items:center;transform:none;opacity:0;transition:opacity 300ms var(--ease),visibility 0s 300ms}
  .sheet.open{opacity:1;transition:opacity 300ms var(--ease),visibility 0s}
  .sheet-inner{max-width:560px;height:min(900px,94vh);border-radius:24px;overflow:hidden;transform:translateY(24px) scale(.98);transition:transform 420ms var(--ease-out);box-shadow:0 40px 80px -20px rgba(0,0,0,.4)}
  .sheet.open .sheet-inner{transform:none}
  .sheet-head,.sheet-body,.sheet-foot{padding-inline:28px}
  .cal-wrap{margin-inline:-28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .ring .draw,.ring .check path{stroke-dashoffset:0}
}