/* caht — page d'attente : fond noir, une lueur blanche, le minuteur au centre, un seul bouton. */
@font-face { font-family: "Caht Logo"; src: url("/fonts/CahtLogo.woff2") format("woff2"); font-weight: 700; font-display: block; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #000; color: #f5f5f7; }
body.attente { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
.at-lueur { position: fixed; left: 50%; top: 46%; width: min(760px, 140vw); height: min(420px, 80vw); transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 45%, transparent 75%); filter: blur(28px);
  animation: respire 6s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .78; transform: translate(-50%, -50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .at-lueur { animation: none; } }
.at { position: relative; z-index: 1; width: min(560px, 100%); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.at-marque { position: fixed; top: 22px; left: 0; right: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px;
  font-family: "Caht Logo", inherit; font-weight: 700; font-size: 20px; color: rgba(255, 255, 255, .86); }
.at-marque .logo-cat { width: 30px; display: inline-flex; }
.at-marque .logo-cat .cat { width: 30px; --cat: #f5f5f7; --cat-eye: #000; }
.at-marque .cat .c-body, .at-marque .cat .c-pupil { fill: #f5f5f7; } .at-marque .cat .c-white { fill: #000; } .at-marque .cat .c-whisk { stroke: #f5f5f7; }
.at-temps { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.at-chiffres { display: flex; align-items: baseline; font-weight: 700; font-size: clamp(46px, 13vw, 92px); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 40px rgba(255, 255, 255, .45), 0 0 90px rgba(255, 255, 255, .25); }
.at-chiffres i { font-style: normal; opacity: .55; margin: 0 .04em; transform: translateY(-.06em); }
.at-unites { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.at-lu { margin: 0; min-height: 1.2em; font-size: 14px; color: rgba(255, 255, 255, .55); }
.at-vue { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: monte .5s ease both; }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
.at-pilule { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 190px; padding: 0 28px; border-radius: 22px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 40px -10px rgba(255, 255, 255, .25);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.at-pilule:hover { background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset, 0 12px 50px -8px rgba(255, 255, 255, .35); }
.at-pilule:active { transform: scale(.98); }
.at-pilule:disabled { opacity: .5; cursor: default; }
.at-pilule:focus-visible, .at-lien:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
.at-msg { margin: 0; font-size: clamp(24px, 6vw, 32px); font-weight: 600; color: #fff; }
.at-sous { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.at-compte { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .5); }
.at-lien { border: 0; background: none; color: rgba(255, 255, 255, .42); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; }
.at-pied { position: fixed; bottom: 16px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .3); }
.at-pied a { color: rgba(255, 255, 255, .42); text-decoration: none; display: inline-block; padding: 8px 2px; }      /* zone de toucher plus grande sur téléphone */
.at-pied a:hover { color: rgba(255, 255, 255, .7); }