/* ==========================================================================
   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:12px}.wide{width:100%}.skip-link{position:fixed;left:16px;top:-70px;z-index:50;background:var(--brand);color:var(--brand-ink);padding:12px}.skip-link:focus{top:12px}.topbar{height:88px;padding-inline:var(--layout-gutter);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:30px}.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}.text-button,.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)}.back-link{border:1px solid var(--border);padding:10px 16px;border-radius:var(--radius)}.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:12px;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:12px;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;min-height:330px;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:12px;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:12px;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:12px;font-weight:550}.status-panel p{font-size:12px;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:12px;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:12px;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:12px;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);min-height:350px;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:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;min-height:95px;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:12px}.digest-block code{font-size:12px;color:var(--ink-muted);overflow-wrap:anywhere;line-height:1.8;letter-spacing:.5px}.verification-panel p{margin-top:13px;font-size:12px}.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:12px}.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:12px;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:12px;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)}.notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;width:480px;z-index:20;border:1px solid var(--brand);border-radius:var(--radius);padding:16px 21px;background:var(--surface-raised);box-shadow:var(--shadow);color:var(--ink);font-size:12px}.notice[data-kind=error]{border-color:var(--danger)}.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 .topbar{height:65px}html:fullscreen .workspace{padding-top:18px}html:fullscreen @media(min-width:1450px){.room-grid{grid-template-columns:minmax(0,1.55fr) minmax(390px,1fr)}.paper{min-height:385px;padding:30px 34px}.paper pre{font-size:12px}.video-stage{aspect-ratio:1.5}}@media(max-width:1050px){.welcome{gap:20px}.header-actions{gap:15px}.topbar{gap:15px}.product-label{gap:10px}.room-grid{gap:15px;grid-template-columns:minmax(0,1.2fr) minmax(310px,1fr)}.video-stage{aspect-ratio:1.1}.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:12px}.progress-track li:after{margin-left:2px}.session-heading h1{font-size:var(--type-h2)}.document-content{padding:15px}.paper{padding:20px;min-height:335px}.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){.topbar{height:auto;min-height:72px;gap:13px}.brand{--lockup-tile:30px}.brand-sub{display:none}.product-label{gap:8px;font-size:12px}.divider{display:none}.header-actions{gap:13px}.back-link{display:none}.text-button{font-size:12px}.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:12px}.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:12px;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:1.3;min-height:295px}.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:12px}.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:12px}.verification-panel .outline-badge{white-space:nowrap}.status-panel p{font-size:12px}.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:12px;padding:9px}.session-heading h1{font-size:var(--type-h2)}.session-actions .button{font-size:12px}.video-stage{min-height:290px}.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}.text-button,.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:12px}.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}.video-stage{min-height:440px}.remote-placeholder h2{font-size:var(--type-h3)}.preflight-actions{flex-wrap:wrap}.hero-ctas .button{font-size:14px}.consent-line{font-size:12px}.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}.topbar{height:auto;min-height:88px}.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:12px;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}.video-stage{min-height:480px}.notary-buttons{grid-template-columns:minmax(0,1fr)}.hero-description{font-size:16px}}
@media(max-width:760px){.topbar{min-height:72px;gap:8px}.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:12px;align-items:center;gap:7px}.progress-track li:after{left:calc(50% + 17px);width:calc(100% - 22px);right:auto}.progress-track strong{font-size:12px}.progress-track li>span{width:25px;height:25px;font-size:12px}.rehearsal-banner{flex-wrap:wrap}.rehearsal-banner p{font-size:12px}.rehearsal-banner .beta-badge{font-size:12px}.video-stage{min-height:415px;aspect-ratio:auto}.remote-placeholder{padding:75px 30px 145px}.remote-placeholder p{font-size:13px}.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:12px}.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:12px}.paper-subtitle,.paper-footer{font-size:12px}.digest-block>.small,.digest-block code{font-size:12px}.privacy-line{font-size:12px}.document-tabs button{font-size:13px}.ceremony-panel>.small{font-size:13px}.verification-panel p{font-size:12px}.beta-note p{font-size:12px}.hero-description{font-size:16px}.header-actions .text-button{font-size:12px}.brand{--lockup-tile:26px}.product-label .beta-badge{font-size:12px}}
@media(max-width:380px){.header-actions .text-button{max-width:50px;line-height:1.25}.topbar .brand-word{display:none}.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:12px;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:12px;overflow-wrap:normal}.progress-track{column-gap:5px}.progress-track li{font-size:12px}.topbar{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.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)}.skip-link{transform:translateY(-150%);top:0}.skip-link:focus{transform:none;top:12px}.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: #c5d8df;
  --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;
  --bg: #eef5f7;
  --surface: #fbfdfd;
  --surface-inset: #e6f0f4;
  --surface-hover: #dcecf2;
  --surface-raised: #ffffff;
  --surface-soft: #e6f0f4;
  --ink: #173b52;
  --ink-muted: #526b78;
  --faint: #607986;
  --border: #c5d8df;
  --border-strong: #a9c3ce;
  --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: #c5d8df;
  --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 five custom properties, with the same ratios, as
   styles.css and admin.css (ADR 0048, design 02 / layout 16); each root sets
   its tile and the word, gaps and badge follow. ux-nav.test.mjs pins the five. */
