/* ==========================================================================
   Les polices, servies par Nota — jamais par un tiers.
   Inter (texte) et Sora (titres) arrivaient de fonts.googleapis.com : l'adresse
   IP et l'agent de CHAQUE visiteur atteignaient Google avant toute bannière, sur
   un site qui vend des actes notariés (propriétaire, 2026-09-12). Les octets
   vivent désormais dans /fonts, licence OFL jointe (fonts/OFL.txt).
   Ce sont les versions VARIABLES : un seul fichier par tranche couvre toutes
   les graisses. `swap` garde le texte lisible pendant le chargement.
   ========================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{--radius:8px;--radius-xs:3px;--radius-sm:6px;--radius-lg:12px;--subtitle-ink:#f4f8fa;--font-display:Sora,Inter,ui-sans-serif,sans-serif;--weight-display:800;--type-h1:clamp(26px, 2.25vw, 36px);--type-h1-lh:1.12;--type-h1-ls:-.04em;--type-h1-compact:clamp(26px, 6vw, 32px);--type-h2:clamp(19px, 1.5vw, 24px);--type-h2-lh:1.2;--type-h2-ls:-.035em;--type-h3:17px;--type-h3-lh:1.3;--type-h3-ls:-.02em;--type-h4:15px;--type-h4-lh:1.3;--type-h4-ls:-.01em;--type-lead:16px;--type-lead-lh:1.6;--type-eyebrow:12px;--type-eyebrow-ls:.1em;--type-body:16px;--type-body-lh:1.5;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:var(--type-body);line-height:var(--type-body-lh)}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--action-ink);outline-offset:4px}button{transition:background .18s,color .18s,border .18s}button:hover:not(:disabled){filter:none}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display)}h1{font-size:var(--type-h1);line-height:var(--type-h1-lh);letter-spacing:var(--type-h1-ls)}h2{font-size:var(--type-h2);line-height:1.15;letter-spacing:var(--type-h2-ls)}h3{font-size:var(--type-h3);letter-spacing:-.02em}p{line-height:1.65}svg{display:block;width:100%;height:100%}.muted{color:var(--ink-muted)}.small{font-size:var(--type-h4)}.wide{width:100%}.brand{display:flex;align-items:center;gap:var(--lockup-badge-gap)}.product-label{display:flex;gap:15px;align-items:center;font-size:13px;color:var(--ink-muted)}.divider{height:24px;border-left:1px solid var(--border);margin-right:10px}.beta-badge,.outline-badge{display:inline-flex;align-items:center;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:1px;padding:5px 8px;border-radius:var(--radius-xs)}.beta-badge{background:var(--brand-solid);color:var(--brand-ink);border:1px solid var(--brand-bright)}.outline-badge{border:1px solid var(--border);color:var(--ink-muted);font-size:12px;letter-spacing:.2px}.header-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:clamp(8px,2vw,25px);row-gap:6px;margin-left:auto;min-width:0;font-size:12px}.language-toggle{border:0;background:none;color:var(--ink-muted);padding:9px 0}/* FR|EN, the carnet's control: BOTH options visible and the current one on a filled cell. The old single button showed only the other language — and was wired to children the markup never had, so it did nothing at all. */.language-toggle.mini-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;height:28px;border-radius:var(--radius);background:var(--surface-soft)}.language-toggle .mini-seg-btn{display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:44px;padding:0 9px;border:1px solid transparent;background:none;color:var(--ink-muted);font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em;line-height:1;border-radius:var(--radius-xs);cursor:pointer}.language-toggle .mini-seg-btn:hover{color:var(--ink)}.language-toggle .mini-seg-btn[aria-pressed=true]{background:var(--surface-raised);border-color:var(--border);color:var(--ink)}.language-toggle{font-size:12px;font-weight:650;min-width:28px;color:var(--ink)}.welcome{margin:0 auto;padding:clamp(28px,4vw,48px) var(--layout-gutter) 56px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:640px}.eyebrow{font-size:var(--type-eyebrow);letter-spacing:var(--type-eyebrow-ls);font-weight:var(--weight-display);text-transform:uppercase;color:var(--subtitle-ink);display:flex;align-items:center;gap:9px}.signal-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--brand);flex-shrink:0}.welcome h1{margin:20px 0}.welcome h1 span{color:inherit}.hero-description{font-size:var(--type-lead);max-width:48ch;color:var(--ink-muted);line-height:var(--type-lead-lh)}.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 14px}.button{min-height:44px;padding:6px 13px;border-radius:var(--radius);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;line-height:1.4}.primary{background:transparent;color:var(--action-ink);border-color:var(--action-ink);font-weight:700}.secondary{background:transparent;border-color:var(--border);color:var(--ink)}.compact{padding:10px 14px;min-height:44px;font-size:12px}.danger{color:var(--danger);background:transparent;border-color:var(--danger)}.beta-note{display:flex;align-items:flex-start;gap:12px;margin-top:24px;max-width:48ch;padding-top:20px;border-top:1px solid var(--border)}.beta-note p{font-size:12px;color:var(--ink-muted)}.experience-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden;min-width:0}.experience-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.experience-card-head .eyebrow{font-size:12px}.experience-visual{height:176px;position:relative;display:grid;place-items:center;overflow:hidden;margin:0 -20px}.orbit{border:1px solid var(--border);position:absolute;width:340px;height:180px;border-radius:var(--radius-lg);transform:rotate(-28deg);opacity:.75}.orbit-two{transform:rotate(28deg);height:220px;width:245px}.meeting-symbol{width:88px;height:88px;padding:14px;background:var(--surface-raised);border:1px solid var(--accent-purple);border-radius:var(--radius-lg);color:var(--accent-purple);z-index:1;box-shadow:0 0 70px var(--glow)}.floating-label{position:absolute;background:var(--surface);border:1px solid var(--border);font-size:12px;padding:7px 11px;border-radius:var(--radius-sm);color:var(--ink-muted);z-index:2}.floating-label-one{left:6%;top:45px}.floating-label-two{right:4%;bottom:44px}.experience-list{padding:0;margin:0;list-style:none}.experience-list li{display:flex;align-items:flex-start;gap:16px;border-top:1px solid var(--border);padding:16px 0}.experience-list li:last-child{padding-bottom:0}.step-number{color:var(--faint);font-size:12px;margin-top:3px;font-variant-numeric:tabular-nums}.experience-list strong{font-size:13px;font-weight:550}.experience-list p{font-size:12px;color:var(--ink-muted);margin-top:4px}.principles{grid-column:1/-1;border-top:1px solid var(--border);padding-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px}.principles article{position:relative;padding-left:37px}.principle-icon{color:var(--brand);font-size:22px;position:absolute;left:0;top:-5px}.principles h2{font-size:var(--type-h4);letter-spacing:var(--type-h4-ls);margin-bottom:9px}.principles p{font-size:12px;color:var(--ink-muted);max-width:34ch}.workspace{margin:0 auto;padding:var(--layout-section-gap) var(--layout-gutter)}.session-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}.session-heading h1{font-size:var(--type-h2);letter-spacing:var(--type-h2-ls);margin:8px 0}.session-actions{display:flex;gap:9px}.rehearsal-banner{padding:10px 15px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;gap:14px}.rehearsal-banner p{font-size:var(--type-h4);color:var(--ink-muted)}.banner-end{margin-left:auto;white-space:nowrap;font-size:12px;color:var(--ink-muted)}.progress-track{list-style:none;padding:25px 0;margin:0;display:flex;align-items:center;justify-content:space-between;gap:15px}.progress-track li{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:var(--type-h4);flex:1}.progress-track li:after{content:"";height:1px;background:var(--border);flex:1;margin-left:8px}.progress-track li:last-child{flex:0 0 auto}.progress-track li:last-child:after{display:none}.progress-track li>span{border:1px solid var(--border);border-radius:var(--radius-sm);width:25px;height:25px;display:grid;place-items:center;font-size:12px}.progress-track strong{white-space:nowrap;font-weight:500}.progress-track .current,.progress-track .done{color:var(--accent-blue)}.progress-track .current>span{background:transparent;color:var(--accent-blue);border-color:var(--accent-blue);font-weight:700}.progress-track .done>span{border-color:var(--accent-blue);background:var(--surface-soft)}.room-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);gap:23px;align-items:start}.video-column,.ceremony-column{min-width:0}.video-stage{aspect-ratio:1.52;position:relative;overflow:hidden;background:var(--video-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid var(--border)}.video-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,var(--video-glow),transparent 65%);pointer-events:none}#remote-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.remote-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:65px 90px 80px;color:var(--video-ink)}.presence-glyph{width:68px;height:68px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:14px;color:var(--video-signal);margin-bottom:25px;background:var(--video-wash)}.remote-placeholder h2{font-size:var(--type-h3);letter-spacing:var(--type-h3-ls);max-width:350px}.remote-placeholder p{font-size:var(--type-h4);max-width:290px;margin-top:10px;color:var(--video-muted)}.video-topline{position:absolute;top:22px;left:23px;right:23px;display:flex;align-items:center;justify-content:space-between;gap:10px}.video-brand{color:var(--video-ink)}.connection-chip{background:var(--chip-bg);border:1px solid var(--border);padding:6px 9px;border-radius:var(--radius-sm);font-size:12px;color:var(--video-muted);display:flex;align-items:center;gap:7px}.connection-chip .signal-dot{background:var(--video-muted)}.connection-chip.connected .signal-dot{background:var(--video-signal)}.connection-chip.connected{border-color:var(--brand);color:var(--video-ink)}.remote-nameplate{position:absolute;left:23px;bottom:20px;display:flex;align-items:center;gap:8px;font-size:12px;background:var(--chip-bg);padding:8px 11px;border-radius:var(--radius-sm);color:var(--video-ink)}.local-preview{position:absolute;right:19px;bottom:18px;aspect-ratio:1.4;width:24%;max-width:175px;min-width:100px;border:1px solid var(--border-strong);background:var(--video-surface-soft);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}.local-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.local-placeholder{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;color:var(--video-muted);font-size:12px}.local-placeholder>span:first-child{font-size:22px;line-height:1}.local-name{position:absolute;left:8px;bottom:7px;font-size:12px;color:var(--video-ink);background:var(--chip-bg);padding:1px 4px;border-radius:var(--radius-xs)}.media-toolbar{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:11px 16px}.media-controls{display:flex;gap:9px}.control-button{border:1px solid var(--border);color:var(--ink-muted);background:transparent;display:flex;align-items:center;gap:7px;border-radius:var(--radius-sm);padding:10px 13px;font-size:var(--type-h4);min-height:44px}.control-icon{font-size:16px;line-height:1}.control-button[aria-pressed=true]{color:var(--danger);border-color:var(--danger);background:transparent}.status-panel{border:1px solid var(--border);background:var(--surface-soft);border-radius:var(--radius);display:flex;gap:13px;padding:17px;margin-top:17px}.status-panel-icon{width:25px;flex-shrink:0;height:25px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--brand);font-size:17px}.status-panel strong{font-size:var(--type-h4);font-weight:550}.status-panel p{font-size:var(--type-h4);color:var(--ink-muted);margin-top:4px}.preflight-panel,.verification-panel,.ceremony-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:21px;margin-top:17px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-heading h2{font-size:var(--type-h4);letter-spacing:var(--type-h4-ls)}.preflight-checks{padding:0;margin:17px 0;list-style:none}.preflight-checks li{display:flex;align-items:center;gap:9px;color:var(--ink-muted);font-size:var(--type-h4);margin-top:10px}.check-indicator{color:var(--faint);font-size:16px;line-height:1}.check-indicator.passed{color:var(--brand)}.consent-line{display:flex;gap:10px;align-items:flex-start;color:var(--ink-muted);font-size:var(--type-h4);line-height:1.65;margin:15px 0}.consent-line input{width:15px;height:15px;accent-color:var(--brand-solid);margin:2px 0 0;flex-shrink:0}.preflight-actions{display:flex;gap:9px;margin-top:18px}.privacy-line{display:flex;gap:8px;color:var(--ink-muted);font-size:var(--type-h4);margin:13px 5px}.privacy-line>span:first-child{font-size:15px;line-height:1.4}.document-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}.document-panel>.panel-heading{padding:21px 22px}.document-panel .eyebrow{font-size:12px;letter-spacing:1.3px}.document-panel h2{margin-top:6px;font-size:var(--type-h3)}.document-icon{font-size:27px;color:var(--brand)}.document-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 22px;gap:23px}.document-tabs button{border:0;border-bottom:2px solid transparent;padding:0 0 12px;background:transparent;color:var(--ink-muted);font-size:12px;font-weight:500}.document-tabs button[aria-selected=true]{color:var(--accent-blue);border-color:var(--accent-blue)}.document-content{padding:20px}.paper{background:var(--paper);color:var(--paper-ink);padding:25px 26px 17px;box-shadow:var(--shadow-paper);display:flex;flex-direction:column;position:relative;border-radius:var(--radius-xs)}.paper-topline{display:flex;align-items:center;justify-content:space-between}.paper-topline>span{font-size:12px;font-weight:700;letter-spacing:1.4px;border:1px solid var(--paper-rule);color:var(--paper-muted);padding:5px}.paper-rule{height:1px;background:var(--paper-rule);margin:17px 0 24px}.paper h3{font-family:var(--font-display);font-size:var(--type-h2);letter-spacing:var(--type-h2-ls);font-weight:var(--weight-display);line-height:var(--type-h2-lh);max-width:280px}.paper-subtitle{font-size:12px;margin-top:9px;color:var(--paper-muted)}.paper pre{font-family:inherit;font-size:var(--type-h4);line-height:var(--type-body-lh);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--paper-muted);margin:20px 0}.paper-footer{display:flex;justify-content:space-between;border-top:1px solid var(--paper-rule);padding-top:11px;font-size:12px;color:var(--paper-muted);margin-top:auto}.digest-block{margin-top:14px;display:flex;flex-direction:column;gap:5px}.digest-block>.small{font-size:var(--type-h4)}.digest-block code{font-size:var(--type-h4);color:var(--ink-muted);overflow-wrap:anywhere;line-height:1.8;letter-spacing:.5px}.verification-panel p{margin-top:13px;font-size:var(--type-h4)}.verification-panel .outline-badge{white-space:normal;text-align:center;font-size:12px}.connection-fingerprint{display:block;background:var(--surface-soft);border:1px solid var(--border);padding:12px;margin-top:12px;color:var(--brand);font-size:13px;text-align:center;letter-spacing:2px;overflow-wrap:anywhere}.ceremony-panel>.small{margin-top:10px;font-size:12px}.notary-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px}.notary-buttons .button{font-size:12px;padding:10px;min-height:44px}.official-signature{display:flex;gap:10px;margin-top:19px;padding-top:17px;border-top:1px solid var(--border);color:var(--ink-muted)}.official-signature>span{font-size:21px;color:var(--gold)}.official-signature strong{font-size:12px;font-weight:500}.official-signature p{font-size:12px;margin-top:3px}.event-list{list-style:none;margin:0;padding:15px 21px;max-height:430px;overflow-y:auto}.event-list li{padding:12px 0 12px 15px;border-left:1px solid var(--border);position:relative;font-size:var(--type-h4)}.event-list li:before{content:"";position:absolute;left:-3px;top:18px;width:5px;height:5px;background:var(--brand);border-radius:50%}.event-list time{display:block;color:var(--faint);font-size:12px;margin-top:3px}.evidence-note{padding:15px 20px 22px;font-size:var(--type-h4);border-top:1px solid var(--border)}.signature-receipts{display:grid;gap:8px;margin:18px 0}.signature-receipt{display:flex;align-items:center;gap:9px;font-size:var(--type-h4);color:var(--brand);background:var(--surface-soft);padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm)}.page-footer>span{color:var(--ink-muted)}.camera-dialog{width:min(540px,92vw);background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}.camera-dialog::backdrop{background:var(--overlay);backdrop-filter:blur(7px)}.camera-dialog video{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg);border-radius:var(--radius-sm);margin:15px 0;transform:scaleX(-1)}body:fullscreen{overflow:auto}html:fullscreen .workspace{padding-top:18px}@media(min-width:1450px){.room-grid{grid-template-columns:minmax(0,1.55fr) minmax(390px,1fr)}.paper{padding:30px 34px}.paper pre{font-size:var(--type-h4)}.video-stage{aspect-ratio:1.5}}@media(max-width:1050px){.welcome{gap:20px}.header-actions{gap:15px}.product-label{gap:10px}.room-grid{gap:15px;grid-template-columns:minmax(0,1.2fr) minmax(310px,1fr)}.video-stage{aspect-ratio:4 / 3}.remote-placeholder{padding-left:25px;padding-right:25px}.remote-placeholder h2{font-size:var(--type-h3)}.banner-end{display:none}.progress-track{gap:8px}.progress-track li{gap:6px;font-size:var(--type-h4)}.progress-track li:after{margin-left:2px}.session-heading h1{font-size:var(--type-h2)}.document-content{padding:15px}.paper{padding:20px;}.media-toolbar{padding:10px}.media-controls{gap:5px}.control-button{padding:10px}.preflight-actions{flex-direction:column}.notary-buttons{grid-template-columns:minmax(0,1fr)}.notary-buttons .button{min-height:44px}}@media(max-width:760px){.brand{--lockup-tile:30px}.brand-sub{display:none}.product-label{gap:8px;font-size:12px}.divider{display:none}.header-actions{gap:13px}.hero-description{font-size:14px}.hero-ctas{margin-top:25px}.beta-note{margin-top:22px}.session-heading{align-items:flex-start;margin-bottom:18px}.session-heading h1{font-size:var(--type-h2);max-width:260px}.session-heading .eyebrow{font-size:12px;letter-spacing:1px}.session-actions{flex-direction:column;gap:6px}.session-actions .button{font-size:12px;min-height:44px;padding:7px 10px}.rehearsal-banner{align-items:flex-start;gap:9px;padding:11px}.rehearsal-banner p{font-size:var(--type-h4)}.rehearsal-banner .beta-badge{font-size:12px;padding:5px}.progress-track{padding:21px 0;gap:8px}.progress-track li{flex-direction:column;gap:6px;position:relative;font-size:var(--type-h4);flex:1;text-align:center}.progress-track li:last-child{flex:1}.progress-track li:after{position:absolute;left:calc(50% + 21px);top:12px;width:calc(100% - 25px)}.progress-track strong{white-space:normal;line-height:1.3;min-height:22px}.room-grid{grid-template-columns:minmax(0,1fr);gap:var(--layout-section-gap)}.video-stage{aspect-ratio:4 / 3}.remote-placeholder{padding:55px 55px 85px}.remote-placeholder h2{font-size:var(--type-h3)}.video-topline{top:17px;left:18px;right:18px}.remote-nameplate{left:14px;bottom:16px;font-size:12px;max-width:60%;flex-wrap:wrap;gap:5px}.local-preview{width:25%;right:14px;bottom:13px}.document-panel{margin-top:16px}.document-content{padding:20px}.paper{min-height:0;padding:25px}.paper pre{font-size:var(--type-h4)}.notary-buttons{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.preflight-actions{flex-direction:row}.preflight-actions .button{font-size:12px;flex:1}.privacy-line{font-size:var(--type-h4)}.verification-panel .outline-badge{white-space:nowrap}.status-panel p{font-size:var(--type-h4)}.product-label>span:not(.beta-badge){display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(max-width:380px){.hero-ctas{flex-direction:column}.welcome h1{font-size:var(--type-h1-compact)}.header-actions{gap:10px}.control-button{font-size:var(--type-h4);padding:9px}.session-heading h1{font-size:var(--type-h2)}.session-actions .button{font-size:12px}.remote-placeholder h2{font-size:var(--type-h3)}.notary-buttons{grid-template-columns:minmax(0,1fr)}}

