/* =================================================================== */
/* VARIABLES DE COULEURS ET STYLES GLOBAUX (LA PALETTE DU PEINTRE) */
/* =================================================================== */
/* Ici, on définit toutes les couleurs et certains styles qu'on va réutiliser partout. */
/* C'est comme préparer ses pots de peinture avant de commencer à peindre. */
:root {
    /* Palette de couleurs principale */
    --primary-green: #529b76; /* Vert principal */
    --sage-green: #74a386; /* Vert sauge */
    --soft-green: #b6cbbf; /* Vert doux */
    --light-gray-green: #dde4e3; /* Gris-vert clair */
    --pure-white: #ffffff; /* Blanc pur */
    --warm-white: #faf9f6; /* Blanc chaud */
    --deep-teal: #4a7c7a; /* Sarcelle foncé (pour le texte) */
    --warm-beige: #f2ede6; /* Beige chaud */
    --soft-coral: #e8a87c; /* Corail doux (pour les accents) */

    /* Variables globales utilisées dans tout le site */
    --color-primary: var(--primary-green);
    --color-secondary: var(--sage-green);
    --color-accent: var(--soft-coral);
    --color-background: var(--pure-white);
    --color-text: var(--deep-teal);
    --text-dark: var(--deep-teal); /* Used in hero section */
    
    /* Neutral colors for UI elements */
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    
    /* Couleurs héritées pour compatibilité */
    --primary-color: var(--primary-green);
    --primary-light: #A23B72; /* Utilisé dans les animations flottantes */
    --white: var(--pure-white);
    --text-light: #6C7B7F; /* Utilisé pour les textes secondaires */

    /* Styles pour les ombres, bordures et animations */
    --shadow: 0 2px 10px rgba(0,0,0,0.07); /* Une petite ombre discrète */
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.12); /* Une ombre un peu plus grande quand on passe la souris */
    --border-radius: 8px; /* Pour avoir des coins arrondis */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Une animation douce pour les changements */
}

/* Style pour cacher le champ anti-spam (pot de miel) */
.honeypot-field {
    position: absolute !important;
    left: -5000px !important;
    top: -5000px !important;
}

/* Base style for all interactive elements to ensure minimum touch target sizes */
button,
input[type="submit"],
input[type="button"],
a[role="button"],
a.btn,
select,
.nav-link,
.lang-link {
    min-height: 44px;
    min-width: 44px;
}

/* =================================================================== */
/* STYLES DE BASE (LES FONDATIONS DE LA MAISON) */
/* =================================================================== */
/* On remet à zéro les styles par défaut du navigateur. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* On définit les styles pour tout le corps de la page. */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; /* La police d'écriture */
    line-height: 1.6; /* L'espace entre les lignes de texte */
    color: var(--color-text); /* La couleur du texte par défaut */
    background: var(--color-background); /* La couleur de fond de la page */
    scroll-behavior: smooth; /* Pour que le défilement soit doux quand on clique sur un lien du menu */
}

/* =================================================================== */
/* BARRE DE NAVIGATION (LE MENU EN HAUT) */
/* =================================================================== */
.navbar {
    position: fixed; /* Le menu reste visible même quand on défile */
    top: 0;
    left: 0;
    width: 100%;
    background: var(--pure-white);
    backdrop-filter: blur(10px); /* Un effet de flou derrière le menu */
    border-bottom: 1px solid var(--light-gray-green); /* Une petite ligne en bas du menu */
    z-index: 1000; /* Pour que le menu soit toujours au-dessus de tout le reste */
    transition: var(--transition);
    color: var(--color-primary);
}

.navbar .nav-title span,
.navbar .nav-title small {
  color: var(--color-primary);
}