.brand, .video-brand, .paper-brand, .footer-brand {
  --lockup-tile: 36px;
  --lockup-word: calc(var(--lockup-tile) * .48);
  --lockup-gap: calc(var(--lockup-tile) * .12);
  --lockup-badge-gap: calc(var(--lockup-tile) * .24);
  --lockup-badge-size: max(8px, calc(var(--lockup-tile) * .135)); /* Québec remains readable beside the compact wordmark. */
}
.video-brand, .paper-brand { --lockup-tile: 25px; }
.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-mark-svg { display: block; flex: none; width: var(--lockup-tile); height: var(--lockup-tile); }
.brand-word { display: inline-flex; align-items: center; width: calc(var(--lockup-word) * 91.8 / 28); height: var(--lockup-word); color: var(--brand-word-ink); }
.brand-word-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.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, .topbar, .header-voice-btn {
  --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);
}
.topbar {
  --action-surface: var(--header-bg);
  --action-text: var(--header-ink);
  --control-surface: color-mix(in srgb, var(--header-ink) 12%, var(--header-bg));
}
.header-voice-btn { --action-accent: var(--accent-purple); }
.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); }

/* 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,
.back-link,
.text-button,
.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, .back-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, .back-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 {
  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, .back-link):hover:not(:disabled),
  :where(.button, .control-button, .back-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: 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-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, .text-button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Keep the public beta entrance on the same rail and type rhythm as the
   carnet and the other standalone Nota pages. */
.topbar {
  height: var(--layout-header-height);
  min-height: var(--layout-header-height);
  padding-inline: var(--layout-gutter);
  gap: var(--control-gap);
}

/* One recipe for every band on the page: the same left and right content
   edge as the shared header, at every viewport. */
.welcome, .workspace {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.welcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding-block: var(--layout-content-top) var(--layout-section-gap);
  column-gap: clamp(32px, 4vw, 56px);
}

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

