/* ═══════════════════════════════════════════════════
   AVOCADO CONGRESS 2026 — Main Stylesheet
   Author: GMC Maroc & MCARE
   Date:   May 13, 2026 – Rabat
═══════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Montserrat:wght@300;400;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300&display=swap');

/* ── CSS Variables ─────────────────────────────── */
:root {
  --green-light:  #9dcf3a;
  --green-mid:    #5a8a1a;
  --green-dark:   #2d5016;
  --brown:        #5c2d0e;
  --brown-light:  #8b4513;
  --cream:        #f5f0e8;
  --white:        #ffffff;
  --text-dark:    #1a1a1a;
  --navbar-h:     72px;
  --countdown-h:  52px;
}

/* ── Reset & Base ──────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Montserrat', sans-serif;
  background: #0e1a06;
  color: var(--text-dark);
  overflow-x: hidden;
  padding-top: calc(var(--navbar-h) + var(--countdown-h));
}

/* ══════════════════════════════════════════════════
   NAVBAR – Glassmorphism
══════════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 20px;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: background .5s, backdrop-filter .5s, box-shadow .5s, border-bottom .5s;
}

#navbar.glass {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

/* Left side */
.nav-left       { display:flex; align-items:center; gap:20px; flex-shrink:0; }

.nav-logo-img   { height:52px; width:auto; object-fit:contain;
                  filter:brightness(0) invert(1); transition:filter .5s; }
#navbar.glass .nav-logo-img { filter:none; }

.nav-divider    { width:1px; height:38px; background:rgba(255,255,255,.25);
                  flex-shrink:0; transition:background .5s; }
#navbar.glass .nav-divider  { background:rgba(0,0,0,.12); }

.nav-organized  { display:flex; flex-direction:column; gap:5px; }

.nav-organized-label {
  font-size:.52rem; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-weight:700; transition:color .5s;
}
#navbar.glass .nav-organized-label { color:rgba(0,0,0,.35); }

.nav-org-logos  { display:flex; align-items:center; gap:12px; }

.nav-org-logo   { height:26px; width:auto; object-fit:contain;
                  filter:brightness(0) invert(1); opacity:.85; transition:filter .5s, opacity .5s; }
#navbar.glass .nav-org-logo       { filter:none; opacity:1; }
.nav-org-logo.mcare-logo          { height:28px; }

/* Right side */
.nav-right  { display:flex; align-items:center; gap:28px; }
.nav-links  { display:flex; gap:28px; list-style:none; align-items:center; }

.nav-links a {
  color:rgba(255,255,255,.85); text-decoration:none;
  font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:700; transition:color .2s; white-space:nowrap;
}
#navbar.glass .nav-links a        { color:rgba(30,30,30,.80); }
.nav-links a:hover,
#navbar.glass .nav-links a:hover  { color:var(--green-mid); }

.nav-lang {
  display:flex; align-items:center; gap:5px; cursor:pointer;
  font-size:.68rem; font-weight:700; letter-spacing:1.5px;
  color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.25);
  padding:5px 10px; transition:color .5s, border-color .5s;
  white-space:nowrap; user-select:none;
}
#navbar.glass .nav-lang   { color:rgba(30,30,30,.75); border-color:rgba(0,0,0,.15); }
.nav-lang:hover           { border-color:var(--green-light); color:var(--green-light); }
.nav-lang-arrow           { font-size:.55rem; opacity:.6; }

.nav-cta {
  background:var(--green-mid); color:white;
  padding:10px 22px; font-family:'Montserrat',sans-serif;
  font-size:.72rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; border-radius:4px;
  white-space:nowrap; text-decoration:none;
  transition:background .2s;
}
.nav-cta:hover { background:var(--green-dark); color:white; }

/* ══════════════════════════════════════════════════
   EVENT DATE BAR
══════════════════════════════════════════════════ */
#countdown-bar {
  position:fixed; top:var(--navbar-h); left:0; right:0;
  height:var(--countdown-h); z-index:199;
  background:linear-gradient(90deg,var(--green-dark) 0%,#1a3a08 50%,var(--brown) 100%);
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-bottom:1px solid rgba(157,207,58,.3);
}
.countdown-label  { font-size:.6rem; letter-spacing:3px; text-transform:uppercase;
                    color:rgba(255,255,255,.55); font-weight:700; margin-right:8px; }
.cd-event-date    { font-family:'Playfair Display',serif; font-size:1.05rem;
                    font-weight:900; color:var(--green-light); line-height:1;
                    letter-spacing:.5px; }
