/* Analyse officine — nouvelle interface (Phase 0)
   Écrit à la main (pas de Tailwind/Node, cf. pyproject.toml) : un seul fichier,
   variables CSS pour le système de couleurs, cohérent avec la charte déjà
   utilisée ailleurs dans le projet (croix pharmacie verte sur la carte,
   landing page). Objectif explicite du retour Olivier du 2026-07-10 : compact,
   sobre, sans emoji, compte épinglé en bas de la barre latérale.

   Direction visuelle "Confrère" (2026-07-11, choisie par Olivier parmi deux
   propositions -- artefact Claude Code) : le vert pharmacie reste l'accent
   inchangé, mais les titres passent à un empattement (chaleur, confiance --
   volontairement pas de webfont chargée, pile système qui dégrade jusqu'à
   Georgia) et les cartes "Vous reprenez/Vous cédez" gagnent un fond teinté
   pour se distinguer des cartes neutres (étapes, documents). */

:root {
  --ink: #16201c;
  --ink-2: #1e2a24;
  --paper: #f4f2ea;
  --paper-dim: color-mix(in srgb, var(--ink) 5%, var(--paper));
  --paper-raised: #ffffff;
  --text: #1c211e;
  --text-soft: #5b6560;
  --green: #1c6b47;
  --green-soft: #2f8a5f;
  --green-deep: #123f29;
  --green-tint: #e6efe6;
  --line: #e2ddc9;
  --danger: #b23b3b;
  --danger-bg: #fbeceb;
  --success: #1f7a4d;
  --success-bg: #eaf5ee;
  --warning: #a5680f;
  --warning-bg: #fbf0df;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--text); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---- Marque (partagée sidebar + pages auth) ---- */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-centered { justify-content: center; margin-bottom: 1.6rem; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px; background: var(--green-soft);
  position: relative; flex: none;
}
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--ink); left: 50%; top: 50%; }
.brand-mark::before { width: 3px; height: 13px; transform: translate(-50%, -50%); }
.brand-mark::after { width: 13px; height: 3px; transform: translate(-50%, -50%); }
.brand-text { display: flex; flex-direction: column; gap: 0.1rem; }
.brand-name { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }

/* ---- Coquille applicative (sidebar + contenu) ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: none; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; padding: 1.2rem 0.9rem;
  /* Ancrée à la fenêtre (pas à la hauteur de .content) : sur une page longue
     (ex. note de décision avec ses tableaux), le compte reste visible sans
     scroller jusqu'en bas -- retour Olivier 2026-07-10. */
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { padding: 0.4rem 0.5rem 1.4rem; color: var(--paper); }
.sidebar .brand .brand-name { color: var(--paper); }

.nav-items { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.nav-item {
  display: block; padding: 0.55rem 0.75rem; border-radius: 8px; color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.nav-item:hover { background: color-mix(in srgb, var(--paper) 8%, transparent); color: var(--paper); }
.nav-item.active { background: var(--green); color: var(--paper); }
.nav-section-label {
  margin: 0.9rem 0.75rem 0.15rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--paper) 45%, transparent);
}

.account {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  display: flex; align-items: center; gap: 0.65rem;
}
.account-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-soft); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex: none;
}
.account-info { min-width: 0; flex: 1; }
.account-email {
  font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-logout-form { margin: 0; }
.account-logout {
  background: none; border: none; padding: 0; color: color-mix(in srgb, var(--paper) 60%, transparent);
  font-size: 0.76rem; cursor: pointer; text-decoration: underline; font-family: var(--sans);
}
.account-logout:hover { color: var(--paper); }

.content { flex: 1; padding: 2.6rem 3rem; min-width: 0; }
.page-header-split { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; }
.vue-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem;
  background: var(--paper-raised); flex-shrink: 0;
}
.vue-toggle-option {
  padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  color: var(--text-soft); text-decoration: none;
}
.vue-toggle-option.active { background: var(--green); color: #fff; }
.page-header h1 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; margin: 0 0 0.6rem; }
.page-lede { color: var(--text-soft); max-width: 60ch; line-height: 1.55; }
.breadcrumb { font-size: 0.8rem; color: var(--text-soft); margin: 0 0 0.4rem; }
.breadcrumb a { color: var(--text-soft); }
.section-title { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin: 2rem 0 0.9rem; }
.empty-state { color: var(--text-soft); font-size: 0.9rem; }

