/* Variables de couleurs (inspirées de votre carte) */
:root {
    --couleur-primaire: #E87A7A; /* Rose/Saumon (pour titres, accents) */
    --couleur-secondaire: #3A4F6A; /* Bleu foncé/gris (pour logo texte, certains textes, H1) */
    --couleur-texte: #333333; /* Gris foncé pour le texte principal */
    --couleur-fond: #FFFFFF; /* Blanc pour le fond */
    --couleur-fond-alt: #f4f4f4; /* Gris très clair pour alterner des sections */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
}

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

/* En-tête */
header {
    background-color: var(--couleur-secondaire); /* Fond bleu foncé/gris */
    padding: 10px 0;
    border-bottom: 3px solid var(--couleur-primaire);
    overflow: auto; 
}

header #logo {
    height: 80px; 
    float: left;
}

header nav {
    float: right;
    margin-top: 25px; 
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header nav ul li {
    display: inline;
    margin-left: 20px;
}

header nav ul li a {
    color: var(--couleur-fond); 
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}

header nav ul li a:hover,
header nav ul li a.active {
    color: var(--couleur-primaire); 
}

/* Contenu Principal Général */
main {
    padding: 30px 0;
}

main h1 { 
    color: var(--couleur-secondaire); 
    text-align: center;
    margin-bottom: 40px; 
}

/* Styles pour la page d'accueil (index.html) - Blocs alternés */
.alternating-block {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 30px;
}

.alternating-block .image-placeholder {
    flex: 1;
    min-width: 200px;
    height: 250px;
    background-color: #e0e0e0; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666;
    border-radius: 5px;
    overflow: hidden; 
}

.alternating-block .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.alternating-block .text-content {
    flex: 2;
}

.alternating-block .text-content h2 {
    margin-top: 0;
    color: var(--couleur-primaire);
}

.alternating-block.reverse {
    flex-direction: row-reverse;
}

.explore-links {
    text-align: center;
    margin-top: 30px;
    padding: 15px;
    background-color: var(--couleur-fond-alt);
    border-radius: 5px;
}

.note-importante { 
    background-color: #fffde7;
    border-left: 5px solid var(--couleur-primaire);
    padding: 15px;
    margin: 20px 0;
}

/* Section Annonces (style de base, utilisé sur index.html) */
#annonces { 
    background-color: var(--couleur-fond-alt);
    padding: 20px;
    margin-top: 30px;
    border-radius: 5px;
}

#annonces h2 { 
    margin-top: 0;
    color: var(--couleur-secondaire);
}


/* Styles spécifiques pour la page Horaire (horaire.html) */
/* Dans style.css */
.container-annonces-horaire { 
    width: 100%; 
    background-color: var(--couleur-fond-alt); /* Le fond gris clair */
    padding: 20px;
    margin-bottom: 30px; 
    border-radius: 5px;                          /* Coins arrondis */
    border: 1px solid #d1d1d1;                 /* Bordure gris clair pour "fermer" la boîte */
    box-sizing: border-box;                      /* Padding et border inclus dans width:100% */
}

.container-annonces-horaire h2 {
    margin-top: 0;
    color: var(--couleur-secondaire);
}

#horaires-dentistes, 
#horaires-secretariat { 
    margin-bottom: 40px; 
}

#horaires-dentistes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

#horaires-dentistes h2,
#horaires-secretariat h2 {
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--couleur-fond-alt);
    width: 100%; 
}

.personne-horaire {
    background-color: var(--couleur-fond);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px; 
}

#horaires-dentistes .personne-horaire { 
    flex: 1 1 calc(33.333% - 20px); 
    min-width: 280px; 
}

#horaires-secretariat .personne-horaire { 
    min-width: unset; 
}

.personne-horaire h3 {
    color: var(--couleur-secondaire);
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.personne-horaire ul {
    list-style: none;
    padding: 0;
    margin-top: 10px; /* Espace au-dessus de la liste des blocs */
}

.personne-horaire ul li {
    padding: 12px 15px;         /* Espace intérieur pour chaque bloc */
    margin-bottom: 6px;         /* Espace entre les blocs */
    border-radius: 6px;         /* Coins arrondis pour les blocs */
    font-size: 1.0em;
    display: flex; 
    justify-content: flex-start; 
    align-items: baseline; 
    transition: background-color 0.3s ease; /* Effet de transition doux au survol */
}

.personne-horaire ul li:last-child {
    margin-bottom: 0; /* Pas de marge en bas pour le dernier élément */
}

.personne-horaire ul li:nth-child(odd) { /* Cible les blocs impairs */
    background-color: var(--couleur-fond-alt); /* Gris très clair (#f4f4f4) */
}

.personne-horaire ul li:nth-child(even) { /* Cible les blocs pairs */
    background-color: var(--couleur-fond); /* Blanc (#FFFFFF) */
}

.personne-horaire ul li:hover { /* Optionnel : Effet de survol */
    background-color: #e9e9e9; 
}

.personne-horaire ul li strong { 
    flex: 0 0 170px; 
    margin-right: 10px; 
    color: var(--couleur-texte);
    font-weight: bold;
}

.personne-horaire ul li span { 
    flex: 1; 
    text-align: left; 
}

.note-horaire { 
    color: #888;
    font-style: italic;
}
.intro-secretariat, .note-secretariat { 
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #555;
}

/* Pied de page */
footer {
    background-color: var(--couleur-secondaire);
    color: var(--couleur-fond);
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
}

/* ----- Responsive Design ----- */
@media (max-width: 992px) { 
    /* Accueil: Blocs alternés */
    .alternating-block .text-content { 
        flex: 1.5; 
    }

    /* Horaire: Cartes dentistes */
    #horaires-dentistes .personne-horaire { 
        flex-basis: calc(50% - 10px); 
        min-width: unset; 
    }
}

