.sgp-booking-form{border:1px solid #e2e8f0;padding:16px;border-radius:8px;background:#fff;max-width:720px;margin-left:auto;margin-right:auto;}
.sgp-form{display:flex;flex-direction:column;gap:12px}
.sgp-row{display:flex;gap:12px;flex-wrap:wrap}
.sgp-row input,.sgp-row select,.sgp-row textarea{flex:1 1 200px;padding:10px;border:1px solid #cbd5e1;border-radius:6px}
.sgp-booking-form .sgp-row button:not(.sgp-dl-btn){padding:10px 16px;background:#2563eb;border:none;color:#fff;border-radius:6px;cursor:pointer}
.sgp-booking-form .sgp-row button:not(.sgp-dl-btn):hover{background:#1d4ed8}
.sgp-message{margin-top:8px;color:#0f172a}
@media (max-width:600px){.sgp-row{flex-direction:column}}
@media (max-width:600px){.sgp-row input,.sgp-row select,.sgp-row textarea{flex:1 1 200px;padding:10px;border:1px solid #cbd5e1;border-radius:6px;}}

/* Ameliorations d'accessibilite et mobile (prioritaires via specificite) */
.sgp-booking-form .sgp-row input[type=date]{-webkit-appearance:auto;appearance:auto}
.sgp-booking-form .sgp-row input[type=date]::-webkit-calendar-picker-indicator{opacity:1;pointer-events:auto;cursor:pointer}
.sgp-booking-form .sgp-row input[type=date]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
  padding-right:40px;
}
@media (min-width:769px){
  .sgp-booking-form .sgp-row input[type=date]{
    background-image:none;
    padding-right:10px;
  }
}
.sgp-booking-form select.sgp-service-hidden{display:none;}
@media (max-width:600px){
  .sgp-booking-form .sgp-row input,.sgp-booking-form .sgp-row select{min-height:36px;max-height:48px;padding:7px 9px}
  .sgp-booking-form .sgp-row textarea{min-height:96px}
}

/* Indication visuelle pour le champ date */
.sgp-booking-form .sgp-row .sgp-hint{
  display:block;
  font-size:12px;
  line-height:1.3;
  color:transparent;
  margin-top:4px;
  position:relative;
}
.sgp-booking-form .sgp-row .sgp-hint::after{
  content:"Touchez le champ ci-dessus pour ouvrir le calendrier";
  color:#64748b;
  position:absolute;
  left:0;
  top:0;
}

/* Fix selects (police “brute”) : forcer héritage typographique */
.sgp-booking-form,
.sgp-booking-form input,
.sgp-booking-form select,
.sgp-booking-form textarea,
.sgp-booking-form button {
  font-family: inherit;
  font-size: 1em;
}

.sgp-booking-form select,
.sgp-booking-form select option {
  font: inherit;
  font-size: 1em;
  letter-spacing: inherit;
}

/* Consent : demandé -> 1em */
.sgp-booking-form .sgp-consent,
.sgp-booking-form .sgp-consent label {
  font-size: 1em;
}

/* Bouton DL : fallback neutre si DL absente */
.sgp-booking-form button.sgp-dl-btn {
  border: 0;
}

/* Bouton Réserver (Design Library) — full width + centré */
.sgp-scope .sgp-booking-form .sgp-row .sgp-dl-btn{
  width:100%;
  justify-content:center;
  flex:1 1 100%;
}

/* Labels selects (fallback léger si DL absente) */
.sgp-booking-form .sgp-dl-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 200px;
}
.sgp-booking-form .sgp-dl-label{
  font-size:0.9em;
  opacity:.85;
}

/* ==========================================================
   SGP Booking — Selects UX correction
   ========================================================== */

.sgp-scope .sgp-booking-form .sgp-row--selects{
  align-items:flex-start;
}

/* réduit le “gros vide” sous label */
.sgp-scope .sgp-booking-form .sgp-row--selects .sgp-dl-field{
  gap:4px;
}

.sgp-scope .sgp-booking-form .sgp-row--selects .sgp-dl-label{
  margin:0;
  line-height:1.2;
}

/* évite l’effet “select géant” */
.sgp-scope .sgp-booking-form .sgp-row--selects select.sgp-dl-select{
  min-height:44px;
  height:auto;
  padding-top:10px;
  padding-bottom:10px;
  line-height:1.2;
}

@media (max-width:600px){
  .sgp-scope .sgp-booking-form .sgp-row--selects select.sgp-dl-select{
    min-height:40px;
  }
}

/* ==========================================================
   SGP Booking — Date hint (desktop)
   ========================================================== */
@media (min-width: 769px){
  .sgp-scope .sgp-booking-form .sgp-hint{
    display:none !important;
  }
}

/* ==========================================================
   SGP Booking — iOS date input fixes
   - 1 seule icône (native)
   - pas de dépassement horizontal
   ========================================================== */
.sgp-scope .sgp-booking-form input[type="date"].sgp-dl-input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
@supports (-webkit-touch-callout: none){
  .sgp-scope .sgp-booking-form input[type="date"].sgp-dl-input{
    padding-right:12px !important;
  }
}

/* ==========================================================
   SGP Booking — Mobile selects full width
   ========================================================== */
@media (max-width: 600px){
  .sgp-scope .sgp-booking-form .sgp-row--selects{
    flex-direction:column;
    align-items:stretch;
  }
  .sgp-scope .sgp-booking-form .sgp-row--selects .sgp-dl-field{
    width:100%;
    flex:0 0 auto;
  }
  .sgp-scope .sgp-booking-form .sgp-row--selects .sgp-dl-select{
    width:100%;
  }
}

/* ==========================================================
   SGP Booking — Consent align
   ========================================================== */
.sgp-scope .sgp-booking-form .sgp-row.sgp-consent label{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.sgp-scope .sgp-booking-form .sgp-row.sgp-consent input[type="checkbox"]{
  margin-top:3px;
}

/* SGP Booking – Message UX (force override DL) */
.sgp-scope .sgp-booking-form .sgp-message{
  display:none !important;
}
.sgp-scope .sgp-booking-form .sgp-message:not(:empty){
  display:grid !important;
}

/* SGP Booking – Bandeau succès/erreur + transition + spinner */
.sgp-scope .sgp-booking-form .sgp-qb-message{
  padding:12px 16px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:1em;
  line-height:1.4;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.sgp-scope .sgp-booking-form .sgp-qb-message.is-visible{
  opacity:1;
  transform:translateY(0);
}
.sgp-scope .sgp-booking-form .sgp-qb-message.is-success{
  background:#dcfce7;
  border-color:#16a34a;
  color:#166534;
}
.sgp-scope .sgp-booking-form .sgp-qb-message.is-error{
  background:#fee2e2;
  border-color:#dc2626;
  color:#991b1b;
}
/* Loading sans cadre : fond/bordure neutralisés sur .sgp-message */
.sgp-scope .sgp-booking-form .sgp-message.is-loading{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.sgp-scope .sgp-booking-form .sgp-message.is-loading .sgp-loading-inline{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:0;
  background:transparent;
  color:#0f172a;
}
/* Bandeau succès/erreur : pas de cadre sur le conteneur .sgp-message (override DL / carte) */
.sgp-scope .sgp-booking-form .sgp-message:has(.sgp-qb-message){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.sgp-spinner{
  display:inline-block;
  width:18px;
  height:18px;
  border:2px solid #e2e8f0;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:sgp-spin .6s linear infinite;
}
@keyframes sgp-spin{
  to{ transform:rotate(360deg); }
}
.sgp-scope .sgp-booking-form button.sgp-dl-btn.is-loading{
  cursor:not-allowed;
  opacity:.8;
}

/* ==========================================================
   SGP Booking — Date row mobile/iOS fixes
   ========================================================== */

@media (max-width: 600px){
  .sgp-scope .sgp-booking-form .sgp-row--date{
    flex-direction:column;
    align-items:stretch;
  }

  .sgp-scope .sgp-booking-form .sgp-row--date input[type="date"].sgp-dl-input,
  .sgp-scope .sgp-booking-form .sgp-row--date select.sgp-dl-select,
  .sgp-scope .sgp-booking-form .sgp-row--date .sgp-hint{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .sgp-scope .sgp-booking-form .sgp-row--date .sgp-hint{
    margin-top:6px;
  }
}

/* iOS: s’assurer que l’UI native du date picker n’est pas “neutralisée” */
@supports (-webkit-touch-callout: none){
  .sgp-scope .sgp-booking-form input[type="date"].sgp-dl-input{
    -webkit-appearance:auto !important;
    appearance:auto !important;
  }
}

/* ==========================================================
   SGP Booking — Consent checkbox sizing + align
   ========================================================== */

.sgp-scope .sgp-booking-form .sgp-row.sgp-consent label{
  display:flex;
  align-items:center;
  gap:12px;
}

.sgp-scope .sgp-booking-form .sgp-row.sgp-consent input[type="checkbox"]{
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin:0;
}

@media (max-width: 600px){
  .sgp-scope .sgp-booking-form .sgp-row.sgp-consent label{
    gap:10px;
  }
}

/* ==========================================================
   SGP Booking — Date input: kill custom icon + fix overflow (mobile/iOS)
   ========================================================== */

/* 1) Supprime toute icône custom (souvent via background-image) */
.sgp-scope .sgp-booking-form input[type="date"].sgp-dl-input{
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

/* 2) Empêche tout dépassement lié au flex/min-width/calc */
.sgp-scope .sgp-booking-form .sgp-row--date{
  width:100%;
  max-width:100%;
}
.sgp-scope .sgp-booking-form .sgp-row--date input[type="date"].sgp-dl-input{
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* 3) Mobile: stack + éléments alignés */
@media (max-width: 600px){
  .sgp-scope .sgp-booking-form .sgp-row--date{
    flex-direction:column;
    align-items:stretch;
  }
  .sgp-scope .sgp-booking-form .sgp-row--date select.sgp-dl-select,
  .sgp-scope .sgp-booking-form .sgp-row--date .sgp-hint{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
}

/* 4) iOS: s’assurer que l’indicateur natif reste visible */
@supports (-webkit-touch-callout: none){
  .sgp-scope .sgp-booking-form input[type="date"].sgp-dl-input{
    -webkit-appearance:auto !important;
    appearance:auto !important;
  }
  .sgp-scope .sgp-booking-form input[type="date"].sgp-dl-input::-webkit-calendar-picker-indicator{
    opacity:1;
    display:block;
  }
}

/* ==========================================================
   SGP Booking — Date row fixes (iOS + overflow) + hint desktop
   ========================================================== */

/* Desktop : hint inutile */
@media (min-width: 769px){
  .sgp-scope .sgp-booking-form .sgp-row--date .sgp-hint{
    display:none !important;
  }
}

/* Neutraliser l’icône custom + éviter overflow (mobile & iOS) */
.sgp-scope .sgp-booking-form .sgp-row--date{
  width:100%;
  max-width:100%;
}

.sgp-scope .sgp-booking-form .sgp-row--date input[type="date"]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;

  /* kill custom icon (audit: background-image + padding-right:40px) */
  background-image:none !important;
  background:none !important;
  padding-right:12px !important;
}

/* iOS : garder l’indicateur natif visible */
@supports (-webkit-touch-callout: none){
  .sgp-scope .sgp-booking-form .sgp-row--date input[type="date"]{
    -webkit-appearance:auto !important;
    appearance:auto !important;
  }
  .sgp-scope .sgp-booking-form .sgp-row--date input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:1 !important;
    display:block !important;
  }
}

/* Mobile : stack propre (date + hint + créneau full width) */
@media (max-width: 600px){
  .sgp-scope .sgp-booking-form .sgp-row--date{
    flex-direction:column;
    align-items:stretch;
  }
  .sgp-scope .sgp-booking-form .sgp-row--date select,
  .sgp-scope .sgp-booking-form .sgp-row--date .sgp-hint{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
}

/* ==========================================================
   SGP Booking — Consent align (smaller checkbox + better text)
   ========================================================== */
.sgp-scope .sgp-booking-form .sgp-row.sgp-consent label{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.sgp-scope .sgp-booking-form .sgp-row.sgp-consent input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
}
/* SGP Booking – Message UX (force override DL) */
.sgp-scope .sgp-booking-form .sgp-message {
  display: none !important;
}
.sgp-scope .sgp-booking-form .sgp-message:not(:empty) {
  display: grid !important;
}




/* ==========================================================
   SGP Booking — Selects compact + textarea full width
   ========================================================== */

/* 1) Selects : supprimer l'effet "géant" (DL override ciblé booking) */
.sgp-scope .sgp-booking-form .sgp-row--selects .sgp-dl-field{
  flex: 1 1 0;
  min-width: 240px;
}

.sgp-scope .sgp-booking-form .sgp-row--selects select.sgp-dl-select{
  width: 100%;
  height: 44px;          /* force une hauteur normale */
  min-height: 44px;
  max-height: 44px;      /* garde la cohérence */
  padding: 10px 12px;    /* compacte */
  line-height: 1.2;
  display: block;
}

/* mobile : un peu plus compact */
@media (max-width:600px){
  .sgp-scope .sgp-booking-form .sgp-row--selects select.sgp-dl-select{
    height: 40px;
    min-height: 40px;
    padding: 8px 10px;
  }
}

/* 2) Champ "Votre message" en full width (desktop + mobile) */
.sgp-scope .sgp-booking-form .sgp-row textarea.sgp-dl-textarea{
  flex: 1 1 100%;
  width: 100%;
}

/* SGP Booking — textarea full width (override fort) */
.sgp-scope .sgp-booking-form .sgp-row {
  width: 100%;
}

.sgp-scope .sgp-booking-form .sgp-row textarea.sgp-dl-textarea{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}