/* ---- Liste de dossiers (tableau triable au coup d'œil) ---- */
.dossiers-table tbody tr { cursor: pointer; }
.dossiers-table tbody tr:hover { background: color-mix(in srgb, var(--green) 6%, transparent); }
/* Dossier déjà déverrouillé (accès premium acquis, stocké en base -- cf.
   officine.credits) : fond légèrement teinté demandé par Olivier
   (2026-07-11), assez subtil pour ne pas concurrencer les badges de statut ;
   survol un peu plus appuyé pour rester perceptible malgré le fond. */
.dossiers-table tbody tr.ligne-deverrouillee { background: var(--green-tint); }
.dossiers-table tbody tr.ligne-deverrouillee:hover { background: color-mix(in srgb, var(--green) 13%, var(--paper-raised)); }
.dossiers-table a { color: var(--text); text-decoration: none; font-weight: 600; }
.statut-badge { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.statut-analyse { background: var(--success-bg); color: var(--success); }
.statut-depose { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-soft); }
.statut-repreneur { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-soft); }
.statut-cedant { background: var(--success-bg); color: var(--green); }

.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem 1.5rem; max-width: 520px; }
.card-title { font-family: var(--display); font-weight: 500; font-size: 1.05rem; margin: 0 0 0.9rem; }
.inline-form { display: flex; flex-direction: column; gap: 0.8rem; }
.inline-form label { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); display: flex; flex-direction: column; gap: 0.3rem; }
.inline-form input[type="text"] {
  font-family: var(--sans); font-size: 0.92rem; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid var(--line);
}

/* ---- Liste de documents ---- */
.fichier-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fichier-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper-raised); font-size: 0.88rem;
}
.fichier-icone { width: 1rem; color: var(--text-soft); flex: none; }
.fichier-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier-taille { color: var(--text-soft); font-size: 0.78rem; flex: none; }
.inline-form-tight { display: flex; align-items: center; gap: 0.4rem; margin: 0; flex: none; }
.confirm-checkbox { font-size: 0.74rem; color: var(--text-soft); display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }

.upload-form {
  display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; padding: 1rem; border: 1px dashed var(--line);
  border-radius: 10px; margin-bottom: 1rem;
}
.upload-form label { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); display: flex; flex-direction: column; gap: 0.35rem; }

.btn-secondary, .btn-danger {
  font-family: var(--sans); border: none; border-radius: 999px; padding: 0.35rem 0.8rem; font-weight: 600;
  font-size: 0.78rem; cursor: pointer;
}
.btn-secondary { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.btn-secondary:hover { background: color-mix(in srgb, var(--green) 20%, transparent); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }

.report-meta { color: var(--text-soft); font-size: 0.85rem; }

/* ---- Pages d'authentification (pas de sidebar) ---- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--ink); padding: 1.5rem;
}
.auth-card {
  background: var(--paper-raised); border-radius: 14px; padding: 2rem 2.1rem;
  width: 100%; max-width: 380px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.35);
}
.auth-lede { font-size: 0.88rem; color: var(--text-soft); text-align: center; margin: -0.6rem 0 1.2rem; }
.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-form label { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); display: flex; flex-direction: column; gap: 0.35rem; }
.auth-form input {
  font-family: var(--sans); font-size: 0.95rem; padding: 0.55rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--text);
}
.auth-form input:focus { outline: 2px solid var(--green-soft); outline-offset: 1px; }
.btn-primary {
  font-family: var(--sans); background: var(--green); color: #fff; border: none; border-radius: 999px;
  padding: 0.65rem 1rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; margin-top: 0.3rem;
}
.btn-primary:hover { background: var(--green-soft); }
.auth-links { text-align: center; font-size: 0.85rem; margin: 1rem 0 0; color: var(--text-soft); }
.auth-links a { color: var(--green); text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }

.form-error { background: var(--danger-bg); color: var(--danger); padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem; margin: 0 0 1rem; }
.form-success { background: var(--success-bg); color: var(--success); padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem; margin: 0 0 1rem; }
.form-info { font-size: 0.85rem; color: var(--text-soft); margin: 0 0 0.6rem; }
.reset-link {
  display: block; font-family: var(--mono); font-size: 0.76rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; word-break: break-all;
}

.page-actions { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.page-actions .btn-secondary { font-size: 0.82rem; padding: 0.4rem 0.9rem; }

/* ---- Formulaire pivot ---- */
.pivot-form fieldset {
  border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.4rem; margin: 0 0 1.4rem;
}
.pivot-form legend { font-weight: 700; font-size: 0.95rem; padding: 0 0.4rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.field-grid label {
  display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--text-soft);
}
.field-grid input, .field-grid select, .field-grid textarea {
  font-family: var(--sans); font-size: 0.9rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--line);
}
.field-grid textarea { resize: vertical; }
.field-grid .field-wide { grid-column: 1 / -1; }
.field-note { font-size: 0.82rem; color: var(--text-soft); margin: 0.6rem 0 0; }

