/* ============================================================
   Reprendre Racine - Custom CSS (complément à Tailwind CDN)
   ============================================================ */

/* --- Ancres : décalage sous le header fixe ------------------- */
section[id] { scroll-margin-top: 88px; }

/* --- Scrollbar ------------------------------------------------ */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: #f4f7f2; }
::-webkit-scrollbar-thumb  { background: #7da472; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #466b3d; }

/* --- Navbar transparente → solide au scroll ----------------- */
#header {
  background: transparent;
}
#header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
}

/* --- Couleurs des liens : clairs sur le hero, foncés au scroll --- */
#header .logo-title,
#header .nav-link {
  color: #ffffff;
}
#header .logo-sub {
  color: #e6ede2;        /* sage-100 */
}
#header .nav-link:hover,
.group:hover .logo-title {
  color: #cddbc6;        /* sage-200 */
}
#header .menu-toggle {
  color: #ffffff;
}
#header .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* État défilé : fond blanc → texte vert foncé */
#header.scrolled .logo-title,
#header.scrolled .nav-link {
  color: #375533;        /* sage-700 */
}
#header.scrolled .logo-sub {
  color: #5a8750;        /* sage-500 */
}
#header.scrolled .nav-link:hover,
#header.scrolled .group:hover .logo-title {
  color: #5a8750;
}
#header.scrolled .menu-toggle {
  color: #375533;
}
#header.scrolled .menu-toggle:hover {
  background: #e6ede2;   /* sage-100 */
}

/* --- Bouton "Rendez-vous" : terracotta, tape-à-l'œil ------------ */
.nav-cta {
  background-color: #9e6b4a;          /* terra */
  border: 2px solid #fff2e9;          /* contour crème, tranche sur le terracotta */
  box-shadow: 0 0 0 2px rgba(74, 46, 28, 0.55), 0 4px 14px rgba(158, 107, 74, 0.35);
}
.nav-cta:hover {
  background-color: #b07a56;
  box-shadow: 0 0 0 2px rgba(74, 46, 28, 0.6), 0 6px 18px rgba(158, 107, 74, 0.5);
}

/* --- Bouton d'action principal (CTA sections + formulaire) ------ */
.btn-cta {
  background-color: #9e6b4a;          /* terracotta */
  color: #ffffff;
  border: 2px solid #fff2e9;          /* contour crème bien visible */
  box-shadow: 0 0 0 2px rgba(74, 46, 28, 0.55), 0 8px 20px rgba(158, 107, 74, 0.4);
}
.btn-cta:hover {
  background-color: #b07a56;
  box-shadow: 0 0 0 2px rgba(74, 46, 28, 0.6), 0 12px 28px rgba(158, 107, 74, 0.55);
  transform: translateY(-2px);
}

/* --- Boutons du hero : bien tranchés sur la forêt ------------ */
.hero-btn-primary {
  background-color: #9e6b4a;                        /* terracotta */
  border: 2px solid #fff2e9;                        /* contour crème bien visible */
  box-shadow: 0 0 0 2px rgba(74, 46, 28, 0.5), 0 8px 24px rgba(158, 107, 74, 0.5);
}
.hero-btn-primary:hover {
  background-color: #b07a56;
  box-shadow: 0 0 0 2px rgba(74, 46, 28, 0.55), 0 12px 32px rgba(158, 107, 74, 0.65);
}
.hero-btn-secondary {
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero-btn-secondary:hover {
  background-color: #ffffff;
  color: #2d452a;                                   /* sage-800 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* --- Étiquette de section (Réagir, Contextualiser, Agir...) --- */
.section-badge {
  display: inline-block;
  background-color: #375533;          /* le vert du cadre "pas une fatalité" */
  color: #faf7f0;                     /* crème */
  border: 2px solid #e6ede2;          /* contour clair, comme les boutons */
  box-shadow: 0 0 0 2px rgba(55, 85, 51, 0.35), 0 6px 16px rgba(37, 57, 35, 0.2);
}

/* --- Slogan / citation mise en avant ------------------------ */
.slogan {
  font-family: 'Playfair Display', Georgia, serif;
  color: #375533;                     /* sage-700 */
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  border-top: 1px solid #cddbc6;      /* sage-200 */
  border-bottom: 1px solid #cddbc6;
}

/* --- Hero background : grand arbre + rayons de soleil -------- */
.hero-bg {
  background:
    linear-gradient(160deg, rgba(26, 48, 24, 0.35) 0%, rgba(37, 57, 35, 0.45) 60%, rgba(37, 85, 51, 0.5) 100%),
    url("../assets/hero-arbre.jpg") center center / cover no-repeat;
}

/* --- Feuilles décoratives (SVG data-uri) -------------------- */
.hero-leaves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 5 Q55 20 50 40 Q45 55 40 60 Q35 55 30 40 Q25 20 40 5Z' fill='%23ffffff' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* --- Sélecteur arrow personnalisé --------------------------- */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  padding-right: 2.5rem;
}

/* --- Focus global accessible -------------------------------- */
*:focus-visible {
  outline: 2px solid #5a8750;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Smooth scroll (fallback JS) ---------------------------- */
html {
  scroll-behavior: smooth;
}

/* --- Typographie supplémentaire ----------------------------- */
.font-serif {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* --- Transition douce des sections -------------------------- */
section {
  transition: background-color 0.3s ease;
}