.mbgc-auth{
  max-width: 720px;
  margin: 0 auto;
  padding: 0px 32px;
}

.mbgc-auth-card{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:32px 36px;
  background:#fff;
  margin:24px 0 18px;
}
.mbgc-auth-card p {
  margin-bottom: 12px;
}


.mbgc-auth .login-submit input[type="submit"] {
  background:#b1935d;
  border:1px solid #b1935d;
  color:#fff;
  border-radius:12px;
  padding:10px 16px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
}


.mbgc-auth-btn{
  background:#b1935d;
  border:1px solid #b1935d;
  color:#fff;
  border-radius:12px;
  padding:10px 16px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
}
.mbgc-auth-btn:hover{ opacity:.92; }

.mbgc-auth-card button.mbgc-auth-btn {
  margin-top: 24px;
}


.mbgc-auth-error{
  border:1px solid rgba(176,0,32,.35);
  background: rgba(176,0,32,.06);
  padding:8px 8px;
  border-radius:12px;
  margin:12px 0;
 
  
}
.mbgc-auth-error ul {
  margin: 0 !important;
 }

.mbgc-auth-error li {
  margin: 0 !important;
}

.mbgc-auth-small{
  margin-top:10px;
  font-size:14px;
}

.mbgc-auth .login-submit{
  text-align: center;
}

.mbgc-auth .mbgc-auth-create-link{
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
}

.mbgc-auth .mbgc-auth-create-link a{
  color: #b1935d;
  text-decoration: underline;
}

.mbgc-card{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  margin: 16px 0;
  padding:40px;
  background: #ffffff;
  max-width:720px;
}

.mbgc{
  padding:24px;              /* espace tout autour */
  font-family: Lato !important;
}

.mbgc-services{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin:12px 0;
}

@media (min-width: 700px){
  .mbgc-services{ grid-template-columns: 1fr 1fr; }
}

.mbgc-svc{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:10px 12px;
}

.mbgc-svc em{
  margin-left:auto;
  font-style:normal;
  opacity:.75;
}

.mbgc-total{
  margin-top:30px;
  margin-bottom: 5px;
}

.mbgc-hint{
  opacity:.7;
  font-size: 14px;
}

.mbgc-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.mbgc-date{
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  font-size: 14px;
}

.mbgc-show-slots{
  padding:10px 14px;
  font-size: 14px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  cursor:pointer;
  background-color: #bca875;
}

.mbgc-sep{
  border:none;
  border-top:1px solid rgba(0,0,0,.10);
  margin:20px 0;
  }

.mbgc-slotlist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.mbgc-slotlist button{
  width: 150px;          
  height: 48px; 
  padding:0;
  font-size: 15px;
  display: flex;
  align-items: center;   /* centrage vertical */
  justify-content: center; /* centrage horizontal */
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;  /* évite les retours à la ligne */
  color: #000000;
  border:1px solid rgba(0,0,0,.15);
  background-color: #f7f6f4;
  border-radius:10px;
  cursor:pointer;
}

.mbgc-slotlist button.active{
  outline:2px solid rgba(0,0,0,.35);
}

.mbgc-chosen{
  margin-top:12px;
}

/* Ligne date + radios */
.mbgc-topbar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}

.mbgc-radios{
  display:flex;
  gap:12px;
  align-items:center;
  border:0;
  padding:0;
  margin:0;
}

.mbgc-radios label{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:14px;
}

/* Bouton principal centré */
.mbgc-actions{
  display:flex;
  justify-content:center;
  margin:14px 0 6px;
}


.mbgc-next{
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  color: #000000;
  background-color: #e3d9ce
}

/* Bloc prochaines dispos */
.mbgc-nextwrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}

@media (min-width: 800px){
  .mbgc-nextwrap{ grid-template-columns: repeat(3, 1fr); }
}

.mbgc-daybox{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:12px;
  background:#fff;
}

.mbgc-daytitle{
  text-align:center;
  font-weight:700;
  font-size: 16px;
  margin-bottom:10px;
  color: #b1935d;
}

/* 1x4 */
.mbgc-preview{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:10px;
}


.mbgc-preview-slot{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  color: #000000;
  background-color: #f7f6f4;
  white-space:nowrap;
}

.mbgc-morelink{
  display:block;           /* permet le centrage */
  margin:12px auto 0;      /* centré horizontalement */
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:#0b57d0;
  text-decoration:underline;
  font-size:14px;
  text-align:center;       /* centre le texte */
}