/* Information non renseignée (retour Olivier, 2026-07-13) -- signale visuellement
   les champs comptable/bilan/stock encore vides, dont l'absence dégrade aussi
   l'indice de confiance de la valorisation (cf. officine.valuation). */
.field-grid label.champ-manquant { background: var(--warning-bg); border-radius: 8px; padding: 0.4rem 0.5rem; }
.field-note.champ-manquant { background: var(--warning-bg); color: var(--warning); border-radius: 6px; padding: 0.35rem 0.6rem; display: inline-block; }

/* Encart de valeur calculée en lecture seule (ex. champs Territoire de la page
   Paramètres, décision #49) -- même gabarit visuel qu'un champ de formulaire,
   pour ne pas rompre la grille, mais sans bordure de saisie (pas éditable). */
.encart-lecture-seule { display: flex; flex-direction: column; gap: 0.3rem; }
.encart-lecture-seule .field-help { font-size: 0.8rem; font-weight: 600; color: var(--text-soft); }
.encart-lecture-seule strong { font-size: 0.95rem; padding: 0.45rem 0.6rem; }

.roster-table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: 0.85rem; }
.roster-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); padding: 0.3rem 0.4rem; }
.roster-table td { padding: 0.25rem 0.4rem; }
.roster-table input { width: 100%; font-family: var(--sans); font-size: 0.85rem; padding: 0.35rem 0.5rem; border-radius: 6px; border: 1px solid var(--line); }
.roster-table input.col-narrow { max-width: 5.5rem; }

/* ---- Note de décision (rendu depuis le markdown de officine.report) ---- */
.params-details { margin-bottom: 1.6rem; }
.params-details summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; padding: 0.2rem 0; }
.params-form { margin-top: 1rem; align-items: end; }

