/*! Klōz — design system
 *  Conception et développement : Noelabs — https://noelabs.com
 *  Éditeur : NOESIS SOFTWARE TECHNOLOGIES SAS
 *
 *  Note : ce commentaire est une mention d'auteur, pas un lien référençable.
 *  Les moteurs n'indexent pas les feuilles de style et n'en suivent pas les URL.
 */
@layer tokens, base, components, pages, docs;

@layer tokens {
  :root{
    --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%);
    --ds-bg:#FAFAFB; --ds-paper:#FFFFFF; --ds-off:#F4F4F6; --ds-scene:#F7F7F9; --ds-ink:#18181B;
    --ds-muted:#71717A; --ds-muted-2:#A1A1AA;
    --ds-line:#E7E7EC; --ds-line-strong:#D4D4D8;
    --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;
    --ds-ok:#16A34A; --ds-ok-soft:#DCFCE7; --ds-warn:#B45309; --ds-warn-soft:#FEF3C7;
    --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;
    --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;
    --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;
    --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}
  @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}
    /* Le disque d'attente : on l'arrête sans le faire disparaître. Un bouton
       qui ne dit plus rien pendant sa requête serait pire que le mouvement
       qu'on cherche à éviter — d'où l'anneau figé, encore lisible. */
    .ds-btn.htmx-request::after{animation:none;border-top-color:currentColor;
      opacity:.45}
    form.htmx-request,.ds-card.htmx-request,.htmx-swapping,.htmx-settling,
    .ds-gc__cell{transition:none}
  }
}

@layer components {
  .app-shell{max-width:1180px;margin:0 auto;padding:0 var(--ds-s4) calc(84px + var(--ds-safe-b))}
  /* Les pages vitrine gèrent elles-mêmes leurs marges : le carrousel doit
     pouvoir toucher les deux bords, ce qu'une gouttière du shell interdit. */
  .app-shell--plein{max-width:none;padding:0}
  @media(min-width:768px){.app-shell{padding:0 var(--ds-s5) 80px}}

  .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}

  .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)}

  .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)}

  /* Gabarit shadcn : 36 px de haut, 16 px de marge interne, rayon 8. Le confort
     tactile n'est pas sacrifié pour autant — sur pointeur grossier (doigt), la
     hauteur remonte à 44 px plus bas dans ce même bloc. */
  .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
    font-weight:500;font-size:12.5px;line-height:1;padding:0 13px;height:32px;
    text-decoration:none;
    border-radius:8px;border:1px solid transparent;transition:.15s;white-space:nowrap}
  .ds-btn:hover{text-decoration:none}
  .ds-btn svg{width:14px;height:14px;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:0 16px;height:35px;font-size:12px;border-radius:7px}
  .ds-btn--lg svg{width:14px;height:14px}

  /* Cible tactile : au doigt, 36 px est trop court. On ne change que la hauteur,
     donc le dessin reste identique entre les deux mondes. */
  @media (pointer:coarse){
    .ds-btn{height:42px}
    .ds-btn--lg{height:42px}
  }
  .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)}
  @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}

  .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)}

  .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}}

  .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)}

  .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}}

  .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}

  .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}

  .ds-grid-cal{overflow:auto;-webkit-overflow-scrolling:touch}
  /* La grille défile DANS son conteneur, jamais la page.
     380 px de largeur minimale débordaient sur un iPhone SE (375 px) : toute la
     page partait en défilement horizontal, ce qui casse la lecture partout
     ailleurs, pas seulement sur la grille. */
  .ds-gc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--ds-s3));padding-inline:var(--ds-s3);
    scrollbar-width:thin}
  .ds-gc{display:grid;grid-template-columns:38px repeat(7,minmax(38px,1fr));gap:4px;
    min-width:330px}
  @media(min-width:768px){
    .ds-gc{grid-template-columns:56px repeat(7,minmax(64px,1fr));gap:5px;min-width:620px}
    .ds-gc-wrap{margin-inline:0;padding-inline:0}
  }
  .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)}

  .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)}

  .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}

  .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}

  .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}

  .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}

  .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}

  .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 {
  .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 {
  [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 {
  .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 {
  .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 {
  .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}
  .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 {
  .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 {
  .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}

  .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}

  .ds-rounds{list-style:none;margin:0;padding:12px 16px}
  li.ds-round-dot{list-style:none}
}

@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}
}

@layer pages {
  .auth-brand{margin-bottom:22px}
  .auth-message{margin-bottom:16px;align-items:flex-start;gap:9px}
  .auth-message svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
  .auth-causes{display:flex;flex-direction:column;gap:11px;margin:0 0 20px;
    padding:14px;border-radius:var(--ds-r);background:var(--ds-bg);
    border:1px solid var(--ds-line);font-size:13px;line-height:1.5;color:var(--ds-muted)}
  .auth-causes div{display:flex;gap:10px;align-items:flex-start}
  .auth-causes svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--ds-muted-2)}
  .auth-retry{margin-top:2px}
  .auth-sms{margin-top:12px}
  .auth-back-link{margin-top:10px;color:var(--ds-muted)}
}
@layer pages {
  .me-eyebrow{margin-bottom:10px}
  .me-card{padding:18px;margin-bottom:14px}
  .me-identity{display:flex;align-items:center;gap:13px}
  .me-identity__text{min-width:0}
  .me-identity__text h3{font-size:18px;font-weight:700}
  .me-identity__text .u-muted{font-size:13px}
  .me-link{display:flex;align-items:center;gap:9px;margin-top:10px;padding:11px 13px;
    border-radius:var(--ds-r);background:var(--ds-accent-soft);color:var(--ds-accent-600);
    font-size:13.5px;font-weight:600;text-decoration:none;word-break:break-all}
  .me-link svg{width:16px;height:16px;flex:0 0 auto}
  .me-note{font-size:11.5px;color:var(--ds-muted);margin:8px 0 0}
  .me-strong{color:var(--ds-match-600)}
  .me-edit{margin-top:12px;padding-left:0}
  .durs .ds-chip[aria-current="true"]{border-color:var(--ds-accent);
    background:var(--ds-accent-soft);color:var(--ds-accent-600);font-weight:700}
}
@layer pages {
  .pf-champ{margin-bottom:16px}
  .pf-champ .ds-label{display:block;margin-bottom:5px}
  .pf-champ--consent{padding:13px;border:1px solid var(--ds-line);border-radius:var(--ds-r);
    background:var(--ds-bg);margin-top:4px}
  .pf-champ ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
  .pf-champ ul label{display:inline-flex;align-items:center;gap:5px;font-size:13px}
}

