/* Espace client Colybry (/mon-espace/) — portail authentifié particuliers.
   Palette turquoise/marine du site public (pas le registre "fintech glass"
   de l'admin — c'est un produit client, pas un outil interne), même
   direction visuelle que /outil-cv/ (dégradé doux, cartes, boutons pilule). */

:root {
  --turquoise: #50DDC4;
  --turquoise-dark: #26BCA1;
  --turquoise-ink: #137A68; /* texte et liens turquoise : contraste AA (5,2:1 sur blanc), le turquoise-dark (2,4:1) reste pour les fonds, bordures et icônes */
  --violet: #815EE5;
  --violet-tint: #F8F6FE;
  --marine: #233048;
  --slate: #5b6b82;
  --green-100: #E9FBF8;
  --green-300: #D3F7F0;
  --amber: #B8860B;
  --amber-tint: #FDF3E0;
  --amber-ink: #8A6508; /* texte ambre lisible (contraste AA), l'ambre vif reste pour les icônes */
  --border: #e3e8ef;
  --danger: #c8394a;
  --danger-bg: #fdf0f1;
  --shadow-card: 0 8px 24px rgba(35,48,72,0.07);
  --shadow-lift: 0 20px 40px rgba(35,48,72,0.12);
  --app-bg: #F4F6FA;
  --pilier-administratif: var(--turquoise-dark);
  --pilier-administratif-tint: var(--green-100);
  --pilier-logement: var(--violet);
  --pilier-logement-tint: var(--violet-tint);
  --pilier-emploi: var(--amber);
  --pilier-emploi-tint: var(--amber-tint);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Poppins', -apple-system, sans-serif; color: var(--marine);
  background: var(--app-bg);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}
/* Fond "liquide" façon Revolut (révision UX du 23/09/2026) : deux formes
   organiques floues, fixes au scroll, en arrière-plan — plus vivant qu'un
   simple aplat gris, mais bien plus discret que le dégradé radial "démo IA"
   retiré juste avant (couleur diffuse et floutée, jamais un aplat net).
   Exclu de l'écran de connexion, qui a déjà son propre habillage. */
body:not(.esp-login-body)::before,
body:not(.esp-login-body)::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none; filter: blur(90px);
}
body:not(.esp-login-body)::before {
  top: -220px; left: -160px; width: 520px; height: 520px;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: radial-gradient(circle at 35% 35%, rgba(80,221,196,0.30), rgba(80,221,196,0) 70%);
}
body:not(.esp-login-body)::after {
  bottom: -260px; right: -180px; width: 560px; height: 560px;
  border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%;
  background: radial-gradient(circle at 65% 65%, rgba(129,94,229,0.24), rgba(129,94,229,0) 70%);
}
.esp-topbar, .esp-main, .esp-bottomnav { position: relative; z-index: 1; }
a { text-decoration: none; color: inherit; }
input, select, textarea, button { font-family: inherit; }

/* ====================== Login ====================== */
.esp-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--green-100) 0%, #fff 60%); padding: 24px; }
.esp-login-card { max-width: 420px; width: 100%; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lift); padding: 40px 32px; text-align: center; }
.esp-login-mascot { width: 88px; margin-bottom: 14px; }
.esp-login-logo { height: 26px; margin-bottom: 28px; }
.esp-login-card h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.esp-login-sub { color: var(--slate); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; }
.esp-login-card form { display: flex; flex-direction: column; gap: 12px; }
.esp-login-card input[type=email], .esp-login-card input[type=password] { padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 0.95rem; width: 100%; }
.esp-login-card input[type=email]:focus, .esp-login-card input[type=password]:focus { outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(80,221,196,0.2); }
.esp-login-hint { margin-top: 20px; font-size: 0.85rem; color: var(--slate); }
.esp-login-hint a { color: var(--turquoise-ink); font-weight: 700; }
.esp-error { background: var(--danger-bg); color: var(--danger); border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px; }

.esp-btn { display: inline-block; background: var(--marine); color: #fff; font-weight: 700; padding: 13px 20px; border: none; border-radius: 50px; cursor: pointer; font-size: 0.95rem; }
.esp-btn:hover { background: #1a2436; }

/* ====================== Layout applicatif ====================== */
.esp-topbar {
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: 12px 20px; position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.esp-topbar-logo { height: 20px; }
.esp-topbar-nav { display: flex; gap: 6px; }
.esp-topbar-nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: var(--slate); }
.esp-topbar-nav a:hover { background: var(--green-100); color: var(--marine); }
.esp-topbar-nav a.active { background: var(--marine); color: #fff; }
/* Menu profil (23/09/2026) — avatar-initiale rond façon app moderne
   (Revolut/Linear...) qui ouvre un dropdown avec "Mon profil" et
   "Déconnexion", plutôt que deux liens séparés dans la topbar. */
.esp-profil-menu { position: relative; }
.esp-profil-avatar {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--turquoise) 0%, var(--turquoise-dark) 100%);
  color: #fff; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(38,188,161,0.35); transition: transform 0.15s ease;
}
.esp-profil-avatar:hover { transform: scale(1.06); }
.esp-profil-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; background: #fff;
  border-radius: 16px; box-shadow: var(--shadow-lift); padding: 8px; z-index: 25;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.14s ease, transform 0.14s ease;
}
.esp-profil-menu.open .esp-profil-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.esp-profil-dropdown-name { font-weight: 700; font-size: 0.85rem; color: var(--marine); padding: 8px 12px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.esp-profil-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: var(--marine); }
.esp-profil-dropdown a:hover { background: var(--green-100); }
.esp-profil-dropdown a svg { width: 16px; height: 16px; color: var(--slate); flex-shrink: 0; }

.esp-main { max-width: 880px; margin: 0 auto; padding: 40px 20px 90px 20px; }
.esp-h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: 24px; }

/* ====================== Carte de progression premium (façon "carte bancaire" Revolut) ======================
   Direction graphisme/webmaster du 22/09/2026 : contraste de surface (bloc
   marine profond, pas de dégradé) plutôt qu'ajout de couleur — le "big
   number" domine l'écran, le ring devient un simple accent en fond. */
.esp-progress-premium {
  position: relative; background: var(--marine); border-radius: 28px; padding: 40px 28px 32px 28px;
  margin-bottom: 24px; text-align: center; color: #fff; overflow: hidden;
  box-shadow: 0 20px 50px rgba(35,48,72,0.35);
}
.esp-ring-wrap { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%,-50%); opacity: 0.9; }
.esp-ring { width: 100%; height: 100%; }
.esp-ring-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 6; }
.esp-ring-fill {
  fill: none; stroke: var(--turquoise); stroke-width: 6; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}
.esp-premium-pct { position: relative; font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--turquoise); }
.esp-premium-pct span { font-size: 1.8rem; opacity: 0.75; font-weight: 700; }
.esp-premium-label { position: relative; font-weight: 700; margin-top: 6px; }
.esp-premium-msg { position: relative; color: rgba(255,255,255,0.62); font-size: 0.88rem; margin-top: 6px; }

