/* ===== VARIABLES CHEZ JULIEN STYLE ===== */

:root {
    --wood-dark: #4A3728;
    --wood-medium: #8B7355;
    --nature-green: #6B8E6F;
    --stone-beige: #D4C4B0;
    --taupe: #9B8B7E;
    --cream: #F5F1E8;
    --white-soft: #FEFDFB;
    --text-dark: #3A3A3A;
    --text-light: #6B6B6B;
    --gold-accent: #C9A961;
    --shadow-soft: 0 8px 24px rgba(74, 55, 40, 0.12);
    --shadow-medium: 0 12px 40px rgba(74, 55, 40, 0.18);
    --radius: 4px;
    --transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lora', 'Georgia', serif;
    line-height: 1.8;
    color: var(--text-dark);
    background: var(--cream);
    font-size: 17px;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* ===== TYPOGRAPHY ÉLÉGANTE ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    color: var(--wood-dark);
    letter-spacing: 0.02em;
}

h1 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-top: 30px;
}

h2 {
    font-size: 2.75rem;
    font-weight: 400;
    margin-bottom: 2rem;
    margin-top: 30px;
}

h3 {
    font-size: 1.85rem;
    color: var(--wood-medium);
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.1rem;
}

/* Séparateur décoratif minimaliste */
h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: var(--gold-accent);
    margin: 1.5rem 0;
}

p {
    margin-bottom: 1.2rem;
    color: var(--text-light);
    font-size: 1.05rem;
}


/* ===== NAVIGATION RESPONSIVE ===== */
nav {
    box-shadow: 0 1px 16px rgba(90,62,43,0.07);
    padding: 0.8rem 0 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(139,115,85,0.12);
    background-color: #fff;
}

nav .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

nav .logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--wood-dark);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 1001;
}

/* Menu hamburger (caché par défaut sur desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: var(--wood-dark);
    margin: 3px 0;
    transition: var(--transition);
    border-radius: 2px;
}

/* Animation hamburger quand ouvert */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Menu navigation */
nav ul {
    display: flex;
    gap: 0;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0;
}

nav a {
    color: #8a6a50;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    display: block;
    padding: 0 1.2rem;
    height: 80px;
    line-height: 80px;
    position: relative;
    transition: color 0.2s;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 1.2rem; right: 1.2rem;
    height: 2px;
    background: #c9a96e;
    transform: scaleX(0);
    transition: transform 0.2s ease;
    border-radius: 2px 2px 0 0;
}

nav a:hover {
    color: #5a3e2b;
}

nav a:hover::after {
    transform: scaleX(1);
}

/* Admin — discret, juste italique */
nav a.badge.badge-gold {
    background: none !important;
    color: #c9a96e !important;
    font-style: italic;
    font-weight: 600;
    padding: 0 1.2rem;
    height: 80px;
    line-height: 80px;
    border-radius: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
nav a.badge.badge-gold::after {
    background: #c9a96e;
}

/* Overlay pour fermer le menu (caché par défaut) */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== BOUTONS DANS LA NAV ===== */
.btn-nav {
    height: auto !important;
    line-height: normal !important;
    padding: 0.45rem 1.2rem !important;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em;
    border: 1.5px solid #c9a96e;
    background: transparent;
    color: #7a5c42 !important;
    margin: 0 0.4rem;
    transition: all 0.2s;
}
.btn-nav::after { display: none !important; }

.btn-nav:hover {
    background: #5a3e2b;
    border-color: #5a3e2b;
    color: #fff !important;
}

.btn-nav-primary {
    background: #5a3e2b;
    border-color: #5a3e2b;
    color: #f5ede0 !important;
}

.btn-nav-primary:hover {
    background: #3d2a1a;
    border-color: #3d2a1a;
    color: #fff !important;
}

/* ===== BUTTONS STYLE NATUREL ===== */
.btn {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 400;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}

.btn-primary {
    background: var(--wood-dark);
    color: var(--cream);
    border: 1px solid var(--wood-dark);
    margin-bottom: 4px;
}

.btn-primary:hover {
    background: var(--wood-medium);
    border-color: var(--wood-medium);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.btn-secondary {
    background: var(--nature-green);
    color: white;
    border: 1px solid var(--nature-green);
}

.btn-secondary:hover {
    background: #5a7a5e;
    border-color: #5a7a5e;
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--wood-dark);
    color: var(--wood-dark);
}

.btn-outline:hover {
    background: var(--wood-dark);
    color: var(--cream);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
}

.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-cancel {
    border-color: #DC2626;
    color: #DC2626;
}

.btn-cancel:hover {
    background: #DC2626;
    color: white;
    border-color: #DC2626;
}

/* FILTRES WOOD DARK - Bois sombre */
.filter-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem;
  backdrop-filter: blur(10px);
}

.btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-width: 120px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Normal */
.btn-filter:not(.active) {
  background: rgba(255, 255, 255, 0.12);
  color: #8d6e63;
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-filter:not(.active):hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(93, 64, 55, 0.2);
}

/* ACTIF - WOOD DARK */
.btn-filter.active {
  background: linear-gradient(135deg, #5d4037 0%, #4e342e 100%);
  color: white;
  border-color: #5d4037;
  box-shadow: 0 10px 30px rgba(93, 64, 55, 0.5);
  transform: translateY(-1px);
}

.btn-filter.active:hover {
  box-shadow: 0 15px 35px rgba(93, 64, 55, 0.6);
}

.btn-filter .emoji {
  font-size: 1.1em;
  transition: transform 0.2s ease;
}

.btn-filter:hover .emoji {
  transform: scale(1.1) rotate(5deg);
}


/* ===== CARDS MINIMALISTES ===== */
.card {
    background: var(--white-soft);
    border-radius: var(--radius);
    padding: 3rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    border: 1px solid rgba(139, 115, 85, 0.1);
    position: relative;
}

.card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
}

.card-header {
    border-bottom: 1px solid var(--stone-beige);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: var(--wood-dark);
    font-weight: 400;
}

/* ===== FORMS ÉLÉGANTS ===== */
.form-group {
    margin-bottom: 2rem;
}

label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 400;
    color: var(--text-dark);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}

input, textarea, select {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--stone-beige);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
    font-family: 'Lora', serif;
    background: var(--white-soft);
    color: var(--text-dark);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--wood-medium);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

/* ===== HERO SECTION NATURE ===== */
.hero {
    background: linear-gradient(rgba(74, 55, 40, 0.4), rgba(74, 55, 40, 0.4)),
                url('../img/acceuil.jpeg') center/cover no-repeat;
    background-size: cover !important;
    background-position: center !important;
    color: white;
    padding: 15rem 0 8rem;
    text-align: center;
    position: relative;
}



.hero h1 {
    color: white;
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-weight: 300;
    letter-spacing: 0.05em;
}

.hero h2::after {
    display: none;
}

.hero p {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin: 0 auto 2.5rem;
    font-family: 'Lora', serif;
}

.hero .subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    margin-bottom: 1rem;
}

.hero-small {
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, var(--wood-dark) 0%, var(--wood-medium) 100%);
    color: white;
    text-align: center;
}
.hero-small h1,
.hero-small p {
    color: white !important;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    padding: 0rem 0;
}

/* ===== SECTIONS AVEC ESPACES GÉNÉREUX ===== */
.section {
    padding: 0rem 0;
}

.section-light {
    background: var(--white-soft);
}

.section-dark {
    background: var(--cream);
}

.section-nature {
    background: linear-gradient(135deg, var(--nature-green), #5a7a5e);
    color: white;
}

.section-nature h2,
.section-nature h3 {
    color: white;
}

.container {
    max-width: 1650px;
    margin: 0 auto;
    padding: 0rem;
    padding-bottom: 20px;
    padding-top: 0px;
}

/* ===== GRID SPACIEUX ===== */
.grid {
    display: grid;
    gap: 3rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }


/* ===== SECTION TYPES DE SÉANCES - NOUVEAU DESIGN MODERNE ===== */

.sessions-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.sessions-header h2 {
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.sessions-header p {
    font-size: 1.15rem;
    color: var(--text-light);
}

/* Grille des cartes de types */
.sessions-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

/* Design des cartes de types */
.session-type-card {
    background: var(--white-soft);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 30px rgba(74, 55, 40, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.session-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--wood-dark), var(--wood-medium));
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.session-type-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 50px rgba(74, 55, 40, 0.18);
    border-color: var(--wood-medium);
}

.session-type-card:hover::before {
    transform: scaleX(1);
}

/* Carte mise en avant (Populaire) */
.session-type-card.featured {
    border: 2px solid var(--gold-accent);
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(201, 169, 97, 0.25);
}

.session-type-card.featured:hover {
    transform: scale(1.03) translateY(-8px);
}

/* Badge "Populaire" */
.featured-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(135deg, var(--gold-accent), #b8954e);
    color: white;
    padding: 6px 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: rotate(45deg);
    box-shadow: 0 4px 15px rgba(201, 169, 97, 0.4);
    font-family: 'Lato', sans-serif;
}

/* Icône de la carte */
.card-icon-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wood-dark), var(--wood-medium));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(74, 55, 40, 0.2);
}

.card-icon-wrapper i {
    font-size: 2.5rem;
    color: var(--cream);
}

.session-type-card:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(74, 55, 40, 0.3);
}

/* Titre de la carte */
.session-type-card h3 {
    font-size: 2rem;
    color: var(--wood-dark);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}

/* Description */
.card-description {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    min-height: 75px;
    flex-grow: 0;
}

/* Liste des caractéristiques */
.card-features {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-dark);
    text-align: left;
}

.feature-item i {
    color: var(--nature-green);
    font-size: 1.1rem;
    min-width: 20px;
}

/* Prix */
.card-price-display {
    margin: 2rem 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.price-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--wood-dark);
    font-family: 'Playfair Display', serif;
    line-height: 1;
}

.price-currency {
    font-size: 1.75rem;
    color: var(--wood-medium);
    font-weight: 500;
}

/* Bouton de réservation */
.session-type-card .btn {
    margin-top: auto;
    width: 100%;
    padding: 1.1rem 2rem;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.session-type-card:hover .btn {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 55, 40, 0.25);
}

