/* =============================================
   DEVIS — styles spécifiques aux pages de devis
   (à charger en plus de style.css)
   ============================================= */

/* ---------- PAGE DE CHOIX ---------- */
.devis-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 1rem;
}
.devis-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--ease);
  text-align: left;
  /* Les cartes n'ont plus de visuel : on conserve la hauteur d'origine
     (visuel 4/3 + contenu) pour ne pas casser le rythme de la grille.
     Le paragraphe (flex:1) absorbe l'espace, prix et bouton restent
     alignés en bas d'une carte à l'autre. */
  min-height: 37rem;
}
.devis-choice-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
/* Fine barre colorée en haut de carte : reprend l'identité couleur que
   portait le visuel supprimé, sans occuper de place. */
.devis-choice-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
}
.devis-choice-card:nth-child(1)::before { background: linear-gradient(90deg, #2D2820, #4A3C2E); }
.devis-choice-card:nth-child(2)::before { background: linear-gradient(90deg, #C4B09C, #8A7265); }
.devis-choice-card:nth-child(3)::before { background: linear-gradient(90deg, #3C4A3A, #6E7F6C); }
.devis-choice-card:nth-child(4)::before { background: linear-gradient(90deg, #4A4030, #6E5E44); }
.devis-choice-card:nth-child(5)::before { background: linear-gradient(90deg, #2E3A3C, #4C5E60); }
.devis-choice-card:nth-child(6)::before { background: linear-gradient(90deg, #463A42, #6A5662); }

/* Catégorie (Photo / Vidéo) en haut de carte */
.devis-choice-tag {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 1.5rem;
}

/* Fourchette de prix indicative sur les cartes */
.devis-choice-price {
  font-family: var(--font-display);
  /* Filet de séparation : sans visuel en tête de carte, il marque la
     frontière entre le descriptif et le bloc prix + bouton, et donne un
     rôle à l'espace libéré par l'image. */
  border-top: 1px solid var(--border);
  padding-top: 1.6rem;
  font-size: 2.25rem;
  color: var(--dark);
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.devis-choice-price-label {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 1.6rem;
}
.devis-choice-body {
  padding: 3rem 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.devis-choice-body h3 { font-size: 2.5rem; line-height: 1.15; margin-bottom: 1.1rem; }
.devis-choice-body p { font-size: 1.05rem; color: var(--muted); line-height: 2; margin-bottom: 2rem; flex: 1; }
.devis-choice-body .btn { width: 100%; justify-content: center; padding: 1rem 1.5rem; }

/* ---------- LAYOUT FORMULAIRE + RÉCAP ---------- */
.devis-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3.5rem;
  align-items: start;
}

/* ---------- SECTIONS DU FORMULAIRE ---------- */
.devis-form { max-width: 100%; }
.devis-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem;
  margin-bottom: 1.5rem;
}
.devis-section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.devis-section-num {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.devis-section-head h2 { font-size: 1.5rem; line-height: 1.2; }
.devis-section-head p { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

.devis-subtitle {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 1.75rem 0 1rem;
}
.devis-subtitle:first-of-type { margin-top: 0; }
.devis-help {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1rem;
  background: var(--bg);
  border-left: 2px solid var(--accent);
  padding: 0.8rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- OPTIONS (checkbox / radio custom) ---------- */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.65rem;
}
.opt-grid.cols-1 { grid-template-columns: 1fr; }
.opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: var(--ease);
  font-size: 0.88rem;
  user-select: none;
}
.opt:hover { border-color: var(--accent); background: var(--bg); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box {
  width: 19px; height: 19px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ease);
  background: var(--surface);
}
.opt .box svg { width: 11px; height: 11px; color: white; opacity: 0; transition: opacity 0.15s ease; }
.opt.radio .box { border-radius: 50%; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.opt:has(input:checked) .box { background: var(--accent); border-color: var(--accent); }
.opt:has(input:checked) .box svg { opacity: 1; }
.opt.radio:has(input:checked) .box svg { opacity: 0; }
.opt.radio:has(input:checked) .box { box-shadow: inset 0 0 0 3.5px var(--surface); background: var(--accent); }
.opt-text strong { display: block; font-weight: 500; }
.opt-text small { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }
.opt:has(input:checked) .opt-text small { color: var(--accent-hover); }

/* mise en avant possible (ex: 3 moments clés) */

/* ---------- TABLE DÉROULÉ ---------- */
.schedule-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.schedule-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 0.75rem;
  align-items: center;
}
.schedule-row label {
  font-size: 0.88rem;
  color: var(--dark);
}
.schedule-row input {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dark);
}
.schedule-row input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ---------- CHAMP CONDITIONNEL ---------- */
.devis-conditional {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.devis-conditional.show { display: block; animation: fadeSlide 0.35s ease; }
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.inline-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.inline-field label { font-size: 0.85rem; color: var(--muted); }
.inline-field input {
  width: 110px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dark);
}
.inline-field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ---------- RÉCAP STICKY ---------- */
.devis-recap {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.devis-recap-head {
  background: var(--dark);
  color: white;
  padding: 1.4rem 1.5rem;
}
.devis-recap-head h3 { color: white; font-size: 1.3rem; }
.devis-recap-head p { font-size: 0.74rem; color: rgba(255,255,255,0.5); margin-top: 0.2rem; }
.devis-recap-body { padding: 1.5rem; max-height: 50vh; overflow-y: auto; }
.devis-recap-empty { font-size: 0.84rem; color: var(--muted); line-height: 1.7; }
.recap-group { margin-bottom: 1.1rem; }
.recap-group:last-child { margin-bottom: 0; }
.recap-group-title {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.recap-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--dark);
  padding: 0.25rem 0;
  line-height: 1.5;
}
.recap-item::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.devis-recap-foot {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.devis-recap-foot p {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.devis-recap-foot .btn { width: 100%; justify-content: center; }

/* ---------- BOUTON SUBMIT MOBILE ---------- */
.devis-submit-mobile { display: none; }

/* ---------- SUCCÈS ---------- */
.devis-success {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.devis-success svg { width: 56px; height: 56px; color: var(--accent); margin: 0 auto 1.5rem; }
.devis-success h2 { margin-bottom: 1rem; }
.devis-success p { color: var(--muted); max-width: 460px; margin: 0 auto 2rem; line-height: 1.8; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .devis-layout { grid-template-columns: 1fr; }
  .devis-recap { position: static; max-width: 520px; }
  .devis-recap-body { max-height: none; }
  .devis-choice-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  /* En colonne unique, plus besoin d'aligner les cartes entre elles :
     la hauteur suit le contenu. */
  .devis-choice-card { min-height: 0; }
  .devis-choice-body { padding: 2.25rem 1.75rem 2rem; }
  .devis-choice-body h3 { font-size: 1.85rem; }
  .devis-choice-body p { font-size: 1rem; }
  .devis-choice-price { font-size: 2rem; }
}
@media (max-width: 768px) {
  .devis-section { padding: 1.5rem 1.25rem; }
  .opt-grid, .opt-grid.cols-2 { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 1fr 110px; }
  .devis-section-head h2 { font-size: 1.25rem; }
}

/* =============================================
   AJOUTS — options désactivées + estimation prix
   ============================================= */

/* Options désactivées (cohérence horaire / limites) */
.opt:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.opt:has(input:disabled):hover {
  border-color: var(--border);
  background: var(--surface);
}

/* Petite note d'aide sous un groupe (compteur, limite…) */
.group-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.group-note strong { color: var(--accent); }

/* Champ nombre intégré (photos, etc.) */
.count-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.65rem;
}
.count-field label { font-size: 0.85rem; color: var(--dark); flex: 1; min-width: 180px; }
.count-field input {
  width: 100px;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dark);
}
.count-field input:focus { outline: none; border-color: var(--accent); }

/* ---------- NOTE "APRÈS LE DEVIS" ---------- */
.devis-after {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.devis-after svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 0.2rem; }
.devis-after h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.devis-after p { font-size: 0.88rem; line-height: 1.75; color: var(--dark); opacity: 0.85; }
@media (max-width: 768px) { .devis-after { padding: 1.5rem 1.25rem; } }

/* ---------- BLOC ESTIMATION ---------- */
.devis-estimate {
  padding: 1.4rem 1.5rem;
  background: var(--accent-light);
  border-top: 1px solid var(--border);
}
.devis-estimate-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.devis-estimate-top > span {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hover);
  font-weight: 600;
}
.devis-estimate-amount {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--dark);
  white-space: nowrap;
}
.devis-estimate-amount small { font-size: 0.85rem; color: var(--muted); }
.estimate-toggle {
  font-size: 0.74rem;
  color: var(--accent-hover);
  text-decoration: underline;
  margin-top: 0.6rem;
}
.estimate-breakdown {
  display: none;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}
.estimate-breakdown.show { display: block; }
.estimate-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.22rem 0;
}
.estimate-line span:last-child { color: var(--dark); font-weight: 500; white-space: nowrap; }
.estimate-note {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.8rem;
  line-height: 1.55;
  font-style: italic;
}

/* Délai de livraison estimé */

/* Validation : .field-invalid et .devis-error-msg ont déménagé dans style.css.
   La page contact s'en sert aussi (date invalide, quota horaire) et ne charge
   pas cette feuille-ci. */