/* Rendavis — design system : neutres froids, accent indigo → violet, surfaces en relief. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root {
  /* Accent */
  --brand: #5B4FE9;
  --brand-dark: #4636D6;
  --brand-2: #8B5CF6;
  --brand-light: #F0EEFF;
  --brand-50: #F7F6FF;
  --brand-ring: rgba(91, 79, 233, .2);
  --brand-grad: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --accent: var(--brand);

  /* Neutres */
  --ink: #0F1222;
  --ink-2: #3B4054;
  --muted: #6B7085;
  --subtle: #9CA1B5;
  --border: #E6E8F0;
  --border-strong: #D5D8E4;
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #F2F3F8;

  /* États */
  --danger: #D92D20;
  --danger-bg: #FEF3F2;
  --danger-border: #FECDCA;
  --success: #067647;
  --success-bg: #ECFDF3;
  --success-border: #ABEFC6;
  --warning: #B54708;
  --warning-bg: #FFFAEB;
  --warning-border: #FEDF89;
  --info: #175CD3;
  --info-bg: #EFF8FF;
  --info-border: #B2DDFF;

  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px -4px rgba(16, 24, 40, .08);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Tons réutilisables : chaque composant lit --tone / --tone-bg / --tone-border. */
.tone-neutral { --tone: var(--ink-2); --tone-bg: var(--surface-2); --tone-border: var(--border); }
.tone-brand { --tone: var(--brand); --tone-bg: var(--brand-light); --tone-border: #DAD5FF; }
.tone-success { --tone: var(--success); --tone-bg: var(--success-bg); --tone-border: var(--success-border); }
.tone-warning { --tone: var(--warning); --tone-bg: var(--warning-bg); --tone-border: var(--warning-border); }
.tone-danger { --tone: var(--danger); --tone-bg: var(--danger-bg); --tone-border: var(--danger-border); }
.tone-info { --tone: var(--info); --tone-bg: var(--info-bg); --tone-border: var(--info-border); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { margin: 0 0 6px; letter-spacing: -.02em; line-height: 1.25; font-weight: 700; color: var(--ink); }
h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
h2 { font-family: var(--font-display); font-size: 17px; }
h3 { font-size: 14.5px; font-weight: 650; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; padding-left: 20px; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: #DAD5FF; }

/* ---------------------------------------------------------- Pages publiques */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 32px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(230, 232, 240, .8);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.03em; color: var(--ink); }
.brand::before {
  content: ""; margin-right: 9px; width: 26px; height: 26px; border-radius: 8px;
  background: url("/brand/rendavis-icon.svg?v=2") center / cover no-repeat;
  box-shadow: 0 4px 10px -2px rgba(91, 79, 233, .45);
}
.brand span { color: var(--brand); }
.brand:hover { text-decoration: none; color: var(--ink); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); font-size: 13px; }

.page { max-width: 880px; margin: 0 auto; padding: 36px 20px 72px; }
.page.wide { max-width: 1180px; }
.footer { text-align: center; color: var(--subtle); font-size: 12.5px; padding: 32px 0 40px; }

/* ---------------------------------------------------------------- Cartes */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card > h2:first-child, .card > h3:first-child { margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-head h2 { margin: 0; }
.card-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.card-head-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand); flex-shrink: 0; box-shadow: inset 0 0 0 1px #DAD5FF; }
.card-head-action { flex-shrink: 0; display: flex; gap: 8px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title h2, .section-title h3 { margin: 0; }
.card-flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: 14px; }
.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 > .card { margin-bottom: 0; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; gap: 14px; }
  table { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------- Chiffres clés */
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-grid + .stat-grid { margin-top: 12px; }
@media (max-width: 900px) { .stat-grid, .stat-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 14px;
  background: linear-gradient(180deg, var(--tone-bg, var(--surface-2)) 0%, var(--surface) 85%);
  border: 1px solid var(--tone-border, var(--border));
  color: var(--ink);
  min-width: 0;
}
a.stat { transition: transform .15s, box-shadow .15s; }
a.stat:hover { text-decoration: none; color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 30px; }
.stat-top .stat-ico { order: 2; }
.stat-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--tone, var(--ink-2)); box-shadow: 0 0 0 1px var(--tone-border, var(--border)), var(--shadow-sm); }
.stat-label { font-size: 12.5px; font-weight: 550; color: var(--ink-2); line-height: 1.3; padding-top: 6px; }
.stat-value { margin-top: auto; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-hint { font-size: 12px; color: var(--muted); margin-top: -4px; }

/* --------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--brand-grad); color: white; box-shadow: 0 1px 2px rgba(70, 54, 214, .35), 0 4px 12px -4px rgba(91, 79, 233, .55), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { color: white; filter: brightness(1.06); box-shadow: 0 1px 2px rgba(70, 54, 214, .35), 0 8px 18px -6px rgba(91, 79, 233, .65), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-dark { background: var(--ink); color: white; }
.btn-dark:hover { background: #262A3D; color: white; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
form { margin: 0; }

/* ------------------------------------------------------------ Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge-info { background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }
.badge-locked { background: var(--brand-light); color: var(--brand-dark); border-color: #DAD5FF; }
.badge-locked::before { display: none; }
.plan-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.plan-growth { background: var(--brand-grad); color: white; border-color: transparent; }
.plan-scale { background: var(--ink); color: white; border-color: var(--ink); }

/* ------------------------------------------------------------ Alertes */
.alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; font-weight: 500; border: 1px solid; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }

/* ---------------------------------------------------------- Formulaires */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 16px 0 6px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=url], input[type=search], select, textarea {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 96px; padding: 11px 14px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:hover, select:hover, textarea:hover { border-color: #C2C6D6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 17px; height: 17px; margin: 0; flex-shrink: 0; }
.help { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
/* Un champ = label + contrôle + aide, empilés. Le conteneur porte l'espacement
   vertical pour que les colonnes d'une .form-row restent alignées. */
.field { margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field > label { margin-top: 0; }
.form-row { display: flex; gap: 14px; margin-top: 16px; }
.form-row:first-child, .form-row .form-row { margin-top: 0; }
.form-row > * { flex: 1; min-width: 0; }
.form-row > .field, .form-row > * > label:first-child { margin-top: 0; }
/* Contrôle + bouton sur une même ligne (recherche, ajout rapide). */
.inline-form { display: flex; gap: 10px; align-items: flex-end; }
.inline-form > :first-child { flex: 1; min-width: 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin: 16px 0; background: var(--bg); }
legend { font-weight: 650; font-size: 13px; padding: 0 6px; color: var(--ink); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.checkbox-row input { margin-top: 1px; }
.checkbox-row label { margin: 0; font-weight: 500; color: var(--ink-2); line-height: 1.4; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ------------------------------------------------------------- Tableaux */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; background: var(--bg); border-top: 1px solid var(--border); }
th:first-child { border-left: 1px solid var(--border); border-top-left-radius: 10px; }
th:last-child { border-right: 1px solid var(--border); border-top-right-radius: 10px; }
td:first-child { font-weight: 550; }
.nowrap, td.nowrap { white-space: nowrap; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--brand-50); }
tr:last-child td { border-bottom: none; }
td form { display: inline-block; }

.empty-state { text-align: center; color: var(--muted); padding: 32px 16px; font-size: 13.5px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: linear-gradient(180deg, var(--bg), var(--surface)); }

/* ------------------------------------------------ Lignes de fonctionnalité */
.feature-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.feature-row:first-of-type { padding-top: 4px; }
.feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.feature-row-title { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.feature-row-desc { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 520px; }
.feature-row.locked .feature-row-title { color: var(--ink-2); }
.feature-row.locked .feature-row-desc { color: var(--subtle); }
.feature-row-insight { font-size: 12.5px; color: var(--brand-dark); background: var(--brand-light); border: 1px solid #DAD5FF; border-radius: 10px; padding: 8px 12px; margin-top: 10px; max-width: 460px; }
.feature-row-control { flex-shrink: 0; }

/* ------------------------------------------------------------- Divers */
.kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-dark); background: var(--brand-light); border: 1px solid #DAD5FF; border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; }
.timeline { border-left: 2px solid var(--border); margin-left: 5px; padding-left: 20px; }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item::before { content: ""; position: absolute; left: -27px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--brand); }
.timeline-item .t-when { font-size: 12px; color: var(--muted); }

.preview-frame { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; background: var(--bg); }
.preview-tag { position: absolute; top: -10px; left: 16px; background: var(--ink); color: white; font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.blurred { filter: blur(3px); opacity: .6; pointer-events: none; user-select: none; }

.score-picker { display: flex; gap: 8px; margin: 10px 0 18px; }
.score-btn { flex: 1; text-align: center; padding: 16px 0; border-radius: 12px; border: 1px solid var(--border-strong); font-weight: 700; font-size: 18px; background: var(--surface); cursor: pointer; transition: all .15s; box-shadow: var(--shadow-sm); }
.score-btn:hover { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); transform: translateY(-1px); }

.tag-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.small { font-size: 12.5px; color: var(--muted); }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.action-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.action-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tone-bg); border: 1px solid var(--tone-border); color: var(--ink-2); font-weight: 500; }
.action-list li .icon { color: var(--tone); }
.action-list li a { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------ App shell */
.icon { flex-shrink: 0; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: radial-gradient(1200px 380px at 70% -120px, rgba(139, 92, 246, .08), transparent 70%), var(--bg); }
.app-main .page { width: 100%; max-width: 1080px; padding: 36px 40px 72px; }
.app-main .page.wide { max-width: 1260px; }

.sidebar {
  width: 252px; flex-shrink: 0;
  /* Au-dessus du contenu (calendrier, en-têtes collants) pour que le panneau de la cloche ne passe jamais dessous. */
  position: sticky; top: 0; z-index: 45; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar .brand { padding: 2px 8px 4px; }
.side-identity { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-50), var(--surface)); border: 1px solid var(--border); }
.side-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: white; background: var(--brand-grad); flex-shrink: 0; box-shadow: 0 4px 10px -4px rgba(91, 79, 233, .6); }
.side-avatar-admin { background: var(--ink); box-shadow: none; }
.side-identity-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.side-identity-name { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.side-nav { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.side-section { display: flex; flex-direction: column; gap: 2px; }
.side-section-title { font-size: 11px; font-weight: 650; color: var(--subtle); padding: 0 10px 6px; text-transform: uppercase; letter-spacing: .07em; }
.side-link {
  position: relative;
  display: flex; align-items: center; gap: 11px; width: 100%;
  height: 36px; padding: 0 10px; border-radius: 9px;
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 500;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.side-link .icon { color: var(--subtle); width: 17px; height: 17px; transition: color .12s; }
.side-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.side-link:hover .icon { color: var(--ink-2); }
.side-link.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 650; }
.side-link.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.side-link.active .icon { color: var(--brand); }
.side-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: white; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.side-footer { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--border); }
.side-logout:hover { color: var(--danger); background: var(--danger-bg); }
.side-logout:hover .icon { color: var(--danger); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head h1 { margin: 0; }
.page-head p { color: var(--muted); margin: 6px 0 0; font-size: 14.5px; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mobile-bar { display: none; }
.nav-overlay { display: none; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .nav-toggle:checked + .app-shell .sidebar { transform: none; }
  .nav-toggle:checked + .app-shell .nav-overlay { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(15, 18, 34, .4); }
  .mobile-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 10px 16px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
  .mobile-menu-btn { margin: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--ink); }
  .mobile-bar-title { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-main .page { padding: 22px 16px 56px; }
  h1 { font-size: 24px; }
}
.nav-toggle:focus-visible + .app-shell .mobile-menu-btn { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------ Onboarding */
.ob-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; }
.ob-main { width: 100%; max-width: 680px; margin: 0 auto; padding: 12px 20px 64px; }
.ob-main.ob-wide { max-width: 820px; }
.ob-head { margin: 10px 0 22px; }
.ob-head h1 { font-size: 28px; }
.ob-head p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.stepper { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.stepper li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--subtle); font-weight: 500; }
.stepper li + li::before { content: ""; width: 18px; height: 1px; background: var(--border-strong); margin-right: 2px; }
.stepper .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 650; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); }
.stepper .current { color: var(--ink); }
.stepper .current .dot { background: var(--brand); border-color: var(--brand); color: white; box-shadow: 0 0 0 3px var(--brand-ring); }
.stepper .done .dot { background: var(--ink); border-color: var(--ink); color: white; }
@media (max-width: 640px) { .stepper .step-label { display: none; } .ob-top { padding: 14px 16px; } .ob-head h1 { font-size: 23px; } }

.ob-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.ob-back { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.ob-back:hover { color: var(--ink); }

/* Tuiles de choix (secteur, préréglage horaires) */
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s, background .12s; }
.choice:hover .choice-body { border-color: var(--border-strong); }
.choice-body { position: relative; }
.choice input:checked + .choice-body { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); background: var(--brand-light); }
.choice input:checked + .choice-body::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: white; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--brand); outline-offset: 2px; }
.choice-emoji { font-size: 22px; line-height: 1; }
.choice-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.choice-sub { font-size: 12px; color: var(--muted); font-weight: 400; }

.auto-detect { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.auto-detect strong { color: var(--ink); font-weight: 550; }
details.more summary { cursor: pointer; color: var(--brand); font-weight: 550; font-size: 13px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { margin-bottom: 8px; }

.slug-preview { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.slug-preview code { color: var(--ink); }

/* Liste de services suggérés, éditable */
.svc-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.svc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 110px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); margin: 0; font-weight: 400; color: var(--ink); }
.svc-row:last-child { border-bottom: none; }
.svc-row.head { background: var(--bg); font-size: 12px; font-weight: 550; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
.svc-row input[type=text], .svc-row input[type=number] { height: 34px; }
.svc-row .svc-name { font-weight: 550; }
.svc-row .unit { position: relative; }
.svc-row .unit input { padding-right: 34px; }
.svc-row .unit span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--subtle); pointer-events: none; }
.svc-row:has(input[type=checkbox]:not(:checked)) .svc-name,
.svc-row:has(input[type=checkbox]:not(:checked)) .unit { opacity: .45; }
.svc-row.custom { background: var(--bg); }
@media (max-width: 640px) {
  .svc-row { grid-template-columns: 24px minmax(0, 1fr) 84px 84px; gap: 6px; padding: 10px; }
}

