/* RESET ET VARIABLES (Inspiré du design épuré et doux de Framer Nursing Care) */
:root {
    --primary-color: #0d3b66;      /* Bleu médical profond et rassurant */
    --secondary-color: #00b4d8;    /* Bleu canard / turquoise doux */
    --accent-color: #f4f9f9;       /* Fond clair et apaisant */
    --text-dark: #2b2d42;          /* Texte principal lisible */
    --text-light: #6c757d;         /* Texte secondaire atténué */
    --white: #ffffff;
    --border-radius: 16px;         /* Bords très arrondis typiques de Framer */
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-dark);
    background-color: var(--white);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* COMPOSANTS RÉUTILISABLES */
.badge {
    display: inline-block;
    background-color: #e6f7fa;
    color: var(--secondary-color);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    font-size: 0.95rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #07223d;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
    border: none;
}

.btn-secondary:hover {
    background-color: #0096b4;
    transform: translateY(-2px);
}

.btn-link {
    color: var(--primary-color);
    font-weight: 600;
}

.btn-link:hover {
    color: var(--secondary-color);
}

.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

.section-header h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* ==========================================================================
   STYLE HERO : ASYMMETRIC SPLIT PANEL
   ========================================================================== */
.hero-split-panel {
    position: relative;
    width: 100%;
    min-height: 540px; /* Légèrement plus compact en hauteur */
    background-color: #ffffff;
    overflow: hidden;
}
.hero-split-panel {
    display: flex; /* S'assure qu'elle occupe sa place dans le flux */
    width: 100%;
    min-height: 80vh; /* Donne une hauteur minimale pour forcer l'affichage */
    padding-top: 0; /* Espace pour ne pas passer derrière le header */
    background-color: #fff;
}

.hero-panel-grid {
    display: grid;
    grid-template-columns: 45% 55%; /* Découpage asymétrique pro */
    width: 100%;
    min-height: 540px;
}

/* --- Côté Gauche (Espace de lecture) --- */
.panel-text-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px 5% 100px 8%; /* Ajusté pour laisser la place à la banderole en bas */
    background: linear-gradient(135deg, #ffffff 0%, #f9fbfb 100%);
}

.panel-text-wrapper {
    max-width: 540px; /* Évite que le texte ne devienne trop large */
}

.panel-text-side h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    line-height: 1.25;
    margin: 15px 0 20px 0;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.panel-text-side p {
    font-size: 0.98rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 28px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- Côté Droit (Ta Photo en Plein Panneau) --- */
.panel-image-side {
    position: relative;
    width: 100%;
    height: 100%;
}

.panel-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center; /* Aligne le bâtiment au niveau de la coupure */
    display: block;
}


/* Fusion parfaite entre le texte et la photo avec voile noir */
.panel-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 1. Le premier dégradé efface la bordure brusque en partant du blanc pur vers le transparent */
    /* 2. Le deuxième applique le voile noir mi-transparent (ici à 40% d'opacité pour garder de la clarté) */
    background: 
        linear-gradient(to right, #f9fbfb 0%, #f9fbfb9d 30%),
        rgba(223, 220, 220, 0.216); 
    pointer-events: none;
}

/* --- BANDEROLE COMMUNE DE BAS DE PAGE --- */
.infinite-features-fullwidth {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 16px 0;
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(201, 198, 198, 0.411);
    z-index: 10;
}

.infinite-features-fullwidth::before,
.infinite-features-fullwidth::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 11;
}
.infinite-features-fullwidth::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); }
.infinite-features-fullwidth::after { right: 0; background: linear-gradient(to left, #ffffff, transparent); }

.features-scroller {
    display: inline-flex;
    gap: 50px;
    animation: scrollLinearRight 35s linear infinite;
}

.features-scroller .feat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.features-scroller .feat-item i {
    color: var(--secondary-color);
    font-size: 1.1rem;
}

@keyframes scrollLinearRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Version Mobile --- */
@media (max-width: 992px) {
    .hero-panel-grid {
        grid-template-columns: 1fr;
    }
    .panel-image-side {
        height: 280px; /* L'image passe sous le texte proprement sur mobile */
    }
    .panel-gradient-overlay {
        width: 100%;
        height: 30%;
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, transparent 100%);
    }
    .panel-text-side {
        justify-content: center;
        text-align: center;
        padding: 50px 20px 60px 20px;
    }
    .hero-buttons {
        justify-content: center;
    }
}

/* EN-TÊTE DE PAGE (Navigation) */
/* ==========================================================================
   HEADER & NAVIGATION OPTIMISÉS
   ========================================================================== */
.main-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 12px 0;
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Évite la collision entre les blocs */
}

