/* Démo multirégion : écran d'entrée /demo (option A des maquettes) et écran « Préparation de votre démo… ».
   L'avis « données fictives » est dans demo-notice.css.
   Thème clair unique, comme le reste de l'application. */

:root {
    --dm-bg: #eef2f6;
    --dm-surface: #ffffff;
    --dm-ink: #14202c;
    --dm-muted: #5b6878;
    --dm-line: #d5dde6;
    --dm-navy: #00355f;
    --dm-navy-soft: #e3edf6;
    --dm-sea: #0f7c8c;
    --dm-error: #a1251b;
    --dm-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --dm-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Écran d'entrée ── */
.dm-body { margin: 0; background: var(--dm-bg); color: var(--dm-ink); font: 400 15px/1.55 var(--dm-body); }
.dm-body *, .dm-body *::before, .dm-body *::after { box-sizing: border-box; }
.dm-wrap { max-width: 1040px; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-left, 0px)) 64px max(16px, env(safe-area-inset-right, 0px)); }
.dm-frame { background: var(--dm-surface); border: 1px solid var(--dm-line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 30, 60, .08); }
.dm-screen { padding: 28px clamp(16px, 4vw, 40px) 32px; display: grid; gap: 22px; }
.dm-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dm-brand img { height: 30px; width: auto; display: block; }
.dm-seg { display: inline-flex; border: 1px solid var(--dm-line); border-radius: 999px; padding: 3px; gap: 2px; }
.dm-seg a { font-size: .82rem; font-weight: 600; color: var(--dm-muted); padding: 5px 12px; border-radius: 999px; text-decoration: none; }
.dm-seg a[aria-current="true"] { background: var(--dm-navy); color: #fff; }
.dm-seg a:focus-visible, .dm-cta:focus-visible, .dm-field select:focus-visible, .dm-field input:focus-visible { outline: 3px solid var(--dm-sea); outline-offset: 2px; }
.dm-lead h1 { font: 700 1.45rem/1.2 var(--dm-display); margin: 0 0 4px; color: var(--dm-ink); text-wrap: balance; }
.dm-lead p, .dm-muted { color: var(--dm-muted); margin: 0; }
.dm-alert { border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin: 0; }
.dm-alert--info { background: var(--dm-navy-soft); color: var(--dm-navy); }
.dm-alert--error { background: #fdecea; color: var(--dm-error); border: 1px solid #f4c7c2; }
.dm-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.dm-fieldset legend { font: 700 1rem var(--dm-display); padding: 0; margin-bottom: 10px; }

/* Carte : six tuiles disposées d'ouest en est (grille 6 × 2), deux colonnes sur téléphone. */
.dm-tilemap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(78px, auto)); gap: 8px; }
.dm-tile {
    position: relative; text-align: left; border: 1px solid var(--dm-line); background: var(--dm-navy-soft); color: var(--dm-ink);
    border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; align-content: space-between; gap: 6px; min-width: 0;
}
.dm-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dm-tile b { font: 700 .92rem/1.2 var(--dm-display); overflow-wrap: anywhere; }
.dm-tile small { color: var(--dm-muted); font-size: .74rem; }
.dm-tile:has(input:checked), .dm-tile.is-on { background: var(--dm-navy); color: #fff; border-color: var(--dm-navy); }
.dm-tile:has(input:checked) small, .dm-tile.is-on small { color: #fff; opacity: .85; }
.dm-tile:focus-within { outline: 3px solid var(--dm-sea); outline-offset: 2px; }
.t-arc { grid-column: 2 / 6; grid-row: 1; }
.t-tnl { grid-column: 6; grid-row: 1; }
.t-pac { grid-column: 1; grid-row: 2; }
.t-onp { grid-column: 2 / 4; grid-row: 2; }
.t-qc  { grid-column: 4 / 6; grid-row: 2; }
.t-mg  { grid-column: 6; grid-row: 2; }

/* Résumé de la région choisie : affiché par :has() (sans JavaScript) et par la classe is-on (JavaScript). */
.dm-summary { display: none; border-top: 1px dashed var(--dm-line); padding-top: 16px; margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; font-size: .86rem; }
.dm-summary dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dm-muted); }
.dm-summary dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-summary-wide { grid-column: 1 / -1; }
.dm-summary dd.dm-alert { font-weight: 500; margin-top: 4px; }
.dm-summary--empty { display: grid; }
.dm-form:has(input[name="region"]:checked) .dm-summary--empty { display: none; }
.dm-form:has(input[name="region"][value="pac"]:checked) .dm-summary[data-summary="pac"],
.dm-form:has(input[name="region"][value="onp"]:checked) .dm-summary[data-summary="onp"],
.dm-form:has(input[name="region"][value="arc"]:checked) .dm-summary[data-summary="arc"],
.dm-form:has(input[name="region"][value="qc"]:checked) .dm-summary[data-summary="qc"],
.dm-form:has(input[name="region"][value="mg"]:checked) .dm-summary[data-summary="mg"],
.dm-form:has(input[name="region"][value="tnl"]:checked) .dm-summary[data-summary="tnl"],
.dm-summary.is-on { display: grid; }