.nav-container {
    max-width: 1200px; /* La largeur maximale du contenu du menu */
    margin: 0 auto; /* Pour centrer le contenu */
    display: flex; /* Aligne les éléments les uns à côté des autres */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: space-between; /* Met de l'espace entre le logo et les liens */
    padding: 1rem clamp(1rem, 5vw, 2rem);
    width: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.nav-title span {
    font-size: 1.2rem;
    font-weight: 600;
}

.nav-title small {
    font-size: 0.9rem;
    color: #888;
    margin-top: 2px;
}

.nav-menu {
    display: flex;
    gap: 2rem; /* Espace entre les liens du menu */
    align-items: center;
}

/* Add active state for mobile menu animation */
@media (max-width: 768px) {
    .nav-menu {
        transition-property: transform, opacity, visibility;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        visibility: hidden;
    }
    
    .nav-menu.active {
        visibility: visible;
    }
}

.nav-link {
    text-decoration: none; /* Enlève le soulignement des liens */
    color: var(--color-text);
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    transition: var(--transition);
}

/* Improved touch targets on mobile */
@media (max-width: 768px) {
    .nav-link {
        padding: 0.75rem 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Style pour un lien quand il est actif */
.nav-link.active {
    color: var(--color-primary);
}

/* Style hover uniquement pour les appareils avec souris (pas tactile) */
@media (hover: hover) {
    .nav-link:hover {
        color: var(--color-primary);
    }
}

/* La petite barre qui apparaît sous le lien actif */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: var(--transition);
}

/* Barre sous le lien actif */
.nav-link.active::after {
    width: 100%; /* La barre prend toute la largeur du lien */
}

/* Animation de la barre uniquement sur les appareils avec souris */
@media (hover: hover) {
    .nav-link:hover::after {
        width: 100%;
    }
}

/* =================================================================== */
/* LANGUAGE SELECTOR STYLES */
/* =================================================================== */
.language-selector {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
    gap: 0.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-neutral-300);
}

.lang-link {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    transition: var(--transition);
}

/* Improved touch targets on mobile */
@media (max-width: 768px) {
    .lang-link {
        padding: 0.5rem 1rem;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.lang-link:hover {
    background-color: var(--color-neutral-200);
    color: var(--color-primary);
}

.lang-link.active {
    background-color: var(--color-primary);
    color: var(--color-background);
}

/* Le bouton "hamburger" pour les petits écrans (téléphones) */
.nav-toggle {
    display: none; /* Caché par défaut */
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--color-text);
    transition: var(--transition);
    display: block;
}

.site-logo {
    height: 40px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    filter: none;
}

/* =================================================================== */
/* SECTION HÉROS (LA GRANDE IMAGE D'ACCUEIL) */
/* =================================================================== */
.hero {
    min-height: 100vh; /* Prend toute la hauteur de l'écran */
    display: flex;
    align-items: center; /* Centre le contenu verticalement */
    justify-content: center; /* Centre le contenu horizontalement */
    position: relative;
    overflow: hidden; /* Cache ce qui dépasse */
    padding: clamp(1rem, 5vw, 2rem);
    color: var(--text-dark);
}

/* L'image de fond de la section héros */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/profil_003.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(30%) brightness(0.9);
    opacity: 0.90;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero::before {
        background-image: url('images/profil_003_mob.webp');
    }
}

/* Un dégradé de couleur par-dessus l'image pour que le texte soit plus lisible */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Dégradé blanc en bas pour transition douce et progressive vers section suivante */
        linear-gradient(to top,
            rgba(255, 255, 255, 1) 0%,      /* Blanc opaque en bas */
            rgba(255, 255, 255, 0.8) 15%,   /* Blanc semi-transparent */
            rgba(255, 255, 255, 0.3) 30%,   /* Blanc très léger */
            transparent 50%                  /* Transparent */
        ),
        /* Overlay général avec dégradé diagonal */
        linear-gradient(135deg, var(--warm-white) 0%, var(--light-gray-green) 100%);
    opacity: 0.85;
    z-index: 2;
}

/* Les petites bulles décoratives qui flottent */
.floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
    border-radius: 50%; /* Pour faire un cercle */
    opacity: 0.1;
    animation: float 6s ease-in-out infinite; /* L'animation qui les fait bouger */
    z-index: 4;
}

.floating-element:nth-child(1) { top: 20%; left: 5%; animation-delay: 0s; }
.floating-element:nth-child(2) { top: 60%; right: 10%; animation-delay: 2s; }
.floating-element:nth-child(3) { bottom: 16%; left: 20%; animation-delay: 4s; }