/* Responsive pour les cartes de types */
@media (max-width: 1024px) {
    .sessions-types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .session-type-card.featured {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    /* Alignement global mobile — même padding partout */
    nav .container,
    .container {
        padding: 0 1.5rem;
    }

    .sessions-types-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sessions-header h2 {
        font-size: 2.25rem;
    }

    .session-type-card {
        padding: 2.5rem 2rem;
    }

    .card-icon-wrapper {
        width: 75px;
        height: 75px;
    }

    .card-icon-wrapper i {
        font-size: 2rem;
    }

    .session-type-card h3 {
        font-size: 1.75rem;
    }

    .price-number {
        font-size: 3rem;
    }

    .session-type-card.featured {
        transform: scale(1);
    }
}


/* ===== SESSION BOOKING CARDS (Nouveau design) ===== */
.sessions-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.session-booking-card {
    background: var(--white-soft);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(74, 55, 40, 0.08);
    border: 2px solid var(--stone-beige);
    overflow: hidden;
    transition: var(--transition);
}

.session-booking-card:hover {
    box-shadow: 0 8px 30px rgba(74, 55, 40, 0.15);
    transform: translateY(-5px);
    border-color: var(--wood-medium);
}

.session-card-header {
    background: linear-gradient(135deg, var(--cream), var(--stone-beige));
    padding: 1.5rem;
    border-bottom: 2px solid var(--stone-beige);
}

.date-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wood-dark);
}

.calendar-icon {
    font-size: 1.5rem;
}

.date-text {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.02em;
}

.session-card-body {
    padding: 2rem;
}

.session-time-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(212, 196, 176, 0.2);
    border-radius: var(--radius);
}

.time-icon {
    font-size: 1.3rem;
}

.time-range {
    font-weight: 500;
    font-family: 'Lato', sans-serif;
}

.session-type-badge {
    background: var(--wood-dark);
    color: var(--cream);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    font-family: 'Lato', sans-serif;
}

.session-price-display {
    text-align: center;
    margin: 2rem 0;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #6366F1;
    font-family: 'Playfair Display', serif;
}

.payment-mode-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(245, 241, 232, 0.5);
    border-radius: var(--radius);
    border: 1px solid var(--stone-beige);
}

.payment-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border: 2px solid var(--stone-beige);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.payment-option:hover {
    border-color: var(--wood-medium);
    background: rgba(255, 255, 255, 0.95);
}

.payment-option.selected {
    border-color: var(--wood-dark);
    background: var(--stone-beige);
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--stone-beige);
    border-radius: 50%;
    position: relative;
    transition: var(--transition);
    flex-shrink: 0;
}

.payment-option input[type="radio"]:checked ~ .radio-custom {
    border-color: #6366F1;
    background: white;
}

.payment-option input[type="radio"]:checked ~ .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #6366F1;
    border-radius: 50%;
}

.payment-icon {
    font-size: 1.3rem;
}

.payment-text {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
}

.btn-reserve {
    width: 100%;
    display: block;
    text-align: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-reserve:hover {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-reserve.disabled {
    background: linear-gradient(135deg, #9CA3AF, #6B7280);
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.btn-reserve.disabled:hover {
    transform: none;
}

.slots-warning {
    text-align: center;
    color: #DC2626;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(220, 38, 38, 0.1);
    border-radius: var(--radius);
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 5rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.empty-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 2rem;
    opacity: 0.3;
}

.empty-state h3 {
    color: var(--wood-dark);
    margin-bottom: 1rem;
}

.empty-state p {
    color: var(--text-light);
}

/* ===== SESSION DETAIL PAGE ===== */
.session-detail-page {
    margin: 0 -3rem;
}

.session-hero-detail {
    background: linear-gradient(135deg, var(--wood-dark), var(--wood-medium));
    color: white;
    padding: 3rem 3rem 2rem;
}

.session-hero-content h1 {
    color: white;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.session-status-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.price-hero {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.session-detail-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    padding: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.session-main {
    min-width: 0;
}

.detail-section {
    margin-bottom: 3rem;
}

.detail-section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.description-content {
    background: var(--white-soft);
    padding: 2rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--gold-accent);
}

.info-grid-detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.info-card {
    background: var(--white-soft);
    padding: 2rem;
    border-radius: var(--radius);
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.info-icon-large {
    font-size: 2.5rem;
}

.info-content strong {
    display: block;
    color: var(--wood-dark);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-content p {
    margin: 0;
    color: var(--text-dark);
    font-weight: 500;
}

.info-sub {
    font-size: 0.9rem;
    color: var(--text-light) !important;
    font-weight: 400 !important;
    margin-top: 0.25rem !important;
}

/* ===== BOOKING WIDGET ===== */
.session-sidebar {
    position: sticky;
    top: 6rem;
    height: fit-content;
}

.booking-widget {
    background: var(--white-soft);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-medium);
    border: 2px solid var(--stone-beige);
}

.booking-widget h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.booking-summary {
    margin-bottom: 2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.summary-row.total {
    font-size: 1.2rem;
    padding-top: 1rem;
}

.booking-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 1rem;
}

/* ===== BOOKING STEPPER COMPLET ===== */
.booking-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0;
    padding: 1rem 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    position: relative;
    width: 130px;
}

/* Ligne de connexion entre les étapes */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: var(--stone-beige);
}

.step.active {
    opacity: 1;
}

.step.completed {
    opacity: 1;
}

.step.completed .step-number {
    background: linear-gradient(135deg, #5a7a5a, #3d5c3d);
    color: white;
    font-size: 0;
}

.step.completed .step-number::after {
    content: '✓';
    font-size: 16px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--stone-beige);
    color: var(--wood-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Étape 1 - Réservation : ORANGE */
.step.active:nth-child(1) .step-number {
    background: linear-gradient(135deg, #92400e, #78350f);
    color: white;
}

/* Étape 2 - Paiement : MARRON */
.step.active:nth-child(2) .step-number {
    background: linear-gradient(135deg, #92400e, #78350f);
    color: white;
}

/* Étape 3 - Confirmation : VERT */
.step.active:nth-child(3) .step-number {
    background: linear-gradient(135deg, #92400e, #78350f);
    color: white;
}

.step-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Lato', sans-serif;
    color: var(--wood-dark);
    font-weight: 500;
    white-space: nowrap;
}


.booking-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.booking-main h1 {
    margin-bottom: 2rem;
}

.session-recap-card {
    background: var(--white-soft);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.session-recap-card h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.recap-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recap-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.recap-icon {
    font-size: 1.5rem;
    min-width: 30px;
}

.recap-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a96e, #a07840);
    color: #fff;
    font-size: 1rem;
}

.recap-item strong {
    display: block;
    color: var(--wood-dark);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.recap-item p {
    margin: 0;
    color: var(--text-dark);
}

.booking-form {
    margin-top: 2rem;
}

.form-actions-booking {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2rem;
}
.form-actions-booking input.btn {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 1.25rem;
    -webkit-appearance: none;
    appearance: none;
}
.form-actions-booking a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.alert-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.booking-sidebar-confirm {
    position: sticky;
    top: 6rem;
    height: fit-content;
}

.summary-card {
    background: var(--white-soft);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--stone-beige);
}

.summary-card h3 {
    margin-bottom: 1.5rem;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.total-line {
    font-size: 1.2rem;
    padding-top: 1rem;
}

.total-amount {
    color: var(--wood-dark);
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.benefits-list li {
    padding: 0.75rem 0;
    color: var(--text-light);
    border-bottom: 1px solid var(--stone-beige);
}

.benefits-list li:last-child {
    border-bottom: none;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    padding: 3rem 0;
}

.profile-header {
    text-align: center;
    margin-bottom: 3rem;
}

.profile-header h1 {
    margin-bottom: 0.5rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Sidebar profil */
.profile-sidebar {
    position: sticky;
    top: 6rem;
    height: fit-content;
}

.profile-info-card {
    background: var(--white-soft);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wood-dark), var(--wood-medium));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: var(--shadow-soft);
}

.avatar-initial {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    font-family: 'Playfair Display', serif;
}

.profile-info-card h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.info-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(245, 241, 232, 0.5);
    border-radius: var(--radius);
}

.info-icon {
    font-size: 1.5rem;
    min-width: 30px;
}

.info-item strong {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wood-dark);
    margin-bottom: 0.25rem;
}

.info-item p {
    margin: 0;
    color: var(--text-dark);
}

/* Main content */
.profile-main {
    min-width: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-header h2 {
    margin: 0;
}

.bookings-count {
    background: var(--stone-beige);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wood-dark);
}

/* Fiche renseignement */
.profile-section {
    background: var(--white-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    margin-bottom: 2rem;
}
.profile-section .section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wood-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0e8e0;
}
.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.profile-field label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wood-medium);
}
.profile-field-full {
    grid-column: 1 / -1;
}
.form-input {
    padding: 0.6rem 0.9rem;
    border: 1px solid #e0d5c8;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--wood-dark);
    background: #faf8f5;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: var(--wood-medium);
}
.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.email-change-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
}
.email-change-row .form-input { flex: 1; min-width: 0; }
@media (max-width: 768px) {
    .email-change-row {
        flex-direction: column;
        align-items: stretch;
    }
    .email-change-row .btn { width: 100%; }
}
@media (max-width: 768px) {
    .profile-form-grid { grid-template-columns: 1fr; }
    .profile-field-full { grid-column: 1; }
}

/* Accordéon profil */
.accordion-section {
    background: var(--white-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1rem;
    overflow: hidden;
}
.accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wood-dark);
    text-align: left;
}
.accordion-toggle:hover { background: #faf6f2; }
.accordion-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.accordion-chevron {
    font-size: 1.1rem;
    color: var(--wood-medium);
    transition: transform 0.25s;
    display: inline-block;
}
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.2s;
    padding: 0 1.5rem;
}
.accordion-body.open {
    max-height: 2000px;
    padding: 0 1.5rem 1.5rem;
}

/* Grid des réservations */
.profile-bookings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 2rem;
}

.booking-card-profile {
    background: var(--white-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--stone-beige);
    overflow: hidden;
    transition: var(--transition);
}

.booking-card-profile:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
}

.booking-card-header-profile {
    background: linear-gradient(135deg, var(--cream), var(--stone-beige));
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--stone-beige);
}

.date-display-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wood-dark);
}

.status-badge {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-confirmed {
    background: rgba(107, 142, 111, 0.2);
    color: #4a6b4d;
    border: 1px solid var(--nature-green);
}

.status-pending {
    background: rgba(201, 169, 97, 0.2);
    color: #8B7355;
    border: 1px solid var(--gold-accent);
}

.status-cancelled {
    background: rgba(155, 139, 126, 0.2);
    color: #6B6B6B;
    border: 1px solid var(--taupe);
}

.booking-card-body-profile {
    padding: 2rem;
}

.booking-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--wood-dark);
}

.booking-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--text-dark);
}