/* All supporting copy remains readable at narrow widths. Controls retain touch targets. */
button,a.button{min-height:44px}.language-toggle .mini-seg-btn{min-width:44px;min-height:44px}.document-tabs button{min-height:44px}.product-label{flex-wrap:wrap}.experience-card-head{flex-wrap:wrap;row-gap:10px}.local-preview{min-width:130px}.progress-track{align-items:flex-start}.progress-track li{align-items:flex-start}.progress-track strong{white-space:normal}.progress-track li>span{flex-shrink:0}.paper pre{font-size:var(--type-h4)}.paper-topline{gap:12px}.paper-topline>span{font-size:12px}.paper-footer{gap:15px}.document-panel .eyebrow{font-size:12px}.eyebrow{line-height:1.7}.verification-panel .outline-badge{white-space:normal}.remote-placeholder{padding-bottom:150px}.remote-placeholder h2{font-size:var(--type-h3)}.preflight-actions{flex-wrap:wrap}.hero-ctas .button{font-size:14px}.consent-line{font-size:var(--type-h4)}.session-actions .button{font-size:12px}.beta-badge{font-size:12px}.remote-nameplate{max-width:60%;flex-wrap:wrap}.remote-nameplate .outline-badge{font-size:12px}.floating-label{font-size:12px}.principles h2{font-size:var(--type-h4)}.principles p{font-size:13px}.connection-chip{font-size:12px}.session-heading .eyebrow{font-size:12px}.media-toolbar{gap:10px}.control-button{min-width:44px}.header-actions{gap:12px}
@media(max-width:1050px){.progress-track{gap:12px}.progress-track li{flex-direction:column;align-items:flex-start;gap:8px;font-size:var(--type-h4);position:relative}.progress-track li:after{position:absolute;left:36px;right:0;top:12px}.progress-track li:last-child{flex:1}.remote-placeholder{padding-left:25px;padding-right:25px}.media-controls{flex-wrap:wrap}.notary-buttons{grid-template-columns:minmax(0,1fr)}.hero-description{font-size:16px}}
@media(max-width:760px){.header-actions{gap:0}.product-label{font-size:12px}.session-heading{flex-wrap:wrap}.session-heading h1{max-width:none;font-size:var(--type-h2)}.session-actions{flex-direction:row;width:100%}.session-actions .button{flex:1}.progress-track{gap:8px}.progress-track li{font-size:var(--type-h4);align-items:center;gap:7px}.progress-track li:after{left:calc(50% + 17px);width:calc(100% - 22px);right:auto}.progress-track strong{font-size:var(--type-h4)}.progress-track li>span{width:25px;height:25px;font-size:12px}.rehearsal-banner{flex-wrap:wrap}.rehearsal-banner p{font-size:var(--type-h4)}.rehearsal-banner .beta-badge{font-size:12px}.remote-placeholder{padding:75px 30px 145px}.remote-placeholder p{font-size:var(--type-h4)}.connection-chip{max-width:72%;text-align:left}.local-preview{min-width:115px}.local-name{font-size:12px}.local-placeholder{font-size:12px}.remote-nameplate{max-width:55%;font-size:12px;left:12px;bottom:18px}.remote-nameplate .outline-badge{font-size:12px}.media-toolbar{padding:10px;align-items:center}.media-controls{gap:7px;flex-wrap:nowrap}.control-button{flex-direction:column;gap:3px;padding:6px 9px;font-size:var(--type-h4)}.media-toolbar>.button{font-size:12px;min-width:62px}.preflight-actions{flex-direction:column}.preflight-actions .button{font-size:13px;flex:1}.notary-buttons{grid-template-columns:minmax(0,1fr)}.notary-buttons .button{font-size:13px}.document-content{padding:15px}.paper{padding:20px;min-height:0}.paper pre{font-size:var(--type-h4)}.paper-subtitle,.paper-footer{font-size:12px}.digest-block>.small,.digest-block code{font-size:var(--type-h4)}.privacy-line{font-size:var(--type-h4)}.document-tabs button{font-size:13px}.ceremony-panel>.small{font-size:13px}.verification-panel p{font-size:var(--type-h4)}.beta-note p{font-size:12px}.hero-description{font-size:16px}.brand{--lockup-tile:26px}.product-label .beta-badge{font-size:12px}}
@media(max-width:380px){.welcome h1{font-size:var(--type-h1-compact)}.session-heading h1{font-size:var(--type-h2)}.media-toolbar{gap:7px;padding:8px}.control-button{font-size:var(--type-h4);padding:7px 8px}.media-controls{gap:5px}.remote-nameplate{max-width:49%;font-size:12px}.paper{padding:18px}.paper-topline>span{font-size:12px;letter-spacing:.5px}}

