*{margin: 0;user-select: none;}

@font-face {
    font-family: Lobster;
    src: url(../fonts/Lobster.ttf);
}
@font-face {
    font-family: Handlee;
    src: url(../fonts/Handlee/Handlee-Regular.ttf);
}
@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/RobotoSlab-VariableFont_wght.ttf);
}
/* Cinzel, la police des titres et des prix du site (cf. assets/styles/base.css),
   pour les horaires et la date de la carte des créneaux. */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/woff2/cinzel-latin.woff2) format('woff2');
}

body{
    background-color: rgb(30, 30, 30);
    font-size: 1.08rem;
    -webkit-tap-highlight-color: transparent;
    font-family: sans-serif;
    margin: 0;
}

.clientes{float: right;}
.clientes img{height: 40%;width: 80%;}
.cheres-clientes{
    max-width: 400px;
    padding: 32px 12px;
    margin: 28px 24px 0;
    border: solid 1px transparent;
    border-top:solid 4px transparent;
    background: 
        linear-gradient(#302323, #4d3a3a, #725b5b) padding-box,
        linear-gradient(to right, #ad803b, #ffec8f, #ad803b) border-box;
    border-radius: 6px;
    text-align: left;
    animation: fadeInTopSlot 1s ease-in-out forwards;
}
.pour-cette-raison{color: #ffaeb5;}
@keyframes fadeInTopSlot {
    0% { transform: translateY(555px);opacity: 0; }
    100% { transform: translateY(0);opacity: 1; }
}

:root {
  --lightrope-scale: 2.0;
  --lightrope-brightness: 1;
}

.lightrope {
  position: fixed;
  top: 0;
  left: 50%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;

  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1000;
  transform-origin: top center;
  transform:
    translate(
      -50%,
      calc(-8px * (var(--lightrope-scale) - 1))
    )
    scale(var(--lightrope-scale));
}

.lightrope li {
  position: relative;
  list-style: none;
  display: inline-block;
  width: 12px;
  height: 28px;
  margin: 20px;
  border-radius: 50%;
  --bulb-dim:    #7e2c21;
  --bulb-bright: #e46f5c;
  background: var(--bulb-dim);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.18);
  animation-name: bulb-blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-duration: 1.6s;
}

.lightrope li::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -4.6667px;
  left: 1px;
  width: 10px;
  height: 9.3333px;
  border-radius: 3px;
  background: #134413;
}

.lightrope li::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -18px;
  left: 9px;
  width: 52px;
  height: 18px;
  border-bottom: 2px solid #174700;
  border-radius: 50%;
}

.lightrope li:last-child::after {
  content: none;
}

.lightrope li:first-child {
  margin-left: -40px;
}

.lightrope li:nth-child(6n+1) {
  --bulb-dim:    #7e2c21;
  --bulb-bright: #e46f5c;
}

.lightrope li:nth-child(6n+2) {
  --bulb-dim:    #5b4869;
  --bulb-bright: #a487c4;
}

.lightrope li:nth-child(6n+3) {
  --bulb-dim:    #30553a;
  --bulb-bright: #5fa372;
}

.lightrope li:nth-child(6n+4) {
  --bulb-dim:    #b9ae9a;
  --bulb-bright: #f4e5cf;
}

.lightrope li:nth-child(6n+5) {
  --bulb-dim:    #8b6a2f;
  --bulb-bright: #f0c566;
}

.lightrope li:nth-child(6n+6) {
  --bulb-dim:    #2e395e;
  --bulb-bright: #4c63a8;
}

.lightrope li:nth-child(2n+1) {
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
  animation-duration: 1.3s;
}

.lightrope li:nth-child(4n+2) {
  animation-duration: 2.2s;
}

.lightrope li:nth-child(5n+3) {
  animation-duration: 1.1s;
}

.lightrope li:nth-child(7n+4) {
  animation-delay: 0.4s;
}

.lightrope li:nth-child(9n+5) {
  animation-delay: 0.9s;
}


@keyframes bulb-blink {
  0%, 100% {
    background: var(--bulb-dim);
    opacity: 0.65;
  }
  50% {
    background: var(--bulb-bright);
    opacity: calc(0.65 + 0.35 * var(--lightrope-brightness));
  }
}


@media (max-width: 1024px) {
  :root {
    --lightrope-scale: 1.1;
    --lightrope-brightness: 0.9
  }

  .lightrope li {
    margin: 18px;
  }
}

@media (max-width: 600px) {
  :root {
    --lightrope-scale: 0.9;
    --lightrope-brightness: 0.75;
  }

  .lightrope li {
    margin: 14px;
  }
}


#snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    pointer-events: none;
    overflow: hidden;
    z-index: 99;
}

.snowflake {
    position: absolute;
    color: #fff;
    font-size: 1em;
    text-shadow: 0 0 1px #000;
    line-height: 1;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-500px); 
    }
    100% {
        transform: translateY(1200vh); 
    }
}

@keyframes sway {
    0% {
        margin-left: 0;
    }
    50% {
        margin-left: 10px;
    }
    100% {
        margin-left: 0;
    }
}


.tree {
  position: absolute;
  z-index: -999;
  bottom: 0;
  height: 75vmin;
  width: 100%;
  transform-style: preserve-3d;
  animation: spin 8s infinite linear;
}

.tree__light {
  transform-style: preserve-3d;
  position: absolute;
  height: 2vmin;
  width: 2vmin;
  border-radius: 50%;
  animation: 
    flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), 
    appear 0.5s calc(var(--appear) * 0.05s) both;
  left: 50%;
  transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
  bottom: calc(var(--y, 0) * 1%);
}

.tree__star {
  stroke-width: 5vmin;
  stroke: hsl(45, 80%, 80%);
  filter: drop-shadow(0 0 2vmin hsl(45, 90%, 90%));
  height: 10vmin;
  width: 10vmin;
  overflow: visible !important;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  stroke-dasharray: 1000 1000;
  fill: none;
  animation: stroke 1s calc(((var(--delay) * 0.95) * 0.05s)) both;
}


@keyframes stroke {
  from {
    stroke-dashoffset: -1000;
  }
}

@keyframes spin {
  to {
    transform: rotateY(360deg);
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 100% {
    background: red;
  }
  20% {
    background: white;
  }
  40% {
    background: red;
  }
  60% {
    background: white;
  }
  80% {
    background: red;
  }
}

#back-arrow{
    position: fixed;
    top: 23px;
    left: 8px;
    z-index: 999;
}
.back-arrow{
    position: fixed;
    top: 21px;
    left: 8px;
    z-index: 999;
}

header img {
    width: 30px;
    height: 30px;
}

#submitCheckBtn{
    font-size: 1.1rem;
}
h1{
    font-family: Lobster;
    font-size: 2.1em;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 3%;
    text-decoration: none;
    text-align: center;
    background-image: linear-gradient(
	to right,
	#ffee9b 0,
    #f6e27a 15%, 
	#d6b457 45%,
	#f6e27a 55%,
	#d6b457 85%,
	#ffec8f 100%
	);
   color:transparent;
   text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
   -webkit-background-clip:text;
}
small{
    display: block;
    margin-top: 5px;
    font-size: 1rem;
    color: #FFFFFF;
}

.login{
    display: block;
    text-align: center;
    width: 100%;
    margin: 26px auto 0;
    padding: 4px 0;
    background-color: rgb(30, 30, 30);
    font-weight: bold;
    font-family: Roboto;
    border-radius: 8px;
    font-size: 1rem;
    text-underline-offset: 2px;
}
.login button{
    background-color: rgb(30, 30, 30);
    border: 1px solid rgb(130, 157, 241);
    color: rgb(130, 157, 241);
    border-radius: 8px;
    padding: 4px 10px;
    margin: 0 8px;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.login a{
    font-size: 0.8rem;
    color: #d38991;
    letter-spacing: 0;
    text-decoration-thickness:2px;
}
.login a:first-child{
    color: rgb(130, 157, 241);
    border: 1px solid rgb(130, 157, 241);
}
.login img{
    height: 15px;
    width: 15px;
}

.appointment-card-cancel{
    border: 1px solid rgb(194, 177, 152);
    padding: 4px 8px;
    margin: 8px 0;
    border-radius: 8px;
}
.cancel-specific-btn{
    display: flex;
    width: 100%;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.team-planning-content h2{
    font-size: 1rem;
    margin: 0 0 8px;
    color: rgb(194, 177, 152);
}
.collapse{opacity: 0.8;}
.collapse button {
    border-radius:8px;
    margin-top: 4px;

    transition: border-bottom-left-radius 0.5s ease-in-out, 
                border-bottom-right-radius 0.5s ease-in-out;
}
.collapse button.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: none;
}
.collapse button[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.collapse content {
    margin-bottom: 4px;
}
.collapse hr{
    border: 0;
    height: 2px;
    margin-left: 16px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(255,255,255,0));
}
.collapsible {
  background-color: #777;
  background: rgb(244, 244, 244, 0.7);
  cursor: pointer;
  padding: 12px 18px;
  width: 225px;
  border: none;
  text-align: left;
  outline: none;
  font-family: Roboto;
  font-size: 1.1rem;
  font-weight: bold;
}


.collapsible:after {
  content: '\002B';
  color: rgb(0, 0, 0);
  font-weight: bold;
  float: right;
  font-size: 1.2rem;
  margin-top: 2px;
  margin-left: 5px;
}

.collapsible:nth-of-type(even){
    background-color: rgb(230, 217, 199, 0.6);
    color: black;
}
.collapsible img{
    height:25px;
    width:25px;
    position: relative;
    top: 6px;
    margin-left: 4px;
    opacity: 0.4;
}

.active:after {
  content: "\2212";
}

.content {
    text-align: left;
    margin: 0 auto;
    width: 225px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(241, 241, 241, 0.6);
    color: black;
    font-family: Roboto;
    font-size: 1rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.content p{
    padding: 8px 16px 4px;
}
.content:nth-of-type(even){
    background-color: rgb(230, 217, 199, 0.6);
}

.arrow{
    font-weight: bold;
}
.arrow img{
    height: 8px;
    width: 30px;
    position: relative;
    top: -1px;
}
.cross{
    -webkit-text-stroke: 0.05rem black;
    color:#FF5440;
}
.cross img{
    height: 15px;
    width: 17px;
    position: relative;
    top: 2px;
    opacity: 0.7;
    margin: 0 8px;
}
.arrow .day{
    display: inline-block;
    min-width: 70px;
}

#selectedSlotDisplay, #selectedDateDisplay{color: #FFFFFF; font-family: Roboto;}
#selectedDateDisplay{
    font-weight: 700;
}
#backToSlotsBtn{
    background: transparent;
    color: #cb9b51;
    padding: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#backToSlotsBtn:hover {
    color: #f6e27a;
    transform: translateX(-5px) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(203, 155, 81, 0.4));
}
#confirmBookingBtn, #cancelBookingBtn{
    right: 25px;
    padding: 8px 12px;
    background-image: linear-gradient(to right, #462523 0, #cb9b51 3%, #f6e27a 15%, #ffec8f 50%, #f6e27a 85%, #cb9b51 97%, #462523 100%);
    opacity: 0.8;
    border-radius: 6px;
    border: none;
    color: black;
    font-family: Roboto;
    text-shadow: 1px 1px 0px #ffffff, 5px 4px 0px rgba(0,0,0,0.15);
    font-weight: 700;
    font-size: 0.9rem;
}
.cancel-btn-container{
    display: flex;
    justify-content: flex-end;
    padding:15px 15px 0 0;
}
#cancelPhoneNumber{
    margin-bottom: 12px;
}
.title a{
    text-decoration: none;
    color: transparent;
}

