/* ══════════════════════════════════════════════
   SEROR — Style Responsive Complet
   Couleurs logo : Vert #336600 | Rouge #FF3300
   Mobile First Approach
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Cairo:wght@300;400;600;700&family=Oswald:wght@400;600;700&display=swap');

:root {
  --green:       #336600;
  --green-dark:  #264d00;
  --green-mid:   #3d7a00;
  --green-light: #4d9900;
  --green-pale:  #edf5e0;
  --red:         #FF3300;
  --red-dark:    #cc2900;
  --red-light:   #ff5533;
  --white:       #FFFFFF;
  --off-white:   #f9faf7;
  --cream:       #f3f7ed;
  --gray:        #5a6b4a;
  --gray-light:  #ccd9b8;
  --dark:        #1a2a0d;
  --dark2:       #213510;
  --shadow:      rgba(51,102,0,0.15);
  --shadow-red:  rgba(255,51,0,0.15);

  /* Spacing scale */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 48px;
  --sp-xl: 80px;

  /* Font sizes responsive */
  --fs-xs: clamp(0.65rem, 1.5vw, 0.72rem);
  --fs-sm: clamp(0.78rem, 2vw, 0.88rem);
  --fs-md: clamp(0.9rem, 2.5vw, 1rem);
  --fs-lg: clamp(1.2rem, 3vw, 1.5rem);
  --fs-xl: clamp(2rem, 5vw, 3.5rem);
  --fs-hero: clamp(3.5rem, 10vw, 8.5rem);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:'Cairo',sans-serif; font-weight:300; background:var(--white); color:var(--dark); overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; }
button { cursor:pointer; font-family:'Cairo',sans-serif; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--green-mid); border-radius:2px; }

/* ══════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════ */
nav {
  position: fixed; top:0; width:100%; z-index:1000;
  background: rgba(26,42,13,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 64px;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(16px, 4vw, 60px);
  border-bottom: 2px solid var(--green-mid);
}
nav::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:100%; height:2px;
  background: linear-gradient(90deg, var(--green-mid) 75%, var(--red) 75%);
}

.logo img { height: clamp(32px, 5vw, 44px); border-radius:3px; }

/* Desktop nav links */
.nav-links { display:flex; gap:2px; list-style:none; }
.nav-links a {
  color:rgba(255,255,255,0.6);
  font-size: clamp(0.6rem, 1.2vw, 0.72rem);
  letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
  padding:8px clamp(6px, 1vw, 13px);
  border-radius:3px; transition:all 0.25s; cursor:pointer;
}
.nav-links a:hover, .nav-links a.active {
  color:#fff; background:var(--green-mid);
}

.nav-right { display:flex; align-items:center; gap:8px; }

.btn-admin {
  background:var(--red); color:#fff; border:none;
  padding:8px clamp(12px, 2vw, 22px);
  font-size: clamp(0.65rem, 1.5vw, 0.75rem);
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  border-radius:3px; transition:all 0.3s;
}
.btn-admin:hover { background:var(--red-dark); transform:translateY(-1px); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15); border-radius:4px;
  padding:8px; transition:all 0.25s;
}
.hamburger span {
  display:block; height:2px; background:#fff; border-radius:1px;
  transition:all 0.3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position:fixed; top:64px; left:0; right:0; z-index:999;
  background:rgba(26,42,13,0.98);
  backdrop-filter:blur(16px);
  padding:16px 0 24px;
  transform:translateY(-110%);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  border-bottom:2px solid var(--green-mid);
  max-height:calc(100vh - 64px);
  overflow-y:auto;
}
.mobile-nav.open { transform:translateY(0); }
.mobile-nav a {
  display:block; padding:13px 24px;
  color:rgba(255,255,255,0.65); font-size:0.85rem;
  font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  border-left:3px solid transparent; transition:all 0.25s;
}
.mobile-nav a:hover, .mobile-nav a.active {
  color:#fff; background:rgba(77,153,0,0.12); border-left-color:var(--green-light);
}
.mobile-nav .mob-admin {
  margin:16px 24px 0;
  display:block; text-align:center;
  background:var(--red); color:#fff;
  padding:12px; border-radius:4px; font-weight:700; font-size:0.8rem; letter-spacing:2px;
}

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
#accueil {
  min-height:100vh;
  background:var(--dark);
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding: 80px clamp(20px,5vw,80px) clamp(60px,8vw,100px);
}