@media(max-width:760px){.progress-track strong{font-size:var(--type-h4);overflow-wrap:normal}.progress-track{column-gap:5px}.progress-track li{font-size:var(--type-h4)}.header-actions{margin-left:auto}.hero-ctas a{width:auto}.document-tabs{gap:20px}}

/* Keep the human conversation visible while participants read and sign. */
.video-column{align-self:stretch}.conference-surface{position:sticky;top:16px;z-index:4;border-radius:var(--radius-lg);box-shadow:var(--shadow-sticky);background:var(--surface)}.network-notice{margin-top:14px}
@media(max-width:760px){.conference-surface{position:relative;top:auto}.entered .conference-surface{position:sticky;top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);margin-left:-5px;margin-right:-5px}.entered .video-stage{min-height:200px;height:29svh;max-height:245px;border-radius:0;aspect-ratio:auto}.entered .video-topline{top:10px;left:13px;right:13px}.entered .video-brand{font-size:20px}.entered .connection-chip{font-size:12px;padding:4px 7px}.entered .local-preview{width:85px;min-width:85px;right:10px;bottom:10px;max-height:76px}.entered .local-name{font-size:12px}.entered .local-placeholder{font-size:12px;gap:1px}.entered .local-placeholder>span:first-child{font-size:17px}.entered .remote-nameplate{left:10px;bottom:10px;max-width:65%;font-size:12px;padding:5px 8px}.entered .remote-nameplate .outline-badge{display:none}.entered .remote-placeholder{padding:50px 35px 70px}.entered .presence-glyph{display:none}.entered .remote-placeholder h2{font-size:var(--type-h4)}.entered .remote-placeholder p{font-size:12px;line-height:1.5;margin-top:6px;max-width:270px}.entered .media-toolbar{padding:7px 10px}.entered .control-button{flex-direction:row;font-size:12px;min-height:44px;gap:5px;padding:7px}.entered .control-icon{font-size:15px}.entered .media-controls{gap:5px}.entered .media-toolbar>.button{font-size:12px}.entered .ceremony-column{position:relative;z-index:1}.entered .status-panel{margin-top:18px}}
@media(max-width:380px){.entered .control-button{flex-direction:column;gap:0;min-width:44px;padding:4px}.entered .media-toolbar{padding:6px 8px}.entered .video-stage{height:27svh;min-height:190px}.entered .remote-placeholder{padding-right:25px;padding-left:25px}.entered .remote-nameplate{max-width:62%}}
/* Clip, rather than merely offset, the unfocused skip link. This also avoids
   off-viewport fixed content appearing in full-document screenshots. */
