/* ═══════════════════════════════════════════
   EAFDL — Feuille de styles partagée
   ═══════════════════════════════════════════ */

:root {
  --bg:        #F3F1E9;
  --white:     #FFFFFF;
  --green:     #1A4A10;
  --green-mid: #2B6918;
  --green-lt:  #3D8A22;
  --green-dk:  #0D2808;
  --gold:      #C9A44A;
  --gold-lt:   #D4B25A;
  --gold-dk:   #9A7209;
  --text:      #1C1C1C;
  --text-2:    #565656;
  --text-3:    #8C8C8C;
  --border:    #E0DBD0;
  --border-dk: #C8C2B4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 99px; }

/* ── Typography ── */
.ff-d { font-family: 'Playfair Display', serif; }
.text-gg { background: linear-gradient(135deg, var(--gold-dk), #D4AF37 50%, var(--gold-dk)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lbl { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.gbar { display: block; width: 52px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.gbar-w { display: block; width: 52px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }

/* ── Navbar ── */
#navbar { transition: background 0.4s, box-shadow 0.4s; }
#navbar.scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(22px); box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.07); }
.nl { color: rgba(255,255,255,0.88); transition: all 0.25s; font-size: 0.82rem; font-weight: 500; padding: 7px 11px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.nl:hover { color: #fff; background: rgba(255,255,255,0.1); }
#navbar.scrolled .nl { color: var(--text); }
#navbar.scrolled .nl:hover { color: var(--green); background: rgba(26,74,16,0.07); }
.nl.cur { font-weight: 700; }
.nl.cur::after { display:none; }
.logo-nm { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--gold); font-size: 1.15rem; line-height: 1; }
.logo-sub { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color 0.4s; line-height: 1; margin-top: 2px; }
#navbar.scrolled .logo-sub { color: var(--text-3); }

/* Dropdown */
.has-dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px) scale(0.96); transform-origin: top center; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 6px; min-width: 230px; box-shadow: 0 12px 44px rgba(0,0,0,0.13); transition: all 0.22s cubic-bezier(.16,1,.3,1); opacity: 0; pointer-events: none; z-index: 300; }
.has-dd:hover .dd-menu { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; pointer-events: all; }
.dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 9px; color: var(--text); font-size: 0.8rem; font-weight: 500; text-decoration: none; transition: all 0.18s; }
.dd-item:hover { background: var(--bg); color: var(--green); }
.dd-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Mobile menu */
#mob-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
#mob-menu.open { max-height: 540px; }
.mob-inner { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 16px; }
.mob-l { display: block; padding: 10px 14px; border-radius: 9px; color: var(--text); font-size: 0.84rem; font-weight: 500; text-decoration: none; transition: all 0.18s; }
.mob-l:hover { background: var(--bg); color: var(--green); }
.mob-sub { display: none; padding-left: 14px; }
.mob-sub.open { display: block; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: none; transition: all 0.28s; border: none; }
.btn-g { background: var(--green); color: #fff; position: relative; overflow: hidden; }
.btn-g::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(255,255,255,0.14),transparent); transform:translateX(-100%); transition:transform 0.5s; }
.btn-g:hover::after { transform:translateX(100%); }
.btn-g:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(26,74,16,0.38); }
.btn-gd { background: linear-gradient(135deg, #A68010, #D4AF37 50%, #A68010); color: #0a0a0a; position:relative; overflow:hidden; }
.btn-gd::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.26),transparent); transform:translateX(-100%); transition:transform 0.5s; }
.btn-gd:hover::after { transform:translateX(100%); }
.btn-gd:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(212,175,55,0.42); }
.btn-ol { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn-ol:hover { border-color:#fff; background:rgba(255,255,255,0.12); }
.btn-ol-g { border: 1.5px solid var(--green); color: var(--green); background: transparent; }
.btn-ol-g:hover { background: var(--green); color: #fff; transform:translateY(-2px); }

/* ── Hero ── */
.hero-ov { background: linear-gradient(135deg, rgba(6,16,3,0.91) 0%, rgba(15,44,8,0.72) 50%, rgba(6,16,3,0.93) 100%); }
.page-hero { min-height: 52vh; display: flex; align-items: center; position: relative; overflow: hidden; }

@keyframes fadeUp  { from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;} }
@keyframes floatY  { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }
@keyframes pring   { 0%,100%{box-shadow:0 0 0 0 rgba(201,164,74,.35);}50%{box-shadow:0 0 0 14px rgba(201,164,74,0);} }
.fu1{animation:fadeUp .7s .15s both;} .fu2{animation:fadeUp .7s .35s both;}
.fu3{animation:fadeUp .7s .55s both;} .fu4{animation:fadeUp .7s .75s both;}

/* ── Cards ── */
.crd { background: var(--white); border: 1px solid var(--border); border-radius: 16px; transition: transform .32s, box-shadow .32s; }
.crd:hover { transform: translateY(-6px); box-shadow: 0 20px 52px rgba(0,0,0,0.11); }
.crd-grn { background: var(--green); color: #fff; border-radius: 16px; transition: transform .32s, box-shadow .32s; }
.crd-grn:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(26,74,16,0.3); }

/* ── Section colors ── */
.s-white  { background: var(--white); }
.s-cream  { background: var(--bg); }
.s-dark   { background: linear-gradient(135deg, var(--green-dk) 0%, #163A0C 100%); }
.s-green  { background: var(--green); }
.s-stripe { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(201,164,74,0.03) 6px, rgba(201,164,74,0.03) 12px); }

/* ── Reveal ── */
.rv, .rv-l, .rv-r { opacity:0; transition: opacity .78s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1); }
.rv   { transform:translateY(32px); }
.rv-l { transform:translateX(-32px); }
.rv-r { transform:translateX(32px); }
.rv.on, .rv-l.on, .rv-r.on { opacity:1; transform:none; }

/* ── Counter ── */
.ctr-bg { background: linear-gradient(135deg, rgba(6,16,3,.97), rgba(15,44,8,.88)), url('https://static.wixstatic.com/media/fd6f95_1c6a87fdbe2146f88c0feea7d6b52927~mv2.jpeg/v1/crop/x_0,y_46,w_2560,h_1699/fill/w_616,h_409,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/WhatsApp%20Image%202025-04-30%20at%2012_31_35.jpeg') center/cover; }

/* ── Gallery ── */
.g-item { position:relative; overflow:hidden; cursor:pointer; border-radius:12px; }
.g-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
.g-item:hover img { transform:scale(1.06); }
.g-ov { position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .28s; display:flex; align-items:center; justify-content:center; }
.g-item:hover .g-ov { background:rgba(0,0,0,0.30); }
.g-ic { opacity:0; transform:scale(.6); transition:all .28s; }
.g-item:hover .g-ic { opacity:1; transform:scale(1); }

/* ── Lightbox ── */
#lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.94); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
#lightbox.open { opacity:1; pointer-events:all; }
#lightbox img { max-width:min(90vw,1100px); max-height:88vh; object-fit:contain; border-radius:10px; transition:opacity .22s; }

/* ── News cards ── */
.ni { overflow:hidden; } .ni img { width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
.nc:hover .ni img { transform:scale(1.05); }

/* ── Testimonials ── */
#t-track { display:flex; transition:transform .55s cubic-bezier(.16,1,.3,1); }

/* ── Tabs ── */
.tab-btn { border:1.5px solid var(--border); color:var(--text-2); border-radius:10px; padding:10px 22px; font-size:.85rem; font-weight:600; transition:all .22s; cursor:pointer; background:var(--white); }
.tab-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.tab-pnl { display:none; }
.tab-pnl.active { display:block; animation:fadeUp .4s both; }

/* ── FAQ / Accordion ── */
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:18px 0; cursor:pointer; font-weight:600; color:var(--text); gap:14px; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; color:var(--text-2); font-size:.875rem; line-height:1.75; }
.faq-a.open { max-height:500px; padding-bottom:18px; }
.faq-ic { flex-shrink:0; transition:transform .28s; color:var(--gold); }
.faq-item.open .faq-ic { transform:rotate(45deg); }

/* ── Timeline ── */
.timeline { position:relative; }
.timeline::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, var(--gold), var(--green)); }
.tl-dot { width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); background:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1; position:relative; }

/* ── Forms ── */
.inp { background:var(--white); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:.875rem; font-family:'Inter',sans-serif; transition:border-color .22s, box-shadow .22s; width:100%; }
.inp:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(26,74,16,0.1); }
.inp::placeholder { color:var(--text-3); }

/* ── Badges ── */
.bdg { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.bdg-g { background:rgba(26,74,16,0.09); color:var(--green-mid); border:1px solid rgba(26,74,16,0.2); }
.bdg-gd { background:rgba(201,164,74,0.1); color:var(--gold-dk); border:1px solid rgba(201,164,74,0.28); }
.bdg-w { background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.25); }

/* ── Icon boxes ── */
.ib { display:flex; align-items:center; justify-content:center; border-radius:12px; flex-shrink:0; }
.ib-gd { background:rgba(201,164,74,0.1); border:1px solid rgba(201,164,74,0.25); }
.ib-g  { background:rgba(26,74,16,0.09); border:1px solid rgba(26,74,16,0.18); }
.ib-w  { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22); }

/* ── Steps ── */
.step-n { width:52px; height:52px; border-radius:50%; border:2px solid var(--gold); background:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; color:var(--gold); flex-shrink:0; animation:pring 3s infinite; }

/* ── Back to top ── */
#btt { opacity:0; transform:translateY(10px); pointer-events:none; transition:all .3s; }
#btt.show { opacity:1; transform:none; pointer-events:all; }

