/* Configurateur commercial BÂTIR SUR — design system repris du TCE (noir / blanc / rouge, sidebar à gauche). */
:root {
  --bs-red: #e32b2e; --bs-red-hover: #c9252a; --bs-red-soft: #fdecec; --bs-black: #111111; --bs-white: #ffffff;
  --gray-50: #f7f7f8; --gray-100: #f0f0f2; --gray-200: #e3e3e7; --gray-300: #cfcfd6; --gray-400: #a3a3ad; --gray-500: #74747f;
  --gray-600: #55555e; --gray-700: #3b3b42; --gray-800: #26262b; --gray-900: #17171a;
  --color-bg: var(--gray-50); --color-surface: var(--bs-white); --color-surface-muted: var(--gray-100);
  --color-border: var(--gray-200); --color-border-strong: var(--gray-300);
  --color-text: var(--gray-900); --color-text-muted: var(--gray-500); --color-text-soft: var(--gray-600);
  --color-primary: var(--bs-black); --color-primary-hover: var(--gray-800);
  --color-accent: var(--bs-red); --color-accent-hover: var(--bs-red-hover); --color-focus: #2563eb;
  --color-success: #1f8a4c; --color-success-soft: #e6f5ec; --color-warning: #e07b12; --color-warning-soft: #fdf1e2;
  --color-danger-soft: var(--bs-red-soft); --color-info-soft: #e8f0fe;
  --sidebar-bg: var(--bs-black); --sidebar-text: #d8d8de; --sidebar-text-active: var(--bs-white);
  --sidebar-hover: #222226; --sidebar-active: #2a2a2f; --sidebar-border: #2b2b30; --sidebar-width: 256px; --topbar-height: 64px;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.05); --shadow-lg: 0 12px 32px rgba(17,17,17,.12); --transition: 150ms ease;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: var(--text-2xl); font-weight: 700; } h2 { font-size: var(--text-xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 600; } h4 { font-size: var(--text-md); font-weight: 600; }
p { margin: 0; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } img { max-width: 100%; display: block; }
::selection { background: var(--bs-black); color: #fff; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.muted { color: var(--color-text-muted); } .soft { color: var(--color-text-soft); } .small { font-size: var(--text-sm); } .xs { font-size: var(--text-xs); }
.strong { font-weight: 600; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }
.icon { flex: none; }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack--tight { gap: 6px; }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row.between { justify-content: space-between; }
.inline { display: inline; margin: 0; }

/* ── Shell : sidebar noire + topbar ───────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; transition: transform var(--transition); }
.sidebar__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4) var(--space-4); gap: 4px; text-align: center; border-bottom: 1px solid var(--sidebar-border); }
.wordmark { font-weight: 800; font-size: var(--text-xl); letter-spacing: .02em; color: #fff; } .wordmark span { color: var(--bs-red); }
.tagline { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gray-400); }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-3); }
.sidebar__section { padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--gray-500); font-weight: 600; }
.sidebar__item { display: flex; align-items: center; gap: var(--space-3); padding: 11px var(--space-4); border-radius: var(--radius); color: var(--sidebar-text); font-size: var(--text-sm); font-weight: 500; transition: background var(--transition), color var(--transition); }
.sidebar__item:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar__item.active { background: var(--bs-red); color: #fff; }
.sidebar__item .icon { opacity: .9; }
.sidebar__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--sidebar-border); font-size: var(--text-xs); color: var(--gray-500); line-height: 1.5; }
.sidebar__footer strong { color: var(--gray-300); }
.sidebar__credit { margin-top: var(--space-2); opacity: .5; font-size: 10px; letter-spacing: .02em; }
.main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; transition: margin var(--transition); }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); }
.topbar__title { font-weight: 600; font-size: var(--text-md); }
.topbar__spacer { flex: 1; }
.topbar__logo { height: 32px; max-width: 150px; width: auto; object-fit: contain; border-radius: var(--radius-sm); }
.topbar__btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--color-text-soft); }
.topbar__btn:hover { background: var(--color-surface-muted); color: var(--color-text); }
.content { padding: var(--space-6); max-width: 1440px; width: 100%; }
.content--full { padding: 0; max-width: none; }
.backdrop { display: none; }
.sidebar-collapsed .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
.sidebar-collapsed .main { margin-left: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bs-black); color: #fff; font-size: var(--text-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; } .usermenu > summary::-webkit-details-marker { display: none; }
.usermenu__btn { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: 4px 8px 4px 4px; cursor: pointer; max-width: 300px; min-height: 44px; }
.usermenu__btn:hover { background: var(--color-surface-muted); }
.usermenu__name { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--text-sm); font-weight: 600; min-width: 0; text-align: left; }
.usermenu__panel { position: absolute; right: 0; top: calc(100% + 6px); width: 230px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; }
.usermenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; text-align: left; }
.usermenu__item:hover { background: var(--color-surface-muted); }

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .backdrop.show { display: block; position: fixed; inset: 0; background: rgba(17,17,17,.45); z-index: 35; }
  .content { padding: var(--space-4); } .content--full { padding: 0; }
  .topbar { padding: 0 var(--space-4); }
}
@media (max-width: 640px) { .usermenu__name { display: none; } }

/* ── Cloche de notifications ──────────────────────────────────────────── */
.notif { position: relative; }
.notif > summary { list-style: none; } .notif > summary::-webkit-details-marker { display: none; }
.notif__btn { position: relative; cursor: pointer; }
.notif__badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bs-red); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif.ring .notif__btn .icon { animation: bell-ring .6s ease 3; transform-origin: 50% 0; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
.notif__panel { position: absolute; right: -60px; top: calc(100% + 6px); width: min(380px, calc(100vw - 24px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; }
.notif__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.notif__list { max-height: 420px; overflow-y: auto; }
.notif__item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.4; }
.notif__item:hover { background: var(--gray-50); }
.notif__item.unread { background: #fff7f7; }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: transparent; }
.notif__item.unread .notif__dot { background: var(--bs-red); }
.notif__text { display: block; min-width: 0; } .notif__meta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.notif__empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.notif__all { display: block; padding: 11px; text-align: center; font-size: var(--text-sm); font-weight: 600; border-top: 1px solid var(--color-border); }
.notif__all:hover { background: var(--gray-50); }
.notif-page .notif__item { padding: 16px 20px; font-size: var(--text-base); } .notif-page .notif__item:last-child { border-bottom: none; }
@media (max-width: 640px) { .notif__panel { position: fixed; right: 8px; left: 8px; width: auto; top: calc(var(--topbar-height) + 4px); } }

/* ── En-tête de page, grilles, cartes, KPI ────────────────────────────── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-header .eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; }
.page-header .subtitle { color: var(--color-text-muted); margin-top: 4px; }
.page-header .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-main { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-main { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: var(--space-4); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.card__title { font-size: var(--text-md); font-weight: 600; }
.card__body { padding: var(--space-5); } .card__body.flush { padding: 0; }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.kpi__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi__value { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpi__hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.kpi.accent { border-color: var(--bs-red); } .kpi.accent .kpi__value { color: var(--bs-red); }
.kpi.dark { background: var(--bs-black); color: #fff; border-color: var(--bs-black); } .kpi.dark .kpi__label, .kpi.dark .kpi__hint { color: var(--gray-400); }

/* ── Boutons, badges ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: background var(--transition), border-color var(--transition); }
.btn:hover { background: var(--color-surface-muted); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-hover); }
.btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .btn--accent:hover { background: var(--color-accent-hover); }
.btn--ghost { border-color: transparent; background: transparent; } .btn--ghost:hover { background: var(--color-surface-muted); }
.btn--sm { height: 36px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: 52px; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn--block { width: 100%; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--gray-100); color: var(--gray-600); }
.badge--ok { background: var(--color-success-soft); color: var(--color-success); }
.badge--off { background: var(--gray-100); color: var(--gray-500); }
.badge--solid { background: var(--bs-black); color: #fff; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 600; padding: 10px var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--gray-50); white-space: nowrap; }
.table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.clickable:hover { background: var(--gray-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .row-action { text-align: right; white-space: nowrap; }
.table tr.is-off td { color: var(--gray-400); }
.table .primary { font-weight: 600; }
.table .sub { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
.table tfoot td { border-top: 2px solid var(--bs-black); font-weight: 600; }
.extra { color: var(--bs-red); font-weight: 600; }
.empty { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-text-muted); } .empty h4 { color: var(--color-text); margin-bottom: 4px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }

/* ── Formulaires ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--text-sm); font-weight: 600; } .field__label .req { color: var(--bs-red); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); } .field__error { font-size: var(--text-xs); color: var(--bs-red); font-weight: 500; }
.input, .select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-base); transition: border-color var(--transition), box-shadow var(--transition); }
.input:focus, .select:focus { outline: none; border-color: var(--bs-black); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.input.invalid { border-color: var(--bs-red); box-shadow: 0 0 0 3px rgba(227,43,46,.15); }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2374747f' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); } .form-grid .span-2 { grid-column: span 2; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } }
.filter-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-4); }
.filter-bar .field { min-width: 160px; } .filter-bar .field.grow { flex: 1; min-width: 220px; }

/* ── Alertes, listes ──────────────────────────────────────────────────── */
.alert { padding: 12px 14px; border-radius: var(--radius); font-size: var(--text-sm); border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.alert--info { background: var(--color-info-soft); border-color: #c7d9fb; color: #1e40af; }
.alert--warning { background: var(--color-warning-soft); border-color: #f5d6a8; color: #9a4a06; }
.alert--danger { background: var(--color-danger-soft); border-color: #f4b8b8; color: #9b1c1c; }
.alert--success { background: var(--color-success-soft); border-color: #b9e2c7; color: #14532d; }
code.secret { font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: .06em; background: #fff; border: 1px dashed #b79b2b; padding: 6px 10px; border-radius: var(--radius-sm); user-select: all; width: fit-content; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--space-4); font-size: var(--text-sm); } .dl dt { color: var(--color-text-muted); } .dl dd { margin: 0; font-weight: 500; }
.stat-list { display: flex; flex-direction: column; gap: 12px; }
.stat-list__row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.stat-list__row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-list__row .bar { flex: 2; } .stat-list__row .val { width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.progress { display: block; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--bs-black); border-radius: 4px; }
.progress.accent > i { background: var(--bs-red); }
.price-big { font-size: var(--text-3xl); font-weight: 800; color: var(--bs-red); letter-spacing: -.02em; line-height: 1; text-align: right; }
.price-big small { display: block; font-size: var(--text-xs); letter-spacing: .08em; color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; margin-top: 4px; }

/* ── Connexion (layout auth du TCE) ───────────────────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth__side { background: var(--bs-black); color: #fff; padding: var(--space-12); display: flex; flex-direction: column; justify-content: space-between; }
.auth__side h2 { font-size: var(--text-3xl); font-weight: 700; max-width: 520px; letter-spacing: -.02em; }
.auth__side p { color: var(--gray-400); max-width: 460px; margin-top: var(--space-4); font-size: var(--text-md); }
.auth__side .bar { width: 64px; height: 4px; background: var(--bs-red); margin: var(--space-6) 0; }
.auth__side .wordmark { font-size: var(--text-2xl); }
.auth__form { display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--color-surface); }
.auth__card { width: 100%; max-width: 400px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__side { display: none; } }

/* ── Fiches villa (catalogue + choix de la villa) ─────────────────────── */
.villa-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.villa-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); }
.villa-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.villa-card__media { position: relative; aspect-ratio: 16 / 10; background: #f0ede6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.villa-card__media img { width: 100%; height: 100%; object-fit: cover; }
.villa-card__placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gray-400); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.villa-card__tag { position: absolute; top: 10px; left: 10px; }
.villa-card__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.villa-card__body .btn { margin-top: auto; }
.villa-card__specs { display: flex; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } .villa-card__specs strong { color: var(--color-text); }
.villa-card__price { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.01em; } .villa-card__price small { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ── Écran de configuration 3D ────────────────────────────────────────── */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 470px; height: calc(100vh - var(--topbar-height)); min-height: 520px; }
/* Colonne gauche : viewer 3D puis plan de la maison (elle défile toute seule, en même temps que les options à droite). */
.cfg-visual { position: relative; background: #eef1f4; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.cfg-viewer { position: relative; height: calc(100vh - var(--topbar-height) - 96px); min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cfg-plan { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-5); }
.cfg-plan h3 { margin-bottom: var(--space-3); }
.cfg-plan img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.cfg-plan--mob { display: none; margin: var(--space-2) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.plan-comment--desk { background: var(--color-surface); padding: 0 var(--space-5) var(--space-5); }
.plan-comment--mob { display: none; margin: 0 var(--space-5) var(--space-4); }
.plan-comment__input { height: auto; min-height: 76px; padding: 10px 12px; font-family: inherit; resize: vertical; }
.plan-comment--detail { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.plan-comment__text { margin-top: var(--space-2); white-space: pre-line; color: var(--color-text-soft); }
/* Questions complémentaires */
.cfg-extras { padding: 0 var(--space-5); }
.xhead { padding: var(--space-4) 0 var(--space-2); border-top: 2px solid var(--bs-black); margin-top: var(--space-2); }
.xhead h3 { margin-bottom: 4px; }
.xfam { display: flex; flex-direction: column; gap: 4px; }
.xq { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 12px; background: var(--color-surface); }
.xq__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
.xq__label { font-size: var(--text-sm); font-weight: 600; }
.yn { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.yn__btn { min-width: 64px; height: 44px; padding: 0 14px; border: 0; background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--color-text-soft); touch-action: manipulation; }
.yn__btn + .yn__btn { border-left: 1px solid var(--color-border-strong); }
.yn__btn.active { background: var(--bs-black); color: #fff; }
.yn__btn.active:last-child { background: var(--bs-red); }
.xq__body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--color-border); }
.xq__body .chips { margin: 0; }
.xchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; font-size: var(--text-sm); background: var(--color-surface); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; touch-action: manipulation; }
.xchip.active { border-color: var(--bs-black); box-shadow: 0 0 0 1.5px var(--bs-black); font-weight: 600; }
.xq__qtybox { display: inline-flex; align-items: center; gap: 8px; }
.xq__qty { width: 96px; height: 44px; text-align: right; }
.xq__price { margin-left: auto; font-weight: 800; color: var(--bs-red); font-size: var(--text-md); }
.xq__hint { margin: 2px 0 0; line-height: 1.45; }
.inclus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.inclus-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 9px 2px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.inclus-list li:last-child { border-bottom: 0; }
.inclus-list__st { font-weight: 700; color: var(--color-text-muted, #777); white-space: nowrap; } .inclus-list__st.extra { color: var(--bs-red); }
.recap-list .r-sep { display: block; padding: 10px 0 4px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.totals .sub { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 6px; } .totals .sub dt, .totals .sub dd { font-weight: 700; color: var(--color-text); }
.cfg-visual .villa-img { max-width: 92%; max-height: 88%; object-fit: contain; transition: filter .5s; }
.villa-card__ht { font-size: var(--text-sm); font-weight: 600; color: var(--gray-500); }
/* Villa en image (sans modèle 3D) : même décor que la 3D — ciel de coucher de soleil, horizon, sol de béton gris. */
.cfg-viewer:has(> .villa-img), .detail-viewer:has(> .villa-img) { background: linear-gradient(180deg, #4a72ad 0%, #b8a7ba 40%, #f3c49b 54%, #d7d3ce 54.2%, #bdb9b4 72%, #a3a09b 100%); }
#villa-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#villa-3d-canvas:active { cursor: grabbing; }
.detail-viewer { position: relative; height: 460px; overflow: hidden; background: #eef1f4; display: flex; align-items: center; justify-content: center; }
.detail-viewer .villa-img { max-width: 92%; max-height: 90%; object-fit: contain; }
.detail-viewer .viewer-hint { bottom: 14px; }
.viewer-badge { position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; gap: 8px; align-items: center; }
.viewer-hint { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(17,17,17,.7); color: #fff; font-size: var(--text-xs); padding: 6px 12px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 6px; pointer-events: none; white-space: nowrap; }
#villa-3d-loading { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: linear-gradient(to bottom, #3A7BD5 0%, #87CEEB 55%, #D0EAFF 100%); font-size: var(--text-sm); font-weight: 600; color: #fff; transition: opacity .5s; }
#villa-3d-loading.hidden { opacity: 0; pointer-events: none; }
.loading-track { width: 160px; height: 4px; background: rgba(255,255,255,.3); border-radius: 3px; } .loading-fill { height: 100%; width: 0; background: #fff; border-radius: 3px; transition: width .2s; }
#canvas-stats { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; background: rgba(255,255,255,.93); border-top: 1px solid rgba(0,0,0,.07); z-index: 6; pointer-events: none; }
.cstat { display: flex; align-items: center; gap: .55rem; padding: .6rem 1.4rem; border-right: 1px solid rgba(0,0,0,.07); } .cstat:last-child { border-right: none; }
.cstat .icon { color: var(--bs-red); } .cstat-val { font-size: 1.05rem; font-weight: 800; line-height: 1; } .cstat-label { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gray-500); margin-top: 2px; }
#day-night-btn { position: absolute; top: 12px; right: 12px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#day-night-btn:hover { background: rgba(0,0,0,.6); } #day-night-btn.night { background: rgba(10,20,60,.75); border-color: rgba(150,180,255,.6); }

.cfg-panel { background: var(--color-surface); border-left: 1px solid var(--color-border); overflow-y: auto; display: flex; flex-direction: column; }
.cfg-panel__head { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cfg-panel__name { font-size: var(--text-lg); font-weight: 700; line-height: 1.1; } .cfg-panel__specs { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }
.cfg-total { text-align: right; } .cfg-total strong { display: block; font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cfg-total small { display: block; margin-top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); font-weight: 600; }
.cfg-options { padding: var(--space-2) var(--space-5); }
.acc { border-bottom: 1px solid var(--color-border); }
.acc summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 56px; padding: 16px 0; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '▾'; margin-left: auto; color: var(--gray-400); transition: transform .2s; } .acc[open] summary::after { transform: rotate(180deg); color: var(--bs-red); }
.acc-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-600); }
.acc-current { font-size: var(--text-xs); color: var(--color-text-muted); } .acc[open] .acc-current { display: none; }
.acc-body { padding: 0 0 var(--space-4); }
.sub-label { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--gray-400); font-weight: 600; margin: 6px 0 8px; }
/* Boutons d'options alignés en colonnes égales (mêmes largeur et hauteur sur toutes les villas) : nom à gauche, prix à droite. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin-bottom: 12px; }
.chip { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 6px 12px; font-size: var(--text-sm); line-height: 1.25; background: var(--color-surface); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; touch-action: manipulation; text-align: left; }
.chip .chip-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.chip:hover { border-color: var(--gray-500); }
.chip.active { border-color: var(--bs-black); box-shadow: 0 0 0 1.5px var(--bs-black); font-weight: 600; }
.chip-price { font-size: 11px; color: var(--gray-400); white-space: nowrap; font-weight: 500; } .chip-price.extra, .chip.active .chip-price.extra { color: var(--bs-red); }
.chips-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); flex: none; }
.chip-thumb { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; border: 1px solid var(--gray-200); flex: none; margin-left: -6px; }
.cfg-recap { margin: var(--space-2) var(--space-5) var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--gray-50); }
.cfg-recap h3 { margin-bottom: var(--space-4); }
.client-box { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: var(--space-4); margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.client-box legend { padding: 0 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.client-box__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .client-box__row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); cursor: pointer; line-height: 1.4; }
.consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--bs-black); flex: none; }
.parrainage-toggle { cursor: pointer; list-style: none; } .parrainage-toggle::-webkit-details-marker { display: none; }
.pre-line { white-space: pre-line; }
.doc-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.doc-row:last-of-type { border-bottom: 0; }
.doc-row__label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: var(--text-sm); }
@media (max-width: 640px) { .doc-row { grid-template-columns: 1fr; } }
.recap-list { list-style: none; margin: var(--space-4) 0; padding: 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.recap-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.recap-list .r-label { color: var(--color-text-muted); } .recap-list .r-label strong { color: var(--color-text); font-weight: 500; } .recap-list .r-price { white-space: nowrap; color: var(--gray-400); }
.totals { margin: 0 0 var(--space-4); } .totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--text-sm); }
.totals dt { color: var(--color-text-muted); } .totals dd { margin: 0; font-weight: 600; }
.totals .grand { border-top: 2px solid var(--bs-black); margin-top: 6px; padding-top: 10px; align-items: baseline; }
.totals .grand dt { color: var(--color-text); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); } .totals .grand dd { font-size: var(--text-2xl); font-weight: 800; color: var(--bs-red); letter-spacing: -.02em; }
dialog { border: 0; border-radius: var(--radius-lg); padding: 0; max-width: min(440px, calc(100vw - 32px)); width: 100%; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(17,17,17,.55); }
.dialog-body { padding: var(--space-8); text-align: center; }
.done-icon { width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--color-success); color: #fff; display: grid; place-items: center; }
.dialog-actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }

/* Tablette / téléphone : visuel collant en haut, options en dessous */
@media (max-width: 1024px) {
  .cfg { display: block; height: auto; }
  .cfg-visual { position: sticky; top: var(--topbar-height); z-index: 20; height: 40vh; min-height: 260px; overflow: hidden; }
  .cfg-viewer { height: 100%; min-height: 0; }
  .cfg-plan--desk { display: none; }
  .cfg-plan--mob { display: block; margin: var(--space-4) var(--space-5); }
  .plan-comment--desk { display: none; }
  .plan-comment--mob { display: block; }
  .cfg-extras { padding: 0 var(--space-4); }
  .cfg-panel { border-left: 0; overflow: visible; }
  .cfg-panel__head { top: calc(var(--topbar-height) + 40vh); }
  /* Le visuel et l'en-tête restent collants : quand un champ prend le focus, on lui laisse la place sous eux. */
  .cfg-recap .input, .cfg-recap .consent, .cfg-recap .field__error { scroll-margin-top: calc(var(--topbar-height) + 40vh + 130px); }
  .viewer-hint { bottom: 54px; }
}
@media (max-width: 640px) { .cstat { padding: .45rem .8rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Récapitulatif client (modèle du site : 2 pages A4) ───────────────── */
.cfg-plan-detail img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }

/* Visualiseur de plans : carrousel (plusieurs plans 2D), bouton « Plan de masse », agrandissement */
.plans__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.plans__head h3 { margin: 0; }
.plans__stage { position: relative; }
.plans__zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; }
.plans .plans__img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.plans__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-border); background: rgba(255, 255, 255, .94); color: var(--bs-black, #111); cursor: pointer; box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, .15)); }
.plans__nav:hover { background: #111; color: #fff; }
.plans__nav--prev { left: 8px; } .plans__nav--next { right: 8px; }
.plans__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.plans__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.plans__tab { min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.plans__tab.active { background: #111; border-color: #111; color: #fff; }
.plans__masse { min-height: 44px; }
.plans-dialog { width: min(1100px, 96vw); max-width: min(1100px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; overflow: hidden; }
.plans-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.plans-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.plans-dialog__body { padding: 12px; overflow: auto; max-height: calc(94vh - 120px); text-align: center; }
.plans-dialog__img { max-width: 100%; max-height: calc(94vh - 170px); object-fit: contain; background: #fff; cursor: zoom-in; }
.plans-dialog__body.is-zoomed { text-align: left; }
.plans-dialog__body.is-zoomed .plans-dialog__img { max-width: none; max-height: none; width: 190%; cursor: zoom-out; }
.plans-dialog__hint { margin: 8px 0 0; }
@media (max-width: 720px) { .plans-dialog__body.is-zoomed .plans-dialog__img { width: 260%; } }
.xfam-title { background: var(--gray-50); color: var(--bs-red); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; }
.price-line { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--text-sm); color: var(--color-text-muted); } .price-line strong { color: var(--color-text); }
.price-line--total { border-top: 2px solid var(--bs-black); padding-top: 8px; font-weight: 700; color: var(--color-text); } .price-line--total strong { font-size: var(--text-xl); color: var(--bs-red); }
.recap-history { margin: var(--space-3) 0 0; padding-left: 18px; font-size: var(--text-sm); color: var(--color-text-soft); }
.recap-doc { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.recap-page { position: relative; width: 210mm; max-width: 100%; min-height: 297mm; background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-top { background: #111; padding: 9pt 20pt; display: flex; justify-content: space-between; align-items: center; }
.rp-top__info { font-size: 6.5pt; color: #888; letter-spacing: .1em; line-height: 1.7; }
.rp-logo { display: flex; flex-direction: column; align-items: flex-end; border-bottom: 1px solid #d93025; padding-bottom: 3pt; }
.rp-logo__name { font-size: 15pt; font-weight: 800; color: #fff; letter-spacing: .05em; line-height: 1; } .rp-logo__name span { color: #d93025; }
.rp-logo__sub { font-size: 5.5pt; color: #777; letter-spacing: .12em; text-transform: uppercase; margin-top: 3pt; }
.rp-p1 { padding: 22pt 24pt 0; display: grid; grid-template-columns: 1fr 62mm; gap: 20pt; align-items: start; }
.rp-title { font-size: 28pt; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 12pt; }
.rp-text { font-size: 8.5pt; color: #444; line-height: 1.6; margin-bottom: 8pt; }
.rp-codebox { border: .6pt solid #ccc; text-align: center; padding: 10pt; }
.rp-codebox__label { font-size: 6.5pt; color: #999; letter-spacing: .08em; }
.rp-codebox__code { font-size: 14pt; font-weight: 800; letter-spacing: .2em; padding: 10pt 0; border-bottom: .6pt solid #ccc; margin-bottom: 8pt; }
.rp-codebox__adv small { display: block; font-size: 6.5pt; color: #999; } .rp-codebox__adv strong { display: block; font-size: 9pt; } .rp-codebox__adv span { font-size: 7.5pt; color: #555; }
.rp-images { padding: 14pt 24pt 0; flex: 1; }
.rp-img { background: #f5f5f3; border: .6pt solid #e0e0e0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rp-img img { width: 100%; height: 100%; object-fit: cover; }
.rp-img--main { height: 100mm; margin-bottom: 4px; } .rp-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .rp-img-row .rp-img { height: 46mm; }
.rp-footer { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.rp-footer > div { background: #111; padding: 8pt 20pt; color: #aaa; font-size: 6.5pt; line-height: 1.8; } .rp-footer > div + div { background: #1a1a1a; }
.rp-footer strong { display: block; color: #fff; font-size: 11pt; letter-spacing: .05em; } .rp-footer strong span { color: #d93025; } .rp-footer small { color: #777; font-size: 6.5pt; }
.rp-footer__r { text-align: right; }
.rp-p2 { padding: 22pt 24pt 60pt; flex: 1; }
.rp-section { display: flex; align-items: center; gap: 8pt; font-size: 15pt; font-weight: 800; text-transform: uppercase; padding-bottom: 6pt; border-bottom: .6pt solid #ddd; margin-top: 4pt; }
.rp-section i, .rp-contact i { display: block; width: 3pt; height: 17pt; background: #d93025; flex: none; }
.rp-info { width: 100%; border-collapse: collapse; margin-bottom: 22pt; } .rp-info td { padding: 6pt 4pt; font-size: 8.5pt; border-bottom: .6pt solid #ebebeb; } .rp-info td:first-child { color: #999; width: 32mm; } .rp-info td:last-child { font-weight: 600; }
.rp-villa { font-size: 12pt; font-weight: 700; text-transform: uppercase; color: #d93025; padding: 8pt 4pt 6pt; }
.rp-opts { width: 100%; border-collapse: collapse; } .rp-opts td { padding: 5pt 10pt; font-size: 8.5pt; border-bottom: .6pt solid #ebebeb; color: #444; } .rp-opts td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.rp-opts tr:nth-child(even) td { background: #fafafa; } .rp-opts .head td { background: #111 !important; color: #fff; font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; padding: 7pt 10pt; }
.rp-opts .base td:last-child { color: #111; } .rp-opts .extra { color: #d93025; } .rp-opts .incl { color: #999; font-weight: 500 !important; }
.rp-opts .total td { background: #111 !important; color: #fff; padding: 9pt 10pt; border: 0; font-size: 7.5pt; letter-spacing: .1em; } .rp-opts .total td:last-child { font-size: 16pt; letter-spacing: 0; font-weight: 800; }
.rp-notice { background: #fff8f0; border-left: 3pt solid #f5930a; padding: 10pt 14pt; margin-top: 16pt; } .rp-notice strong { display: block; font-size: 6.5pt; color: #c85000; letter-spacing: .1em; margin-bottom: 4pt; } .rp-notice p { font-size: 7.5pt; color: #666; line-height: 1.6; }
.rp-contact { margin-top: 16pt; display: flex; align-items: center; gap: 8pt; font-size: 8pt; } .rp-contact i { height: 13pt; } .rp-contact strong { color: #d93025; font-size: 7.5pt; letter-spacing: .1em; } .rp-contact span { color: #555; }
.rp-plan { padding: 10pt 0 14pt; } .rp-plan img { width: 100%; max-height: 150mm; object-fit: contain; }
.rp-opts .fam td { background: #fff !important; color: #d93025; font-size: 6.8pt; font-weight: 700; letter-spacing: .1em; padding: 8pt 10pt 3pt; border-bottom: 0; text-align: left !important; }
.rp-section--gap { margin-top: 20pt; } .rp-empty { color: #999; padding: 10pt 0; }
.rp-hint { display: block; font-size: 6.6pt; font-weight: 400; color: #999; margin-top: 2pt; line-height: 1.4; white-space: normal; }
.rp-plan-comment { margin-top: 14pt; padding: 10pt 14pt; background: #f2f5fa; border-left: 3pt solid #111; }
.rp-plan-comment strong { display: block; font-size: 6.5pt; color: #111; letter-spacing: .1em; margin-bottom: 4pt; }
.rp-plan-comment p { font-size: 8pt; color: #444; line-height: 1.6; white-space: pre-line; margin: 0; }
.rp-notice__reserve { margin-top: 6pt; font-weight: 700; color: #993d00 !important; }
.rp-signatures { display: flex; gap: 14pt; margin-top: 20pt; }
.rp-signature { flex: 1; border: .6pt solid #ccc; border-top: 3pt solid #d93025; padding: 12pt; min-height: 130pt; }
.rp-signature strong { display: block; font-size: 9pt; letter-spacing: .04em; }
.rp-signature > span { display: block; font-size: 7.5pt; color: #888; margin-top: 2pt; }
.rp-signature__row { margin-top: 20pt; font-size: 7.5pt; color: #777; border-bottom: .6pt solid #ccc; padding-bottom: 22pt; }
.rp-signature__box { margin-top: 26pt; font-size: 7.5pt; color: #777; border-top: .6pt solid #ddd; padding-top: 8pt; }
@media (max-width: 820px) { .rp-p1 { grid-template-columns: 1fr; } .rp-img--main { height: 60mm; } }

/* Notice descriptive (à la suite du récapitulatif) : mêmes données et même logique que le PDF, croix alignées sur la description */
.recap-notice { width: 210mm; max-width: 100%; background: #fff; box-shadow: var(--shadow-lg); color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding-bottom: 18pt; page: notice; }
.nt-head { padding: 20pt 24pt 10pt; } .nt-head h2 { font-size: 19pt; font-weight: 800; text-transform: uppercase; border-bottom: 2pt solid #111; padding-bottom: 6pt; }
.nt-head p { font-size: 7.6pt; font-weight: 700; color: #d93025; margin-top: 8pt; text-transform: uppercase; }
.nt { width: calc(100% - 48pt); margin: 0 24pt; border-collapse: collapse; table-layout: fixed; }
.nt .nt-col-d { width: 58.5%; } .nt .nt-col-1 { width: 6.4%; } .nt .nt-col-2, .nt .nt-col-3, .nt .nt-col-4 { width: 11.7%; }
.nt thead { display: table-header-group; }
.nt thead th { background: #111; color: #fff; font-size: 5.5pt; font-weight: 700; line-height: 1.35; text-align: center; padding: 7pt 3pt; border-left: .5pt solid #505050; }
.nt thead .nt-th-d { font-size: 6.8pt; border-left: 0; text-transform: uppercase; }
.nt td { border: .5pt solid #b0b0b0; vertical-align: top; }
.nt tr { break-inside: avoid; page-break-inside: avoid; }
.nt-d { padding: 5pt 9pt; font-size: 7.2pt; line-height: 1.35; color: #2d2d2d; } .nt-d strong { font-size: 7.6pt; color: #181818; } .nt-d p { margin: 0; } .nt-gap { height: 5pt; }
.nt-title td { border-bottom-style: hidden; break-after: avoid; page-break-after: avoid; } .nt-title .nt-d { padding-bottom: 0; } .nt-desc .nt-d { padding-top: 3pt; }
.nt-c { text-align: center; padding: 3.5pt 0 0; }
.nt-x { display: inline-block; position: relative; width: 8pt; height: 8pt; }
.nt-x::before, .nt-x::after { content: ""; position: absolute; left: 3.4pt; top: -1.4pt; width: 1.2pt; height: 10.8pt; background: #181818; transform: rotate(45deg); } .nt-x::after { transform: rotate(-45deg); }
.nt-h1 th, .nt-h2 th { background: #111; color: #fff; text-align: left; text-transform: uppercase; }
.nt-h1 th { font-size: 8.4pt; padding: 6pt 12pt; border-left: 3pt solid #d93025; } .nt-h2 th { background: #3a3a3a; font-size: 7.6pt; padding: 4.5pt 12pt; }

@media print {
  @page { size: A4; margin: 0; }
  @page notice { size: A4; margin: 14mm 0 16mm; }
  .recap-notice { width: 210mm; box-shadow: none; margin: 0; padding-bottom: 0; }
  .sidebar, .topbar, .recap-actions, .flashes, .backdrop { display: none !important; }
  body { background: #fff; } .main { margin: 0 !important; } .content { padding: 0 !important; max-width: none !important; }
  .recap-doc { display: block; gap: 0; }
  .recap-page { width: 210mm; min-height: 297mm; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  .recap-page:last-child { break-after: auto; page-break-after: auto; }
}

/* ── Parrainage v2 et suivi des ventes ─────────────────────────────────────────────────────────────── */
.badge--info { background: var(--color-info-soft); color: #1e40af; }
.badge--warn { background: var(--color-warning-soft); color: #9a4a06; }
.badge--danger { background: var(--color-danger-soft); color: #9b1c1c; }
.grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kpi--link { text-decoration: none; color: inherit; transition: border-color .15s; } .kpi--link:hover { border-color: var(--gray-500); }
.pad { padding: 12px 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Inscription d'un partenaire parrainé (page publique, sans menu) et lecture des textes juridiques */
.onboard { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-8) var(--space-4); background: var(--gray-100); }
.onboard__card { width: 100%; max-width: 720px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.onboard .wordmark { color: var(--bs-black); }
.onboard fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.onboard legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-md); }
.onboard .done-icon { margin-top: var(--space-4); }
.legal h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); } .legal p { margin: 0 0 var(--space-3); line-height: 1.55; }
@media (max-width: 640px) { .onboard { padding: 0; } .onboard__card { border-radius: 0; border: 0; padding: var(--space-5) var(--space-4); } }

/* Chronologie (dossier de parrainage, historique des statuts) */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.timeline li { position: relative; font-size: var(--text-sm); line-height: 1.45; }
.timeline li::before { content: ""; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-black); border: 2px solid var(--color-surface); }
.timeline .sub { display: block; }
.timeline--compact { gap: var(--space-2); } .timeline--compact .sub { display: inline; }

/* Sélecteur de statut de vente (fiche configuration) */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); overflow: hidden; }
.seg__btn { padding: 10px 4px; font: inherit; font-size: var(--text-sm); font-weight: 600; background: var(--color-surface); border: 0; border-right: 1px solid var(--gray-300); cursor: pointer; touch-action: manipulation; }
.seg__btn:last-child { border-right: 0; } .seg__btn:hover:not(:disabled) { background: var(--gray-100); }
.seg__btn.is-active { background: var(--bs-black); color: #fff; cursor: default; }


/* Suivi des ventes : colonnes par statut */
.board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); align-items: start; }
.board__col { background: var(--gray-100); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.board__hint { margin: 0 0 var(--space-1); }
.board__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.board__title { font-weight: 700; text-decoration: none; color: inherit; overflow-wrap: anywhere; } .board__title:hover { text-decoration: underline; }
.board__meta { font-size: var(--text-sm); overflow-wrap: anywhere; }
.board__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.board__empty { margin: 0; padding: var(--space-2); text-align: center; } .board__more { text-align: center; text-decoration: none; padding: var(--space-2); }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .board { grid-template-columns: 1fr; } }

/* Tableau de bord : entonnoir des ventes */
.funnel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.funnel__step { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; color: inherit; } .funnel__step:hover { border-color: var(--gray-500); }
.funnel__n { font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; }
@media (max-width: 560px) { .funnel { grid-template-columns: 1fr; } }