/* =========================================================
   EGG — Style v2 (refonte UI mai 2026, basé sur prototype v10)
   Tous les styles sont scopés à body.v2 pour cohabiter avec l'ancien CSS.
   Active via : document.body.classList.add('v2')
   ========================================================= */

body.v2 {
  /* Tokens importés du Design System EGG v1 (Cocon naturel) */
  --egg-color-bg-primary:   #F5F1EB;
  --egg-color-bg-surface:   #FFFFFF;
  --egg-color-bg-muted:     #F0EBE5;
  --egg-color-text-primary: #2F2A26;
  --egg-color-text-secondary:#8A817C;
  --egg-color-text-disabled:#C5BDB6;
  --egg-color-accent-primary:  #5A4A3E;  /* brun profond — guide */
  --egg-color-accent-secondary:#A3B18A;  /* vert sauge — futur, parcimonieux */
  --egg-color-border:        #E6DFD8;
  --egg-color-border-strong: #D6CEC7;
  --egg-color-success: #7FA38D;
  --egg-color-error:   #C97B63;
  --egg-color-warning: #D6A85F;

  --egg-radius-sm: 8px;
  --egg-radius-md: 12px;
  --egg-radius-lg: 20px;
  --egg-radius-xl: 28px;

  --egg-shadow-soft: 0 4px 16px rgba(47, 42, 38, 0.06);
  --egg-shadow-card: 0 10px 30px rgba(47, 42, 38, 0.07);

  --egg-transition-smooth: 220ms ease;
  --egg-transition-slow:   420ms ease;

  /* Aliases courts utilisés dans nos classes .v2-* (mappent vers DS v1) */
  --bg:            var(--egg-color-bg-primary);
  --bg-soft:       var(--egg-color-bg-muted);
  --bg-card:       var(--egg-color-bg-surface);
  --bg-bubble-egg: var(--egg-color-bg-surface);
  --bg-bubble-user:#E8DFD3;            /* user bubble : un beige plus chaud, en harmonie cocon */
  --ink:           var(--egg-color-text-primary);
  --ink-soft:      var(--egg-color-text-secondary);
  --ink-faint:     #A39C95;            /* entre secondary et disabled */
  --accent-v2:     var(--egg-color-accent-primary);
  --accent-soft:   #8A7A6E;            /* version éclaircie du brun pour bordures hover */
  --accent-sage:   var(--egg-color-accent-secondary);
  --border-v2:     var(--egg-color-border);
  --border-soft:   #EDE7E0;
  --rule:          var(--egg-color-border-strong);
  --danger-v2:     var(--egg-color-error);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sidebar-w:    340px;
  --content-max:  760px;

  --shadow-soft:    var(--egg-shadow-soft);
  --shadow-bubble:  0 1px 1px rgba(47, 42, 38, 0.04);
  --shadow-floating:0 4px 16px rgba(47, 42, 38, 0.08);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Masquer header/dock historiques quand on est en v2 */
body.v2 .app-header,
body.v2 .ipad-dock,
body.v2 .app-dock,
body.v2 .header-spacer { display: none !important; }

/* En v2 le body est fixé à la viewport, pas de scroll de page.
   Les zones internes (sidebar, conversation) gèrent leur propre scroll.
   position:fixed verrouille la viewport (sinon le bounce iOS révèle la
   sidebar fixe en dessous). overscroll-behavior:none désactive le rubber-band.
   top:var(--vv-offset-top) compense le scroll du layout viewport iOS quand
   le clavier ouvre (sinon le body glisse vers le haut hors écran).
   display:flex column permet au bandeau de vérification email (inséré en
   tête du body) de prendre sa place sans pousser .app-main hors écran. */
body.v2 {
  position: fixed;
  top: var(--vv-offset-top, 0);
  left: 0;
  right: 0;
  height: var(--app-height, 100dvh);
  width: 100%;
  overflow: hidden;
  margin: 0;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}

body.v2 .verify-banner { flex-shrink: 0; }

body.v2 .app-main {
  padding: 0;
  margin: 0;
  background: var(--bg);
  flex: 1;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

/* ========== LAYOUT ========== */
.v2-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100%;
  overflow: hidden;
}

/* ========== SIDEBAR ========== */
/* Découpée en 3 zones : top (slogan + nav primaire) et bottom (engagements + compte)
   restent fixes, seule la zone middle (favoris/récents) scrolle. */
.v2-sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--border-v2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden; /* le scroll est géré par .v2-sidebar-middle */
}

.v2-sidebar-top {
  flex-shrink: 0;
  padding: 18px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.v2-sidebar-middle {
  flex: 1 1 auto;
  min-height: 0; /* permet au flex item de rétrécir et activer overflow-y */
  overflow-y: auto;
  overscroll-behavior: contain; /* le scroll ne propage pas vers le body */
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.v2-sidebar-bottom {
  flex-shrink: 0;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  background: var(--bg-soft);
}

/* Slogan en haut de sidebar (remplace le bloc brand) */
.v2-brand-slogan {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 17px;
  color: var(--ink);
  padding: 4px 10px 18px;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
}

.v2-nav-section { display: flex; flex-direction: column; gap: 1px; }
.v2-nav-section-label {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  padding: 4px 8px 6px;
  font-weight: 500;
}

/* Groupe des entrées principales : 3 cercles iconiques côte à côte. */
.v2-nav-primary-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.v2-nav-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 6px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: background 150ms ease, transform 150ms ease;
  font-family: inherit;
  font-size: 12.5px;
  text-align: center;
  width: 100%;
  font-weight: 500;
}
.v2-nav-primary:hover {
  background: rgba(90, 74, 62, 0.04);
  transform: translateY(-1px);
}
.v2-nav-primary:hover .v2-nav-circle {
  transform: scale(1.03);
}
.v2-nav-primary.active .v2-nav-label {
  color: var(--accent-v2);
  font-weight: 600;
}

/* Cercle iconique : 64px, fond et icône varient selon le type */
.v2-nav-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.v2-nav-primary.active .v2-nav-circle {
  box-shadow: 0 0 0 3px rgba(90, 74, 62, 0.20);
}

/* EGG : focal — cercle blanc qui ressort sur le beige de la sidebar.
   Oeuf-contour centré dedans. */
.v2-nav-primary.egg .v2-nav-circle {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 3px rgba(47, 42, 38, 0.06);
}
.v2-nav-primary.egg .v2-nav-circle img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

/* Ressources : secondaire — fond brun tamisé qui se fond avec la sidebar beige.
   4 points stylisés en brun. */
.v2-nav-primary.res .v2-nav-circle {
  background: rgba(90, 74, 62, 0.10);
  color: var(--accent-v2);
}
.v2-nav-primary.res .v2-nav-circle svg {
  width: 28px;
  height: 28px;
}

/* Parcours : secondaire — même fond brun tamisé. Timeline 3 dots
   (passé / présent plein / futur) en brun, inspirée du nav legacy. */
.v2-nav-primary.parcours .v2-nav-circle {
  background: rgba(90, 74, 62, 0.10);
  color: var(--accent-v2);
}
.v2-nav-primary.parcours .v2-nav-circle svg {
  width: 24px;
  height: 24px;
}

.v2-nav-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.v2-pin-list, .v2-recent-list { display: flex; flex-direction: column; gap: 1px; }

.v2-item-row {
  display: grid;
  align-items: center;
  border-radius: 4px;
  transition: background 120ms ease;
  position: relative;
}
.v2-item-row:hover { background: rgba(90, 74, 62, 0.06); }
/* Item actif : la session dans laquelle l'utilisateur est en train de discuter */
.v2-item-row.active {
  background: rgba(90, 74, 62, 0.10);
  position: relative;
}
.v2-item-row.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent-v2);
}
.v2-item-row.active .v2-item-title {
  color: var(--accent-v2);
  font-weight: 500;
}
.v2-pin-list .v2-item-row { grid-template-columns: 14px 1fr 22px; gap: 8px; padding: 7px 10px; }
.v2-recent-list .v2-item-row { grid-template-columns: 1fr 22px; padding: 6px 10px; }

.v2-item-main {
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  color: inherit;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Icônes de type dans la liste Favoris (SVG inline).
   - .v2-lib-icon  : dossier coloré aux couleurs de l'opérateur (via --lib-accent)
   - .v2-session-icon : bulle de conversation, ton neutre */
.v2-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.v2-lib-icon { color: var(--lib-accent, var(--accent-v2)); }
.v2-session-icon { color: var(--ink-soft); }
.v2-item-title {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-item-via { font-size: 11px; color: var(--ink-faint); }

/* Items "bibliothèque épinglée" dans la liste Favoris — partagent le grid
   commun .v2-pin-list .v2-item-row (14px icon · 1fr titre · 22px menu).
   La 3e colonne reste vide pour les biblios (pas de menu trigger pour l'instant). */
.v2-item-row.v2-lib-row.active::before {
  background: var(--lib-accent, var(--accent-v2));
}
.v2-item-row.v2-lib-row.active .v2-item-title {
  color: var(--lib-accent, var(--accent-v2));
}

.v2-item-menu-trigger {
  background: transparent; border: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); cursor: pointer; border-radius: 3px;
  opacity: 0; transition: opacity 120ms ease;
  padding: 0; font-family: inherit; font-size: 14px; line-height: 1;
  letter-spacing: -1px;
}
.v2-item-row:hover .v2-item-menu-trigger { opacity: 1; }
.v2-item-menu-trigger:hover { background: var(--bg-card); color: var(--ink); }
/* Sur écran tactile (mobile/tablette), pas de hover : on garde le bouton visible */
@media (hover: none) {
  .v2-item-menu-trigger { opacity: 0.55; }
}

.v2-sidebar-link {
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-faint);
  font-family: inherit;
}
.v2-sidebar-link:hover { color: var(--accent-v2); }

.v2-sidebar-spacer { flex: 1; }

.v2-trust-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--ink-faint);
  text-decoration: none;
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
}
.v2-trust-link:hover { color: var(--accent-v2); background: rgba(90, 74, 62, 0.04); }
.v2-trust-link.active { color: var(--accent-v2); background: rgba(90, 74, 62, 0.08); font-weight: 500; }
.v2-trust-link::before {
  content: '·';
  color: var(--accent-v2);
  font-size: 14px;
  line-height: 1;
}

/* ========== PAGE ENGAGEMENT (lecture) ========== */
/* Pages /engagements/:key — pacte de confiance avec l'aspirant.
   Typographie soignée pour la lecture, max-width confortable, mobile-friendly.
   Padding-bottom large (~160px) pour ne pas finir sous le floor sticky. */
.v2-engagement-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 84px 24px 160px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.v2-engagement-intro {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 36px;
  letter-spacing: -0.01em;
}

/* Première section "Notre conviction" : posée comme un pacte, légèrement
   distinguée du reste avec une typo display et un fond beige cocon. */
.v2-engagement-conviction {
  background: rgba(232, 223, 211, 0.55); /* #E8DFD3 à ~55% */
  border-radius: var(--egg-radius-lg);
  padding: 22px 24px 18px;
  margin-bottom: 36px !important;
}
.v2-engagement-conviction h2 {
  font-size: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-v2) !important;
  margin: 0 0 10px !important;
}
.v2-engagement-conviction p {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}

.v2-engagement-section {
  margin-bottom: 32px;
  /* Compense la hauteur du .v2-page-header en absolute par-dessus, pour que
     scrollIntoView atterrisse SUR le titre, pas dessous. */
  scroll-margin-top: 80px;
}
.v2-engagement-section h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.v2-engagement-section p {
  margin: 0 0 14px;
}
.v2-engagement-section p:last-child { margin-bottom: 0; }
.v2-engagement-section ul,
.v2-engagement-section .v2-engagement-ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.v2-engagement-section ul li,
.v2-engagement-section .v2-engagement-ol li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 12px;
}
.v2-engagement-section ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-v2);
  opacity: 0.55;
}
.v2-engagement-section .v2-engagement-ol {
  counter-reset: eng-item;
}
.v2-engagement-section .v2-engagement-ol li {
  counter-increment: eng-item;
  padding-left: 28px;
}
.v2-engagement-section .v2-engagement-ol li::before {
  content: counter(eng-item);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(90, 74, 62, 0.08);
  color: var(--accent-v2);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
.v2-engagement-section strong {
  color: var(--ink);
  font-weight: 600;
}
.v2-pedago-formula {
  margin: 12px 0 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent-v2);
  background: rgba(15, 155, 114, 0.06);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-style: normal;
}
.v2-pedago-formula strong {
  color: var(--accent-v2);
  font-weight: 700;
}