.esp-celebrate { display: flex; align-items: center; gap: 14px; background: var(--green-100); border-radius: 16px; padding: 16px 20px; margin-bottom: 24px; }
.esp-celebrate-mascot { width: 56px; flex-shrink: 0; }
.esp-celebrate p { font-weight: 700; color: var(--marine); font-size: 0.92rem; }

/* ====================== Démarches ====================== */
.esp-section-title { font-size: 1.1rem; font-weight: 800; margin: 28px 0 14px 0; }
.esp-card {
  background: #fff; border: none; border-radius: 22px; box-shadow: var(--shadow-card);
  padding: 18px 22px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
a.esp-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.esp-card-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-card-icon svg { width: 22px; height: 22px; }
.esp-card-icon--administratif { background: var(--pilier-administratif-tint); color: var(--pilier-administratif); }
.esp-card-icon--logement { background: var(--pilier-logement-tint); color: var(--pilier-logement); }
.esp-card-icon--emploi { background: var(--pilier-emploi-tint); color: var(--pilier-emploi); }
.esp-card-body { flex: 1; min-width: 0; }
.esp-card--administratif { background: linear-gradient(90deg, var(--pilier-administratif-tint) 0%, #fff 14%); }
.esp-card--logement { background: linear-gradient(90deg, var(--pilier-logement-tint) 0%, #fff 14%); }
.esp-card--emploi { background: linear-gradient(90deg, var(--pilier-emploi-tint) 0%, #fff 14%); }
.esp-card-pilier-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); font-weight: 700; margin-bottom: 3px; }
.esp-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.esp-card-title { font-weight: 700; font-size: 1.05rem; }
.esp-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.esp-badge.a_faire { background: var(--amber-tint); color: var(--amber-ink); }
.esp-badge.en_cours { background: #EAF2FF; color: #2563EB; }
.esp-badge.termine { background: var(--green-100); color: var(--turquoise-ink); }
.esp-badge.paye { background: var(--green-100); color: var(--turquoise-ink); }
.esp-badge.impaye { background: var(--danger-bg); color: var(--danger); }
.esp-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 2px 0; }
.esp-card-meta { font-size: 0.82rem; color: var(--slate); margin-top: 6px; }

/* Checklist : rond à cocher tout à gauche de chaque carte — la liste des 6
   démarches obligatoires doit se lire d'un coup d'œil comme une checklist,
   pas seulement via le badge de statut texte. */
.esp-card-check {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff;
}
.esp-card-check.is-done { background: var(--turquoise-dark); border-color: var(--turquoise-dark); }
.esp-card-check svg { width: 13px; height: 13px; }
.esp-card-title.is-done { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.55; }

.esp-empty { text-align: center; padding: 40px 20px; color: var(--slate); }
.esp-empty-state { text-align: center; padding: 30px 20px; background: #fff; border: none; border-radius: 22px; box-shadow: var(--shadow-card); }
.esp-empty-mascot { width: 90px; margin-bottom: 14px; }
.esp-empty-state p { color: var(--slate); font-size: 0.92rem; }
.esp-empty-state a { color: var(--turquoise-ink); font-weight: 700; }

.esp-edit-link { font-size: 0.85rem; font-weight: 700; color: var(--turquoise-ink); flex-shrink: 0; }
.esp-edit-link:hover { color: var(--marine); }
.esp-card-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.esp-checkbox-row--small { font-weight: 500; font-size: 0.85rem; color: var(--marine); margin-top: 0; gap: 8px; }
.esp-checkbox-row--small input { width: 16px; height: 16px; }
.esp-inline-link { background: none; border: none; padding: 0; font-size: 0.85rem; font-weight: 700; color: var(--turquoise-ink); cursor: pointer; }
.esp-inline-link:hover { color: var(--marine); }
.esp-inline-link:disabled { color: var(--slate); cursor: default; }

/* CTA "Demander de l'aide à Colybry" — un vrai bouton (pas un lien texte
   perdu), mais en style discret/outline plutôt que plein : doit rester
   repérable sans dominer visuellement la carte (retour du 23/09/2026 après
   une première version trop appuyée). */
.esp-btn-aide {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  background: transparent; color: var(--turquoise-ink); border: 1.5px solid var(--green-300);
  border-radius: 10px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; margin-top: 10px;
}
.esp-btn-aide:hover { background: var(--green-100); border-color: var(--turquoise-dark); }
.esp-btn-aide svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ====================== Checklist "besoins" (onboarding + édition) ====================== */
.esp-admin-field-label { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.esp-select { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 0.95rem; background: #fff; }
.esp-select:focus { outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(80,221,196,0.2); }
.esp-besoins-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.esp-besoin-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border);
  border-radius: 14px; cursor: pointer; font-weight: 600; transition: border-color 0.15s ease, background 0.15s ease;
}
.esp-besoin-item:has(input:checked) { border-color: var(--turquoise-dark); background: var(--green-100); }
.esp-besoin-item input { width: 20px; height: 20px; accent-color: var(--turquoise-dark); flex-shrink: 0; }

/* ====================== Fiche démarche ======================
   Refonte du 23/09/2026 : une seule grande carte avec des séparateurs plats
   lisait comme un gabarit générique — remplacée par un en-tête distinct
   (icône de pilier + titre + statut) suivi de sections séparées, chacune
   avec son propre en-tête iconé, plutôt qu'un simple <h3> après un filet. */
.esp-back { display: inline-block; margin-bottom: 18px; font-weight: 700; color: var(--slate); }
.esp-back:hover { color: var(--marine); }

.esp-detail-header {
  display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 22px;
  box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 16px; position: relative; overflow: hidden;
}
.esp-detail-header::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; }
.esp-detail-header--administratif::before { background: var(--pilier-administratif); }
.esp-detail-header--logement::before { background: var(--pilier-logement); }
.esp-detail-header--emploi::before { background: var(--pilier-emploi); }
.esp-detail-icon { width: 52px; height: 52px; }
.esp-detail-icon svg { width: 26px; height: 26px; }
.esp-detail-header-text { flex: 1; min-width: 0; }
.esp-detail-title { font-size: 1.25rem; font-weight: 800; margin: 2px 0 4px 0; }

.esp-detail-section { background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 14px; }
.esp-detail-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.esp-detail-section-head svg { width: 20px; height: 20px; color: var(--turquoise-ink); flex-shrink: 0; }
.esp-detail-section-head h2 { font-size: 1rem; font-weight: 700; }

.esp-tarifs-table { width: 100%; border-collapse: collapse; }
.esp-tarifs-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.esp-tarifs-table td { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.esp-tarifs-table tfoot td { border-bottom: none; padding-top: 14px; font-size: 0.95rem; }
.esp-tarif-montant { font-weight: 700; color: var(--marine); }

/* Historique visible côté client (23/09/2026) — sous-ensemble opt-in de client_produit_notes, voir cb_crm_list_notes_client_produit_visibles(). */
.esp-histo-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.esp-histo-item:last-child { border-bottom: none; padding-bottom: 0; }
.esp-histo-date { font-weight: 700; color: var(--marine); margin-right: 8px; }
.esp-histo-auteur { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--turquoise-ink); font-weight: 700; }
.esp-histo-item p { margin-top: 4px; color: var(--marine); line-height: 1.5; }

/* Liste des documents nécessaires (23/09/2026) — distincte de .esp-doc-item
   (documents déjà déposés sur une démarche) : ici chaque ligne peut avoir un
   modèle à télécharger, ou juste un badge "à fournir" si le client doit
   l'apporter lui-même. */
.esp-docitem { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 16px 20px; margin-bottom: 12px; }
.esp-docitem-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--green-100); color: var(--turquoise-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-docitem-icon svg { width: 20px; height: 20px; }
.esp-docitem-body { flex: 1; min-width: 0; }
.esp-docitem-title { font-weight: 700; font-size: 0.95rem; display: block; }
.esp-docitem-list-inline .esp-docitem-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.esp-docitem-list-inline .esp-docitem-row:last-child { border-bottom: none; padding-bottom: 0; }

.esp-doc-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--green-100); border-radius: 12px; margin-bottom: 8px; font-size: 0.9rem; }
.esp-doc-item svg { width: 16px; height: 16px; color: var(--turquoise-ink); flex-shrink: 0; }
.esp-doc-item a { font-weight: 700; color: var(--marine); }
.esp-checkbox-row { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.esp-checkbox-row input { width: 18px; height: 18px; accent-color: var(--turquoise-dark); }
.esp-help-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 0.9rem; resize: vertical; min-height: 70px; margin-bottom: 10px; }
.esp-btn-secondary { display: inline-block; background: var(--green-100); color: var(--turquoise-ink); font-weight: 700; padding: 11px 20px; border: none; border-radius: 50px; cursor: pointer; font-size: 0.88rem; }
.esp-btn-secondary:hover { background: var(--green-300); }
.esp-confirm { color: var(--turquoise-ink); font-weight: 700; font-size: 0.85rem; margin-top: 8px; display: none; }
.esp-confirm.show { display: block; }

/* ====================== Événements ====================== */
.esp-event-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 12px; }
.esp-event-title { font-weight: 700; margin-bottom: 4px; }
.esp-event-meta { font-size: 0.85rem; color: var(--slate); margin-bottom: 8px; }
.esp-event-desc { font-size: 0.88rem; color: var(--marine); margin-bottom: 10px; }

.esp-panel-note { background: var(--green-100); color: var(--marine); border-radius: 14px; padding: 18px 20px; font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; }
.esp-situation-rappel { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; padding: 12px 16px; }
.esp-situation-rappel .esp-inline-link { flex-shrink: 0; }

/* ====================== Annuaire (classes dédiées — 23/09/2026) ======================
   Reprenait auparavant .esp-event-card telle quelle : des cartes blanches
   plates sans avatar ni accent, indifférenciées d'une fiche à l'autre — la
   remarque "on dirait fait par l'IA" venait de là. Avatar-initiale coloré
   (teinte tournante sur les 3 piliers) + tag catégorie en pastille, même
   esprit que les cartes du dashboard plutôt qu'un gabarit générique. */
.esp-pro-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 14px; }
.esp-pro-avatar { font-weight: 800; font-size: 1.05rem; }
.esp-pro-body { flex: 1; min-width: 0; }
.esp-pro-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; }
.esp-pro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.85rem; color: var(--slate); margin-bottom: 8px; }
.esp-pro-tag { background: var(--green-100); color: var(--turquoise-ink); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 999px; }
.esp-pro-desc { font-size: 0.88rem; color: var(--marine); line-height: 1.5; }

