/* ============================================================
   Belyo | Outil (prototype interactif)
   ============================================================ */

.app-shell { padding: 32px 0 80px; }

.view { display: none; }
.view.active { display: block; }

/* --- Auth --- */
.auth-split {
  display: grid;
  grid-template-columns: 460px 1fr;
  align-items: center;
  gap: 40px;
  min-height: 78vh;
}
.auth-card {
  max-width: 420px;
  width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
}
.auth-card .badge { white-space: normal; text-align: left; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: 8px; }
.auth-card p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card input[type="email"] {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.auth-status { margin-top: 16px; font-size: 0.85rem; color: var(--accent); min-height: 1.2em; }
.auth-status.error { color: var(--urgent); }

/* --- Auth visual (collage animé) --- */
.auth-visual {
  position: relative;
  height: 560px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #FBEEE7 0%, var(--accent-soft, #fbeae0) 55%, #FDE0CE 100%);
  overflow: hidden;
}
.auth-visual-card {
  position: absolute;
  width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -24px rgba(27, 36, 48, 0.35);
  padding: 16px 18px;
  opacity: 0;
  transform: translateY(24px) rotate(var(--rot, 0deg));
  animation: avIn 0.7s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay: var(--delay, 0s);
}
.av-card-1 { --rot: -6deg; top: 30px; left: 10px; animation-delay: 0.05s; z-index: 4; }
.av-card-2 { --rot: 4deg; top: 210px; left: 260px; width: 200px; animation-delay: 0.2s; z-index: 3; }
.av-card-3 { --rot: -3deg; top: 380px; left: 40px; width: 240px; animation-delay: 0.35s; z-index: 2; }
.av-card-4 { --rot: 7deg; top: 60px; left: 340px; width: 190px; animation-delay: 0.5s; z-index: 1; }

@keyframes avIn {
  to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-visual-card { animation: none; opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

.av-card-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.av-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.av-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.av-row:last-child { border-bottom: none; }
.av-sub { color: var(--ink-soft); font-size: 0.7rem; }
.av-pct { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.av-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.av-checklist li { font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.av-checklist li::before { content: "✓"; color: var(--done); font-weight: 700; }
.av-card-note { font-size: 0.78rem; color: var(--ink-soft); margin: 8px 0 0; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-card { margin: 40px auto 0; }
  .auth-visual { display: none; }
}

.account-badge { display: flex; align-items: center; gap: 10px; }
.account-badge .email { font-size: 0.85rem; color: var(--ink-soft); }

/* --- Dashboard --- */
.dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.dashboard-head h1 { font-size: 1.7rem; margin-bottom: 6px; }
.dashboard-head p { color: var(--ink-soft); font-size: 0.95rem; }

.counters-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.counter-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.counter-card .n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.counter-card .l { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.counter-card.c-urgent .n { color: var(--urgent); }
.counter-card.c-warn .n { color: var(--warn); }
.counter-card.c-done .n { color: var(--done); }
@media (max-width: 900px) { .counters-row { grid-template-columns: repeat(2, 1fr); } }

.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.filter-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.company-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.company-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.company-row:last-child { border-bottom: none; }
.company-row:hover { background: var(--bg); }
.company-name { font-weight: 600; }
.company-form { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.company-row .col-label { display:none; }

@media (max-width: 760px) {
  .company-row { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .company-row .col-label { display:inline; color: var(--ink-soft); font-size: 0.72rem; margin-right: 6px; }
}

/* --- Company detail --- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.back-link:hover { color: var(--ink); }

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.company-header h1 { font-size: 1.5rem; margin-bottom: 4px; }
.company-header .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Stepper */
.stepper {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.step-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.step-tab:hover { border-color: var(--accent); transform: translateY(-1px); }
.step-tab .num {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}
.step-tab .txt strong { display: block; font-size: 0.86rem; }
.step-tab .txt span { font-size: 0.72rem; color: var(--ink-soft); }
.step-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 12px 24px -14px rgba(232, 85, 30, 0.55);
}
.step-tab.active .txt strong, .step-tab.active .txt span { color: #fff; }
.step-tab.active .num { background: #fff; color: var(--accent); }
.step-tab.complete .num { background: var(--done); color: #fff; }
@media (max-width: 900px) {
  .stepper { flex-direction: column; }
}

.step-panel { display: none; }
.step-panel.active { display: block; }

/* Step 1: structure */
.structure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) { .structure-grid { grid-template-columns: 1fr; } }

.imported-badge { margin-bottom: 16px; }

/* Une grille à colonnes minimales imposait au formulaire une largeur de 469px
   alors que la colonne n'en offre que 408 à 468 selon la fenêtre : le bouton
   sortait de la carte à toutes les largeurs de bureau, et le champ Nom restait
   coincé à son minimum de 90px, trop étroit pour une raison sociale.
   En flex, les champs s'enroulent au lieu de déborder et le nom prend la
   place disponible. */
.holder-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
.holder-add-form .field { min-width: 0; }
/* Le nom est la valeur la plus longue du formulaire (une raison sociale
   suisse dépasse volontiers trente caractères) et c'est la seule qui varie
   vraiment. Elle prend donc la ligne entière, les trois champs courts
   partagent la suivante. */
.holder-add-form .f-nom { flex: 1 1 100%; }
.holder-add-form .f-type { flex: 3 1 152px; }
.holder-add-form .f-pct { flex: 0 1 80px; }
.holder-add-form .f-action { flex: 1 1 112px; }
@media (max-width: 560px) { .holder-add-form { grid-template-columns: 1fr; } }
.holder-add-form select, .holder-inline-add select { padding-right: 6px; font-size: 0.85rem; }

.field label {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-bottom: 5px;
  font-weight: 500;
}
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 70px; }

/* ---------------- Arbre de détention (profondeur libre) ---------------- */

.add-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 12px 0 0;
  line-height: 1.5;
}
.depth-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.depth-note .mono { color: var(--accent); font-weight: 600; }

.holder-tree { display: flex; flex-direction: column; gap: 8px; }

.holder-node { position: relative; }

.holder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.holder-row:focus { outline: none; }
.holder-row.is-focus {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.holder-node.is-ade > .holder-row { border-left: 3px solid var(--done); }

.node-toggle, .node-toggle-spacer {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-toggle {
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0;
  border-radius: 4px;
}
.node-toggle:hover { color: var(--accent); background: var(--accent-soft); }

.node-icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
}
.node-icon.is-company { background: var(--accent-soft); color: var(--accent); }
.node-icon.is-person { background: var(--line-soft); color: var(--ink-soft); }
.holder-node.is-ade > .holder-row .node-icon.is-person { background: var(--done-soft); color: var(--done); }

.node-id { flex: 1; min-width: 0; }
.node-name { display: block; font-weight: 600; font-size: 0.89rem; overflow-wrap: anywhere; }
.node-kind { display: block; font-size: 0.74rem; color: var(--ink-soft); }
.holder-node.is-ade > .holder-row .node-kind { color: var(--done); }

.node-pcts { flex: none; text-align: right; }
.node-pct { display: block; font-size: 0.86rem; font-weight: 600; }
.node-eff { display: block; font-size: 0.72rem; color: var(--ink-soft); }
.node-eff.is-ade { color: var(--done); font-weight: 600; }

.node-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.node-add {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.node-add:hover { border-color: var(--accent); color: var(--accent); }
.holder-remove { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 1rem; padding: 4px; }
.holder-remove:hover { color: var(--urgent); }

/* Le trait vertical rend la profondeur lisible sans compter les décalages. */
.holder-children {
  margin: 8px 0 0 15px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.holder-collapsed {
  margin: 6px 0 0 30px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Le formulaire s'enroule au lieu de déborder : à chaque niveau l'indentation
   lui retire de la largeur, et une grille à colonnes minimales finissait par
   pousser ses boutons hors de la colonne, sous le panneau du diagramme. */
.holder-inline-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 30px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.holder-inline-add input, .holder-inline-add select { font-size: 0.85rem; }
/* Même principe qu'au formulaire racine : la raison sociale prend la ligne. */
.holder-inline-add input[name="name"] { flex: 1 1 100%; min-width: 0; }
.holder-inline-add select[name="type"] { flex: 1 1 140px; min-width: 0; }
.holder-inline-add input[name="pct"] { flex: 0 1 78px; min-width: 58px; }
.holder-inline-add button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .holder-inline-add { margin-left: 10px; }
  .holder-inline-add input[name="name"], .holder-inline-add select[name="type"] { flex-basis: 100%; }
  .holder-row { flex-wrap: wrap; }
  .node-pcts { text-align: right; }
  /* Sur un écran étroit, les boutons d'action réduisaient le bloc d'identité
     à 98px : le nom se coupait et « Personne physique · ayant droit
     économique » ne tenait plus. Ils passent donc sur leur propre ligne,
     mais seulement là où il y a « + Détenteur », c'est-à-dire sur les
     sociétés : une croix seule ne justifie pas d'occuper une ligne. */
  .holder-row.has-add .node-actions { flex-basis: 100%; justify-content: flex-end; margin-top: 2px; }
  /* Chaque niveau d'imbrication retire de la largeur : au troisième, le bloc
     d'identité tombait à 45px dans le cadre intégré à la page d'accueil.
     Une largeur plancher le fait passer à la ligne plutôt que se réduire. */
  .node-id { flex: 1 1 150px; }
  .node-pcts { margin-left: auto; }
  .holder-children { margin-left: 6px; padding-left: 10px; }
}

/* ---------------- Diagramme ---------------- */

/* Un élément de grille a `min-width: auto` : sans cette remise à zéro, la
   largeur minimale du SVG force la colonne à s'élargir et c'est la page
   entière qui déborde, au lieu du seul diagramme qui défile. */
.structure-grid > * { min-width: 0; }
.diagram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.diagram-head h3 { margin-bottom: 0; }
.diagram-expand {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.diagram-expand:hover { border-color: var(--accent); color: var(--accent); }

/* Le dégradé du bord droit signale qu'il reste de la chaîne à voir : sans lui,
   une boîte coupée passe pour un défaut d'affichage. */
.diagram-frame { position: relative; min-width: 0; }
.diagram-frame::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--panel));
}
.diagram-frame.deborde::after { opacity: 1; }

.diagram-scroll { overflow-x: auto; min-width: 0; }
.diagram-scroll svg { max-width: none; margin: 0 auto; }

.lien-bouton {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Une règle d'affichage portée par une classe l'emporte sur l'attribut
   `hidden` du navigateur : sans cette remise à zéro, la fenêtre plein écran
   reste ouverte en permanence et intercepte tous les clics de la page. */
[hidden] { display: none !important; }

/* Vue plein écran : pour les structures trop larges pour le panneau. */
.diagram-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(27, 36, 48, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.diagram-modal-box {
  background: var(--panel);
  border-radius: 18px;
  width: 100%;
  max-width: 1280px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.diagram-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.diagram-modal-head strong { font-family: var(--font-display); font-size: 0.98rem; }
.diagram-modal-close {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.diagram-modal-close:hover { background: var(--bg); color: var(--ink); }
.diagram-modal-body { padding: 24px; overflow: auto; }
.diagram-modal-body svg { max-width: none; margin: 0 auto; }
body.modal-ouverte { overflow: hidden; }
@media (max-width: 700px) {
  .diagram-modal { padding: 10px; }
  .diagram-modal-body { padding: 12px; }
}
.diag-node rect { transition: stroke 0.15s ease, stroke-width 0.15s ease; }
.diag-node.is-focus rect { stroke: var(--accent); stroke-width: 2.4; }

.empty-hint {
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.structure-grid .card {
  border-radius: 18px;
  box-shadow: 0 16px 32px -24px rgba(27, 36, 48, 0.2);
}

.diagram-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 16px 32px -22px rgba(27, 36, 48, 0.22);
  padding: 22px;
  position: sticky;
  top: 88px;
}
.diagram-panel h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 14px; }
.diagram-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 0.76rem; color: var(--ink-soft); flex-wrap: wrap; }
.diagram-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display:inline-block; }

/* Contrôle exercé autrement : bloc dédié, visible en évidence */
.otherwise-block {
  border: 1.5px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 18px;
  padding: 22px;
  margin-top: 22px;
}
.otherwise-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.otherwise-head h3 { font-size: 1rem; color: #6b551d; margin: 0; }
.otherwise-block p.hint { font-size: 0.84rem; color: #6b551d; margin-bottom: 12px; }
.otherwise-block textarea, .otherwise-block .otherwise-categories { display: none; }
.otherwise-block.active textarea, .otherwise-block.active .otherwise-categories { display: block; }
.otherwise-categories { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.otherwise-cat { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #6b551d; cursor: pointer; }
.otherwise-cat input { accent-color: var(--warn); }

.deadline-legal-note { font-size: 0.76rem; color: var(--ink-soft); margin: 8px 0 0; font-family: var(--font-mono); }

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px; height: 26px;
  flex: none;
}
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track {
  position: absolute; inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.toggle .thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.toggle input:checked ~ .track { background: var(--warn); }
.toggle input:checked ~ .thumb { transform: translateX(18px); }

/* Step 2: ADE */
.ade-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.ade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .ade-grid { grid-template-columns: 1fr; } }

.ade-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--panel);
}
.ade-card.ade-otherwise { border-color: var(--warn); background: var(--warn-soft); }
.ade-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ade-card-head .tag { font-size: 0.72rem; color: var(--ink-soft); }
.ade-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ade-fields .field.full { grid-column: 1 / -1; }

.fallback-note {
  display: flex;
  gap: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 20px;
}

/* Step 3: justificatifs */
.justif-group { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; background: var(--panel); }
.justif-group h4 { font-size: 0.95rem; margin-bottom: 12px; }
.justif-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line-soft); gap: 12px; }
.justif-row:first-of-type { border-top: none; }
.justif-row .lbl { font-size: 0.88rem; }
.justif-row .lbl .hint { display: block; font-size: 0.74rem; color: var(--ink-soft); }
.upload-btn { background: var(--panel); }
.upload-btn.done { background: var(--done-soft); color: var(--done); border-color: transparent; }

/* Step 4: dossier */
.dossier-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; }
@media (max-width: 980px) { .dossier-grid { grid-template-columns: 1fr; } }

.dossier-summary {
  background: var(--ink);
  color: #dfe4e9;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.85;
  white-space: pre-wrap;
}
.dossier-summary b { color: #ff9a5c; font-weight: 700; }

.mandataire-block { display: flex; gap: 12px; }
.mandataire-block .ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.toggle-row:first-child { border-top: none; }
.toggle-row .lbl { font-size: 0.88rem; font-weight: 500; }
.toggle-row .lbl .hint { display: block; font-size: 0.76rem; color: var(--ink-soft); font-weight: 400; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---------------- Paramètres de la société ---------------- */

.company-settings {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.company-settings > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}
.company-settings > summary::-webkit-details-marker { display: none; }
.company-settings > summary::before { content: "▸ "; color: var(--accent); }
.company-settings[open] > summary::before { content: "▾ "; }
.company-settings > summary:hover { color: var(--ink); }
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 110px;
  gap: 14px;
  padding: 4px 16px 18px;
  border-top: 1px solid var(--line-soft);
}
.cs-grid .field.full, .cs-check.full { grid-column: 1 / -1; }
.cs-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  cursor: pointer;
  line-height: 1.45;
}
.cs-check input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.cs-hint { display: block; font-size: 0.76rem; color: var(--ink-soft); }
@media (max-width: 700px) { .cs-grid { grid-template-columns: 1fr; } }

/* Indicateur de sauvegarde : discret, mais présent : l'utilisateur doit
   savoir que ce qu'il tape est conservé. */
.save-state {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.save-state.saving, .save-state.saved { opacity: 1; }
.save-state.saved { color: var(--done); }

/* ---------------- Contrôle de cohérence des parts ---------------- */

.totals-check {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.83rem;
}
.totals-check li {
  padding: 9px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}
.totals-check li.bad { background: var(--urgent-soft); color: var(--urgent); }
.totals-check li.warn { background: var(--warn-soft); color: var(--warn); }
.totals-check.ok {
  font-size: 0.8rem;
  color: var(--done);
  margin: 12px 0 0;
}

/* ---------------- Complétude des fiches d'ayants droit ---------------- */

.ade-toolbar-status .is-bad { color: var(--urgent); }
.ade-toolbar-status .is-ok { color: var(--done); }
.ade-card.ade-incomplete { border-left: 3px solid var(--warn); }
.ade-card.ade-complete { border-left: 3px solid var(--done); }
.ade-missing, .ade-ok {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
}
.ade-missing { color: var(--urgent); }
.ade-ok { color: var(--done); }

/* ---------------- Bilan du dossier (étape 4) ---------------- */

.dossier-check {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 22px;
  font-size: 0.88rem;
}
.dossier-check strong { display: block; font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 8px; }
.dossier-check p { margin: 0; font-size: 0.85rem; }
.dossier-check ul { margin: 0 0 14px; padding-left: 18px; }
.dossier-check li { margin-bottom: 4px; }
.dossier-check li span { font-weight: 600; }
.dossier-check.bad { background: var(--urgent-soft); color: var(--urgent); }
.dossier-check.ok { background: var(--done-soft); color: var(--done); }
.diagram-hint {
  display: none;
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.diagram-hint.visible { display: block; }
.ade-repris {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--warn);
  line-height: 1.5;
}
.node-cumul { display: block; font-size: 0.72rem; color: var(--done); font-weight: 600; }

/* Message de validation : dans le formulaire, en français, à la place de la
   bulle native du navigateur qui s'affiche dans la langue de celui-ci. */
.form-erreur {
  margin: 0;
  font-size: 0.8rem;
  color: var(--urgent);
  line-height: 1.5;
}
.holder-add-form .form-erreur { flex-basis: 100%; margin-top: -4px; }
.holder-inline-add .form-erreur { flex-basis: 100%; }
[aria-invalid="true"] { border-color: var(--urgent) !important; }

/* ---------------- Bannière d'abonnement ----------------
   Deux situations, deux tons : « vous n'avez pas d'accès » est un mur,
   « vous avez atteint votre quota » est une invitation. Les confondre
   ferait passer un client payant pour un resquilleur. */
.abo-banniere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 20px;
}
.abo-banniere .abo-texte { flex: 1 1 320px; min-width: 0; }
.abo-banniere strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.abo-banniere p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.abo-banniere .btn { flex: 0 0 auto; }
.abo-bloque { border-left: 3px solid var(--urgent); background: var(--urgent-soft); }
.abo-bloque strong { color: var(--urgent); }
.abo-plein  { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.abo-plein  strong { color: var(--warn); }
@media (max-width: 560px) {
  .abo-banniere { flex-direction: column; align-items: stretch; }
  .abo-banniere .btn { width: 100%; }
}

/* ---------------- Mode gratuit ----------------
   Deux messages très différents, et ils ne doivent pas se ressembler :
   « voici la limite de ce que vous utilisez » est une information neutre,
   « votre dossier est plus compliqué que prévu » est le moment où
   l'abonnement se justifie. */
.solo-banniere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 20px;
}
.solo-banniere .solo-texte { flex: 1 1 340px; min-width: 0; }
.solo-banniere strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.solo-banniere p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.solo-banniere .btn { flex: 0 0 auto; }
.solo-libre    { border-left: 3px solid var(--line); }
.solo-complexe { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.solo-complexe strong { color: var(--accent-hover); }
@media (max-width: 560px) {
  .solo-banniere { flex-direction: column; align-items: stretch; }
  .solo-banniere .btn { width: 100%; }
}
.solo-raisons {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.solo-raisons li { padding-left: 18px; position: relative; }
.solo-raisons li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Le lien vers le portail Stripe, discret à côté de l'adresse du client :
   on le cherche quand on en a besoin, il ne s'impose pas le reste du temps. */
.lien-portail {
  margin-left: 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.lien-portail:hover { color: var(--accent); }
@media (max-width: 560px) {
  .account-badge { flex-wrap: wrap; }
  .lien-portail { margin-left: 0; }
}

/* ---------------- Outils du portefeuille ----------------
   Recherche et tri n'apparaissent qu'au-delà de six sociétés : sur un
   portefeuille de deux lignes, ce sont deux commandes qui encombrent
   l'écran sans jamais servir. */
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dashboard-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.champ-recherche {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 13px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.champ-recherche:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.champ-tri {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.champ-tri select {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* ---------------- Fenêtre d'ajout en lot ---------------- */
.modale {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(27, 36, 48, 0.45);
}
.modale-boite {
  width: 100%;
  max-width: 520px;
  padding: 26px;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-forte);
}
.modale-boite h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.modale-note {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.modale-boite textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  resize: vertical;
}
.modale-boite textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.modale-bilan {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.modale-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 560px) {
  .dashboard-actions .btn { flex: 1 1 auto; }
  .modale-boite { padding: 20px; }
}

/* La note sous un champ dit à quoi il sert, pas comment le remplir. Ici
   elle porte la distinction de la loi entre l'adresse conservée par la
   société et la commune annoncée au registre : sans elle, les deux champs
   se ressemblent au point de paraître redondants. */
.field-note {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}