.hero-stripe {
  position:absolute; top:0; left:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--green-mid) 50%, var(--red) 50%);
}
.hero-bg-pattern {
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 70% 50%, rgba(51,102,0,0.12) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(255,51,0,0.06) 0%, transparent 50%);
}
.hero-crescent {
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  font-size:clamp(8rem, 20vw, 18rem); opacity:0.04; color:var(--green-light);
  user-select:none; pointer-events:none;
}

.hero-content { position:relative; z-index:1; max-width:min(800px, 95%); }

.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(51,102,0,0.2); border:1px solid rgba(51,102,0,0.4);
  padding:7px 16px; border-radius:2px; margin-bottom:clamp(16px,3vw,28px);
  animation:fadeUp 0.7s 0.2s both;
}
.hero-badge-dot {
  width:6px; height:6px; background:var(--green-light); border-radius:50%;
  animation:blink 1.5s infinite;
}
.hero-badge span { font-size:clamp(0.6rem,1.5vw,0.72rem); letter-spacing:2px; text-transform:uppercase; color:var(--green-light); font-weight:700; }

.hero-title {
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  font-weight:900; color:#fff; line-height:0.95; letter-spacing:-2px;
  margin-bottom:10px; animation:fadeUp 0.7s 0.4s both;
}
.hero-title .accent { color:var(--green-light); }
.hero-title .accent_1 { color:var(--red); }

.hero-sub {
  font-family:'Oswald',sans-serif;
  font-size:clamp(0.8rem,2vw,1.3rem);
  letter-spacing:clamp(3px,1vw,6px); text-transform:uppercase;
  color:rgba(255,255,255,0.4); margin-bottom:clamp(16px,3vw,32px);
  animation:fadeUp 0.7s 0.6s both;
}

.hero-desc {
  font-size:clamp(0.88rem,2vw,1.05rem); line-height:1.9;
  color:rgba(255,255,255,0.55); max-width:560px;
  margin-bottom:clamp(24px,4vw,48px); font-weight:300;
  animation:fadeUp 0.7s 0.8s both;
}

.hero-btns {
  display:flex; gap:clamp(10px,2vw,16px); flex-wrap:wrap;
  animation:fadeUp 0.7s 1s both;
}

.btn-primary {
  background:var(--green-mid); color:#fff; border:none;
  padding:clamp(12px,2vw,15px) clamp(20px,4vw,38px);
  font-weight:700; font-size:clamp(0.75rem,1.8vw,0.85rem);
  letter-spacing:2px; text-transform:uppercase; border-radius:3px;
  transition:all 0.3s; display:inline-block;
}
.btn-primary:hover { background:var(--green-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(77,153,0,0.3); }

.btn-secondary {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,0.3);
  padding:clamp(12px,2vw,15px) clamp(20px,4vw,38px);
  font-weight:600; font-size:clamp(0.75rem,1.8vw,0.85rem);
  letter-spacing:2px; text-transform:uppercase; border-radius:3px;
  transition:all 0.3s; display:inline-block;
}
.btn-secondary:hover { border-color:var(--green-light); color:var(--green-light); transform:translateY(-2px); }

.hero-stats {
  position:absolute; right:clamp(20px,5vw,80px); bottom:clamp(30px,5vw,80px);
  display:flex; gap:0; border:1px solid rgba(51,102,0,0.3);
  animation:fadeUp 0.7s 1.2s both;
}
.stat { padding:clamp(14px,2vw,24px) clamp(20px,3vw,40px); text-align:center; border-right:1px solid rgba(51,102,0,0.3); }
.stat:last-child { border-right:none; }
.stat-num { font-family:'Oswald',sans-serif; font-size:clamp(1.5rem,3vw,2.5rem); font-weight:700; color:var(--green-light); line-height:1; }
.stat-label { font-size:clamp(0.6rem,1.2vw,0.68rem); letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-top:5px; display:block; }

/* ══════════════════════════════════════════════
   SECTION BASE
   ══════════════════════════════════════════════ */
