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

/* Variables CSS - Root */
:root {
	/* Couleurs principales */
	--color-primary: #8c86c0;
	--color-secondary: #9165ab;
	
	/* Couleurs de texte */
	--text-primary: #2d3748;
	--text-secondary: #333;
	--text-muted: #666;
	--text-light: #ccc;
	--text-dark: #0b1324;
	
	/* Couleurs de fond */
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-light: #f1f5f9;
	--bg-gradient: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	--bg-gradient-primary: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
	--bg-gradient-hero: linear-gradient(180deg, #ecfeff 0%, #f6f9fb 55%);
	
	/* Couleurs de bordure */
	--border-color: #e0e0e0;
	--border-color-light: rgba(140, 134, 192, 0.1);
	--border-color-medium: rgba(140, 134, 192, 0.2);
	
	/* Ombres */
	--shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 15px rgba(140, 134, 192, 0.3);
	--shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
	--shadow-xl: 0 25px 50px rgba(140, 134, 192, 0.15);
	--shadow-2xl: 0 35px 70px rgba(0,0,0,0.3);
	--shadow-header: 0 4px 20px rgba(0,0,0,0.08);
	--shadow-button: 0 8px 25px rgba(140, 134, 192, 0.3);
	--shadow-button-hover: 0 12px 35px rgba(140, 134, 192, 0.4);
	
	/* Espacements */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 6rem;
	
	/* Bordures */
	--radius-sm: 8px;
	--radius-md: 15px;
	--radius-lg: 20px;
	--radius-full: 50%;
	
	/* Transitions */
	--transition-fast: 0.3s ease;
	--transition-normal: 0.4s ease;
	--transition-slow: 0.6s ease-out;
	
	/* Z-index */
	--z-background: -1;
	--z-base: 0;
	--z-header: 1000;
	
	/* Tailles de conteneur */
	--container-max-width: 1200px;
	
	/* Hauteur de header */
	--header-height: 80px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #2d3748;
    overflow-x: hidden;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    min-height: 100vh;
    padding-top: 120px; /* Espace pour le header fixe */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 768px) {
    body {
        padding-top: 70px; /* Espace réduit pour le header mobile (menu burger seulement) */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 768px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(0);
}

.navbar {
    padding: 1rem 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.logo:hover {
    transform: scale(1.05);
}

.logo img {
    height: 100px;
    width: auto;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #8c86c0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #8c86c0 0%, #9165ab 100%);
    transition: width 0.3s ease;
}

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

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #333;
    position: relative;
    z-index: 1001;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.menu-toggle:hover {
    color: #8c86c0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(140, 134, 192, 0.3);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(140, 134, 192, 0.4);
    background: linear-gradient(135deg, #7a75b0 0%, #82589d 100%);
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn-outline:hover::before {
    left: 0;
}

.btn-outline:hover {
    color: white;
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
}

.btn-white {
    background: white;
    color: #8c86c0;
    border: 2px solid #8c86c0;
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
    background: #8c86c0;
    color: white;
}

.btn-link {
    background: transparent;
    color: white;
    text-decoration: underline;
}

.btn-link:hover {
    color: #f0f0f0;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(2px) brightness(0.6);
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
    z-index: 2;
    display: none; /* Cache l'image car elle sera utilisée comme background */
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.hero-image img:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: 0 35px 70px rgba(0,0,0,0.3);
    animation: float 2s ease-in-out infinite;
}

/* Page Hero */
.page-hero {
    padding: 120px 0 60px;
    text-align: center;
    position: relative;
}

.page-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #333;
    position: relative;
    z-index: 2;
}

.page-hero p {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Page Hero Praticiens - Background avec image SVG de la section team */
.page-hero-praticiens {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='700' preserveAspectRatio='none' viewBox='0 0 1440 700'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1029%26quot%3b)' fill='none'%3e%3crect width='1440' height='700' x='0' y='0' fill='rgba(66%2c 37%2c 86%2c 1)'%3e%3c/rect%3e%3cpath d='M946 487L945 -14' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1401 386L1400 784' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M403 158L402 -246' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1214 242L1213 593' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1015 299L1014 -119' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M878 272L877 449' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1232 607L1231 1122' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M492 195L491 -254' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M520 356L519 756' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M845 299L844 549' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M957 3L956 -220' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M652 574L651 855' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1315 398L1314 723' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M785 303L784 95' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1198 515L1197 1003' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M792 513L791 748' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M470 516L469 155' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M434 644L433 239' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M381 314L380 79' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1147 418L1146 48' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M155 580L154 229' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M80 626L79 1143' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1180 487L1179 722' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1213 44L1212 295' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M34 488L33 942' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M317 184L316 -54' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M268 354L267 758' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M39 408L38 173' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1168 212L1167 404' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M466 64L465 -392' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M373 366L372 890' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M388 626L387 1016' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1031%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M278 90L277 578' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1333 430L1332 142' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M777 231L776 565' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M478 7L477 445' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1030%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1029'%3e%3crect width='1440' height='700' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1030'%3e%3cstop stop-color='rgba(145%2c 101%2c 171%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(145%2c 101%2c 171%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1031'%3e%3cstop stop-color='rgba(145%2c 101%2c 171%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(145%2c 101%2c 171%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero-praticiens h1,
.page-hero-praticiens p {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Page Hero Contact - Background avec image SVG de la section contact-info */
.page-hero-contact {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1061%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(66%2c 37%2c 86%2c 1)'%3e%3c/rect%3e%3cpath d='M1421.912%2c772.893C1474.278%2c771.611%2c1514.557%2c732.389%2c1540.764%2c687.034C1566.992%2c641.644%2c1579.298%2c587.972%2c1555.86%2c541.08C1529.919%2c489.18%2c1479.915%2c450.72%2c1421.912%2c449.247C1361.54%2c447.714%2c1303.94%2c480.615%2c1275.637%2c533.963C1248.84%2c584.473%2c1262.68%2c644.346%2c1292.535%2c693.111C1320.889%2c739.425%2c1367.624%2c774.222%2c1421.912%2c772.893' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1375.35%2c519.418C1436.015%2c520.915%2c1502.688%2c505.797%2c1531.395%2c452.333C1559.148%2c400.646%2c1529.317%2c341.017%2c1497.662%2c291.623C1469.191%2c247.197%2c1428.002%2c212.298%2c1375.35%2c208.837C1315.895%2c204.929%2c1252.52%2c222.54%2c1221.613%2c273.48C1189.777%2c325.952%2c1199.565%2c392.904%2c1232.097%2c444.947C1262.672%2c493.859%2c1317.686%2c517.995%2c1375.35%2c519.418' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1102.01%2c685.472C1152.089%2c686.166%2c1199.297%2c662.412%2c1225.984%2c620.03C1254.594%2c574.594%2c1262.501%2c517.742%2c1237.567%2c470.19C1210.88%2c419.295%2c1159.454%2c381.958%2c1102.01%2c383.6C1046.798%2c385.179%2c1004.22%2c428.309%2c979.244%2c477.575C956.76%2c521.924%2c958.564%2c573.86%2c983.847%2c616.675C1008.686%2c658.738%2c1053.166%2c684.795%2c1102.01%2c685.472' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M938.798%2c603.594C987.908%2c605.005%2c1042.416%2c601.943%2c1069.547%2c560.984C1098.88%2c516.701%2c1092.288%2c458.211%2c1065.467%2c412.363C1038.922%2c366.987%2c991.361%2c336.602%2c938.798%2c337.485C887.621%2c338.345%2c843.858%2c371.596%2c819.293%2c416.5C795.745%2c459.544%2c794.032%2c512.479%2c820.443%2c553.828C845.135%2c592.485%2c892.947%2c602.277%2c938.798%2c603.594' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M338.329%2c552.638C376.47%2c549.861%2c398.967%2c513.916%2c417.255%2c480.33C434.459%2c448.735%2c448.235%2c412.788%2c431.948%2c380.711C414.318%2c345.988%2c377.242%2c323.383%2c338.329%2c324.884C301.53%2c326.303%2c275.457%2c355.948%2c256.435%2c387.481C236.536%2c420.469%2c219.514%2c458.965%2c236.628%2c493.48C255.301%2c531.139%2c296.406%2c555.69%2c338.329%2c552.638' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M129.918%2c460.93C157.074%2c461.577%2c185.304%2c452.202%2c198.729%2c428.587C212.033%2c405.185%2c205.225%2c376.441%2c190.907%2c353.646C177.581%2c332.431%2c154.971%2c319.168%2c129.918%2c319.038C104.632%2c318.907%2c80.763%2c331.284%2c67.826%2c353.01C54.585%2c375.246%2c53.655%2c403.006%2c66.561%2c425.438C79.5%2c447.927%2c103.98%2c460.312%2c129.918%2c460.93' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M601.907%2c458.207C616.462%2c458.788%2c630.786%2c453.425%2c639.075%2c441.447C648.71%2c427.525%2c654.984%2c408.879%2c645.954%2c394.557C637.252%2c380.755%2c618.223%2c382.421%2c601.907%2c382.493C585.782%2c382.564%2c566.574%2c380.969%2c558.525%2c394.941C550.482%2c408.902%2c560.431%2c425.385%2c569.543%2c438.673C577.18%2c449.811%2c588.413%2c457.669%2c601.907%2c458.207' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M925.647%2c345.331C958.301%2c343.451%2c983.15%2c319.916%2c999.957%2c291.856C1017.374%2c262.777%2c1030.064%2c227.794%2c1013.886%2c198.008C997.151%2c167.197%2c960.71%2c155.182%2c925.647%2c155.043C890.3%2c154.903%2c854.823%2c167.268%2c836.189%2c197.305C816.59%2c228.898%2c815.648%2c269.54%2c834.877%2c301.359C853.515%2c332.199%2c889.673%2c347.402%2c925.647%2c345.331' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M287.113%2c413.804C308.188%2c413.394%2c327.828%2c403.978%2c339.312%2c386.302C352.001%2c366.771%2c357.76%2c342.243%2c347.038%2c321.567C335.547%2c299.408%2c312.065%2c284.968%2c287.113%2c285.643C263.157%2c286.291%2c243.995%2c303.608%2c232.553%2c324.665C221.678%2c344.678%2c219.381%2c368.978%2c231.272%2c388.405C242.714%2c407.098%2c265.2%2c414.231%2c287.113%2c413.804' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1020.837%2c397.659C1061.868%2c395.908%2c1099.379%2c374.547%2c1119.566%2c338.783C1139.416%2c303.616%2c1136.96%2c261.344%2c1117.862%2c225.764C1097.556%2c187.933%2c1063.706%2c157.243%2c1020.837%2c154.847C973.847%2c152.221%2c927.02%2c173.277%2c903.012%2c213.756C878.56%2c254.984%2c880.489%2c307.521%2c906.348%2c347.882C930.409%2c385.437%2c976.276%2c399.561%2c1020.837%2c397.659' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M479.123%2c470.901C509.243%2c471.059%2c540.097%2c461.521%2c555.776%2c435.803C572.026%2c409.148%2c569.797%2c375.241%2c553.779%2c348.445C538.177%2c322.345%2c509.493%2c309.092%2c479.123%2c307.571C445.346%2c305.879%2c407.483%2c311.136%2c390.283%2c340.255C372.892%2c369.698%2c384.622%2c406.728%2c403.851%2c435.005C420.604%2c459.642%2c449.33%2c470.745%2c479.123%2c470.901' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M317.906%2c315.858C351.925%2c314.108%2c376.002%2c286.797%2c393.241%2c257.417C410.762%2c227.557%2c426.011%2c191.483%2c408.362%2c161.698C390.922%2c132.266%2c352.116%2c129.964%2c317.906%2c130.278C284.448%2c130.585%2c248.788%2c135.458%2c230.28%2c163.332C209.999%2c193.875%2c209.573%2c234.135%2c227.836%2c265.925C246.164%2c297.828%2c281.162%2c317.748%2c317.906%2c315.858' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M935.092%2c605.156C978.502%2c603.903%2c1007.833%2c566.546%2c1029.992%2c529.197C1052.79%2c490.771%2c1073.191%2c446.183%2c1053.078%2c406.286C1031.388%2c363.259%2c983.276%2c341.273%2c935.092%2c340.942C886.292%2c340.606%2c837.468%2c361.715%2c814.26%2c404.644C791.953%2c445.906%2c805.993%2c494.788%2c830.203%2c534.963C853.476%2c573.583%2c890.021%2c606.457%2c935.092%2c605.156' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M227.403%2c685.411C277.326%2c685.839%2c329.647%2c676.061%2c357.622%2c634.71C388.884%2c588.502%2c397.36%2c525.747%2c367.154%2c478.842C338.674%2c434.617%2c279.839%2c428.318%2c227.403%2c432.499C182.998%2c436.04%2c145.37%2c460.77%2c121.571%2c498.426C95.678%2c539.395%2c77.12%2c590.333%2c100.992%2c632.511C125.107%2c675.117%2c178.448%2c684.991%2c227.403%2c685.411' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M984.726%2c488.463C1003.642%2c488.441%2c1019.752%2c476.996%2c1030.085%2c461.151C1041.686%2c443.361%2c1050.715%2c421.376%2c1040.682%2c402.657C1030.259%2c383.21%2c1006.779%2c377.22%2c984.726%2c376.522C961.037%2c375.772%2c933.498%2c378.032%2c922.277%2c398.909C911.351%2c419.238%2c925.982%2c442.326%2c939.183%2c461.257C950.024%2c476.803%2c965.773%2c488.485%2c984.726%2c488.463' fill='rgba(145%2c 101%2c 171%2c 0.26)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1061'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero-contact h1,
.page-hero-contact p {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Page Hero Activities */
.page-hero-activities {
    background: linear-gradient(135deg, rgba(140, 134, 192, 0.12) 0%, rgba(145, 101, 171, 0.18) 100%);
}

/* Sections */
section {
    padding: 80px 0;
}

.bg-light {
    background: #f8f9fa;
}

/* Section Services - Background avec image SVG */
.services {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='700' preserveAspectRatio='none' viewBox='0 0 1440 700'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='700' x='0' y='0' fill='rgba(66%2c 37%2c 86%2c 1)'%3e%3c/rect%3e%3cpath d='M720 886.38C862.6 894.44 998.43 830.32 1102.3 732.3 1209.43 631.18 1298.99 496.95 1288.34 350 1278.14 209.24 1160.27 108.26 1050.72 19.28 955.04-58.41 842.94-102.95 720-111.52 585.6-120.9 444.36-115.15 339.74-30.26 225.57 62.43 143.46 203.15 151.38 350 159.03 491.88 275.31 593.81 378.67 691.33 477.78 784.83 583.97 878.7 720 886.38' fill='rgba(82%2c 50%2c 103%2c 1)'%3e%3c/path%3e%3cpath d='M720 697.07C812.27 702.29 900.16 660.79 967.37 597.37 1036.69 531.94 1094.64 445.08 1087.75 350 1081.15 258.92 1004.88 193.58 933.99 136.01 872.09 85.74 799.55 56.92 720 51.37 633.03 45.3 541.65 49.02 473.95 103.95 400.08 163.92 346.95 254.98 352.07 350 357.02 441.81 432.26 507.76 499.14 570.86 563.27 631.36 631.98 692.1 720 697.07' fill='rgba(114%2c 76%2c 137%2c 1)'%3e%3c/path%3e%3cpath d='M720 507.76C761.94 510.13 801.89 491.27 832.44 462.44 863.95 432.7 890.29 393.22 887.16 350 884.16 308.6 849.49 278.9 817.27 252.73 789.13 229.88 756.16 216.78 720 214.26 680.47 211.5 638.93 213.19 608.16 238.16 574.58 265.42 550.43 306.81 552.76 350 555.01 391.73 589.21 421.71 619.61 450.39 648.76 477.89 679.99 505.5 720 507.76' fill='rgba(145%2c 101%2c 171%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='700' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-tag {
    display: inline-block;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(140, 134, 192, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #2d3748;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Section Services - Texte blanc pour ressortir sur fond SVG */
.services .section-header h2 {
    color: white;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: white;
    background-clip: initial;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.services .section-header p {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Section Team - Texte normal (plus en blanc) */
.team .section-header h2 {
    color: #2d3748;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.team .section-header p {
    color: #666;
    text-shadow: none;
}

/* Values Section */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.value-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(140, 134, 192, 0.1);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
}

.value-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(140, 134, 192, 0.15);
    border-color: rgba(140, 134, 192, 0.2);
}

.value-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(140, 134, 192, 0.4);
}

.value-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2d3748;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.value-card p {
    color: #666;
    line-height: 1.6;
}

/* Values Grid Four */
.values-grid-four {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.value-card-centered {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.value-card-centered:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.value-icon-large {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: white;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.service-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(140, 134, 192, 0.1);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
}

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(140, 134, 192, 0.15);
    border-color: rgba(140, 134, 192, 0.2);
}

.service-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(140, 134, 192, 0.4);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2d3748;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card p {
    color: #666;
    line-height: 1.6;
}

.text-center {
    text-align: center;
}

/* Testimonials Section */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.testimonial-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}

.testimonial-info h4 {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.testimonial-info p {
    color: #666;
    font-size: 0.9rem;
}

/* Google Reviews Section */
.google-reviews {
    padding: 80px 0;
    background: #f8f9fa;
}

.reviews-container {
    max-width: 1000px;
    margin: 0 auto;
}

.google-reviews-widget {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-loading {
    text-align: center;
    color: #8c86c0;
}

.reviews-loading i {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

.reviews-loading p {
    font-size: 1.1rem;
    color: #666;
}

.reviews-cta {
    text-align: center;
}

/* Team Photo (mini) */
.team-photo-mini {
    margin: 0 auto 3rem;
    max-width: 700px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(140, 134, 192, 0.1);
}

.team-photo-mini img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.reviews-fallback {
    text-align: center;
    padding: 2rem;
}

.reviews-header h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2d3748;
}

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

.stars {
    font-size: 2rem;
    color: #ffc107;
    margin-bottom: 0.5rem;
}

.rating-text {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
}

.reviews-note {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.reviews-note p {
    margin: 0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.reviews-note i {
    color: #8c86c0;
}

/* Elfsight Widget Styles */
.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 {
    width: 100%;
    min-height: 300px;
}

/* Custom styling for Elfsight widget to match site design */
.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 .elfsight-app-google-reviews-widget-container {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(140, 134, 192, 0.1) !important;
}

.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 .elfsight-app-google-reviews-widget-review {
    border-radius: 15px !important;
    border: 1px solid rgba(140, 134, 192, 0.1) !important;
    transition: all 0.3s ease !important;
}

.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 .elfsight-app-google-reviews-widget-review:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(140, 134, 192, 0.15) !important;
}

/* Hide Elfsight branding if needed */
.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 .elfsight-app-google-reviews-widget-powered-by {
    display: none !important;
}

/* Additional styling for better integration */
.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 {
    background: transparent !important;
}

.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 .elfsight-app-google-reviews-widget-header {
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%) !important;
    color: white !important;
    border-radius: 20px 20px 0 0 !important;
}

.elfsight-app-f585b2b5-8516-4d11-bea1-de23b4260918 .elfsight-app-google-reviews-widget-rating {
    color: #ffc107 !important;
}

/* CTA Section */
.cta {
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cta-grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23cta-grain)"/></svg>');
    opacity: 0.3;
}

.cta h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* History Section */
.history {
    padding: 80px 0;
}

.history-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.history-timeline {
    margin-top: 2rem;
}

.timeline-item {
    padding: 1.5rem 0;
    border-left: 3px solid #667eea;
    padding-left: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 2rem;
    width: 13px;
    height: 13px;
    background: #667eea;
    border-radius: 50%;
}

.timeline-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.timeline-item p {
    color: #666;
    line-height: 1.6;
}

.history-images {
    display: grid;
    gap: 1rem;
}

.history-image {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.history-image:hover {
    transform: scale(1.05);
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.doctor-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid rgba(140, 134, 192, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.doctor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
}

.doctor-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(140, 134, 192, 0.15);
    border-color: rgba(140, 134, 192, 0.2);
}

.doctor-image {
    height: 350px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.doctor-image::before {
    content: '\f0f0'; /* Font Awesome icon code for user-md (médecin) */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.9);
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.doctor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.doctor-image img[src*="placeholder"],
.doctor-image img.error {
    display: none;
}

.doctor-image.has-image::before {
    display: none;
}

.doctor-card:hover .doctor-image img {
    transform: scale(1.1);
}

.doctor-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.doctor-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.doctor-specialty {
    color: #8c86c0;
    font-weight: 500;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.doctor-bio {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.doctor-contact {
    margin-bottom: 1.5rem;
}

.doctor-contact p {
    color: #666;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doctor-contact i {
    color: #8c86c0;
    width: 16px;
}

.doctor-info .btn {
    margin-top: auto;
}

/* Specialties Section */
.specialties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    align-items: stretch;
    justify-items: stretch;
}

@media (max-width: 1024px) {
    .specialties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .specialties-grid {
        grid-template-columns: 1fr;
    }
}

.specialty-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(140, 134, 192, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.specialty-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
}

.specialty-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(140, 134, 192, 0.15);
    border-color: rgba(140, 134, 192, 0.2);
}

.specialty-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
    transition: all 0.3s ease;
}

.specialty-card:hover .specialty-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(140, 134, 192, 0.4);
}

.specialty-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.specialty-card p {
    color: #666;
    font-size: 0.9rem;
}

/* Contact Section */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.contact-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.contact-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
}

.contact-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.contact-card p {
    color: #666;
    margin-bottom: 0.5rem;
}

.contact-highlight {
    color: #8c86c0;
    font-weight: 600;
}

.contact-link {
    color: #8c86c0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #9165ab;
}

/* Map and Hours */
.map-hours-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}

.map-container {
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.access-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #333;
}

.access-methods {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.access-method h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.access-method i {
    color: #8c86c0;
}

.access-method p {
    color: #666;
    line-height: 1.6;
}

.hours-section h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #333;
}

.hours-table {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

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

.hours-day {
    font-weight: 500;
    color: #333;
}

.hours-time {
    color: #8c86c0;
    font-weight: 500;
}

.important-notice h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.notice-box {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    padding: 1rem;
}

.notice-box p {
    color: #856404;
    margin: 0;
    line-height: 1.6;
}

/* Contact Form */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #8c86c0;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: #333;
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.2rem;
}

.footer-logo img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: contain;
}

.footer-info p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #8c86c0;
    transform: translateY(-2px);
}

.footer-contact h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: white;
}

.footer-contact ul {
    list-style: none;
    margin-bottom: 2rem;
}

.footer-contact ul li {
    color: #ccc;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-contact ul li i {
    color: #8c86c0;
    width: 16px;
}

.footer-hours h4 {
    color: white;
    margin-bottom: 1rem;
}

.footer-hours p {
    color: #ccc;
    margin-bottom: 0.25rem;
}

.footer-bottom {
    border-top: 1px solid #555;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: #ccc;
    margin: 0;
}

.footer-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #8c86c0;
}

/* Services Overview */
.services-overview {
    padding: 80px 0;
}

/* Legal Section */
.legal {
    background: #ffffff;
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.legal-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(140, 134, 192, 0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.legal-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #2d3748;
}

.legal-card p {
    color: #666;
    line-height: 1.6;
}

.legal-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(140, 134, 192, 0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
}

.legal-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #2d3748;
}

.legal-content p {
    color: #666;
    line-height: 1.6;
}

/* Activities Section */
.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.activity-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(140, 134, 192, 0.1);
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
}

.activity-card.no-image {
    background: linear-gradient(135deg, #ffffff 0%, #f8f7ff 100%);
    align-items: center;
    text-align: center;
    height: 100%;
}

.activity-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(140, 134, 192, 0.15);
    border-color: rgba(140, 134, 192, 0.2);
}

.activity-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 8px;
    background: #f8f9fa;
    align-items: start;
    justify-items: center;
}

.activity-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    cursor: pointer;
}

.activity-gallery img:only-child {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top;
}

.activity-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-card.no-image .activity-content {
    padding-top: 2.5rem;
    width: 100%;
    height: 100%;
    align-items: center;
    text-align: center;
}

.activity-card.no-image .activity-meta {
    margin-top: auto;
    justify-content: center;
}

.activity-card.no-image .btn {
    margin-top: 0.75rem;
}

.activity-card.no-image .activity-content .btn {
    align-self: center;
}

.activity-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
}

.activity-content h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2d3748;
}

.activity-content p {
    color: #666;
    line-height: 1.6;
}

.activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #666;
    font-size: 0.95rem;
}

.activity-meta i {
    color: #8c86c0;
    margin-right: 0.4rem;
}

.activity-content .btn {
    align-self: flex-start;
}

.activities-group {
    margin-bottom: 3rem;
}

.activities-group:last-child {
    margin-bottom: 0;
}

.activities-group-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Modal Galerie */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal.is-open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 19, 36, 0.7);
}

.modal-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    width: 90%;
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.modal-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 16px;
    object-fit: contain;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.modal-close:hover {
    background: #e2e8f0;
}

.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.modal-prev {
    left: 12px;
}

.modal-next {
    right: 12px;
}

.modal-nav:hover {
    background: #e2e8f0;
}

.modal-counter {
    font-size: 0.95rem;
    color: #666;
}

.specialized-services {
    padding: 80px 0;
}

.specialized-grid {
    display: grid;
    gap: 2rem;
}

.specialized-item {
    display: flex;
    gap: 2rem;
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.specialized-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.specialized-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8c86c0 0%, #9165ab 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(140, 134, 192, 0.3);
}

.specialized-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.specialized-content p {
    color: #666;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(0) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 1000 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .navbar {
        padding: 0.75rem 0;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .navbar .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Afficher le logo sur mobile */
    .logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .logo img {
        height: 50px !important;
        width: auto !important;
        max-width: 150px !important;
        object-fit: contain !important;
    }
    
    /* Afficher le menu burger à droite */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    .menu-toggle i {
        display: block !important;
        font-size: 1.8rem !important;
        color: #333 !important;
        line-height: 1 !important;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        padding-top: 80px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
        height: 100vh;
        overflow-y: auto;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-menu li {
        margin-bottom: 1rem;
    }
    
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .history-content {
        grid-template-columns: 1fr;
    }
    
    .map-hours-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .specialized-item {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .activities-grid {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .page-hero h1 {
        font-size: 2rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .cta h2 {
        font-size: 2rem;
    }
    
    .form-container {
        padding: 2rem;
    }
    
    .values-grid,
    .services-grid,
    .testimonials-grid,
    .contact-cards {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
}