@layer pages {
  .wz{max-width:600px;margin:0 auto;padding:26px 16px 60px}

  .wz__jauge{display:flex;gap:6px;list-style:none;margin:0 0 22px;padding:0;
    overflow-x:auto;scrollbar-width:none}
  .wz__jauge::-webkit-scrollbar{display:none}
  .wz__pas{display:flex;align-items:center;gap:7px;flex-shrink:0;
    padding:6px 11px 6px 7px;border-radius:999px;
    border:1px solid var(--ds-line);background:var(--ds-surface);
    font-size:12px;color:var(--ds-muted-2);white-space:nowrap}
  .wz__puce{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
    background:var(--ds-bg);color:var(--ds-muted-2);font-size:11px;font-weight:700;flex-shrink:0}
  .wz__pas--fait{border-color:var(--ds-accent-soft);color:var(--ds-accent-600)}
  .wz__pas--fait .wz__puce{background:var(--ds-accent-soft);color:var(--ds-accent-600)}
  .wz__pas--ici{border-color:var(--ds-accent);color:var(--ds-ink);font-weight:600}
  .wz__pas--ici .wz__puce{background:var(--ds-accent);color:var(--ds-paper)}

  .wz__carte{background:var(--ds-surface);border:1px solid var(--ds-line);
    border-radius:var(--ds-r-lg);padding:24px;box-shadow:var(--ds-shadow)}
  .wz__tete{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}
  .wz__icone{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;
    border-radius:var(--ds-r);background:var(--ds-accent-soft);color:var(--ds-accent-600)}
  .wz__titre{font-family:var(--ds-font-display);font-size:22px;font-weight:800;
    line-height:1.15;margin:0 0 4px;letter-spacing:-.01em}
  .wz__sous{font-size:13.5px;line-height:1.55;color:var(--ds-muted);margin:0}

  .wz__champ{margin-bottom:17px}
  .wz__champ .ds-label{display:block;margin-bottom:5px}
  .wz__aide{font-size:12px;color:var(--ds-muted-2);margin:5px 0 0;line-height:1.45}
  .wz__champ ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
  .wz__champ ul li label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;
    padding:10px 12px;border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);
    background:var(--ds-bg)}
  .wz__champ ul li label:hover{border-color:var(--ds-accent)}

  .wz__pied{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
  .wz__pied .ds-btn{flex:1;justify-content:center;min-width:180px}
  .wz__passer{font-size:13px;color:var(--ds-muted-2);text-decoration:none}
  .wz__passer:hover{color:var(--ds-ink);text-decoration:underline}
  .wz__compteur{text-align:center;font-size:12px;color:var(--ds-muted-2);margin:16px 0 0}

  @media (max-width:520px){
    .wz{padding:16px 14px 48px}
    .wz__carte{padding:19px}
    .wz__pied{flex-direction:column-reverse;align-items:stretch}
    .wz__pied .ds-btn{width:100%}
    .wz__passer{text-align:center}
  }
}

