:root {
--dazao-beige: #ede0ce;
--dazao-orange: #d88657;
--dazao-gold: #d4ae93;
--dazao-green: #6d8f76;
--dazao-blue: #8c9aaa;
--dazao-white: #ffffff;
--dazao-dark: #333333;
--dazao-gray-light: #f9f6f0;
--dazao-gray-border: #e6dfd5;
}
#dazao-booking-container {
font-family: 'Raleway', 'Josefin Sans', sans-serif;
width: 100%;
max-width: 100%;
margin: 40px auto;
padding: 30px;
background: var(--dazao-white);
border: 1px solid var(--dazao-gray-border);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(216, 134, 87, 0.08);
color: var(--dazao-dark);
box-sizing: border-box;
} .dazao-steps {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
}
.dazao-steps::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: var(--dazao-gray-border);
z-index: 1;
transform: translateY(-50%);
}
.dazao-step {
position: relative;
z-index: 2;
background: var(--dazao-white);
padding: 0 15px;
display: flex;
flex-direction: column;
align-items: center;
}
.dazao-step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--dazao-gray-light);
border: 2px solid var(--dazao-gray-border);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--dazao-blue);
transition: all 0.3s ease;
}
.dazao-step.active .dazao-step-number {
background: #d76122;
border-color: #d76122;
color: var(--dazao-white);
box-shadow: 0 0 10px rgba(216, 134, 87, 0.4);
}
.dazao-step.completed .dazao-step-number {
background: var(--dazao-green);
border-color: var(--dazao-green);
color: var(--dazao-white);
}
.dazao-step-label {
margin-top: 8px;
font-size: 12px;
font-weight: 600;
color: var(--dazao-blue);
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: 'Josefin Sans', sans-serif;
}
.dazao-step.active .dazao-step-label {
color: #d76122;
} .dazao-pane {
display: none;
animation: fadeIn 0.4s ease;
}
.dazao-pane.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} .dazao-grid-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
@media (max-width: 600px) {
.dazao-grid-cards {
grid-template-columns: 1fr;
}
}
.dazao-card {
border: 2px solid #3775880d;
border-radius: 8px;
padding: 20px;
cursor: pointer;
background: #3775880d;
transition: all 0.3s ease;
position: relative;
}
.dazao-card:hover {
border-color: #377588;
transform: translateY(-2px);
}
.dazao-card.selected {
border-color: #377588;
background: #3775880d;
} #dazao-booking-container.gift {
background-image: url(https://institut-dazao.fr/wp-content/uploads/2026/08/botanical-bottom-border-light.jpg);
background-size: cover ;
}
.dazao-giftcard-layout {
display: flex;
gap: 40px;
}
.dazao-giftcard-col-left {
flex: 1;
}
.dazao-giftcard-col-right {
flex: 1;
}
@media (max-width: 768px) {
.dazao-giftcard-layout {
flex-direction: column;
gap: 20px;
}
}
.dazao-giftcard-grid {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
}
.dazao-giftcard-col-left .dazao-label {
font-weight: 700;
color: #226373;
display: block;
margin-bottom: 25px;
}
.dazao-giftcard-card {
border: 2px solid #3775880d;
border-radius: 8px;
padding: 20px;
cursor: pointer;
background: rgb(243,246,247);
transition: all 0.3s ease;
position: relative;
}
.dazao-giftcard-card:hover {
border-color: #377588;
transform: translateY(-2px);
}
.dazao-giftcard-card.selected {
border-color: #377588;
background: rgb(243,246,247);
}
.dazao-giftcard-amount {
font-size: 1.2em;
margin: 0;
text-align: center;
color: #377588;
font-family: 'Josefin Sans', sans-serif;
font-weight: 500;
}
.dazao-card h3 {
margin: 0 0 10px 0;
font-size: 18px;
color: #377588;
font-family: 'Josefin Sans', sans-serif;
font-weight: 500;
}
.dazao-card p {
margin: 0 0 15px 0;
font-size: 14px;
line-height: 1.4;
color: #555;
}
.dazao-card-meta {
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 14px;
color: var(--dazao-green);
} .dazao-schedule-container {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 25px;
}
@media (max-width: 700px) {
.dazao-schedule-container {
grid-template-columns: 1fr;
}
}
.dazao-datepicker-wrapper input {
width: 100%;
padding: 12px;
border: 2px solid #ec976a;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
background: var(--dazao-gray-light);
color: var(--dazao-dark);
}
.dazao-slots-wrapper {
}
.dazao-slots-wrapper h4 {
margin-top: 0;
margin-bottom: 15px;
color: var(--dazao-blue);
}
.dazao-slots-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 10px;
background: var(--dazao-gray-light);
border: 2px solid #ec976a;
border-radius: 8px;
padding: 24px;
max-height: 350px;
overflow-y: auto;
}
.dazao-slots-grid p {
position: absolute !important;
font-weight: 800;
font-size: 14px;
margin-top: -11px;
}
.dazao-slot-btn {
background: var(--dazao-white);
border: 1px solid var(--dazao-gray-border);
border-radius: 4px;
padding: 10px 5px;
text-align: center;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.dazao-slot-btn:hover {
border-color: var(--dazao-orange);
color: var(--dazao-orange);
}
.dazao-slot-btn.selected {
background: var(--dazao-orange);
color: var(--dazao-white);
border-color: var(--dazao-orange);
} .dazao-form-group {
margin-bottom: 20px;
}
.dazao-form-group label {
display: block;
font-weight: bold;
margin-bottom: 6px;
color: #226373;
}
.dazao-form-group input {
width: 100%;
padding: 12px;
border: 2px solid var(--dazao-gray-border);
border-radius: 6px;
box-sizing: border-box;
font-size: 15px;
}
.dazao-form-group input:focus {
border-color: var(--dazao-orange);
outline: none;
} .dazao-nav-buttons {
display: flex;
justify-content: space-between;
margin-top: 40px;
border-top: 1px solid var(--dazao-gray-border);
padding-top: 20px;
}
.dazao-btn {
padding: 12px 25px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
border: 0;
font-size: 15px;
}
.dazao-btn-prev {
background: var(--dazao-beige);
color: var(--dazao-dark);
}
.dazao-btn-prev:hover {
background: #e3d3bd;
}
.dazao-btn-next {
background: #d76122;
color: var(--dazao-white);
box-shadow: 0 4px 12px rgba(216, 134, 87, 0.2);
}
.dazao-btn-next:hover {
background: #c37346;
}
.dazao-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
} .dazao-summary-box {
background: var(--dazao-gray-light);
border: 1px solid var(--dazao-gray-border);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
}
.dazao-summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 15px;
}
.dazao-summary-row.total {
border-top: 1px dashed var(--dazao-gray-border);
padding-top: 12px;
font-weight: bold;
font-size: 18px;
color: var(--dazao-green);
} .dazao-dashboard-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.dazao-dashboard-table th, .dazao-dashboard-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--dazao-gray-border);
}
.dazao-dashboard-table th {
background: var(--dazao-gray-light);
color: var(--dazao-blue);
font-weight: bold;
}
.dazao-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.dazao-badge-confirme { background: #d4edda; color: #155724; }
.dazao-badge-attente { background: #fff3cd; color: #856404; }
.dazao-badge-annule { background: #f8d7da; color: #721c24; }  .dazao-step1-wrapper {
display: flex;
gap: 30px;
margin-top: 25px;
}
.dazao-booking-sidebar {
flex: 0 0 240px;
background: #ffffff;
border: 1px solid rgba(229, 231, 235, 0.8);
border-radius: 16px;
padding: 20px;
height: fit-content;
}
.dazao-sidebar-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #9ca3af;
font-weight: 600;
margin-top: 0;
margin-bottom: 15px;
}
.dazao-booking-cares-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
} .dazao-booking-category-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 15px;
margin-bottom: 8px;
border: none;
background: transparent;
border-radius: 8px;
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6b7280; cursor: pointer;
text-align: left;
transition: all 0.3s ease;
} .dazao-booking-category-btn[data-category-slug="massage-corps"]:hover,
.dazao-booking-category-btn[data-category-slug="massage-corps"].active {
color: #be4460;
background-color: rgba(190, 68, 96, 0.05);
}
.dazao-booking-category-btn[data-category-slug="massage-cible"]:hover,
.dazao-booking-category-btn[data-category-slug="massage-cible"].active {
color: #377588;
background-color: rgba(55, 117, 136, 0.05);
}
.dazao-booking-category-btn[data-category-slug="methodes-asiatiques"]:hover,
.dazao-booking-category-btn[data-category-slug="methodes-asiatiques"].active {
color: #e38f3c;
background-color: rgba(227, 143, 60, 0.05);
}
.dazao-booking-category-btn[data-category-slug="naturopathie"]:hover,
.dazao-booking-category-btn[data-category-slug="naturopathie"].active {
color: #a2ab50;
background-color: rgba(162, 171, 80, 0.05);
} .dazao-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
opacity: 0;
transition: opacity 0.3s ease;
}
.dazao-booking-category-btn.active .dazao-dot {
opacity: 1;
}
.dazao-dot[data-slug="massage-corps"] { background-color: #be4460; }
.dazao-dot[data-slug="massage-cible"] { background-color: #377588; }
.dazao-dot[data-slug="methodes-asiatiques"] { background-color: #e38f3c; }
.dazao-dot[data-slug="naturopathie"] { background-color: #a2ab50; } .dazao-booking-mobile-tabs {
display: none;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
.dazao-booking-mobile-tab-btn {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 16px;
border-radius: 50px;
border: 1px solid rgba(107, 114, 128, 0.2);
background: transparent;
color: #6b7280;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s ease;
} .dazao-booking-mobile-tab-btn[data-category-slug="massage-corps"] {
background-color: rgba(190, 68, 96, 0.03);
border-color: rgba(190, 68, 96, 0.15);
color: #be4460;
}
.dazao-booking-mobile-tab-btn[data-category-slug="massage-corps"].active {
background-color: #be4460;
border-color: #be4460;
color: #ffffff;
}
.dazao-booking-mobile-tab-btn[data-category-slug="massage-cible"] {
background-color: rgba(55, 117, 136, 0.03);
border-color: rgba(55, 117, 136, 0.15);
color: #377588;
}
.dazao-booking-mobile-tab-btn[data-category-slug="massage-cible"].active {
background-color: #377588;
border-color: #377588;
color: #ffffff;
}
.dazao-booking-mobile-tab-btn[data-category-slug="methodes-asiatiques"] {
background-color: rgba(227, 143, 60, 0.03);
border-color: rgba(227, 143, 60, 0.15);
color: #e38f3c;
}
.dazao-booking-mobile-tab-btn[data-category-slug="methodes-asiatiques"].active {
background-color: #e38f3c;
border-color: #e38f3c;
color: #ffffff;
}
.dazao-booking-mobile-tab-btn[data-category-slug="naturopathie"] {
background-color: rgba(162, 171, 80, 0.03);
border-color: rgba(162, 171, 80, 0.15);
color: #a2ab50;
}
.dazao-booking-mobile-tab-btn[data-category-slug="naturopathie"].active {
background-color: #a2ab50;
border-color: #a2ab50;
color: #ffffff;
} .dazao-card.dazao-card-service {
border: 1px solid rgba(229, 231, 235, 0.8) !important;
background: #ffffff !important;
border-radius: 12px !important;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
transition: all 0.3s ease;
gap: 20px;
text-align: left;
}
.dazao-card.dazao-card-service:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
border-color: rgba(229, 231, 235, 0.8) !important;
}
.dazao-card.dazao-card-service.selected {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
background-color: #ffffff !important;
} .dazao-card.dazao-card-service.selected[data-primary-category="massage-corps"] { border-color: #be4460 !important; border-width: 2px !important; }
.dazao-card.dazao-card-service.selected[data-primary-category="massage-cible"] { border-color: #377588 !important; border-width: 2px !important; }
.dazao-card.dazao-card-service.selected[data-primary-category="methodes-asiatiques"] { border-color: #e38f3c !important; border-width: 2px !important; }
.dazao-card.dazao-card-service.selected[data-primary-category="naturopathie"] { border-color: #a2ab50 !important; border-width: 2px !important; }
.dazao-care-card-main {
flex: 1;
}
.dazao-care-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: 600;
margin-top: 0;
margin-bottom: 6px;
transition: color 0.3s ease;
}
.dazao-care-title[data-primary-category="massage-corps"] { color: #be4460; }
.dazao-care-title[data-primary-category="massage-cible"] { color: #377588; }
.dazao-care-title[data-primary-category="methodes-asiatiques"] { color: #e38f3c; }
.dazao-care-title[data-primary-category="naturopathie"] { color: #a2ab50; }
.dazao-care-excerpt {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.5;
color: #6b7280;
margin: 0;
}
.dazao-care-card-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
text-align: right;
min-width: 80px;
gap: 4px;
}
.dazao-care-price {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1f2937;
}
.dazao-care-duration {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
color: #9ca3af;
text-transform: uppercase;
} @media (max-width: 768px) {
.dazao-step1-wrapper {
flex-direction: column;
gap: 15px;
}
.dazao-booking-sidebar {
display: none;
}
.dazao-booking-mobile-tabs {
display: flex;
}
.dazao-card.dazao-card-service {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.dazao-care-card-meta {
align-items: flex-start;
text-align: left;
flex-direction: row;
gap: 15px;
width: 100%;
border-top: 1px solid rgba(229, 231, 235, 0.5);
padding-top: 10px;
}
}