/* ==============================================
   ACTIVE AUDITION VENISSIEUX - MAIN STYLESHEET
   ============================================== */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
    background-color: transparent;
    width: 100%;
    line-height: 1.6;
}

body {
    overflow-x: hidden;
}

/* Header Styles */
.header {
    background: 
        linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 20%, rgba(255,249,242,0.93) 50%, rgba(255,244,232,0.95) 80%, rgba(255,249,242,0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 200% 100%, auto;
    animation: subtleShift 15s ease-in-out infinite, gentleAppear 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 12px 0;
    width: 100%;
    position: relative;
    border-bottom: 2px solid #FF8C00;
    overflow: visible;
    z-index: 10;
    min-height: 70px;
    /* Initial state for smooth entrance */
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes subtleShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Header entrance animation */
@keyframes headerEntrance {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    40% {
        opacity: 0.3;
        transform: translateY(-60%);
    }
    70% {
        opacity: 0.8;
        transform: translateY(-10%);
    }
    85% {
        opacity: 0.95;
        transform: translateY(5%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Refined gentle entrance animation */
@keyframes gentleAppear {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Element entrance animations */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    60% {
        opacity: 0.8;
        transform: translateX(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    60% {
        opacity: 0.8;
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth subtle entrance for elements */
@keyframes softFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for navigation items */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gentle menu item appearance */
@keyframes gentleMenuAppear {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for top decorative bar */
@keyframes expandHorizontal {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(0.8);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Subtle glow effect for decorative bar */
@keyframes subtleGlow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Logo subtle scale animation */
@keyframes logoAppear {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 10;
    box-shadow: 0 0 15px 1px rgba(255,140,0,0.2);
    /* Subtle appearance for decorative bar */
    opacity: 0;
    animation: subtleGlow 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.8s forwards;
}

/* Cursor Glow Effect */
.cursor-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,140,0,0.15) 0%, rgba(255,69,0,0.06) 40%, rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay;
    animation: pulse 3s infinite alternate ease-in-out;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease, transform 0.3s ease;
    opacity: 0;
    filter: blur(8px);
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); filter: blur(8px); }
    100% { transform: translate(-50%, -50%) scale(1.15); filter: blur(10px); }
}

/* Container Layout */
.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

/* Logo Section */
.logo-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 20px;
    margin-left: 10px;
    /* Subtle entrance animation */
    opacity: 0;
    transform: translateY(10px);
    animation: softFadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.logo-container {
    display: flex;
    align-items: center;
    position: relative;
    padding: 12px;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Subtle logo animation */
    opacity: 0;
    transform: scale(0.95);
    animation: logoAppear 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

.logo-container:hover {
    transform: translateY(-2px);
}

.logo-image {
    height: auto;
    max-width: 120px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    display: block;
}

/* Navigation */
.nav-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2px;
    /* Subtle entrance animation */
    opacity: 0;
    transform: translateY(10px);
    animation: softFadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
}

.nav-menu {
    display: flex;
    list-style-type: none;
    padding: 3px 8px;
    margin: 3px 0 0 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.nav-menu li {
    position: relative;
    margin: 0;
    overflow: hidden;
    /* Subtle sequential entrance for menu items */
    opacity: 0;
    transform: translateY(8px);
    animation: gentleMenuAppear 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Refined staggered delays for menu items */
.nav-menu li:nth-child(1) { animation-delay: 0.8s; }
.nav-menu li:nth-child(2) { animation-delay: 0.9s; }
.nav-menu li:nth-child(3) { animation-delay: 1.0s; }
.nav-menu li:nth-child(4) { animation-delay: 1.1s; }
.nav-menu li:nth-child(5) { animation-delay: 1.2s; }
.nav-menu li:nth-child(6) { animation-delay: 1.3s; }
.nav-menu li:nth-child(7) { animation-delay: 1.4s; }

.nav-menu li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: rgba(255,140,0,0.3);
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateX(-50%);
}

.nav-menu li:hover::after {
    width: 80%;
    opacity: 1;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border: 1px solid transparent;
    letter-spacing: 0.3px;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.05));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
    border-radius: 10px;
}

.nav-menu a:hover::before, .nav-menu a.active::before {
    transform: scaleY(1);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #FF8C00;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-menu a:hover::after, .nav-menu a.active::after {
    width: 80%;
}

.nav-menu a:hover, .nav-menu a.active {
    color: #FF8C00;
    border-color: rgba(255, 140, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

.nav-menu a {
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.nav-menu a strong {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    display: inline;
}

.nav-menu i {
    margin-right: 8px;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    position: relative;
    top: 0;
}

/* Fix pour supprimer les icônes de validation indésirables */
.nav-menu li::before,
.nav-menu a::before {
    display: none !important;
    content: none !important;
}

.nav-menu li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}

.nav-menu a:hover i {
    transform: translateY(-2px) scale(1.1);
    color: #FF4500;
}

/* Unique icon colors for each navigation item */
.nav-menu li:nth-child(1) a:hover i { color: #FF6347; }
.nav-menu li:nth-child(2) a:hover i { color: #FF8C00; }
.nav-menu li:nth-child(3) a:hover i { color: #FF7F50; }
.nav-menu li:nth-child(4) a:hover i { color: #FFA500; }
.nav-menu li:nth-child(5) a:hover i { color: #FF4500; }
.nav-menu li:nth-child(6) a:hover i { color: #FF5733; }
.nav-menu li:nth-child(7) a:hover i { color: #FF6347; }

/* Contact Button */
.contact-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    /* Subtle entrance animation */
    opacity: 0;
    transform: translateY(10px);
    animation: softFadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
}

.contact-btn {
    background: linear-gradient(45deg, #333, #555);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-width: fit-content;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: 10px;
    border: none;
    letter-spacing: 0.5px;
    z-index: 1;
}

.contact-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.contact-btn:hover::before {
    opacity: 1;
    animation: goldShimmer 3s ease infinite;
}

.contact-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -2;
    border-radius: 52px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.contact-btn:hover::after {
    opacity: 0.7;
    animation: goldShimmer 5s ease infinite;
}

.contact-btn i {
    margin-right: 10px;
    transition: all 0.8s ease;
    position: relative;
}

.contact-btn:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
}

.contact-btn:hover i {
    animation: delayedRotation 1.2s forwards;
}

@keyframes goldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

@keyframes delayedRotation {
    0% { transform: rotate(0deg) scale(1); color: white; }
    30% { transform: rotate(0deg) scale(1.1); color: #fcf6ba; }
    100% { transform: rotate(-15deg) scale(1.2); color: #5a4500; }
}

.contact-btn span {
    position: relative;
    z-index: 3;
    transition: letter-spacing 1.5s ease, color 1s ease;
}

.contact-btn:hover span {
    letter-spacing: 0.6px;
    animation: textColorTransition 2s forwards;
}

@keyframes textColorTransition {
    0% { color: white; }
    40% { color: #fcf6ba; }
    70% { color: #bf953f; }
    100% { color: #4a3800; }
}

.contact-location {
    font-size: 0.75rem;
    color: #666;
    margin-top: 5px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
    transition: all 0.8s ease;
}

.contact-wrapper:hover .contact-location {
    color: #967d30;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Button Hover Sequence */
.contact-btn:hover {
    animation: buttonHoverSequence 1.2s forwards;
}

@keyframes buttonHoverSequence {
    0% {
        color: white;
        text-shadow: none;
    }
    60% {
        color: #a18430;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    100% {
        color: #4a3800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    }
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.phone-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom right, #ffffff, #fafafa);
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.25),
        0 10px 20px rgba(0,0,0,0.1);
    border: none;
    padding: 30px;
    border-radius: 20px;
    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1001;
}

@keyframes slideIn {
    from { 
        transform: translate(-50%, -70%);
        opacity: 0;
    }
    to { 
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 90vh;
}

.modal-header {
    text-align: center;
    width: 100%;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(to right, transparent, #FF8C00, transparent);
}

.modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', 'Montserrat', sans-serif;
}

.phone-input {
    width: 100%;
    padding: 18px;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    font-size: 1.1rem;
    box-sizing: border-box;
    transition: all 0.4s ease;
    box-shadow: 
        inset 0 2px 5px rgba(0,0,0,0.03),
        0 0 0 1px rgba(0,0,0,0.08);
}

.phone-input:focus {
    border-color: #FF8C00;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    width: 100%;
    justify-content: space-between;
}

.btn {
    padding: 15px 30px;
    border-radius: 15px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    flex: 1;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    color: white;
}

.btn-secondary {
    background: #f8f8f8;
    color: #666;
    border: 1px solid #e0e0e0;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

/* ===== HERO SECTION STYLES ===== */
.hero-section {
    position: relative;
    width: 100%;
    padding: 70px 0;
    overflow: hidden;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.96) 0%, rgba(255,250,245,0.94) 50%, rgba(255,245,235,0.96) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: fadeInUp 1s ease-out;
    animation-delay: 1.2s;
    animation-fill-mode: both;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
    box-shadow: 0 0 15px 1px rgba(255,140,0,0.2);
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,140,0,0.08) 0%, rgba(255,69,0,0.04) 40%, rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay;
    animation: heroGlowPulse 8s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
    filter: blur(60px);
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.intro-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.welcome-text {
    flex: 2;
    max-width: 66.67%;
    opacity: 0;
    animation: fadeInUp 0.8s forwards 0.2s;
}

.video-section {
    flex: 1;
    max-width: 33.33%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border: 2px solid rgba(255, 140, 0, 0.2);
    background: linear-gradient(45deg, rgba(255,140,0,0.05), rgba(255,69,0,0.02));
    opacity: 0;
    animation: fadeInUp 0.8s forwards 1s;
}

.demo-video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 35% center;
    display: block;
    border-radius: 13px;
    transition: transform 0.3s ease;
}

.video-section:hover .demo-video {
    transform: scale(1.02);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,140,0,0.1) 0%, rgba(255,69,0,0.05) 50%, rgba(255,140,0,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 13px;
    pointer-events: none;
}

.video-section:hover .video-overlay {
    opacity: 1;
}

.video-label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,140,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-section:hover .video-label {
    opacity: 1;
}

.welcome-subtitle {
    color: #FF8C00;
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 18px;
    letter-spacing: 1.2px;
}

.welcome-title {
    font-family: 'Playfair Display', 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 28px;
    line-height: 1.2;
}

.welcome-title span {
    color: #FF8C00;
    position: relative;
}

.welcome-title span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.15), rgba(255,69,0,0.1));
    z-index: -1;
    border-radius: 4px;
}

.welcome-description {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 35px;
}

.welcome-cta {
    display: inline-block;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.welcome-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.welcome-cta:hover::before {
    opacity: 1;
    animation: goldShimmer 3s ease infinite;
}

.welcome-cta::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -2;
    border-radius: 52px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.welcome-cta:hover::after {
    opacity: 0.7;
    animation: goldShimmer 5s ease infinite;
}

.welcome-cta:hover {
    color: #4a3800;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 
        0 8px 15px rgba(183, 155, 59, 0.15),
        0 10px 25px rgba(183, 155, 59, 0.2);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.welcome-cta i {
    margin-right: 10px;
    transition: transform 0.5s ease;
}

.welcome-cta:hover i {
    transform: rotate(-15deg) scale(1.2);
}

/* ===== HERO SECTION ANIMATIONS ===== */
@keyframes heroGlowPulse {
    0% { transform: translateX(-50%) scale(1); filter: blur(60px); }
    100% { transform: translateX(-50%) scale(1.4); filter: blur(80px); }
}

/* ========================================
   MEDIA QUERIES - MOBILE RESPONSIVENESS
   ======================================== */

/* Tablette et petits écrans */
@media (max-width: 992px) {
    /* Services Section - properly namespaced */
    .services-section {
        padding: 50px 0;
    }
    
    .services-section .panels-container {
        gap: 30px;
    }
    
    .services-section .panel {
        padding: 30px 25px;
    }
    
    /* Modal de téléphone */
    .modal-content {
        width: 90%;
        max-width: 500px;
        margin: 5% auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section {
        padding: 50px 0;
    }
    
    .intro-section {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .welcome-text, .video-section {
        max-width: 100%;
    }
    
    .welcome-title {
        font-size: 2rem;
    }
    
    .welcome-subtitle, .welcome-description {
        font-size: 1rem;
    }
    
    .demo-video {
        height: 300px;
    }
    
    /* Si la navigation wrap, ajuster l'espacement vertical */
    .nav-menu {
        line-height: 1.2;
    }
    
    /* Améliorer la lisibilité des icônes sur mobile */
    .nav-menu i {
        display: inline-block;
        width: 16px;
        text-align: center;
    }
    
    /* Modal de téléphone - responsive */
    .modal-content {
        width: 95%;
        max-width: 450px;
        margin: 3% auto;
        padding: 20px;
    }
    
    .modal-header h3 {
        font-size: 1.4rem;
    }
    
    .modal-header p {
        font-size: 0.95rem;
    }
    
    .phone-form {
        gap: 15px;
    }
    
    .phone-input {
        padding: 12px 15px;
        font-size: 1rem;
    }
    
    .call-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Modal RDV - responsive */
    .rdv-modal .modal-content {
        width: 95%;
        max-width: 500px;
        margin: 2% auto;
        max-height: 95vh;
        overflow-y: auto;
    }
    
    .rdv-modal .modal-header {
        padding: 20px 20px 15px;
    }
    
    .rdv-modal .modal-header h3 {
        font-size: 1.4rem;
    }
    
    .rdv-modal .modal-header p {
        font-size: 0.95rem;
    }
    
    .phone-form {
        gap: 15px;
    }
    
    .phone-input {
        padding: 12px 15px;
        font-size: 1rem;
    }
    
    .call-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Services section mobile - properly namespaced */
    .services-section {
        padding: 40px 0;
    }
    
    .services-section .panels-container {
        flex-direction: column;
        gap: 25px;
    }
    
    .services-section .panel {
        max-width: 100%;
        padding: 25px 20px;
    }
    
    .services-modal-header {
        padding: 20px 20px 15px;
    }
    
    .services-modal-content {
        padding: 20px;
    }
    
    .services-modal-title {
        font-size: 1.3rem;
    }
    
    .services-modal-subtitle {
        font-size: 0.95rem;
    }
    
    /* Zone tactile minimale pour mobile */
    .services-cta-button,
    .services-submit-btn,
    .services-modal-close {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .services-section .wrapper {
        padding: 15px;
    }
    
    .services-modal-container {
        width: 95%;
        max-height: 90vh;
    }
    
    .services-section .product-image-container {
        width: 120px;
        height: 120px;
    }
    
    .services-section .benefit-item {
        font-size: 0.9rem;
    }
    
    .services-submit-btn {
        padding: 12px;
    }
    
    .services-section .services-cta-button {
        width: 100%;
        max-width: 280px;
        margin: 20px auto 0;
    }
}

@media (max-width: 320px) {
    .services-modal-container {
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .services-section .product-image-container {
        width: 100px;
        height: 100px;
    }
    
    .services-section .panel {
        padding: 20px 15px;
    }
}

/* Main Content Styles */
main {
    min-height: 80vh;
    padding: 2rem 0;
}

.main-content {
    min-height: 80vh;
    padding: 2rem 0;
    width: 100%;
    position: relative;
}

/* Bandeau de localisation */
.location-banner {
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
    padding: 8px 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 11;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    animation: softFadeInDown 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s forwards;
    opacity: 0;
}

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

.location-banner-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

.location-banner-content a {
    color: #FF8C00;
    text-decoration: none;
    font-weight: 600;
}

.location-banner-content a:hover {
    text-decoration: underline;
}

/* Responsive pour le bandeau de localisation */
@media (max-width: 768px) {
    .location-banner {
        padding: 6px 0;
    }
    
    .location-banner-content p {
        font-size: 0.8rem;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .location-banner {
        padding: 5px 0;
    }
    
    .location-banner-content p {
        font-size: 0.75rem;
        padding: 0 8px;
        line-height: 1.4;
    }
}

/* Bandeau Orange - Reste à charge 0€ */
.bandeau-orange {
    background-color: #FF8C00;
    background: linear-gradient(135deg, #FF8C00 0%, #FF7A00 100%);
    padding: 15px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(10px);
    animation: softFadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards;
}

.bandeau-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.bandeau-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.bandeau-text {
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.bandeau-text .asterisk {
    font-size: 1.2rem;
    vertical-align: super;
    margin-left: 2px;
}

/* Hidden Elements */
.brand-promise,
.premium-badge {
    display: none;
}

#hiddenFrame {
    display: none;
}

/* RDV Modal Styles */
.rdv-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000; /* Z-index supérieur aux services modals */
    justify-content: center;
    align-items: center;
}

.rdv-modal.active {
    display: flex;
}

.rdv-modal .modal-content {
    background: white;
    border-radius: 15px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    position: relative;
}

.rdv-modal .modal-header {
    background: linear-gradient(135deg, #FF8C00, #FF4500);
    color: white;
    padding: 20px 30px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.rdv-modal .modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 20px;
    right: 20px;
}

.close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.rdv-form {
    padding: 30px;
}

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

.rdv-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.rdv-form .form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(250, 250, 250, 0.4);
    font-size: 16px; /* Prevents iOS zoom */
    color: var(--text-dark, #333);
    font-family: var(--font-body, 'Montserrat', sans-serif);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.rdv-form .form-group input:focus {
    outline: none;
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
    background: white;
}

.rdv-form .form-group input:invalid {
    border-color: #e74c3c;
}

.rdv-form .form-group input:valid {
    border-color: #27ae60;
}

.privacy-notice {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #FF8C00;
}

.privacy-notice p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #666;
}

.rdv-modal .modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.rdv-modal .btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
}

.rdv-modal .btn-primary {
    background: linear-gradient(135deg, #FF8C00, #FF4500);
    color: white;
}

.rdv-modal .btn-primary:hover {
    background: linear-gradient(135deg, #FF4500, #FF8C00);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

/* Loading overlay and success message for RDV modal */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1001;
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    text-align: center;
    color: #333;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FF8C00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-content p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #666;
}

.success-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1002;
}

.success-message.active {
    display: flex;
    animation: successSlideIn 0.5s ease-out forwards;
}

@keyframes successSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-content {
    text-align: center;
    max-width: 300px;
    padding: 20px;
}

.success-icon {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 20px;
    animation: successIconPulse 0.6s ease-out;
}

@keyframes successIconPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-content h4 {
    color: #333;
    margin: 0 0 15px 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.success-content p {
    color: #666;
    margin: 0 0 25px 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.success-content .btn {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #FF8C00, #FF4500);
    color: white;
}

.success-content .btn:hover {
    background: linear-gradient(135deg, #FF4500, #FF8C00);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

/* Button loading state */
.btn-primary.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-primary.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Gestion du scroll global quand modal ouverte - Version iOS compatible */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    /* Fix pour iOS Safari */
    -webkit-overflow-scrolling: touch;
}

/* Fix spécifique pour iOS */
@supports (-webkit-touch-callout: none) {
    body.modal-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
}

/* Amélioration de l'affichage des modales sur mobile */
.modal-overlay {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style pour les formulaires dans les modales sur mobile */
@media (max-width: 768px) {
    .modal-content input,
    .modal-content textarea,
    .modal-content select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        transition: all 0.3s ease;
    }
    
    .modal-content input:focus,
    .modal-content textarea:focus,
    .modal-content select:focus {
        border-color: #FF8C00;
        box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
        outline: none;
    }
    
    /* Améliorer les boutons sur mobile */
    .modal-content button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ========================================
   SERVICES SECTION - NEW IMPLEMENTATION
   ======================================== */

.services-section {
    /* Variables CSS pour la section services */
    --services-primary-color: #FF8C00;
    --services-secondary-color: #FF4500;
    --services-accent-color: #bf953f;
    --services-dark-gold: #aa771c;
    --services-light-gold: #e6c353;
    --services-text-dark: #333;
    --services-text-medium: #555;
    --services-text-light: #777;
    --services-white: #FFFFFF;
    --services-off-white: #F8FAFC;
    --services-light-gray: #EDF2F7;
    --services-light-orange: rgba(255, 140, 0, 0.05);
    --services-border-radius: 12px;
    --services-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
    --services-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.08);
    --services-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    --services-transition-smooth: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --services-font-heading: 'Montserrat', 'Nunito Sans', sans-serif;
    --services-font-body: 'Montserrat', 'Nunito Sans', sans-serif;
    
    padding: 60px 0;
    background: transparent;
    position: relative;
    display: block !important; /* Force l'affichage */
    width: 100%;
    clear: both;
}

.services-section .wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Product Panels Styling */
.services-section .panels-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.services-section .panel {
    flex: 1;
    min-width: 280px;
    background-color: var(--services-white);
    border-radius: var(--services-border-radius);
    box-shadow: var(--services-shadow-medium);
    padding: 28px;
    transition: var(--transition-smooth, all 0.4s cubic-bezier(0.19, 1, 0.22, 1));
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 140, 0, 0.1);
}

.services-section .panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.services-section .panel:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.1),
        0 5px 10px rgba(183, 155, 59, 0.1);
}

.services-section .heading {
    text-align: center;
    margin-bottom: 25px;
    width: 100%;
}

.services-section .category-label {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color, #FF8C00);
    margin: 0 0 6px 0;
    opacity: 0.8;
}

.services-section .product-title {
    font-family: 'Playfair Display', var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-dark, #333);
    margin: 0;
    position: relative;
    display: inline-block;
}

.services-section .product-title::after {
    content: '';
    position: absolute;
    left: calc(50% - 25px);
    bottom: -8px;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
}

.services-section .product-image-container {
    width: 140px;
    height: 140px;
    margin: 20px auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
    position: relative;
}

.services-section .product-image-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
}

.services-section .product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: var(--transition-smooth, all 0.4s ease);
}

.services-section .panel:hover .product-image-container {
    transform: translateY(-5px);
}

.services-section .info-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-medium, #555);
    margin: 16px 0;
    text-align: center;
}

.services-section .emphasis {
    font-weight: 600;
    color: var(--primary-color, #FF8C00);
}

.services-section .benefit-list {
    width: 100%;
    padding: 0;
    margin: 16px 0;
    list-style-type: none;
}

.services-section .benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    color: var(--text-medium, #555);
    font-size: 0.95rem;
    line-height: 1.5;
}

.services-section .benefit-icon {
    color: var(--accent-color, #bf953f);
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0.85;
}

/* Bouton Prendre RDV harmonisé avec le header */
.services-section .services-cta-button {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(45deg, #333, #555);
    color: var(--white, white);
    border: none;
    border-radius: 50px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    margin-top: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

.services-section .services-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.services-section .services-cta-button::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -2;
    border-radius: 52px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.services-section .services-cta-button:hover::before {
    opacity: 1;
    animation: servicesGoldShimmer 3s ease infinite;
}

.services-section .services-cta-button:hover::after {
    opacity: 0.7;
    animation: servicesGoldShimmer 5s ease infinite;
}

@keyframes servicesGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.services-section .services-cta-button:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    animation: servicesButtonHoverSequence 1.2s forwards;
}

@keyframes servicesButtonHoverSequence {
    0% {
        color: white;
        text-shadow: none;
    }
    60% {
        color: #a18430;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    100% {
        color: #4a3800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    }
}

/* Formulaire Modal Styling */
.services-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

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

.services-modal-container {
    background-color: var(--white, white);
    border-radius: var(--border-radius, 12px);
    width: 80%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    padding: 0;
    border: 1px solid rgba(255, 140, 0, 0.1);
}

.services-modal-overlay.active .services-modal-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.services-modal-header {
    position: relative;
    text-align: center;
    padding: 25px 25px 20px;
    border-bottom: 1px solid rgba(255, 140, 0, 0.1);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 248, 240, 0.95));
}

.services-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.services-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-light, #777);
    cursor: pointer;
    transition: var(--transition-smooth, all 0.3s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.services-modal-close:hover {
    background-color: rgba(255, 140, 0, 0.1);
    color: var(--primary-color, #FF8C00);
}

.services-modal-title {
    font-family: 'Playfair Display', var(--font-heading, 'Montserrat', sans-serif);
    color: var(--text-dark, #333);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0 0 8px 0;
}

.services-modal-subtitle {
    font-family: var(--font-body, 'Montserrat', sans-serif);
    color: var(--text-medium, #555);
    font-weight: 400;
    font-size: 0.95rem;
    margin: 0;
}

.services-modal-content {
    padding: 25px 25px 30px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 250, 245, 0.8));
}

/* Formulaire Styling */
.services-appointment-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.services-form-group {
    position: relative;
}

.services-form-group label {
    display: block;
    font-size: 0.95rem;
    color: var(--text-medium, #555);
    margin-bottom: 6px;
    font-weight: 500;
}

.services-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(250, 250, 250, 0.4);
    font-size: 16px; /* Prevents iOS zoom */
    color: var(--text-dark, #333);
    font-family: var(--font-body, 'Montserrat', sans-serif);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.services-form-group input:focus {
    outline: none;
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
    background: white;
}

.services-form-group input::placeholder {
    color: #aaa;
    font-size: 0.95rem;
}

.services-optional-label::after {
    content: ' (facultatif)';
    color: var(--text-light, #777);
    font-size: 0.85rem;
    font-weight: normal;
}

.services-submit-btn {
    width: 100%;
    padding: 14px 25px;
    margin-top: 15px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
    z-index: 1;
}

.services-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.services-submit-btn:hover::before {
    opacity: 1;
    animation: servicesGoldShimmer 3s ease infinite;
}

.services-submit-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -2;
    border-radius: 52px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.services-submit-btn:hover::after {
    opacity: 0.7;
    animation: servicesGoldShimmer 5s ease infinite;
}

.services-submit-btn:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.services-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.services-submit-btn.loading {
    color: transparent;
}

.services-submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: servicesRotate 0.8s linear infinite;
    z-index: 10;
}

@keyframes servicesRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Message de succès */
.services-success-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 250, 245, 0.95));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: var(--border-radius, 12px);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.services-success-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.services-success-message.active {
    opacity: 1;
    visibility: visible;
}

.services-success-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(45deg, #333, #555);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.services-success-title {
    color: var(--text-dark, #333);
    font-family: 'Playfair Display', var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    text-align: center;
}

.services-success-text {
    color: var(--text-medium, #555);
    text-align: center;
    margin-bottom: 25px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.services-success-btn {
    padding: 12px 24px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    z-index: 1;
}

.services-success-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.services-success-btn:hover::before {
    opacity: 1;
    animation: servicesGoldShimmer 3s ease infinite;
}

.services-success-btn:hover {
    color: #4a3800;
    transform: translateY(-3px);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* SVG styling */
#servicesDepistageIcon {
    filter: drop-shadow(0 2px 5px rgba(255, 140, 0, 0.15));
}

/* ========================================
   SERVICES SECTION - RESPONSIVE DESIGN
   ======================================== */

/* Tablette et écrans moyens */
@media (max-width: 992px) {
    .services-section {
        padding: 50px 0;
    }
    
    .services-section .panels-container {
        gap: 25px;
    }
    
    .services-section .panel {
        padding: 25px 20px;
        min-width: 250px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .services-section {
        padding: 40px 0;
    }
    
    .services-section .wrapper {
        padding: 15px;
    }
    
    .services-section .panels-container {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .services-section .panel {
        min-width: auto;
        max-width: 100%;
        padding: 20px 15px;
        margin: 0;
    }
    
    .services-section .product-image-container {
        width: 120px;
        height: 120px;
        margin: 15px auto 20px;
    }
    
    .services-section .benefit-item {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    .services-section .services-cta-button {
        width: 100%;
        max-width: 280px;
        margin: 15px auto 0;
        padding: 14px 20px;
    }
    
    /* Services Modal Mobile */
    .services-modal-container {
        width: 95%;
        max-width: 450px;
        margin: 2% auto;
        max-height: 95vh;
    }
    
    .services-modal-header {
        padding: 18px 15px 12px;
    }
    
    .services-modal-content {
        padding: 18px 15px 20px;
    }
    
    .services-modal-title {
        font-size: 1.2rem;
    }
    
    .services-modal-subtitle {
        font-size: 0.9rem;
    }
    
    .services-form-group {
        margin-bottom: 16px;
    }
    
    .services-form-group input {
        padding: 12px 14px;
        font-size: 16px; /* Empêche le zoom sur iOS */
    }
    
    .services-submit-btn {
        padding: 14px 20px;
        font-size: 1rem;
        width: 100%;
    }
    
    /* Zone tactile minimale pour mobile */
    .services-cta-button,
    .services-submit-btn,
    .services-modal-close {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Message de succès mobile */
    .services-success-message {
        padding: 20px 15px;
    }
    
    .services-success-title {
        font-size: 1.3rem;
    }
    
    .services-success-text {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .services-section {
        padding: 30px 0;
    }
    
    .services-section .wrapper {
        padding: 10px;
    }
    
    .services-section .panel {
        padding: 18px 12px;
    }
    
    .services-section .product-image-container {
        width: 100px;
        height: 100px;
        margin: 12px auto 15px;
    }
    
    .services-section .product-title {
        font-size: 1.4rem;
    }
    
    .services-section .info-text {
        font-size: 0.95rem;
        margin: 12px 0;
    }
    
    .services-section .benefit-item {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }
    
    .services-modal-container {
        width: 98%;
        margin: 1% auto;
        max-height: 98vh;
        border-radius: 8px;
    }
    
    .services-modal-header {
        padding: 15px 12px 10px;
        border-radius: 8px 8px 0 0;
    }
    
    .services-modal-content {
        padding: 15px 12px 18px;
    }
    
    .services-modal-title {
        font-size: 1.1rem;
    }
    
    .services-modal-subtitle {
        font-size: 0.85rem;
    }
    
    .services-form-group {
        margin-bottom: 14px;
    }
    
    .services-form-group label {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }
    
    .services-form-group input {
        padding: 11px 12px;
    }
    
    .services-submit-btn {
        padding: 12px 18px;
        font-size: 0.95rem;
    }
}

/* Mode paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .services-modal-container {
        max-height: 95vh;
        overflow-y: auto;
    }
    
    .services-modal-header {
        padding: 12px 15px 8px;
    }
    
    .services-modal-content {
        padding: 12px 15px 15px;
    }
    
    .services-section .product-image-container {
        width: 80px;
        height: 80px;
        margin: 10px auto 12px;
    }
}

/* Gestion du scroll pour les modales services sur mobile */
@media (max-width: 768px) {
    body.modal-open {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .services-modal-overlay {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

/* ========================================
   SECTION AVANTAGES - NEW SECTION
   ======================================== */

.avantages-section {
    /* Variables CSS pour la section avantages */
    --avantages-primary-color: #FF8C00;
    --avantages-secondary-color: #FF4500;
    --avantages-accent-color: #bf953f;
    --avantages-dark-gold: #aa771c;
    --avantages-light-gold: #e6c353;
    --avantages-text-dark: #333;
    --avantages-text-medium: #555;
    --avantages-text-light: #777;
    --avantages-white: #FFFFFF;
    --avantages-off-white: #F8FAFC;
    --avantages-light-gray: #EDF2F7;
    --avantages-light-orange: rgba(255, 140, 0, 0.05);
    --avantages-border-radius: 15px;
    --avantages-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
    --avantages-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.08);
    --avantages-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    --avantages-transition-smooth: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --avantages-font-heading: 'Playfair Display', 'Montserrat', sans-serif;
    --avantages-font-body: 'Montserrat', 'Nunito Sans', sans-serif;
    
    padding: 80px 0;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 50%, rgba(255,245,235,0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 200% 100%, auto;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(20px);
    animation: avantagesAppear 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

@keyframes avantagesAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.avantages-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
    box-shadow: 0 0 15px 1px rgba(255,140,0,0.2);
}

.avantages-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.avantages-header {
    text-align: center;
    margin-bottom: 60px;
    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(20px);
    animation: avantagesHeaderAppear 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
}

@keyframes avantagesHeaderAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.avantages-title {
    font-family: var(--avantages-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--avantages-text-dark);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.avantages-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.8), rgba(255,69,0,0.3));
    border-radius: 2px;
}

.avantages-subtitle {
    font-family: var(--avantages-font-body);
    font-size: 1.1rem;
    color: var(--avantages-text-medium);
    margin: 0;
    line-height: 1.6;
}

.avantages-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.avantage-card {
    background: var(--avantages-white);
    border-radius: var(--avantages-border-radius);
    padding: 35px 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--avantages-shadow-medium);
    transition: var(--avantages-transition-smooth);
    border: 1px solid rgba(255, 140, 0, 0.1);
    /* Animation d'entrée séquentielle */
    opacity: 0;
    transform: translateY(30px);
    animation: avantageCardAppear 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.avantage-card:nth-child(1) { animation-delay: 0.9s; }
.avantage-card:nth-child(2) { animation-delay: 1.1s; }
.avantage-card:nth-child(3) { animation-delay: 1.3s; }
.avantage-card:nth-child(4) { animation-delay: 1.5s; }

@keyframes avantageCardAppear {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.avantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.avantage-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.avantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        var(--avantages-shadow-hover),
        0 5px 15px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.2);
}

.avantage-card:hover::after {
    opacity: 1;
}

.avantage-icon-container {
    margin-bottom: 25px;
    position: relative;
    z-index: 3;
}

.avantage-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, var(--avantages-primary-color), var(--avantages-secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: var(--avantages-transition-smooth);
    box-shadow: 
        0 4px 15px rgba(255, 140, 0, 0.2),
        0 0 0 4px rgba(255, 255, 255, 0.9),
        0 0 0 8px rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.avantage-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50%;
}

.avantage-card:hover .avantage-icon::before {
    opacity: 1;
    animation: avantagesIconShimmer 3s ease infinite;
}

@keyframes avantagesIconShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.avantage-icon svg {
    color: white;
    transition: var(--avantages-transition-smooth);
    z-index: 2;
    position: relative;
}

.avantage-card:hover .avantage-icon {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 
        0 8px 25px rgba(255, 140, 0, 0.3),
        0 0 0 4px rgba(255, 255, 255, 0.9),
        0 0 0 8px rgba(255, 140, 0, 0.2);
}

.avantage-card:hover .avantage-icon svg {
    color: #4a3800;
    transform: scale(1.1);
}

.avantage-title {
    font-family: var(--avantages-font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--avantages-text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
    position: relative;
    z-index: 3;
}

.avantage-description {
    font-family: var(--avantages-font-body);
    font-size: 0.95rem;
    color: var(--avantages-text-medium);
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 3;
}

/* Effet de glow sur la section */
.avantages-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,140,0,0.06) 0%, rgba(255,69,0,0.03) 40%, rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay;
    animation: avantagesGlowPulse 8s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    filter: blur(40px);
    top: 30%;
    right: 10%;
}

@keyframes avantagesGlowPulse {
    0% { transform: scale(1); filter: blur(40px); }
    100% { transform: scale(1.3); filter: blur(60px); }
}

/* ========================================
   SECTION AVANTAGES - RESPONSIVE DESIGN
   ======================================== */

/* Tablette */
@media (max-width: 992px) {
    .avantages-section {
        padding: 60px 0;
    }
    
    .avantages-wrapper {
        padding: 0 20px;
    }
    
    .avantages-header {
        margin-bottom: 50px;
    }
    
    .avantages-title {
        font-size: 2.2rem;
    }
    
    .avantages-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    
    .avantage-card {
        padding: 30px 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .avantages-section {
        padding: 50px 0;
    }
    
    .avantages-wrapper {
        padding: 0 15px;
    }
    
    .avantages-header {
        margin-bottom: 40px;
    }
    
    .avantages-title {
        font-size: 1.8rem;
    }
    
    .avantages-subtitle {
        font-size: 1rem;
    }
    
    .avantages-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .avantage-card {
        padding: 25px 18px;
    }
    
    .avantage-icon {
        width: 70px;
        height: 70px;
    }
    
    .avantage-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .avantage-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .avantage-description {
        font-size: 0.9rem;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .avantages-section {
        padding: 40px 0;
    }
    
    .avantages-wrapper {
        padding: 0 10px;
    }
    
    .avantages-header {
        margin-bottom: 30px;
    }
    
    .avantages-title {
        font-size: 1.6rem;
    }
    
    .avantages-subtitle {
        font-size: 0.95rem;
    }
    
    .avantage-card {
        padding: 20px 15px;
    }
    
    .avantage-icon {
        width: 60px;
        height: 60px;
    }
    
    .avantage-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .avantage-title {
        font-size: 1.1rem;
    }
    
    .avantage-description {
        font-size: 0.85rem;
    }
}

/* Mode paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .avantages-section {
        padding: 30px 0;
    }
    
    .avantages-header {
        margin-bottom: 25px;
    }
    
    .avantages-title {
        font-size: 1.5rem;
    }
    
    .avantages-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }
    
    .avantage-card {
        padding: 15px 12px;
    }
    
    .avantage-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }
    
    .avantage-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .avantage-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .avantage-description {
        font-size: 0.8rem;
    }
}

/* ========================================
   SECTION CENTRE AUDITIF INDÉPENDANT
   ======================================== */

.independent-section {
    /* Variables CSS harmonisées avec le site */
    --independent-primary-color: #FF8C00;
    --independent-secondary-color: #FF4500;
    --independent-accent-color: #bf953f;
    --independent-text-dark: #2C3E50;
    --independent-text-medium: #64748B;
    --independent-text-light: #777;
    --independent-white: #FFFFFF;
    --independent-light-orange: rgba(255, 140, 0, 0.05);
    --independent-border-radius: 12px;
    --independent-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
    --independent-shadow-medium: 0 4px 20px rgba(255, 140, 0, 0.07);
    --independent-shadow-hover: 0 8px 30px rgba(255, 140, 0, 0.15);
    --independent-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --independent-font-heading: 'Playfair Display', 'Montserrat', sans-serif;
    --independent-font-body: 'Montserrat', 'Nunito Sans', sans-serif;
    
    padding: 80px 20px;
    position: relative;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 50%, rgba(255,245,235,0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 200% 100%, auto;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(20px);
    animation: independentSectionAppear 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

@keyframes independentSectionAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.independent-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
    box-shadow: 0 0 15px 1px rgba(255,140,0,0.2);
}

.independent-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.independent-intro {
    text-align: center;
    margin-bottom: 60px;
    /* Animation d'entrée */
    opacity: 0;
    transform: translateY(20px);
    animation: independentIntroAppear 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

@keyframes independentIntroAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.independent-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--independent-text-dark);
    margin-bottom: 20px;
    font-family: var(--independent-font-heading);
    position: relative;
    display: inline-block;
}

.independent-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--independent-primary-color), var(--independent-secondary-color));
    border-radius: 2px;
}

.independent-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--independent-text-medium);
    max-width: 700px;
    margin: 0 auto;
    padding-top: 10px;
    font-family: var(--independent-font-body);
}

.independent-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 60px 0;
    padding: 0 20px;
}

.independent-benefit {
    background: var(--independent-white);
    padding: 30px;
    border-radius: var(--independent-border-radius);
    box-shadow: var(--independent-shadow-medium), 0 2px 10px rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--independent-transition-smooth);
    position: relative;
    overflow: hidden;
    /* Animation d'entrée séquentielle */
    opacity: 0;
    transform: translateY(30px);
    animation: independentBenefitAppear 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.independent-benefit:nth-child(1) { animation-delay: 0.7s; }
.independent-benefit:nth-child(2) { animation-delay: 0.9s; }
.independent-benefit:nth-child(3) { animation-delay: 1.1s; }

@keyframes independentBenefitAppear {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.independent-benefit:hover {
    transform: translateY(-5px);
    box-shadow: var(--independent-shadow-hover), 0 4px 15px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.2);
}

.independent-benefit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--independent-primary-color), var(--independent-secondary-color));
}

.independent-benefit-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-radius: var(--independent-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: var(--independent-transition-smooth);
    position: relative;
}

.independent-benefit:hover .independent-benefit-icon {
    transform: scale(1.1);
    background: linear-gradient(45deg, rgba(255, 140, 0, 0.15), rgba(255, 69, 0, 0.15));
}

.independent-benefit-icon i {
    color: var(--independent-primary-color);
    font-size: 1.5rem;
    transition: var(--independent-transition-smooth);
}

.independent-benefit:hover .independent-benefit-icon i {
    color: var(--independent-secondary-color);
    transform: scale(1.1);
}

.independent-benefit h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--independent-text-dark);
    transition: var(--independent-transition-smooth);
    font-family: var(--independent-font-heading);
}

.independent-benefit p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--independent-text-medium);
    margin: 0;
    font-family: var(--independent-font-body);
}

.independent-separator {
    width: 100%;
    max-width: 200px;
    height: 3px;
    background: linear-gradient(45deg, var(--independent-primary-color), var(--independent-secondary-color));
    margin: 80px auto;
    border-radius: 2px;
    position: relative;
}

.independent-separator::before,
.independent-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--independent-primary-color);
    transform: translateY(-50%);
}

.independent-separator::before {
    left: -5px;
}

.independent-separator::after {
    right: -5px;
}

.independent-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.independent-partner {
    background: var(--independent-white);
    padding: 30px;
    border-radius: var(--independent-border-radius);
    text-align: center;
    box-shadow: var(--independent-shadow-medium), 0 2px 10px rgba(255, 140, 0, 0.05);
    transition: var(--independent-transition-smooth);
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
    /* Animation d'entrée séquentielle */
    opacity: 0;
    transform: translateY(30px);
    animation: independentPartnerAppear 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.independent-partner:nth-child(1) { animation-delay: 1.3s; }
.independent-partner:nth-child(2) { animation-delay: 1.4s; }
.independent-partner:nth-child(3) { animation-delay: 1.5s; }
.independent-partner:nth-child(4) { animation-delay: 1.6s; }
.independent-partner:nth-child(5) { animation-delay: 1.7s; }
.independent-partner:nth-child(6) { animation-delay: 1.8s; }
.independent-partner:nth-child(7) { animation-delay: 1.9s; }
.independent-partner:nth-child(8) { animation-delay: 2.0s; }
.independent-partner:nth-child(9) { animation-delay: 2.1s; }
.independent-partner:nth-child(10) { animation-delay: 2.2s; }
.independent-partner:nth-child(11) { animation-delay: 2.3s; }
.independent-partner:nth-child(12) { animation-delay: 2.4s; }
.independent-partner:nth-child(13) { animation-delay: 2.5s; }
.independent-partner:nth-child(14) { animation-delay: 2.6s; }
.independent-partner:nth-child(15) { animation-delay: 2.7s; }

@keyframes independentPartnerAppear {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.independent-partner:hover {
    transform: translateY(-5px);
    box-shadow: var(--independent-shadow-hover), 0 4px 15px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.2);
}

.independent-partner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--independent-primary-color), var(--independent-secondary-color));
}

.independent-logo-container {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
}

.independent-logo-container::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 140, 0, 0.3), rgba(255, 69, 0, 0.3));
    transform: translateX(-50%);
    border-radius: 2px;
    transition: var(--independent-transition-smooth);
}

.independent-partner:hover .independent-logo-container::after {
    width: 60px;
    background: linear-gradient(90deg, rgba(255, 140, 0, 0.6), rgba(255, 69, 0, 0.6));
}

.independent-logo-container img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: var(--independent-transition-smooth);
}

.independent-partner:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

.independent-partner h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--independent-text-dark);
    transition: var(--independent-transition-smooth);
    font-family: var(--independent-font-heading);
}

.independent-partner p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--independent-text-medium);
    margin-bottom: 20px;
    font-family: var(--independent-font-body);
}

.independent-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--independent-primary-color);
    font-weight: 500;
    transition: var(--independent-transition-smooth);
    border: 1px solid rgba(255, 140, 0, 0.1);
    font-family: var(--independent-font-body);
}

.independent-partner:hover .independent-badge {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    color: var(--independent-secondary-color);
    border-color: rgba(255, 140, 0, 0.2);
}

/* Éléments de design d'arrière-plan */
.independent-bg-accent {
    position: absolute;
    z-index: 1;
}

.independent-accent-top-right {
    top: 50px;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at 100% 0%, rgba(255, 140, 0, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50% 0 0 50%;
}

.independent-accent-bottom-left {
    bottom: 0;
    left: 0;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle at 0% 100%, rgba(255, 140, 0, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 0 50% 0 0;
}

/* Pattern subtil */
.independent-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

/* ========================================
   SECTION CENTRE AUDITIF INDÉPENDANT - RESPONSIVE
   ======================================== */

/* Tablette */
@media (max-width: 992px) {
    .independent-section {
        padding: 60px 20px;
    }

    .independent-title {
        font-size: 2rem;
    }

    .independent-benefits, .independent-partners {
        gap: 25px;
    }

    .independent-benefit, .independent-partner {
        padding: 25px;
    }

    .independent-separator {
        margin: 60px auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .independent-section {
        padding: 40px 20px;
    }

    .independent-intro {
        margin-bottom: 40px;
    }

    .independent-title {
        font-size: 1.8rem;
    }

    .independent-subtitle {
        font-size: 1rem;
    }

    .independent-benefits, .independent-partners {
        gap: 20px;
    }

    .independent-benefit, .independent-partner {
        padding: 25px;
    }

    .independent-benefit-icon {
        width: 50px;
        height: 50px;
    }

    .independent-benefit h3, .independent-partner h3 {
        font-size: 1.2rem;
    }

    .independent-separator {
        margin: 40px auto;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .independent-section {
        padding: 30px 15px;
    }

    .independent-title {
        font-size: 1.6rem;
    }

    .independent-subtitle {
        font-size: 0.95rem;
    }

    .independent-benefit, .independent-partner {
        padding: 20px 15px;
    }

    .independent-benefit-icon {
        width: 45px;
        height: 45px;
    }

    .independent-benefit-icon i {
        font-size: 1.3rem;
    }

    .independent-benefit h3, .independent-partner h3 {
        font-size: 1.1rem;
    }

    .independent-benefit p, .independent-partner p {
        font-size: 0.9rem;
    }
}

/* Mode paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .independent-section {
        padding: 20px 15px;
    }

    .independent-intro {
        margin-bottom: 25px;
    }

    .independent-title {
        font-size: 1.4rem;
    }

    .independent-subtitle {
        font-size: 0.9rem;
    }

    .independent-benefits, .independent-partners {
        gap: 15px;
    }

    .independent-benefit, .independent-partner {
        padding: 15px 12px;
    }

    .independent-separator {
        margin: 25px auto;
    }
}

/* ========================================
   NOUVEAU FORMULAIRE RDV - DESIGN INTÉGRÉ
   ======================================== */

/* Modal overlay pour le nouveau RDV */
.new-rdv-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.rdv-modal.active .new-rdv-modal-overlay {
    opacity: 1;
    visibility: visible;
}

/* Conteneur principal de la modal */
.new-rdv-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 90vh; /* Augmentation de la hauteur maximale */
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translate(-50%, -50%) scale(0.9);
    border: 1px solid rgba(255, 140, 0, 0.1);
    overflow: hidden; /* Changé pour cacher le débordement initial */
    display: flex; /* Ajout pour centrer le contenu */
    flex-direction: column; /* Ajout pour aligner le contenu verticalement */
}

.rdv-modal.active .new-rdv-modal-content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Wrapper interne avec scroll */
.new-rdv-wrapper {
    width: 100%;
    height: 100%;
    padding: 25px; /* Augmentation du padding */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permet le scroll si nécessaire */
    background: transparent;
}

/* Header du formulaire */
.new-rdv-header {
    text-align: center;
    flex-shrink: 0;
    padding-bottom: 10px;
    position: relative;
    margin-bottom: 15px;
}

.new-rdv-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

@keyframes newRdvSubtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.new-rdv-header h1 {
    color: #333;
    font-size: 1.95rem;
    margin: 0 0 8px 0;
    font-weight: 600;
    position: relative;
    display: inline-block;
    animation: newRdvSubtleFloat 4s ease-in-out infinite;
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', 'Montserrat', sans-serif;
}

.new-rdv-header h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    border-radius: 2px;
}

.new-rdv-header p {
    color: #666;
    font-size: 1.035rem;
    margin: 18px 0 0 0;
    font-weight: 400;
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
}

/* Bouton de fermeture */
.new-rdv-close-btn {
    position: absolute;
    top: -5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 28px;
    color: #777;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.new-rdv-close-btn:hover {
    background-color: rgba(255, 140, 0, 0.1);
    color: #FF8C00;
    transform: scale(1.1);
}

/* Formulaire principal */
.new-rdv-form {
    width: 100%;
    background: white;
    border-radius: 12px;
    padding: 20px; /* Réduction du padding */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    transform: translateY(20px);
    animation: newRdvFadeInForm 0.6s 0.2s ease forwards;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Réduction de l'espacement */
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: visible;
    margin-bottom: 15px; /* Réduction de la marge */
}

.new-rdv-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
    border-radius: 12px 12px 0 0;
}

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

.new-rdv-form:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Groupes de champs */
.new-rdv-form-group {
    flex-shrink: 0;
    margin-bottom: 5px;
}

.new-rdv-form label {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: 0.3px;
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
}

.new-rdv-optional-label::after {
    content: ' (facultatif)';
    color: #888;
    font-size: 0.85rem;
    font-weight: 400;
}

.new-rdv-form input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(250, 250, 250, 0.4);
    font-size: 1rem;
    color: #333;
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.new-rdv-form input:focus {
    outline: none;
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
    background: white;
}

.new-rdv-form input::placeholder {
    color: #aaa;
    font-size: 0.95rem;
}

/* Bouton de soumission */
.new-rdv-submit-btn {
    display: block;
    width: 100%;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 25px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

.new-rdv-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.new-rdv-submit-btn:hover::before {
    opacity: 1;
    animation: newRdvGoldShimmer 3s ease infinite;
}

.new-rdv-submit-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -2;
    border-radius: 52px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.new-rdv-submit-btn:hover::after {
    opacity: 0.7;
    animation: newRdvGoldShimmer 5s ease infinite;
}

.new-rdv-submit-btn:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

@keyframes newRdvGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.new-rdv-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.new-rdv-submit-btn.loading {
    color: transparent;
}

.new-rdv-submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: newRdvRotate 1s linear infinite;
    z-index: 10;
}

@keyframes newRdvRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Message de succès */
.new-rdv-success-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    display: none;
    animation: newRdvFadeIn 0.3s ease forwards;
    z-index: 2001;
    max-width: 90%;
    border: 1px solid rgba(255, 140, 0, 0.1);
}

.new-rdv-success-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    border-radius: 12px 12px 0 0;
}

.new-rdv-success-message h2 {
    color: #333;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', 'Montserrat', sans-serif;
    font-weight: 600;
}

.new-rdv-success-message p {
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.5;
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
}

.new-rdv-success-message button {
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
}

.new-rdv-success-message button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.new-rdv-success-message button:hover::before {
    opacity: 1;
    animation: newRdvGoldShimmer 3s ease infinite;
}

.new-rdv-success-message button:hover {
    color: #4a3800;
    transform: translateY(-3px);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

@keyframes newRdvFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   NOUVEAU FORMULAIRE RDV - RESPONSIVE
   ======================================== */

/* Tablette */
@media (max-width: 992px) {
    .new-rdv-modal-content {
        width: 95%;
        max-width: 600px;
        height: 85vh;
    }
    
    .new-rdv-header h1 {
        font-size: 1.7rem;
    }
    
    .new-rdv-header p {
        font-size: 1rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .new-rdv-modal-content {
        width: 98%;
        height: 95vh;
        max-height: none;
        border-radius: 8px;
    }
    
    .new-rdv-wrapper {
        padding: 12px;
    }
    
    .new-rdv-header h1 {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }
    
    .new-rdv-header p {
        font-size: 0.95rem;
        margin-top: 12px;
    }
    
    .new-rdv-form {
        padding: 20px 18px 25px 18px;
        gap: 12px;
        margin-bottom: 15px;
    }
    
    .new-rdv-form input {
        padding: 11px 13px;
        font-size: 16px; /* Empêche le zoom sur iOS */
    }
    
    .new-rdv-submit-btn {
        padding: 13px 20px;
        font-size: 1rem;
        margin-top: 12px;
    }
    
    .new-rdv-close-btn {
        top: -8px;
        right: 2px;
        font-size: 24px;
        width: 36px;
        height: 36px;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .new-rdv-modal-content {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    
    .new-rdv-wrapper {
        padding: 10px;
    }
    
    .new-rdv-header h1 {
        font-size: 1.3rem;
    }
    
    .new-rdv-header p {
        font-size: 0.9rem;
        margin-top: 10px;
    }
    
    .new-rdv-form {
        padding: 18px 15px 22px 15px;
        gap: 10px;
        margin-bottom: 12px;
    }
    
    .new-rdv-form label {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .new-rdv-form input {
        padding: 10px 12px;
    }
    
    .new-rdv-submit-btn {
        padding: 12px 18px;
        font-size: 0.95rem;
        margin-top: 10px;
    }
    
    .new-rdv-success-message {
        width: 95%;
        padding: 25px 20px;
    }
    
    .new-rdv-success-message h2 {
        font-size: 1.3rem;
    }
    
    .new-rdv-success-message p {
        font-size: 0.9rem;
    }
}

/* Mode paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .new-rdv-modal-content {
        height: 98vh;
        max-height: none;
    }
    
    .new-rdv-wrapper {
        padding: 8px;
    }
    
    .new-rdv-header h1 {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }
    
    .new-rdv-header p {
        font-size: 0.85rem;
        margin-top: 8px;
    }
    
    .new-rdv-form {
        padding: 15px 12px 18px 12px;
        gap: 8px;
        margin-bottom: 10px;
    }
    
    .new-rdv-form input {
        padding: 9px 11px;
    }
    
    .new-rdv-submit-btn {
        padding: 11px 16px;
        font-size: 0.9rem;
        margin-top: 8px;
    }
}

/* Gestion du scroll global quand modal RDV ouverte */
body.new-rdv-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.footer {
    width: 100%;
    background: white;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    position: relative;
    padding: 30px 0 20px;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
    padding: 0 15px;
}

.footer-column:first-child {
    flex: 1.5;
}

.footer-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
}

.footer-title {
    font-size: 1.2rem;
    color: #333;
    margin: 0 0 15px;
    position: relative;
    font-weight: 600;
    padding-bottom: 8px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.6));
}

.address-block {
    margin-top: 10px;
}

.address, .phone {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 5px;
}

.phone {
    font-weight: 500;
    display: flex;
    align-items: center;
}

.phone i {
    margin-right: 8px;
    color: #FF8C00;
}

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

.footer-links li {
    margin-bottom: 8px;
}

.footer-link {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.footer-link:hover {
    color: #FF8C00;
    padding-left: 3px;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #555;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(255, 140, 0, 0.2);
}

.footer-bottom {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
    text-align: center;
    width: 100%;
}

.copyright {
    color: #888;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        padding: 0 20px;
    }
    
    .footer-column {
        width: 100%;
        margin-bottom: 25px;
        padding: 0;
    }
    
    .footer-column:last-child {
        margin-bottom: 10px;
    }
}

/* ========================================
   BOUTON CTA RDV EN BAS DE PAGE - NOUVEAU DESIGN
   ======================================== */

.bottom-rdv-section {
    /* Variables CSS pour la section CTA */
    --bottom-rdv-primary-color: #FF8C00;
    --bottom-rdv-secondary-color: #FF4500;
    --bottom-rdv-accent-color: #bf953f;
    --bottom-rdv-dark-gold: #aa771c;
    --bottom-rdv-light-gold: #e6c353;
    --bottom-rdv-text-dark: #333;
    --bottom-rdv-text-medium: #555;
    --bottom-rdv-text-light: #777;
    --bottom-rdv-white: #FFFFFF;
    --bottom-rdv-border-radius: 12px;
    --bottom-rdv-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.08);
    --bottom-rdv-transition-smooth: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --bottom-rdv-font-heading: 'Playfair Display', 'Montserrat', sans-serif;
    --bottom-rdv-font-body: 'Montserrat', 'Nunito Sans', sans-serif;
    
    padding: 80px 0;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 50%, rgba(255,245,235,0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 200% 100%, auto;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
}

.bottom-rdv-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
    box-shadow: 0 0 15px 1px rgba(255,140,0,0.2);
}

.bottom-rdv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.bottom-rdv-wrapper {
    width: 100%;
    max-width: 800px;
    text-align: center;
    position: relative;
}

/* Header avec titre et description */
.bottom-rdv-header {
    margin-bottom: 40px;
    position: relative;
}

@keyframes bottomRdvSubtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.bottom-rdv-header h1 {
    color: var(--bottom-rdv-text-dark);
    font-size: 2.5rem;
    margin: 0 0 20px 0;
    font-weight: 700;
    position: relative;
    display: inline-block;
    animation: bottomRdvSubtleFloat 4s ease-in-out infinite;
    letter-spacing: 0.5px;
    font-family: var(--bottom-rdv-font-heading);
}

.bottom-rdv-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.8), rgba(255,69,0,0.3));
    border-radius: 2px;
}

.bottom-rdv-header p {
    color: var(--bottom-rdv-text-medium);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 400;
    font-family: var(--bottom-rdv-font-body);
    line-height: 1.6;
}

/* Bouton CTA principal */
.bottom-rdv-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 60px;
    padding: 25px 50px;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--bottom-rdv-transition-smooth);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.6px;
    font-family: var(--bottom-rdv-font-body);
    z-index: 1;
    text-decoration: none;
    min-width: 320px;
}

.bottom-rdv-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 60px;
}

.bottom-rdv-cta-button::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -2;
    border-radius: 63px;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.bottom-rdv-cta-button:hover::before {
    opacity: 1;
    animation: bottomRdvGoldShimmer 3s ease infinite;
}

.bottom-rdv-cta-button:hover::after {
    opacity: 0.7;
    animation: bottomRdvGoldShimmer 5s ease infinite;
}

.bottom-rdv-cta-button:hover {
    color: #4a3800;
    transform: translateY(-4px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 8px 20px rgba(183, 155, 59, 0.15),
        0 12px 30px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

@keyframes bottomRdvGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.bottom-rdv-cta-button i {
    transition: transform 0.5s ease;
    font-size: 1.2rem;
}

.bottom-rdv-cta-button:hover i {
    transform: rotate(-15deg) scale(1.1);
    color: #4a3800;
}

.bottom-rdv-cta-button span {
    position: relative;
    z-index: 3;
    transition: all 0.6s ease;
}

.bottom-rdv-cta-button:hover span {
    letter-spacing: 0.7px;
}

/* ========================================
   BOUTON CTA RDV EN BAS DE PAGE - RESPONSIVE
   ======================================== */

/* Tablette */
@media (max-width: 992px) {
    .bottom-rdv-section {
        padding: 60px 0;
    }
    
    .bottom-rdv-container {
        padding: 0 20px;
    }
    
    .bottom-rdv-header h1 {
        font-size: 2.2rem;
    }
    
    .bottom-rdv-header p {
        font-size: 1.1rem;
    }
    
    .bottom-rdv-cta-button {
        padding: 22px 45px;
        font-size: 1.2rem;
        min-width: 280px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .bottom-rdv-section {
        padding: 50px 0;
    }
    
    .bottom-rdv-container {
        padding: 0 15px;
    }
    
    .bottom-rdv-header {
        margin-bottom: 35px;
    }
    
    .bottom-rdv-header h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .bottom-rdv-header p {
        font-size: 1rem;
    }
    
    .bottom-rdv-cta-button {
        padding: 20px 40px;
        font-size: 1.1rem;
        min-width: 250px;
        gap: 12px;
    }
    
    .bottom-rdv-cta-button i {
        font-size: 1.1rem;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .bottom-rdv-section {
        padding: 40px 0;
    }
    
    .bottom-rdv-container {
        padding: 0 10px;
    }
    
    .bottom-rdv-header h1 {
        font-size: 1.6rem;
    }
    
    .bottom-rdv-header p {
        font-size: 0.95rem;
    }
    
    .bottom-rdv-cta-button {
        padding: 18px 35px;
        font-size: 1rem;
        min-width: 220px;
        gap: 10px;
    }
    
    .bottom-rdv-cta-button i {
        font-size: 1rem;
    }
}

/* Mode paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .bottom-rdv-section {
        padding: 30px 0;
    }
    
    .bottom-rdv-header {
        margin-bottom: 25px;
    }
    
    .bottom-rdv-header h1 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    
    .bottom-rdv-header p {
        font-size: 0.9rem;
    }
    
    .bottom-rdv-cta-button {
        padding: 15px 30px;
        font-size: 0.95rem;
        min-width: 200px;
    }
}

/* ========================================
   MOBILE MENU STYLES - MISSING STYLES
   ======================================== */

/* Bouton hamburger */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.hamburger-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hamburger-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

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

/* Menu mobile overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

/* Menu mobile */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: white;
    z-index: 1999;
    padding: 0;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.mobile-menu-logo {
    width: 60px;
    height: auto;
    margin-bottom: 10px;
}

.mobile-menu-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.mobile-nav-menu {
    list-style: none;
    padding: 20px 0;
    margin: 0;
}

.mobile-nav-menu li {
    margin: 0;
    border-bottom: 1px solid #f5f5f5;
}

.mobile-nav-menu a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.mobile-nav-menu a:hover {
    background-color: #f8f9fa;
    color: var(--services-primary-color, #FF8C00);
}

.mobile-nav-menu i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: var(--services-primary-color, #FF8C00);
}

.mobile-contact-section {
    padding: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.mobile-contact-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--services-primary-color, #FF8C00), var(--services-secondary-color, #FF4500));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.mobile-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}

.mobile-contact-location {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Responsive display */
@media (max-width: 768px) {
    .hamburger-btn {
        display: block;
    }
    
    .nav-container {
        display: none;
    }
    
    .contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* ========================================
   SECTION GALERIE MÉDIA - NOUVELLE FONCTIONNALITÉ
   ======================================== */

.media-gallery-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.media-container {
    width: 100%;
    max-width: 1100px;
    height: 130px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    background: transparent;
    transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 140, 0, 0.1);
}

.media-container.expanded {
    height: 240px;
}

.media-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 5;
    box-shadow: 0 0 10px 1px rgba(255,140,0,0.15);
}

.media-frame {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.media-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 1.5s ease-in-out;
    filter: saturate(1) brightness(1.05) contrast(0.95);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.15) 0%, 
        rgba(0, 0, 0, 0.05) 20%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.05) 80%,
        rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 5;
    border-radius: 12px;
}

/* Overlay gradient foncé pour le texte */
.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 6;
    border-radius: 12px;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, rgba(255,140,0,0.4), rgba(255,69,0,0.6));
    width: 0%;
    transition: width linear;
    z-index: 10;
    opacity: 0.8;
}

.control-dots {
    position: absolute;
    bottom: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.dot.active {
    background: linear-gradient(135deg, #FF8C00, #FF4500);
    transform: scale(1.2);
}

@media (max-width: 1100px) {
    .media-container {
        max-width: 95%;
    }
}

/* Styles de l'animation de texte */
.container-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 7;
    padding: 0 40px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.animated-container {
    width: 45%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 20px;
}

#animatedText {
    font-family: 'Playfair Display', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.2;
    color: white;
    opacity: 0;
    white-space: normal;
    overflow: hidden;
    animation: mediaGalleryFadeInUp 2s ease forwards;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}


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

.word {
    display: inline-block;
    opacity: 0;
    transform: scale(0.95);
    animation: mediaGalleryPopIn 0.6s ease forwards;
    margin-right: 0.8rem;
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

@keyframes mediaGalleryPopIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

@media (max-width: 768px) {
    .container-wrapper {
        padding: 0 15px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 12px;
        gap: 10px;
    }
    
    .animated-container {
        width: 100%;
        margin-bottom: 8px;
        order: 1;
    }
    
    #animatedText {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    
    .hours-wrapper {
        width: 100%;
        justify-content: flex-start;
        order: 2;
    }
    
    .hours-container {
        width: 100%;
        max-width: 100%;
        padding: 10px 15px;
        margin: 0;
        font-size: 0.8rem;
    }
    
    .status, .current-hour {
        font-size: 0.8rem;
    }
    
    .toggle-hours {
        font-size: 0.8rem;
        margin-top: 6px;
    }
    
    .day {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .hours-details.visible {
        margin-top: 8px;
        padding: 6px 0;
    }
    
    .media-container.expanded {
        height: 200px;
    }
    
    .media-container.expanded .container-wrapper {
        padding-top: 8px;
    }
}

@media (max-width: 480px) {
    .container-wrapper {
        padding: 0 12px;
        padding-top: 10px;
        gap: 8px;
    }
    
    .animated-container {
        width: 100%;
        margin-bottom: 6px;
    }
    
    #animatedText {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    
    .hours-wrapper {
        width: 100%;
    }
    
    .hours-container {
        width: 100%;
        max-width: 100%;
        padding: 8px 12px;
        font-size: 0.75rem;
        border-radius: 8px;
    }
    
    .status {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }
    
    .current-hour {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }
    
    .toggle-hours {
        font-size: 0.75rem;
        margin-top: 4px;
    }
    
    .day {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }
    
    .hours-details.visible {
        margin-top: 6px;
        padding: 4px 0;
    }
    
    .media-container {
        height: 140px;
    }
    
    .media-container.expanded {
        height: 210px;
    }
}

/* Mode paysage mobile spécifique pour les horaires */
@media (max-height: 600px) and (orientation: landscape) {
    .container-wrapper {
        flex-direction: row;
        align-items: center;
        padding: 0 15px;
        gap: 15px;
    }
    
    .animated-container {
        width: 60%;
        order: 1;
    }
    
    .hours-wrapper {
        width: 40%;
        order: 2;
        justify-content: flex-end;
    }
    
    .hours-container {
        max-width: 200px;
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    
    .status, .current-hour {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }
    
    .toggle-hours {
        font-size: 0.7rem;
        margin-top: 2px;
    }
    
    .day {
        font-size: 0.65rem;
        margin-bottom: 1px;
    }
    
    .hours-details.visible {
        margin-top: 4px;
        padding: 2px 0;
        max-height: 80px;
    }
    
    .media-container {
        height: 110px;
    }
    
    .media-container.expanded {
        height: 160px;
    }
}

/* ========================================
   SECTION NOUS TROUVER - NOUVEAU DESIGN
   ======================================== */

.find-us-section {
    background: transparent;
    padding: 60px 0;
    position: relative;
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
}

.section-wrapper {
    margin: 40px auto;
    max-width: 800px;
    padding: 0 20px;
}

.section-divider {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    text-align: center;
}

.find-us-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,69,0,0.1) 15%, 
        rgba(255,140,0,0.6) 50%, 
        rgba(255,69,0,0.1) 85%, 
        rgba(255,255,255,0) 100%);
    position: relative;
    z-index: 1;
    box-shadow: 0 0 10px 1px rgba(255,140,0,0.15);
}

.find-us-title {
    display: inline-block;
    position: relative;
    font-family: 'Playfair Display', 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0 20px;
    background-color: white;
    z-index: 2;
    transform: translateY(-50%);
    top: -13px;
}

.find-us-title i {
    color: #FF8C00;
    margin-right: 8px;
    opacity: 0.85;
}

.divider-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255,140,0,0) 0%,
        rgba(255,140,0,0.4) 50%,
        rgba(255,140,0,0) 100%);
    z-index: 1;
    animation: glow-travel 8s infinite ease-in-out;
}

@keyframes glow-travel {
    0% {
        left: -10%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 110%;
        opacity: 0;
    }
}

.framed-content {
    border: 1px solid rgba(255, 140, 0, 0.1);
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    overflow: hidden;
    background-color: white;
}

.framed-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    width: 220px;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 140, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.4), rgba(255,69,0,0.1));
    z-index: 10;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.address-card {
    padding: 18px;
    text-align: center;
    height: auto;
}

