/* Native dialog keeps keyboard focus inside the guide; the page stays visible. */
.tour-dialog { box-sizing:border-box; position:fixed; inset:auto 28px 28px auto; margin:0; width:min(440px,calc(100vw - 40px)); max-height:calc(100dvh - 56px); overflow:auto; padding:26px; border:1px solid var(--border); border-radius:24px; background:var(--bg-elev); color:var(--text); box-shadow:0 24px 90px #0006; font:inherit; animation:tour-enter .2s ease-out; }
.tour-dialog {max-width:none;}
.tour-dialog::backdrop { background:#0003; }
.tour-top {display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.05em; color:var(--text-dim);}
.tour-top button {font:inherit; letter-spacing:0; color:var(--text); background:transparent; border:0; padding:10px 0 10px 8px; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:4px;}
.tour-dialog progress {display:block; appearance:none; width:100%; height:3px; border:0; border-radius:3px; margin:10px 0 24px; background:var(--bg-active); accent-color:var(--blue,#278be6);}
.tour-dialog progress::-webkit-progress-bar {background:var(--bg-active);border-radius:3px;}
.tour-dialog progress::-webkit-progress-value {background:var(--blue,#278be6);border-radius:3px;}
.tour-dialog progress::-moz-progress-bar {background:var(--blue,#278be6);}
.tour-location {color:var(--text-dim);font-size:12px; margin:0 0 10px;}
.tour-dialog h2 {font-size:25px;line-height:1.15;letter-spacing:-.025em;color:var(--text-strong);margin:0 0 18px;}
.tour-dialog p:not(.tour-location),.tour-dialog li {font-size:14px;line-height:1.6;}
.tour-dialog ul {padding-left:19px; margin:18px 0; color:var(--text-dim);}
.tour-dialog li+li {margin-top:10px;}
.tour-dialog footer {display:flex;justify-content:space-between;gap:12px;margin-top:24px;}
.tour-dialog footer button {min-height:44px;}
.tour-action {font:inherit; color:var(--text-strong); background:var(--bg-active); border:1px solid var(--border); border-radius:10px; padding:12px 16px; cursor:pointer;}
.tour-dialog button:focus-visible,.tour-dialog h2:focus-visible {outline:2px solid #278be6;outline-offset:4px;}
.tour-target {outline:2px solid #278be6!important;outline-offset:5px;border-radius:8px;}
@keyframes tour-enter {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.tour-dialog {inset:auto 0 0; width:100%; max-height:75dvh; padding:18px 22px calc(20px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;}.tour-dialog h2{font-size:23px}.tour-dialog progress{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.tour-dialog{animation:none}}
@media(prefers-contrast:more){.tour-dialog{border:2px solid currentColor}.tour-dialog li,.tour-location,.tour-top{color:var(--text)}}

/* ── Profil & Risque : sommaire et invitation à régler son plan ── */
.pf-sommaire {display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px;}
.pf-sommaire button {font:inherit; font-size:12.5px; color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:7px 13px; min-height:34px; cursor:pointer;}
.pf-sommaire button:hover {border-color:var(--accent); color:var(--text-strong);}
.pf-sommaire button:focus-visible {outline:2px solid var(--accent); outline-offset:2px;}
.page h3.sec[id], #sync-heading {scroll-margin-top:18px;}
.page h3.sec[id]:focus {outline:none;}
.pf-a-regler {display:flex; align-items:center; gap:14px; margin:8px 0 10px; padding:13px 16px; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:10px; background:var(--accent-soft); font-size:13.5px; line-height:1.5; color:var(--text);}
.pf-a-regler b {color:var(--text-strong);}
.pf-a-regler .tb-btn {flex:0 0 auto; min-height:36px; border:1px solid var(--border-strong); color:var(--text-strong);}

/* ── Premiers pas : lisible à la première lecture ── */
#premiers-pas .pp-titre {font-size:14px;}
#premiers-pas .pp-sous {font-size:12px;}
#premiers-pas .pp-nom {font-size:13px;}
#premiers-pas .pp-quoi {font-size:12px; line-height:1.5;}
#premiers-pas .pp-cta {font-size:12px;}
#bandeau-demo .tb-btn {font-size:12px; min-height:32px;}
@media (max-width:700px) {#bandeau-demo {font-size:12px;} #bandeau-demo .tb-btn {min-height:40px;}}

/* ── Accueil de la démonstration ── */
.demo-accueil {position:relative; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr); gap:22px 34px; align-items:center; margin:6px 0 24px; padding:24px 26px; border:1px solid var(--border-strong); border-radius:14px; background:radial-gradient(90% 140% at 0% 0%, var(--accent-soft), transparent 65%), var(--bg-card);}
.da-eyebrow {margin:0 0 8px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.demo-accueil h2 {margin:0 0 10px; font-size:21px; line-height:1.25; letter-spacing:-.02em; color:var(--text-strong);}
.da-intro {margin:0 0 10px; font-size:14px; line-height:1.55; color:var(--text);}
.da-etapes {margin:0; padding-left:20px; display:grid; gap:6px; font-size:13.5px; line-height:1.5; color:var(--text-dim);}
.da-etapes b {color:var(--text-strong);}
.da-actions {display:flex; flex-direction:column; gap:8px;}
.da-actions .tb-btn {min-height:40px; font-size:13.5px; justify-content:center; text-align:center;}
.da-actions .tb-btn.ghost {border:1px solid var(--border-strong); color:var(--text);}
.da-fermer {position:absolute; top:10px; right:10px;}
@media (max-width:760px) {.demo-accueil {grid-template-columns:1fr; padding:20px 18px;} .demo-accueil h2 {font-size:18px; padding-right:26px;} .da-actions .tb-btn {min-height:44px;}}

/* ── Lexique ── */
.lexique-dialog {box-sizing:border-box; width:min(640px,calc(100vw - 32px)); max-width:none; max-height:min(760px,calc(100dvh - 48px)); padding:0; border:1px solid var(--border); border-radius:20px; background:var(--bg-elev); color:var(--text); box-shadow:0 28px 100px #0006; font:inherit; overflow:hidden;}
.lexique-dialog[open] {display:flex; flex-direction:column; animation:tour-enter .2s ease-out;}
.lexique-dialog::backdrop {background:#0007;}
.lx-tete {display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 26px 12px;}
.lx-eyebrow {margin:0 0 6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);}
.lx-tete h2 {margin:0; font-size:23px; letter-spacing:-.02em; color:var(--text-strong);}
.lx-sous {margin:6px 0 0; font-size:13.5px; color:var(--text-dim);}
.lx-fermer {flex:0 0 auto; width:40px; height:40px; border-radius:10px; font-size:22px; line-height:1; color:var(--text-dim); background:transparent; border:0; cursor:pointer;}
.lx-fermer:hover {background:var(--bg-hover); color:var(--text);}
.lx-recherche {display:block; padding:4px 26px 14px; border-bottom:1px solid var(--border);}
.lx-recherche input {box-sizing:border-box; width:100%; min-height:42px; padding:9px 12px; font:inherit; font-size:14px; color:var(--text); background:var(--bg-input); border:1px solid var(--border-strong); border-radius:10px;}
.lx-recherche input:focus {outline:none; border-color:var(--accent); box-shadow:var(--glow);}
.lx-liste {margin:0; padding:8px 26px 24px; overflow:auto;}
.lx-terme {padding:14px 0; border-bottom:1px solid var(--border);}
.lx-terme:last-child {border-bottom:0;}
.lx-terme dt {font-size:14.5px; font-weight:650; color:var(--text-strong);}
.lx-terme dd {margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--text);}
.lx-ex {display:block; margin-top:4px; font-size:12.5px; color:var(--text-dim);}
.lx-vide {margin:18px 0; font-size:13.5px; color:var(--text-dim);}
.lexique-dialog button:focus-visible {outline:2px solid var(--accent); outline-offset:3px;}
@media (max-width:640px) {.lexique-dialog {width:100%; max-height:88dvh; margin:auto 0 0; border-radius:20px 20px 0 0;} .lx-tete {padding:20px 18px 10px;} .lx-recherche {padding:4px 18px 12px;} .lx-liste {padding:6px 18px calc(20px + env(safe-area-inset-bottom));}}
@media (prefers-reduced-motion:reduce) {.lexique-dialog[open] {animation:none;}}

/* ── Inscription : les règles avant l'erreur ── */
.login-aide {margin:4px 0 2px; font-size:11.5px; line-height:1.45; color:var(--text-dim);}