section { padding:clamp(60px,8vw,100px) clamp(20px,5vw,60px); }

.section-tag { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.section-tag-line { width:28px; height:2px; background:var(--red); flex-shrink:0; }
.section-tag span { font-size:var(--fs-xs); letter-spacing:4px; text-transform:uppercase; color:var(--red); font-weight:700; font-family:'Oswald',sans-serif; }

.section-title {
  font-family:'Playfair Display',serif;
  font-size:var(--fs-xl); font-weight:900; color:var(--dark); line-height:1.05; margin-bottom:16px;
}
.section-title-light { color:#fff; }

.section-divider { width:60px; height:4px; background:linear-gradient(90deg,var(--green-mid) 60%,var(--red) 60%); margin-bottom:clamp(32px,5vw,60px); border-radius:2px; }

.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════
   À PROPOS
   ══════════════════════════════════════════════ */
#apropos { background:var(--off-white); }

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
}

.about-visual-wrap { position:relative; height:clamp(280px,40vw,520px); }
.about-main-box {
  position:absolute; top:0; left:0; width:76%; height:76%;
  background:linear-gradient(135deg,var(--dark2),var(--dark));
  display:flex; align-items:center; justify-content:center; border-radius:4px; overflow:hidden;
}
.about-main-box img { width:60%; border-radius:4px; }
.about-badge-box {
  position:absolute; bottom:0; right:0; width:54%; height:52%;
  background:var(--green-mid); border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 16px 48px rgba(51,102,0,0.3);
}
.about-badge-num { font-family:'Oswald',sans-serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:700; color:#fff; }
.about-badge-label { font-size:clamp(0.6rem,1.5vw,0.75rem); letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.about-red-bar { position:absolute; top:15%; left:-6px; width:5px; height:40%; background:var(--red); border-radius:3px; }

.about-text p { font-size:var(--fs-md); line-height:1.9; color:var(--gray); margin-bottom:20px; }
.about-text p strong { color:var(--green-dark); font-weight:700; }

.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(24px,4vw,36px); }
.value-card { background:var(--white); border-left:4px solid var(--green-mid); padding:clamp(14px,2vw,18px) clamp(14px,2vw,20px); border-radius:2px; box-shadow:0 2px 10px var(--shadow); transition:transform 0.3s; }
.value-card:nth-child(2n) { border-left-color:var(--red); }
.value-card:hover { transform:translateY(-3px); }
.value-card h4 { font-family:'Oswald',sans-serif; font-size:var(--fs-xs); letter-spacing:2px; text-transform:uppercase; color:var(--green-dark); margin-bottom:6px; }
.value-card:nth-child(2n) h4 { color:var(--red-dark); }
.value-card p { font-size:clamp(0.78rem,1.8vw,0.83rem); color:var(--gray); line-height:1.6; }

/* ══════════════════════════════════════════════
   HISTORIQUE
   ══════════════════════════════════════════════ */
#historique { background:var(--dark); }

.timeline { max-width:860px; margin:0 auto; position:relative; }
.timeline::before {
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,var(--green-mid),var(--green-mid),transparent);
  transform:translateX(-50%); opacity:0.5;
}

.tl-item { display:flex; margin-bottom:clamp(32px,5vw,56px); position:relative; }
.tl-item:nth-child(odd) { flex-direction:row-reverse; }

.tl-card {
  width:calc(50% - 40px); background:var(--dark2);
  border:1px solid rgba(51,102,0,0.2); padding:clamp(20px,3vw,28px);
  border-radius:4px; transition:border-color 0.3s, transform 0.3s;
}
.tl-card:hover { border-color:var(--green-mid); transform:translateY(-3px); }
.tl-item:nth-child(odd)  .tl-card { margin-left:40px; }
.tl-item:nth-child(even) .tl-card { margin-right:40px; }

.tl-year { font-family:'Oswald',sans-serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:var(--green-light); line-height:1; margin-bottom:8px; }
.tl-card h3 { font-family:'Oswald',sans-serif; font-size:clamp(0.85rem,2vw,1rem); letter-spacing:1px; text-transform:uppercase; color:#fff; margin-bottom:8px; }
.tl-card p  { font-size:var(--fs-sm); color:rgba(255,255,255,0.5); line-height:1.7; }
.tl-dot { position:absolute; left:50%; top:26px; width:14px; height:14px; background:var(--red); border:3px solid var(--dark); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 14px rgba(255,51,0,0.5); }

/* ══════════════════════════════════════════════
   ACTIVITÉS
   ══════════════════════════════════════════════ */
#activites { background:var(--cream); }

.acts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px); }