.address-card h2 {
    color: #333;
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    font-weight: 600;
    position: relative;
    display: inline-block;
    letter-spacing: 0.3px;
}

.address-card h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.4), rgba(255,69,0,0.1));
    transform: translateX(-50%);
}

.address-card p {
    margin: 6px 0;
    color: #555;
    line-height: 1.5;
    font-size: 0.9rem;
}

.address-card i {
    color: #FF8C00;
    margin-right: 6px;
    opacity: 0.8;
}

.directions-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 50px;
    margin-top: 12px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    z-index: 1;
}

.directions-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.directions-btn:hover::before {
    opacity: 1;
    animation: findUsGoldShimmer 3s ease infinite;
}

@keyframes findUsGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.directions-btn:hover {
    color: #4a3800;
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(183, 155, 59, 0.15),
        0 6px 15px rgba(183, 155, 59, 0.1);
}

.directions-btn i {
    margin-right: 8px;
    color: white;
    position: relative;
    z-index: 1;
}

.directions-btn:hover i {
    color: #4a3800;
}

.map-card {
    padding: 0;
    height: 220px;
}

.map-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Responsive pour section Nous trouver */
@media (max-width: 700px) {
    .framed-content {
        padding: 25px 20px;
    }
    
    .map-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .card {
        width: 100%;
        max-width: 280px;
    }
    
    .map-card {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .section-wrapper {
        padding: 0 15px;
    }
    
    .find-us-title {
        font-size: 1.3rem;
    }
    
    .framed-content {
        padding: 20px 15px;
    }
    
    .card {
        max-width: 240px;
    }
    
    .address-card {
        padding: 15px;
    }
    
    .address-card h2 {
        font-size: 1rem;
    }
    
    .directions-btn {
        padding: 7px 14px;
        font-size: 0.8rem;
    }
}

/* ========================================
   BULLE D'INFORMATION PROTECTION DES DONNÉES
   ======================================== */

.data-protection-bubble {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1500;
    font-family: 'Montserrat', 'Nunito Sans', sans-serif;
}

.bubble-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF8C00, #FF4500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 
        0 4px 20px rgba(255, 140, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.9);
    animation: bubblePulse 4s ease-in-out infinite;
}

