/* ============================================================
   Carglass — Page Rendez-vous (Wizard)
   ============================================================ */

.rdv-page {
  background: #f7f8fa;
  min-height: calc(100vh - 80px);
  padding: 70px 0 80px;
}

/* ============================================================
   HERO
   ============================================================ */
.rdv-hero {
  padding: 0 20px 36px;
}
.rdv-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.rdv-hero-copy {
  padding: 42px 40px;
}
.rdv-eyebrow,
.rdv-section-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(228,23,42,.08);
  color: rgb(228,23,42);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.rdv-hero-copy h1 {
  margin: 14px 0 14px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 42px;
  line-height: 1.08;
  color: rgb(34,36,38);
}
.rdv-hero-copy p {
  margin: 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: #555;
}
.rdv-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.rdv-hero-point {
  background: #f7f8fa;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.rdv-hero-point strong {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: rgb(228,23,42);
}
.rdv-hero-point span {
  font-size: 14px;
  line-height: 1.45;
  color: rgb(34,36,38);
}
.rdv-hero-media {
  min-height: 100%;
}
.rdv-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   STEPPER
   ============================================================ */
.rdv-stepper {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0;
}
.rdv-stepper-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  gap: 0;
}
.rdv-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.rdv-step-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e8e8e8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.rdv-step-circle span {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #999;
  transition: color .2s;
}
.rdv-step-label {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  transition: color .2s;
}
.rdv-step-line {
  flex: 1;
  min-width: 20px;
  height: 2px;
  background: #e8e8e8;
  margin: 0 4px;
  transition: background .2s;
}

