/* =========================================================
   Keymmo Financement · Générateur de dossier de prêt
   Tokens repris de l'app Keymmo (sobre : noir / rouge / blanc)
   ========================================================= */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f6f6;
  --ink: #050505;
  --bg-dark: #050505;
  --muted: #5f5f5f;
  --line: #e8e8e8;
  --border: #e8e8e8;

  --brand: #c0120c;
  --brand-hover: #9e0c08;
  --brand-light: rgba(192, 18, 12, 0.1);
  --brand-shadow: rgba(192, 18, 12, 0.3);

  /* Palette stricte : rouge Keymmo, noir, blanc, gris neutres. Aucune teinte
     d'humeur (vert / orange / jaune) : un état se lit à la bordure, à la graisse
     ou à une icône, jamais à une couleur. Les noms de variables sont conservés
     pour ne pas casser les usages existants - seules les valeurs changent.
       --success  était #16a34a (vert)   → encre noire
       --success-bg était #f0fdf4 (vert) → gris très clair
       --danger   était #c0120c          → inchangé, c'est le rouge Keymmo
       --danger-bg était #fef2f2 (rosé)  → gris très clair
       --warning  était #d97706 (ambre)  → rouge Keymmo
       --warning-bg était #fffbeb (jaune)→ gris très clair
     Rouge réservé aux accents, aux filets, aux bordures d'alerte et aux valeurs
     hors norme (endettement au-delà du seuil). */
  --success: var(--ink);
  --success-bg: var(--surface-2);
  --danger: var(--brand);
  --danger-bg: var(--surface-2);
  --warning: var(--brand);
  --warning-bg: var(--surface-2);
  --info: #5f5f5f;
  --info-bg: #f7f7f7; /* était #f7f7f8 : un point de bleu, gris désormais pur */
  --neutral-fill: #9b9b9b; /* remplissage de jauge sous seuil */

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 99px;

  --input-height: 44px;
  --topbar-h: 60px; /* hauteur réelle de .pret-topbar (~59px) + 1px de marge anti-scroll */
  --input-border: 1px solid var(--line);
  --shadow: 0 22px 60px rgba(5, 5, 5, 0.14); /* était rgba(22,31,28,…), légèrement verdâtre */
  --shadow-sm: 0 2px 10px rgba(5, 5, 5, 0.05);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface-2);
}

* { box-sizing: border-box; }
/* Garde-fou : une classe qui pose display (ex. .pret-alert en flex) écrase la règle
   navigateur [hidden]{display:none} et rend visible un conteneur censé être masqué.
   Cette règle rend l'attribut hidden fiable quelle que soit la classe portée. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--surface-2); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* ---------- Topbar ---------- */
.pret-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.pret-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.pret-brand-mark img { height: 30px; width: auto; display: block; }
.pret-brand-text { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; }
/* « Financement » fait partie du nom du produit, ce n'est plus un sous-titre :
   il garde la couleur de l'encre. Seule la graisse marque le verrou de marque
   (Keymmo = maison, Financement = service). */
.pret-brand-sub { font-weight: 500; }
.pret-topbar-actions { display: flex; align-items: center; gap: 10px; }
.pret-reset,
.pret-topbar-link {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pret-reset:hover,
.pret-topbar-link:hover { border-color: var(--brand); color: var(--brand); }
/* Boutons secondaires en rouge Keymmo (Recommencer, Se déconnecter) */
.pret-topbar-ghost { color: var(--brand); border-color: var(--brand); background: var(--surface); }
.pret-topbar-ghost:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.pret-topbar-ghost:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pret-topbar-ghost:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Action principale de la topbar pour un visiteur : rouge plein, face au ghost
   de « Se connecter ». Même gabarit que .pret-topbar-link, seul le remplissage
   change - les deux boutons doivent faire la même hauteur. */
.pret-topbar-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.pret-topbar-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.pret-topbar-primary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Bandeau de maintenance : paramètres périmés. Affiché UNIQUEMENT en local
   (voir isLocalEnv) - c'est un rappel pour le développeur, pas un message
   destiné aux utilisateurs. */
.pret-devbar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--brand);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  color: var(--muted);
}
.pret-devbar b { color: var(--brand); font-weight: 600; }
.pret-devbar button {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.pret-devbar button:hover { color: var(--brand); }
@media print { .pret-devbar { display: none !important; } }

.pret-topbar-user { font-size: 0.82rem; color: var(--muted); }
.pret-topbar-user b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .pret-topbar-user { display: none; } }
/* Mobile : à 375 px, logo + « Mon dossier » + « Recommencer » + « Se déconnecter »
   faisaient 477 px de large - scroll horizontal sur tout le site et dernier bouton
   hors écran. On resserre plutôt que de masquer : chaque action reste atteignable.
   La marque rétrécit mais reste ENTIÈRE - « Financement » fait partie du nom,
   le masquer afficherait un autre produit -, puis les boutons passent en
   libellé court via .pret-topbar-short. */
