/* ==========================================================================
   CBIZA.PRO — Feuille de style du MOTEUR DE DEVIS
   Estimateur en ligne (.cbq) · Devis client (.cbq-doc) · Reservation (.cbq-book)
   Chargee par le plugin cbiza-quote.php sur les pages qui en ont besoin.
   ========================================================================== */

:root {
  --q-navy: #091a2b;
  --q-blue: #0c5adb;
  --q-green: #1e824c;
  --q-green-2: #27ae60;
  --q-wa: #25d366;
  --q-line: #e2e8f0;
  --q-bg: #f7f9fc;
  --q-gray: #5b6b7c;
  --q-radius: 14px;
  --q-shadow: 0 12px 34px rgba(9, 26, 43, .12);
  --q-ft: 'Outfit', 'Inter', system-ui, sans-serif;
  --q-fb: 'Inter', system-ui, sans-serif;
}

.cbq, .cbq-doc, .cbq-book, .cbq-thanks { font-family: var(--q-fb); color: #22303f; box-sizing: border-box; }
.cbq *, .cbq-doc *, .cbq-book *, .cbq-thanks * { box-sizing: border-box; }

/* ==========================================================================
   1. ESTIMATEUR
   ========================================================================== */

.cbq {
  display: grid; gap: 22px; width: 92%; max-width: 1120px; margin: 0 auto;
  align-items: start;
}

.cbq-panel {
  background: #fff; border: 1px solid var(--q-line); border-radius: var(--q-radius);
  padding: 22px; box-shadow: var(--q-shadow);
}

.cbq-group { padding: 0 0 20px; border-bottom: 1px solid var(--q-line); margin-bottom: 20px; }
.cbq-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.cbq-q {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--q-ft); font-weight: 700; font-size: 17px; color: var(--q-navy);
  margin-bottom: 12px;
}
.cbq-num {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--q-blue); color: #fff; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}

.cbq-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.cbq-opt {
  appearance: none; cursor: pointer;
  background: #fff; border: 2px solid var(--q-line); border-radius: 10px;
  padding: 12px 16px; font-family: var(--q-fb); font-size: 15px; color: #22303f;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  text-align: left; line-height: 1.35;
}
.cbq-opt:hover { border-color: #b9c6d6; }
.cbq-opt.is-on { border-color: var(--q-green); background: #eef8f2; color: var(--q-green); font-weight: 700; }
.cbq-opts.is-multi .cbq-opt::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 9px;
  border: 2px solid #c3cedb; border-radius: 4px; vertical-align: -2px;
}
.cbq-opts.is-multi .cbq-opt.is-on::before { background: var(--q-green); border-color: var(--q-green); }

.cbq-number { display: flex; align-items: center; gap: 10px; }
.cbq-step {
  width: 46px; height: 46px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--q-line); background: #fff;
  font-size: 22px; line-height: 1; color: var(--q-navy);
}
.cbq-step:hover { border-color: var(--q-green); color: var(--q-green); }
.cbq-input {
  width: 110px; height: 46px; text-align: center;
  border: 2px solid var(--q-line); border-radius: 10px;
  font-family: var(--q-ft); font-size: 20px; font-weight: 700; color: var(--q-navy);
}
.cbq-input:focus { outline: none; border-color: var(--q-green); }
.cbq-input::-webkit-outer-spin-button, .cbq-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cbq-input[type=number] { -moz-appearance: textfield; }
.cbq-suffix { font-family: var(--q-ft); font-weight: 700; color: var(--q-gray); font-size: 16px; }
.cbq-help { margin: 8px 0 0; font-size: 13px; color: var(--q-gray); }

/* ---------- Colonne resultat ---------- */
.cbq-side { position: relative; }

