/* One More Batch — page d'attente. Polices : Fraunces, Instrument Sans, JetBrains Mono (OFL), hébergées ici. */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-display.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-display-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:500;font-display:swap}

:root{--paper:#FAF5EC;--ink:#211A14;--muted:#6B6057;--line:rgba(33,26,20,.14);--cherry:#E5484D;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.55 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:26px clamp(20px,5vw,72px) 18px}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(28px,6vh,64px) 0}
.logo{margin:0 0 clamp(26px,4.5vh,48px);width:clamp(236px,29vw,420px);line-height:0}
.logo svg{display:block;width:100%;height:auto;fill:var(--ink);overflow:visible}
.headline{margin:0 0 clamp(16px,2.6vh,26px);font:400 clamp(44px,7vw,104px)/.95 "Fraunces",Georgia,serif;
  letter-spacing:-.025em;text-wrap:balance;max-width:8em}
.headline>span,.meta>span{white-space:nowrap}
.headline em{font-style:italic;letter-spacing:-.015em}
.cherry{color:var(--cherry)}
.lede{margin:0;max-width:34em;color:var(--muted);font-size:clamp(16px,1.3vw,18px);text-wrap:balance}
.meta{margin:clamp(18px,3vh,28px) 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}

header{min-height:38px}
footer{border-top:1px solid var(--line);padding-top:12px}
.status{display:flex;align-items:center;gap:10px}
.status,footer a{white-space:nowrap}
.drip{width:60px;height:60px;flex:none;color:var(--ink);margin:-10px 0 -8px}
footer a{text-decoration:none;padding:12px 0}
footer a:hover{color:var(--ink)}

#legal{display:none;position:fixed;inset:0;padding:16px;overflow:auto;background:rgba(250,245,236,.95)}
#legal:target{display:grid;place-items:center}
#legal:focus{outline:none}
#legal .card{max-width:48rem;padding:28px 28px 22px;background:var(--paper);border:1px solid var(--ink);border-radius:12px;
  font-size:15px;line-height:1.55}
#legal .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px}
#legal h2{margin:0 0 12px;font:400 24px/1.1 "Fraunces",Georgia,serif}
#legal p{margin:0 0 8px}
#legal .nw{white-space:nowrap}
#legal .close{display:inline-block;margin-top:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:10px 0}

@media (max-width:600px){
  #legal .cols{grid-template-columns:1fr}
  .page{padding:18px 20px 14px}
  .baseline,.meta{letter-spacing:.1em}
  .drip{width:44px;height:44px}
}
@media (max-width:360px){
  header,.meta{letter-spacing:.08em}
  footer{font-size:10px;letter-spacing:.06em}
  .headline{font-size:40px}
}
@media (max-height:640px){ .logo{width:clamp(190px,24vw,280px)} }
@media (max-height:480px){
  .page{padding-top:14px;padding-bottom:10px}
  main{padding:14px 0}
  .logo{width:170px;margin-bottom:14px}
  .headline{font-size:40px;margin-bottom:10px;max-width:none}
  .meta{margin-top:10px}
}

@media (prefers-reduced-motion:no-preference){
  .logo,.headline,.lede,.meta{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .headline{animation-delay:.08s}.lede{animation-delay:.16s}.meta{animation-delay:.24s}
  /* le lapin : un saut à l'arrivée, puis au survol ou au toucher */
  .bun{transform-box:fill-box;transform-origin:50% 100%;animation:hop .75s 1.05s cubic-bezier(.3,.6,.3,1) both}
  .logo:hover .bun,.logo:active .bun{animation:hop-again .75s cubic-bezier(.3,.6,.3,1)}
  /* la goutte : elle se forme, tombe, fait un rond dans le café */
  .drop{transform-box:fill-box;transform-origin:50% 0;animation:fall 1.8s cubic-bezier(.55,0,.85,.35) infinite}
  .ripple{transform-box:fill-box;transform-origin:50% 50%;animation:ring 1.8s ease-out infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hop{0%,100%{transform:none}30%{transform:translateY(-7%) scale(.98,1.03)}58%{transform:translateY(0) scale(1.03,.96)}78%{transform:scale(.995,1.01)}}
@keyframes hop-again{0%,100%{transform:none}30%{transform:translateY(-7%) scale(.98,1.03)}58%{transform:translateY(0) scale(1.03,.96)}78%{transform:scale(.995,1.01)}}
@keyframes fall{0%{transform:translateY(0) scale(0);opacity:1}18%{transform:translateY(0) scale(1)}34%{transform:translateY(0) scale(1,1.08)}
  56%{transform:translateY(7.2px) scale(.9,1.2);opacity:1}57%,100%{transform:translateY(7.2px) scale(.9,1.2);opacity:0}}
@keyframes ring{0%,56%{transform:scale(.15);opacity:0}59%{opacity:.85}100%{transform:scale(1.2);opacity:0}}