/* Page d'attente : fond vert foncé, empreinte en anneaux qui se dessine à l'ouverture.
   Un seul moment animé (anneaux, puis texte en cascade courte), le reste est statique. */
body.wait{
  --w-bg:#0e2b26; --w-fg:#f3efe4; --w-muted:#b8c6c0; --w-line:rgba(233,223,198,.22); --w-cyan:#56c4d6;
  --ease-out:cubic-bezier(.23,1,.32,1);
  background:var(--w-bg) radial-gradient(60% 70% at 78% 45%,rgba(11,127,146,.28),transparent 70%);
  color:var(--w-fg);color-scheme:dark;
}
.wait ::selection{background:var(--sand);color:var(--deep)}
html:has(body.wait){--sb-thumb:rgba(233,223,198,.28); --sb-thumb-hover:rgba(233,223,198,.5)}
.wait a:focus-visible{outline-color:var(--w-cyan)}
.wait .brand{color:var(--w-fg)}
.wait .brand small{color:var(--w-muted)}
.wait .menu a{color:var(--w-fg)}
.wait .menu a:hover{background:rgba(233,223,198,.14)}
.wait .menu a[aria-current="page"]{background:var(--sand);color:var(--deep)}
.wait .site-footer{border-top-color:var(--w-line);color:var(--w-muted)}
.wait .foot-link{color:inherit;text-decoration:none;transition:color .2s ease}
.wait .foot-link:hover,.wait .foot-link:focus-visible{color:var(--w-fg);text-decoration:underline;text-underline-offset:3px}
.wait main{overflow-x:clip}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(24px,6vh,72px)}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(52px,9vw,96px);line-height:.95;letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance}
.hero h1 .ln{display:block}
.hero h1 em{font-style:normal;color:var(--w-cyan)}
.baseline{font-size:clamp(18px,2vw,22px);max-width:34em;margin:0 0 10px}
.signature{font-weight:700;letter-spacing:.04em;color:var(--sand);margin:0 0 28px}
.soon{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0}
.soon li{border:1px solid var(--w-line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;transition:border-color .2s ease,color .2s ease}
.status{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-weight:600;color:var(--w-muted)}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--w-cyan)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;min-height:48px;padding:0 clamp(12px,5vw,22px);
  font-size:clamp(12px,4vw,16px);text-align:center;overflow-wrap:anywhere;border-radius:999px;background:var(--sand);color:var(--deep);font-weight:700;text-decoration:none;transition:transform .15s var(--ease-out),background-color .2s ease}
.btn:active{transform:scale(.97)}
.tel{color:var(--w-fg);font-weight:600;text-underline-offset:4px}

.print{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:center}
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings g{transform-box:fill-box;transform-origin:center;animation:drift var(--t,100s) linear infinite}
.rings g:nth-child(even){animation-direction:reverse}
.rings ellipse{fill:none;stroke:var(--w-cyan);stroke-width:1.25;stroke-opacity:.55;stroke-dasharray:1;
  animation:draw 1.6s var(--ease-out) calc(.2s + var(--i) * .09s) both}
.rings g:nth-child(3n) ellipse{stroke:var(--sand);stroke-opacity:.35}
.print .card{position:absolute;left:50%;top:50%;translate:-50% -50%;width:46%;aspect-ratio:1/1;display:block;
  border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .9s var(--ease-out) .5s both}

.in{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms)}

@media (hover:hover) and (pointer:fine){
  .soon li:hover{border-color:var(--w-cyan);color:#fff}
  .btn:hover{background:#fff}
}

@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes drift{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .in,.print .card,.rings ellipse{animation:fade .4s ease both}
  .rings g{animation:none}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:40px;padding-block:16px 48px}
  .print{max-width:320px}
}