/* =========================================================
   APSARA CLAY CORNER — CSS PAGES DE RÉSERVATION - 18/09/26
   ========================================================= */


/* =========================================================
   1. IMPORT DES POLICES
   ---------------------------------------------------------
   - Allura : écriture manuscrite pour le nom de marque.
   - Montserrat : police lisible pour les services, textes,
     boutons, dates et formulaires.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Montserrat:wght@400;500;600;700;800;900&display=swap');


/* =========================================================
   2. POLICE GÉNÉRALE
   ---------------------------------------------------------
   Applique Montserrat sur l'ensemble de la page de réservation.
   ========================================================= */
body,
#widget_container,
#events,
#eventForm,
.ui-widget,
input,
select,
textarea,
button {
  font-family: "Montserrat", Arial, sans-serif !important;
}


/* =========================================================
   3. TITRE « APSARA CLAY CORNER »
   ---------------------------------------------------------
   Applique la police manuscrite Allura et un doré proche du
   logo Apsara Clay Corner.
   ========================================================= */
#company-name,
.company-name,
.sb-company-name,
#sb_company_name,
.company_title,
.company-title,
#widget_container h1.title a {
  font-family: "Allura", cursive !important;
  font-size: 62px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #B07E1E !important;
}


/* =========================================================
   4. TITRES DES SERVICES / ATELIERS
   ---------------------------------------------------------
   Conserve une police nette et lisible pour :
   - Atelier Modelage & Émaillage
   - Atelier Émaillage & Personnalisation
   - Atelier Anniversaire
   ========================================================= */
#events h3,
#events .name,
#events .event_name {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #4B3528 !important;
}


/* =========================================================
   5. BOUTONS DE RÉSERVATION
   ---------------------------------------------------------
   Harmonise les boutons « Sélectionner » et les boutons du
   formulaire avec les couleurs du logo.
   ========================================================= */
#events input.reserve_time_btn,
#events input.select_another_btn,
#eventForm #save_button,
#widget_container input[type="submit"],
#widget_container button[type="submit"] {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 600 !important;
  background-color: #C9C0AA !important;
  color: #4B3528 !important;
  border-color: #C9C0AA !important;
}


/* =========================================================
   6. MASQUER « AFFICHER SUR LA CARTE »
   ---------------------------------------------------------
   Cible exacte du bouton selon le HTML envoyé :
   <div class="btn map btn-with-image custom">
   ========================================================= */
#widget_container div.btn.map.btn-with-image.custom {
  display: none !important;
}


/* =========================================================
   7. CENTRER LE BOUTON « RÉSERVER »
   ---------------------------------------------------------
   Une fois le bouton de carte masqué, le bouton Réserver
   reste seul au centre de l'en-tête.
   ========================================================= */
#widget_container #widget_header {
  text-align: center !important;
}

#widget_container #widget_header .btn:not(.map) {
  display: inline-block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}




/* =========================================================
   9. MASQUER LA CARTE ET L'ADRESSE
   ---------------------------------------------------------
   Masque les éléments techniques fréquemment utilisés par
   SimplyBook pour l'adresse et la carte. Ces règles ne visent
   pas les cartes d'ateliers.
   ========================================================= */
#widget_container .sb-company-address,
#widget_container .company-address,
#widget_container .company_address,
#widget_container .address-section,
#widget_container #address-section,
#widget_container #map,
#widget_container .map-container,
#widget_container .map_container,
#widget_container .google-map,
#widget_container .google_map,
#widget_container .sb-map,
#widget_container .location-map,
#widget_container .sb-location-map,
#widget_container iframe[src*="google.com/maps"],
#widget_container iframe[src*="openstreetmap"],
#widget_container iframe[src*="maps"] {
  display: none !important;
}


/* =========================================================
   10. BARRE DU TUNNEL DE RÉSERVATION
   ---------------------------------------------------------
   La barre Service / Date / Informations de contact reçoit
   un fond brun foncé afin de rendre les flèches blanches
   réellement visibles.
   ========================================================= */