/* Sommaire (liste d'ancres) sous "Notre conviction".
   Pas de titre — on laisse parler la liste, plus discret. */
.v2-engagement-summary {
  margin: 0 0 32px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-left: 2px solid var(--accent-sage);
  border-radius: 0 8px 8px 0;
}
.v2-engagement-summary ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: eng-toc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-engagement-summary li {
  counter-increment: eng-toc;
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
}
.v2-engagement-summary li::before {
  content: counter(eng-toc) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.v2-engagement-summary a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--egg-transition-smooth), border-color var(--egg-transition-smooth);
  cursor: pointer;
}
.v2-engagement-summary a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent-sage);
}

/* Sous-blocs prose dans une section d'engagement (ex. cercle "Mesure publique"
   de la page Écologie). Différenciés par un filet vertical doux à gauche. */
.v2-engagement-section .v2-engagement-subblock {
  margin: 18px 0 18px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--border-v2);
}
.v2-engagement-section .v2-engagement-subblock h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: 0;
}
.v2-engagement-section .v2-engagement-subblock p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
}
.v2-engagement-section .v2-engagement-subblock p:last-child { margin-bottom: 0; }
.v2-engagement-section .v2-engagement-subblock ul {
  margin: 0 0 10px;
  padding: 0;
}
.v2-engagement-section .v2-engagement-subblock ul li {
  padding-left: 18px;
  margin-bottom: 8px;
}
.v2-engagement-section .v2-engagement-subblock ul li::before {
  left: 4px;
  top: 10px;
}
.v2-engagement-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* Note de bas de section (référence académique, etc.) — italique discret */
.v2-engagement-note {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 18px 0 0;
  padding: 12px 14px;
  background: rgba(232, 223, 211, 0.35);
  border-left: 2px solid rgba(90, 74, 62, 0.20);
  border-radius: 0 8px 8px 0;
}
.v2-engagement-note em { font-style: normal; font-weight: 500; color: var(--ink); }

/* Floor sticky : barre 5 icônes toujours visible en bas de la zone main.
   Pattern absolute bottom (comme le composer chat), avec un dégradé doux
   pour faire la transition avec le contenu qui scrolle au-dessus. */
.v2-engagement-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 24px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 55%, rgba(245, 241, 235, 0.85) 80%, rgba(245, 241, 235, 0) 100%);
}

/* ========== CONSTITUTION (markdown rendu inline) ========== */
/* ========== MODALE LEGAL (mentions / confidentialité) ========== */
/* Override scopé body.v2 : la modale legal historique a un thème sombre.
   En v2, on la repaint en cocon naturel. On remap les variables legacy
   (--text, --text-2, --text-3, --teal, --card, --border) dans le scope
   de la modale pour que toutes les règles legacy qui les utilisent
   récupèrent les bonnes couleurs cocon — sans avoir à écraser chaque
   sélecteur individuellement. */
body.v2 .legal-modal-backdrop {
  --text: var(--ink);
  --text-2: var(--ink);
  --text-3: var(--ink-soft);
  --teal: var(--accent-v2);
  --card: var(--bg-card);
  --card-solid: var(--bg-card);
  --border: var(--border-v2);
  background: rgba(47, 42, 38, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.v2 .legal-modal {
  background: var(--bg);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-lg);
  box-shadow: 0 24px 60px rgba(47, 42, 38, 0.18);
}
body.v2 .legal-modal-close {
  background: rgba(90, 74, 62, 0.06);
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
}
body.v2 .legal-modal-close:hover {
  background: rgba(90, 74, 62, 0.12);
  color: var(--accent-v2);
}
body.v2 .legal-modal-scroll { padding: 40px 44px 36px; }
body.v2 .legal-modal h1.ipad-page-title,
body.v2 .legal-modal .ipad-page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
body.v2 .legal-modal .ipad-page-sub {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 28px;
  font-style: italic;
}
body.v2 .legal-content {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
body.v2 .legal-content strong { color: var(--ink); font-weight: 600; }
body.v2 .legal-content p { margin: 0 0 14px; }
body.v2 .legal-content ul { padding-left: 20px; margin: 0 0 16px; }
body.v2 .legal-content li { margin-bottom: 8px; }
body.v2 .legal-content a {
  color: var(--accent-v2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.v2 .legal-section {
  margin-bottom: 28px;
}
body.v2 .legal-section h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
body.v2 .legal-section:first-of-type h3 { border-top: none; padding-top: 0; }
body.v2 .legal-intro {
  background: rgba(232, 223, 211, 0.55);
  border-left: 3px solid var(--accent-v2);
  border-radius: 0 var(--egg-radius-md) var(--egg-radius-md) 0;
  padding: 18px 22px;
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--ink);
}
body.v2 .legal-intro p { margin: 0 0 10px; }
body.v2 .legal-intro p:last-child { margin: 0; }
@media (max-width: 640px) {
  body.v2 .legal-modal-scroll { padding: 28px 22px 22px; }
  body.v2 .legal-modal h1.ipad-page-title,
  body.v2 .legal-modal .ipad-page-title { font-size: 24px; }
}

.v2-constitution-content {
  max-width: 720px;
}

/* Encart de préambule au-dessus du markdown : ouverture publique +
   engagement de continuité. Style "carte" beige cocon avec accent brun. */
.v2-constitution-preamble {
  background: rgba(232, 223, 211, 0.55);
  border-left: 3px solid var(--accent-v2);
  border-radius: 0 var(--egg-radius-md) var(--egg-radius-md) 0;
  padding: 20px 22px;
  margin: 0 0 36px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}
.v2-constitution-preamble p {
  margin: 0 0 12px;
}
.v2-constitution-preamble p:last-child { margin-bottom: 0; }
.v2-constitution-preamble strong {
  color: var(--ink);
  font-weight: 600;
}
.v2-constitution-preamble a {
  color: var(--accent-v2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.v2-constitution-content h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 24px;
}
.v2-constitution-content h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 40px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.v2-constitution-content h2:first-of-type { border-top: none; padding-top: 0; }
.v2-constitution-content h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 10px;
  letter-spacing: -0.005em;
}
.v2-constitution-content h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 22px 0 8px;
}
.v2-constitution-content p {
  margin: 0 0 14px;
  color: var(--ink);
}
.v2-constitution-content strong { color: var(--ink); font-weight: 600; }
.v2-constitution-content em { font-style: italic; color: var(--ink-soft); }
.v2-constitution-content ul,
.v2-constitution-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--ink);
}
.v2-constitution-content li { margin-bottom: 6px; line-height: 1.55; }
.v2-constitution-content a {
  color: var(--accent-v2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.v2-constitution-content a:hover { text-decoration-thickness: 2px; }
.v2-constitution-content blockquote {
  border-left: 3px solid var(--accent-v2);
  margin: 18px 0;
  padding: 4px 0 4px 16px;
  color: var(--ink-soft);
  font-style: italic;
  background: rgba(232, 223, 211, 0.35);
  border-radius: 0 8px 8px 0;
}
.v2-constitution-content code {
  background: rgba(90, 74, 62, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  color: var(--ink);
}
.v2-constitution-content pre {
  background: rgba(90, 74, 62, 0.06);
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 14px 0;
}
.v2-constitution-content pre code { background: transparent; padding: 0; }
.v2-constitution-content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}
.v2-constitution-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 14px;
}
.v2-constitution-content th,
.v2-constitution-content td {
  border: 1px solid var(--border-v2);
  padding: 8px 12px;
  text-align: left;
}
.v2-constitution-content th {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--ink);
}

/* ========== BARRE D'ICÔNES ENGAGEMENTS ========== */
/* 5 icônes côte à côte (Éthique / Économie / Données / Écologie / Constitution).
   Utilisée dans la sidebar (section Engagements) et au pied de chaque page
   d'engagement. Ligne d'icônes line-art en cohérence avec l'oeuf-contour. */
.v2-engagements-bar {
  /* Items groupés au centre avec un gap fixe (pas de flex-grow). */
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  padding: 4px 0;
}
.v2-engagements-bar > .v2-eng-icon {
  flex: 0 0 auto;
  min-width: 72px;
}
.v2-eng-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 1px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  min-width: 0; /* permet au cell grid de retrécir, label peut wrap */
  transition: background 120ms ease, transform 120ms ease;
}
.v2-eng-icon:hover { background: rgba(90, 74, 62, 0.04); transform: translateY(-1px); }
.v2-eng-icon:hover .v2-eng-icon-circle { transform: scale(1.05); }

.v2-eng-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(90, 74, 62, 0.08);
  color: var(--accent-v2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.v2-eng-icon-circle svg { width: 18px; height: 18px; display: block; }

.v2-eng-icon.active .v2-eng-icon-circle {
  background: rgba(90, 74, 62, 0.14);
  box-shadow: 0 0 0 2px rgba(90, 74, 62, 0.20);
}
.v2-eng-icon.active .v2-eng-icon-label {
  color: var(--accent-v2);
  font-weight: 600;
}

.v2-eng-icon-label {
  font-size: 10.5px;
  line-height: 1.15;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  white-space: nowrap;
  min-height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floor sticky : barre plus généreuse que dans la sidebar, max-width centré
   pour ne pas se diluer sur grand écran. Mêmes règles aussi pour l'ancien
   footer (compatibilité). */
.v2-engagement-floor .v2-engagements-bar,
.v2-engagement-footer .v2-engagements-bar {
  gap: 8px;
  padding: 0;
  max-width: 480px;
  margin: 0 auto;
}
.v2-engagement-floor .v2-eng-icon,
.v2-engagement-footer .v2-eng-icon { padding: 6px 4px; }
.v2-engagement-floor .v2-eng-icon-circle,
.v2-engagement-footer .v2-eng-icon-circle { width: 44px; height: 44px; }
.v2-engagement-floor .v2-eng-icon-circle svg,
.v2-engagement-footer .v2-eng-icon-circle svg { width: 24px; height: 24px; }
.v2-engagement-floor .v2-eng-icon-label,
.v2-engagement-footer .v2-eng-icon-label {
  font-size: 11.5px;
  min-height: 1.2em;
  word-break: normal;
}

/* Sur mobile (drawer plus large), on profite de la place pour des cercles
   un peu plus généreux dans la sidebar et un label plus lisible. */
@media (max-width: 880px) {
  .v2-eng-icon-circle { width: 38px; height: 38px; }
  .v2-eng-icon-circle svg { width: 21px; height: 21px; }
  .v2-eng-icon-label { font-size: 11px; }
  .v2-engagement-floor .v2-eng-icon-circle,
  .v2-engagement-footer .v2-eng-icon-circle { width: 48px; height: 48px; }
  .v2-engagement-floor .v2-eng-icon-circle svg,
  .v2-engagement-footer .v2-eng-icon-circle svg { width: 26px; height: 26px; }
}

.v2-sidebar-bottom-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.v2-sidebar-account {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 7px;
  font-family: inherit;
  color: var(--ink); transition: background 120ms ease;
  text-align: left;
}
.v2-sidebar-account:hover { background: var(--bg-card); }
.v2-account-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-v2); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  flex-shrink: 0;
}
.v2-account-name {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bouton wallet à côté du Compte */
.v2-sidebar-wallet {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--egg-transition-smooth), color var(--egg-transition-smooth), background var(--egg-transition-smooth);
}
.v2-sidebar-wallet:hover {
  color: var(--accent-v2);
  border-color: var(--accent-soft);
  background: var(--bg-card);
}