/* L'animation "float" qui fait monter et descendre les bulles */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Le contenu de la section héros (titres, texte, boutons) */
.hero-content {
    text-align: center;
    max-width: 800px;
    position: relative;
    z-index: 3; /* Pour être sûr que le texte est au-dessus des fonds */
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: clamp(0.75rem, 3vw, 1rem);
    animation: fadeInUp 0.8s ease; /* Animation d'apparition */
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--color-secondary);
    margin-bottom: clamp(1.5rem, 5vw, 2rem);
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: clamp(2rem, 5vw, 3rem);
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    animation: fadeInUp 0.8s ease 0.6s both;
}

/* =================================================================== */
/* STYLES GÉNÉRAUX POUR LES SECTIONS */
/* =================================================================== */
.content-section {
    padding: clamp(3rem, 10vw, 6rem) clamp(1rem, 5vw, 2rem); /* Espace à l'intérieur des sections qui s'adapte */
    background: var(--color-background);
    position: relative; /* Nécessaire pour les pseudo-éléments qui créent le flou aux bordures */
}

.bg-light {
    background: var(--light-gray-green); /* Pour les sections avec un fond légèrement coloré */
}

/* =================================================================== */
/* EFFET DE FLOU/FONDU AUX BORDURES DES SECTIONS */
/* =================================================================== */
/* TRANSITION SIMPLE : Uniquement en BAS des sections */
/* Les transitions en HAUT sont désactivées (commentées ci-dessous) */

/* ============ TRANSITION DOUBLE (DÉSACTIVÉE) ============
   Décommentez ce bloc pour réactiver les transitions en HAUT des sections blanches

.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom,
        rgba(235, 242, 235, 1) 0%,
        rgba(235, 242, 235, 0.7) 30%,
        rgba(235, 242, 235, 0.3) 70%,
        rgba(235, 242, 235, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}
============ FIN TRANSITION DOUBLE ============ */

/* Flou/fondu en BAS de chaque section blanche - Dégradé vers vert */
.content-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Hauteur augmentée pour créer zone de transition floue */
    background: linear-gradient(to top,
        rgba(221, 228, 227, 1) 0%,       /* Vert clair opaque en bas */
        rgba(221, 228, 227, 0.7) 30%,    /* Vert semi-transparent */
        rgba(221, 228, 227, 0.3) 70%,    /* Vert très léger */
        rgba(221, 228, 227, 0) 100%      /* Transparent - fond blanc visible */
    );
    pointer-events: none; /* Ne bloque pas les interactions avec le contenu */
    z-index: 1;
}

/* ============ TRANSITION DOUBLE (DÉSACTIVÉE) ============
   Décommentez ce bloc pour réactiver les transitions en HAUT des sections vertes

.content-section.bg-light::before {
    height: 100px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 30%,
        rgba(255, 255, 255, 0.3) 70%,
        rgba(255, 255, 255, 0) 100%
    );
}
============ FIN TRANSITION DOUBLE ============ */

.content-section.bg-light::after {
    height: 100px; /* Hauteur augmentée pour créer zone de transition floue */
    background: linear-gradient(to top,
        rgba(255, 255, 255, 1) 0%,       /* Blanc opaque en bas */
        rgba(255, 255, 255, 0.7) 30%,    /* Blanc semi-transparent */
        rgba(255, 255, 255, 0.3) 70%,    /* Blanc très léger */
        rgba(255, 255, 255, 0) 100%      /* Transparent - fond vert visible */
    );
}

.container {
    max-width: 1200px;
    margin: 0 auto; /* Centre le contenu des sections */
    width: 100%;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

.content-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    color: var(--color-primary);
}

.section-grid {
    display: grid;
    gap: 4rem;
    align-items: center;
}

.content-section h3 {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem);
}

.content-section h4 {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--color-secondary);
    margin-top: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