.cd-dot           { width:5px; height:5px; border-radius:50%;
                    background:rgba(157,207,58,.4); margin:0 12px; }
.cd-event         { font-size:.62rem; letter-spacing:2px; text-transform:uppercase;
                    color:rgba(255,255,255,.5); margin-left:10px; font-weight:600; }

@media (max-width:640px){
  .cd-event { display:none; }
  .cd-event-date { font-size:.9rem; }
}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:flex-end; overflow:hidden;
  margin-top:calc(-1*(var(--navbar-h)+var(--countdown-h)));
  padding-top:calc(var(--navbar-h)+var(--countdown-h));
}


.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/background-hero.jpg'); /* fallback */
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Navigateurs modernes : WebP plus léger */
@supports (background-image: url("x.webp")) {
  .hero-bg {
    background-image: url('../images/background-hero.webp');
  }
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 28%,rgba(9,30,2,.82) 58%,rgba(9,30,2,.97) 100%);
  z-index:1;
}
.hero-content {
  position:relative; z-index:2; width:52%;
  padding:60px 72px 60px 40px; text-align:right;
}
.hero-logo            { display:flex; justify-content:flex-end; margin-bottom:36px; }
.hero-logo img        { height:80px; width:auto; }
.hero-divider         { width:80px; height:2px; background:var(--green-light);
                        margin:0 0 28px auto; opacity:.6; }
.hero-tagline         { font-family:'Cormorant Garamond',serif; font-style:italic;
                        font-size:1.55rem; color:rgba(255,255,255,.88); line-height:1.5; margin-bottom:18px; }
.hero-theme           { font-family:'Playfair Display',serif; font-size:2.3rem;
                        color:var(--green-light); line-height:1.2; margin-bottom:38px; font-weight:700; }
.save-the-date {
  display:inline-flex; align-items:center; gap:12px; background:var(--brown);
  color:white; font-weight:700; font-size:.8rem; letter-spacing:3px;
  padding:13px 40px 13px 28px; text-transform:uppercase; margin-bottom:22px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
}
.hero-location        { font-size:1.2rem; color:white; font-weight:600;
                        letter-spacing:2px; margin-bottom:36px; }
.hero-location span   { color:var(--green-light); }
.hero-organizers      { display:flex; justify-content:flex-end; align-items:center; gap:20px; }
.org-label            { font-size:.58rem; letter-spacing:3px; text-transform:uppercase;
                        color:rgba(255,255,255,.4); font-weight:600; margin-right:6px; }
.org-logo             { height:40px; width:auto; object-fit:contain;
                        opacity:.9; filter:brightness(0) invert(1); }
.org-logo.mcare       { height:44px; }
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.35); font-size:.6rem; letter-spacing:3px;
  text-transform:uppercase; animation:scrollbounce 2s ease-in-out infinite;
}
.scroll-hint::after   { content:''; width:1px; height:36px; background:rgba(255,255,255,.25); }
@keyframes scrollbounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}

/* ══════════════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════════════ */
section         { padding:96px 0; }
.container      { max-width:1180px; margin:0 auto; padding:0 56px; }
.section-label  {
  font-size:.6rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--green-light); font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; gap:14px;
}
.section-label::before { content:''; width:28px; height:1px; background:var(--green-light); }
.section-title  { font-family:'Playfair Display',serif; font-size:2.8rem;
                  line-height:1.1; font-weight:900; }