.note-content { max-width: 74ch; }
.note-content h1 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; border-bottom: 3px solid var(--green); padding-bottom: 0.4rem; }
.note-content h2 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--green); margin-top: 2rem; }
.note-content h3 { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--green); }
.note-content table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.86rem; }
.note-content th, .note-content td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: right; }
.note-content th:first-child, .note-content td:first-child { text-align: left; }
.note-content th { background: var(--paper-dim); }
.note-content blockquote { border-left: 4px solid var(--green); margin: 1rem 0; padding: 0.3rem 1rem; background: var(--paper-dim); }
.note-content code { background: color-mix(in srgb, var(--text) 8%, transparent); padding: 0.1rem 0.3rem; border-radius: 3px; }
.note-content hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* ---- Carte du secteur (Phase 3) ---- */
.carte-params { align-items: start; margin-bottom: 1rem; }
.carte-params .field-help { font-weight: 400; font-size: 0.76rem; color: var(--text-soft); }
.checkbox-inline { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.checkbox-inline input { width: auto; }

/* Toggle à 2 options (remplace un <select> binaire, ex. Reprendre/Céder) --
   retour Olivier, 2026-07-13 : un choix entre 2 options se voit d'un coup
   d'oeil, pas besoin d'ouvrir un menu déroulant. Radios natifs (accessibles,
   pas de JS) stylés en pilule. */
.toggle-group { display: inline-flex; border-radius: 999px; border: 1px solid var(--line); overflow: hidden; width: fit-content; }
.toggle-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.toggle-group label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-soft); padding: 0.4rem 0.9rem;
  cursor: pointer; margin: 0; user-select: none;
}
.toggle-group input[type="radio"]:checked + label { background: var(--green); color: #fff; }
.carte-params-actions { display: flex; gap: 0.6rem; align-self: end; }
.carte-frame {
  width: 100%; height: 650px; border: 1px solid var(--line); border-radius: 10px; margin: 0.6rem 0;
}
.indicateurs-table { width: 100%; max-width: 42rem; border-collapse: collapse; margin: 0.6rem 0 1.2rem; font-size: 0.9rem; }
.indicateurs-table th { text-align: left; font-weight: 600; color: var(--text-soft); padding: 0.4rem 0.8rem 0.4rem 0; width: 55%; }
.indicateurs-table td { padding: 0.4rem 0; border-top: 1px solid var(--line); }
.indicateurs-table th { border-top: 1px solid var(--line); }

/* ---- Écrans admin (Phase 4) ---- */
.stat-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.6rem 0 1.4rem; }
.stat-tile {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-raised); min-width: 11rem;
}
.stat-value { font-family: var(--display); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.78rem; color: var(--text-soft); }

.table-scroll { overflow-x: auto; margin-bottom: 1.4rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; white-space: nowrap; }
.data-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); padding: 0.4rem 0.8rem 0.4rem 0; border-bottom: 1px solid var(--line); }
.data-table td { padding: 0.45rem 0.8rem 0.45rem 0; border-bottom: 1px solid var(--line); }
/* Cellule "message" (/admin/support) : le texte libre garde ses retours à la
   ligne et s'enroule, au lieu d'étirer la ligne (le data-table est nowrap). */
.data-table td.cell-message { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 24ch; max-width: 52ch; }
/* Colonnes triables (table-sort.js) : opt-in via data-sortable sur le <th>.
   L'état de tri est porté par aria-sort (posé par le JS) -- la flèche double
   discrète signale l'affordance, la flèche simple verte la colonne active. */
.data-table th[data-sortable] { cursor: pointer; user-select: none; }
.data-table th[data-sortable]:hover { color: var(--text); }
.data-table th[data-sortable]::after { content: "↕"; opacity: 0.35; margin-left: 0.3rem; }
.data-table th[aria-sort] { color: var(--green); }
.data-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.data-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }

.admin-details { max-width: none; margin-bottom: 1rem; }
.admin-details summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.admin-actions-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; align-items: center; }
.field-note-inline { font-size: 0.8rem; color: var(--text-soft); }
.col-narrow { max-width: 5.5rem; font-family: var(--sans); font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); }
.code-block {
  background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 8px; padding: 0.7rem 0.9rem;
  font-family: var(--mono); font-size: 0.8rem; overflow-x: auto; margin: 0.5rem 0 1rem;
}

.chart-img {
  max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised);
  padding: 0.6rem; margin: 0.6rem 0 1.2rem;
}
.cr-table th, .cr-table td { text-align: right; white-space: nowrap; }
.cr-table th:first-child, .cr-table td:first-child { text-align: left; }

@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; padding: 0.7rem 1rem; }
  .sidebar .brand { padding: 0; flex: 1; }
  .nav-items { flex-direction: row; flex: none; }
  .account { margin-top: 0; border-top: none; padding-top: 0; }
  .account-info { display: none; }
  .content { padding: 1.5rem 1.2rem; }
}