/* Style pour les citations */
.content-section blockquote {
    margin: 2rem 0;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    background-color: var(--warm-beige);
    border-left: 4px solid var(--color-secondary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-style: italic;
    font-size: 1.05rem;
    position: relative;
    color: var(--text-dark);
}

.content-section blockquote::before {
    content: '“'; /* Ajoute un grand guillemet décoratif */
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    font-size: 3.5rem;
    color: var(--color-secondary);
    opacity: 0.2;
    line-height: 1;
}

/* Fond spécial pour la section Ostéopathie */
#osteopathie {
    position: relative;
    isolation: isolate;
}

#osteopathie::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/image_0003.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%);
}


/* =================================================================== */
/* BOUTONS */
/* =================================================================== */
.btn {
    display: inline-block;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    min-height: 44px;
    min-width: 44px;
}

.btn.primary {
    background: var(--color-accent);
    color: var(--pure-white);
    border: none;
}

.btn.primary:hover {
    background: var(--color-primary);
    color: var(--pure-white);
    transform: translateY(-2px); /* Le bouton remonte un peu */
    box-shadow: var(--shadow-hover);
}

.btn.secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

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

/* =================================================================== */
/* COMPOSANTS SPÉCIFIQUES (CARTES, TIMELINE, ETC.) */
/* =================================================================== */

/* Grille pour les principes de l'ostéopathie */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crée des colonnes qui s'adaptent */
    gap: 2rem;
    margin: 2rem 0;
}

.principle-card {
    background: var(--pure-white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.principle-card h5 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: clamp(1.1rem, 2vw, 1.2rem);
}

/* Ligne du temps pour la formation */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* La ligne verticale au milieu */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: var(--primary-color);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    position: relative;
}

/* Le petit cercle sur la ligne */
.timeline-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: var(--white);
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    z-index: 2;
}

.timeline-marker.active {
    background: var(--primary-color);
}

.timeline-content {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 45%;
    margin-left: 55%;
}

/* Alterne les boîtes à gauche et à droite */
.timeline-item:nth-child(even) .timeline-content {
    margin-left: 0;
    margin-right: 55%;
}

/* Cartes pour les spécialisations */
.specializations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.spec-card {
    background: var(--pure-white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.spec-card h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.spec-details {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E5E7EB;
}

.spec-details h4 {
    color: var(--color-text);
    margin-bottom: 1rem;
    font-size: clamp(1rem, 2vw, 1.1rem);
}

.spec-details ul {
    list-style: none;
    padding-left: 0;
}

.spec-details li {
    padding: 0.3rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.spec-details li::before {
    content: '→'; /* Petite flèche décorative */
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* Section "Renvoi site kiné" */
.integration-section-2 {
    background: var(--warm-beige);
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 6vw, 3rem);
    border-radius: var(--border-radius);
    text-align: center;
    margin-bottom: clamp(3rem, 8vw, 4rem);
}

.integration-section-2 .nav-link {
    display: inline-block;
    width: auto;
}

/* Section "Intégration Ostéopathique" */
.integration-section {
    background: var(--warm-beige);
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 6vw, 3rem);
    border-radius: var(--border-radius);
    text-align: center;
}

.integration-section h3 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Grille pour les horaires et tarifs */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
}

.schedule-card, .pricing-card {
    background: var(--pure-white);
    padding: clamp(1.5rem, 4vw, 2rem);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.schedule-card h3, .pricing-card h3 {
    color: var(--color-primary);
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.schedule-list {
    margin-bottom: 2rem;
}

.day-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #E5E7EB;
}

.day-item:last-child {
    border-bottom: none;
}

.hours.closed {
    color: var(--text-light);
    font-style: italic;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 2rem;
}

.price {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: var(--color-primary);
}

.pricing-info h4 {
    color: var(--color-text);
    margin-bottom: 1rem;
}

/* Liste pour les exemples de remboursement */
.treatment-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.treatment-list li {
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
    border-bottom: 1px solid rgba(46, 134, 171, 0.1);
}

.treatment-list li::before {
    content: '✓'; /* Petit check décoratif */
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-weight: bold;
}

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

.contact-form, .contact-info {
    background: var(--pure-white);
    padding: clamp(1.5rem, 4vw, 2rem);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* Formulaire de contact */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
    min-height: 44px;
}

/* Style quand on clique dans un champ du formulaire */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.1);
}