/* Mini-menu portefeuille (popover) */
.v2-wallet-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 10px;
  box-shadow: var(--egg-shadow-card);
  min-width: 250px;
  max-width: 320px;
  padding: 6px;
  font-family: var(--font-body);
}
.v2-wm-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  padding: 8px 10px 6px;
}
.v2-wm-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 9px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.v2-wm-item:hover { background: var(--bg-soft); }
.v2-wm-item.active { background: rgba(163, 177, 138, 0.12); }
.v2-wm-radio {
  font-size: 13px;
  color: var(--accent-sage);
  width: 12px;
  flex-shrink: 0;
}
.v2-wm-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-wm-balance {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.v2-wm-footer {
  padding: 6px 10px 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
.v2-wm-footer a {
  font-size: 12px;
  color: var(--accent-v2);
  cursor: pointer;
}
.v2-wm-footer a:hover { text-decoration: underline; }

/* ========== MAIN ========== */
/* Layout overlay : la conversation occupe toute la zone main et scrolle.
   Le header et le composer sont en absolute par-dessus, avec backdrop-filter
   pour que le contenu scrolle visuellement à travers eux. */
.v2-main {
  position: relative;
  background: var(--bg);
  height: 100%;
  overflow: hidden;
}

.v2-page-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  /* Dégradé : opaque en haut, transparent en bas → effet de flou progressif */
  background: linear-gradient(to bottom, rgba(245, 241, 235, 0.95) 0%, rgba(245, 241, 235, 0.85) 60%, rgba(245, 241, 235, 0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v2-page-title-block {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.v2-page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.v2-page-subtitle {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 1px;
}

.v2-floating-btn {
  background: rgba(90, 74, 62, 0.06);
  border: 1px solid transparent;
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  padding: 0;
  flex-shrink: 0;
}
.v2-floating-btn:hover { background: rgba(90, 74, 62, 0.12); color: var(--accent-v2); }
.v2-floating-btn:active { background: rgba(90, 74, 62, 0.18); }
.v2-floating-btn svg { width: 20px; height: 20px; }

/* ========== BANDEAU ORCHESTRATION (GROW) ========== */
/* Affiché entre le header et la conversation pendant un tool_visit orchestré.
   Permet à l'aspirant de revenir vers EGG à tout moment. */
.v2-grow-banner {
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: linear-gradient(to bottom, rgba(245, 241, 235, 0.95) 0%, rgba(245, 241, 235, 0.85) 100%);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v2-grow-banner-text {
  font-size: 13px;
  color: var(--ink-soft);
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.v2-grow-banner-btn {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.v2-grow-banner-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v2-grow-banner-btn:active { background: var(--ink); color: var(--bg); transform: translateY(1px); }
.v2-grow-banner-btn:disabled { opacity: 0.6; cursor: wait; }
/* Quand le bandeau est présent, la conversation a besoin de plus de padding-top
   pour ne pas être recouverte. Sélecteur adjacent : pas de JS nécessaire. */
.v2-grow-banner + .v2-conversation-scroll .v2-conversation { padding-top: 132px; }
/* Cas méta déplié : padding plus grand pour découvrir toutes les étapes
   sans recouvrement (chaque étape ~52px, 5 étapes = ~260px). */
.v2-grow-banner--meta[data-expanded="true"] + .v2-conversation-scroll .v2-conversation { padding-top: 420px; }

/* Bandeau méta : toggle (état replié) */
.v2-grow-banner--meta {
  display: block;
  padding: 0;
  background: linear-gradient(to bottom, rgba(245, 241, 235, 0.96) 0%, rgba(245, 241, 235, 0.92) 100%);
}
.v2-grow-banner-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  transition: background 120ms ease;
}
.v2-grow-banner-toggle:hover { background: rgba(90, 74, 62, 0.05); }
.v2-grow-banner-count {
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-grow-banner-name {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-grow-banner-chevron {
  font-size: 14px;
  color: var(--ink-soft);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
.v2-grow-banner--meta[data-expanded="true"] .v2-grow-banner-chevron { transform: rotate(180deg); }
.v2-grow-banner-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
}
.v2-grow-banner--meta[data-expanded="true"] .v2-grow-banner-steps {
  max-height: 360px;
  border-bottom: 1px solid var(--rule);
}
.v2-grow-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 24px;
  border-top: 1px solid var(--rule);
}
.v2-grow-step:first-child { border-top: 0; }
.v2-grow-step-marker {
  width: 16px;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-faint);
}
.v2-grow-step--done .v2-grow-step-marker { color: var(--accent-v2, var(--ink-soft)); }
.v2-grow-step--current .v2-grow-step-marker { color: var(--ink); }
.v2-grow-step--todo .v2-grow-step-marker { color: var(--ink-faint); opacity: 0.5; }
.v2-grow-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-grow-step-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.v2-grow-step--todo .v2-grow-step-name { color: var(--ink-faint); font-weight: 400; }
.v2-grow-step-intent {
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.35;
}

/* ========== CONVERSATION ========== */
/* Conteneur de scroll en absolute fills, padding-top/bottom = hauteurs header/composer
   pour que les messages aient de la place et scrollent VISUELLEMENT sous header/composer */
.v2-conversation-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* le scroll ne propage pas vers le body (pas de bounce iOS) */
  /* Scrollbar fine et discrète */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.v2-conversation-scroll::-webkit-scrollbar { width: 8px; }
.v2-conversation-scroll::-webkit-scrollbar-track { background: transparent; }
.v2-conversation-scroll::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 4px;
  border: 2px solid var(--bg);
}
.v2-conversation-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
.v2-conversation {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  /* top : header ~62px + 18px d'air = 80px
     bottom : composer ~120px + 60px d'air pour que le dernier message
              soit clairement visible au-dessus de la zone de blur */
  padding: 80px 24px 180px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.v2-msg { display: flex; flex-direction: column; max-width: 85%; }
.v2-msg.egg { align-self: flex-start; }
.v2-msg.egg.wide { max-width: 100%; align-self: stretch; }
.v2-msg.user { align-self: flex-end; }

.v2-msg-bubble {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: var(--shadow-bubble);
}
.v2-msg.egg .v2-msg-bubble {
  background: var(--bg-bubble-egg);
  color: var(--ink);
  border: 1px solid var(--border-soft);
}
.v2-msg.user .v2-msg-bubble {
  background: var(--bg-bubble-user);
  color: var(--ink);
}
.v2-msg-bubble p { margin: 0 0 0.75em; }
.v2-msg-bubble p:last-child { margin-bottom: 0; }
.v2-msg-bubble .opening { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
/* Listes — alignement des bullets sur la marge gauche du paragraphe. Par défaut
   le navigateur applique padding-left: 40px qui décale les puces à gauche du
   texte normal. On contraint à un retrait juste suffisant pour le marqueur. */
.v2-msg-bubble ul,
.v2-msg-bubble ol {
  margin: 0.5em 0;
  padding-left: 1.4em;
}
.v2-msg-bubble li { margin: 0.25em 0; }
.v2-msg-bubble li > p { margin: 0; }
.v2-msg-bubble li > p + p { margin-top: 0.3em; }
.v2-msg-time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-faint);
  padding: 0 6px;
}
.v2-msg.user .v2-msg-time { align-self: flex-end; }

/* ════════════════════════════════════════════════════════════════
   BLOCS VISUELS STRUCTURÉS (système V2_BLOCKS dans app-v2.js)
   Pattern : un agent peut encadrer du JSON dans son texte avec
   [TYPE]{...}[/TYPE]. Le frontend rend chaque type avec un style
   dédié, en cohérence avec la palette cocon naturel.
   Types : CARDS, TABLE, CHOICE, SCORE, TIMELINE.
   ════════════════════════════════════════════════════════════════ */

.v2-block {
  margin: 14px 0;
}
.v2-block-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  opacity: 0.85;
}

/* ── [TABLE] ── */
.v2-block-table .v2-table-wrap {
  overflow-x: auto;
  border-radius: var(--egg-radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  box-shadow: var(--shadow-soft);
}
.v2-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.v2-block-table thead tr {
  background: rgba(232, 223, 211, 0.55);
}
.v2-block-table th,
.v2-block-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.v2-block-table th {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.005em;
}
.v2-block-table td { color: var(--ink); }
.v2-block-table tbody tr:last-child td { border-bottom: none; }
.v2-block-table tbody tr:hover td { background: rgba(90, 74, 62, 0.03); }

/* ── [TABLEAU] : pesée Clarifier (scénarios × critères × poids signés) ── */
.v2-block-tableau .v2-table-wrap {
  overflow-x: auto;
  border-radius: var(--egg-radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  box-shadow: var(--shadow-soft);
}
.v2-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.v2-tableau thead tr {
  background: rgba(232, 223, 211, 0.55);
}
.v2-tableau th {
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink);
  font-size: 12.5px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.v2-tableau th.v2-tableau-crit-col,
.v2-tableau td.v2-tableau-crit {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  min-width: 110px;
}
.v2-tableau td.v2-tableau-crit.muted { color: var(--ink-faint); font-weight: 400; }
.v2-tableau td.v2-tableau-crit.strong { font-weight: 700; }
.v2-tableau .v2-tableau-desc-row td {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.v2-tableau td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.v2-tableau .v2-tableau-cell {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.v2-tableau .v2-tableau-cell.pos { color: #5C8A6E; } /* sage soutenu */
.v2-tableau .v2-tableau-cell.neg { color: #C97B63; } /* error muted cocon */
.v2-tableau .v2-tableau-cell.zero { color: var(--ink-faint); }
.v2-tableau .v2-tableau-cell.pending {
  color: #B07F2F;
  background: rgba(214, 168, 95, 0.10);
  font-style: italic;
  font-weight: 400;
}
.v2-tableau .v2-tableau-cell.muted { color: var(--ink-faint); font-style: italic; font-size: 11.5px; font-weight: 400; }
.v2-tableau .v2-tableau-cell.ref { color: var(--ink-faint); font-weight: 400; }
.v2-tableau .v2-tableau-cell.strong { font-size: 14px; font-weight: 700; }
.v2-tableau tr.v2-tableau-tension td { border-top: 2px solid var(--border-v2); }
.v2-tableau tbody tr:last-child td { border-bottom: none; }

/* ── [CHOICE] ── */
.v2-block-choice {
  background: rgba(232, 223, 211, 0.35);
  border-radius: var(--egg-radius-md);
  padding: 16px 18px;
}
.v2-choice-q {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.35;
}
.v2-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v2-choice-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.v2-choice-btn:hover {
  background: white;
  border-color: var(--accent-v2);
  transform: translateY(-1px);
}
.v2-choice-btn:active { transform: translateY(0); }
.v2-choice-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ── [SCORE] ── */
.v2-block-score {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 16px 18px;
}
.v2-score-item { margin-bottom: 14px; }
.v2-score-item:last-child { margin-bottom: 0; }
.v2-score-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 6px;
}
.v2-score-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.v2-score-sep {
  color: var(--ink-faint);
  font-weight: 400;
}
.v2-score-track {
  height: 6px;
  background: rgba(90, 74, 62, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.v2-score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-v2), var(--accent-soft));
  border-radius: 3px;
  transition: width 400ms ease;
}

/* ── [TIMELINE] ── */
.v2-block-timeline {
  padding-left: 4px;
}
.v2-tl-step {
  position: relative;
  padding-left: 28px;
  padding-bottom: 18px;
  border-left: 2px solid var(--border-v2);
  margin-left: 6px;
}
.v2-tl-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.v2-tl-dot {
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-v2);
}
.v2-tl-step.done .v2-tl-dot {
  background: var(--accent-v2);
}
.v2-tl-date {
  font-size: 11.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.v2-tl-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.v2-tl-body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ── Tables Markdown brutes (fallback : agents qui ne migrent pas en [TABLE]) ── */
.v2-msg-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  overflow: hidden;
}
.v2-msg-bubble thead tr { background: rgba(232, 223, 211, 0.55); }
.v2-msg-bubble th,
.v2-msg-bubble td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.v2-msg-bubble th { font-weight: 600; color: var(--ink); font-size: 13px; }
.v2-msg-bubble tbody tr:last-child td { border-bottom: none; }

/* ========== AGENT CARDS (rendu du bloc [CARDS] de EGG) ========== */
.v2-agent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.v2-agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.v2-agent-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-floating);
}
.v2-agent-kind {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.v2-agent-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.v2-agent-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}
.v2-agent-just {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.45;
  margin: 0;
}
.v2-agent-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.v2-agent-discover {
  font-size: 12px;
  /* Vert sauge : la découverte d'une nouvelle ressource est tournée vers l'avant */
  color: var(--accent-sage);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.v2-agent-discover-arrow { transition: transform 150ms ease; }
.v2-agent-discover:hover .v2-agent-discover-arrow { transform: translateX(2px); }

/* Carte de reprise (session existante) — différenciée des cartes nouvelle ressource */
.v2-agent-card.v2-agent-card-resume {
  background: var(--bg-soft);
  border-color: var(--rule);
}
.v2-agent-card.v2-agent-card-resume:hover {
  border-color: var(--accent-v2);
}
.v2-agent-kind.v2-agent-kind-resume {
  color: var(--accent-v2);
  font-weight: 500;
}

/* ========== COMPOSER ========== */
/* Composer en absolute, par-dessus la conversation, avec dégradé flou pour
   que les messages disparaissent en douceur sous lui. */
.v2-composer-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* Padding-bottom = max(20px, safe-area-inset-bottom) pour respecter le notch /
     home-indicator iOS et ne pas passer sous la barre du navigateur. */
  padding: 16px 24px max(20px, env(safe-area-inset-bottom));
  /* Pas de backdrop-filter ici (retiré sur demande) — juste un dégradé d'opacité
     pour que les messages disparaissent en douceur sous le composer. */
  background: linear-gradient(to top, var(--bg) 50%, rgba(245, 241, 235, 0) 100%);
}
.v2-composer {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-soft);
}
/* Composer en ligne unique : textarea (flex:1) + actions à droite (flex-end).
   La textarea grandit en hauteur via JS (v2OnComposerInput) jusqu'à 200px max. */
.v2-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.v2-composer-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.v2-composer-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  margin: 8px 0 0;
  letter-spacing: 0.005em;
}
.v2-composer-input {
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  /* 16px minimum : sous ce seuil, iOS Safari auto-zoome au focus et ne
     dézoome pas au blur. Casse la mise en page. 16px tient le standard. */
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  width: 100%;
  min-height: 32px;
  max-height: 200px;
  padding: 4px 0;
  transition: opacity 150ms ease;
  overflow-y: auto;
}
.v2-composer-input::placeholder { color: var(--ink-faint); }
.v2-composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ========== Bouton submit multi-état (mic / send / stop / spinner) ========== */
.v2-composer-submit {
  position: relative;
  background: var(--accent-v2);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--egg-transition-smooth, 220ms ease), transform 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-composer-submit:hover { background: #493B31; }
.v2-composer-submit:active { transform: scale(0.95); }
.v2-composer-submit:disabled { background: var(--ink-faint); cursor: default; }

/* Toutes les icônes empilées au même endroit, on en montre une selon data-mode */
.v2-composer-submit > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.v2-composer-submit[data-mode="mic"]    .v2-btn-icon-mic     { opacity: 1; }
.v2-composer-submit[data-mode="send"]   .v2-btn-icon-send    { opacity: 1; }
.v2-composer-submit[data-mode="recording"] .v2-btn-icon-stop { opacity: 1; }
.v2-composer-submit[data-mode="transcribing"] .v2-btn-icon-spinner { opacity: 1; }

/* État recording : bouton rouge calme + halo pulsant pour signaler l'écoute active */
.v2-composer-submit[data-mode="recording"] {
  background: #C97B63;
  animation: v2-rec-pulse 1.4s ease-in-out infinite;
}
.v2-composer-submit[data-mode="recording"]:hover { background: #b56652; }
@keyframes v2-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 123, 99, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(201, 123, 99, 0); }
}

/* Spinner pendant transcription : le wrapper hérite de inset:0 + flex-center
   du sélecteur .v2-composer-submit > span ; on ne touche surtout pas aux
   dimensions du wrapper (sinon il se rétrécit en coin haut-gauche). Seul
   le ::before porte la taille du spinner et l'animation. */
.v2-btn-icon-spinner::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.30);
  border-top-color: white;
  border-radius: 50%;
  animation: v2-spin 0.7s linear infinite;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* Bouton ✕ d'annulation : visible uniquement pendant la transcription */
.v2-composer-cancel {
  background: transparent;
  border: 1px solid var(--border-v2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
}
.v2-composer-cancel:hover { background: rgba(90, 74, 62, 0.06); color: var(--ink); }
.v2-composer[data-state="transcribing"] .v2-composer-cancel { display: flex; }

/* ========== Overlay enregistrement (waveform + timer) ========== */
.v2-composer-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.v2-composer[data-state="recording"] .v2-composer-overlay { display: flex; }
.v2-composer[data-state="recording"] .v2-composer-input { opacity: 0; pointer-events: none; }
.v2-composer[data-state="transcribing"] .v2-composer-input { opacity: 0.5; }
.v2-composer[data-state="transcribing"] .v2-composer-input::placeholder { color: var(--ink-soft); }

.v2-rec-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.v2-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C97B63;
  animation: v2-dot-blink 1s ease-in-out infinite;
}
@keyframes v2-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.v2-rec-timer {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  min-width: 42px;
}
.v2-rec-waveform {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
  overflow: hidden;
}
.v2-wave-bar {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent-v2);
  opacity: 0.65;
  transition: height 80ms ease-out;
}

/* ========== Page Compte ========== */
.v2-account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 4px 24px;
  margin-bottom: 14px;
}
.v2-account-header-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-v2);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  flex-shrink: 0;
}
.v2-account-header-info { min-width: 0; }
.v2-account-header-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.v2-account-header-email {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ── Onglets profil (Mes informations / Mes investissements) ── */
.v2-account-tabs {
  display: flex;
  gap: 6px;
  margin: 22px 0 24px;
  border-bottom: 1px solid var(--border-v2);
}
.v2-account-tab {
  background: transparent;
  border: none;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--egg-transition-smooth), border-color var(--egg-transition-smooth);
}
.v2-account-tab:hover { color: var(--ink); }
.v2-account-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent-v2);
  font-weight: 600;
}