.imprevu{
    background-color: rgb(29, 33, 39);
    color: #d38991;
    font-size: 0.9rem;
    padding: 18px 4px;
    margin: 0 24px;
    border-radius: 8px;
}
button:disabled{
    opacity: 0.2;
}

h2{
    font-size: 1.1rem;
    font-family: Roboto;
}
h4{font-family: 'Handlee', cursive;}

.container{
    color: rgb(203, 182, 151);
    text-align: center;
}
.container > h2{
    color: rgb(194, 177, 152);
    font-size: 1rem;
}

/* Raccourci "ou consultez vos rendez-vous" dans le titre */
.h2-rdv {
    display: block;
    margin-top: 10px;
    font-weight: 400;
    font-size: 0.9rem;
    color: rgba(194, 177, 152, 0.7);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
    max-height: 60px;
    overflow: hidden;
}

.h2-rdv.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    margin-top: 0;
    pointer-events: none;
}

.h2-rdv-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding: 5px 12px;
    border: 1px solid rgba(203, 155, 81, 0.45);
    border-radius: 999px;
    background: rgba(203, 155, 81, 0.08);
    color: #f6e27a;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.h2-rdv-link img {
    width: 14px;
    height: 14px;
}

.h2-rdv-link:hover,
.h2-rdv-link:focus-visible {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 100%);
    border-color: #f6e27a;
    color: #17150f;
    box-shadow: 0 0 16px rgba(246, 226, 122, 0.3);
}

.h2-rdv-link:hover img,
.h2-rdv-link:focus-visible img {
    filter: brightness(0);
}

@media (prefers-reduced-motion: reduce) {
    .h2-rdv { transition: none; }
}
.container h3{
    color: #d8d8d8;

}

.btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reservation-date{
    font-size: 1.1rem;
    display: block;
    margin: 0 0 5px;
}
.reservation-form{
    margin-top: 15px;
}

.appointment-card{
    margin: 24px 0 36px;
}
.booking-form-group{
    text-align: left;
    padding: 0 15px;
    margin: 35px 0 12px;
}
.booking-form-group label{
    margin-bottom: 5px;
}
#reservationCheckContainer{
    margin: 15px;
    padding: 0 0 8px 0;
    border-radius: 6px;
    font-family: 'Handlee', cursive;
    animation: fadeInSlot 0.4s ease-out forwards;
}
#reservationCheckContainer h3{
    font-family: Roboto, sans-serif;
    background-image: linear-gradient(to right, #462523 0, #cb9b51 15%, #f6e27a 45%, #ffec8f 50%, #f6e27a 55%, #cb9b51 85%, #462523 100%);
    opacity: 0.6;
    margin: 0 auto;
    padding: 6px 8px;
    max-width: 365px;
    color: black;
}
#submitCheckBtn{
    margin: 14px 18px;
    padding: 8px 24px;
    background-image: linear-gradient(to right, #462523 0, #cb9b51 3%, #f6e27a 15%, #ffec8f 50%, #f6e27a 85%, #cb9b51 97%, #462523 100%);
    opacity: 0.8;
    border-radius: 6px;
    border: none;
    color: black;
    font-family: Roboto;
    font-weight: 700;
    font-size: 0.9rem;
}
#checkPhoneNumber{
    margin-top: 5px;}
.check-container-details{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 auto;
    border-left: 1px solid #ffec8f;
    border-right: 1px solid #ffec8f;
    border-bottom: 1px solid #ffec8f;
    padding: 16px 8px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-width: 365px;
}

@keyframes slideInFromTop {
    0% {transform: translateY(-140%);}
    100% {transform: translateY(0);}
}

.gender-selection h3 {
    font-family: 'Handlee', cursive;
    margin-top: 0;
    animation: slideInFromTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.gender-buttons {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 5px;
}

@keyframes slideInFromBottom {
    0% {transform: translateY(160%);}
    100% {transform: translateY(0);}
}

@keyframes calendarFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.choice-date{
    font-size: 0.8rem;
}

#reservationDate {
    display: none;
}

.custom-calendar {
    display: none;
    position: relative;
    box-sizing: border-box;
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(203, 155, 81, 0.16) 0%, rgba(203, 155, 81, 0) 60%),
        linear-gradient(180deg, #201d19 0%, #141312 100%);
    border: 1px solid rgba(203, 155, 81, 0.28);
    border-radius: 20px;
    padding: 22px 18px 24px;
    max-width: min(350px, calc(100% - 24px), calc(100vw - 24px));
    margin: 15px auto;
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(246, 226, 122, 0.14);
    animation: calendarFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(203, 155, 81, 0.18);
}

.calendar-header h4 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 45%, #cb9b51 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.calendar-btn {
    background: rgba(203, 155, 81, 0.08);
    border: 1px solid rgba(203, 155, 81, 0.45);
    color: #cb9b51;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.calendar-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 100%);
    color: #1a1a1a;
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(246, 226, 122, 0.35);
}

.calendar-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    perspective: 900px;
}