.welcome h1 {
  margin: 4px 0 0;
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-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) {
  .topbar {
    height: auto;
    min-height: 72px;
  }

  .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 · Header ink: AA on midnight, in both themes ─────────────────────── */
[data-nota-surface="signature"] .topbar .product-label { color: var(--header-muted); }
[data-nota-surface="signature"] .topbar .divider { border-left-color: var(--header-border); }

[data-nota-surface="signature"] .topbar .header-actions :is(a, button):not(.tswitch) {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  min-height: var(--control-height);
  color: var(--header-muted);
  font-family: var(--font-sans);
  font-size: var(--type-control);
  font-weight: 600;
  letter-spacing: 0;
}

[data-nota-surface="signature"] .topbar .header-actions :is(a, button):not(.tswitch):hover,
[data-nota-surface="signature"] .topbar .header-actions :is(a, button):not(.tswitch):focus-visible {
  color: var(--header-ink);
}

[data-nota-surface="signature"] .topbar .back-link {
  padding: 0 12px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
}

/* Language shares the header background and the same selected surface as
   the carnet's controls; its touch cells remain at least 44px high. */
[data-nota-surface="signature"] .topbar .language-toggle.mini-seg {
  height: auto;
  padding: 2px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  background: none;
}

[data-nota-surface="signature"] .topbar .language-toggle .mini-seg-btn {
  height: auto;
  border-radius: var(--radius-sm);
  color: var(--header-muted);
}

[data-nota-surface="signature"] .topbar .language-toggle .mini-seg-btn[aria-pressed="true"] {
  color: var(--header-ink);
  border-color: var(--header-border);
  background: var(--control-surface);
}

/* Both header badges take the one badge recipe the carnet uses
   (styles.css:585): a light fill, midnight ink, no border of its own. */
[data-nota-surface="signature"] .topbar .beta-badge,
[data-nota-surface="signature"] .topbar .nav-tab-badge {
  border: 1px solid transparent;
  background: var(--header-badge-bg);
  color: var(--header-badge-ink);
}

[data-nota-surface="signature"] .topbar .nav-tab-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  font-size: var(--logo-badge-min, 9px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

/* ── 2 · Overlaps between 320 and 1280 ─────────────────────────────────── */

/* The stage reserves its own bottom-right corner; nothing else may claim it. */
[data-nota-surface="signature"] .video-stage {
  --pip-inset: 19px;
  --pip-width: min(175px, max(130px, 24%));
  --nameplate-inset: 23px;
  --nameplate-gap: 12px;
}

[data-nota-surface="signature"] .local-preview {
  right: var(--pip-inset);
  width: var(--pip-width);
  min-width: 0;
  max-width: none;
}

[data-nota-surface="signature"] .remote-nameplate {
  left: var(--nameplate-inset);
  max-width: calc(100% - var(--nameplate-inset) - var(--pip-inset) - var(--pip-width) - 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);
}

[data-nota-surface="signature"] .video-topline { gap: var(--control-gap); }
[data-nota-surface="signature"] .video-brand { flex-shrink: 0; }
[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%));
    --nameplate-inset: 12px;
  }

  [data-nota-surface="signature"] .video-topline { left: 14px; right: 14px; }

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

  [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: 12px; color: var(--ink-muted); }
.identity-report { margin-top: 17px; }
.identity-decision { display: grid; gap: 8px; margin-top: 17px; }
.identity-decision > label { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.identity-decision textarea { width: 100%; font: inherit; font-size: 13px; 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: 13px; }

/* ═══ 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;
}

.why-inner {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
}

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

.why-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.why-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  transition:
    border-color var(--motion-ui) var(--ease-ui),
    box-shadow var(--motion-ui) var(--ease-ui);
}

.why-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

.why-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 22px;
  color: var(--brand-bright);
  line-height: 1;
}

.why-card h3 {
  grid-column: 2;
  font-size: var(--type-h4);
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
  color: var(--ink);
  margin: 0;
}

.why-card p {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

/* 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);
  }

  .why-card {
    padding: 20px;
  }
}

@media (max-width: 380px) {
  .why-card {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-card {
    transition: none;
  }
}

/* Voice button in header — matches the carnet's header-voice-btn styling. */
.header-voice-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 44px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--header-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui);
}
.header-voice-btn:is(:hover, :focus-visible) {
  background: var(--action-tint);
  color: var(--action-ink);
  border-color: var(--action-ink);
}
.header-voice-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.header-voice-btn svg {
  flex: none;
  width: var(--type-body);
  height: var(--type-body);
}
.header-voice-label {
  line-height: 1;
}

/* Keep the shared brand rail stable while the room's controls move into a
   disclosure. Voice remains directly reachable on a narrow screen. */
[data-nota-surface="signature"] .topbar.nota-header {
  height: var(--layout-header-height);
  min-height: var(--layout-header-height);
  flex-wrap: nowrap;
  padding-block: 0;
}
[data-nota-surface="signature"] .topbar > .header-voice-btn {
  flex: none;
  margin-left: auto;
}
[data-nota-surface="signature"] .signature-menu { margin-left: 0; }
[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: 1439.98px) {
  [data-nota-surface="signature"] .topbar .product-label { display: none; }
}
@media (max-width: 1279.98px) {
  [data-nota-surface="signature"] .topbar .header-voice-label { display: none; }
  [data-nota-surface="signature"] .topbar > .header-voice-btn {
    width: var(--control-height);
    padding: 0;
    justify-content: center;
  }
  [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);
  }
}