.cbq-result {
  background: linear-gradient(135deg, #0b2036 0%, #14304d 100%); color: #fff;
  border-radius: var(--q-radius) var(--q-radius) 0 0; padding: 24px;
}
.cbq-label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.cbq-amount { font-family: var(--q-ft); font-weight: 800; font-size: 46px; line-height: 1.1; margin: 4px 0 2px; }
.cbq-amount em { font-style: normal; font-size: 17px; font-weight: 600; opacity: .8; }
.cbq-monthly { font-size: 14px; color: #9fd8b6; font-weight: 600; margin-bottom: 6px; }

.cbq-detail { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.cbq-detail li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 4px 0; opacity: .92; }
.cbq-detail li b { white-space: nowrap; font-weight: 700; }

/* ---------- Formulaire de capture ---------- */
.cbq-form {
  background: #fff; border: 1px solid var(--q-line); border-top: none;
  border-radius: 0 0 var(--q-radius) var(--q-radius); padding: 22px;
  box-shadow: var(--q-shadow);
}
.cbq-formtitle { font-family: var(--q-ft); font-weight: 700; font-size: 17px; color: var(--q-navy); margin: 0 0 14px; }
.cbq-field { margin-bottom: 12px; }
.cbq-field label { display: block; font-size: 13px; font-weight: 600; color: var(--q-gray); margin-bottom: 5px; }
.cbq-field input {
  width: 100%; height: 46px; padding: 0 13px;
  border: 1.5px solid var(--q-line); border-radius: 9px;
  font-family: var(--q-fb); font-size: 15px; color: #22303f; background: #fff;
}
.cbq-field input:focus { outline: none; border-color: var(--q-green); box-shadow: 0 0 0 3px rgba(30,130,76,.12); }
.cbq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cbq-submit {
  width: 100%; margin-top: 6px; padding: 17px 20px; cursor: pointer;
  background: var(--q-green); color: #fff; border: none; border-radius: 10px;
  font-family: var(--q-ft); font-weight: 700; font-size: 16.5px;
  transition: filter .15s ease, transform .12s ease;
}
.cbq-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cbq-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.cbq-legal { font-size: 12px; color: var(--q-gray); margin: 10px 0 0; line-height: 1.5; }

/* ---------- Messages ---------- */
.cbq-msg { margin-top: 14px; padding: 14px 16px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; }
.cbq-msg.is-ok { background: #e8f5e9; color: #14532d; border: 1px solid #b7e0c2; }
.cbq-msg.is-err { background: #fdecea; color: #9b1c1c; border: 1px solid #f5c2c0; }
.cbq-msg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cbq-go, .cbq-wa, .cbq-tel, .cbq-print {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 9px; text-decoration: none; cursor: pointer;
  font-family: var(--q-ft); font-weight: 700; font-size: 15px; border: none;
}
.cbq-go { background: var(--q-blue); color: #fff; }
.cbq-wa { background: var(--q-wa); color: #fff; }
.cbq-tel { background: var(--q-navy); color: #fff; }
.cbq-print { background: #fff; color: var(--q-navy); border: 2px solid var(--q-line); }
.cbq-go:hover, .cbq-wa:hover, .cbq-tel:hover { filter: brightness(1.07); }

/* ==========================================================================
   1 bis. SÉLECTEUR DE SERVICE  (page /devis-gratuit/)
   ========================================================================== */

.cbq-multi { width: 100%; }

.cbq-tabs {
  display: grid; gap: 12px; width: 92%; max-width: 1120px; margin: 0 auto 24px;
  grid-template-columns: 1fr;
}

.cbq-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  cursor: pointer; text-align: left; position: relative;
  padding: 18px 20px 18px 56px;
  background: #fff; border: 2px solid var(--q-line); border-radius: var(--q-radius);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cbq-tab i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: #9aa8b8; transition: color .15s ease;
}
.cbq-tab-t { font-family: var(--q-ft); font-weight: 700; font-size: 16px; color: var(--q-navy); line-height: 1.25; }
.cbq-tab-s { font-size: 13px; color: var(--q-gray); }

.cbq-tab:hover { border-color: #b9c6d6; transform: translateY(-1px); }
.cbq-tab.is-on {
  border-color: var(--q-green); background: #f2faf5;
  box-shadow: 0 8px 22px rgba(30, 130, 76, .14);
}
.cbq-tab.is-on i { color: var(--q-green); }
.cbq-tab.is-on .cbq-tab-t { color: var(--q-green); }

.cbq-pane[hidden] { display: none; }

@media (min-width: 900px) {
  .cbq-tabs { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ==========================================================================
   2. DOCUMENT DEVIS  (/devis/)
   ========================================================================== */

.cbq-doc {
  width: 92%; max-width: 780px; margin: 26px auto;
  background: #fff; border: 1px solid var(--q-line); border-radius: var(--q-radius);
  padding: 30px; box-shadow: var(--q-shadow);
}
.cbq-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; border-bottom: 3px solid var(--q-navy); padding-bottom: 16px; margin-bottom: 18px; }
.cbq-doc-ref { display: inline-block; background: var(--q-blue); color: #fff; font-family: var(--q-ft); font-weight: 700; font-size: 13px; letter-spacing: .05em; padding: 5px 12px; border-radius: 20px; }
.cbq-doc-head h2 { font-family: var(--q-ft); font-size: 27px; color: var(--q-navy); margin: 10px 0 4px; line-height: 1.2; }
.cbq-doc-head p { margin: 0; color: var(--q-gray); font-size: 14px; }
.cbq-badge { padding: 7px 15px; border-radius: 20px; font-family: var(--q-ft); font-weight: 700; font-size: 13px; }
.cbq-badge-ok { background: #e8f5e9; color: var(--q-green); border: 1px solid #b7e0c2; }

.cbq-doc-client { background: var(--q-bg); border-radius: 10px; padding: 15px 18px; font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }

.cbq-doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cbq-doc-table td { padding: 11px 0; border-bottom: 1px solid var(--q-line); vertical-align: top; }
.cbq-doc-table td:last-child { text-align: right; white-space: nowrap; font-weight: 600; padding-left: 16px; }
.cbq-doc-total td { border-bottom: none; border-top: 2px solid var(--q-navy); padding-top: 16px; font-family: var(--q-ft); font-weight: 800; font-size: 19px; color: var(--q-navy); }
.cbq-doc-total td:last-child { font-size: 26px; color: var(--q-blue); }

.cbq-doc-note { font-size: 13px; color: var(--q-gray); line-height: 1.6; margin: 18px 0 0; padding: 14px; background: var(--q-bg); border-radius: 9px; }
.cbq-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cbq-doc-empty { text-align: center; }
.cbq-doc-empty h2 { font-family: var(--q-ft); color: var(--q-navy); }

/* ==========================================================================
   3. RESERVATION
   ========================================================================== */

.cbq-book {
  width: 92%; max-width: 780px; margin: 0 auto 40px;
  background: #fff; border: 1px solid var(--q-line); border-radius: var(--q-radius);
  padding: 28px; box-shadow: var(--q-shadow);
}
.cbq-book h2 { font-family: var(--q-ft); font-size: 25px; color: var(--q-navy); margin: 0 0 6px; }
.cbq-book-sub { color: var(--q-gray); font-size: 15px; margin: 0 0 22px; }
.cbq-book-block { margin-bottom: 20px; }
.cbq-book-lab { display: block; font-family: var(--q-ft); font-weight: 700; font-size: 15px; color: var(--q-navy); margin-bottom: 10px; }

.cbq-days { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cbq-day {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  background: #fff; border: 2px solid var(--q-line); border-radius: 10px;
  padding: 12px 15px; font-family: var(--q-fb); font-size: 14.5px; color: #22303f;
}
.cbq-day.is-on, .cbq-slot.is-on { border-color: var(--q-green); background: #eef8f2; color: var(--q-green); font-weight: 700; }

.cbq-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.cbq-slot {
  cursor: pointer; background: #fff; border: 2px solid var(--q-line); border-radius: 10px;
  padding: 12px 16px; font-family: var(--q-fb); font-size: 14.5px; color: #22303f;
}
.cbq-addr { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--q-line); border-radius: 10px; font-family: var(--q-fb); font-size: 15px; }
.cbq-addr:focus { outline: none; border-color: var(--q-green); }

.cbq-book-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--q-line); font-size: 15px; color: var(--q-gray); }
.cbq-book-total strong { font-family: var(--q-ft); font-size: 22px; color: var(--q-navy); }
.cbq-book-dep strong { color: var(--q-green); }

.cbq-pay {
  width: 100%; margin-top: 14px; padding: 18px 20px; cursor: pointer;
  background: var(--q-green); color: #fff; border: none; border-radius: 11px;
  font-family: var(--q-ft); font-weight: 700; font-size: 17px;
}
.cbq-pay:hover { filter: brightness(1.07); }
.cbq-pay:disabled, .cbq-later:disabled { opacity: .65; cursor: wait; }
.cbq-later {
  width: 100%; margin-top: 10px; padding: 15px 20px; cursor: pointer;
  background: #fff; color: var(--q-navy); border: 2px solid var(--q-line); border-radius: 11px;
  font-family: var(--q-ft); font-weight: 700; font-size: 15.5px;
}
.cbq-later:hover { border-color: var(--q-navy); }
.cbq-book-legal { font-size: 12.5px; color: var(--q-gray); text-align: center; margin: 12px 0 0; line-height: 1.55; }
.cbq-book-done { text-align: center; }
.cbq-book-done h2 { color: var(--q-green); }

/* ==========================================================================
   4. PAGE DE CONFIRMATION
   ========================================================================== */

.cbq-thanks { width: 92%; max-width: 660px; margin: 50px auto; text-align: center; }
.cbq-thanks-ico {
  width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--q-green); color: #fff; font-size: 40px; line-height: 78px;
}
.cbq-thanks h1 { font-family: var(--q-ft); font-size: 34px; color: var(--q-navy); margin: 0 0 14px; }
.cbq-thanks p { font-size: 16.5px; line-height: 1.65; color: #3c4a5a; margin: 0 0 12px; }
.cbq-thanks a { color: var(--q-blue); }

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  .cbq { width: 94%; gap: 16px; }
  .cbq-panel, .cbq-form, .cbq-doc, .cbq-book { padding: 18px; }
  .cbq-amount { font-size: 38px; }
  .cbq-opt { flex: 1 1 calc(50% - 5px); padding: 12px 10px; font-size: 14px; }
  .cbq-opts.is-multi .cbq-opt { flex: 1 1 100%; }
  .cbq-doc-head h2 { font-size: 22px; }
  .cbq-doc-total td:last-child { font-size: 22px; }
  .cbq-doc-actions a, .cbq-doc-actions button { flex: 1 1 100%; }
}

@media (min-width: 1000px) {
  .cbq { grid-template-columns: 1.25fr .75fr; gap: 26px; }
  .cbq-side { position: sticky; top: 20px; }
}

/* ==========================================================================
   6. IMPRESSION DU DEVIS  (enregistrer en PDF)
   ========================================================================== */

@media print {
  .lp-header, .cbiza-header, .cbann, .lp-callbar, .cbq-book, .cbq-doc-actions { display: none !important; }
  .cbq-doc { box-shadow: none; border: none; max-width: 100%; width: 100%; margin: 0; padding: 0; }
  body { background: #fff; }
}

/* ==========================================================================
   CORRECTIF BOUTONS — moteur de devis
   Meme cause que sur les pages de vente : la feuille globale ajoute un
   chevron ::after et interdit le retour a la ligne. On neutralise ici.
   ========================================================================== */

.cbq-tab::after, .cbq-opt::after, .cbq-submit::after, .cbq-step::after,
.cbq-go::after, .cbq-wa::after, .cbq-tel::after, .cbq-print::after,
.cbq-pay::after, .cbq-later::after, .cbq-day::after, .cbq-slot::after,
.cbq-quick-btn::after, .ctf-submit::after, .ctf-quick-btn::after, .ctf-quick-tel::after,
.cbq-tab:hover::after, .cbq-submit:hover::after, .cbq-pay:hover::after,
.ctf-submit:hover::after, .ctf-quick-btn:hover::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
}

.cbq-tab, .cbq-opt, .cbq-submit, .cbq-go, .cbq-wa, .cbq-tel, .cbq-print,
.cbq-pay, .cbq-later, .cbq-day, .cbq-slot,
.ctf-submit, .ctf-quick-btn, .ctf-quick-tel {
  white-space: normal !important;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.cbq-submit > i, .cbq-go > i, .cbq-wa > i, .cbq-tel > i, .cbq-print > i,
.ctf-submit > i, .ctf-quick-btn > i, .ctf-quick-tel > i {
  flex: 0 0 auto;
}

/* Le jour reste sur une ligne (format court) mais ne deborde jamais. */
.cbq-day { white-space: nowrap !important; }

@media (max-width: 480px) {
  .cbq-submit, .cbq-pay, .cbq-later, .ctf-submit { padding-left: 14px; padding-right: 14px; font-size: 15.5px; }
  .cbq-go, .cbq-wa, .cbq-tel, .cbq-print { width: 100%; padding: 13px 14px; font-size: 14.5px; }
  .cbq-tab { padding: 16px 14px 16px 50px; }
  .cbq-tab i { left: 15px; font-size: 19px; }
  .cbq-tab-t { font-size: 15px; }
}

/* ==========================================================================
   7. EN-TETE ET ETAT VIDE DE LA PAGE /devis/
   ========================================================================== */

.cbq-entete h1 {
  color: #fff; font-family: var(--q-ft); font-size: 32px; line-height: 1.2; margin: 0 0 12px;
}
.cbq-entete p {
  color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.6;
  max-width: 640px; margin: 0 auto;
}

.cbq-doc-empty { text-align: center; padding: 40px 26px 34px; }
.cbq-empty-ico {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: #eef3f9; color: var(--q-blue);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.cbq-doc-empty h2 { font-family: var(--q-ft); font-size: 25px; color: var(--q-navy); margin: 0 0 12px; }
.cbq-doc-empty p { font-size: 15.5px; line-height: 1.65; color: var(--q-gray); max-width: 480px; margin: 0 auto; }
.cbq-empty-actions { justify-content: center; margin-top: 26px; }

@media (max-width: 600px) {
  .cbq-entete h1 { font-size: 25px; }
  .cbq-entete p { font-size: 15px; }
  .cbq-doc-empty { padding: 30px 18px 26px; }
  .cbq-doc-empty h2 { font-size: 21px; }
}

/* ==========================================================================
   8. CHOIX DE LA DATE — grille plutot que defilement horizontal
   Un carrousel horizontal cache la moitie des dates et se manipule mal au
   pouce. On passe en grille : toutes les dates sont visibles d'un coup.
   ========================================================================== */

.cbq-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-bottom: 0;
}
.cbq-day {
  width: 100%;
  padding: 13px 8px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbq-slots { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cbq-slot { width: 100%; text-align: center; }

@media (min-width: 560px) {
  .cbq-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cbq-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 820px) {
  .cbq-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}