/* Variables CSS */
 :root {
     --primary: #3498db;
     --secondary: #2c3e50;
     --accent: #e74c3c;
     --light: #f8f9fa;
     --white: #fff;
     --gray: #6c757d;
     --gray-light: #e9ecef;
     --light-gray: #ced4da;
     --border-radius: 8px;
     --shadow: 0 4px 6px rgb(0 0 0 / 10%);
     --shadow-hover: 0 6px 10px rgb(0 0 0 / 15%);
     --transition: all 0.3s ease;
     --glass-bg: rgb(255 255 255 / 20%);
     --glass-border: rgb(255 255 255 / 30%);
     --glass-shadow: 0 4px 30px rgb(0 0 0 / 10%);
     --glass-blur: blur(10px);
 }

.header-inner{
    justify-content: auto !important;
 }

 .navigation {
     margin-right: 160px;

     /* Ajuster la marge pour l'alignement */
 }

 /* Reset et styles de base */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: Poppins, sans-serif;
     line-height: 1.6;
     color: #333;
     background-color: var(--white);
 }

 .container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
 }

 .section-title {
     font-size: 2rem;
     color: var(--secondary);
     margin-bottom: 10px;
     text-align: center;
 }

 .section-subtitle {
     color: var(--gray);
     margin-bottom: 30px;
     text-align: center;
 }

 .btn {
     display: inline-block;
     padding: 12px 24px;
     background-color: var(--primary);
     color: white;
     border: none;
     border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
     transition: var(--transition);
     text-decoration: none;
     width: 100%;
     touch-action: manipulation;
 }

 .btn:hover {
     background-color: #2980b9;
     transform: translateY(-2px);
     box-shadow: var(--shadow-hover);
 }



 /* RDV Section - Desktop */
 .rdv-section {
     padding: 80px 0;
     margin-top: 70px;
 }

 .rdv-container {
     background: var(--light);
     padding: 30px;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     margin-top: 30px;
 }

 .rdv-calendar {
     width: 100%;
     overflow-x: auto;
     margin-top: 0;
 }

 .rdv-header {
     display: grid;
     grid-template-columns: 120px repeat(7, 1fr);
     gap: 5px;
     margin-bottom: 5px;
     font-weight: bold;
     color: var(--secondary);
     align-items: start;
     top: 0;
     position: sticky;
 }

 .rdv-day {
     padding: 15px 10px;
     text-align: center;
     background: rgb(52 152 219 / 10%);
     border-radius: 5px;
 }

 .rdv-time-header {
     padding: 15px 10px;
     text-align: center;
     background: rgb(52 152 219 / 10%);
     border-radius: 5px;
     font-weight: 600;
     grid-column: 1;
 }


 .rdv-body {
     display: grid;
     grid-template-columns: 120px repeat(7, 1fr);
     grid-auto-rows: minmax(60px, auto);
     gap: 5px;
     margin: 0 auto;
 }

 .rdv-time-label {
     grid-column: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px;
     background: rgb(52 152 219 / 10%);
     border-radius: 5px;
     font-weight: 500;
 }


 .rdv-time-slot {
     padding: 10px;
     text-align: center;
     background: rgb(52 152 219 / 5%); 
     border-radius: 5px;
     cursor: pointer; 
     transition: all 0.3s ease; 
     min-height: 60px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
      -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
 }

 .rdv-time-slot:hover {
     background: rgb(52 152 219 / 20%);
 }

 /* Modifier ces styles dans votre fichier CSS */

 .rdv-time-slot.booked {
     background: rgb(231 76 60 / 20%);

     /* Rouge plus visible */
     color: #7f231c;

     /* Texte plus foncé */
     cursor: not-allowed;
     text-decoration: line-through;
     position: relative;
     border: 1px solid rgb(231 76 60 / 30%);
 }

 .rdv-time-slot.booked::after {
     content: "✗";

     /* Ajoute une croix */
     position: absolute;
     font-size: 1.2rem;
     color: rgb(231 76 60 / 80%);
 }

 /* Pour les créneaux fermés */
 .rdv-time-slot.closed {
     background: rgb(108 117 125 / 20%);

     /* Gris pour fermé */
     color: #495057;
     cursor: not-allowed;
     position: relative;
     border: 1px dashed rgb(108 117 125 / 30%);
 }

 .rdv-time-slot.closed::after {
     content: "−";

     /* Ajoute un tiret */
     position: absolute;
     font-size: 1.2rem;
     color: rgb(108 117 125 / 80%);
 }

 /* Pour la pause déjeuner */
 .rdv-time-slot.pause {
     background: rgb(255 193 7 / 20%);

     /* Jaune pour pause */
     color: #856404;
     cursor: not-allowed;
     position: relative;
     border: 1px dotted rgb(255 193 7 / 30%);
 }

 .rdv-time-slot.pause::after {
     content: "⏸";

     /* Ajoute un symbole pause */
     position: absolute;
     font-size: 1rem;
     color: rgb(255 193 7 / 80%);
 }

 /* Améliorer le contraste au survol */
 .rdv-time-slot:not(.booked, .closed, .pause):hover {
     background: rgb(52 152 219 / 30%);
     transform: scale(1.02);
     box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
 }

 /* RDV Mobile Form (hidden by default) */
 .rdv-mobile-form {
     display: none;
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     border: 1px solid var(--glass-border);
     padding: 25px;
     border-radius: var(--border-radius);
     box-shadow: var(--glass-shadow);
     margin-top: 20px;
     color: var(--secondary);
 }

 .iti {
     width: 100%;
 }

 .iti input {
     width: 100%;
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     color: var(--secondary);
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid var(--light-gray);
     border-radius: var(--border-radius);
     font-family: Poppins, sans-serif;
     font-size: 1rem;
     transition: var(--transition);
     background-color: rgb(255 255 255 / 80%);
 }


 .form-group textarea {
     resize: vertical;
     min-height: 100px;
     margin-right: 100px;
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     border-color: var(--primary);
     outline: none;
     box-shadow: 0 0 0 3px rgb(52 152 219 / 20%);
     background-color: white;
 }



 /* Calendar Picker */
 .flatpickr-calendar {
     font-family: Poppins, sans-serif !important;
 }

 /* RDV Modal */
 .rdv-modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgb(0 0 0 / 50%);
     overflow: auto;
 }

 .rdv-modal-content {
     background-color: #fefefe;
     margin: 10% auto;
     padding: 30px;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     width: 90%;
     max-width: 600px;
     position: relative;
     animation: modal-fade-in 0.3s;
 }

 @keyframes modal-fade-in {
     from {
         opacity: 0;
         transform: translateY(-50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .rdv-modal-close {
     position: absolute;
     right: 20px;
     top: 15px;
     color: var(--gray);
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
     transition: var(--transition);
 }

 .rdv-modal-close:hover {
     color: var(--accent);
 }

 .rdv-modal-title {
     font-size: 1.5rem;
     color: var(--secondary);
     margin-bottom: 10px;
 }

 .rdv-modal-time {
     font-size: 1.1rem;
     color: var(--primary);
     margin-bottom: 20px;
     font-weight: 500;
 }

 .rdv-message {
     margin-top: 20px;
     padding: 15px;
     border-radius: var(--border-radius);
     display: none;
 }

 .rdv-message.success {
     background: rgb(46 204 113 / 10%);
     color: #2ecc71;
     border: 1px solid #2ecc71;
     display: block;
 }

 .rdv-message.error {
     background: rgb(231 76 60 / 10%);
     color: var(--accent);
     border: 1px solid var(--accent);
     display: block;
 }

 /* Map Section */
 .map-section {
     padding: 0 0 80px;
 }

 .map-iframe {
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     width: 100%;
     height: 450px;
 }

 /* Footer */
 .footer {
     background-color: var(--secondary);
     color: white;
     padding: 60px 0 20px;
 }

 .footer-bottom {
     text-align: center;
     padding-top: 20px;
     border-top: 1px solid rgb(255 255 255 / 10%);
 }

 .copyright {
     color: var(--gray-light);
     font-size: 0.9rem;
 }

 /* Particles Background */
 #particles-js {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: -1;
 }

 
/* ============ BASE STYLES ============ */
.section-title {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
}

.section-container {
    padding: 2rem;
}

.btn {
    padding: 12px 18px;
    font-size: 1rem;
    min-height: 44px;
}

.rdv-modal-content {
    width: 80%;
    max-width: 600px;
    padding: 25px;
}

.desktop-navigation {
    display: flex;
}

.rdv-calendar {
    display: block;
}

.rdv-mobile-form {
    display: none;
}

.mobile-menu-btn {
    display: none;
}

/* ============ IPHONE & IPAD PORTRAIT (MOBILE MODE - <1100px) ============ */
@media (max-width: 1100px) {
    /* Styles pour tous les iPhones et iPads en mode portrait */
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .section-container {
        padding: 1.5rem 1rem;
    }
    
    .btn {
        padding: 10px 15px;
        font-size: 0.95rem;
    }
    
    .rdv-modal-content {
        width: 95%;
        max-width: 95%;
        padding: 15px;
    }
    
    .desktop-navigation,
    .rdv-calendar {
        display: none;
    }
    
    .rdv-mobile-form {
        display: block;
        padding: 0 15px;
    }
    
    .mobile-menu-btn {
        display: flex;
        width: 40px;
        height: 40px;
        margin-left: 12px;
    }
    
    /* Optimisations spécifiques pour les iPhones */
    @media (max-width: 896px) {
        .mobile-menu-btn {
            margin-left: 10px;
        }
        
        .section-title {
            font-size: 1.4rem;
        }
        
        .rdv-mobile-form {
            padding: 0 10px;
        }
        
        /* iPhone SE */
        @media (max-width: 375px) and (max-height: 667px) {
            .section-title {
                font-size: 1.3rem;
            }
            
            .btn {
                padding: 8px 12px;
                font-size: 0.9rem;
            }
            
            .mobile-menu-btn {
                margin-left: 8px;
                width: 36px;
                height: 36px;
            }
        }
        
        /* iPhone 11, 12 Pro */
        @media (max-width: 414px) and (max-height: 896px) {
            .section-title {
                font-size: 1.45rem;
            }
        }
        
        /* iPhone 14 Pro Max */
        @media (max-width: 430px) and (max-height: 932px) {
            .section-title {
                font-size: 1.5rem;
            }
        }
    }
    
    /* Optimisations spécifiques pour les iPads en portrait */
    @media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
        .section-title {
            font-size: 1.8rem;
        }
        
        .section-subtitle {
            font-size: 1.1rem;
        }
        
        .rdv-mobile-form {
            max-width: 85%;
            margin: 0 auto;
        }
        
        .mobile-menu-btn {
            margin-left: 20px;
            width: 44px;
            height: 44px;
        }
        
        /* iPad Mini */
        @media (width: 768px) and (height: 1024px) {
            .section-title {
                font-size: 1.75rem;
            }
        }
        
        /* iPad Air */
        @media (width: 820px) and (height: 1180px) {
            .section-title {
                font-size: 1.85rem;
            }
        }
        
        /* iPad Pro 11" */
        @media (width: 834px) and (height: 1194px) {
            .section-title {
                font-size: 1.9rem;
            }
        }
        
        /* iPad Pro 12.9" */
        @media (width: 1024px) and (height: 1366px) {
            .section-title {
                font-size: 2rem;
            }
            
            .rdv-modal-content {
                padding: 20px;
            }
        }
    }
}

/* ============ IPAD LANDSCAPE (DESKTOP MODE - >1100px) ============ */
@media (min-width: 1100px) {
    .desktop-navigation,
    .rdv-calendar {
        display: block;
    }
    
    .rdv-mobile-form,
    .mobile-menu-btn {
        display: none;
    }
    
    /* Optimisations pour iPad en paysage */
    @media (orientation: landscape) {
        .section-title {
            font-size: 2rem;
        }
        
        .rdv-header {
            grid-template-columns: 120px repeat(7, 1fr);
        }
        
        .rdv-time-slot {
            padding: 12px 8px;
            font-size: 0.95rem;
        }
        
        .section-container {
            padding: 2.5rem 3rem;
        }
        
        /* iPad Mini */
        @media (width: 1024px) and (height: 768px) {
            .rdv-header {
                grid-template-columns: 100px repeat(6, 1fr);
            }
        }
        
        /* iPad Air */
        @media (width: 1180px) and (height: 820px) {
            .rdv-header {
                grid-template-columns: 110px repeat(7, 1fr);
            }
        }
        
        /* iPad Pro 11" */
        @media (width: 1194px) and (height: 834px) {
            .rdv-time-slot {
                padding: 14px 10px;
            }
        }
        
        /* iPad Pro 12.9" */
        @media (width: 1366px) and (height: 1024px) {
            .rdv-header {
                grid-template-columns: 130px repeat(8, 1fr);
            }
            
            .rdv-time-slot {
                padding: 15px 12px;
                font-size: 1rem;
            }
        }
    }
}

/* ============ ORIENTATION TRANSITIONS ============ */
@media (orientation: portrait) and (max-width: 1100px) {
    .section-container {
        padding-top: 3rem;
    }
}

@media (orientation: landscape) and (max-width: 1100px) {
    .mobile-menu-btn {
        position: fixed;
        top: 15px;
        right: 15px;
        margin-left: 0;
    }
}