/* ==========================================================================
   CSS COMPLET ET NETTOYÉ - CHLOÉ LE COZLEER
   ========================================================================== */

/* --- 1. Style Général & Variables (Le fond et la police) --- */
body {
    font-family: 'Lora', serif; /* Police douce pour le texte */
    line-height: 1.8;
    background-color: #fcf9f5; /* Fond crème doux et chaleureux */
    color: #3e3835; /* Brun très foncé pour adoucir le noir brut */
    margin: 0;
    padding: 0;
}

/* --- 2. En-tête (Header) --- */
header {
    text-align: center;
    padding: 60px 20px 40px 20px;
    background: radial-gradient(circle at top, #fdf6ee 0%, transparent 70%); /* Léger halo lumineux */
}

.site-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 25px;
    filter: drop-shadow(0 4px 6px rgba(166, 124, 82, 0.15)); /* Ombre douce sous le logo */
}

header h1 {
    font-family: 'Playfair Display', serif; /* Police élégante pour le nom */
    margin: 0;
    color: #2b2523; /* Brun très sombre */
    font-size: 2.8em;
    font-weight: 700;
}

header p {
    margin: 10px 0 0 0;
    font-size: 1.2em;
    color: #a67c52; /* Ton terre cuite de ta carte de visite */
    font-weight: 400;
    letter-spacing: 1px;
}

/* --- 3. Menu de Navigation --- */
.navigation-menu {
    margin-top: 35px;
}

.nav-link {
    display: inline-block;
    color: #7a706b; /* Gris-brun doux */
    text-decoration: none;
    padding: 10px 20px;
    margin: 0 8px;
    font-family: 'Lora', serif;
    font-weight: normal;
    border-bottom: 2px solid transparent; /* Prépare le trait du dessous */
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #a67c52; /* Passe en terre cuite au survol */
}

.nav-link.active {
    color: #a67c52;
    font-weight: bold;
    border-bottom: 2px solid #a67c52; /* Trait terre cuite sous la page active */
}

/* --- 4. Conteneur principal (Main) --- */
main {
    max-width: 850px; /* Largeur de lecture confortable */
    margin: 0 auto 80px auto; /* Centre la page et laisse de l'espace en bas */
    padding: 0 20px;
}

section {
    background: #ffffff !important; /* Force le fond blanc de la bulle */
    padding: 40px;
    margin: 0 auto 35px auto !important; /* Centre la bulle et crée l'espace en dessous */
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(166, 124, 82, 0.06), 0 5px 15px rgba(0, 0, 0, 0.02) !important; /* Recrée l'ombre */
    border: 1px solid #f3eae0;
    width: 750px; /* <--- FIXE POUR ORDINATEUR : Redevient strictement comme avant */
    max-width: 100%; 
    box-sizing: border-box;
}

/* --- ZONE MOBILE ET TABLETTE (Uniquement pour les écrans de moins de 768px) --- */
@media (max-width: 768px) {
    section {
        width: 90% !important;        /* Force la bulle à rétrécir sur téléphone */
        padding: 20px !important;     /* Réduit le padding pour laisser de la place au texte */
        margin: 0 auto 25px auto !important; /* Force le centrage parfait (auto gauche/droite) */
    }
}


/* Style spécifique pour la section Tarifs pour la démarquer légèrement */
#tarifs {
    background-color: #fdfaf7; /* Fond très légèrement rosé/crème */
    border: 1px solid #ebdcd0;
}

h2 {
    font-family: 'Playfair Display', serif;
    color: #a67c52; /* Terre cuite pour les titres */
    border-bottom: 1px solid #e8ded4; /* Trait de séparation fin */
    padding-bottom: 15px;
    margin-top: 0;
    font-size: 1.9em;
}

/* --- 6. Personnalisation des listes (Puces élégantes) --- */
ul {
    padding-left: 15px;
}

li {
    margin-bottom: 12px;
}

/* Remplace les puces rondes noires par des points terre cuite */
section ul {
    list-style: none;
    padding-left: 0;
}

section ul li {
    position: relative;
    padding-left: 25px;
}

section ul li::before {
    content: "•"; /* Le caractère de la puce */
    color: #a67c52; /* Couleur terre cuite */
    font-size: 1.5em;
    position: absolute;
    left: 5px;
    top: -4px; /* Ajuste la hauteur de la puce */
}

/* --- 7. Page Infos Pratiques : Grid et Horaires --- */
.pratique-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 40px;
}

/* Adaptation pour les téléphones */
@media (max-width: 600px) {
    .pratique-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 20px;
    }
}

/* Encadré stylisé pour les horaires */
.horaires-box {
    background: #fdfbf9;
    border-left: 3px solid #a67c52; /* Trait décoratif à gauche */
    padding: 20px;
    border-radius: 0 15px 15px 0;
}

.horaires-list {
    list-style: none !important; /* Enlève les puces ici */
    padding-left: 0 !important;
    margin-top: 15px;
}