.form-note {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    color: var(--text-light);
    margin-top: 1rem;
}

/* =================================================================== */
/* PIED DE PAGE (LA FIN DE LA PAGE) */
/* =================================================================== */
.footer {
    background: var(--color-text);
    color: var(--pure-white);
    padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 5vw, 2rem) clamp(0.75rem, 2vw, 1rem);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur petits écrans */
    justify-content: center; /* Centre les colonnes */
    gap: 2rem;
}

.footer-section {
    width: 280px; /* Donne une largeur fixe aux colonnes */
    text-align: left; /* Le texte dans les colonnes est aligné à gauche */
}

.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--color-secondary);
    font-size: clamp(1.1rem, 2vw, 1.25rem);
}

.footer-section ul {
    list-style: none;
    padding-left: 0;
}

.footer-section ul li {
    padding: 0.25rem 0;
}

.footer-bottom {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    color: rgba(255,255,255,0.7);
}

/* =================================================================== */
/* ANIMATIONS */
/* =================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Liste pour les indications de l'ostéopathie */
.indication-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.indication-list li {
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
    border-bottom: 1px solid rgba(46, 134, 171, 0.1);
}

.indication-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-weight: bold;
}

/* =================================================================== */
/* RESPONSIVE DESIGN (POUR QUE ÇA MARCHE SUR LES TÉLÉPHONES) */
/* =================================================================== */
/* Pour les tablettes et écrans plus petits */
@media (max-width: 768px) {
    .language-selector {
        margin-left: 0;
        margin-top: 1rem;
        padding-left: 0;
        padding-top: 1rem;
        border-left: none;
        border-top: 1px solid var(--color-neutral-300);
        width: 100%;
        justify-content: center;
    }

    .lang-link {
        padding: 0.5rem 1rem;
    }

    .nav-menu {
            position: fixed;
            top: 70px;
            left: -100%; /* Caché sur le côté */
            width: 100%;
            height: calc(100vh - 70px);
            background: var(--white);
            flex-direction: column;
            justify-content: flex-start;
            padding: 2rem;
            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            opacity: 0;
            overflow-y: auto; /* Enable scrolling for small screens */
        }
    
        .nav-menu.active {
            left: 0; /* Apparaît quand on clique sur le hamburger */
            opacity: 1;
        }

    .nav-toggle {
            display: flex; /* Affiche le bouton hamburger */
        }
    
        /* Animation du bouton hamburger qui se transforme en croix */
        .nav-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }
        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        .nav-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }
        
        /* Improved spacing for mobile menu items */
        .nav-link {
            margin: 0.5rem 0;
            padding: 0.75rem;
            width: 100%;
        }

    .hero h1 { font-size: 2.5rem; margin-top: 12vh; }
    .hero-description { margin-top: 15vh; }
    .hero-cta { flex-direction: column; align-items: center; }
    .btn { width: 100%; text-align: center; max-width: 300px; }
    .content-section { padding: 4rem 1rem; }
    .content-section h2 { font-size: 2rem; }

    /* Ajustements pour la timeline sur mobile */
    .timeline::before { left: 20px; }
    .timeline-marker { left: 20px; transform: translateX(-50%); }
    .timeline-content { width: auto; margin-left: 50px; margin-right: 0; }
    .timeline-item:nth-child(even) .timeline-content { margin-left: 50px; margin-right: 0; }

    /* Les grilles passent à une seule colonne */
    .specializations-grid,
    .info-grid,
    .contact-grid,
    .principles-grid {
        grid-template-columns: 1fr;
    }

    /* Image de fond petits écrans */
    .hero::before {
        background-image: url('images/profil_003_mob.webp');
        background-position: 65% 30%; /* Centré sur mobile */
    }

}