@media (max-width: 560px) {
  .pret-topbar { padding: 10px 12px; gap: 8px; }
  .pret-brand { gap: 7px; }
  .pret-brand-text { font-size: 0.86rem; letter-spacing: -0.02em; }
  .pret-brand-mark img { height: 26px; }
  .pret-topbar-actions { gap: 6px; min-width: 0; }
  /* Padding vertical maintenu à 10 px : la cible tactile ne doit pas rétrécir
     en même temps que le libellé. */
  .pret-reset,
  .pret-topbar-link { padding: 10px; font-size: 0.76rem; white-space: nowrap; }
}
/* Libellés longs masqués sous 400 px, remplacés par leur version courte. */
.pret-topbar-short { display: none; }
@media (max-width: 400px) {
  .pret-topbar-full { display: none; }
  .pret-topbar-short { display: inline; }
}
/* Sous 360 px (iPhone SE 1re génération, vieux Android) la barre débordait de
   20 px depuis que le nom du produit est complet. C'est le LOGO qui part, pas
   le nom : la marque figurative reste dans le favicon et l'onglet, alors qu'un
   « Keymmo » tronqué désignerait un autre produit. */
@media (max-width: 360px) {
  .pret-brand-mark { display: none; }
  .pret-brand-text { font-size: 0.82rem; }
  .pret-topbar { padding: 10px 10px; }
}

/* ---------- Shell ---------- */
.pret-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 120px;
}

/* ---------- Progress ---------- */
.pret-progress { margin-bottom: 28px; }
.pret-progress-step { font-size: 0.82rem; color: var(--muted); font-weight: 500; margin: 0 0 10px; }
.pret-progress-step b { color: var(--ink); font-weight: 700; }
.pret-progress-track {
  display: flex;
  gap: 6px;
}
.pret-seg {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  border: none;
  padding: 0;
  transition: background-color 0.35s ease, transform 0.35s ease;
}
.pret-seg.is-done { background: rgba(192, 18, 12, 0.4); }      /* var(--brand) à 40 % */
.pret-seg.is-current { background: var(--brand); transform: scaleY(1.6); }
.pret-seg.is-clickable { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pret-seg { transition: none; } }

/* ---------- Card / Step ---------- */
.pret-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  animation: pretFade 0.25s ease;
}
/* Passé la landing (formulaire, résultat, auth) : simple fondu d'opacité, aucun mouvement. */
@keyframes pretFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pret-step-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 6px;
}
.pret-step-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.pret-step-lead { color: var(--muted); font-size: 0.92rem; margin: 0 0 4px; }

/* ---------- Why box ---------- */
.pret-why {
  margin: 16px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--info-bg);
  overflow: hidden;
}
.pret-why-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 11px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--info);
  text-align: left;
}
.pret-why-toggle .pret-why-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pret-why-toggle .pret-why-caret { margin-left: auto; transition: transform 0.2s; color: var(--muted); }
.pret-why.is-open .pret-why-caret { transform: rotate(180deg); }
.pret-why-body {
  display: none;
  padding: 0 14px 13px 40px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}
.pret-why.is-open .pret-why-body { display: block; }

