/* ═══════════════════════════════════════════════════════════════
   KLŌZ · design-system.css — SOURCE CANONIQUE
   Copier tel quel dans static/css/design-system.css
   @layer order : tokens < base < components < pages
   MOBILE-FIRST : base = 390px. Les @media min-width montent en desktop.
   ═══════════════════════════════════════════════════════════════ */
@layer tokens, base, components, pages, docs;

@layer tokens {
  :root{
    /* ── marque : deux pôles ── */
    --ds-accent:#4F46E5; --ds-accent-600:#4338CA; --ds-accent-soft:#EEF0FF;
    --ds-match:#F43F5E;  --ds-match-600:#E11D48;  --ds-match-soft:#FFF1F3;
    --ds-grad:linear-gradient(120deg,var(--ds-accent) 0%,#7C3AED 45%,var(--ds-match) 100%);
    /* ── neutres ── */
    --ds-bg:#FAFAFB; --ds-paper:#FFFFFF; --ds-ink:#18181B;
    --ds-muted:#71717A; --ds-muted-2:#A1A1AA;
    --ds-line:#E7E7EC; --ds-line-strong:#D4D4D8;
    /* ── surface live ── */
    --ds-stage:#17171B; --ds-tile:#26262B; --ds-tile-2:#2E2E36; --ds-tile-line:#ffffff10;
    --ds-on-stage:#E4E4E7; --ds-on-stage-dim:#A1A1AA; --ds-on-stage-strong:#FFFFFF;
    /* ── sémantique ── */
    --ds-ok:#16A34A; --ds-ok-soft:#DCFCE7; --ds-warn:#B45309; --ds-warn-soft:#FEF3C7;
    /* ── typo ── */
    --ds-font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
    --ds-font-body:"Inter",system-ui,-apple-system,sans-serif;
    --ds-font-mono:"JetBrains Mono",ui-monospace,monospace;
    /* ── échelle de type ── */
    --ds-t-hero:clamp(28px,7vw,44px); --ds-t-h1:clamp(24px,5.5vw,32px); --ds-t-h2:19px;
    --ds-t-h3:16px; --ds-t-body:14px; --ds-t-sm:13px; --ds-t-xs:11.5px;
    /* ── rayons / ombres / espace ── */
    --ds-r-sm:10px; --ds-r:14px; --ds-r-lg:20px; --ds-r-full:999px;
    --ds-shadow-sm:0 1px 2px rgb(24 24 27/.06),0 1px 3px rgb(24 24 27/.04);
    --ds-shadow:0 8px 30px rgb(24 24 27/.08),0 2px 6px rgb(24 24 27/.05);
    --ds-shadow-lg:0 24px 60px rgb(24 24 27/.18);
    --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px; --ds-s5:20px; --ds-s6:24px;
    --ds-tap:44px;                     /* cible tactile minimale */
    --ds-safe-b:env(safe-area-inset-bottom,0px);
  }
}

@layer base {
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--ds-bg);color:var(--ds-ink);font-family:var(--ds-font-body);
    font-size:var(--ds-t-body);line-height:1.5;-webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent}
  h1,h2,h3,h4{font-family:var(--ds-font-display);margin:0;letter-spacing:-.02em;line-height:1.08}
  button,input,select{font-family:inherit}
  .u-mono{font-family:var(--ds-font-mono)}
  .u-muted{color:var(--ds-muted)}
  .u-grad{background:var(--ds-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  :focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;border-radius:6px}
  /* « Reduced motion » n'est pas « motion plus rapide ». Une animation accélérée reste
     une animation : pour un vestibule sensible, c'est le mouvement qui déclenche, pas
     sa durée. On retire donc les boucles infinies (pulsations, rotations, flottements)
     plutôt que de les jouer en accéléré. */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
      scroll-behavior:auto!important;
    }
    .ds-round-dot[data-state="live"]::after,
    .ds-api-chip__led,
    .meet__dot,.meet__ring-anim,.meet__ghost{animation:none!important}
    .ds-round-dot[data-state="live"]{outline:2px solid var(--ds-match);outline-offset:1px}
  }
}

