/* ==========================================================================
   Cornibiscus — formulaire de devis commun + barre d'action mobile
   Destination FTP : assets/devis.css
   Chargé par toutes les pages (hors pages légales), avec assets/devis.js.
   Toutes les classes sont préfixées cb- : aucun conflit avec le CSS des pages.
   ========================================================================== */

:root {
  /* ----- Réglages ----- */
  --cb-orange: #E94E1B;        /* orange de marque : progression, bordure de sélection */
  --cb-orange-aa: #C73E0A;     /* orange des boutons et du texte : contraste 5,1:1 avec le blanc */
  --cb-orange-press: #A93408;  /* survol des boutons */
  --cb-bar-h: 64px;            /* hauteur de la barre d'action mobile */
  --cb-card-radius: 32px;      /* arrondi de la carte de la modale */
  --cb-card-max: 720px;        /* largeur maximale de la modale */
}

/* ---------- Verrouillage du défilement quand la modale est ouverte ---------- */
html.cb-lock, html.cb-lock body { overflow: hidden; }

/* ---------- Modale ---------- */
.cb-overlay { position: fixed; inset: 0; background: rgba(26,26,26,0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.cb-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
.cb-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s cubic-bezier(0.16,1,0.3,1), visibility .5s; }
.cb-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s cubic-bezier(0.16,1,0.3,1), visibility 0s; }
.cb-card { position: relative; width: 100%; max-width: var(--cb-card-max); max-height: 90vh; overflow-y: auto; background: #FAFAF7; color: #2A2A2A; border-radius: var(--cb-card-radius); padding: 3rem 3rem 2.5rem; transform: translateY(40px) scale(0.96); transition: transform .5s cubic-bezier(0.16,1,0.3,1); text-align: left; }
.cb-modal.is-open .cb-card { transform: none; }
.cb-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border: none; border-radius: 50%; background: #E5E5E5; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s, transform .3s; font-family: inherit; }
.cb-close:hover { background: #1a1a1a; color: #fff; transform: rotate(90deg); }
.cb-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; }

/* ---------- Formulaire (commun modale / intégré) ---------- */
.cb-wizard, .cb-wizard * { box-sizing: border-box; }
.cb-wizard { font-family: inherit; color: #2A2A2A; line-height: 1.5; }
.cb-wizard p { margin: 0; }
.cb-progress { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; padding-right: 3.5rem; }
.cb-progress span { flex: 1; height: 3px; background: #E5E5E5; border-radius: 100px; transition: background .4s; }
.cb-progress span.is-on { background: var(--cb-orange); }

.cb-step { display: none; }
.cb-step.is-active { display: block; animation: cb-in .5s cubic-bezier(0.16,1,0.3,1); }
@keyframes cb-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cb-wizard .cb-num { font-size: 0.8rem; color: #6A6A6A; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 0.75rem; text-transform: uppercase; }
.cb-wizard .cb-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.75rem; color: #1a1a1a; outline: none; }
.cb-wizard .cb-sub { font-size: 1rem; color: #6A6A6A; margin-bottom: 1.5rem; }
.cb-wizard .cb-group-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px; color: #2A2A2A; margin: 1.5rem 0 0.6rem; }
.cb-wizard .cb-group-label:first-of-type { margin-top: 0; }

/* Cartes de choix (étape 1) */
.cb-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.cb-option { padding: 1.25rem 1.5rem; border: 1.5px solid #E5E5E5; border-radius: 16px; background: #fff; color: #2A2A2A; font-family: inherit; font-size: 0.95rem; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.cb-option:hover { border-color: #1a1a1a; }
.cb-option.is-selected { border-color: var(--cb-orange); background: rgba(233,78,27,0.06); color: var(--cb-orange-aa); }

/* Pastilles (étape 2 : délai, budget) */
.cb-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cb-chip { min-height: 44px; padding: 0.7rem 1.15rem; border: 1.5px solid #E5E5E5; border-radius: 100px; background: #fff; color: #2A2A2A; font-family: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.cb-chip:hover { border-color: #1a1a1a; }
.cb-chip.is-selected { border-color: var(--cb-orange); background: rgba(233,78,27,0.06); color: var(--cb-orange-aa); }

/* Champs (étape 3) */
.cb-field { margin-bottom: 1.25rem; }
.cb-field label { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px; color: #2A2A2A; margin-bottom: 0.5rem; }
.cb-field label small { font-weight: 400; color: #6A6A6A; font-size: inherit; }
.cb-input { width: 100%; padding: 1rem 1.25rem; border: 1.5px solid #E5E5E5; border-radius: 12px; background: #fff; color: #2A2A2A; font-family: inherit; font-size: 1rem; transition: border-color .25s; -webkit-appearance: none; appearance: none; }
.cb-input:focus { outline: none; border-color: var(--cb-orange); }
.cb-input.is-invalid, .cb-input.is-invalid:focus { border-color: #D22728; background: #FDECEC; }
textarea.cb-input { min-height: 96px; resize: vertical; }
select.cb-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A6A6A' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 12px 8px; padding-right: 2.75rem; cursor: pointer; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.cb-error { display: none; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 500; color: #B91C1C; }
.cb-error.is-shown { display: block; }

/* Pied : retour / suivant */
.cb-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
.cb-back { background: transparent; border: none; color: #6A6A6A; font-family: inherit; font-size: 0.95rem; font-weight: 500; padding: 0.5rem; cursor: pointer; transition: color .3s; }
.cb-back:hover { color: #1a1a1a; }
.cb-back[disabled] { visibility: hidden; }
.cb-next { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--cb-orange-aa); color: #fff; border: none; border-radius: 100px; padding: 0.95rem 2rem; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background .3s, transform .3s, opacity .3s; }
.cb-next:hover:not([disabled]) { background: var(--cb-orange-press); transform: translateY(-1px); }
.cb-next[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Écrans de fin */
.cb-done { text-align: center; padding: 1.5rem 0 0.5rem; }
.cb-done-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--cb-orange); display: flex; align-items: center; justify-content: center; }
.cb-done-icon svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 3; fill: none; }
.cb-done-icon.is-error { background: #FDECEC; }
.cb-done-icon.is-error svg { stroke: #D22728; }
.cb-wizard .cb-done .cb-title { font-size: 2rem; margin-bottom: 1rem; }
.cb-wizard .cb-done p { font-size: 1.05rem; color: #6A6A6A; max-width: 420px; margin: 0 auto; }
.cb-mailto { display: inline-flex; align-items: center; margin-top: 1.25rem; background: var(--cb-orange-aa); color: #fff; border-radius: 100px; padding: 0.95rem 2rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background .3s; }
.cb-mailto:hover { background: var(--cb-orange-press); }

/* Focus clavier */
.cb-wizard :focus-visible, .cb-close:focus-visible, .cb-bar a:focus-visible { outline: 2px solid var(--cb-orange); outline-offset: 3px; }
.cb-next:focus-visible, .cb-mailto:focus-visible, .cb-bar .cb-bar-devis:focus-visible { outline-color: #1a1a1a; }
.cb-bar .cb-bar-devis:focus-visible { outline-color: #fff; }

/* ---------- Version intégrée dans une page (contact.html) ---------- */
.cb-inline .cb-progress { padding-right: 0; }
.cb-inline .cb-title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

/* ---------- Barre d'action mobile ---------- */
.cb-bar { display: none; }
@media (max-width: 900px) {
  .cb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; align-items: center; gap: 0.6rem; height: calc(var(--cb-bar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 0.85rem env(safe-area-inset-bottom, 0px); background: rgba(26,26,26,0.94); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(255,255,255,0.1); transform: translateY(110%); transition: transform .4s cubic-bezier(0.16,1,0.3,1); }
  .cb-bar.is-on { transform: none; }
  html.cb-lock .cb-bar, body.modal-open .cb-bar { transform: translateY(110%); }
  .cb-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 44px; border-radius: 100px; font-size: 0.92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .cb-bar svg { width: 20px; height: 20px; flex-shrink: 0; }
  .cb-bar .cb-bar-wa { width: 44px; flex: 0 0 44px; background: #25D366; }
  .cb-bar .cb-bar-wa svg { width: 22px; height: 22px; fill: #fff; }
  .cb-bar .cb-bar-call { flex: 1 1 0; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
  .cb-bar .cb-bar-call svg { fill: none; stroke: currentColor; stroke-width: 2; }
  .cb-bar .cb-bar-devis { flex: 1.35 1 0; background: var(--cb-orange-aa); color: #fff; }
  /* La barre remplace la bulle WhatsApp et réserve sa place sous le pied de page */
  html.cb-has-bar .whatsapp-float { display: none; }
  html.cb-has-bar body footer { padding-bottom: calc(1.5rem + var(--cb-bar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Mobile : modale plein écran ---------- */
@media (max-width: 600px) {
  .cb-modal { padding: 0; }
  .cb-card { max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 4.75rem 1.5rem 2rem; }
  .cb-close { top: 1rem; right: 1.25rem; }
  .cb-progress { padding-right: 0; }
  .cb-options { grid-template-columns: 1fr; }
  .cb-option { padding: 1.05rem 1.25rem; }
  .cb-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-overlay, .cb-modal, .cb-card, .cb-bar { transition: none; }
  .cb-step.is-active { animation: none; }
}