/* ============================================================
   FLOW-V4.CSS — skin futuriste pour flow urgent + réservation + devis
   Scopé body.v4. Garde l'orange pour urgent (signal urgence)
   et vert lime pour réservation/devis.
   ============================================================ */

body.v4 { background: #fafbf8; }

/* ============================================================
   GRID BG PARTAGÉ
   ============================================================ */
body.v4 .ub-outer,
body.v4 .resa-outer,
body.v4 .devis-outer,
body.v4 main.container {
  position: relative;
}

/* ============================================================
   URGENT-BOOKING
   ============================================================ */

/* Hero urgence */
body.v4 .ub-hero {
  background: #0B1E3D !important;
  padding: 56px 24px 48px !important;
  position: relative;
  overflow: hidden;
}
body.v4 .ub-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #E85D3A 20%, #E85D3A 80%, transparent);
}
body.v4 .ub-hero::after {
  content: '// MISSION URGENTE';
  position: absolute;
  top: 14px; left: 22px;
  font-family: 'Inter', monospace;
  font-size: 10px;
  letter-spacing: .24em;
  color: #E85D3A;
  text-transform: uppercase;
}
body.v4 .ub-hero-tag {
  background: rgba(232,93,58,.18) !important;
  color: #E85D3A !important;
  border: 1px solid #E85D3A;
  border-radius: 0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  padding: 5px 14px !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
body.v4 .ub-hero-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  color: #fff !important;
  margin-bottom: 10px !important;
}
body.v4 .ub-hero-sub {
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif;
}

/* Card urgente */
body.v4 .ub-card {
  background: #fff !important;
  border: 1px solid rgba(11,30,61,.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
}
body.v4 .ub-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 24px; height: 2px;
  background: #E85D3A;
}
body.v4 .ub-section-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: #0B1E3D !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(11,30,61,.12);
  position: relative;
}
body.v4 .ub-section-title::before {
  content: '// ';
  color: #E85D3A;
  font-weight: 600;
}

/* Pill cards (type de lieu, pièces, paiement) */
body.v4 .pill-card {
  background: #fafbf8 !important;
  border: 1px solid rgba(11,30,61,.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition: border-color .15s, background .15s, transform .15s;
}
body.v4 .pill-card:hover {
  border-color: #E85D3A !important;
  background: #fff !important;
  transform: translateY(-1px);
}
body.v4 .pill-card.selected {
  border-color: #E85D3A !important;
  border-width: 1px !important;
  padding: 16px 10px !important;
  background: rgba(232,93,58,.08) !important;
  box-shadow: 0 0 0 2px rgba(232,93,58,.2);
}
body.v4 .pill-card.small.selected {
  padding: 12px 6px !important;
}
body.v4 .pill-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  color: #0B1E3D !important;
}