@layer components {
  /* ─────────── LAYOUT ─────────── */
  .app-shell{max-width:1180px;margin:0 auto;padding:0 var(--ds-s4) calc(84px + var(--ds-safe-b))}
  @media(min-width:768px){.app-shell{padding:0 var(--ds-s5) 80px}}

  /* Topbar : cachée en mobile (on utilise la tabbar), visible en desktop */
  .app-topbar{display:none}
  @media(min-width:768px){
    .app-topbar{display:block;position:sticky;top:0;z-index:40;
      background:color-mix(in srgb,var(--ds-bg) 82%,transparent);
      backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--ds-line);
      margin-bottom:var(--ds-s6)}
    .app-topbar__in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;height:62px;padding:0 var(--ds-s5)}
  }
  .app-brand{display:flex;align-items:center;gap:9px;font-family:var(--ds-font-display);
    font-weight:800;font-size:21px;letter-spacing:-.03em;text-decoration:none;color:inherit}
  .app-brand__glyph{width:30px;height:30px;border-radius:9px;background:var(--ds-grad);
    display:grid;place-items:center;color:#fff;box-shadow:var(--ds-shadow-sm)}
  .app-brand__glyph svg{width:17px;height:17px}
  .app-nav{display:flex;gap:2px;background:var(--ds-paper);border:1px solid var(--ds-line);padding:4px;border-radius:12px}
  .app-nav a{color:var(--ds-muted);font-weight:600;font-size:var(--ds-t-sm);text-decoration:none;
    padding:7px 14px;border-radius:8px;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap}
  .app-nav a svg{width:15px;height:15px}
  .app-nav a:hover{color:var(--ds-ink)}
  .app-nav a[aria-current="page"]{background:var(--ds-ink);color:#fff;box-shadow:var(--ds-shadow-sm)}
  .app-spacer{flex:1}

  /* Tabbar mobile : la nav primaire sous le pouce */
  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
    background:color-mix(in srgb,var(--ds-paper) 92%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--ds-line);padding-bottom:var(--ds-safe-b)}
  @media(min-width:768px){.app-tabbar{display:none}}
  .app-tabbar a,.app-tabbar button{flex:1;min-height:var(--ds-tap);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;padding:9px 0;text-decoration:none;
    color:var(--ds-muted-2);font-size:10.5px;font-weight:600;position:relative;transition:.15s;
    background:transparent;border:0;cursor:pointer;font-family:inherit}
  .app-tabbar a svg,.app-tabbar button svg{width:21px;height:21px}
  .app-tabbar a[aria-current="page"]{color:var(--ds-accent)}
  .app-tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--ds-accent)}
  .app-tabbar__dot{position:absolute;top:6px;right:calc(50% - 18px);width:7px;height:7px;
    border-radius:50%;background:var(--ds-match);border:1.5px solid var(--ds-paper)}

  /* ─────────── PRIMITIVES ─────────── */
  .ds-card{background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:var(--ds-r);box-shadow:var(--ds-shadow-sm)}
  .ds-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ds-muted-2)}

  .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
    font-weight:600;font-size:var(--ds-t-sm);padding:11px 16px;min-height:var(--ds-tap);
    border-radius:var(--ds-r-sm);border:1px solid transparent;transition:.15s;white-space:nowrap}
  .ds-btn svg{width:16px;height:16px;flex:0 0 auto}
  .ds-btn--primary{background:var(--ds-ink);color:#fff}          .ds-btn--primary:hover{background:#000}
  .ds-btn--accent{background:var(--ds-accent);color:#fff}        .ds-btn--accent:hover{background:var(--ds-accent-600)}
  .ds-btn--outline{background:var(--ds-paper);border-color:var(--ds-line-strong);color:var(--ds-ink)}
  .ds-btn--outline:hover{background:#FAFAFA;border-color:var(--ds-muted-2)}
  .ds-btn--ghost{background:transparent;color:var(--ds-muted)}   .ds-btn--ghost:hover{background:#F4F4F5;color:var(--ds-ink)}
  .ds-btn--danger{background:var(--ds-match);color:#fff}         .ds-btn--danger:hover{background:var(--ds-match-600)}
  .ds-btn--lg{padding:14px 20px;font-size:15px;border-radius:12px}
  .ds-btn--block{width:100%}
  .ds-btn:disabled{opacity:.45;cursor:not-allowed}

  .ds-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--ds-t-xs);font-weight:600;
    padding:3px 9px;border-radius:var(--ds-r-full);border:1px solid var(--ds-line);color:var(--ds-muted);background:var(--ds-paper)}
  .ds-badge svg{width:12px;height:12px}
  .ds-badge--accent{background:var(--ds-accent-soft);color:var(--ds-accent-600);border-color:transparent}
  .ds-badge--match{background:var(--ds-match-soft);color:var(--ds-match-600);border-color:transparent}
  .ds-badge--ok{background:var(--ds-ok-soft);color:var(--ds-ok);border-color:transparent}
  .ds-badge--warn{background:var(--ds-warn-soft);color:var(--ds-warn);border-color:transparent}

  .ds-chip{border:1px solid var(--ds-line-strong);background:var(--ds-paper);color:var(--ds-ink);
    font-weight:600;font-size:var(--ds-t-sm);padding:9px 14px;min-height:var(--ds-tap);
    border-radius:var(--ds-r-sm);cursor:pointer;transition:.12s;white-space:nowrap}
  .ds-chip:hover{border-color:var(--ds-muted-2)}
  .ds-chip[aria-pressed="true"]{background:var(--ds-accent-soft);border-color:var(--ds-accent);color:var(--ds-accent-600)}
  .ds-chip--sm{min-height:0;padding:6px 11px;font-size:12px}

  .ds-field{width:100%;border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);
    padding:12px 13px;font-size:16px;color:var(--ds-ink);background:var(--ds-paper)}
  /* 16px : empêche le zoom auto iOS au focus */
  @media(min-width:768px){.ds-field{font-size:14px}}
  .ds-field:focus{outline:2px solid var(--ds-accent);outline-offset:1px;border-color:var(--ds-accent)}
  .ds-field[aria-invalid="true"]{border-color:var(--ds-match)}
  .ds-label{font-size:12.5px;font-weight:600;color:var(--ds-muted);display:block;margin-bottom:6px}
  .ds-field-error{color:var(--ds-match-600);font-size:12px;margin-top:5px;display:flex;align-items:center;gap:5px}
  .ds-field-error svg{width:13px;height:13px}

  .ds-avatar{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
  .ds-avatar img{border-radius:50%;object-fit:cover;background:var(--ds-accent-soft);display:block;width:100%;height:100%}
  .ds-avatar__fb{position:absolute;inset:0;display:none;place-items:center;border-radius:50%;
    background:var(--ds-accent-soft);color:var(--ds-accent-600);font-weight:700}

  .ds-empty{color:var(--ds-muted-2);font-size:var(--ds-t-sm);text-align:center;padding:40px 16px;line-height:1.6}
  .ds-empty svg{width:26px;height:26px;margin-bottom:8px;color:var(--ds-line-strong)}
  .ds-empty b{color:var(--ds-ink);display:block;margin-bottom:4px}

  /* ─────────── FEEDBACK ─────────── */
  .ds-toast-host{position:fixed;left:50%;transform:translateX(-50%);z-index:80;
    bottom:calc(84px + var(--ds-safe-b));display:flex;flex-direction:column;gap:8px;align-items:center;
    width:calc(100% - 32px);max-width:420px;pointer-events:none}
  @media(min-width:768px){.ds-toast-host{bottom:22px}}
  .ds-toast{background:var(--ds-ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:var(--ds-t-sm);
    font-weight:600;box-shadow:var(--ds-shadow-lg);display:flex;align-items:center;gap:9px;
    animation:ds-toast-in .28s;width:100%}
  .ds-toast svg{width:16px;height:16px;color:#86EFAC;flex:0 0 auto}
  @keyframes ds-toast-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

  .ds-banner{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--ds-r-full);
    font-size:var(--ds-t-sm);font-weight:600;color:#fff;box-shadow:var(--ds-shadow)}
  .ds-banner svg{width:16px;height:16px;flex:0 0 auto}
  .ds-banner--warn{background:var(--ds-warn)}
  .ds-banner--match{background:var(--ds-grad)}
  .ds-banner--ok{background:var(--ds-ok)}

  /* ─────────── HERO ─────────── */
  .ds-hero{margin-bottom:22px}
  .ds-hero h1{font-size:var(--ds-t-hero);font-weight:800;max-width:16ch}
  .ds-hero p{color:var(--ds-muted);max-width:46ch;margin-top:10px;font-size:15px}
  @media(min-width:768px){.ds-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}}

  /* ─────────── CALENDRIER (F2) ─────────── */
  .ds-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .ds-cal__dow{font-size:11px;font-weight:700;color:var(--ds-muted-2);text-align:center;padding-bottom:6px}
  .ds-cal__day{aspect-ratio:1;border:0;background:transparent;border-radius:var(--ds-r-sm);
    font-weight:600;font-size:var(--ds-t-sm);color:var(--ds-ink);cursor:pointer;position:relative;transition:.1s}
  .ds-cal__day--pad{visibility:hidden}
  .ds-cal__day--off{color:var(--ds-muted-2);cursor:not-allowed;opacity:.5}
  .ds-cal__day--free{background:var(--ds-accent-soft);color:var(--ds-accent-600)}
  .ds-cal__day--free:hover{background:#E0E4FF}
  .ds-cal__day[aria-pressed="true"]{background:var(--ds-ink);color:#fff}
  .ds-cal__day--today::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
    width:4px;height:4px;border-radius:50%;background:var(--ds-match)}

  /* ─────────── CRÉNEAUX (F2) ─────────── */
  .ds-slot{display:flex;gap:8px}
  .ds-slot__btn{flex:1;border:1px solid var(--ds-line-strong);background:var(--ds-paper);
    border-radius:var(--ds-r-sm);padding:13px;font-weight:600;font-size:14px;cursor:pointer;
    transition:.12s;color:var(--ds-ink);min-height:var(--ds-tap)}
  .ds-slot__btn:hover{border-color:var(--ds-accent);color:var(--ds-accent-600)}
  .ds-slot[data-picked] .ds-slot__btn{flex:0 0 auto;background:var(--ds-accent-soft);
    border-color:var(--ds-accent);color:var(--ds-accent-600)}
  .ds-slot__list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding-right:4px}
  @media(min-width:768px){.ds-slot__list{max-height:430px}}

  /* ─────────── CARTE RÉUNION (F2) ─────────── */
  .ds-meeting{padding:15px;border-radius:12px;border:1px solid var(--ds-line);
    background:var(--ds-paper);box-shadow:var(--ds-shadow-sm)}
  .ds-meeting[data-hot]{border-color:var(--ds-match);box-shadow:0 0 0 3px var(--ds-match-soft)}
  .ds-meeting__when{font-size:11px;font-weight:700;color:var(--ds-accent-600);text-transform:uppercase;letter-spacing:.04em}
  .ds-meeting__who{display:flex;align-items:center;gap:9px;margin:9px 0 11px}
  .ds-meeting__who b{font-size:14px;display:block}
  .ds-meeting__who span{font-size:12px;color:var(--ds-muted);display:block}
  .ds-meeting__link{font-family:var(--ds-font-mono);font-size:11px;color:var(--ds-muted);
    display:flex;align-items:center;gap:5px;margin-bottom:10px;word-break:break-all}
  .ds-meeting__link svg{width:12px;height:12px;flex:0 0 auto;color:var(--ds-ok)}
  .ds-meeting__actions{display:flex;gap:7px}
  .ds-meeting__actions .ds-btn{flex:1}
  .ds-meeting__actions .ds-btn--ghost{flex:0 0 auto}

  /* ─────────── SWIPE (F5) ─────────── */
  .ds-deck{position:relative;height:min(68vh,470px);margin-bottom:18px;max-width:400px;margin-inline:auto}
  .ds-pcard{position:absolute;inset:0;background:var(--ds-paper);border:1px solid var(--ds-line);
    border-radius:22px;box-shadow:var(--ds-shadow);overflow:hidden;display:flex;flex-direction:column;
    cursor:grab;user-select:none;touch-action:none}
  .ds-pcard[data-dragging]{cursor:grabbing;transition:none}
  .ds-pcard__banner{height:140px;background:var(--ds-grad);position:relative;flex-shrink:0}
  .ds-pcard__loc{position:absolute;bottom:12px;left:16px;color:#fff;font-size:12px;font-weight:600;
    display:flex;align-items:center;gap:5px;opacity:.95}
  .ds-pcard__loc svg{width:13px;height:13px}
  .ds-pcard .ds-avatar{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);width:84px;height:84px}
  .ds-pcard .ds-avatar img{border:4px solid var(--ds-paper);box-shadow:var(--ds-shadow-sm)}
  .ds-pcard__body{padding:50px 20px 18px;text-align:left;flex:1;overflow:auto}
  .ds-pcard__body h3{font-size:20px;font-weight:700}
  .ds-pcard__role{color:var(--ds-accent-600);font-weight:600;font-size:var(--ds-t-sm);margin-top:3px}
  .ds-pcard__bio{color:var(--ds-muted);font-size:var(--ds-t-sm);margin-top:12px;line-height:1.55}
  .ds-pcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .ds-stamp{position:absolute;top:22px;font-family:var(--ds-font-display);font-weight:800;font-size:28px;
    padding:6px 16px;border-radius:12px;border:3px solid;opacity:0;pointer-events:none}
  .ds-stamp--like{right:18px;color:var(--ds-ok);border-color:var(--ds-ok);transform:rotate(-12deg)}
  .ds-stamp--nope{left:18px;color:var(--ds-match);border-color:var(--ds-match);transform:rotate(12deg)}
  .ds-swipe-actions{display:flex;justify-content:center;align-items:center;gap:14px}
  .ds-swipe-actions button{width:60px;height:60px;border-radius:50%;border:1px solid var(--ds-line);
    background:var(--ds-paper);cursor:pointer;display:grid;place-items:center;box-shadow:var(--ds-shadow-sm);transition:.15s}
  .ds-swipe-actions button:hover{transform:translateY(-3px);box-shadow:var(--ds-shadow)}
  .ds-swipe-actions svg{width:25px;height:25px}
  .ds-swipe-actions .is-no{color:var(--ds-match)}
  .ds-swipe-actions .is-yes{color:var(--ds-ok)}
  .ds-swipe-actions .is-rewind{width:48px;height:48px;color:var(--ds-muted-2)}
  .ds-swipe-actions .is-rewind svg{width:19px;height:19px}

  /* ─────────── AGENDA (F6) ─────────── */
  .ds-grid-cal{overflow:auto;-webkit-overflow-scrolling:touch}
  .ds-gc{display:grid;grid-template-columns:44px repeat(7,minmax(42px,1fr));gap:4px;min-width:380px}
  @media(min-width:768px){.ds-gc{grid-template-columns:56px repeat(7,minmax(64px,1fr));gap:5px;min-width:620px}}
  .ds-gc__h{font-size:11px;font-weight:700;color:var(--ds-muted);text-align:center;padding:6px 0}
  .ds-gc__t{font-size:10.5px;color:var(--ds-muted-2);font-family:var(--ds-font-mono);
    display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
  .ds-gc__cell{height:30px;border:1px solid var(--ds-line);border-radius:7px;cursor:pointer;
    transition:.1s;background:var(--ds-paper)}
  .ds-gc__cell:hover{border-color:var(--ds-accent);background:var(--ds-accent-soft)}
  .ds-gc__cell[aria-pressed="true"]{background:var(--ds-accent);border-color:var(--ds-accent)}

  /* ─────────── SALLE LIVE (F3) ─────────── */
  .meet{position:fixed;inset:0;z-index:60;background:var(--ds-stage);display:flex;flex-direction:column}
  @media(min-width:768px){
    .meet{position:fixed;inset:0;display:grid;place-items:center;background:rgb(15 15 18/.55);backdrop-filter:blur(4px);padding:18px}
    .meet__frame{width:min(980px,100%);height:min(660px,92vh);background:var(--ds-stage);
      border-radius:var(--ds-r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ds-shadow-lg);position:relative}
  }
  .meet__frame{display:flex;flex-direction:column;flex:1;position:relative;min-height:0}
  .meet__top{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;color:var(--ds-on-stage);font-size:12.5px}
  .meet__title{font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
  .meet__title svg{width:15px;height:15px;color:#818CF8;flex:0 0 auto}
  .meet__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .meet__clock{font-family:var(--ds-font-mono);font-weight:700;background:rgb(0 0 0/.3);
    padding:5px 10px;border-radius:8px;display:flex;align-items:center;gap:7px;flex:0 0 auto}
  .meet__dot{width:7px;height:7px;border-radius:50%;background:var(--ds-match);animation:meet-blink 1.4s infinite}
  @keyframes meet-blink{50%{opacity:.25}}
  .meet__stage{flex:1;display:grid;grid-template-rows:1fr 1fr;gap:10px;padding:0 12px 6px;min-height:0}
  @media(min-width:768px){.meet__stage{grid-template-rows:none;grid-template-columns:1fr 1fr;padding:0 18px 6px}}
  .meet__tile{background:var(--ds-tile);border-radius:16px;position:relative;overflow:hidden;
    display:grid;place-items:center;border:1px solid var(--ds-tile-line);min-height:0}
  .meet__tile--self{background:radial-gradient(120% 120% at 30% 20%,#3b3b45,#1c1c22)}
  .meet__face{width:clamp(64px,18vw,110px);height:clamp(64px,18vw,110px);border-radius:50%}
  .meet__name{position:absolute;left:10px;bottom:10px;color:#fff;font-size:12px;font-weight:600;
    background:rgb(0 0 0/.4);padding:4px 10px;border-radius:8px;z-index:3}
  .meet__waiting{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ds-on-stage);text-align:center;padding:16px}
  .meet__ring-anim{width:82px;height:82px;border-radius:50%;border:3px dashed #52525B;
    display:grid;place-items:center;animation:meet-spin 8s linear infinite}
  .meet__ring-anim svg{width:30px;height:30px;color:#71717A}
  @keyframes meet-spin{to{transform:rotate(360deg)}}
  .meet__big{font-family:var(--ds-font-mono);font-weight:700;font-size:clamp(28px,8vw,38px);color:#fff}
  .meet__cap{font-size:12px;color:var(--ds-on-stage-dim);max-width:28ch}
  .meet__ghost{font-size:clamp(40px,12vw,58px);animation:meet-float 2.4s ease-in-out infinite}
  @keyframes meet-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .meet__banner{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:5;
    width:max-content;max-width:calc(100% - 24px)}
  .meet__controls{display:flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 12px calc(12px + var(--ds-safe-b))}
  .meet__mc{width:46px;height:46px;border-radius:50%;border:0;background:#3F3F46;color:#fff;
    cursor:pointer;display:grid;place-items:center;transition:.15s}
  .meet__mc:hover{background:#52525B}
  .meet__mc svg{width:19px;height:19px}
  .meet__mc[data-off]{background:#7F1D1D}
  .meet__mc--hang{width:62px;background:var(--ds-match)}
  .meet__mc--hang:hover{background:var(--ds-match-600)}

  /* ─────────── RESCUE : overlay roulette (F9) + rounds (F10) ───────────
     Un seul composant, deux surfaces :
     --sheet : bottom-sheet mobile / flottant desktop (lobby Klōz)
     --panel : plein (side panel du Meet Add-on)                        */
  .ds-rescue{background:var(--ds-paper);border:1px solid var(--ds-line);border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0;
    box-shadow:var(--ds-shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
  .ds-rescue--sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;animation:ds-sheet-up .32s cubic-bezier(.2,1,.3,1)}
  @keyframes ds-sheet-up{from{transform:translateY(100%)}to{transform:none}}
  @media(min-width:768px){
    .ds-rescue--sheet{left:auto;right:18px;bottom:80px;width:360px;border-radius:var(--ds-r-lg);max-height:70%}
  }
  .ds-rescue--panel{border:0;border-radius:0;box-shadow:none;max-height:none;height:100%}
  .ds-rescue__grab{width:36px;height:4px;border-radius:var(--ds-r-full);background:#ffffff59;
    margin:8px auto 0;position:absolute;top:0;left:50%;transform:translateX(-50%)}
  @media(min-width:768px){.ds-rescue__grab{display:none}}
  .ds-rescue__head{padding:16px;background:var(--ds-grad);color:#fff;position:relative}
  .ds-rescue__title{font-family:var(--ds-font-display);font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
  .ds-rescue__title svg{width:16px;height:16px}
  .ds-rescue__sub{font-size:12px;opacity:.92;margin-top:3px}

  /* progression des rounds — LE composant signature : 60 min = ●●●● */
  .ds-rounds{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--ds-line)}
  .ds-round-dot{flex:1;height:6px;border-radius:var(--ds-r-full);background:var(--ds-line);position:relative;overflow:visible}
  .ds-round-dot[data-state="ringing"]{background:var(--ds-warn)}
  .ds-round-dot[data-state="live"]{background:var(--ds-match)}
  .ds-round-dot[data-state="live"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
    background:var(--ds-match);animation:ds-pulse 1.4s infinite}
  .ds-round-dot[data-state="completed"]{background:var(--ds-accent)}
  .ds-round-dot[data-state="mutual"]{background:var(--ds-ok)}
  .ds-round-dot[data-state="declined"],.ds-round-dot[data-state="skipped"]{background:var(--ds-line-strong)}
  @keyframes ds-pulse{0%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(2.6)}}
  .ds-round-clock{font-family:var(--ds-font-mono);font-weight:700;font-size:13px;color:var(--ds-muted);flex:0 0 auto}

  /* listing multicanal */
  .ds-channels{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;border-bottom:1px solid var(--ds-line);
    scrollbar-width:none}
  .ds-channels::-webkit-scrollbar{display:none}
  .ds-directory{flex:1;overflow-y:auto;min-height:0}
  .ds-dir-row{display:flex;align-items:center;gap:10px;padding:10px 16px;
    border-bottom:1px solid var(--ds-line);transition:.12s}
  .ds-dir-row:hover{background:var(--ds-accent-soft)}
  .ds-dir-row__live{width:7px;height:7px;border-radius:50%;background:var(--ds-ok);flex:0 0 auto;
    box-shadow:0 0 0 3px var(--ds-ok-soft)}
  .ds-dir-row__id{flex:1;min-width:0}
  .ds-dir-row__id b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ds-dir-row__id span{font-size:11.5px;color:var(--ds-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ring : 30 s pour accepter — le consentement */
  .ds-ring{padding:16px;text-align:center;border-top:1px solid var(--ds-line);background:var(--ds-match-soft)}
  .ds-ring__who{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:10px;text-align:left}
  .ds-ring__who b{display:block;font-size:14px}
  .ds-ring__who span{display:block;font-size:12px;color:var(--ds-muted)}
  .ds-ring__bar{height:4px;border-radius:var(--ds-r-full);background:#0000001a;overflow:hidden;margin:10px 0 12px}
  .ds-ring__fill{height:100%;background:var(--ds-match);width:100%}
  .ds-ring__actions{display:flex;gap:8px}
  .ds-ring__actions .ds-btn{flex:1}

  /* carte du partenaire en round live */
  .ds-partner{padding:14px 16px;display:flex;gap:11px;align-items:flex-start;border-bottom:1px solid var(--ds-line)}
  .ds-partner__id{flex:1;min-width:0}
  .ds-partner__id b{font-size:15px;display:block}
  .ds-partner__id .r{font-size:12px;color:var(--ds-accent-600);font-weight:600}
  .ds-partner__id .b{font-size:12px;color:var(--ds-muted);margin-top:6px;line-height:1.5}
  .ds-partner__act{display:flex;gap:7px;padding:0 16px 14px}
  .ds-partner__act .ds-btn{flex:1}

  /* ─────────── CONSOLE API (F8) ─────────── */
  .ds-api{border-top:1px solid var(--ds-tile-line);background:#0F0F12;color:#A1A1AA;font-family:var(--ds-font-mono);font-size:10.5px}
  .ds-api__head{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;color:var(--ds-on-stage-dim)}
  .ds-api__head svg{width:13px;height:13px}
  .ds-api__log{max-height:104px;overflow:auto;padding:0 14px 10px;line-height:1.65}
  .ds-api__log div{white-space:pre-wrap;word-break:break-all}
  .ds-api__ok{color:#4ADE80} .ds-api__err{color:#FB7185} .ds-api__dim{color:#52525B}
  .ds-api-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
    padding:3px 8px;border-radius:var(--ds-r-full);background:#ffffff14;color:var(--ds-on-stage-dim);
    letter-spacing:.04em;flex:0 0 auto}
  .ds-api-chip__led{width:6px;height:6px;border-radius:50%;background:var(--ds-ok);animation:meet-blink 1.6s infinite}
  .ds-api-chip[data-mode="live"]{background:#F43F5E22;color:#FDA4AF}
}
/* ═══════════════════════════════════════════════════════════
   @layer pages — écrans d'authentification (P0)
   Chargé via design-system.css car ces écrans sont des pages
   pleines, pas des fragments. Zéro hexadécimal : tokens seuls.
   ═══════════════════════════════════════════════════════════ */
@layer pages {
  .auth-wrap{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
    align-items:center;padding:24px 16px calc(24px + var(--ds-safe-b));gap:18px}
  .auth-card{width:100%;max-width:400px;background:var(--ds-paper);border:1px solid var(--ds-line);
    border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow);padding:26px 22px;
    display:flex;flex-direction:column}
  @media(min-width:768px){.auth-card{padding:32px 28px}}
  .auth-h1{font-size:var(--ds-t-hero);font-weight:800;line-height:1.05;margin-bottom:10px}
  .auth-sub{color:var(--ds-muted);font-size:14.5px;margin:0 0 20px}
  .auth-google{gap:10px}
  .auth-google svg{width:18px;height:18px;color:var(--ds-accent)}
  .auth-hint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ds-muted-2);
    margin:8px 0 0;justify-content:center}
  .auth-hint svg{width:13px;height:13px;flex:0 0 auto}
  .auth-or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ds-muted-2);
    font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--ds-line)}
  .auth-back{align-self:flex-start;padding-left:0;margin-bottom:8px;min-height:0}
  .auth-legal{max-width:400px;text-align:center;font-size:11.5px;color:var(--ds-muted-2);
    line-height:1.5;margin:0}
  .host-meta{margin-top:16px;display:flex;flex-direction:column;gap:9px;font-size:12.5px;
    color:var(--ds-muted)}
  .host-meta div{display:flex;align-items:center;gap:9px}
  .host-meta svg{width:15px;height:15px;color:var(--ds-muted-2);flex:0 0 auto}
  .durs{display:flex;gap:7px;margin-top:8px}
  .durs .ds-chip{flex:1;text-align:center;padding:9px 4px}
}

/* ═══════════════════════════════════════════════════════════
   @layer components — drawer (singleton du shell, P1)
   ═══════════════════════════════════════════════════════════ */
@layer components {
  [x-cloak]{display:none!important}
  .ds-drawer{position:fixed;inset:0;z-index:70}
  .ds-drawer__veil{position:absolute;inset:0;background:rgb(15 15 18/.45);backdrop-filter:blur(3px)}
  .ds-drawer__panel{position:absolute;left:0;right:0;bottom:0;background:var(--ds-paper);
    border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0;box-shadow:var(--ds-shadow-lg);
    display:flex;flex-direction:column;max-height:80%;
    padding-bottom:var(--ds-safe-b)}
  @media(min-width:768px){
    .ds-drawer__panel{left:auto;top:0;bottom:0;width:min(360px,100%);max-height:none;
      border-radius:var(--ds-r-lg) 0 0 var(--ds-r-lg)}
  }
  .ds-drawer__panel--in{animation:ds-drawer-in .28s cubic-bezier(.2,1,.3,1)}
  .ds-drawer__panel--out{animation:ds-drawer-in .2s reverse}
  @keyframes ds-drawer-in{from{transform:translateY(100%)}to{transform:none}}
  @media(min-width:768px){@keyframes ds-drawer-in{from{transform:translateX(100%)}to{transform:none}}}
  .ds-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px;border-bottom:1px solid var(--ds-line)}
  .ds-drawer__x{width:32px;height:32px;border-radius:50%;border:1px solid var(--ds-line);
    background:var(--ds-paper);cursor:pointer;display:grid;place-items:center;color:var(--ds-muted);
    flex:0 0 auto}
  .ds-drawer__x svg{width:15px;height:15px}
  .ds-drawer__body{padding:16px;flex:1;overflow-y:auto}
  .ds-drawer__foot{padding:12px 16px 16px;border-top:1px solid var(--ds-line)}
}

/* ═══════════════════════════════════════════════════════════
   @layer pages — réservation (P2)
   ═══════════════════════════════════════════════════════════ */
@layer pages {
  .book-head{max-width:1180px;margin:0 auto;padding:18px 0 22px}
  .book-grid{display:grid;gap:14px}
  @media(min-width:960px){
    .book-grid{grid-template-columns:290px 1fr 300px;align-items:start;gap:18px}
  }
  .host-card{padding:18px}
  .host-card__top{display:flex;gap:12px;align-items:center}
  .guarantee{margin-top:16px;padding:13px;border-radius:12px;background:var(--ds-accent-soft);
    font-size:12.5px;line-height:1.5;color:var(--ds-accent-600);display:flex;gap:9px}
  .guarantee svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
  .picker{padding:18px}
  .picker__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .picker__head h3{font-size:16px;font-weight:700}
  .mnav{display:flex;gap:6px}
  .mnav a{width:34px;height:34px;border-radius:9px;border:1px solid var(--ds-line-strong);
    background:var(--ds-paper);cursor:pointer;display:grid;place-items:center;
    color:var(--ds-muted);text-decoration:none}
  .mnav a:hover{background:var(--ds-bg);color:var(--ds-ink)}
  .mnav a svg{width:16px;height:16px}
  .slots{padding:18px}
  .durs .ds-chip{flex:1;text-align:center;padding:9px 4px;text-decoration:none;
    display:flex;align-items:center;justify-content:center}

  .share{padding:16px}
  .share__label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
    color:var(--ds-muted);margin-bottom:10px}
  .share__label svg{width:15px;height:15px;color:var(--ds-accent)}
  .share__row{display:flex;gap:8px;align-items:center}
  .share__url{flex:1;min-width:0;font-family:var(--ds-font-mono);font-size:12px;
    background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);
    padding:11px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .share__preview{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
    font-size:12.5px;font-weight:600;color:var(--ds-accent-600);text-decoration:none}
  .share__preview svg{width:14px;height:14px}
  .share__preview:hover{text-decoration:underline}
}

/* ═══════════════════════════════════════════════════════════
   @layer pages — agenda (P3)
   ═══════════════════════════════════════════════════════════ */
@layer pages {
  .pool{padding:16px;border-left:3px solid var(--ds-line);transition:.2s}
  .pool--on{border-left-color:var(--ds-ok);background:linear-gradient(90deg,
    color-mix(in srgb, var(--ds-ok-soft) 55%, transparent), var(--ds-paper) 60%)}
  .pool__top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .pool__channels{margin-top:14px;padding-top:14px;border-top:1px solid var(--ds-line)}
  .pool__channels .ds-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    user-select:none}
  .pool__channels .ds-chip.is-on{background:var(--ds-accent-soft);border-color:var(--ds-accent);
    color:var(--ds-accent-600)}
  .pool__cb{width:13px;height:13px;accent-color:var(--ds-accent);margin:0;cursor:pointer}
  .durs{display:flex;gap:7px;margin-top:8px}
  .durs .ds-chip{flex:1;text-align:center;padding:9px 4px}
}

/* ═══════════════════════════════════════════════════════════
   @layer components — deck de swipe (P4)
   L'empilement est en CSS pur : htmx insère une carte, rien à
   recalculer côté client.
   ═══════════════════════════════════════════════════════════ */
@layer components {
  .ds-deck__empty{position:absolute;inset:0;display:grid;place-items:center;
    border:1px dashed var(--ds-line-strong);border-radius:22px;background:var(--ds-paper)}
  .ds-pcard{transition:transform .2s, opacity .2s}
  .ds-pcard[data-dragging]{transition:none}
  /* la dernière du DOM est sur le dessus */
  .ds-pcard:nth-last-of-type(1){transform:none}
  .ds-pcard:nth-last-of-type(2){transform:scale(.96) translateY(10px)}
  .ds-pcard:nth-last-of-type(3){transform:scale(.92) translateY(20px)}
  .ds-pcard:nth-last-of-type(n+4){transform:scale(.9) translateY(26px);opacity:0}
  .ds-pcard__live{position:absolute;top:12px;right:12px;box-shadow:var(--ds-shadow-sm)}
  .liked{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
  .liked__label{font-size:12px;font-weight:600;color:var(--ds-muted)}
  .liked__stack{display:flex}
  .liked__stack > span{margin-left:-8px}
  .liked__stack .ds-avatar img{border:2px solid var(--ds-paper)}
}

/* ═══════════════════════════════════════════════════════════
   @layer components — ring flottant (P5b)
   Le ring arrive où que soit le candidat : il flotte au-dessus
   du shell, sous la tabbar en mobile.
   ═══════════════════════════════════════════════════════════ */
@layer components {
  .ds-ring-slot{position:fixed;left:0;right:0;z-index:75;pointer-events:none;
    bottom:calc(72px + var(--ds-safe-b));padding:0 12px;display:flex;justify-content:center}
  @media(min-width:768px){.ds-ring-slot{bottom:18px;right:18px;left:auto;justify-content:flex-end}}
  .ds-ring-slot > * > *{pointer-events:auto}
  .ds-ring--float{width:min(360px,100%);border:1px solid var(--ds-line);
    border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-lg);
    animation:ds-ring-in .3s cubic-bezier(.2,1,.3,1)}
  .ds-ring--live{background:var(--ds-accent-soft)}
  @keyframes ds-ring-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
}

/* ═══════════════════════════════════════════════════════════
   @layer base — accessibilité (P6)
   ═══════════════════════════════════════════════════════════ */
@layer base {
  /* Visible pour les lecteurs d'écran, invisible à l'œil. Ni display:none
     (qui masque aussi aux lecteurs), ni visibility:hidden. */
  .u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .u-sr-focus:focus{position:static!important;width:auto;height:auto;margin:0;
    clip:auto;white-space:normal}

  /* Aller au contenu : le premier arrêt de tabulation, pour ne pas retraverser la nav. */
  .skip-link{position:absolute;top:-100px;left:8px;z-index:100;background:var(--ds-ink);
    color:#fff;padding:10px 16px;border-radius:0 0 var(--ds-r-sm) var(--ds-r-sm);
    font-weight:600;font-size:13px;text-decoration:none;transition:top .15s}
  .skip-link:focus{top:0}

  /* Les pastilles de round sont une <ol> maintenant : on neutralise les puces. */
  .ds-rounds{list-style:none;margin:0;padding:12px 16px}
  li.ds-round-dot{list-style:none}
}

/* ═══════════════════════════════════════════════════════════
   @layer components — bandeau de consentement
   « Non merci » est aussi accessible que « D'accord » : un refus
   caché derrière trois clics n'est pas un consentement.
   ═══════════════════════════════════════════════════════════ */
@layer components {
  .ds-consent{position:fixed;left:12px;right:12px;z-index:78;
    bottom:calc(84px + var(--ds-safe-b));background:var(--ds-paper);
    border:1px solid var(--ds-line);border-radius:var(--ds-r);box-shadow:var(--ds-shadow-lg);
    padding:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  @media(min-width:768px){.ds-consent{left:auto;right:18px;bottom:18px;width:min(420px,100%)}}
  .ds-consent__text{flex:1;min-width:180px}
  .ds-consent__text b{font-size:13.5px;display:block}
  .ds-consent__text p{font-size:12px;color:var(--ds-muted);margin:5px 0 0;line-height:1.45}
  .ds-consent__actions{display:flex;gap:8px}
}