/* ====================== Assistant / chat (23/09/2026) ====================== */
.esp-chat-banner { display: flex; align-items: center; gap: 12px; background: var(--green-100); color: var(--marine); border-radius: 14px; padding: 14px 18px; font-size: 0.88rem; margin-bottom: 16px; }
.esp-chat-banner svg { width: 20px; height: 20px; color: var(--turquoise-ink); flex-shrink: 0; }
.esp-chat-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 18px 2px; }
.esp-chat-empty { text-align: center; color: var(--slate); font-size: 0.88rem; padding: 30px 10px; }
.esp-chat-bubble { max-width: 78%; padding: 12px 16px; border-radius: 18px; font-size: 0.92rem; line-height: 1.5; }
.esp-chat-bubble--client { align-self: flex-end; background: var(--marine); color: #fff; border-bottom-right-radius: 6px; }
.esp-chat-bubble--ia, .esp-chat-bubble--admin { align-self: flex-start; background: var(--green-100); color: var(--marine); border-bottom-left-radius: 6px; }
.esp-chat-bubble-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; opacity: 0.6; margin-bottom: 4px; }
.esp-chat-form { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 6px; }
.esp-chat-form textarea { flex: 1; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; font-size: 0.9rem; resize: none; min-height: 46px; max-height: 120px; }
.esp-chat-form textarea:focus { outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(80,221,196,0.2); }
.esp-chat-form button { background: var(--marine); color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-chat-form button:hover { background: #1a2436; }
.esp-chat-form button:disabled { opacity: 0.5; cursor: default; }
.esp-chat-form button svg { width: 18px; height: 18px; }
.esp-chat-typing { align-self: flex-start; font-size: 0.82rem; color: var(--slate); font-style: italic; padding-left: 4px; }

/* Bulle flottante (23/09/2026) — remplace l'onglet de nav "Assistant" et la
   page dédiée, disponible sur toutes les pages, comme un widget de chat
   classique (Intercom...). */
#esp-chat-widget { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30; }
#esp-chat-widget-toggle {
  width: 58px; height: 58px; border-radius: 50%; background: var(--marine); color: #fff; border: none;
  cursor: pointer; box-shadow: var(--shadow-lift); display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform 0.15s ease;
}
#esp-chat-widget-toggle:hover { transform: scale(1.05); }
#esp-chat-widget-toggle svg { width: 24px; height: 24px; }
.esp-chat-widget-badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
#esp-chat-widget-panel {
  position: absolute; right: 0; bottom: 74px; width: 360px; max-width: calc(100vw - 32px);
  height: min(70vh, 520px); background: #fff; border-radius: 22px; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
}
#esp-chat-widget-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.esp-chat-widget-header { background: var(--marine); color: #fff; font-weight: 700; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.esp-chat-widget-header button { background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.8; min-width: 40px; min-height: 40px; margin: -10px -12px -10px 0; }
.esp-chat-widget-header button:hover { opacity: 1; }
#esp-chat-widget-banner:empty { display: none; }
#esp-chat-widget-banner .esp-chat-banner { margin: 12px 14px 0 14px; padding: 10px 14px; font-size: 0.8rem; }
#esp-chat-widget-thread { flex: 1; overflow-y: auto; padding: 14px; }
#esp-chat-widget-form { padding: 12px 14px; margin-top: 0; border-top: 1px solid var(--border); }
#esp-chat-widget-form textarea { min-height: 40px; }