/* Province, taxes, point de vue */
.dm-options[hidden] { display: none; }
.dm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; align-items: start; }
.dm-field { display: grid; gap: 6px; font-size: .9rem; }
.dm-field > span { font-weight: 600; }
.dm-field select, .dm-field input {
    font: inherit; padding: 7px 9px; border: 1px solid var(--dm-line); border-radius: 8px; background: var(--dm-surface); color: var(--dm-ink); width: 100%;
}
.dm-taxes { display: flex; flex-wrap: wrap; gap: 10px; }
.dm-taxes .dm-field { grid-template-columns: auto 92px; align-items: center; gap: 8px; }
.dm-taxes .dm-field input { font-variant-numeric: tabular-nums; }
.dm-taxes .dm-field[hidden] { display: none; }
.dm-note { font-size: .8rem; color: var(--dm-muted); margin: 0; }
.dm-radio { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.dm-radio input { margin-top: 4px; accent-color: var(--dm-navy); flex: none; }
.dm-radio small { display: block; color: var(--dm-muted); font-size: .78rem; }

.dm-launch { display: grid; gap: 12px; }
.dm-cta {
    font: 700 1rem var(--dm-body); background: var(--dm-navy); color: #fff; border: 0; padding: 12px 22px; border-radius: 10px;
    cursor: pointer; justify-self: start; min-height: 48px;
}
.dm-cta[disabled] { opacity: .45; cursor: not-allowed; }
.dm-foot { text-align: center; font-size: .8rem; color: var(--dm-muted); margin-top: 18px; }
.dm-foot a { color: inherit; }

/* ── Préparation de votre démo… ── */
.dm-preparing {
    position: fixed; inset: 0; z-index: 2000; background: rgba(238, 242, 246, .96);
    display: grid; place-items: center; padding: 24px 16px; text-align: center;
}
.dm-preparing[hidden] { display: none; }
.dm-preparing-box { max-width: 420px; display: grid; gap: 12px; justify-items: center; }
.dm-preparing h2 { font: 700 1.3rem var(--dm-display); color: var(--dm-navy); margin: 0; }
.dm-preparing p { margin: 0; color: var(--dm-muted); }
.dm-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--dm-navy-soft); border-top-color: var(--dm-navy); }
@media (prefers-reduced-motion: no-preference) {
    .dm-spinner { animation: dm-spin 0.9s linear infinite; }
    .dm-tile { transition: background-color .15s, color .15s; }
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .dm-wrap { padding-top: 16px; }
    .dm-tilemap { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
    .t-arc, .t-tnl, .t-pac, .t-onp, .t-qc, .t-mg { grid-column: auto; grid-row: auto; }
    .dm-cta { justify-self: stretch; }
}