.elementor-49 .elementor-element.elementor-element-5bb4e1f{--display:flex;--min-height:45vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-49 .elementor-element.elementor-element-5bb4e1f:not(.elementor-motion-effects-element-type-background), .elementor-49 .elementor-element.elementor-element-5bb4e1f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.skills-coiffure.com/wp-content/uploads/2026/02/Reservation-Salon-de-coiffure-Annecy.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-49 .elementor-element.elementor-element-2051e07{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -28px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-49 .elementor-element.elementor-element-2051e07 .elementor-heading-title{font-family:"DM Serif Display", Sans-serif;font-size:135px;font-weight:500;text-transform:none;line-height:1.1em;letter-spacing:0.7px;color:var( --e-global-color-dac6eb7 );}.elementor-49 .elementor-element.elementor-element-3a787d9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:7%;--padding-bottom:7%;--padding-left:5%;--padding-right:5%;}.elementor-49 .elementor-element.elementor-element-3a787d9:not(.elementor-motion-effects-element-type-background), .elementor-49 .elementor-element.elementor-element-3a787d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-dac6eb7 );}.elementor-49 .elementor-element.elementor-element-0bfdea1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-293f0c9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:120px;--padding-left:10px;--padding-right:10px;--z-index:0;}.elementor-49 .elementor-element.elementor-element-f95a0a2{z-index:1;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-a53f657 );}:root{--page-title-display:none;}@media(max-width:1366px){.elementor-49 .elementor-element.elementor-element-5bb4e1f{--min-height:550px;--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-2051e07{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -124px) 15px;}.elementor-49 .elementor-element.elementor-element-2051e07 .elementor-heading-title{font-size:116px;}.elementor-49 .elementor-element.elementor-element-f95a0a2{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:1200px){.elementor-49 .elementor-element.elementor-element-5bb4e1f{--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-2051e07{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -121px) 15px;}.elementor-49 .elementor-element.elementor-element-2051e07 .elementor-heading-title{font-size:100px;}}@media(max-width:1024px){.elementor-49 .elementor-element.elementor-element-5bb4e1f{--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-2051e07{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -116px) 20px;}.elementor-49 .elementor-element.elementor-element-2051e07 .elementor-heading-title{font-size:74px;}.elementor-49 .elementor-element.elementor-element-3a787d9{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-49 .elementor-element.elementor-element-0bfdea1{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-293f0c9{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-f95a0a2{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-49 .elementor-element.elementor-element-5bb4e1f{--min-height:400px;--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-2051e07{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -58px) 15px;}.elementor-49 .elementor-element.elementor-element-2051e07 .elementor-heading-title{font-size:48px;line-height:1em;}.elementor-49 .elementor-element.elementor-element-3a787d9{--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:5%;}.elementor-49 .elementor-element.elementor-element-293f0c9{--margin-top:-70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-49 .elementor-element.elementor-element-f95a0a2{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(min-width:768px){.elementor-49 .elementor-element.elementor-element-0bfdea1{--width:66%;}.elementor-49 .elementor-element.elementor-element-293f0c9{--width:34%;}}@media(max-width:1024px) and (min-width:768px){.elementor-49 .elementor-element.elementor-element-0bfdea1{--width:100%;}.elementor-49 .elementor-element.elementor-element-293f0c9{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-8a1c716 *//* =========================================================
   PLANITY (100% scoped)
   ========================================================= */
#planitywl{
  --p-primary:#c62d49;
  --p-text:#2F2528;
  --p-white:#ffffff;

  background-color:#f7f1f0;
}

/* 0) Neutraliser les effets parasites (hover global, filtres, etc.) */
#planitywl button:hover,
#planitywl button:focus,
#planitywl button:active{
  background-image:none !important;
  filter:none !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* 1) Boutons nav (Prendre un RDV / Offrir) - actif stable */
#planitywl .planity-nav-button-active,
#planitywl .planity-nav-button-active:hover,
#planitywl .planity-nav-button-active:focus{
  background-color:var(--p-primary) !important;
  border-color:var(--p-primary) !important;
  color:var(--p-white) !important;
}

/* Texte interne (quel que soit le span) */
#planitywl .planity-nav-button-active span{
  color:var(--p-white) !important;
}

/* 2) Boutons primary (ex: Choisir) */
#planitywl [class*="button-module_button-"][class*="button-module_primary-"],
#planitywl [class*="button-module_button-"][class*="button-module_primary-"]:hover,
#planitywl [class*="button-module_button-"][class*="button-module_primary-"]:focus{
  background-color:var(--p-primary) !important;
  border-color:var(--p-primary) !important;
  color:var(--p-white) !important;
}

/* 3) Boutons secondary (ex: Offrir) */
#planitywl [class*="button-module_button-"][class*="button-module_secondary-"],
#planitywl [class*="button-module_button-"][class*="button-module_secondary-"]:hover,
#planitywl [class*="button-module_button-"][class*="button-module_secondary-"]:focus{
  background-color:var(--p-white) !important;
  color:var(--p-text) !important;
  border:1px solid var(--p-primary) !important;
}

/* 4) UNDERLINED (ex: "Voir les X autres prestations" / "Plus de détails")
   -> style lien, visible, hover stable
*/
#planitywl [class*="button-module_button-"][class*="button-module_underlined-"]{
  background-color:transparent !important;
  border:0 !important;
  padding:6px 0 !important;
  color:var(--p-primary) !important;
  text-decoration:none !important;
}

#planitywl [class*="button-module_button-"][class*="button-module_underlined-"]:hover,
#planitywl [class*="button-module_button-"][class*="button-module_underlined-"]:focus{
  background-color:transparent !important;
  border:0 !important;
  color:var(--p-primary) !important;
  text-decoration:underline !important;
}

/* Le texte interne du bouton underlined */
#planitywl [class*="button-module_button-"][class*="button-module_underlined-"] span{
  color:inherit !important;
}

/* 5) Toggle (si utilisé séparément) */
#planitywl [class*="service-module_toggle-"]{
  margin-top:8px !important;
}

