:root{
  --bg:#ffffff;
  --text:#333333;
  --muted:#666666;
  --card:#ffffff;
  --card-b:#e0e0e0;
  --brand:#0dcaf0;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.section-pad{padding:3rem 0}
.hero{min-height:80vh;display:grid;place-items:center;background-size:cover;background-position:center;border-radius:.75rem;position:relative;overflow:hidden}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.hero .inner{position:relative;z-index:1;color:#fff;padding:3rem 0}
.badge-soft{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:.35rem .6rem;color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
.card-soft{background:var(--card);border:1px solid var(--card-b);border-radius:.75rem}
.text-muted-2{color:var(--muted)}
/* Galerie d'accueil avec espacement vertical réduit */
/* Galerie uniforme à tous niveaux de zoom (CSS Grid) */
/* Galerie uniforme à tous les niveaux de zoom (CSS Grid) */
/* --- GALERIE PHOTOS --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  text-align: center;
}

/* Image uniforme : ratio fixe pour un alignement parfait */
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.gallery-item:hover img {
  transform: scale(1.03);
}

/* Légende visible sous l’image, stable sur mobile */
.gallery-caption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
  line-height: 1.3;
}

/* Optionnel : effet léger au survol desktop */
@media (hover:hover) {
  .gallery-item:hover .gallery-caption {
    color: #0dcaf0;
  }
}

/* Adaptation tablette/mobile */
@media (max-width: 992px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(1, 1fr); }
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:22px;z-index:1050}
.lightbox.active{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:12px}
/* Active le bon ancrage et facilite la détection au scroll */
main section, main header.hero {
  scroll-margin-top: 80px; /* hauteur approximative de ta navbar */
}
/* ---- Navbar sombre et états des liens ---- */
.navbar {
  background-color: #0b1022 !important;              /* fond bleu foncé */
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.navbar .navbar-brand { color: #fff !important; }

/* === Logo dans la barre de navigation === */
.logo-nav {
  height: 36px;           /* hauteur raisonnable du logo */
  width: auto;            /* garde les proportions */
  border-radius: 6px;     /* arrondit légèrement les coins */
  object-fit: contain;    /* garde la forme sans déformation */
  transition: transform 0.2s ease;
}

.navbar-brand:hover .logo-nav {
  transform: scale(1.05); /* petit zoom au survol */
}


/* État normal */
.navbar .nav-link {
  color: rgba(255,255,255,0.9) !important;
  transition: color .2s ease, opacity .2s ease;
  position: relative;
  text-decoration: none;
}

/* Survol / focus clavier */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #0dcaf0 !important;                          /* bleu clair au survol */
  outline: none;
}

/* Lien actif (section visible) */
.navbar .nav-link.active {
  color: #0dcaf0 !important;                          /* bleu clair persistant */
}

/* Petit soulignement pour l’actif (optionnel mais très lisible) */
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #0dcaf0;
  border-radius: 2px;
  transform: translateY(0);
}

/* Évite la couleur "visited" violette */
.navbar .nav-link:visited { color: rgba(255,255,255,0.9) !important; }
/* Bloc image + texte descriptif */
.gallery-item {
  text-align: center;
  color: var(--text);
}
/* === Icônes de contact (section Contacts) === */
.social-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.social-links .social-icon {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-links .social-icon:hover {
  transform: scale(1.15);
  opacity: 1;
}


.gallery-item img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* Texte sous l’image */
.gallery-caption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
}
/* ? Taille des vignettes + texte sous chaque image dans la galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images par ligne */
  gap: 8px; /* espace entre les images */
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* format harmoniuex (style appareil photo) */
  object-fit: cover;
  border-radius: 8px;
}

/* ? Texte descriptif sous chaque image */
.gallery-caption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
  text-align: center;
}

/* ? Adaptation pour tablette */
@media (max-width: 992px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ? Adaptation mobile */
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(1, 1fr);
  }
  .gallery-item img {
    height: 180px; /* un peu plus haut pour mobile */
  }
}

/* --- Lightbox controls (prev/next/close) --- */
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 999px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lb-close { top: 16px; right: 16px; font-size: 18px; }
.lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; }
.lb-next  { right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; }

@media (max-width: 520px) {
  .lb-prev, .lb-next { width: 36px; height: 36px; font-size: 24px; }
}
@media (max-width: 991px){ }
/* --- Trait bleu à gauche du commentaire (section Avis) --- */
#avis blockquote {
  position: relative;
  margin: 0;
  padding-left: 0.75rem;
  border-left: 3px solid #0dcaf0; /* Trait bleu clair */
}
/* --- Styles spécifiques à la page avis.html --- */
.quote-card blockquote {
  position: relative;
  margin: 0;
  padding-left: .75rem;
  border-left: 3px solid #0dcaf0; /* Trait bleu à gauche */
  color: #333;
}
.quote-card {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
/* Galerie principale (déplacée depuis index.html) */
/* ✅ Grille commune aux deux pages */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  justify-items: center;
}

/* Chaque tuile */
.gallery-item {
  text-align: center;
}

/* Image miniature */
.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

/* Légende sous la photo */
.gallery-caption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #6c757d;
}

/* === Page photo.html : viewer plein écran === */
body.photo-page {
  margin: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden; /* évite le scroll derrière l'image */
}

/* Image grande */
#viewer {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  border-radius: .5rem;
}

/* Légende sous l'image */
#caption {
  margin-top: .5rem;
  font-size: 1rem;
  text-align: center;
  color: #ccc;
}

/* Boutons navigation */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .5rem 1rem;
  font-size: 2rem;
  opacity: .7;
  transition: opacity .2s ease;
}

.nav-btn:hover { opacity: 1; }

#prev { left: 2%; }
#next { right: 2%; }

/* Bouton fermer */
#close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s ease;
}
#close:hover { opacity: 1; }

/* Mobile : boutons un peu plus petits */
@media (max-width: 600px) {
  .nav-btn { font-size: 1.6rem; padding: .4rem .8rem; }
}
/* === Vidéo dans la section Photos/Vidéos === */
.video-wrapper {
  max-width: 640px;        /* largeur max du cadre vidéo */
  margin: 0 auto;           /* centre la vidéo horizontalement */
  border-radius: 12px;      /* coins arrondis */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* légère ombre */
}

.video-wrapper video {
  width: 100%;              /* garde la vidéo responsive */
  height: auto;
  display: block;
}
.calendar-container {
  max-width: 900px;
  margin: 20px auto;
  border: 2px solid #007BFF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.calendar-container iframe {
  width: 100%;
  height: 600px;
}
/* === Carte Google (section Contacts) === */
#contacts iframe {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* === Avis : coller les deux cadres & réduire "Votre avis" === */
#avis .avis-row {
  gap: 0;                 /* aucun écart supplémentaire */
  --bs-gutter-x: 0;       /* supprime les gouttières Bootstrap */
}

/* Supprime tout padding horizontal résiduel des colonnes */
#avis .col-lg-7,
#avis aside.col-lg-5 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Répartition des largeurs (collées), et "Votre avis" un peu plus étroit */
@media (min-width: 992px) {
  #avis .col-lg-7      { flex: 0 0 64%; max-width: 64%; }
  #avis aside.col-lg-5 { flex: 0 0 36%; max-width: 36%; }
}

/* Compacter un peu la carte "Votre avis" */
#avis aside .card-soft {
  padding: 0.9rem;    /* légèrement plus petit qu'avant */
}

}