@keyframes bubblePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 4px 20px rgba(255, 140, 0, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 
            0 6px 25px rgba(255, 140, 0, 0.4),
            0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.bubble-icon:hover {
    transform: scale(1.1);
    box-shadow: 
        0 6px 25px rgba(255, 140, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15);
    animation: none;
}

.bubble-icon i {
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.bubble-icon:hover i {
    transform: scale(1.1);
}

.bubble-tooltip {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1501;
}

.bubble-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}

.bubble-tooltip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    border-radius: 12px 12px 0 0;
}

.data-protection-bubble:hover .bubble-tooltip,
.bubble-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tooltip-header {
    display: flex;
    align-items: center;
    padding: 15px 20px 12px;
    border-bottom: 1px solid rgba(255, 140, 0, 0.1);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 248, 240, 0.95));
    border-radius: 12px 12px 0 0;
}

.tooltip-header i {
    color: #FF8C00;
    margin-right: 10px;
    font-size: 1.1rem;
}

.tooltip-header span {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.tooltip-content {
    padding: 15px 20px 18px;
}

.tooltip-content p {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    text-align: justify;
}

.tooltip-content p:last-child {
    margin-bottom: 0;
}

/* Version mobile de la bulle */
@media (max-width: 768px) {
    .data-protection-bubble {
        bottom: 20px;
        right: 20px;
    }
    
    .bubble-icon {
        width: 50px;
        height: 50px;
        border-width: 2px;
    }
    
    .bubble-icon i {
        font-size: 1.2rem;
    }
    
    .bubble-tooltip {
        width: 280px;
        bottom: 60px;
        right: -10px;
    }
    
    .tooltip-header {
        padding: 12px 15px 10px;
    }
    
    .tooltip-header span {
        font-size: 0.9rem;
    }
    
    .tooltip-content {
        padding: 12px 15px 15px;
    }
    
    .tooltip-content p {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .data-protection-bubble {
        bottom: 15px;
        right: 15px;
    }
    
    .bubble-icon {
        width: 45px;
        height: 45px;
    }
    
    .bubble-icon i {
        font-size: 1.1rem;
    }
    
    .bubble-tooltip {
        width: 250px;
        bottom: 55px;
        right: -15px;
    }
    
    .tooltip-header {
        padding: 10px 12px 8px;
    }
    
    .tooltip-header i {
        font-size: 1rem;
    }
    
    .tooltip-header span {
        font-size: 0.85rem;
    }
    
    .tooltip-content {
        padding: 10px 12px 12px;
    }
    
    .tooltip-content p {
        font-size: 0.75rem;
        margin-bottom: 8px;
        line-height: 1.4;
    }
}

/* Mode paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .data-protection-bubble {
        bottom: 10px;
        right: 10px;
    }
    
    .bubble-icon {
        width: 40px;
        height: 40px;
    }
    
    .bubble-icon i {
        font-size: 1rem;
    }
    
    .bubble-tooltip {
        width: 220px;
        bottom: 50px;
        right: -20px;
    }
    
    .tooltip-header {
        padding: 8px 10px 6px;
    }
    
    .tooltip-content {
        padding: 8px 10px 10px;
    }
    
    .tooltip-content p {
        font-size: 0.7rem;
        margin-bottom: 6px;
    }
}

/* ========================================
   PAGE 100% SANTÉ - STYLES COMPLETS
   ======================================== */

/* Page 100% Santé - Variables CSS */
.sante-page {
    --sante-primary-color: #FF8C00;
    --sante-secondary-color: #FF4500;
    --sante-accent-color: #bf953f;
    --sante-text-dark: #333;
    --sante-text-medium: #555;
    --sante-text-light: #777;
    --sante-white: #FFFFFF;
    --sante-light-orange: rgba(255, 140, 0, 0.05);
    --sante-border-radius: 15px;
    --sante-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.08);
    --sante-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --sante-font-heading: 'Playfair Display', 'Montserrat', sans-serif;
    --sante-font-body: 'Montserrat', 'Nunito Sans', sans-serif;
}

/* Page Nous Trouver - Variables CSS */
.location-page {
    --location-primary-color: #FF8C00;
    --location-secondary-color: #FF4500;
    --location-accent-color: #bf953f;
    --location-text-dark: #333;
    --location-text-medium: #555;
    --location-text-light: #777;
    --location-white: #FFFFFF;
    --location-light-orange: rgba(255, 140, 0, 0.05);
    --location-border-radius: 15px;
    --location-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.08);
    --location-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --location-font-heading: 'Playfair Display', 'Montserrat', sans-serif;
    --location-font-body: 'Montserrat', 'Nunito Sans', sans-serif;
}