/* 6) Timeslot (si présent) */
#planitywl .page-module_timeslot-lyAWf .page-module_item-80\+np{
  background-color:var(--p-white) !important;
  color:var(--p-text) !important;
}
/* PLANITY – hover blanc UNIQUEMENT sur le bouton "Plus de détails" (toggle) */
#planitywl [class*="service-module_toggle-"]:hover,
#planitywl [class*="service-module_toggle-"]:focus {
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 999px !important;   /* optionnel : cohérent avec la forme */
}
/* ================================
   PLANITY – Select "Choisir avec"
   Objectif : largeur + dropdown aligné
   ================================ */

/* 1) Le select est trop étroit (max-width ~160px dans Planity) */
#planitywl button.planity_appointment_choose_with{
  width: clamp(220px, 28vw, 320px) !important;
  max-width: none !important;
  min-height: 40px !important;
  padding: 6px 12px !important;
  justify-content: space-between !important;
}

/* Le champ interne (readonly) */
#planitywl button.planity_appointment_choose_with input{
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* 2) Dropdown : même largeur que le select + fond blanc + z-index */
#planitywl .planity_wrapper[class*="select-module_drawer-"]{
  width: clamp(220px, 28vw, 320px) !important;
  max-width: none !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

/* Optionnel : forcer l’alignement à gauche sous le bouton */
#planitywl [class*="drawer-module_attached-"].planity_wrapper[class*="select-module_drawer-"]{
  left: 0 !important;
  right: auto !important;
}

/* 3) Options : éviter l’effet "gros pill" et rendre la liste plus lisible */
#planitywl .planity_wrapper[class*="select-module_drawer-"] button{
  width: 100% !important;
  border-radius: 0 !important;
}

/* Mobile : le select prend toute la largeur */
@media (max-width: 767px){
  #planitywl button.planity_appointment_choose_with,
  #planitywl .planity_wrapper[class*="select-module_drawer-"]{
    width: 100% !important;
  }
}
/* PLANITY – afficher le nom sélectionné dans "Choisir avec" */
#planitywl button.planity_appointment_choose_with{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Champ texte readonly qui contient la valeur (Kim/Coralie/...) */
#planitywl button.planity_appointment_choose_with input[class*="select-module_field-"]{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  /* clés pour rendre le texte visible */
  color: var(--p-text) !important;
  -webkit-text-fill-color: var(--p-text) !important;

  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Au cas où un style met le texte à transparent sur les inputs readonly */
#planitywl button.planity_appointment_choose_with input[readonly]{
  color: var(--p-text) !important;
  -webkit-text-fill-color: var(--p-text) !important;
}

/* Empêche l’icône (chevron) de "manger" la place du texte */
#planitywl button.planity_appointment_choose_with span[class*="select-module_icon-"]{
  flex: 0 0 auto !important;
}
#planitywl button.planity_appointment_choose_with{
  color: var(--p-text) !important;
}

/* PLANITY – boutons navigation planning (← / →) */
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-,
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg:hover,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-:hover,
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg:focus,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-:focus,
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg:active,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-:active {
  background-color: var(--p-primary) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px !important;        /* ↓ ajuste : 8px si tu veux encore plus petit */
  min-width: auto !important;
  min-height: auto !important;
  box-shadow: none !important;
}

/* Icône (SVG) en blanc en toutes circonstances */
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg svg,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd- svg,
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg:hover svg,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-:hover svg,
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg:focus svg,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-:focus svg,
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg:active svg,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd-:active svg {
  color: #fff !important;   /* pour stroke="currentColor" */
}

/* Optionnel : taille icône un peu plus cohérente */
#planitywl .step-module_timetable-eQDKH .step-module_previous-lMYhg svg,
#planitywl .step-module_timetable-eQDKH .step-module_next-a4Xd- svg {
  width: 20px !important;
  height: 20px !important;
}
.icon-module_icon-UEcuk.icon-module_icon40-YSE9Q {
  width: 20px !important;
  height: 16px !important;
}
.title-module_title-5XjLY .title-module_index-V5qhP {
  margin-right: 4px;
  color: #000;
}/* End custom CSS */