#widget_container .step_info,
#widget_container .step-info,
#widget_container .steps_info,
#widget_container .steps-info {
  background-color: #4B3528 !important;
  color: #FFFFFF !important;
}


/* =========================================================
   11. ÉTAPES DU TUNNEL
   ---------------------------------------------------------
   Chaque étape sert de repère pour placer une flèche vers
   l'étape suivante.
   ========================================================= */
#widget_container .step_info_item,
#widget_container .step-info-item,
#widget_container .step_item,
#widget_container .step-item {
  position: relative !important;
  color: #FFFFFF !important;
}


/* =========================================================
   12. TEXTE « SERVICE »
   ========================================================= */
#widget_container .step_info_item:first-child,
#widget_container .step-info-item:first-child,
#widget_container .step_item:first-child,
#widget_container .step-item:first-child {
  color: #FFFFFF !important;
}

/* =========================================================
   15. REMPLACER « HEURE » PAR « DATE »
   ---------------------------------------------------------
   Le mot d'origine est masqué visuellement ; « Date » est
   affiché au même emplacement.
   ========================================================= */
#widget_container .step_info_item:nth-child(2) .content,
#widget_container .step-info-item:nth-child(2) .content,
#widget_container .step_item:nth-child(2) .content,
#widget_container .step-item:nth-child(2) .content {
  position: relative !important;
  font-size: 0 !important;
}

#widget_container .step_info_item:nth-child(2) .content::before,
#widget_container .step-info-item:nth-child(2) .content::before,
#widget_container .step_item:nth-child(2) .content::before,
#widget_container .step-item:nth-child(2) .content::before {
  content: "Date" !important;
  display: block !important;
  color: #FFFFFF !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}


/* =========================================================
   16. REMPLACER « CLIENT » PAR
   « INFORMATIONS DE CONTACT »
   ========================================================= */
#widget_container .step_info_item:nth-child(3) .content,
#widget_container .step-info-item:nth-child(3) .content,
#widget_container .step_item:nth-child(3) .content,
#widget_container .step-item:nth-child(3) .content {
  position: relative !important;
  font-size: 0 !important;
}

#widget_container .step_info_item:nth-child(3) .content::before,
#widget_container .step-info-item:nth-child(3) .content::before,
#widget_container .step_item:nth-child(3) .content::before,
#widget_container .step-item:nth-child(3) .content::before {
  content: "Informations de contact" !important;
  display: block !important;
  color: #FFFFFF !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}


/* =========================================================
   17. VERSION MOBILE
   ---------------------------------------------------------
   Empêche les éléments de dépasser sur un téléphone.
   ========================================================= */
@media (max-width: 768px) {

  #company-name,
  .company-name,
  .sb-company-name,
  #sb_company_name,
  .company_title,
  .company-title,
  #widget_container h1.title a {
    font-size: 46px !important;
  }

  #widget_container .step_info_item:first-child::after,
  #widget_container .step-info-item:first-child::after,
  #widget_container .step_item:first-child::after,
  #widget_container .step-item:first-child::after,
  #widget_container .step_info_item:nth-child(2)::after,
  #widget_container .step-info-item:nth-child(2)::after,
  #widget_container .step_item:nth-child(2)::after,
  #widget_container .step-item:nth-child(2)::after {
    right: -12px !important;
    font-size: 19px !important;
  }

  #widget_container .step_info_item:nth-child(2) .content::before,
  #widget_container .step-info-item:nth-child(2) .content::before,
  #widget_container .step_item:nth-child(2) .content::before,
  #widget_container .step-item:nth-child(2) .content::before,
  #widget_container .step_info_item:nth-child(3) .content::before,
  #widget_container .step-info-item:nth-child(3) .content::before,
  #widget_container .step_item:nth-child(3) .content::before,
  #widget_container .step-item:nth-child(3) .content::before {
    font-size: 12px !important;
    white-space: normal !important;
  }
}
/* =========================================================
   SUPPRIMER « NOTRE LOCALISATION » ET LA CARTE
   ========================================================= */