/* ---- Pages publiques (accueil, tarifs) — pas de sidebar, pas de compte ---- */
.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 3rem; border-bottom: 1px solid var(--line); background: var(--paper-raised);
}
.public-header .brand { text-decoration: none; color: var(--text); }
.public-nav { display: flex; align-items: center; gap: 1.6rem; }
.public-nav a { color: var(--text-soft); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.public-nav a:hover { color: var(--text); }
.public-nav .btn-nav { color: #fff; padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.public-nav .btn-nav:hover { color: #fff; background: var(--green-soft); }

.public-content { flex: 1; }
.public-footer {
  display: flex; flex-direction: column; gap: 1.6rem;
  padding: 2.6rem 3rem 1.6rem; border-top: 1px solid var(--line); background: var(--paper-raised);
}
.public-footer-top { display: flex; flex-wrap: wrap; gap: 2.6rem; justify-content: space-between; }
.public-footer-brand { max-width: 19rem; }
.public-footer-baseline { margin: 0.7rem 0 0; color: var(--text-soft); font-size: 0.85rem; line-height: 1.5; }
.public-footer-col { display: flex; flex-direction: column; gap: 0.55rem; min-width: 8.5rem; }
.public-footer-col-title {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 0.15rem;
}
.public-footer-col a { color: var(--text); text-decoration: none; font-size: 0.88rem; }
.public-footer-col a:hover { color: var(--green); text-decoration: underline; }
.public-footer-bottom {
  padding-top: 1.3rem; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 0.8rem;
}

/* ---- Emplacements image (2026-07-11) : réservent le ratio/recadrage dès
   maintenant, avant même que les photos existent -- suggestions de scènes
   dans CONCEPTION.md §10. Remplacer le contenu du bloc par une balise <img>
   une fois le fichier généré ; la légende disparaît automatiquement (:has). */
.media-slot {
  position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--green-tint), var(--paper-dim));
  border: 1px dashed color-mix(in srgb, var(--green) 25%, transparent);
  display: flex; align-items: flex-end;
}
.media-slot::after {
  content: attr(data-legende);
  font-family: var(--mono); font-size: 0.66rem; color: var(--green-deep); line-height: 1.3;
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  padding: 0.3rem 0.6rem; margin: 0.7rem; border-radius: 6px;
}
.media-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-slot:has(img) { border-style: solid; }
.media-slot:has(img)::after { display: none; }

/* ---- Accueil : hero + sections ---- */
.hero { max-width: 1080px; margin: 0 auto; padding: 4rem 1.5rem 3rem; }
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.8rem; align-items: center; }
.hero-media { aspect-ratio: 4 / 3; }
.hero-text h1 { font-family: var(--display); font-weight: 500; font-size: 2.3rem; line-height: 1.18; margin: 0 0 1rem; letter-spacing: -0.005em; }
.hero-text .lede { font-size: 1.08rem; color: var(--text-soft); max-width: 46ch; margin: 0 0 1.8rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero-actions .btn-primary, .hero-actions .btn-secondary { text-decoration: none; display: inline-block; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-text .lede { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-media { order: -1; max-width: 480px; margin: 0 auto; }
}

.section-band { padding: 3rem 1.5rem; border-top: 1px solid var(--line); }
.section-band-inner { max-width: 920px; margin: 0 auto; }
.section-band h2 { font-family: var(--display); font-weight: 500; font-size: 1.4rem; margin: 0 0 0.4rem; text-align: center; }
.section-band .section-lede { color: var(--text-soft); text-align: center; max-width: 56ch; margin: 0 auto 2rem; }

.step-grid, .persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
/* Trois cartes persona (reprendre / céder / accompagner) : même grille 3
   colonnes que les étapes, sur toute la largeur du bandeau (920px). */
.persona-grid { grid-template-columns: repeat(3, 1fr); margin: 0 auto; }
.step-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
/* Cartes "Vous reprenez / Vous cédez" : fond teinté pour se distinguer des
   cartes neutres (étapes, documents) -- même logique que les badges de
   verdict, juste plus discret. */
.persona-card {
  background: var(--green-tint); border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
  border-radius: 12px; padding: 1.4rem 1.5rem; overflow: hidden;
}
.persona-media {
  aspect-ratio: 16 / 10; margin: -1.4rem -1.5rem 1rem; border-radius: 0;
  border-width: 0 0 1px 0;
}
.step-icon {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem;
}
.step-icon svg { width: 1.3rem; height: 1.3rem; }
.step-card h3 { font-size: 0.98rem; margin: 0 0 0.4rem; }
.persona-card h3 { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--green-deep); margin: 0 0 0.5rem; }
.step-card p, .persona-card p { font-size: 0.87rem; color: var(--text-soft); margin: 0; line-height: 1.5; }
.persona-card a { color: var(--green); font-weight: 600; text-decoration: none; font-size: 0.85rem; display: inline-block; margin-top: 0.6rem; }
.persona-card a:hover { text-decoration: underline; }

/* ---- Tarifs ---- */
.pricing-intro { max-width: 700px; margin: 0 auto; padding: 3rem 1.5rem 1rem; text-align: center; }
.pricing-intro h1 { font-family: var(--display); font-weight: 500; font-size: 2rem; margin: 0 0 0.8rem; }
.pricing-intro .lede { color: var(--text-soft); font-size: 1rem; line-height: 1.6; }

.pricing-section { max-width: 860px; margin: 0 auto; padding: 2.2rem 1.5rem; }
.pricing-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.pricing-section-head h2 { font-family: var(--display); font-weight: 500; font-size: 1.3rem; margin: 0; }
.pricing-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent);
  padding: 0.2rem 0.6rem; border-radius: 999px;
}
.pricing-tag.soon { color: var(--text-soft); background: color-mix(in srgb, var(--text) 8%, transparent); }
.pricing-section-desc { color: var(--text-soft); font-size: 0.9rem; margin: 0.3rem 0 1.2rem; max-width: 62ch; }