/* Active step */
.rdv-step.active .rdv-step-circle { background: rgb(228,23,42); }
.rdv-step.active .rdv-step-circle span { color: #fff; }
.rdv-step.active .rdv-step-label { color: rgb(34,36,38); font-weight: 700; }

/* Completed step */
.rdv-step.done .rdv-step-circle { background: rgb(228,23,42); }
.rdv-step.done .rdv-step-circle span { display: none; }
.rdv-step.done .rdv-step-circle::after {
  content: '✓';
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.rdv-step.done .rdv-step-label { color: rgb(34,36,38); }
.rdv-step.done + .rdv-step-line { background: rgb(228,23,42); }

/* ============================================================
   BODY / CONTAINER
   ============================================================ */
.rdv-body { padding: 40px 20px; }
.rdv-container {
  max-width: 860px;
  margin: 0 auto;
}

/* ============================================================
   SCREENS
   ============================================================ */
.rdv-screen { display: none; }
.rdv-screen.active { display: block; animation: rdv-fadein .25s ease; }
@keyframes rdv-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.rdv-section-intro {
  text-align: center;
  margin-bottom: 12px;
}
.rdv-question {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: rgb(34,36,38);
  margin-bottom: 8px;
  text-align: center;
}
.rdv-hint {
  font-size: 14px;
  color: #777;
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.5;
}

/* ============================================================
   CARDS
   ============================================================ */
.rdv-cards {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.rdv-cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
.rdv-cards--3 { grid-template-columns: repeat(3, 1fr); max-width: 720px; margin-left: auto; margin-right: auto; }
.rdv-cards--4 { grid-template-columns: repeat(4, 1fr); }

.rdv-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  padding: 28px 16px 22px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: rgb(34,36,38);
}
.rdv-card strong {
  display: block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.rdv-card > span {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.rdv-card:hover {
  border-color: rgb(228,23,42);
  box-shadow: 0 4px 16px rgba(228,23,42,.12);
  transform: translateY(-2px);
}
.rdv-card.selected {
  border-color: rgb(228,23,42);
  background: rgb(255,241,0);
}
.rdv-card.selected > span {
  color: rgb(34,36,38);
}

.rdv-card-icon {
  width: 64px; height: 64px;
  color: rgb(34,36,38);
  display: flex; align-items: center; justify-content: center;
}
.rdv-card-icon svg { width: 100%; height: 100%; }
.rdv-card.selected .rdv-card-icon { color: rgb(34,36,38); }

.rdv-card--lg { padding: 32px 20px 24px; }
.rdv-card--lg strong { font-size: 17px; }
.rdv-card--lg span { font-size: 13px; }

.rdv-icon-yesno {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  color: rgb(34,36,38);
  transition: background .2s;
}
.rdv-card.selected .rdv-icon-yesno { background: rgba(228,23,42,.15); }

/* ============================================================
   DAMAGE DIAGRAM (vision / location image)
   ============================================================ */
.rdv-damage-diagram {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 420px;
}
.rdv-damage-diagram img { width: 100%; height: auto; }

/* ============================================================
   DIAGRAM CARDS (vitre selection)
   ============================================================ */
.rdv-diagram-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.rdv-diagram-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  padding: 16px 10px 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgb(34,36,38);
  text-align: center;
}
.rdv-diagram-card img { width: auto; max-height: 90px; }
.rdv-diagram-card:hover { border-color: rgb(228,23,42); transform: translateY(-2px); }
.rdv-diagram-card.selected { border-color: rgb(228,23,42); background: rgb(255,241,0); }

.rdv-visual-banner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(260px, 1.08fr);
  gap: 24px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 22px;
  align-items: center;
  margin: 0 auto 28px;
}
.rdv-visual-banner-copy h3 {
  margin: 0 0 10px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  color: rgb(34,36,38);
}
.rdv-visual-banner-copy p {
  margin: 0;
  color: #666;
  line-height: 1.7;
}
.rdv-visual-banner-media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.rdv-impact-photo {
  max-width: 420px;
  margin: 0 auto 24px;
}
.rdv-impact-photo img {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
}

/* ============================================================
   CAR DIAGRAM (legacy SVG — kept for reference)
   ============================================================ */
.rdv-car-diagram {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 28px;
  margin: 24px auto;
  max-width: 600px;
  position: relative;
}
.car-svg { width: 100%; }
.car-glass {
  cursor: pointer;
  transition: fill .15s, stroke .15s;
}
.car-glass:hover { fill: rgba(228,23,42,.35); stroke: rgb(228,23,42); }
.car-glass.selected { fill: rgb(255,241,0); stroke: rgb(200,160,0); }
.glass-label-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(34,36,38);
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 18px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ============================================================
   VISION / EDGE DIAGRAMS
   ============================================================ */
.rdv-vision-diagram,
.rdv-edge-diagram {
  max-width: 340px;
  margin: 0 auto 24px;
}
.rdv-vision-diagram svg,
.rdv-edge-diagram svg { width: 100%; }

/* ============================================================
   RESULTS
   ============================================================ */
.rdv-result {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  padding: 48px 40px;
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.rdv-result-icon { width: 80px; height: 80px; margin: 0 auto 20px; }
.rdv-result-icon svg { width: 100%; height: 100%; }
.rdv-result h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 12px;
  color: rgb(34,36,38);
}
.rdv-result p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 0;
}
.rdv-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.rdv-cta {
  font-size: 17px;
  padding: 13px 36px;
  justify-content: center;
}

/* ============================================================
   CONTACT FORM (plusieurs vitres)
   ============================================================ */
.rdv-contact-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.rdv-phone-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgb(34,36,38);
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

/* ============================================================
   VEHICLE / PERSONAL FORMS
   ============================================================ */
.rdv-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
}
.rdv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rdv-field--full { grid-column: 1 / -1; }
.rdv-field label {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: rgb(34,36,38);
}
.rdv-field input,
.rdv-field select,
.rdv-field textarea {
  padding: 11px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  color: rgb(34,36,38);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.rdv-field input:focus,
.rdv-field select:focus,
.rdv-field textarea:focus {
  border-color: rgb(228,23,42);
  box-shadow: 0 0 0 3px rgba(228,23,42,.1);
}
.rdv-field textarea { resize: vertical; }
.rdv-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23222426' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* ============================================================
   RADIO & CHECKBOX
   ============================================================ */
.rdv-radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.rdv-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.rdv-radio input { accent-color: rgb(228,23,42); width: 16px; height: 16px; }
.rdv-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.5;
}
.rdv-checkbox input { 
  accent-color: rgb(228,23,42); 
  margin-top: 2px; 
  flex-shrink: 0;
  max-width: 20px;
}
.rdv-checkbox a { color: rgb(228,23,42); text-decoration: underline; }

/* ============================================================
   CENTRE DE SERVICES
   ============================================================ */
