/* Accezio — feuille de style consolidée à partir des maquettes design/*.html (tokens dans :root). Éditer ce fichier, pas les maquettes. */

/* ===== Source : 00-composants.html ===== */
/* =====================================================================
       01. TOKENS — source unique des valeurs visuelles.
       Palette, typographies, rayons et ombres issus de la direction validée.
       Les dimensions propres à cette planche complètent ces tokens.
       Les seuils des @media sont littéraux : var() n'y est pas autorisé.
       Les coordonnées SVG sont des tracés vectoriels, pas des tokens CSS.
       ===================================================================== */
    :root {
      --color-background: #F7F8FA;
      --color-surface: #FFFFFF;
      --color-text: #172B3A;
      --color-muted: #566574;
      --color-navy: #112D43;
      --color-orange: #FF8A3D;
      --color-orange-hover: #F57926;
      --color-orange-soft: #FFF0E5;
      --color-border: #DCE3E9;
      --color-success: #25634C;
      --color-success-soft: #EAF3ED;
      --color-warning: #8A5700;
      --color-warning-soft: #FFF4DB;
      --color-error: #B23D36;
      --color-error-soft: #FBEDEC;
      --color-transparent: transparent;
      --color-overlay: rgb(17 45 67 / 0.42);
      --font-display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
      --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
      --weight-regular: 400;
      --weight-medium: 500;
      --weight-semibold: 600;
      --weight-bold: 700;
      --text-hero: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
      --text-page: clamp(2.25rem, 1.625rem + 2.5vw, 3.5rem);
      --text-section: clamp(1.875rem, 1.4375rem + 1.75vw, 2.75rem);
      --text-card: clamp(1.375rem, 1.3125rem + 0.25vw, 1.5rem);
      --text-lead: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem);
      --text-body: 1rem;
      --text-meta: 0.875rem;
      --text-logo: 1.75rem;
      --text-metric: 2.5rem;
      --line-hero: 1.04;
      --line-page: 1.1;
      --line-section: 1.15;
      --line-title: 1.25;
      --line-lead: 1.5;
      --line-body: 1.6;
      --line-meta: 1.45;
      --tracking-title: -0.03em;
      --tracking-section: -0.025em;
      --tracking-label: 0.08em;
      --radius-control: 0.75rem;
      --radius-card: 1.25rem;
      --radius-pass: 1.5rem;
      --radius-photo: 1.75rem;
      --radius-pill: 9999px;
      --shadow-card: 0 8px 24px rgb(17 45 67 / 0.06);
      --shadow-panel: 0 16px 48px rgb(17 45 67 / 0.10);
      --shadow-header: 0 2px 12px rgb(17 45 67 / 0.04);
      --shadow-focus: 0 0 0 3px var(--color-navy);
      --space-0: 0;
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      --space-32: 8rem;
      --gutter: clamp(1.25rem, 3vw, 3rem);
      --section-space: clamp(3rem, 5vw, 5rem);
      --layout-max: 90rem;
      --site-max: 75rem;
      --sidebar-width: 14rem;
      --content-max: 68rem;
      --copy-max: 40rem;
      --header-height: 5rem;
      --control-height: 3rem;
      --target-min: 2.75rem;
      --icon-size: 1.25rem;
      --icon-large: 2rem;
      --mark-size: 2.25rem;
      --check-size: 1.25rem;
      --qr-min: 10rem;
      --qr-size: 12rem;
      --qr-ratio: 1 / 1;
      --pass-width: 23.4375rem;
      --stroke: 1.75;
      --border-width: 1px;
      --border-heavy: 2px;
      --focus-width: 3px;
      --focus-offset: 3px;
      --progress-height: 0.5rem;
      --progress-value: 66.6667%;
      --chart-height: 8rem;
      --table-min: 43rem;
      --drawer-width: 29rem;
      --modal-width: 30rem;
      --swatch-height: 4.5rem;
      --specimen-height: 24rem;
      --photo-ratio: 3 / 2;
      --skeleton-long: 80%;
      --skeleton-short: 48%;
      --full: 100%;
      --viewport-height: 100dvh;
      --half: 50%;
      --opacity-muted: 0.55;
      --duration: 160ms;
      --duration-spin: 900ms;
      --duration-none: 0s;
      --rotation-full: 360deg;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --layer-header: 10;
      --layer-menu: 20;
      --layer-toast: 30;
    }
/* 02. Base, typographie et accessibilité */
    *, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + var(--space-6)); }
body { margin: var(--space-0); background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--line-body); }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, h4, p, figure, dl, dd { margin: var(--space-0); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-navy); font-weight: var(--weight-semibold); line-height: var(--line-title); text-wrap: balance; }
h1 { font-size: var(--text-page); font-weight: var(--weight-bold); line-height: var(--line-page); letter-spacing: var(--tracking-title); }
h2 { font-size: var(--text-section); line-height: var(--line-section); letter-spacing: var(--tracking-section); }
h3 { font-size: var(--text-card); }
h4 { font-size: var(--text-lead); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: var(--color-transparent); }
button { cursor: pointer; }
a { color: var(--color-navy); text-underline-offset: var(--space-1); }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
svg { display: block; flex-shrink: 0; }
.icon { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.icon--large { width: var(--icon-large); height: var(--icon-large); }
.sprite { position: absolute; width: var(--space-0); height: var(--space-0); overflow: hidden; }
:focus-visible, .is-focus { outline: var(--focus-width) solid var(--color-orange); outline-offset: var(--focus-offset); box-shadow: var(--shadow-focus); }
::selection { color: var(--color-navy); background: var(--color-orange-soft); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: var(--border-width); height: var(--border-width); padding: var(--space-0); margin: calc(-1 * var(--border-width)); overflow: hidden; clip-path: inset(var(--half)); white-space: nowrap; border: none; }
.skip-link { position: fixed; top: var(--space-4); left: var(--space-4); z-index: var(--layer-toast); padding: var(--space-3) var(--space-5); background: var(--color-surface); border-radius: var(--radius-control); transform: translateY(calc(-1 * var(--space-32))); }
.skip-link:focus { transform: none; }
.muted { color: var(--color-muted); }
.meta { font-size: var(--text-meta); line-height: var(--line-meta); }
.eyebrow { font-size: var(--text-meta); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.lead { font-size: var(--text-lead); line-height: var(--line-lead); }
.stack { display: grid; gap: var(--space-4); }
.stack--small { gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.full-width { width: var(--full); }
.numeric { font-variant-numeric: tabular-nums; }
/* 03. En-tête et navigation de la bibliothèque */
    .header { position: sticky; top: var(--space-0); z-index: var(--layer-header); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.header__inner { max-width: var(--layout-max); min-height: var(--header-height); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-navy); text-decoration: none; font-family: var(--font-display); font-size: var(--text-logo); font-weight: var(--weight-bold); letter-spacing: var(--tracking-title); min-height: var(--target-min); }
.brand__mark { width: var(--mark-size); height: var(--mark-size); fill: var(--color-navy); }
.brand__accent { fill: var(--color-orange); }
.header__edition { display: flex; align-items: center; gap: var(--space-3); }
.header__rule { width: var(--border-width); height: var(--space-6); background: var(--color-border); }
.menu-toggle { display: none !important; }
.layout { max-width: var(--layout-max); margin-inline: auto; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { padding: var(--space-10) var(--space-5) var(--space-8) var(--gutter); border-right: var(--border-width) solid var(--color-border); }
.sidebar__inner { position: sticky; top: calc(var(--header-height) + var(--space-8)); display: grid; gap: var(--space-8); }
.nav-list { display: grid; gap: var(--space-1); }
.nav-list a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-muted); font-size: var(--text-meta); border-radius: var(--radius-control); font-weight: var(--weight-medium); }
.nav-list a:hover { background: var(--color-surface); color: var(--color-navy); }
.nav-list a[aria-current="location"] { background: var(--color-orange-soft); color: var(--color-navy); }
.nav-number { font-variant-numeric: tabular-nums; }
.sidebar__note { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-5); }
.main { min-width: var(--space-0); padding: var(--space-12) var(--gutter) var(--space-16); }
.intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-8); align-items: center; padding-bottom: var(--space-12); }
.intro__copy { display: grid; gap: var(--space-5); }
.intro__copy .lead { max-width: var(--copy-max); }
.intro__label { display: flex; align-items: center; gap: var(--space-3); }
.intro__label::before { content: ""; width: var(--space-6); height: var(--border-heavy); background: var(--color-orange); }
.intro__preview { padding: var(--space-6); background: var(--color-navy); border-radius: var(--radius-photo); }
.intro__preview > .meta { color: var(--color-surface); margin-bottom: var(--space-4); }
.mini-pass { background: var(--color-surface); padding: var(--space-5); border-radius: var(--radius-pass); display: grid; gap: var(--space-4); }
.mini-pass__footer { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); }
.section { padding-block: var(--section-space); border-top: var(--border-width) solid var(--color-border); scroll-margin-top: var(--space-6); }
.section__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-5); margin-bottom: var(--space-8); }
.section__number { color: var(--color-muted); font-size: var(--text-meta); padding-top: var(--space-2); font-variant-numeric: tabular-nums; }
.section__head p { color: var(--color-muted); margin-top: var(--space-3); max-width: var(--copy-max); }
.subsection { margin-top: var(--space-8); }
.subsection > h3, .subsection > .spread { margin-bottom: var(--space-5); }
.panel { padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); min-width: var(--space-0); }
.panel--soft { background: var(--color-background); }
.panel--raised { box-shadow: var(--shadow-card); }
.panel__heading { margin-bottom: var(--space-5); }
/* 04. Fondations et échantillons */
    .palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.swatch { overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.swatch__color { height: var(--swatch-height); border-bottom: var(--border-width) solid var(--color-border); }
.swatch__label { padding: var(--space-3); font-size: var(--text-meta); line-height: var(--line-meta); display: grid; gap: var(--space-1); }
.swatch--navy { background: var(--color-navy); }
.swatch--orange { background: var(--color-orange); }
.swatch--background { background: var(--color-background); }
.swatch--surface { background: var(--color-surface); }
.swatch--text { background: var(--color-text); }
.swatch--muted { background: var(--color-muted); }
.swatch--border { background: var(--color-border); }
.swatch--orange-hover { background: var(--color-orange-hover); }
.swatch--orange-soft { background: var(--color-orange-soft); }
.swatch--success { background: var(--color-success); }
.swatch--success-soft { background: var(--color-success-soft); }
.swatch--warning { background: var(--color-warning); }
.swatch--warning-soft { background: var(--color-warning-soft); }
.swatch--error { background: var(--color-error); }
.swatch--error-soft { background: var(--color-error-soft); }
.type-specimen { font-family: var(--font-display); font-size: var(--text-section); letter-spacing: var(--tracking-title); line-height: var(--line-section); color: var(--color-navy); }
.type-specimen--body { font-family: var(--font-body); font-size: var(--text-lead); line-height: var(--line-lead); letter-spacing: normal; }
.token-list { display: grid; gap: var(--space-3); }
.token-list > div { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-3); }
.token-list dt { color: var(--color-muted); }
.token-list dd { text-align: right; font-weight: var(--weight-medium); }
.icon-strip { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-block: var(--space-3); color: var(--color-navy); }
/* 05. Boutons et états — les classes is-* servent aux états figés. */
    .button { min-height: var(--control-height); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); border: var(--border-width) solid var(--color-transparent); border-radius: var(--radius-control); padding: var(--space-3) var(--space-5); font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: var(--line-title); text-decoration: none; transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.button--primary { background: var(--color-orange); color: var(--color-navy); }