.detail-icon {
    font-size: 1.2rem;
    min-width: 25px;
}

.booking-payment-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: rgba(245, 241, 232, 0.5);
    border-radius: var(--radius);
}

.price-display-profile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.price-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.price-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #6366F1;
    font-family: 'Playfair Display', serif;
}

.payment-mode-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--stone-beige);
}

.payment-mode-icon {
    font-size: 1.5rem;
}

.payment-mode-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
}

.booking-meta {
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--stone-beige);
}

.booking-meta small {
    color: var(--text-light);
    font-size: 0.85rem;
}

.booking-actions-profile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.booking-actions-profile form {
    flex: 1;
    min-width: 200px;
}

.past-session-label {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    color: var(--text-light);
    font-size: 0.9rem;
    font-style: italic;
}

/* Empty state profil */
.empty-state-profile {
    text-align: center;
    padding: 5rem 2rem;
    background: var(--white-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.empty-state-profile .empty-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 2rem;
    opacity: 0.3;
}

.empty-state-profile h3 {
    margin-bottom: 1rem;
}

.empty-state-profile p {
    color: var(--text-light);
    margin-bottom: 2rem;
}

/* ===== TABLE RAFFINÉE ===== */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

th, td {
    padding: 1.5rem 2rem;
    text-align: left;
    border-bottom: 1px solid var(--stone-beige);
}

th {
    background: var(--wood-dark);
    color: var(--cream);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    font-family: 'Lato', sans-serif;
}

tr:hover td {
    background: rgba(212, 196, 176, 0.15);
}

tr:last-child td {
    border-bottom: none;
}

/* ===== IMAGE FEATURE BOX ===== */
.feature-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.feature-box img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: var(--transition);
}

.feature-box:hover img {
    transform: scale(1.05);
}

.feature-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(74, 55, 40, 0.9), transparent);
    color: white;
    padding: 2rem;
}

.feature-overlay h3 {
    color: white;
    margin-bottom: 0.5rem;
}

/* ===== SERVICES CARDS ===== */
.service-card {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--white-soft);
    border: 1px solid rgba(139, 115, 85, 0.1);
    transition: var(--transition);
    border-radius: var(--radius);
}

.service-card:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-5px);
}

.service-icon {
    font-size: 3.5rem;
    color: var(--nature-green);
    margin-bottom: 1.5rem;
    display: block;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--wood-dark);
}

/* ===== STATS SECTION ===== */
.stats {
    display: flex;
    justify-content: space-around;
    gap: 3rem;
    text-align: center;
    padding: 4rem 0;
}

.stat-item {
    flex: 1;
}

.stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: var(--wood-dark);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Lato', sans-serif;
}

/* ===== TESTIMONIAL ===== */
.testimonial {
    background: var(--white-soft);
    padding: 3rem;
    border-left: 3px solid var(--gold-accent);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--text-dark);
    margin: 3rem 0;
    border-radius: var(--radius);
}

.testimonial-author {
    font-style: normal;
    font-weight: 600;
    margin-top: 1.5rem;
    color: var(--wood-dark);
    font-size: 1rem;
}

/* ===== FOOTER NATUREL ===== */
footer {
    background: var(--wood-dark);
    color: var(--stone-beige);
    padding: 25px 0 2rem;
    margin-top: 6rem;
}

footer h4 {
    color: var(--cream);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

footer p, footer a {
    color: rgba(212, 196, 176, 0.85);
    font-size: 1.05rem;
    line-height: 1.8;
}

footer a {
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: var(--gold-accent);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    display: inline-block;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(212, 196, 176, 0.3);
    color: rgba(212, 196, 176, 0.85) !important;
    font-size: 1rem;
    transition: background 0.2s, border-color 0.2s;
}
.footer-social-link:hover {
    background: rgba(212, 196, 176, 0.15);
    border-color: rgba(212, 196, 176, 0.6);
    color: var(--gold-accent) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(212, 196, 176, 0.2);
    padding-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}

/* ===== ALERT MESSAGES ===== */
.alert {
    padding: 1.5rem 4rem 1.5rem 2rem;  /* Espace pour la croix */
    border-radius: var(--radius);
    margin-bottom: 2rem;
    border-left: 4px solid;
    background: var(--white-soft);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;  /* Pour positionner la croix */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.alert-success { border-color: var(--nature-green); color: #4a6b4d; }
.alert-error { border-color: #b85c5c; color: #6b3a3a; }
.alert-info { border-color: var(--gold-accent); color: var(--wood-medium); }
.alert-warning { border-color: #e8a87c; color: #8B7355; }

/* ===== CROIX FERMETURE MODERNE ===== */
.alert-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.alert-close:hover {
    background: rgba(255,85,85,0.95);
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(220,53,69,0.3);
}

.alert-close:active {
    transform: rotate(180deg) scale(0.95);
}

.alert-close::before,
.alert-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: #555;
    border-radius: 1px;
    transition: background 0.2s ease;
}

.alert-close:hover::before,
.alert-close:hover::after {
    background: white;
}

.alert-close::before { transform: rotate(45deg); }
.alert-close::after { transform: rotate(-45deg); }

/* ===== LEGAL PAGES ===== */
.legal-page { overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; }
.legal-page .alert { display: block; padding: 0.9rem 1rem; font-size: 0.85rem; }
.legal-page blockquote { overflow-wrap: break-word; word-break: break-word; }
.legal-page h1, .legal-page h2, .legal-page h3 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
}
.legal-page h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8ddd0;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
.legal-page h3 { margin-top: 1.5rem; margin-bottom: 0.7rem; }
.legal-page section { margin-bottom: 2.5rem; }
.legal-page table { display: block; overflow-x: auto; max-width: 100%; }
.legal-page ul, .legal-page ol { padding-left: 1.5rem; }
.legal-page li { margin-bottom: 0.4rem; line-height: 1.65; }
@media (max-width: 576px) {
  .legal-page h1 { font-size: 1.4rem; }
  .legal-page h2 { font-size: 1rem; }
  .legal-page p, .legal-page li { font-size: 0.88rem; }
}

/* ===== BREADCRUMBS ===== */
.breadcrumb {
    padding: 1rem 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--wood-medium);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--wood-dark);
}

.breadcrumb span {
    margin: 0 0.5rem;
    color: var(--stone-beige);
}

/* ===== BADGES DISCRETS ===== */
.badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Lato', sans-serif;
}

.badge-primary {
    background: var(--wood-dark);
    color: var(--cream);
}

.badge-nature {
    background: var(--nature-green);
    color: white;
}

.badge-gold {
    background: var(--gold-accent);
    color: white;
}

.badge-success {
    background: var(--nature-green);
    color: white;
}

.badge-warning {
    background: #e8a87c;
    color: white;
}

.badge-soft {
    background: rgba(201, 169, 97, 0.15);
    color: var(--wood-dark);
    border: 1px solid rgba(201, 169, 97, 0.3);
}

/* ===== DIVIDER ===== */
.divider {
    width: 80px;
    height: 1px;
    background: var(--gold-accent);
    margin: 3rem auto;
}

/* ===== IMAGE GALLERY ===== */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gallery img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius);
    transition: var(--transition);
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

/* ===== NOUVEAUX STYLES POUR LES TYPES DE SEANCES (PAGE ACCUEIL) ===== */
.section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
}

.section-header-inline .subtitle {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* Switch horizontal - CENTRAGE PARFAIT */
.session-type-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 999px;
    padding: 0.3rem;
    background: #f3ece2;
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin: 1.5rem auto;
    max-width: fit-content;
    overflow: hidden;
}

.session-type-pill {
    border: none;
    background: transparent;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    color: var(--text-light);
    font-size: 0.9rem;
    transition: all 0.18s ease;
    min-width: 170px;
}

.session-type-pill .pill-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wood-dark);
}

.session-type-pill .pill-sub {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
}

.session-type-pill:hover {
    background: rgba(255, 255, 255, 0.7);
}