@media (max-width: 640px) {
  #esp-chat-widget { right: 14px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  #esp-chat-widget-toggle { width: 52px; height: 52px; }
  #esp-chat-widget-panel { width: calc(100vw - 28px); height: min(58vh, 440px); bottom: 68px; }
}

/* ====================== "Tes prochaines actions" (23/09/2026) ======================
   Widget d'actions concrètes côté client (payer, répondre au
   questionnaire) — distinct de la checklist des démarches en dessous, qui
   montre l'ensemble plutôt que ce qu'il faut faire MAINTENANT. */
.esp-todo-card { background: var(--marine); border-radius: 20px; padding: 18px 20px; margin-top: 24px; }
.esp-todo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.esp-todo-head svg { width: 19px; height: 19px; color: var(--turquoise); flex-shrink: 0; }
.esp-todo-head h2 { color: #fff; font-size: 0.98rem; font-weight: 800; flex: 1; }
.esp-todo-total { color: var(--turquoise); font-size: 0.82rem; font-weight: 800; flex-shrink: 0; }
.esp-todo-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: #fff; font-size: 0.88rem; font-weight: 600; border-top: 1px solid rgba(255,255,255,0.1); }
.esp-todo-item:first-of-type { border-top: none; }
.esp-todo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise); flex-shrink: 0; }
.esp-todo-item span:nth-child(2) { flex: 1; }
.esp-todo-arrow { color: var(--turquoise); font-weight: 800; }

/* ====================== Produits mis en avant (23/09/2026) ======================
   Encart promo sur le dashboard, alimenté par boutique-data (checkbox
   "mis en avant" côté admin) — premier levier commercial du portail, qui
   n'en avait aucun jusqu'ici (audit produit du 23/09/2026). */
.esp-featured-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, var(--amber-tint) 0%, #fff 75%); border-radius: 18px; padding: 16px 20px; margin-bottom: 12px; }
.esp-featured-icon { width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); color: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-featured-icon svg { width: 20px; height: 20px; }
.esp-featured-body { flex: 1; min-width: 0; }
.esp-featured-title { font-weight: 700; font-size: 0.95rem; display: block; }
.esp-featured-cta { text-align: right; flex-shrink: 0; }
.esp-featured-prix { display: block; font-weight: 800; color: var(--marine); font-size: 0.95rem; margin-bottom: 4px; }

/* ====================== Bloc services / parrainage (23/09/2026) ======================
   Remplace les deux cartes plates génériques (titre + paragraphe + lien) par
   des cartes teintées avec icône, côte à côte sur desktop — le gabarit
   précédent (bordure fine, fond blanc uni) lisait comme un template
   générique plutôt qu'une vraie mise en avant. */