/* Masque uniquement le titre de la localisation */
#widget_container .title-section {
  display: none !important;
}

/* Masque le conteneur complet de la carte, son canvas
   et les éventuels contrôles MapLibre / Mapbox */
#widget_container #map,
#map.maplibregl-map.mapboxgl-map,
#map.maplibregl-map.mapboxgl-map canvas.maplibregl-canvas.mapboxgl-canvas,
#map .maplibregl-control-container,
#map .mapboxgl-control-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   MASQUER UNIQUEMENT LA CARTE DU PRESTATAIRE
   ---------------------------------------------------------
   Cible le conteneur exact fourni par SimplyBook :
   <div class="provider-item item"> ... Syngie ... </div>

   Ne touche pas aux cartes des ateliers, y compris
   « Atelier Anniversaire ».
   ========================================================= */
#widget_container .provider-item.item,
.provider-item.item {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   MASQUER « PRESTATAIRE » DANS LA BARRE DU TUNNEL
   ========================================================= */
#widget_container .step_info_item:nth-child(2),
#widget_container .step-info-item:nth-child(2),
#widget_container .step_item:nth-child(2),
#widget_container .step-item:nth-child(2) {
  display: none !important;
}

/* Répartir Service / Heure / Client sur toute la largeur */
#widget_container .step_info,
#widget_container .step-info,
#widget_container .steps_info,
#widget_container .steps-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}/* =========================================================
   TUNNEL : FLÈCHES PROPRES ET CENTRÉES
   Choisir un atelier → Les disponibilités → Vos coordonnées
   ========================================================= */

/* Supprimer le séparateur doré / triangle du thème SimplyBook
   sur l'étape actuellement active */
#sb_booking_info .step_info_item.active,
#sb_booking_info .step_info_item.active > a,
#sb_booking_info .step_info_item.active .content {
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* Neutraliser les éléments décoratifs générés par SimplyBook */
#sb_booking_info .step_info_item.active::before,
#sb_booking_info .step_info_item.active::after,
#sb_booking_info .step_info_item.active > a::before,
#sb_booking_info .step_info_item.active > a::after,
#sb_booking_info .step_info_item.active .content::before,
#sb_booking_info .step_info_item.active .content::after {
  content: none !important;
  display: none !important;
}

/* Les étapes servent de repères pour les flèches */
#sb_booking_info .step_info_item {
  position: relative !important;
  overflow: visible !important;
}

/* Les titres restent normaux : ne pas les déplacer */
#sb_booking_info .step_info_item .title-small {
  position: static !important;
}

/* Première flèche : après « Choisir un atelier » */
#sb_booking_info .step_info_item:nth-child(1) .title-small::after,

/* Deuxième flèche : après « Les disponibilités » */
#sb_booking_info .step_info_item:nth-child(2) .title-small::after {
  content: "→" !important;
  display: block !important;
  position: absolute !important;

  /* Position à la frontière entre deux colonnes */
  right: 0 !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;

  z-index: 1000 !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  text-align: center !important;

  color: #A78320 !important;
  background-color: #FFFFFF !important;
  font-family: Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 700 !important;

  pointer-events: none !important;
}
/* Flèches adaptées aux petits écrans */
@media (max-width: 768px) {
  #sb_booking_info .step_info_item:nth-child(1) .title-small::after,
  #sb_booking_info .step_info_item:nth-child(2) .title-small::after {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 17px !important;
  }
}

/* 1. Supprimer les marges par défaut du body */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important; /* évite la barre de scroll horizontale */
}