.button--primary:hover, .button--primary.is-hover { background: var(--color-orange-hover); }
.button--secondary { background: var(--color-surface); color: var(--color-navy); border-color: var(--color-muted); }
.button--secondary:hover, .button--secondary.is-hover { background: var(--color-background); border-color: var(--color-navy); }
.button--text { background: var(--color-transparent); color: var(--color-navy); }
.button--text:hover, .button--text.is-hover { background: var(--color-orange-soft); }
.button--danger { background: var(--color-error); color: var(--color-surface); }
.button--danger:hover, .button--danger.is-hover { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }
.button:disabled:not(.is-loading) { background: var(--color-border); border-color: var(--color-border); color: var(--color-muted); }
.button.button--text:disabled:not(.is-loading) { background: var(--color-transparent); border-color: var(--color-transparent); color: var(--color-muted); }
.button.is-loading { cursor: wait; }
.button--icon { width: var(--control-height); padding: var(--space-3); flex-shrink: 0; }
.button-board { display: grid; gap: var(--space-6); }
.button-family { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(5, minmax(0, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-6); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.button-family__title { align-self: center; }
.button-family__title strong { display: block; font-weight: var(--weight-semibold); }
.sample { min-width: var(--space-0); display: grid; gap: var(--space-3); }
.sample__label { font-size: var(--text-meta); color: var(--color-muted); }
.sample .button { padding-inline: var(--space-3); }
.spinner { width: var(--icon-size); height: var(--icon-size); display: inline-block; flex-shrink: 0; border: var(--border-heavy) solid currentColor; border-right-color: var(--color-transparent); border-radius: var(--radius-pill); animation: spin var(--duration-spin) linear infinite; }
@keyframes spin { to { transform: rotate(var(--rotation-full)); } }
/* 06. Formulaires — toutes les zones de clic font au moins 44 px. */
    .field { display: grid; gap: var(--space-2); min-width: var(--space-0); }
.field label, .field__label { font-weight: var(--weight-medium); }
.input, .select, .textarea { width: var(--full); min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-muted); border-radius: var(--radius-control); color: var(--color-text); background: var(--color-surface); }
.input::placeholder, .textarea::placeholder { color: var(--color-muted); opacity: 1; }
.input[aria-invalid="true"] { border: var(--border-heavy) solid var(--color-error); }
.input:disabled { color: var(--color-muted); background: var(--color-background); border-color: var(--color-border); opacity: 1; }
.field__hint { color: var(--color-muted); font-size: var(--text-meta); line-height: var(--line-meta); }
.field__error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-error); font-size: var(--text-meta); line-height: var(--line-meta); }
.fieldset { padding: var(--space-0); margin: var(--space-0); border: none; min-width: var(--space-0); }
.fieldset legend { font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); cursor: pointer; }
.choice input { width: var(--check-size); height: var(--check-size); margin: var(--space-0); flex-shrink: 0; accent-color: var(--color-navy); }
.choice:has(:disabled) { color: var(--color-muted); cursor: not-allowed; }
.choice-card { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-4); border: var(--border-width) solid var(--color-muted); border-radius: var(--radius-control); }
.choice-card:has(:checked) { background: var(--color-orange-soft); border-color: var(--color-navy); }
.choice-card__copy { display: grid; gap: var(--space-1); }
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); cursor: pointer; }
.switch input { position: absolute; width: var(--target-min); height: var(--target-min); opacity: 0; margin: var(--space-0); }
.switch__track { display: inline-flex; align-items: center; width: var(--space-12); height: var(--space-6); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-muted); flex-shrink: 0; }
.switch__track::after { content: ""; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); }
.switch input:checked + .switch__track { background: var(--color-navy); justify-content: flex-end; }
.switch input:focus-visible + .switch__track { outline: var(--focus-width) solid var(--color-orange); outline-offset: var(--focus-offset); box-shadow: var(--shadow-focus); }
.range { min-height: var(--target-min); width: var(--full); margin: var(--space-0); accent-color: var(--color-navy); cursor: pointer; }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: var(--space-4); top: var(--half); transform: translateY(calc(-1 * var(--half))); color: var(--color-muted); }
.input-icon .input { padding-left: var(--space-12); }
.upload { display: grid; justify-items: center; text-align: center; gap: var(--space-3); border: var(--border-width) dashed var(--color-muted); border-radius: var(--radius-control); padding: var(--space-8) var(--space-5); background: var(--color-background); }
.file-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); }
.file-row__copy { flex: 1; min-width: var(--space-0); overflow-wrap: anywhere; }
/* 07. Statuts, cartes et supports visuels */
    .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-background); color: var(--color-muted); font-size: var(--text-meta); font-weight: var(--weight-medium); line-height: var(--line-meta); white-space: nowrap; }