.skip-link{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link:focus{clip-path:none;width:auto;height:auto;overflow:visible}

/* Brand alignment: the signing room shares Nota's blue-teal system. The
   signal uses the light blue brand accent so the mark is recognizable without
   a black ring or an accidental green cast. Keep these tokens local: signature.css
   is a standalone entry point and cannot inherit the marketplace stylesheet.

   The RAMP below is the ADR 0048 ramp, copied step for step from
   apps/web/public/styles.css. Copied, because this file cannot import it — but
   copied under the SAME names, so every brand step in this room is greppable
   as `--nota-blue-*` exactly like the carnet and the console, and no brand
   value is retyped as a bare hex in a role below. */
:root {
  color-scheme: dark;
  --nota-blue-50: #ebf1f5;
  --nota-blue-100: #e5eef3;
  --nota-blue-200: #c8dbe3;
  --nota-blue-300: #a7c1cd;
  --nota-blue-400: #78a9bf;
  --nota-blue-500: #407598;
  --on-accent: #ffffff; /* text on the signal colour (the QUÉBEC badge) — white in both rooms */
  --nota-blue-600: #386888;
  --nota-blue-700: #386888;
  --nota-blue-800: #274a62;
  --nota-blue-900: #264961;
  --nota-blue-950: #101b26;
  /* Channel-only copies — rgb() cannot take a hex var. */
  --nota-blue-400-rgb: 120 169 191;
  --nota-blue-500-rgb: 64 117 152;
  --nota-blue-700-rgb: 56 104 136;
  --nota-blue-950-rgb: 16 27 38;
  /* Vibrant service accents — the purple, orange, blue that catch the eye. */
  --svc-refinancement: #78a9bf;
  --svc-financement: #818cf8;
  --svc-testament: #f79009;
  --svc-procuration: #c4a7ff;
  --accent-warm: #f79009;
  --accent-purple: #c4a7ff;
  --accent-blue: #818cf8;

  /* Canvas — same midnight foundation as the carnet (styles.css dark block). */
  --bg: #14181d;
  --surface: #1b2026;
  --surface-inset: #222830;
  --surface-hover: #29313a;
  --surface-raised: #222830;
  --surface-soft: #29313a;
  --ink: #f4f8fa;
  --ink-muted: #afc2cf;
  --subtitle-ink: #f4f8fa;
  --faint: var(--nota-blue-400);
  --border: #37424e;
  --border-strong: #536273;
  /* Brand mapping — same ramp steps as styles.css dark theme. */
  --brand: var(--nota-blue-500);
  --brand-bright: var(--nota-blue-400);
  --brand-solid: var(--nota-blue-500);
  --brand-ink: #061c2a;
  --brand-hover: var(--nota-blue-400);
  --brand-word-ink: var(--ink);
  --paper: #ffffff;
  --paper-ink: #173b52;
  --danger: #f97066;
  --danger-bg: #3b2329;
  --gold: var(--brand-bright);
  --signal: var(--brand-bright);

  /* Motion — the three brand rungs and two named curves (brand guidelines §6). */
  --motion-fast: 150ms;
  --motion-ui: 220ms;
  --motion-enter: 320ms;
  --ease-ui: cubic-bezier(.22, 1, .36, 1);
  /* Le ressort. UNE seule courbe de dépassement, et elle est nommée : le point
     de contrôle 1.56 fait passer la transformation AU-DELÀ de sa cible avant de
     revenir. Réservée à ce qui se pose (la graine de voix, l'orbe qui écoute) —
     jamais à une couleur, jamais à une opacité, qui n'ont pas de « au-delà ».
     Tout le reste lit --ease-ui (guide §6.3 principe 2). */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Video chrome stays a dark room in BOTH themes. */
  --video-bg: var(--nota-blue-950);
  --video-surface: #0f2030;
  --video-surface-soft: #132b3f;
  --video-ink: var(--nota-blue-100);
  --video-muted: #afc2cf;
  --video-signal: var(--nota-blue-400);
  --video-glow: rgb(var(--nota-blue-700-rgb) / .31);
  --video-wash: rgb(19 43 63 / .53);
  --chip-bg: rgb(var(--nota-blue-950-rgb) / .85);
  --overlay: rgb(6 28 42 / .8);
  --glow: rgb(var(--nota-blue-500-rgb) / .12);
  --paper-rule: #d4d5d6;
  --paper-muted: #526b78;
  /* Shadows — brand 4-tier dual-layer scale (dark = pure black, §7.2). */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .2), 0 4px 12px -8px rgb(0 0 0 / .3);
  --shadow: 0 2px 6px -3px rgb(0 0 0 / .2), 0 16px 36px -20px rgb(0 0 0 / .5);
  --shadow-lg: 0 20px 40px -12px rgb(0 0 0 / 0.6);
  --shadow-brand: 0 6px 18px -8px rgb(0 0 0 / .4);
  --shadow-paper: 0 4px 20px rgb(0 0 0 / .06);
  --shadow-sticky: 0 12px 28px rgb(0 0 0 / .19);
  --shadow-hover: 0 5px 14px rgb(0 0 0 / .25);
  --shadow-hover-lg: 0 8px 24px rgb(0 0 0 / .3);
}