.rdv-center-search { margin-bottom: 20px; }
.rdv-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rdv-search-wrap svg {
  position: absolute;
  left: 12px;
  color: #999;
  pointer-events: none;
}
.rdv-search-wrap input {
  padding: 11px 14px 11px 40px;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.rdv-search-wrap input:focus { border-color: rgb(228,23,42); }

.rdv-centers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 8px;
}
.rdv-center-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rdv-center-card:hover { border-color: rgb(228,23,42); background: #fff8f8; }
.rdv-center-card.selected { border-color: rgb(228,23,42); background: rgb(255,241,0); }
.rdv-center-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rdv-center-info strong {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgb(34,36,38);
}
.rdv-center-info span {
  font-size: 13px;
  color: #666;
}
.rdv-center-hours {
  font-size: 12px !important;
  color: #999 !important;
}
.rdv-center-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.rdv-center-card.selected .rdv-center-check {
  background: rgb(228,23,42);
  border-color: rgb(228,23,42);
  color: #fff;
}

/* ============================================================
   CONFIRMATION SUMMARY
   ============================================================ */
.rdv-summary {
  margin-top: 28px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 20px 24px;
  text-align: left;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  border: 1px solid #e8e8e8;
}
.rdv-summary strong { color: rgb(34,36,38); }

/* ============================================================
   NAVIGATION BUTTONS
   ============================================================ */
.rdv-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.rdv-nav:has(.rdv-btn-back:only-child) { justify-content: flex-start; }
.rdv-btn-back {
  background: none;
  border: 1.5px solid #ccc;
  border-radius: 5px;
  padding: 9px 20px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.rdv-btn-back:hover { border-color: rgb(34,36,38); color: rgb(34,36,38); }
.rdv-btn-next {
  background: rgb(228,23,42);
  border: 1px solid rgb(228,23,42);
  border-radius: 5px;
  padding: 10px 28px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.rdv-btn-next:hover { background: rgb(200,10,28); }
.rdv-btn-next:disabled {
  background: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   SVG INLINE CLASSES (Carglass statics color system)
   ============================================================ */

/* Default state */
.rdv-card-icon--svg svg,
.rdv-diagram-card-svg svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.rdv-card-icon--svg .deemphasize,
.rdv-diagram-card-svg .deemphasize     { fill: #E4DFDA; }
.rdv-card-icon--svg .accent,
.rdv-diagram-card-svg .accent          { fill: #FFDC00; }
.rdv-card-icon--svg .fill,
.rdv-diagram-card-svg .fill            { fill: #877A6E; }
.rdv-card-icon--svg .stroke,
.rdv-diagram-card-svg .stroke          { stroke: #877A6E; fill: none; }
.rdv-card-icon--svg .deemphasize-stroke,
.rdv-diagram-card-svg .deemphasize-stroke { stroke: #FFDC00; fill: none; }
.rdv-card-icon--svg .initial-fill,
.rdv-diagram-card-svg .initial-fill    { fill: #fff; }

/* Selected state — yellow card → invert palette */
.rdv-card.selected .rdv-card-icon--svg .deemphasize    { fill: #E4DFDA; }
.rdv-card.selected .rdv-card-icon--svg .accent         { fill: #E41727; }
.rdv-card.selected .rdv-card-icon--svg .fill           { fill: #222426; }
.rdv-card.selected .rdv-card-icon--svg .stroke         { stroke: #222426; }

.rdv-diagram-card.selected .rdv-diagram-card-svg .accent         { fill: #E41727; }
.rdv-diagram-card.selected .rdv-diagram-card-svg .stroke         { stroke: #222426; }
.rdv-diagram-card.selected .rdv-diagram-card-svg .deemphasize-stroke { stroke: #E41727; }

/* Container sizing */
.rdv-card-icon--svg {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.rdv-diagram-card-svg {
  width: 110px; height: 90px;
  display: flex; align-items: center; justify-content: center;
}
.rdv-diagram-card-svg svg { max-width: 100%; max-height: 100%; }

/* Limit oversized crack SVG display */
.rdv-card-icon img { max-width: 86px; max-height: 86px; width: auto; height: auto; }

@media (max-width: 768px) {
  .rdv-page { padding-top: 24px; }
  .rdv-hero { padding-bottom: 24px; }
  .rdv-hero-inner,
  .rdv-visual-banner { grid-template-columns: 1fr; }
  .rdv-hero-copy { padding: 28px 22px; }
  .rdv-hero-copy h1 { font-size: 30px; }
  .rdv-hero-copy p { font-size: 15px; }
  .rdv-hero-points { grid-template-columns: 1fr; }
  .rdv-hero-media { max-height: 300px; }

  .rdv-stepper-inner { gap: 0; }
  .rdv-step-label { display: none; }
  .rdv-step.active .rdv-step-label { display: block; font-size: 11px; }
  .rdv-step-line { min-width: 10px; }

  .rdv-cards--3 { grid-template-columns: 1fr; max-width: 320px; }
  .rdv-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .rdv-cards--2 { grid-template-columns: 1fr; max-width: 320px; }
  .rdv-diagram-cards { grid-template-columns: repeat(2, 1fr); }

  .rdv-fields-grid { grid-template-columns: 1fr; padding: 20px; }
  .rdv-result { padding: 32px 20px; }
  .rdv-result h3 { font-size: 22px; }
  .rdv-question { font-size: 20px; }
  .rdv-damage-diagram { max-width: 280px; }
  .rdv-phone-cta { font-size: 20px; }
}
@media (max-width: 480px) {
  .rdv-cards--4 { grid-template-columns: 1fr; }
  .rdv-diagram-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rdv-nav { flex-direction: column-reverse; gap: 10px; }
  .rdv-btn-back, .rdv-btn-next { width: 100%; text-align: center; justify-content: center; }
}