.act-card {
  background:var(--white); border:1px solid var(--gray-light); border-radius:6px;
  padding:clamp(24px,3vw,36px) clamp(18px,2.5vw,28px);
  position:relative; overflow:hidden; transition:all 0.35s;
  box-shadow:0 2px 10px var(--shadow);
}
.act-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--green-mid) 60%,var(--red) 60%);
  transform:scaleX(0); transform-origin:left; transition:transform 0.35s;
}
.act-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px var(--shadow); border-color:var(--green-light); }
.act-card:hover::before { transform:scaleX(1); }
.act-num { position:absolute; top:14px; right:18px; font-family:'Oswald',sans-serif; font-size:3rem; font-weight:700; color:rgba(51,102,0,0.06); line-height:1; }
.act-icon { font-size:clamp(2rem,4vw,2.8rem); margin-bottom:16px; }
.act-card h3 { font-family:'Oswald',sans-serif; font-size:clamp(0.9rem,2vw,1.15rem); letter-spacing:1.5px; text-transform:uppercase; color:var(--dark); margin-bottom:10px; }
.act-card p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; }
.act-tag { display:inline-block; margin-top:18px; padding:4px 12px; background:var(--green-pale); color:var(--green-dark); font-size:var(--fs-xs); letter-spacing:1.5px; text-transform:uppercase; font-weight:700; border-radius:2px; border:1px solid rgba(51,102,0,0.15); }

/* ══════════════════════════════════════════════
   RÉFÉRENCES
   ══════════════════════════════════════════════ */
#references { background:var(--white); }

.refs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,18px); }

.ref-card {
  background:var(--off-white); border:1px solid var(--gray-light); border-radius:6px;
  padding:clamp(20px,3vw,28px) clamp(14px,2vw,20px); text-align:center;
  transition:all 0.3s; position:relative; overflow:hidden;
}
.ref-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green-mid),var(--red)); transform:scaleX(0); transition:transform 0.3s; }
.ref-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px var(--shadow); border-color:var(--green-light); }
.ref-card:hover::after { transform:scaleX(1); }
.ref-logo { width:clamp(50px,8vw,68px); height:clamp(50px,8vw,68px); background:var(--green-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(1.4rem,3vw,2rem); margin:0 auto 16px; border:2px solid rgba(51,102,0,0.15); transition:background 0.3s; }
.ref-card:hover .ref-logo { background:var(--green-mid); }
.ref-card h4 { font-family:'Oswald',sans-serif; font-size:clamp(0.78rem,1.8vw,0.95rem); letter-spacing:1.5px; text-transform:uppercase; color:var(--dark); margin-bottom:6px; }
.ref-card p  { font-size:clamp(0.72rem,1.5vw,0.8rem); color:var(--gray); }
.ref-year { display:inline-block; margin-top:8px; font-family:'Oswald',sans-serif; font-size:clamp(0.9rem,2vw,1.1rem); font-weight:700; color:var(--green-mid); letter-spacing:1px; }

/* ══════════════════════════════════════════════
   CERTIFICATION & POLITIQUES
   ══════════════════════════════════════════════ */
#certification { background:var(--off-white); }

.cert-tabs-wrap { display:flex; gap:0; margin-bottom:clamp(24px,4vw,40px); border-bottom:2px solid var(--gray-light); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cert-tab-btn { background:none; border:none; padding:clamp(10px,2vw,14px) clamp(16px,3vw,32px); font-family:'Oswald',sans-serif; font-size:clamp(0.72rem,1.8vw,0.85rem); letter-spacing:2px; text-transform:uppercase; color:var(--gray); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.25s; white-space:nowrap; }
.cert-tab-btn.active { color:var(--green); border-bottom-color:var(--green); }
.cert-tab-panel { display:none; } .cert-tab-panel.active { display:block; }

.cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px); }