@layer pages {
  /* ── Progression : une barre qui se remplit, plus lisible qu'un compteur ── */
  .wz__barre{height:3px;border-radius:999px;background:var(--ds-line);overflow:hidden;margin-bottom:20px}
  .wz__barre>i{display:block;height:100%;border-radius:999px;background:var(--ds-grad);
    transition:width .55s cubic-bezier(.2,.9,.25,1)}

  /* L'écran entre par le bas et se pose : le mouvement dit « on avance », ce
     qu'aucune barre ne dit aussi bien. */
  .wz__carte{animation:wz-entree .34s cubic-bezier(.2,.9,.25,1) both}
  @keyframes wz-entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ── Rails de connexion ── */
  .wz__rails{display:flex;flex-direction:column;gap:10px}
  .wz__rail{display:flex;align-items:center;gap:12px;padding:14px;
    border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-bg)}
  .wz__rail--ok{border-color:var(--ds-accent-soft);background:var(--ds-accent-soft)}
  .wz__rail__logo{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
    border-radius:9px;background:var(--ds-paper);border:1px solid var(--ds-line)}
  .wz__rail__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .wz__rail__txt b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
  .wz__rail__txt span{font-size:12.5px;color:var(--ds-muted);line-height:1.45}
  .wz__opt{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    padding:2px 6px;border-radius:999px;background:var(--ds-line);color:var(--ds-muted-2)}
  .wz__rail__ok{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
    font-weight:600;color:var(--ds-accent-600);flex-shrink:0}
  .wz__rail__off{font-size:12px;color:var(--ds-muted-2);flex-shrink:0}

  /* ── Propositions : la récompense de fin de parcours ── */
  .wz__props{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:9px}
  .wz__prop{display:flex;align-items:center;gap:11px;padding:11px 13px;
    border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-paper);
    animation:wz-prop .42s cubic-bezier(.2,.9,.25,1) both;
    animation-delay:calc(var(--i) * 80ms)}
  @keyframes wz-prop{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  .wz__prop__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .wz__prop__id b{font-size:14px;font-weight:600}
  .wz__prop__id span{font-size:12px;color:var(--ds-muted);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .wz__prop__pastille{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
    font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;
    background:var(--ds-accent-soft);color:var(--ds-accent-600)}

  /* Le mouvement est un confort, jamais un passage obligé. */
  @media (prefers-reduced-motion: reduce){
    .wz__carte,.wz__prop{animation:none}
    .wz__barre>i{transition:none}
  }
}
@layer pages {
  .bk-done{text-align:center;padding:8px 0}
  .bk-done__quand{font-size:18px;font-weight:700;margin:12px 0 6px}
  .bk-done__qui{color:var(--ds-muted);font-size:13px;margin:0}
  .bk-done__lien{margin-top:14px}
  .bk-done__filet{color:var(--ds-muted);font-size:11.5px;margin-top:16px;line-height:1.5}

  .bk-viral{margin-top:22px;padding-top:18px;border-top:1px solid var(--ds-line);
    display:flex;flex-direction:column;align-items:center;gap:11px}
  .bk-viral__txt{font-size:13px;line-height:1.5;color:var(--ds-muted);margin:0}
  .bk-viral__txt b{color:var(--ds-ink);font-weight:600}
}

@layer pages {
  .cmp{max-width:820px;margin:0 auto;padding:34px 18px 70px}
  .cmp__fil{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
    color:var(--ds-accent-600);font-weight:700;margin:0 0 10px}
  .cmp__h1{font-family:var(--ds-font-display);font-size:clamp(25px,4.4vw,38px);
    font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
  .cmp__intro{font-size:15px;line-height:1.68;color:var(--ds-muted);margin:0 0 13px}

  .cmp__tableau{margin:30px 0;border:1px solid var(--ds-line);border-radius:var(--ds-r);
    overflow:hidden;background:var(--ds-surface)}
  .cmp__ligne{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;
    padding:13px 15px;border-bottom:1px solid var(--ds-line);font-size:13.5px;
    line-height:1.5;align-items:start}
  .cmp__ligne:last-child{border-bottom:0}
  .cmp__ligne--tete{background:var(--ds-bg);font-weight:700;font-size:12px;
    text-transform:uppercase;letter-spacing:.04em;color:var(--ds-muted-2)}
  .cmp__ligne--fort{background:var(--ds-accent-soft)}
  .cmp__critere{font-weight:600}
  .cmp__autre{color:var(--ds-muted)}
  .cmp__nous{font-weight:500}
  .cmp__nous svg{color:var(--ds-accent-600);margin-right:5px;vertical-align:-1px}

  .cmp__honnete{border:1px solid var(--ds-line);border-left:3px solid var(--ds-accent);
    border-radius:var(--ds-r-sm);padding:16px 18px;background:var(--ds-bg);margin:26px 0}
  .cmp__honnete h2{display:flex;align-items:center;gap:8px;font-size:14px;
    font-weight:700;margin:0 0 8px}
  .cmp__honnete p{font-size:13.5px;line-height:1.62;color:var(--ds-muted);margin:0}
  .cmp__fin{font-size:15px;line-height:1.65;margin:22px 0 26px}
  .cmp__cta{display:flex;justify-content:center}

  @media (max-width:640px){
    .cmp__ligne{grid-template-columns:1fr;gap:5px;padding:14px 13px}
    .cmp__ligne--tete{display:none}
    .cmp__critere{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
      color:var(--ds-muted-2)}
    .cmp__autre::before{content:"Concurrent : ";color:var(--ds-muted-2);font-size:11.5px}
    .cmp__nous::before{content:"Klōz : ";color:var(--ds-muted-2);font-size:11.5px}
  }
}

@layer pages {
  .ft{border-top:1px solid var(--ds-line);background:var(--ds-bg);margin-top:60px}
  .ft__in{max-width:1080px;margin:0 auto;padding:42px 20px 30px;
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
  .ft__logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;
    font-size:17px;color:var(--ds-ink);text-decoration:none;letter-spacing:-.02em}
  .ft__logo svg{color:var(--ds-accent)}
  .ft__pitch{font-size:12.5px;line-height:1.6;color:var(--ds-muted);margin:11px 0 10px;
    max-width:34ch}
  .ft__made{font-size:12px;color:var(--ds-muted-2);margin:0}
  .ft__col{display:flex;flex-direction:column;gap:8px}
  .ft__h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--ds-muted-2);font-weight:700;margin:0 0 3px}
  .ft__col a{font-size:13px;color:var(--ds-muted);text-decoration:none}
  .ft__col a:hover{color:var(--ds-ink)}
  .ft__bas{border-top:1px solid var(--ds-line);max-width:1080px;margin:0 auto;
    padding:16px 20px 26px;display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:8px}
  .ft__bas p{font-size:11.5px;color:var(--ds-muted-2);margin:0}
  .ft__bas a{color:var(--ds-accent-600);text-decoration:none;font-weight:600}
  .ft__bas a:hover{text-decoration:underline}
  @media (max-width:820px){
    .ft__in{grid-template-columns:1fr 1fr;gap:26px}
    .ft__marque{grid-column:1 / -1}
    .ft__bas{flex-direction:column}
  }
}
@layer pages {
  /* Confort tactile : au doigt, tout ce qui se clique fait au moins 44 px.
     Seule la boîte grandit, le dessin reste identique — c'est le geste qu'on
     élargit, pas l'élément. */
  @media (pointer:coarse){
    .mnav a{width:44px;height:44px}
    .ds-gc__cell{height:36px}
    .ft__col a{padding-block:5px}
    .wz__passer{padding:10px 0;display:inline-block}
  }
  /* Aucun mot ne doit pouvoir élargir la page — une URL collée dans une bio
     suffirait sinon à faire défiler tout le site horizontalement. */
  body{overflow-x:hidden}
  .wz__prop__id b,.wz__prop__id span,.ft__pitch,.cmp__autre,.cmp__nous{
    overflow-wrap:anywhere}
}
@layer pages {
  .ds-card--serre{padding:12px}
  .gc-note{color:var(--ds-muted);font-size:11.5px;margin:10px 2px 0;line-height:1.5}
}