/* Pour les téléphones moyens */
@media (max-width: 600px) {
    .nav-container {
        padding: 0.75rem 1rem;
    }
    
    .hero h1 {
        margin-top: 10vh;
    }
    
    .specializations-grid,
    .info-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 5vw, 3rem);
    }
    
    /* Make smaller touch targets on mobile */
    .nav-link, .lang-link, .btn {
        touch-action: manipulation;
    }
    
    .hero::before {
        background-image: url('images/profil_003_mob.webp');
        background-position: 65% 25%;
    }
}

/* Pour les téléphones petits */
@media (max-width: 480px) {
    /* Adjust grid items to be less than the 400px minimum */
    .specializations-grid,
    .info-grid,
    .contact-grid {
        grid-template-columns: minmax(280px, 1fr);
    }
    
    .hero::before {
        background-position: 65% 35%;
    }
    
    /* Prevent oversized elements */
    .timeline-content {
        padding: 1rem;
    }
    
    /* Ensure buttons have appropriate spacing */
    .hero-cta .btn {
        margin-bottom: 0.75rem;
    }
}

/* Pour les téléphones tout petits */
@media (max-width: 360px) {
    .nav-title span {
        font-size: 1rem;
    }
    
    .nav-title small {
        font-size: 0.8rem;
    }
    
    .site-logo {
        height: 35px;
        margin-right: 8px;
    }
    
    .hero::before {
        background-position: 66% 40%;
    }
}

/* =================================================================== */
/* SECTION EXPLICATION D.O. (DIPLÔME) */
/* =================================================================== */
/* Styles pour la section expliquant le diplôme D.O. */

.do-explanation-section {
    background: linear-gradient(135deg, var(--warm-white) 0%, var(--light-gray-green) 50%, var(--warm-white) 100%);
}

.do-explanation {
    background: var(--pure-white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--color-primary);
}

.do-explanation h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.do-explanation p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
}

.do-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.do-highlight-item {
    background: var(--warm-beige);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
}

.do-highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.do-highlight-item strong {
    display: block;
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.do-highlight-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* =================================================================== */
/* SECTION FAQ (QUESTIONS FRÉQUENTES) */
/* =================================================================== */
/* Styles pour la section FAQ avec questions/réponses */

.section-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.faq-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: var(--pure-white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-left: 4px solid var(--color-primary);
}

.faq-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateX(5px);
}