.session-type-pill.active {
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.session-type-pill.active .pill-title {
    color: var(--wood-dark);
}

.session-type-pill.active .pill-sub {
    color: var(--gold-accent);
}

/* Bloc description - CENTRAGE PARFAIT */
.session-type-detail {
    margin: 2rem auto 0;
    padding: 1.75rem 2rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    max-width: 900px;
}

.session-type-detail h3 {
    margin-bottom: 0.6rem;
    font-size: 1.35rem;
    color: var(--wood-dark);
}

.session-type-detail p {
    margin-bottom: 1.4rem;
    color: var(--text-light);
}

/* ===== RESPONSIVE MOBILE ===== */

@media screen and (max-width: 768px) {
    /* Typography mobile */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    body {
        font-size: 16px;
    }

    /* Container mobile */
    .container {
            padding-right: 20px;
            padding-left: 20px;
    }

    /* Afficher le hamburger sur mobile */
    .hamburger {
        display: flex;
    }

    /* Menu navigation en mode mobile */
    nav ul {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: var(--white-soft);
        flex-direction: column;
        gap: 0;
        padding: 5rem 2rem 2rem;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        z-index: 1000;
        align-items: stretch;
    }

    /* Menu ouvert */
    nav ul.active {
        right: 0;
    }

    /* Items du menu mobile */
    nav ul li {
        width: 100%;
        border-bottom: 1px solid var(--stone-beige);
    }

    nav ul li:last-child {
        border-bottom: none;
    }

    nav a {
        padding: 1.25rem 0;
        font-size: 1.05rem;
        text-align: left;
    }

    /* Boutons nav en mobile */
    .btn-nav {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        padding: 1rem 1.5rem !important;
    }

    /* Hero mobile */
    .hero {
        padding: 6rem 0 5rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 11vw, 3rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .hero p {
        font-size: 1.1rem;
    }

    /* Grid mobile */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Sessions cards mobile */
    .sessions-grid-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .session-card-body {
        padding: 1.5rem;
    }

    .price-amount {
        font-size: 2rem;
    }

    .date-display {
        font-size: 1.1rem;
    }

    .session-time-info {
        font-size: 1rem;
        flex-direction: column;
        text-align: center;
    }

    /* Types de séances mobile */
    .session-type-switch {
        flex-direction: column;
        border-radius: 18px;
        width: 100%;
        max-width: 100%;
    }

    .session-type-pill {
        width: 100%;
        align-items: flex-start;
    }

    .session-type-detail {
        padding: 1.5rem 1.4rem;
        margin: 1.5rem auto 0;
    }

    /* Stats mobile */
    .stats {
        flex-direction: column;
        gap: 2rem;
    }

    .stat-number {
        font-size: 3rem;
    }

    /* Footer mobile */
    footer {
        padding: 2.5rem 0 1.5rem;
        margin-top: 3rem;
    }
    footer h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    footer p, footer a {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .footer-grid-3 .footer-section:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(212,196,176,0.15);
        padding-top: 1.25rem;
    }
    .footer-links li {
        margin-bottom: 0.4rem;
    }

    /* Sections mobile */
    .section {
        padding: 0rem 0;
    }

    /* Cards mobile */
    .card {
        padding: 2rem 1.5rem;
    }

    /* Table mobile */
    table {
        font-size: 0.9rem;
    }

    th, td {
        padding: 1rem;
    }

    /* Session detail mobile */
    .session-detail-page {
        margin: 0 -1.5rem;
    }

    .session-hero-detail {
        padding: 2rem 1.5rem;
    }

    .session-hero-content h1 {
        font-size: 2rem;
    }

    .price-hero {
        font-size: 2rem;
    }

    .session-detail-content {
        padding: 2rem 1.5rem;
        grid-template-columns: 1fr;
    }

    .session-sidebar,
    .booking-sidebar-confirm {
        position: static;
    }

    .info-grid-detail {
        grid-template-columns: 1fr;
    }

    /* Booking mobile */
    .booking-confirmation-page {
        padding: 0;
        overflow-x: hidden;
    }

    .booking-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        width: 100%;
        box-sizing: border-box;
    }

    .booking-main {
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .booking-sidebar-confirm {
        display: none !important;
    }

    .session-recap-card {
        padding: 1.25rem;
    }

    .session-recap-card h2 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .form-control, .form-input {
        width: 100%;
        box-sizing: border-box;
    }

    .booking-steps {
        flex-direction: row !important;
        gap: 0;
        justify-content: center;
    }

    /* Profile mobile */
.profile-grid {
    grid-template-columns: 1fr;
}

.profile-sidebar {
    position: static;
}

.profile-bookings-grid {
    grid-template-columns: 1fr;
}

.booking-payment-info {
    grid-template-columns: 1fr;
}

/* ✅ CORRECTION MOBILE : CENTRER LE BOUTON "VOIR LA SÉANCE" */
.booking-actions-profile {
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

.booking-actions-profile form,
.booking-actions-profile > a {
    width: auto !important;
    max-width: 350px;
    min-width: 250px;
    flex: 0 0 auto !important;
    margin: 0 auto;
}

.booking-actions-profile .btn {
    width: 100%;
    display: block;
    text-align: center;
}

.section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .section-header-inline {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===== TABLET ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    nav ul {
        gap: 2rem;
    }

    nav a {
        font-size: 0.9rem;
    }

    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    .sessions-grid-cards {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2rem;
    }

    .session-detail-content {
        grid-template-columns: 1fr;
    }

    .booking-container {
        grid-template-columns: 1fr;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-bookings-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .session-type-switch {
        flex-wrap: wrap;
        justify-content: center;
    }

    .session-type-pill {
        min-width: 150px;
    }
}

/* ===== UTILITIES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

.ml-1 { margin-left: 1rem; }
.mr-1 { margin-right: 1rem; }

.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }

.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }

.color-wood { color: var(--wood-dark); }
.color-nature { color: var(--nature-green); }
.color-gold { color: var(--gold-accent); }

.bg-white { background: var(--white-soft); }
.bg-cream { background: var(--cream); }
.bg-wood { background: var(--wood-dark); color: var(--cream); }

.hidden { display: none; }
.visible { display: block; }

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

.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

/* ===== AUTH LOGIN ===== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(10vh - 100px);
    width: 100%;
    padding: 2rem;
}

.auth-card {
    background: var(--white-soft);
    border-radius: 12px;
    padding: 3rem;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-medium);
    border: 1px solid rgba(139, 115, 85, 0.1);
    margin: 0 auto;
}

.auth-card h1 {
    font-size: 2rem !important;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--wood-dark) !important;
}

.auth-card .form-group { margin-bottom: 1.25rem; }

.remember-me-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.remember-checkbox {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    accent-color: var(--wood-dark);
    flex-shrink: 0;
}

.remember-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
    margin-bottom: 0;
}

.btn-full {
    width: 100%;
    text-align: center;
    padding: 1rem;
    font-size: 0.95rem;
    display: block;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0;
}

.auth-footer a { color: var(--wood-medium); text-decoration: none; font-weight: 600; }
.auth-footer a:hover { color: var(--wood-dark); }

@media screen and (max-width: 768px) {
    .auth-container { padding: 1.5rem; align-items: flex-start; padding-top: 2rem; }
    .auth-card { padding: 2rem 1.5rem; max-width: 100%; }
    .auth-card h1 { font-size: 1.75rem !important; }
}

/* ===== ONGLETS PROFIL ===== */
.tabs-header {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--stone-beige);
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-light);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tab-btn.active {
  color: var(--wood-dark);
  border-bottom-color: var(--gold-accent);
  font-weight: 600;
}

.tab-badge {
  background: var(--wood-dark);
  color: var(--cream);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 0.75rem;
}

.tab-badge.cancelled {
  background: #b85c5c;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== BOOKING CARDS (PROFIL ONGLETS) ===== */
.booking-card {
  background: var(--white-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--stone-beige);
  overflow: hidden;
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

.booking-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-3px);
}

.booking-card.cancelled {
  opacity: 0.65;
  border-left: 4px solid #b85c5c;
}

.booking-card-header {
  background: linear-gradient(135deg, var(--cream), var(--stone-beige));
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--stone-beige);
}

.booking-date {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--wood-dark);
  font-size: 1.05rem;
}

.booking-card-body {
  padding: 1.5rem 2rem;
}

.booking-card-body h4 {
  color: var(--wood-dark);
  margin-bottom: 1rem;
}

.booking-card-body p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.booking-card-footer {
  padding: 1rem 2rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ===== BADGES STATUT RÉSERVATIONS ===== */
.badge-confirmed {
  background: rgba(107, 142, 111, 0.2);
  color: #4a6b4d;
  border: 1px solid var(--nature-green);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Lato', sans-serif;
}

.badge-pending {
  background: rgba(201, 169, 97, 0.2);
  color: #8B7355;
  border: 1px solid var(--gold-accent);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Lato', sans-serif;
}

.badge-cancelled {
  background: rgba(184, 92, 92, 0.15);
  color: #b85c5c;
  border: 1px solid #b85c5c;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Lato', sans-serif;
}

.badge-past {
  background: rgba(155, 139, 126, 0.15);
  color: var(--taupe);
  border: 1px solid var(--taupe);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-family: 'Lato', sans-serif;
}

/* ===== RESPONSIVE ONGLETS ===== */
@media screen and (max-width: 768px) {
  .tabs-header { flex-direction: column; border-bottom: none; gap: 4px; }
  .tab-btn { border-bottom: none; border-left: 3px solid transparent; padding: 10px 16px; }
  .tab-btn.active { border-left-color: var(--gold-accent); border-bottom: none; }
  .booking-card-footer { flex-direction: column; align-items: flex-start; }
}

/* ===== CALENDRIER SÉANCES COMPACT ===== */
.calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: contents;
}

.calendar-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.calendar-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--white-soft);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-height: 400px;
    overflow-y: auto;
}

.sessions-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.session-compact {
    height: 140px;
    padding: 1rem;
    border-radius: var(--radius);
    transition: transform 0.2s ease;
}

.session-compact:hover {
    transform: translateY(-4px);
}

/* ===== CALENDRIER DE RÉSERVATION ===== */
.calendar-booking-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

.calendar-section,
.time-slots-section,
.type-selector-desktop {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


.calendar-section h2,
.time-slots-section h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--wood-dark);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.calendar-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--wood-dark);
}

.calendar-select {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    background: white;
}