/* --- Transition de changement de mois --- */
@keyframes monthTitleInNext {
    0%   { opacity: 0; transform: translateX(18px); filter: blur(4px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes monthTitleInPrev {
    0%   { opacity: 0; transform: translateX(-18px); filter: blur(4px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes dayInNext {
    0%   { opacity: 0; transform: translate3d(26px, 8px, -60px) rotateY(-28deg) scale(0.85); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
}

@keyframes dayInPrev {
    0%   { opacity: 0; transform: translate3d(-26px, 8px, -60px) rotateY(28deg) scale(0.85); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
}

@keyframes weekdayIn {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.calendar-header h4.cal-enter-next {
    animation: monthTitleInNext 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.calendar-header h4.cal-enter-prev {
    animation: monthTitleInPrev 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.calendar-grid.cal-enter-next .weekday,
.calendar-grid.cal-enter-prev .weekday {
    animation: weekdayIn 0.3s ease-out both;
}

.calendar-grid.cal-enter-next .day,
.calendar-grid.cal-enter-prev .day {
    /* cascade en diagonale : les cellules arrivent ligne après ligne */
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
    animation-delay: calc(var(--i, 0) * 11ms);
}

.calendar-grid.cal-enter-next .day { animation-name: dayInNext; }
.calendar-grid.cal-enter-prev .day { animation-name: dayInPrev; }

.calendar-grid.cal-enter-next .day.empty,
.calendar-grid.cal-enter-prev .day.empty {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-header h4.cal-enter-next,
    .calendar-header h4.cal-enter-prev,
    .calendar-grid.cal-enter-next .day,
    .calendar-grid.cal-enter-prev .day,
    .calendar-grid.cal-enter-next .weekday,
    .calendar-grid.cal-enter-prev .weekday {
        animation: none;
    }
}

.weekday {
    color: rgba(203, 155, 81, 0.75);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 8px;
}

.day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #f3ece0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(203, 155, 81, 0.22);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.day.empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

.day:hover:not(.disabled):not(.selected):not(.empty) {
    background: rgba(203, 155, 81, 0.16);
    border-color: rgba(246, 226, 122, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.day:active:not(.disabled):not(.empty) {
    transform: translateY(0);
}

.day.selected {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 55%, #cb9b51 100%);
    border-color: #f6e27a;
    color: #17150f;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(246, 226, 122, 0.45), 0 6px 16px rgba(0, 0, 0, 0.5);
}

.day.disabled {
    color: rgba(243, 236, 224, 0.28);
    background: transparent;
    border-color: rgba(203, 155, 81, 0.08);
    opacity: 1;
    cursor: not-allowed;
}

.day.today:not(.selected) {
    border-color: rgba(246, 226, 122, 0.7);
    color: #f6e27a;
}

.day.today:not(.selected)::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f6e27a;
}

.calendar-btn:disabled {
    cursor: not-allowed;
    background: transparent;
    border-color: rgba(203, 155, 81, 0.15);
    color: rgba(203, 155, 81, 0.2);
}

.back-to-cal-header {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 15px;
    animation: fadeInSlot 0.4s ease-out;
}

.back-to-cal-btn {
    background: transparent;
    border: none;
    color: #cb9b51;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s;
}

.back-to-cal-btn:hover {
    color: #f6e27a;
}
input[type=text], input[type=tel], input[type=number]{
    background-color: #FFFFFF;
    color: black;
    border-radius: 8px;
    font-size: 1rem;
    width: calc(100% - 20px);
    height: 30px;
    font-size: 1.1rem;
    padding: 0 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: serif;
}

input::placeholder {
    font-style: italic;
    font-size: 1rem;
}

@keyframes blurFadeIn {
    0%   { opacity: 0; filter: blur(10px); transform: translateY(6px); }
    100% { opacity: 1; filter: blur(0px);  transform: translateY(0);   }
}
.customer-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 15px;
}
.customer-input-group label {
    font-family: 'Handlee', cursive;
    font-size: 1rem;
    margin-bottom: 5px;
    transition: color .25s ease;
}
.customer-input-group:focus-within label {
    color: #f6e27a;
}
.firstname { opacity: 0; animation: blurFadeIn 2.6s cubic-bezier(0.22,1,0.36,1) 2.55s forwards; }
.firstname-input { opacity: 0; animation: blurFadeIn 2.6s cubic-bezier(0.22,1,0.36,1) 2.70s forwards; }
.telphone { opacity: 0; animation: blurFadeIn 2.6s cubic-bezier(0.22,1,0.36,1) 2.80s forwards; }
.telphone-input { opacity: 0; animation: blurFadeIn 2.6s cubic-bezier(0.22,1,0.36,1) 2.95s forwards; }
#firstName{margin-bottom: 15px;}

/* ==========================================================================
   Créneaux : la journée enroulée autour du poteau du barbier
   --------------------------------------------------------------------------
   La carte prend la place du calendrier, dans la même matière, et rend au
   client la date qu'il vient de toucher. Au milieu, le poteau ; les heures
   pleines y pendent à gauche, les demies à droite, une demi-marche plus bas.
   Les horaires descendent le poteau comme sa spirale et se lisent dans
   l'ordre : 9h, 9h30, 10h…

   Chaque créneau porte sa ligne (--row, une ligne de grille par demi-heure,
   posée par script.js) : un horaire absent laisse un vide au lieu de faire
   glisser toute la colonne d'un cran.

   Les couleurs passent par les variables --pbs-* avec la valeur de la maison
   en repli : halloween.css et noel.css les redéfinissent, la carte et le
   poteau changent de saison d'eux-mêmes. Les pseudo-éléments de .slot
   restent libres : les thèmes y accrochent leur décor (goutte, neige) dans
   les 8 px qui séparent deux créneaux d'une même colonne.
   ========================================================================== */

.slot-board {
    --tab: 32px;           /* hauteur d'un créneau */
    --gap: 8px;            /* entre deux créneaux d'une même colonne */
    --lane: 36px;          /* couloir du poteau, attaches comprises */
    --pole: 12px;
    box-sizing: border-box;
    width: min(350px, calc(100% - 24px));
    padding: 20px 16px 26px;
    border: 1px solid var(--pbs-line, rgba(203, 155, 81, 0.28));
    border-radius: 20px;
    background:
        radial-gradient(120% 50% at 50% -12%, rgba(var(--pbs-glow, 203, 155, 81), 0.16) 0%, rgba(var(--pbs-glow, 203, 155, 81), 0) 60%),
        linear-gradient(180deg, var(--pbs-surface-2, #201d19) 0%, var(--pbs-ink, #141312) 100%);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(246, 226, 122, 0.14);
    animation: calendarFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* La date, à la place exacte du mois dans le calendrier. */
.slot-board__day {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pbs-line-soft, rgba(203, 155, 81, 0.18));
    font-family: var(--pbs-font-title, 'Cinzel', Georgia, serif);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    text-shadow: none;
    background: linear-gradient(135deg, var(--pbs-gold, #cb9b51) 0%, var(--pbs-gold-bright, #f6e27a) 45%, var(--pbs-gold, #cb9b51) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Une ligne par demi-heure ; un créneau en couvre deux, si bien que deux
   créneaux d'une même colonne sont à --gap l'un de l'autre et que la colonne
   des demies tombe pile une demi-marche plus bas. */
.slot-board__times {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lane) minmax(0, 1fr);
    grid-auto-rows: calc((var(--tab) - var(--gap)) / 2);
    row-gap: var(--gap);
}

/* Le poteau : un ruban d'or enroulé sur du noir, sous un verre bombé, un
   embout à chaque bout — le poteau des barbiers chics plutôt que le
   tricolore. Le calque du ruban fait 28 px de haut, soit une période exacte
   des bandes (14 px à -60°) : il se répète sans couture quand le poteau
   tourne. */
.slot-board__pole {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--pole);
    margin-left: calc(var(--pole) / -2);
    border-radius: 999px;
    background-color: var(--pbs-ink, #14110e);
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(255, 255, 255, 0.28) 34%, rgba(255, 255, 255, 0.04) 60%, rgba(0, 0, 0, 0.65) 100%),
        repeating-linear-gradient(-60deg,
            var(--pbs-gold-bright, #f6e27a) 0 1px,
            var(--pbs-gold, #cb9b51) 1px 6px,
            var(--pbs-gold-deep, #8a5a2b) 6px 7px,
            transparent 7px 14px);
    background-size: 100% 100%, 100% 28px;
    box-shadow:
        0 0 0 1px rgba(var(--pbs-glow, 203, 155, 81), 0.35),
        0 0 16px rgba(var(--pbs-glow, 203, 155, 81), 0.16);
    pointer-events: none;
    /* Le poteau se déroule au rythme des créneaux qui s'en détachent
       (cf. le délai de .slot), puis finit de tourner et s'arrête. Le
       déroulé ne garde pas sa dernière image (backwards) : une fois
       arrivé, plus rien ne rogne le halo ni les embouts. */
    animation:
        poleDraw 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards,
        poleTurn 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Les embouts : une boule et sa bague en haut, une bague en bas. */
.slot-board__pole::before,
.slot-board__pole::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 18px;
    margin-left: -9px;
    border-radius: 3px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.slot-board__pole::before {
    top: -15px;
    height: 17px;
    background-image:
        radial-gradient(circle 5px at 50% 5px, var(--pbs-gold-light, #fff3bf) 0, var(--pbs-gold-bright, #f6e27a) 1.5px, var(--pbs-gold, #cb9b51) 3.8px, var(--pbs-gold-deep, #8a5a2b) 4.6px, transparent 5px),
        linear-gradient(180deg, var(--pbs-gold-light, #fff3bf) 0%, var(--pbs-gold-bright, #f6e27a) 30%, var(--pbs-gold, #cb9b51) 70%, var(--pbs-gold-deep, #8a5a2b) 100%);
    background-size: 100% 100%, 100% 7px;
    background-position: 0 0, 0 100%;
}
.slot-board__pole::after {
    bottom: -5px;
    height: 7px;
    background-image: linear-gradient(180deg, var(--pbs-gold-light, #fff3bf) 0%, var(--pbs-gold-bright, #f6e27a) 30%, var(--pbs-gold, #cb9b51) 70%, var(--pbs-gold-deep, #8a5a2b) 100%);
}

@keyframes poleDraw {
    from { clip-path: inset(-24px -24px 100% -24px); }
    to   { clip-path: inset(-24px -24px -24px -24px); }
}
@keyframes poleTurn {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 0 -112px; }
}

/* Le créneau : un <button>, remis à nu. Libre, c'est un onglet sombre au
   liseré d'or ; son côté arrimé au poteau est presque droit, l'autre arrondi. */
.slot {
    --r: 12px 3px 3px 12px;
    --from: 12px;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    grid-column: 1;
    grid-row: var(--row, auto) / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0 8px;
    border: 1px solid rgba(203, 155, 81, 0.3);
    border-radius: var(--r);
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
    color: var(--pbs-cream, #f3ece0);
    font-family: var(--pbs-font-title, 'Cinzel', Georgia, serif);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-shadow: none;
    cursor: pointer;
    transform-origin: 100% 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
    /* backwards et non both : une fois arrivé, le créneau rend la main à
       :active, qui le presse. */
    animation: slotFromPole 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--row, 1) * 28ms + 140ms);
}
.slot--half {
    --r: 3px 12px 12px 3px;
    --from: -12px;
    grid-column: 3;
    transform-origin: 0 50%;
}

/* « h » de la même couleur que les chiffres. Cinzel en fait déjà une petite
   capitale ; il garde la taille du reste, sans quoi la rature d'un
   créneau complet passerait plus bas sur lui que sur les chiffres. */
.slot__h {
    margin: 0 0.06em;
    color: inherit;
}

/* L'attache, du bord de l'onglet au poteau. Un élément et non un
   pseudo-élément : ceux-ci sont aux thèmes saisonniers. */
.slot__tie {
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc((var(--lane) - var(--pole)) / 2 + 1px);
    height: 1px;
    margin-top: -0.5px;
    background: var(--pbs-gold, #cb9b51);
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.slot--half .slot__tie {
    left: auto;
    right: 100%;
}

@media (hover: hover) {
    .slot:not(:disabled):not(.selected):hover {
        border-color: rgba(246, 226, 122, 0.7);
        background-color: rgba(203, 155, 81, 0.14);
        color: var(--pbs-gold-bright, #f6e27a);
    }
    .slot:not(:disabled):not(.selected):hover .slot__tie {
        opacity: 1;
        background: var(--pbs-gold-bright, #f6e27a);
    }
}
.slot:not(:disabled):active { transform: scale(0.97); }

.slot:focus-visible {
    outline: 2px solid var(--pbs-gold-bright, #f6e27a);
    outline-offset: 3px;
}

/* Le créneau retenu, quand on revient aux créneaux : le seul onglet d'or
   plein, comme le jour choisi dans le calendrier. Les coins sont repris :
   la règle générale .selected, plus bas dans la feuille, les écrase. */
.slot.selected {
    border-color: var(--pbs-gold-bright, #f6e27a);
    border-radius: var(--r);
    background: var(--pbs-gold-gradient, linear-gradient(135deg, #cb9b51 0%, #f6e27a 55%, #cb9b51 100%));
    color: var(--pbs-on-gold, #17150f);
    font-weight: 700;
    box-shadow:
        0 0 18px rgba(246, 226, 122, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.5);
}
.slot.selected .slot__h {
    color: inherit;
}
.slot.selected .slot__tie {
    height: 2px;
    margin-top: -1px;
    opacity: 1;
    background: var(--pbs-gold-bright, #f6e27a);
    box-shadow: 0 0 8px rgba(246, 226, 122, 0.7);
}

/* Complet : présent, pour qu'on voie la journée entière, mais hachuré et
   barré comme un jour fermé du calendrier. opacity: 1 défait la règle
   générale button:disabled. */
.slot.full {
    border-color: rgba(203, 155, 81, 0.12);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 4px, transparent 4px 8px);
    color: rgba(243, 236, 224, 0.3);
    opacity: 1;
    cursor: not-allowed;
}
.slot.full .slot__time {
    text-decoration: line-through;
    text-decoration-color: rgba(211, 137, 145, 0.7);
    text-decoration-thickness: 1.5px;
}
.slot.full .slot__h {
    color: inherit;
    opacity: 1;
}
.slot.full .slot__tie { opacity: 0.14; }

/* Passé (aujourd'hui seulement) : l'heure n'est pas prise, elle est
   simplement derrière nous. Ni hachure ni rature, juste effacée. */
.slot.past {
    border-color: rgba(203, 155, 81, 0.08);
    background: none;
    color: rgba(243, 236, 224, 0.2);
}
.slot.past .slot__time { text-decoration: none; }

@keyframes slotFromPole {
    from { opacity: 0; transform: translateX(var(--from)) scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-board,
    .slot-board__pole,
    .slot { animation: none; }
}

.notAvailable{
    background: rgb(30, 30, 30);
    color: rgb(30, 30, 30);
    margin: 0;
    padding: 0;
    border-width: 0px;
    z-index: -99999;
}

#slotsContainer {
    display: flex;
    justify-content: center;
}

@keyframes fadeInSlot {0%{transform: translateY(-25px);} 100% {transform: translateY(0);}}
@keyframes fadeInTopSlot {0%{transform: translateY(25px);} 100% {transform: translateY(0);}}


#reservationDate{overflow: hidden;}

.slots-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 8px 0;
    border-radius: 12px;
    font-size: 1rem;
    max-width: 365px;
}
.confirmation{
    padding: 8px 14px;
    border: solid 1px rgb(166, 203, 151);
    border-top: none;
    border-bottom: none;
}
.confirm{
    margin: 4px 0;
    color:rgb(166, 203, 151);
    font-family: 'Handlee', cursive;
}
strong{font-family: sans-serif;}
.selected, .booking-details h2{
    background-color: rgb(203, 182, 151);
    color: black;
    font-weight: 700;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.booking-details h2{
    background-image: linear-gradient(to right, #462523 0, #cb9b51 15%, #f6e27a 45%, #ffec8f 50%, #f6e27a 55%, #cb9b51 85%, #462523 100%);
    opacity: 0.8;
    margin: 0 auto;
    border-left:solid 1px #ffec8f;
    border-right:solid 1px #ffec8f;
    border-bottom:0;
    border-radius: 32px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 6px 8px;
    max-width: 365px;
    position: relative;
}

.booking-details-container{
    position: relative;
}
.booking-details-container::after{
    content: '';
    position: absolute;
    top: 11px;
    left: 9%;
    right: 9%;
    height: 2px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            transparent 0,
            #8a5a2b 6%,
            #cb9b51 16%,
            #f6e27a 36%,
            transparent 40%,
            transparent 60%,
            #f6e27a 64%,
            #cb9b51 84%,
            #8a5a2b 94%,
            transparent 100%);
    box-shadow: 0 -3px 0 -2px rgba(203,155,81,0.55),
                0  3px 0 -2px rgba(203,155,81,0.55);
}
.booking-details-container::before{
    content: '\2702\FE0E';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: #f6e27a;
    pointer-events: none;
    text-shadow: 0 0 7px rgba(246,226,122,0.55), 0 1px 1px rgba(0,0,0,0.5);
}
.booking-details-container > *{
    position: relative;
    z-index: 2;
}
.booking-details{
    margin: 15px;
    padding: 0 0 8px 0;
    border-radius: 6px;
}
.booking-details{
    animation: fadeInTopSlot 1s ease forwards;
}
.cancellation-form{
     animation: fadeInSlot 0.4s ease-out forwards;
}
.booking-details :not(h2, button){
    text-align: left;
}
.booking-details label{
    text-align: left;
}
.booking-details-container{
    margin: 0 auto;
    border-left: 1px solid #ffec8f;
    border-right: 1px solid #ffec8f;
    border-bottom: 1px solid #ffec8f;
    padding: 30px 8px 16px;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    max-width: 365px;
    overflow: hidden;
}
.booking-details-container p{
    font-family: 'Handlee', cursive;
    text-align: center;
}

.booking-details-inputs{
    margin: 10px 0 25px;
}

.choose-barber{
    margin-bottom: 7px;
    font-size: 1.3rem;
}
.employee-selector-btn{
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
}

/* --- Bandeau de panne serveur ---------------------------------------------
   Volontairement distinct de .message : celui-ci décrit un ÉTAT du site, pas le
   résultat d'une action. Il ne disparaît donc ni tout seul, ni au clic, et se
   place en tête de page pour être lu avant toute tentative de réservation. */
.service-alert[hidden] { display: none; }

.service-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 auto 26px;
    max-width: 640px;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30, 10, 10, 0.96) 0%, rgba(50, 18, 14, 0.96) 100%);
    box-shadow:
        0 0 0 1px rgba(203, 155, 81, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-family: 'Roboto', sans-serif;
    position: relative;
    overflow: hidden;
    animation: messageSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.service-alert::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #cb9b51 30%, #f6e27a 50%, #cb9b51 70%, transparent);
}

.service-alert-icon {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(203, 155, 81, 0.18);
    border: 1px solid rgba(203, 155, 81, 0.55);
    color: #f6e27a;
    font-weight: 700;
    line-height: 1;
}

.service-alert-title {
    margin: 0 0 4px;
    color: #f6e27a;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}

.service-alert-text {
    margin: 0;
    color: #e8c9a0;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .service-alert {
        margin: 0 12px 20px;
        padding: 14px 16px;
        gap: 11px;
    }
    .service-alert-text { font-size: 0.85rem; }
}

.message {
    display: none;
    align-items: center;
    gap: 12px;
    margin: 18px 12px 0;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    font-size: 0.92rem;
    animation: messageSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    position: relative;
    overflow: hidden;
}

@keyframes messageSlideIn {
    0%  { opacity: 0; transform: translateY(18px) scale(0.97); }
    100%{ opacity: 1; transform: translateY(0)    scale(1);    }
}

.message.error {
    background:
        linear-gradient(135deg, rgba(30, 10, 10, 0.96) 0%, rgba(50, 18, 14, 0.96) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(203, 155, 81, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #e8c9a0;
    letter-spacing: 0.01em;
    line-height: 1.45;
}

.message.error::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #cb9b51 30%, #f6e27a 50%, #cb9b51 70%, transparent);
}

.message.info {
    color: #ffffff;
    margin: 0 auto;
}
.message-cancel {
    color: rgb(166, 203, 151);
}

.error-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 60%, #a87f3f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(203, 155, 81, 0.4);
}

.error-icon::before {
    content: '✕';
    color: #1a0d05;
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
}

.employee-btn {
    padding: 8px 6px;
    margin: 0 4px;
    border-radius: 6px;
    border: 1px solid rgb(203, 182, 151);
    background-color: rgb(203, 182, 151);
    color: black;
    font-weight: 700;
    font-family: Roboto;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.15s all ease!important;
    transform: translateX(-20px) scale(1.1);
    animation: slideInAndFade 1s ease forwards;
    animation-delay: 1s;
    opacity: 0;
    overflow: hidden;
}

@keyframes slideInAndFade {
    from{opacity: 0; transform: translateX(-200px) scale(1);}
    to{opacity: 1; transform: translateX(0) scale(1);}
}

.employee-name{
    display: inline-block;
    background-image: linear-gradient(105deg,
        currentColor 42%,
        #fff6d8 47%,
        #ffffff 50%,
        #fff6d8 53%,
        currentColor 58%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: employeeNameSweep 3.6s ease-in-out infinite;
}

@keyframes employeeNameSweep {
    0%{background-position: 100% 0;}
    40%{background-position: 0% 0;}
    100%{background-position: 0% 0;}
}

.employee-btn:hover {
    background-color: rgba(203, 182, 151, 0.2);
}

.employee-btn.selected-employee {
    transform: scale(1.1)!important;
    transition: 0.15s all ease-in-out!important;
    background-color: #ffffff;
}

.timing-details{
    animation: slideInAndFade 1s;
}
.timing-label{
    color: rgb(203, 182, 151);
}
.timing-details p + p{
    position: relative;
    margin-top: 3px;
    padding-top: 3px;
}
.timing-details p + p::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255, 255, 255, 0.5), rgba(255,255,255,0));
    filter: drop-shadow(0 0 6px rgba(203,155,81,0.25));
}

#employeeSelectionContainer {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
hr{
    border: 0;
    height: 2px;
    background-image: linear-gradient(90deg, transparent 0, #8a5a2b 6%, #cb9b51 16%, #f6e27a 36%, #f6e27a 64%, #cb9b51 84%, #8a5a2b 94%, transparent 100%);
}

#employeeSelectionContainer h4 {
    text-align: center;
    opacity: 0;
    color: rgb(203, 182, 151);
    width: 100%;
    animation: slideInAndFade 1s forwards;
    animation-delay: 0.7s;
}


.appointment-date{
    font-size: 1.2rem;
}

#cancelText{
    font-weight: bold;
    margin:22px 0;
}
.contact-shop{
    margin: 6px 22px;
    font-size: 0.8rem; 
}
.contact-shop a{
    color: rgb(203, 182, 151);
    text-underline-offset: 3px;
}
.contact-shop strong{
    text-decoration: none;
    color: rgb(156, 182, 255);
    font-family: Roboto;
}

.gender-selection{
    margin: 35px 0;
    padding: 8px 0;
    border: 1px solid #494e57;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;

    overflow: hidden;

}
.gender-selection.collapsible-open {
    border-top-color: #494e57;
    border-bottom-color: white;
}
.gender-selection h3{font-family: 'Handlee', cursive;}
.gender-selection.collapsible-open h3 {
    color: rgb(203, 182, 151);
}

.team-planning.collapsible-open .team-planning-content h2 {
    color: #d8d8d8;
}

.gender-selection.collapsible-open .btn-gender {
    color: rgb(203, 182, 151);
}

.btn-gender{
    font-family: Roboto;
    color: #d8d8d8;
    background: transparent;
    font-size: 1.1em;
    padding: 8px 16px;
    margin: 16px 8px;
    border-radius: 6px;
    animation: slideInFromBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.5s;
}
#genderFemaleBtn {animation-delay: 0.8s;}
button img {
    height: 20px;
    width: 20px;
    position: relative;
    top: 3px;
}
.btn-m{
    border: solid 2px rgb(69, 115, 162);
    border-right: none;
    border-radius: 15px 0 0 15px;
}
.btn-f{
    border: solid 2px rgb(180, 109, 129);
    border-left: none;
    border-radius: 0 15px 15px 0;
}

.cancel-text{margin: 6px auto;}
.cancel-text-a{
    text-underline-offset: 3px;
    padding: 3px 9px;
    border-radius: 6px;
    color: #d38991;
    font-weight: bold;
    font-family: Roboto;
    
}

@media only screen and (min-height: 920px){
    h1{margin-top: 7%;}
    .container{margin-top: 70px;}
} 

@media only screen and (min-width: 768px){
    .contact-shop{font-size: 1.2rem; }
    h1{margin-top: 50px;}
    .message {margin:15px 20% 0 20%;}
    .message.info{margin: 0 20%;}
    .imprevu{
        padding: 18px 4px;
        margin: 0 30%;
        border-radius: 8px;
    }
    .cheres-clientes{margin: 0 15%;}
}
@media only screen and (min-width: 950px){
    .message {margin:15px 30% 0 30%;}
    .message.info{margin: 0 30%;}
    .cheres-clientes{margin: 0 25%;}
}
@media only screen and (min-width: 1100px){
    .message {margin:15px 40% 0 40%;}
    .message.info{margin: 0 40%;}
    .cheres-clientes{margin: 0 35%;}
}

body{
    background-color: #161616;
    background-image:
        radial-gradient(125% 80% at 50% -8%, rgba(203,155,81,0.18) 0%, rgba(203,155,81,0) 55%),
        radial-gradient(110% 70% at 50% 118%, rgba(203,155,81,0.11) 0%, rgba(70,37,35,0) 60%),
        linear-gradient(180deg, #1c1a16 0%, #161514 45%, #100f0e 100%);
    background-attachment: fixed;
}

@keyframes shimmer {0%{background-position: 0% center;} 100% {background-position: 200% center;}}
h1{
    background-image: linear-gradient(
	to right,
	#ffee9b 0,
    #f6e27a 15%, 
	#d6b457 45%,
	#f6e27a 55%,
	#d6b457 85%,
	#ffec8f 100%
	);
    background-size: 200% auto;
    animation: shimmer 4s linear infinite;
    filter: drop-shadow(0 3px 12px rgba(203,155,81,0.30));
}

.container,
.container > h2,
.gender-selection h3,
.reservation-date{text-shadow: 0 1px 10px rgba(0,0,0,0.55);}

#confirmBookingBtn,
#cancelBookingBtn,
#submitCheckBtn,
.booking-details h2,
#reservationCheckContainer h3,
.selected{
    box-shadow:
        0 5px 16px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -3px 8px rgba(70,37,35,0.45);
    transition: transform .2s ease, box-shadow .28s ease, opacity .28s ease, filter .28s ease;
}
#submitCheckBtn:hover,
#confirmBookingBtn:not(:disabled):hover,
#cancelBookingBtn:not(:disabled):hover{
    opacity: 1;
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.05);
    box-shadow:
        0 10px 26px rgba(203,155,81,0.45),
        inset 0 1px 0 rgba(255,255,255,0.55);
}
#submitCheckBtn:active,
#confirmBookingBtn:not(:disabled):active,
#cancelBookingBtn:not(:disabled):active{ transform: translateY(0); }
.slot.notAvailable{visibility: hidden;}


input[type=text], input[type=tel], input[type=number], input[type=date]{
    transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease, background-size .35s cubic-bezier(0.22,1,0.36,1);
}
input[type=text], input[type=tel], input[type=number]{
    background-image: linear-gradient(to right, rgba(203,155,81,0), #f6e27a, rgba(203,155,81,0));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 0% 2px;
}
input[type=text]:focus,
input[type=tel]:focus,
input[type=number]:focus{
    outline: none;
    border-color: #f6e27a;
    background-color: #fffdf5;
    background-size: 100% 2px;
    box-shadow: 0 0 0 3px rgba(246,226,122,0.28), 0 6px 18px rgba(203,155,81,0.30);
}
input[type=date]:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(246,226,122,0.28);
}

.btn-gender{transition: color .25s ease, background-color .25s ease, box-shadow .28s ease, transform .2s ease;}
.btn-m:hover{
    color: #cfe0ff;
    background: rgba(69,115,162,0.16);
    box-shadow: 0 6px 20px rgba(69,115,162,0.45);
}
.btn-f:hover{
    color: #ffd3de;
    background: rgba(180,109,129,0.16);
    box-shadow: 0 6px 20px rgba(180,109,129,0.45);
}

.cheres-clientes{box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 26px rgba(203,155,81,0.18);}

.imprevu{
    box-shadow:
        inset 0 0 0 1px rgba(211,137,145,0.35),
        inset 0 0 22px rgba(0,0,0,0.5),
        0 6px 18px rgba(0,0,0,0.4);
}

.login a, .login button{transition: color .25s ease, box-shadow .25s ease, background-color .25s ease;}
.login a:first-child:hover,
.login button:hover{
    color: #bcd0ff;
    box-shadow: 0 0 14px rgba(130,157,241,0.45);
}

.appointment-card-cancel{
    border-color: rgba(203,182,151,0.55);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.appointment-card-cancel:hover{
    border-color: #f6e27a;
    box-shadow: 0 0 18px rgba(203,155,81,0.30);
}

hr{ filter: drop-shadow(0 0 6px rgba(203,155,81,0.25)); }

.collapsible{
    background: rgba(38,34,27,0.72);
    color: #ecd9af;
    box-shadow: inset 0 0 0 1px rgba(203,155,81,0.14);
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.collapsible:nth-of-type(even){
    background: rgba(58,50,36,0.66);
    color: #ecd9af;
}
.collapsible:hover{
    background: rgba(70,60,42,0.78);
    box-shadow: inset 0 0 0 1px rgba(246,226,122,0.30);
}
.collapsible:after{ color: #f6e27a; }
.content{
    background: rgba(26,24,20,0.66);
    color: #e9ddc6;
}
.content:nth-of-type(even){ background: rgba(40,36,28,0.6); }
.collapse hr{background-image: linear-gradient(to right, rgba(246,226,122,0.45), rgba(203,155,81,0.25), rgba(255,255,255,0));}

.employee-btn{transition: background-color .2s ease, box-shadow .25s ease, transform .15s ease !important;}
.employee-btn:hover{box-shadow: 0 4px 16px rgba(203,155,81,0.35);}
.employee-btn.selected-employee{
    box-shadow: 0 0 18px rgba(246,226,122,0.55);
}

#employeeSelectionContainer {
    border-top: 1px solid rgba(203, 155, 81, 0.2);
}

.employee-btn {
    background: #121212;
    color: #cb9b51;
    border: 1px solid rgba(203, 155, 81, 0.4);
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.employee-btn:hover {
    background: #1a1a1a;
    border-color: #f6e27a;
    color: #f6e27a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(203, 155, 81, 0.2);
}

.employee-btn.selected-employee {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 50%, #a87f3f 100%);
    color: #1a1a1a;
    border-color: transparent;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 30px rgba(203, 155, 81, 0.5);
}

.employee-btn.selected-employee::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
}

.rdv-card {
    max-width: 420px;
    margin: 24px auto;
    padding: 28px 22px 24px;
    border: 1px solid transparent;
    border-radius: 8px;
    background:
        linear-gradient(165deg, #2b2222, #3d2f2f 60%, #4d3a3a) padding-box,
        linear-gradient(135deg, #ad803b, #ffec8f 50%, #ad803b) border-box;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
    animation: rdvCardIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes rdvCardIn {
    0% { opacity: 0; transform: translateY(24px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.rdv-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    border-radius: 50%;
    color: #2b2222;
    background: linear-gradient(135deg, #cb9b51, #f6e27a);
    box-shadow: 0 4px 14px rgba(203, 155, 81, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rdv-card-icon--info {
    color: #1e1e1e;
    background: linear-gradient(135deg, #6b7a8f, #aab8cc);
    box-shadow: 0 4px 14px rgba(120, 140, 170, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.rdv-card--success {
    background:
        linear-gradient(165deg, #1f2b22, #234032 60%, #2c5040) padding-box,
        linear-gradient(135deg, #3a9d5d, #aef0c4 50%, #3a9d5d) border-box;
}
.rdv-card-icon--success {
    color: #102016;
    background: linear-gradient(135deg, #34a85f, #8fe8ab);
    box-shadow: 0 4px 14px rgba(52, 168, 95, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rdv-card--success .rdv-appointment { border-color: rgba(120, 224, 160, 0.25); }
.rdv-card--success .rdv-ref { border-top-color: rgba(120, 224, 160, 0.28); }
.rdv-card-title {
    margin: 0 0 6px;
    font-family: 'Lobster', cursive;
    font-weight: 400;
    font-size: 1.6rem;
    color: #f6e27a;
    background: linear-gradient(to right, #cb9b51, #f6e27a 45%, #ffec8f 50%, #f6e27a 55%, #cb9b51);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* « Vous avez déjà un rendez-vous » tient sur une ligne : la taille suit l'écran. */
.rdv-card-title--fit {
    font-size: clamp(1rem, 6vw, 1.6rem);
    white-space: nowrap;
}
.rdv-card-intro {
    margin: 0 0 18px;
    color: #d8d8d8;
    font-family: 'Handlee', cursive;
    font-size: 1.05rem;
}
.rdv-card-intro strong { color: #ffec8f; }
.rdv-appointment {
    text-align: left;
    padding: 16px;
    margin: 0 0 18px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(203, 155, 81, 0.22);
}
.rdv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    color: #ececec;
    font-size: 1.02rem;
}
.rdv-row-ico { width: 22px; text-align: center; font-size: 1.05rem; filter: saturate(0.6); }
.rdv-row-val { font-weight: 600; text-transform: capitalize; }
.rdv-ref {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(203, 155, 81, 0.25);
    font-size: 0.82rem;
    color: #b9a98a;
}
.rdv-ref strong { color: #f6e27a; font-family: Roboto; }
.rdv-link {
    display: inline-block;
    margin: 2px 0 4px;
    color: #9cb6ff;
    font-weight: 600;
    font-family: Roboto;
    text-underline-offset: 3px;
}
.rdv-link:hover { color: #c3d2ff; }
.rdv-ask {
    margin: 16px 0 10px;
    color: #cfcfcf;
    font-family: 'Handlee', cursive;
    font-size: 1.02rem;
}
.rdv-btn {
    display: inline-block;
    padding: 11px 22px;
    border: none;
    border-radius: 8px;
    font-family: Roboto;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .28s ease, filter .28s ease;
}
.rdv-btn--gold {
    color: #2b2222;
    background-image: linear-gradient(to right, #462523 0, #cb9b51 6%, #f6e27a 30%, #ffec8f 50%, #f6e27a 70%, #cb9b51 94%, #462523 100%);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 18px rgba(203, 155, 81, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.rdv-btn--gold:hover {
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.05);
    box-shadow: 0 10px 26px rgba(203, 155, 81, 0.5);
}
.rdv-btn--gold:active { transform: translateY(0); }
.rdv-note {
    margin: 14px 0 0;
    color: #d8a07a;
    font-size: 0.9rem;
    line-height: 1.4;
}

.gender-selection .gender-buttons {
    display: inline-flex;
    align-items: stretch;
    margin: 16px auto 5px;
    padding: 0;
    border: solid 2px transparent;
    border-radius: 15px;
    background:
        linear-gradient(180deg, rgba(30, 28, 25, 0.9), rgba(20, 19, 18, 0.9)) padding-box,
        linear-gradient(100deg, rgb(69, 115, 162) 0%, rgb(126, 112, 146) 50%, rgb(180, 109, 129) 100%) border-box;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.gender-selection .gender-buttons .btn-gender {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 11px 20px;
    background: transparent;
}

.gender-selection .gender-buttons .btn-m:hover {
    background: linear-gradient(180deg, rgba(69, 115, 162, 0.28), rgba(69, 115, 162, 0.1));
    box-shadow: inset 0 0 22px rgba(126, 178, 232, 0.35);
}

.gender-selection .gender-buttons .btn-f:hover {
    background: linear-gradient(180deg, rgba(180, 109, 129, 0.28), rgba(180, 109, 129, 0.1));
    box-shadow: inset 0 0 22px rgba(238, 158, 182, 0.35);
}

.gender-selection .gender-buttons .btn-f {
    position: relative;
}

.gender-selection .gender-buttons .btn-f::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -8px;
    width: 16px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(126, 178, 232, 0) 0%,
        rgba(126, 178, 232, 0.9) 12%,
        #f6e27a 38%,
        #fff6d0 50%,
        #f6e27a 62%,
        rgba(238, 158, 182, 0.9) 88%,
        rgba(238, 158, 182, 0) 100%
    );
    clip-path: polygon(
        50% 0%, 62% 16%, 38% 34%, 60% 52%, 40% 72%, 54% 100%,
        45% 100%, 31% 72%, 51% 52%, 29% 34%, 53% 16%, 41% 0%
    );
    filter: drop-shadow(-3px 0 6px rgba(69, 115, 162, 0.85))
            drop-shadow(3px 0 6px rgba(180, 109, 129, 0.85));
    animation: faultShimmer 3.4s ease-in-out infinite;
}

.gender-selection .gender-buttons .btn-f::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -26px;
    width: 52px;
    pointer-events: none;
    background: radial-gradient(
        50% 60% at 50% 50%,
        rgba(246, 226, 122, 0.22) 0%,
        rgba(246, 226, 122, 0) 70%
    );
    animation: faultBreath 3.4s ease-in-out infinite;
}

@keyframes faultShimmer {
    0%, 100% { opacity: 0.75; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.03); }
}

@keyframes faultBreath {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.gender-selection .gender-buttons .btn-m:hover ~ .btn-f::before,
.gender-selection .gender-buttons .btn-f:hover::before {
    animation-duration: 1.1s;
}

@media (prefers-reduced-motion: reduce) {
    .gender-selection .gender-buttons .btn-f::before,
    .gender-selection .gender-buttons .btn-f::after {
        animation: none;
    }
}

.gender-selection .gender-buttons {
    gap: 7px;
    padding: 5px 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.gender-selection .gender-buttons .btn-gender {
    border: solid 2px transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.gender-selection .gender-buttons .btn-m {
    border-radius: 15px 3px 3px 15px;
    background:
        linear-gradient(180deg, rgba(30, 28, 25, 0.9), rgba(20, 19, 18, 0.9)) padding-box,
        linear-gradient(120deg, rgb(69, 115, 162) 0%, rgb(112, 118, 150) 100%) border-box;
    clip-path: polygon(
        0% 0%, calc(100% - 5px) 0%, 100% 18%, calc(100% - 6px) 36%,
        100% 54%, calc(100% - 5px) 74%, 100% 100%, 0% 100%
    );
}

.gender-selection .gender-buttons .btn-f {
    border-radius: 3px 15px 15px 3px;
    background:
        linear-gradient(180deg, rgba(30, 28, 25, 0.9), rgba(20, 19, 18, 0.9)) padding-box,
        linear-gradient(120deg, rgb(142, 113, 142) 0%, rgb(180, 109, 129) 100%) border-box;
    clip-path: polygon(
        6px 0%, 100% 0%, 100% 100%, 5px 100%,
        0% 74%, 6px 54%, 0% 36%, 5px 18%
    );
}

.gender-selection .gender-buttons .btn-m:hover {
    background:
        linear-gradient(180deg, rgba(69, 115, 162, 0.35), rgba(40, 55, 75, 0.9)) padding-box,
        linear-gradient(120deg, rgb(126, 178, 232) 0%, rgb(150, 160, 200) 100%) border-box;
    box-shadow: 0 8px 24px rgba(69, 115, 162, 0.45);
}

.gender-selection .gender-buttons .btn-f:hover {
    background:
        linear-gradient(180deg, rgba(180, 109, 129, 0.35), rgba(75, 42, 52, 0.9)) padding-box,
        linear-gradient(120deg, rgb(210, 150, 175) 0%, rgb(238, 158, 182) 100%) border-box;
    box-shadow: 0 8px 24px rgba(180, 109, 129, 0.45);
}

.gender-selection .gender-buttons .btn-f::before {
    left: -13px;
    top: -6px;
    bottom: -6px;
}

.gender-selection .gender-buttons .btn-f::after {
    left: -31px;
}

.gender-selection .gender-buttons .btn-m {
    clip-path: polygon(
        0% 0%,
        calc(100% - 5px) 0%,
        calc(100% - 0.7px) 8.33%,
        calc(100% - 0.7px) 16.67%,
        calc(100% - 5px) 25%,
        calc(100% - 9.3px) 33.33%,
        calc(100% - 9.3px) 41.67%,
        calc(100% - 5px) 50%,
        calc(100% - 0.7px) 58.33%,
        calc(100% - 0.7px) 66.67%,
        calc(100% - 5px) 75%,
        calc(100% - 9.3px) 83.33%,
        calc(100% - 9.3px) 91.67%,
        calc(100% - 5px) 100%,
        0% 100%
    );
}

.gender-selection .gender-buttons .btn-f {
    clip-path: polygon(
        5px 0%,
        100% 0%,
        100% 100%,
        5px 100%,
        0.7px 91.67%,
        0.7px 83.33%,
        5px 75%,
        9.3px 66.67%,
        9.3px 58.33%,
        5px 50%,
        0.7px 41.67%,
        0.7px 33.33%,
        5px 25%,
        9.3px 16.67%,
        9.3px 8.33%
    );
}

.gender-selection .gender-buttons .btn-f::before {
    background: repeating-linear-gradient(
        180deg,
        rgba(126, 178, 232, 0.95) 0px,
        rgba(190, 170, 214, 0.95) 26px,
        rgba(238, 158, 182, 0.95) 52px,
        rgba(190, 170, 214, 0.95) 78px,
        rgba(126, 178, 232, 0.95) 104px
    );
    background-size: 100% 104px;
    clip-path: polygon(
        6.5px 0%,   10.8px 8.33%, 10.8px 16.67%, 6.5px 25%,
        2.2px 33.33%, 2.2px 41.67%, 6.5px 50%,
        10.8px 58.33%, 10.8px 66.67%, 6.5px 75%,
        2.2px 83.33%, 2.2px 91.67%, 6.5px 100%,
        9.5px 100%, 5.2px 91.67%, 5.2px 83.33%, 9.5px 75%,
        13.8px 66.67%, 13.8px 58.33%, 9.5px 50%,
        5.2px 41.67%, 5.2px 33.33%, 9.5px 25%,
        13.8px 16.67%, 13.8px 8.33%, 9.5px 0%
    );
    filter: drop-shadow(-3px 0 7px rgba(69, 115, 162, 0.8))
            drop-shadow(3px 0 7px rgba(180, 109, 129, 0.8));
    animation: waveFlow 4.5s linear infinite;
}

@keyframes waveFlow {
    from { background-position: 0 0; }
    to   { background-position: 0 104px; }
}

.gender-selection .gender-buttons .btn-m:hover ~ .btn-f::before,
.gender-selection .gender-buttons .btn-f:hover::before {
    animation-duration: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
    .gender-selection .gender-buttons .btn-f::before { animation: none; }
}

.gender-selection .gender-buttons .btn-m {
    border-right: 0;
    padding-right: 22px;
}

.gender-selection .gender-buttons .btn-f {
    border-left: 0;
    padding-left: 22px;
}

.gender-selection .gender-buttons .btn-f::before {
    left: -11px;
}

.gender-selection .gender-buttons .btn-f::after {
    content: none;
}

.gender-selection .gender-buttons .btn-m {
    background:
        linear-gradient(180deg, rgba(52, 49, 45, 0.92), rgba(36, 34, 32, 0.92)) padding-box,
        linear-gradient(120deg, rgb(69, 115, 162) 0%, rgb(112, 118, 150) 100%) border-box;
}

.gender-selection .gender-buttons .btn-f {
    background:
        linear-gradient(180deg, rgba(52, 49, 45, 0.92), rgba(36, 34, 32, 0.92)) padding-box,
        linear-gradient(120deg, rgb(142, 113, 142) 0%, rgb(180, 109, 129) 100%) border-box;
}

.gender-selection .gender-buttons .btn-m:hover {
    background:
        linear-gradient(180deg, rgba(85, 125, 170, 0.42), rgba(52, 68, 88, 0.92)) padding-box,
        linear-gradient(120deg, rgb(126, 178, 232) 0%, rgb(150, 160, 200) 100%) border-box;
}

.gender-selection .gender-buttons .btn-f:hover {
    background:
        linear-gradient(180deg, rgba(190, 125, 145, 0.42), rgba(90, 56, 66, 0.92)) padding-box,
        linear-gradient(120deg, rgb(210, 150, 175) 0%, rgb(238, 158, 182) 100%) border-box;
}

.gender-selection .gender-buttons .btn-m,
.gender-selection .gender-buttons .btn-f {
    background-image:
        linear-gradient(180deg, rgba(41, 39, 35, 0.91), rgba(28, 27, 25, 0.91)),
        var(--gender-edge);
}

.gender-selection .gender-buttons .btn-m {
    --gender-edge: linear-gradient(120deg, rgb(69, 115, 162) 0%, rgb(112, 118, 150) 100%);
}

.gender-selection .gender-buttons .btn-f {
    --gender-edge: linear-gradient(120deg, rgb(142, 113, 142) 0%, rgb(180, 109, 129) 100%);
}

.gender-selection .gender-buttons .btn-m:hover {
    background-image:
        linear-gradient(180deg, rgba(77, 112, 152, 0.4), rgba(46, 61, 79, 0.91)),
        linear-gradient(120deg, rgb(126, 178, 232) 0%, rgb(150, 160, 200) 100%);
}

.gender-selection .gender-buttons .btn-f:hover {
    background-image:
        linear-gradient(180deg, rgba(185, 117, 137, 0.4), rgba(82, 49, 59, 0.91)),
        linear-gradient(120deg, rgb(210, 150, 175) 0%, rgb(238, 158, 182) 100%);
}

.gender-selection .gender-buttons .btn-m {
    clip-path: polygon(
        0% 0%,
        calc(100% - 5px) 0%,
        calc(100% - 2.8px) 8.33%,
        calc(100% - 2.8px) 16.67%,
        calc(100% - 5px) 25%,
        calc(100% - 7.2px) 33.33%,
        calc(100% - 7.2px) 41.67%,
        calc(100% - 5px) 50%,
        calc(100% - 2.8px) 58.33%,
        calc(100% - 2.8px) 66.67%,
        calc(100% - 5px) 75%,
        calc(100% - 7.2px) 83.33%,
        calc(100% - 7.2px) 91.67%,
        calc(100% - 5px) 100%,
        0% 100%
    );
}

.gender-selection .gender-buttons .btn-f {
    clip-path: polygon(
        5px 0%,
        100% 0%,
        100% 100%,
        5px 100%,
        2.8px 91.67%,
        2.8px 83.33%,
        5px 75%,
        7.2px 66.67%,
        7.2px 58.33%,
        5px 50%,
        2.8px 41.67%,
        2.8px 33.33%,
        5px 25%,
        7.2px 16.67%,
        7.2px 8.33%
    );
}

.gender-selection .gender-buttons .btn-f::before {
    clip-path: polygon(
        6.5px 0%,  8.7px 8.33%,  8.7px 16.67%, 6.5px 25%,
        4.3px 33.33%, 4.3px 41.67%, 6.5px 50%,
        8.7px 58.33%, 8.7px 66.67%, 6.5px 75%,
        4.3px 83.33%, 4.3px 91.67%, 6.5px 100%,
        9.5px 100%, 7.3px 91.67%, 7.3px 83.33%, 9.5px 75%,
        11.7px 66.67%, 11.7px 58.33%, 9.5px 50%,
        7.3px 41.67%, 7.3px 33.33%, 9.5px 25%,
        11.7px 16.67%, 11.7px 8.33%, 9.5px 0%
    );
}

.gender-selection .gender-buttons .btn-m {
    clip-path: polygon(
        0% 0%,
        calc(100% - 5px) 0%,
        calc(100% - 1.8px) 8.33%,
        calc(100% - 1.8px) 16.67%,
        calc(100% - 5px) 25%,
        calc(100% - 8.2px) 33.33%,
        calc(100% - 8.2px) 41.67%,
        calc(100% - 5px) 50%,
        calc(100% - 1.8px) 58.33%,
        calc(100% - 1.8px) 66.67%,
        calc(100% - 5px) 75%,
        calc(100% - 8.2px) 83.33%,
        calc(100% - 8.2px) 91.67%,
        calc(100% - 5px) 100%,
        0% 100%
    );
}

.gender-selection .gender-buttons .btn-f {
    clip-path: polygon(
        5px 0%,
        100% 0%,
        100% 100%,
        5px 100%,
        1.8px 91.67%,
        1.8px 83.33%,
        5px 75%,
        8.2px 66.67%,
        8.2px 58.33%,
        5px 50%,
        1.8px 41.67%,
        1.8px 33.33%,
        5px 25%,
        8.2px 16.67%,
        8.2px 8.33%
    );
}

.gender-selection .gender-buttons .btn-f::before {
    clip-path: polygon(
        6.5px 0%,  9.7px 8.33%,  9.7px 16.67%, 6.5px 25%,
        3.3px 33.33%, 3.3px 41.67%, 6.5px 50%,
        9.7px 58.33%, 9.7px 66.67%, 6.5px 75%,
        3.3px 83.33%, 3.3px 91.67%, 6.5px 100%,
        9.5px 100%, 6.3px 91.67%, 6.3px 83.33%, 9.5px 75%,
        12.7px 66.67%, 12.7px 58.33%, 9.5px 50%,
        6.3px 41.67%, 6.3px 33.33%, 9.5px 25%,
        12.7px 16.67%, 12.7px 8.33%, 9.5px 0%
    );
}


body {
    position: relative;
    background-image:
        radial-gradient(125% 80% at 50% -8%, rgba(203, 155, 81, 0.26) 0%, rgba(203, 155, 81, 0) 55%),
        radial-gradient(110% 70% at 50% 118%, rgba(203, 155, 81, 0.16) 0%, rgba(70, 37, 35, 0) 60%),
        radial-gradient(45% 35% at 8% 26%, rgba(126, 178, 232, 0.1) 0%, rgba(126, 178, 232, 0) 100%),
        radial-gradient(45% 35% at 94% 62%, rgba(180, 109, 129, 0.1) 0%, rgba(180, 109, 129, 0) 100%),
        linear-gradient(180deg, #221f1a 0%, #191715 45%, #100f0e 100%);
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            118deg,
            rgba(246, 226, 122, 0.035) 0px,
            rgba(246, 226, 122, 0.035) 2px,
            rgba(246, 226, 122, 0) 2px,
            rgba(246, 226, 122, 0) 26px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
        radial-gradient(120% 85% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
    background-size: auto, 160px 160px, auto;
}

body::after {
    content: '';
    position: fixed;
    left: 50%;
    top: -22vh;
    z-index: -1;
    width: 130vw;
    height: 90vh;
    margin-left: -65vw;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(203, 155, 81, 0.14) 0%, rgba(203, 155, 81, 0) 70%);
    animation: ambientDrift 22s ease-in-out infinite alternate;
}

@keyframes ambientDrift {
    0%   { transform: translate3d(-6%, 0, 0) scale(1); opacity: 0.75; }
    100% { transform: translate3d(6%, 4vh, 0) scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
}

body {
    background-image:
        radial-gradient(110% 70% at 50% 118%, rgba(203, 155, 81, 0.16) 0%, rgba(70, 37, 35, 0) 60%),
        linear-gradient(180deg, #221f1a 0%, #191715 45%, #100f0e 100%);
}

body::after { content: none; }

.gender-selection {
    overflow: visible;
}

.gender-selection .gender-buttons {
    position: relative;
}

.gender-selection .gender-buttons::before,
.gender-selection .gender-buttons::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    width: 72vw;
    max-width: 340px;
    height: 62vw;
    max-height: 290px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.gender-selection .gender-buttons::before {
    left: 6%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(126, 178, 232, 0.19) 0%, rgba(126, 178, 232, 0) 70%);
}

.gender-selection .gender-buttons::after {
    left: 94%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(238, 158, 182, 0.19) 0%, rgba(238, 158, 182, 0) 70%);
}

.gender-selection .gender-buttons::before,
.gender-selection .gender-buttons::after {
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.gender-selection .gender-buttons:has(.btn-m:hover)::before,
.gender-selection .gender-buttons:has(.btn-f:hover)::after {
    filter: brightness(1.55) saturate(1.15);
}

.gender-selection {
    opacity: 1;
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.gender-selection.gender-chosen {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .gender-selection { transition: none; }
}

.gender-selection {
    overflow: visible;
    animation: genderRevealClip 1.55s steps(1, end) forwards;
}

@keyframes genderRevealClip {
    0%   { clip-path: inset(-200vh -100vw 0 -100vw); }
    100% { clip-path: inset(-200vh -100vw -200vh -100vw); }
}

@media (prefers-reduced-motion: reduce) {
    .gender-selection { animation: none; clip-path: none; }
}

.container {
    overflow-x: clip;
}

.gender-selection .gender-buttons::before,
.gender-selection .gender-buttons::after {
    content: none;
}

.gender-selection {
    position: relative;
}

.gender-selection::before,
.gender-selection::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 34px;
    width: 66vw;
    max-width: 300px;
    height: 48vw;
    max-height: 215px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    transition: filter 0.4s ease;
}

.gender-selection::before {
    left: 4%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(126, 178, 232, 0.2) 0%, rgba(126, 178, 232, 0) 70%);
}

.gender-selection::after {
    left: 96%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(238, 158, 182, 0.2) 0%, rgba(238, 158, 182, 0) 70%);
}

.gender-selection:has(.btn-m:hover)::before,
.gender-selection:has(.btn-f:hover)::after {
    filter: brightness(1.55) saturate(1.15);
}

@keyframes genderRevealClip {
    0% { clip-path: inset(0 -100vw 0 -100vw); }
    100% { clip-path: inset(0 -100vw -200vh -100vw); }
}

.gender-selection,
.gender-selection.collapsible-open {
    border-top: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        rgba(203, 155, 81, 0) 0%,
        rgba(203, 155, 81, 0.18) 16%,
        rgba(246, 226, 122, 0.8) 50%,
        rgba(203, 155, 81, 0.18) 84%,
        rgba(203, 155, 81, 0) 100%
    ) 1;
}

.gender-selection::before,
.gender-selection::after {
    opacity: 1;
    transition: opacity 0.7s ease, filter 0.4s ease;
}

.gender-selection.gender-chosen {
    opacity: 1;
    transform: none;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.gender-selection.gender-chosen > * {
    display: none;
}

.gender-selection.gender-chosen::before,
.gender-selection.gender-chosen::after {
    opacity: 0;
}

.gender-selection { transition: none; }
.gender-selection.gender-chosen { display: none; }

.h2-rdv {
    transition:
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.55, 0, 0.85, 0.35),
        max-height 0.5s cubic-bezier(0.55, 0, 0.85, 0.35) 0.1s,
        margin-top 0.5s cubic-bezier(0.55, 0, 0.85, 0.35) 0.1s;
}

.h2-rdv.is-hidden {
    opacity: 0;
    transform: translateY(-26px) scale(0.94);
    max-height: 0;
    margin-top: 0;
    pointer-events: none;
}

.gender-selection .gender-buttons .btn-m {
    border: solid 2px rgb(69, 115, 162);
}

.gender-selection .gender-buttons .btn-f {
    border: solid 2px rgb(180, 109, 129);
}


html::before,
html::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 62vw;
    max-width: 300px;
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat-y;
    background-size: 100% 420px;
    filter: blur(14px) opacity(1);
    transition: filter 1.4s ease;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.35) 16%, #000 34%, #000 78%, rgba(0,0,0,0.35) 96%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.35) 16%, #000 34%, #000 78%, rgba(0,0,0,0.35) 96%, transparent 100%);
}

html::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='420' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237eb2e8' stop-opacity='0.34'/%3E%3Cstop offset='0.55' stop-color='%237eb2e8' stop-opacity='0.13'/%3E%3Cstop offset='1' stop-color='%237eb2e8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 L118 0 C168 52 68 105 118 158 C168 210 68 262 118 315 C168 368 78 394 118 420 L0 420 Z' fill='url(%23b)'/%3E%3C/svg%3E");
    animation: worldFlowDown 19s linear infinite, worldBreath 11s ease-in-out infinite alternate;
}

html::after {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='420' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ee9eb6' stop-opacity='0.34'/%3E%3Cstop offset='0.55' stop-color='%23ee9eb6' stop-opacity='0.13'/%3E%3Cstop offset='1' stop-color='%23ee9eb6' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M200 0 L82 0 C32 52 132 105 82 158 C32 210 132 262 82 315 C32 368 122 394 82 420 L200 420 Z' fill='url(%23p)'/%3E%3C/svg%3E");
    animation: worldFlowUp 23s linear infinite, worldBreath 13s ease-in-out infinite alternate-reverse;
}

@keyframes worldFlowDown {
    from { background-position: 0 0; }
    to   { background-position: 0 420px; }
}

@keyframes worldFlowUp {
    from { background-position: 0 420px; }
    to   { background-position: 0 0; }
}

@keyframes worldBreath {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}

html:has(.btn-m:hover)::before,
html:has(.btn-f:hover)::after {
    filter: blur(11px) opacity(1) brightness(1.5) saturate(1.15);
}

html.gender-picked::before,
html.gender-picked::after {
    filter: blur(26px) opacity(0);
}

@media (prefers-reduced-motion: reduce) {
    html::before,
    html::after { animation: none; }
}

/* Honeypot anti-bot du formulaire de réservation : jamais visible, jamais focusable. */
.booking-pot { display: none !important; }


/* ==========================================================================
   Calendrier « vivant » : état de chaque jour avant le moindre clic
   ========================================================================== */

/* Pastille d'état, posée en haut à droite de la case : le repère « aujourd'hui »
   occupe déjà le bas de la cellule (.day.today::after). */
.day--open::before,
.day--low::before,
.day--full::before,
.day--closed::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.day--open::before  { background: #7bbf6a; box-shadow: 0 0 6px rgba(123, 191, 106, 0.55); }
.day--low::before   { background: #e08a3c; box-shadow: 0 0 6px rgba(224, 138, 60, 0.55); }
.day--full::before  { background: #d38991; box-shadow: none; }
/* Le jour fermé porte lui aussi sa pastille : la légende en annonce une. */
.day--closed::before { background: rgba(243, 236, 224, 0.3); box-shadow: none; }

/* Complet et fermé restent lisibles mais clairement hors d'atteinte : la classe
   .disabled les a déjà rendus non cliquables côté JS. */
.day--full {
    color: rgba(243, 236, 224, 0.4);
    background: rgba(211, 137, 145, 0.06);
    border-color: rgba(211, 137, 145, 0.22);
}

.day--closed {
    color: rgba(243, 236, 224, 0.26);
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0 4px,
        transparent 4px 8px
    );
    border-color: rgba(203, 155, 81, 0.12);
    text-decoration: line-through;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(203, 155, 81, 0.18);
}

.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(243, 236, 224, 0.62);
    font-family: 'Roboto', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.4px;
}

.cal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
}

.cal-dot--open   { background: #7bbf6a; }
.cal-dot--low    { background: #e08a3c; }
.cal-dot--full   { background: #d38991; }
.cal-dot--closed { background: rgba(243, 236, 224, 0.28); }

.calendar-loading {
    margin: 16px 0 0;
    text-align: center;
    color: rgba(203, 155, 81, 0.6);
    font-family: 'Roboto', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}

/* Raccourci vers le premier jour où il reste quelque chose à réserver. */
.cal-next-free {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(203, 155, 81, 0.45);
    border-radius: 12px;
    background: rgba(203, 155, 81, 0.08);
    color: #f6e27a;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.cal-next-free:hover:not(:disabled) {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 100%);
    color: #17150f;
    transform: translateY(-1px);
}

.cal-next-free:disabled {
    cursor: progress;
    opacity: 0.6;
}

/* ==========================================================================
   Déplacement d'un rendez-vous existant
   ========================================================================== */

.reschedule-banner {
    max-width: min(420px, calc(100% - 24px));
    margin: 18px auto 4px;
    padding: 16px 18px;
    border: 1px solid rgba(203, 155, 81, 0.35);
    border-left: 3px solid #cb9b51;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(43, 34, 34, 0.95), rgba(26, 22, 22, 0.95));
    text-align: left;
    animation: rdvCardIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.reschedule-title {
    margin: 0 0 8px;
    color: #f6e27a;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.reschedule-from {
    margin: 0 0 6px;
    color: #f3ece0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.86rem;
    line-height: 1.5;
}

.reschedule-hint {
    margin: 0 0 10px;
    color: rgba(243, 236, 224, 0.62);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
}

.reschedule-cancel {
    color: #d8a07a;
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reschedule-cancel:hover { color: #f6e27a; }

/* ==========================================================================
   « Ajouter à mon agenda » sur le panneau de confirmation
   ========================================================================== */

.rdv-agenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
}

.rdv-agenda-btn {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(203, 155, 81, 0.5);
    border-radius: 10px;
    background: rgba(203, 155, 81, 0.1);
    color: #f6e27a;
    font-family: 'Roboto', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.rdv-agenda-btn:hover {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 100%);
    color: #17150f;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .reschedule-banner { animation: none; }
    .cal-next-free:hover:not(:disabled),
    .rdv-agenda-btn:hover { transform: none; }
}

/* --- « Vous êtes ? » : deux plaques émaillées -----------------------------
   Hors saison, « Un homme » et « Une femme » deviennent deux plaques
   d'émail bombé, bleu cobalt et framboise, filet crème, cerclage de laiton
   et vis à fente — la même famille que l'enseigne et la plaque de laiton
   de l'accueil. Un éclat d'émail à un coin montre la tôle.

   Sous html:not([data-pbs-theme]) : halloween.css et noel.css gardent leur
   peau pendant leur saison. La scène 3D (gender-stage.css) anime ces mêmes
   boutons par transform/filter ; le survol passe donc par translate. */

html:not([data-pbs-theme]) .gender-selection .gender-buttons {
    --enamel-screw: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><defs><radialGradient id='s' cx='.36' cy='.3' r='.8'><stop offset='0' stop-color='%23fff3cc'/><stop offset='.4' stop-color='%23c8a053'/><stop offset='1' stop-color='%234d340d'/></radialGradient></defs><circle cx='10' cy='10.9' r='8.6' fill='%23000' opacity='.45'/><circle cx='10' cy='10' r='7.9' fill='url(%23s)' stroke='%23523710' stroke-width='.7'/><g transform='rotate(38 10 10)'><rect x='2.6' y='8.8' width='14.8' height='2.4' rx='.6' fill='%232e1e07'/><rect x='2.6' y='11.2' width='14.8' height='.6' fill='%23ffeeb8' opacity='.55'/></g></svg>");
    --enamel-chip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'><path d='M0 14 L0 5 L3 6.5 L5 3.5 L9 5.5 L12 4 L13.5 7.5 L18 8.5 L19 11 L24 14 Z' fill='%23e9e2d2' opacity='.55'/><path d='M0 14 L0 6.5 L3.2 8 L5.4 5.2 L9.2 7 L11.8 5.8 L13 9 L17.4 10 L18.4 12.2 L21 14 Z' fill='%23231d18'/><path d='M1 14 L1.4 10 L4.6 11 L7 9.4 L10.4 11.6 L14.6 12.8 L15.4 14 Z' fill='%23574536' opacity='.8'/></svg>");
    --enamel-chip-tr: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'><g transform='rotate(180 12 7)'><path d='M0 14 L0 5 L3 6.5 L5 3.5 L9 5.5 L12 4 L13.5 7.5 L18 8.5 L19 11 L24 14 Z' fill='%23e9e2d2' opacity='.55'/><path d='M0 14 L0 6.5 L3.2 8 L5.4 5.2 L9.2 7 L11.8 5.8 L13 9 L17.4 10 L18.4 12.2 L21 14 Z' fill='%23231d18'/><path d='M1 14 L1.4 10 L4.6 11 L7 9.4 L10.4 11.6 L14.6 12.8 L15.4 14 Z' fill='%23574536' opacity='.8'/></g></svg>");
    gap: 12px;
    padding: 8px 4px 10px;
}

html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender {
    --enamel: 47, 102, 178;
    position: relative;
    /* Le symbole et le texte sur la même ligne (et non deux éléments flex
       centrés chacun de leur côté) : calés sur la même ligne de base, ils
       reçoivent le même arrondi sur tous les écrans. La ligne (53 px) et la
       marge du haut (1 px) font la hauteur de la plaque et centrent les
       petites capitales ; en pixels entiers, car le navigateur arrondit à
       l'entier inférieur l'interligne posé au-dessus du texte. */
    display: inline-block;
    text-align: center;
    line-height: 53px;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    box-sizing: border-box;
    padding: 1px clamp(18px, 6.4vw, 28px) 0;
    border: 0;
    border-radius: 9px;
    clip-path: none;
    overflow: hidden;
    color: #f4ecda;
    font-family: 'Cinzel', Georgia, serif;
    /* Cinzel n'a que des capitales : ses minuscules sont des petites
       capitales, plus étroites — les deux plaques tiennent sur 320 px. */
    font-size: clamp(0.84rem, 4vw, 1.02rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.25);
    outline: 1.5px solid rgba(244, 234, 210, 0.85);
    outline-offset: -6px;
    cursor: pointer;
    transition: translate 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, filter 0.35s ease;
}

html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-m {
    /* L'approche du U ouvre un léger vide à gauche du texte : la marge
       gauche le compense (mesuré : 0,4 px en moyenne). */
    padding-left: calc(clamp(18px, 6.4vw, 28px) - 0.05em);
    background:
        var(--enamel-screw) left 7px center / 9px 9px no-repeat,
        var(--enamel-screw) right 7px center / 9px 9px no-repeat,
        var(--enamel-chip) left -1px bottom 0 / 20px 12px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 44%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 82%, rgba(255, 255, 255, 0.08) 100%),
        radial-gradient(130% 160% at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(4, 12, 30, 0.55) 100%),
        radial-gradient(120% 140% at 45% 25%, #3a7cc8 0%, #1f4f93 50%, #13336a 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -2px 3px rgba(0, 0, 0, 0.45),
        0 0 0 2px #b38c3c,
        0 0 0 3px rgba(24, 15, 4, 0.85),
        0 0 0 2.5px rgba(255, 236, 180, 0.4),
        0 12px 20px -8px rgba(0, 0, 0, 0.85);
}

html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-f {
    --enamel: 196, 74, 120;
    /* Le dessin du ♀ laisse un vide à sa gauche dans son image : la marge
       gauche le compense, l'ensemble reste au milieu de la plaque. */
    padding-left: calc(clamp(18px, 6.4vw, 28px) - 0.113em);
    background:
        var(--enamel-screw) left 7px center / 9px 9px no-repeat,
        var(--enamel-screw) right 7px center / 9px 9px no-repeat,
        var(--enamel-chip-tr) right -1px top 0 / 20px 12px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 44%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 82%, rgba(255, 255, 255, 0.08) 100%),
        radial-gradient(130% 160% at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(40, 4, 18, 0.55) 100%),
        radial-gradient(120% 140% at 55% 25%, #d0588a 0%, #a3315e 50%, #6d1c3c 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -2px 3px rgba(0, 0, 0, 0.45),
        0 0 0 2px #b38c3c,
        0 0 0 3px rgba(24, 15, 4, 0.85),
        0 0 0 2.5px rgba(255, 236, 180, 0.4),
        0 12px 20px -8px rgba(0, 0, 0, 0.85);
}

/* Les symboles ♂ ♀, couleur crème comme le lettrage. Leur milieu tombe à
   0,31 em au-dessus de la ligne de base : le milieu visuel des petites
   capitales (0,62 em) pondéré par la capitale initiale (0,70 em). */
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-m img { margin-left: 4px; }
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-f img { margin-right: 8px; }
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender img {
    top: 0;
    vertical-align: -0.265em;                           /* navigateurs sans round() */
    vertical-align: round(calc(0.31em - 0.575em), 1px);
    width: 1.15em;
    height: 1.15em;
    flex: none;
    filter: brightness(0) invert(93%) sepia(14%) saturate(380%) hue-rotate(352deg) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}

/* La couture dorée d'avant n'a plus lieu d'être entre deux plaques ; le
   pseudo-élément porte désormais le reflet qui traverse l'émail au survol. */
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 68%);
    clip-path: none;
    filter: none;
    animation: none;
    translate: -120% 0;
    pointer-events: none;
}
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender::after { content: none; }

html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender:is(:hover, :focus-visible) {
    translate: 0 -3px;
    color: #fffaf0;
    filter: brightness(1.12) saturate(1.08);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.45),
        0 0 0 2px #d2ad58,
        0 0 0 3px rgba(24, 15, 4, 0.85),
        0 0 0 2.5px rgba(255, 240, 190, 0.55),
        0 16px 26px -8px rgba(0, 0, 0, 0.85),
        0 0 30px rgba(var(--enamel), 0.55);
}
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender:is(:hover, :focus-visible)::before {
    translate: 120% 0;
    transition: translate 0.8s cubic-bezier(0.3, 0.6, 0.3, 1);
}
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender:active { translate: 0 0; }
/* Le filet crème passe par outline : au clavier, un anneau doré hors du
   cerclage de laiton le remplace. */
html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender:focus-visible {
    outline: 2px solid #f6e27a;
    outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender:is(:hover, :focus-visible) { translate: none; }
    html:not([data-pbs-theme]) .gender-selection .gender-buttons .btn-gender:is(:hover, :focus-visible)::before { transition: none; }
}