.cert-card { background:var(--white); border:1px solid var(--gray-light); border-radius:8px; overflow:hidden; box-shadow:0 2px 10px var(--shadow); transition:all 0.3s; }
.cert-card:hover { transform:translateY(-4px); box-shadow:0 14px 40px var(--shadow); }
.cert-card-top { background:linear-gradient(135deg,var(--green),var(--green-mid)); padding:clamp(20px,3vw,28px) clamp(18px,2.5vw,24px) clamp(16px,2vw,20px); position:relative; }
.cert-card-icon { font-size:clamp(1.8rem,3.5vw,2.5rem); margin-bottom:8px; display:block; }
.cert-card-top h3 { font-family:'Oswald',sans-serif; font-size:clamp(0.85rem,2vw,1rem); letter-spacing:1.5px; text-transform:uppercase; color:#fff; margin-bottom:4px; }
.cert-body { font-size:var(--fs-xs); color:rgba(255,255,255,0.65); letter-spacing:1px; }
.cert-year-tag { position:absolute; top:12px; right:12px; background:rgba(255,255,255,0.15); color:#fff; font-size:var(--fs-xs); font-weight:700; letter-spacing:1px; padding:3px 10px; border-radius:20px; }
.cert-card-body { padding:clamp(16px,2.5vw,20px) clamp(18px,2.5vw,24px); }
.cert-card-body p { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; margin-bottom:10px; }
.cert-num-tag { font-size:var(--fs-xs); color:var(--red); letter-spacing:1px; font-weight:700; }
.cert-file-btn { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:8px 16px; background:var(--green); color:#fff; font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; border-radius:3px; transition:background 0.25s; }
.cert-file-btn:hover { background:var(--green-mid); }
.cert-file-btn.pdf { background:var(--red); }
.cert-file-btn.pdf:hover { background:var(--red-dark); }

.policy-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,18px); }
.policy-card { background:var(--white); border:1px solid var(--gray-light); border-radius:6px; padding:clamp(18px,2.5vw,24px) clamp(18px,2.5vw,26px); display:flex; align-items:flex-start; gap:clamp(12px,2vw,18px); transition:all 0.3s; box-shadow:0 2px 8px var(--shadow); }
.policy-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px var(--shadow); border-color:var(--green); }
.policy-icon { min-width:48px; height:48px; background:var(--green-pale); border:2px solid rgba(51,102,0,0.2); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.policy-info h3 { font-family:'Oswald',sans-serif; font-size:clamp(0.88rem,2vw,1rem); letter-spacing:1px; text-transform:uppercase; color:var(--green-dark); margin-bottom:6px; }
.policy-info p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.7; margin-bottom:10px; }
.policy-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.policy-cat  { font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:3px 10px; background:var(--green-pale); color:var(--green-dark); border-radius:2px; }
.policy-date { font-size:clamp(0.72rem,1.5vw,0.75rem); color:var(--gray); }

/* ══════════════════════════════════════════════
   LOCALISATION MAP
   ══════════════════════════════════════════════ */
#localisation { background:var(--off-white); }