@layer pages {
  .wz__push{display:flex;flex-direction:column;gap:13px}
  .wz__push__txt{font-size:13.5px;line-height:1.62;color:var(--ds-muted);margin:0}
  .wz__push__note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;
    line-height:1.5;color:var(--ds-muted-2);margin:0}
  .wz__push__note svg{flex-shrink:0;margin-top:2px}
  .wz__push__ok{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
    color:var(--ds-accent-600);padding:14px;border-radius:10px;
    background:var(--ds-accent-soft);margin:0}
  .ds-btn--block{width:100%;justify-content:center}
}

@layer pages {
  /* ── Liste des rails ── */
  .cnx{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
  .cnx__rail{display:flex;align-items:center;gap:12px;padding:12px 14px;
    border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-bg)}
  .cnx__rail--ok{border-color:var(--ds-ok-soft);background:var(--ds-surface)}

  /* La tuile porte la pastille : l'état se lit sur le logo, pas à côté. */
  .cnx__tuile{position:relative;display:grid;place-items:center;flex-shrink:0;
    width:38px;height:38px;border-radius:10px;background:var(--ds-paper);
    border:1px solid var(--ds-line)}
  .cnx__point{position:absolute;top:-2px;right:-2px;width:9px;height:9px;
    border-radius:50%;background:var(--ds-ok);border:2px solid var(--ds-paper)}

  .cnx__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .cnx__id b{font-size:14px;font-weight:600}
  .cnx__id span{font-size:12px;line-height:1.45;color:var(--ds-muted)}
  .cnx__etat{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--ds-ok)}
  .cnx__pied{font-size:12.5px;line-height:1.55;color:var(--ds-muted);margin:15px 0 0}
  .cnx__pied b{color:var(--ds-ink);font-weight:600}

  /* ── Écran de connexion isolé ── */
  .cnx__seul{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:11px;padding:26px 18px;border:1px solid var(--ds-line);
    border-radius:14px;background:var(--ds-bg)}
  .cnx__seul__tuile{display:grid;place-items:center;width:52px;height:52px;
    border-radius:13px;background:var(--ds-paper);border:1px solid var(--ds-line)}
  .cnx__seul__hote{display:flex;align-items:center;gap:4px;font-size:11.5px;
    font-family:var(--ds-font-mono);color:var(--ds-muted-2);margin:0}
  .cnx__seul__txt{font-size:14.5px;font-weight:600;margin:0;line-height:1.4}
  .cnx__seul__note{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;
    line-height:1.5;color:var(--ds-muted-2);margin:3px 0 0;max-width:34ch}
  .cnx__seul__note svg{flex-shrink:0;margin-top:2px}

  @media (max-width:480px){
    .cnx__rail{flex-wrap:wrap}
    .cnx__rail .ds-btn{width:100%;justify-content:center;margin-top:4px}
    .cnx__id{flex-basis:calc(100% - 50px)}
  }
}
@layer pages {
  .pwa{position:fixed;left:12px;right:12px;bottom:calc(84px + var(--ds-safe-b));
    z-index:120;display:flex;flex-direction:column;gap:12px;padding:15px 16px;
    background:var(--ds-surface);border:1px solid var(--ds-line);
    border-radius:14px;box-shadow:var(--ds-shadow-lg);
    animation:pwa-monte .3s cubic-bezier(.2,.9,.25,1) both}
  @keyframes pwa-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .pwa__txt{display:flex;flex-direction:column;gap:3px}
  .pwa__txt b{font-size:14px;font-weight:600}
  .pwa__txt span{font-size:12.5px;line-height:1.5;color:var(--ds-muted)}
  .pwa__actes{display:flex;gap:8px;justify-content:flex-end}
  @media (min-width:768px){
    .pwa{left:auto;right:22px;bottom:22px;max-width:360px}
  }
  @media (prefers-reduced-motion: reduce){ .pwa{animation:none} }
}