/* Aperçu de page publique */
.mock-page { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: inline-block; }
.mock-url { margin-left: 8px; flex: 1; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-body { padding: 22px; }
.mock-svc { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.mock-svc:last-child { border-bottom: none; }

.copy-row { display: flex; gap: 8px; }
.copy-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ------------------------------------------------------------ Calendrier */
.cal { --hour: 60px; position: relative; }
.cal.is-loading .cal-body { opacity: .65; transition: opacity .15s; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-nav { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cal-title { font-size: 18px; margin: 0; white-space: nowrap; }
.cal-btn-group { display: inline-flex; }
.cal-btn-group .btn { border-radius: 0; margin-left: -1px; }
.cal-btn-group .btn:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.cal-btn-group .btn:last-child { border-radius: 0 7px 7px 0; }
.cal-icon { width: 30px; padding: 0; font-size: 18px; }
.cal-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-controls select { height: 30px; width: auto; font-size: 13px; padding: 0 30px 0 10px; }
.cal-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.seg button { height: 26px; padding: 0 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.cal-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cal-legend .lg-pending { background: repeating-linear-gradient(45deg, #FDE68A 0 3px, #FFFBEB 3px 6px); border: 1px solid #F59E0B; }
.cal-legend .lg-done { background: var(--surface-2); border: 1px solid var(--border-strong); }
.cal-legend-sep { width: 1px; height: 14px; background: var(--border); }
.cal-legend .small { margin-left: auto; }
@media (max-width: 900px) { .cal-legend .small { display: none; } }

/* Grille jour / semaine */
.tg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.tg-head { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(110px, 1fr)); border-bottom: 1px solid var(--border); background: var(--surface); position: relative; z-index: 3; }
.tg-scroll { max-height: calc(100vh - 250px); min-height: 420px; overflow: auto; }
.tg-grid { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(110px, 1fr)); position: relative; }
@media (max-width: 700px) {
  .tg-head, .tg-grid { grid-template-columns: 44px repeat(var(--cols), minmax(120px, 1fr)); }
  .tg { overflow-x: auto; }
  .tg-scroll { max-height: calc(100vh - 230px); }
}
.tg-gutter { border-right: 1px solid var(--border); }
.tg-colhead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-right: 1px solid var(--border); min-width: 0; }
.tg-colhead:last-child { border-right: 0; }
.tg-daylink { display: flex; align-items: baseline; gap: 6px; background: none; border: 0; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--ink-2); }
.tg-daylink:hover { background: var(--surface-2); }
.tg-wd { font-size: 12px; text-transform: capitalize; color: var(--muted); }
.tg-dn { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.tg-colhead.is-today .tg-dn { background: var(--brand); color: white; border-radius: 6px; padding: 0 6px; }
.tg-count { margin-left: auto; font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.tg-avatar { width: 24px; height: 24px; border-radius: 50%; color: white; display: grid; place-items: center; font-size: 11px; font-weight: 650; flex-shrink: 0; }
.tg-staff { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-times { position: relative; border-right: 1px solid var(--border); background: var(--surface); }
.tg-hour { position: absolute; left: 0; right: 0; }
.tg-hour span { position: absolute; top: -8px; right: 8px; font-size: 11px; color: var(--subtle); font-variant-numeric: tabular-nums; background: var(--surface); padding: 0 2px; }
.tg-hour:first-child span { display: none; }
.tg-col {
  position: relative; border-right: 1px solid var(--border); cursor: cell;
  background-image:
    linear-gradient(to bottom, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, #F4F4F5 1px, transparent 1px);
  background-size: 100% var(--hour), 100% calc(var(--hour) / 2);
  background-position: 0 0, 0 calc(var(--hour) / 2);
}
.tg-col:last-child { border-right: 0; }
.tg-col.is-today { background-color: #FCFCFF; }
.tg-closed { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, rgba(244,244,245,.9) 0 6px, rgba(250,250,250,.9) 6px 12px); pointer-events: none; }
.tg-now { position: absolute; left: -1px; right: 0; height: 2px; background: #EF4444; z-index: 2; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #EF4444; }
.tg-ghost { position: absolute; left: 2px; right: 2px; border: 1px dashed var(--brand); background: var(--brand-light); border-radius: 6px; color: var(--brand-dark); font-size: 11.5px; font-weight: 600; padding: 3px 7px; pointer-events: none; z-index: 1; }

/* Blocs de rendez-vous */
.ev {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  padding: 4px 7px 4px 9px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 30%, white); border-left: 3px solid var(--c); border-radius: 6px;
  background: color-mix(in srgb, var(--c) 10%, white); color: var(--ink);
  box-shadow: var(--shadow-sm); transition: box-shadow .12s, transform .12s;
}
.ev:hover { box-shadow: var(--shadow); z-index: 4; }
.ev:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; z-index: 4; }
.ev-draggable { cursor: grab; touch-action: none; }
.ev.is-dragging { cursor: grabbing; z-index: 10; box-shadow: var(--shadow-lg); opacity: .92; transform: scale(1.02); }
.cal.is-dragging, .cal.is-dragging * { cursor: grabbing !important; user-select: none; }
.ev-time { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--c) 75%, black); font-variant-numeric: tabular-nums; }
.ev-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-svc { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-compact { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.ev-pending { background: repeating-linear-gradient(45deg, #FFFBEB 0 6px, #FEF3C7 6px 12px); border-style: dashed; border-left-style: solid; }
.ev-completed { background: var(--surface-2); border-color: var(--border); opacity: .85; }
.ev-completed .ev-name::after { content: " ✓"; color: var(--success); }
.ev-no_show { background: var(--danger-bg); border-color: var(--danger-border); }
.ev-no_show .ev-name { text-decoration: line-through; }
.ev-cancelled_by_customer, .ev-cancelled_by_business { background: var(--surface); border-style: dashed; opacity: .6; }
.ev-cancelled_by_customer .ev-name, .ev-cancelled_by_business .ev-name { text-decoration: line-through; }

/* Vue mois */
.mv { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); gap: 1px; box-shadow: var(--shadow-sm); }
.mv-head { background: var(--bg); font-size: 12px; font-weight: 550; color: var(--muted); padding: 8px 10px; text-transform: capitalize; }
.mv-cell { background: var(--surface); min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.mv-cell:hover { background: #FCFCFD; }
.mv-cell.is-out { background: var(--bg); }
.mv-cell.is-out .mv-num { color: var(--subtle); }
.mv-cell.is-closed:not(.is-out) { background: repeating-linear-gradient(-45deg, #FFFFFF 0 6px, #FAFAFA 6px 12px); }
.mv-top { display: flex; align-items: center; justify-content: space-between; }
.mv-num { background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; }
.mv-num:hover { background: var(--surface-2); }
.mv-cell.is-today .mv-num { background: var(--brand); color: white; }
.mv-add { opacity: 0; background: none; border: 1px solid var(--border); border-radius: 6px; width: 22px; height: 22px; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; }
.mv-cell:hover .mv-add, .mv-add:focus-visible { opacity: 1; }
.mv-add:hover { background: var(--brand-light); color: var(--brand-dark); border-color: #C7D2FE; }
.mv-ev { display: block; width: 100%; text-align: left; font: inherit; font-size: 11.5px; padding: 2px 6px; border-radius: 5px; border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 10%, white); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.mv-ev b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mv-ev:hover { background: color-mix(in srgb, var(--c) 18%, white); }
.mv-ev.ev-completed { background: var(--surface-2); }
.mv-ev.ev-no_show, .mv-ev.ev-cancelled_by_customer, .mv-ev.ev-cancelled_by_business { text-decoration: line-through; opacity: .6; }
.mv-more { background: none; border: 0; font: inherit; font-size: 11.5px; color: var(--brand); font-weight: 550; text-align: left; padding: 0 6px; cursor: pointer; }
@media (max-width: 700px) {
  .mv-cell { min-height: 64px; padding: 4px; }
  .mv-ev { font-size: 0; padding: 0; height: 6px; border-left-width: 0; background: var(--c); }
  .mv-add { display: none; }
}

/* Vue liste */
.lv-day { margin-bottom: 18px; }
.lv-date { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.lv-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; margin-bottom: 6px; border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 10px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); }
.lv-row:hover { border-color: var(--border-strong); border-left-color: var(--c); box-shadow: var(--shadow); }
.lv-time { display: flex; flex-direction: column; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 48px; }
.lv-time small { font-weight: 400; color: var(--muted); font-size: 12px; }
.lv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-main span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Panneau de détail */
.cal-scrim { position: fixed; inset: 0; background: rgba(9,9,11,.18); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 50; }
.cal-scrim.open { opacity: 1; pointer-events: auto; }
.cal-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .2s ease; z-index: 51; display: flex; flex-direction: column; }
.cal-drawer.open { transform: none; }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dr-close { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--muted); font-size: 13px; }
.dr-close:hover { background: var(--surface-2); color: var(--ink); }
.dr-body { padding: 18px; overflow-y: auto; flex: 1; }
.dr-name { font-size: 20px; margin-bottom: 10px; }
.dr-name a { color: var(--ink); }
.dr-contact { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.dr-facts { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0 0 18px; font-size: 13.5px; }
.dr-facts dt { color: var(--muted); }
.dr-facts dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.dr-facts .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dr-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.dr-edit { margin-bottom: 16px; }
.dr-edit summary { cursor: pointer; font-weight: 550; color: var(--brand); font-size: 13.5px; }
.dr-edit[open] summary { margin-bottom: 4px; }
.dr-closed { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.dr-err { margin: 10px 0 0; }

/* Fenêtre de création */
.cal-modal { border: 1px solid var(--border); border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 24px)); box-shadow: var(--shadow-lg); color: var(--ink); }
.cal-modal::backdrop { background: rgba(9,9,11,.35); }
.cm { padding: 20px 22px; }
.cm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cm-head h3 { font-size: 17px; margin: 0; }
.cm-client { position: relative; }
.cm-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 5; padding: 4px; max-height: 240px; overflow-y: auto; }
.cm-opt { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--ink); }
.cm-opt span { color: var(--muted); font-size: 12.5px; }
.cm-opt:hover, .cm-opt.hi { background: var(--surface-2); }
.cm-opt-new { color: var(--brand-dark); border-top: 1px solid var(--border); border-radius: 0 0 7px 7px; justify-content: flex-start; gap: 4px; }
.cm-chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--brand); border-radius: 8px; background: var(--brand-light); font-size: 13.5px; }
.cm-chosen span { color: var(--ink-2); }
.cm-chosen button { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--muted); }
.cm-chosen button:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.cm-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.cm-summary:empty { display: none; }
.cm-warn { color: var(--warning); font-weight: 550; }
.cm-warn.is-bad { color: var(--danger); }
.cm-ok { color: var(--success); font-weight: 550; }
.cm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cm-err { margin: 12px 0 0; }

/* Notifications éphémères */
.cal-toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.cal-toast { background: var(--ink); color: white; font-size: 13.5px; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-lg); animation: toast-in .18s ease; transition: opacity .25s, transform .25s; }
.cal-toast.ok::before { content: "✓  "; color: #86EFAC; }
.cal-toast.warn::before { content: "⚠  "; color: #FCD34D; }
.cal-toast.error { background: var(--danger); }
.cal-toast.out { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cal-drawer, .cal-toast, .ev { transition: none; animation: none; } }
@media (max-width: 700px) {
  .cal-nav { flex-wrap: wrap; row-gap: 8px; width: 100%; }
  .cal-title { white-space: normal; font-size: 16px; order: -1; width: 100%; }
  .cal-legend { gap: 10px; font-size: 12px; }
}

/* Page de réservation simple (Free) : voir « VITRINE PUBLIQUE » (vx-). */

/* ------------------------------------------------ Page vitrine (Growth) */
.sc-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); }
.sc-top-in { max-width: 1120px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; }
.sc-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); min-width: 0; }
.sc-brand:hover { text-decoration: none; color: var(--ink); }
.sc-brand img, .sc-brand-mark { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.sc-brand-mark { display: grid; place-items: center; background: var(--ink); color: white; font-size: 14px; }
.sc-brand span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-top-nav { display: flex; gap: 18px; margin-left: auto; font-size: 13.5px; }
.sc-top-nav a { color: var(--ink-2); font-weight: 500; }
@media (max-width: 760px) { .sc-top-nav { display: none; } .sc-top-in { padding: 10px 16px; } .sc-top-in .btn { margin-left: auto; } }

.sc { max-width: 1120px; margin: 0 auto; padding: 24px 24px 100px; }
@media (max-width: 760px) { .sc { padding: 16px 16px 110px; } }
.sc-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sc-title h1 { font-size: 30px; letter-spacing: -.03em; margin-bottom: 6px; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.sc-meta > span:not(.sc-open):not(.sc-new) { color: var(--subtle); }
.sc-meta > span:nth-child(3), .sc-meta > a { color: var(--ink-2); }
.sc-meta a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.sc-rating { color: var(--ink) !important; text-decoration: none !important; }
.sc-new { font-weight: 600; color: var(--brand-dark); }
.sc-open { font-weight: 550; color: var(--danger); }
.sc-open.is-open { color: var(--success); }
@media (max-width: 760px) { .sc-title h1 { font-size: 24px; } .sc-share { display: none; } }

/* Galerie façon Airbnb */
.sc-gallery { position: relative; display: grid; gap: 8px; border-radius: 16px; overflow: hidden; height: 440px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sc-gallery.count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.sc-gallery.count-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.sc-gallery.count-3 { grid-template-columns: 2fr 1fr; }
.sc-gallery.count-4 { grid-template-columns: 2fr 1fr 1fr; }
.sc-ph { padding: 0; border: 0; cursor: zoom-in; background: var(--surface-2); overflow: hidden; }
.sc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .2s; }
.sc-ph:hover img { transform: scale(1.03); filter: brightness(.94); }
.sc-ph-0 { grid-row: 1 / span 2; }
.sc-gallery.count-4 .sc-ph-3 { grid-column: 2 / span 2; }
.sc-gallery.count-3 .sc-ph-0 { grid-row: 1 / span 2; }
.sc-allphotos { position: absolute; right: 16px; bottom: 16px; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--ink); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sc-allphotos:hover { background: var(--surface-2); }
.sc-gallery-empty { height: 260px; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.sc-cover-fallback { display: grid; place-items: center; background: radial-gradient(circle at 20% 20%, #E0E7FF, transparent 50%), radial-gradient(circle at 80% 70%, #FCE7F3, transparent 45%), linear-gradient(135deg, #EEF2FF, #F5F3FF); }
.sc-cover-fallback span { width: 96px; height: 96px; border-radius: 24px; background: var(--surface); display: grid; place-items: center; font-size: 40px; font-weight: 700; box-shadow: var(--shadow-lg); overflow: hidden; }
.sc-cover-fallback img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .sc-gallery { height: 260px; margin: 0 -16px; border-radius: 0; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
  .sc-ph:not(.sc-ph-0) { display: none; }
  .sc-ph-0 { grid-row: auto; }
}

.sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; margin-top: 32px; }
@media (max-width: 960px) { .sc-layout { grid-template-columns: 1fr; gap: 0; } .sc-side { display: none; } }
.sc-host { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.sc-host h2 { font-size: 19px; margin: 0; }
.sc-host-logo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: 20px; background: var(--surface); flex-shrink: 0; }
.sc-host-logo img { width: 100%; height: 100%; object-fit: cover; }
.sc-highlights { list-style: none; margin: 0; padding: 22px 0; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--border); }
.sc-highlights li { display: flex; gap: 16px; align-items: flex-start; }
.sc-highlights li > span { font-size: 22px; width: 28px; text-align: center; }
.sc-highlights strong { font-size: 14.5px; }
.sc-highlights p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.sc-promo { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #EEF2FF, #FDF2F8); border: 1px solid #E0E7FF; }
.sc-promo-tag { background: var(--ink); color: white; font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; margin-top: 2px; }
.sc-promo strong { font-size: 16px; }
.sc-promo p { margin: 4px 0 0; color: var(--ink-2); }
.sc-section { padding: 30px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 70px; }
.sc-section:last-child { border-bottom: 0; }
.sc-section > h2 { font-size: 21px; margin-bottom: 16px; }
.sc-about { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 640px; }
.sc-svcs { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.sc-svc { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.sc-svc:last-child { border-bottom: 0; }
.sc-svc:hover { background: var(--bg); }
.sc-svc-name { font-weight: 600; font-size: 15px; }
.sc-svc-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.sc-price { font-weight: 600; }
.sc-amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.sc-amenities li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.sc-amenities li span { font-size: 20px; width: 26px; text-align: center; }
@media (max-width: 560px) { .sc-amenities { grid-template-columns: 1fr; } }
.sc-team { display: flex; flex-wrap: wrap; gap: 20px; }
.sc-member { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 550; width: 84px; text-align: center; }
.sc-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-weight: 650; flex-shrink: 0; }
.sc-avatar.lg { width: 64px; height: 64px; font-size: 24px; background: linear-gradient(135deg, #6366F1, #4338CA); }
.sc-dist { display: grid; gap: 6px; max-width: 360px; margin-bottom: 22px; }
.sc-dist > div { display: grid; grid-template-columns: 14px 1fr 24px; align-items: center; gap: 10px; font-size: 12.5px; }
.sc-bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.sc-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 700px) { .sc-reviews { grid-template-columns: 1fr; } }
.sc-review header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sc-review p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.6; }
.sc-stars { color: var(--ink); letter-spacing: 1px; font-size: 12px; }
.sc-stars span { color: var(--border-strong); }
.sc-reply { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--border-strong); background: var(--bg); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.sc-reply p { margin-top: 4px; }
.sc-verified { margin-top: 20px; }
.sc-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .sc-infos { grid-template-columns: 1fr; } }
.sc-hour { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.sc-hour.is-today { font-weight: 650; }
.sc-hour span:last-child { font-variant-numeric: tabular-nums; }
.sc-where p { margin: 12px 0 0; }
.sc-map { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: radial-gradient(circle at 30% 30%, #EEF2FF, transparent 60%), var(--bg); }
.sc-map > span { font-size: 22px; }
.sc-contact-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sc-contact { max-width: 640px; }
.sc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sc-side { position: relative; }
.sc-book { position: sticky; top: 88px; border: 1px solid var(--border); border-radius: 16px; padding: 24px; background: var(--surface); box-shadow: 0 6px 24px -6px rgba(9,9,11,.14); display: flex; flex-direction: column; gap: 10px; }
.sc-book-price strong { font-size: 22px; letter-spacing: -.02em; }
.sc-book-promo { font-size: 13px; font-weight: 550; color: var(--brand-dark); background: var(--brand-light); border-radius: 8px; padding: 8px 10px; }
.sc-book-note { text-align: center; margin: 0; }
.sc-book-contact { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 12px; border-top: 1px solid var(--border); }
.sc-book-contact .btn { height: 30px; font-size: 12.5px; padding: 0 10px; }
.sc-mobilebar { display: none; }
@media (max-width: 960px) {
  .sc-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px -8px rgba(9,9,11,.12); }
  .sc-mobilebar > div { display: flex; flex-direction: column; line-height: 1.25; }
  .sc-mobilebar strong { font-size: 16px; }
}
.sc-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(9,9,11,.94); color: white; }
.sc-lightbox[open] { display: grid; place-items: center; }
.sc-lightbox img { max-width: min(92vw, 1400px); max-height: 82vh; object-fit: contain; border-radius: 8px; }
.sc-lb-close { position: absolute; top: 18px; left: 18px; }
.sc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 26px; }
.sc-lb-nav.prev { left: 18px; } .sc-lb-nav.next { right: 18px; }
.sc-lb-close, .sc-lb-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: white; cursor: pointer; }
.sc-lb-close:hover, .sc-lb-nav:hover { background: rgba(255,255,255,.2); }
.sc-lb-count { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 13px; opacity: .8; }
.sc-preview-banner { position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; background: var(--ink); color: white; font-size: 13.5px; }
.sc-preview-banner + .sc-top { top: 50px; }

/* ------------------------------------------------ Éditeur de page (dashboard) */
.pe-upsell { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #EEF2FF, #FFFFFF 60%); border-color: #E0E7FF; }
.pe-upsell > div:first-child { max-width: 560px; }
.pe-progress { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.pe-progress i { display: block; height: 100%; background: var(--brand); border-radius: 6px; transition: width .3s; }
.pe-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pe-checks .ok { color: var(--success); font-weight: 550; }
.pe-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pe-logo { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; font-size: 28px; font-weight: 700; background: var(--bg); flex-shrink: 0; }
.pe-logo img { width: 100%; height: 100%; object-fit: cover; }
.pe-file { margin: 0; cursor: pointer; }
.pe-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pe-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.pe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-cover { position: absolute; top: 8px; left: 8px; background: var(--ink); color: white; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.pe-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.45)); opacity: 0; transition: opacity .15s; }
.pe-photo:hover figcaption, .pe-photo:focus-within figcaption { opacity: 1; }
.pe-photo figcaption .btn { height: 26px; padding: 0 8px; font-size: 12px; }
.pe-add { margin: 0; aspect-ratio: 4 / 3; border: 1.5px dashed var(--border-strong); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--ink-2); background: var(--bg); text-align: center; padding: 8px; transition: all .12s; }
.pe-add > span:first-of-type { font-size: 22px; color: var(--brand); }
.pe-add:hover, .pe-add.is-over { border-color: var(--brand); background: var(--brand-light); }
.pe-upload-status { margin-top: 10px; min-height: 18px; }
.pe-amenities { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-chip { margin: 0; cursor: pointer; }
.pe-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pe-chip span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--surface); transition: all .12s; }
.pe-chip:hover span { border-color: var(--border-strong); }
.pe-chip input:checked + span { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.pe-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.pe-review { padding: 14px 0; border-bottom: 1px solid var(--border); }
.pe-review:last-child { border-bottom: 0; }
.pe-review p { margin: 6px 0 8px; color: var(--ink-2); }
.msg.is-unread { border-left: 3px solid var(--brand); }
.msg-body { font-size: 14.5px; line-height: 1.6; margin: 4px 0 8px; }

/* ------------------------------------------- Boîte de test (dev, /dev/inbox) */
.dx { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.dx-top { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 56px; flex: 0 0 auto; background: var(--surface); border-bottom: 1px solid var(--border); }
.dx-top form { margin: 0; }
.dx-title { font-weight: 600; font-size: 14px; color: var(--ink-2); padding-left: 12px; border-left: 1px solid var(--border); }
.dx-pill { font-size: 12px; font-weight: 550; color: var(--warning); background: var(--warning-bg); border: 1px solid #FDE68A; border-radius: 999px; padding: 2px 10px; }
.dx-spacer { flex: 1; }
.dx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: dx-pulse 2s ease-in-out infinite; }
.dx-live.is-off .dx-live-dot { background: var(--subtle); box-shadow: none; animation: none; }
@keyframes dx-pulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

.dx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.dx-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); border-right: 1px solid var(--border); }
.dx-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px 0; border-bottom: 1px solid var(--border); }
.dx-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 13px; font-weight: 550; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dx-tabs a:hover { color: var(--ink); text-decoration: none; }
.dx-tabs a.active { color: var(--ink); border-bottom-color: var(--brand); }
.dx-count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.dx-tabs a.active .dx-count { color: var(--brand-dark); background: var(--brand-light); }
.dx-tabs-sm { padding: 0; margin-top: 16px; }
.dx-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.dx-search input { width: 100%; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; background: var(--surface); }
.dx-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.dx-items { flex: 1; overflow-y: auto; }
.dx-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--ink); border-left: 3px solid transparent; }
.dx-item:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.dx-item.active { background: var(--brand-light); border-left-color: var(--brand); }
.dx-chan { flex: 0 0 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.dx-chan-email { background: var(--brand-light); color: var(--brand-dark); }
.dx-chan-sms { background: var(--info-bg); color: var(--info); }
.dx-chan-whatsapp { background: var(--success-bg); color: var(--success); }
.dx-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-item-row { display: flex; justify-content: space-between; gap: 8px; }
.dx-item-to { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-item-when { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dx-item-title { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-item-tpl { font-size: 11.5px; color: var(--subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-failed { font-family: Inter, sans-serif; font-weight: 600; color: var(--danger); }
.dx-empty-list { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--muted); }

.dx-view { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.dx-back { display: none; padding: 12px 20px 0; font-size: 13px; }
.dx-head { padding: 20px 28px 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.dx-subject { font-size: 19px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 12px; }
.dx-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 13px; }
.dx-meta dt { color: var(--muted); }
.dx-meta dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.dx-meta code { font-size: 12px; background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.dx-head:not(:has(.dx-tabs)) { padding-bottom: 18px; }
.dx-content { flex: 1; padding: 20px 28px; display: flex; flex-direction: column; }
.dx-frame { flex: 1; min-height: 480px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: white; }
.dx-pre { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.dx-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-2); }
.dx-delete { padding: 0 28px 20px; margin: 0; }

.dx-phone-wrap { align-items: center; }
.dx-phone { width: 320px; max-width: 100%; border-radius: 34px; padding: 12px; background: #18181B; box-shadow: var(--shadow-lg); }
.dx-phone-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #F4F4F5; border-radius: 24px 24px 0 0; border-bottom: 1px solid var(--border); }
.dx-phone-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: white; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.dx-phone-name { font-size: 13.5px; font-weight: 600; }
.dx-phone-sub { font-size: 11.5px; color: var(--muted); }
.dx-phone-screen { min-height: 380px; padding: 16px 14px; background: white; border-radius: 0 0 24px 24px; }
.dx-bubble { display: inline-block; max-width: 85%; padding: 9px 12px 18px; position: relative; background: #E9E9EB; color: var(--ink); border-radius: 18px 18px 18px 4px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 70px; }
.dx-bubble-time { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; color: var(--muted); }
.dx-phone.is-whatsapp .dx-phone-top { background: #075E54; color: white; border-bottom: 0; }
.dx-phone.is-whatsapp .dx-phone-sub { color: rgba(255,255,255,.75); }
.dx-phone.is-whatsapp .dx-phone-avatar { background: #25D366; }
.dx-phone.is-whatsapp .dx-phone-screen { background: #ECE5DD; }
.dx-phone.is-whatsapp .dx-bubble { background: white; border-radius: 4px 12px 12px 12px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }

.dx-placeholder { margin: auto; max-width: 380px; padding: 40px 24px; text-align: center; color: var(--muted); }
.dx-placeholder .icon { color: var(--subtle); }
.dx-placeholder h2 { font-size: 16px; color: var(--ink); margin: 12px 0 6px; }
.dx-placeholder p { font-size: 13.5px; margin: 0; }

@media (max-width: 800px) {
  .dx-body { grid-template-columns: 1fr; }
  .dx-pill, .dx-title { display: none; }
  .dx.has-selection .dx-list { display: none; }
  .dx:not(.has-selection) .dx-view { display: none; }
  .dx-back { display: block; }
  .dx-head, .dx-content { padding-left: 16px; padding-right: 16px; }
  .dx-delete { padding: 0 16px 16px; }
}
.dx-filters { display: flex; gap: 8px; margin-top: 8px; }
.dx-filter { flex: 1; min-width: 0; }
.dx-filter label { margin: 0 0 4px; font-size: 11.5px; color: var(--muted); }
.dx-filter select { height: 32px; font-size: 13px; padding-left: 10px; }
.dx-reset { display: inline-block; margin-top: 8px; font-size: 12.5px; }
.dx-role { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 17px; vertical-align: 1px; }
.dx-role-owner { background: var(--warning-bg); color: var(--warning); }
.dx-role-customer { background: var(--surface-2); color: var(--ink-2); }
.dx-muted { color: var(--muted); }

/* ------------------------------------------------------ Cloche du gérant */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-top .brand { padding: 2px 8px 4px; }
.bell { position: relative; }
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell-btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--ink-2); cursor: pointer; border: 1px solid transparent; }
.bell-btn:hover, .bell[open] .bell-btn { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); color: var(--ink); }
.bell-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bell-badge { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: white; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); }
.bell-badge[hidden] { display: none; }
/* La sidebar défile (overflow) : le panneau est donc positionné en fixed pour ne pas être rogné. */
.bell-panel { position: fixed; z-index: 60; top: 14px; left: 252px; width: 380px; max-height: min(560px, calc(100vh - 28px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.bell-head form { margin: 0; }
.bell-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--brand); cursor: pointer; }
.bell-link:hover { text-decoration: underline; }
.bell-list { overflow-y: auto; flex: 1; }
.bell-empty { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--muted); }
.bell-foot { display: block; padding: 10px 14px; text-align: center; font-size: 13px; font-weight: 550; border-top: 1px solid var(--border); background: var(--bg); }
.bell-item { position: relative; display: flex; gap: 10px; padding: 11px 14px; color: var(--ink); border-bottom: 1px solid var(--border); }
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.bell-item.is-unread { background: #F8F9FF; }
.bell-item.is-unread::after { content: ""; position: absolute; top: 16px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.bell-ico { flex: 0 0 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.bell-ico { background: var(--tone-bg); color: var(--tone); }
.bell-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-right: 14px; }
.bell-item-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.bell-item:not(.is-unread) .bell-item-title { font-weight: 500; color: var(--ink-2); }
.bell-item-body { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-item-when { font-size: 11.5px; color: var(--subtle); margin-top: 2px; }
.mobile-bar .bell { margin-left: auto; }
@media (max-width: 900px) {
  .bell-panel { left: 12px; right: 12px; top: 60px; width: auto; }
}

/* Page Notifications */
.notif-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.notif-filters a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 550; color: var(--ink-2); }
.notif-filters a:hover { text-decoration: none; border-color: var(--border-strong); color: var(--ink); }
.notif-filters a.active { background: var(--ink); border-color: var(--ink); color: white; }
.notif-filters a span { font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.card-flush { padding: 0; overflow: hidden; }

/* Réponses aux messages */
.msg-thread { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.msg-reply { margin-left: 18px; padding: 10px 12px; border-radius: 10px; background: var(--brand-light); border: 1px solid #E0E7FF; }
.msg-reply p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.msg-reply.is-failed { background: var(--danger-bg); border-color: var(--danger-border); }
.msg-reply-form { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.msg-reply-form textarea { min-height: 72px; }
.msg-reply-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-reply-actions .small { flex: 1 1 220px; }

/* ============================================ Composants dashboard (v2) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; font-size: 13px; font-weight: 550; color: var(--muted); }
.back-link:hover { color: var(--ink); text-decoration: none; }

.avatar { --h: 250; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; font-weight: 700; color: hsl(var(--h) 55% 32%); background: hsl(var(--h) 80% 93%); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 85%); font-family: var(--font-display); letter-spacing: -.02em; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 42px; height: 42px; font-size: 15px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.person-text { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 600; color: var(--ink); }
.person-name a { color: var(--ink); }
.person-name a:hover { color: var(--brand); }
.person-sub { font-size: 12px; color: var(--muted); }
.cell-actions { text-align: right; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 550; color: var(--ink-2); }
.chip .icon { color: var(--muted); }

.search-bar { position: relative; margin-bottom: 18px; }
.search-bar .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.search-bar input { padding-left: 40px; background: var(--bg); }
.search-bar input:focus { background: var(--surface); }

.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-head h1 { margin: 0; }
.profile-head p { margin: 4px 0 0; color: var(--muted); }

.stars { color: #F5A524; letter-spacing: 1px; font-size: 14px; }
.stars span { color: #DDE0EA; }

.case-list { display: flex; flex-direction: column; gap: 12px; }
.case { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: linear-gradient(180deg, var(--bg), var(--surface) 60%); }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-score { display: flex; align-items: center; gap: 10px; }
.case-status select { width: auto; min-width: 140px; height: 36px; font-size: 13px; }
.case-quote { margin: 12px 0 4px; padding: 10px 14px; border-left: 3px solid var(--danger-border); background: var(--surface); border-radius: 0 10px 10px 0; color: var(--ink-2); font-size: 14px; }
.case form label { margin-top: 12px; }
.case textarea { min-height: 72px; }
.case .form-actions { margin-top: 10px; }

.member-list { display: flex; flex-direction: column; }
.member { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.member:first-child { padding-top: 0; }
.member:last-child { border-bottom: 0; padding-bottom: 0; }
.member-text { flex: 1; min-width: 0; }
.member-name { font-weight: 650; }

.check-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { position: relative; margin: 0; cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; font-weight: 550; color: var(--ink-2); transition: all .12s; }
.check-chip span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.check-chip input:checked + span { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.check-chip input:checked + span::before { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.check-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 110px; align-items: center; gap: 14px; }
.bar-label { font-weight: 550; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-grad); }
.bar-value { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .bar-row { grid-template-columns: 1fr auto; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }

.plan-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, var(--brand-50), var(--surface) 60%); }
.plan-card.is-paid { background: linear-gradient(120deg, #F3EEFF, #EEF4FF 55%, var(--surface)); border-color: #DAD5FF; }
.plan-card-main { display: flex; align-items: center; gap: 14px; }
.plan-card-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: white; background: var(--brand-grad); box-shadow: 0 8px 18px -8px rgba(91, 79, 233, .7); flex-shrink: 0; }
.plan-card-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.upgrade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; padding: 36px; border-radius: 22px; border: 1px solid #DAD5FF; background: radial-gradient(600px 300px at 0% 0%, rgba(139, 92, 246, .14), transparent 70%), var(--surface); box-shadow: var(--shadow); }
.upgrade h1 { font-size: 30px; margin: 0 0 10px; }
.upgrade p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
@media (max-width: 800px) { .upgrade { grid-template-columns: 1fr; padding: 24px; } }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: center; gap: 10px; font-weight: 550; color: var(--ink-2); }
.check-list .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--success-bg); color: var(--success); flex-shrink: 0; }

/* ================================================ Marketing (landing, tarifs) */
.mk { background: var(--surface); overflow-x: clip; }
.mk-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.mk-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(230,232,240,.7); }
.mk-nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.mk-links { display: flex; gap: 4px; }
.mk-links a { padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 550; color: var(--ink-2); }
.mk-links a:hover, .mk-links a[aria-current] { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.mk-nav-cta { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 900px) { .mk-links { display: none; } }
@media (max-width: 480px) { .mk-hide-sm { display: none; } }

.mk-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.mk-grad { background: linear-gradient(100deg, #5B4FE9 10%, #A855F7 60%, #EC4899 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.mk-hero { position: relative; padding: 72px 0 88px; }
.mk-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 380px at 12% 8%, rgba(99, 102, 241, .16), transparent 70%),
    radial-gradient(520px 360px at 88% 18%, rgba(236, 72, 153, .12), transparent 70%),
    radial-gradient(700px 400px at 60% 100%, rgba(139, 92, 246, .10), transparent 70%);
}
.mk-hero-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15,18,34,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,18,34,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%); }
.mk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mk-hero h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.045em; margin: 0 0 20px; text-wrap: balance; }
.mk-lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 30px; max-width: 540px; }
.mk-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-hero-proof { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 20px; flex-wrap: wrap; }
.mk-hero-proof li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.mk-hero-proof .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--success-bg); color: var(--success); }
@media (max-width: 1080px) {
  .mk-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .mk-hero-text { max-width: 680px; }
  .mk-mock { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) { .mk-hero { padding: 44px 0 56px; } .mk-hero h1 { font-size: 34px; } .mk-lead { font-size: 16px; } }

/* Maquette produit */
.mk-mock { position: relative; padding: 28px 12px 36px; }
.mk-window { border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 40px 80px -24px rgba(49, 38, 150, .35), 0 0 0 8px rgba(255,255,255,.55); overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); }
.mk-window-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
.mk-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF6159; }
.mk-window-bar i:nth-child(2) { background: #FFBF2F; }
.mk-window-bar i:nth-child(3) { background: #2ACB42; }
.mk-window-bar span { margin-left: 12px; font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 12px; border-radius: 6px; }
.mk-window-body { display: flex; min-height: 300px; }
.mk-mini-side { width: 52px; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; border-right: 1px solid var(--border); background: var(--bg); }
.mk-mini-logo { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-grad); margin-bottom: 6px; }
.mk-mini-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--subtle); }
.mk-mini-ico.on { background: var(--brand-light); color: var(--brand); }
.mk-mini-main { flex: 1; padding: 16px 18px; min-width: 0; }
.mk-mini-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.mk-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mk-mini-stats div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: linear-gradient(180deg, var(--brand-50), var(--surface)); }
.mk-mini-stats small { display: block; font-size: 10px; color: var(--muted); }
.mk-mini-stats b { font-family: var(--font-display); font-size: 18px; }
.mk-mini-cal { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 20px repeat(4, 34px); gap: 5px; }
.mk-mini-day { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.mk-mini-cal .mk-ev { font-size: 9.5px; font-weight: 600; padding: 5px 6px; border-radius: 7px; line-height: 1.25; overflow: hidden; border-left: 3px solid; }
.mk-ev.ev-a { background: #EEF0FF; color: #3730A3; border-color: #6366F1; }
.mk-ev.ev-b { background: #FDF0F7; color: #9D174D; border-color: #EC4899; }
.mk-ev.ev-c { background: #ECFDF3; color: #05603A; border-color: #12B76A; }
.mk-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.96); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 12px; animation: mk-float 6s ease-in-out infinite; }
.mk-float b { display: block; font-size: 12.5px; color: var(--ink); }
.mk-float small { color: var(--muted); font-size: 11.5px; }
.mk-float-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); flex-shrink: 0; }
.mk-float-1 { top: 0; left: -14px; }
.mk-float-2 { bottom: 4px; left: 8%; animation-delay: -2s; }
.mk-float-3 { top: 56%; right: -16px; animation-delay: -4s; }
@keyframes mk-float { 50% { transform: translateY(-8px); } }
@media (max-width: 980px) { .mk-float-1 { left: 0; } .mk-float-3 { right: 0; } }
@media (max-width: 560px) { .mk-float-3 { display: none; } .mk-window { transform: none; } .mk-mini-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-float { animation: none; } }

/* Bandeau métiers */
.mk-sectors { padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); }
.mk-sectors p { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 14px; }
.mk-sector-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mk-sector-list span { padding: 7px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); }

/* Sections */
.mk-section { position: relative; padding: 96px 0; }
.mk-section-tint { background: linear-gradient(180deg, var(--bg), var(--surface)); }
.mk-head { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.mk-head h2, .mk-head h1 { text-wrap: balance; font-size: 40px; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 14px; }
.mk-head p { font-size: 17px; color: var(--muted); margin: 0; }
.mk-head-left { text-align: left; margin: 0; }
@media (max-width: 640px) { .mk-section { padding: 64px 0; } .mk-head h2, .mk-head h1 { font-size: 30px; } }

/* Fonctionnalités */
.mk-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .mk-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mk-features { grid-template-columns: 1fr; } }
.mk-feature { position: relative; padding: 28px; border-radius: 20px; background: linear-gradient(180deg, var(--surface), var(--surface)) padding-box; border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.mk-feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: radial-gradient(260px 120px at 20% 0%, var(--tone-bg), transparent 75%); pointer-events: none; }
.mk-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mk-feature-ico { position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--tone); box-shadow: 0 0 0 1px var(--tone-border), 0 8px 16px -8px var(--tone); margin-bottom: 18px; }
.mk-feature h3 { position: relative; font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.mk-feature p { position: relative; color: var(--muted); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* La boucle */
.mk-loop-section { background: #0F1222; color: white; overflow: hidden; }
.mk-loop-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 20% 0%, rgba(99,102,241,.35), transparent 70%), radial-gradient(600px 400px at 90% 100%, rgba(236,72,153,.22), transparent 70%); pointer-events: none; }
.mk-loop-section .mk-container { position: relative; }
.mk-head-light h2 { color: white; }
.mk-head-light p { color: rgba(255,255,255,.65); }
.mk-head-light .mk-eyebrow { color: #A5B4FC; }
.mk-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; counter-reset: loop; }
.mk-loop li { position: relative; padding: 22px 18px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.mk-loop li:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -14px; width: 14px; height: 2px; background: linear-gradient(90deg, rgba(165,180,252,.7), rgba(165,180,252,.1)); }
.mk-loop-num { position: absolute; top: 14px; right: 16px; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: rgba(255,255,255,.3); }
.mk-loop-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-grad); color: white; box-shadow: 0 10px 24px -10px rgba(139,92,246,.9); margin-bottom: 16px; }
.mk-loop h3 { color: white; font-family: var(--font-display); font-size: 16px; margin: 0 0 6px; }
.mk-loop p { color: rgba(255,255,255,.62); font-size: 13.5px; margin: 0; line-height: 1.5; }
@media (max-width: 1000px) { .mk-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-loop li::after { display: none; } }
@media (max-width: 560px) { .mk-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Étapes */
.mk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .mk-steps { grid-template-columns: 1fr; } }
.mk-steps article { padding: 30px 28px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border); }
.mk-step-num { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.04em; margin-bottom: 18px; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-steps h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 8px; }
.mk-steps p { color: var(--muted); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* Tarifs */
.mk-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .mk-pricing { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.mk-plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.mk-plan.is-featured { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--brand-grad) border-box; border: 2px solid transparent; box-shadow: 0 30px 60px -24px rgba(91,79,233,.45); }
.mk-plan-flag { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: white; background: var(--brand-grad); box-shadow: 0 6px 14px -6px rgba(91,79,233,.8); }
.mk-plan h3 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.mk-plan-desc { color: var(--muted); font-size: 14px; margin: 0 0 18px; min-height: 42px; }
.mk-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.mk-plan-price span { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mk-plan-price small { color: var(--muted); font-size: 14px; font-weight: 500; }
.mk-plan ul { list-style: none; padding: 20px 0 0; margin: 22px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px; }
.mk-plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); }
.mk-plan li .icon { width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--brand-light); color: var(--brand); }
.mk-pricing-page { padding-top: 72px; }
.mk-pricing-page .mk-container { position: relative; z-index: 1; }
.mk-note { text-align: center; color: var(--muted); font-size: 13.5px; margin: 28px 0 0; }