/* Bloc Logo */
.logo {
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Empêche le logo de se faire écraser */
}

.logo-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-logo {
    color: #00bcd4; /* Teinte cyan de vos badges */
    font-size: 1.4rem;
}

.logo h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0d3b66;
    margin: 0;
    white-space: nowrap;
}

.logo p {
    font-size: 0.78rem;
    color: #78909c;
    margin: 2px 0 0 0;
    font-weight: 400;
}

/* Liens de Navigation */
.main-nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 24px; /* Espace équilibré entre les liens */
    margin: 0;
    padding: 0;
}

.nav-links a:not(.btn-nav-reserve) {
    text-decoration: none;
    color: #546e7a;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.25s ease;
    position: relative;
    padding: 6px 0;
}

/* Effet de soulignement épuré au survol */
.nav-links a:not(.btn-nav-reserve)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #00bcd4;
    transition: width 0.25s ease;
}

.nav-links a:not(.btn-nav-reserve):hover {
    color: #0d3b66;
}

.nav-links a:not(.btn-nav-reserve):hover::after {
    width: 100%;
}

/* Bouton Prendre RDV intégré à la navigation */
.btn-nav-reserve {
    text-decoration: none;
    background-color: #e0f7fa;
    color: #00838f !important;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-nav-reserve:hover {
    background-color: #00bcd4;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2);
}

/* Bouton Téléphone à Droite */
.nav-cta {
    flex-shrink: 0;
}

.btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #0d3b66;
    color: #ffffff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-phone:hover {
    background-color: #0a2d50;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(13, 59, 102, 0.15);
}