.mbgc-morelink:hover{
  opacity:.85;
  background:none;
  border:none;
  padding:0;
  color:#f014a5;
}

.mbgc-headerrow{ 
  display:none;
  justify-content:flex-start;
  margin-top:14px;
  }
.mbgc-headerrow.is-visible{ display:flex; }

.mbgc-noslots{
  color:#b00020;
  margin-top:12px;
}
/* Panels: un seul visible */
.mbgc-auth-panel{ display:none; }
.mbgc-auth-panel.is-active{ display:block; }

/* Titre centré */
.mbgc-auth-title{
  text-align:center;
  margin-bottom: 14px;
  font-family: Lato;
  font-weight : 400;
}

/* Lien switch (Créer un compte / Se connecter) centré et visible */
.mbgc-auth-switch{
  text-align:center;
  margin-top: 12px;
  font-size: 18px;      /* plus gros */
  font-weight: 600;
}

.mbgc-auth-switch a{
  color:#b1935d;
  text-decoration: underline;
}

/* Champs de formulaire plus larges */
.mbgc-auth-card input[type="email"],
.mbgc-auth-card input[type="password"],
.mbgc-auth-card input[type="text"],
.mbgc-auth-card input[type="tel"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
}

/* Le label doit occuper toute la largeur */
.mbgc-auth-card label {
  display: block;
  width: 100%;
}

/* Bloc consentement (CGU / RGPD) */
.mbgc-consent {
  margin: 12px 0;
}


/* Case à cocher */
.mbgc-consent input[type="checkbox"] {
  margin-top: 3px; /* aligne avec le texte sur 2 lignes */
  width: 16px;
  height: 16px;
  accent-color: #b1935d; /* couleur du site (navigateurs modernes) */
}

/* ===== MBGC Modal ===== */
.mbgc-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.mbgc-modal-backdrop.is-open{ display:flex; }

.mbgc-modal{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.mbgc-modal .mbgc-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}

.mbgc-modal .mbgc-modal-msg{
  margin-top: 10px;
  font-size: 14px;
}

/* Zone Mon compte : titres plus propres */
.mbgc-account h2,
.mbgc-account h3 {
  font-family: "Lato" !important;
  font-style: normal !important;
   letter-spacing: 0;
}

.mbgc-account h2 { font-size: 26px !important; margin-top: 0 !important; font-weight: 600 !important; }
.mbgc-account h3 { font-size: 20px ; font-weight: 500 ; }
.mbgc-account-layout{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .mbgc-account-layout{
    grid-template-columns: 1fr;
  }
}

.mbgc-profile-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mbgc-section-title{
  margin: 0;
}

.mbgc-link-edit{
	font-family: "Lato";
  text-decoration: underline;
  font-weight: 400;
}