.horaires-list li {
    display: flex;
    justify-content: space-between; /* Aligne jour à gauche, heures à droite */
    padding-left: 0 !important;
    border-bottom: 1px dashed #eedfd3; /* Petite ligne pointillée */
    padding-bottom: 5px;
    font-size: 0.95em;
}

/* S'assure qu'aucune puce n'apparaît dans les horaires */
.horaires-list li::before {
    display: none !important;
}

/* --- 8. Éléments interactifs et Boutons --- */
strong {
    color: #2b2523; /* Plus sombre pour faire ressortir le gras */
}

/* Petit encadré pour l'info de paiement */
.paiement-info {
    font-size: 0.95em;
    background: #f4ece4;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
}

/* Zone qui contient les deux boutons */
.action-buttons {
    text-align: center;
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Empile les boutons sur mobile */
}

/* LE BOUTON PRINCIPAL : Liste d'attente (Plein Terre Cuite) */
.btn-attente {
    display: inline-block;
    background-color: #a67c52; /* Terre cuite de ta carte */
    color: white;
    padding: 16px 36px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-family: 'Lora', serif;
    box-shadow: 0 6px 20px rgba(166, 124, 82, 0.25); /* Ombre portée douce */
    transition: all 0.3s ease;
}

.btn-attente:hover {
    background-color: #8c633c; /* Plus foncé au survol */
    transform: translateY(-2px); /* Monte légèrement */
    box-shadow: 0 8px 25px rgba(166, 124, 82, 0.35); /* Ombre plus forte */
}

/* LE BOUTON SECONDAIRE : Doctolib (Contour seul) */
.btn-doctolib-secondaire {
    display: inline-block;
    background-color: transparent; /* Fond transparent */
    color: #a67c52; /* Texte terre cuite */
    border: 2px solid #a67c52; /* Bordure terre cuite */
    padding: 14px 32px; /* Un peu plus petit pour le contour */
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-family: 'Lora', serif;
    transition: all 0.3s ease;
}

.btn-doctolib-secondaire:hover {
    background-color: #fdf6ee; /* Léger fond crème au survol */
    transform: translateY(-2px);
}

/* --- 9. Pied de page (Footer) --- */
footer {
    background-color: #2b2523; /* Brun très foncé, élégant pour fermer le site */
    color: #e5deda; /* Texte clair */
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}/* Ce code s'applique uniquement aux écrans de moins de 768px (les téléphones) */
@media (max-width: 768px) {
    
    /* Force le site à ne pas dépasser en largeur */
    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    /* Si tu as une structure en colonnes (ex: flexbox), on les empile verticalement */
    .container, .flex-container, section {
        flex-direction: column !important;
        padding: 15px !important;
    }

    /* On réduit la taille des gros titres pour qu'ils ne coupent pas */
    h1 {
        font-size: 1.8rem !important;
    }
    h2 {
        font-size: 1.5rem !important;
    }

    /* On ajuste les images pour qu'elles ne débordent pas */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}/* Retire le bleu moche de l'iPhone et applique ta propre couleur */
/* Uniquement pour le numéro sous le titre principal */
.num-entete {
    color: #b08554 !important; /* Ton marron */
    text-decoration: none !important; /* Pas de soulignement */
    font-weight: bold;
}

/* Uniquement pour le numéro du bas dans le texte de contact */
.num-contact {
    color: #333333 !important; /* Noir/Gris normal */
    text-decoration: none !important;
    white-space: nowrap !important; /* Empêche le numéro de se couper */
}/* Bloque la taille des gros boutons sur ordinateur */
.liste-attente-btn, .doctolib-btn, [class*="bouton"], [class*="btn"] {
    max-width: 350px !important; /* Empêche le bouton de dépasser cette largeur */
    width: 100% !important; /* Permet au bouton de rester plus petit sur téléphone */
    margin-left: auto; /* Centre le bouton si besoin */
    margin-right: auto;
}.num-entete {
    color: #b08554 !important; /* Ton marron de sous-titre */
    text-decoration: none !important; /* Enlève le soulignement */
    font-weight: bold;
}/* Recentrage parfait des blocs arrondis sur mobile */
@media (max-width: 768px) {
    /* On cible les sections ou conteneurs principaux de ton accueil */
    section, .container, .card, div[class*="section"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}
}/* --- Style de la Galerie Photos --- */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.gallery-item {
    background: #ffffff;
    border: 1px solid #f3eae0;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    width: calc(50% - 10px); /* Met 2 photos par ligne sur ordinateur */
    max-width: 340px;
    box-sizing: border-box;
    text-align: center;
}

.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Recadre proprement les photos pour qu'elles fassent toutes la même taille */
    border-radius: 8px;
}

.photo-caption {
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    color: #605040;
    margin: 10px 0 5px 0;
}

/* Version iPhone : 1 seule photo par ligne bien centrée */
@media (max-width: 600px) {
    .gallery-item {
        width: 100% !important;
        max-width: 100% !important;
    }
    .gallery-item img {
        height: 200px; /* Légèrement plus bas sur mobile pour s'adapter */
    }
}