/* ── Comptes communs (cartes dans Mes investissements) ── */
.v2-common-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.v2-common-card {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 12px;
  padding: 14px 16px;
}
.v2-common-card.active {
  border-color: var(--accent-sage);
  background: rgba(163, 177, 138, 0.06);
}
.v2-common-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.v2-common-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.v2-common-card-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.v2-common-card-balance {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--accent-v2);
  margin: 4px 0 6px;
}
.v2-common-card-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 4px 0 10px;
  line-height: 1.45;
}
.v2-common-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.v2-common-card-active-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--accent-sage);
  font-weight: 600;
  padding: 6px 10px;
}

/* ── Invitations en attente (bandeau prominent vert sage) ── */
.v2-common-invitations {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.v2-common-invitation {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(163, 177, 138, 0.10);
  border: 1px solid rgba(163, 177, 138, 0.35);
  border-radius: 12px;
}
.v2-common-invitation-info { flex: 1; min-width: 0; }
.v2-common-invitation-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.v2-common-invitation-from {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.v2-common-invitation-desc {
  font-size: 13px;
  color: var(--ink);
  margin-top: 6px;
  font-style: italic;
}
.v2-common-invitation-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Side panel de gestion d'un compte commun (L8.3) ── */
.v2-cw-panel { /* hérite de .v2-fiche-panel */ }
.v2-cw-panel-header {
  padding: 8px 0 4px;
}
.v2-cw-role-badge {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.v2-cw-panel h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.v2-cw-panel-description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  margin: 6px 0 0;
}

.v2-cw-balance-block {
  margin: 22px 0 28px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border-radius: var(--egg-radius-md);
  text-align: center;
}
.v2-cw-balance-amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--accent-v2);
  letter-spacing: -0.01em;
}
.v2-cw-balance-label {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 4px 0 14px;
}

.v2-cw-section {
  margin: 24px 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.v2-cw-section h2 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: 0.005em;
}
.v2-cw-section-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.5;
}
.v2-cw-section.v2-cw-danger { border-top-color: rgba(201, 123, 99, 0.3); }

.v2-cw-action-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-cw-action-btn {
  text-align: left;
  padding: 11px 14px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--egg-transition-smooth), background var(--egg-transition-smooth);
}
.v2-cw-action-btn:hover { border-color: var(--accent-soft); background: rgba(232, 223, 211, 0.4); }
.v2-cw-action-btn.danger {
  color: var(--danger-v2);
  border-color: rgba(201, 123, 99, 0.3);
}
.v2-cw-action-btn.danger:hover { background: rgba(201, 123, 99, 0.06); }

/* Périmètre de dépense (Constitution v4 §59) */
.v2-cw-scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-cw-scope-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
}
.v2-cw-scope-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.v2-cw-scope-badge,
.v2-cw-scope-regime {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(15, 155, 114, 0.1);
  color: var(--accent-v2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v2-cw-scope-regime {
  background: rgba(120, 120, 120, 0.1);
  color: var(--ink-soft);
}
.v2-cw-scope-empty {
  padding: 12px 14px;
  background: rgba(201, 123, 99, 0.05);
  border: 1px dashed rgba(201, 123, 99, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

/* Modale de sélection du périmètre */
.v2-scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-scope-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  cursor: pointer;
}
.v2-scope-row.is-disabled {
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.02);
}
.v2-scope-row input[type=checkbox] {
  flex-shrink: 0;
}
.v2-scope-label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.v2-scope-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
}
.v2-scope-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}

.v2-cw-authorities {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-cw-authority {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
  gap: 10px;
}
.v2-cw-authority-info { min-width: 0; flex: 1; }
.v2-cw-authority-name { font-size: 14px; color: var(--ink); }
.v2-cw-authority-role { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }

.v2-cw-mini-btn {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border-v2);
  border-radius: 999px;
  cursor: pointer;
}
.v2-cw-mini-btn:hover { color: var(--ink); border-color: var(--accent-soft); }

/* ── Modal générique (création / virement / invite / etc.) ── */
.v2-cw-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(47, 42, 38, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.v2-cw-modal {
  background: var(--bg-card);
  border-radius: var(--egg-radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--egg-shadow-card);
  font-family: var(--font-body);
  color: var(--ink);
  overflow: hidden;
}
.v2-cw-modal-header {
  padding: 22px 24px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.v2-cw-modal-header h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.v2-cw-modal-header p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.v2-cw-modal-body {
  padding: 16px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-cw-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.v2-cw-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
}
.v2-cw-field input,
.v2-cw-field textarea,
.v2-cw-field select {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--font-body);
}
.v2-cw-field input:focus,
.v2-cw-field textarea:focus,
.v2-cw-field select:focus {
  outline: none;
  border-color: var(--accent-soft);
}
.v2-cw-field-help {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-style: italic;
}
.v2-cw-modal-footer {
  padding: 14px 24px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-soft);
}
.v2-cw-btn-primary,
.v2-cw-btn-ghost {
  font: inherit;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
}
.v2-cw-btn-primary {
  background: var(--accent-v2);
  color: #fff;
  border: none;
}
.v2-cw-btn-primary:hover { background: #4a3d33; }
.v2-cw-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border-v2);
}
.v2-cw-btn-ghost:hover { color: var(--ink); border-color: var(--accent-soft); }

/* ── L8.6 — Encart fallback wallet (haut de la conversation) ── */
.v2-wallet-hint {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 560px;
  width: calc(100% - 48px);
  background: rgba(214, 168, 95, 0.14);
  border: 1px solid rgba(214, 168, 95, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink);
  z-index: 11;
  box-shadow: var(--shadow-soft);
  animation: v2WalletHintIn 220ms ease-out;
}
@keyframes v2WalletHintIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.v2-wallet-hint-text { flex: 1; line-height: 1.45; }
.v2-wallet-hint-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.v2-wallet-hint-actions button {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-v2);
  color: #fff;
  border: none;
  cursor: pointer;
}
.v2-wallet-hint-actions button.dismiss {
  background: transparent;
  color: var(--ink-faint);
  padding: 4px 8px;
  font-size: 14px;
}
.v2-wallet-hint-actions button.dismiss:hover { color: var(--ink-soft); }

/* ── Reporting compte commun (table) ── */
.v2-cw-usage-summary {
  font-size: 13.5px;
  color: var(--ink);
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
}
.v2-cw-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.v2-cw-usage-table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-v2);
}
.v2-cw-usage-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
}
.v2-cw-usage-table tbody tr:last-child td { border-bottom: none; }
.v2-cw-usage-table th:nth-child(2),
.v2-cw-usage-table th:nth-child(3),
.v2-cw-usage-table td:nth-child(2),
.v2-cw-usage-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }

/* Manifeste en haut de l'onglet « Mes investissements » */
.v2-invest-manifesto {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
  padding: 18px 22px;
  background: rgba(15, 155, 114, 0.06);
  border-left: 3px solid var(--accent-v2);
  border-radius: 0 10px 10px 0;
  font-style: italic;
}
/* Blocs « Investir sur moi » / « Investir ensemble » */
.v2-invest-block {
  margin-bottom: 22px;
}
.v2-invest-block-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  padding: 0 2px;
}
.v2-invest-sub-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.v2-account-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--egg-radius-lg);
  padding: 22px 24px;
  margin-bottom: 14px;
}
.v2-account-section h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.v2-account-section .v2-account-section-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.5;
}
.v2-account-section-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 14px;
}

/* Forme de champ : label + input */
.v2-account-field {
  margin-bottom: 12px;
}
.v2-account-field label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 500;
}
.v2-account-field input {
  width: 100%;
  background: white;
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 10px 12px;
  font: inherit;
  /* 16px : sous ce seuil, iOS Safari auto-zoome au focus. */
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.v2-account-field input:focus {
  border-color: var(--accent-v2);
  box-shadow: 0 0 0 3px rgba(90, 74, 62, 0.10);
}
.v2-account-field input:disabled { background: var(--bg-soft); color: var(--ink-faint); }

/* Connexions (email/google/linkedin) */
.v2-account-conn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.v2-account-conn:last-child { border-bottom: none; }
.v2-account-conn-icon {
  width: 36px; height: 36px;
  border-radius: var(--egg-radius-md);
  background: var(--bg-soft);
  border: 1px solid var(--border-v2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v2-account-conn-info { flex: 1; min-width: 0; }
.v2-account-conn-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.v2-account-conn-desc {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.v2-account-conn-status {
  font-size: 12px;
  color: var(--accent-sage);
  font-weight: 500;
  flex-shrink: 0;
}
.v2-account-conn-btn {
  background: transparent;
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease;
}
.v2-account-conn-btn:hover { background: var(--bg-soft); color: var(--ink); }

/* Historique des investissements */
.v2-account-invest-history {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* Surcharge des variables legacy à l'intérieur du compte v2 :
   loadInvestHistory() et loadProfileRoles() produisent du HTML avec des inline
   styles var(--text-3), var(--teal), var(--bg), var(--border)... calibrés pour
   le thème sombre legacy. On les redéfinit localement pour qu'ils résolvent
   sur des couleurs lisibles dans le thème clair v2. */
body.v2 .v2-account-section {
  --text: var(--ink);
  --text-2: var(--ink);
  --text-3: var(--ink-soft);
  --teal: var(--accent-v2);
  --teal-light: rgba(90, 74, 62, 0.10);
  --teal-mid: var(--accent-v2);
  --border: var(--border-v2);
  --bg: var(--bg-card);
  --bg-2: var(--bg-soft);
  --card: var(--bg-card);
}
body.v2 .v2-account-section a { color: var(--accent-v2); }
body.v2 .v2-account-section .btn-primary {
  background: var(--accent-v2);
  color: white;
  border: 1px solid var(--accent-v2);
  border-radius: var(--egg-radius-md);
}
body.v2 .v2-account-section .btn-primary:hover { background: #493B31; border-color: #493B31; }
body.v2 .v2-account-section .btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
}
body.v2 .v2-account-section .btn-ghost:hover { background: var(--bg-soft); }
body.v2 .v2-account-section input,
body.v2 .v2-account-section textarea {
  background: white;
  color: var(--ink);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
}
body.v2 .v2-account-section .form-field label {
  color: var(--ink-soft);
}

/* Footer liens */
.v2-account-footer-links {
  text-align: center;
  padding: 24px 16px 8px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.v2-account-footer-links a,
.v2-account-footer-links button {
  font-size: 11.5px;
  color: var(--ink-faint);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.v2-account-footer-links a:hover,
.v2-account-footer-links button:hover { color: var(--accent-v2); }
.v2-account-footer-links span { color: var(--ink-faint); font-size: 11.5px; }

/* Zone de danger */
.v2-account-danger-zone {
  border-color: rgba(201, 123, 99, 0.3);
}
.v2-account-danger-zone h2 { color: var(--danger-v2); }
.v2-account-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.v2-account-balance-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.v2-account-invest-btn {
  background: var(--accent-v2);
  color: white;
  border: none;
  border-radius: var(--egg-radius-md);
  padding: 11px 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
  min-height: 42px;
}
.v2-account-invest-btn:hover { background: #493B31; }
.v2-account-invest-btn:disabled { background: var(--ink-faint); cursor: default; }

.v2-account-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.v2-account-info-row:last-child { border-bottom: none; }
.v2-account-info-label {
  font-size: 13px;
  color: var(--ink-soft);
}
.v2-account-info-value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

.v2-account-explainer {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 14px;
}

.v2-account-action {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 11px 16px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  margin-bottom: 8px;
  transition: background 150ms ease, border-color 150ms ease;
}
.v2-account-action:hover { background: var(--bg-soft); border-color: var(--accent-soft); }
.v2-account-action:last-child { margin-bottom: 0; }
.v2-account-action.danger {
  color: var(--danger-v2);
  border-color: rgba(201, 123, 99, 0.4);
}
.v2-account-action.danger:hover {
  background: rgba(201, 123, 99, 0.08);
  border-color: var(--danger-v2);
}

/* ========== Vue Parcours (timeline complète) ========== */
.v2-timeline {
  padding: 8px 0 60px;
}
.v2-timeline-period {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 30px 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-v2);
}
.v2-timeline-period:first-child { margin-top: 0; }
.v2-timeline-entry {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--egg-radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
  display: block;
  text-align: left;
  font-family: inherit;
  width: 100%;
  position: relative;
}
.v2-timeline-entry:hover {
  border-color: var(--accent-v2);
  transform: translateX(2px);
}
.v2-timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.v2-timeline-pinned {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-v2);
  font-weight: 500;
}
.v2-timeline-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.v2-timeline-via {
  font-size: 13px;
  color: var(--ink-soft);
}
.v2-timeline-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 14.5px;
}

/* ========== Fiche d'agent (panneau latéral overlay) ========== */
.v2-fiche-scrim {
  position: fixed;
  inset: 0;
  background: rgba(47, 42, 38, 0.4);
  z-index: 250;
  opacity: 0;
  transition: opacity 220ms ease;
}
.v2-fiche-scrim.open { opacity: 1; }

.v2-fiche-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border-v2);
  box-shadow: -10px 0 40px rgba(47, 42, 38, 0.10);
  z-index: 251;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v2-fiche-panel.open { transform: translateX(0); }

.v2-fiche-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--bg-soft);
  border: 1px solid var(--border-v2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  transition: background 150ms ease, color 150ms ease;
}
.v2-fiche-close:hover { background: white; color: var(--ink); }

.v2-fiche-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.v2-fiche-hero {
  margin-bottom: 24px;
}
.v2-fiche-kind {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 8px;
}
.v2-fiche-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.1;
}
.v2-fiche-tagline {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 20px;
}
.v2-fiche-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.v2-fiche-action-primary {
  flex: 1;
  background: var(--accent-v2);
  color: white;
  border: 1px solid var(--accent-v2);
  border-radius: var(--egg-radius-md);
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.v2-fiche-action-primary:hover { background: #493B31; }
.v2-fiche-action-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.v2-fiche-action-secondary:hover { background: var(--bg-soft); }

.v2-fiche-section {
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
}
.v2-fiche-section-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 10px;
}
.v2-fiche-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
}
.v2-fiche-section p:last-child { margin-bottom: 0; }

/* Phrases-déclencheurs : citations en italique, calé sur le ton "miroir aspirant". */
.v2-fiche-declencheurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-fiche-declencheurs li {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  padding: 8px 14px;
  border-left: 2px solid var(--accent-sage);
  background: var(--bg-soft);
  border-radius: 0 8px 8px 0;
}

@media (max-width: 600px) {
  .v2-fiche-panel { width: 100vw; border-left: none; }
  .v2-fiche-content { padding: 60px 22px 36px; }
}

/* ========== Console opérateur : mode visuel distinctif ==========
   On donne à la zone main un fond teinté plus marqué et on ajoute une
   bannière fine en haut pour bien distinguer ce mode de la page
   Bibliothèques de l'aspirant (qui utilise le même layout console). */
.v2-conversation-scroll--operator {
  background: linear-gradient(180deg, rgba(90, 74, 62, 0.08) 0%, rgba(90, 74, 62, 0.03) 200px, transparent 400px);
}
.v2-op-console--mode-operator {
  /* La console opérateur est en 3 colonnes (280 + 1fr + 280). Avec un max-width
     de 1080px, le panneau central ne ferait que 520px — trop étroit pour les
     cartes d'agents. On élargit pour profiter des grands écrans (la marge
     latérale subsiste via padding). */
  max-width: 1600px;
}
.v2-op-mode-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 12px;
  background: rgba(90, 74, 62, 0.10);
  border: 1px solid rgba(90, 74, 62, 0.18);
  color: var(--ink);
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
}
.v2-op-mode-banner svg {
  color: var(--ink-soft);
  flex-shrink: 0;
}
.v2-op-mode-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}
/* Variante admin : teinte bleu-gris sobre pour démarquer de la console opérateur (brun) */
.v2-conversation-scroll--admin {
  background: linear-gradient(180deg, rgba(74, 90, 110, 0.10) 0%, rgba(74, 90, 110, 0.04) 200px, transparent 400px);
}
.v2-op-mode-banner--admin {
  background: rgba(74, 90, 110, 0.12);
  border-color: rgba(74, 90, 110, 0.22);
}
.v2-op-mode-banner--admin svg {
  color: #4a5a6e;
}
.v2-op-mode-banner--admin strong {
  color: #2e3a4b;
}

/* Masquage / affichage des sections admin selon la sélection */
.v2-admin-container > #adminContent > .profile-section { display: none; }
.v2-admin-container[data-active-section="users"] > #adminContent > [data-admin-section="users"],
.v2-admin-container[data-active-section="operator-invitations"] > #adminContent > [data-admin-section="operator-invitations"],
.v2-admin-container[data-active-section="supervisor-invitations"] > #adminContent > [data-admin-section="supervisor-invitations"],
.v2-admin-container[data-active-section="eggsperts"] > #adminContent > [data-admin-section="eggsperts"],
.v2-admin-container[data-active-section="settings"] > #adminContent > [data-admin-section="settings"],
.v2-admin-container[data-active-section="llm"] > #adminContent > [data-admin-section="llm"],
.v2-admin-container[data-active-section="migration"] > #adminContent > [data-admin-section="migration"] {
  display: block;
}
/* Pendant le chargement (loading), l'élément n'a pas encore data-admin-section ;
   on l'affiche aussi pour ne pas avoir d'écran vide. */
.v2-admin-container > #adminContent > .loading { display: block; }
/* Re-mappe les variables V1 (palette dark) vers les variables V2 (palette
   beige claire) pour que le HTML rendu par admin.js soit lisible dans la
   console admin V2 sans avoir à toucher admin.js. */