/* FAQ */
.mk-faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .mk-faq-wrap { grid-template-columns: 1fr; gap: 28px; } }
.mk-faq { display: flex; flex-direction: column; gap: 10px; }
.mk-faq details { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.mk-faq details[open] { border-color: #DAD5FF; box-shadow: var(--shadow); }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 650; font-size: 15.5px; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 18px; font-weight: 500; transition: transform .2s, background .2s; }
.mk-faq details[open] summary::after { transform: rotate(45deg); background: var(--brand-light); color: var(--brand); }
.mk-faq details p { padding: 0 22px 20px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

/* CTA final */
.mk-cta { padding: 0 0 96px; }
.mk-cta-box { position: relative; overflow: hidden; text-align: center; padding: 64px 32px; border-radius: 28px; color: white; background: radial-gradient(500px 300px at 15% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(500px 300px at 90% 100%, rgba(236,72,153,.45), transparent 70%), linear-gradient(135deg, #4F46E5, #7C3AED); box-shadow: 0 40px 80px -30px rgba(91,79,233,.7); }
.mk-cta-box h2 { color: white; font-size: 38px; letter-spacing: -.035em; margin: 0 0 12px; }
.mk-cta-box p { color: rgba(255,255,255,.82); font-size: 17px; margin: 0 0 28px; }
.mk-btn-white { background: white; color: var(--brand-dark); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.mk-btn-white:hover { color: var(--brand-dark); background: #F7F6FF; }
@media (max-width: 560px) { .mk-cta-box { padding: 44px 22px; } .mk-cta-box h2 { font-size: 28px; } }

/* Pied de page */
.mk-footer { border-top: 1px solid var(--border); background: var(--bg); padding: 56px 0 28px; }
.mk-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.mk-footer-grid p { color: var(--muted); max-width: 340px; margin-top: 14px; font-size: 14px; }
.mk-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); margin: 6px 0 14px; }
.mk-footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 10px; }
.mk-footer-grid a:not(.brand) { color: var(--muted); font-size: 14px; }
.mk-footer-grid a:not(.brand):hover { color: var(--ink); }
.mk-footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13px; color: var(--subtle); }
@media (max-width: 700px) { .mk-footer-grid { grid-template-columns: 1fr 1fr; } .mk-footer-grid > div:first-child { grid-column: 1 / -1; } }

/* ============================================ Connexion / inscription */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); }
.auth-main { display: flex; flex-direction: column; padding: 32px 48px; }
.auth-form { width: 100%; max-width: 400px; margin: auto; padding: 40px 0; }
.auth-form h1 { font-size: 32px; margin-bottom: 8px; }
.auth-sub { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.auth-switch { text-align: center; color: var(--muted); margin-top: 22px; font-size: 14px; }
.auth-foot { color: var(--subtle); font-size: 12.5px; margin: 0; }
.auth-side { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px; color: white; background: radial-gradient(500px 360px at 20% 10%, rgba(255,255,255,.2), transparent 70%), radial-gradient(500px 400px at 100% 100%, rgba(236,72,153,.45), transparent 70%), linear-gradient(150deg, #4F46E5, #7C3AED 70%); }
.auth-side-inner { max-width: 420px; }
.auth-quote { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 28px; }
.auth-side ul { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.auth-side li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.92); }
.auth-side li .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.2); }
.auth-mini { display: flex; flex-direction: column; gap: 10px; }
.auth-mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); font-size: 13px; color: rgba(255,255,255,.85); }
.auth-mini-row strong { color: white; }
.auth-mini-row .icon { width: 32px; height: 32px; padding: 8px; border-radius: 10px; background: white; color: var(--brand); flex-shrink: 0; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } .auth-main { padding: 24px 20px; } }

/* ============================================ Automatisations */
.switch { position: relative; display: inline-flex; margin: 0; cursor: pointer; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 44px; height: 26px; border-radius: 999px; background: #D5D8E4; transition: background .2s; position: relative; box-shadow: inset 0 1px 2px rgba(16,24,40,.12); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--brand-grad); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }

.input-unit { position: relative; }
.input-unit input { padding-right: 44px; }
.input-unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; font-weight: 600; pointer-events: none; }

.auto-timeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 8px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.auto-timeline span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); }
.auto-timeline span .icon { color: var(--brand); }
.auto-timeline span.is-key { background: var(--brand-grad); color: white; }
.auto-timeline span.is-key .icon { color: white; }
.auto-timeline i { flex: 1; min-width: 12px; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 10px); }

.auto-group { margin-top: 30px; }
.auto-group-head { margin-bottom: 14px; }
.auto-group-head h2 { margin: 0; font-size: 18px; }
.auto-group-head p { margin: 3px 0 0; color: var(--muted); }
.auto-list { display: flex; flex-direction: column; gap: 14px; }
.auto-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; transition: border-color .2s, box-shadow .2s; }
.auto-card.is-on { border-color: #DAD5FF; box-shadow: 0 0 0 3px rgba(91, 79, 233, .06), var(--shadow); }
.auto-head { display: flex; align-items: flex-start; gap: 14px; }
.auto-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); color: var(--muted); transition: all .2s; }
.auto-card.is-on .auto-ico { background: var(--brand-grad); color: white; box-shadow: 0 8px 16px -8px rgba(91,79,233,.8); }
.auto-title { flex: 1; min-width: 0; }
.auto-title h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 3px; font-family: var(--font-display); font-size: 15.5px; }
.auto-title p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 640px; }
.auto-settings { display: grid; grid-template-columns: 200px minmax(0, 320px); gap: 16px; margin: 16px 0 0 54px; }
.auto-card:not(.is-on) .auto-settings, .auto-card:not(.is-on) .auto-message { opacity: .6; }
.auto-field label { margin: 0 0 6px; }
.auto-message { margin: 14px 0 0 54px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.auto-message summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.auto-message summary::-webkit-details-marker { display: none; }
.auto-message summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.auto-message[open] summary::after { transform: rotate(180deg); }
.auto-message summary .icon { color: var(--brand); }
.auto-message-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 4px 14px 16px; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.var-chip { border: 1px dashed #C4BDFF; background: var(--brand-50); color: var(--brand-dark); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.var-chip:hover { background: var(--brand-light); border-style: solid; }
.auto-preview-label { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.auto-preview-mail { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.auto-preview-subject { padding: 10px 14px; font-weight: 650; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--brand-50), var(--surface)); }
.auto-preview-body { padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.auto-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0 54px; padding: 10px 14px; border-radius: 12px; background: var(--brand-50); border: 1px dashed #C4BDFF; color: var(--brand-dark); font-weight: 550; font-size: 13.5px; }
.auto-locked .btn { margin-left: auto; }
.auto-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 0 54px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 800px) {
  .auto-settings, .auto-message, .auto-foot, .auto-locked { margin-left: 0; }
  .auto-settings, .auto-message-grid { grid-template-columns: 1fr; }
}
.presence-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--brand-50); border: 1px solid #DAD5FF; }

/* ============================================ Questionnaire de satisfaction */
.fb { max-width: 560px; margin: 0 auto; }
.fb-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 28px; }
.fb-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--surface-2); }
.fb-progress span { display: block; height: 100%; width: 33%; background: var(--brand-grad); border-radius: 0 4px 4px 0; transition: width .35s ease; }
.fb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.fb-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-grad); color: white; font-family: var(--font-display); font-weight: 800; font-size: 18px; flex-shrink: 0; }
.fb-service { font-weight: 700; }
.fb-bonus { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); font-size: 12px; font-weight: 700; white-space: nowrap; }
.fb-step h1 { font-size: 24px; line-height: 1.25; margin: 4px 0 6px; }
.fb-step-num { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); }
.fb-sub { color: var(--muted); margin: 0 0 18px; }
.fb-step + .fb-step { margin-top: 28px; }
.fb-card.is-js .fb-step { display: none; margin-top: 0; }
.fb-card.is-js .fb-step.is-active { display: block; animation: fb-in .35s ease; }
@keyframes fb-in { from { opacity: 0; transform: translateX(16px); } }
.fb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.fb-card:not(.is-js) .fb-nav [data-back], .fb-card:not(.is-js) .fb-nav [data-next] { display: none; }

.faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.face { position: relative; margin: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; animation: face-pop .4s both; animation-delay: var(--d); }
@keyframes face-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.face input { position: absolute; opacity: 0; pointer-events: none; }
.face-emoji { font-size: 34px; line-height: 1; filter: grayscale(.5); transition: transform .2s, filter .2s; }
.face-label { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.face:hover { transform: translateY(-3px); border-color: #C4BDFF; }
.face:hover .face-emoji { filter: none; transform: scale(1.12); }
.face:has(input:checked) { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 4px var(--brand-ring); }
.face:has(input:checked) .face-emoji { filter: none; transform: scale(1.2); }
.face:has(input:checked) .face-label { color: var(--brand-dark); }
.face:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 460px) { .face-emoji { font-size: 28px; } .face-label { font-size: 10.5px; } .fb-card { padding: 22px 18px; } }

.fb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-tag { position: relative; margin: 0; cursor: pointer; }
.fb-tag input { position: absolute; opacity: 0; pointer-events: none; }
.fb-tag span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; font-size: 14px; color: var(--ink-2); transition: all .15s; }
.fb-tag:hover span { border-color: #C4BDFF; }
.fb-tag input:checked + span { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); transform: scale(1.04); }
.fb-tag input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.fb-thanks { text-align: center; }
.fb-thanks h1 { font-size: 30px; margin: 6px 0 8px; }
.fb-thanks-emoji { font-size: 52px; line-height: 1; animation: pop-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop-in { from { transform: scale(.2); opacity: 0; } }
.fb-earned { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 16px; padding: 7px 14px; border-radius: 999px; background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); font-weight: 700; font-size: 13.5px; animation: pop-in .5s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.fb-public { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.fb-public h2 { margin-bottom: 4px; }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: confetti-fall 2.6s var(--d) ease-in forwards; opacity: 0; }
@keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .face, .fb-thanks-emoji, .fb-earned, .stamp.is-new { animation: none !important; } }