.esp-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.esp-promo-card { border-radius: 20px; padding: 22px; display: flex; gap: 16px; align-items: flex-start; }
.esp-promo-card--parrainage { background: linear-gradient(160deg, var(--violet-tint) 0%, #fff 75%); }
.esp-promo-card--contact { background: linear-gradient(160deg, var(--green-100) 0%, #fff 75%); }
.esp-promo-icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-promo-card--parrainage .esp-promo-icon { color: var(--violet); }
.esp-promo-card--contact .esp-promo-icon { color: var(--turquoise-ink); }
.esp-promo-icon svg { width: 20px; height: 20px; }
.esp-promo-card h3 { font-size: 0.98rem; font-weight: 800; margin-bottom: 6px; color: var(--marine); }
.esp-promo-card p { font-size: 0.85rem; color: var(--slate); line-height: 1.55; margin-bottom: 14px; }
.esp-btn-secondary--violet { background: var(--violet-tint); color: var(--violet); }
.esp-btn-secondary--violet:hover { background: #ECE4FB; }

/* ====================== Nav basse mobile (façon Revolut) ======================
   Remplace la nav du haut sous 640px — pilule flottante translucide, item
   actif en fond marine plein. Cachée sur desktop, la topbar classique y
   suffit (direction graphisme/webmaster du 22/09/2026). */
.esp-bottomnav { display: none; }
@media (max-width: 640px) {
  .esp-topbar-nav { display: none; }
  .esp-topbar { padding: 10px 16px; }
  .esp-main { padding: 24px 16px 120px 16px; }
  .esp-h1 { font-size: 1.35rem; margin-bottom: 18px; }

  /* Carte de progression : le ring en position absolue à 220px déborde sous
     ~340px de large et le "big number" à 4.5rem écrase le reste de l'écran
     sur un iPhone SE — on réduit tout ensemble plutôt que de tronquer. */
  .esp-progress-premium { padding: 32px 20px 26px 20px; border-radius: 24px; }
  .esp-ring-wrap { width: 170px; height: 170px; }
  .esp-premium-pct { font-size: 3.4rem; }
  .esp-premium-pct span { font-size: 1.4rem; }

  .esp-card-row { flex-wrap: wrap; }
  .esp-card-row > div[style] { width: 100%; justify-content: flex-start; }
  .esp-card { padding: 16px; border-radius: 18px; }
  .esp-card-title { font-size: 0.98rem; }
  .esp-card-actions { gap: 12px; }

  .esp-detail-header { padding: 18px; flex-wrap: wrap; }
  .esp-detail-title { font-size: 1.1rem; }
  .esp-detail-section { padding: 18px; border-radius: 16px; }

  .esp-pro-card { padding: 16px; }

  .esp-docitem { flex-wrap: wrap; padding: 14px 16px; }
  .esp-featured-card { flex-wrap: wrap; padding: 14px 16px; }
  .esp-featured-body { flex-basis: 100%; order: 2; }
  .esp-featured-cta { order: 3; text-align: left; margin-left: 56px; display: flex; align-items: center; gap: 10px; }
  .esp-docitem-body { flex-basis: 100%; order: 2; }
  .esp-docitem > a, .esp-docitem > .esp-badge { order: 3; margin-left: 56px; }

  .esp-chat-bubble { max-width: 88%; }
  .esp-chat-form { position: sticky; bottom: 0; background: #fff; }

  /* Table tarifs : jamais de scroll horizontal de page, la table défile
     dans son propre conteneur si elle ne tient pas en largeur. */
  .esp-tarifs-table-wrap { overflow-x: auto; }

  .esp-login-card { padding: 32px 22px; }

  .esp-promo-grid { grid-template-columns: minmax(0, 1fr); }
  .esp-promo-card { padding: 18px; }
  .esp-btn, .esp-btn-secondary { width: 100%; text-align: center; }

  .esp-bottomnav {
    display: flex; position: fixed; left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 24px; padding: 8px; box-shadow: var(--shadow-lift); z-index: 20; gap: 4px;
  }
  .esp-bottomnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px 4px; border-radius: 18px; font-size: 0.68rem; font-weight: 600; color: var(--slate); transition: background 0.15s ease, color 0.15s ease; }
  .esp-bottomnav-item svg { width: 20px; height: 20px; }
  .esp-bottomnav-item.active { background: var(--marine); color: #fff; }
}

@media (max-width: 380px) {
  .esp-ring-wrap { width: 140px; height: 140px; }
  .esp-premium-pct { font-size: 2.8rem; }
}

/* ====================== Suivi de démarche (24/09/2026) ====================== */
/* Frise des étapes du pipeline, visible par le client sur chaque démarche. */
.esp-stepper { list-style: none; display: flex; gap: 6px; margin: 0 0 14px; padding: 18px 20px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); overflow-x: auto; }
.esp-stepper-step { flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; }
.esp-stepper-step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--border); }
.esp-stepper-step--fait:not(:last-child)::after { background: var(--turquoise-dark); }
.esp-stepper-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; background: var(--app-bg); color: var(--slate); border: 2px solid var(--border); position: relative; z-index: 1; }
.esp-stepper-step--fait .esp-stepper-dot { background: var(--turquoise-dark); border-color: var(--turquoise-dark); color: #fff; }
.esp-stepper-step--courant .esp-stepper-dot { background: var(--turquoise); border-color: var(--turquoise); color: var(--marine); box-shadow: 0 0 0 5px rgba(80,221,196,0.22); }
.esp-stepper-label { font-size: 0.74rem; font-weight: 600; color: var(--slate); line-height: 1.3; }
.esp-stepper-step--courant .esp-stepper-label { color: var(--marine); font-weight: 800; }

/* Rendez-vous : bloc détaillé (date, lieu, consignes). */
.esp-rdv-card { display: flex; gap: 14px; align-items: flex-start; background: var(--green-100); border-radius: 16px; padding: 16px 18px; }
.esp-rdv-date { flex-shrink: 0; width: 58px; text-align: center; background: #fff; border-radius: 12px; padding: 8px 0; box-shadow: var(--shadow-card); }
.esp-rdv-date strong { display: block; font-size: 1.35rem; line-height: 1; color: var(--marine); }
.esp-rdv-date span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--turquoise-ink); }
.esp-rdv-body { font-size: 0.88rem; color: var(--marine); line-height: 1.55; }
.esp-rdv-body .esp-rdv-heure { font-weight: 800; font-size: 1rem; }
.esp-rdv-body a { color: var(--turquoise-ink); font-weight: 700; }
.esp-rdv-infos { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(35,48,72,0.15); white-space: pre-line; }

/* Dépôt de document par le client. */
.esp-doc-tag { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--slate); background: #fff; padding: 3px 10px; border-radius: 999px; }
.esp-upload-form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.esp-upload-drop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed var(--green-300); border-radius: 14px; cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; }
.esp-upload-drop:hover { border-color: var(--turquoise-dark); background: var(--green-100); }
.esp-upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.esp-upload-drop svg { width: 24px; height: 24px; color: var(--turquoise-ink); }
.esp-upload-drop span { font-weight: 700; color: var(--marine); font-size: 0.9rem; word-break: break-all; }
.esp-upload-drop small { color: var(--slate); font-size: 0.75rem; }
.esp-alert-error { background: var(--danger-bg); color: var(--danger); font-weight: 600; font-size: 0.85rem; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; }

/* ====================== Tableau de bord — parcours d'installation (24/09/2026) ====================== */
.esp-money-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.esp-money-item { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; position: relative; }
.esp-money-item--due { border: 2px solid var(--turquoise); }
.esp-money-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.esp-money-value { font-size: 1.35rem; font-weight: 800; color: var(--marine); }
.esp-money-value--ok { color: var(--turquoise-ink); }
.esp-money-cta { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: var(--turquoise); color: var(--marine); font-weight: 800; font-size: 0.82rem; padding: 7px 14px; border-radius: 999px; }
.esp-todo-icon { width: 22px; text-align: center; flex-shrink: 0; }

.esp-next-step { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--marine), #2f3f5c); color: #fff; border-radius: 20px; padding: 18px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.esp-next-step-body { flex: 1 1 260px; }
.esp-next-step-kicker { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--turquoise); margin-bottom: 2px; }
.esp-next-step strong { font-size: 1.05rem; }
.esp-next-step p { font-size: 0.84rem; color: rgba(255,255,255,0.8); margin-top: 4px; line-height: 1.5; }
.esp-next-step-cta { background: var(--turquoise); color: var(--marine); font-weight: 800; border: none; border-radius: 999px; padding: 12px 20px; cursor: pointer; font-size: 0.88rem; white-space: nowrap; }
.esp-next-step-cta:hover { background: #fff; }
.esp-next-step-cta:disabled { opacity: 0.8; cursor: default; }

.esp-parcours { list-style: none; margin: 0 0 28px; padding: 0; position: relative; }
.esp-parcours-step { position: relative; padding-left: 46px; margin-bottom: 12px; }
.esp-parcours-step:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: -14px; width: 2px; background: var(--border); }
.esp-parcours-step--fait:not(:last-child)::before { background: var(--turquoise-dark); }
.esp-parcours-marker { position: absolute; left: 0; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; color: var(--slate); z-index: 1; }
.esp-parcours-step--fait .esp-parcours-marker { background: var(--turquoise-dark); border-color: var(--turquoise-dark); color: #fff; }
.esp-parcours-step--en_cours .esp-parcours-marker { background: var(--turquoise); border-color: var(--turquoise); color: var(--marine); box-shadow: 0 0 0 5px rgba(80,221,196,0.2); }
.esp-parcours-step--parallele .esp-parcours-marker { border-style: dashed; }
.esp-parcours-step .esp-card { margin-bottom: 0; }
.esp-card--a-lancer { border: 1.5px dashed var(--green-300); }
.esp-card-why { font-size: 0.84rem; color: var(--slate); line-height: 1.5; margin: 6px 0 0; }
.esp-prereq { margin-top: 8px; font-size: 0.8rem; font-weight: 600; color: var(--amber-ink); background: var(--amber-tint); border-radius: 10px; padding: 7px 10px; }
.esp-card-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 12px; }
.esp-btn-offer { background: var(--turquoise); color: var(--marine); font-weight: 800; border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer; font-size: 0.85rem; box-shadow: 0 8px 18px rgba(80,221,196,0.3); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.esp-btn-offer:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(80,221,196,0.4); }
.esp-btn-offer:disabled { transform: none; box-shadow: none; background: var(--green-100); color: var(--turquoise-ink); cursor: default; }
.esp-card-offer-hint { font-size: 0.74rem; color: var(--slate); }
.esp-badge.avec-colybry { background: var(--violet-tint); color: var(--violet); }
@media (max-width: 520px) {
  .esp-money-value { font-size: 1.15rem; }
  .esp-money-cta { position: static; transform: none; align-self: flex-start; margin-top: 6px; }
  .esp-parcours-step { padding-left: 40px; }
}
@media (max-width: 520px) { .esp-parcours .esp-card-icon { display: none; } }
.esp-badge.annule { background: #F1F3F6; color: var(--slate); }
.esp-annule { border-left: 4px solid var(--slate); }
.esp-upload-form [hidden] { display: none; }
.esp-offer-sent { display: inline-block; font-weight: 800; font-size: 0.85rem; color: var(--turquoise-ink); background: var(--green-100); border-radius: 999px; padding: 9px 16px; }
.esp-next-step-cta--sent { background: rgba(255,255,255,0.12); color: #fff; cursor: default; }

/* Démarches avec Colybry en tête du tableau de bord (24/09/2026) */
.esp-mes-demarches { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.esp-mes-demarches .esp-card { margin-bottom: 0; position: relative; padding-right: 40px; }
.esp-card--payee { box-shadow: 0 0 0 2px var(--turquoise), var(--shadow-card); }
.esp-card-arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--slate); line-height: 1; }
.esp-parcours-compact { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 16px; text-decoration: none; color: var(--marine); }
.esp-parcours-compact-title { font-weight: 700; font-size: 0.92rem; }
.esp-parcours-step .esp-parcours-compact + * { margin-top: 0; }
.esp-parcours-step:has(.esp-parcours-compact) .esp-parcours-marker { top: 10px; }
/* Services payés : mis en avant (fond turquoise, bandeau), les autres en retrait (24/09/2026). */
.esp-mes-demarches .esp-card--payee { background: linear-gradient(135deg, #E3FAF5 0%, #FFFFFF 70%); box-shadow: 0 0 0 2px var(--turquoise-dark), 0 14px 32px rgba(38,188,161,0.18); padding-top: 40px; }
.esp-mes-demarches .esp-card--payee .esp-card-title { font-size: 1.12rem; }
.esp-payee-ribbon { position: absolute; top: 0; left: 0; right: 0; padding: 7px 18px; background: var(--turquoise-dark); color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; border-radius: 22px 22px 0 0; }
.esp-mes-demarches .esp-card--a-regler { background: #fff; box-shadow: 0 0 0 1.5px var(--border); }
.esp-mes-demarches .esp-card--terminee { opacity: 0.7; box-shadow: 0 0 0 1px var(--border); }

/* ====================== Tableau de bord — refonte UX (24/09/2026) ======================
   Modèle Revolut/Alan : une carte de synthèse, puis des listes légères.
   Une seule action principale par écran (l'étape conseillée), le reste en
   secondaire pour ne pas saturer la page de boutons identiques. */
.esp-hero { background: linear-gradient(145deg, var(--marine) 0%, #2d3f5f 100%); color: #fff; border-radius: 26px; padding: 22px 20px 18px; margin: 4px 0 18px; box-shadow: 0 18px 40px rgba(35,48,72,0.22); position: relative; overflow: hidden; }
.esp-hero::after { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(80,221,196,0.35), transparent 70%); pointer-events: none; }
.esp-hero-hello { font-size: 0.9rem; color: rgba(255,255,255,0.75); font-weight: 600; margin: 0; }
.esp-hero-title { font-size: 1.45rem; font-weight: 800; line-height: 1.2; margin: 4px 0 16px; color: #fff; }
.esp-seg { display: flex; gap: 4px; }
.esp-seg-part { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.16); }
.esp-seg-part--fait { background: var(--turquoise); }
.esp-seg-part--en_cours { background: repeating-linear-gradient(45deg, var(--turquoise) 0 6px, rgba(80,221,196,0.55) 6px 12px); }
.esp-seg-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.76rem; color: rgba(255,255,255,0.8); font-weight: 600; }
.esp-seg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.esp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.esp-dot--fait { background: var(--turquoise); }
.esp-dot--en_cours { background: rgba(80,221,196,0.55); box-shadow: inset 0 0 0 2px var(--turquoise); }
.esp-dot--a_faire { background: rgba(255,255,255,0.25); }
.esp-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; position: relative; z-index: 1; }
.esp-hero-stat { background: rgba(255,255,255,0.08); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; color: #fff; text-decoration: none; min-width: 0; }
.esp-hero-stat span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.65); }
.esp-hero-stat strong { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.esp-hero-stat em { font-style: normal; font-size: 0.72rem; color: rgba(255,255,255,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-hero-stat--due { background: var(--turquoise); color: var(--marine); }
.esp-hero-stat--due span, .esp-hero-stat--due em { color: var(--marine); opacity: 0.8; }
.esp-hero-stat--due em { font-weight: 800; opacity: 1; }
a.esp-hero-stat:hover { filter: brightness(1.08); }

.esp-block { margin: 22px 0; }
.esp-block-title { font-size: 1.05rem; font-weight: 800; color: var(--marine); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.esp-block-sub { font-size: 0.84rem; color: var(--slate); margin: -4px 0 12px; line-height: 1.5; }
.esp-count { font-size: 0.72rem; font-weight: 800; background: rgba(35,48,72,0.07); color: var(--slate); border-radius: 999px; padding: 2px 8px; }

.esp-list { background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }
.esp-list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--marine); font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.esp-list-row + .esp-list-row { border-top: 1px solid var(--border); }
.esp-list-row:hover { background: #F7FBFA; }
.esp-list-icon { width: 34px; height: 34px; border-radius: 12px; background: var(--green-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.esp-list-label { flex: 1; min-width: 0; }
.esp-list-chevron { font-size: 1.4rem; color: var(--slate); line-height: 1; }

.esp-prereq--info { color: var(--slate); background: var(--app-bg); }

.esp-check { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }
.esp-check-row { display: flex; gap: 12px; padding: 14px 16px; }
.esp-check-row + .esp-check-row { border-top: 1px solid var(--border); }
.esp-check-row--conseille { background: linear-gradient(90deg, #EFFCF9, #fff); }
.esp-check-num { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; border: 2px solid var(--border); color: var(--slate); background: #fff; margin-top: 1px; }
.esp-check-row--fait .esp-check-num { background: var(--turquoise-dark); border-color: var(--turquoise-dark); color: #fff; }
.esp-check-row--en_cours .esp-check-num { border-color: var(--turquoise); color: var(--turquoise-ink); background: var(--green-100); }
.esp-check-row--conseille .esp-check-num { border-color: var(--turquoise); color: var(--marine); background: var(--turquoise); }
.esp-check-body { flex: 1; min-width: 0; }
.esp-check-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esp-check-name { font-weight: 800; font-size: 0.95rem; color: var(--marine); }
.esp-check-row--fait .esp-check-name { color: var(--slate); }
.esp-check-tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: var(--turquoise); color: var(--marine); border-radius: 999px; padding: 2px 8px; }
.esp-check-tag--muted { background: var(--app-bg); color: var(--slate); }
.esp-check-status { display: block; font-size: 0.8rem; color: var(--slate); margin-top: 3px; text-decoration: none; }
.esp-check-status--link { color: var(--turquoise-ink); font-weight: 700; }
.esp-check-undo { cursor: pointer; text-decoration: underline; }
.esp-check-undo input { display: none; }
.esp-check-why { font-size: 0.82rem; color: var(--slate); line-height: 1.45; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.esp-check-prereq { font-size: 0.76rem; font-weight: 700; color: var(--amber-ink); margin: 4px 0 0; }
.esp-check-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.esp-check-cta { border: 1.5px solid var(--turquoise-dark); background: #fff; color: var(--turquoise-ink); font-weight: 800; font-size: 0.8rem; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: inherit; transition: background 0.15s ease, transform 0.15s ease; }
.esp-check-cta:hover { background: var(--green-100); }
.esp-check-cta--primary { background: var(--turquoise); border-color: var(--turquoise); color: var(--marine); box-shadow: 0 8px 18px rgba(80,221,196,0.35); }
.esp-check-cta--primary:hover { background: #45d3ba; transform: translateY(-1px); }
.esp-check-cta:disabled { background: var(--green-100); border-color: var(--green-100); color: var(--turquoise-ink); box-shadow: none; cursor: default; transform: none; }
.esp-check-self { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--slate); cursor: pointer; }
.esp-check-self input { width: 15px; height: 15px; accent-color: var(--turquoise-dark); }
.esp-check-sent { font-size: 0.8rem; font-weight: 800; color: var(--turquoise-ink); }
@media (max-width: 380px) { .esp-hero-stat strong { font-size: 0.92rem; } }
.esp-list-icon svg { width: 18px; height: 18px; color: var(--turquoise-ink); }

/* ====================== Page de paiement /mon-espace/payer.php (24/09/2026) ====================== */
.esp-pay-sub { color: var(--slate); font-size: 0.92rem; margin: -6px 0 18px; }
.esp-pay-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .esp-pay-layout { grid-template-columns: minmax(0, 1fr); } }
.esp-pay-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-card); padding: 24px 22px; }
.esp-pay-head { text-align: center; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.esp-pay-total-label { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); }
.esp-pay-total { font-size: 2.4rem; font-weight: 800; color: var(--marine); line-height: 1.1; margin: 4px 0; }
.esp-pay-count { font-size: 0.82rem; color: var(--slate); }
.esp-pay-lines { list-style: none; margin: 14px 0 18px; padding: 0; }
.esp-pay-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.esp-pay-line + .esp-pay-line { border-top: 1px solid var(--border); }
.esp-pay-line-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-pay-line-icon svg { width: 18px; height: 18px; }
.esp-pay-line-name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.92rem; color: var(--marine); display: flex; flex-direction: column; }
.esp-pay-line-name small { font-weight: 500; font-size: 0.76rem; color: var(--slate); }
.esp-pay-line strong { font-size: 0.95rem; color: var(--marine); white-space: nowrap; }
.esp-pay-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--turquoise); color: var(--marine); font-weight: 800; font-size: 1.05rem; padding: 16px 20px; border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 12px 26px rgba(80,221,196,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; font-family: inherit; }
.esp-pay-btn svg { width: 18px; height: 18px; }
.esp-pay-btn:hover { background: #45d3ba; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(80,221,196,0.45); }
.esp-pay-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
.esp-pay-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.esp-pay-methods span { font-size: 0.72rem; font-weight: 700; color: var(--slate); background: var(--app-bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; }
.esp-pay-secure { font-size: 0.78rem; color: var(--slate); text-align: center; line-height: 1.6; margin: 12px 0 0; }
.esp-pay-side { display: flex; flex-direction: column; gap: 14px; }
.esp-pay-next { background: #fff; border-radius: 22px; box-shadow: var(--shadow-card); padding: 20px 20px 8px; }
.esp-pay-next h2 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; color: var(--marine); }
.esp-pay-next ol { list-style: none; margin: 0; padding: 0; }
.esp-pay-next li { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.esp-pay-next li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--green-300); }
.esp-pay-next li > span { width: 28px; height: 28px; border-radius: 50%; background: var(--green-100); color: var(--turquoise-ink); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esp-pay-next strong { font-size: 0.88rem; color: var(--marine); }
.esp-pay-next p { font-size: 0.8rem; color: var(--slate); margin: 2px 0 0; line-height: 1.45; }
.esp-pay-paid { background: var(--green-100); border-radius: 18px; padding: 14px 16px; }
.esp-pay-paid-head { display: flex; justify-content: space-between; font-weight: 800; color: var(--turquoise-ink); font-size: 0.88rem; margin-bottom: 6px; }
.esp-pay-paid-line { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--marine); padding: 3px 0; }
.esp-pay-help { font-size: 0.82rem; color: var(--slate); margin: 0; padding: 0 4px; }
/* Widget Revolut ouvert : une colonne centrée assez large pour que le widget
   tienne entier ; le récap se réduit au total, la colonne d'à-côté disparaît. */
.esp-pay-layout.is-checkout { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; scroll-margin-top: 80px; }
.esp-pay-layout.is-checkout .esp-pay-side,
.esp-pay-layout.is-checkout .esp-pay-lines,
.esp-pay-layout.is-checkout .esp-pay-methods { display: none; }
.esp-pay-layout.is-checkout .esp-pay-head { padding-bottom: 14px; }
.esp-pay-layout.is-checkout .esp-pay-total { font-size: 2rem; }
#espPayCheckout { width: 100%; overflow: visible; }
#espPayCheckout iframe { width: 100% !important; max-width: 100%; display: block; border: 0; }
@media (max-width: 480px) { .esp-pay-layout.is-checkout .esp-pay-card { padding: 20px 14px; } }

/* ====================== Refonte UX du 24/09/2026 ======================
   Tableau de bord sur deux colonnes à partir de 1100px (colonne principale +
   colonne latérale : prochain RDV, contact, raccourcis) ; pages Documents et
   Paiements ; composants partagés (en-tête de page, compteurs). */
.esp-main--dash { max-width: 1180px; }
.esp-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1100px) {
  .esp-dash { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .esp-dash-side { position: sticky; top: 84px; }
}
.esp-dash-side { display: flex; flex-direction: column; gap: 14px; }
.esp-dash-side .esp-promo-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.esp-dash-side .esp-section-title { margin-top: 6px; }
.esp-side-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); padding: 18px 20px; color: inherit; }
.esp-side-card strong { font-size: 1.02rem; color: var(--marine); }
.esp-side-card p { font-size: 0.84rem; color: var(--slate); line-height: 1.5; margin: 0 0 6px; }
.esp-side-kicker { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--turquoise-ink); }
.esp-side-meta { font-size: 0.82rem; color: var(--slate); }
.esp-side-link { font-size: 0.84rem; font-weight: 700; color: var(--turquoise-ink); margin-top: 4px; }
.esp-side-rdv { background: linear-gradient(135deg, #233048, #34456a); color: #fff; }
.esp-side-rdv strong { color: #fff; font-size: 1.25rem; }
.esp-side-rdv span, .esp-side-rdv .esp-side-meta { color: rgba(255,255,255,0.8); }
.esp-side-rdv .esp-side-kicker { color: var(--turquoise); }
.esp-side-rdv .esp-side-link { color: var(--turquoise); }
.esp-side-links a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(35,48,72,0.06); font-size: 0.88rem; font-weight: 600; color: var(--marine); }
.esp-side-links a:first-of-type { border-top: none; }
.esp-side-links a b { color: var(--amber); font-weight: 700; }
.esp-side-links a:hover { color: var(--turquoise-ink); }
.esp-btn--full { width: 100%; text-align: center; }

.esp-page-head { margin-bottom: 18px; }
.esp-page-head h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.esp-page-head p { color: var(--slate); font-size: 0.92rem; margin-top: 4px; }
.esp-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.esp-stat { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 16px; }
.esp-stat strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--marine); }
.esp-stat span { font-size: 0.78rem; color: var(--slate); }
.esp-stat.warn strong { color: var(--amber-ink); }
.esp-stat.ok strong { color: var(--turquoise-ink); }
@media (max-width: 520px) { .esp-stat-row { gap: 8px; } .esp-stat { padding: 12px; } .esp-stat strong { font-size: 1.05rem; } }
.esp-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.esp-doc-head h2 { font-size: 1.05rem; font-weight: 800; }
.esp-doc-group { margin-top: 14px; }
.esp-doc-group h3 { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); margin-bottom: 6px; }
.esp-docitem-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(35,48,72,0.06); }
.esp-docitem-row:first-of-type { border-top: none; }
.esp-docitem-body { flex: 1; min-width: 0; }
.esp-docitem-title { font-weight: 600; font-size: 0.9rem; color: var(--marine); word-break: break-word; }
.esp-docitem-icon--todo { background: var(--amber-tint) !important; color: var(--amber) !important; }
.esp-upload-form { margin-top: 14px; }
.esp-empty-state { text-align: center; }
.esp-empty-state p { color: var(--slate); margin-bottom: 14px; }
.esp-confirm--err { background: var(--danger-bg) !important; color: var(--danger) !important; }
.esp-pay-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(35,48,72,0.06); font-size: 0.9rem; }
.esp-pay-row:first-of-type { border-top: none; }
.esp-pay-row span small { display: block; font-size: 0.78rem; color: var(--slate); margin-top: 2px; }
.esp-pay-row strong { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.esp-pay-due { border: 1.5px solid rgba(184,134,11,0.25); }
/* Barre mobile : 5 entrées */
/* 0.66rem plutôt que 0.62rem (9,9px, illisible) — « Événements » tient encore dans 1/5 d'écran de 375px (revue mobile du 24/09/2026). */
@media (max-width: 640px) { .esp-bottomnav-item span { font-size: 0.66rem; letter-spacing: -0.01em; } }

/* Parcours allégé (24/09/2026) : seule l'étape conseillée garde son explication et son gros bouton. */
.esp-check-actions--compact { margin-top: 6px; gap: 10px; }
.esp-check-actions--compact .esp-check-cta { padding: 5px 11px; font-size: 0.74rem; border-width: 1px; }
.esp-check-row:not(.esp-check-row--conseille) .esp-check-prereq { color: var(--slate); font-weight: 600; }

/* Revue mobile du 24/09/2026 — Safari iOS zoome automatiquement sur tout
   champ de saisie dont le texte fait moins de 16px, et ne dézoome pas
   ensuite : la page reste agrandie et déborde. 16px minimum sur mobile. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}

/* Revue UX du 01/10/2026 — accessibilité et formulaires de l'espace client. */
.esp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Focus clavier visible partout (les champs gardent leur halo turquoise). */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input[type=checkbox]:focus-visible { outline: 3px solid var(--turquoise-ink); outline-offset: 2px; }
.esp-upload-drop:has(input:focus-visible) { border-color: var(--turquoise-dark); background: var(--green-100); outline: 3px solid var(--turquoise-ink); outline-offset: 2px; }
/* Champs : libellés reliés (label for), aide sous le champ, focus commun. */
.esp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; }
.esp-field label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--marine); }
label.esp-admin-field-label { display: block; color: var(--marine); }
.esp-field-hint { font-size: 0.8rem; color: var(--slate); }
.esp-login-card .esp-field { margin-bottom: 0; }
.esp-login-card input[type=text], .esp-login-card input[type=date] { padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 0.95rem; width: 100%; }
.esp-help-form textarea:focus { outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(80,221,196,0.2); }
.esp-btn:disabled, .esp-btn-secondary:disabled { opacity: 0.6; cursor: default; }
.esp-btn--full { width: 100%; text-align: center; }
.esp-error[hidden], .esp-confirm[hidden] { display: none !important; }
.esp-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.esp-form-actions .esp-confirm { margin-top: 0; }
/* Tuiles de la synthèse : nombre de colonnes selon les tuiles affichées (jamais en style en ligne). */
.esp-hero-stats--1 { grid-template-columns: minmax(0, 1fr); }
.esp-hero-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esp-hero-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Garantie affichée sous le bouton de paiement. */
.esp-pay-guarantee { display: flex; align-items: flex-start; justify-content: center; text-align: center; gap: 8px; margin-top: 10px; font-size: 0.82rem; color: var(--slate); line-height: 1.5; }
.esp-pay-guarantee strong { color: var(--marine); }
/* Lien de parrainage : bloc copiable. */
.esp-parrain-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.esp-parrain-lien { flex: 1; min-width: 0; background: var(--green-100); padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; word-break: break-all; }
.esp-chat-error { align-self: center; font-size: 0.78rem; font-weight: 600; color: var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 6px 10px; }
/* Menu profil et bulle de chat fermés : invisibles aussi pour le clavier et les lecteurs d'écran (plus de liens « fantômes » au Tab). */
.esp-profil-dropdown { visibility: hidden; transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s; }
.esp-profil-menu.open .esp-profil-dropdown { visibility: visible; transition-delay: 0s; }
#esp-chat-widget-panel { visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; }
#esp-chat-widget-panel.open { visibility: visible; transition-delay: 0s; }