html[data-theme=light] {
  color-scheme: light;
  --subtitle-ink: #000000;
  /* Neutral greys, as styles.css --canvas-* (owner, 2026-10-03: no light-blue
     ground; fonds-neutres.test.mjs). */
  --bg: #f3f4f5;
  --surface: #fbfdfd;
  --surface-inset: #eeeff0;
  --surface-hover: #e9eaeb;
  --surface-raised: #ffffff;
  --surface-soft: #eeeff0;
  --ink: #173b52;
  --ink-muted: #526b78;
  --faint: #607986;
  --border: #d4d5d6;
  --border-strong: #bebfc0;
  --brand: var(--nota-blue-600);
  --brand-solid: var(--nota-blue-600);
  --brand-bright: var(--nota-blue-500);
  --brand-ink: #ffffff;
  --brand-hover: var(--nota-blue-800);
  --brand-word-ink: var(--ink);
  --paper: #fffef8;
  --paper-ink: #173b52;
  --danger: #b42318;
  --danger-bg: #ffe4e1;
  --gold: var(--brand-bright);
  --signal: var(--brand-bright);
  /* Vibrant service accents for light theme — strong and eye-catching. */
  --svc-refinancement: #0ea5e9;
  --svc-financement: #6366f1;
  --svc-testament: #f59e0b;
  --svc-procuration: #a855f7;
  --accent-warm: #f59e0b;
  --accent-purple: #a855f7;
  --accent-blue: #6366f1;
  /* The video chrome stays a dark room in BOTH themes, so it is the midnight
     canvas — the same one the dark theme's --bg is. It used to be #101820
     here and #101b26 above: one role, two midnights on one surface. */
  --video-bg: var(--nota-blue-950);
  --video-surface: #0f2030;
  --video-surface-soft: #132b3f;
  --video-ink: var(--nota-blue-100);
  --video-muted: #afc2cf;
  --video-signal: var(--nota-blue-300);
  --video-glow: rgb(var(--nota-blue-700-rgb) / .31);
  --video-wash: rgb(19 43 63 / .53);
  --chip-bg: rgb(var(--nota-blue-950-rgb) / .85);
  --overlay: rgb(6 28 42 / .8);
  --glow: rgb(var(--nota-blue-500-rgb) / .12);
  --paper-rule: #d4d5d6;
  --paper-muted: #526b78;
  /* Shadows — brand 4-tier dual-layer scale (light = ink-tinted, §7.2). */
  --shadow-sm: 0 1px 2px rgb(16 27 38 / .04), 0 4px 12px -8px rgb(16 27 38 / .12);
  --shadow: 0 2px 6px -3px rgb(16 27 38 / .07), 0 16px 36px -20px rgb(16 27 38 / .2);
  --shadow-lg: 0 24px 50px -16px rgb(var(--nota-blue-700-rgb) / 0.24);
  --shadow-brand: 0 6px 18px -8px rgb(var(--nota-blue-700-rgb) / .24);
  --shadow-paper: 0 4px 20px rgb(16 27 38 / .06);
  --shadow-sticky: 0 12px 28px rgb(16 27 38 / .19);
  --shadow-hover: 0 5px 14px rgb(16 27 38 / .10);
  --shadow-hover-lg: 0 8px 24px rgb(16 27 38 / .08);
}

/* The lockup (exploration 01 « Monogramme lié ») is the carnet's: signature.html
   inlines index.html's #nota-logomark / #nota-wordmark once in the hidden
   .svg-defs, and every mark on this surface is a <use>. The word is
   fill:currentColor, so the header carries it in brand blue and the in-stage,
   on-paper and footer marks take the ink of the line they sit on. Sizes keep
   the boxes the typeset « nota. » occupied (35 / 30 / 26 px in the header,
   25 px on stage and paper, 24 px in the footer); the phone bands live in the
   minified media rules above. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Lockup geometry — the same custom properties as the carnet's styles.css
   (ADR 0048), read from the ratios the GENERATED block of signature.html emits
   (sync-brand-foundations.mjs), never recopied: the literals that stood here
   had drifted (the old master's 2.500630517, a .24 badge gap), and the ratio
   is the one this sheet paints — the stage and paper logos were letterboxed
   into a 2.5:1 box, their N at 21 px for a 25 px tile. Each root sets its
   tile; footer-brand-alignment.test.mjs refuses a literal in this rule. */
.brand, .video-brand, .paper-brand, .footer-brand {
  --lockup-tile: var(--logo-tile);
  --lockup-logo-height: calc(var(--lockup-tile) * var(--logo-height-ratio));
  --lockup-logo-ratio: var(--logo-ratio);
  --lockup-word: calc(var(--lockup-tile) * var(--logo-word-ratio));
  --lockup-gap: calc(var(--lockup-tile) * var(--logo-gap-ratio));
  --lockup-badge-gap: calc(var(--lockup-tile) * var(--logo-badge-gap-ratio));
  --lockup-badge-size: max(var(--logo-badge-min), calc(var(--lockup-tile) * var(--logo-badge-size-ratio))); /* Québec remains readable beside the compact wordmark. */
}
.video-brand, .paper-brand { --lockup-tile: 25px; }
.brand-logo-svg { display: block; height: var(--lockup-logo-height); width: calc(var(--lockup-logo-height) * var(--lockup-logo-ratio)); flex: none; }
.paper-brand { background: var(--header-bg); padding-inline: var(--space-4); border-radius: var(--radius); }
.footer-brand { --lockup-tile: 24px; }
.brand-lockup,
.video-brand,
.paper-brand,
.footer-brand { display: inline-flex; align-items: center; gap: var(--lockup-gap); line-height: 1; }
.brand-lockup { color: var(--brand); }
.brand-sub { color: var(--header-badge-ink, var(--nota-blue-950)); font-weight: 600; font-size: var(--lockup-badge-size); text-transform: uppercase; letter-spacing: .1em; padding: .3em .42em; background: var(--header-badge-bg, var(--nota-blue-100)); border-radius: var(--radius-xs); }
/* Semantic interaction palette, shared with the public application. */
:root {
  --action-accent: var(--accent-blue);
  --action-surface: var(--surface);
  --action-text: var(--ink);
}
:root {
  --action-ink: color-mix(in srgb, var(--action-accent) 60%, var(--action-text));
  --action-tint: color-mix(in srgb, var(--action-accent) 12%, var(--action-surface));
  --action-tint-strong: color-mix(in srgb, var(--action-accent) 20%, var(--action-surface));
  --ring: var(--action-ink);
}
.official-signature > span { color: var(--signal); }
.signal-dot { background: var(--accent-warm); }
/* Aucun aplat sur un bouton (propriétaire, 2026-09-12) : la marque et la
   graisse portent l’action, le contour la cadre. */
.primary { background: transparent; color: var(--action-ink); border-color: var(--action-ink); font-weight: 700; }
.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible { outline-color: var(--action-ink); }

.document-panel [role='tabpanel']:focus-visible {
  outline: var(--space-1) solid var(--action-ink);
  outline-offset: calc(0px - var(--space-2));
}

/* The component rules on line 1 (the minified sheet) read the tokens above
   directly — media surfaces on --video-*, the document on --paper-*, plates and
   veils on --chip-bg / --overlay. No colour literal lives outside the two token
   blocks; keep it that way (brand inventory, 2026-09-11). */

/* Quiet motion for the autonomous signing room. Keep movement short and
   purposeful so the interface feels responsive without competing with the
   document or the conversation. */
button.button,
a.button,
.control-button,
.header-auth-link,
.language-toggle,
.document-tabs button {
  transition:
    transform var(--motion-fast) var(--ease-ui),
    background-color var(--motion-fast) var(--ease-ui),
    border-color var(--motion-fast) var(--ease-ui),
    box-shadow var(--motion-fast) var(--ease-ui),
    color var(--motion-fast) var(--ease-ui),
    filter var(--motion-fast) var(--ease-ui);
}