/* ---------- Fields ---------- */
.pret-fields { display: flex; flex-direction: column; gap: 18px; }
.pret-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pret-row.is-end { align-items: flex-end; } /* aligne les inputs quand les labels ont des hauteurs différentes */
.pret-row > .pret-field { flex: 1; min-width: 160px; }
.pret-field { display: flex; flex-direction: column; gap: 6px; }
.pret-field > label,
.pret-fieldset-legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.pret-fieldset-legend { margin-bottom: 8px; }
.pret-field > .pret-fieldset-legend { margin-bottom: 0; } /* dans un champ, l'espacement vient du gap */
.pret-field .pret-hint { font-size: 0.76rem; color: var(--muted); font-weight: 400; }
/* Aide sous le champ (12-13px gris) - remplace les annotations accolées au label */
.pret-field-hint { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.pret-field.is-error input,
.pret-field.is-error select { border-color: var(--danger); }
/* Ligne 2fr / 1fr (ex. Régime matrimonial + Enfants à charge) */
.pret-row.is-2-1 > .pret-field:first-child { flex: 2; }
.pret-row.is-2-1 > .pret-field:last-child { flex: 1; min-width: 130px; }
.pret-field-err { font-size: 0.76rem; color: var(--danger); font-weight: 500; }

.pret-input,
.pret-select,
.pret-textarea {
  width: 100%;
  height: var(--input-height);
  border: var(--input-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.88rem;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pret-textarea { height: auto; min-height: 80px; resize: vertical; line-height: 1.5; }
.pret-input:focus,
.pret-select:focus,
.pret-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.pret-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f5f5f' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.pret-input-money { position: relative; }
.pret-input-money .pret-input { padding-right: 30px; text-align: right; }
.pret-input-money::after {
  content: "€";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.85rem;
  pointer-events: none;
}
.pret-input-suffix { position: relative; }
/* La réserve à droite suit la longueur du suffixe (--suffix-len, posé au rendu)
   au lieu d'être fixée à 42 px : la valeur et le suffixe étant tous deux calés
   à droite, un suffixe long passait par-dessus le texte saisi. Le `ch` est
   mesuré sur la police de l'input, plus large que celle du suffixe (0,82 rem) :
   la réserve est donc légèrement généreuse, jamais insuffisante. */
.pret-input-suffix .pret-input {
  padding-right: calc(var(--suffix-len, 3) * 1ch + 22px);
  text-align: right;
}
.pret-input-suffix[data-suffix]::after {
  content: attr(data-suffix);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.82rem;
  pointer-events: none;
}

/* Champ date natif harmonisé (même hauteur/bordure/radius que les autres champs) */
.pret-date { padding-right: 10px; }
.pret-date::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pret-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Date de naissance en 3 champs JJ / MM / AAAA */
.pret-dob { display: flex; align-items: center; gap: 8px; }
.pret-dob-part { text-align: center; }
.pret-dob-part[data-dob-part="d"],
.pret-dob-part[data-dob-part="m"] { width: 3.6em; flex: 0 0 auto; }
.pret-dob-part[data-dob-part="y"] { width: 5.4em; flex: 0 0 auto; }
.pret-dob-sep { color: var(--muted); font-weight: 600; user-select: none; }
.pret-dob.is-error .pret-dob-part {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.pret-dob-error {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--danger);
}

/* =========================================================
   Liste déroulante custom (remplace le <select> natif)
   ========================================================= */
.pret-select-wrap { position: relative; }
.pret-select-wrap.is-open { z-index: 50; }
.pret-select-trigger {
  width: 100%;
  height: var(--input-height);
  border: var(--input-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pret-select-trigger:hover { border-color: #cfcfcf; }
.pret-select-trigger:focus-visible,
.pret-select-wrap.is-open .pret-select-trigger {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.pret-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pret-select-trigger.is-placeholder .pret-select-value { color: var(--muted); }
.pret-select-chevron { color: var(--muted); flex-shrink: 0; transition: transform 0.2s; }
.pret-select-wrap.is-open .pret-select-chevron { transform: rotate(180deg); }

.pret-select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
  animation: pretSelectIn 0.15s ease;
  scrollbar-width: thin;
}
.pret-select-wrap.is-up .pret-select-panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
.pret-select-panel::-webkit-scrollbar { width: 8px; }
.pret-select-panel::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 8px; }
@keyframes pretSelectIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.pret-select-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.pret-select-opt:hover,
.pret-select-opt.is-active {
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 600;
}
.pret-select-opt.is-selected { color: var(--brand); font-weight: 600; }
.pret-select-opt.is-selected:not(:hover):not(.is-active) { background: var(--brand-light); }
.pret-select-check { color: var(--brand); flex-shrink: 0; opacity: 0; }
.pret-select-opt.is-selected .pret-select-check { opacity: 1; }

/* =========================================================
   Stepper − [n] + (petits entiers)
   ========================================================= */
.pret-stepper {
  display: inline-flex;
  align-items: center;
  border: var(--input-border);
  border-radius: var(--radius);
  height: var(--input-height);
  width: fit-content;
  overflow: hidden;
  background: var(--surface);
}
.pret-stepper-btn {
  width: 42px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pret-stepper-btn:hover:not(:disabled) { background: var(--brand-light); }
.pret-stepper-btn:disabled { color: var(--line); cursor: not-allowed; }
.pret-stepper-val {
  min-width: 46px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Stepper + aide sur une même ligne (aide à droite, centrée verticalement) */
.pret-stepper-row { display: flex; align-items: center; gap: 16px; }
.pret-stepper-row .pret-field-hint { flex: 1; }
@media (max-width: 640px) {
  .pret-stepper-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Alerte inline (ex. activité indépendante < 3 ans) */
/* Avertissement inline de formulaire (distinct de .pret-alert de l'écran résultat, qui est en flex) */
.pret-warn {
  display: block;               /* le texte doit couler normalement, pas en colonnes flex */
  margin: 4px 0 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--brand);
  border-left-width: 3px;
  color: var(--brand);
  font-size: 0.85rem;
  line-height: 1.45;
}
.pret-warn[hidden] { display: none; }
/* Note d'information : même gabarit, bordure grise. C'est la BORDURE qui
   distingue une alerte d'une note, jamais une couleur de fond. */

/* Encart "Endettement estimé" (étape 5) */
.pret-endet {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--info-bg);
  border: 1px solid var(--line);
}
.pret-endet-title { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.pret-endet-value {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 2px 0 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Sous le seuil HCSF : noir. Au-dessus : rouge. Le rouge est ici un signal de
   valeur hors norme, c'est son seul emploi de ce type dans l'app. */
.pret-endet-value.is-good { color: var(--ink); }
.pret-endet-value.is-bad { color: var(--brand); }
.pret-endet-gauge {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.pret-endet-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--muted);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.pret-endet-fill.is-good { background: var(--neutral-fill); }
.pret-endet-fill.is-bad { background: var(--brand); }
.pret-endet-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
  border-radius: 1px;
}
.pret-endet-legend { margin-top: 10px; font-size: 0.78rem; color: var(--muted); }

/* Note d'information neutre (repère bancaire, non bloquant) */
.pret-note {
  margin: 4px 0 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--info-bg);
  border: 1px solid var(--line);
  border-left-width: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---------- Choice chips (radio segmented) ---------- */
.pret-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pret-choices.is-stack { flex-direction: column; }
.pret-choice {
  position: relative;
  flex: 1;
  min-width: 120px;
}
.pret-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pret-choice-label {
  display: block;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  transition: all 0.15s;
  background: var(--surface);
}
.pret-choice-sub { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.pret-choice input:checked + .pret-choice-label {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 600;
}
.pret-choice input:focus-visible + .pret-choice-label { box-shadow: 0 0 0 3px var(--brand-light); }
.pret-choice-label:hover { border-color: var(--brand); }
.pret-choices.is-cards .pret-choice { min-width: 100%; }
.pret-choices.is-cards .pret-choice-label { text-align: left; }
/* Dans une colonne de formulaire (fChoiceField), le groupe reste HORIZONTAL.
   Le plancher de 120 px faisait basculer « Non / Oui » en vertical dès que la
   colonne passait sous ~250 px (cas de « Devis dispo ? », 3e d'une ligne de
   trois), alors que tous les autres groupes de l'app sont horizontaux. */
.pret-field > .pret-choices:not(.is-stack):not(.is-cards) > .pret-choice { min-width: 64px; }
.pret-field > .pret-choices > .pret-choice > .pret-choice-label { padding-left: 8px; padding-right: 8px; }

/* ---------- Checkbox ---------- */
.pret-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.45;
  transition: border-color 0.15s;
}
.pret-check:hover { border-color: var(--brand); }
.pret-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }
.pret-check-text b { display: block; margin-bottom: 2px; }
.pret-check-text span { color: var(--muted); }

/* ---------- Repeater ---------- */
.pret-repeater { display: flex; flex-direction: column; gap: 14px; }
.pret-repeat-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--surface-2);
  position: relative;
}
.pret-repeat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pret-repeat-title { font-weight: 700; font-size: 0.92rem; }
/* Ghost rouge Keymmo, même famille que .pret-topbar-ghost mais en plus compact :
   l'action est secondaire dans un bloc répété. Fond blanc explicite (var(--surface))
   car .pret-repeat-item est sur gris clair - le bouton doit se détacher. */
.pret-repeat-remove {
  border: 1px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  transition: all 0.15s;
}
.pret-repeat-remove:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.pret-repeat-remove:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pret-repeat-remove:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Bandeau d'annulation après une suppression dans un répéteur. Registre neutre
   (bordure grise) : rien n'a mal tourné, on offre juste un retour en arrière. */
.pret-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--info-bg);
  color: var(--muted);
  font-size: 0.82rem;
}
.pret-undo b { color: var(--ink); font-weight: 600; }
.pret-undo-btn {
  border: 1px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  transition: all 0.15s;
}
.pret-undo-btn:hover { background: var(--brand-light); }
.pret-undo-btn:active { background: var(--brand); color: #fff; }
.pret-undo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pret-add-btn {
  border: 1.5px dashed var(--line);
  background: var(--surface);
  color: var(--brand);
  border-radius: var(--radius);
  padding: 13px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
}
.pret-add-btn:hover { border-color: var(--brand); background: var(--brand-light); }

/* ---------- Sub-panel (borrower 2, conditional blocks) ---------- */
.pret-subpanel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 6px;
}
.pret-subpanel-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pret-subpanel.is-brand .pret-subpanel-title { color: var(--brand); }

/* ---------- Accordéon fiches emprunteur (étape 2) ---------- */
.pret-acc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--surface);
}
.pret-acc.is-brand { border-color: var(--brand); }
.pret-acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.pret-acc-head:hover { background: var(--brand-light); }
.pret-acc-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Complétion : ICÔNE plutôt que pastille de couleur. Une pastille verte/rouge ne
   dit rien à qui ne distingue pas les deux teintes, et un gris seul se lit comme
   « désactivé ». Le glyphe porte le sens, le rouge du « ! » n'attire l'œil que
   sur ce qui reste à faire. */