/* 2. Faire déborder le cadre sur toute la largeur de la fenêtre */
.company-name.company-logo-and-name {
    background-color: rgba(128, 128, 128, 0.70); /* Gris transparent à 70% */
    padding: 4px 12px;
    border-radius: 0;              /* Pas d'arrondi pour un vrai bandeau */
    display: block;                /* Prend toute la largeur */
    width: 100vw;                  /* Largeur de la fenêtre */
    max-width: 100vw;
    margin-left: calc(50% - 50vw); /* Recentre pour coller aux bords */
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;        /* Le padding ne déborde pas */
    text-align: center;
    font-size: 0.9em;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

a[href="#book"] {
    background-color: #D4A017; /* Jaune moutarde foncé (ni trop clair, ni trop sombre) */
    color: #FFFFFF; /* Blanc pur pour un très bon contraste sur ce jaune foncé */
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    font-size: 24px; /* TEXTE EN GROS */
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

a[href="#book"]:hover {
    background-color: #B8860B; /* Jaune encore un peu plus foncé au survol (doré sombre) */
    color: #FFFFFF;
    transform: scale(1.08);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Mettre le label "Nom:" en gras */
.form-client-name label[for="sb_client_name"] {
    font-weight: bold;
}
/* Mettre le label "Nom:" en gras */
.form-client-name label[for="sb_client_name"] {
    font-weight: bold;
}

/* Ajouter le texte d'instruction après le label "Nom:" */
.form-client-name label[for="sb_client_name"]::after {
    content: " Merci d'indiquer le nombre de personnes qui participeront à la suite de votre nom (ex : Dupont - 4 personnes).";
    font-weight: normal;
    font-size: 0.9em;
    color: #555;
    display: block;
    margin-top: 4px;
    line-height: 1.3;
}
/* =========================================================
   AJUSTEMENT FINAL — BANDEAU ET BOUTON D'ACCUEIL
   ---------------------------------------------------------
   À ajouter tout à la fin du CSS existant.
   Ne modifie pas les services, le tunnel de réservation,
   les formulaires, les cartes d'ateliers ou les autres pages.
   ========================================================= */


/* ---------------------------------------------------------
   1. BANDEAU DU NOM DE L'ATELIER
   Fond brun chaud et transparent, plus harmonieux que le gris.
   --------------------------------------------------------- */
.company-name.company-logo-and-name {
    background-color: rgba(67, 53, 40, 0.62) !important;
    padding: 8px 18px 10px !important;
    border-radius: 0 !important;
    text-align: center !important;
}


/* ---------------------------------------------------------
   2. NOM « ASPARA CLAY CORNER »
   Doré clair et ombre légère pour rester lisible sur les photos.
   --------------------------------------------------------- */
#company-name,
.company-name,
.sb-company-name,
#sb_company_name,
.company_title,
.company-title,
#widget_container h1.title a,
.company-name.company-logo-and-name,
.company-name.company-logo-and-name a,
.company-name.company-logo-and-name #company-name {
    font-family: "Allura", cursive !important;
    font-size: clamp(46px, 5vw, 68px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #F2D99B !important;
    text-decoration: none !important;
    text-shadow:
        0 2px 5px rgba(37, 28, 20, 0.75),
        0 1px 0 rgba(255, 255, 255, 0.12) !important;
}


/* ---------------------------------------------------------
   3. BOUTON « RÉSERVER »
   Taille et couleur adoucies : il reste visible, mais le nom
   de l'atelier devient l'élément principal de la page.
   --------------------------------------------------------- */
a[href="#book"] {
    background-color: #B99A57 !important;
    color: #3F3022 !important;
    padding: 11px 25px !important;
    border: 1px solid #D8C38E !important;
    border-radius: 6px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 5px rgba(31, 23, 16, 0.20) !important;
    transform: none !important;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* ---------------------------------------------------------
   4. SURVOL DU BOUTON
   Effet discret : pas de grossissement du bouton.
   --------------------------------------------------------- */
a[href="#book"]:hover {
    background-color: #D2B66F !important;
    color: #34261B !important;
    transform: none !important;
    box-shadow: 0 3px 7px rgba(31, 23, 16, 0.28) !important;
}