.pricing-table { width: 100%; border-collapse: collapse; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pricing-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); padding: 0.7rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.pricing-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table td.price-cell { font-weight: 700; color: var(--green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing-table .price-sub { display: block; color: var(--text-soft); font-size: 0.8rem; font-weight: 400; margin-top: 0.2rem; }

.pricing-note { max-width: 62ch; margin: 1rem auto 0; font-size: 0.85rem; color: var(--text-soft); background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; padding: 0.8rem 1rem; }

.pricing-cta { text-align: center; padding: 2.5rem 1.5rem 3.5rem; display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.pricing-cta .btn-primary, .pricing-cta .btn-secondary { text-decoration: none; display: inline-block; }

/* ---- Lecture cédant (dossier_lecture.html) ---- */
.verdict-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600;
  padding: 0.35rem 0.75rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.verdict-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.verdict-vert { background: var(--success-bg); color: var(--success); }
.verdict-vert .dot { background: var(--success); }
.verdict-orange { background: var(--warning-bg); color: var(--warning); }
.verdict-orange .dot { background: var(--warning); }
.verdict-rouge { background: var(--danger-bg); color: var(--danger); }
.verdict-rouge .dot { background: var(--danger); }

.resume-prose {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: 0.95rem; max-width: 66ch; margin: 0 0 1.6rem;
}

.axe-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin-bottom: 0.8rem;
}
.axe-card .axe-tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 999px; display: inline-block; margin-bottom: 0.5rem;
}
.axe-card.correctable .axe-tag { background: var(--success-bg); color: var(--success); }
.axe-card.structurel .axe-tag { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-soft); }
.axe-card .axe-constat { margin: 0 0 0.4rem; color: var(--text); }
.axe-card .axe-recommandation { margin: 0; color: var(--text-soft); font-size: 0.9rem; }
.axe-card .axe-delai { font-size: 0.78rem; color: var(--text-soft); margin-top: 0.5rem; }

/* ---- Palier gratuit (teaser de la note/lecture, décision #25) ---- */
.paywall-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; max-width: 62ch; margin: 1.8rem 0;
}
.paywall-card h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.paywall-card p { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--text-soft); }
.paywall-card .paywall-note { font-size: 0.78rem; }

@media (max-width: 720px) {
  .public-header, .public-footer { padding: 1rem 1.2rem; }
  .public-nav { gap: 1rem; }
  .public-footer-top { flex-direction: column; gap: 1.6rem; }
  .public-footer-brand { max-width: none; }
  .step-grid, .persona-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.7rem; }
}