.v2-admin-container {
  --text: var(--ink);
  --text-2: var(--ink-soft);
  --text-3: var(--ink-faint);
  --card: var(--bg-card);
  --border: var(--border-v2);
  --bg: var(--bg);
  color: var(--ink);
  padding: 0 14px 14px;
  /* Permettre le scroll vertical interne — .v2-op-content est en overflow:hidden,
     donc le scroll doit être pris en charge ici sinon les sections longues sont
     tronquées sans pouvoir défiler. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.v2-admin-container .profile-section {
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 10px;
  margin-top: 8px;
  color: var(--ink);
}
.v2-admin-container .profile-section h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Inputs, selects, textareas dans le contexte admin V2 */
.v2-admin-container input[type="text"],
.v2-admin-container input[type="email"],
.v2-admin-container input[type="number"],
.v2-admin-container input[type="password"],
.v2-admin-container select,
.v2-admin-container textarea {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  border: 1px solid var(--border-v2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.v2-admin-container input[type="checkbox"] {
  accent-color: var(--accent-v2);
}
.v2-admin-container label {
  color: var(--ink-soft);
}
.v2-admin-container .form-field {
  margin-bottom: 12px;
}
.v2-admin-container .form-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.v2-admin-container .form-field input,
.v2-admin-container .form-field select {
  width: 100%;
}
.v2-admin-container .btn-primary {
  background: var(--accent-v2);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.v2-admin-container .btn-primary:hover { background: #0d8a64; }
.v2-admin-container .btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
}
.v2-admin-container .btn-ghost:hover {
  background: rgba(15, 155, 114, 0.06);
  color: var(--accent-v2);
  border-color: rgba(15, 155, 114, 0.25);
}
.v2-admin-container table {
  color: var(--ink);
}
.v2-admin-container table th {
  color: var(--ink-faint) !important;
}
.v2-admin-container pre {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--ink-soft) !important;
}
.v2-admin-container .loading {
  color: var(--ink-faint);
  font-style: italic;
}

/* ========== Console opérateur (Constitution v4 §69-75) ========== */
/* Layout pleine hauteur : le wrapper scroll global est désactivé, et les
   panneaux gauche/droite scrollent indépendamment dans leur boîte. */
.v2-conversation-scroll.v2-conversation-scroll--no-scroll {
  overflow: hidden;
}
.v2-op-console {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  /* Le top doit compenser le .v2-page-header (position absolute, ~66px) */
  padding: 76px 24px 16px;
  display: flex;
  flex-direction: column;
}
.v2-op-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
}
.v2-op-header-info {
  flex: 1;
  min-width: 0;
}
.v2-op-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.v2-op-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.v2-op-status {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v2-op-status-active { background: rgba(15, 155, 114, 0.12); color: var(--accent-v2); }
.v2-op-status-suspended { background: rgba(240, 171, 71, 0.12); color: #b07a1a; }
.v2-op-status-revoked { background: rgba(201, 123, 99, 0.12); color: #a64f3c; }
.v2-op-header-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.v2-op-header-meta strong {
  color: var(--ink-faint);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.v2-op-header-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  /* Fond carte (cohérent avec le CTA "Par où commencer ?") — neutre, ne clash
     pas avec la couleur de l'opérateur de la bibliothèque. */
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.v2-op-header-edit:hover {
  background: var(--bg-soft);
  border-color: color-mix(in srgb, var(--ink-soft) 30%, var(--border-v2));
}
.v2-op-header-edit.v2-op-header-danger:hover {
  background: rgba(201, 123, 99, 0.08);
  color: #a64f3c;
  border-color: rgba(201, 123, 99, 0.3);
}
/* Variante icône seule : carré, sans gap (pas de texte derrière l'icône). */
.v2-op-header-edit.v2-op-header-icon {
  padding: 0;
  width: 32px;
  height: 32px;
  justify-content: center;
  gap: 0;
}
/* Bouton épingle quand la biblio est déjà épinglée : couleur légèrement marquée
   pour différencier l'état (filled icon + ink-soft). */
.v2-op-header-edit.is-pinned {
  color: var(--ink-soft);
}
.v2-op-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: stretch;
}
/* Variante 3 colonnes (console opérateur) : C3 "Tous mes agents" à droite. */
.v2-op-grid--3cols {
  grid-template-columns: 280px 1fr 280px;
}
/* En dessous de 1280px on retombe en 2 colonnes — un popup informatif explique
   au caller que le panorama est masqué pour préserver la lisibilité. */
@media (max-width: 1279px) {
  .v2-op-grid--3cols {
    grid-template-columns: 280px 1fr;
  }
  .v2-op-grid--3cols .v2-op-panorama {
    display: none;
  }
}

/* ── Phase 3 — Sidebar "Mes groupes" ──────────────────────────────────── */

/* Sous-header dans la sidebar (« Mes groupes » sous « Mes bibliothèques »). */
.v2-op-side-header--sub {
  margin-top: 8px;
}
/* Dot d'un item « groupe » dans la sidebar : pas une biblio, pas un agent →
   marqueur neutre (carré arrondi, pas de couleur). */
.v2-op-side-item-dot-group {
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  border-radius: 3px;
}

/* ── Phase 2 — Onglets et vue Membres dans la carte biblio privée ───── */

/* Barre d'onglets sous le header, au-dessus du body. Visible uniquement pour
   une biblio privée (Contenu / Membres). */
.v2-op-lib-tabs {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border-v2);
  flex-shrink: 0;
}
.v2-op-lib-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.v2-op-lib-tab:hover { color: var(--ink); }
.v2-op-lib-tab.is-active {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--lib-accent, var(--accent-v2));
}

/* Row d'un membre dans la liste "Membres inclus". Structure proche de
   .v2-op-agent-row mais avec email comme identifiant principal. */
.v2-op-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  margin-bottom: 6px;
}
.v2-op-member-info { flex: 1; min-width: 0; }
.v2-op-member-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-op-member-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.v2-op-member-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.v2-op-member-status.active {
  background: color-mix(in srgb, var(--accent-v2) 14%, transparent);
  color: var(--ink);
}
.v2-op-member-status.invited {
  background: rgba(201, 123, 99, 0.14);
  color: #a64f3c;
}
.v2-op-member-source { color: var(--ink-soft); }
.v2-op-member-expires { color: var(--ink-faint); font-style: italic; }
.v2-op-member-meta-hint { font-size: 11px; color: var(--ink-faint); font-style: italic; }

/* En-tête de section avec bouton d'action à droite (ex: "Membres inclus" + Ajouter). */
.v2-op-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.v2-op-section-row .v2-op-section-title { margin: 0; }

/* Liste des groupes liés à la biblio (chips). */
.v2-op-member-groups-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.v2-op-member-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  background: color-mix(in srgb, var(--lib-accent, var(--accent-v2)) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--lib-accent, var(--accent-v2)) 30%, var(--border-v2));
  border-radius: 10px;
  color: var(--ink);
}
.v2-op-member-group-unlink {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
}
.v2-op-member-group-unlink:hover { color: #a64f3c; }

/* Wrapper qui porte la variable --lib-accent autour du header + body.
   Doit propager la chaîne flex hauteur du parent .v2-op-content vers ses
   enfants (header puis body, qui scrolle). Sans ce display:flex column,
   .v2-op-content-body { flex: 1 } est sans effet et le scroll interne casse. */
.v2-op-lib-scope {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Deux colonnes internes dans la carte d'une bibliothèque :
   - colonne gauche : agents inclus (référencés)
   - colonne droite : tous les agents disponibles (panorama)
   Chaque colonne scrolle indépendamment — son titre reste visible en haut. */
.v2-op-lib-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}
.v2-op-lib-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.v2-op-lib-col--available {
  /* Séparation visuelle subtile entre les deux colonnes. */
  border-left: 1px dashed var(--border-v2);
  padding-left: 20px;
}
/* La liste des agents inclus scrolle dans la colonne (titre fixe au-dessus). */
.v2-op-lib-col--referenced .v2-op-agent-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 880px) {
  /* Sur petit écran, on empile et on rétablit le scroll global du body. */
  .v2-op-content-body {
    overflow-y: auto;
  }
  .v2-op-lib-cols {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .v2-op-lib-col--available {
    border-left: none;
    border-top: 1px dashed var(--border-v2);
    padding-left: 0;
    padding-top: 22px;
  }
  .v2-op-lib-col--referenced .v2-op-agent-list,
  .v2-op-panorama-list {
    overflow: visible;
    flex: 0 1 auto;
  }
}
/* Panorama "Tous les agents disponibles" — vit dans la colonne droite. Header
   (titre + toggle filtres) reste fixe en haut, seule la liste scrolle. */
.v2-op-panorama {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.v2-op-panorama-header { margin-bottom: 12px; }
.v2-op-panorama-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.v2-op-panorama-toggle {
  display: flex;
  gap: 4px;
  padding: 2px;
  background: var(--bg-soft);
  border-radius: 8px;
}
.v2-op-panorama-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.v2-op-panorama-tab.is-active {
  background: var(--bg-card);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.v2-op-panorama-tab-count {
  font-size: 11px;
  color: var(--ink-faint);
}
.v2-op-panorama-tab.is-active .v2-op-panorama-tab-count {
  color: var(--ink-soft);
}
.v2-op-panorama-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -4px;  /* compense le padding pour scrollbar */
  padding: 0 4px;
}
.v2-op-panorama-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
}
/* "Déjà dans la biblio active" : on signale fortement la présence.
   - liseret gauche 3px de la couleur de la biblio active
   - fond teinté (8% accent biblio)
   - nom en couleur ink pleine */
.v2-op-panorama-row.is-in-active-lib {
  border-left: 3px solid var(--lib-accent, var(--accent-v2));
  background: color-mix(in srgb, var(--lib-accent) 8%, var(--bg-card));
}
/* "Pas dans la biblio active" : style atténué, à ajouter.
   - opacity légèrement réduite sur le nom
   - fond plus pâle (bg-card neutre, pas bg-soft)
   - pour donner immédiatement le sens "candidat à l'ajout" */
.v2-op-panorama-row.is-not-in-active-lib {
  background: var(--bg-card);
}
.v2-op-panorama-row.is-not-in-active-lib .v2-op-panorama-name {
  color: var(--ink-soft);
}
.v2-op-panorama-info {
  flex: 1;
  min-width: 0;
}
.v2-op-panorama-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2-op-panorama-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 1px;
}
.v2-op-panorama-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-v2) 14%, transparent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  cursor: help;
}
.v2-op-panorama-badge-zero {
  background: rgba(201, 123, 99, 0.14);
  color: #a64f3c;
}
.v2-op-panorama-add {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.v2-op-panorama-here {
  font-size: 11px;
  color: var(--ink-faint);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-op-panorama-meta-hint {
  font-size: 14px;
  color: var(--ink-faint);
  flex-shrink: 0;
  cursor: help;
}
/* Mode focus : arrivée via /resources/<id> (clic dans la sidebar "Mes bibliothèques").
   On masque le panneau gauche listant les autres biblios pour donner toute la
   place à la carte demandée. Retour à la vue catalogue via la nav "Bibliothèques". */
.v2-op-grid.v2-op-grid--focus {
  grid-template-columns: 1fr;
}
.v2-op-grid.v2-op-grid--focus .v2-op-side {
  display: none;
}
/* Bouton retour mobile : caché en desktop, affiché en mobile détail */
.v2-op-mobile-back {
  display: none;
}
@media (max-width: 720px) {
  .v2-op-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  /* État par défaut : panneau gauche pleine page, contenu droit caché */
  .v2-op-grid .v2-op-content {
    display: none;
  }
  /* Quand une sélection est faite : on bascule le détail en pleine page */
  .v2-op-grid.is-detail-visible .v2-op-side {
    display: none;
  }
  .v2-op-grid.is-detail-visible .v2-op-content {
    display: flex;
  }
  /* Le bouton retour apparaît en haut du contenu droit */
  .v2-op-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-v2);
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    margin-bottom: 12px;
  }
}
.v2-op-side {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.v2-op-side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 12px;
}
.v2-op-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-v2);
  flex-shrink: 0;
}
.v2-op-side-header h2 {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.v2-op-side-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 155, 114, 0.1);
  border: 1px solid rgba(15, 155, 114, 0.25);
  color: var(--accent-v2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.v2-op-side-btn:hover { background: rgba(15, 155, 114, 0.18); }
.v2-op-side-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-op-side-sep {
  height: 1px;
  background: var(--border-v2);
  margin: 10px 0;
}
/* Accordion sidebar opérateur (Lot 3) — 3 sections (biblios/groupes/eggsperts),
   une seule dépliée à la fois. Le header est cliquable pour déplier. */
.v2-op-side-accordion {
  border-bottom: 1px solid var(--border-v2);
}
.v2-op-side-accordion:last-child { border-bottom: none; }
.v2-op-side-header--toggle {
  cursor: pointer;
  border-bottom: none;
  user-select: none;
}
.v2-op-side-header--toggle:hover {
  background: rgba(232, 223, 211, 0.35);
}
.v2-op-side-count {
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 2px;
}
.v2-op-side-btn--chevron {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
.v2-op-side-btn--chevron:hover {
  background: rgba(232, 223, 211, 0.55);
  color: var(--ink);
}
.v2-op-side-accordion-body {
  padding: 4px 10px 12px;
}
.v2-op-side-accordion.is-open .v2-op-side-header--toggle {
  background: rgba(232, 223, 211, 0.25);
}

/* Boutons ghost dans la console opérateur V2 : la couleur globale --text-3
   (héritée du style.css dark) est illisible sur fond beige. Override ciblé. */
body.v2 .v2-op-content .btn-ghost {
  color: var(--ink-soft);
  border-color: var(--border-v2);
  background: transparent;
}
body.v2 .v2-op-content .btn-ghost:hover {
  color: var(--ink);
  background: var(--bg-soft, rgba(232, 223, 211, 0.4));
  border-color: var(--ink-soft);
}
.v2-op-side-section-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 8px 4px;
}
/* Bloc d'introduction au-dessus de la liste des bibliothèques EGG (aspirant) */
.v2-op-side-intro {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--border-v2);
}
/* Sections "Tous mes agents" : groupement par bibliothèque */
.v2-aspirant-section {
  margin-bottom: 24px;
}
.v2-aspirant-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg-soft);
  /* Fond pâle teinté de la couleur biblio si définie ; sinon retombe sur
     `background: var(--bg-soft)` ci-dessus (color-mix invalide sans --lib-accent). */
  background: color-mix(in srgb, var(--lib-accent) 11%, transparent);
  border: 1px solid var(--border-v2);
  border-left: 3px solid var(--lib-accent, var(--accent-v2));
  border-radius: 8px;
}
.v2-aspirant-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lib-accent, var(--accent-v2));
}
.v2-aspirant-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.v2-aspirant-section-count {
  font-size: 11px;
  color: var(--ink-faint);
}
.v2-aspirant-section-goto {
  background: transparent;
  border: 1px solid var(--border-v2);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}
