/*
 * Comparator visual theme
 * Port of the archived React simulator design system.
 * Business logic remains in the PHP/JS comparator; this file only owns the UI.
 */
:root {
  --cmp-primary: var(--wl-primary, #F27A54);
  --cmp-primary-dark: var(--wl-primary-dark, #D65A3B);
  --cmp-primary-light: var(--wl-primary-light, #FFE5DE);
  --cmp-secondary: var(--wl-secondary, #0E2A3D);
  --cmp-bg: var(--wl-bg, #FAFAFA);
  --cmp-border: var(--wl-border, #E2E8F0);
  --cmp-text: var(--wl-text, #0F172A);
  --cmp-muted: var(--wl-text-muted, #64748B);
  --cmp-shadow-card: 0 8px 30px -4px rgba(0,0,0,.07);
  --cmp-shadow-warm: 0 20px 40px -15px rgba(231,111,81,.15);
}

/* Same warm mesh as the React application. */
.comp-bg,
.sim-wrapper {
  background-color: var(--cmp-bg, #FAFAFA) !important;
  background-image:
    radial-gradient(at 89% 0%, rgba(255,229,222,.45) 0, transparent 50%),
    radial-gradient(at 1% 0%, rgba(254,249,230,.55) 0, transparent 50%),
    radial-gradient(at 50% 30%, rgba(255,248,246,.7) 0, transparent 55%),
    radial-gradient(at 80% 100%, rgba(255,229,222,.3) 0, transparent 50%);
}

/* Courtier wizard: React's glass card, spacing and motion. Plus translucide
   et plus saturé que l'ancien blanc quasi-opaque, pour que le mesh chaud du
   fond se devine à travers (liquid glass) au lieu d'un simple panneau blanc
   flouté. Les cartes qu'il contient (boutons, drop zones…) restent en blanc
   plein pour ressortir nettement dessus. */
.comp-main { width: 100%; max-width: none; padding: 2rem 2.5rem 4rem; }
.wz-card {
  max-width: 800px;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(165deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(15,23,42,.04), var(--cmp-shadow-card);
}
.cmp-stepper {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 auto 1.25rem;
  max-width: none;
  padding: .7rem .9rem;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}
.cmp-stepper-item { display:flex; align-items:center; gap:.4rem; min-width:0; color:#94a3b8; }
.cmp-stepper-dot { width:1.8rem; height:1.8rem; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:999px; background:#f1f5f9; color:#94a3b8; font-size:.65rem; transition:all .25s; }
.cmp-stepper-label { font-size:.65rem; font-weight:800; white-space:nowrap; color:#94a3b8; transition:color .25s; }

/* Étape courante : seul point d'accent plein. */
.cmp-stepper-item.is-current .cmp-stepper-dot { color:#fff; background:var(--cmp-primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--cmp-primary) 14%, transparent); }
.cmp-stepper-item.is-current .cmp-stepper-label { color:var(--cmp-primary-dark); font-weight:900; }

/* Étapes validées : discrètes (contour + coche), pas de remplissage plein. */
.cmp-stepper-item.is-done .cmp-stepper-dot { color:var(--cmp-primary-dark); background:color-mix(in srgb, var(--cmp-primary) 10%, white); border:1.5px solid color-mix(in srgb, var(--cmp-primary) 35%, transparent); }
.cmp-stepper-item.is-done .cmp-stepper-dot i { display:none; }
.cmp-stepper-item.is-done .cmp-stepper-dot::before { content:"\f00c"; font:900 .6rem "Font Awesome 6 Free"; }
.cmp-stepper-item.is-done .cmp-stepper-label { color:#64748B; font-weight:700; }

.cmp-stepper-line { height:2px; flex:1 1 auto; min-width:12px; background:#e2e8f0; border-radius:99px; transition:background .25s; }
.cmp-stepper-line.is-done { background:color-mix(in srgb, var(--cmp-primary) 45%, #e2e8f0); }
.wz-step-header { gap: 1rem; }
.wz-icon-wrap {
  background: color-mix(in srgb, var(--cmp-primary) 9%, white);
  border-color: color-mix(in srgb, var(--cmp-primary) 25%, white);
}
.wz-icon-wrap i { color: var(--cmp-primary-dark) !important; }
.wz-bar-fill { background: linear-gradient(90deg, var(--cmp-primary), var(--cmp-primary-dark)); }
.btn-next {
  background: var(--cmp-secondary);
}
.btn-next:hover {
  background: color-mix(in srgb, var(--cmp-secondary) 85%, black);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cmp-secondary) 28%, transparent);
}
.btn-primary, .cta-btn {
  background: linear-gradient(135deg, var(--cmp-primary-dark), var(--cmp-primary));
}
.btn-primary:hover { background: var(--cmp-primary); }
.cta-btn:hover:not(:disabled) { box-shadow: 0 12px 32px color-mix(in srgb, var(--cmp-primary) 28%, transparent); }
.proj-btn.active, .loan-btn.active, .bank-btn.active {
  border-color: var(--cmp-primary);
  background: color-mix(in srgb, var(--cmp-primary) 7%, white);
  color: var(--cmp-primary-dark);
}
.borrower-count-btn {
  display:flex; align-items:center; justify-content:center; gap:.55rem; min-height:3rem;
  border:2px solid #e2e8f0; border-radius:.9rem; background:#f8fafc; color:#94a3b8;
  font-size:.75rem; font-weight:800; transition:all .2s; cursor:pointer;
}
.borrower-count-btn:hover { border-color:color-mix(in srgb, var(--cmp-primary) 42%, #cbd5e1); background:#fff; }
.borrower-count-btn.active { border-color:var(--cmp-primary); background:color-mix(in srgb, var(--cmp-primary) 7%, white); color:var(--cmp-primary-dark); box-shadow:0 0 0 3px color-mix(in srgb, var(--cmp-primary) 12%, transparent); }
.proj-btn:hover:not(.active), .loan-btn:hover:not(.active), .bank-btn:hover:not(.active) {
  border-color: color-mix(in srgb, var(--cmp-primary) 42%, #cbd5e1);
}
.btn-chip-teal, .btn-chip-sky {
  color: var(--cmp-primary-dark);
  background: color-mix(in srgb, var(--cmp-primary) 8%, white);
  border-color: color-mix(in srgb, var(--cmp-primary) 24%, white);
}
.btn-chip-teal:hover, .btn-chip-sky:hover { background: var(--cmp-primary-light); }
.comp-input:focus { border-color: var(--cmp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmp-primary) 13%, transparent); }
.frais-range::-webkit-slider-thumb { background: var(--cmp-primary); }
.frais-range { background: linear-gradient(to right, var(--cmp-primary) 0%, #e2e8f0 0%); }

/* React-style OCR choice cards. */
.ocr-doc-card:hover,
.ocr-doc-card:has(input:checked) {
  border-color: var(--cmp-primary);
  background: color-mix(in srgb, var(--cmp-primary) 5%, white);
  box-shadow: var(--cmp-shadow-warm);
}

/* Result view: large warm hero and clean offer cards. */
.tarif-card {
  border-radius: 1.25rem;
  border-color: rgba(226,232,240,.8);
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.tarif-card.best {
  border-color: var(--cmp-primary);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--cmp-primary) 18%, transparent);
}
.best-bar { background: linear-gradient(90deg, var(--cmp-primary), var(--cmp-primary-dark)); }
.tc-badge.teal { background: linear-gradient(135deg, var(--cmp-primary-dark), var(--cmp-primary)); }
.tc-garantie { color: var(--cmp-primary-dark); background: color-mix(in srgb, var(--cmp-primary) 8%, white); border-color: color-mix(in srgb, var(--cmp-primary) 22%, white); }

/* Legacy utility names still emitted by the PHP comparator.  Keep them as
   compatibility aliases so an old fragment cannot bring the teal palette back. */
.text-teal-400, .text-teal-500, .text-teal-600, .text-teal-700 { color: var(--cmp-primary-dark) !important; }
.bg-teal-50, .bg-teal-100 { background-color: color-mix(in srgb, var(--cmp-primary) 8%, white) !important; }
.bg-teal-400, .bg-teal-500, .bg-teal-600 { background-color: var(--cmp-primary) !important; }
.border-teal-100, .border-teal-200, .border-teal-300, .border-teal-500 { border-color: color-mix(in srgb, var(--cmp-primary) 26%, white) !important; }
.border-t-teal-500 { border-top-color: var(--cmp-primary) !important; }
.from-teal-400, .from-teal-500 { --tw-gradient-from: var(--cmp-primary) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in srgb, var(--cmp-primary-dark) 0%, transparent) var(--tw-gradient-to-position) !important; }
.to-teal-600, .to-teal-700 { --tw-gradient-to: var(--cmp-primary-dark) var(--tw-gradient-to-position) !important; }
.hover\:text-teal-600:hover { color: var(--cmp-primary-dark) !important; }
.hover\:bg-teal-700:hover { background-color: var(--cmp-primary-dark) !important; }

/* Public simulator generated by simulateur.js. */
.sim-content, #sim-content { max-width: 980px; }
.sim-stepper-bar { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sim-step-dot { border-color: var(--cmp-border); }
.sim-step-item.current .sim-step-dot,
.sim-step-item.done .sim-step-dot { background: var(--cmp-primary); border-color: var(--cmp-primary); }
.sim-step-item.current .sim-step-label,
.sim-step-item.done .sim-step-label { color: var(--cmp-primary-dark); }
.sim-step-line.done { background: var(--cmp-primary); }
.sim-choice-card.active { border-color: var(--cmp-primary); background: color-mix(in srgb, var(--cmp-primary) 6%, white); }
.sim-choice-card:hover { border-color: var(--cmp-primary); box-shadow: var(--cmp-shadow-card); }
.sim-btn-primary { background: linear-gradient(135deg, var(--cmp-primary-dark), var(--cmp-primary)) !important; }
.sim-btn-primary:hover { filter: brightness(1.04); }

@media (max-width: 767px) {
  /* padding-top : le titre "Comparateur" doit respirer sous le header flottant,
     qui est posé juste au-dessus de lui sur mobile. */
  .comp-main { width: 100%; padding: 1.5rem .75rem 3rem; }
  .wz-card { padding: 1rem; border-radius: 1.25rem; }
  .page-header { margin-bottom: .25rem; }
  .cmp-header-title-block { width: 100%; text-align: center; }
  .cmp-header-title-block > div { justify-content: center; }
  .sim-content, #sim-content { padding: 1rem .75rem .5rem; }

  /* Étapes : tient sur une ligne sans scroll — les libellés (déjà répétés dans
     l'en-tête de chaque carte d'étape) s'effacent, seuls les points + traits
     de liaison restent.
     margin à 0 : la pastille occupe toute la largeur que lui donne le
     flex-basis:100% posé par comparateur.php (≤900px), et les traits de
     liaison (flex:1 1 auto) s'étirent pour répartir les 5 points sur toute
     cette largeur — sans quoi ils resteraient tassés à gauche avec du vide à
     droite. margin-bottom nul : .page-header porte déjà l'espacement vers la
     carte juste en dessous, sans quoi les deux marges s'additionneraient. */
  .cmp-stepper {
    overflow-x: visible; flex-wrap: nowrap; justify-content: space-between; padding: .55rem .8rem; gap: .35rem; margin: 0; width: auto; max-width: 100%;
    /* Le galet blanc plein alourdit inutilement le mobile : on ne garde
       qu'un souffle de fond, presque transparent. */
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.25);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cmp-stepper-item { flex: 0 0 auto; gap: 0; position: relative; }
  .cmp-stepper-label { display: none; }
  .cmp-stepper-dot { width: 1.6rem; height: 1.6rem; font-size: .6rem; }
  /* Le libellé masqué réduit la cible cliquable au seul rond de 1.6rem
     (~25px, sous les 44px recommandés) : le fond blanc qui suggérait une
     zone de tap plus large a lui-même été allégé. On agrandit donc la zone
     de clic réelle via un ::after invisible, sans toucher au flex layout
     (une marge négative aurait décalé les traits de liaison voisins). */
  .cmp-stepper-item::after { content: ""; position: absolute; inset: -.6rem; }
  .cmp-stepper-line { flex: 1 1 auto; min-width: 8px; }

  /* Marge de respiration de l'ombre portée (nécessaire en desktop pour le
     carrousel) : inutile une fois la carte seule à l'écran — sur mobile elle
     ne fait qu'ajouter du vide entre les étapes et le formulaire. */
  .wz-track > .wz-step { padding: .125rem 0 1rem; }
}