@media (max-width: 768px) { 
    /* En-tête et Navigation */
    header #logo {
        float: none;
        display: block;
        margin: 0 auto 10px auto; 
        height: 70px; 
    }
    header nav {
        float: none;
        text-align: center; 
        margin-top: 0;
    }
    header nav ul li {
        display: block; 
        margin: 10px 0;
    }

    /* Accueil: Blocs alternés */
    .alternating-block,
    .alternating-block.reverse {
        flex-direction: column; 
        text-align: center; 
    }
    .alternating-block .image-placeholder,
    .alternating-block .text-content {
        width: 100%; 
        flex: none; 
    }
    .alternating-block .image-placeholder {
        margin-bottom: 20px; 
        height: 200px; 
    }

    /* Horaire: Cartes */
    #horaires-dentistes {
        flex-direction: column; 
        gap: 0;
    }
    #horaires-dentistes .personne-horaire, 
    #horaires-secretariat .personne-horaire { 
        min-width: unset; 
        margin-bottom: 20px;
        flex-basis: 100% !important; 
        padding: 15px; 
    }

     .personne-horaire ul li strong {
        flex-basis: 120px; 
    }
    /* Si vous voulez que le jour et l'heure soient l'un sous l'autre sur mobile : */
    /*
    .personne-horaire ul li { 
        flex-direction: column; 
        align-items: flex-start; 
    }
    .personne-horaire ul li strong {
        margin-bottom: 5px;
    }
    */
}

/* Styles spécifiques pour la page Contact */
.contact-layout {
    display: flex;
    flex-wrap: wrap; /* Permet de passer en colonne sur mobile */
    gap: 30px; /* Espace entre la section détails et la carte */
    margin-top: 30px;
}

.contact-details {
    flex: 1; /* Prend une partie de l'espace */
    min-width: 300px; /* Largeur minimale avant de wrapper */
}

.contact-details h2 {
    color: var(--couleur-primaire);
    margin-top: 0;
    margin-bottom: 15px;
}

.contact-details address {
    font-style: normal;
    line-height: 1.8;
    margin-bottom: 20px;
}

.contact-details p a {
    color: var(--couleur-secondaire);
    text-decoration: none;
}

.contact-details p a:hover {
    text-decoration: underline;
}

.contact-note { /* Style spécifique pour la note sur la page contact si besoin */
    margin-top: 30px;
}

.contact-map {
    flex: 1.5; /* La carte prend un peu plus de place */
    min-width: 300px;
}

.contact-map h2 {
    color: var(--couleur-primaire);
    margin-top: 0;
    margin-bottom: 15px;
}

#map-container {
    width: 100%;
    height: 400px; /* Hauteur par défaut de la carte, peut être ajustée */
    background-color: #e9e9e9; /* Fond pour le placeholder */
    border-radius: 5px;
    overflow: hidden; /* Pour que l'iframe ne dépasse pas si mal configuré */
}

#map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive pour la page contact */
@media (max-width: 768px) {
    .contact-layout {
        gap: 20px; /* Réduire l'espace sur mobile */
    }
    .contact-details, .contact-map {
        flex-basis: 100%; /* Chaque section prend toute la largeur */
        min-width: unset;
    }
    #map-container {
        height: 300px; /* Réduire la hauteur de la carte sur mobile */
    }
}

/* --- Annonces: badges et importance (ancienne base) --- */
.annonce-entete {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.annonce-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 0.8em;
  border: 1px solid #dbe2ea;
}
.annonce-badge.actif {
  background: #e8f7ee;
  border-color: #c6ead4;
}
.annonce-badge.important {
  background: #fdecea;
  border-color: #f5c6c3;
}
.annonce-item.annonce-important {
  border-color: #f5c6c3;
  box-shadow: 0 1px 5px rgba(244, 67, 54, 0.08);
}

/* --- Bandeaux directement sur les cartes horaires --- */
.bandeau-fermeture {
  background: #fff4e5;
  border: 1px solid #ffd8b2;
  color: #5f3612;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.bandeau-fermeture.important {
  background: #fdecea;
  border-color: #f5c6c3;
  color: #6b1b1b;
}
.bandeau-fermeture .bandeau-texte {
  margin-top: 6px;
  line-height: 1.45;
}

