/* ============================================================
   Studio Les Marronniers — feuille de styles principale
   Utilisée par index.html uniquement
   classeur.html et admin.php ont leurs propres styles intégrés
   ============================================================ */

/* ---- Variables ------------------------------------------- */
:root {
  /* Deux bleus seulement — tout le site */
  --bleu      : #1a3a5c;          /* marine foncé : navbar, footer, textes */
  --bleu-alpin: #2663b0;          /* bleu alpin vif : sections, accents    */
  --bleu-dark : #14304e;          /* very dark : fond footer               */
  --bleu-light: rgba(26,58,92,.08);
  --or        : #c8a951;
  --or-light  : rgba(200,169,81,.18);
  --shadow-sm : 0 2px 8px rgba(0,0,0,.06);
  --shadow-md : 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg : 0 8px 32px rgba(0,0,0,.14);
  --radius-sm : 8px;
  --radius-md : 16px;
  --radius-lg : 24px;
  --transition: .22s ease;
}

/* ---- Logo dans la navbar (haut gauche) -------------------- */
.navbar-logo {
  height: clamp(56px, 8vw, 80px);
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
  transition: transform .22s ease;
}
.navbar-logo:hover { transform: scale(1.04); }

/* ---- Base ------------------------------------------------- */
* { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Segoe UI', sans-serif; }

/* ---- Accessibilité : focus visible ----------------------- */
:focus-visible {
  outline: 2.5px solid var(--or);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Navbar ----------------------------------------------- */
.navbar {
  background: rgba(26,58,92,.65) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--transition), box-shadow var(--transition), transform .32s ease;
}
.navbar--hidden {
  transform: translateY(-110%);
}
.navbar--scrolled {
  background: var(--bleu) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 20px rgba(0,0,0,.22);
}
.navbar-brand { font-weight: 700; letter-spacing: .5px; }
.navbar-nav .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}
@media (max-width: 768px) {
  .navbar-nav {
    padding: .6rem 0;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: .4rem;
    gap: 2px !important;
  }
  .navbar-nav .nav-link { padding: .55rem 1rem; border-radius: var(--radius-sm); }
  .navbar-contact-btn { margin-top: .75rem; width: 100%; text-align: center; display: block; }
}