/* ============================================ Carte de fidélité */
.loyalty { text-align: left; }
.loyalty-card { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; color: white; background: radial-gradient(300px 160px at 100% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(320px 200px at 0% 100%, rgba(236,72,153,.45), transparent 70%), linear-gradient(135deg, #4F46E5, #7C3AED); box-shadow: 0 20px 40px -18px rgba(91,79,233,.8); }
.loyalty-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.loyalty-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.loyalty-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.loyalty-count { font-size: 14px; opacity: .85; }
.loyalty-count b { font-family: var(--font-display); font-size: 26px; opacity: 1; }
.stamps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
@media (max-width: 460px) { .stamps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stamp { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); border: 1.5px dashed rgba(255,255,255,.4); }
.stamp.is-filled { background: white; color: var(--brand); border: 0; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.stamp.is-reward { border-style: solid; border-color: #FCD34D; color: #FCD34D; }
.stamp.is-reward.is-filled { background: #FCD34D; color: #7C2D12; }
.stamp.is-new { animation: stamp-in .6s calc(.5s + var(--i) * 0s) cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes stamp-in { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.loyalty-bottom { margin-top: 16px; font-size: 13.5px; opacity: .92; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.badge-medal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); text-align: center; opacity: .55; filter: grayscale(1); }
.badge-medal span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.badge-medal small { font-size: 11.5px; font-weight: 650; color: var(--ink-2); line-height: 1.25; }
.badge-medal.is-on { opacity: 1; filter: none; background: linear-gradient(180deg, #FFFBEB, var(--surface)); border-color: #FDE68A; }
.badge-medal.is-on span { background: linear-gradient(135deg, #F59E0B, #F97316); color: white; box-shadow: 0 6px 14px -6px rgba(245,158,11,.8); }
.loyalty-admin { max-width: 560px; }
.tag-col { padding: 16px; border-radius: 14px; background: var(--tone-bg); border: 1px solid var(--tone-border); }
.tag-col h3 { color: var(--tone); margin-bottom: 10px; }
.tag-stat { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 9px; background: var(--surface); margin-top: 6px; font-weight: 550; }
.tag-stat b { color: var(--tone); font-variant-numeric: tabular-nums; }

/* ============================================ Packs */
.pack-progress { --tone: var(--brand); }
.pack-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pack-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pack-bar span { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.pack-progress.tone-brand .pack-bar span { background: var(--brand-grad); }
.pack-progress-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pack-progress-meta b { color: var(--ink); }
.pack-stack { display: flex; flex-direction: column; gap: 12px; }
.pack-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.pack-row .pack-progress { flex: 1; min-width: 0; }
.pack-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pack-offer { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: radial-gradient(240px 120px at 100% 0%, var(--brand-50), transparent 70%), var(--surface); box-shadow: var(--shadow-sm); }
.pack-offer.is-archived { opacity: .55; }
.pack-offer-head { display: flex; gap: 12px; align-items: center; }
.pack-offer-head h3 { margin: 0; font-family: var(--font-display); }
.pack-offer-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-grad); color: white; flex-shrink: 0; }
.pack-offer-price b { display: block; font-family: var(--font-display); font-size: 26px; letter-spacing: -.03em; }
.pack-offer-price span { font-size: 12.5px; color: var(--muted); }
.pack-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.client-packs { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.client-pack { padding: 12px 14px; border-radius: 12px; background: var(--brand-50); border: 1px solid #DAD5FF; font-size: 14px; }
.quota { padding: 14px 16px; border-radius: 14px; background: var(--tone-bg); border: 1px solid var(--tone-border); margin-bottom: 8px; }
.quota .pack-bar span { background: var(--tone); }
.quota.tone-brand .pack-bar span { background: var(--brand-grad); }
.quota-top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.quota .small { margin-top: 6px; }

/* ============================================ QR codes */
.qr-box { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.qr-img { padding: 14px; border-radius: 18px; background: white; border: 1px solid var(--border); box-shadow: var(--shadow); }
.qr-img svg { display: block; width: 100%; height: auto; }
.qr-side label { margin-top: 0; }
.tips li { align-items: flex-start; font-weight: 500; }
@media (max-width: 700px) { .qr-box { grid-template-columns: 1fr; } .qr-img { max-width: 240px; } }

.poster-actions { display: flex; gap: 8px; justify-content: center; padding: 20px; }
.poster { width: 148mm; min-height: 200mm; margin: 0 auto 40px; padding: 16mm 14mm; background: white; border-radius: 16px; box-shadow: var(--shadow-lg); text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }
.poster::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55mm; background: radial-gradient(400px 200px at 50% 0%, rgba(139,92,246,.25), transparent 70%); }
.poster > * { position: relative; }
.poster-brand { display: flex; align-items: center; gap: 10px; }
.poster-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-grad); color: white; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.poster-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.poster h1 { font-size: 34px; line-height: 1.1; margin: 14mm 0 8mm; text-wrap: balance; }
.poster-qr { width: 80mm; padding: 5mm; border-radius: 8mm; border: 3px solid #1E1B4B; }
.poster-qr svg { display: block; width: 100%; height: auto; }
.poster-sub { margin: 7mm 0 5mm; font-weight: 600; color: var(--ink-2); }
.poster-steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; counter-reset: s; }
.poster-steps li { counter-increment: s; font-size: 13px; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: var(--brand-light); color: var(--brand-dark); }
.poster-steps li::before { content: counter(s) ". "; }
.poster-url { margin-top: auto; padding-top: 8mm; font-size: 12px; color: var(--muted); }
@media print {
  @page { size: A5; margin: 0; }
  body { background: white; }
  .no-print { display: none !important; }
  .poster { box-shadow: none; border-radius: 0; margin: 0; width: 148mm; height: 210mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.waitlist-box { text-align: center; padding: 26px 22px; border-radius: 16px; border: 1.5px dashed #C4BDFF; background: linear-gradient(180deg, var(--brand-50), var(--surface)); }
.waitlist-box .waitlist-ico { font-size: 34px; }
.waitlist-box h3 { font-family: var(--font-display); font-size: 18px; margin: 6px 0 4px; }
.waitlist-box form { text-align: left; margin-top: 16px; }

/* ============================================ Calendrier : blocages, indicateurs */
.tg-off { position: absolute; left: 2px; right: 2px; z-index: 1; border: 1px dashed #C2C6D6; border-radius: 8px; padding: 4px 8px; text-align: left; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(107,112,133,.10) 0 6px, rgba(107,112,133,.03) 6px 12px), var(--surface-2); }
.tg-off:hover { border-color: var(--danger); color: var(--danger); }
.tg-off span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-wait { font-size: 11px; font-weight: 700; color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 999px; padding: 0 6px; }
.ev-flags { margin-left: 4px; display: inline-flex; gap: 2px; }
.ev-flags i { font-style: normal; font-size: 10.5px; }
.ev-flags .risk-high { color: #D92D20; }
.ev-flags .risk-medium { color: #B54708; }
.lg-flag { font-size: 12px; color: var(--muted); }
.cal-revenue { margin-left: auto; font-size: 12.5px; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.cal-revenue:empty { display: none; }
.dr-insights { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ins { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.ins-ok { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.ins-warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.ins-bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ins-pack { background: var(--brand-light); color: var(--brand-dark); border-color: #DAD5FF; }
.cm-reasons { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================ Abonnement */
.sub-card { background: linear-gradient(120deg, var(--brand-50), var(--surface) 60%); }
.sub-card.is-paid { background: linear-gradient(120deg, #F3EEFF, #EEF4FF 55%, var(--surface)); border-color: #DAD5FF; }
.sub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sub-trial { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.sub-trial-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sub-trial .pack-bar span { background: var(--brand-grad); }
.sub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.sub-facts div { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.sub-facts dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.sub-facts dd { margin: 4px 0 0; font-weight: 600; }
.sub-detail { margin: 12px 0 0; }
.sub-promises { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sub-promises li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success); }
@media (max-width: 700px) { .sub-facts { grid-template-columns: 1fr; } }

/* ============================================ Onboarding v2 */
.ob-shell { background: radial-gradient(900px 400px at 80% -100px, rgba(139,92,246,.12), transparent 70%), var(--bg); }
.ob-progress { position: sticky; top: 0; height: 4px; background: var(--surface-2); z-index: 5; }
.ob-progress span { display: block; height: 100%; background: var(--brand-grad); border-radius: 0 4px 4px 0; transition: width .4s; }
.ob-top { flex-wrap: wrap; }
.ob-eta { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stepper .dot .icon { width: 12px; height: 12px; }
.stepper .dot { width: 26px; height: 26px; }
.stepper .done .dot { background: var(--success); border-color: var(--success); }
.ob-main.ob-wide { max-width: 900px; }
.ob-head .kicker { margin-bottom: 12px; }
.ob-head h1 { font-size: 32px; }
.ob-head-center { text-align: center; }
.ob-card { padding: 24px 26px; }
.ob-q { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; margin: 0 0 14px; }
.ob-q > span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-grad); color: white; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.choice-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .choice-grid.cols-3 { grid-template-columns: 1fr; } }
.choice-lg .choice-body { padding: 18px; gap: 8px; }
.choice-lg .choice-emoji { font-size: 30px; }
.choice-lg .choice-title { font-size: 15.5px; font-family: var(--font-display); }
.choice[hidden] { display: none; }
.stage-flow { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stage-flow li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.stage-flow li span { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.stage-flow li em { font-style: normal; font-size: 11px; }
.stage-flow li + li::before { content: "→"; color: var(--subtle); margin: 0 4px 0 -4px; }

.ob-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.ob-plans .ob-promises, .ob-plans .ob-actions { grid-column: 1 / -1; }
@media (max-width: 760px) { .ob-plans { grid-template-columns: 1fr; } }
.ob-plan { position: relative; margin: 0; cursor: pointer; display: flex; }
.ob-plan input { position: absolute; opacity: 0; pointer-events: none; }
.ob-plan-body { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 26px 24px; border-radius: 20px; border: 2px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: all .15s; }
.ob-plan:hover .ob-plan-body { border-color: #C4BDFF; }
.ob-plan input:checked + .ob-plan-body { border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-ring), var(--shadow-lg); }
.ob-plan input:focus-visible + .ob-plan-body { outline: 2px solid var(--brand); outline-offset: 3px; }
.ob-plan.is-featured .ob-plan-body { background: radial-gradient(320px 180px at 100% 0%, rgba(139,92,246,.14), transparent 70%), var(--surface); }
.ob-plan-flag { position: absolute; top: -13px; left: 22px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: white; background: var(--brand-grad); box-shadow: 0 6px 14px -6px rgba(91,79,233,.8); }
.ob-plan-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.ob-plan-price { color: var(--muted); }
.ob-plan-price b { font-family: var(--font-display); font-size: 30px; color: var(--ink); margin-right: 4px; }
.ob-plan ul { list-style: none; padding: 14px 0 0; margin: 6px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.ob-plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.ob-plan li .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--success-bg); color: var(--success); flex-shrink: 0; }
.ob-plan-note { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--muted); }
.ob-promises { list-style: none; padding: 0; margin: 4px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; }
.ob-promises li { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--success); font-size: 14px; }
.auto-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.auto-channels { grid-column: 1 / -1; }
.check-chip.is-locked span { opacity: .55; cursor: not-allowed; }

/* ============================================ Plan & essai (sidebar) */
.side-plan { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.side-plan .plan-pill:hover { text-decoration: none; filter: brightness(1.05); }
.trial-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

/* ============================================ Atelier : dossiers */
.stage-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650; vertical-align: middle; color: var(--ink-2); background: color-mix(in srgb, var(--c) 12%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); }
.stage-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.page-head h1 .stage-pill { font-family: var(--font); font-size: 13px; margin-left: 6px; }
.rj-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-top: 4px; }
.rj-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 10px; min-height: 180px; border-top: 3px solid var(--c); }
.rj-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rj-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 1px 8px; border: 1px solid var(--border); }
.rj-col-body { display: flex; flex-direction: column; gap: 8px; }
.rj-card { display: block; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.rj-card:hover { text-decoration: none; color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.rj-card.is-late { border-color: var(--danger-border); box-shadow: 0 0 0 2px var(--danger-bg); }
.rj-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.rj-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--brand-dark); }
.rj-item { font-weight: 650; margin-top: 6px; line-height: 1.3; }
.rj-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.rj-foot { margin-top: 8px; }
.rj-empty { text-align: center; color: var(--subtle); padding: 18px 0; }
.rj-more { text-align: center; }
.rj-form .card { margin-bottom: 16px; }
.rj-steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.rj-steps li { flex: 1 1 120px; }
.rj-steps button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: left; transition: all .12s; }
.rj-steps button:hover:not([disabled]) { border-color: var(--c); color: var(--ink); }
.rj-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.rj-steps .done button { color: var(--ink-2); }
.rj-steps .done .rj-dot { background: var(--c); color: white; }
.rj-steps .current button { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, white); color: var(--ink); cursor: default; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.rj-steps .current .rj-dot { background: var(--c); color: white; }
.rj-next { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.rj-next input { flex: 1 1 260px; }
.rj-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.rj-facts dt { color: var(--muted); font-size: 13px; }
.rj-facts dd { margin: 0; }
.rj-qr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 600px) { .rj-qr { grid-template-columns: 1fr; } .rj-qr .qr-img { max-width: 180px; } }
.stg-list { display: flex; flex-direction: column; gap: 8px; }
.stg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.stg-row input[type=text] { flex: 1 1 200px; height: 38px; }
.stg-row input[type=color] { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }
.stg-num { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.stg-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.stg-add { display: flex; gap: 8px; margin-top: 12px; }
.stg-add input { flex: 1; }
.check-chip input[type=radio] + span::before { border-radius: 50%; }

/* ============================================ Étiquettes (aperçu + impression) */
.lbl-formats { display: grid; gap: 8px; }
.lbl-formats .choice-body { padding: 10px 12px; }
.lbl-settings.is-locked { opacity: .6; }
.lbl-preview-wrap { display: grid; place-items: center; padding: 26px; border-radius: 14px; background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--bg) 10px 20px); }
.lbl { box-sizing: border-box; display: flex; align-items: center; gap: 2mm; padding: 1.5mm 2mm; background: white; color: #000; overflow: hidden; font-family: Inter, Arial, sans-serif; }
.lbl-preview { box-shadow: 0 6px 20px -6px rgba(0,0,0,.35); border-radius: 2px; }
.lbl-qr { height: var(--qr, 90%); aspect-ratio: 1; flex-shrink: 0; }
.lbl-qr svg { display: block; width: 100%; height: 100%; }
.lbl-text { min-width: 0; display: flex; flex-direction: column; gap: .4mm; line-height: 1.1; }
.lbl-biz { font-size: 2.3mm; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.lbl-ref { font-size: 3.6mm; font-weight: 800; font-family: ui-monospace, Menlo, monospace; }
.lbl-line { font-size: 2.6mm; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-small { font-size: 2.1mm; }
.print-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.print-area { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 6mm; }
.print-area .lbl { outline: 1px dashed #C2C6D6; }
.print-sheet .sheet { width: 210mm; height: 297mm; padding: 15mm 0 0; display: grid; grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; background: white; box-shadow: var(--shadow-lg); }
.print-sheet .lbl-cell { width: 70mm; height: 37mm; outline: 1px dashed #E0E3EC; }
.tk { width: 72mm; background: white; color: #000; font-family: ui-monospace, Menlo, monospace; font-size: 3mm; padding: 3mm; box-shadow: var(--shadow-lg); }
.tk-biz { font-family: Inter, Arial, sans-serif; font-size: 4.6mm; font-weight: 800; text-align: center; }
.tk-small { font-size: 2.6mm; text-align: center; }
.tk-sep { border-top: 1px dashed #000; margin: 2.5mm 0; }
.tk-title { text-align: center; font-weight: 800; letter-spacing: .2em; }
.tk-ref { text-align: center; font-size: 5.5mm; font-weight: 800; margin: 1mm 0 2mm; }
.tk-table { width: 100%; border-collapse: collapse; font-size: 2.8mm; }
.tk-table td { padding: .6mm 0; border: 0; vertical-align: top; }
.tk-table td:first-child { width: 22mm; font-weight: 700; }
.tk-table tr:hover { background: none; }
.tk-qr { width: 34mm; margin: 0 auto 2mm; }
.tk-qr svg { display: block; width: 100%; height: auto; }
.tk-center { text-align: center; }
@media print {
  body { background: white !important; }
  .print-area { padding: 0; gap: 0; display: block; }
  .print-area .lbl { outline: none; page-break-after: always; break-after: page; }
  .print-sheet .sheet { box-shadow: none; }
  .print-sheet .lbl-cell { outline: none; page-break-after: auto; break-after: auto; }
  .tk { box-shadow: none; width: 100%; padding: 0; }
}

/* ============================================ Suivi public */
.trk { max-width: 520px; margin: 0 auto; padding: 24px 16px 40px; }
.trk-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: var(--ink); color: white; font-size: 13px; font-weight: 600; }
.trk-owner > span { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.trk-owner form { display: inline; }
.trk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 24px; }
.trk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.trk-ref { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.trk-card h1 { font-size: 26px; margin: 0 0 10px; }
.trk-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, white); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 35%, white); margin-bottom: 12px; }
.trk-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); animation: dx-pulse 2s infinite; }
.trk-steps { list-style: none; padding: 0; margin: 18px 0; position: relative; }
.trk-steps li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; color: var(--subtle); }
.trk-steps li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--border); }
.trk-steps li.done:not(:last-child)::after { background: var(--c); }
.trk-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 2px solid var(--border-strong); background: var(--surface); color: white; }
.trk-steps li.done, .trk-steps li.current { color: var(--ink); }
.trk-steps li.done .trk-dot { background: var(--c); border-color: var(--c); }
.trk-steps li.current .trk-dot { border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); background: var(--c); }
.trk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; }
.trk-facts div { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.trk-facts dt { font-size: 12px; color: var(--muted); }
.trk-facts dd { margin: 2px 0 0; font-weight: 650; }
.trk-foot { text-align: center; margin-top: 16px; }

/* ============================================ Bandeau abonnement (accueil) */
.sub-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; border-radius: 16px; border: 1px solid #DAD5FF; background: linear-gradient(120deg, #F3EEFF, #EEF4FF 60%, var(--surface)); color: var(--ink); box-shadow: var(--shadow-sm); }
.sub-banner:hover { text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.sub-banner.is-canceled { border-color: var(--danger-border); background: linear-gradient(120deg, var(--danger-bg), var(--surface)); }
.sub-banner.is-upsell { border-style: dashed; }
.sub-banner-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: white; background: var(--brand-grad); flex-shrink: 0; box-shadow: 0 8px 16px -8px rgba(91,79,233,.7); }
.sub-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.sub-banner-text strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.sub-banner-bar { display: block; height: 5px; border-radius: 999px; background: rgba(91,79,233,.12); margin-top: 6px; max-width: 360px; overflow: hidden; }
.sub-banner-bar i { display: block; height: 100%; background: var(--brand-grad); }
.welcome-alert strong { font-weight: 800; }
@media (max-width: 640px) { .sub-banner { flex-wrap: wrap; } }

/* ============================================ Icônes à la place des emojis */
.choice-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand); box-shadow: inset 0 0 0 1px #DAD5FF; }
.choice-lg .choice-ico { width: 46px; height: 46px; border-radius: 14px; }
.choice input:checked + .choice-body .choice-ico { background: var(--brand-grad); color: white; box-shadow: none; }
.auto-detect-ico { color: var(--brand); display: inline-flex; }
.svc-check { color: var(--success); display: inline-flex; }
.icon-line { display: inline-flex; align-items: center; gap: 6px; }
p.icon-line { display: flex; }
.inline-ico { display: inline-flex; align-items: center; gap: 3px; vertical-align: -2px; color: var(--warning); }
.sector-line { display: inline-flex; align-items: center; gap: 5px; }
.stage-flow li em { display: inline-flex; color: var(--warning); }
.check-chip span .icon { color: currentColor; }
.face-ico { color: var(--fc); filter: grayscale(.25); opacity: .9; transition: transform .2s, filter .2s, opacity .2s; display: inline-flex; }
.face:hover .face-ico, .face:has(input:checked) .face-ico { filter: none; opacity: 1; transform: scale(1.12); }
.fb-tag span .icon { color: var(--brand); }
.fb-thanks-ico { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; color: white; background: var(--brand-grad); box-shadow: 0 14px 28px -12px rgba(91,79,233,.8); animation: pop-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.fb-thanks-ico.is-soft { background: linear-gradient(135deg, #F472B6, #FB7185); }
.welcome-alert .icon { flex-shrink: 0; }
.sc-amenities li span .icon, .sc-trust li span .icon { color: var(--brand); }
.client-pack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.client-pack .icon { color: var(--brand); }
.poster-sub { display: inline-flex; align-items: center; gap: 8px; }
.sc-amenities li span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-light); font-size: 0; }
.sc-highlights li > span .icon { color: var(--brand); }
.waitlist-box .waitlist-ico { width: 54px; height: 54px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; font-size: 0; background: var(--brand-light); color: var(--brand); }
.tg-wait { display: inline-flex; align-items: center; gap: 3px; }
.ins, .lg-flag, .cm-warn { display: inline-flex; align-items: center; gap: 4px; }
.ev-flags i { display: inline-flex; }

/* ============================================ Vérification du compte */
.solo { max-width: 640px; margin: 0 auto; padding: 28px 18px 60px; }
.solo > .brand { display: inline-flex; margin-bottom: 26px; }
.verify { max-width: 640px; }
.verify-step { transition: border-color .2s; }
.verify-step.is-done { border-color: var(--success-border); background: linear-gradient(120deg, var(--success-bg), var(--surface) 60%); }
.verify-head { display: flex; align-items: center; gap: 14px; }
.verify-head h2 { margin: 0; }
.verify-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.verify-head .badge { margin-left: auto; }
.verify-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; background: var(--brand-grad); color: white; }
.verify-step.is-done .verify-num { background: var(--success); }
.code-form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.code-form input { flex: 1 1 200px; }
.code-form input[inputmode=numeric] { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: .45em; text-align: center; height: 52px; }
.code-resend { margin-top: 10px; font-size: 13px; color: var(--muted); }
.btn-link { border: 0; background: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }
.verify-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-verify-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }

/* ============================================ Activation (accueil) */
.activation { border-color: #DAD5FF; background: radial-gradient(420px 180px at 100% 0%, var(--brand-50), transparent 70%), var(--surface); }
.activation-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.activation-head h2 { margin: 0; }
.activation-bar { height: 6px; border-radius: 999px; background: var(--surface-2); margin: 14px 0; overflow: hidden; }
.activation-bar i { display: block; height: 100%; background: var(--brand-grad); border-radius: 999px; }
.activation-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.activation-steps a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); height: 100%; }
.activation-steps a:hover { text-decoration: none; border-color: #C4BDFF; color: var(--ink); }
.activation-steps strong { display: block; font-size: 13.5px; }
.activation-steps small { display: block; font-size: 12px; color: var(--muted); }
.activation-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--brand-light); color: var(--brand); }
.activation-steps .is-done a { background: var(--success-bg); border-color: var(--success-border); }
.activation-steps .is-done .activation-ico { background: var(--success); color: white; }
.activation-steps .is-done strong { text-decoration: line-through; color: var(--muted); }
.card-reminder { border-style: solid; }
.card-reminder.is-urgent { border-color: var(--warning-border); background: linear-gradient(120deg, var(--warning-bg), var(--surface) 70%); }

/* ============================================ Google & paiement */
.g-linked { display: flex; gap: 14px; align-items: center; }
.g-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: white; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); flex-shrink: 0; }
.g-name { font-weight: 700; font-size: 16px; }
.g-rating { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; }
.g-results { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.g-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.g-steps { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.saved-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(135deg, var(--brand-50), var(--surface)); margin-bottom: 14px; }
.saved-card .badge { margin-left: auto; }
.saved-card .icon { color: var(--brand); }
.grid > * { min-width: 0; }
.btn-block { white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.stripe-note { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; }
.check-list li { align-items: flex-start; }
.g-result > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .inline-form { flex-direction: column; align-items: stretch; }
  .g-result { flex-direction: column; align-items: stretch; }
}

/* ===================== Croissance : score, audience, marketing ===================== */
.score-ring { flex: none; display: block; }
.ps-head { display: flex; gap: 18px; align-items: center; }
.ps-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ps-title h2 { margin: 0; }
.ps-todo { list-style: none; padding: 0; margin: 16px 0 12px; display: grid; gap: 8px; }
.ps-todo a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ps-todo a:hover { border-color: var(--brand); box-shadow: 0 6px 18px -10px var(--brand-ring); transform: translateY(-1px); }
.ps-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-text small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ps-impact { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.ps-impact.is-fort { background: #FEF3F2; color: #B42318; }
.ps-impact.is-moyen { background: var(--warning-bg); color: var(--warning); }
.ps-impact.is-bonus { background: var(--brand-light); color: var(--brand-dark); }
.ps-pts { font-weight: 800; color: var(--success); white-space: nowrap; }
.pe-checks span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 640px) {
  .ps-head { flex-direction: column; align-items: flex-start; }
  .ps-todo a { grid-template-columns: 1fr auto; }
  .ps-impact { grid-column: 1 / -1; justify-self: start; }
}

.growth-strip { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; margin-bottom: 18px; }
.growth-strip > a { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 18px; color: inherit; text-decoration: none; border-left: 1px solid var(--border); transition: background .15s; }
.growth-strip > a:first-child { border-left: 0; flex-direction: row; align-items: center; gap: 14px; }
.growth-strip > a:hover { background: var(--brand-50); }
.growth-strip .gs-score span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.growth-strip small { color: var(--muted); font-size: 13px; }
.gs-kpi strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; }
@media (max-width: 860px) {
  .growth-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .growth-strip > a:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
  .growth-strip > a:nth-child(2) { border-left: 0; }
}

.aud-chart { width: 100%; height: auto; display: block; margin-top: 6px; }
.funnel { display: grid; gap: 12px; }
.fn-row { display: grid; grid-template-columns: minmax(120px, 1.3fr) 2fr auto; gap: 12px; align-items: center; }
.fn-label { font-size: 14px; color: var(--ink-2); }
.fn-track { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fn-track i { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); }
.fn-val { min-width: 76px; text-align: right; white-space: nowrap; }
.fn-val small { color: var(--muted); font-size: 12px; }
.fn-val small.is-bad { color: var(--danger); }
.aud-locked { position: relative; }
.aud-blur { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; max-height: 190px; overflow: hidden; }
.aud-locked > :not(.aud-blur) { position: relative; margin-top: 12px; }
.aud-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.aud-tips a { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; background: var(--brand-50); }
.aud-tips a:hover { border-color: var(--brand); }
.aud-tips a > svg { color: var(--brand); margin-top: 2px; flex: none; }
.aud-tips span { display: flex; flex-direction: column; gap: 3px; }
.aud-tips small { color: var(--muted); font-size: 13px; line-height: 1.4; }

.link-copy { margin: 0; min-width: 220px; }
.link-copy input { font-size: 13px; padding: 8px 10px; }
.dom-list { display: grid; gap: 8px; margin-top: 12px; }
.dom-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 0; }
.dom-item .dom-name { font-weight: 700; flex: 1; min-width: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.dom-item.is-taken { opacity: .6; }
.dom-active { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.dom-active > div { flex: 1; color: var(--ink); }
.dns-table code { font-size: 12.5px; word-break: break-all; }

/* Barre gérant sur la page publique */
.owner-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; width: min(920px, calc(100% - 24px)); background: rgba(15, 18, 34, .94); color: #fff; border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(15, 18, 34, .5); backdrop-filter: blur(8px); font-family: Inter, system-ui, sans-serif; }
.owner-bar-inner { display: flex; align-items: center; gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
.owner-bar a { color: #fff; text-decoration: none; }
.owner-bar .owner-score, .owner-bar .owner-stat, .owner-bar .owner-domain { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; }
.owner-bar .owner-score:hover, .owner-bar .owner-stat:hover, .owner-bar .owner-domain:hover { background: rgba(255, 255, 255, .08); }
.owner-bar span { display: flex; flex-direction: column; line-height: 1.25; }
.owner-bar strong { font-size: 14px; }
.owner-bar small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.owner-bar .score-ring circle:first-child { stroke: rgba(255, 255, 255, .15); }
.owner-bar .score-ring text { fill: #fff; }
.owner-bar .owner-domain { background: linear-gradient(135deg, rgba(99, 102, 241, .35), rgba(139, 92, 246, .35)); }
.owner-bar .owner-actions { margin-left: auto; flex-direction: row; align-items: center; gap: 6px; }
.owner-bar .btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; }
.owner-close { background: none; border: 0; color: rgba(255, 255, 255, .7); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; }
.owner-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 640px) { .owner-bar .owner-stat { display: none; } .owner-bar .owner-actions .btn { display: none; } }

/* Bandeau consentement (scripts de mesure) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; max-width: 520px; margin-left: auto; background: #fff; color: #0F1222; border: 1px solid #E6E8F0; border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 40px -14px rgba(15, 18, 34, .35); font: 14px/1.45 Inter, system-ui, sans-serif; }
.consent[hidden] { display: none; }
.consent p { margin: 0 0 10px; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tbl-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tbl-scroll table { min-width: 460px; }
.px-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.px-grid > .field { margin-top: 0; }
.px-grid > .form-actions { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 720px) { .px-grid { grid-template-columns: 1fr; } }
.link-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.link-copy code { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); padding: 5px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ps-impact { min-width: 108px; text-align: center; }
@media (max-width: 640px) { .ps-impact { min-width: 0; } }

/* ===================== Promotions ===================== */
.promo-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; }
.btn.has-promo { border-color: #86EFAC; background: #F0FDF4; }
.btn.has-promo:hover { border-color: #22C55E; }
.promo-legend { display: flex; align-items: center; gap: 6px; color: #166534; margin: -4px 0 12px; }
.promo-banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border: 1px solid #BBF7D0; color: #14532D; font-size: 14px; margin: 10px 0 14px; }
.promo-banner svg { flex: none; margin-top: 2px; color: #16A34A; }
.price-box { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 14px 0; background: var(--surface-2); display: grid; gap: 6px; font-size: 14px; }
.price-box > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price-box s { color: var(--muted); }
.price-box .is-discount { color: #166534; font-weight: 600; }
.price-box .is-discount span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.price-box .is-total { border-top: 1px dashed var(--border-strong); padding-top: 6px; }
.price-box .is-total strong { font-size: 18px; }
.promo-note { color: var(--warning); margin: -6px 0 10px; }
.promo-code-form { margin: 0 0 14px; }
.promo-code-form label { margin-top: 0; }
.code-row { display: flex; gap: 8px; }
.code-row input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.code-msg { margin-top: 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.code-msg.is-error { color: var(--danger); }
.code-msg.is-ok { color: #166534; font-weight: 600; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-chip input:checked + span { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.rules-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--border); font-size: 13.5px; color: var(--ink-2); margin-bottom: 18px; }
.rules-strip span { display: inline-flex; align-items: center; gap: 6px; }
.rules-strip svg { color: var(--success); }
.promo-list { display: grid; gap: 10px; }
.promo-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.promo-row.is-off { opacity: .6; }
.promo-pct { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #22C55E, #16A34A); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.promo-pct small { font-size: 12px; margin-left: 1px; }
.promo-code code { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 2px dashed var(--brand); color: var(--brand-dark); background: var(--brand-50); font-weight: 800; font-size: 15px; letter-spacing: .05em; }
.promo-main { min-width: 0; display: grid; gap: 4px; }
.promo-main > strong { font-size: 15px; }
.promo-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.promo-usage { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.promo-usage i { flex: 1; max-width: 180px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.promo-usage b { display: block; height: 100%; background: var(--brand-grad); }
.promo-form-title { margin: 4px 0 12px; font-size: 15px; }
.promo-row .cell-actions { display: flex; gap: 6px; align-items: center; }
.cell-actions form { margin: 0; display: inline-block; }
@media (max-width: 640px) {
  .promo-row { grid-template-columns: auto 1fr; }
  .promo-row .cell-actions { grid-column: 1 / -1; }
}
.promo-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.promo-main .badge { align-self: flex-start; }
.promo-pct { display: flex; align-items: center; justify-content: center; }
.promo-meta { display: block; }
.promo-meta svg { vertical-align: -2px; margin-right: 4px; }
.promo-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===================== Multi-centres ===================== */
.centre-switch { margin: -4px 12px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; }
.centre-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--ink-2); font-weight: 600; }
.centre-switch summary::-webkit-details-marker { display: none; }
.centre-switch summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.centre-switch[open] summary::after { content: "▴"; }
.centre-switch-menu { border-top: 1px solid var(--border); padding: 6px; display: grid; gap: 2px; }
.centre-switch-menu form { margin: 0; }
.centre-switch-menu button, .centre-switch-menu a { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; background: none; border-radius: 8px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; }
.centre-switch-menu button:hover, .centre-switch-menu a:hover { background: var(--brand-50); }
.centre-switch-menu .is-current { color: var(--brand-dark); font-weight: 700; }
.centre-switch-menu .dot { width: 14px; display: inline-flex; justify-content: center; }
.centre-switch-menu .dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.centre-switch-menu a { color: var(--muted); border-top: 1px dashed var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; }
.centre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.centre-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(15, 18, 34, .04); }
.centre-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.centre-card.is-paused { background: var(--surface-2); }
.centre-head { display: flex; gap: 12px; align-items: flex-start; }
.centre-avatar { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 800; }
.centre-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.centre-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.centre-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.centre-stats > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.centre-stats b { font-size: 18px; }
.centre-stats small { color: var(--muted); font-size: 12px; }
.centre-warn { color: var(--warning); margin: 0; }
.centre-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.centre-actions form { margin: 0; }
.sub-shared { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--muted); }
.sc-centres { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sc-centre { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; color: inherit; text-decoration: none; background: #fff; }
.sc-centre:hover { border-color: var(--brand); }
.sc-centre > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-centre small { color: var(--muted); }
.sc-promo-slots { background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border-color: #BBF7D0; }
.sc-promo-slots .sc-promo-tag { background: #16A34A; }
.sc-promo-slots p { margin: 0 0 4px; }

/* ===================== Simulateur d'offre ===================== */
.sim { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; text-align: left; }
.sim-form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
.sim-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.sim-block legend { font-weight: 700; font-size: 14px; margin-bottom: 10px; padding: 0; }
.sim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sim-grid .field { margin: 0; }
.sim-volume { margin: 0; }
.sim-volume input[type=range] { width: 100%; accent-color: var(--brand); }
.sim-volume strong { color: var(--brand-dark); }
.sim-needs { display: grid; gap: 2px; }
.sim-needs .checkbox-row { margin: 0; padding: 6px 0; }
.sim-needs .checkbox-row[hidden] { display: none; }
.sim-result { position: sticky; top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 18px 40px -24px rgba(15, 18, 34, .25); }
.sim-reco { border-radius: 14px; padding: 16px; background: var(--surface-2); }
.sim-reco.is-growth { background: var(--brand-grad); color: #fff; }
.sim-reco.is-growth .small { color: rgba(255, 255, 255, .8); }
.sim-reco.is-scale { background: #0F1222; color: #fff; }
.sim-reco.is-scale .small { color: rgba(255, 255, 255, .7); }
.sim-plan { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.sim-price { font-weight: 600; opacity: .9; }
.sim-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.sim-why li { padding-left: 22px; position: relative; }
.sim-why li::before { content: "✓"; position: absolute; left: 2px; color: var(--success); font-weight: 800; }
.sim-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-figures > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.sim-figures b { font-size: 18px; }
.sim-figures small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.sim-note { margin: 0; }
@media (max-width: 860px) { .sim { grid-template-columns: 1fr; } .sim-result { position: static; } }
@media (max-width: 520px) { .sim-grid { grid-template-columns: 1fr; } }
.sim-block { background: none; }
.sim-grid label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-row input { flex: 1; min-width: 0; }

/* ===================== Règles de l'agenda ===================== */
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.rules-grid > .card { margin-bottom: 18px; }
@media (max-width: 960px) { .rules-grid { grid-template-columns: 1fr; } }
.rule-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; margin: 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.rule-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.rule-toggle-text strong { font-size: 14px; color: var(--ink); }
.rule-toggle-text small { color: var(--muted); font-weight: 400; font-size: 12.5px; line-height: 1.4; }
.rule-toggle .switch { flex: none; }
.choice-list { display: grid; gap: 8px; }
.rules-save { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 35%); padding: 16px 0; margin-top: 0; z-index: 3; }
.freeze-list { display: grid; gap: 8px; margin-bottom: 14px; }
.freeze-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.freeze-row > span:first-child { flex: 1; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.freeze-row.is-past { opacity: .55; }
.freeze-row form { margin: 0; }
.freeze-form { align-items: flex-end; flex-wrap: wrap; }
.freeze-btn { flex: 0 0 auto !important; }
.policy-list { margin: 12px 0 0; padding: 10px 14px 10px 30px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.policy-warn { display: flex; align-items: center; gap: 6px; color: var(--warning); margin-top: 12px; }
.agenda-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.agenda-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-rules span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; color: var(--ink-2); }
.agenda-rules .is-warn { background: var(--warning-bg); color: var(--warning); border-color: #FEDF89; }
.task-panel { background: var(--surface); border: 1px solid #FEDF89; border-left: 4px solid #F59E0B; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.task-panel.is-call { border-color: #B2DDFF; border-left-color: #2E90FA; }
.task-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.task-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.task-row > span { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.task-row small { color: var(--muted); }
.task-row form { margin: 0; }

/* ===================== Documents d'atelier ===================== */
.doc-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.doc-pick { display: block; margin: 0; cursor: pointer; }
.doc-pick input { position: absolute; opacity: 0; pointer-events: none; }
.doc-pick > span, a.doc-pick { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.doc-pick > span > span, a.doc-pick > span { display: flex; flex-direction: column; }
.doc-pick small { color: var(--muted); font-weight: 400; }
.doc-pick input:checked + span { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-ring); }
.doc-pick.is-locked { opacity: .6; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.doc-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.doc-card > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.doc-card small { color: var(--muted); }
.doc-card.is-locked { opacity: .65; }
.doc-card-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); }
.print-prompt { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 18px 40px -12px rgba(15, 18, 34, .5); font-size: 14px; }
details.reveal summary { cursor: pointer; color: var(--brand-dark); font-size: 13px; }
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.doc-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600; }
.doc-nav a:hover { border-color: var(--brand); color: var(--brand-dark); }
.doc-settings { scroll-margin-top: 16px; }
.doc-settings-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.doc-settings-head h2 { margin: 0 0 2px; }
.doc-free-note { background: var(--brand-50); padding: 8px 12px; border-radius: 10px; }
.doc-settings-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .doc-settings-body { grid-template-columns: 1fr; } }
.doc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.doc-form fieldset[disabled] { opacity: .6; }
.doc-toggles { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.doc-toggles .checkbox-row { margin: 0; }
.fmt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.fmt { margin: 0; cursor: pointer; }
.fmt input { position: absolute; opacity: 0; pointer-events: none; }
.fmt span { display: flex; flex-direction: column; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; }
.fmt small { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.fmt input:checked + span { border-color: var(--brand); background: var(--brand-50); }
.doc-preview-wrap { position: sticky; top: 16px; border-radius: 14px; padding: 16px; background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--bg) 10px 20px); overflow: auto; max-height: 640px; }
.doc-preview-cap { margin-bottom: 10px; }
.doc-preview { display: flex; flex-direction: column; align-items: center; gap: 4mm; }
.doc-preview .doc-copy, .doc-preview .sheet { box-shadow: 0 6px 20px -6px rgba(0,0,0,.35); background: #fff; }

/* Documents imprimés */
.print-docs { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10mm; }
.doc-section { display: flex; flex-direction: column; align-items: center; gap: 5mm; }
.doc-caption { font-size: 12px; color: var(--muted); font-weight: 600; }
.doc-section .doc-copy { box-shadow: 0 6px 20px -6px rgba(0,0,0,.3); background: #fff; }
.doc-section.fam-sheet .sheet, .doc-preview .sheet { width: 210mm; height: 297mm; padding: 15mm 0 0; display: grid; grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; background: #fff; }
.doc-section .lbl-cell, .doc-preview .lbl-cell { width: 70mm; height: 37mm; outline: 1px dashed #E0E3EC; }
.lbl-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc { background: #fff; color: #000; font-family: Inter, Arial, sans-serif; box-sizing: border-box; }
.doc-ticket { padding: 3mm 0; font-size: 3mm; line-height: 1.35; }
.doc-page { padding: 10mm; font-size: 3.4mm; line-height: 1.4; display: flex; flex-direction: column; gap: 5mm; }
.doc-head { display: flex; align-items: center; gap: 3mm; }
.doc-ticket .doc-head { flex-direction: column; text-align: center; }
.doc-logo { max-height: 14mm; max-width: 30mm; object-fit: contain; }
.doc-biz { font-weight: 800; font-size: 1.35em; }
.doc-small { font-size: .82em; color: #333; }
.doc-sep { border-top: 1px dashed #000; margin: 2.5mm 0; }
.doc-title { font-weight: 800; letter-spacing: .18em; text-align: center; font-size: 1.05em; }
.doc-ref { font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: 1.7em; text-align: center; margin: 1mm 0 2mm; }
.doc-page .doc-title, .doc-page .doc-ref { text-align: right; }
.doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; border-bottom: 2px solid #000; padding-bottom: 4mm; }
.doc-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6mm; }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table td { padding: .7mm 0; border: 0; border-bottom: 1px dotted #bbb; vertical-align: top; }
.doc-table td:first-child { width: 24mm; font-weight: 700; padding-right: 2mm; }
.doc-table tr:hover { background: none; }
.doc-block { margin-top: 3mm; }
.doc-label { font-weight: 800; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1mm; }
.doc-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .8mm; }
.doc-stages li { display: flex; align-items: center; gap: 2mm; }
.doc-box { width: 3.2mm; height: 3.2mm; border: 1px solid #000; display: inline-grid; place-items: center; font-size: 2.6mm; flex: none; }
.doc-history { margin: 0; padding-left: 4mm; }
.doc-history span { font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
.doc-check { border: 1px solid #000; padding: 2mm; font-weight: 600; }
.doc-qr-wrap { text-align: center; margin-top: 3mm; }
.doc-qr { margin: 0 auto 1mm; }
.doc-qr svg { display: block; width: 100%; height: auto; }
.doc-sign { margin-top: 4mm; font-size: .85em; }
.doc-sign-box { height: 14mm; border: 1px solid #000; margin-top: 1mm; }
.doc-footer { margin-top: 3mm; font-size: .8em; color: #222; border-top: 1px dashed #000; padding-top: 2mm; text-align: center; }
.doc-page .doc-footer { text-align: left; margin-top: auto; }
@media print {
  .print-docs { padding: 0; gap: 0; display: block; }
  .doc-section { display: block; }
  .doc-section .doc-copy { box-shadow: none; break-after: page; page-break-after: always; }
  .doc-section .doc-copy:last-child { break-after: auto; }
  .doc-section { break-after: page; }
  .doc-section:last-child { break-after: auto; }
  .doc-section .lbl-cell { outline: none; }
  .doc-section .lbl { outline: none; }
  .doc-ticket { width: 100% !important; }
  .doc, .doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media screen { .doc-section .doc-ticket, .doc-preview .doc-ticket { padding: 4mm; } }
@media screen { .print-docs { align-items: safe center; overflow-x: auto; } .doc-section { max-width: 100%; align-items: safe center; } }
.doc-form fieldset, .rules-form fieldset { background: none; }

/* ===================== Parcours de réservation ===================== */
.bk { --bk-accent: var(--brand); max-width: 1080px; margin: 0 auto; padding: 18px 16px 40px; }
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bk-biz { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.bk-biz > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bk-biz strong { font-family: var(--font-display, inherit); font-size: 17px; }
.bk-biz small { color: var(--muted); }
.bk-logo { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 18px; overflow: hidden; }
.bk-logo img { width: 100%; height: 100%; object-fit: cover; }
.bk-call { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 13px; }
.bk-steps { margin-bottom: 20px; }
.bk-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bk-steps li > a, .bk-steps li > span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.bk-steps li.is-current > span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15,18,34,.06), 0 0 0 1px var(--border); }
.bk-steps li.is-done > a, .bk-steps li.is-done > span { color: var(--ink-2); }
.bk-steps li.is-done > a:hover { background: var(--surface); }
.bk-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 1.5px solid var(--border-strong); background: var(--surface); }
.bk-steps li.is-current .bk-dot { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; box-shadow: 0 0 0 4px var(--brand-ring); }
.bk-steps li.is-done .bk-dot { background: #DCFCE7; border-color: #86EFAC; color: #166534; }
.bk-progress { height: 4px; border-radius: 999px; background: var(--border); margin-top: 8px; overflow: hidden; }
.bk-progress i { display: block; height: 100%; background: var(--bk-accent); border-radius: inherit; transition: width .3s; }
.bk-step-mobile { display: none; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .bk-steps ol { gap: 4px; }
  .bk-step-label { display: none; }
  .bk-steps li > a, .bk-steps li > span { justify-content: center; padding: 6px; }
  .bk-steps li.is-current > span { box-shadow: none; background: none; }
  .bk-step-mobile { display: block; }
}
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.bk-grid.is-single { grid-template-columns: minmax(0, 720px); justify-content: center; }
@media (max-width: 900px) { .bk-grid { grid-template-columns: 1fr; } .bk-summary { position: static; } }
.bk-main { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px rgba(15,18,34,.04), 0 12px 32px -24px rgba(15,18,34,.25); min-width: 0; }
.bk-back { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--muted); text-decoration: none; }
.bk-back:hover { color: var(--brand-dark); }
.bk-h2 { font-size: 19px; margin: 0 0 14px; }
.bk-service { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.bk-service-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bk-service h1 { font-size: 22px; margin: 0; }
.bk-price { font-weight: 800; font-size: 18px; white-space: nowrap; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bk-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.bk-desc { margin: 10px 0 0; color: var(--ink-2); }
.bk-staff { display: grid; gap: 10px; }
.bk-staff-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bk-staff-card:hover { border-color: var(--bk-accent); transform: translateY(-1px); box-shadow: 0 8px 20px -14px var(--brand-ring); }
.bk-staff-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.bk-staff-card small { color: var(--muted); }
.bk-staff-card.is-any { background: var(--brand-50); }
.bk-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--brand-grad); }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.bk-day { flex: none; width: 64px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: var(--ink); background: var(--surface); scroll-snap-align: start; position: relative; }
.bk-day:hover { border-color: var(--bk-accent); }
.bk-day-wd, .bk-day-m { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.bk-day-n { font-size: 20px; font-weight: 800; line-height: 1.1; }
.bk-day.is-active { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; }
.bk-day.is-active .bk-day-wd, .bk-day.is-active .bk-day-m { color: rgba(255,255,255,.85); }
.bk-day.is-off { opacity: .4; background: var(--surface-2); }
.bk-day .promo-chip { position: absolute; top: -8px; right: -4px; margin: 0; font-size: 10px; padding: 1px 5px; }
.bk-date-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 10px 0 12px; }
.bk-slot-group { margin-bottom: 14px; }
.bk-slot-label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.bk-slot-label span { background: var(--surface-2); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.bk-slot { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 11px 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; transition: all .12s; }
.bk-slot:hover { border-color: var(--bk-accent); background: var(--brand-50); color: var(--brand-dark); }
.bk-slot.has-promo { border-color: #86EFAC; background: #F0FDF4; }
.bk-slot .promo-chip { margin: 0; }
.bk-section { padding: 14px 0; border-top: 1px solid var(--border); }
.bk-section:first-of-type { border-top: 0; padding-top: 0; }
.bk-section h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 6px; }
.bk-tip { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #FFFBEB; color: #92400E; font-size: 13px; }
.addr-field { position: relative; }
.addr-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(15,18,34,.35); overflow: hidden; }
.addr-suggest button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; font: inherit; }
.addr-suggest button:last-child { border-bottom: 0; }
.addr-suggest button:hover { background: var(--brand-50); }
.addr-suggest small { color: var(--muted); }
.addr-status { margin-top: 6px; min-height: 1em; }
.addr-status.is-ok { color: #166534; }
.addr-status.is-error { color: var(--danger); }
.bk-deposit { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--border); margin: 10px 0; }
.bk-deposit span { display: flex; flex-direction: column; }
.bk-deposit small { color: var(--muted); }
.bk-submit { margin-top: 16px; }
.bk-code { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.bk-code summary { cursor: pointer; color: var(--brand-dark); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.bk-code .promo-code-form { margin: 10px 0 0; }
.bk-summary { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 12px 32px -24px rgba(15,18,34,.25); }
.bk-sum-title { font-weight: 800; font-size: 15px; }
.bk-sum-row { display: flex; gap: 10px; align-items: flex-start; }
.bk-sum-row > svg { color: var(--bk-accent); margin-top: 2px; flex: none; }
.bk-sum-row span { display: flex; flex-direction: column; min-width: 0; }
.bk-sum-row strong { font-size: 14px; overflow-wrap: anywhere; }
.bk-sum-row small { color: var(--muted); font-size: 12.5px; }
.bk-sum-price, .bk-recap-price { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 14px; }
.bk-sum-price > div, .bk-recap-price > div { display: flex; justify-content: space-between; gap: 10px; }
.bk-sum-price .is-discount, .bk-recap-price .is-discount { color: #166534; font-weight: 600; }
.bk-sum-price .is-total strong, .bk-recap-price .is-total strong { font-size: 18px; }
.bk-recap-price s { color: var(--muted); }
.bk-sum-deposit { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); padding: 8px 10px; border-radius: 10px; }
.bk-powered { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 24px; }
.bk-hero { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; margin-bottom: 16px; }
.bk-hero h1 { margin: 0; font-size: 22px; }
.bk-hero p { margin: 2px 0 0; color: var(--ink-2); }
.bk-hero-ico { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.bk-hero.is-ok { background: linear-gradient(135deg, #ECFDF5, #F0FDF4); }
.bk-hero.is-ok .bk-hero-ico { background: #16A34A; box-shadow: 0 0 0 6px #BBF7D0; animation: bk-pop .5s ease-out; }
.bk-hero.is-pending { background: #FFFBEB; }
.bk-hero.is-pending .bk-hero-ico { background: #F59E0B; }
.bk-hero.is-cancelled { background: var(--surface-2); }
.bk-hero.is-cancelled .bk-hero-ico { background: #64748B; }
.bk-hero.is-info .bk-hero-ico { background: var(--bk-accent); }
@keyframes bk-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.bk-recap { border: 1px solid var(--border); border-radius: 16px; padding: 6px 16px 14px; margin-bottom: 16px; }
.bk-recap-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.bk-recap-row > svg { color: var(--bk-accent); flex: none; margin-top: 2px; }
.bk-recap-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-recap-row small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.bk-recap-row strong { font-size: 15px; overflow-wrap: anywhere; }
.bk-recap-row span { color: var(--ink-2); font-size: 14px; }
.bk-recap-row a { font-size: 13px; font-weight: 600; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.bk-actions form { margin: 0; }
.bk-danger { color: var(--danger) !important; }
.bk-pay { display: grid; gap: 12px; }
.bk-pay-amount { display: flex; flex-direction: column; align-items: center; padding: 20px; border-radius: 16px; background: var(--brand-50); }
.bk-pay-amount strong { font-size: 32px; }
.bk-pay-amount small, .bk-pay-amount span { color: var(--muted); }
.loc-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--brand-dark); }

/* Éditeur de service */
.loc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .loc-modes { grid-template-columns: 1fr; } }
.loc-mode { margin: 0; cursor: pointer; }
.loc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.loc-mode > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; }
.loc-mode > span > svg { color: var(--brand); }
.loc-mode small { color: var(--muted); font-weight: 400; }
.loc-mode input:checked + span { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-ring); }
.loc-options { margin-top: 14px; }
.fee-notice { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; margin-top: 12px; }
.fee-notice > svg { flex: none; margin-top: 2px; }
.fee-notice p { margin: 4px 0 0; font-size: 13.5px; }
.fee-estimate { font-weight: 700; }

/* =====================================================================
   VITRINE PUBLIQUE — mobile d'abord (vx-)
   ===================================================================== */
.vx { --vx-r: 20px; background: #F6F7FB; min-height: 100vh; padding-bottom: 96px; color: var(--ink); }
.vx-muted { color: var(--muted); font-size: 13px; }
.vx-top { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(15,18,34,.06); }
.vx-top { display: none; }
.vx-top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.vx-top-brand img, .vx-top-brand span { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 800; flex: none; }
.vx-top-brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hero : carrousel plein écran */
.vx-hero { position: relative; height: 56vw; min-height: 240px; max-height: 420px; background: #0F1222; overflow: hidden; }
.vx-slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vx-slides::-webkit-scrollbar { display: none; }
.vx-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; border: 0; padding: 0; background: none; cursor: zoom-in; }
.vx-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(15,18,34,.45)); pointer-events: none; }
.vx-dots { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.vx-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: all .2s; }
.vx-dots i.on { width: 18px; border-radius: 4px; background: #fff; }
.vx-allph { position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 0; background: rgba(15,18,34,.6); color: #fff; font: 600 12px/1 Inter, sans-serif; cursor: pointer; backdrop-filter: blur(6px); }
.vx-hero-empty { background: radial-gradient(120% 120% at 0% 0%, #8B5CF6 0%, #6366F1 45%, #312E81 100%); }
.vx-hero-art { position: absolute; inset: 0; display: grid; place-items: center; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 2px, transparent 3px); background-size: 38px 38px, 52px 52px; }
.vx-hero-art span { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; font-size: 38px; font-weight: 800; border: 1px solid rgba(255,255,255,.3); overflow: hidden; }
.vx-hero-art img { width: 100%; height: 100%; object-fit: cover; }

.vx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 14px; }
/* Carte d'identité qui chevauche le hero */
.vx-id { position: relative; z-index: 3; margin: -34px 0 0; background: #fff; border-radius: var(--vx-r) var(--vx-r) 0 0; padding: 44px 16px 14px; text-align: center; box-shadow: 0 -10px 30px -18px rgba(15,18,34,.4); }
.vx-simple .vx-id { margin-top: 0; }
.vx-logo { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 28px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 10px 24px -10px rgba(15,18,34,.45); }
.vx-id .vx-logo { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); }
.vx-logo img { width: 100%; height: 100%; object-fit: cover; }
.vx-id h1, .vx-simple-hero h1 { font-family: var(--font-display, inherit); font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0 4px; }
.vx-sub { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin: 0; }
.vx-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vx-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.vx-pill span { color: var(--muted); font-weight: 500; }
.vx-pill.is-star { background: #FFF7E6; color: #92400E; }
.vx-open { color: var(--muted); }
.vx-open.is-open { color: #067647; }
.vx-pill.vx-open.is-open { background: #ECFDF3; }
.vx-pill.vx-open.is-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 3px rgba(18,183,106,.2); }

/* Actions rapides */
.vx-actions { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; background: #fff; padding: 6px 10px 16px; border-radius: 0 0 var(--vx-r) var(--vx-r); margin-bottom: 14px; box-shadow: 0 12px 24px -22px rgba(15,18,34,.4); }
.vx-simple .vx-actions { border-radius: var(--vx-r); margin-top: -26px; position: relative; padding-top: 14px; }
.vx-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; color: var(--ink-2); font: 600 12px/1.2 Inter, sans-serif; text-decoration: none; cursor: pointer; border-radius: 14px; }
.vx-act > span { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); transition: transform .15s; }
.vx-act:active > span { transform: scale(.94); }
.vx-act.is-main > span { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(99,102,241,.8); }

/* Promo */
.vx-promo { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; margin-bottom: 12px; background: linear-gradient(135deg, #EEF2FF, #FDF2F8); border: 1px solid #E0E7FF; }
.vx-promo.is-green { background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border-color: #BBF7D0; }
.vx-promo-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--brand); }
.vx-promo.is-green .vx-promo-ico { color: #16A34A; }
.vx-promo small { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 800; color: var(--brand-dark); }
.vx-promo.is-green small { color: #166534; }
.vx-promo strong { display: block; font-size: 15px; margin-top: 2px; }
.vx-promo p { margin: 2px 0 0; font-size: 13.5px; }

/* Onglets collants */
.vx-tabs { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px; margin: 0 -14px 12px; padding-left: 14px; padding-right: 14px; background: rgba(246,247,251,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vx-tabs::-webkit-scrollbar { display: none; }
.vx-tabs a { flex: none; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.vx-tabs a.on { background: var(--ink); color: #fff; }
section[id] { scroll-margin-top: 64px; }

.vx-card { background: #fff; border-radius: var(--vx-r); padding: 18px 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,18,34,.04); }
.vx-h2 { font-family: var(--font-display, inherit); font-size: 19px; letter-spacing: -.01em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.vx-h2 span { font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }

/* Prestations */
.vx-svcs { display: grid; gap: 8px; }
.vx-svc { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); color: inherit; text-decoration: none; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.vx-svc:hover { border-color: var(--brand); box-shadow: 0 10px 24px -18px rgba(99,102,241,.8); }
.vx-svc:active { transform: scale(.99); }
.vx-svc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vx-svc-main strong { font-size: 15.5px; line-height: 1.25; }
.vx-svc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.vx-svc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.vx-tag { color: var(--brand-dark) !important; font-weight: 600; }
.vx-svc-desc { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-svc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.vx-price { font-weight: 800; font-size: 16px; white-space: nowrap; }
.vx-go { display: inline-flex; align-items: center; gap: 2px; padding: 7px 10px 7px 12px; border-radius: 999px; background: var(--brand-light); color: var(--brand-dark); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.vx-svc:hover .vx-go { background: var(--brand); color: #fff; }

.vx-high { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.vx-high::-webkit-scrollbar { display: none; }
.vx-high li { flex: 0 0 78%; scroll-snap-align: start; display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 14px; }
.vx-high li > svg { color: var(--brand); flex: none; margin-top: 2px; }
.vx-high span { display: flex; flex-direction: column; gap: 2px; }
.vx-high small { color: var(--muted); font-size: 12.5px; }

/* Avis */
.vx-score { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.vx-score-big { display: flex; flex-direction: column; align-items: center; }
.vx-score-big strong { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.vx-score-big small { color: var(--muted); font-size: 12px; margin-top: 4px; }
.vx-score .sc-stars { font-size: 15px; }
.vx-dist { display: grid; gap: 4px; }
.vx-dist > div { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.vx-dist i { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vx-dist b { display: block; height: 100%; background: #F59E0B; border-radius: inherit; }
.vx-reviews { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.vx-reviews::-webkit-scrollbar { display: none; }
.vx-review { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.vx-review header { display: flex; gap: 10px; align-items: center; }
.vx-review header div { display: flex; flex-direction: column; }
.vx-review small { color: var(--muted); font-size: 12px; }
.vx-review p { margin: 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.vx-reply { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.vx-reply p { font-size: 13px; }
.vx-verified { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.vx-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand-grad); color: #fff; font-weight: 800; }
.vx-av.lg { width: 56px; height: 56px; font-size: 20px; }

.vx-about { margin: 0; line-height: 1.6; color: var(--ink-2); max-height: 7.4em; overflow: hidden; position: relative; }
.vx-about.is-open { max-height: none; }
.vx-more { border: 0; background: none; padding: 6px 0 0; color: var(--brand-dark); font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; }
.vx-team { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.vx-member { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.vx-amen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vx-amen li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.vx-amen svg { color: var(--brand); flex: none; }

/* Infos */
.vx-map { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; text-decoration: none; color: inherit; margin-bottom: 12px; background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(16,185,129,.08)), repeating-linear-gradient(45deg, #EEF0F6 0 12px, #F6F7FB 12px 24px); border: 1px solid var(--border); }
.vx-map-pin { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #E11D48; box-shadow: 0 6px 14px -6px rgba(15,18,34,.4); }
.vx-map span:last-child { display: flex; flex-direction: column; gap: 2px; }
.vx-map small { color: var(--brand-dark); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.vx-hours { display: grid; gap: 2px; }
.vx-hour { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.vx-hour span:first-child { text-transform: capitalize; }
.vx-hour.is-today { background: var(--brand-50); font-weight: 700; }
.vx-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vx-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600; }
.vx-centres { display: grid; gap: 8px; }
.vx-centres a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; color: inherit; text-decoration: none; }
.vx-centres span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vx-centres small { color: var(--muted); }
.vx-contact .field:first-child { margin-top: 0; }
.vx-contact .btn { margin-top: 14px; }

.vx-side { display: none; }
.vx-powered, .vx-trust { text-align: center; color: var(--muted); font-size: 12.5px; margin: 18px 0; }
.vx-trust { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Barre de réservation mobile */
.vx-bar { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(15,18,34,.94); color: #fff; box-shadow: 0 18px 40px -12px rgba(15,18,34,.55); transition: transform .25s ease, opacity .25s; }
.vx-bar.is-hidden { transform: translateY(140%); opacity: 0; }
.vx-bar > div { display: flex; flex-direction: column; line-height: 1.2; }
.vx-bar small { color: rgba(255,255,255,.7); font-size: 12px; }
.vx-bar strong { font-size: 17px; }
.vx-bar .btn { padding-left: 22px; padding-right: 22px; }

/* Page Free (simple) */
.vx-simple-hero { text-align: center; padding: 30px 16px 46px; background: radial-gradient(120% 140% at 0% 0%, #8B5CF6 0%, #6366F1 45%, #312E81 100%); color: #fff; }
.vx-simple-hero .vx-logo { margin: 0 auto 8px; border-color: rgba(255,255,255,.35); }
.vx-simple-hero .vx-sub { color: rgba(255,255,255,.85); margin-top: 4px; }
.vx-simple-hero .vx-open.is-open { color: #A7F3D0; }
.vx-simple { padding-bottom: 20px; }
.vx-simple .vx-wrap { max-width: 640px; }

/* ---------- Tablette / desktop ---------- */
@media (min-width: 900px) {
  .vx { padding-bottom: 40px; }
  .vx-top { display: flex; position: sticky; }
  .vx-hero { max-width: 1120px; margin: 18px auto 0; height: 420px; border-radius: 24px; }
  .vx-slides { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; overflow: hidden; }
  .vx-slide:first-child { grid-row: span 2; }
  .vx-slide:nth-child(n + 6) { display: none; }
  .vx-hero::after, .vx-dots { display: none; }
  .vx-allph { top: auto; bottom: 14px; right: 14px; background: #fff; color: var(--ink); }
  .vx-hero-empty { height: 260px; }
  .vx-wrap { padding: 0 24px; }
  .vx-id { text-align: left; margin: 0; padding: 22px 0 8px 104px; background: none; box-shadow: none; }
  .vx-id .vx-logo { top: 14px; left: 0; transform: none; width: 84px; height: 84px; }
  .vx-id h1 { font-size: 32px; }
  .vx-sub, .vx-pills { justify-content: flex-start; }
  .vx-actions { display: none; }
  .vx-simple .vx-actions { display: grid; }
  .vx-tabs { margin: 8px 0 16px; padding: 8px 0; top: 57px; background: #F6F7FB; }
  .vx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .vx-side { display: block; position: sticky; top: 120px; }
  .vx-book { background: #fff; border-radius: 22px; padding: 20px; display: grid; gap: 10px; box-shadow: 0 20px 44px -26px rgba(15,18,34,.35); border: 1px solid var(--border); }
  .vx-book-top small { display: block; color: var(--muted); }
  .vx-book-top strong { font-size: 26px; font-weight: 800; }
  .vx-book-rate { font-size: 14px; color: #92400E; font-weight: 600; }
  .vx-book-promo { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--brand-50); color: var(--brand-dark); font-size: 13px; font-weight: 600; }
  .vx-book-note { text-align: center; margin: 0; font-size: 13px; }
  .vx-card { padding: 22px; }
  .vx-high li { flex: 1 1 0; }
  .vx-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .vx-amen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx-bar { display: none; }
  .vx-simple-hero { padding: 48px 16px 64px; }
}

/* ===== Parcours de réservation : finitions mobile d'abord ===== */
body:has(.bk) { background: #F6F7FB; }
.bk { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); }
.bk-head { margin-bottom: 12px; }
.bk-main { border-radius: 22px; padding: 18px 16px; border: 0; box-shadow: 0 1px 2px rgba(15,18,34,.05); }
.bk-steps ol { position: relative; }
@media (max-width: 760px) {
  .bk-steps ol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--border); z-index: 0; }
  .bk-steps li { position: relative; z-index: 1; display: flex; justify-content: center; }
  .bk-steps li > a, .bk-steps li > span { background: #F6F7FB !important; padding: 4px; }
  .bk-progress { display: none; }
  .bk-step-mobile { text-align: center; }
  .bk-dot { width: 28px; height: 28px; }
}
.bk-msum { display: none; }
@media (max-width: 899px) {
  .bk-grid .bk-summary { display: none; }
  .bk-grid { display: flex; flex-direction: column; gap: 10px; }
  .bk-msum { display: block; order: -1; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,18,34,.05); }
  .bk-msum summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
  .bk-msum summary::-webkit-details-marker { display: none; }
  .bk-msum summary > svg { color: var(--muted); transition: transform .2s; flex: none; }
  .bk-msum[open] summary > svg { transform: rotate(90deg); }
  .bk-msum-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .bk-msum-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .bk-msum-main small { color: var(--muted); font-size: 12.5px; }
  .bk-msum-total { font-weight: 800; white-space: nowrap; }
  .bk-msum-body { display: grid; gap: 10px; padding: 0 14px 14px; border-top: 1px solid var(--border); padding-top: 12px; }
  .bk-submit { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 14px 30px -10px rgba(91,79,233,.6); border-radius: 16px; }
  .bk-h2 { font-size: 18px; }
  .bk-service h1 { font-size: 20px; }
  .bk-days { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .bk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-staff-card { padding: 12px; }
  .bk-recap { padding: 4px 14px 12px; }
  .bk-hero { padding: 16px; }
  .bk-hero h1 { font-size: 20px; }
  .bk-actions .btn, .bk-actions form, .bk-actions form .btn { flex: 1 1 auto; }
}
.bk-main input[type=text], .bk-main input[type=email], .bk-main input[type=tel], .bk-main textarea { font-size: 16px; }
.bk-slot { min-height: 46px; }
.bk-submit { min-height: 52px; font-size: 16px; }
.vx .sc-stars { color: #F59E0B; letter-spacing: 1px; } .vx .sc-stars span { color: #E5E7EB; }
.bk-staff-card, .bk-staff-card:hover, .bk-slot:hover, .bk-day:hover, .bk-biz:hover, .bk-call:hover, .vx a:hover, .vx-act:hover { text-decoration: none; }
@media (max-width: 899px) { .bk-grid { align-items: stretch; } }
.bk-days { scrollbar-width: none; } .bk-days::-webkit-scrollbar { display: none; }
.vx-act { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
@media (max-width: 360px) { .vx-act > span { width: 40px; height: 40px; border-radius: 14px; } .vx-act { font-size: 10.5px; } }

/* ===================== Workflow de confirmation ===================== */
.cf-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 14px; }
.cf-step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--brand-50); }
.cf-step span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.cf-step strong { font-size: 13px; }
.cf-step small { font-size: 11.5px; color: var(--muted); }
.cf-step-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; }
.cf-step.is-off { background: var(--surface-2); opacity: .6; }
.cf-step.is-off .cf-step-ico { background: var(--subtle); }
.cf-arrow { color: var(--subtle); display: inline-flex; }
.cf-flow-edit { margin-left: auto; }
.cf-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.cf-filters a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 13px; text-decoration: none; }
.cf-filters a span { background: var(--surface-2); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.cf-filters a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cf-filters a.active span { background: rgba(255,255,255,.2); }
.cf-list { display: grid; gap: 8px; }
.cf-day { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 0 2px; }
.cf-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); }
.cf-row.is-approval, .cf-row.is-payment, .cf-row.is-none { border-left-color: #F59E0B; }
.cf-row.is-to_call, .cf-row.is-no_answer { border-left-color: #EF4444; }
.cf-row.is-requested, .cf-row.is-scheduled { border-left-color: #6366F1; }
.cf-row.is-confirmed { border-left-color: #12B76A; }
.cf-time strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.cf-main { min-width: 0; display: grid; gap: 4px; }
.cf-who a { color: var(--ink); }
.cf-phone { font-size: 13px; color: var(--muted) !important; margin-left: 6px; }
.cf-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.cf-action { font-weight: 600; }
.cf-log summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.cf-log ol { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 2px; }
.cf-log ol span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cf-actions form { margin: 0; }
.cf-danger { color: var(--danger) !important; }
.cf-confirm { position: relative; }
.cf-confirm > summary { list-style: none; }
.cf-confirm > summary::-webkit-details-marker { display: none; }
.cf-confirm-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.cf-via { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
  .cf-row { grid-template-columns: 52px minmax(0, 1fr); }
  .cf-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .cf-confirm-form { left: 0; right: auto; width: min(300px, calc(100vw - 48px)); }
  .cf-arrow { display: none; }
}
.cf-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: #ECFDF3; border: 1px solid #ABEFC6; color: var(--ink); text-decoration: none; }
.cf-banner:hover { text-decoration: none; }
.cf-banner.is-todo { background: #FFFAEB; border-color: #FEDF89; }
.cf-banner-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #12B76A; color: #fff; flex: none; }
.cf-banner.is-todo .cf-banner-ico { background: #F59E0B; }
.cf-banner-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cf-banner-text small { color: var(--ink-2); }
.dr-confirm { margin: 12px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.dr-confirm.is-bad { background: #FEF3F2; border-color: #FECDCA; }
.dr-confirm.is-warn { background: #FFFAEB; border-color: #FEDF89; }
.dr-confirm.is-ok { background: #ECFDF3; border-color: #ABEFC6; }
.dr-confirm-head { display: flex; justify-content: space-between; align-items: center; }
.dr-confirm-action { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.dr-confirm-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ev-flags .cf-todo { color: #B54708; }
.cf-home { border-left: 4px solid #12B76A; }
.cf-home.is-todo { border-left-color: #F59E0B; }
.cf-home-head { display: flex; align-items: center; gap: 14px; }
.cf-home-head > div:nth-child(2) { flex: 1; }
.cf-home-head h2 { margin: 0; font-size: 17px; }
.cf-home-ring { width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#12B76A calc(var(--p) * 1%), var(--surface-2) 0); }
.cf-home-ring span { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; }
.cf-home-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.cf-home-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.cf-home-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.cf-home-list .small { flex: 1; min-width: 160px; }
@media (max-width: 760px) {
  .cf-confirm[open] { flex-basis: 100%; order: -1; }
  .cf-confirm-form { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
}

/* ===================== Menu : favoris, sections repliables, boîte de réception ===================== */
.side-nav { gap: 6px; }
.side-item { position: relative; display: flex; align-items: center; }
.side-item .side-link { flex: 1; min-width: 0; padding-right: 30px; }
.side-item .side-link > span:not(.side-count) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .side-count { margin-left: auto; }
.side-star { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--subtle); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.side-star .icon { fill: none; }
.side-item:hover .side-star, .side-star:focus-visible { opacity: 1; }
.side-star:hover { background: var(--surface-2); color: #F59E0B; }
.side-star.is-on { color: #F59E0B; }
.side-star.is-on .icon { fill: #F59E0B; }
.side-fav .side-star:not(:hover) { opacity: 0; }
.side-fav .side-item:hover .side-star { opacity: 1; }
.side-item:hover .side-count { margin-right: 22px; }
@media (hover: none) { .side-star { opacity: .55; } .side-star.is-on { opacity: 1; } .side-item .side-count { margin-right: 22px; } }
.side-fav { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px dashed var(--border); }
.side-fav > .side-section-title { display: flex; align-items: center; gap: 6px; color: #B45309; }
.side-fav > .side-section-title .icon { fill: #F59E0B; color: #F59E0B; }
.side-fav[hidden] { display: none; }
details.side-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; border-radius: 8px; user-select: none; }
details.side-group > summary::-webkit-details-marker { display: none; }
details.side-group > summary:hover { color: var(--ink-2); background: var(--surface-2); }
details.side-group > summary > span:first-child { flex: 1; }
.side-chev { display: inline-flex; transition: transform .15s; color: var(--subtle); }
details.side-group[open] .side-chev { transform: rotate(90deg); }
.side-group-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; letter-spacing: 0; }
details.side-group[open] .side-group-count { display: none; }
.side-group-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.side-inbox { position: relative; display: flex; align-items: center; gap: 10px; margin: -4px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--border); color: var(--ink); font-weight: 650; font-size: 14px; text-decoration: none; }
.side-inbox:hover { text-decoration: none; border-color: var(--brand); }
.side-inbox.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.side-inbox-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--brand); flex: none; }
.side-inbox > span:nth-child(2) { flex: 1; }
.side-inbox .side-count { background: var(--danger); color: #fff; }
.side-inbox-ok { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tg-pastzone { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(135deg, rgba(15,18,34,.035) 0 6px, transparent 6px 12px); pointer-events: none; z-index: 0; }
.side-member { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.denied { max-width: 520px; margin: 40px auto; text-align: center; display: grid; gap: 10px; justify-items: center; }
.denied > svg { color: var(--muted); }

/* ===================== Comptes & accès, journal ===================== */
.tm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); }
.tm-row:first-of-type { border-top: 0; }
.tm-row.is-off { opacity: .6; }
.tm-row.is-owner { background: var(--brand-50); border-radius: 12px; padding: 12px; border: 0; margin-bottom: 6px; }
.tm-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 800; }
.tm-main { display: grid; gap: 4px; min-width: 0; }
.tm-perms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tm-perms span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.tm-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.tm-actions form { margin: 0; }
.tm-danger { color: var(--danger) !important; }
.tm-edit { position: relative; }
.tm-edit > summary { list-style: none; }
.tm-edit > summary::-webkit-details-marker { display: none; }
.tm-edit[open] .tm-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: min(640px, 90vw); padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.perm-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0; background: var(--surface); }
.perm-group legend { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 4px; }
.perm-group .checkbox-row { margin: 4px 0; align-items: flex-start; }
.perm-group .checkbox-row span { display: flex; flex-direction: column; font-size: 13.5px; }
.perm-group small { color: var(--muted); font-size: 12px; }
.role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 12px 0 0; }
.role-card { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.role-card small { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  .tm-row { grid-template-columns: auto minmax(0, 1fr); }
  .tm-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .tm-edit[open] .tm-form { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .tm-edit[open] { flex-basis: 100%; }
}
.act-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.act-filters select { width: auto; min-width: 150px; }
.act-list { display: grid; }
.act-row { display: grid; grid-template-columns: 48px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.act-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.act-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 13px; }
.act-business_owner .act-av { background: var(--brand-light); color: var(--brand-dark); }
.act-member .act-av { background: #E0F2FE; color: #075985; }
.act-customer .act-av { background: #ECFDF3; color: #067647; }
.act-system .act-av { background: #FEF3C7; color: #92400E; }
.act-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.act-main { min-width: 0; font-size: 14px; }
.dr-history { margin-top: 12px; }
.dr-history summary { cursor: pointer; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.dr-history-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; }
.dr-history-list span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ===================== Import, export & synchronisation ===================== */
.tr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tr-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.tr-tabs a:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
section[id="importer"], section[id="exporter"], section[id="google"], section[id="historique"] { scroll-margin-top: 16px; }
.tr-import-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .tr-import-grid { grid-template-columns: 1fr; } }
.tr-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-src { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tr-src.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tr-tip { margin: 10px 0; min-height: 3em; }
.tr-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 2px dashed var(--border-strong); border-radius: 16px; background: var(--brand-50); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.tr-drop > svg { color: var(--brand); }
.tr-drop:hover, .tr-drop.is-over { border-color: var(--brand); background: var(--brand-light); }
.tr-drop.is-busy { opacity: .6; pointer-events: none; }
.tr-wizard { margin-top: 16px; }
.tr-panel { border: 2px solid var(--brand); }
.tr-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-steps span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tr-steps .is-on { background: var(--brand); color: #fff; }
.tr-steps .is-done { background: #DCFCE7; color: #166534; }
.tr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tr-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.tr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 14px 0; }
.tr-stat { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; }
.tr-stat strong { font-size: 22px; }
.tr-stat small { color: var(--muted); font-size: 12px; }
.tr-stat.is-ok { background: #ECFDF3; } .tr-stat.is-info { background: var(--brand-50); } .tr-stat.is-warn { background: #FFFAEB; }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .tr-cols { grid-template-columns: 1fr; } }
.tr-cols h3 { margin: 0 0 4px; font-size: 15px; }
.tr-map td { vertical-align: top; padding: 8px 6px; }
.tr-map select { min-width: 170px; }
.tr-samples { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ok { color: #067647; font-weight: 700; font-size: 12.5px; }
.tr-miss { color: #B54708; font-size: 12.5px; font-weight: 600; }
.tr-matches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-match ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.tr-match li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.tr-sample { font-size: 13px; }
.tr-details { margin-top: 10px; font-size: 13px; }
.tr-details summary { cursor: pointer; font-weight: 600; }
.tr-opts { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; }
.tr-opts legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.tr-opts small { color: var(--muted); }
.tr-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tr-actions form { margin: 0; }
.tr-done ul { font-size: 15px; }
.tr-exports { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tr-export { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; color: inherit; text-decoration: none; background: var(--surface); flex-wrap: wrap; margin: 0; }
.tr-export:hover { border-color: var(--brand); text-decoration: none; }
.tr-export > svg { color: var(--brand); flex: none; }
.tr-export span { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.tr-export small { color: var(--muted); }
.tr-export input[type=date] { width: auto; padding: 4px 6px; font-size: 12.5px; height: auto; }
.tr-howto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tr-howto > div { padding: 12px; border-radius: 12px; background: var(--brand-50); }
@media (max-width: 760px) { .tr-howto, .tr-matches { grid-template-columns: 1fr; } }
.tr-label { font-weight: 700; font-size: 13px; margin: 10px 0 6px; display: flex; align-items: center; gap: 6px; }
.tr-staff-list { display: grid; gap: 12px; margin-top: 16px; }
.tr-staff { border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.tr-staff header { display: flex; align-items: center; gap: 10px; }
.tr-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .tr-sync-grid { grid-template-columns: 1fr; } }
.tr-feed { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); margin-bottom: 6px; }
.tr-feed > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tr-feed small { color: var(--muted); }
.tr-feed form { margin: 0; }
.tr-feed-form { display: grid; gap: 6px; }
.tr-feed-form .form-row { margin: 0; }
tr.is-off { opacity: .55; }
.tr-cols > div { min-width: 0; }
@media (max-width: 760px) {
  .tr-map, .tr-map tbody, .tr-map tr, .tr-map td { display: block; width: 100%; }
  .tr-map tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .tr-map td { padding: 2px 0; border: 0; }
  .tr-map select { width: 100%; min-width: 0; }
  .tr-samples { max-width: 100%; }
}
@media (max-width: 760px) { .tbl-scroll table.tr-map { min-width: 0; } }

/* ---------------------------------------------------------------- Planning atelier */
.seg a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.seg a:hover { color: var(--ink); text-decoration: none; }
.seg a.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.rp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.rp-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-title { font-size: 17px; margin: 0 0 0 8px; }
.rp-trays { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rp-tray { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; }
.rp-tray.is-late { border-color: var(--danger-border); background: var(--danger-bg); }
.rp-tray h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 10px; }
.rp-tray h3 span { margin-left: auto; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; }
.rp-tray-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rp-tray-list .rp-card { flex: 0 0 200px; }
.rp-tray.is-over, .rp-day.is-over, .rp-cell.is-over { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-light); }
.rp-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.rp-week > .rp-day { scroll-snap-align: start; }
.rp-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 220px; display: flex; flex-direction: column; }
.rp-day header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.rp-dow { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.rp-num { font-weight: 700; font-size: 15px; }
.rp-count { font-size: 11px; font-weight: 600; background: var(--brand-light); color: var(--brand-dark); border-radius: 99px; padding: 1px 7px; }
.rp-add { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px dashed var(--border-strong); background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.rp-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.rp-day.is-today { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.rp-day.is-today .rp-num { color: var(--brand); }
.rp-day.is-closed { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 8px, #F7F8FB 8px, #F7F8FB 16px); }
.rp-day.is-past { opacity: .75; }
.rp-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; flex: 1; }
.rp-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 10px 0; }
.rp-day footer { padding: 6px 10px; border-top: 1px solid var(--border); color: var(--muted); }
.rp-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 8px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c); color: var(--ink); font-size: 12.5px; box-shadow: var(--shadow-sm); cursor: grab; }
.rp-card:hover { text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.rp-card.is-drag { opacity: .45; }
.rp-card.is-done { opacity: .55; cursor: pointer; }
.rp-card.is-late { border-color: var(--danger-border); border-left-color: var(--danger); }
.rp-card-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); }
.rp-card-top b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rp-item { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-meta { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-stage { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.rp-stage i, .rp-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.rp-leg { display: inline-flex; align-items: center; gap: 5px; }
.rp-month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.rp-mhead, .rp-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rp-mhead span { padding: 8px; font-size: 12px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--border); }
.rp-cell { min-height: 92px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.rp-cell:hover { text-decoration: none; background: var(--brand-light); color: var(--ink); }
.rp-cell.is-out { opacity: .4; }
.rp-cell.is-today .rp-num { background: var(--brand); color: #fff; border-radius: 99px; padding: 0 7px; align-self: flex-start; }
.rp-cell.is-closed { background: #FAFAFC; }
.rp-cell .rp-num { font-size: 13px; }
.rp-chip { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 14%, transparent); border-left: 3px solid var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-chip.is-done { opacity: .5; }
@media (max-width: 860px) {
  .rp-week { grid-template-columns: 1fr; }
  .rp-day { min-height: 0; }
  .rp-day.is-past:not(.is-today) .rp-list:has(.rp-empty) { display: none; }
  .rp-list { flex-direction: row; flex-wrap: wrap; }
  .rp-list .rp-card { flex: 1 1 200px; }
  .rp-cell { min-height: 58px; }
  .rp-chip { display: none; }
  .rp-cell:has(.rp-chip)::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
}

/* Création express d'un dossier */
.qk-dlg { width: min(600px, calc(100vw - 24px)); }
.qk-form { margin: 0; }
.qk-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.qk-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0; }
.qk-body { padding: 14px 16px; max-height: 68vh; overflow-y: auto; }
.qk-body .field { margin-bottom: 10px; }
.qk-svcs { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.qk-svc { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.qk-svc:hover { border-color: var(--brand); color: var(--brand-dark); }
.qk-due { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 2px; margin: 4px 0 0; }
.qk-due legend { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 0 4px; }
.qk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qk-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; text-transform: capitalize; color: var(--ink); }
.qk-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.qk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2, #F8F9FC); }
.qk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .qk-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .qk-actions { width: 100%; }
  .qk-actions .btn { flex: 1; }
}
.rj-due { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.rj-due label { font-weight: 600; font-size: 13px; }
.rj-due-row { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.rj-due-row input { flex: 1 1 130px; }
.home-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.home-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
.home-day:hover { text-decoration: none; border-color: var(--brand); color: var(--ink); }
.home-day small { color: var(--muted); text-transform: capitalize; font-size: 11px; }
.home-day b { font-size: 16px; }
.home-day span { font-size: 12px; color: var(--muted); }
.home-day.has-jobs span { background: var(--brand); color: #fff; border-radius: 99px; min-width: 20px; text-align: center; font-weight: 600; }
.home-day.is-today { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.vx-svc.is-static { cursor: default; }
.vx-svc.is-static:hover { transform: none; }
.vx-svc-note { margin: 10px 2px 0; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.vx-track { border: 1px solid var(--brand-ring); background: linear-gradient(180deg, var(--brand-light), var(--surface) 70%); }
.vx-track .vx-h2 { display: flex; align-items: center; gap: 8px; }
.vx-track-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; margin-top: 10px; }
.vx-track-form .btn { grid-column: 1 / -1; }
@media (max-width: 520px) { .vx-track-form { grid-template-columns: 1fr; } }
.owner-offline { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px; background: #FFFAEB; border-bottom: 1px solid #FEDF89; color: #7A2E0E; font-size: 14px; text-align: center; }
.owner-offline .btn { background: #B54708; color: #fff; border-color: #B54708; }
.act-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.act-tile input { position: absolute; opacity: 0; pointer-events: none; }
.act-tile > span { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; height: 100%; }
.act-tile > span .icon { color: var(--brand); }
.act-tile small { color: var(--muted); font-size: 12.5px; }
.act-tile input:checked + span { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 3px var(--brand-ring); }
.act-tile input:focus-visible + span { outline: 2px solid var(--brand); }
@media (max-width: 640px) { .act-pick { grid-template-columns: 1fr; } }
.sim-known { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--brand-light); margin-bottom: 14px; }
.sim-known .icon { color: var(--brand); }
.sim-known a { margin-left: auto; }
.tr-import-grid.is-single { grid-template-columns: minmax(0, 720px); }

/* ---------------------------------------------------------------- Widget d'aide */
.sw-fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px -6px rgba(15,18,34,.45); cursor: pointer; }
.sw-fab:hover { background: var(--brand-dark); }
@media (max-width: 760px) { .sw-fab { right: 12px; bottom: 12px; height: 42px; padding: 0 13px; } .sw-fab span { display: none; } }
@media print { .sw-fab, .sw-dlg { display: none !important; } }
.sw-dlg { border: 1px solid var(--border); border-radius: 18px; padding: 0; width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 40px); box-shadow: var(--shadow-lg); color: var(--ink); margin: auto 18px 18px auto; }
.sw-dlg::backdrop { background: rgba(9,9,11,.3); }
@media (max-width: 560px) { .sw-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; } }
.sw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; background: linear-gradient(135deg, var(--brand-light), var(--surface)); border-bottom: 1px solid var(--border); }
.sw-head h2 { font-size: 18px; margin: 0 0 2px; }
.sw-head p { margin: 0; }
.sw-tabs { display: flex; gap: 4px; padding: 10px 16px 0; align-items: center; }
.sw-tabs button { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.sw-tabs button.is-on { background: var(--brand-light); color: var(--brand-dark); }
.sw-tabs a { margin-left: auto; font-size: 13px; }
.sw-pane { padding: 12px 16px 16px; }
.sw-faq { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sw-faq details { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.sw-faq summary { cursor: pointer; font-weight: 600; }
.sw-faq p { margin: 6px 0 2px; color: var(--muted); }
.sw-form .field { margin-bottom: 10px; }
.sw-note { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 12px; }
.sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sw-more { display: block; text-align: center; margin-top: 10px; }
.sw-done { padding: 28px 20px; text-align: center; }
.sw-done .icon { color: var(--success); }
.sw-done h3 { margin: 8px 0 4px; }

/* Tickets (espace gérant + page de suivi) */
.badge-neutral { background: #F2F4F7; color: #475467; }
.tk-list { display: flex; flex-direction: column; }
.tk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--ink); }
.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { text-decoration: none; background: var(--brand-light); color: var(--ink); }
.tk-row.is-new strong::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.tk-num { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--muted); }
.tk-main { display: flex; flex-direction: column; min-width: 0; }
.tk-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-main small { color: var(--muted); }
.tk-thread { display: flex; flex-direction: column; gap: 10px; }
.tk-msg { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; max-width: 88%; }
.tk-msg.is-me { align-self: flex-end; background: var(--surface); }
.tk-msg.is-staff { align-self: flex-start; background: var(--brand-light); border-color: var(--brand-ring); }
.tk-msg.is-internal { align-self: stretch; max-width: none; background: #FFFAEB; border-color: #FEDF89; border-style: dashed; }
.tk-msg.is-system { align-self: center; max-width: none; background: none; border: 0; padding: 2px; font-size: 12.5px; color: var(--muted); }
.tk-msg header { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; }
.tk-msg header time { color: var(--muted); }
.tk-msg p { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.tk-reply { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.tk-reply .btn { align-self: flex-end; }
.tk-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--brand-light); }
.tk-stars { display: flex; }
.tk-stars button { border: 0; background: none; font-size: 24px; color: #D0D5DD; cursor: pointer; padding: 0 2px; }
.tk-stars:hover button { color: #F5B301; }
.tk-stars button:hover ~ button { color: #D0D5DD; }
.tk-public { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.tk-public .brand { display: inline-block; margin-bottom: 16px; }
.tk-title { font-size: 22px; margin: 4px 0 16px; }

/* Idées */
.idea-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .idea-layout { grid-template-columns: 1fr; } }
.idea-list { display: flex; flex-direction: column; gap: 10px; }
.idea { display: flex; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.idea-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 58px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.idea-vote b { font-size: 16px; color: var(--ink); }
.idea-vote.is-on { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
.idea-body { min-width: 0; flex: 1; }
.idea-body h3 { margin: 0 0 4px; font-size: 15.5px; }
.idea-body p { margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.idea-reply { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--brand-light); font-size: 13.5px; }
.idea-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.idea-mini li { display: flex; align-items: center; gap: 10px; }
.idea-mini li span:nth-child(2) { flex: 1; }
.idea-votes { min-width: 34px; text-align: center; font-weight: 700; background: var(--brand-light); color: var(--brand-dark); border-radius: 8px; padding: 2px 6px; }

/* ---------------------------------------------------------------- Console admin */
.adm-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 26px 0 10px; }
.adm-grid { margin-top: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: 1fr; } }
.adm-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; padding-top: 16px; }
.adm-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.adm-col i { width: 100%; max-width: 28px; min-height: 2px; background: var(--brand-grad); border-radius: 6px 6px 2px 2px; }
.adm-col small { font-size: 10px; color: var(--muted); white-space: nowrap; transform: rotate(-35deg); transform-origin: top center; margin-top: 6px; height: 22px; }
.adm-col-v { font-size: 11px; font-weight: 600; }
.adm-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-funnel li { display: grid; grid-template-columns: 170px 1fr 44px 120px; gap: 10px; align-items: center; font-size: 13px; }
.adm-f-bar { height: 12px; background: var(--surface-2, #F2F4F7); border-radius: 99px; overflow: hidden; }
.adm-f-bar i { display: block; height: 100%; background: var(--brand-grad); border-radius: 99px; }
.adm-funnel small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 700px) { .adm-funnel li { grid-template-columns: 1fr 44px; } .adm-f-bar, .adm-funnel small { display: none; } }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.adm-filters input[type=search] { flex: 1 1 260px; }
.adm-filters select, .adm-filters input { width: auto; }
.adm-table td { vertical-align: top; }
.adm-table tr.adm-late td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.adm-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .adm-ticket { grid-template-columns: 1fr; } }
.adm-side .card { margin-bottom: 14px; }
.adm-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 0; font-size: 13.5px; }
.adm-dl dt { color: var(--muted); }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; }
.adm-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.adm-actions form { margin: 0; }
.adm-props { display: flex; flex-direction: column; gap: 8px; }
.adm-props label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.adm-reply-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.adm-reply-top select { width: auto; }
.adm-reply-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.adm-reply-actions .checkbox-row { margin-right: auto; }
.adm-reply-actions select { width: auto; }
.idea-vote.is-static { cursor: default; height: auto; padding: 8px 4px; }
.idea-vote.is-static small { font-size: 10.5px; color: var(--brand-dark); }
.adm-idea-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adm-idea-form select { width: auto; }
.adm-idea-form input[type=text] { flex: 1 1 240px; }
.adm-tabs { margin: 16px 0 12px; flex-wrap: wrap; }
.adm-plans td, .adm-plans th { min-width: 150px; }
.adm-plan-cell input[type=number] { margin-top: 6px; max-width: 130px; }

/* ---------------------------------------------------------------- Questionnaire produit */
.sv-dlg { border: 1px solid var(--border); border-radius: 20px; padding: 0; width: min(620px, calc(100vw - 20px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow-lg); color: var(--ink); }
.sv-dlg::backdrop { background: rgba(9,9,11,.4); }
@media (max-width: 560px) { .sv-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; } }
.sv-form { margin: 0; display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.sv-head { display: flex; justify-content: space-between; gap: 10px; padding: 18px 18px 12px; background: linear-gradient(135deg, var(--brand-light), var(--surface)); }
.sv-head h2 { margin: 0 0 2px; font-size: 19px; }
.sv-head p { margin: 0; }
.sv-progress { height: 4px; background: var(--border); }
.sv-progress i { display: block; height: 100%; background: var(--brand-grad); transition: width .25s; }
.sv-step { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.sv-step fieldset { border: 0; padding: 0; margin: 0; }
.sv-step legend { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; padding: 0; }
.sv-step .req { color: var(--danger); }
.sv-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.sv-scale label { position: relative; }
.sv-scale input { position: absolute; opacity: 0; }
.sv-scale span { display: flex; align-items: center; justify-content: center; height: 38px; border: 1px solid var(--border); border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 14px; }
.sv-scale label:nth-child(-n+7) input:checked + span { background: #FEE4E2; border-color: #F97066; color: #B42318; }
.sv-scale label:nth-child(n+8):nth-child(-n+9) input:checked + span { background: #FEF0C7; border-color: #FDB022; color: #93370D; }
.sv-scale label:nth-child(n+10) input:checked + span { background: #D1FADF; border-color: #32D583; color: #05603A; }
.sv-scale input:focus-visible + span { outline: 2px solid var(--brand); }
.sv-scale-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.sv-nps.is-missing .sv-scale span { border-color: var(--danger); }
.sv-grid-head, .sv-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 36px); gap: 4px; align-items: center; }
.sv-grid-head span { text-align: center; font-size: 15px; }
.sv-row { padding: 6px 0; border-top: 1px solid var(--border); }
.sv-row > span { display: flex; flex-direction: column; font-size: 13.5px; }
.sv-row small { color: var(--muted); font-size: 11.5px; }
.sv-row label { display: flex; justify-content: center; cursor: pointer; }
.sv-row input { position: absolute; opacity: 0; }
.sv-row i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); }
.sv-row input:checked + i { border-color: var(--brand); background: radial-gradient(var(--brand) 45%, transparent 50%); }
.sv-row input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.sv-support-rate { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.sv-nav { display: flex; gap: 8px; }
.sv-done { padding: 34px 20px; text-align: center; }
.sv-done .icon { color: var(--brand); }

/* Admin · avis produit */
.adm-insights { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.adm-nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; height: 170px; align-items: end; }
.adm-nps-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 11px; }
.adm-nps-col i { width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; }
.adm-nps-col.is-detractor i { background: #F97066; }
.adm-nps-col.is-passive i { background: #FDB022; }
.adm-nps-col.is-promoter i { background: #32D583; }
.adm-nps-col small { color: var(--muted); }
a.bar-row { color: inherit; }
a.bar-row:hover { text-decoration: none; background: var(--brand-light); border-radius: 8px; }
.adm-seg-h { text-align: left; background: var(--surface-2, #F8F9FC); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.adm-verbatims { display: flex; flex-direction: column; gap: 10px; }
.adm-vb { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.adm-vb header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-vb p { margin: 8px 0 0; overflow-wrap: anywhere; }
.adm-vb-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sv-dlg label { margin: 0; }
.sv-step fieldset { background: none; }
.sv-dlg .field label { margin-bottom: 6px; }

/* ---------------------------------------------------------------- Langues & arabe (RTL) */
.lang-sw { position: relative; }
.lang-sw summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; background: var(--surface); }
.lang-sw summary::-webkit-details-marker { display: none; }
.lang-sw-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 70; min-width: 150px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.lang-sw-menu a, .lang-inline a { padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 13.5px; }
.lang-sw-menu a:hover, .lang-inline a:hover { background: var(--brand-light); text-decoration: none; }
.lang-sw-menu a.is-on, .lang-inline a.is-on { font-weight: 700; color: var(--brand-dark); }
.lang-inline { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 4px; border-top: 1px solid var(--border); margin-top: 6px; }
.lang-inline a { padding: 4px 7px; font-size: 12px; color: var(--muted); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

:lang(ar) { --font: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif; --font-display: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .brand, :lang(ar) body { letter-spacing: 0; }
[dir="rtl"] body { text-align: right; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .nav-toggle:checked + .app-shell .sidebar { transform: none; }
}
[dir="rtl"] .cal-drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); transform: translateX(-100%); }
[dir="rtl"] .cal-drawer.is-open, [dir="rtl"] .cal-drawer[open] { transform: none; }
[dir="rtl"] .bell-panel { left: auto; right: 252px; }
[dir="rtl"] .sw-fab, [dir="rtl"] .print-prompt { right: auto; left: 18px; }
[dir="rtl"] .sw-dlg { margin: auto auto 18px 18px; }
[dir="rtl"] .consent { margin-left: 0; margin-right: auto; }
[dir="rtl"] .back-link, [dir="rtl"] .icon-line { direction: rtl; }
[dir="rtl"] .search-bar input, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }
[dir="rtl"] input[type=tel], [dir="rtl"] input[type=email], [dir="rtl"] input[type=url], [dir="rtl"] input[type=number], [dir="rtl"] code, [dir="rtl"] .rj-ref, [dir="rtl"] .tk-num { direction: ltr; text-align: right; }
[dir="rtl"] .chevron-flip, [dir="rtl"] .vx-go .icon, [dir="rtl"] .icon-arrow { transform: scaleX(-1); }
[dir="rtl"] .rp-card, [dir="rtl"] .rj-card { border-left-width: 1px; }
[dir="rtl"] .rp-card { border-left: 1px solid var(--border); border-right: 4px solid var(--c); padding: 8px 11px 8px 9px; }
[dir="rtl"] .rp-chip { border-left: 0; border-right: 3px solid var(--c); }
[dir="rtl"] .tk-msg.is-me { align-self: flex-start; }
[dir="rtl"] .tk-msg.is-staff { align-self: flex-end; }
[dir="rtl"] .adm-table tr.adm-late td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
[dir="rtl"] .vx-bar { padding: 10px 16px 10px 10px; }
[dir="rtl"] .cal-drawer.open { transform: none; }
[dir="rtl"] .side-link.active::before { left: auto; right: -14px; border-radius: 3px 0 0 3px; }
[dir="rtl"] .side-count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ev { text-align: right; border-left: 1px solid color-mix(in srgb, var(--c) 30%, white); border-right: 3px solid var(--c); padding: 4px 9px 4px 7px; }
[dir="rtl"] .ev-pending { border-left-style: dashed; border-right-style: solid; }
[dir="rtl"] .tg-now::before { left: auto; right: -4px; }

/* ---------------------------------------------------------------- CRM */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.crm-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.crm-tabs a { padding: 8px 12px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.crm-tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.crm-score { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.crm-score b { min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.crm-score i { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.crm-score i span { display: block; height: 100%; background: var(--brand-grad, var(--brand)); }
.crm-health { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.crm-health.is-green { background: var(--success); }
.crm-health.is-orange { background: var(--warning); }
.crm-health.is-red { background: var(--danger); }
.crm-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crm-task { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.crm-task.is-late { border-color: var(--danger-border); background: var(--danger-bg); }
.crm-task-kind { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand); flex-shrink: 0; }
.crm-task-body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-task-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1 1 100%; }
.crm-task-actions input[type=text] { flex: 1 1 160px; width: auto; min-width: 0; }
.crm-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.crm-inline input[type=text] { flex: 1 1 200px; width: auto; min-width: 0; }
.crm-inline select, .crm-inline input[type=date] { width: auto; }
.crm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.crm-actions form { margin: 0; }
.crm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; align-items: end; }
.crm-contact { max-width: 760px; }
.adm-kv { width: 100%; }
.adm-kv th { text-align: left; color: var(--muted); font-weight: 500; width: 130px; vertical-align: top; padding: 6px 8px 6px 0; }
.adm-kv td { padding: 6px 0; overflow-wrap: anywhere; }
.crm-timeline { list-style: none; margin: 0; padding: 0; }
.crm-timeline li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: start; }
.crm-timeline li:last-child { border-bottom: 0; }
.crm-timeline li p { margin: 2px 0 0; }
.crm-tl-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.crm-timeline li.is-success .crm-tl-ico { background: var(--success-bg); color: var(--success); }
.crm-timeline li.is-warning .crm-tl-ico { background: var(--warning-bg); color: var(--warning); }
.crm-timeline li.is-danger .crm-tl-ico { background: var(--danger-bg); color: var(--danger); }
.crm-timeline time { white-space: nowrap; }
.crm-enroll { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.crm-enroll-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-steps, .crm-wf-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.crm-steps li { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.crm-steps li.is-done { color: var(--ink); }
.crm-steps li.is-next { color: var(--brand); font-weight: 600; }
.crm-wf-head { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.crm-wf-code { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: 12px; }
.crm-wf-stats { display: flex; gap: 14px; color: var(--muted); font-size: 13px; }
.crm-wf-stats b { color: var(--ink); }
.crm-wf-steps li.is-off { opacity: .55; }
.crm-step-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crm-wf-steps details { margin: 4px 0 0; }
.crm-wf-steps summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.crm-step-form { display: grid; gap: 8px; margin-top: 8px; }
.crm-step-form label { display: grid; gap: 4px; font-size: 13px; }
.crm-pre { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--bg); padding: 10px; border-radius: 8px; }
.card.is-muted { opacity: .7; }
.sim-lead { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: grid; gap: 8px; }
.sim-lead-title { margin: 0; display: flex; gap: 6px; align-items: center; }
.sim-lead-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
@media (max-width: 640px) {
  .sim-lead-row { grid-template-columns: 1fr; }
  .crm-timeline li { grid-template-columns: 28px 1fr; }
  .crm-timeline time { grid-column: 2; }
  .crm-wf-stats { flex-wrap: wrap; }
}

/* En-tête du site sur petit téléphone : logo + langue + bouton tiennent sur une ligne. */
@media (max-width: 420px) {
  .mk-nav-cta { gap: 6px; }
  .mk-nav-cta .btn-sm { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .mk-nav .brand { font-size: 16px; }
  .mk-nav .brand::before { margin-right: 7px; }
}

/* CRM — acquisition */
.crm-perf td, .crm-perf th { white-space: nowrap; }
.crm-perf td:first-child { white-space: normal; min-width: 320px; }
.crm-perf .crm-inline { margin-top: 6px; }
.crm-perf .crm-inline input[type=text] { font-size: 12px; flex: 1 1 100%; min-width: 0; }
.crm-best { color: var(--success); font-weight: 700; }
tr.is-muted { opacity: .55; }
.sub-coupon { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; }
.sub-coupon-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.sub-coupon-form input { width: auto; flex: 0 1 180px; text-transform: uppercase; }
.signup-coupon { margin-top: 12px; }
.signup-coupon summary { cursor: pointer; color: var(--brand); }