:root {
  --brand: #6C4CE0;
  --brand-dark: #4A2FB8;
  --brand-soft: #EFEBFF;
  /* Teinte lisible du turquoise sur fond clair : #00C2A8 ne donne que 2,26 de
     contraste (la norme demande 4,5 pour du texte). Les aplats gardent le
     turquoise vif avec du texte sombre ; les icones fines et les bordures
     graphiques prennent cette teinte, qui atteint 5,24. */
  --accent: #00C2A8;
  --accent-ink: #0B7A6B;
  --accent-soft: #E2FBF6;
  --ink: #1E1B2E;
  --ink-2: #4B4761;
  --muted: #6A6780;
  --line: #E7E5F2;
  --bg: #F5F4FB;
  --card: #FFFFFF;
  /* Ces deux teintes servent de COULEUR DE TEXTE (chiffres des compteurs,
     pastilles, messages d'alerte) : elles doivent donc être lisibles sur fond
     clair. Le vert #16A34A ne donnait que 3,30 de contraste et l'orange
     #D97706 seulement 3,19 (la norme demande 4,5) — un « 18 signés » en vert
     vif était difficile à lire. Les teintes ci-dessous atteignent 6,6 et 6,3
     sans changer la lecture : ce sont les mêmes familles de couleur, plus
     soutenues. Les fonds --ok-soft / --warn-soft restent inchangés. */
  --ok: #0B6B37;
  --ok-soft: #E7F8EE;
  --warn: #8A5300;
  --warn-soft: #FEF3E2;
  --danger: #A81C1C;
  --danger-soft: #FDECEC;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 4px 16px rgba(30, 27, 46, .06);
  --shadow-lg: 0 14px 34px rgba(30, 27, 46, .12);
  --nav-h: 68px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-bottom-nav { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }

a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 24px; font-weight: 800; }
h2 { font-size: 19px; font-weight: 750; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 12px; }
small { color: var(--muted); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }
.wrap-narrow { max-width: 620px; }
.page { padding: 18px 0 24px; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.hide { display: none !important; }

/* ---------- Conteneur principal de l'application ----------
   Les écrans qui n'utilisent pas .wrap (espace de la personne signataire,
   boutique du professionnel) s'appuyaient sur cette classe : sans elle, le
   contenu s'étalait bord à bord et collait aux bords de l'écran sur ordinateur.
   Elle reprend exactement les mêmes cotes que .wrap + .page. */
.app-main {
  width: 100%; max-width: 980px; margin: 0 auto;
  padding: 18px 16px 24px;
}

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.app-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 8px 16px;
  max-width: 980px;
  margin: 0 auto;
}
/* Un titre long (nom d'un dossier, d'une campagne) doit se couper proprement :
   sans ces règles, il poussait les boutons de droite hors de l'écran sur
   téléphone — la recherche et le profil devenaient inaccessibles. */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.brand > div, .brand > span { min-width: 0; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--brand), #0B8474);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.5px;
}
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 11px; color: var(--muted); margin-top: -3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 12px 18px;
  font-size: 15px; font-weight: 650; font-family: inherit; cursor: pointer;
  background: var(--brand); color: #fff;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-align: center; line-height: 1.2;
}
.btn:active { transform: scale(.97); }
.btn-block { width: 100%; }
.btn-ghost { background: var(--brand-soft); color: var(--brand-dark); }
.btn-ghost:active { background: #E3DDFF; }
.btn-line { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-accent { background: var(--accent); color: #04302A; }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-sm { padding: 8px 13px; font-size: 13.5px; border-radius: 11px; }
.btn-lg { padding: 15px 22px; font-size: 16px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-2); transition: transform .12s ease;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card + .card { margin-top: 14px; }
.card-list > * + * { margin-top: 12px; }
.card-tight { padding: 14px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px;
}
/* La taille suit la largeur de l'écran (clamp) : les grands nombres des
   compteurs (525 000) restent lisibles sur 320 px et ne débordent jamais.
   La borne haute est volontairement modérée : entre 640 px et 860 px la grille
   passe à 4 colonnes serrées et un nombre de 9 caractères doit encore tenir.
   nowrap : un nombre ne se coupe jamais en deux lignes. */
.stat .val {
  font-size: clamp(18px, 5.2vw, 21px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat .lbl { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Compteur cliquable : il ouvre la liste correspondante. Sans ce style, un lien
   héritait de la couleur des liens (violet) et le chiffre n'était plus lisible
   comme un compteur. */
a.stat-lien { display: block; color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .15s ease; }
a.stat-lien:active { transform: scale(.98); }
a.stat-lien .lbl::after { content: " ›"; color: var(--brand); font-weight: 800; }
@media (hover: hover) {
  a.stat-lien:hover { box-shadow: 0 6px 20px rgba(30, 27, 46, .1); }
}
.stat.brand { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.stat.brand .val, .stat.brand .lbl { color: #fff; }
.stat.brand .lbl { opacity: .85; }
/* Les compteurs montent de 0 au chiffre final : sans animation pour les personnes
   qui l'ont désactivée, le chiffre final reste simplement affiché. */
@media (prefers-reduced-motion: reduce) {
  .stat .val { transition: none; }
}

.item {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; transition: transform .12s ease;
}
.item:active { transform: scale(.985); }
.item-ico {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.item-ico svg { width: 21px; height: 21px; }
.item-body { min-width: 0; flex: 1; }
.item-title { font-weight: 680; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: 12.5px; color: var(--muted); }

/* ---------- Cartes de dossier (onglet Dossiers) ---------- */
.sort-wrap {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 0 10px; color: var(--muted);
}
.sort-wrap svg { width: 16px; height: 16px; flex: none; }
.select-compact {
  border: 0; padding: 9px 22px 9px 0; font-size: 13px; font-weight: 650;
  background-position: right 0 center; width: auto; color: var(--ink-2);
}
.select-compact:focus { box-shadow: none; }

/* Bandeau de synthèse compact : remplace les 4 grandes cartes en haut de l'onglet */
.ev-sum {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 11px 14px; font-size: 12.5px; color: var(--muted);
}
.ev-sum-item { display: inline-flex; align-items: baseline; gap: 5px; }
.ev-sum-item strong { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ev-sum-item strong.ok { color: var(--ok); }
.ev-sum-item strong.warn { color: var(--warn); }

.ev-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.ev-link { display: block; color: inherit; padding: 13px 14px 10px; }
.ev-link:active { background: #FBFAFF; }
.ev-head { display: flex; align-items: center; gap: 12px; }
.ev-head .item-ico { width: 38px; height: 38px; border-radius: 11px; }
.ev-meta { margin-top: 10px; }
/* Progression des signatures dans l'en-tête d'un dossier : un bloc discret,
   posé entre les actions et les filtres sans concurrencer la liste. */
.ev-progress {
  background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 12px 14px;
}
.ev-bar {
  height: 5px; border-radius: 99px; background: var(--brand-soft); overflow: hidden;
}
.ev-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .4s ease;
}
.ev-meta-row {
  display: flex; flex-wrap: wrap; gap: 3px 12px;
  margin-top: 6px; font-size: 12px; color: var(--muted);
}
.ev-meta-row strong { color: var(--ink); font-weight: 750; }
.ev-meta-row .warn { color: var(--warn); font-weight: 700; }
.ev-meta-row .ok { color: var(--ok); font-weight: 700; }
.ev-actions {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 9px 14px 11px; border-top: 1px solid var(--line); background: #FCFBFF;
}
.ev-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--brand-dark);
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 10px;
  text-decoration: none;
}
.ev-act:active { background: var(--brand-soft); }
.ev-act svg { width: 14px; height: 14px; flex: none; }
/* Action principale dans une liste (valider un accès, confirmer un contrat reçu) :
   elle se distingue des actions secondaires sans crier. */
.ev-act-go {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.ev-act-go:active { background: var(--brand-dark); border-color: var(--brand-dark); }

/* ---------- Rangée de contrat (dossier) ---------- */
.ct-row {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.ct-row .item { box-shadow: none; border-radius: 0; background: transparent; }
.ct-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px 12px; border-top: 1px solid var(--line); background: #FFFAF3;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark); white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: #0B6B37; }
.badge-warn { background: var(--warn-soft); color: #8A5300; }
.badge-mute { background: #F0EFF6; color: var(--ink-2); }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 6px; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 13px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3.5px rgba(108, 76, 224, .13);
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A87A0' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
/* Rangée de champs : flex + retour à la ligne (voir assets/voice-ui.css, chargé
   après ce fichier). Une grille transmettait au conteneur la largeur minimale
   interne des champs « date », ce qui les faisait sortir de leur carte. */
.field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.field-row > .field { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ---------- Champs de date : mêmes dimensions que les autres champs ----------
   Un champ « date » est dessiné par le navigateur : il a une largeur minimale
   propre (le texte jj/mm/aaaa + l'icône du calendrier) et sa hauteur ne suit pas
   celle des autres champs. Dans une grille à deux colonnes, il refuse de se
   comprimer et sortait de sa carte ; à l'inverse, forcé en 16 px et 48 px de
   haut, il devenait plus gros que les champs voisins.
   On autorise donc la compression (piste minmax(0, 1fr) + min-width 0) et on
   calque exactement la taille du champ sur celle des autres champs.
   Le 16 px n'est pas nécessaire ici : un champ date n'ouvre pas de clavier. */
.field-row > *,
.field-mic > *,
.form-row-2 > *,
.date-row > * { min-width: 0; }
/* La piste de grille accepte de se comprimer : sinon le champ date impose sa
   largeur minimale et déborde de sa carte. */
.field-row { grid-template-columns: minmax(0, 1fr); }
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  box-sizing: border-box;
  font-size: 15px;      /* même taille que les autres champs .input */
  line-height: 1.5;
  padding: 12px 14px;   /* même rembourrage que les autres champs .input */
  height: auto;
  min-height: 0;
}
/* La date s'affiche à gauche comme un texte, le calendrier reste à droite. */
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-width: 0; }
input[type="date"]::-webkit-datetime-edit { min-width: 0; padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { min-width: 0; padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator {
  display: block; width: 18px; height: 18px; margin-left: 6px; padding: 0; opacity: .75;
}

.searchbar { position: relative; }
.searchbar input { padding-left: 42px; }
.searchbar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }

/* ---------- Choix du type de compte (professionnel / agence) ---------- */
.role-pick { display: grid; grid-template-columns: 1fr; gap: 9px; }
.role-opt {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; cursor: pointer; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.role-opt:has(input:checked) { border-color: var(--brand); background: #FBFAFF; }
.role-opt input { width: 19px; height: 19px; flex: none; margin: 1px 0 0; accent-color: var(--brand); }
.role-body { min-width: 0; }
.role-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; }
.role-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ---------- Espace Agence (équipe, sièges) ---------- */
.team-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 15px;
}
.team-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.team-seat {
  font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--accent-soft); color: #0B7A6B; white-space: nowrap;
}
.team-seat.extra { background: var(--warn-soft); color: var(--warn); }
.seat-bar { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.seat-dot { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-soft); border: 1.5px solid var(--line); }
.seat-dot.on { background: var(--brand); border-color: var(--brand); }
.seat-dot.extra { background: var(--warn); border-color: var(--warn); }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav .inner {
  display: flex; align-items: stretch; justify-content: space-around;
  max-width: 980px; margin: 0 auto; height: var(--nav-h);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--muted); font-size: 10.5px; font-weight: 650;
  transition: transform .12s ease, color .15s ease;
}
.bottom-nav a:active { transform: scale(.94); }
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a .pill {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 14px; border-radius: 999px; transition: background .18s ease, color .18s ease;
}
.bottom-nav a.active { color: var(--brand-dark); }
.bottom-nav a.active .pill { background: var(--brand-soft); }
/* Administration : 8 onglets — on resserre pour que tout reste lisible sur mobile */
.bottom-nav.admin-nav a { font-size: 9px; gap: 2px; }
.bottom-nav.admin-nav a .pill { padding: 4px 6px; }
.bottom-nav.admin-nav a svg { width: 19px; height: 19px; }
.bottom-nav.admin-nav a.active { color: #4A2FB8; }
.bottom-nav.admin-nav a.active .pill { background: #EFEBFF; }
@media (max-width: 380px) {
  .bottom-nav.admin-nav a { font-size: 8px; }
  .bottom-nav.admin-nav a svg { width: 17px; height: 17px; }
}

/* ---------- Stratégie et acquisition (page Revenus) ---------- */
.strategie { display: grid; grid-template-columns: 1fr; gap: 14px; }
.strat-item { display: flex; gap: 12px; align-items: flex-start; }
.strat-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.strat-item strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.strat-item p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

.acq-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.acq-card { background: #FBFAFF; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px; }
.acq-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.acq-zone { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-dark); }
.acq-budget { font-size: 14px; font-weight: 800; color: var(--brand-dark); }
.acq-card strong { display: block; font-size: 14.5px; margin-bottom: 5px; }
.acq-card p { margin: 0 0 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.acq-kpi { font-size: 12px; font-weight: 650; color: #0B7A6B; background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; display: inline-block; }

.acq-prevision { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 10px; }
.acq-prevision > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.acq-prevision span { color: var(--ink-2); }
.acq-prevision strong { font-weight: 750; }

.plan-edit { background: #FBFAFF; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.plan-edit + .plan-edit { margin-top: 12px; }

@media (min-width: 640px) {
  .acq-grid { grid-template-columns: 1fr 1fr; }
  .acq-prevision { grid-template-columns: 1fr 1fr; }
}

/* ---------- Hero / public ---------- */
.hero {
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 55%, #2E1A80 100%);
  color: #fff; padding: 44px 0 52px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,168,.45), transparent 70%);
  top: -120px; right: -110px;
}
.hero h1 { font-size: 30px; color: #fff; max-width: 15ch; }
.hero p { color: rgba(255,255,255,.88); font-size: 16px; max-width: 46ch; }
.hero .wrap { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.hero-actions .btn-line { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.34); }

.section { padding: 30px 0; }
.section-head { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 4px; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.feature {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.feature .ficon {
  width: 44px; height: 44px; border-radius: 13px; background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.feature .ficon svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 5px; }
.feature p { color: var(--ink-2); font-size: 14px; margin: 0; }

.steps { counter-reset: s; display: grid; grid-template-columns: 1fr; gap: 12px; }
.step { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.step .num {
  counter-increment: s; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.step .num::before { content: counter(s); }

.pricing { display: grid; grid-template-columns: 1fr; gap: 12px; }
.plan { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; border: 2px solid transparent; }
.plan.featured { border-color: var(--brand); }
.plan .price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.plan .price span { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 14px 0 0; }
.plan li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; padding: 5px 0; color: var(--ink-2); }
.plan li svg { width: 17px; height: 17px; color: var(--accent-ink); flex: none; margin-top: 3px; }

/* ---------- Boutique (offres, packs) ---------- */
.pricing-boutique { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* Les packs (sans abonnement) se placent après les offres : un peu d'air au-dessus */
.pricing-boutique.packs { margin-top: 6px; }
.pricing-boutique .plan { display: flex; flex-direction: column; position: relative; }
.pricing-boutique .plan ul { margin-top: 12px; }
.pricing-boutique .plan .btn { margin-top: auto; }
.pricing-boutique .plan .mt-16 { margin-top: 16px; }
.plan-tag {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand-dark);
  padding: 4px 10px; border-radius: 999px;
}
.plan.featured .plan-tag { background: var(--brand); color: #fff; }
.plan-quota {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--accent-soft); color: #0B7A6B;
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 13.5px; font-weight: 650;
}
.plan-quota svg { width: 15px; height: 15px; flex: none; }

/* ---------- Paiement / commande ---------- */
.pay-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.recap-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.recap-line:last-child { border-bottom: 0; }
.recap-line span { color: var(--muted); font-size: 13px; }
.recap-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 0 4px; font-size: 15px; font-weight: 700;
}
.recap-total .montant { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--brand-dark); }
.pay-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* ---------- Cartes de revenus (administration) ---------- */
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rev-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px;
}
.rev-card .lbl { font-size: 11.5px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.rev-card .val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; line-height: 1.15; }
.rev-card .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rev-card.brand { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.rev-card.brand .lbl, .rev-card.brand .val, .rev-card.brand .sub { color: #fff; }
.rev-card.brand .lbl, .rev-card.brand .sub { opacity: .85; }
.rev-card.accent { background: linear-gradient(135deg, #0B8474, #096B5C); }
.rev-card.accent .lbl, .rev-card.accent .val, .rev-card.accent .sub { color: #fff; }
.rev-card.accent .lbl, .rev-card.accent .sub { opacity: .88; }

/* Les 4 cartes de revenus passent côte à côte seulement quand l'écran est
   franchement large : en dessous, deux par ligne pour que les montants
   (24 900 €) restent lisibles et jamais tassés. */
@media (min-width: 768px) {
  .rev-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer {
  background: #fff; border-top: 1px solid var(--line); padding: 28px 0 34px; margin-top: 8px;
}
.footer .cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
.footer a { color: var(--ink-2); font-size: 14px; display: block; padding: 3px 0; }
.footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.footer-bottom { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* ---------- Auth ---------- */
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; }
.auth-top {
  background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff;
  padding: calc(34px + env(safe-area-inset-top, 0px)) 0 30px;
}
.auth-body { flex: 1; padding: 22px 0 40px; }
.auth-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; margin-top: -26px; }

/* ---------- Microphone ---------- */
.mic-zone { text-align: center; padding: 8px 0 4px; }
.mic-btn {
  width: 104px; height: 104px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(108,76,224,.35); position: relative;
  transition: transform .14s ease;
}
.mic-btn:active { transform: scale(.95); }
.mic-btn svg { width: 42px; height: 42px; }
.mic-btn.listening { background: linear-gradient(145deg, #FF5A6E, #D6142E); box-shadow: 0 12px 30px rgba(214,20,46,.35); }
.mic-btn.listening::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid rgba(214,20,46,.4); animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.22); opacity: 0; } }
.mic-wrap { display: inline-block; position: relative; }
.mic-label { margin-top: 14px; font-size: 14px; color: var(--ink-2); font-weight: 600; min-height: 21px; }

.transcript {
  background: var(--brand-soft); border-radius: var(--radius-sm); padding: 13px 15px;
  font-size: 13.5px; color: var(--ink-2); min-height: 46px; line-height: 1.5;
}
.transcript.empty { color: var(--muted); font-style: italic; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 12.5px; font-weight: 650; padding: 7px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark); border: 0; cursor: pointer;
  font-family: inherit; transition: transform .12s ease;
}
.chip:active { transform: scale(.95); }
.chip.on, .chip.active { background: var(--brand); color: #fff; }
.chip.accent { background: var(--accent-soft); color: #0B7A6B; }

/* ---------- Signature ---------- */
.sign-pad-wrap {
  border: 2px dashed var(--line); border-radius: var(--radius); background: #fff;
  padding: 6px; position: relative;
}
.sign-pad-wrap.ready { border-style: solid; border-color: var(--brand); }
canvas.sign-pad { width: 100%; height: 220px; display: block; border-radius: 12px; touch-action: none; }
.sign-line { position: absolute; left: 26px; right: 26px; bottom: 44px; border-bottom: 1px solid var(--line); pointer-events: none; }

/* ---------- Contract sheet ---------- */
.sheet {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 20px; font-size: 13.5px; line-height: 1.65; color: var(--ink);
}
.sheet h2 { font-size: 17px; text-align: center; margin-bottom: 4px; }
.sheet .sheet-head { display: flex; justify-content: center; margin-bottom: 14px; }
.sheet .sheet-logo { max-height: 62px; max-width: 210px; width: auto; object-fit: contain; }
.logo-preview {
  width: 96px; height: 96px; flex: none; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6px;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bandeau-verif {
  background: var(--warn-soft); border: 1px solid #F6DFBB;
  font-size: 13.5px; color: #8A5300;
}
.bandeau-verif button { color: var(--warn); background: rgba(255,255,255,.7); }
.sheet .sheet-sub { text-align: center; color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.sheet .sheet-sec { margin-bottom: 16px; }
.sheet .sheet-sec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-dark); margin-bottom: 7px; }
.sheet .kv { display: grid; grid-template-columns: 1fr; gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sheet .kv .k { color: var(--muted); font-size: 12px; }
.sheet .kv .v { font-weight: 620; }
.sheet .sign-box {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-height: 96px;
  display: flex; align-items: center; justify-content: center;
}
.sheet .sign-box img { max-height: 120px; }
.sheet .sign-typed { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 26px; color: var(--brand-dark); }

/* ---------- Table ---------- */
.table-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; padding: 11px 14px; background: #FBFAFF; color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .strong { font-weight: 650; }

/* ---------- Empty / toast / modal ---------- */
.empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; margin-bottom: 10px; opacity: .5; }

.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 200; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; border-radius: 13px; padding: 12px 15px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  animation: toastIn .22s ease; display: flex; align-items: center; gap: 9px;
}
.toast.ok { background: #0B6B37; }
.toast.err { background: #D6314A; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

.sheet-modal {
  position: fixed; inset: 0; z-index: 150; background: rgba(22,18,44,.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.sheet-modal .panel {
  background: #fff; border-radius: 22px 22px 0 0; width: 100%; max-width: 560px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 90vh; overflow-y: auto;
  animation: sheetUp .24s ease;
  position: relative;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-handle { width: 42px; height: 4px; border-radius: 99px; background: var(--line); margin: 0 auto 16px; }

/* Croix de fermeture des feuilles (modales) : sur téléphone, sortir d'une
   feuille ne doit jamais dépendre d'un bouton situé tout en bas — il faut
   faire défiler pour le trouver. La croix est posée automatiquement par
   app.js sur chaque feuille, en haut à droite, avec une zone tactile de
   40 px. Sans ce repère, on reste bloqué dans la feuille. */
.sheet-x {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 11px; background: #F4F3FA; color: var(--ink-2);
  cursor: pointer; font-family: inherit; z-index: 2;
  transition: transform .12s ease, background .15s ease;
}
.sheet-x:active { transform: scale(.92); background: var(--brand-soft); color: var(--brand-dark); }
.sheet-x svg { width: 19px; height: 19px; }
/* Le titre d'une feuille ne passe jamais sous la croix */
.sheet-modal .panel > h2 { padding-right: 44px; }

/* ---------- Splash ---------- */
#app-splash {
  display: none; position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
#app-splash.show { display: flex; animation: splashOut .4s ease 1.2s forwards; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
#app-splash .sp-name { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }

.install-zone { display: flex; flex-direction: column; gap: 10px; }
/* Sur téléphone, quand le bandeau flottant s'affiche, il remplace le bouton fixe
   (jamais les deux en même temps). Le bouton reste visible par défaut : si le
   script ne se charge pas, l'installation reste possible. */
@media (max-width: 767px) {
  body.install-banner-open .install-zone { display: none; }
  body.keep-install-btn.install-banner-open .install-zone { display: flex; }
}
.install-note { font-size: 12.5px; color: var(--muted); }
.store-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff;
  border-radius: 12px; padding: 9px 14px; font-size: 12.5px; font-weight: 650;
}
.store-badge svg { width: 18px; height: 18px; }

/* ---------- Bandeau d'installation sur l'écran d'accueil ----------
   Affiché seulement sur téléphone et tablette (jamais sur ordinateur),
   et seulement si l'application n'est pas déjà installée. */
.install-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  animation: ibUp .3s ease;
}
/* Quand la barre de navigation du bas est présente, le bandeau se pose juste au-dessus */
.bottom-nav ~ .install-banner {
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 12px;
}
@keyframes ibUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.install-banner-in {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 14px 15px; max-width: 560px; margin: 0 auto;
}
.ib-head { display: flex; align-items: flex-start; gap: 11px; }
.ib-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.ib-icon svg { width: 18px; height: 18px; }
.ib-title { display: block; font-size: 14.5px; line-height: 1.35; }
.ib-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ib-close {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ib-close:active { background: var(--brand-soft); }
.ib-close svg { width: 17px; height: 17px; }
.ib-step-title { font-size: 12.5px; font-weight: 700; color: var(--brand-dark); margin-bottom: 3px; }
.ib-etapes { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.ib-etape { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.ib-etape .n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ib-actions { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.ib-actions .btn { min-height: 0; }
.ib-later {
  border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  padding: 8px 4px; white-space: nowrap;
}

/* ---------- Admin ---------- */
.admin-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-dark); background: var(--brand-soft); padding: 4px 9px; border-radius: 7px;
}
.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
}
/* ---------- Graphiques ---------- */
.chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 10px; }
.bar-lbl { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.bar-track {
  display: block; height: 10px; border-radius: 99px;
  background: var(--brand-soft); overflow: hidden;
}
.bar-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  transition: width .5s ease;
}
/* Barre « signés » : le vert clair #22C55E ne donnait que 2,28 de contraste sur
   le fond de la piste (la norme demande 3,0 pour un élément graphique) — la
   barre se distinguait mal de son rail. Ce dégradé reste dans la même famille
   et atteint 4,6 au minimum. */
.bar-fill.ok { background: linear-gradient(90deg, #0F8447, var(--ok)); }
.bar-val { font-size: 13px; font-weight: 700; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.temp-pass {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px; font-weight: 800; letter-spacing: .14em; text-align: center;
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: var(--radius-sm); padding: 16px 12px; margin: 4px 0 12px;
  word-break: break-all; user-select: all;
}

/* ---------- Signature publique (QR code self-service) ---------- */
.public-sign { background: var(--bg); }
.sign-shell { min-height: 100vh; display: flex; flex-direction: column; }
.sign-top {
  background: linear-gradient(150deg, var(--brand), var(--brand-dark)); color: #fff;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 0 30px;
}
.sign-top h1 { color: #fff; font-size: 25px; }
.sign-top p { color: rgba(255,255,255,.86); font-size: 14.5px; }
.sign-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sign-brand .brand-logo { background: rgba(255,255,255,.2); }
.sign-body { flex: 1; padding: 22px 0 40px; }
.sign-body .card:first-child { margin-top: -26px; }

.sign-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sign-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.sign-step .n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.consent-box {
  background: #FBFAFF; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 15px; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-height: 280px; overflow-y: auto;
}
.consent-box p { margin: 0 0 9px; }
.consent-box p:last-child { margin-bottom: 0; }

.check-line {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 13px 14px; font-size: 14px; font-weight: 600; color: #0B7A6B; cursor: pointer;
}
.check-line input { width: 21px; height: 21px; flex: none; accent-color: var(--accent-ink); margin: 0; }

/* Marque ViSAgree visible sur la page publique de signature */
.pr-promo {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 16px; margin-top: 16px;
}
.pr-promo-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.pr-promo-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; flex: none; }
.pr-promo-head strong { display: block; font-size: 14.5px; }
.pr-promo-head .tiny { line-height: 1.45; }
/* Écran de remerciement : la marque reste alignée à gauche même dans une carte centrée */
.promo-fin { text-align: left; }

/* ---------- Affiche à imprimer (QR code du dossier) ---------- */
.qr-poster { display: none; }
.qr-poster-in {
  border: 2px solid var(--ink); border-radius: 14px;
  padding: 26px 22px; text-align: center; max-width: 520px; margin: 0 auto;
}
.qr-poster-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em; margin-bottom: 16px;
}
.qr-poster-in h1 { font-size: 24px; margin-bottom: 6px; }
.qr-poster-in .ev { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; }
.qr-poster-in img { width: 260px; max-width: 70%; margin: 0 auto; }
.qr-poster-in .lien { font-size: 11.5px; color: var(--muted); margin-top: 14px; word-break: break-all; }
.qr-poster-in .note { font-size: 12.5px; color: var(--ink-2); margin-top: 16px; }
@media print {
  body.print-poster { background: #fff; padding: 0; }
  body.print-poster .app-header,
  body.print-poster .bottom-nav,
  body.print-poster .toast-host { display: none !important; }
  body.print-poster main > *:not(.qr-poster) { display: none !important; }
  body.print-poster .qr-poster { display: block !important; }
  body.print-poster .page { padding: 0; }
  body.print-poster .wrap { max-width: none; padding: 0; }
}

.sign-ok { color: var(--ok); display: flex; justify-content: center; margin-bottom: 6px; }
.recap { text-align: left; }
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row span { color: var(--muted); font-size: 13px; }

/* ---------- QR code affiché au professionnel ---------- */
.qr-card { text-align: center; }
.qr-frame {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: inline-block; max-width: 100%;
}
.qr-frame img { width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.qr-link {
  display: block; background: #FBFAFF; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 12px; color: var(--ink-2); word-break: break-all; text-align: left;
}
/* Envoi facile du lien (e-mail, SMS, WhatsApp, partage natif) */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--brand-dark);
  font-family: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.share-btn:active { transform: scale(.97); background: var(--brand-soft); }
.share-btn svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 768px) { .share-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Site vitrine ---------- */
.vnav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.vnav-inner {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 9px; padding-bottom: 9px; position: relative;
}
.vnav-burger {
  order: 3; flex: none; width: 40px; height: 40px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 0; margin: 0; font: inherit; -webkit-appearance: none; appearance: none;
  position: relative; z-index: 2;
}
.vnav-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .18s ease, opacity .18s ease;
}
.vnav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vnav-burger.is-open span:nth-child(2) { opacity: 0; }
.vnav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.vnav-links {
  display: none; order: 4; width: 100%;
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; gap: 2px;
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 26px rgba(30, 27, 46, .1);
  padding: 8px 16px 12px;
}
.vnav-links.open { display: flex; }
.vnav-links a {
  font-size: 15px; font-weight: 650; color: var(--ink-2);
  padding: 11px 12px; border-radius: 11px; white-space: nowrap;
}
.vnav-links a.active { background: var(--brand-soft); color: var(--brand-dark); }
.vnav-menu-cta {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.vnav-menu-cta .btn { width: 100%; }
.vnav-actions { order: 2; margin-left: auto; display: none; align-items: center; gap: 8px; }
.vnav-actions .btn { white-space: nowrap; }

.page-hero {
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 60%, #2E1A80 100%);
  color: #fff; padding: 34px 0 38px;
}
.page-hero h1 { color: #fff; font-size: 27px; max-width: 24ch; }
.page-hero p { color: rgba(255,255,255,.88); font-size: 15.5px; max-width: 54ch; margin-bottom: 0; }
.breadcrumb { font-size: 12.5px; color: rgba(255,255,255,.78); margin-bottom: 10px; }
.breadcrumb a { color: rgba(255,255,255,.9); }

.media-block { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.media-block img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: auto; }
.media-block h2 { margin-bottom: 6px; }
.media-block p { color: var(--ink-2); font-size: 14.5px; }

.gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gallery figure { margin: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.gallery img { width: 100%; height: 190px; object-fit: cover; display: block; }
.gallery figcaption { padding: 11px 14px; font-size: 13px; color: var(--ink-2); }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14.5px; color: var(--ink-2); }
.check-list li svg { width: 19px; height: 19px; color: var(--accent-ink); flex: none; margin-top: 2px; }
.cross-list li svg { color: var(--danger); }

.faq { display: grid; grid-template-columns: 1fr; gap: 10px; }
.faq details {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px;
}
.faq summary { font-weight: 680; font-size: 14.5px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 18px; color: var(--brand); font-weight: 800; }
.faq details[open] summary::before { content: "−"; }
.faq p { margin: 9px 0 0; font-size: 14px; color: var(--ink-2); }

.cta-band { text-align: center; padding: 28px 20px; }
.cta-band h2 { margin-bottom: 6px; }

.use-cases { display: grid; grid-template-columns: 1fr; gap: 12px; }
.use-case { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 17px; }
.use-case .tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dark); }
.use-case h3 { margin: 5px 0 5px; font-size: 15.5px; }
.use-case p { margin: 0; font-size: 14px; color: var(--ink-2); }

.form-row-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.contact-line { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: 2px; }
.contact-line .k { font-size: 12.5px; color: var(--muted); }
.contact-line .v { font-weight: 640; font-size: 14.5px; word-break: break-word; }

.notice {
  background: var(--brand-soft); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 13.5px; color: var(--brand-dark);
}
/* Champ anti-robots : invisible pour les humains, rempli seulement par les robots */
.honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.notice-ok { background: var(--ok-soft); color: #0B6B37; }
.notice-err { background: var(--danger-soft); color: #A81C1C; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  /* minmax(0, …) et non 1fr : la piste doit pouvoir se comprimer sous la
     largeur minimale d'un champ de date, sinon les deux champs débordent. */
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: repeat(3, 1fr); }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn { flex: 0 0 auto; }
  .header-actions { display: flex; gap: 8px; }
  .card-list.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-list.two > * + * { margin-top: 0; }
}
@media (min-width: 860px) {
  h1 { font-size: 28px; }
  .hero h1 { font-size: 40px; }
  .wrap { padding: 0 24px; }
  .sheet .kv { grid-template-columns: 190px 1fr; padding: 7px 0; align-items: baseline; }
  .footer .cols { grid-template-columns: 1.4fr 1fr 1fr; }
  .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  /* Les quatre compteurs passent côte à côte seulement quand l'écran est
     franchement large : en dessous, deux par ligne pour que des nombres à
     9 caractères (525 000) restent lisibles et jamais tassés. */
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 380px) {
  .mic-btn { width: 90px; height: 90px; }
  .brand-name { font-size: 15px; }
}
.mobile-only { display: initial; }
@media (min-width: 860px) { .mobile-only { display: none !important; } }

/* Vitrine : passage en colonnes sur ordinateur, jamais sur mobile */
@media (min-width: 768px) {
  .vnav-burger { display: none; }
  .vnav-menu-cta { display: none; }
  .vnav-actions { display: flex; }
  .vnav-links {
    display: flex; order: 2; width: auto;
    position: static; flex-direction: row; gap: 4px;
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  .vnav-links a { font-size: 13.5px; padding: 7px 11px; border-radius: 10px; }
  .vnav-actions { order: 3; margin-left: 0; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .use-cases { grid-template-columns: repeat(3, 1fr); }
  /* La boutique passe en colonnes sur ordinateur. auto-fit s'adapte au nombre
     d'offres (3 abonnements, 2 packs) : jamais de colonne vide ni de bloc tassé. */
  .pricing-boutique { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .faq { grid-template-columns: 1fr 1fr; }
  .media-block { grid-template-columns: 1.1fr 1fr; gap: 26px; }
  .media-block.inverse > :first-child { order: 2; }
  .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 22px; }
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .page-hero { padding: 46px 0 50px; }
  .page-hero h1 { font-size: 34px; }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .media-block { grid-template-columns: 1.15fr 1fr; gap: 34px; }
}

/* ============ LIENS NOMINATIFS — suivi des personnes à faire signer ============ */

/* Coordonnées déjà connues du professionnel : la personne voit d'où vient le lien */
.lock-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 5px 10px;
  border-radius: 7px;
  background: var(--accent-soft, #E4F8F4); color: #0B7A6B;
  font-size: 12px; font-weight: 600;
}
.lock-chip svg { width: 15px; height: 15px; }

/* Un champ verrouillé reste lisible : on ne donne pas l'impression d'un bug */
.input[readonly] {
  background: #F6F5FA;
  color: var(--ink-2, #4A4760);
  cursor: default;
}

/* Suivi : une ligne par personne, statut bien visible */
.item .badge { white-space: nowrap; }

/* Le bloc d'étapes reste lisible sur téléphone */
@media (max-width: 560px) {
  .lock-chip { font-size: 11.5px; }
}

/* ============ UN MICRO DEVANT CHAQUE CHAMP ============
   Le champ et son micro vivent sur la même ligne (grille) : le micro reste
   parfaitement aligné avec le champ, quelle que soit la hauteur du libellé. */
.field-mic { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.field-mic > label { grid-column: 1 / -1; }
.field-mic > .input,
.field-mic > textarea { grid-column: 1; }
.field-mic > .mic-in { grid-column: 2; }
.field-mic > .hint,
.field-mic > .mic-live,
.field-mic > .addr-sugg,
.field-mic > .lock-chip { grid-column: 1 / -1; }

/* Mêmes dimensions que sur la page publique : les deux écrans doivent
   se ressembler, le professionnel et la personne qui signe. */
.mic-in {
  width: 44px; height: 34px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--brand-dark);
  cursor: pointer; font-family: inherit;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.mic-in:active { transform: scale(.94); }
.mic-in svg { width: 18px; height: 18px; }
.mic-in[disabled] { opacity: .4; cursor: not-allowed; }
/* Le micro écoute : il le montre clairement, et le champ s'entoure par la même occasion */
.mic-in.listening {
  background: var(--danger); border-color: var(--danger); color: #fff;
  animation: micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
.field-mic.mic-active .input { border-color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .mic-in.listening { animation: none; }
}

/* Ce qui vient d'être rempli (dicté ou choisi) se voit une seconde */
.input.filled-ok { border-color: var(--accent-ink); }
.field-err { border-color: var(--danger) !important; }

/* Bandeau « je t'écoute » et note d'aide sous les champs */
.mic-live {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 13.5px; font-weight: 600; min-height: 40px;
  display: flex; align-items: center;
}
.mic-live.empty { color: var(--muted); font-style: italic; font-weight: 500; }
.mic-note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.55; }

/* ---------- Adresse assistée ----------
   Dès 3 lettres, l'adresse complète est proposée : un tap remplit la rue,
   le code postal et la ville d'un coup. Aucune saisie inutile. */
.addr-sugg {
  margin-top: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden;
}
.addr-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 13.5px; line-height: 1.4;
}
.addr-item:last-child { border-bottom: 0; }
.addr-item:active { background: var(--brand-soft); }

/* ---------- Envoi du lien à une personne ---------- */
.send-result {
  margin-top: 14px; padding: 14px 15px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.send-lien {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2); word-break: break-all; line-height: 1.5;
}

/* La feuille « Modèle de contrat » reste discrète : c'est un réglage, pas une étape */
#modelBox summary { cursor: pointer; padding: 6px 0; }

/* ---------- Sous-onglets d'une page (personnes à faire signer, campagne) ----------
   Un écran qui empile six cartes oblige à faire défiler pour retrouver son
   bouton. Les onglets regroupent ce qui va ensemble, avec un chiffre quand il
   reste du travail : on voit où aller sans chercher.
   Sur téléphone ils défilent horizontalement plutôt que de se comprimer —
   chaque libellé reste lisible et la zone tactile garde sa taille. L'onglet
   actif est marqué par un fond ET un trait sous le libellé : la couleur seule
   ne suffit pas à savoir où l'on est. */
.ctabs {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 16px 0 0; padding: 0 0 11px; border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.ctabs::-webkit-scrollbar { display: none; }
.ctab {
  flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; background: transparent; border-radius: 9px;
  padding: 9px 13px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.ctab:active { transform: scale(.97); }
.ctab.on { background: var(--brand-soft); color: var(--brand-dark); }
.ctab.on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -11px; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.ctab svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.ctab.on svg { opacity: 1; }
.ctab-n {
  display: inline-block; min-width: 19px; text-align: center; font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 7px; background: rgba(30,27,46,.08); color: var(--ink-2);
}
.ctab.on .ctab-n { background: var(--brand); color: #fff; }
.ctab-n:empty { display: none; }
.cpane { display: none; }
.cpane.on { display: block; }
.cpane-titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 750; color: var(--ink); }
.cpane-sous { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ============================================================
   MES TOKENS (profil)
   Le solde est la monnaie de travail du pro : il doit se lire
   en un regard, et les paliers de recharge doivent être clairs.
   ============================================================ */
.tok-forfaits { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tok-forfait {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 14px 16px; text-align: left; font-family: inherit;
  border: 1.5px solid var(--line); background: var(--card, #fff);
  border-radius: 12px; cursor: pointer; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.tok-forfait:active { transform: scale(.99); }
.tok-forfait:hover { border-color: var(--brand); }
.tok-forfait[disabled] { opacity: .6; cursor: wait; }
.tok-pop { border-color: var(--brand); box-shadow: 0 2px 8px rgba(124,92,232,.12); }
.tok-badge {
  position: absolute; top: -9px; left: 14px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; padding: 2px 8px;
  border-radius: 6px; background: var(--brand); color: #fff;
}
.tok-nb { font-size: 17px; font-weight: 800; color: var(--ink); }
.tok-prix { font-size: 15px; font-weight: 700; color: var(--brand); }
.tok-unite { font-size: 12px; color: var(--muted); }
@media (min-width: 768px) {
  .tok-forfaits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Feu vert avant publication ----------
   Vert, orange, rouge : trois réponses lisibles d'un coup d'œil. Ces styles
   vivent ICI et non dans une page, sinon le verdict s'afficherait sans
   couleur sur les écrans qui ne sont pas la campagne (la page du dossier). */
.vr{border-radius:12px;padding:12px;margin:10px 0;border:1px solid;}
.vr-vert{background:var(--ok-soft,#E7F8EE);border-color:#A6E0B8;color:#0B6B37;}
.vr-orange{background:var(--warn-soft,#FEF3E2);border-color:#F0CF95;color:#8A5300;}
.vr-rouge{background:var(--danger-soft,#FDECEC);border-color:#F2B8BF;color:#A81C1C;}
.vr ul{margin:8px 0 0;padding-left:18px;}
.vr strong{font-weight:700;}