/* ---- Hero ------------------------------------------------- */
.hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: url('../images/hero.jpg') center/cover no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,.42) 0%, rgba(26,58,92,.68) 100%);
  z-index: 1;
}
.hero > .container { position: relative; z-index: 2; padding-top: 3rem; padding-bottom: 5rem; }
/* 5rem = espace pour la montagne (~60px) en bas de hero */
.hero h1 { font-size: clamp(2.2rem,5vw,3.8rem); font-weight: 800; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.hero .badge-hero { background: var(--or); color: #222; font-size: .95rem; padding: .45rem 1.1rem; border-radius: 30px; font-weight: 600; }
.hero-logo { width: clamp(200px, 40vw, 400px); height: auto; filter: drop-shadow(0 4px 20px rgba(0,0,0,.5)); }

/* ---- Illustration montagne bas du hero (pics irréguliers) -- */
.hero-mountain-base {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-mountain-base svg { display: block; width: 100%; height: 60px; }

/* ---- Bandeau avantages défilant — en tête de #présentation - */
.avantages-strip {
  overflow: hidden;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(200,169,81,.18);
  margin-bottom: 2.5rem;
  width: 100%;
}
.avantages-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: .65rem 0;
  animation: avantagesTicker 40s linear infinite;
}
.avantages-strip-track:hover { animation-play-state: paused; }
@keyframes avantagesTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.avantages-strip-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.6rem;
  white-space: nowrap;
}
.avantages-strip-icon { font-size: 1rem; line-height: 1; }
.avantages-strip-item strong { color: rgba(255,255,255,.95); font-size: .82rem; font-weight: 600; }
.avantages-strip-val  { color: var(--or); font-size: .8rem; font-weight: 500; margin-left: .2rem; }
.avantages-strip-sep  { color: var(--or); opacity: .45; font-size: .6rem; flex-shrink: 0; }

/* ---- Montagne intégrée dans le footer — pics irréguliers -- */
.footer-mountain-top {
  display: block;
  overflow: hidden;
  line-height: 0;
  /* chevauchement sur le panorama du dessus */
  margin-top: -58px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.footer-mountain-top svg { display: block; width: 100%; height: 60px; }

/* ---- Corps / sections claires → crème montagne ------------ */
body { background-color: #faf8f4; }
.bg-light { background-color: #f2ede3 !important; }

/* ---- Infos pratiques (3 colonnes) restaurées -------------- */
.infos-pratiques {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-md);
  border: 1px solid rgba(200,169,81,.18);
}
.infos-pratiques h5 { color: var(--or); }

/* ---- Scroll reveal ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ---- Sections --------------------------------------------- */
.section-title {
  color: var(--bleu);
  font-weight: 700;
  position: relative;
  padding-bottom: .75rem;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu), var(--or));
}

.icon-box {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--bleu-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.icon-box:hover { background: var(--or-light); transform: scale(1.08); }

/* ---- Boutons CTA shimmer ---------------------------------- */
.btn-cta {
  position: relative;
  overflow: hidden;
}
.btn-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 55%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-22deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-cta:hover::after { left: 130%; }

/* ---- Tarifs ----------------------------------------------- */
.tarif-card { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: transform var(--transition), box-shadow var(--transition); }
.tarif-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tarif-badge {
  background: linear-gradient(135deg, var(--bleu) 0%, #0d4e7a 100%);
  color: #fff;
  border-radius: 10px 10px 0 0;
  padding: 1rem;
}
.prix-big { font-size: 2.8rem; font-weight: 800; color: var(--bleu); }

/* ---- Calendrier FullCalendar ------------------------------ */
/* Surcharge des variables CSS de FullCalendar pour nos couleurs */
#calendar {
  --fc-button-bg-color:         var(--bleu);
  --fc-button-border-color:     var(--bleu);
  --fc-button-hover-bg-color:   var(--bleu-dark);
  --fc-button-hover-border-color: var(--bleu-dark);
  --fc-button-active-bg-color:  var(--bleu-dark);
  --fc-button-active-border-color: var(--bleu-dark);
  --fc-button-text-color:       #fff;
  --fc-today-bg-color:          var(--or-light);
}
#calendar .fc-daygrid-day-number     { text-decoration: none !important; color: #444; font-size: .85rem; }
#calendar .fc-col-header-cell-cushion { text-decoration: none !important; font-weight: 600; color: var(--bleu); }
#calendar .fc-button-primary:disabled { background-color: #b0b8c4 !important; border-color: #b0b8c4 !important; opacity: 1 !important; cursor: not-allowed !important; }
/* Forcer les icônes ‹ › sans dépendre de la police fcicons */
#calendar .fc-icon-chevron-left:before  { content: "‹" !important; font-family: sans-serif !important; font-size: 1.2em; font-weight: 700; }
#calendar .fc-icon-chevron-right:before { content: "›" !important; font-family: sans-serif !important; font-size: 1.2em; font-weight: 700; }
.legende      { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.legende-item { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.legende-dot  { width: 14px; height: 14px; border-radius: 50%; }

/* ---- Carte (Google Maps) ---------------------------------- */
.map-frame { border: none; border-radius: 14px; width: 100%; height: 320px; }

/* ---- Formulaire de contact -------------------------------- */
.contact-card { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* ---- Carrousel -------------------------------------------- */
.carousel-img-wrapper {
  height: 380px;
  background: #1c1c1c;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.carousel-img-wrapper img {
  max-height: 380px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.carousel-img-wrapper .placeholder-photo {
  height: 380px; width: 100%;
  display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: #e9ecef;
}

/* ---- Alerte saison ---------------------------------------- */
.alert-saison { background: #fff3cd; border-left: 4px solid var(--or); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---- Footer ----------------------------------------------- */
footer {
  background: linear-gradient(135deg, var(--bleu-dark) 0%, var(--bleu) 100%);
  color: rgba(255,255,255,.75);
  margin-top: 0;
  padding-top: 0;     /* la montagne occupe le haut */
}
footer .container { padding-top: .5rem; }
footer a { color: rgba(255,255,255,.6); text-decoration: none; transition: color var(--transition); }
footer a:hover { color: var(--or); }

/* ---- Avis clients ----------------------------------------- */
.avis-overflow {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
}
.avis-overflow::before,
.avis-overflow::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.avis-overflow::before { left:  0; background: linear-gradient(to right, #f8f9fa, transparent); }
.avis-overflow::after  { right: 0; background: linear-gradient(to left,  #f8f9fa, transparent); }

.avis-track {
  display: flex;
  gap: 20px;
  animation: avisSlide 40s linear infinite;
  width: max-content;
}
.avis-track:hover { animation-play-state: paused; }

@keyframes avisSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--avis-slide, -50%)); }
}

.avis-overflow--static { overflow: visible; }
.avis-overflow--static::before,
.avis-overflow--static::after { display: none; }
.avis-track--static {
  flex-wrap: wrap;
  justify-content: center;
  width: 100% !important;
  animation: none !important;
}
.avis-track--static .avis-bubble { flex-shrink: 0; }

.avis-bubble {
  width: 290px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
  border-top: 3px solid var(--or);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.avis-bubble:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.avis-bubble::before {
  content: '\201C';
  position: absolute;
  top: -6px;
  left: 14px;
  font-size: 5rem;
  color: var(--or);
  opacity: .18;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  user-select: none;
}
.avis-stars-disp { color: var(--or); font-size: 1.1rem; letter-spacing: 2px; }
.avis-texte { font-size: .88rem; color: #555; line-height: 1.65; margin: 10px 0; font-style: italic; }
.avis-auteur { font-size: .8rem; color: #888; font-weight: 600; }

@media (max-width: 768px) {
  .avis-track--static .avis-bubble { width: 100%; }
}

/* Saisie étoiles dans le modal */
.avis-star-input { font-size: 2.2rem; cursor: pointer; letter-spacing: 3px; line-height: 1; }
.avis-star { color: #ddd; transition: color .15s; }

/* ---- Animations ------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .3s ease-out; }

/* ════════════════════════════════════════════════════════════
   SECTIONS COLORÉES — bleu alpin vif
   ════════════════════════════════════════════════════════════ */
.section-dark {
  background: linear-gradient(150deg, var(--bleu) 0%, var(--bleu-alpin) 100%);
  color: rgba(255,255,255,.88);
  position: relative;
}
.section-dark .section-title       { color: var(--or); }
.section-dark .section-title::after {
  background: linear-gradient(90deg, var(--or), rgba(200,169,81,.25));
}
.section-dark p.lead               { color: rgba(255,255,255,.78) !important; }
.section-dark .text-muted          { color: rgba(255,255,255,.55) !important; }
.section-dark small                { color: rgba(255,255,255,.55) !important; }
.section-dark strong               { color: #fff; }
.section-dark hr                   { border-color: rgba(255,255,255,.1); }
.section-dark .icon-box {
  background: rgba(200,169,81,.12);
  border: 1px solid rgba(200,169,81,.22);
}
.section-dark .icon-box:hover {
  background: rgba(200,169,81,.28);
  transform: scale(1.08);
}
/* Alert saison sur fond sombre */
.section-dark .alert-saison {
  background: rgba(200,169,81,.10);
  border-left: 4px solid var(--or);
  color: rgba(255,255,255,.85);
  border-radius: var(--radius-sm);
  margin-bottom: 2.5rem;
}
.section-dark .alert-saison strong { color: var(--or); }
/* Tarif cards flottantes sur fond sombre */
.section-dark .tarif-card { box-shadow: 0 8px 40px rgba(0,0,0,.35); }
/* Overflow avis sur fond coloré */
.section-dark .avis-overflow::before {
  background: linear-gradient(to right, var(--bleu), transparent);
}
.section-dark .avis-overflow::after  {
  background: linear-gradient(to left,  var(--bleu-alpin), transparent);
}
/* Bouton avis sur fond sombre */
.section-dark .btn-bleu { box-shadow: 0 4px 20px rgba(0,0,0,.4); }

/* ════════════════════════════════════════════════════════════
   TICKER INFOS PRATIQUES
   ════════════════════════════════════════════════════════════ */
.info-ticker-wrap {
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(200,169,81,.20);
  margin-top: 2.5rem;
}
.info-ticker-wrap::before,
.info-ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.info-ticker-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bleu), transparent);
}
.info-ticker-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bleu-alpin), transparent);
}
.info-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 1.1rem 0;
  animation: infoTicker 30s linear infinite;
}
.info-ticker-track:hover { animation-play-state: paused; }
@keyframes infoTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.info-ticker-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1.8rem;
  white-space: nowrap;
}
.info-ticker-icon { font-size: 1.2rem; line-height: 1; }
.info-ticker-item strong { color: rgba(255,255,255,.9); font-size: .88rem; font-weight: 600; }
.info-ticker-val  { color: var(--or); font-size: .85rem; font-weight: 600; margin-left: .3rem; }
.info-ticker-sep  { color: var(--or); opacity: .3; font-size: .65rem; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   BANNIÈRE PHOTO PANORAMIQUE (configurable)
   ════════════════════════════════════════════════════════════ */
.photo-panorama {
  position: relative;
  height: 220px;
  /* ↓ Changez uniquement le nom du fichier pour modifier l'image */
  background: url('../images/foot_dent.jpg') center 38%/cover no-repeat;
  overflow: hidden;
}
.photo-panorama-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(12,31,51,.0)  0%,
    rgba(12,31,51,.55) 55%,
    rgba(12,31,51,.92) 100%);
}
.photo-panorama-caption {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}
@media (max-width: 768px) {
  .photo-panorama { height: 130px; }
}

/* ---- La station — fond photo Brides ----------------------- */
.section-station {
  position: relative;
  background: url('../images/brides.jpg') center/cover no-repeat;
}
.section-station::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(14,36,60,.84) 0%, rgba(26,58,92,.72) 100%);
  z-index: 0;
}
.station-container {
  position: relative;
  z-index: 1;
}
.section-station .section-title { color: #fff; }
.section-station .section-title::after {
  background: linear-gradient(90deg, var(--or), rgba(255,255,255,.6));
}

/* Cartes activités : hover premium */
.section-station .card {
  transition: transform var(--transition), box-shadow var(--transition);
}
.section-station .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Reveal staggeré sur les cartes de la station */
.station-card-col {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.station-card-col.visible {
  opacity: 1;
  transform: none;
}

/* (brides-banner et infos-pratiques remplacés — voir .photo-panorama et .info-ticker-*) */

/* ---- Bouton standard bleu (remplace inline styles) -------- */
.btn-bleu {
  background: var(--bleu);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}