/* Forms urgent */
body.v4 .ub-card .form-label,
body.v4 .ub-card label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: #0B1E3D !important;
  margin-bottom: 7px !important;
}
body.v4 .ub-card .form-label .req {
  color: #E85D3A !important;
}
body.v4 .ub-card .form-input,
body.v4 .ub-card .form-textarea,
body.v4 .ub-card input,
body.v4 .ub-card select,
body.v4 .ub-card textarea {
  border-radius: 0 !important;
  border: 1px solid rgba(11,30,61,.18) !important;
  background: #fafbf8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
body.v4 .ub-card .form-input:focus,
body.v4 .ub-card .form-textarea:focus,
body.v4 .ub-card input:focus,
body.v4 .ub-card textarea:focus,
body.v4 .ub-card select:focus {
  border-color: #E85D3A !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(232,93,58,.2) !important;
  outline: none !important;
}

/* Submit urgent */
body.v4 .ub-submit {
  background: #E85D3A !important;
  color: #fff !important;
  border: 1px solid #E85D3A !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  padding: 17px !important;
  transition: background .15s, transform .15s;
}
body.v4 .ub-submit:hover {
  background: #D04F2E !important;
  transform: translateY(-1px);
}

/* Status banner */
body.v4 .status-banner {
  background: rgba(212,255,58,.15) !important;
  border: 1px solid rgba(212,255,58,.5) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  color: #0B1E3D !important;
  font-family: 'Inter', sans-serif;
  font-size: 13px !important;
  padding: 12px 14px !important;
}

body.v4 .reassure-row {
  background: #fafbf8 !important;
  border: 1px dashed rgba(11,30,61,.15);
  border-radius: 0 !important;
  font-family: 'Inter', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: .06em;
  color: rgba(11,30,61,.55) !important;
  padding: 14px !important;
}

/* Pay tiles */
body.v4 .pay-tile {
  border: 1px solid rgba(11,30,61,.15) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background: #fafbf8 !important;
  transition: all .15s;
}
body.v4 .pay-tile:hover {
  border-color: #0B1E3D !important;
  background: #fff !important;
}
body.v4 .pay-tile.selected {
  border-color: #0B1E3D !important;
  border-width: 1px !important;
  background: rgba(212,255,58,.15) !important;
  box-shadow: 0 0 0 2px rgba(11,30,61,.15);
}

/* ============================================================
   URGENT-CONFIRMATION + URGENT-WAITING (partagent beaucoup de style)
   ============================================================ */
body.v4 .confirmation-card,
body.v4 .waiting-card {
  background: #fff !important;
  border: 1px solid rgba(11,30,61,.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 12px 40px rgba(11,30,61,.08) !important;
  position: relative;
}
body.v4 .confirmation-card::before,
body.v4 .waiting-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 24px; height: 2px;
  background: #E85D3A;
}

/* ============================================================
   RÉSERVATION + DEVIS-REQUEST (forms standards)
   ============================================================ */

/* Titre de page */
body.v4 .resa-hero,
body.v4 .devis-hero {
  background: #0B1E3D;
  color: #fff;
  padding: 48px 24px 40px;
  position: relative;
  overflow: hidden;
}
body.v4 .resa-hero::before,
body.v4 .devis-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #D4FF3A 20%, #D4FF3A 80%, transparent);
}

/* Cards (generic) sur reservation/devis */
body.v4 .resa-card,
body.v4 .devis-card,
body.v4 .booking-card,
body.v4 .quote-card,
body.v4 .section-card {
  background: #fff !important;
  border: 1px solid rgba(11,30,61,.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
}
body.v4 .resa-card::before,
body.v4 .devis-card::before,
body.v4 .booking-card::before,
body.v4 .quote-card::before,
body.v4 .section-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 24px; height: 2px;
  background: #0B1E3D;
}

/* Forms réservation/devis labels + inputs */
body.v4 .resa-card label,
body.v4 .devis-card label,
body.v4 .booking-card label,
body.v4 .quote-card label,
body.v4 .section-card label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: #0B1E3D !important;
}

/* CTA primary v4 global (pour les 3 pages flow) */
body.v4 .flow-primary,
body.v4 .btn-flow-primary {
  background: #0B1E3D !important;
  color: #D4FF3A !important;
  border: 1px solid #0B1E3D !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  padding: 14px 18px !important;
}

/* Form errors universal flow */
body.v4 .form-error {
  color: #E85D3A !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: .02em;
}

/* Pills de type service devis */
body.v4 .service-type-pill,
body.v4 .type-pill {
  background: #fafbf8 !important;
  border: 1px solid rgba(11,30,61,.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  color: #0B1E3D !important;
  padding: 10px 14px !important;
  transition: all .15s;
}
body.v4 .service-type-pill.selected,
body.v4 .type-pill.selected,
body.v4 .service-type-pill.active,
body.v4 .type-pill.active {
  background: #0B1E3D !important;
  color: #D4FF3A !important;
  border-color: #0B1E3D !important;
}

/* Mobile */
@media (max-width: 640px) {
  body.v4 .ub-hero { padding: 36px 16px 28px !important; }
  body.v4 .ub-hero-title { font-size: 24px !important; }
  body.v4 .ub-card,
  body.v4 .resa-card,
  body.v4 .devis-card { padding: 18px !important; }
  body.v4 .ub-section-title { font-size: 9.5px !important; }
}