.mbgc-profile-lines{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.mbgc-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.mbgc-line span{
  opacity: .75;
}

.mbgc-profile-links{
  margin-top: 14px;
  display: grid;
  gap: 0px;
}

.mbgc-link{
	font-family: "lato";
	font-size: 16px;
	 line-height: 1.5;
  text-decoration: underline;
  display: inline-block;
  font-weight: 400;
}

.mbgc-actions-top{
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.mbgc-cta{
  padding-left: 18px;
  padding-right: 18px;
  border-radius:12px !important;
}

.mbgc-bookings-card .mbgc-section-subtitle{
  margin: 0 0 0px !important;
}

.mbgc-bookings-list{
  list-style: none;
  padding: 0;
  margin: 0px !important;
  display: grid;
 
}

.mbgc-booking-item{
  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 10px 12px;
}

.mbgc-booking-title{
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 20px;
}

.mbgc-booking-time{
  opacity: .85;
}

.mbgc-booking-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mbgc-inline{
  display: inline;
  margin: 0;
}

.mbgc-booking-note{
  opacity: .8;
}
.mbgc-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
/* Zone bouton dans la carte RDV */
.mbgc-bookings-top{
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
}

/* Bouton CTA : un peu plus élégant */
.mbgc-bookings-card .mbgc-cta{
  padding: 10px 22px !important;
  border-radius: 10px !important;
  background-color: #bca875 !important;
  font-family: "Lato" !important;
}

.mbgc-booking-actions .button{
  padding: 5px 12px;       /* ↓ taille */
  font-size: 13px;         /* ↓ texte */
  font-family: "Lato";
  border-radius: 6px;      /* plus discret */
  min-height: auto;
}
/* Modal : titre */
.mbgc-modal h4{
  margin: 5px 0 30px 0;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  font-family: Lato;
  white-space: normal;
  overflow-wrap: break-word;
}
/* Modal : contenu */
.mbgc-modal-body {
  margin: 0 20px 20px;
 }

.mbgc-modal-body p{
  margin: 4px 0 0;
  line-height: 1.4;
}
/* Zone actions modal */
.mbgc-modal-actions{
  position: relative;
  justify-content: center;
}

/* Bouton Confirmer = CTA centré */
.mbgc-modal-confirm{
  padding: 10px 26px;
  border-radius: 10px;
  
}

/* Bouton Retour = lien discret */
.mbgc-modal-cancel{
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #9a7b3f; /* adapte à ta couleur */
  text-decoration: underline;
  font-size: 14px;
  position: absolute;
  left: 0;
  bottom: 0;
  cursor: pointer;
}
.mbgc-edit-info{
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #f7f6f4;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}

.mbgc-edit-info p{
  margin: 0;
}
.mbgc-profile-plain{
  margin-top: 12px;
  display: grid;
  gap: 6px;
  text-align: left;
}

.mbgc-profile-name{
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #b1935d;
}

.mbgc-profile-item{
  font-size: 18px;
  line-height: 1.35;
  opacity: .95;
}
/* ===== MBGC Popup ===== */
.mbgc-pop-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 18px;
}

.mbgc-pop-overlay.is-open{
  display: flex;
}

.mbgc-pop{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 60px rgba(0,0,0,.22);
  padding: 20px 20px 20px;
}

.mbgc-pop h4{
 margin: 30px 0 10px 0;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.mbgc-pop p{
  margin: 0;
  line-height: 1.45;
}

.mbgc-pop-actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.mbgc-pop-close{
  padding: 9px 22px;
  border-radius: 10px;
}

/* Page modifier coordonnées */
.mbgc-edit-wrap{
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 16px 40px;
}

.mbgc-edit-title{
  text-align: center;
  margin: 10px 0 16px;
}

.mbgc-edit-card{
  padding: 18px 18px 14px;
}

.mbgc-edit-form .mbgc-field{
  margin: 12px 0;
}

.mbgc-edit-form label{
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.mbgc-edit-form input[type="text"],
.mbgc-edit-form input[type="email"]{
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 10px;
}

/* Texte grisé non modifiable */
.mbgc-readonly{
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f3f3;
  color: #666;
}

.mbgc-readonly small{
  margin-left: 6px;
  color: #888;
  font-weight: 400;
}

/* Bouton centré */
.mbgc-edit-actions{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* Lien retour bas-gauche */
.mbgc-edit-back{
  margin-top: 12px;
}

.mbgc-edit-back a{
  text-decoration: underline;
}

/* ===== FIX MOBILE : FORMULAIRE CONNEXION MBGC COUPÉ ===== */
@media (max-width: 768px) {

  /* 1) On neutralise tout décalage/transform qui peut “pousser” le bloc */
  .mbgc-auth,
  .mbgc-auth .mbgc-card,
  .mbgc-auth .mbgc-auth-panel {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* 2) Largeur : jamais plus large que l’écran (viewport) */
  .mbgc-auth {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;  /* 12px de marge de chaque côté */
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .mbgc-auth .mbgc-card {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
    padding: 22px 16px !important;
    box-sizing: border-box !important;
  }

  /* 3) Champs/boutons 100% et pas de min-width qui casse */
  .mbgc-auth input,
  .mbgc-auth button,
  .mbgc-auth select,
  .mbgc-auth textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4) Très important : si un parent “coupe”, on l’empêche (sans toucher tout le site) */
  .mbgc-auth,
  .mbgc-auth * {
    overflow: visible !important;
  }
}
@media (max-width: 768px) {

   /* 3) CHECKBOX uniquement : inline-flex (checkbox à gauche + texte) */
  .mbgc-auth input[type="checkbox"]{
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 10px 0 0 !important;
    flex: 0 0 auto !important;
  }

  /* Les lignes checkbox (on cible large pour couvrir tous tes cas) */
  .mbgc-auth .mbgc-remember label,
  .mbgc-auth .rememberme label,
  .mbgc-auth .login-remember label,
  .mbgc-auth p.forgetmenot label,
  .mbgc-auth .mbgc-consent label,
  .mbgc-auth .mbgc-checkbox label{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
}
@media (max-width: 768px){

  .mbgc-consent-label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mbgc-consent-label input[type="checkbox"]{
  flex: 0 0 auto;
  margin-top: 4px;
}

.mbgc-consent-text{
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: left;
}

}
.mbgc-input-readonly[readonly]{
  background:#f2f2f2;
  color:#666;
  border-color:#ddd;
  cursor:not-allowed;
}

.mbgc-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#777;
}

/* ===============================
   POPUP MBGC – AJUSTEMENTS UI
================================ */

/* Conteneur principal du popup */
.mbgc-pop,
.mbgc-modal {
  padding: 32px 36px;            /* marge uniforme haut/bas */
  text-align: center;            /* centre tout par défaut */
}

/* Titre */
.mbgc-pop h4,
.mbgc-modal h4 {
  margin-top: 0;                 /* supprime l’espace inutile en haut */
  margin-bottom: 16px;           /* rapproche du texte */
  font-size: 1.5rem;
  line-height: 1.3;
}

/* Texte / message */
.mbgc-pop p,
.mbgc-modal p,
.mbgc-modal-msg {
  margin: 0 auto 24px;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
}

/* Zone boutons */
.mbgc-pop-actions,
.mbgc-modal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;                     /* 👈 espacement entre boutons */
  margin-top: 8px;
  
}



/* Popup confirmation RDV → layout original */
.mbgc-modal-booking-confirm {
  text-align: left;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.mbgc-modal-booking-confirm h4{
  margin: 5px 0 30px 0;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  font-family: Lato;
  white-space: normal;
  overflow-wrap: break-word;
}

.mbgc-modal-booking-confirm p {
  text-align: left;
  margin: 4px 0 0;
  line-height: 1.4;
}

.mbgc-modal-booking-confirm .mbgc-modal-actions {
   display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}

.mbgc-password-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 36px;            
  text-align: center; 
}
.mbgc-password-card p {
  text-align: left !important;
  margin: 4px 0 0;
  line-height: 1.4;
}
.mbgc-field {
	text-align: left;
}

/* ===============================
   Page mot de passe (MBGC)
================================ */

.mbgc-password-card {
  max-width: 620px;     /* ajuste si tu veux plus large */
  margin: 0 auto;
}

/* Les champs prennent toute la largeur */
.mbgc-password-card .mbgc-field {
  display: block;
  margin-bottom: 18px;
}

.mbgc-password-card .mbgc-field label {
  display: block;
  margin-bottom: 8px;
}

/* Inputs moins hauts + 100% largeur */
.mbgc-password-card input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  height: 42px;         /* moins haut */
  padding: 10px 12px;   /* équilibre intérieur */
  border-radius: 8px;   /* optionnel, harmonise */
}

/* Plus d’espace avant le bouton */
.mbgc-password-card button[type="submit"] {
  margin-top: 16px;     /* espace entre dernier champ et bouton */
  font-family: "lato";
  font-size: 16px;
}

/* Optionnel : espace sous le bouton */
.mbgc-password-card .mbgc-back {
  margin-top: 14px;
}

/* Boutons (optionnel : harmonisation) */
.mbgc-pop-actions button,
.mbgc-modal-actions button {
  min-width: 100px;
  border-radius: 14px !important;
  font-size: 18px !important;
  padding: 6px 0 6px !important;
}

.mbgc-tabs{
   display: flex;
  flex-direction: column; /* ⬇️ vertical */
  gap: 4px;
  margin: 14px 0;
  font-family: "lato";
  font-size: 16px;
}
.mbgc-tab{
  display: block;
  width: 100%;              /* pleine largeur */
  padding: 6px 14px;
  text-align: left;
  border-radius: 0;         /* ❌ coins arrondis */
  background: #f6f6f6;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}
.mbgc-tab:hover {
  background: #e6e6e6;
}

.mbgc-tab.is-active {
  background: #ece8e0;      /* couleur active */
  color: #000;
  font-weight: 500;
   border-left: 4px solid #b89b63;
}

.mbgc-history-status{
  font-weight:600;
  opacity:.85;
}
.mbgc-rdv-title {
	margin-top: 16px;
	margin-bottom: 12px;
	font-size: 18px !important;
	font-weight:600 !important;
}
.mbgc-history-status {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 20px;
  text-align: center;
  min-width: 90px;
}

/* Effectué */
.mbgc-history-status.mbgc-effectué {
  background: #e6f3ec;
  color: #2f6b4f;
  font-family: "lato";
}

/* Annulé */
.mbgc-history-status.mbgc-annulé {
  background: #f6e4e4;
  color: #8a2f2f;
  font-family: "lato";
}
@media (max-width: 480px) {
  .mbgc-service-item {
    padding: 10px 12px;
  }
  .mbgc-service-item label {
    font-size: 15px;
  }
  .mbgc-svc {
	  margin-bottom: 3px;
}
}
@media (max-width: 480px) {
  .mbgc-date-filters {
    gap: 12px;
  }

  .mbgc-primary-btn {
    width: 100%;
    margin: 16px 0;
  }
}
@media (max-width: 480px) {
  
  
  .mbgc-headerrow{ 
  display:none;
  justify-content:center;
  margin-top:14px;
  margin-bottom:14px;
  }
  
  .mbgc-slotlist{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 520px;   /* garde une largeur "card" */
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
	
	
  .mbgc-popup {
    width: calc(100% - 32px);
    max-width: 100%;
    padding: 24px 20px;
  }
  .mbgc-modal-booking-confirm h4 {
	  padding: 0 20px;
  }

  .mbgc-popup-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 20px;
  }

  .mbgc-popup-actions .button,
  .mbgc-popup-actions a {
    width: 100%;
    text-align: center;
  }

  .mbgc-popup h2 {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .mbgc-popup p {
    text-align: center;
  }
}
@media (max-width: 480px) {

  /* 1) Le wrapper du module prend toute la largeur utile */
  .mbgc {
    width: 100%;
	padding-left : 0 !important;
	padding-right : 0 !important;
  }

  /* 2) Toutes les "cards" MBGC ont la même largeur que Mon compte */
  .mbgc .mbgc-card,
  .mbgc-account-wrap .mbgc-card,
  .mbgc-edit-wrap .mbgc-card,
  .mbgc-password-card {
    width: 100%;  /* marge latérale */
    max-width: 520px;          /* limite pour grands mobiles */
    margin: 0 auto !important;            /* centré */
  }

  /* 3) Si tu as des sections hors .mbgc-card (selon ton HTML) */
  .mbgc .mbgc-services,
  .mbgc .mbgc-slots,
  .mbgc .mbgc-suggestions {
    width: 100%;
  }
  .mbgc-modal-body {
    margin: 0 5px 5px;
}
  .mbgc-edit-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0 0;
}
  }

@media (max-width: 340px) {
  .mbgc-slotlist{
    grid-template-columns: 1fr;
  }
}


/* "Retour" trop gros : on le remet en taille normale */
.mbgc-modal-backdrop[data-modal="booking"] .mbgc-modal-cancel{
  text-align: left !important;                 /* garde le style lien */
  font-size: 14px !important;            /* réduit si ton thème l’a gonflé */
  line-height: 1.2;
}

/* "Confirmer" manque de padding : on normalise */
.mbgc-modal-backdrop[data-modal="booking"] .mbgc-modal-confirm{
  padding: 14px 24px !important;
  line-height: 1.1;
  border-radius: 16px;        /* ajuste si tu veux */
  min-height: 44px;           /* confort tactile */
  white-space: nowrap;
}

.mbgc-svc {
    margin-bottom: 5px;
}
/* Centre la carte de réservation */
.mbgc {
 
  justify-content: center;
}
/* Aligne le titre avec la carte de réservation */
.mbgc-title,
.mbgc h3,
.mbgc > h3 {
  max-width: 1100px;
  margin: 0 auto 20px auto;
  padding: 0 10px;
}

/* Largeur + centrage de la carte */
.mbgc .mbgc-card{
  width: 100%;
  max-width: 1100px;   /* ajuste: 1000 / 1200 */
  margin: 0 auto;
}
.mbgc h3{
  text-align: center; /* ou center si tu préfères */
}

/* Comportement normal (desktop / tablette) */
.mbgc-datewrap{
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 14px;
  cursor: pointer;
}

/* Input neutre */
.mbgc-datewrap .mbgc-date{
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* ===== MOBILE UNIQUEMENT ===== */
@media (max-width: 768px){
  .mbgc-datewrap{
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

  .mbgc-datewrap .mbgc-date{
    width: 100%;
  }
}