.badge .icon { width: var(--space-4); height: var(--space-4); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--error { background: var(--color-error-soft); color: var(--color-error); }
.badge--trial { background: var(--color-orange-soft); color: var(--color-navy); }
.badge--neutral { background: var(--color-border); color: var(--color-navy); }
.metric { display: grid; gap: var(--space-2); }
.metric__value { font-family: var(--font-display); font-size: var(--text-metric); line-height: var(--line-title); color: var(--color-navy); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.project-card { display: grid; gap: var(--space-5); }
.project-card__icon { color: var(--color-navy); }
.project-card__footer { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); }
.media-placeholder { display: grid; align-content: center; justify-items: center; gap: var(--space-4); aspect-ratio: var(--photo-ratio); padding: var(--space-6); text-align: center; background: var(--color-orange-soft); color: var(--color-navy); border-radius: var(--radius-photo); border: var(--border-width) dashed var(--color-muted); }
.media-placeholder p { max-width: var(--copy-max); }
.media-caption { font-size: var(--text-meta); color: var(--color-muted); margin-top: var(--space-3); }
/* Composants terrain : QR, pass mobile et EPI. Le motif QR est un
       emplacement de maquette non scannable ; remplacer par un QR réel. */
    .qr-block { display: grid; justify-items: center; gap: var(--space-3); text-align: center; margin: var(--space-0); }
.qr-frame { display: grid; place-items: center; background: var(--color-surface); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); }
.qr-code { display: block; width: var(--qr-size); min-width: var(--qr-min); height: auto; aspect-ratio: var(--qr-ratio); color: var(--color-navy); fill: currentColor; }
.qr-block figcaption { display: grid; gap: var(--space-1); font-size: var(--text-meta); line-height: var(--line-meta); }
.epi-list { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); list-style: none; padding: var(--space-0); margin: var(--space-0); }
.epi-list li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); }
.epi-list .icon { width: var(--icon-large); height: var(--icon-large); color: var(--color-navy); }
.pass-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--full), var(--pass-width)), 1fr)); gap: var(--space-6); align-items: start; }
.access-pass { width: var(--full); max-width: var(--pass-width); justify-self: center; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pass); box-shadow: var(--shadow-card); overflow: hidden; }
.access-pass__header { display: grid; gap: var(--space-3); padding: var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
.access-pass__body { display: grid; gap: var(--space-5); padding: var(--space-6); }
.access-pass__status { padding: var(--space-4); border-radius: var(--radius-control); display: grid; gap: var(--space-2); }
.access-pass--valid .access-pass__status { background: var(--color-success-soft); color: var(--color-success); }
.access-pass--expired .access-pass__status { background: var(--color-warning-soft); color: var(--color-warning); }
.access-pass--retry .access-pass__status { background: var(--color-error-soft); color: var(--color-error); }
.access-pass__details { display: grid; gap: var(--space-3); font-size: var(--text-meta); }
.access-pass__details > div { display: grid; gap: var(--space-1); }
.access-pass__details dt { color: var(--color-muted); }
.access-pass__details dd { font-weight: var(--weight-medium); }
.access-pass__footer { padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--color-border); color: var(--color-muted); font-size: var(--text-meta); }
.pass-unissued { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6); background: var(--color-background); border: var(--border-width) dashed var(--color-muted); border-radius: var(--radius-control); }
/* 08. Onglets, accordéon, tableau et pagination */
    .tabs { display: flex; gap: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-2); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-transparent); border-radius: var(--radius-control); background: var(--color-transparent); color: var(--color-muted); font-weight: var(--weight-medium); }
.tab:hover { background: var(--color-background); color: var(--color-navy); }
.tab[aria-selected="true"] { background: var(--color-orange-soft); color: var(--color-navy); font-weight: var(--weight-semibold); border-color: var(--color-navy); }
.tab-panel { padding-top: var(--space-6); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-meta); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.accordion { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-height); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-weight: var(--weight-semibold); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: var(--text-card); }
.accordion[open] summary::after { content: "−"; }
.accordion > p { padding: var(--space-0) var(--space-5) var(--space-5); color: var(--color-muted); }
.table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.table { width: var(--full); min-width: var(--table-min); border-collapse: collapse; font-size: var(--text-meta); text-align: left; }
.table caption { text-align: left; padding: var(--space-5); color: var(--color-muted); }
.table th { position: relative; background: var(--color-background); color: var(--color-muted); font-weight: var(--weight-medium); }
.table th, .table td { padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover, .table .is-hover { background: var(--color-background); }
.table .is-highlighted, .table .is-highlighted:hover { background: var(--color-orange-soft); }
.table td:first-child { border-left: var(--focus-width) solid var(--color-transparent); }
.table .is-highlighted td:first-child { border-left-color: var(--color-orange); }
.person { display: flex; align-items: center; gap: var(--space-3); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-control); background: var(--color-background); color: var(--color-navy); font-weight: var(--weight-semibold); flex-shrink: 0; }
.table__name { display: block; font-weight: var(--weight-semibold); color: var(--color-navy); }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.pagination__pages { display: flex; align-items: center; gap: var(--space-2); }
/* 09. Surcouches : aperçus inline et démonstrations avec dialog natif */
    .overlay-specimen { min-height: var(--specimen-height); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-border); display: flex; align-items: center; justify-content: center; }
.overlay-specimen--drawer { justify-content: flex-end; padding: var(--space-0) var(--space-0) var(--space-0) var(--space-8); overflow: hidden; }
.dialog-card { background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-6); width: var(--full); box-shadow: var(--shadow-panel); display: grid; gap: var(--space-5); }
.drawer-card { align-self: stretch; border-radius: var(--radius-card) var(--space-0) var(--space-0) var(--radius-card); display: grid; align-content: start; }
.overlay-description { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-orange-soft); color: var(--color-navy); }
dialog { color: var(--color-text); font-family: var(--font-body); width: min(var(--modal-width), calc(var(--full) - var(--space-8))); max-height: calc(var(--viewport-height) - var(--space-8)); padding: var(--space-0); border: none; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-panel); }
dialog::backdrop { background: var(--color-overlay); }
dialog .dialog-card { box-shadow: none; }
.drawer-dialog { inset: var(--space-0) var(--space-0) var(--space-0) auto; margin: var(--space-0); width: min(var(--drawer-width), var(--full)); height: var(--viewport-height); max-height: var(--viewport-height); border-radius: var(--radius-card) var(--space-0) var(--space-0) var(--radius-card); }
.drawer-dialog .dialog-card { min-height: var(--full); align-content: start; border-radius: inherit; }
/* 10. Messages, progression, états vides et chargement */
    .toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-left: var(--space-1) solid var(--color-success); border-radius: var(--radius-control); box-shadow: var(--shadow-card); }
.toast > .icon { color: var(--color-success); margin-top: var(--space-1); }
.toast__copy { flex: 1; }
.toast-floating { position: fixed; right: var(--gutter); bottom: var(--space-6); z-index: var(--layer-toast); width: min(var(--modal-width), calc(var(--full) - var(--gutter) - var(--gutter))); }
.progress { width: var(--full); height: var(--progress-height); border: none; appearance: none; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.progress::-webkit-progress-bar { background: var(--color-border); border-radius: var(--radius-pill); }
.progress::-webkit-progress-value { background: var(--color-navy); border-radius: var(--radius-pill); }
.progress::-moz-progress-bar { background: var(--color-navy); border-radius: var(--radius-pill); }
.empty { display: grid; justify-items: start; align-content: start; gap: var(--space-4); padding: var(--space-8); }
.empty > .icon { color: var(--color-muted); }
.error-panel { border-color: var(--color-error); background: var(--color-error-soft); }
.error-panel > .icon, .error-panel h3 { color: var(--color-error); }
.skeleton { background: var(--color-border); height: var(--space-4); border-radius: var(--radius-pill); }
.skeleton--long { width: var(--skeleton-long); }
.skeleton--short { width: var(--skeleton-short); }
.skeleton--metric { width: var(--space-20); height: var(--space-10); border-radius: var(--radius-control); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-8); }
.footer a { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* 11. Responsive — 1280, 768, 375 px et tailles intermédiaires.
       1100 px : boutons sur plusieurs lignes ; 960 px : navigation repliable.
       640 px : une seule colonne. Le tableau conserve un défilement local. */
    @media (max-width: 1100px) {
      .button-family { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .button-family__title { grid-column: 1 / -1; }
      .intro { grid-template-columns: minmax(0, 1fr); }
      .intro__preview { max-width: var(--copy-max); }
    }
@media (max-width: 960px) {
      .layout { grid-template-columns: minmax(0, 1fr); }
      .menu-toggle { display: inline-flex !important; }
      .header__edition { display: none; }
      .sidebar { display: none; position: fixed; inset: var(--header-height) var(--space-0) auto; z-index: var(--layer-menu); background: var(--color-surface); border-right: none; border-bottom: var(--border-width) solid var(--color-border); box-shadow: var(--shadow-panel); max-height: calc(var(--viewport-height) - var(--header-height)); overflow-y: auto; padding: var(--space-5) var(--gutter); }
      .sidebar.is-open { display: block; }
      .sidebar__inner { position: static; gap: var(--space-4); }
      .nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sidebar__note { display: none; }
      .main { padding-top: var(--space-8); }
      .intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    }
@media (max-width: 640px) {
      .intro, .two-col, .three-col { grid-template-columns: minmax(0, 1fr); }
      .intro { gap: var(--space-6); padding-bottom: var(--space-8); }
      .palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .section__head { gap: var(--space-3); }
      .section__number { padding-top: var(--space-1); }
      .button-family { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-5); gap: var(--space-5) var(--space-4); }
      .panel { padding: var(--space-5); }
      .overlay-specimen { padding: var(--space-3); }
      .overlay-specimen--drawer { padding: var(--space-0) var(--space-0) var(--space-0) var(--space-4); }
      .dialog-card { padding: var(--space-5); }
      .dialog-card .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
      .empty { padding: var(--space-6); }
      .tabs { gap: var(--space-1); }
      .tab { padding-inline: var(--space-3); }
      .footer { align-items: flex-start; }
    }
@media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition-duration: var(--duration-none) !important; scroll-behavior: auto !important; }
    }

/* ===== Source : 01-accueil.html ===== */
/* 12. Composition de la page d'accueil uniquement.
       Aucun nouveau token ni redéfinition des composants de 00-composants.
       Les nombres de colonnes, coordonnées SVG et seuils responsive sont structurels. */
    .site-container { width: var(--full); max-width: var(--site-max); margin-inline: auto; padding-inline: var(--gutter); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-height); }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-muted); font-size: var(--text-meta); text-decoration: none; }