/* Wrapper principal pour la page 100% santé */
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Header de la page 100% santé */
.sante-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 60px 20px;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 50%, rgba(255,245,235,0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    border-radius: 15px;
    margin: 0 -20px 60px -20px;
    position: relative;
    overflow: hidden;
}

.sante-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.sante-header h1 {
    color: var(--sante-text-dark, #333);
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    font-family: var(--sante-font-heading, 'Playfair Display', serif);
    position: relative;
    display: inline-block;
}

.sante-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.8), rgba(255,69,0,0.3));
    border-radius: 2px;
}

.sante-header p {
    color: var(--sante-text-medium, #555);
    font-size: 1.2rem;
    margin: 0;
    font-family: var(--sante-font-body, 'Montserrat', sans-serif);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Grille des cartes 100% santé */
.sante-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Cartes individuelles */
.sante-card {
    background: var(--sante-white, white);
    border-radius: var(--sante-border-radius, 15px);
    padding: 40px 30px;
    box-shadow: var(--sante-shadow-medium, 0 4px 15px rgba(0, 0, 0, 0.08));
    transition: var(--sante-transition-smooth, all 0.3s ease);
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.sante-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.sante-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
}

/* Icônes des cartes */
.sante-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, var(--sante-primary-color, #FF8C00), var(--sante-secondary-color, #FF4500));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: var(--sante-transition-smooth, all 0.3s ease);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.sante-icon i {
    color: white;
    font-size: 2rem;
    transition: var(--sante-transition-smooth, all 0.3s ease);
}

.sante-card:hover .sante-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

.sante-card:hover .sante-icon i {
    transform: scale(1.1);
}

/* Titres des cartes */
.sante-card h2 {
    color: var(--sante-text-dark, #333);
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: var(--sante-font-heading, 'Playfair Display', serif);
    line-height: 1.3;
}

/* Paragraphes des cartes */
.sante-card p {
    color: var(--sante-text-medium, #555);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    font-family: var(--sante-font-body, 'Montserrat', sans-serif);
}

/* Liste des caractéristiques */
.features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 0.9rem;
    color: var(--sante-text-dark, #333);
    font-weight: 500;
    transition: var(--sante-transition-smooth, all 0.3s ease);
    font-family: var(--sante-font-body, 'Montserrat', sans-serif);
}

.feature-tag:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 69, 0, 0.15));
    border-color: rgba(255, 140, 0, 0.3);
    transform: translateY(-2px);
}

.feature-tag i {
    color: var(--sante-primary-color, #FF8C00);
    margin-right: 8px;
    font-size: 0.8rem;
}

/* Conteneur de note */
.note-container {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-left: 4px solid var(--sante-primary-color, #FF8C00);
    border-radius: 10px;
    padding: 25px;
    margin: 40px 0;
    position: relative;
}

.note-text {
    color: var(--sante-text-medium, #555);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    font-family: var(--sante-font-body, 'Montserrat', sans-serif);
    font-style: italic;
}

/* Section CTA */
.cta-section {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: var(--sante-border-radius, 15px);
    padding: 50px 30px;
    margin-top: 60px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.cta-section h2 {
    color: var(--sante-text-dark, #333);
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: var(--sante-font-heading, 'Playfair Display', serif);
}

.cta-section p {
    color: var(--sante-text-medium, #555);
    font-size: 1.1rem;
    margin-bottom: 30px;
    font-family: var(--sante-font-body, 'Montserrat', sans-serif);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton CTA */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 18px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    font-family: var(--sante-font-body, 'Montserrat', sans-serif);
    z-index: 1;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.cta-button:hover::before {
    opacity: 1;
    animation: ctaGoldShimmer 3s ease infinite;
}

.cta-button:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

@keyframes ctaGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.cta-button i {
    transition: transform 0.5s ease;
    font-size: 1.2rem;
}

.cta-button:hover i {
    transform: rotate(-15deg) scale(1.1);
    color: #4a3800;
}

/* Responsive pour page 100% santé */
@media (max-width: 992px) {
    .sante-header {
        padding: 50px 15px;
        margin-bottom: 50px;
    }
    
    .sante-header h1 {
        font-size: 2.2rem;
    }
    
    .sante-header p {
        font-size: 1.1rem;
    }
    
    .sante-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        margin-bottom: 50px;
    }
    
    .sante-card {
        padding: 35px 25px;
    }
    
    .cta-section {
        padding: 40px 25px;
        margin-top: 50px;
    }
}

@media (max-width: 768px) {
    .wrapper {
        padding: 30px 15px;
    }
    
    .sante-header {
        padding: 40px 20px;
        margin: 0 -15px 40px -15px;
    }
    
    .sante-header h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .sante-header p {
        font-size: 1rem;
    }
    
    .sante-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .sante-card {
        padding: 30px 20px;
    }
    
    .sante-card h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
    .sante-card p {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    .sante-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .sante-icon i {
        font-size: 1.8rem;
    }
    
    .feature-tag {
        font-size: 0.85rem;
        padding: 6px 12px;
    }
    
    .note-container {
        padding: 20px;
        margin: 30px 0;
    }
    
    .note-text {
        font-size: 0.9rem;
    }
    
    .cta-section {
        padding: 35px 20px;
        margin-top: 40px;
    }
    
    .cta-section h2 {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    .cta-section p {
        font-size: 1rem;
        margin-bottom: 25px;
    }
    
    .cta-button {
        padding: 15px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .sante-header {
        padding: 30px 15px;
    }
    
    .sante-header h1 {
        font-size: 1.6rem;
    }
    
    .sante-header p {
        font-size: 0.95rem;
    }
    
    .sante-card {
        padding: 25px 15px;
    }
    
    .sante-card h2 {
        font-size: 1.2rem;
    }
    
    .sante-card p {
        font-size: 0.9rem;
    }
    
    .sante-icon {
        width: 60px;
        height: 60px;
    }
    
    .sante-icon i {
        font-size: 1.5rem;
    }
    
    .features-list {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-tag {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
    
    .cta-section {
        padding: 30px 15px;
    }
    
    .cta-section h2 {
        font-size: 1.4rem;
    }
    
    .cta-section p {
        font-size: 0.95rem;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
}

/* ========================================
   PAGE DÉMARCHE - STYLES COMPLETS
   ======================================== */

/* Wrapper principal de la page démarche */
.demarche-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    overflow: visible;
}

/* Header de la page démarche */
.demarche-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    padding: 0 20px;
}

.demarche-header h1 {
    color: #2C3E50;
    font-size: 2.2rem;
    margin-bottom: 25px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.demarche-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    border-radius: 2px;
}

.demarche-description {
    color: #64748B;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Timeline principale */
.demarche-timeline {
    position: relative;
    padding: 30px 0;
}

.demarche-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50px + 15px);
    height: 100%;
    width: 3px;
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    border-radius: 5px;
}

/* Cartes d'étapes */
.step-card {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}

.step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
    margin-right: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
    cursor: pointer;
}

.step-content {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.07),
                0 2px 10px rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.1);
    flex-grow: 1;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.step-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.15),
              0 4px 15px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.2);
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.step-content:hover::before {
    opacity: 1;
}

.step-title {
    color: #2C3E50;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.step-title i {
    margin-right: 15px;
    font-size: 1.8rem;
    color: #FF8C00;
    transition: all 0.3s ease;
}

.step-content:hover .step-title i {
    transform: scale(1.1);
    color: #FF4500;
}

.step-description {
    margin: 0;
    line-height: 1.6;
    color: #64748B;
}

/* Bouton "En savoir plus" */
.read-more {
    display: inline-block;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 20px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.read-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    color: #4a3800;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Effet doré au survol */
.read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.read-more:hover::before {
    opacity: 1;
    animation: demarcheGoldShimmer 3s ease infinite;
}

.read-more:hover {
    animation: demarcheButtonHoverSequence 1.2s forwards;
}

@keyframes demarcheGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

@keyframes demarcheButtonHoverSequence {
    0% {
        color: white;
        text-shadow: none;
    }
    60% {
        color: #a18430;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    100% {
        color: #4a3800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    }
}

/* Contenu détaillé des sections */
.detailed-content {
    display: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 40px;
    margin: 20px 0 60px;
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.15),
              0 4px 15px rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.2);
    position: relative;
    transition: all 0.5s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.detailed-content.active {
    display: block;
    max-height: 3000px;
    opacity: 1;
    overflow: visible;
}

.detailed-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    z-index: 1;
}

.detailed-header {
    text-align: center;
    margin-bottom: 40px;
}

.detailed-header h2 {
    color: #2C3E50;
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.detailed-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    border-radius: 2px;
}

.detailed-header p {
    color: #64748B;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    color: #2C3E50;
    font-size: 1.8rem;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.section-title i {
    margin-right: 15px;
    font-size: 2rem;
    color: #FF8C00;
    transition: all 0.3s ease;
}

.close-section {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.close-section:hover {
    color: #FF4500;
    transform: rotate(90deg);
}

/* Styles pour le contenu détaillé des différentes sections */
.feature-box, .highlight-box, .quote-box {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
    border-left: 4px solid #FF8C00;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
}

.feature-box h3, .highlight-box h3 {
    color: #2C3E50;
    font-family: 'Playfair Display', serif;
    margin-top: 0;
}

.expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.expertise-card, .experience-card, .service-card, .test-card, .benefit-card {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 140, 0, 0.05);
}

.expertise-card:hover, .experience-card:hover, .service-card:hover, .test-card:hover, .benefit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.1);
}

.expertise-card i, .experience-card i, .service-card i, .test-card i, .benefit-card i {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #FF8C00;
    transition: all 0.3s ease;
}

.expertise-card:hover i, .experience-card:hover i, .service-card:hover i, .test-card:hover i, .benefit-card:hover i {
    transform: scale(1.1);
    color: #FF4500;
}

.expertise-card h3, .experience-card h3, .service-card h3, .test-card h3, .benefit-card h3 {
    color: #2C3E50;
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.timeline-marker, .timeline-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
}

.timeline-content {
    flex-grow: 1;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.05);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.1);
}

.timeline-content h3 {
    color: #2C3E50;
    font-family: 'Playfair Display', serif;
    margin-top: 0;
}

.demarche-cta-section {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
    border-radius: 15px;
    margin-top: 30px;
    border: 1px solid rgba(255, 140, 0, 0.08);
}

.demarche-cta-section h2 {
    color: #2C3E50;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.demarche-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 20px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

.demarche-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.demarche-cta-button:hover::before {
    opacity: 1;
    animation: demarcheGoldShimmer 3s ease infinite;
}

.demarche-cta-button:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.demarche-cta-button i {
    transition: all 0.8s ease;
    position: relative;
}

.demarche-cta-button:hover i {
    transform: rotate(-15deg) scale(1.2);
    color: #4a3800;
}

/* Styles pour les listes */
.content-section ul {
    padding-left: 20px;
    margin: 20px 0;
}

.content-section ul li {
    margin-bottom: 12px;
    color: #64748B;
    position: relative;
    padding-left: 28px;
}

.content-section ul li::before {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #FF8C00;
}

/* Styles pour la navigation des étapes */
.step-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #CCCCCC;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    transform: scale(1.2);
}

/* Animation pour les transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade {
    animation: fadeIn 0.5s ease forwards;
}

/* Conteneur spécifique pour la timeline dans le contenu détaillé */
.demarche-timeline-content {
    position: relative;
    padding: 20px 0;
}

.demarche-timeline-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, #FF8C00, #FF4500);
    border-radius: 2px;
}

/* Responsive pour page démarche */
@media (max-width: 992px) {
    .demarche-wrapper {
        padding: 30px 15px;
    }
    
    .demarche-header {
        margin-bottom: 50px;
    }
    
    .demarche-header h1 {
        font-size: 2rem;
    }
    
    .demarche-description {
        font-size: 1rem;
    }
    
    .demarche-timeline::before {
        left: calc(45px + 15px);
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        margin-right: 25px;
    }
    
    .step-content {
        padding: 25px;
    }
    
    .step-title {
        font-size: 1.4rem;
    }
    
    .detailed-content {
        padding: 30px;
        margin: 15px 0 50px;
    }
    
    .detailed-header h2 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .demarche-wrapper {
        padding: 25px 10px;
    }
    
    .demarche-header {
        margin-bottom: 40px;
        padding: 0 10px;
    }
    
    .demarche-header h1 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .demarche-description {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }
    
    .demarche-timeline {
        padding: 20px 0;
    }
    
    .demarche-timeline::before {
        display: none;
    }
    
    .step-card {
        flex-direction: column;
        margin-bottom: 30px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        margin: 0 auto 15px;
        align-self: center;
    }
    
    .step-content {
        padding: 20px;
        text-align: center;
    }
    
    .step-title {
        font-size: 1.3rem;
        justify-content: center;
        margin-bottom: 12px;
    }
    
    .step-title i {
        font-size: 1.5rem;
        margin-right: 10px;
    }
    
    .step-description {
        font-size: 0.95rem;
        text-align: left;
    }
    
    .read-more {
        padding: 8px 20px;
        font-size: 0.9rem;
        margin-top: 15px;
    }
    
    .detailed-content {
        padding: 25px 15px;
        margin: 10px 0 40px;
    }
    
    .detailed-header {
        margin-bottom: 30px;
    }
    
    .detailed-header h2 {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }
    
    .detailed-header p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .section-title i {
        margin-right: 0;
        margin-bottom: 10px;
        font-size: 1.8rem;
    }
    
    .close-section {
        top: 15px;
        right: 15px;
        font-size: 1.3rem;
    }
    
    .expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 20px 0;
    }
    
    .expertise-card, .experience-card, .service-card, .test-card, .benefit-card {
        padding: 15px;
        text-align: center;
    }
    
    .expertise-card i, .experience-card i, .service-card i, .test-card i, .benefit-card i {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .expertise-card h3, .experience-card h3, .service-card h3, .test-card h3, .benefit-card h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .timeline-item {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .timeline-marker, .timeline-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        align-self: center;
    }
    
    .timeline-content {
        padding: 15px;
    }
    
    .timeline-content h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .demarche-cta-section {
        padding: 20px 15px;
        margin-top: 25px;
    }
    
    .demarche-cta-section h2 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .demarche-cta-button {
        padding: 10px 24px;
        font-size: 0.95rem;
        margin-top: 15px;
    }
    
    .feature-box, .highlight-box, .quote-box {
        padding: 15px;
        margin: 15px 0;
    }
    
    .content-section ul {
        padding-left: 15px;
        margin: 15px 0;
    }
    
    .content-section ul li {
        margin-bottom: 10px;
        padding-left: 25px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .demarche-wrapper {
        padding: 20px 8px;
    }
    
    .demarche-header {
        margin-bottom: 30px;
        padding: 0 8px;
    }
    
    .demarche-header h1 {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    .demarche-description {
        font-size: 0.9rem;
        margin-bottom: 25px;
    }
    
    .step-card {
        margin-bottom: 25px;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .step-content {
        padding: 15px;
    }
    
    .step-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .step-title i {
        font-size: 1.3rem;
        margin-right: 8px;
    }
    
    .step-description {
        font-size: 0.9rem;
    }
    
    .read-more {
        padding: 7px 18px;
        font-size: 0.85rem;
        margin-top: 12px;
    }
    
    .detailed-content {
        padding: 20px 12px;
        margin: 8

/* ========================================
   PAGE NOUS TROUVER - STYLES SPÉCIFIQUES
   ======================================== */

/* Wrapper principal pour la page Nous trouver */
.location-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Header de la page */
.location-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 50px 20px;
    background: 
        linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 50%, rgba(255,245,235,0.98) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8C00' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    border-radius: 15px;
    margin: 0 -20px 50px -20px;
    position: relative;
    overflow: hidden;
}

.location-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.location-header h1 {
    color: #333;
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    font-family: 'Playfair Display', 'Montserrat', serif;
    position: relative;
    display: inline-block;
}

.location-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.8), rgba(255,69,0,0.3));
    border-radius: 2px;
}

.location-header p {
    color: #555;
    font-size: 1.2rem;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Section photo du centre */
.center-photo-section {
    margin-bottom: 60px;
}

.photo-container {
    position: relative;
    border-radius: var(--location-border-radius, 15px);
    overflow: hidden;
    box-shadow: var(--location-shadow-medium, 0 4px 15px rgba(0, 0, 0, 0.08));
    transition: var(--location-transition-smooth, all 0.3s ease);
    border: 1px solid rgba(255, 140, 0, 0.1);
}

.photo-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
}

.center-photo {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.3) 50%, 
        rgba(0, 0, 0, 0.7) 100%);
    opacity: 0;
    transition: var(--location-transition-smooth, all 0.3s ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-container:hover .photo-overlay {
    opacity: 1;
}

.photo-caption {
    text-align: center;
    color: white;
    transform: translateY(20px);
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.photo-container:hover .photo-caption {
    transform: translateY(0);
}

.photo-caption h3 {
    font-family: var(--location-font-heading, 'Playfair Display', serif);
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.photo-caption p {
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    font-size: 1.1rem;
    margin: 0;
}

/* Contenu principal */
.location-content {
    margin-bottom: 60px;
}

/* Grille des cartes principales */
.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Cartes individuelles */
.location-card {
    background: var(--location-white, white);
    border-radius: var(--location-border-radius, 15px);
    padding: 35px 30px;
    box-shadow: var(--location-shadow-medium, 0 4px 15px rgba(0, 0, 0, 0.08));
    transition: var(--location-transition-smooth, all 0.3s ease);
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
}

/* Icônes des cartes */
.location-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, var(--location-primary-color, #FF8C00), var(--location-secondary-color, #FF4500));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: var(--location-transition-smooth, all 0.3s ease);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.location-icon i {
    color: white;
    font-size: 2rem;
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.location-card:hover .location-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

.location-card:hover .location-icon i {
    transform: scale(1.1);
}

/* Titres des cartes */
.location-card h2 {
    color: var(--location-text-dark, #333);
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: var(--location-font-heading, 'Playfair Display', serif);
    line-height: 1.3;
    text-align: center;
}

/* Informations pratiques */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.info-item:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.2);
    transform: translateY(-2px);
}

.info-item i {
    color: var(--location-primary-color, #FF8C00);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.info-item div {
    flex: 1;
}

.info-item strong {
    color: var(--location-text-dark, #333);
    font-weight: 600;
    font-family: var(--location-font-heading, 'Playfair Display', serif);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.info-item p {
    color: var(--location-text-medium, #555);
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    line-height: 1.5;
    margin: 0;
}

/* Horaires d'ouverture */
.hours-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.hours-item:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.2);
}

.hours-item.closed {
    background: linear-gradient(135deg, rgba(150, 150, 150, 0.05), rgba(120, 120, 120, 0.05));
    border-color: rgba(150, 150, 150, 0.1);
}

.hours-item.closed .day,
.hours-item.closed .time {
    color: var(--location-text-light, #777);
}

/* Correction spécifique pour éviter le fond rouge */
.hours-item.closed {
    background: linear-gradient(135deg, rgba(150, 150, 150, 0.05), rgba(120, 120, 120, 0.05)) !important;
    border-color: rgba(150, 150, 150, 0.1) !important;
}

.hours-item.closed .day,
.hours-item.closed .time {
    color: #777 !important;
}

.hours-item .day {
    font-weight: 600;
    color: var(--location-text-dark, #333);
    font-family: var(--location-font-heading, 'Playfair Display', serif);
}

.hours-item .time {
    color: var(--location-text-medium, #555);
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    font-weight: 500;
}

.hours-note {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-left: 4px solid var(--location-primary-color, #FF8C00);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hours-note i {
    color: var(--location-primary-color, #FF8C00);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hours-note p {
    color: var(--location-text-medium, #555);
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Accès et transport */
.access-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.access-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.access-item:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.2);
    transform: translateY(-2px);
}

.access-item i {
    color: var(--location-primary-color, #FF8C00);
    font-size: 1.5rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.access-item div {
    flex: 1;
}

.access-item strong {
    color: var(--location-text-dark, #333);
    font-weight: 600;
    font-family: var(--location-font-heading, 'Playfair Display', serif);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.access-item p {
    color: var(--location-text-medium, #555);
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    line-height: 1.5;
    margin: 0;
}

/* Section équipe */
.team-section {
    margin-bottom: 60px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    color: var(--location-text-dark, #333);
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: var(--location-font-heading, 'Playfair Display', serif);
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.8), rgba(255,69,0,0.3));
    border-radius: 2px;
}

.section-header p {
    color: var(--location-text-medium, #555);
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.team-card {
    background: var(--location-white, white);
    border-radius: var(--location-border-radius, 15px);
    padding: 35px 25px;
    box-shadow: var(--location-shadow-medium, 0 4px 15px rgba(0, 0, 0, 0.08));
    transition: var(--location-transition-smooth, all 0.3s ease);
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
}

.team-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, var(--location-primary-color, #FF8C00), var(--location-secondary-color, #FF4500));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: var(--location-transition-smooth, all 0.3s ease);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.team-icon i {
    color: white;
    font-size: 2rem;
    transition: var(--location-transition-smooth, all 0.3s ease);
}

.team-card:hover .team-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

.team-card:hover .team-icon i {
    transform: scale(1.1);
}

.team-card h3 {
    color: var(--location-text-dark, #333);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: var(--location-font-heading, 'Playfair Display', serif);
    line-height: 1.3;
}

.team-card p {
    color: var(--location-text-medium, #555);
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    line-height: 1.6;
    margin: 0;
}

/* Section carte */
.map-section {
    margin-bottom: 60px;
}

.map-container {
    background: var(--location-white, white);
    border-radius: var(--location-border-radius, 15px);
    box-shadow: var(--location-shadow-medium, 0 4px 15px rgba(0, 0, 0, 0.08));
    border: 1px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,69,0,0.1), rgba(255,140,0,0.6), rgba(255,69,0,0.1));
    z-index: 2;
}

.map-wrapper {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.location-map {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 15px 15px;
}

.directions-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    font-family: var(--location-font-body, 'Montserrat', sans-serif);
    z-index: 1;
    border: none;
}

.directions-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.directions-btn:hover::before {
    opacity: 1;
    animation: directionsGoldShimmer 3s ease infinite;
}

@keyframes directionsGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.directions-btn:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 6px 15px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.directions-btn i {
    transition: transform 0.5s ease;
}

.directions-btn:hover i {
    transform: rotate(-15deg) scale(1.1);
    color: #4a3800;
}

/* Responsive pour page Nous trouver */
@media (max-width: 992px) {
    .location-wrapper {
        padding: 30px 15px;
    }
    
    .location-header {
        padding: 40px 15px;
        margin-bottom: 40px;
    }
    
    .location-header h1 {
        font-size: 2.2rem;
    }
    
    .location-header p {
        font-size: 1.1rem;
    }
    
    .center-photo {
        height: 350px;
    }
    
    .location-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
        margin-bottom: 50px;
    }
    
    .location-card {
        padding: 30px 25px;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    
    .team-card {
        padding: 30px 20px;
    }
    
    .map-wrapper {
        height: 350px;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .location-wrapper {
        padding: 25px 10px;
    }
    
    .location-header {
        padding: 35px 15px;
        margin: 0 -10px 35px -10px;
    }
    
    .location-header h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .location-header p {
        font-size: 1rem;
    }
    
    .center-photo {
        height: 300px;
    }
    
    .photo-caption h3 {
        font-size: 1.5rem;
    }
    
    .photo-caption p {
        font-size: 1rem;
    }
    
    .location-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .location-card {
        padding: 25px 20px;
    }
    
    .location-card h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
    .location-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .location-icon i {
        font-size: 1.8rem;
    }
    
    .info-item,
    .access-item {
        padding: 12px;
        gap: 12px;
    }
    
    .info-item strong,
    .access-item strong {
        font-size: 1rem;
    }
    
    .info-item p,
    .access-item p {
        font-size: 0.9rem;
    }
    
    .hours-item {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .hours-item .day {
        font-size: 0.95rem;
    }
    
    .hours-item .time {
        font-size: 0.9rem;
    }
    
    .hours-note {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .hours-note p {
        font-size: 0.9rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .team-card {
        padding: 25px 18px;
    }
    
    .team-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    
    .team-icon i {
        font-size: 1.5rem;
    }
    
    .team-card h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;

/* Wrapper principal de la page démarche */
.demarche-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    overflow: visible;
}

/* Header de la page démarche */
.demarche-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    padding: 0 20px;
}

.demarche-header h1 {
    color: #2C3E50;
    font-size: 2.2rem;
    margin-bottom: 25px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.demarche-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    border-radius: 2px;
}

.demarche-description {
    color: #64748B;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Timeline principale */
.demarche-timeline {
    position: relative;
    padding: 30px 0;
}

.demarche-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50px + 15px);
    height: 100%;
    width: 3px;
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    border-radius: 5px;
}

/* Cartes d'étapes */
.step-card {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}

.step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
    margin-right: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
    cursor: pointer;
}

.step-content {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.07),
                0 2px 10px rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.1);
    flex-grow: 1;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.step-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.15),
              0 4px 15px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.2);
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.step-content:hover::before {
    opacity: 1;
}

.step-title {
    color: #2C3E50;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.step-title i {
    margin-right: 15px;
    font-size: 1.8rem;
    color: #FF8C00;
    transition: all 0.3s ease;
}

.step-content:hover .step-title i {
    transform: scale(1.1);
    color: #FF4500;
}

.step-description {
    margin: 0;
    line-height: 1.6;
    color: #64748B;
}

/* Bouton "En savoir plus" */
.read-more {
    display: inline-block;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 20px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.read-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    color: #4a3800;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Effet doré au survol */
.read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.read-more:hover::before {
    opacity: 1;
    animation: demarcheGoldShimmer 3s ease infinite;
}

.read-more:hover {
    animation: demarcheButtonHoverSequence 1.2s forwards;
}

@keyframes demarcheGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

@keyframes demarcheButtonHoverSequence {
    0% {
        color: white;
        text-shadow: none;
    }
    60% {
        color: #a18430;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    100% {
        color: #4a3800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    }
}

/* Contenu détaillé des sections */
.detailed-content {
    display: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 40px;
    margin: 20px 0 60px;
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.15),
              0 4px 15px rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.2);
    position: relative;
    transition: all 0.5s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.detailed-content.active {
    display: block;
    max-height: 3000px;
    opacity: 1;
    overflow: visible;
}

.detailed-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    z-index: 1;
}

.detailed-header {
    text-align: center;
    margin-bottom: 40px;
}

.detailed-header h2 {
    color: #2C3E50;
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.detailed-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    border-radius: 2px;
}

.detailed-header p {
    color: #64748B;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    color: #2C3E50;
    font-size: 1.8rem;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.section-title i {
    margin-right: 15px;
    font-size: 2rem;
    color: #FF8C00;
    transition: all 0.3s ease;
}

.close-section {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748B;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.close-section:hover {
    color: #FF4500;
    transform: rotate(90deg);
}

/* Styles pour le contenu détaillé des différentes sections */
.feature-box, .highlight-box, .quote-box {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
    border-left: 4px solid #FF8C00;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
}

.feature-box h3, .highlight-box h3 {
    color: #2C3E50;
    font-family: 'Playfair Display', serif;
    margin-top: 0;
}

.expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.expertise-card, .experience-card, .service-card, .test-card, .benefit-card {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 140, 0, 0.05);
}

.expertise-card:hover, .experience-card:hover, .service-card:hover, .test-card:hover, .benefit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.1);
}

.expertise-card i, .experience-card i, .service-card i, .test-card i, .benefit-card i {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #FF8C00;
    transition: all 0.3s ease;
}

.expertise-card:hover i, .experience-card:hover i, .service-card:hover i, .test-card:hover i, .benefit-card:hover i {
    transform: scale(1.1);
    color: #FF4500;
}

.expertise-card h3, .experience-card h3, .service-card h3, .test-card h3, .benefit-card h3 {
    color: #2C3E50;
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', serif;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.timeline-marker, .timeline-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
}

.timeline-content {
    flex-grow: 1;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.05);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.1);
}

.timeline-content h3 {
    color: #2C3E50;
    font-family: 'Playfair Display', serif;
    margin-top: 0;
}

.demarche-cta-section {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
    border-radius: 15px;
    margin-top: 30px;
    border: 1px solid rgba(255, 140, 0, 0.08);
}

.demarche-cta-section h2 {
    color: #2C3E50;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.demarche-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 20px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

.demarche-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.demarche-cta-button:hover::before {
    opacity: 1;
    animation: demarcheGoldShimmer 3s ease infinite;
}

.demarche-cta-button:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2),
        0 0 0 1px rgba(183, 155, 59, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.demarche-cta-button i {
    transition: all 0.8s ease;
    position: relative;
}

.demarche-cta-button:hover i {
    transform: rotate(-15deg) scale(1.2);
    color: #4a3800;
}

/* Styles pour les listes */
.content-section ul {
    padding-left: 20px;
    margin: 20px 0;
}

.content-section ul li {
    margin-bottom: 12px;
    color: #64748B;
    position: relative;
    padding-left: 28px;
}

.content-section ul li::before {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #FF8C00;
}

/* Styles pour la navigation des étapes */
.step-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #CCCCCC;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: linear-gradient(45deg, #FF8C00, #FF4500);
    transform: scale(1.2);
}

/* Animation pour les transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade {
    animation: fadeIn 0.5s ease forwards;
}

/* Responsive pour page démarche */
@media (max-width: 992px) {
    .demarche-wrapper {
        padding: 30px 15px;
    }
    
    .demarche-header {
        margin-bottom: 50px;
    }
    
    .demarche-header h1 {
        font-size: 2rem;
    }
    
    .demarche-description {
        font-size: 1rem;
    }
    
    .demarche-timeline::before {
        left: calc(45px + 15px);
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        margin-right: 25px;
    }
    
    .step-content {
        padding: 25px;
    }
    
    .step-title {
        font-size: 1.4rem;
    }
    
    .detailed-content {
        padding: 30px;
        margin: 15px 0 50px;
    }
    
    .detailed-header h2 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .demarche-wrapper {
        padding: 25px 10px;
    }
    
    .demarche-header {
        margin-bottom: 40px;
        padding: 0 10px;
    }
    
    .demarche-header h1 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .demarche-description {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }
    
    .demarche-timeline {
        padding: 20px 0;
    }
    
    .demarche-timeline::before {
        display: none;
    }
    
    .step-card {
        flex-direction: column;
        margin-bottom: 30px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        margin: 0 auto 15px;
        align-self: center;
    }
    
    .step-content {
        padding: 20px;
        text-align: center;
    }
    
    .step-title {
        font-size: 1.3rem;
        justify-content: center;
        margin-bottom: 12px;
    }
    
    .step-title i {
        font-size: 1.5rem;
        margin-right: 10px;
    }
    
    .step-description {
        font-size: 0.95rem;
        text-align: left;
    }
    
    .read-more {
        padding: 8px 20px;
        font-size: 0.9rem;
        margin-top: 15px;
    }
    
    .detailed-content {
        padding: 25px 15px;
        margin: 10px 0 40px;
    }
    
    .detailed-header {
        margin-bottom: 30px;
    }
    
    .detailed-header h2 {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }
    
    .detailed-header p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .section-title i {
        margin-right: 0;
        margin-bottom: 10px;
        font-size: 1.8rem;
    }
    
    .close-section {
        top: 15px;
        right: 15px;
        font-size: 1.3rem;
    }
    
    .expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 20px 0;
    }
    
    .expertise-card, .experience-card, .service-card, .test-card, .benefit-card {
        padding: 15px;
        text-align: center;
    }
    
    .expertise-card i, .experience-card i, .service-card i, .test-card i, .benefit-card i {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .expertise-card h3, .experience-card h3, .service-card h3, .test-card h3, .benefit-card h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .timeline-item {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .timeline-marker, .timeline-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        align-self: center;
    }
    
    .timeline-content {
        padding: 15px;
    }
    
    .timeline-content h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .demarche-cta-section {
        padding: 20px 15px;
        margin-top: 25px;
    }
    
    .demarche-cta-section h2 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .demarche-cta-button {
        padding: 10px 24px;
        font-size: 0.95rem;
        margin-top: 15px;
    }
    
    .feature-box, .highlight-box, .quote-box {
        padding: 15px;
        margin: 15px 0;
    }
    
    .content-section ul {
        padding-left: 15px;
        margin: 15px 0;
    }
    
    .content-section ul li {
        margin-bottom: 10px;
        padding-left: 25px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .demarche-wrapper {
        padding: 20px 8px;
    }
    
    .demarche-header {
        margin-bottom: 30px;
        padding: 0 8px;
    }
    
    .demarche-header h1 {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    .demarche-description {
        font-size: 0.9rem;
        margin-bottom: 25px;
    }
    
    .step-card {
        margin-bottom: 25px;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .step-content {
        padding: 15px;
    }
    
    .step-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .step-title i {
        font-size: 1.3rem;
        margin-right: 8px;
    }
    
    .step-description {
        font-size: 0.9rem;
    }
    
    .read-more {
        padding: 7px 18px;
        font-size: 0.85rem;
        margin-top: 12px;
    }
    
    .detailed-content {
        padding: 20px 12px;
        margin: 8px 0 30px;
    }
    
    .detailed-header {
        margin-bottom: 25px;
    }
    
    .detailed-header h2 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    
    .detailed-header p {
        font-size: 0.95rem;
    }
    
    .section-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .section-title i {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    .close-section {
        top: 12px;
        right: 12px;
        font-size: 1.2rem;
    }
    
    .expertise-card, .experience-card, .service-card, .test-card, .benefit-card {
        padding: 12px;
    }
    
    .expertise-card i, .experience-card i, .service-card i, .test-card i, .benefit-card i {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    
    .expertise-card h3, .experience-card h3, .service-card h3, .test-card h3, .benefit-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .expertise-card p, .experience-card p, .service-card p, .test-card p, .benefit-card p {
        font-size: 0.85rem;
    }
    
    .timeline-item {
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .timeline-marker, .timeline-number {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .timeline-content {
        padding: 12px;
    }
    
    .timeline-content h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .timeline-content p {
        font-size: 0.85rem;
    }
    
    .demarche-cta-section {
        padding: 15px 12px;
        margin-top: 20px;
    }
    
    .demarche-cta-section h2 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .demarche-cta-section p {
        font-size: 0.9rem;
    }
    
    .demarche-cta-button {
        padding: 9px 20px;
        font-size: 0.9rem;
        margin-top: 12px;
    }
    
    .feature-box, .highlight-box, .quote-box {
        padding: 12px;
        margin: 12px 0;
    }
    
    .feature-box h3, .highlight-box h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .feature-box p, .highlight-box p, .quote-box p {
        font-size: 0.85rem;
    }
    
    .content-section ul {
        padding-left: 12px;
        margin: 12px 0;
    }
    
    .content-section ul li {
        margin-bottom: 8px;
        padding-left: 22px;
        font-size: 0.85rem;
    }
}

/* Mode paysage mobile pour la page démarche */
@media (max-height: 600px) and (orientation: landscape) {
    .demarche-wrapper {
        padding: 15px 8px;
    }
    
    .demarche-header {
        margin-bottom: 20px;
    }
    
    .demarche-header h1 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    
    .demarche-description {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
    
    .step-card {
        margin-bottom: 20px;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .step-content {
        padding: 12px;
    }
    
    .step-title {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .step-title i {
        font-size: 1.2rem;
        margin-right: 6px;
    }
    
    .step-description {
        font-size: 0.8rem;
    }
    
    .read-more {
        padding: 6px 15px;
        font-size: 0.8rem;
        margin-top: 10px;
    }
    
    .detailed-content {
        padding: 15px 10px;
        margin: 5px 0 20px;
    }
    
    .detailed-header {
        margin-bottom: 20px;
    }
    
    .detailed-header h2 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .detailed-header p {
        font-size: 0.8rem;
    }
    
    .section-title {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .section-title i {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }
    
    .close-section {
        top: 10px;
        right: 10px;
        font-size: 1.1rem;
    }
    
    .expertise-grid, .experience-grid, .service-grid, .test-types, .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        margin: 15px 0;
    }
    
    .expertise-card, .experience-card, .service-card, .test-card, .benefit-card {
        padding: 10px;
    }
    
    .expertise-card i, .experience-card i, .service-card i, .test-card i, .benefit-card i {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }
    
    .expertise-card h3, .experience-card h3, .service-card h3, .test-card h3, .benefit-card h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .expertise-card p, .experience-card p, .service-card p, .test-card p, .benefit-card p {
        font-size: 0.75rem;
    }
    
    .timeline-item {
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .timeline-marker, .timeline-number {
        width: 25px;
        height: 25px;
        font-size: 0.7rem;
    }
    
    .timeline-content {
        padding: 10px;
    }
    
    .timeline-content h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .timeline-content p {
        font-size: 0.75rem;
    }
    
    .demarche-cta-section {
        padding: 12px 10px;
        margin-top: 15px;
    }
    
    .demarche-cta-section h2 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .demarche-cta-section p {
        font-size: 0.8rem;
    }
    
    .demarche-cta-button {
        padding: 8px 18px;
        font-size: 0.85rem;
        margin-top: 10px;
    }
    
    .feature-box, .highlight-box, .quote-box {
        padding: 10px;
        margin: 10px 0;
    }
    
    .feature-box h3, .highlight-box h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .feature-box p, .highlight-box p, .quote-box p {
        font-size: 0.75rem;
    }
    
    .content-section ul {
        padding-left: 10px;
        margin: 10px 0;
    }
    
    .content-section ul li {
        margin-bottom: 6px;
        padding-left: 20px;
        font-size: 0.75rem;
    }
}

/* ==============================================
   CSS SPÉCIFIQUE POUR LA PAGE NOUS TROUVER
   ============================================== */

/* Variables spécifiques à la page */
:root {
    --location-primary: #FF8C00;
    --location-secondary: #FF4500;
    --location-text-dark: #333;
    --location-text-medium: #555;
    --location-text-light: #777;
    --location-white: #FFFFFF;
    --location-bg-light: #F8FAFC;
    --location-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --location-radius: 15px;
    --location-transition: all 0.3s ease;
}

/* Correction du body spécifique à cette page */
body.location-page {
    background-color: #FAFAFA;
    font-family: 'Montserrat', sans-serif;
}

/* Wrapper principal amélioré */
.location-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* Header de la page amélioré */
.location-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: var(--location-radius);
    border: 2px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.location-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    z-index: 2;
}

.location-header h1 {
    color: var(--location-text-dark);
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.location-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    border-radius: 2px;
}

.location-header h1 i {
    color: var(--location-primary);
    margin-right: 15px;
}

.location-header p {
    color: var(--location-text-medium);
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Section photo du centre - CORRECTION MAJEURE */
.center-photo-section {
    margin-bottom: 50px;
}

.photo-container {
    position: relative;
    border-radius: var(--location-radius);
    overflow: hidden;
    box-shadow: var(--location-shadow);
    transition: var(--location-transition);
    border: 2px solid rgba(255, 140, 0, 0.1);
    background: white;
}

.photo-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
}

.center-photo {
    width: 100%;
    height: 350px;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: var(--location-transition);
    background: #f8f9fa;
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    opacity: 0;
    transition: var(--location-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-container:hover .photo-overlay {
    opacity: 1;
}

.photo-caption {
    text-align: center;
    color: white;
    transform: translateY(20px);
    transition: var(--location-transition);
}

.photo-container:hover .photo-caption {
    transform: translateY(0);
}

.photo-caption h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
}

.photo-caption p {
    font-size: 1.1rem;
    margin: 0;
}

/* Grille des cartes principales - AMÉLIORATION */
.location-content {
    margin-bottom: 50px;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* Cartes individuelles - CORRECTION MAJEURE */
.location-card {
    background: var(--location-white);
    border-radius: var(--location-radius);
    padding: 30px;
    box-shadow: var(--location-shadow);
    transition: var(--location-transition);
    border: 2px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    z-index: 2;
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
}

/* Icônes des cartes */
.location-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(45deg, var(--location-primary), var(--location-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: var(--location-transition);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.location-icon i {
    color: white;
    font-size: 1.8rem;
    transition: var(--location-transition);
}

.location-card:hover .location-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

/* Titres des cartes */
.location-card h2 {
    color: var(--location-text-dark);
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    text-align: center;
}

/* Informations pratiques - AMÉLIORATION */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--location-transition);
}

.info-item:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.2);
    transform: translateY(-2px);
}

.info-item i {
    color: var(--location-primary);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.info-item strong {
    color: var(--location-text-dark);
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.info-item p {
    color: var(--location-text-medium);
    line-height: 1.5;
    margin: 0;
}

/* CORRECTION MAJEURE : Horaires d'ouverture */
.hours-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--location-transition);
}

.hours-item:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.2);
}

/* CORRECTION CRITIQUE : Jours fermés avec fond gris au lieu de rouge */
.hours-item.closed {
    background: linear-gradient(135deg, rgba(150, 150, 150, 0.05), rgba(120, 120, 120, 0.05)) !important;
    border-color: rgba(150, 150, 150, 0.1) !important;
}

.hours-item.closed .day,
.hours-item.closed .time {
    color: var(--location-text-light) !important;
}

.hours-item .day {
    font-weight: 600;
    color: var(--location-text-dark);
    font-family: 'Playfair Display', serif;
}

.hours-item .time {
    color: var(--location-text-medium);
    font-weight: 500;
}

/* Note des horaires */
.hours-note {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-left: 4px solid var(--location-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hours-note i {
    color: var(--location-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.hours-note p {
    color: var(--location-text-medium);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Accès et transport - AMÉLIORATION */
.access-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.access-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.1);
    transition: var(--location-transition);
}

.access-item:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 69, 0, 0.1));
    border-color: rgba(255, 140, 0, 0.2);
    transform: translateY(-2px);
}

.access-item i {
    color: var(--location-primary);
    font-size: 1.4rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.access-item strong {
    color: var(--location-text-dark);
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.access-item p {
    color: var(--location-text-medium);
    line-height: 1.5;
    margin: 0;
}

/* Section équipe - AMÉLIORATION */
.team-section {
    margin-bottom: 50px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    color: var(--location-text-dark);
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    border-radius: 2px;
}

.section-header p {
    color: var(--location-text-medium);
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.team-card {
    background: var(--location-white);
    border-radius: var(--location-radius);
    padding: 30px 20px;
    box-shadow: var(--location-shadow);
    transition: var(--location-transition);
    border: 2px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    z-index: 2;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.2);
}

.team-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--location-primary), var(--location-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: var(--location-transition);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.team-icon i {
    color: white;
    font-size: 1.5rem;
    transition: var(--location-transition);
}

.team-card:hover .team-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

.team-card h3 {
    color: var(--location-text-dark);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
}

.team-card p {
    color: var(--location-text-medium);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Section carte - AMÉLIORATION */
.map-section {
    margin-bottom: 50px;
}

.map-container {
    background: var(--location-white);
    border-radius: var(--location-radius);
    box-shadow: var(--location-shadow);
    border: 2px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    z-index: 2;
}

.map-wrapper {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.location-map {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 var(--location-radius) var(--location-radius);
}

.directions-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    border: none;
    z-index: 1;
}

.directions-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.directions-btn:hover::before {
    opacity: 1;
    animation: directionsGoldShimmer 3s ease infinite;
}

@keyframes directionsGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.directions-btn:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 6px 15px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.directions-btn i {
    transition: transform 0.5s ease;
}

.directions-btn:hover i {
    transform: rotate(-15deg) scale(1.1);
    color: #4a3800;
}

/* Section CTA - AMÉLIORATION */
.cta-section {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 69, 0, 0.05));
    border-radius: var(--location-radius);
    padding: 40px 30px;
    margin-top: 50px;
    border: 2px solid rgba(255, 140, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--location-primary), var(--location-secondary));
    z-index: 2;
}

.cta-section h2 {
    color: var(--location-text-dark);
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
}

.cta-section p {
    color: var(--location-text-medium);
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    z-index: 1;
    margin: 0 10px;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e6c353, #fcf6ba, #bf953f, #b38728, #fbf5b7, #aa771c, #e6c353);
    background-size: 700% 700%;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    border-radius: 50px;
}

.cta-button:hover::before {
    opacity: 1;
    animation: ctaGoldShimmer 3s ease infinite;
}

@keyframes ctaGoldShimmer {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

.cta-button:hover {
    color: #4a3800;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 6px 12px rgba(183, 155, 59, 0.15),
        0 8px 20px rgba(183, 155, 59, 0.2);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.cta-button i {
    transition: transform 0.5s ease;
}

.cta-button:hover i {
    transform: rotate(-15deg) scale(1.1);
    color: #4a3800;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablette */
@media (max-width: 992px) {
    .location-wrapper {
        padding: 30px 15px;
        margin-top: 10px;
    }
    
    .location-header {
        padding: 30px 15px;
        margin-bottom: 40px;
    }
    
    .location-header h1 {
        font-size: 2.2rem;
    }
    
    .center-photo {
        height: 300px;
    }
    
    .location-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .map-wrapper {
        height: 350px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .location-wrapper {
        padding: 20px 10px;
        margin-top: 5px;
    }
    
    .location-header {
        padding: 25px 15px;
        margin-bottom: 30px;
    }
    
    .location-header h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .location-header p {
        font-size: 1rem;
    }
    
    .center-photo {
        height: 250px;
    }
    
    .location-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .location-card {
        padding: 25px 20px;
    }
    
    .location-card h2 {
        font-size: 1.3rem;
    }
    
    .location-icon {
        width: 60px;
        height: 60px;
    }
    
    .location-icon i {
        font-size: 1.5rem;
    }
    
    .hours-item {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .team-card {
        padding: 25px 15px;
    }
    
    .team-icon {
        width: 50px;
        height: 50px;
    }
    
    .team-icon i {
        font-size: 1.3rem;
    }
    
    .map-wrapper {
        height: 300px;
    }
    
    .directions-link {
        bottom: 15px;
        right: 15px;
    }
    
    .directions-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .cta-section {
        padding: 30px 20px;
    }
    
    .cta-section h2 {
        font-size: 1.6rem;
    }
    
    .cta-section p {
        font-size: 1rem;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
        margin: 5px;
        width: calc(100% - 10px);
        max-width: 300px;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .location-wrapper {
        padding: 15px 8px;
        margin-top: 0;
    }
    
    .location-header {
        padding: 20px 10px;
        margin-bottom: 25px;
    }
    
    .location-header h1 {
        font-size: 1.6rem;
    }
    
    .location-header p {
        font-size: 0.95rem;
    }
    
    .center-photo {
        height: 200px;
    }
    
    .location-card {
        padding: 20px 15px;
    }
    
    .location-icon {
        width: 50px;
        height: 50px;
    }
    
    .location-icon i {
        font-size: 1.3rem;
    }
    
    .team-card {
        padding: 20px 12px;
    }
    
    .team-icon {
        width: 45px;
        height: 45px;
    }
    
    .team-icon i {
        font-size: 1.2rem;
    }
    
    .map-wrapper {
        height: 250px;
    }
    
    .cta-section {
        padding: 25px 15px;
    }
    
    .cta-section h2 {
        font-size: 1.4rem;
    }
    
    .cta-section p {
        font-size: 0.95rem;
    }
    
    .cta-button {
        padding: 10px 20px;
        font-size: 0.95rem;
        width: calc(100% - 20px);
        max-width: 280px;
    }
}

/* Mode paysage