.calendar-nav-btn {
    background: var(--wood-dark);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-nav-btn:hover {
    background: var(--wood-medium);
    transform: scale(1.1);
}

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

.calendar-day-header {
    text-align: center;
    font-weight: 600;
    padding: 0.5rem;
    color: #666;
    font-size: 0.85rem;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.calendar-day.other-month {
    color: #ccc;
    background: transparent;
    pointer-events: none;
    border-color: transparent;
}

.calendar-day.unavailable {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.calendar-day.available {
    background: #D4F4DD;
    border-color: #28a745;
    color: #047857;
    cursor: pointer;
}

.calendar-day.available:hover {
    background: #A7F3D0;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(40,167,69,0.3);
}

.calendar-day.individual {
    background: #fff0e0;
    border-color: #e8a04a;
    color: #8a4f10;
    cursor: pointer;
}
.calendar-day.individual:hover {
    background: #ffd9a8;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(200,120,40,0.25);
}
.legend-color.individual { background: #fff0e0; border: 2px solid #e8a04a; }

.calendar-day.full {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.calendar-day.selected {
    background: var(--gold-accent);
    border-color: var(--gold-accent);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.4);
}

.calendar-day.today {
    outline: 3px solid var(--wood-dark);
    outline-offset: 2px;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.calendar-day.past {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

.calendar-day.past:hover {
  transform: none !important;
  box-shadow: none !important;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.legend-color.available  { background: #D4F4DD; border: 2px solid #28a745; }
.legend-color.full       { background: #fff3cd; border: 2px solid #ffc107; }
.legend-color.unavailable{ background: #f8d7da; border: 2px solid #dc3545; }
.legend-color.selected   { background: var(--gold-accent); }

/* Créneaux horaires */
.time-slots-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 600px;
    overflow-y: auto;
}

.time-slot-card {
    padding: 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.3s;
    background: var(--white-soft);
}

.time-slot-card:hover {
    border-color: var(--wood-medium);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.time-slot-card.unavailable {
    opacity: 0.6;
}

.time-slot-time {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--wood-dark);
    margin-bottom: 0.5rem;
}

.time-slot-info {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.time-slot-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wood-dark);
    margin: 0.5rem 0;
}

.time-slot-availability {
    font-weight: 600;
    margin: 0.5rem 0;
}

.btn-reserve-small {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--wood-dark);
    color: white;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-reserve-small:hover:not(:disabled) {
    background: var(--wood-medium);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74,55,40,0.3);
}

.btn-reserve-small:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ===== RESPONSIVE CALENDRIER ===== */
@media (max-width: 768px) {
    .calendar-booking-container {
        grid-template-columns: 1fr;
    }

    .calendar-legend {
        gap: 1rem;
    }

    .calendar-day {
        font-size: 0.8rem;
    }
}

/* ============================================
   MOBILE BOOKING LIST (max 600px)
   ============================================ */

.mobile-booking-list {
    display: none;
}

@media (max-width: 600px) {

    /* Cache le calendrier desktop */
    .calendar-booking-container {
        display: none !important;
    }

    /* Affiche la liste mobile */
    .mobile-booking-list {
        display: block !important;
        padding: 1rem;
    }

    .mobile-booking-list h2 {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        color: #3e2723;
    }

    /* Card séance */
    .mobile-session-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        border-radius: 12px;
        padding: 1rem 1.2rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border-left: 4px solid #5d4037;
        text-decoration: none;
        color: inherit;
        transition: transform 0.15s, box-shadow 0.15s;
    }

    .mobile-session-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    /* Colonne gauche : date */
    .mobile-session-left {
        min-width: 70px;
    }

    .mobile-session-day {
        font-weight: 700;
        font-size: 0.85rem;
        color: #3e2723;
        text-transform: capitalize;
    }

    .mobile-session-time {
        font-size: 1.1rem;
        font-weight: 800;
        color: #5d4037;
    }

    /* Colonne centre : type + places */
    .mobile-session-center {
        flex: 1;
        padding: 0 0.75rem;
    }

    .mobile-session-slots {
        font-size: 0.82rem;
        color: #888;
        margin-top: 0.3rem;
    }

    /* Colonne droite : prix + flèche */
    .mobile-session-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.2rem;
    }

    .mobile-price {
        font-weight: 800;
        font-size: 1rem;
        color: #3e2723;
    }

    .mobile-arrow {
        font-size: 1.2rem;
        color: #5d4037;
    }
}

/* ============================================
   MOBILE BOOKING - 2 ÉTAPES
   ============================================ */

.mobile-booking-list { display: none; }

.type-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b89a6e;
    margin: 0 0 0.4rem;
    padding-left: 0.1rem;
}
.type-group-label--second {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e8ddd3;
}

@media (max-width: 600px) {

    .calendar-booking-container { display: none !important; }

    .mobile-booking-list {
        display: block !important;
        padding: 1rem;
    }

    .mobile-booking-list h2 {
        font-size: 1.15rem;
        color: #3e2723;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* ── ÉTAPE 1 : boutons type ── */
    .type-selector {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .type-group-label {
        margin: 0 0 0.5rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #b89a6e;
    }
    .type-group-label--second {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid #e8ddd3;
    }

    .type-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.4rem;
        background: #faf8f5;
        border: 1px solid #e2d5c8;
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.18s ease;
        box-shadow: 0 1px 4px rgba(90,62,43,0.07);
        text-align: left;
    }

    .type-card {
        background: #faf8f5;
        border: 1px solid #e2d5c8;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(90,62,43,0.07);
        transition: border-color 0.18s, box-shadow 0.18s;
        cursor: pointer;
    }

    .type-card.open {
        border-color: #c9a96e;
        box-shadow: 0 4px 16px rgba(90,62,43,0.13);
    }

    .type-card .type-btn {
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
        width: 100%;
    }

    .type-card:not(.open) .type-btn:hover {
        background: #f5ede3;
    }

    .type-card.open .type-btn {
        background: #f5ede3;
    }

    .type-card.open .type-chevron {
        transform: rotate(90deg);
    }

    .type-desc-panel {
        display: none;
        padding: 0.2rem 1.4rem 1.4rem;
        border-top: 1px solid #ede3d8;
        animation: fadeSlide 0.2s ease;
    }

    .type-card.open .type-desc-panel { display: block; }

    @keyframes fadeSlide {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .type-desc-text {
        font-size: 0.88rem;
        color: #6b4e38;
        line-height: 1.6;
        margin: 0.8rem 0 1rem;
    }

    .type-book-btn {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        background: #5a3e2b;
        color: #fff !important;
        border: none;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        text-align: center;
        text-decoration: none !important;
        transition: background 0.15s, transform 0.12s;
    }

    .type-book-btn:hover {
        background: #3e2a1a;
        transform: translateY(-1px);
        text-decoration: none !important;
    }

    .type-icon-circle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c9a96e 0%, #8b6a4e 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        line-height: 1;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(139,106,78,0.25);
        transition: transform 0.18s ease;
    }

    .type-btn:hover .type-icon-circle {
        transform: scale(1.08);
    }

    .type-btn:active .type-icon-circle {
        background: #fff;
        color: #5a3e2b;
    }

    .type-label {
        font-size: 0.88rem;
        font-weight: 600;
        color: #5a3e2b;
        letter-spacing: 0.03em;
        text-align: center;
        line-height: 1.3;
    }

    /* ── ÉTAPE 2 : dates ── */
    .back-btn {
        background: none;
        border: none;
        color: #5d4037;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0.25rem 0;
        margin-bottom: 1rem;
    }

    .month-header {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #999;
        padding: 1rem 0 0.4rem;
    }

    /* ── Cards séances ── */
    .mobile-session-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        border-radius: 12px;
        padding: 1rem 1.2rem;
        margin-bottom: 0.6rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        border-left: 4px solid #5d4037;
        text-decoration: none;
        color: inherit;
        transition: transform 0.15s;
    }

    .mobile-session-card:active { transform: scale(0.98); }

    .mobile-session-left { min-width: 75px; }

    .mobile-session-day {
        font-size: 0.82rem;
        font-weight: 600;
        color: #888;
        text-transform: capitalize;
    }

    .mobile-session-time {
        font-size: 1.15rem;
        font-weight: 800;
        color: #3e2723;
    }

    .mobile-session-center {
        flex: 1;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-session-slots {
        font-size: 0.8rem;
        color: #999;
        background: #f4f0eb;
        border-radius: 50px;
        padding: 0.2em 0.65em;
        white-space: nowrap;
    }

    .mobile-session-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0.15rem;
    }

    .mobile-price {
        font-weight: 800;
        font-size: 1rem;
        color: #3e2723;
    }

    .mobile-arrow {
        font-size: 0.9rem;
        color: #c9a96e;
        font-weight: 700;
    }
}

/* ── Accordéon mois ── */
.month-accordion {
    margin-bottom: 0.25rem;
}

.month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.9rem 0.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid #e0d5cc;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5d4037;
}

.month-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.month-sessions {
    display: none;
    padding-top: 0.5rem;
}

.month-sessions.open {
    display: block;
}

/* ── FORMULAIRES visibles ── */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #3e2723;
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e0d5cc;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: #5d4037;
    box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1);
}

.alert-error {
    background: #fee;
    color: #c33;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}
.social-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6c757d;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.social-links a:hover {
    color: #fff;
    background: #7d796c;
}
.social-links svg {
    width: 20px;
    height: 20px;
}

.btn-brown {
    background-color: #5d4037 !important;
    border-color: #5d4037 !important;
    color: white !important;
    border-radius: 8px !important;
    font-size: 16px;
    transition: all 0.2s ease;
}

.btn-brown:hover {
    background-color: #6d4a3e !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.d-flex.justify-content-center {
    width: 100%;
}

/* =============================================
   ADMIN LAYOUT — SIDEBAR
   ============================================= */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: #f7f3ef;
}

/* Masquer l'éventuel navbar global sur les pages admin */
.admin-layout ~ nav,
.admin-layout ~ header {
  display: none;
}

/* === SIDEBAR === */
.admin-sidebar {
  width: 240px;
  min-width: 240px;
  background: #fff;
  border-right: 1px solid #e8ddd4;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem 1.5rem;
  border-bottom: 1px solid #f0e8e0;
  margin-bottom: 1.5rem;
}

.sidebar-brand-icon { font-size: 1.6rem; }

.sidebar-brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #5a3e2b;
  letter-spacing: 0.02em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: #7a6050;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
}

.sidebar-link:hover {
  background: #fdf6f0;
  color: #8B5E3C;
  text-decoration: none;
}

.sidebar-link.active {
  background: #8B5E3C;
  color: #fff;
  font-weight: 600;
}

.sidebar-icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-link.active .sidebar-icon { opacity: 1; }

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid #f0e8e0;
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.85rem;
}