.site-nav a:hover { color: var(--color-navy); text-decoration: underline; }
.site-menu-button { display: none; }
.site-header-actions { display: flex; align-items: center; gap: var(--space-2); }
.site-hero { padding-block: var(--space-16) var(--space-12); }
.site-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.site-hero-copy { display: grid; justify-items: start; gap: var(--space-6); }
.site-hero-copy h1 { font-size: var(--text-hero); line-height: var(--line-hero); }
.site-hero-copy .lead { max-width: var(--copy-max); }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.site-scene { min-width: var(--space-0); }
.site-photo { margin: var(--space-0); }
.site-photo > .media-placeholder { min-height: var(--specimen-height); }
.site-hero-proof { position: relative; width: calc(var(--full) - var(--space-8)); max-width: var(--pass-width); margin-top: calc(-1 * var(--space-8)); margin-left: auto; margin-right: var(--space-4); box-shadow: var(--shadow-card); }
.site-proof-label { margin-top: var(--space-3); text-align: right; }
.site-promise-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding-block: var(--space-6); border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); }
.site-promise-strip .row { gap: var(--space-2); }
.site-block { padding-block: var(--space-24); scroll-margin-top: var(--space-6); }
.site-block-head { display: grid; justify-items: start; gap: var(--space-4); max-width: var(--copy-max); margin-bottom: var(--space-10); }
.site-block-head .eyebrow { color: var(--color-muted); }
.site-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); }
.site-surface { background: var(--color-surface); }
.site-problem-list { display: grid; gap: var(--space-5); }
.site-problem-item { display: flex; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.site-problem-item > .icon { margin-top: var(--space-1); }
.site-step { display: grid; align-content: start; gap: var(--space-5); min-width: var(--space-0); }
.site-step-title { display: flex; align-items: center; gap: var(--space-3); }
.site-step .media-placeholder { min-height: var(--space-0); }
.site-step-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-8); }
.site-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.site-feature-grid .project-card { align-content: start; }
.site-dashboard { display: grid; gap: var(--space-6); padding: var(--space-8); background: var(--color-background); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-photo); }
.site-dashboard .three-col { gap: var(--space-4); }
.site-dashboard-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-6); }
.site-chart { width: var(--full); height: var(--chart-height); color: var(--color-navy); }
.site-chart-grid { fill: none; stroke: var(--color-border); stroke-width: var(--border-width); }
.site-chart-bars { fill: var(--color-navy); }
.site-chart-highlight { fill: var(--color-orange); }
.site-chart-labels { display: flex; justify-content: space-between; font-size: var(--text-meta); color: var(--color-muted); }
.site-list-row { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.site-people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.site-people-grid article { display: grid; gap: var(--space-5); align-content: start; }
.site-people-grid .media-placeholder { min-height: var(--space-0); }
.site-partners { margin-top: var(--space-10); }
.site-proof-scene { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.site-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.site-price-cards { align-items: stretch; }
.site-price-card { display: flex; flex-direction: column; gap: var(--space-5); }
.site-price-card > .button { margin-top: auto; }
.site-price-card .badge { align-self: flex-start; }
.site-plan-list { list-style: none; margin: var(--space-0); padding: var(--space-0); display: grid; gap: var(--space-3); }
.site-plan-list li { display: flex; align-items: start; gap: var(--space-2); }
.site-pricing-notes { margin-top: var(--space-6); }
.site-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); align-items: start; }
.site-final { padding: var(--space-12); background: var(--color-navy); border-radius: var(--radius-photo); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.site-final-copy { display: grid; justify-items: start; gap: var(--space-5); color: var(--color-surface); }
.site-final-copy h2 { color: var(--color-surface); }
.site-footer { padding-block: var(--space-12) var(--space-6); border-top: var(--border-width) solid var(--color-border); }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.site-footer-links { display: grid; justify-items: start; align-content: start; gap: var(--space-1); }
.site-footer-links a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-muted); font-size: var(--text-meta); text-decoration: none; }
.site-footer-links a:hover { text-decoration: underline; }
.site-footer-bottom { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.site-proof-scene blockquote { margin: var(--space-0); }
.site-dialog-copy { max-width: var(--copy-max); }
@media (max-width: 960px) {
      .site-photo > .media-placeholder { min-height: var(--space-0); }
      .site-header-inner { gap: var(--space-3); padding-block: var(--space-3); }
      .site-menu-button { display: inline-flex; }
      /* Menu mobile : panneau sous l'en-tête, le logo et le bouton restent sur une seule ligne */
      .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-3) var(--gutter) var(--space-5); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); box-shadow: var(--shadow-header); }
      .site-nav.is-open { display: flex; }
      .site-nav > a { font-size: 1.05rem; color: var(--color-navy); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); }
      .site-nav > a:last-of-type { border-bottom: 0; }
      .site-nav__actions { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
      .site-hero-grid { gap: var(--space-6); }
      .site-hero-copy h1 { font-size: var(--text-page); }
      .site-split, .site-proof-scene { gap: var(--space-6); }
      .site-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .site-dashboard-bottom { grid-template-columns: minmax(0, 1fr); }
      .site-people-grid { gap: var(--space-4); }
      .site-faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
      .site-final { padding: var(--space-8); gap: var(--space-6); }
    }
@media (max-width: 640px) {
      .site-hero { padding-block: var(--space-8); }
      .site-hero-grid, .site-split, .site-proof-scene, .site-feature-grid, .site-people-grid, .site-final { grid-template-columns: minmax(0, 1fr); }
      .site-hero-copy h1 { font-size: var(--text-hero); }
      .site-header-actions > a { display: none; } /* Connexion et Créer mon espace passent dans le panneau du menu */
      .site-header-actions { gap: var(--space-1); }
      .site-menu-button { width: var(--control-height); padding-inline: var(--space-3); }
      .site-menu-button .site-menu-label { display: none; }
      .site-block { padding-block: var(--space-16); }
      .site-photo > .media-placeholder { min-height: var(--space-0); }
      .site-hero-proof { margin-top: var(--space-4); margin-right: var(--space-0); width: var(--full); }
      .site-actions { width: var(--full); display: grid; grid-template-columns: minmax(0, 1fr); }
      .site-block-head { margin-bottom: var(--space-6); }
      .site-dashboard { padding: var(--space-4); gap: var(--space-4); }
      .site-final { padding: var(--space-6); }
      .site-final .media-placeholder { padding: var(--space-4); }
      .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .site-footer-brand { grid-column: 1 / -1; }
    }

/* ===== Source : 03-tarifs.html ===== */
/* Composition propre à cette page ; valeurs issues des tokens validés. */

.text-plan { font-size: var(--text-card); }
.simulator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.simulator-result { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
.simulator-result .token-list > div { flex-wrap: wrap; }
@media (max-width: 960px) { .simulator-result { position: static; } }
@media (max-width: 640px) { .simulator-layout { grid-template-columns: minmax(0, 1fr); } }

/* ===== Source : 05-demo-essai.html ===== */
/* Composition propre à cette page ; valeurs issues des tokens validés. */

.conversion-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-top: var(--space-0); }
.conversion-subtitle { font-size: var(--text-card); line-height: var(--line-title); }
.conversion-layout > *, .conversion-layout input, .conversion-layout select { min-width: var(--space-0); }
.conversion-layout select { max-width: var(--full); }
@media (max-width: 960px) { .conversion-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } .conversion-story { order: 2; } }

/* ===== Source : 07-connexion.html ===== */
/* Composition propre à cette page ; valeurs issues des tokens validés. */

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.auth-card { min-width: var(--space-0); }
.auth-title { font-size: var(--text-card); line-height: var(--line-title); }
@media (max-width: 960px) { .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: var(--content-max); gap: var(--space-8); } .auth-story { order: 2; } }

/* ===== Source : 08-accueil-chantier.html ===== */
/* Composition mobile : un panneau de lecture, une action principale.
       Tokens inchangés. Les adaptations ci-dessous composent les composants validés.
       Pas d'image lourde dans le parcours : priorité à la lisibilité en extérieur. */
    .flow-shell { width: min(var(--full), var(--drawer-width)); min-height: calc(var(--viewport-height) - var(--space-12)); margin: var(--space-6) auto; display: flex; flex-direction: column; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pass); }
