/* Parcours d'estimation & document de devis */

/* ---------- Bascule de pôle ---------- */
.pole-switch { display: inline-flex; gap: 4px; padding: 4px; margin-top: 22px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; flex-wrap: wrap; }
.pole-switch button {
  border: 0; background: none; color: var(--text-2); font: inherit; font-weight: 600; font-size: .92rem;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
}
.pole-switch button.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- Calendrier de disponibilité ---------- */
.calendrier { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; margin: 14px 0; }
#calendrierBox.invalid .calendrier { border-color: #f87171; }
.calendrier-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendrier-entete b { font-size: .95rem; text-transform: capitalize; }
.calendrier-jours-sem { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-jour {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; background: var(--surface-2);
  color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, border-color .12s ease;
}
.cal-jour.vide { background: transparent; cursor: default; }
.cal-jour:hover:not(:disabled):not(.vide) { transform: translateY(-1px); border-color: var(--accent); }
.cal-jour.libre { background: color-mix(in srgb, var(--ok) 16%, var(--surface-2)); }
.cal-jour.optionnee { background: color-mix(in srgb, var(--warn) 24%, var(--surface-2)); }
.cal-jour.reservee { background: color-mix(in srgb, #f87171 24%, var(--surface-2)); cursor: not-allowed; }
.cal-jour.passee { background: transparent; color: var(--muted); opacity: .35; cursor: default; }
.cal-jour.haute-saison { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-jour.selected { background: var(--accent); color: var(--accent-ink); font-weight: 800; box-shadow: 0 0 0 2px var(--accent); }
.calendrier-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .76rem; color: var(--text-2); }
.calendrier-legende span { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-dot.libre { background: color-mix(in srgb, var(--ok) 55%, var(--surface-2)); }
.cal-dot.optionnee { background: color-mix(in srgb, var(--warn) 60%, var(--surface-2)); }
.cal-dot.reservee { background: color-mix(in srgb, #f87171 60%, var(--surface-2)); }

/* ---------- Mise en page ---------- */
/* align-items: stretch (et non "start") est nécessaire pour que la colonne
   totaux (plus courte) hérite de la hauteur de la colonne de gauche : sans
   ça, son position:sticky n'a presque aucune marge et se décroche dès les
   premiers défilements sur un long formulaire. */
.devis-layout { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }
.devis-layout.solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
@media (max-width: 980px) { .devis-layout { grid-template-columns: 1fr; } .totals { position: static; max-height: none; overflow-y: visible; } }

.bloc { margin-bottom: 34px; }
.bloc h2 { font-size: 1.25rem; }
.bloc > p.muted { font-size: .89rem; margin-top: -.3em; }
.sous-titre { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 22px 0 10px; }

/* ---------- Choix de formule ---------- */
.formule-choix { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 16px 0 6px; }
.fchoix {
  text-align: left; cursor: pointer; font: inherit; color: var(--text);
  padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--teinte) 26%, var(--line));
  background: var(--bg-2); transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.fchoix:hover { transform: translateY(-2px); border-color: var(--teinte); }
.fchoix.on { border-color: var(--teinte); background: color-mix(in srgb, var(--teinte) 12%, var(--bg-2)); box-shadow: inset 0 0 0 1px var(--teinte); }
.fchoix .pastille { display: block; width: 26px; height: 3px; border-radius: 999px; background: var(--teinte); margin-bottom: 10px; }
.fchoix b { display: block; font-size: 1.05rem; }
.fchoix .p { display: block; font-weight: 700; color: var(--teinte); font-size: .95rem; margin-top: 3px; }
.fchoix .ttc { display: block; font-size: .76rem; color: var(--muted); }

/* ---------- Colonne totaux ---------- */
/* Le total (totaux-fixe) reste toujours visible, non scrollable : le
   client voit le montant en temps réel sans avoir à chercher tout en bas.
   Seul le détail (.lignes), potentiellement long, défile avec la souris. */
.totaux-fixe { border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }
.lignes-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin: 14px 0 6px; }
.totals .lignes { max-height: 300px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent; }
.totals .lignes::-webkit-scrollbar { width: 6px; }
.totals .lignes::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.totals .lignes::-webkit-scrollbar-track { background: transparent; }
.ligne-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 12px 0 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.ligne-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.totals .line .lbl { font-size: .84rem; }
.totals .notes { margin-top: 14px; padding: 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 9%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--warn) 22%, var(--line)); }
.totals .notes p { font-size: .8rem; margin: 0 0 6px; color: var(--text-2); }
.totals .notes p:last-child { margin-bottom: 0; }

/* ---------- Playlist personnalisée ---------- */
.playlist-ligne {
  display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 10px; align-items: center;
  margin-bottom: 9px;
}
@media (max-width: 640px) { .playlist-ligne { grid-template-columns: 1fr; } }
.playlist-suppr {
  border: 1px solid var(--line); background: var(--bg-2); color: var(--muted);
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; font-size: .95rem;
}
.playlist-suppr:hover { color: #dc2626; border-color: #dc2626; }

/* ---------- Récapitulatif ---------- */
.recap-card h3 { margin-top: 26px; font-size: 1rem; color: var(--accent); }
.quote-block { border-left: 3px solid var(--accent); padding: 10px 14px; background: var(--bg-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .9rem; color: var(--text-2); }

/* =============================================================
   DOCUMENT DE DEVIS — toujours sur fond clair (lisible & imprimable)
   ============================================================= */
.devis-doc {
  background: #ffffff; color: #16161c;
  border-radius: var(--radius); padding: clamp(22px, 4vw, 46px);
  box-shadow: var(--shadow); max-width: 860px; margin: 22px auto 0;
  font-size: .92rem;
}
.devis-doc h2, .devis-doc h4 { color: #16161c; }
.devis-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 2px solid #16161c; }
.devis-marque { display: flex; align-items: center; gap: 14px; }
.devis-marque img { height: 46px; width: auto; display: block; }
.devis-marque b { display: block; font-size: 1.05rem; }
.devis-marque span { display: block; font-size: .76rem; color: #5b5b6b; }
.devis-coord { font-size: .8rem; color: #5b5b6b; margin: 12px 0 0; }
.devis-ref { text-align: right; }
.devis-ref h2 { font-size: 1.6rem; letter-spacing: .12em; margin: 0 0 .2em; }
.devis-ref p { font-size: .84rem; color: #5b5b6b; margin: 0; }
.devis-ref b { color: #16161c; font-size: 1rem; }

.devis-parties { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 24px 0; }
.devis-parties h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #8a8a9a; margin: 0 0 6px; }
.devis-parties p { color: #16161c; margin: 0; line-height: 1.55; }

.devis-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 0; }
.devis-table th { background: #f3f3f6; color: #5b5b6b; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid #e2e2ea; text-align: left; }
.devis-table td { padding: 9px 12px; border-bottom: 1px solid #ececf2; color: #16161c; }
.devis-table td.num, .devis-table th.num { text-align: right; white-space: nowrap; }
.devis-table tr.sect td { background: #fafafc; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: #8a8a9a; font-weight: 700; }
.devis-table tr.offerte td { font-weight: 600; }
.devis-table tr.offerte td.num { color: #1a7f4b; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
.devis-table tfoot td { border-bottom: 0; padding: 7px 12px; font-weight: 600; }
.devis-table tfoot tr.ttc td { border-top: 2px solid #16161c; font-size: 1.15rem; font-weight: 800; padding-top: 12px; }

.devis-conditions { margin-top: 26px; }
.devis-conditions h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #8a8a9a; margin-bottom: 8px; }
.devis-conditions ul { margin: 0; padding-left: 18px; }
.devis-conditions li { font-size: .82rem; color: #4a4a58; margin-bottom: 6px; }

.devis-signature { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 34px; }
.devis-signature span { font-size: .76rem; color: #8a8a9a; }
.ligne-signature { height: 54px; border-bottom: 1px solid #b8b8c6; }

/* ---------- Impression ---------- */
@media print {
  body { background: #fff !important; }
  body::before, .site-header, .site-footer, .steps, .no-print, .page-hero, .pole-switch { display: none !important; }
  main, .section-tight { padding: 0 !important; }
  .wrap { max-width: none; padding: 0; }
  .notice { display: none !important; }
  .devis-doc { box-shadow: none; border-radius: 0; margin: 0; padding: 0; max-width: none; font-size: 11pt; }
  .devis-table tr, .devis-signature { break-inside: avoid; }
  @page { margin: 16mm; }
}