/* Réactivité pour les tablettes / petits écrans */
@media (max-width: 1024px) {
    .nav-links {
        gap: 14px;
    }
    .nav-links a:not(.btn-nav-reserve) {
        font-size: 0.85rem;
    }
    .btn-phone {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}
/* SECTION HERO / ACCUEIL */
.hero {
    background: linear-gradient(135deg, #f7fbfd 0%, #f0f7f9 100%);
    padding: 80px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
}

.hero-content h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 40px;
}

.hero-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.feat-item {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
}

.feat-item i {
    color: var(--secondary-color);
    margin-right: 5px;
}

.hero-image-placeholder {
    display: flex;
    justify-content: center;
}

.image-box {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    width: 350px;
    height: 350px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 5rem;
    box-shadow: 0 20px 40px rgba(0, 180, 216, 0.15);
}

/* SECTION À PROPOS */
.about-section {
    padding: 80px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat-card {
    background-color: var(--accent-color);
    padding: 40px 20px;
    border-radius: var(--border-radius);
    text-align: center;
}

.stat-card h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.stat-card p {
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: 600;
}

.about-text h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.about-text p {
    color: var(--text-light);
    margin-bottom: 25px;
}

/* --- carrousel --- */
.services-container {background: #f9f9f9; }
.section-title { text-align: center; margin-bottom: 40px; color: #0d3b66; font-size: 2rem; }

.mycard {
    background: white;
    padding: 50px;
    border-radius: 0px;
    box-shadow: 0 10px 30px rgba(38, 134, 230, 0.233);
    transition: transform 0.3s ease;
    text-align: center;
}

/* Ajustez ces valeurs dans votre CSS */
.services-container {
    padding: 90px 20px; /* Augmentez le padding haut/bas pour libérer de l'espace */
    overflow: visible;    /* Permet aux éléments agrandis de ne pas être coupés */
}

.swiper {
    padding: 50px 0;      /* Ajoute de l'espace interne autour des cartes */
    overflow: visible;    /* Important pour ne pas couper le zoom des cartes */
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
    transform: scale(6);
    opacity: 0.5;
    /* Assurez-vous qu'aucune largeur fixe trop petite ne contraint le zoom */
    min-width: 300px; 
}

/* État de la carte centrale active */
.swiper-slide-active {
    transform: scale(6);  /* La carte centrale est agrandie */
    opacity: 1;             /* Elle devient totalement opaque */
}
.mycard:hover { transform: translateY(-10px); border-color: #00bcd4; }
.mycard h4 { color: var(--secondary-color); margin-bottom: 10px; }
.mycard p { color: var(--primary-color); font-size: 0.9rem; }

/* Style des points de pagination */
.swiper-pagination-bullet-active { background: #00bcd4 !important; }
.swiper-slide {
    /* La transition définit la vitesse du passage de "petit" à "grand" */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
    transform: scale(0.85); 
    opacity: 0.3;
}

.swiper-slide-active {
    transform: scale(1.1);
    opacity: 1;
}

/* ==========================================================================
   SECTION ÉQUIPE MÉDICALE (CORRECTION CADRAGE IMAGE)
   ========================================================================== */
.medical-team {
    padding: 80px 0;
    background-color: var(--white);
    overflow: hidden; /* Sécurité anti-débordement global */
}

.grid-team {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.team-image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Le conteneur magique qui force le bon format (Style Portrait Framer) */
.doctor-badge-box {
    position: relative;
    width: 100%;
    max-width: 360px; /* Largeur maximale fixe */
    height: 440px;    /* Hauteur maximale fixe */
    border-radius: var(--border-radius);
    overflow: hidden; /* Coupe STRICTEMENT tout ce qui dépasse */
    box-shadow: 0 20px 40px rgba(13, 59, 102, 0.08);
    border: 1px solid rgba(0,0,0,0.05);
    background-color: #f4f9f9;
}

/* La règle magique pour l'image */
.doctor-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Recadre et zoome automatiquement sans déformer */
    object-position: center top; /* Centre le visage si la photo est coupée */
    display: block;
}

/* Bandeau texte moderne par-dessus la photo */
.doctor-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px;
    background: linear-gradient(transparent, rgba(7, 24, 41, 0.85));
    color: var(--white);
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 1.1rem;
}

.team-text h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 20px;
}

.lead-text {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 15px;
    border-left: 4px solid var(--secondary-color);
    padding-left: 15px;
}

.team-text p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.commitments-grid {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.commit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.commit-item i {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

/* Version tablettes et mobiles */
@media (max-width: 992px) {
    .grid-team {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .doctor-badge-box {
        max-width: 320px;
        height: 380px; /* Légèrement plus petit sur mobile pour garder l'harmonie */
    }
}

/* ==========================================================================
   FIXES VISUELS : ÉQUIPE MÉDICALE ET CONTACTS
   ========================================================================== */

/* 1. Sécurité pour que l'image du Docteur ne déborde jamais */
.doctor-badge-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 440px;
    border-radius: var(--border-radius);
    overflow: hidden; /* Découpe tout ce qui dépasse */
    box-shadow: 0 20px 40px rgba(13, 59, 102, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.doctor-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Ajuste l'image proportionnellement sans l'écraser */
    display: block;
}

/* 2. Section Contact & Horaires unifiée */
.contact-section {
    padding: 80px 0;
    background-color: #ffffff; /* Fond très léger pour détacher les blocs blancs */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes de largeurs identiques */
    gap: 40px;
    align-items: stretch; /* Force le bloc gauche et le bloc droit à avoir la même hauteur */
}

/* --- Style des Badges (Largeur ajustée au texte) --- */
.badge {
    text-align: center;
    justify-content: center;
    display: inline-block;    /* Force le cadre à épouser uniquement la taille du texte */
    width: max-content;       /* Sécurité pour s'adapter parfaitement au mot */
    padding: 6px 16px;        /* Espacement interne haut/bas et gauche/droite */
    background-color: var(--accent-color); /* Votre couleur de fond bleu très clair */
    color: var(--secondary-color);        /* Votre couleur de texte cyan/bleu */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;       /* Bords bien arrondis style Framer */
    margin-bottom: 15px;       /* Espace léger sous le badge avant le titre h2 */
}
/* Style commun aux deux conteneurs blancs */
.contact-block, .horaires-block {
    background-color: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 20px rgba(119, 151, 180, 0.154);
    border: 1px solid rgba(208, 220, 226, 0.086);
    display: flex;
    flex-direction: column;
}

.contact-block h2, .horaires-block h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 12px 0 25px 0;
}

/* Liste de contacts avec icônes corrigées */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-icon {
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.info-text h3 {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin: 0 0 2px 0;
    font-weight: 600;
}

.info-text p, .info-text a {
    color: var(--text-light);
    margin: 0;
    font-size: 0.95rem;
    text-decoration: none;
}

/* La carte Google s'adapte dynamiquement au bas du conteneur */
.map-container {
    width: 100%;
    flex-grow: 1; /* Remplit tout l'espace disponible vers le bas */
    min-height: 260px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Tableau des horaires */
.table-wrapper {
    margin: 20px 0 30px 0;
}

.horaires-table {
    width: 100%;
    border-collapse: collapse;
}

.horaires-table th {
    text-align: left;
    padding-bottom: 12px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    font-weight: 600;
}

.horaires-table td {
    padding: 14px 0;
    border-bottom: 1px solid var(--accent-color);
    vertical-align: top;
}

.day {
    color: var(--text-dark);
    font-weight: 500;
}

.hours {
    text-align: right;
    color: var(--text-light);
    line-height: 1.4;
}

.break {
    font-size: 0.85rem;
    color: #a0aec0;
}

.status-closed {
    color: #e63946;
    font-weight: 600;
}

/* Encadré d'information */
.horaires-notice {
    background-color: var(--accent-color);
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--primary-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto; /* Se cale tout en bas de son bloc */
}

.horaires-notice i {
    color: var(--secondary-color);
    margin-top: 2px;
}

/* Adaptation responsive pour tablettes et smartphones */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .map-container {
        height: 280px;
    }
}
/* PIED DE PAGE (FOOTER) */
footer {
    background-color: #071829;
    color: #cbd5e1;
    padding: 60px 0 20px 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-section h3 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-section.about p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-section.links ul {
    list-style: none;
}

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

.footer-section.links a {
    color: #cbd5e1;
    text-decoration: none;
    transition: var(--transition);
}

.footer-section.links a:hover {
    color: var(--secondary-color);
}

.footer-section.contact-meta p {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.footer-section.contact-meta a {
    color: inherit;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* BOUTON RETOUR EN HAUT */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: var(--transition);
}

#scrollToTopBtn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}

/* RESPONSIVE DESIGN (S'adapte sur mobile et tablette) */
@media (max-width: 992px) {
    .hero-grid, .about-grid, .grid-contact, .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-content h2 {
        font-size: 1.8rem;
    }
    .hero-image-placeholder {
        order: -1; /* L'illustration passe au dessus sur mobile */
    }
    .image-box {
        width: 100%;
        height: 250px;
    }
}

@media (max-width: 768px) {
    .header-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .nav-links {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   EFFETS D'APPARITION & MICRO-INTERACTIONS (STYLE FRAMER)
   ========================================================================== */

/* État initial de préparation (Caché) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* État final au défilement (Visible) */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Délais progressifs (Stagger effect) pour les grilles --- */

/* Grille des services */
.services-grid .service-card:nth-child(1) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.2s; }
.services-grid .services-grid .service-card:nth-child(3) { transition-delay: 0.3s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.4s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.5s; }
.services-grid .service-card:nth-child(6) { transition-delay: 0.6s; }

/* Blocs Statistiques */
.about-stats .stat-card:nth-child(1) { transition-delay: 0.1s; }
.about-stats .stat-card:nth-child(2) { transition-delay: 0.3s; }

/* Bloc Témoignages */
.testimonials-grid .testimonial-card:nth-child(1) { transition-delay: 0.1s; }
.testimonials-grid .testimonial-card:nth-child(2) { transition-delay: 0.3s; }

/* Bloc de contact asymétrique */
.contact-info-block { transition-delay: 0.1s; }
.horaires-block { transition-delay: 0.3s; }


/* --- Micro-interactions au survol (Hover effects) --- */

/* Liens de navigation avec soulignement dynamique */
.nav-links a {
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}
.nav-links a:hover::after {
    width: 100%;
}

/* --- Animation et Survol des cartes de services --- */
.service-card {
    background-color: var(--white);
    padding: 35px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
    
    /* On applique la transition fluide à la fois pour l'apparition et pour le survol */
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform, box-shadow;
}

/* Effet de survol complet (Une fois la carte visible) */
.service-card:hover {
    transform: translateY(-8px) !important; /* Force le soulèvement au survol même après l'apparition */
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Effet sur l'icône à l'intérieur au survol de la carte */
.service-card:hover .icon-box {
    background-color: var(--secondary-color);
    color: var(--white);
    transform: scale(1.08);
    transition: var(--transition);
}


/* Effet pulsant discret sur le logo médical */
.icon-logo {
    animation: heartPulse 2.5s infinite ease-in-out;
}

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

/* ==========================================================================
   DÉLIMITATION ET DESIGN DU BLOC DOCTOLIB (image_2235ea.png)
   ========================================================================== */
.doctolib-section-container {
    background-color: #fafbfc; /* Fond délimité contrasté */
    padding: 80px 0;
    text-align: center;
}

.doctolib-card-frame {
    background: #ffffff;
    max-width: 900px;
    margin: 40px auto 0 auto;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(13, 59, 102, 0.06);
    border: 1px solid rgba(0, 83, 135, 0.05);
}

.doctolib-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.doctolib-card-icon {
    font-size: 2.2rem;
    color: #005387;
}

.doctolib-card-brand {
    font-size: 1.8rem;
    font-weight: 800;
    color: #005387;
    letter-spacing: -1px;
}

.doctolib-card-instruction {
    color: #546e7a;
    max-width: 600px;
    margin: 0 auto 30px auto;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Conteneur de l'Iframe Doctolib */
.doctolib-iframe-wrapper {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e1e9f0;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
}

/* ==========================================================================
   EFFETS D'APPARITION FLUIDES (SCROLL REVEAL)
   ========================================================================== */
/* État initial de tous les éléments à animer */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* État actif déclenché par le JavaScript */
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optionnel : Délais progressifs pour un effet de cascade élégant */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* État initial : invisible et légèrement décalé vers le bas */
.scroll-reveal, section {
    opacity: 0;
    transform: translateY(30px);
    /* La transition doit se faire à l'aller ET au retour */
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* État actif : visible et à sa place d'origine */
.scroll-reveal.is-visible, section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   CONFIGURATION HEADER PRINCIPAL
   ========================================================================== */
.main-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    padding: 12px 0;
    position: relative; /* Clé pour l'alignement absolu des vagues */
}

/* ==========================================================================
   VAGUES EN HAUT COMPACTES ET COLLÉES (UPSIDE DOWN)
   ========================================================================== */
.top-page-waves-inverted {
    width: 100%;
    height: 30px;          /* Hauteur réduite pour resserrer la vague */
    overflow: hidden;
    background: #ffffff;
    margin: 0;
    padding: 0;
    display: block;
    transform: scaleY(-1); /* Mode upside-down */
}

.top-page-waves-inverted .waves-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* On colle le header immédiatement sous les vagues en réduisant ses marges */
.main-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    
    /* PADDING RÉDUIT : Ajuste l'espace au-dessus et en-dessous du texte du menu */
    padding: 0; 
    
    /* MARGIN-TOP NÉGATIF : Remonte le header pour le coller directement contre la vague */
    margin-top: 0px; 
}

/* Animations fluides */
.parallax-top > use {
    animation: move-top-waves 20s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax-top > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax-top > use:nth-child(2) { animation-delay: -3s; animation-duration: 11s; }
.parallax-top > use:nth-child(3) { animation-delay: -4s; animation-duration: 14s; }
.parallax-top > use:nth-child(4) { animation-delay: -5s; animation-duration: 18s; }

@keyframes move-top-waves {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

/* Ajustement pour les petits écrans mobiles */
@media (max-width: 768px) {
    .top-page-waves-inverted {
        height: 40px;
    }
    .main-header {
        margin-top: -5px;
        padding: 0;
    }
}

/* ==========================================================================
   MENU BURGER MOBILE
   ========================================================================== */

/* Bouton burger : caché sur desktop */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 2px solid rgba(13, 59, 102, 0.15);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 0.25s ease, background 0.25s ease;
    z-index: 1100;
}

.burger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #0d3b66;
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
    transform-origin: center;
}

.burger-btn:hover {
    background-color: #f0f7ff;
    border-color: #00bcd4;
}

/* Animation des 3 barres → croix */
.burger-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.burger-btn.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.burger-btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Panneau menu mobile */
.mobile-menu {
    display: none; /* toujours caché sur desktop */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 2px solid rgba(0, 188, 212, 0.2);
    box-shadow: 0 16px 40px rgba(13, 59, 102, 0.1);
    z-index: 999;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease;
    opacity: 0;
}

.mobile-menu.is-open {
    max-height: 600px;
    opacity: 1;
}

.mobile-nav {
    padding: 20px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mobile-nav-link {
    display: block;
    padding: 13px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0d3b66;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-nav-link:hover {
    color: #00bcd4;
    padding-left: 6px;
}

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

.mobile-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 24px;
    background-color: #0d3b66;
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.mobile-phone-btn:hover {
    background-color: #00bcd4;
    transform: translateY(-2px);
}

/* Activer le burger + masquer la nav desktop sur mobile */
@media (max-width: 768px) {
    .burger-btn {
        display: flex;
    }
    .main-nav,
    .nav-cta {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
    .header-flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        text-align: left;
        padding: 12px 20px;
    }
}