.flow-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.flow-header-context { flex: 1; min-width: var(--space-0); display: grid; gap: var(--space-1); }
.flow-main { display: grid; align-content: start; gap: var(--space-6); padding: var(--space-6) var(--space-5); flex: 1; min-width: var(--space-0); }
.flow-heading { display: grid; gap: var(--space-3); }
.flow-heading h1 { font-size: var(--text-section); line-height: var(--line-section); }
.flow-heading .lead { color: var(--color-text); }
.flow-shell h2 { font-size: var(--text-card); line-height: var(--line-title); }
.flow-shell h3 { font-size: var(--text-lead); line-height: var(--line-title); }
.flow-shell .button, .flow-shell .choice, .flow-shell .choice-card, .flow-shell summary, .flow-shell .tab { min-height: var(--control-height); }
.flow-shell .choice { padding-block: var(--space-2); }
.flow-shell .input, .flow-shell .select { min-height: var(--control-height); min-width: var(--space-0); max-width: var(--full); }
.flow-shell .choice-card { align-items: flex-start; padding: var(--space-4); border-width: var(--border-heavy); }
.flow-shell .choice-card input { margin-top: var(--space-1); }
.flow-shell .choice-card:has(:checked) { background: var(--color-orange-soft); border-color: var(--color-navy); }
.flow-shell .fieldset { position: relative; }
.flow-shell .fieldset legend { font-size: var(--text-body); }
.flow-shell .field label { font-weight: var(--weight-semibold); }
.flow-shell .epi-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.flow-shell .epi-list li { min-height: var(--control-height); }
.flow-progress { display: grid; gap: var(--space-3); }
.flow-step-label { font-weight: var(--weight-semibold); }
.flow-footer { position: sticky; bottom: var(--space-0); background: var(--color-surface); border-top: var(--border-width) solid var(--color-border); padding: var(--space-4) var(--space-5); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); display: grid; gap: var(--space-2); border-radius: var(--space-0) var(--space-0) var(--radius-pass) var(--radius-pass); }
.flow-footer > .button { min-height: calc(var(--control-height) + var(--space-2)); width: var(--full); }
.flow-footer .meta { text-align: center; }
.flow-footer .is-disabled { background: var(--color-border); border-color: var(--color-border); color: var(--color-muted); cursor: not-allowed; }
.flow-disclosure { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; width: var(--full); }
.flow-details { display: grid; gap: var(--space-3); }
.flow-details > div { display: grid; gap: var(--space-1); }
.flow-details dt { color: var(--color-muted); }
.flow-details dd { font-weight: var(--weight-medium); }
.flow-document { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-background); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); }
.flow-document .file-row { background: var(--color-surface); }
.flow-doc-preview { display: grid; gap: var(--space-5); padding: var(--space-5); border: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.flow-doc-preview ul { padding-left: var(--space-5); margin: var(--space-0); display: grid; gap: var(--space-4); }
.flow-dialog .button, .flow-dialog summary { min-height: var(--control-height); }
.flow-dialog h2 { font-size: var(--text-card); }
.flow-note { padding: var(--space-4); border-left: var(--space-1) solid var(--color-navy); background: var(--color-background); }
.flow-question { display: grid; gap: var(--space-5); }
.flow-question > fieldset { display: grid; gap: var(--space-3); }
@media (max-width: 640px) {
      .flow-shell { width: var(--full); min-height: var(--viewport-height); margin: var(--space-0); border: none; border-radius: var(--space-0); }
      .flow-footer { border-radius: var(--space-0); }
    }
@media (prefers-reduced-motion: reduce) { .flow-shell * { scroll-behavior: auto; } }

/* ===== Source : 12-resultat-reussi.html ===== */
/* Composition des résultats et de la vérification, sans nouveaux tokens. */
    .flow-main { position: relative; }
.result-pass { justify-self: center; }
.result-pass .qr-code { width: var(--qr-min); }
.result-pass .access-pass__body { gap: var(--space-4); }
.result-pass .access-pass__details { gap: var(--space-2); }
.result-pass .access-pass__header { padding: var(--space-4) var(--space-5); }
.result-pass .access-pass__footer { padding: var(--space-3) var(--space-5); }
.correction { display: grid; gap: var(--space-4); }
.correction__answer { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-control); }
.correction__answer--success { background: var(--color-success-soft); color: var(--color-success); }
.correction__answer--error { background: var(--color-error-soft); color: var(--color-error); }
.correction .accordion .panel { border: none; border-radius: var(--space-0); }
.result-score { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--color-error-soft); border: var(--border-width) solid var(--color-error); border-radius: var(--radius-card); }
.result-score .metric__value { color: var(--color-error); }
.verification-status { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-card); }
.verification-status--valid { background: var(--color-success-soft); color: var(--color-success); }
.verification-status--expired { background: var(--color-warning-soft); color: var(--color-warning); }
.verification-status--unknown { background: var(--color-error-soft); color: var(--color-error); }
.verification-status h2 { color: inherit; }
.verification-details { display: grid; gap: var(--space-4); }
.verification-details > div { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.verification-details dt { color: var(--color-muted); }
.verification-details dd { font-weight: var(--weight-semibold); }
.scan-placeholder { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding: var(--space-6); border: var(--border-heavy) dashed var(--color-muted); border-radius: var(--radius-control); background: var(--color-background); }
.scan-placeholder .icon { width: var(--space-16); height: var(--space-16); }

/* ===== Source : 15-tableau-de-bord.html ===== */
/* Coque manager : composants et tokens de la bibliothèque validée. */
.manager-shell {display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:var(--viewport-height)}
.manager-sidebar {position:sticky;top:var(--space-0);height:var(--viewport-height);padding:var(--space-6) var(--space-4);background:var(--color-surface);border-right:var(--border-width) solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-10)}
.manager-nav {display:grid;gap:var(--space-2)}
.manager-nav a,.manager-nav button {display:flex;gap:var(--space-3);align-items:center;min-height:var(--control-height);padding:var(--space-3);border:0;border-radius:var(--radius-control);text-decoration:none;background:var(--color-transparent);color:var(--color-muted);font-weight:var(--weight-medium);text-align:left}
.manager-nav [aria-current=page] {background:var(--color-orange-soft);color:var(--color-navy)}
.manager-nav a:hover,.manager-nav button:hover {background:var(--color-background);color:var(--color-navy)}
.manager-nav [aria-current=page]:hover {background:var(--color-orange-soft)}
.sidebar-foot {margin-top:auto;display:grid;gap:var(--space-3)}
.manager-workspace,.manager-main,.manager-content {min-width:var(--space-0)}
.manager-top {min-height:var(--header-height);padding:var(--space-4) var(--gutter);border-bottom:var(--border-width) solid var(--color-border);background:var(--color-surface);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.manager-top .company-button {min-width:var(--space-0);text-align:left;justify-content:flex-start;white-space:normal}
.manager-top .company-button span {overflow-wrap:anywhere}
.account-menu {position:relative;flex-shrink:0}
.account-menu summary {list-style:none;min-height:var(--control-height);display:flex;align-items:center;gap:var(--space-2);cursor:pointer;border-radius:var(--radius-control)}
.account-menu summary::-webkit-details-marker {display:none}
.account-popup {position:absolute;right:var(--space-0);top:calc(var(--full) + var(--space-2));width:var(--sidebar-width);z-index:var(--layer-menu);box-shadow:var(--shadow-panel)}
.manager-main {padding:var(--space-8) var(--gutter) var(--space-12);max-width:var(--layout-max);margin-inline:auto;display:grid;gap:var(--space-6)}
.manager-main h1 {font-size:var(--text-section)}
.manager-main h2 {font-size:var(--text-card);line-height:var(--line-title)}
.page-intro {display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.metric-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.metric-grid .panel {padding:var(--space-5)}
.manager-columns {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-6)}
.manager-chart {display:flex;gap:var(--space-2);height:var(--chart-height);align-items:end;margin-top:var(--space-6);border-bottom:var(--border-width) solid var(--color-border)}
.chart-column {flex:1;min-width:0;height:var(--full);display:flex;flex-direction:column;justify-content:end;align-items:center;gap:var(--space-1);font-size:var(--text-meta)}
.chart-bar {background:var(--color-navy);width:var(--full);border-radius:var(--space-1) var(--space-1) 0 0}
.chart-bar.is-today {background:var(--color-orange)}
.chart-one {height:var(--space-6)}
.chart-two {height:var(--space-12)}
.chart-three {height:calc(var(--space-12) + var(--space-6))}
.chart-zero {height:var(--border-heavy);background:var(--color-border)}
.chart-axis {display:flex;justify-content:space-between;margin-top:var(--space-2)}
.manager-list {list-style:none;padding:0;margin:0;display:grid;gap:var(--space-4)}
.manager-list li + li {border-top:var(--border-width) solid var(--color-border);padding-top:var(--space-4)}
.manager-table {min-width:0;max-width:var(--full)}
.manager-table .table {min-width:var(--table-min)}
.site-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.site-card-head {display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.site-symbol {padding:var(--space-4);background:var(--color-background);border-radius:var(--radius-control);color:var(--color-navy)}
.site-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);border-block:var(--border-width) solid var(--color-border);padding-block:var(--space-5)}
.site-stats strong {font-family:var(--font-display);font-size:var(--text-card);color:var(--color-navy)}
.site-toolbar {display:flex;gap:var(--space-4);align-items:end;flex-wrap:wrap}
.site-toolbar .field {flex:1;min-width:0}
.site-toolbar .input {width:var(--full)}
.bottom-nav {display:none}
.company-option {width:var(--full);justify-content:space-between;text-align:left;white-space:normal}
.manager-main .meta,.manager-main h2 {overflow-wrap:anywhere}
@media(max-width:1100px){.metric-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.manager-columns {grid-template-columns:minmax(0,1fr)}}
@media(max-width:960px){.manager-shell {grid-template-columns:minmax(0,1fr)}.manager-sidebar {display:none}.bottom-nav {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:var(--layer-header);background:var(--color-surface);border-top:var(--border-width) solid var(--color-border);padding:var(--space-2) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom));gap:var(--space-1)}.bottom-nav a,.bottom-nav button {display:flex;flex-direction:column;justify-content:center;gap:var(--space-1);min-width:0;min-height:var(--space-12);padding:var(--space-1) 0;font-size:var(--text-meta);line-height:var(--line-meta)}.manager-main {padding-bottom:calc(var(--space-32) + env(safe-area-inset-bottom))}.site-photo > .media-placeholder {min-height:var(--space-0)}}
@media(max-width:640px){.site-grid {grid-template-columns:minmax(0,1fr)}.manager-top {padding-inline:var(--space-4)}.account-label {display:none}.manager-main {padding-top:var(--space-6)}.metric-grid {gap:var(--space-3)}.metric-grid .panel {padding:var(--space-4)}.manager-chart {gap:var(--space-1)}.page-intro > .button {width:var(--full)}.site-toolbar {display:grid;grid-template-columns:minmax(0,1fr)}}
.manager-sidebar {align-self:start;overflow-y:auto;overscroll-behavior:contain;flex-shrink:0}
.manager-sidebar > * {flex-shrink:0}
.bottom-nav span {max-width:var(--full)}
@media(max-width:400px){.bottom-nav a,.bottom-nav button {font-size:clamp(var(--space-3),3.3vw,var(--text-meta))}}
.safety-bar {appearance:none;display:block;width:var(--full);height:var(--progress-height);border:0;border-radius:var(--radius-pill);overflow:hidden;background:var(--color-border);color:var(--color-warning)}
.safety-bar::-webkit-progress-bar {background:var(--color-border)}
.safety-bar::-webkit-progress-value {background:var(--color-warning);border-radius:var(--radius-pill)}
.safety-bar::-moz-progress-bar {background:var(--color-warning);border-radius:var(--radius-pill)}
.chantier-tabs {display:flex;gap:var(--space-2);overflow-x:auto;max-width:var(--full);border-bottom:var(--border-width) solid var(--color-border);padding-bottom:var(--space-2)}
.chantier-tabs a,.chantier-tabs button {flex-shrink:0;min-height:var(--control-height)}
.chantier-tabs [aria-current=page] {background:var(--color-orange-soft);color:var(--color-navy)}
.chantier-heading {display:grid;gap:var(--space-4)}
.chantier-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.chantier-grid > * {min-width:0}
.chantier-heading h1 {overflow-wrap:anywhere}
.poster {display:grid;align-content:space-between;gap:var(--space-6);aspect-ratio:210/297;padding:var(--space-6);background:var(--color-surface);border:var(--border-width) solid var(--color-border);box-shadow:var(--shadow-card);text-align:center;max-width:var(--copy-max);width:var(--full);margin-inline:auto}
.poster .brand {justify-content:center}
.poster h2 {font-size:var(--text-section)}
.poster .qr-code {max-width:var(--full)}
.poster-stage {padding:var(--space-5);background:var(--color-background);border-radius:var(--radius-card)}
.poster-footer {border-top:var(--border-width) solid var(--color-border);padding-top:var(--space-4)}
.settings-check {min-height:var(--control-height);display:flex;gap:var(--space-3);align-items:center}
.settings-check input {width:var(--check-size);height:var(--check-size);accent-color:var(--color-navy);flex-shrink:0}
.feedback {min-height:var(--space-6)}
.editor-head {display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.editor-option {display:grid;grid-template-columns:var(--space-12) minmax(0,1fr) var(--space-12);gap:var(--space-2);align-items:center}
.editor-option .button {padding:var(--space-3)}
.editor-option .input {width:var(--full);min-width:0}
.correct-toggle {display:grid;place-items:center;min-height:var(--space-12);position:relative}
.correct-toggle input {width:var(--check-size);height:var(--check-size);accent-color:var(--color-success)}
.editor-question {display:grid;gap:var(--space-5)}
.editor-question .fieldset {position:relative;display:grid;gap:var(--space-3)}
.editor-meta {display:flex;gap:var(--space-4);align-items:end;flex-wrap:wrap}
.editor-meta .field {flex:1;min-width:0}
.audience-switch {display:flex;gap:var(--space-2);flex-wrap:wrap}
.audience-switch [aria-pressed=true] {background:var(--color-navy);color:var(--color-surface)}
.document-preview {display:grid;align-content:center;justify-items:center;gap:var(--space-4);min-height:var(--qr-size);padding:var(--space-6);background:var(--color-background);border-radius:var(--radius-control);text-align:center}
.document-preview .icon {width:var(--space-10);height:var(--space-10)}
.bank-list {display:grid;gap:var(--space-4)}
.manager-main .field,.manager-main .fieldset {min-width:0;position:relative}
@media(max-width:1100px){.chantier-grid {grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.poster-stage {padding:var(--space-3)}.poster {padding:var(--space-4)}.poster .qr-code {width:var(--qr-min);height:var(--qr-min)}.editor-option {gap:var(--space-1)}.editor-meta {display:grid;grid-template-columns:minmax(0,1fr)}}
@media print {
 @page {size:A4 portrait;margin:12mm}
 body {background:white}.manager-shell {display:block}.manager-sidebar,.manager-top,.bottom-nav,.skip-link,dialog,.no-print {display:none!important}
 .manager-main {display:block;padding:0;margin:0;max-width:none}.manager-main > :not(.print-layout) {display:none!important}
 .print-layout {display:block}.print-layout > :not(.print-panel) {display:none!important}.print-panel {border:0;padding:0}.print-panel > :not(.poster-stage) {display:none!important}
 .poster-stage {padding:0;background:white}.poster {box-shadow:none;border:0;max-width:none;break-inside:avoid;aspect-ratio:210/273}.poster .qr-code {width:var(--qr-size);height:var(--qr-size)}
}

/* ===== Source : 20-reponses.html ===== */
.filter-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.filter-grid .field {min-width:0}
.filter-grid input,.filter-grid select {min-width:0;width:var(--full)}
.responses-table .button {padding-inline:var(--space-0);justify-content:flex-start;text-align:left}
.responses-table tr[data-record] {cursor:pointer}
.responses-table tr[data-record]:hover {background:var(--color-orange-soft)}
.detail-dl {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5)}
.detail-dl dt {font-size:var(--text-meta);color:var(--color-muted)}
.detail-dl dd {font-weight:var(--weight-medium);overflow-wrap:anywhere}
.detail-status {padding:var(--space-5);background:var(--color-success-soft);border-radius:var(--radius-card);color:var(--color-success)}
.detail-status.is-error {background:var(--color-error-soft);color:var(--color-error)}
.drawer-dialog h2 {font-size:var(--text-card)}
.drawer-dialog h3 {font-size:var(--text-lead)}
.drawer-dialog .dialog-card {gap:var(--space-6)}
.answer-summary {padding:var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-control);display:grid;gap:var(--space-2)}
.manager-item {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:start}
.manager-item .person {min-width:0}
.manager-item .person > div {min-width:0;overflow-wrap:anywhere}
.plan-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.plan-option {display:grid;gap:var(--space-4)}
.plan-option.current {border-color:var(--color-navy);border-width:var(--border-heavy)}
.billing-usage {width:var(--full);height:var(--progress-height);accent-color:var(--color-navy)}
@media(max-width:1100px){.plan-grid {grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.filter-grid {grid-template-columns:minmax(0,1fr)}.manager-item {grid-template-columns:minmax(0,1fr)}.detail-dl {grid-template-columns:minmax(0,1fr)}}

/* ===== Source : 24-superadmin-organisations.html ===== */
.editor-band {background:var(--color-navy);color:var(--color-surface);padding:var(--space-2) var(--gutter);display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;font-size:var(--text-meta)}
.editor-header {background:var(--color-surface);border-bottom:var(--border-width) solid var(--color-border);padding:var(--space-5) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.editor-nav {display:flex;gap:var(--space-2);max-width:var(--full);overflow-x:auto;padding:var(--space-2)}
.editor-nav > * {flex-shrink:0}
.editor-nav [aria-current=page] {background:var(--color-orange-soft)}
.editor-main {max-width:var(--layout-max);margin-inline:auto;padding:var(--space-8) var(--gutter);display:grid;gap:var(--space-6);min-width:0}
.editor-main h1 {font-size:var(--text-section)}
.editor-main h2,dialog h2 {font-size:var(--text-card)}
.editor-main .table-wrap {min-width:0;max-width:var(--full)}
.editor-filters {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.editor-main .field,.editor-main .fieldset,dialog .field {min-width:0;position:relative}
.editor-main .metric {padding:var(--space-5)}
.editor-actions {display:flex;gap:var(--space-2);flex-wrap:wrap;min-width:var(--sidebar-width)}
.editor-actions .button {font-size:var(--text-meta);padding:var(--space-3)}
.editor-details {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.editor-details dt {font-size:var(--text-meta);color:var(--color-muted)}
.editor-details dd {font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.editor-log {list-style:none;padding:0;display:grid;gap:var(--space-3)}
.editor-log li {padding:var(--space-3);border-radius:var(--radius-control);background:var(--color-background)}
@media(max-width:640px){.editor-header {display:grid;grid-template-columns:minmax(0,1fr)}.editor-filters,.editor-details {grid-template-columns:minmax(0,1fr)}.editor-main {padding-top:var(--space-6)}.editor-main .three-col {grid-template-columns:minmax(0,1fr)}}

/* --- Compléments application (hors maquettes) --- */
.chart-bar.chart-dyn { height: calc(var(--space-2) + var(--chart-ratio, 0) * (var(--chart-height) - var(--space-10))); }
.notice--success { background: var(--color-success-soft); color: var(--color-success); }
.notice--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.site-nav.is-open { display: flex; }
.inline-form { display: inline; }
.table .actions-cell { white-space: nowrap; }
.table .actions-cell form { display: inline; }
.muted-small { font-size: var(--text-meta); color: var(--color-muted); }
.editor-meta .select { width: var(--full); }
.editor-head [disabled] { opacity: .4; cursor: default; }
.flow-question h1:focus { outline: none; }
.detail-status.is-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.table__name { text-decoration: none; color: inherit; }
.table__name:hover strong { text-decoration: underline; }
/* Statistiques et rapports */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stats-grid .panel { padding: var(--space-5); }
.metric__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.metric__delta--up { color: var(--color-success); }
.metric__delta--down { color: var(--color-error); }
.metric__delta--flat, .metric__delta--none { color: var(--color-muted); font-weight: var(--weight-regular); }
.graphique-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.graphique-defilant .graphique { min-width: 20rem; display: block; }
.graphique-defilant--large .graphique { min-width: 36rem; }
.legende { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0; font-size: var(--text-meta); color: var(--color-muted); }
.legende li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legende__puce { width: .75rem; height: .75rem; border-radius: var(--radius-pill); flex: none; }
.anneaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.anneau-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.anneau-card .graphique { width: 8.5rem; height: 8.5rem; }
.anneau-card .legende { flex-direction: column; gap: var(--space-2); }
.anneau-card .legende strong { color: var(--color-text); }
.barres-h { display: grid; gap: var(--space-3); margin: 0; }
.barres-h__ligne { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--text-meta); }
.barres-h__libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres-h__piste { height: .6rem; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.barres-h__valeur { height: var(--full); background: var(--color-navy); border-radius: var(--radius-pill); min-width: 2px; }
.barres-h__valeur--orange { background: var(--color-orange); }
.barres-h__chiffre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-filtres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.stats-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.stats-taux { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .anneaux { grid-template-columns: minmax(0, 1fr); } .stats-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats-grid, .stats-filtres { grid-template-columns: minmax(0, 1fr); } .barres-h__ligne { grid-template-columns: minmax(0, 1fr) auto; } .barres-h__piste { grid-column: 1 / -1; } }
/* Lot 11 — audit responsive */
.manager-item .person { flex-wrap: wrap; }
@media (max-width: 960px) { .bottom-nav { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .bottom-nav a, .bottom-nav button { font-size: clamp(0.6rem, 2.6vw, var(--text-meta)); } }
@media (max-width: 960px) { .manager-item .person { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .editor-main .metric__value { font-size: clamp(1.4rem, 6vw, 2.2rem); white-space: nowrap; } }
@media (max-width: 640px) { .chantier-tabs { flex-wrap: wrap; } }
/* Checklist de démarrage */
.onboarding { border: 2px solid var(--color-orange-soft); }
.onboarding__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.onboarding__etape { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-background); }
.onboarding__etape.is-done { opacity: .72; }
.onboarding__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--color-navy); color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-meta); flex: none; }
.is-done .onboarding__num { background: var(--color-success); }
.onboarding__corps { min-width: 0; }
.onboarding__corps strong { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.onboarding__fait { white-space: nowrap; }
@media (max-width: 640px) { .onboarding__etape { grid-template-columns: auto minmax(0, 1fr); } .onboarding__etape .button { grid-column: 2; justify-self: start; } }
/* Pages d'erreur */
.page-erreur { background: var(--color-background); }
.erreur-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.erreur-card { max-width: 34rem; width: 100%; text-align: left; }
.erreur-code { font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--color-orange); font-weight: var(--weight-bold); margin: 0; }
/* Aide */
.aide-etapes { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--space-3); }
.aide-faq { display: grid; gap: var(--space-3); }
.aide-faq details { padding: var(--space-4) var(--space-5); }
.aide-faq summary { cursor: pointer; font-weight: var(--weight-semibold); color: var(--color-navy); list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.aide-faq summary::-webkit-details-marker { display: none; }
.aide-faq summary::after { content: '+'; color: var(--color-orange); font-weight: var(--weight-bold); flex: none; }
.aide-faq details[open] summary::after { content: '–'; }
.aide-faq details p { margin: var(--space-3) 0 0; color: var(--color-muted); }
/* Visuels du site */
.site-visuel { display: block; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-background); }
.site-visuel img { display: block; width: 100%; height: auto; }
/* Animations du site (activées par site.js, désactivées si prefers-reduced-motion) */
.anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
.anim [data-reveal].is-visible { opacity: 1; transform: none; }
.anim .site-hero .site-visuel { position: relative; }
.anim .site-hero .site-visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgb(255 138 61 / 0) 44%, rgb(255 138 61 / .35) 50%, rgb(255 138 61 / 0) 56%, transparent 100%); background-size: 100% 300%; animation: balayage 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes balayage { 0% { background-position: 0 100%; } 60%, 100% { background-position: 0 -100%; } }
.anim .site-hero-proof.is-visible { animation: flotter 6s ease-in-out 1s infinite; }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.anim .button--primary { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.anim .button--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(255 138 61 / .35); }
.anim .site-block .panel, .anim .site-block .project-card, .anim .site-price-card { transition: transform .25s ease, box-shadow .25s ease, opacity .7s ease; }
.anim .site-block .panel:hover, .anim .site-block .project-card:hover, .anim .site-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.anim .site-visuel img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.anim .site-visuel:hover img { transform: scale(1.025); }
.header { transition: box-shadow .25s ease; }
.header.is-scrolled { box-shadow: var(--shadow-header); }
@media (prefers-reduced-motion: reduce) { .anim [data-reveal] { opacity: 1; transform: none; transition: none; } .anim .site-hero .site-visuel::after, .anim .site-hero-proof.is-visible { animation: none; } }
/* Documents juridiques */
.legal-head { max-width: 48rem; }
.legal-corps { padding-top: 0; }
.legal-corps article { max-width: 48rem; }
.legal-corps h2 { margin-top: var(--space-8); font-size: var(--text-card); }
.legal-corps h3 { margin-top: var(--space-5); font-size: 1.05rem; }
.legal-corps p, .legal-corps li { line-height: 1.65; }
.legal-corps ul, .legal-corps ol { padding-left: 1.3rem; display: grid; gap: var(--space-2); }
.legal-table { font-size: var(--text-meta); }
.legal-table th { text-align: left; vertical-align: top; width: 28%; }
.legal-table td { vertical-align: top; }
.legal-trou { background: var(--color-warning-soft); color: var(--color-warning); padding: 0 .35rem; border-radius: .3rem; font-weight: var(--weight-semibold); }
/* Logo de l'organisation */
.logo-apercu { display: inline-block; padding: var(--space-3); background: var(--color-background); border-radius: var(--radius-control); }
.logo-apercu img { max-height: 5rem; max-width: 14rem; display: block; }
.flow-logo { max-height: 2.25rem; max-width: 7rem; object-fit: contain; }
.flow-logo--entete { margin-left: auto; }
.flow-logo--grand { max-height: 3.5rem; max-width: 11rem; margin-bottom: var(--space-3); }
/* Sélecteur de langue du parcours */
.langues { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.langues__item { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--color-muted); text-decoration: none; background: var(--color-surface); }
.langues__item:hover { color: var(--color-navy); border-color: var(--color-navy); }
.langues__item.is-active { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
[dir="rtl"] .flow-header, [dir="rtl"] .spread, [dir="rtl"] .row { flex-direction: row-reverse; }
[dir="rtl"] .flow-logo--entete { margin-left: 0; margin-right: auto; }
/* Chiffres clés des cartes chantier */
.chiffre-cle { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-navy); }
.chiffre-cle--ok { color: var(--color-success); }
.chiffre-cle--warn { color: var(--color-warning); }
.notice--demo { background: var(--color-orange-soft); color: var(--color-navy); margin-bottom: var(--space-4); }
/* Section « Testez-le » */
.tester { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.tester__visuel { display: grid; grid-template-columns: auto auto; gap: var(--space-6); justify-content: center; align-items: center; }
.tester__qr { margin: 0; }
.tester__qr .qr-code { width: 12rem; height: 12rem; }
.tester__video { width: 12.5rem; border-radius: 1.75rem; padding: .55rem; background: #0f1d2b; box-shadow: var(--shadow-panel); }
.tester__ecran { display: block; width: 100%; border-radius: 1.25rem; aspect-ratio: 1 / 2; object-fit: cover; background: #fff; }
.tester__lien { display: none; }
@media (max-width: 960px) { .tester { grid-template-columns: minmax(0, 1fr); } .tester__lien { display: inline-flex; } .tester__qr { display: none; } .tester__visuel { grid-template-columns: minmax(0, 1fr); } .tester__video { width: 14rem; margin-inline: auto; } }
/* Cartes de consignes — éditeur manager */
.cartes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.carte-consigne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); }
.carte-consigne.is-masquee { opacity: .6; }
.carte-consigne__visuel { width: 4rem; height: 4rem; border-radius: var(--radius-control); background: var(--color-background); display: grid; place-items: center; overflow: hidden; flex: none; }
.carte-consigne__visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-consigne__num { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-muted); }
.carte-consigne__corps { min-width: 0; display: grid; gap: var(--space-1); }
.carte-consigne__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: end; }
.carte-consigne__actions form { display: inline; }
.picto-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: var(--space-2); max-height: 15rem; overflow-y: auto; padding: 2px; }
.picto-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.picto-choix__case { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); cursor: pointer; text-align: center; min-height: 4.5rem; align-content: center; }
.picto-choix__libelle { font-size: .68rem; line-height: 1.2; color: var(--color-muted); }
.picto-choix input:checked + .picto-choix__case { border-color: var(--color-navy); background: var(--color-orange-soft); box-shadow: inset 0 0 0 1px var(--color-navy); }
.picto-choix input:focus-visible + .picto-choix__case { box-shadow: var(--shadow-focus); }
.dialog-large .dialog-card { max-width: 40rem; }
@media (max-width: 640px) { .carte-consigne { grid-template-columns: auto minmax(0, 1fr); } .carte-consigne__actions { grid-column: 1 / -1; justify-content: start; } }
/* Cartes de consignes — parcours public */
.cartes { display: grid; gap: var(--space-3); }
.cartes__piste { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; margin: -2px; }
.cartes__piste::-webkit-scrollbar { display: none; }
.carte { flex: 0 0 100%; scroll-snap-align: center; min-height: 22rem; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); position: relative; }
.carte--photo { padding-top: 0; overflow: hidden; }
.carte__photo { width: calc(100% + 2 * var(--space-5)); margin: 0 calc(-1 * var(--space-5)); aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.carte__picto { width: 5.5rem; height: 5.5rem; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-background); color: var(--color-navy); }
.carte__picto--orange { background: var(--color-orange-soft); color: var(--color-orange); }
.carte__picto--rouge { background: var(--color-error-soft); color: var(--color-error); }
.carte__titre { font-size: 1.55rem; line-height: 1.15; margin: 0; }
.carte__texte { font-size: 1.05rem; line-height: 1.5; margin: 0; }
.carte__num { position: absolute; top: var(--space-4); right: var(--space-5); }
.carte--photo .carte__num { background: rgb(255 255 255 / .85); padding: 2px 8px; border-radius: var(--radius-pill); }
.cartes__nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.cartes__points { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cartes__point { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.cartes__point.is-active { background: var(--color-orange); transform: scale(1.3); }
.flow-sous-titre { font-size: 1.1rem; margin: var(--space-4) 0 0; }
[dir="rtl"] .carte__num { right: auto; left: var(--space-5); }

/* Espace partenaire apporteur */
.editor-band--partenaire { background: var(--color-orange); color: var(--color-navy); font-weight: var(--weight-semibold); }
.lien-partenaire__barre { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.lien-partenaire__barre .input { flex: 1 1 18rem; min-width: 0; font-family: var(--font-mono, monospace); font-size: var(--text-meta); }
.lien-partenaire__barre .button { flex-shrink: 0; }
.table tfoot th, .table tfoot td { border-top: 2px solid var(--color-border); }
dialog { overflow: auto; } /* formulaires longs (fiche partenaire) : la boîte défile, jamais la page */

/* Site : section « Pourquoi nous faire confiance » */
.site-confiance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.site-confiance-card { align-content: start; }
.site-confiance-card .icon--large { color: var(--color-orange); }
.site-confiance-bas { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-6); margin-top: var(--space-6); }
.site-temoignage { margin: 0; justify-content: center; }
.site-temoignage blockquote { margin: 0; font-family: var(--font-display); font-size: var(--text-card); line-height: var(--line-title); color: var(--color-navy); }
.site-temoignage blockquote p { margin: 0; }
.site-temoignage figcaption { display: grid; gap: var(--space-1); }
@media (max-width: 900px) { .site-confiance-grid, .site-confiance-bas { grid-template-columns: minmax(0, 1fr); } }

/* Éditeur : entonnoir d'activation */
.entonnoir { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.entonnoir__etape { display: grid; gap: var(--space-2); }
.entonnoir__barre { height: 10px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.entonnoir__barre span { display: block; height: 100%; border-radius: inherit; background: var(--color-orange); min-width: 2px; transition: width .4s ease; }
.deja-venu p { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin: 0; }
.deja-venu .button--text { padding-inline: 0; }

/* Éditeur de cartes de consignes : glisser-déposer + aperçu téléphone */
.icon--haut { transform: rotate(-90deg); }
.icon--bas { transform: rotate(90deg); }
.carte-consigne { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.carte-consigne__poignee { border: 0; background: transparent; color: var(--color-muted); cursor: grab; padding: var(--space-2); border-radius: var(--radius-control); touch-action: none; }
.carte-consigne__poignee:hover { background: var(--color-background); color: var(--color-navy); }
.carte-consigne__poignee[hidden] { display: none; }
.carte-consigne[draggable="true"] { cursor: grab; }
.carte-consigne.is-deplacee { opacity: .45; outline: 2px dashed var(--color-orange); outline-offset: 2px; cursor: grabbing; }
.carte-consigne__picto { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; background: var(--color-background); color: var(--color-navy); }
.carte-consigne__position { min-width: 1.4rem; font-variant-numeric: tabular-nums; }
.carte-consigne__actions .button--text:disabled { opacity: .3; cursor: default; }
.cartes-statut { min-height: 1.3em; color: var(--color-success); }
.cartes-statut.is-erreur { color: var(--color-error); }
.dialog-carte { --modal-width: 62rem; }
.dialog-carte__colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-6); align-items: start; }
.dialog-carte__apercu { position: sticky; top: 0; display: grid; gap: var(--space-2); }
.telephone { border: 8px solid var(--color-navy); border-radius: 2rem; background: var(--color-background); padding: var(--space-4) var(--space-3); min-height: 24rem; }
.telephone .carte { min-height: 20rem; }
.telephone .carte__titre { font-size: 1.3rem; }
.telephone .carte__texte { font-size: .95rem; }
.telephone .carte__photo { width: calc(100% + 2 * var(--space-5)); }
@media (max-width: 900px) {
  .dialog-carte__colonnes { grid-template-columns: minmax(0, 1fr); }
  .dialog-carte__apercu { position: static; order: -1; }
  .telephone { min-height: 0; border-width: 4px; padding: var(--space-3); }
  .telephone .carte { min-height: 0; }
  .carte-consigne { grid-template-columns: auto minmax(0, 1fr); }
  .carte-consigne__actions { grid-column: 1 / -1; justify-content: start; }
}
.carte-consigne__picto.carte__picto--orange { background: var(--color-orange-soft); color: var(--color-orange); }
.carte-consigne__picto.carte__picto--rouge { background: var(--color-error-soft); color: var(--color-error); }
.bandeau-preprod { background: repeating-linear-gradient(135deg, #8A5700 0 12px, #a66a00 12px 24px); color: #fff; text-align: center; font-size: var(--text-meta); font-weight: var(--weight-semibold); padding: 4px var(--gutter); }
.bandeau-preprod a { color: inherit; }

/* Tableau de bord éditeur */
.metric-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric--lien { text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.metric--lien:hover { box-shadow: var(--shadow-panel); transform: translateY(-1px); }
.editeur-colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); align-items: start; }
.editeur-colonnes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .metric-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .editeur-colonnes, .editeur-colonnes--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .metric-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric-grid--6 .metric__value { font-size: 1.7rem; }
.badge--tentative { margin-left: var(--space-2); font-size: .72rem; }
.warning-text { color: var(--color-warning); font-weight: var(--weight-semibold); }

/* Menu mobile du site : icône qui bascule, panneau fermé au clic extérieur / Échap (accezio.js) */
.site-nav__actions { display: none; }
.site-menu-icon--close { display: none; }
.site-menu-button[aria-expanded="true"] .site-menu-icon--open { display: none; }
.site-menu-button[aria-expanded="true"] .site-menu-icon--close { display: inline-block; }
@media (max-width: 640px) { .site-nav.is-open .site-nav__actions { display: grid; } }
.account-popup .button--text { justify-content: flex-start; gap: var(--space-3); width: 100%; }
.account-popup .button--text .icon { color: var(--color-muted); }