.pret-acc-dot {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.pret-acc-dot.is-ok { color: var(--muted); }
.pret-acc-dot.is-ok::before { content: "\2713"; }   /* ✓ */
.pret-acc-dot.is-todo { color: var(--brand); }
.pret-acc-dot.is-todo::before { content: "\0021"; } /* ! */
.pret-acc-title { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.pret-acc-status { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.pret-acc.is-open .pret-acc-status { display: none; }
.pret-acc-caret { color: var(--muted); transition: transform 0.2s; }
.pret-acc.is-open .pret-acc-caret { transform: rotate(180deg); }
.pret-acc-body { padding: 0 16px 16px; }

.pret-section-sep {
  margin: 22px 0 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
}

/* ---------- Live computed banner (savings gauge, notaire etc.) ---------- */
.pret-live {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--info-bg);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}
.pret-live-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pret-live-row + .pret-live-row { margin-top: 6px; }
.pret-live-label { color: var(--muted); }
.pret-live-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.pret-gauge {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  margin-top: 10px;
}
.pret-gauge-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.3s, background 0.3s; }
.pret-gauge-fill.is-good { background: var(--neutral-fill); }
.pret-gauge-fill.is-warn { background: var(--neutral-fill); }
.pret-gauge-fill.is-bad { background: var(--brand); }

/* ---------- Nav buttons ---------- */
.pret-nav {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
/* Gabarit commun à TOUS les boutons primaires : hauteur ~50px (standard tactile),
   16px, semi-gras, même arrondi que les inputs (var(--radius)). */
.pret-btn {
  border-radius: var(--radius);
  padding: 14px 22px;
  min-height: 50px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pret-btn-primary { background: var(--brand); color: #fff; flex: 1; }
.pret-btn-primary:hover { background: var(--brand-hover); box-shadow: 0 8px 20px var(--brand-shadow); transform: translateY(-1px); }
.pret-btn-primary:active { transform: translateY(0); box-shadow: none; }
.pret-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pret-btn-ghost:hover { border-color: var(--ink); }
.pret-btn:disabled,
.pret-btn:disabled:hover { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; background: var(--brand); }

/* Message de validation sous les boutons (ex. emprunteur incomplet) */
.pret-nav-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(192, 18, 12, 0.08);
  border: 1px solid rgba(192, 18, 12, 0.3);
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Spinner de chargement (bouton d'auth pendant la soumission) */
.pret-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: pretSpin 0.7s linear infinite;
}
@keyframes pretSpin { to { transform: rotate(360deg); } }

.pret-autosave {
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 16px;
}
/* « Progression sauvegardée » : information neutre, pas un succès à célébrer. */
.pret-autosave b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Résultats / Dossier
   ========================================================= */
.pret-verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
}
/* Verdict : fond blanc cassé pour tous. Seule la bordure distingue - grise quand
   le dossier tient, rouge quand il demande un arbitrage. Texte toujours noir. */
.pret-verdict.is-green { background: var(--surface-2); border: 1px solid var(--line); }
.pret-verdict.is-orange,
.pret-verdict.is-red { background: var(--surface-2); border: 1px solid var(--brand); }
.pret-verdict-light {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pret-verdict.is-green .pret-verdict-light { background: var(--ink); }
.pret-verdict.is-orange .pret-verdict-light,
.pret-verdict.is-red .pret-verdict-light { background: var(--brand); }
.pret-verdict-text b { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.pret-verdict-text span { font-size: 0.86rem; color: var(--muted); }

.pret-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.pret-kpi {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--surface);
}
.pret-kpi-label { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pret-kpi-value { font-size: 1.35rem; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* Valeurs : noires par défaut, y compris en zone limite. Le rouge est réservé au
   franchissement d'un seuil (is-bad), pour qu'il garde sa force de signal. */
.pret-kpi-value.is-good { color: var(--ink); }
.pret-kpi-value.is-warn { color: var(--ink); }
.pret-kpi-value.is-bad { color: var(--brand); }
.pret-kpi-sub { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }

.pret-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pret-alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.5;
  border: 1px solid;
}
/* Alerte = bordure rouge (gauche épaissie) ; note ou point positif = bordure
   grise. Aucun fond coloré : la nature du message se lit au trait. */
.pret-alert.is-danger,
.pret-alert.is-warn { background: var(--surface-2); border-color: var(--brand); border-left-width: 3px; }
.pret-alert.is-info,
.pret-alert.is-good { background: var(--info-bg); border-color: var(--line); border-left-width: 3px; }
.pret-alert.is-danger .pret-alert-icon,
.pret-alert.is-warn .pret-alert-icon { color: var(--brand); }
.pret-alert.is-info .pret-alert-icon,
.pret-alert.is-good .pret-alert-icon { color: var(--muted); }
.pret-alert-icon { font-weight: 700; flex-shrink: 0; }
.pret-alert-body b { display: block; }
.pret-alert-body span { color: var(--muted); }

.pret-doc-section { margin: 26px 0; }
.pret-doc-section h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.pret-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.pret-table th, .pret-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.pret-table th { font-weight: 600; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.pret-table td.num, .pret-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pret-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none; }
.pret-table tr.is-total.is-balanced td { color: var(--success); }

.pret-method {
  background: var(--info-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 10px;
}
.pret-method code { background: var(--surface); padding: 1px 5px; border-radius: 4px; color: var(--ink); font-size: 0.9em; }

.pret-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pret-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pret-checklist li::before {
  content: "";
  width: 16px; height: 16px;
  border: 1.5px solid var(--muted);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pret-disclaimer {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 24px;
}

.pret-cta-banner {
  margin: 24px 0;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-dark);
  color: #fff;
}
.pret-cta-banner h4 { margin: 0 0 6px; font-size: 1rem; }
/* Gris clair opaque plutôt que du blanc à 70 % : à cette taille sur fond noir,
   l'alpha faisait lire le texte comme éteint. Le ratio passe de 9,8:1 à 16,3:1
   (AA exige 4,5, AAA 7) - c'était déjà conforme, c'est le rendu qui pêchait. */
.pret-cta-banner p { margin: 0 0 14px; font-size: 0.85rem; color: #e6e6e6; }
.pret-cta-banner .pret-btn-primary { flex: none; }

.pret-result-actions { display: flex; gap: 12px; margin: 8px 0 10px; flex-wrap: wrap; }
.pret-result-actions .pret-btn { flex: 1; min-width: 180px; }
.pret-gen-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pret-gen-actions .pret-btn { width: 100%; }
.pret-print-notice {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 10px 0 8px;
  text-align: center;
}

/* Écran de fin "Votre dossier est prêt" */
.pret-done-hero { text-align: center; margin-bottom: 22px; }
.pret-done-check {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--brand);
  border: 2px solid var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.pret-insurance {
  margin: 24px 0;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--brand-light);
  border: 1px solid var(--brand);
}
.pret-insurance h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--brand); }
.pret-insurance p { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
.pret-insurance-btn { width: 100%; }
.pret-insurance-sub { display: block; text-align: center; margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.pret-insurance.is-soon { background: var(--surface-2); border-color: var(--line); }
.pret-insurance.is-soon h3 { color: var(--ink); }
.pret-insurance-soon {
  display: inline-block;
  font-size: 0.82rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 7px 15px;
}

/* Banques destinataires (étape 8) */
.pret-banks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pret-bank {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.pret-bank.is-checked { border-color: var(--brand); background: var(--brand-light); }
.pret-bank-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.pret-bank-toggle input { width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }
.pret-bank-agency { margin-top: 10px; height: 40px; font-size: 0.85rem; }
@media (max-width: 560px) { .pret-banks { grid-template-columns: 1fr; } }

/* Photos du bien (étape 7) */
.pret-drop {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: 22px 16px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.pret-drop.is-over { border-color: var(--brand); background: var(--brand-light); }
.pret-drop.is-disabled { opacity: 0.55; }
.pret-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pret-drop-inner > b { font-size: 0.92rem; }
.pret-drop-inner > span { color: var(--muted); font-size: 0.82rem; }
.pret-drop-hint { font-size: 0.76rem !important; color: var(--muted); }
.pret-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.pret-photo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pret-photo-thumb { position: relative; }
.pret-photo-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  background: var(--surface-2);
}
.pret-photo-size {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(5, 5, 5, 0.72);
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}
.pret-photo-caption { height: 38px; font-size: 0.82rem; }
.pret-photo-actions { display: flex; gap: 6px; }
.pret-photo-btn {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  font-size: 0.78rem;
  color: var(--ink);
  transition: all 0.15s;
}
.pret-photo-btn:hover:not(:disabled) { border-color: var(--ink); }
.pret-photo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pret-photo-btn.is-del { color: var(--danger); }
.pret-photo-btn.is-del:hover { background: var(--danger-bg); border-color: var(--danger); }
.pret-photos-summary { margin-top: 12px; font-size: 0.82rem; color: var(--muted); }
/* Information de repli, pas un avertissement : gris. */
.pret-photos-local { color: var(--muted); font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .pret-card { padding: 20px 16px; }
  .pret-step-title { font-size: 1.25rem; }
  .pret-kpis { grid-template-columns: 1fr; }
  .pret-row { gap: 12px; }
  .pret-nav { flex-direction: column-reverse; }
  .pret-btn-ghost { width: 100%; }
}

/* =========================================================
   Landing (page d'accueil)
   ========================================================= */
/* La home casse la largeur étroite du shell : pleine page */
.pret-shell.is-home { max-width: 100%; padding-left: 0; padding-right: 0; padding-top: 0; }
.pret-home { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); }

.pret-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  /* Desktop : le hero tient exactement dans un écran (viewport − topbar), sans scroll. */
  height: calc(100vh - var(--topbar-h));
  padding: 16px 0;
  box-sizing: border-box;
}
.pret-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.pret-hero h1 {
  font-size: clamp(2.3rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  font-weight: 700;
}
.pret-hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 34em;
}
.pret-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* CTA landing : même hauteur que les autres boutons primaires, juste plus large */
.pret-btn-lg { padding: 14px 40px; }
.pret-hero-note { font-size: 0.82rem; color: var(--muted); }

/* Mockup du dossier (hauteur = son contenu, jamais plus haut que le hero) */
.pret-mockup-wrap {
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0; /* autorise la cellule grille à rétrécir sous la hauteur du contenu */
  max-height: 100%;
}
.pret-mockup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 30px;
  transform: rotate(1.4deg);
  width: 100%;
  max-height: 100%;      /* ne dépasse jamais la hauteur du hero */
  overflow: hidden;      /* si l'écran est très court, on rogne plutôt que de déborder */
  position: relative;
}
.pret-mockup-head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pret-mockup-head b { font-size: 1.15rem; letter-spacing: -0.01em; }
.pret-mockup-head span { font-size: 0.78rem; color: var(--muted); }
.pret-mockup-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.pret-mockup-kpi { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; }
.pret-mockup-kpi small { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.pret-mockup-kpi b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pret-mockup-kpi b.g { color: var(--success); }
.pret-mockup-line { height: 7px; border-radius: 4px; background: var(--surface-2); margin-bottom: 8px; }
.pret-mockup-line.w80 { width: 80%; } .pret-mockup-line.w60 { width: 60%; } .pret-mockup-line.w70 { width: 70%; } .pret-mockup-line.w40 { width: 40%; }
.pret-mockup-bar {
  display: flex; justify-content: space-between; font-size: 0.82rem;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.pret-mockup-bar b { font-variant-numeric: tabular-nums; }
.pret-mockup-bar.total { border-bottom: none; border-top: 2px solid var(--ink); font-weight: 700; margin-top: 2px; padding-top: 6px; color: var(--success); }

/* Sections */
/* Densité de la landing : les sections respiraient sur ~144 px entre chacune
   (64 + 80 de padding cumulés), pour une échelle typographique qui restait
   petite face à 1320 px de large. Espacements réduits d'environ un tiers,
   échelle générale montée - la hiérarchie est conservée, tout monte ensemble. */
.pret-home-section { padding: 44px 0; border-top: 1px solid var(--line); }
.pret-home-section h2 {
  font-size: clamp(2rem, 3vw, 2.9rem);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 12px;
}
.pret-home-section .pret-section-sub {
  text-align: center;
  color: var(--muted);
  margin: 0 auto 28px;
  max-width: 34em;
  font-size: 1.05rem;
}

.pret-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pret-step-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--surface);
}
.pret-step-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  margin-bottom: 16px;
}
.pret-step-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.pret-step-card p { margin: 0; font-size: 0.98rem; color: var(--muted); line-height: 1.55; }

.pret-contains-section { padding: 52px 0; }
.pret-contains-section h2 { margin-bottom: 28px; }
/* S'aligne sur la largeur des cartes « Comment ça marche » (max-width: none →
   largeur du conteneur .pret-home). À 760 px au milieu d'une zone de 1320, le
   bloc accentuait l'impression de vide au lieu de la combler. Trois colonnes
   au-delà de 1100 px : six items sur deux rangées, sinon chaque item s'étirerait
   sur 630 px pour deux lignes de texte. */
.pret-contains {
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 32px clamp(22px, 4vw, 44px);
}
.pret-contains-item { display: flex; align-items: flex-start; gap: 12px; }
.pret-check-mark {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.pret-check-mark svg { display: block; }
.pret-contains-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pret-contains-text b { font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--ink); }
.pret-contains-text > span { font-size: 0.92rem; color: var(--muted); line-height: 1.4; }
@media (min-width: 1100px) {
  .pret-contains { grid-template-columns: repeat(3, 1fr); }
}

/* Bande des 3 arguments : icônes plus grandes, marges internes resserrées. */
.pret-reassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pret-reassure-item { text-align: center; padding: 0 8px; }
.pret-reassure-item .pret-reassure-icon {
  display: flex;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 10px;
}
.pret-reassure-icon svg { width: 48px; height: 48px; }
.pret-reassure-item b { display: block; font-size: 1.08rem; margin-bottom: 5px; }
.pret-reassure-item span { font-size: 0.95rem; color: var(--muted); line-height: 1.5; }

/* Lien de repli sous le CTA : présent pour qui a déjà un compte, assez discret
   pour ne pas concurrencer l'action principale. */
.pret-cta-aside {
  display: block;
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}
.pret-cta-aside:hover { color: var(--brand); text-decoration: underline; }
.pret-hero-cta .pret-cta-aside { text-align: left; }
.pret-final-cta .pret-cta-aside { text-align: center; }

.pret-final-cta { text-align: center; padding: 48px 0 36px; border-top: 1px solid var(--line); }
.pret-final-cta h2 { font-size: clamp(2rem, 3vw, 2.9rem); letter-spacing: -0.02em; margin: 0 0 22px; }

.pret-footer {
  text-align: center;
  padding: 24px 0 26px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.pret-footer a { color: var(--brand); text-decoration: none; font-weight: 600; }
.pret-footer a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  /* Mobile : vertical + scrollable, on lève la contrainte de hauteur d'écran. */
  .pret-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 48px; height: auto; min-height: 0; }
  .pret-mockup-wrap { max-width: 400px; margin: 0 auto; max-height: none; }
  .pret-mockup { transform: none; max-height: none; }
  .pret-steps3, .pret-reassure { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pret-contains { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   Animations d'entrée de la landing (sobre, style linear.app)
   ========================================================= */
@keyframes pretReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Cascade du hero au chargement (délai par élément via --reveal-delay) */
.reveal {
  opacity: 0;
  animation: pretReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
/* Révélation au scroll : opacity 0 dès le premier paint (aucun flash) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.is-revealed { opacity: 1; transform: none; }

/* Lévitation continue du mockup PDF (garde la légère rotation) */
@keyframes pretLevitate {
  0%, 100% { transform: translateY(-4px) rotate(1.4deg); }
  50%      { transform: translateY(4px) rotate(1.4deg); }
}
.pret-mockup { animation: pretLevitate 6s ease-in-out infinite; }

/* CTA principal : pulsation d'ombre au repos + hover */
@keyframes pretCtaPulse {
  0%, 100% { box-shadow: 0 8px 20px var(--brand-shadow); }
  50%      { box-shadow: 0 10px 30px rgba(192, 18, 12, 0.42); }
}
.pret-btn-lg {
  animation: pretCtaPulse 2.5s ease-in-out infinite;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, background 0.2s;
}
.pret-btn-lg:hover {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px var(--brand-shadow);
}

/* Cartes "Comment ça marche" : reveal (opacité 0.6s) + hover (transform 0.25s) sans conflit */
.pret-step-card {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s, border-color 0.25s;
}
.pret-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(5, 5, 5, 0.08);
  border-color: #dcdcdc;
}

/* Accessibilité : aucune animation ni mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .pret-mockup,
  .pret-btn-lg,
  .pret-card { animation: none !important; }
  .pret-btn-lg:hover,
  .pret-step-card:hover { transform: none !important; }
}

/* =========================================================
   Écran d'authentification
   ========================================================= */
/* Carte d'authentification : élargie (390 → 480 px de contenu) et remontée d'un
   cran en échelle. Elle était étroite et petite au milieu d'une page vide, alors
   que c'est le seul point d'attention de l'écran. Centrage vertical plutôt qu'une
   marge fixe : la carte ne « tombe » plus vers le haut sur un grand écran. */
.pret-shell.is-auth { padding-bottom: 24px; }
.pret-auth {
  max-width: 480px;
  margin: 0 auto;
  min-height: calc(100vh - var(--topbar-h) - 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.pret-auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
}
.pret-auth-card h1 { font-size: 1.85rem; letter-spacing: -0.02em; margin: 0 0 6px; text-align: center; }
.pret-auth-card .pret-auth-sub { text-align: center; color: var(--muted); font-size: 1rem; margin: 0 0 20px; }
/* Champs et bouton plus confortables : la saisie d'un mot de passe sur un
   champ de 44 px n'invite pas au clic. */
.pret-auth-card .pret-field > label { font-size: 0.92rem; }
.pret-auth-card .pret-input { min-height: 52px; font-size: 1rem; padding: 14px 16px; }
.pret-auth-card .pret-btn { min-height: 54px; font-size: 1.02rem; }
.pret-auth-card .pret-hint { font-size: 0.84rem; }
.pret-auth-error {
  background: var(--danger-bg);
  border: 1px solid rgba(192,18,12,.25);
  color: var(--brand);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.84rem;
  margin-bottom: 16px;
}
.pret-auth-note {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin-top: 16px;
}
.pret-auth-toggle {
  text-align: center;
  margin-top: 20px;
  font-size: 0.94rem;
  color: var(--muted);
}
.pret-auth-toggle button {
  background: none;
  border: none;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 0 2px;
  text-decoration: underline;
}
.pret-auth-back {
  text-align: center;
  margin-top: 14px;
}
.pret-auth-back a:not(.pret-topbar-ghost) { color: var(--muted); font-size: 0.82rem; text-decoration: none; }
.pret-auth-back a:not(.pret-topbar-ghost):hover { color: var(--brand); }
/* Le lien "← Retour à l'accueil" en bouton ghost : centré et un peu détaché */
.pret-auth-back a.pret-topbar-ghost { margin-top: 4px; }
.pret-auth-consent {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin: 14px 0 0;
}
.pret-auth-consent a { color: var(--brand); font-weight: 500; }
.pret-auth-legal {
  text-align: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.pret-auth-legal a { color: var(--muted); text-decoration: none; }
.pret-auth-legal a:hover { color: var(--brand); }

/* =========================================================
   Pages légales (Mentions légales, Confidentialité)
   ========================================================= */
.pret-legal { max-width: 720px; margin: 0 auto; }
.pret-legal-back {
  display: inline-block;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 18px;
}
.pret-legal-back:hover { color: var(--brand); }
.pret-legal-title {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.pret-legal-intro { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 8px; }
.pret-legal-section { margin-top: 26px; }
.pret-legal-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.pret-legal-section p { font-size: 0.92rem; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }
.pret-legal-section ul { margin: 0; padding-left: 18px; }
.pret-legal-section li { font-size: 0.92rem; line-height: 1.6; color: var(--ink); margin-bottom: 6px; }
.pret-legal-section a { color: var(--brand); }
.pret-legal .pret-footer { margin-top: 40px; }

/* =========================================================
   Impression (PDF via navigateur)
   ========================================================= */
@media print {
  .pret-topbar,
  .pret-nav,
  .pret-result-actions,
  .pret-cta-banner,
  .pret-why,
  .pret-autosave,
  .pret-progress { display: none !important; }
  body { background: #fff; }
  .pret-shell { max-width: none; padding: 0; }
  .pret-card { border: none; box-shadow: none; padding: 0; animation: none; }
  .pret-doc-section { break-inside: avoid; page-break-inside: avoid; }
  .pret-kpi, .pret-verdict, .pret-alert { break-inside: avoid; }
  @page { margin: 16mm 14mm; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }