html { scroll-behavior: smooth; }
body { font-feature-settings: "cv11", "ss01"; }

.tracking-tightest { letter-spacing: -0.03em; }
.leading-body { line-height: 1.7; }

.btn-anim {
  transition-property: transform, box-shadow, background-color, opacity, border-color;
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-anim:hover { transform: translateY(-2px); }
.btn-anim:active { transform: translateY(0px) scale(0.98); }

.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.card-lift {
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease, border-color .3s ease;
  border-color: #E2E8E4;
}
.card-lift:hover {
  transform: translateY(-4px);
  border-color: #00502A;
  box-shadow: 0 14px 30px -18px rgba(0,80,42,.35);
}

.noise { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; }

:focus-visible { outline: none; }
.focus-ring:focus-visible { box-shadow: 0 0 0 2px #F7FAF8, 0 0 0 4px #1D6B45; border-radius: 8px; }

::selection { background: #C1272D; color: #fff; }

/* ---------- Eyebrows ---------- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #1D6B45;
  font-weight: 600;
}
.eyebrow-on-green { color: #8FD0A9; }

/* ---------- Sticky nav scroll shadow ---------- */
header { transition: box-shadow .25s ease; }
header.scrolled { box-shadow: 0 4px 16px -4px rgba(0,80,42,.15), 0 2px 6px -2px rgba(20,32,26,.08); }

/* ---------- Scroll reveal (respects prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-init {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal-init.in-view { opacity: 1; transform: translateY(0); }
}

/* ---------- Header dropdowns ---------- */
.nav-drop { transition: opacity .2s ease, transform .2s cubic-bezier(0.34,1.56,0.64,1); }
.group:hover .nav-drop, .group:focus-within .nav-drop {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav-drop { opacity: 0; transform: translateY(6px); pointer-events: none; }
.nav-chevron { transition: transform .2s ease; }
.group:hover .nav-chevron, .group:focus-within .nav-chevron { transform: rotate(180deg); }

#mobile-menu { transition: transform .32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .28s ease; }

/* ---------- Hero with photo background ---------- */
.hero-photo { position: relative; overflow: hidden; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(0,80,42,0.88) 0%, rgba(0,80,42,0.55) 42%, rgba(20,32,26,0.35) 75%);
}
.hero-photo > * { position: relative; z-index: 2; }

/* ---------- École Marocaine hero: real photo under brand-green scrim ---------- */
.hero-bg-ecole {
  background-color: #00502A;
  background-image:
    linear-gradient(100deg, rgba(0,80,42,0.88) 0%, rgba(0,80,42,0.55) 42%, rgba(20,32,26,0.35) 75%),
    url('../brand_assets/ecole-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Homepage hero: full-bleed forest photo, flat dark scrim ---------- */
.hero-bg-forest {
  background-color: #00502A;
  background-image:
    linear-gradient(rgba(0,26,15,0.54), rgba(0,26,15,0.67)),
    url('../brand_assets/hero-forest.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .hero-bg-forest {
    background-image:
      linear-gradient(rgba(0,26,15,0.62), rgba(0,26,15,0.74)),
      url('../brand_assets/hero-forest.jpg');
  }
}

/* ---------- Unified green band (hero / program / CTA / footer) ---------- */
/* Single source of truth: pure green-family gradient only, #00502A -> #023B1F. */
.program-band,
.gradient-band,
.footer-gradient {
  background: linear-gradient(180deg, #00502A 0%, #023B1F 100%);
  position: relative;
}

.program-card { border-left-width: 6px; border-left-color: #1D6B45; }

/* ---------- Avatar grid ---------- */
.avatar-grid img { border-radius: 9999px; object-fit: cover; aspect-ratio: 1/1; width: 100%; box-shadow: 0 1px 2px rgba(20,32,26,0.06), 0 1px 1px rgba(0,80,42,0.05); }

/* ---------- Timeline (Evenements page) ---------- */
.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1.5px;
  background: #E2E8E4;
}
.timeline-dot {
  position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 9999px;
  background: #fff; border: 2.5px solid #1D6B45;
}
.timeline-item { position: relative; padding-left: 40px; }