.map-legend { display:flex; gap:clamp(12px,2vw,24px); flex-wrap:wrap; margin-top:18px; padding:clamp(10px,2vw,14px) clamp(14px,2vw,20px); background:rgba(51,102,0,0.07); border:1px solid rgba(51,102,0,0.18); border-radius:4px; align-items:center; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--gray); }
.legend-dot  { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.dot-active { background:#4d9900; } .dot-done { background:#FFA502; } .dot-pending { background:#74B9FF; }

.map-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2vw,14px); margin-top:clamp(18px,3vw,24px); }
.mpc { background:var(--white); border:1px solid var(--gray-light); border-radius:6px; padding:clamp(14px,2vw,16px) clamp(14px,2vw,18px); cursor:pointer; transition:all 0.25s; border-left:4px solid var(--green); }
.mpc:hover { transform:translateY(-3px); box-shadow:0 8px 24px var(--shadow); }
.mpc.status-active { border-left-color:#4d9900; } .mpc.status-done { border-left-color:#FFA502; } .mpc.status-pending { border-left-color:#74B9FF; }
.mpc h4 { font-family:'Oswald',sans-serif; font-size:clamp(0.8rem,1.8vw,0.88rem); letter-spacing:1px; text-transform:uppercase; color:var(--dark); margin-bottom:5px; line-height:1.3; }
.mpc p  { font-size:clamp(0.72rem,1.5vw,0.75rem); color:var(--gray); }
.mpc-st { display:inline-block; margin-top:7px; padding:2px 9px; border-radius:2px; font-size:0.65rem; letter-spacing:1px; text-transform:uppercase; font-weight:700; font-family:'Cairo',sans-serif; }
.pop-active  { background:rgba(77,153,0,0.15);  color:#3d7a00; border:1px solid rgba(77,153,0,0.3); }
.pop-done    { background:rgba(255,165,2,0.15);  color:#b37500; border:1px solid rgba(255,165,2,0.3); }
.pop-pending { background:rgba(74,127,193,0.15); color:#2c5282; border:1px solid rgba(74,127,193,0.3); }

/* ══════════════════════════════════════════════
   GALERIE
   ══════════════════════════════════════════════ */
#galerie { background:var(--dark); }

.gallery-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,32px); }
.gf-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); padding:8px clamp(12px,2vw,20px); font-size:var(--fs-xs); font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border-radius:3px; transition:all 0.25s; }
.gf-btn.active,.gf-btn:hover { background:var(--green-mid); border-color:var(--green-mid); color:#fff; }

.gallery-grid { columns:clamp(2,3,3); gap:clamp(10px,2vw,16px); }
.gallery-item { break-inside:avoid; margin-bottom:clamp(10px,2vw,16px); position:relative; overflow:hidden; border-radius:6px; cursor:pointer; }
.gallery-item img { width:100%; display:block; transition:transform 0.4s; }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(26,42,13,0.9),transparent 60%); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:clamp(12px,2vw,18px); }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-caption h4 { font-family:'Oswald',sans-serif; font-size:clamp(0.8rem,1.8vw,0.9rem); letter-spacing:1px; text-transform:uppercase; color:#fff; margin-bottom:3px; }
.gallery-caption p  { font-size:clamp(0.7rem,1.5vw,0.75rem); color:rgba(255,255,255,0.6); }
.gallery-empty { text-align:center; padding:clamp(32px,6vw,60px); color:rgba(255,255,255,0.2); font-size:var(--fs-sm); border:1px dashed rgba(255,255,255,0.1); border-radius:6px; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.94); display:none; align-items:center; justify-content:center; padding:16px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:calc(100vw - 120px); max-height:88vh; object-fit:contain; border-radius:4px; }
.lightbox-close { position:absolute; top:16px; right:20px; color:#fff; font-size:2rem; cursor:pointer; opacity:0.6; transition:opacity 0.2s; background:none; border:none; line-height:1; }
.lightbox-close:hover { opacity:1; }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:none; color:#fff; font-size:2rem; width:clamp(40px,6vw,54px); height:clamp(40px,6vw,54px); border-radius:50%; cursor:pointer; transition:background 0.25s; display:flex; align-items:center; justify-content:center; }
.lightbox-nav:hover { background:rgba(51,102,0,0.6); }
.lightbox-prev { left:10px; } .lightbox-next { right:10px; }
.lightbox-caption { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.7); text-align:center; font-size:var(--fs-sm); width:90%; }

/* ══════════════════════════════════════════════
   VIDÉOS
   ══════════════════════════════════════════════ */
#videos { background:var(--cream); }