.v2-aspirant-section-goto:hover {
  background: rgba(15, 155, 114, 0.08);
  color: var(--accent-v2);
  border-color: rgba(15, 155, 114, 0.25);
}
/* Bordure colorée biblio sur les cartes d'agent dans la vue aspirant + op console.
   Le fond pâle teinté double le signal d'appartenance avec le liseret. */
.v2-aspirant-section .v2-agent-card,
.v2-op-content-body .v2-agent-card[style*="--lib-accent"] {
  border-left: 3px solid var(--lib-accent, var(--accent-v2));
  background: color-mix(in srgb, var(--lib-accent) 6%, var(--bg-card));
}
.v2-op-side-empty {
  padding: 8px 6px;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}
.v2-op-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.12s ease;
}
.v2-op-side-item:hover { background: rgba(0, 0, 0, 0.03); }
.v2-op-side-item.is-active { background: rgba(15, 155, 114, 0.08); }
.v2-op-side-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lib-accent, var(--accent-v2));
  flex-shrink: 0;
}
.v2-op-side-item-dot-pool {
  background: transparent;
  border: 1.5px dashed var(--ink-soft);
}
.v2-op-side-egg-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.85;
  vertical-align: middle;
}
.v2-op-side-pending-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--accent-v2);
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.v2-op-side-item-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.v2-op-side-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v2-op-side-item-meta {
  font-size: 10.5px;
  color: var(--ink-faint);
}
/* Cadenas signalant une bibliothèque privée. Couleur sobre, taille discrète. */
.v2-op-side-item-lock {
  color: var(--ink-faint);
  flex-shrink: 0;
  opacity: 0.85;
}
/* Item d'une biblio privée : fond légèrement teinté (rayures discrètes) pour
   un signal visuel supplémentaire d'un seul coup d'œil. */
.v2-op-side-item-lib.is-private {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.02) 6px,
    rgba(0, 0, 0, 0.02) 7px
  );
}
.v2-op-side-item-lib.is-private.is-active {
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0,0,0,0.02) 6px, rgba(0,0,0,0.02) 7px),
    rgba(15, 155, 114, 0.08);
}
.v2-op-side-item-lib.is-private .v2-op-side-item-lock {
  color: var(--ink-soft);
  opacity: 1;
}
.v2-op-content {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.v2-op-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  /* Fond pâle teinté de la couleur de la biblio quand elle est définie ;
     sinon, fond hérité (neutre par défaut). color-mix invalide sans
     --lib-accent → la propriété est ignorée et le fond reste neutre. */
  background: color-mix(in srgb, var(--lib-accent) 11%, transparent);
  border-bottom: 1px solid var(--border-v2);
  border-left: 3px solid var(--lib-accent, transparent);
  flex-shrink: 0;
}
.v2-op-content-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.v2-op-content-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.v2-op-content-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.v2-op-content-body {
  padding: 18px 22px 22px;
  flex: 1;
  min-height: 0;
  /* Par défaut, le body scrolle globalement (cas vue aspirant Bibliothèques :
     une seule colonne d'agents). */
  overflow-y: auto;
}
/* Cas console opérateur : le body contient .v2-op-lib-cols avec 2 colonnes
   qui scrollent indépendamment. On désactive alors le scroll global et on
   passe en flex column pour que la grid fille s'étire en hauteur. */
.v2-op-content-body:has(.v2-op-lib-cols) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.v2-op-section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.v2-op-agent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-op-agent-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-soft);
  /* Quand la row vit dans une scope biblio colorée (.v2-op-lib-scope a la
     variable --lib-accent), on applique un fond pâle ; sinon retombe sur
     `background: var(--bg-soft)` ci-dessus. */
  background: color-mix(in srgb, var(--lib-accent) 6%, var(--bg-soft));
  border: 1px solid var(--border-v2);
  border-radius: 8px;
}
.v2-op-agent-info {
  flex: 1;
  min-width: 0;
}
.v2-op-agent-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.v2-op-agent-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.v2-op-agent-desc {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.5;
}
.v2-op-agent-attribute {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.v2-op-agent-select {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  color: var(--ink);
  max-width: 180px;
}

/* ========== Vue Bibliothèques (catalogue d'agents par bibliothèque) ========== */
.v2-libraries-header {
  margin-bottom: 28px;
}
.v2-libraries-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.v2-libraries-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.v2-library-card {
  background: var(--bg-card);
  /* Fond pâle teinté si --lib-accent défini ; sinon retombe sur var(--bg-card). */
  background: color-mix(in srgb, var(--lib-accent) 7%, var(--bg-card));
  border: 1px solid var(--border-v2);
  border-left: 3px solid var(--lib-accent, var(--accent-v2));
  border-radius: var(--egg-radius-md);
  padding: 14px 16px;
}
.v2-library-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.v2-library-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.v2-library-badge,
.v2-library-regime,
.v2-library-operator-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(15, 155, 114, 0.1);
  color: var(--accent-v2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v2-library-regime {
  background: rgba(120, 120, 120, 0.1);
  color: var(--ink-soft);
}
.v2-library-operator-badge {
  background: rgba(90, 74, 62, 0.08);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.v2-library-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0 0 6px;
}
.v2-library-meta {
  font-size: 11px;
  color: var(--ink-faint);
}

/* Header de bibliothèque en mode focus — layout grid à 3 zones (title / cta / desc).
   Desktop : title à gauche, cta à droite, description sur toute la largeur en dessous.
   Mobile  : title puis description puis cta empilés (cta plus tap-friendly). */
.v2-op-content-header--focus {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title cta"
    "desc  desc";
  align-items: center;
  gap: 10px 14px;
}
.v2-op-content-header-title { grid-area: title; min-width: 0; }
.v2-op-content-header-cta   { grid-area: cta;   justify-self: end; }
.v2-op-content-desc--full   { grid-area: desc;  margin: 0; }
.v2-op-content-header-title h2 { margin: 0 0 2px; }
.v2-op-content-header-sub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
@media (max-width: 540px) {
  .v2-op-content-header--focus {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "desc"
      "cta";
    gap: 10px;
  }
  .v2-op-content-header-cta { justify-self: stretch; }
  .v2-op-content-header-cta .v2-ask-egg-cta {
    /* En mode mobile, le bouton prend toute la largeur sous la description :
       cible tactile généreuse, contenu centré. */
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
  }
}

/* Header de bibliothèque en vue catalogue (non-focus) — titre à gauche avec
   ses badges et sa description, zone d'actions à droite (Par où commencer ? +
   Épingler + Fermer). Sur mobile, la zone d'actions repasse sous la
   description, en flex-wrap, pour ne pas tasser le titre ni amputer la liste
   d'agents en dessous. */
.v2-op-content-header--full {
  align-items: flex-start;
  gap: 14px;
}
.v2-op-content-header--full > .v2-op-content-header-title {
  flex: 1;
  min-width: 0;
}
.v2-op-content-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .v2-op-content-header--full {
    flex-direction: column;
    align-items: stretch;
  }
  .v2-op-content-header-actions {
    justify-content: flex-end;
  }
}

/* CTA "Demande à EGG" : bouton compact dans la zone droite du header d'une
   bibliothèque en mode focus. Fond accent doux, logo EGG, flèche. Au clic,
   ouvre EGG avec une question pré-formulée auto-envoyée. */
.v2-ask-egg-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Fond carte neutre — pas de teinte accent qui pourrait clasher avec la
     couleur choisie par l'opérateur pour sa bibliothèque. Le logo EGG suffit
     à signaler la nature du CTA. */
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: 8px;
  padding: 6px 12px 6px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease;
}
.v2-ask-egg-cta:hover {
  background: var(--bg-soft);
  border-color: color-mix(in srgb, var(--ink-soft) 30%, var(--border-v2));
}
.v2-ask-egg-cta-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-ask-egg-cta-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.v2-ask-egg-cta-label {
  font-weight: 500;
  white-space: nowrap;
}
.v2-ask-egg-cta-arrow {
  color: var(--ink-soft);
  font-size: 14px;
  flex-shrink: 0;
}
/* Mobile : si le bandeau de la biblio devient étroit, le bouton conserve son
   icône + flèche mais le label peut s'effacer si vraiment serré. */
@media (max-width: 540px) {
  .v2-ask-egg-cta {
    padding: 6px 10px 6px 6px;
  }
  .v2-ask-egg-cta-label {
    font-size: 12px;
  }
}

.v2-resources-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  transition: border-color 120ms ease, background 120ms ease;
}
/* Variante discrète : en mode focus d'une bibliothèque, la recherche est très
   peu marquée pour ne pas dominer l'œil. Elle reste là, mais s'efface jusqu'au
   focus où elle reprend une présence normale. */
.v2-resources-search--minimal {
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid var(--border-v2);
  border-radius: 0;
  padding: 6px 4px;
  margin-bottom: 12px;
}
.v2-resources-search--minimal:focus-within {
  background: var(--bg-card);
  border-color: var(--border-v2);
  border-radius: var(--egg-radius-md);
  padding: 10px 14px;
}
.v2-resources-search--minimal .v2-resources-search-glyph {
  opacity: 0.55;
}
.v2-resources-search-glyph {
  font-size: 16px;
  color: var(--ink-faint);
  line-height: 1;
}
.v2-resources-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  /* 16px : sous ce seuil, iOS Safari auto-zoome au focus. */
  font-size: 16px;
  color: var(--ink);
}
.v2-resources-search input::placeholder { color: var(--ink-faint); }

.v2-resources-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.v2-filter-chip {
  background: transparent;
  border: 1px solid var(--border-v2);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 150ms ease;
  font-weight: 500;
}
.v2-filter-chip:hover { background: var(--bg-soft); color: var(--ink); }
.v2-filter-chip.active {
  background: var(--accent-v2);
  border-color: var(--accent-v2);
  color: white;
}

.v2-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  padding-bottom: 40px;
}
.v2-resources-grid .v2-agent-card {
  /* Fond plus appuyé pour ressortir dans le catalogue (vs cartes de proposition EGG) */
  background: var(--bg-card);
}
.v2-resources-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ========== Modal (confirm / alert v2) ========== */
.v2-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(47, 42, 38, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  transition: opacity 200ms ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
}
.v2-modal-scrim.open { opacity: 1; }
.v2-modal-scrim.closing { opacity: 0; }