@layer pages {
  .lnk{max-width:640px;margin:0 auto;padding:22px 16px 60px}
  .lnk__h1{font-family:var(--ds-font-display);font-size:22px;font-weight:800;margin:0 0 18px}
  .lnk__h2{font-size:15px;font-weight:700;margin:0 0 14px}
  .lnk__principal{border:1px solid var(--ds-accent-soft);background:var(--ds-accent-soft);
    border-radius:12px;padding:14px;margin-bottom:16px}
  .lnk__badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;color:var(--ds-accent-600);margin-bottom:6px}
  .lnk__principal code{display:block;font-size:13.5px;font-weight:600;color:var(--ds-ink)}
  .lnk__principal p{font-size:12px;color:var(--ds-muted);margin:5px 0 0}
  .lnk__liste{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
  .lnk__item{display:flex;align-items:center;gap:11px;padding:12px 14px;
    border:1px solid var(--ds-line);border-radius:11px;background:var(--ds-surface);flex-wrap:wrap}
  .lnk__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .lnk__id b{font-size:14px;font-weight:600}
  .lnk__id code{font-size:11.5px;color:var(--ds-muted-2);overflow-wrap:anywhere}
  .lnk__id span{font-size:12px;color:var(--ds-muted)}
  .lnk__meta{display:flex;gap:6px;flex-shrink:0}
  .lnk__form{border:1px solid var(--ds-line);border-radius:12px;padding:17px;
    background:var(--ds-bg)}
  .lnk__champ{margin-bottom:14px}
  .lnk__aide{font-size:11.5px;color:var(--ds-muted-2);margin:4px 0 0}
  .lnk__note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;
    color:var(--ds-muted-2);margin:16px 0 0}
  .lnk__note svg{flex-shrink:0;margin-top:2px}

  .prof__manques{border:1px solid var(--ds-warn-soft);background:var(--ds-warn-soft);
    border-radius:11px;padding:14px;margin-bottom:18px}
  .prof__manques h2{font-size:13px;font-weight:700;color:var(--ds-warn);margin:0 0 9px;
    display:flex;align-items:center;gap:7px}
  .prof__manques ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
  .prof__manques li{font-size:12.5px;line-height:1.45;color:var(--ds-ink)}
  .prof__manques b{font-weight:600}
  .prof__manques span{color:var(--ds-muted)}
}
@layer pages {
  .pb-lien{border:1px solid var(--ds-line);border-radius:12px;padding:14px 16px;
    background:var(--ds-bg);margin-bottom:16px}
  .pb-lien__titre{font-size:16px;font-weight:700;margin:0 0 4px}
  .pb-lien__desc{font-size:13px;line-height:1.5;color:var(--ds-muted);margin:0 0 9px}
  .pb-lien__meta{display:flex;gap:7px;margin:0}
  .pb-lien__note{font-size:11.5px;color:var(--ds-muted-2);margin:9px 0 0}
}
@layer pages {
  .lg{display:inline-flex}
  .lg__select{font-size:12px;font-family:inherit;color:var(--ds-muted);
    background:transparent;border:1px solid var(--ds-line);border-radius:8px;
    padding:5px 8px;cursor:pointer}
  .lg__select:hover{color:var(--ds-ink);border-color:var(--ds-line-strong)}
  @media (pointer:coarse){ .lg__select{padding:9px 10px} }
}
@layer pages {
  .gc-page{max-width:440px;margin:0 auto;padding:40px 18px;text-align:center}
  .gc-page h1{font-family:var(--ds-font-display);font-size:22px;font-weight:800;margin:12px 0 8px}
  .gc-page__quand{font-size:14px;color:var(--ds-muted);margin:0 0 16px}
  .gc-page__txt{font-size:13.5px;line-height:1.6;color:var(--ds-muted);margin:0 0 22px}
  .gc-page__non{margin-top:10px}
}

