<style>
/* GLOBAL FIX */
* { box-sizing: border-box; }

/* Popup Layout */
.white-popup-block{
  background:#fff; padding:30px; max-width:min(720px, 92vw); margin:40px auto; position:relative;
  border-radius:10px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.2);
}

/* Title */
.popup-title{ color:#404040; font-size:24px; font-weight:700; margin-bottom:15px; }

/* Input + Select Fields (legacy compat) */
.form-control,.form-select{
  width:100%; height:50px; padding:12px; margin-bottom:10px; border:1px solid #ccc;
  border-radius:5px; font-size:16px;
}

/* Legacy main CTA */
.appointment-btn{
  background:linear-gradient(90deg,#6F4692 0%,#552D75 100%); color:#fff; padding:14px 20px; font-size:16px;
  border:none; border-radius:5px; font-weight:700; cursor:pointer; display:inline-block; text-align:center;
  transition:all .3s ease-in-out; width:100%;
}
.appointment-btn:hover{ background:#72A63F; color:#fff; }

/* Legacy layout (kept harmless) */
.appointment-row{ display:block; }
.appointment-col{ width:100%; margin:0; padding:0; display:block; }

/* ===== CityCare 2-Step Popup (namespaced) ===== */
.ccp-card{ background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.16); border:1px solid rgba(0,0,0,.06); overflow:hidden; }
.ccp-header{ padding:20px 20px 10px; text-align:center; }
.ccp-title{ margin:0; font-size:22px; color:#552D75; font-weight:700; }
.ccp-subtitle{ margin:6px 0 16px; font-size:14px; color:#6F4692; opacity:.9; }

.ccp-steps{ display:flex; justify-content:center; gap:16px; list-style:none; padding:0; margin:0 0 12px; }
.ccp-step{ display:flex; align-items:center; gap:8px; opacity:.5; }
.ccp-step.is-active,.ccp-step.is-done{ opacity:1; }
.ccp-step-dot{ width:10px; height:10px; border-radius:50%; background:#CBB6DE; display:inline-block; }
.ccp-step.is-active .ccp-step-dot{ background:#6F4692; }
.ccp-step.is-done .ccp-step-dot{ background:#72A63F; }
.ccp-step-label{ font-size:13px; color:#404040; white-space:nowrap; }

.ccp-progress{ height:3px; background:#F0EAF8; }
.ccp-progress-bar{ display:block; height:3px; background:linear-gradient(90deg,#6F4692,#552D75); width:0; transition:width .35s ease; }

#ccp-form{ padding:16px; }
.ccp-row{ display:grid; grid-template-columns:1fr; gap:12px; }
.ccp-col--full{ grid-column:1 / -1; }
@media (min-width:600px){ .ccp-row{ grid-template-columns:1fr 1fr; } }

.ccp-label{ font-size:13px; color:#404040; margin-bottom:6px; display:block; }
.ccp-input,.ccp-textarea{
  width:100%; background:#fff; border:1px solid #ddd; border-radius:10px; margin-bottom:10px;
  padding:12px 14px; font-size:15px; color:#404040; outline:none; transition:border .2s, box-shadow .2s;
}
.ccp-input:focus,.ccp-textarea:focus{ border-color:#6F4692; box-shadow:0 0 0 3px rgba(111,70,146,.12); }
.ccp-textarea{ resize:vertical; }

.ccp-step-pane{ display:none; }
.ccp-step-pane.is-visible{ display:block; animation:ccpFade .24s ease; }
@keyframes ccpFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* reCAPTCHA — centered, mobile-safe */
.g-recaptcha {
  display: flex;
  justify-content: center;
  width: 100% !important;
  transform: scale(1);       /* garde la taille normale */
  transform-origin: center;  /* centrage correct */
}

/* Actions row: Back left, Confirm right */
.ccp-actions{
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; width:100%;
}
.ccp-btn{ appearance:none; border:none; border-radius:999px; padding:12px 18px; font-weight:700; cursor:pointer; transition:transform .05s ease, opacity .2s ease; }
.ccp-btn:active{ transform:translateY(1px); }
.ccp-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.ccp-btn--primary{ color:#fff; background:linear-gradient(90deg,#6F4692,#552D75); }
.ccp-btn--ghost{ background:#F6F3FA; color:#552D75; }

/* btn full 100% */
.ccp-btn-full {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease;
  width: 100%;
  margin-top: 10px;
  display: block;       /* garantit que toute la largeur est cliquable */
  position: relative;   /* permet de gérer le z-index */
  z-index: 2;
}
.ccp-btn-full:active {transform: translateY(1px);}
.ccp-btn-full[disabled] {opacity: .5;cursor: not-allowed;}
.ccp-btn-full--primary {color: #fff;background: linear-gradient(90deg, #6F4692, #552D75);}
.ccp-btn-full--ghost {background: #F6F3FA;color: #552D75;}

/* Override the center text alignment from the popup container for inner elements */
.white-popup-block{ text-align: initial; }

/* Optional: stack buttons on very small screens */
@media (max-width:420px){
  .ccp-actions{ flex-direction:column; align-items:stretch; }
}

/* Aligner Back - Captcha - Confirm sur une ligne */
.ccp-actions.with-captcha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap; /* permet de passer en 2 lignes sur mobile */
}

/* Forcer captcha centré */
.ccp-actions.with-captcha .g-recaptcha {
  flex: 1;
  display: flex;
  justify-content: center;
}


/* Home slider backgrounds */
.home_slider .background_image{
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  min-height:60svh;
}
@media (min-width:992px){ .home_slider .background_image{ min-height:72vh; } }

/* “Why choose us” image */
.why-img{ display:block; width:100%; height:auto; object-fit:cover; }

/* Responsive YouTube */
.col-lg-6 iframe{ width:100%!important; aspect-ratio:16/9; height:auto!important; }

/* Champs uniformes + anti-zoom iOS */
.intro_input,
.intro_input_2,
.ccp-input,
input.flatpickr-input,
input.flatpickr-input[readonly]{
  font-size:16px; line-height:1.3; height:auto; padding:12px; border-radius:4px;
}

/* Icônes fond */
.intro_input--date, .ccp-input--date,
.intro_input--time, .ccp-input--time{
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
}
.intro_input--date, .ccp-input--date{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.intro_input--time, .ccp-input--time{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* Mobile form layout + captcha */
@media (max-width:576px){
  .intro_form .intro_input,
  .intro_form .intro_input_2,
  .intro_form select.form-control{
    width:100%!important; min-width:100%!important; margin-bottom:10px;
  }
  .g-recaptcha{ transform:scale(0.92); transform-origin:0 0; }
  .button.contact_button{ margin-bottom:84px; }
}

/* Le calendrier doit passer au-dessus du FAB Inquiry */
.flatpickr-calendar{ z-index:1055; }

:root { overflow-y: scroll; }

</style>