.fade-in        { opacity:0; transform:translateY(28px);
                  transition:opacity .7s ease, transform .7s ease; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════
   PRESENTATION
══════════════════════════════════════════════════ */
#presentation           { background:var(--cream); }
.presentation-grid      { display:grid; grid-template-columns:1fr 1fr;
                          gap:72px; align-items:start; margin-top:56px; }
.presentation-text p    { font-size:.95rem; line-height:1.8; color:#444; margin-bottom:18px; }
.stat-grid              { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stat-card              { background:white; padding:26px 22px;
                          border-left:4px solid var(--green-light);
                          box-shadow:0 4px 20px rgba(0,0,0,.06); }
.stat-number            { font-family:'Playfair Display',serif; font-size:2.4rem;
                          font-weight:900; color:var(--green-dark); line-height:1; }
.stat-label             { font-size:.7rem; letter-spacing:1px; color:#888;
                          text-transform:uppercase; margin-top:7px; font-weight:600; }
.highlight-box          { background:var(--green-dark); color:white; padding:32px; margin-top:22px; }
.highlight-box p        { font-size:.95rem; line-height:1.7; opacity:.9; }

/* ══════════════════════════════════════════════════
   TECHNICAL SHEET
══════════════════════════════════════════════════ */
#technical              { background:#0e1a06; color:white; }
#technical .section-title { color:white; }
.tech-grid              { display:grid; grid-template-columns:repeat(3,1fr);
                          gap:2px; margin-top:56px; background:rgba(157,207,58,.08); }
.tech-item              { background:#0e1a06; padding:36px 28px;
                          border-top:2px solid transparent; transition:border-color .3s; }
.tech-item:hover        { border-top-color:var(--green-light); }
.tech-icon              { font-size:1.5rem; margin-bottom:14px; }
.tech-label             { font-size:.62rem; letter-spacing:3px; color:var(--green-light);
                          text-transform:uppercase; font-weight:700; margin-bottom:7px; }
.tech-value             { font-size:1rem; color:rgba(255,255,255,.82);
                          font-weight:400; line-height:1.5; }
.price-highlight        { background:var(--brown); padding:30px 36px; grid-column:span 3;
                          display:flex; align-items:center; justify-content:space-between; gap:24px; }
.price-highlight .price { font-family:'Playfair Display',serif; font-size:2.8rem;
                          font-weight:900; color:white; white-space:nowrap; }
.price-highlight .price-desc { color:rgba(255,255,255,.72); font-size:.83rem;
                               line-height:1.7; max-width:520px; }

/* ══════════════════════════════════════════════════
   PROGRAM
══════════════════════════════════════════════════ */
#program                { background:var(--cream); }
.program-timeline       { margin-top:56px; position:relative; }
.program-timeline::before {
  content:''; position:absolute; left:112px; top:0; bottom:0;
  width:1px; background:var(--green-light); opacity:.25;
}
.program-item           { display:grid; grid-template-columns:112px 36px 1fr; align-items:stretch; }
.program-time           { text-align:right; font-family:'Playfair Display',serif;
                          font-size:1rem; font-weight:700; color:var(--green-dark);
                          padding:18px 18px 18px 0; line-height:1.2; }
.program-dot            { display:flex; flex-direction:column; align-items:center; padding-top:22px; }
.dot                    { width:11px; height:11px; border-radius:50%;
                          background:var(--green-light); flex-shrink:0; position:relative; z-index:1; }
.dot.special            { background:var(--brown); width:15px; height:15px; }
.program-content        { padding:14px 0 22px; border-bottom:1px solid rgba(0,0,0,.07); }
.program-title          { font-weight:700; font-size:.92rem; color:var(--green-dark); margin-bottom:5px; }
.program-subs           { font-size:.8rem; color:#666; line-height:1.7; }
.break-block            { background:var(--green-dark); color:white; padding:12px 18px;
                          font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; grid-column:3; }

/* ══════════════════════════════════════════════════
   OBJECTIVES
══════════════════════════════════════════════════ */
#objectives             { background:white; }
.obj-split              { display:grid; grid-template-columns:1fr 1fr;
                          gap:72px; margin-top:56px; }
.obj-col-title          { font-family:'Playfair Display',serif; font-size:1.35rem;
                          color:var(--green-dark); margin-bottom:28px;
                          padding-bottom:14px; border-bottom:3px solid var(--green-light); }
.obj-list               { list-style:none; display:flex; flex-direction:column; gap:18px; }
.obj-list li            { display:flex; gap:14px; align-items:flex-start;
                          font-size:.88rem; line-height:1.6; color:#444; }
.obj-bullet             { width:6px; height:6px; border-radius:50%;
                          background:var(--green-light); flex-shrink:0; margin-top:6px; }

/* ══════════════════════════════════════════════════
   MAIN COMPONENTS
══════════════════════════════════════════════════ */
#components             { background:#0e1a06; color:white; }
#components .section-title { color:white; }
.comp-grid              { display:grid; grid-template-columns:repeat(3,1fr);
                          gap:2px; margin-top:56px; }
.comp-card              { background:rgba(255,255,255,.04); padding:44px 32px;
                          text-align:center; border:1px solid rgba(157,207,58,.08);
                          transition:background .3s, border-color .3s, transform .3s; cursor:default; }
.comp-card:hover        { background:rgba(157,207,58,.08);
                          border-color:rgba(157,207,58,.28); transform:translateY(-4px); }
.comp-icon              { font-size:2.2rem; margin-bottom:18px; display:block; }
.comp-name              { font-weight:700; font-size:.82rem; letter-spacing:1.5px;
                          text-transform:uppercase; color:var(--green-light); }

/* ══════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════ */
#contact                { background:var(--cream); }
.contact-grid           { display:grid; grid-template-columns:1fr 1fr;
                          gap:36px; margin-top:56px; }
.contact-card           { background:white; padding:44px 38px;
                          border-bottom:4px solid var(--green-light);
                          box-shadow:0 8px 40px rgba(0,0,0,.06);
                          transition:transform .3s, box-shadow .3s; }
.contact-card:hover     { transform:translateY(-4px);
                          box-shadow:0 16px 50px rgba(0,0,0,.10); }
.contact-role           { font-size:.62rem; letter-spacing:3px; text-transform:uppercase;
                          color:var(--green-light); font-weight:700; margin-bottom:14px; }
.contact-name           { font-family:'Playfair Display',serif; font-size:1.55rem;
                          color:var(--green-dark); font-weight:700; margin-bottom:6px; }
.contact-region         { font-size:.8rem; color:#888; margin-bottom:26px; }
.contact-info           { display:flex; flex-direction:column; gap:12px; }
.contact-info a         { text-decoration:none; color:#444; font-size:.88rem;
                          display:flex; align-items:center; gap:12px; transition:color .2s; }
.contact-info a:hover   { color:var(--brown); }
.contact-info .icon     { width:30px; height:30px; background:var(--green-dark);
                          color:white; display:flex; align-items:center;
                          justify-content:center; font-size:.75rem; flex-shrink:0; }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer {
  background:#040f02; color:rgba(255,255,255,.35);
  text-align:center; padding:28px;
  font-size:.68rem; letter-spacing:2px;
}
footer strong { color:var(--green-light); }

.footer-social {
  display:flex; justify-content:center; gap:14px; margin-bottom:20px;
}
.footer-social a {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(157,207,58,.10); border:1px solid rgba(157,207,58,.25);
  transition:background .2s, transform .2s, border-color .2s;
}
.footer-social a:hover {
  background:var(--green-light); border-color:var(--green-light);
  transform:translateY(-2px);
}
.footer-social svg { width:18px; height:18px; fill:rgba(255,255,255,.6); transition:fill .2s; }
.footer-social a:hover svg { fill:#040f02; }

/* ══════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
══════════════════════════════════════════════════ */
.whatsapp-float {
  position:fixed; bottom:32px; right:32px; z-index:500;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.45); text-decoration:none;
  transition:transform .2s, box-shadow .2s;
  animation:wapulse 2.5s ease-in-out infinite;
}
.whatsapp-float:hover   { transform:scale(1.1);
                          box-shadow:0 10px 32px rgba(37,211,102,.6); animation:none; }
.whatsapp-float svg     { width:30px; height:30px; fill:white; }
.whatsapp-tooltip {
  position:absolute; right:68px; background:rgba(0,0,0,.78);
  color:white; font-size:.72rem; font-weight:600; letter-spacing:.5px;
  padding:7px 14px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity:1; }
@keyframes wapulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,.45); }
  50%     { box-shadow:0 6px 32px rgba(37,211,102,.75),0 0 0 10px rgba(37,211,102,.12); }
}

/* ══════════════════════════════════════════════════
   REGISTRATION MODAL
══════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.modal-overlay.open     { opacity:1; pointer-events:all; }
.modal-box {
  background:#fff; width:100%; max-width:680px; max-height:92vh;
  overflow-y:auto; border-radius:4px;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
  transform:translateY(30px) scale(.97); transition:transform .35s ease;
  position:relative; scrollbar-width:thin; scrollbar-color:var(--green-light) #f0f0f0;
}
.modal-overlay.open .modal-box { transform:translateY(0) scale(1); }
.modal-header {
  background:linear-gradient(135deg,var(--green-dark) 0%,#1a3a08 100%);
  padding:32px 36px 28px; position:relative;
}
.modal-header-label { font-size:.58rem; letter-spacing:4px; text-transform:uppercase;
                      color:var(--green-light); font-weight:700; margin-bottom:8px; }
.modal-header h2    { font-family:'Playfair Display',serif; font-size:1.8rem;
                      color:white; font-weight:700; line-height:1.2; }
.modal-header p     { font-size:.8rem; color:rgba(255,255,255,.6);
                      margin-top:8px; line-height:1.5; }
.modal-close {
  position:absolute; top:18px; right:20px;
  background:rgba(255,255,255,.12); border:none; color:white;
  width:34px; height:34px; border-radius:50%; font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s; line-height:1;
}
.modal-close:hover  { background:rgba(255,255,255,.25); }
.modal-body         { padding:32px 36px 36px; }
.form-row           { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.full      { grid-template-columns:1fr; }
.form-group         { display:flex; flex-direction:column; gap:6px; }
.form-group label   { font-size:.68rem; font-weight:700; letter-spacing:1px;
                      text-transform:uppercase; color:#555; }
.form-group label .req { color:var(--green-mid); margin-left:2px; }
.form-group input,
.form-group select,
.form-group textarea {
  font-family:'Montserrat',sans-serif; font-size:.88rem; color:#222;
  background:#f8f8f6; border:1.5px solid #e2e2e0; padding:11px 14px;
  outline:none; border-radius:3px; transition:border-color .2s, background .2s;
  width:100%; appearance:none; -webkit-appearance:none;
}
.form-group select  {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px; cursor:pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--green-light); background:#fff; }
.form-group textarea        { resize:vertical; min-height:80px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:#bbb; font-size:.82rem; }
.form-divider       { height:1px; background:#eee; margin:22px 0; }
.form-section-title {
  font-size:.65rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--green-mid); font-weight:700; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.form-section-title::after { content:''; flex:1; height:1px;
                              background:var(--green-light); opacity:.3; }
.form-submit {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid #eee;
}
.form-submit-note   { font-size:.72rem; color:#999; line-height:1.5; flex:1; }
.btn-submit {
  background:var(--green-mid); color:white; border:none;
  padding:14px 36px; font-family:'Montserrat',sans-serif;
  font-size:.78rem; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; border-radius:3px;
  transition:background .2s, transform .15s; white-space:nowrap; flex-shrink:0;
}
.btn-submit:hover   { background:var(--green-dark); transform:translateY(-1px); }
.form-success       { display:none; text-align:center; padding:40px 20px; }
.form-success.show  { display:block; }
.form-success-icon  { font-size:3rem; margin-bottom:16px; }
.form-success h3    { font-family:'Playfair Display',serif; font-size:1.5rem;
                      color:var(--green-dark); margin-bottom:10px; }
.form-success p     { font-size:.88rem; color:#666; line-height:1.6; }

/* ══════════════════════════════════════════════════
   GALERIE
══════════════════════════════════════════════════ */
#galerie               { background:#0e1a06; color:white; }
#galerie .section-title { color:white; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:34px;
}
.gallery-item {
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:4px;
  aspect-ratio:4/3;
  cursor:pointer;
  background:#16240c;
}
.gallery-item img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease, filter .3s ease;
}
.gallery-item::after {
  content:'⤢';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:#fff;
  background:rgba(45,80,22,.0);
  opacity:0; transition:opacity .3s, background .3s;
}
.gallery-item:hover img    { transform:scale(1.08); filter:brightness(.7); }
.gallery-item:hover::after { opacity:1; background:rgba(45,80,22,.35); }

/* ── Lightbox ── */
.lightbox {
  position:fixed; inset:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,14,4,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lightbox.open { display:flex; }
.lb-img {
  max-width:90vw; max-height:86vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:lbIn .25s ease;
}
@keyframes lbIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
.lb-close, .lb-nav {
  position:absolute; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); color:#fff;
  cursor:pointer; transition:background .2s, transform .15s;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lb-close:hover, .lb-nav:hover { background:rgba(157,207,58,.4); }
.lb-close {
  top:24px; right:28px; width:46px; height:46px;
  border-radius:50%; font-size:1.1rem;
}
.lb-nav {
  top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%; font-size:1.4rem;
}
.lb-nav:hover { transform:translateY(-50%) scale(1.08); }
.lb-prev { left:24px; }
.lb-next { right:24px; }
.lb-counter {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:.78rem; letter-spacing:2px;
  background:rgba(255,255,255,.08); padding:7px 18px; border-radius:20px;
}

/* ── Gallery responsive ── */
@media (max-width:900px) { .gallery-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) {
  .gallery-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .lb-nav  { width:44px; height:44px; font-size:1.1rem; }
  .lb-prev { left:10px; } .lb-next { right:10px; }
  .lb-close { top:14px; right:14px; }
}

/* ── Galerie : page dédiée ── */
.gallery-intro {
  color:#cfe0b8; font-size:.95rem; max-width:560px;
  margin:14px 0 4px; line-height:1.6;
}
.nav-links a.active { color:var(--green-mid); font-weight:700; }