:where(.button, .control-button, .header-auth-link):is(:hover, :focus-visible):not(:disabled) {
  background: var(--action-tint); color: var(--action-ink); border-color: var(--action-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

:where(.button, .control-button, .header-auth-link):active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

:where(.experience-card, .document-panel, .status-panel, .preflight-panel,
  .verification-panel, .ceremony-panel, .rehearsal-banner, .paper) {
  transition:
    transform var(--motion-ui) var(--ease-ui),
    border-color var(--motion-ui) var(--ease-ui),
    box-shadow var(--motion-ui) var(--ease-ui),
    background-color var(--motion-ui) var(--ease-ui);
}

:where(.experience-card, .document-panel, .status-panel, .preflight-panel,
  .verification-panel, .ceremony-panel):hover {
  border-color: var(--border-strong, var(--border));
  box-shadow: var(--shadow-hover-lg);
}

.document-tabs button[aria-selected=true],
.progress-track li,
.progress-track li > span,
.connection-chip,
.check-indicator,
.remote-nameplate,
.local-placeholder,
.status-panel-icon {
  transition:
    color var(--motion-ui) var(--ease-ui),
    background-color var(--motion-ui) var(--ease-ui),
    border-color var(--motion-ui) var(--ease-ui),
    opacity var(--motion-ui) var(--ease-ui),
    transform var(--motion-ui) var(--ease-ui);
}

@keyframes signature-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signature-hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signature-state-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

#main > .welcome {
  animation: signature-page-in var(--motion-enter) var(--ease-ui) both;
}

.welcome-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: signature-hero-in var(--motion-enter) var(--ease-ui) 40ms both;
}

@media (max-width: 760px) {
  .header-actions { gap: 8px; }
  .header-actions #theme-toggle { max-width: 72px; padding-inline: 4px; line-height: 1.25; }
  .language-toggle.mini-seg { height: 44px; flex-shrink: 0; }
}

@media (max-width: 480px) {
  .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

.experience-card {
  animation: signature-hero-in var(--motion-enter) var(--ease-ui) 90ms both;
}

#main > .workspace:not([hidden]) {
  animation: signature-page-in var(--motion-enter) var(--ease-ui) both;
}

:where(#remote-nameplate, #verification-panel, #reconnect-button,
  #notary-controls, #signing-controls, #signature-receipts, #receipt-button):not([hidden]) {
  animation: signature-state-in var(--motion-ui) var(--ease-ui) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  :where(.button, .control-button, .header-auth-link):hover:not(:disabled),
  :where(.button, .control-button, .header-auth-link):active:not(:disabled),
  :where(.experience-card, .document-panel, .status-panel, .preflight-panel,
    .verification-panel, .ceremony-panel):hover {
    transform: none !important;
  }
}

/* Identity panel buttons — same outline vocabulary as .primary / .secondary,
   scoped to the class names the HTML already uses (§8.2: no solid fills). */
.btn-primary {
  background: transparent;
  color: var(--action-ink);
  border: 1px solid var(--action-ink);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 12px;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-fast) var(--ease-ui),
    border-color var(--motion-fast) var(--ease-ui),
    color var(--motion-fast) var(--ease-ui);
}
.btn-primary:is(:hover, :focus-visible):not(:disabled) {
  background: var(--action-tint);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size:var(--type-h4);
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-fast) var(--ease-ui),
    border-color var(--motion-fast) var(--ease-ui),
    color var(--motion-fast) var(--ease-ui);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
}

/* Nota production type scale: the beta keeps the same hierarchy without
   oversized display text on laptop and mobile screens. */
h2 { line-height: var(--type-h2-lh); }

/* Touch: the wordmark link and the language toggle reach 44px on a coarse pointer (2026-09-11 audit: 53×36 and 36×44). */
@media (pointer: coarse) {
  .brand, .language-toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* One recipe for every band on the page: the same left and right content
   edge as the shared header, at every viewport.
   Until 2026-09-25 the measure was paid for by the RAIL: at `--layout-width`
   (2 200 px) each of the entry's two columns ran ~110 characters, so the room
   took a 1 280 px rail of its own — and floated 262 px inside a header whose
   gutter is 40 px. The owner asked for the margin back (« same margin left and
   right », 2026-09-26), so the measure moved to where it belongs: `--room-measure`
   on the prose, the brand guide's own lever (§4.4 item 1). The rail is now the
   site's, and the workspace keeps the same one, so the room does not widen
   under the visitor who signs in. */
:root { --room-rail: var(--layout-width); --room-measure: 62ch; }
.welcome, .workspace {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--room-rail);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.welcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Les deux colonnes ont la même hauteur, et le mou de l'écran se loge dans
     leurs intervalles — jamais sous un bouton vide (propriétaire, 2026-09-27 :
     « gap in between them AND BIG EMPTY SECTIONS »). La salle est une scène
     plein écran : à 1 920 × 1 080 le héros a ~200 px de plus que son contenu,
     et ce surplus réapparaissait en bande de 163 px sous les deux colonnes.
     Il est donc réparti dans les intervalles de la carte (`.why-inner`) et
     absorbé par le pied de la colonne gauche (`.hero-ctas`), ce qui fait finir
     les deux colonnes sur la même ligne et le héros sur son contenu. */
  align-items: stretch;
  flex: 1 1 auto;
  padding-block: var(--layout-content-top) var(--layout-section-gap);
  column-gap: clamp(32px, 4vw, 56px);
}

.workspace { padding-block: var(--layout-section-gap); }

/* In the narrow two-column room, the title still identifies the remote
   participant. The decorative presence glyph yields room to the self view. */
@media (min-width: 761px) and (max-width: 900px) {
  .workspace:not(.entered) .presence-glyph { display: none; }
}

/* La salle est une scène plein écran (propriétaire, 2026-09-25 : « optimize
   the width and height »). Le contenu s'arrêtait 58 px au-dessus du bord
   d'un viewport de 941 px — bande de fond sous le pied de page, héros
   collé au haut. Le corps devient colonne, le main prend le mou : le pied
   se pose au bord bas à toute hauteur, et l'écran court roule sans force.
   Le bandeau d'entrée s'ouvre EN HAUT, comme chaque page du site — le
   centre vertical faisait une bande vide au-dessus du héros (propriétaire,
   2026-09-27 : « Too much padding top for body »). */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Le héros est le TITRE de la page : il prend le rang 1 de l'échelle. Le
   cartouche du rail (« La signature à distance… ») est un h2 ; les deux
   étaient écrits à la taille h2, donc la page s'ouvrait sans hiérarchie. */
.welcome h1 {
  margin: 4px 0 0;
  font-size: var(--type-h1);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  color: var(--subtitle-ink);
}

.hero-description {
  margin: 16px 0 0;
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
}

/* Below the two-column breakpoint the bands keep the rail: only the grid
   collapses, never the gutters. */
@media (max-width: 760px) {
  .welcome {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--layout-section-gap);
  }

  .welcome h1 {
    font-size: var(--type-h1-compact);
  }

  .hero-description {
    font-size: 14px;
  }

  .experience-card {
    width: 100%;
  }
}

/* ═══ Chrome parity pass, standalone pages ════════════════════════════════
   Three families of drift close here.

   1. INK.  `--header-bg` is never redefined for `html[data-theme="light"]`, so
       the bar stays midnight (#101b26) while the page ink flips to #173b52
       (1.9:1) and the muted ink to #526b78 (3.1:1).  The room also spells its
       action tray `.header-actions`, not `.nota-header-actions`, so the shared
       header contract (brand-foundations.css:101) never reaches it.  Each rule
       below is one step MORE specific than the foundation it stands in for —
       the foundation is embedded after this file, so source order alone loses.

   2. OVERLAP.  `.remote-nameplate` was capped by a bare percentage while
       `.local-preview` claimed a percentage *plus* a 130 px floor of the same
       corner: between 320 and 760 px the two chips contested the stage.  The
       stage now owns the reservation and the pip reads its width from it, so
       the nameplate can only ever take what is left.  Same shape for the two
       `.floating-label`s over `.meeting-symbol`, and for the topline chip.

   3. LANGUAGE. The language toggle holds two 44 px controls on the shared
       header rail. Footer layout comes from the shared chrome generator.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Ce que la chrome partagée ne couvre pas encore ─────────────────── */
/* Deux intentions que la chrome partagée ne livre pas, mesurées le 2026-09-23
   sur l'en-tête généré (light et dark, 390/952/1440) contre le carnet, le
   registre de référence :

   - Le CTA d'en-tête se borde à l'encre d'action, comme le « S’inscrire » du
     carnet (.btn-primary : contour, jamais d'aplat — guide §8.2), et non au
     gris de page (`--border`) que portait l'ancienne barre.
   - Les cellules FR|EN (.mini-seg-btn) portaient `--radius-xs` (3 px) par la
     copie locale de la recette du carnet (ligne minifiée,
     `.language-toggle .mini-seg-btn`), qui bat la chrome de base embarquée
     (`.mini-seg-btn`, `--radius-sm`) par sa spécificité. Le carnet est à
     6 px ; la salle s'y range.

   Une spécificité au-dessus des deux recettes de page, jetons seulement. */
