/* ==== Global Styles for Reflet sur le Monde (unified) ==== */
:root{
  --dark-blue:#1F3A50;
  --deep-purple:#5C4A7A;
  --orange:#D37C4A;
  --olive:#A3B895;
  --beige:#F5F0E6;
  --white:#FFFFFF;
  --gray:#666666;

  /* layout */
  --header-h: 128px;           /* logo + nav; used to offset fixed header */
  --header-h-mobile: 80px;     /* mobile header height (will be overridden below) */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Montserrat", Arial, sans-serif;
  color:var(--dark-blue);
  background:var(--white);
  line-height:1.6;
  padding-top: var(--header-h); /* keep content visible below fixed header */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ===== Header (fixed) ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* Center the logo row and pin hamburger to the right */
.header-top{
  display:flex;
  align-items:center;              /* same vertical level */
  justify-content:center;          /* center the logo */
  position:relative;               /* so hamburger can be absolutely positioned */
  padding:10px 20px;
  gap:12px;
}
.site-header .top-logo{ display:flex; align-items:center; justify-content:center; }
.site-header .logo{ height:72px }

/* ===== Hamburger Menu Button ===== */
.hamburger-btn {
  display: none; /* hidden on desktop (shown on mobile below) */
  flex-direction: column;
  justify-content: space-around;
  width: 30px; height: 30px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  z-index: 1001;

  /* keep it on the RIGHT side of the centered logo */
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
.hamburger-btn span { width: 100%; height: 3px; background: var(--dark-blue); border-radius: 3px; transition: all 0.3s ease; transform-origin: center; }
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }

/* ===== Desktop Navigation ===== */
.desktop-nav{ border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff; }
.desktop-nav ul{ list-style:none; display:flex; gap:28px; flex-wrap:wrap; align-items:center; justify-content:center; padding:10px 0; }
.desktop-nav a{ font-weight:600; position:relative; padding:6px 2px; }
.desktop-nav a:after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--orange); transition:width .25s ease; }
.desktop-nav a:hover:after{ width:100% }

/* ===== Mobile Navigation ===== */
.mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mobile-nav.active { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav li { border-bottom: 1px solid #f0f0f0; }
.mobile-nav li:last-child { border-bottom: none; }
.mobile-nav a { display: block; padding: 16px 20px; font-weight: 600; color: var(--dark-blue); transition: background-color 0.2s ease; }
.mobile-nav a:hover, .mobile-nav a.active { background-color: var(--beige); color: var(--orange); }

/* ===== Responsive Header Behavior ===== */
@media (max-width: 768px) {
  body { padding-top: var(--header-h-mobile); }
  .hamburger-btn { display: flex; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  :root { --header-h: var(--header-h-mobile); }
}

/* ===== Hero & Sections (generic) ===== */
.hero{ background:var(--beige); padding:48px 0; text-align:center; }
.hero h1{ font-size:clamp(1.6rem, 2.8vw, 2.4rem); margin-bottom:10px }
.hero p{ color:var(--gray) }

/* Irregular-edged (blob) image for hero */
.image-blob{ margin:24px auto 0; width:clamp(220px, 60%, 560px); filter: drop-shadow(0 8px 24px rgba(0,0,0,.12)); }
.image-blob img{ width:100%; border-radius:24px; clip-path: polygon(8% 5%, 93% 0%, 100% 40%, 92% 90%, 60% 100%, 22% 93%, 0% 60%, 3% 18%); }

/* Reduce vertical space between sections (was 64px) */
.section{ padding:40px 0; background:#fff }
.section.alt{ background:var(--beige) }
.section-title{ text-align:center; font-size:clamp(1.4rem, 2.4vw, 2rem); margin-bottom:28px; position:relative; padding-bottom:10px; }
.section-title:after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:80px; height:3px; background:var(--orange); }
.text-center{ text-align:center }

.btn{ display:inline-block; background:var(--orange); color:#fff; padding:12px 22px; border-radius:999px; font-weight:700; border:0; cursor:pointer }
.btn:hover{ filter:brightness(.95) }

/* ===== Simple cards/grid (used across pages) ===== */
.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.card{ background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.06); padding:20px }
.card.icon{ padding:0; overflow:hidden }
.card .iconbar{ background:var(--olive); color:#fff; font-size:40px; padding:20px; text-align:center }
.card .content{ padding:18px 16px; text-align:center }

/* Schedules: centered row with spacing between emoji and text */
.schedule{ margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--deep-purple); font-weight:600; letter-spacing:.2px; }
.schedule .emoji{line-height:1}

/* ===== Footer ===== */
.site-footer{ border-top:1px solid #eee; background:#fff; margin-top:40px }
.site-footer .inner{ padding:22px 0; text-align:center; font-size:.98rem; color:var(--gray) }
.site-footer a{ color:var(--dark-blue); text-decoration:underline }

/* ===== Responsive map embed ===== */
.map-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#e9ecef; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06) }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ===== Utilities ===== */
.stack{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap }
.mt-16{ margin-top:16px }
.mt-24{ margin-top:24px }
.mt-32{ margin-top:32px }
.mt-40{ margin-top:40px }

/* make anchor jumps stop below the sticky header */
html { scroll-padding-top: calc(var(--header-h) + 20px); }
@media (max-width: 768px){ html { scroll-padding-top: calc(var(--header-h-mobile) + 20px); } }

/* ===== Extra mobile tweaks at the very end (override earlier rules) ===== */
@media (max-width: 768px){
  /* tighter vertical spacing on small screens */
  .section{ padding:32px 0; }

  /* bigger logo on phones + matching sticky offset */
  :root { 
    --header-h-mobile: 110px;  /* increase header offset to fit larger logo */
    --header-h: var(--header-h-mobile);
  }
  .site-header .logo{ height:90px; }
}

/* Centrage fiable du bouton Envoyer (même si d'autres styles interfèrent) */
.form-actions {
  display: flex;              /* active le modèle flex */
  justify-content: center;    /* centre horizontalement */
  gap: 12px;                  /* espace si tu ajoutes un 2e bouton (ex: WhatsApp) */
  flex-wrap: wrap;            /* passe à la ligne sur petit écran si besoin */
  margin-top: 20px;
}

.form-actions .btn {
  display: inline-flex;       /* bouton compact, verticalement centré */
  align-items: center;
  justify-content: center;
}


.btn-whatsapp {
  background: #25D366;   /* vert WhatsApp */
  color: #fff;
}
.btn-whatsapp:hover {
  filter: brightness(.95);
}