@layer components {
  /* ════════════════ Une requête en cours doit se voir ════════════════

     htmx pose `.htmx-request` sur l'élément déclencheur pendant tout l'aller-
     retour. Une seule règle globale couvre donc les 86 gabarits — sans toucher
     un seul d'entre eux, et sans qu'on puisse oublier un bouton.

     Le besoin n'est pas cosmétique : un clic sans réponse pendant 300 ms passe
     pour une panne, et le réflexe humain est de recliquer. Un bouton qui
     s'assombrit et tourne dit « j'ai reçu », ce qui suffit à faire attendre. */

  .htmx-request{cursor:progress}

  /* Sur un bouton : le libellé s'efface, un disque tourne à sa place. La
     largeur ne bouge pas — un bouton qui rétrécit pendant l'attente fait
     sauter la mise en page sous le doigt. */
  .ds-btn.htmx-request{position:relative;color:transparent!important;
    pointer-events:none}
  .ds-btn.htmx-request svg{opacity:0}
  .ds-btn.htmx-request::after{content:"";position:absolute;inset:0;margin:auto;
    width:14px;height:14px;border-radius:50%;
    border:2px solid currentColor;border-top-color:transparent;
    color:var(--ds-paper);animation:ds-tourne .6s linear infinite}
  .ds-btn--outline.htmx-request::after,
  .ds-btn--ghost.htmx-request::after{color:var(--ds-ink)}

  /* Sur un conteneur : atténuation, sans masquer le contenu. On garde le
     contexte visible pendant le remplacement. */
  form.htmx-request,
  .ds-card.htmx-request{opacity:.55;transition:opacity .12s ease}

  /* La cible qui va être remplacée s'atténue aussi : c'est elle que la
     personne regarde, pas le bouton qu'elle vient de quitter des yeux. */
  .htmx-swapping{opacity:.3;transition:opacity .12s ease}
  .htmx-added{opacity:0}
  .htmx-settling{opacity:1;transition:opacity .18s ease}

  @keyframes ds-tourne{to{transform:rotate(360deg)}}

}
@layer components {
  .kz-attend,.kz-attend *{cursor:progress!important}
}
@layer components {
  /* La case ne montre PAS le disque tournant : elle a déjà répondu en
     basculant. Superposer un indicateur d'attente à un état déjà changé
     brouillerait le message. */
  .ds-gc__cell.htmx-request{cursor:pointer}
  .ds-gc__cell{transition:background-color .1s ease,border-color .1s ease}
  @media (prefers-reduced-motion: reduce){ .ds-gc__cell{transition:none} }
}