.faq-question {
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.faq-answer {
    color: var(--color-text);
    line-height: 1.8;
}

.faq-answer p {
    margin-bottom: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.faq-answer a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* =================================================================== */
/* SECTION TÉMOIGNAGES */
/* =================================================================== */
/* Styles pour les témoignages patients */

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

.testimonial-card {
    background: var(--pure-white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
}

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

.testimonial-stars {
    color: var(--soft-coral);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.testimonial-author {
    font-weight: 600;
    color: var(--color-primary);
    text-align: right;
    margin: 0;
}

/* Section Google Reviews intégrée */
.google-reviews-section {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid var(--light-gray-green);
}

.google-reviews-section h3 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.google-reviews-section > p {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.google-reviews-container {
    min-height: 200px;
    background: var(--warm-white);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 2rem;
}

.testimonials-cta {
    text-align: center;
    padding: 2rem;
    background: var(--warm-beige);
    border-radius: var(--border-radius);
}

.testimonials-cta p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* =================================================================== */
/* RESPONSIVE DESIGN - NOUVELLES SECTIONS */
/* =================================================================== */

@media (max-width: 768px) {
    .do-explanation {
        padding: 1.5rem;
    }

    .do-highlights {
        grid-template-columns: 1fr;
    }

    .faq-item {
        padding: 1.5rem;
    }

    .faq-question {
        font-size: 1.1rem;
    }

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

/* ============================================
   GOOGLE REVIEWS CAROUSEL - HORIZONTAL LAYOUT
   ============================================
   Modern horizontal carousel with 2 cards on desktop,
   1 card on mobile, with smooth navigation arrows
   ============================================ */

.google-reviews-widget-container {
    padding: 0;
    margin: 2rem 0;
}

/* Carousel wrapper with navigation arrows */
.google-reviews-carousel {
    position: relative;
    overflow: visible;
    padding: 0 60px; /* Space for arrows on desktop */
}

/* Mobile: reduce arrow spacing */
@media (max-width: 768px) {
    .google-reviews-carousel {
        padding: 0 45px;
    }
}

/* The actual slider container that holds cards */
.testimonials-slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 1rem 0;
}

/* Hide scrollbar for Chrome/Safari */
.testimonials-slider::-webkit-scrollbar {
    display: none;
}

/* Desktop: Show 2 cards at a time */
@media (min-width: 769px) {
    .testimonials-slider {
        gap: 2rem;
    }
    
    .testimonial-card {
        flex: 0 0 calc(50% - 1rem);
        scroll-snap-align: start;
    }
}

/* Mobile: Show 1 card at a time */
@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
}

/* Individual testimonial card styling */
.testimonial-card {
    background: var(--pure-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.5rem; /* Reduced from 2rem */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced from 1rem */
    transition: var(--transition);
    min-height: 200px; /* Reduced height for more compact cards */
}

.testimonial-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Navigation arrows - Desktop */
@media (min-width: 769px) {
    .testimonial-card {
        padding: 1.75rem; /* Slightly more padding on desktop */
        min-height: 220px;
    }

    .prev-testimonial,
    .next-testimonial {
        position: absolute;
        top: 65%;
        transform: translateY(-50%);
        background: var(--color-primary);
        color: var(--pure-white);
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 2rem; /* Larger arrows */
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: var(--transition);
        box-shadow: var(--shadow);
    }

    .prev-testimonial {
        left: 0;
    }

    .next-testimonial {
        right: 0;
    }

    .prev-testimonial:hover,
    .next-testimonial:hover {
        background: var(--color-accent);
        box-shadow: var(--shadow-hover);
        transform: translateY(-50%) scale(1.1);
    }
}

/* Navigation arrows - Mobile */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 1.25rem; /* Even more compact on mobile */
        min-height: 180px;
    }

    .prev-testimonial,
    .next-testimonial {
        position: absolute;
        top: 65%;
        transform: translateY(-50%);
        background: var(--color-primary);
        color: var(--pure-white);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.5rem; /* Larger arrows for mobile too */
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: var(--transition);
        box-shadow: var(--shadow);
    }

    .prev-testimonial {
        left: 5px;
    }

    .next-testimonial {
        right: 5px;
    }

    .prev-testimonial:active,
    .next-testimonial:active {
        background: var(--color-accent);
        transform: translateY(-50%) scale(0.95);
    }
}

/* Hide the indicators container since we removed it */
.testimonial-indicators {
    display: none;
}

/* Pulse animation for loading state */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

#google-reviews-loading-fr p,
#google-reviews-loading-en p {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Additional styles from plan for consistency */
.google-review-card .testimonial-content {
    font-style: italic;
    color: var(--color-neutral-700);
    line-height: 1.6;
    position: relative;
}

.google-review-card .testimonial-content::before {
    content: '"';
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
    font-size: 3rem;
    color: var(--color-primary-300);
    opacity: 0.3;
    line-height: 1;
}

.google-review-card .testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem; /* var(--space-md) */
}

.google-review-card .author-info h4 {
    margin: 0;
    font-size: 1.25rem; /* var(--font-size-lg) */
    color: var(--color-primary-600);
}

.google-review-card .author-info p {
    margin: 0;
    font-size: 0.875rem; /* var(--font-size-sm) */
    color: var(--color-neutral-600);
}

/* Navigation styles from plan */
.google-reviews-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* var(--space-md) */
    margin-top: 2rem; /* var(--space-lg) */
}

.google-reviews-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary-500);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
}

.google-reviews-nav button:hover {
    background: var(--color-primary-600);
}

.google-reviews-indicators {
    display: flex;
    gap: 0.5rem; /* var(--space-xs) */
}

.google-reviews-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-neutral-300);
    cursor: pointer;
    transition: var(--transition-normal);
}

.google-reviews-indicator.active {
    background: var(--color-primary-500);
    transform: scale(1.3);
}

/* Accessibility improvements */
.google-review-card:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.carousel-arrow:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Print media: hide Google reviews to save ink */
@media print {
    .google-reviews-widget-container {
        display: none;
    }
}