:root {
    --paper: #efe0bc;
    --paper-dim: #b8a482;
    --brass: #b68a49;
    --brass-light: #d5ae6a;
    --wine: #6f1f24;
    --wine-dark: #431419;
    --wood: #2b1a12;
    --wood-2: #1a110d;
    --line: rgba(198, 158, 88, .28);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #120d0a; color: var(--paper); font-family: Georgia, "Times New Roman", serif; }
body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% -10%, rgba(139,83,42,.28), transparent 38%),
        radial-gradient(circle at 88% 10%, rgba(111,31,36,.20), transparent 30%),
        linear-gradient(160deg, #26170f, #100c09 65%);
}
body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; opacity: .12;
    background-image: repeating-linear-gradient(9deg, transparent 0 8px, rgba(255,255,255,.06) 9px, transparent 10px 18px);
}
.page { width: min(720px, 100%); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom)); }
.masthead { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(100deg, rgba(111,31,36,.38), rgba(56,35,22,.55)); box-shadow: 0 12px 32px rgba(0,0,0,.26); }
.seal { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-light); background: rgba(0,0,0,.22); font-weight: 700; }
.masthead span { display: block; color: #9f8b69; font-size: 8px; letter-spacing: .22em; }
.masthead h1 { margin: 2px 0 0; font-size: clamp(18px, 5vw, 25px); line-height: 1; letter-spacing: .045em; color: #f0dfb9; }
.masthead strong { display: block; margin-top: 4px; color: var(--brass-light); font-size: 11px; letter-spacing: .28em; }
.card { position: relative; margin-bottom: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(160deg, rgba(57,37,24,.92), rgba(24,17,13,.96)); box-shadow: 0 14px 38px rgba(0,0,0,.27); overflow: hidden; }
.card::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; background-image: repeating-linear-gradient(93deg, transparent 0 17px, rgba(255,255,255,.09) 18px, transparent 19px 36px); }
.hidden { display: none !important; }
.kicker { display: block; color: #8f7c5e; font-size: 8px; letter-spacing: .18em; }
h2 { margin: 4px 0 8px; color: #ead9b4; font-size: 22px; font-weight: 600; }
p { color: #a99678; font-size: 12px; line-height: 1.55; }
p strong { color: #d6c19b; }
.session-line { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top: 12px; padding-top: 10px; border-top:1px solid var(--line); }
.session-line span { color:#7d705b; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.session-line strong { color:var(--brass-light); font-size:11px; letter-spacing:.12em; }
.video-shell { position: relative; overflow: hidden; width:100%; aspect-ratio: 3/4; max-height: 66vh; border:1px solid rgba(190,151,82,.34); border-radius:7px; background:#090706; }
.video-shell video { width:100%; height:100%; object-fit:cover; background:#090706; }
.camera-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; color:#796d59; text-align:center; background: radial-gradient(circle, rgba(93,59,35,.22), transparent 62%); }
.camera-placeholder .person-icon { font-size:78px; color:#8f7b59; opacity:.7; }
.camera-placeholder strong { color:#aa9878; font-size:14px; }
.camera-placeholder span { max-width:260px; font-size:10px; line-height:1.45; }
.camera-actions { display:grid; gap:8px; margin-top:10px; }
button { min-height:46px; border-radius:6px; border:1px solid rgba(196,158,88,.48); font:inherit; text-transform:uppercase; letter-spacing:.08em; font-size:10px; cursor:pointer; }
button.primary { color:#f1dfb8; background:linear-gradient(180deg, #794035, #54221f); }
button.secondary { color:#d2bf98; background:rgba(83,52,31,.42); }
button.danger { color:#f0c8b4; background:linear-gradient(180deg, #74292a, #4b171b); border-color:rgba(162,74,64,.65); }
button:disabled { opacity:.55; cursor:wait; }
.countdown { position:absolute; inset:0; display:grid; place-items:center; color:#fff1c8; font-size:92px; font-weight:700; text-shadow:0 5px 24px #000; background:rgba(0,0,0,.18); }
.recording-badge { position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:4px; background:rgba(36,10,12,.82); color:#f0d6c4; font-size:8px; letter-spacing:.08em; }
.recording-badge i { width:8px; height:8px; border-radius:50%; background:#c14a3f; animation:pulse 1s infinite; }
.recording-badge span { margin-left:4px; color:#d9b99d; }
@keyframes pulse { 50% { opacity:.35; } }
.send-card label span { display:block; margin-bottom:7px; color:#c6b18d; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.send-card input { width:100%; height:44px; border:1px solid rgba(185,148,82,.30); border-radius:5px; outline:none; padding:0 11px; background:rgba(7,5,4,.34); color:#f1e2c2; font:inherit; font-size:14px; }
.send-card input:focus { border-color:var(--brass); }
.send-card button { width:100%; margin-top:5px; }
.upload-progress { margin-top:10px; display:flex; align-items:center; gap:8px; color:#aa9878; font-size:10px; }
.upload-progress i, .spinner { width:18px; height:18px; border:2px solid rgba(181,145,82,.22); border-top-color:var(--brass-light); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.status-card { text-align:center; padding:28px 18px; }
.status-card .spinner { margin:0 auto 13px; width:30px; height:30px; }
.symbol { width:54px; height:54px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; border:1px solid; font-size:30px; }
.symbol.good { color:#b9c697; border-color:#788958; background:rgba(120,137,88,.12); }
.symbol.bad { color:#d59882; border-color:#9e4940; background:rgba(158,73,64,.12); }
@media (min-width: 650px) { .page { padding-top:28px; } .video-shell { aspect-ratio: 4/3; max-height: 560px; } }

/* --- Page QR depuis le site --- */
.qr-intro { text-align: center; }
.qr-card { text-align: center; }
.qr-loading { min-height: 360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#baa57f; }
.qr-loading .spinner { width:34px; height:34px; }
.qr-paper { width:min(360px, 100%); aspect-ratio:1/1; margin:2px auto 16px; padding:16px; display:grid; place-items:center; border-radius:10px; background:#fffdf7; border:6px solid #d6bd8d; box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(69,43,25,.25); }
#qrCanvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
.qr-status-line { display:flex; align-items:center; gap:11px; width:min(460px,100%); margin:0 auto 12px; padding:12px 13px; text-align:left; border:1px solid var(--line); border-radius:7px; background:rgba(9,6,4,.28); }
.qr-status-line i { width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:#b68a49; box-shadow:0 0 0 4px rgba(182,138,73,.11); }
.qr-status-line i.linked { background:#d5ae6a; }
.qr-status-line i.captured { background:#78915a; box-shadow:0 0 0 4px rgba(120,145,90,.13); }
.qr-status-line i.expired, .qr-status-line i.cancelled { background:#a74940; box-shadow:0 0 0 4px rgba(167,73,64,.13); }
.qr-status-line span, .qr-meta-grid span { display:block; color:#7d705b; font-size:8px; letter-spacing:.12em; }
.qr-status-line strong { display:block; margin-top:3px; color:#e2c994; font-size:13px; }
.qr-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; width:min(460px,100%); margin:0 auto; }
.qr-meta-grid > div { padding:11px 12px; border:1px solid var(--line); border-radius:7px; background:rgba(9,6,4,.22); }
.qr-meta-grid strong { display:block; margin-top:5px; color:#e5c88d; font-size:14px; letter-spacing:.08em; }
.capture-name { width:min(460px,100%); margin:12px auto 0; padding:10px 12px; color:#bdc99d; border:1px solid rgba(120,145,90,.35); border-radius:7px; background:rgba(120,145,90,.10); }
.qr-actions-site { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(460px,100%); margin:13px auto 0; }
.button-link { min-height:46px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid rgba(196,158,88,.48); color:#f1dfb8; background:linear-gradient(180deg,#794035,#54221f); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.help-card ol { margin:12px 0 0; padding-left:20px; color:#b5a17f; font-size:12px; line-height:1.7; }
.small-note { margin-top:13px; padding-top:11px; border-top:1px solid var(--line); color:#7f715c; font-size:10px; }
#qrError button { margin-top:10px; min-width:180px; }
@media (max-width:520px) { .qr-actions-site { grid-template-columns:1fr; } .qr-meta-grid { grid-template-columns:1fr; } .qr-paper { padding:11px; } }