/* Palette plus vive (bleu clair + sarcelle + sauge) */
:root {
  --bg1:#BFD6F2;   /* bleu clair plus vif */
  --bg2:#CDEFE9;   /* sarcelle brume lumineuse */
  --bg3:#DDF7EE;   /* sauge claire */
  --ink:#0F172A; --muted:#4B5563;
  --primary:#0FA3A0; --primary-strong:#0B6F6D; /* boutons/accents */
  --accent:#214F86;  /* titres */
  --card: rgba(255,255,255,0.92);   /* cartes plus opaques mais pas blanches du fond */
  --card-brd: rgba(15,23,42,0.10);
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  --maxw: 1120px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  min-height:100vh;
  opacity:0; animation:fadeIn .32s ease-out forwards;
}
@keyframes fadeIn{to{opacity:1}}
a{color:var(--primary); text-decoration:none} a:hover{color:var(--primary-strong)}
header{background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); border-bottom:1px solid rgba(33,79,134,.12); backdrop-filter:blur(6px) saturate(120%)}
.container{max-width:var(--maxw); margin:0 auto; padding:28px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
nav.nav-desktop ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav.nav-desktop a{font-weight:600} nav.nav-desktop a.active{color:var(--accent)}

.cta{background:var(--primary); color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; box-shadow:0 10px 22px rgba(15,163,160,.26);
  /* Ajout de la transition */
  transition: all 0.2s ease-out;
}
.band{background:linear-gradient(90deg, rgba(191,214,242,.75), rgba(15,163,160,.22))}
section{padding:34px 0}
.card{background:var(--card); border:1px solid var(--card-brd); border-radius:16px; padding:20px; box-shadow:var(--shadow)}
h2{margin:0 0 6px; font-size:24px; color:var(--accent)} h2::after{content:''; display:block; width:64px; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--primary), var(--bg1)); margin-top:8px}

/* Grilles */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px}

/* HERO */
.hero-visual{position:relative; min-height:56vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden}.hero-visual::before{content:''; position:absolute; inset:0; background:url('hero_secret.png') center/cover no-repeat fixed; filter:brightness(.98) saturate(1.03)}.hero-visual::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(33,79,134,.22), rgba(15,163,160,.18))}.hero-visual .inner{position:relative; z-index:1; padding:40px 22px; max-width:900px}.hero-visual h1{font-size:40px; color:#fff; margin:0 0 6px; text-shadow:0 2px 12px rgba(0,0,0,.32)}.hero-visual p.lead{color:#f0fbf8; margin:6px 0 12px; font-size:18px; text-shadow:0 2px 10px rgba(0,0,0,.28)}.hero-visual .actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center}.phone{font-weight:800; letter-spacing:.2px; color:#D6FFF0}

/* Banniere d'accueil */
.sky-banner{background:rgba(191,214,242,.86); border:1px solid rgba(33,79,134,.18); border-radius:16px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between}

/* Horaires zone */
#horaires{position:relative; overflow:hidden}
#horaires .card{background:rgba(255,255,255,.92)}
#horaires::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(33,79,134,.10), rgba(15,163,160,.10)), url('doctor_background.jpg') center/cover fixed no-repeat; opacity:.55}
#horaires .content{position:relative; z-index:1}
.hours{display:flex; flex-direction:column; gap:10px}
.hour-row{display:flex; justify-content:space-between; padding:12px 14px; border-radius:10px; background:rgba(15,163,160,.10)}

footer{color:var(--muted); font-size:14px}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Smooth page transitions */
.page-enter{opacity:0; transform:translateY(6px)}
.page-enter.page-enter-active{opacity:1; transform:none; transition:opacity .24s ease, transform .24s ease}
.page-exit{opacity:1} .page-exit.page-exit-active{opacity:0; transition:opacity .18s ease}

/* Scroll reveal animations */
.reveal{opacity:0; transform:translateY(10px)}
.reveal.in{opacity:1; transform:none; transition:opacity .38s ease, transform .38s ease}

/* --- Icones SVG --- */
.icon-svg {
  display: inline-block;
  width: 1.2em; 
  height: 1.2em;
  vertical-align: -0.25em; 
  margin-right: 0.3em; 
  stroke-width: 2; 
  stroke: currentColor; 
  fill: none; 
}
.card ul .icon-svg {
  color: var(--primary);
  stroke-width: 2.5;
  vertical-align: -0.2em;
}
.card p .icon-svg {
  color: var(--primary);
  vertical-align: -0.2em;
}

/* --- Cartes de service (pour page Consultations) --- */
.service-card {
  text-align: center;
  padding: 24px 20px;
}
.service-card .icon-svg { 
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
  color: var(--primary);
  margin: 0 auto 12px;
  display: block;
  vertical-align: 0;
  margin-right: auto; 
}
.service-card h3 {
  font-size: 18px;
  color: var(--accent);
  margin: 0 0 4px;
}
.service-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* --- STYLES DU MENU MOBILE --- */
.nav-desktop {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
#menu-toggle {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
}
#menu-toggle svg {
  width: 32px;
  height: 32px;
}
.cta-desktop {
  display: none;
}
#mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
#mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#mobile-menu ul a {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}
#menu-close {
  position: absolute;
  top: 28px;
  right: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
}
#menu-close svg {
  width: 32px;
  height: 32px;
}

/* --- AJUSTEMENTS POUR LE BUREAU (À PARTIR DE 881px) --- */
@media (min-width: 881px) {
  .nav-desktop {
    display: block;
  }
  .cta-desktop {
    display: inline-block;
  }
  #menu-toggle {
    display: none;
  }
  #mobile-menu {
    display: none;
  }
}

/* Mobile (Anciennes règles + nouvelles) */
@media (max-width: 880px) {
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero-visual h1{font-size:28px} .hero-visual p.lead{font-size:16px}
  .nav {
    flex-wrap: wrap; 
  }
}

/* --- AJOUT : FINITIONS --- */

/* Effet au survol des boutons .cta */
.cta:hover {
  background: var(--primary-strong); /* Utilise la couleur foncée de votre palette */
  box-shadow: 0 4px 14px rgba(15,163,160,.20); /* Ombre plus subtile */
  transform: translateY(-1px); /* Léger mouvement vers le haut */
}

/* --- LOGO TRANSPARENT (aligné à gauche du nom) --- */
.logo-block { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-img { height:44px; width:auto; display:block; }


/* Fallback iOS pour l'effet de fond fixe */
@supports (-webkit-overflow-scrolling: touch) {
  .hero-visual::before {
    background-attachment: scroll;
    transform: translateZ(0);
  }
}

/* --- Petites finitions esthétiques (badges, étapes, accordéons si besoin) --- */
.pill-badges{display:flex; flex-wrap:wrap; gap:8px}
.pill{display:inline-block; background:rgba(15,163,160,.12); color:var(--primary-strong); border:1px solid rgba(15,163,160,.18); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700}
.steps{margin:0; padding-left:18px; line-height:1.9; color:#374151}
.steps li{margin-bottom:4px}