.v2-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-lg);
  box-shadow: var(--egg-shadow-card);
  min-width: 320px;
  max-width: 480px;
  width: 100%;
  padding: 28px 28px 22px;
  transform: translateY(8px) scale(0.98);
  transition: transform 220ms ease;
}
.v2-modal-scrim.open .v2-modal {
  transform: translateY(0) scale(1);
}
.v2-modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.v2-modal-message {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 22px;
  white-space: pre-line;
}
.v2-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.v2-modal-btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--egg-radius-md);
  cursor: pointer;
  transition: background var(--egg-transition-smooth, 220ms ease), border-color var(--egg-transition-smooth, 220ms ease);
  min-height: 38px;
  border: 1px solid transparent;
}
.v2-modal-btn.cancel {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong, var(--rule));
}
.v2-modal-btn.cancel:hover { background: var(--bg-soft); }
.v2-modal-btn.primary {
  background: var(--accent-v2);
  color: white;
  border-color: var(--accent-v2);
}
.v2-modal-btn.primary:hover { background: #493B31; border-color: #493B31; }
.v2-modal-btn.danger {
  background: var(--danger-v2);
  color: white;
  border-color: var(--danger-v2);
}
.v2-modal-btn.danger:hover { background: #A86650; border-color: #A86650; }

/* ========== Menu contextuel (⋯ sur items sidebar) ========== */
.v2-ctx-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  border-radius: var(--egg-radius-md);
  box-shadow: var(--egg-shadow-card);
  min-width: 180px;
  padding: 4px;
  z-index: 200;
  display: none;
}
.v2-ctx-menu.open { display: block; }
.v2-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ink);
  border-radius: var(--egg-radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 100ms ease;
}
.v2-ctx-item:hover { background: var(--bg-soft); }
.v2-ctx-item.danger { color: var(--danger-v2); }
.v2-ctx-item.danger:hover { background: rgba(201, 123, 99, 0.08); }
.v2-ctx-divider { height: 1px; background: var(--border-soft); margin: 4px 6px; }

/* Input de rename inline (remplace temporairement le title) */
.v2-item-rename-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--accent-v2);
  border-radius: 6px;
  padding: 2px 6px;
  outline: none;
}

/* ========== Bouton "aller au dernier message" ========== */
/* Place dans .v2-composer-wrap (en haut, hors flux), le `bottom: 100%`
   le positionne juste au-dessus du composer. Suit donc l'auto-grow de
   la textarea. Le margin-bottom donne l'air entre le bouton et le composer. */
.v2-scroll-bottom-btn {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 12px;
  transform: translateX(-50%);
  z-index: 11;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-v2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  box-shadow: var(--shadow-floating);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, background 150ms ease, color 150ms ease;
  padding: 0;
}
.v2-scroll-bottom-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.v2-scroll-bottom-btn:hover {
  background: white;
  color: var(--accent-sage);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(47, 42, 38, 0.12);
}
.v2-scroll-bottom-btn svg { width: 18px; height: 18px; }

/* ========== TYPING / LOADING ========== */
.v2-typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.v2-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: v2-typing 1.4s infinite ease-in-out;
}
.v2-typing span:nth-child(2) { animation-delay: 0.2s; }
.v2-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes v2-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ========== RESPONSIVE ========== */
/* Sur mobile : pattern "drawer sous le main".
   La sidebar est positionnée derrière le main. Quand on ouvre, le main glisse
   vers la droite avec coins arrondis à gauche, révélant la sidebar dessous.
   Il reste une bande de 50px à droite (cliquable pour refermer).
   Swipe horizontal supporté. */
@media (max-width: 880px) {
  .v2-app {
    grid-template-columns: 1fr;
    overflow: visible;
    /* Le main est dans la grille, la sidebar est positioned-fixed dessous */
  }

  .v2-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - 28px);
    max-width: 420px;
    height: var(--app-height, 100dvh);
    z-index: 1;
    /* Pas de transform ici : la sidebar reste en place, c'est le main qui bouge */
  }

  .v2-main {
    position: relative;
    z-index: 2;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 280ms ease,
                box-shadow 280ms ease;
    will-change: transform;
  }

  body.v2.v2-sidebar-open .v2-main {
    transform: translateX(min(calc(100vw - 28px), 420px));
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: -10px 0 30px rgba(47, 42, 38, 0.16);
    overflow: hidden; /* assure le clipping aux coins arrondis */
  }

  /* Overlay posé sur le main quand la sidebar est ouverte :
     intercepte les clics ET applique un flou léger sur le contenu derrière. */
  .v2-main-tap-shield {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: none;
    cursor: pointer;
    background: rgba(245, 241, 235, 0.18);
    -webkit-backdrop-filter: blur(2px) saturate(0.92);
    backdrop-filter: blur(2px) saturate(0.92);
    transition: opacity 220ms ease;
  }
  body.v2.v2-sidebar-open .v2-main-tap-shield { display: block; }

  .v2-page-header { padding: 12px 18px 12px 60px; }

  /* Burger mobile : élément autonome attaché à <body>, donc hors du main
     (qui a will-change:transform → containing block pour position:fixed).
     Reste net et au-dessus du flou quand le drawer est ouvert. */
  body.v2 .v2-mobile-burger {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: var(--bg-card);
    box-shadow: 0 2px 10px rgba(47, 42, 38, 0.10);
    border-color: var(--border-soft);
  }
  body.v2 .v2-mobile-burger:hover { background: var(--bg-card); }

  /* Mobile : slogan aligné à la droite du burger (gain de hauteur).
     Le slogan est dans la sidebar mais visuellement centré sur la ligne du burger. */
  .v2-sidebar-top {
    padding-top: 0;
    gap: 14px;
  }
  .v2-brand-slogan {
    min-height: 62px;
    padding: 0 14px 0 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
  }

  /* Le scrim historique n'est plus utilisé sur mobile (le main lui-même fait scrim) */
  .v2-scrim { display: none !important; }
}

/* Sur desktop, le burger autonome est invisible (sidebar toujours présente). */
.v2-mobile-burger { display: none; }

.v2-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26,24,20,0.3);
  z-index: 99;
  display: none;
}
.v2-scrim.visible { display: block; }

/* ─────────────────────────────────────────────────────────
   Onboarding (wizard d'arrivée — première rencontre EGG)
   Pleine page sobre. Manifeste serif, questions sans bruit.
   ───────────────────────────────────────────────────────── */
body.v2 .v2-ob-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: var(--bg);
  overflow-y: auto;
}

body.v2 .v2-ob-step {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: v2ObFadeIn 360ms ease-out both;
}
body.v2 .v2-ob-step[hidden] { display: none; }

@keyframes v2ObFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Manifeste */
body.v2 .v2-ob-manifesto-lines {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
  font-weight: 400;
  letter-spacing: -0.005em;
}
body.v2 .v2-ob-manifesto-lines p {
  margin: 0 0 18px;
}
body.v2 .v2-ob-manifesto-lines p:last-child { margin-bottom: 0; }

/* Questions */
body.v2 .v2-ob-q {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

body.v2 .v2-ob-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.v2 .v2-ob-pill {
  font: inherit;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border-v2);
  cursor: pointer;
  transition: background var(--egg-transition-smooth),
              border-color var(--egg-transition-smooth),
              color var(--egg-transition-smooth);
}
body.v2 .v2-ob-pill:hover {
  border-color: var(--accent-soft);
}
body.v2 .v2-ob-pill.selected {
  background: var(--accent-v2);
  color: #fff;
  border-color: var(--accent-v2);
}

body.v2 .v2-ob-free {
  width: 100%;
  font: inherit;
  font-size: 16px; /* iOS auto-zoom guard */
  padding: 12px 14px;
  border-radius: var(--egg-radius-sm);
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border-v2);
  resize: vertical;
  min-height: 56px;
  line-height: 1.45;
  font-family: var(--font-body);
}
body.v2 .v2-ob-free:focus {
  outline: none;
  border-color: var(--accent-soft);
}
body.v2 .v2-ob-free::placeholder { color: var(--ink-faint); }

/* Boutons d'action */
body.v2 .v2-ob-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}
body.v2 .v2-ob-primary {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--accent-v2);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--egg-transition-smooth);
  min-width: 140px;
}
body.v2 .v2-ob-primary:hover { background: #4a3d33; }
body.v2 .v2-ob-primary:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

body.v2 .v2-ob-skip {
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
}
body.v2 .v2-ob-skip:hover { color: var(--ink-soft); }

/* Loading */
body.v2 .v2-ob-loading {
  align-items: center;
  text-align: center;
}
body.v2 .v2-ob-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-v2);
  border-top-color: var(--accent-v2);
  animation: v2ObSpin 0.9s linear infinite;
}
@keyframes v2ObSpin {
  to { transform: rotate(360deg); }
}
body.v2 .v2-ob-loading-text {
  margin: 0;
  color: var(--ink-soft);
  font-style: italic;
}

/* Mobile */
@media (max-width: 640px) {
  body.v2 .v2-ob-manifesto-lines { font-size: 19px; }
  body.v2 .v2-ob-q { font-size: 20px; }
  body.v2 .v2-ob-step { gap: 24px; }
  body.v2 .v2-ob-stage { padding: 24px 18px; }
  body.v2 .v2-ob-primary { width: 100%; }
  body.v2 .v2-ob-actions { flex-direction: column; align-items: stretch; }
}

/* ─────────────────────────────────────────────────────────
   Bandeau de vérification email — overrides v2 (cocon naturel)
   La version legacy utilise un orange foncé sur fond sombre
   incompatible avec le fond clair v2.
   ───────────────────────────────────────────────────────── */
body.v2 .verify-banner {
  background: #FBF3E2;
  border-bottom: 1px solid #E8D9B5;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  padding: 10px 18px;
  gap: 14px;
}
body.v2 .verify-banner strong {
  color: var(--ink);
  font-weight: 600;
}
body.v2 .verify-banner button {
  background: var(--accent-v2);
  border: 1px solid var(--accent-v2);
  color: #FFF;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--egg-transition-smooth);
}
body.v2 .verify-banner button:hover { background: #4a3d33; }
body.v2 .verify-banner button.dismiss {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  padding: 2px 8px;
  font-size: 16px;
  font-weight: 400;
}
body.v2 .verify-banner button.dismiss:hover {
  background: transparent;
  color: var(--ink-soft);
}

/* Variante "invitation compte commun" : ton sage plutôt que warm beige */
body.v2 .v2-invitation-banner {
  background: rgba(163, 177, 138, 0.14);
  border-bottom-color: rgba(163, 177, 138, 0.35);
}
body.v2 .v2-invitation-banner button:not(.dismiss) {
  background: var(--accent-sage);
  border-color: var(--accent-sage);
}
body.v2 .v2-invitation-banner button:not(.dismiss):hover {
  background: #8e9c75;
}

/* ─────────────────────────────────────────────────────────
   Welcome modal v2 — affiché en fin d'onboarding (5€ + email)
   Cocon naturel, calé sur la même grammaire que le wizard.
   ───────────────────────────────────────────────────────── */
.v2-welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(47, 42, 38, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: v2WelcomeFade 220ms ease-out;
}
@keyframes v2WelcomeFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.v2-welcome-modal {
  background: var(--bg-card);
  border-radius: var(--egg-radius-lg);
  max-width: 420px;
  width: 100%;
  padding: 36px 32px 30px;
  box-shadow: var(--egg-shadow-card);
  text-align: center;
  font-family: var(--font-body);
  color: var(--ink);
  animation: v2WelcomeRise 320ms ease-out;
}
@keyframes v2WelcomeRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v2-welcome-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.v2-welcome-credit {
  background: rgba(163, 177, 138, 0.10); /* sage très léger */
  border: 1px solid rgba(163, 177, 138, 0.32);
  border-radius: var(--egg-radius-md);
  padding: 16px 18px;
  margin: 0 0 20px;
}
.v2-welcome-credit-amount {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--accent-v2);
  line-height: 1.2;
}
.v2-welcome-credit-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.v2-welcome-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border-radius: var(--egg-radius-sm);
  padding: 10px 14px;
  margin: 0 0 12px;
  text-align: left;
}

.v2-welcome-hint {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 18px;
  font-style: italic;
}

.v2-welcome-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--accent-v2);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: background var(--egg-transition-smooth);
}
.v2-welcome-btn:hover { background: #4a3d33; }
.v2-welcome-btn:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .v2-welcome-modal { padding: 28px 22px 24px; }
  .v2-welcome-title { font-size: 21px; }
  .v2-welcome-credit-amount { font-size: 23px; }
}