.videos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.video-card { background:var(--white); border:1px solid var(--gray-light); border-radius:8px; overflow:hidden; box-shadow:0 2px 10px var(--shadow); transition:all 0.3s; }
.video-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px var(--shadow); }
.video-thumb { position:relative; height:clamp(150px,20vw,180px); background:var(--dark2); cursor:pointer; overflow:hidden; }
.video-thumb img  { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.video-thumb:hover img { transform:scale(1.05); }
.video-play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-play-btn span { width:clamp(44px,6vw,58px); height:clamp(44px,6vw,58px); background:rgba(51,102,0,0.85); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(1.2rem,2.5vw,1.6rem); color:#fff; transition:all 0.3s; border:3px solid rgba(255,255,255,0.3); }
.video-thumb:hover .video-play-btn span { background:var(--green); transform:scale(1.1); }
.video-local-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--dark),var(--dark2)); font-size:clamp(2.5rem,5vw,3.5rem); }
.video-body { padding:clamp(14px,2vw,18px) clamp(16px,2.5vw,20px); }
.video-body h3 { font-family:'Oswald',sans-serif; font-size:clamp(0.85rem,1.8vw,0.95rem); letter-spacing:1px; text-transform:uppercase; color:var(--dark); margin-bottom:6px; }
.video-body p  { font-size:var(--fs-sm); color:var(--gray); line-height:1.6; }
.video-meta { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.video-meta span { font-size:var(--fs-xs); color:var(--gray); }
.video-empty { text-align:center; padding:clamp(32px,6vw,60px); color:var(--gray); font-size:var(--fs-sm); border:1px dashed var(--gray-light); border-radius:6px; grid-column:1/-1; }

/* Video modal */
.vmodal { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.94); display:none; align-items:center; justify-content:center; padding:16px; }
.vmodal.open { display:flex; }
.vmodal-inner { position:relative; width:100%; max-width:900px; }
.vmodal-close { position:absolute; top:-40px; right:0; color:#fff; font-size:1.8rem; cursor:pointer; opacity:0.7; transition:opacity 0.2s; background:none; border:none; }
.vmodal-close:hover { opacity:1; }
.vmodal iframe, .vmodal video { width:100%; border-radius:6px; aspect-ratio:16/9; }

/* ══════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════ */
#contact { background:var(--dark); }

.contact-wrapper { display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(32px,6vw,80px); }

.contact-info-block { display:flex; gap:clamp(14px,2vw,20px); margin-bottom:clamp(24px,4vw,36px); padding-bottom:clamp(24px,4vw,36px); border-bottom:1px solid rgba(255,255,255,0.07); }
.contact-info-block:last-child { border-bottom:none; }
.contact-icon { min-width:clamp(40px,6vw,50px); height:clamp(40px,6vw,50px); background:rgba(51,102,0,0.15); border:1px solid rgba(51,102,0,0.35); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:clamp(1.2rem,2.5vw,1.4rem); flex-shrink:0; }
.contact-info-block h4 { font-family:'Oswald',sans-serif; font-size:var(--fs-xs); letter-spacing:3px; text-transform:uppercase; color:var(--green-light); margin-bottom:8px; }
.contact-info-block p  { font-size:var(--fs-sm); color:rgba(255,255,255,0.5); line-height:1.7; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,18px); margin-bottom:clamp(12px,2vw,18px); }
.form-field { margin-bottom:clamp(12px,2vw,18px); }
.form-field label { display:block; font-size:var(--fs-xs); letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:8px; font-weight:700; }
.form-field input,.form-field textarea,.form-field select { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#fff; padding:clamp(10px,2vw,13px) clamp(12px,2vw,16px); font-family:'Cairo',sans-serif; font-size:var(--fs-sm); outline:none; transition:all 0.3s; border-radius:3px; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus { border-color:var(--green-light); background:rgba(77,153,0,0.06); }
.form-field textarea { height:clamp(100px,15vw,130px); resize:vertical; }
.form-field select option { background:var(--dark2); }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
footer { background:var(--dark2); border-top:1px solid rgba(51,102,0,0.2); padding:clamp(36px,5vw,50px) clamp(20px,5vw,60px); }

.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,4vw,40px); margin-bottom:clamp(28px,4vw,40px); padding-bottom:clamp(28px,4vw,40px); border-bottom:1px solid rgba(255,255,255,0.07); }

.footer-logo-img { height:clamp(36px,5vw,48px); border-radius:4px; margin-bottom:10px; }
.footer-desc { font-size:var(--fs-sm); color:rgba(255,255,255,0.3); line-height:1.7; max-width:280px; margin-top:8px; }