@layer pages {
  .rg{max-width:520px;margin:0 auto;padding:24px 16px 60px}
  .rg__h1{font-family:var(--ds-font-display);font-size:21px;font-weight:800;margin:0 0 18px}
  .rg__vide{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:11px;padding:32px 20px;border:1px solid var(--ds-line);border-radius:14px;
    background:var(--ds-bg)}
  .rg__pastille{width:10px;height:10px;border-radius:50%;background:var(--ds-ok)}
  .rg__etat{font-size:15px;font-weight:600;margin:0}
  .rg__txt{font-size:13px;line-height:1.6;color:var(--ds-muted);margin:0;max-width:38ch}
  .rg__cond{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;
    gap:7px;width:100%;max-width:320px}
  .rg__cond li{display:flex;align-items:center;gap:8px;font-size:12.5px;
    padding:9px 12px;border-radius:9px;background:var(--ds-surface);
    border:1px solid var(--ds-line);text-align:left}
  .rg__ok{color:var(--ds-ok)}
  .rg__ko{color:var(--ds-warn)}
}

@layer pages {
  .gr{max-width:600px;margin:0 auto;padding:24px 16px 60px}
  .gr__h1{font-family:var(--ds-font-display);font-size:21px;font-weight:800;margin:0 0 6px}
  .gr__actuel{font-size:13.5px;color:var(--ds-muted);margin:0 0 18px}
  .gr__err{margin:0 0 14px}
  .gr__note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;
    color:var(--ds-muted-2);margin:18px 0 0}
  .gr__note svg{flex-shrink:0;margin-top:2px}
  .gr--fait{text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px}
}

@layer pages {
  .rgl{max-width:560px;margin:0 auto;padding:22px 16px 60px}
  .rgl__h1{font-family:var(--ds-font-display);font-size:21px;font-weight:800;margin:0 0 20px}
  .rgl__bloc{border:1px solid var(--ds-line);border-radius:13px;padding:17px;
    background:var(--ds-surface);margin-bottom:16px}
  .rgl__h2{font-size:14px;font-weight:700;margin:0 0 13px}
  .rgl__txt{font-size:13px;line-height:1.6;color:var(--ds-muted);margin:0 0 13px}
  .rgl__form{display:flex;flex-direction:column;gap:6px}
  .rgl__form .ds-btn{align-self:flex-start;margin-top:6px}
  .rgl__aide{font-size:11.5px;color:var(--ds-muted-2);margin:0}
  .rgl__pose{display:flex;align-items:center;gap:11px;padding:12px 14px;
    border:1px solid var(--ds-line);border-radius:11px;background:var(--ds-bg)}
  .rgl__pose .cnx__point{position:static;flex-shrink:0}
  .rgl__pose__txt{flex:1;display:flex;flex-direction:column;gap:2px}
  .rgl__pose__txt b{font-size:13.5px;font-weight:600}
  .rgl__pose__txt code{font-size:11.5px;color:var(--ds-muted-2);font-family:var(--ds-font-mono)}
  .rgl__note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;
    color:var(--ds-muted-2);margin:14px 0 0}
  .rgl__note svg{flex-shrink:0;margin-top:2px}
}