.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #8B5E3C;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar-user-name { font-size: 0.75rem; font-weight: 600; color: #5a3e2b; }
.sidebar-user-role { font-size: 0.75rem; color: #aaa; }
.sidebar-logout { color: #c0392b; }
.sidebar-logout:hover { background: #fdecea; color: #b71c1c; }

/* === MAIN CONTENT === */
.admin-main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.admin-page-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c9a96e 0%, #8b6a4e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.admin-page-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #5a3e2b;
  margin: 0;
}

.admin-page-sub {
  font-size: 0.85rem;
  color: #aaa;
  margin: 0;
  text-transform: capitalize;
}

.topbar-badge {
  background: #fdf6f0;
  border: 1px solid #e8ddd4;
  color: #8B5E3C;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
}

/* === KPI CARDS === */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.kpi-card {
  background: #fff;
  border: 1px solid #e8ddd4;
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
  min-height: 140px;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kpi-card:hover {
  box-shadow: 0 6px 20px rgba(139, 94, 60, 0.1);
  transform: translateY(-2px);
}

.kpi-card.kpi-card-accent {
  border-color: #8B5E3C;
  background: linear-gradient(135deg, #fff 60%, #fdf6f0 100%);
}

.kpi-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  width: 100%;
}

.kpi-label { font-size: 0.78rem; color: #999; font-weight: 500; text-align: center; }

.kpi-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.kpi-brown  { background: #fdf0e6; }
.kpi-green  { background: #edfaf1; }
.kpi-yellow { background: #fff8e1; }
.kpi-blue   { background: #e8f4fd; }
.kpi-purple { background: #f3eeff; }

.kpi-value { font-size: 1.8rem; font-weight: 700; color: #5a3e2b; line-height: 1; text-align: center; width: 100%; }
.kpi-sub   { font-size: 0.75rem; color: #bbb; margin-top: 0.3rem; text-align: center; width: 100%; }

/* === CHARTS & TABLES === */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
}

.chart-card,
.table-card {
  background: #fff;
  border: 1px solid #e8ddd4;
  border-radius: 14px;
  padding: 1.5rem;
}

.chart-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5a3e2b;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0e8e0;
}

/* Fill badges séances */
.fill-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.fill-ok   { background: #edfaf1; color: #1a7f45; }
.fill-warn { background: #fff8e1; color: #9a6f00; }
.fill-full { background: #fdecea; color: #b71c1c; }

/* Badges statut réservations */
.badge-status {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge-confirmed { background: #edfaf1; color: #1a7f45; }
.badge-pending   { background: #fff8e1; color: #9a6f00; }
.badge-cancelled { background: #fdecea; color: #b71c1c; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1rem;
  }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-footer { display: none; }
  .admin-main { padding: 1rem; }
}

/* === FORM ADMIN === */
.form-card {
  background: #fff;
  border: 1px solid #e8ddd4;
  border-radius: 14px;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.admin-form .form-label {
  font-weight: 600;
  color: #5a3e2b;
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
}

.admin-form .form-control {
  border: 1px solid #d4c9b9;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form .form-control:focus {
  border-color: #8B5E3C;
  box-shadow: 0 0 0 0.2rem rgba(139,94,60,0.1);
}

.btn-outline-brown {
  color: #8B5E3C;
  background: transparent;
  border-radius: 10px;
  transition: all 0.2s;
  margin-top: 5px;
}

.btn-outline-brown:hover {
  background: #8B5E3C;
  color: #fff;
}

.form-check-input:checked {
  background-color: #8B5E3C;
  border-color: #8B5E3C;
}

.form-check-label {
  color: #5a3e2b;
  font-weight: 500;
}

/* Table actions */
.actions-cell { white-space: nowrap; }
.admin-table { font-size: 0.9rem; }
.admin-table th { font-weight: 600; color: #ffff; border-top: none; }
.admin-table td { vertical-align: middle; }

/* Checkbox sur même ligne */
.publish-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  flex-shrink: 0;
}

.form-check-label {
  margin: 0;
  font-weight: 500;
  color: #5a3e2b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.form-check-input:checked {
  background-color: #8B5E3C;
  border-color: #8B5E3C;
  accent-color: #8B5E3C; /* Chrome/Firefox */
}

/* ===== SIDEBAR RESPONSIVE ===== */
.admin-sidebar-responsive {
  width: 240px;
  min-width: 240px;
  background: #fff;
  border-right: 1px solid #e8ddd4;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  transform: translateX(0);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0rem;
  border-bottom: 0px solid #f0e8e0;
  margin-bottom: 0rem;
}

/* ===== BURGER BUTTON ===== */
.sidebar-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sidebar-toggle span {
  width: 100%;
  height: 3px;
  background: #8B5E3C;
  border-radius: 2px;
  transition: all 0.3s;
}

.sidebar-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.sidebar-toggle.active span:nth-child(2) {
  opacity: 0;
}

.sidebar-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== MOBILE ===== */
@media (max-width: 992px) {
  .admin-sidebar-responsive {
    transform: translateX(-100%);
  }
  
  .admin-sidebar-responsive.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .admin-main {
    margin-left: 0 !important;
    padding: 1rem;
  }
}

/* ===== MENU BURGER MOBILE OVERLAY ===== */
@media (max-width: 992px) {
  .admin-layout {
    position: relative;
  }

  .admin-sidebar-responsive {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    z-index: 2000;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(139,94,60,0.15);
  }

  .admin-sidebar-responsive.open {
    transform: translateX(0);
  }

  /* OVERLAY FONCÉ */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    z-index: 1500;
    backdrop-filter: blur(2px);
  }

  /* BURGER FIXE EN HAUT À GAUCHE */
  .sidebar-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    padding: 0rem;
  }

  .sidebar-toggle {
    display: flex !important;
  }

  /* MAIN PADDING */
  .admin-main {
    padding: 1rem;
  }
}

/* ===== BURGER ANIMÉ ===== */
.sidebar-toggle span:nth-child(1) {
  transition: all 0.3s;
}
.sidebar-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}
.sidebar-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
.sidebar-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ADMIN LAYOUT */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar-responsive {
  width: 240px;
  min-width: 240px;
  background: #fff;
  border-right: 1px solid #e8ddd4;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  transform: translateX(0);
  transition: transform 0.3s ease;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0rem;
  padding-bottom: 0rem;
  border-bottom: 0px solid #e8ddd4;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #8b5e3c;
  text-decoration: none;
}

.sidebar-brand-icon {
  font-size: 1.6rem;
  margin-right: 0.5rem;
}

.sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-toggle span {
  width: 20px;
  height: 2px;
  background: #8b5e3c;
  transition: 0.3s;
}

.sidebar-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.sidebar-toggle.open span:nth-child(2) {
  opacity: 0;
}

.sidebar-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-item {
  margin-bottom: 0.25rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #555;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
}

.sidebar-link:hover {
  background: #f8f4f0;
  color: #8b5e3c;
}

.sidebar-link.active {
  background: linear-gradient(135deg, #8b5e3c, #a67c52);
  color: white;
}

.sidebar-icon {
  width: 20px;
  margin-right: 0.75rem;
  font-size: 1.1rem;
}

.admin-main {
  flex: 1;
  margin-left: 0px;
  padding: 2rem;
  min-height: 100vh;
  background: #faf9f7;
}

.admin-header {
  margin-bottom: 2rem;
}

.admin-header h1 {
  color: #8b5e3c;
  font-weight: 700;
  margin: 0;
}

/* CHECKBOX RONDE */
.publish-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.custom-checkbox {
  display: none;
}

.custom-checkbox + label {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
  font-weight: 500;
  color: #555;
}

.custom-checkbox + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #d1c4b5;
  border-radius: 50%;
  background: white;
  transition: all 0.2s;
}

.custom-checkbox:checked + label::before {
  background: #8b5e3c;
  border-color: #8b5e3c;
}

.custom-checkbox:checked + label::after {
  content: '✓';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* RESPONSIVE MOBILE */
@media (max-width: 992px) {
  .admin-layout {
    position: relative;
  }

  .admin-sidebar-responsive {
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(139,94,60,0.15);
  }

  .admin-sidebar-responsive.open {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
    width: 100%;
  }

  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 1500;
  }

  .sidebar-toggle {
    display: block !important;
  }
}

/* Desktop: cacher toggle */
@media (min-width: 993px) {
  .sidebar-toggle {
    display: none;
  }
}
/* SIDEBAR RESPONSIVE FIX OVERLAP */
.admin-layout {
  min-height: 100vh;
  position: relative;
}

.admin-sidebar-responsive {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 240px;
  background: #f8f9fa;
  z-index: 1000;  /* AU-DESSUS */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.admin-sidebar-responsive.open {
  transform: translateX(0);
}

.admin-main {
  margin-left: 0px;
  padding: 2rem;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
  position: relative;
  z-index: 1;  /* SOUS sidebar */
}

body.sidebar-open .admin-main {
  margin-left: 240px;  /* Garde marge même ouvert mobile */
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 0rem;
  border-bottom: 0px solid #eee;
}

.sidebar-burger {
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-right: auto;
}

.sidebar-burger span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 3px 0;
  background: #8B4513;
  transition: 0.3s;
}

/* DESKTOP : sidebar fixe */
@media (min-width: 992px) {
  .admin-sidebar-responsive {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: translateX(0) !important;  /* TOUJOURS visible */
  }
  .sidebar-burger { display: none !important; }
  body.sidebar-open .admin-main { margin-left: 240px; }
}

/* MOBILE : overlay */
@media (max-width: 991px) {
  .admin-main { margin-left: 0 !important; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
}

/* Layout 3 colonnes desktop */
.calendar-booking-container {
    display: grid;
    grid-template-columns: 160px 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Sélecteur de type vertical */
.type-selector-desktop {
    position: sticky;
    top: 1rem;
}

.type-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.type-btn-desktop {
    background-color: #faf6f1;
    border: 1.5px solid transparent;
    color: #5a3e2b;
    text-align: left;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.3;
}

.type-btn-desktop i {
    font-size: 0.95rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.type-btn-desktop:hover {
    background-color: #f0e6d8;
    border-color: #c9a96e;
    color: #3a2a1a;
}

.type-btn-desktop.active {
    background-color: #3a2a1a;
    color: #ffffff;
    border-color: #3a2a1a;
    font-weight: 600;
}

.type-btn-desktop.active i {
    opacity: 1;
}

/* Titre colonne gauche - taille adaptée */
.type-selector-desktop h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.03em;
}

/* Supprime le trait doré sous le h2 dans cette colonne */
.type-selector-desktop h2::after {
    display: none;
}

/* Proportions 3 colonnes harmonieuses */
.calendar-booking-container {
    grid-template-columns: 190px minmax(0, 520px) 240px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.type-selector-desktop h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.type-selector-desktop h2::after {
    display: none;
}
.time-slot-card {
    background: var(--white-soft);
    border: 1px solid var(--stone-beige);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 0.8rem;
    transition: var(--transition);
}

.slot-time-duration {
    font-weight: 600;
    font-size: 1rem;
    color: var(--wood-dark);
    margin-bottom: 0.3rem;
}

.duration {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-left: 0.5rem;
}

.slot-type-location {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.slot-type {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--wood-medium);
}

.location {
    font-size: 0.82rem;
    color: var(--text-light);
}

.slot-availability-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.availability {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.availability.available {
    background: rgba(107, 142, 111, 0.15);
    color: var(--nature-green);
}

.availability.full {
    background: rgba(220, 38, 38, 0.1);
    color: #DC2626;
}

.price {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wood-dark);
    font-family: 'Playfair Display', serif;
}


/* Sessions imposées (Date imposée) */
#imposed-sessions-container .booking-card { padding: 1.5rem; }
#imposed-sessions-container h2 { text-align: center; margin-bottom: 0.75rem; }
#imposed-sessions-container .separator-gold { margin-bottom: 1.25rem; }
.imposed-sessions-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 0; }

.imposed-session-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 1.5px solid #ede5d8;
    background: #fff;
    text-decoration: none;
    color: #3e2723;
    transition: all 0.18s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.imposed-session-row:hover {
    border-color: #c9a96e;
    background: linear-gradient(135deg, #fffdf9, #fdf5e8);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(180,130,60,0.12);
}

/* Badge date */
.imposed-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, #c9a96e, #a07840);
    color: #fff;
    text-align: center;
    flex-shrink: 0;
}
.imposed-badge-day   { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.imposed-badge-month { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-top: 0.1rem; }
.imposed-badge-dow   { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }

/* Infos centre */
.imposed-session-meta { display: flex; flex-direction: column; gap: 0.25rem; justify-content: center; }
.imposed-session-time { font-size: 1.15rem; font-weight: 700; color: #3e2723; line-height: 1.2; }
.imposed-session-details { display: flex; gap: 0.75rem; font-size: 0.78rem; color: #9a7a5a; align-items: center; flex-wrap: wrap; }
.imposed-session-details i { margin-right: 0.2rem; color: #c9a96e; }

/* Prix + CTA */
.imposed-session-cta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.35rem; }
.imposed-cta-price { font-size: 1.1rem; font-weight: 800; color: #3e2723; font-family: 'Playfair Display', serif; line-height: 1; }
.imposed-cta-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: linear-gradient(135deg, #c9a96e, #a07840);
    color: #fff; border-radius: 8px;
    padding: 0.4rem 1rem; font-size: 0.75rem; font-weight: 600;
    white-space: nowrap; letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .imposed-session-row {
        grid-template-columns: 56px 1fr auto;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }
    .imposed-date-badge { width: 52px; height: 52px; border-radius: 10px; }
    .imposed-badge-day { font-size: 1.15rem; }
    .imposed-session-time { font-size: 1rem; }
    .imposed-session-details { gap: 0.5rem; font-size: 0.72rem; }
    .imposed-cta-price { font-size: 0.95rem; }
    .imposed-cta-btn { padding: 0.35rem 0.7rem; font-size: 0.7rem; }
}

.slots-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 4px;
}

.slots-list::-webkit-scrollbar { width: 4px; }
.slots-list::-webkit-scrollbar-track { background: #f0ebe4; border-radius: 4px; }
.slots-list::-webkit-scrollbar-thumb { background: #c9b99a; border-radius: 4px; }

.slot-bubble {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.1rem;
    background: #fff;
    border: 1.5px solid #e8d5b0;
    border-radius: 50px;
    text-decoration: none;
    color: #5a3e2b;
    transition: all 0.18s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.slot-bubble:hover {
    background: linear-gradient(135deg, #c9a96e, #8b6a4e);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(139,106,78,0.3);
    transform: translateY(-1px);
}

.slot-bubble-full {
    border-color: #ede5d8;
    color: #b49a7e;
    background: #faf8f5;
    cursor: default;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.1rem;
}

.slot-time {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.slot-last-warn {
    font-size: 0.72rem;
    font-weight: 600;
    color: #b49a7e;
    letter-spacing: 0.02em;
}

.slot-places-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #b49a7e;
}

.slot-bubble:hover .slot-places-count,
.slot-bubble:hover .slot-last-warn {
    color: rgba(255,255,255,0.8);
}

/* État vide */
.empty-slots {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-light);
}

.empty-slots span {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.8rem;
    opacity: 0.4;
}

.slot-places {
    background: linear-gradient(135deg, #70a370);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85em;
    min-width: 32px;
    text-align: center;
    display: inline-block;
}


.last-place {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important; /* Orange dernière place */
    animation: pulse 2s infinite;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 2px 12px rgba(245, 158, 11, 0.7); }
}


.confirmation-card {
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #7fc0ab, #60d474);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.3);
}

.confirmation-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wood-dark);
    margin-bottom: 0.5rem;
    font-family: 'Lato', sans-serif;
}

.confirmation-subtitle {
    font-size: 1.1rem;
    color: #92400e;
    margin-bottom: 2.5rem;
}

.session-recap {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.session-type {
    background: linear-gradient(135deg, #e0dcd4);
    color: rgb(10, 10, 10);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.session-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wood-dark);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: #6b7280;
    font-weight: 500;
}

.detail-value {
    font-weight: 600;
    color: var(--wood-dark);
}

.email-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

.confirmation-actions {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

/* Logo Colibri */

.footer-logo, .header-logo img.logo-colibri1 {
    max-width: 120px !important;    /* Largeur max stricte */
    max-height: 120px !important;   /* Hauteur max stricte */
    width: auto; height: auto;      /* Garde proportions */
    border-radius: 0px;
    display: block;
    margin: 0 auto 0rem;
    transform: scaleX(-1);  /* 🔄 Inverse horizontal (miroir gauche) */
    transform-origin: center;  /* Pivot au centre */
}

@media (max-width: 768px) {
    .footer-logo, .header-logo img.logo-colibri1 { 
        max-width: 100px !important; max-height: 100px !important; 
    }
}

.logo-name {
    display: flex !important;
    align-items: baseline;
    gap: -5px;
    margin: 0;
}

.logo-name img + span::first-letter {  /* "P" pile à droite */
    position: relative;
    left: -3px;
}

/* Force normal case (anti-uppercase) */
.h8, .h8-first, .h8-last {
    text-transform: none !important;
}

/* Style identique carte */
.h8 {
    font-family: 'Great Vibes', serif; /* sans !important : surchargeable via inline style */
    font-weight: 500 !important;
    font-size: 2.1rem; /* surchargeable via inline style */
    /* color & font-family gérées par inline style (paramètres admin) */
    letter-spacing: 0.04em !important;
    line-height: 0.95 !important;
    margin: 0 !important;
    position: relative;
}

.h8-first {
    display: block;
    font-size: 1.1em;  /* Christelle plus grand */
}

.h8-last {
    display: block;
}

/* Nom sur 1 ligne */
.h8.oneline .h8-first,
.h8.oneline .h8-last {
    display: inline !important;
}

.colibri-logo {
    position: absolute;
    height: auto !important;
}

@media (max-width: 768px) {
    .colibri-logo { display: none !important; }
}

/* Logo navbar (image uploadée) */
.navbar-brand-logo {
    height: 56px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* Logo subtitle (tagline sous le nom) */
.logo-subtitle {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9c6aa4;
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    font-weight: 400;
    margin: 0 !important;
    line-height: 1.2;
}
.logo-subtitle.font-script {
    font-family: 'Great Vibes', cursive;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
}
.logo-subtitle.font-serif {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0.08em;
}
.logo-subtitle.font-light {
    font-family: 'Raleway', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ============================================================
   CORRECTIONS RESPONSIVE — menu, calendrier, étapes
   ============================================================ */

/* --- Menu burger à partir de 900px (tablette incluse) --- */
@media (max-width: 900px) {
    .hamburger {
        display: flex;
    }

    nav ul {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: var(--white-soft);
        flex-direction: column;
        gap: 0;
        padding: 5rem 2rem 2rem;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        z-index: 1000;
        align-items: stretch;
    }

    nav ul.active {
        right: 0;
    }

    nav ul li {
        width: 100%;
        border-bottom: 1px solid var(--stone-beige);
    }

    nav ul li:last-child {
        border-bottom: none;
    }

    nav a {
        padding: 1.25rem 0;
        font-size: 1.05rem;
        text-align: left;
    }

    .btn-nav {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        padding: 1rem 1.5rem !important;
    }

}

/* --- Calendrier réservation : 1 colonne ≤ 900px --- */
@media (max-width: 900px) {
    .calendar-booking-container {
        grid-template-columns: 1fr !important;
    }
}

/* ===== PICKER MOBILE DOCTOLIB (step-avail) ===== */

/* Navigation mois */
.mob-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.25rem 0.75rem;
}
.mob-month-label {
    font-size: 1rem;
    font-weight: 700;
    color: #3e2723;
    letter-spacing: 0.02em;
}
.mob-month-btn {
    width: 36px; height: 36px;
    border: none; background: #f4f0eb;
    border-radius: 50%; font-size: 1.1rem; font-weight: 700;
    color: #7a5c42; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.mob-month-btn:hover { background: #e8ddd4; }

/* Scroller de dates */
.mob-date-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    width: 100%;
    padding: 0.25rem 0.25rem 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
}
.mob-date-scroll::-webkit-scrollbar { display: none; }

/* Pill de date */
.mob-date-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.55rem 0.3rem 0.4rem;
    border-radius: 12px;
    background: #f4f0eb;
    border: 1.5px solid transparent;
    cursor: default;
    scroll-snap-align: start;
    flex-shrink: 0;
    transition: all 0.15s;
    gap: 0.1rem;
}
.mob-date-dow {
    font-size: 0.62rem;
    font-weight: 600;
    color: #9a7a5a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mob-date-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: #3e2723;
    line-height: 1.1;
}
.mob-date-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #c9a96e;
    margin-top: 0.15rem;
}

/* Dispo */
.mob-date-avail {
    background: #fff;
    border-color: #e8d5b0;
    cursor: pointer;
}
.mob-date-avail:hover {
    border-color: #c9a96e;
    background: #fffbf4;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(180,130,60,0.12);
}
/* Sélectionné */
.mob-date-selected {
    background: linear-gradient(135deg, #c9a96e, #a07840) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(180,130,60,0.3) !important;
    transform: translateY(-2px);
}
.mob-date-selected .mob-date-dow,
.mob-date-selected .mob-date-num { color: #fff; }
.mob-date-selected .mob-date-dot { background: rgba(255,255,255,0.7); }

/* Passé / indispo */
.mob-date-past { opacity: 0.35; }
.mob-date-pill:not(.mob-date-avail):not(.mob-date-past) { opacity: 0.45; }

/* Zone créneaux */
.mob-slots-wrap {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #ede5d8;
    padding: 1rem;
    min-height: 80px;
    margin-top: 0.25rem;
}
.mob-slots-placeholder {
    text-align: center;
    color: #b49a7e;
    font-size: 0.85rem;
    padding: 1rem 0;
    margin: 0;
}
.mob-slots-date-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9a7a5a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0 0 0.85rem;
}
.mob-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.mob-slot-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.4rem;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #e8d5b0;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    gap: 0.15rem;
}
.mob-slot-pill:hover {
    background: linear-gradient(135deg, #fffbf4, #fdf5e8);
    border-color: #c9a96e;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(180,130,60,0.1);
}
.mob-slot-time {
    font-size: 1rem;
    font-weight: 700;
    color: #3e2723;
}
.mob-slot-info {
    font-size: 0.65rem;
    color: #9a7a5a;
    white-space: nowrap;
}
.mob-slot-full {
    background: #f8f0f0;
    border-color: #e0c0c0;
    cursor: not-allowed;
    opacity: 0.6;
}
.mob-slot-full .mob-slot-time { color: #a07070; }

/* ===== CALENDRIER MOBILE (step-avail) ===== */
#mobile-avail-calendar .calendar-section,
#mobile-avail-calendar .booking-card {
    padding: 0.75rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}
#mobile-avail-calendar h2,
#mobile-avail-calendar .calendar-section h2 {
    font-size: 0.9rem !important;
    margin-bottom: 0.6rem !important;
    text-align: center;
}
#mobile-avail-calendar .calendar-header {
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
#mobile-avail-calendar .calendar-title {
    font-size: 0.9rem;
}
#mobile-avail-calendar .calendar-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
}
#mobile-avail-calendar .calendar-grid {
    gap: 4px;
}
#mobile-avail-calendar .calendar-day-header {
    font-size: 0.65rem;
    padding: 0.3rem 0.1rem;
    letter-spacing: 0;
}
#mobile-avail-calendar .calendar-day {
    font-size: 0.8rem;
    border-radius: 8px;
    min-height: 36px;
}
#mobile-avail-calendar .calendar-legend {
    gap: 1rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
#mobile-avail-calendar .legend-item {
    font-size: 0.75rem;
}
#mobile-avail-calendar .legend-color {
    width: 14px;
    height: 14px;
}

#mobile-avail-slots {
    padding: 0.75rem;
}
#mobile-avail-slots .time-slots-container {
    max-height: 50vh;
}
#mobile-avail-slots .slot-time-card {
    padding: 0.65rem 0.85rem;
}
#mobile-avail-slots h2 {
    font-size: 0.9rem !important;
    margin-bottom: 0.6rem !important;
}

/* --- Étapes réservation : restent horizontales sur mobile --- */
@media (max-width: 768px) {
    .booking-steps {
        flex-direction: row !important;
        gap: 0;
        justify-content: center;
        padding: 1rem 1rem;
    }

    .step {
        width: 100px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .step:not(:last-child)::after {
        top: 16px;
        left: calc(50% + 18px);
        width: calc(100% - 36px);
    }

    .step-label {
        font-size: 0.62rem;
        letter-spacing: 0.03em;
    }

    .step.completed .step-number::after {
        font-size: 13px;
    }

    /* Payment options : pleine largeur, layout horizontal sur mobile */
    .form-payment-row {
        flex-direction: column !important;
    }

    .form-payment-row > label {
        flex: none !important;
        width: 100% !important;
    }

    .form-payment-row .payment-option {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 0.9rem;
        padding: 0.85rem 1rem !important;
    }

    .form-payment-row .payment-option i {
        font-size: 1.5rem !important;
        display: block !important;
        margin-bottom: 0 !important;
        min-width: 1.5rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .h8 {
        font-size: 1.6rem !important;
    }
}

/* ===== SECTIONS PAGE D'ACCUEIL — PILLIERS / CONCRÈTEMENT / PORTRAIT / CTA ===== */

/* 3 Pilliers */
.section-pilliers {
    background: #f5f1e8;
    padding: 3rem 0 2.5rem;
}
.pilliers-title {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5a3e2b;
    margin-bottom: 2rem;
}
.pilliers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.pillier-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.pillier-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    display: block;
}
.pillier-img-placeholder {
    background: #e0d5c5;
    border-radius: 6px 6px 0 0;
}
.pillier-label {
    background: rgba(90,62,43,0.82);
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.55rem 0.75rem;
    width: 100%;
    border-radius: 0 0 6px 6px;
    line-height: 1.4;
}

/* ══ Section Bio / Présentation ══ */
.section-bio {
    background: #fff;
    padding: 4rem 0;
}
.bio-layout {
    display: flex;
    gap: 3.5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.bio-photo-wrap {
    flex: 0 0 280px;
}
.bio-photo {
    width: 280px;
    height: 340px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(90,62,43,0.15);
}
.bio-photo-placeholder {
    width: 280px;
    height: 340px;
    background: #ede8e0;
    border-radius: 12px;
}
.bio-text-wrap {
    flex: 1;
}
.bio-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a3e2b;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #c9a96e;
}
.bio-text p {
    line-height: 1.8;
    margin-bottom: 0.8rem;
    color: inherit;
    font-size: inherit;
}
@media (max-width: 768px) {
    .bio-layout { flex-direction: column; gap: 2rem; }
    .bio-photo-wrap { flex: none; width: 100%; text-align: center; }
    .bio-photo, .bio-photo-placeholder { width: 200px; height: 240px; margin: 0 auto; display: block; }
}

/* ══ Section Prestations ══ */
.section-prestations {
    background: #f5f0e8;
    padding: 4.5rem 0 5rem;
}
.prestations-title {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #9a7a5a;
    margin-bottom: 3rem;
}
.prestations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1020px;
    margin: 0 auto;
    align-items: stretch;
}
.prestation-card {
    background: rgba(255,252,247,0.85);
    border-radius: 20px;
    padding: 2.4rem 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 24px rgba(120,85,50,0.09), 0 1px 4px rgba(120,85,50,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.prestation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(120,85,50,0.14), 0 2px 8px rgba(120,85,50,0.07);
}
.prestation-card--alt { background: rgba(250,246,240,0.9); }
.prestation-icon {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
    line-height: 1;
}
.prestation-title {
    font-family: 'Raleway', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a3020;
    margin-bottom: 0.75rem;
}
.prestation-badge {
    display: inline-block;
    font-size: 0.7rem;
    background: #ede6d8;
    color: #8a6a4a;
    padding: 3px 12px;
    border-radius: 30px;
    margin-bottom: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.prestation-desc {
    font-size: 0.88rem;
    color: #6a4e36;
    line-height: 1.8;
    margin-bottom: 1.6rem;
    flex: 1;
}
.btn-prestation {
    display: inline-block;
    margin-top: auto;
    background: #5a3e2b;
    color: #f5ede0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6rem 1.6rem;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.btn-prestation:hover { background: #3d2a1a; color: #fff; }
@media (max-width: 900px) {
    .prestations-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ══ Section Témoignages ══ */
.section-temoignages {
    background: #ede8e0;
    padding: 4rem 0;
}
.temoignages-title {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #5a3e2b;
    margin-bottom: 2.5rem;
}
.temoignages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.temoignage-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.8rem 1.5rem;
    box-shadow: 0 2px 12px rgba(90,62,43,0.08);
    display: flex;
    flex-direction: column;
}
.temoignage-stars {
    color: #c9a96e;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
}
.temoignage-text {
    font-size: 0.92rem;
    color: #5a3e2b;
    line-height: 1.7;
    font-style: italic;
    flex: 1;
    margin-bottom: 1rem;
}
.temoignage-author {
    font-size: 0.82rem;
    font-weight: 700;
    color: #8b6a4e;
    margin: 0;
}
@media (max-width: 768px) {
    .temoignages-grid { grid-template-columns: 1fr; }
}

/* Section Intro */
.section-intro {
    background: #ede8e0;
    padding: 2.5rem 0;
    text-align: center;
}
.intro-tagline {
    font-style: italic;
    font-size: 1.05rem;
    max-width: 1500px;
    margin: 0 auto 1.8rem;
    line-height: 1.7;
    color: #5a3e2b;
}
.intro-box {
    background: #f5f1e8;
    border-radius: 10px;
    border-left: 4px solid #c9a96e;
    padding: 2rem 2.5rem;
    max-width: 1500px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 2px 12px rgba(90,62,43,0.07);
}
.intro-box-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    font-family: 'Raleway', sans-serif;
}
.intro-box-text {
    line-height: 1.8;
    margin: 0;
    font-size: 0.95rem;
}
@media (max-width: 768px) {
    .intro-box { padding: 1.5rem 1.2rem; }
    .intro-tagline { font-size: 0.97rem; padding: 0 1rem; }
}

/* Box "Concrètement" */
.section-concretement {
    background: #ede8e0;
    padding: 2.5rem 0;
}
.concretement-box {
    background: #f5f1e8;
    border-radius: 10px;
    padding: 2rem 2.5rem;
    max-width: 1500px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(90,62,43,0.07);
}
.concretement-title {
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.concretement-list {
    list-style: disc;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.concretement-list li {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: 1.65;
}

/* Portrait + citation */
.section-portrait {
    background: #faf8f5;
    padding: 3rem 0;
}
.portrait-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
}
.portrait-photo-wrap {
    display: flex;
    justify-content: center;
}
.portrait-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #c9a96e;
    box-shadow: 0 4px 18px rgba(90,62,43,0.15);
}
.portrait-placeholder {
    background: #e0d5c5;
    display: block;
}
.portrait-quote {
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #3a2a1a;
    line-height: 1.7;
    margin-bottom: 1rem;
    text-align: justify;
}
.portrait-subquote {
    font-size: 0.95rem;
    color: #5a3e2b;
    line-height: 1.75;
    text-align: justify;
}

/* Bande CTA */
.section-cta-strip {
    background: #3a2a1a;
    padding: 1.8rem 0;
    text-align: center;
}
.cta-strip-title {
    font-family: 'Raleway', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c9a96e;
    margin-bottom: 0.3rem;
}
.cta-strip-sub {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.4rem;
}
.cta-strip-contact {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
}


/* ── Page succès réservation ── */
.success-page {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}
.success-card {
    background: var(--white-soft);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 2.5rem 2rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
}
@media (max-width: 480px) {
    .success-card { padding: 2rem 1.25rem; border-radius: 14px; }
}
.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #5a3e2b;
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.success-title {
    font-size: 1.6rem;
    color: var(--wood-dark);
    margin-bottom: 1rem;
}
.success-email {
    color: var(--text-dark);
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    word-break: break-word;
}
.success-details {
    background: #faf6f2;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    text-align: left;
}
.success-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0e8e0;
}
.success-detail-item:last-child { border-bottom: none; }
.success-detail-label {
    font-size: 0.78rem;
    color: var(--wood-medium);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
}
.success-detail-value {
    font-size: 0.95rem;
    color: var(--wood-dark);
    font-weight: 500;
    text-align: right;
}
.success-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wood-dark);
}
.success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Bouton flottant mobile (accueil uniquement) ── */
.mobile-cta-float { display: none; }
@media (max-width: 768px) {
    .mobile-cta-float {
        display: block;
        position: fixed;
        bottom: 1.2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        background: #3a2a1a;
        color: #fff !important;
        text-decoration: none;
        padding: 0.85rem 2.2rem;
        border-radius: 50px;
        font-family: 'Raleway', sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        box-shadow: 0 4px 20px rgba(0,0,0,0.25);
        white-space: nowrap;
        transition: background 0.2s, transform 0.2s;
    }
    .mobile-cta-float:active {
        background: #5a3e2b;
        transform: translateX(-50%) scale(0.97);
    }
}

/* Responsive pilliers + portrait */
@media (max-width: 768px) {
    .pilliers-grid { grid-template-columns: 1fr; }
    .portrait-layout { grid-template-columns: 1fr; text-align: center; }
    .portrait-photo-wrap { justify-content: center; }
    .portrait-quote, .portrait-subquote { text-align: center; }
    .concretement-box { padding: 1.5rem 1.2rem; }
}

/* Mobile: empêche le zoom auto iOS sur les inputs (font-size < 16px déclenche le zoom) */
@media (max-width: 768px) {
    input, select, textarea,
    .form-input, .form-control, .calendar-select {
        font-size: 16px;
    }
}