/* ── Footer ── */
.footer { background:var(--green-dk); }
.f-link { color:rgba(255,255,255,0.45); font-size:.78rem; text-decoration:none; display:flex; align-items:center; gap:6px; padding:3px 0; transition:color .2s; }
.f-link:hover { color:var(--gold-lt); }
.f-social { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); transition:all .22s; text-decoration:none; }
.f-social:hover { border-color:var(--gold); color:var(--gold); }

/* ── Breadcrumb ── */
.bcrumb { display:flex; align-items:center; gap:6px; font-size:.75rem; color:rgba(255,255,255,0.5); }
.bcrumb a { color:rgba(255,255,255,0.5); text-decoration:none; transition:color .2s; }
.bcrumb a:hover { color:#fff; }

/* ── Utility ── */
.div-y > * + * { border-top:1px solid var(--border); }
.shadow-card { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.shadow-lg-c { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
.text-green { color:var(--green); }
.text-gold  { color:var(--gold); }
.bg-gold    { background:var(--gold); }
.bg-green   { background:var(--green); }
.border-gold { border-color:rgba(201,164,74,0.3); }

/* ── Skip link ── */
.skip-link { position:absolute; top:-44px; left:0; background:var(--green); color:#fff; padding:10px 18px; text-decoration:none; font-size:.8rem; font-weight:600; z-index:9999; border-radius:0 0 10px 0; transition:top .2s; }
.skip-link:focus { top:0; }

/* ── Quote block ── */
.motto-box { background:rgba(201,164,74,0.06); border:1px solid rgba(201,164,74,0.22); border-radius:18px; padding:2.5rem; text-align:center; position:relative; overflow:hidden; }
.motto-box::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 100%,rgba(201,164,74,0.07),transparent 65%); pointer-events:none; }

/* ── Note box ── */
.note-box { background:rgba(201,164,74,0.07); border:1px solid rgba(201,164,74,0.28); border-radius:14px; padding:1.25rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; }

/* ── ENVR tag ── */
.envr-tag { display:inline-flex; align-items:center; padding:4px 12px; border-radius:99px; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--gold); color:var(--green-dk); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .page-hero { min-height: 44vh; }
}