@layer pages {
  .gc{max-width:440px;margin:0 auto;padding:28px 16px 60px;text-align:center}
  .gc__h1{font-family:var(--ds-font-display);font-size:22px;font-weight:800;margin:0 0 6px}
  .gc__quand{font-size:13.5px;color:var(--ds-muted);margin:0 0 22px}
  .gc__oui{margin-bottom:14px}
  .gc__sinon{display:flex;flex-direction:column;gap:7px}
  .gc__note{font-size:11.5px;line-height:1.55;color:var(--ds-muted-2);margin:20px 0 0}
  .gc--fait{display:flex;flex-direction:column;align-items:center;gap:11px}
}
@layer components {
  /* Présence confirmée. Volontairement discrète : son ABSENCE ne veut rien
     dire — beaucoup honorent un rendez-vous sans jamais relire le courriel.
     Un marquage fort sur les non-confirmés ferait croire à des défections. */
  .ds-pastille{display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--ds-ok);margin-left:5px;vertical-align:middle}
}

@layer pages {
  .pb-site{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
    color:var(--ds-muted);text-decoration:none;padding:6px 10px;
    border:1px solid var(--ds-line);border-radius:var(--ds-r-full);margin-bottom:14px}
  .pb-site:hover{color:var(--ds-ink);border-color:var(--ds-line-strong)}
}

@layer pages {
  /* Page de vente. Tout est exprimé en JETONS : un habillage redéfinit les
     variables sur la racine et rien d'autre ne bouge — les contrastes et les
     rythmes restent ceux qui ont été éprouvés. */
  .vsl{max-width:660px;margin:0 auto;padding:0 18px 72px;background:var(--ds-paper);
    color:var(--ds-ink)}
  .vsl__hero{text-align:center;padding:44px 0 30px}
  .vsl__promesse{font-family:var(--ds-font-display);font-size:clamp(25px,5.4vw,38px);
    font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:16px 0 8px}
  .vsl__qui{font-size:13.5px;color:var(--ds-muted);margin:0 0 22px}
  .vsl__cta{gap:8px}
  .vsl__video{position:relative;padding-bottom:56.25%;height:0;margin:0 0 34px;
    border-radius:14px;overflow:hidden;background:var(--ds-surface)}
  .vsl__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .vsl__bloc{margin:0 0 26px}
  .vsl__texte{font-size:16.5px;line-height:1.65;color:var(--ds-ink);margin:0}
  .vsl__h2{font-family:var(--ds-font-display);font-size:19px;font-weight:700;
    margin:0 0 10px}
  .vsl__bloc--fort{border-left:3px solid var(--ds-accent);padding-left:17px}
  .vsl__offre{background:var(--ds-surface);border:1px solid var(--ds-line);
    border-radius:14px;padding:22px}
  .vsl__risque .vsl__texte{display:flex;gap:9px;align-items:flex-start;
    font-size:14px;color:var(--ds-muted)}
  .vsl__risque svg{flex-shrink:0;margin-top:3px;color:var(--ds-ok)}
  .vsl__fin{text-align:center;padding:14px 0 0}
  .vsl__note{font-size:12px;color:var(--ds-muted-2);margin:13px 0 0}
}
@layer pages {
  .pv{max-width:600px;margin:0 auto;padding:22px 16px 60px}
  .pv__h1{font-family:var(--ds-font-display);font-size:21px;font-weight:800;margin:0 0 6px}
  .pv__txt{font-size:13px;line-height:1.6;color:var(--ds-muted);margin:0 0 18px}
  .pv__rediger{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
    padding:14px;border:1px dashed var(--ds-line-strong);border-radius:12px;
    margin-bottom:22px}
  .pv__form{display:flex;flex-direction:column;gap:18px}
  .pv__bloc{display:flex;flex-direction:column;gap:5px}
  .pv__aide{font-size:11.5px;line-height:1.5;color:var(--ds-muted-2);margin:0}
  .pv__espace{margin-top:11px}
  .pv__publier{display:flex;flex-direction:column;gap:7px;padding:14px;
    background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:12px}
  .pv__case{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
  .pv__lien{display:inline-flex;align-items:center;gap:5px;font-size:12px;
    color:var(--ds-accent);text-decoration:none}
}
@layer pages {
  .wz__ensuite{margin-top:22px;padding:16px;border:1px dashed var(--ds-line-strong);
    border-radius:12px;background:var(--ds-bg)}
  .wz__ensuite__titre{font-size:13px;font-weight:700;margin:0 0 5px}
  .wz__ensuite__txt{font-size:12.5px;line-height:1.55;color:var(--ds-muted);
    margin:0 0 12px}
}