/* Bouton admin (compat historique, si affiché en haut) */
.btn-admin-annonces{
  display:inline-block; 
  margin:8px 0 12px; 
  padding:8px 12px; 
  border-radius:8px;
  border:1px solid #dbe2ea; 
  background:#f7f9fc; 
  text-decoration:none; 
  font-size:0.95rem;
}
.btn-admin-annonces:hover{ background:#eef2f7; }


/* =========================================================
   >>> INTÉGRATION ANNONCES (NOUVEAU DESIGN DANS VOTRE THÈME) <<<
   - Cartes sobres dans la boîte grise existante
   - Gommettes/pastilles colorées sous chaque annonce
   - Accent latéral pastel par cible (optionnel)
   - Lien admin discret SOUS la liste
   ========================================================= */

/* Grille de cartes d'annonces dans le bloc gris existant */
.annonces-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
  margin-top:12px;
}

/* Carte d'annonce alignée au style du site */
.annonce-card{
  position:relative;
  background:var(--couleur-fond);
  border:1px solid #ddd;
  border-radius:8px;
  padding:16px 18px 14px;
  box-shadow:0 2px 5px rgba(0,0,0,0.08);
  transition:box-shadow .2s ease, transform .05s ease;
}

/* Petit accent vertical pastel (cohérent avec vos couleurs) */
.annonce-card::before{
  content:"";
  position:absolute; left:-1px; top:-1px; bottom:-1px; width:5px;
  background:#e9edf2; border-radius:8px 0 0 8px;
}

/* Variantes par cible (si vous passez la classe card-<cible> via JS) */
.card-secretariat::before{ background:#cbd7e4; } /* bleu-gris doux */
.card-crespin::before   { background:#cfeee1; } /* vert doux */
.card-haillot::before   { background:#e7defb; } /* violet doux */
.card-bovy::before      { background:#fde2d3; } /* pêche doux */
.card-general::before   { background:#e9edf2; } /* gris clair */

.annonce-card:hover{ box-shadow:0 6px 14px rgba(0,0,0,0.12); transform:translateY(-2px); }

.annonce-title{
  margin:0 0 6px;
  font-size:1.05rem;
  color:var(--couleur-secondaire);
  font-weight:bold;
}
.annonce-periode{
  margin:2px 0 6px;
  color:#444; font-weight:bold;
}
.annonce-message{
  margin:4px 0 8px;
  color:#333; line-height:1.45;
}
.annonce-meta{
  margin:0 0 8px;
  color:#777; font-size:.9rem;
}

/* Ligne des gommettes sous l'annonce */
.annonce-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:auto; padding-top:10px;
  border-top:1px dashed #e1e1e1;
}

/* Gommettes/pastilles colorées */
.tag-chip{
  --chip-bg:#f1f1f1; --chip-fg:#444; --chip-dot:#999;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; line-height:1;
  padding:6px 12px; border-radius:999px;
  background:var(--chip-bg); color:var(--chip-fg);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 1px 1px rgba(0,0,0,.03) inset;
}
.tag-chip::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--chip-dot);
}

/* Couleurs cohérentes avec la charte */
.tag-chip.secretariat{ --chip-bg:#dfe7f0; --chip-fg:#263445; --chip-dot:#3A4F6A; }
.tag-chip.crespin   { --chip-bg:#cfeee1; --chip-fg:#224239; --chip-dot:#3aa37d; }
.tag-chip.haillot   { --chip-bg:#e7defb; --chip-fg:#3a2f56; --chip-dot:#7a5fe0; }
.tag-chip.bovy      { --chip-bg:#fde2d3; --chip-fg:#5a2f1f; --chip-dot:#e17a3c; }
.tag-chip.general   { --chip-bg:#eef2f6; --chip-fg:#3a3f46; --chip-dot:#8a99ab; }

/* Important = accent primaire doux (rose/saumon) */
.tag-chip.important{ --chip-bg:#fde4e4; --chip-fg:#8b2d2d; --chip-dot:var(--couleur-primaire); }

/* Supprime l'ancien "bandeau" d'entête si utilisé */
.annonce-entete{ display:block; margin:0 0 4px; padding:0; border:none; background:none; }
.annonce-badge{ background:none; border:none; padding:0; }

/* Lien admin discret SOUS les annonces */
.admin-footnote{
  display:flex; justify-content:flex-end; margin-top:10px;
}
.admin-link{
  font-size:.9rem; color:#8e9aa6; opacity:.7; text-decoration:none;
  border-bottom:1px dashed transparent; padding:2px 0; transition:opacity .2s ease;
}
.admin-link:hover{ opacity:1; color:#6f7a85; border-bottom-color:#cbd5e1; }

/* ----- Responsive annonces ----- */
@media (max-width: 480px){
  .annonces-grid{ grid-template-columns:1fr; }
  .admin-footnote{ justify-content:flex-start; }
}