.footer-links-col h5 { font-family:'Oswald',sans-serif; font-size:var(--fs-xs); letter-spacing:3px; text-transform:uppercase; color:var(--green-light); margin-bottom:14px; }
.footer-links-col a { display:block; font-size:var(--fs-sm); color:rgba(255,255,255,0.35); margin-bottom:8px; transition:color 0.25s; cursor:pointer; }
.footer-links-col a:hover { color:#fff; }

.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p { font-size:clamp(0.72rem,1.5vw,0.8rem); color:rgba(255,255,255,0.22); }

.footer-flag { display:flex; overflow:hidden; border-radius:2px; width:44px; height:26px; }
.flag-green { background:var(--green-mid); flex:1; }
.flag-white { background:#fff; flex:1; position:relative; display:flex; align-items:center; justify-content:center; }
.flag-white::after { content:'☪'; font-size:0.7rem; color:var(--red); }
.flag-red { background:var(--red); width:6px; }

/* Toast */
.toast { position:fixed; bottom:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); z-index:9999; background:var(--green-mid); color:#fff; padding:clamp(10px,2vw,14px) clamp(18px,3vw,24px); border-radius:4px; font-size:var(--fs-sm); font-weight:600; box-shadow:0 8px 32px rgba(51,102,0,0.35); transform:translateY(80px); opacity:0; transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); pointer-events:none; max-width:calc(100vw - 40px); }
.toast.show { transform:translateY(0); opacity:1; }
.toast.error { background:var(--red); }

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);} }
@keyframes blink  { 0%,100%{opacity:1;}50%{opacity:0.3;} }

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════ */

/* ── Large tablets (≤1200px) ── */
@media (max-width:1200px) {
  .refs-grid { grid-template-columns:repeat(3,1fr); }
  .acts-grid { grid-template-columns:repeat(2,1fr); }
  .cert-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
}

/* ── Tablets (≤900px) ── */
@media (max-width:900px) {
  .nav-links, .btn-admin { display:none; }
  .hamburger { display:flex; }

  .hero-stats { display:none; }
  .hero-crescent { font-size:12rem; opacity:0.03; }

  .about-grid { grid-template-columns:1fr; }
  .about-visual-wrap { height:260px; order:2; }
  .about-text { order:1; }
  .about-main-box { width:72%; }

  .timeline::before { left:20px; }
  .tl-item, .tl-item:nth-child(odd) { flex-direction:column; }
  .tl-card, .tl-item:nth-child(odd) .tl-card, .tl-item:nth-child(even) .tl-card {
    width:auto; margin:0 0 0 48px;
  }
  .tl-dot { left:20px; }

  .refs-grid { grid-template-columns:repeat(2,1fr); }
  .acts-grid { grid-template-columns:repeat(2,1fr); }
  .cert-grid { grid-template-columns:1fr 1fr; }
  .policy-grid { grid-template-columns:1fr; }
  .map-cards { grid-template-columns:repeat(2,1fr); }
  .videos-grid { grid-template-columns:repeat(2,1fr); }

  .contact-wrapper { grid-template-columns:1fr; gap:32px; }
  .footer-top { grid-template-columns:1fr 1fr; }

  .gallery-grid { columns:2; }
}

/* ── Mobile (≤600px) ── */
@media (max-width:600px) {
  section { padding:clamp(48px,10vw,64px) 16px; }
  nav { padding:0 16px; height:58px; }
  .mobile-nav { top:58px; }

  .hero-title { letter-spacing:-1px; }
  .hero-btns { flex-direction:column; width:100%; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width:100%; text-align:center; }

  .values-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .acts-grid { grid-template-columns:1fr; }
  .refs-grid { grid-template-columns:1fr 1fr; }
  .cert-grid { grid-template-columns:1fr; }
  .map-cards { grid-template-columns:1fr; }
  .videos-grid { grid-template-columns:1fr; }
  .gallery-grid { columns:2; }

  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; gap:8px; }

  .lightbox img { max-width:100%; max-height:80vh; }
  .lightbox-nav { display:none; }

  .cert-tabs-wrap { flex-wrap:nowrap; }
  .cert-tab-btn { padding:10px 16px; font-size:0.7rem; }

  .hero-badge span { font-size:0.58rem; letter-spacing:1px; }
}

/* ── Small mobile (≤380px) ── */
@media (max-width:380px) {
  .refs-grid { grid-template-columns:1fr; }
  .gallery-grid { columns:1; }
  .hero-badge { display:none; }
}