[data-nota-surface="signature"] .nota-header .header-auth-cta {
  border: 1px solid var(--action-ink);
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--header-ink);
  font-weight: 700;
}
[data-nota-surface="signature"] .nota-header .language-toggle .mini-seg-btn { border-radius: var(--radius-sm); }

/* ── 2 · Les quatre coins de la scène ───────────────────────────────────── */

/* La scène se lit par coins, décidés le 2026-09-25 (propriétaire : « brand on
   the bottom right as well, as a layer every time ») :
     haut gauche   la puce d'état de la connexion — ce qui change,
     haut droite   l'aperçu local — ce que VOUS envoyez,
     bas  gauche   le cartouche du participant à distance,
     bas  droite   le verrou Nota, calque PERMANENT.
   Le pip tenait le bas-droit et la marque vivait dans la barre du haut, à côté
   de la puce : la marque était la seule chose immobile de la scène et c'est
   exactement là où l'aperçu local passe sa vie. Chaque bord se lit par ces
   jetons; la feuille minifiée (ligne 1) ne pose plus que la géométrie de
   détail, jamais une place. */
[data-nota-surface="signature"] .video-stage {
  --pip-inset: 19px;
  --pip-width: min(175px, max(130px, 24%));
  --topline-inset: 22px;
  --nameplate-inset: 23px;
  --nameplate-gap: 12px;
  --brand-inset: 20px;
  /* UN seul nombre pour le verrou de scène : sa taille de tile et la largeur
     qu'il réserve se lisent ici. La largeur est celle de la boîte que
     `.brand-logo-svg` peint (tile × hauteur × rapport du maître) et non plus
     celle du mot composé d'avant le logo enregistré, trop courte : la plaque
     du nom finissait sous le logo. `.video-brand` prend la taille de ce jeton. */
  --brand-tile: 25px;
  --brand-width: calc(var(--brand-tile) * var(--logo-height-ratio) * var(--logo-ratio));
  --brand-reserve: calc(var(--brand-width) + var(--brand-inset));
}

/* L'aperçu local monte dans le coin opposé au verrou et ne le couvre jamais. */
[data-nota-surface="signature"] .local-preview {
  right: var(--pip-inset);
  top: var(--pip-inset);
  bottom: auto;
  width: var(--pip-width);
  min-width: 0;
  max-width: none;
}

/* La barre du haut ne rend donc sa droite qu'au pip. */
[data-nota-surface="signature"] .video-topline {
  top: var(--topline-inset);
  left: var(--nameplate-inset);
  right: calc(var(--pip-inset) + var(--pip-width) + var(--nameplate-gap));
  justify-content: flex-start;
  gap: var(--control-gap);
}

/* Le cartouche du bas partage sa ligne avec le verrou, non plus avec le pip. */
[data-nota-surface="signature"] .remote-nameplate {
  left: var(--nameplate-inset);
  max-width: calc(100% - var(--nameplate-inset) - var(--brand-reserve) - var(--nameplate-gap));
}

/* The nameplate sits on a midnight chip in both themes, so its outline badge
   reads the video palette, not the page palette. */
[data-nota-surface="signature"] .remote-nameplate .outline-badge {
  border-color: color-mix(in srgb, var(--video-muted) 45%, transparent);
  color: var(--video-muted);
}

/* La marque est un CALQUE de la scène : dernière dans l'ordre du document, elle
   se peint au-dessus de la vidéo, de la phase d'attente et de l'aperçu, hors
   connexion comme en appel et en plein écran. */
[data-nota-surface="signature"] .video-brand {
  --lockup-tile: var(--brand-tile);
  position: absolute;
  right: var(--brand-inset);
  bottom: var(--brand-inset);
  color: var(--video-ink);
}
[data-nota-surface="signature"] .connection-chip { min-width: 0; }
[data-nota-surface="signature"] .connection-chip > span:last-child { overflow-wrap: anywhere; }

/* The floating labels are pinned to the same corners the 88 px symbol owns
   once the card narrows; below the two-column breakpoint they simply join
   the grid instead of hovering over it. */
@media (max-width: 760px) {
  [data-nota-surface="signature"] .video-stage {
    --pip-inset: 14px;
    --pip-width: min(175px, max(115px, 25%));
    --topline-inset: 17px;
    --nameplate-inset: 12px;
    --brand-inset: 14px;
  }

  [data-nota-surface="signature"] .entered .video-stage {
    --pip-inset: 10px;
    --pip-width: 85px;
    --nameplate-inset: 10px;
    --nameplate-gap: 8px;
    --brand-inset: 12px;
  }

  [data-nota-surface="signature"] .experience-visual {
    height: auto;
    gap: var(--control-gap);
    justify-items: center;
    padding-block: 12px;
  }

  [data-nota-surface="signature"] .experience-visual .floating-label {
    position: static;
  }
}

@media (max-width: 380px) {
  [data-nota-surface="signature"] .video-stage { --pip-width: 100px; }
}

/* Dormant identity panel. */
/* `#identity-panel` carried no rule at all: it rendered as bare text inside
   the ceremony column. One recipe with its neighbours. */
.identity-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 21px;
  margin-top: 17px;
}

.identity-panel h2 {
  margin: 0;
  font-size: var(--type-h4);
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
}

.identity-reminder { margin: 10px 0 0; font-size:var(--type-h4); color: var(--ink-muted); }
.identity-report { margin-top: 17px; }
.identity-row { display: flex; justify-content: space-between; gap: var(--control-gap); padding: 8px 0; border-bottom: 1px solid var(--border); font-size:var(--type-h4); }
.identity-label { color: var(--ink-muted); }
.identity-value { font-weight: 600; text-align: right; }
.identity-decision { display: grid; gap: 8px; margin-top: 17px; }
.identity-decision > label { font-size:var(--type-h4); font-weight: 600; color: var(--ink-muted); }
.identity-decision textarea { width: 100%; font: inherit; font-size:var(--type-h4); color: var(--ink); background: var(--surface-inset, var(--surface-soft)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.identity-buttons { display: flex; flex-wrap: wrap; gap: var(--control-gap); }
.identity-result { margin-top: 17px; font-size:var(--type-h4); }

/* ═══ Welcome benefits ═══════════════════════════════════════════════════
   Existing benefits share the entry rail beside the introduction.
   Outlined, never filled — same vocabulary as .secondary / .btn-secondary.
   The "BIENTÔT" badge signals this is the future, not yet live for acts. */

.why-signature {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Le cartouche et l'échelle descendent avec la colonne : sur un écran plus haut
   que le contenu, c'est l'intervalle qui grandit, pas la page qui se vide (voir
   `.welcome`). Deux intervalles seulement — titre / échelle et échelle / note —
   donc chacun reste sous le seuil de bande vide du lens (14 % de l'écran). */
.why-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
}

.why-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.why-head h2 {
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  color: var(--subtitle-ink);
  margin: 0;
}

.bientot-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--accent-purple);
  color: var(--accent-purple);
  background: transparent;
  text-transform: uppercase;
}

/* L'échelle, dans le registre du carnet : « Les trois phases de Nota »
   (styles.css, `.beta-phase`). Marqueur carré chiffré, nom, état en texte nu
   sous le nom, et le montant qui joint un marqueur au suivant. Trois cartes
   bordées sur un rail de 2 200 px répétaient la bordure, l'ombre et l'icône
   pour trois phrases ; l'échelle se lit, la carte ne se lit pas.
   Le montant est TIRETÉ ici : `.rail-draw--goal` du carnet réserve le pointillé
   à ce qui n'est pas encore atteint, et ces trois marches sont exactement ça —
   la section entière porte le badge BIENTÔT. */
.why-rail {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.why-step {
  --rail-x: calc(var(--space-16) / 2 - 1px);
  --rail-top: calc(var(--space-16) + var(--space-2));
  --rail-bottom: var(--space-2);
  position: relative;
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  column-gap: var(--space-8);
  padding-bottom: var(--space-12);
  text-wrap: pretty;
}

.why-step:last-child { padding-bottom: 0; }

.why-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: var(--rail-top);
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--action-ink) 0 var(--space-2), transparent var(--space-2) var(--space-4));
}

.why-step-n {
  grid-row: 1 / 3;
  align-self: start;
  display: grid;
  place-items: center;
  height: var(--space-16);
  border: 2px solid var(--action-ink);
  border-radius: var(--radius-sm);
  background: var(--action-tint);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--action-ink);
}

.why-step-name {
  grid-column: 2;
  padding-top: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h4);
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
  color: var(--ink);
}

.why-step-state {
  grid-column: 2;
  margin: var(--space-2) 0 0;
  max-width: var(--room-measure);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Le cartouche est la NOTE du rail, pas une quatrième marche : la rangée le
   sépare déjà et sa bordure suffit — l'ancienne marge de 24 px le detachait du
   bloc qu'il qualifie. Sa mesure, héritée de la feuille minifiée d'origine,
   s'appliquait au BLOCK : le filet s'arrêtait 200 px avant le bord de la
   colonne, ce qui cassait la symétrie demandée le 2026-09-26. La bordure
   remplit la colonne, la phrase seule est mesurée. */
.why-inner > .beta-note { margin-top: 0; }
.beta-note { max-width: none; }
.beta-note p { max-width: var(--room-measure); }

/* Les deux appels à l'action et leur ligne d'aide forment le pied de la colonne
   gauche : `margin-top: auto` sur le GROUPE — pas sur la ligne d'aide seule —
   descend les boutons épouser la note BÊTA du droit, la ligne restant collée
   sous eux. Pousser la ligne seule laissait un trou de 238 px au-dessus d'elle
   sur un écran de 1 080 px. Sous 761 px il n'y a plus de seconde colonne à
   égaler : la mesure du haut (25 px) reprend. */
@media (min-width: 761px) {
  .hero-ctas { margin-top: auto; }
}

/* Help line under the CTAs — replaces the old auth hint. */
.help-line {
  margin-top: 0;
  font-style: italic;
}

@media (max-width: 760px) {
  .why-head h2 {
    font-size: var(--type-h3);
  }

  /* Sous la bande de deux colonnes l'échelle garde sa gouttière de 16 px ; à
     320 px elle ne laisserait que 240 px de mesure au texte d'état. */
  .why-step { column-gap: var(--space-6); }
}

/* Keep the shared brand rail stable while the room's controls move into a
   disclosure: the room names its own drawer (nota-chrome.mjs chromeHeader,
   APP_HEADER_MENU) and closes it on Échap. It folds on the SITE's laise, not a
   rail of its own — the drawer is the same control as everywhere else, so it
   opens at the same width (brand-foundations.css, `data-nota-navigation`). */
[data-nota-surface="signature"] .signature-menu > summary { color: var(--header-muted); background: transparent; border: 1px solid var(--header-border); border-radius: var(--radius); }
[data-nota-surface="signature"] .signature-menu > summary:is(:hover, :focus-visible) { color: var(--header-ink); background: var(--control-surface); }
.signature-menu > summary svg {
  width: var(--type-body);
  height: var(--type-body);
}
@media (max-width: 1023.98px) {
  [data-nota-surface="signature"] .signature-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-height);
    min-height: var(--control-height);
    cursor: pointer;
    list-style: none;
  }
  .signature-menu > summary::-webkit-details-marker { display: none; }
  [data-nota-surface="signature"] .signature-menu:not([open]) > .nota-header-actions { display: none; }
  [data-nota-surface="signature"] .signature-menu > .nota-header-actions {
    position: absolute;
    top: 100%;
    inset-inline: var(--layout-gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--control-gap);
    margin: 0;
    padding: var(--layout-gutter);
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
}

/* ── 4 · La fenêtre d'aperçu caméra ─────────────────────────────────────── */
/* TWO copies of a recipe, compared rather than each checked (rule 10) :
   styles.css owns `.dlg-x-form` / `.dlg-x` for the carnet, and this sheet owns
   them for the room, which never loads styles.css (ADR 0047 keeps the room to
   its own two files). Same geometry, same tokens, one intent: the popup's first
   child is a 0-height sticky form carrying the ✕ in the dialog's top-right
   corner, so the close control survives scrolling and costs no layout.
   `apps/web/test/signature-room.test.mjs` pins the copy against styles.css. */
.dlg-x-form { position: sticky; top: 0; height: 0; margin: 0; z-index: 6; display: flex; justify-content: flex-end; }
.dlg-x {
  appearance: none; width: 34px; height: 34px; margin: 10px 10px 0 0; flex: none;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, var(--border)); border-radius: var(--radius);
  background: var(--surface-inset); color: var(--ink-muted); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.dlg-x:hover { background: var(--surface-hover); border-color: var(--action-accent); color: var(--ink); transform: scale(1.05); box-shadow: var(--shadow); }
.dlg-x:active { transform: scale(.95); }
/* 34 px is under the touch minimum — fingers get 44 px of it. */
@media (pointer: coarse) { .dlg-x { width: 44px; height: 44px; } }

/* Les deux lignes d'état de la fenêtre, dans le registre des
   `.preflight-checks` de la salle : un glyphe, un nom, rien d'autre. */
.media-checks { padding: 0; margin: 0 0 13px; list-style: none; display: grid; gap: var(--space-3); }
.media-checks li { display: flex; align-items: center; gap: 9px; color: var(--ink-muted); font-size:var(--type-h4); }
.media-checks li > span:last-child { min-width: 0; }
/* Un ✗ est une réponse, pas une attente : `○` reste l'état inconnu
   (`.check-indicator`), `✓` l'acquis (`--brand`), `✗` le refus (--danger). */
.check-indicator.failed { color: var(--danger); }

/* Le ✕ au-dessus de l'aperçu flottait à mi-hauteur entre le titre et la vidéo,
   décalé de 10 px hors du bord droit. La croix est une recette partagée (règle
   10) et ne se retouche pas ici : c'est la RANGÉE du titre qui prend sa hauteur
   tactile, la croix se pose dessus à bord aligné, et le titre s'arrête avant.
   Le `button{min-height:44px}` de la salle étirait déjà le ✕ en 34 × 44 et le
   faisait déborder de 4 px ; carré sur la même bande et sans marge verticale,
   il n'y a plus rien à recentrer, au doigt comme à la souris.
   `apps/web/test/signature-room.test.mjs` mesure les deux rectangles. */
.camera-dialog .panel-heading { min-height: 44px; padding-right: calc(var(--space-16) + var(--space-6)); }
.camera-dialog .dlg-x { width: calc(var(--space-16) + var(--space-6)); height: calc(var(--space-16) + var(--space-6)); margin: 0; }
.camera-dialog .dlg-x > svg { width: var(--space-9); height: var(--space-9); }

/* Le niveau du micro, dans sa ligne d'état : un ✓ dit que la piste est
   autorisée, seule la barre dit qu'elle porte du son. `--level` (0 à 100) est
   posée par signature.js sur le remplissage, image par image. */
.level-meter { position: relative; flex: 1 1 auto; height: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-inset); overflow: hidden; }
.level-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--level, 0) * 1%); background: var(--brand); }

/* Le choix des canaux, par la même fenêtre : un menu par piste. Deux colonnes
   tant que la fenêtre a sa largeur, une seule dans le creux d'un téléphone. */
.device-picks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.device-picks > p { grid-column: 1 / -1; }
.device-pick { display: grid; align-content: start; gap: var(--space-2); color: var(--ink-muted); font-size: var(--type-h4); }
.device-pick-field { position: relative; min-width: 0; }
.device-pick select {
  appearance: none; width: 100%; min-height: 44px; padding: 0 var(--space-12) 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-inset); color: var(--ink); font: inherit; cursor: pointer;
}
.device-pick select:hover:not(:disabled) { border-color: var(--border-strong); }
.device-pick select:disabled { color: var(--faint); cursor: not-allowed; }
.device-pick-field::after {
  content: ""; position: absolute; top: 50%; right: var(--space-6); width: var(--space-2); height: var(--space-2);
  border-right: 1px solid var(--ink-muted); border-bottom: 1px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
@media (max-width: 420px) { .device-picks { grid-template-columns: minmax(0,1fr); } }