/* ============================================================
   Éts Johanna Business — Design System
   Inspired by the sample design: forest green, cream, clay
   Fonts: Fraunces (serif) + Karla (sans-serif)
   ============================================================ */

:root{
  --forest:#1E3A5F;
  --forest-dark:#142A45;
  --clay:#BE5B2E;
  --clay-dark:#A24C24;
  --cream:#F7F2E7;
  --ink:#24211B;
  --ink-soft:#54503F;
  --olive:#5C7A8C;
  --sand:#ECE1CB;
  --line:#DDD2B8;
  --white:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Karla',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,.wordmark{
  font-family:'Fraunces',serif;
  font-weight:500;
  color:var(--forest);
  margin:0;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;padding:0;margin:0;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--forest);
  color:var(--cream);
  text-align:center;
  font-size:13.5px;
  letter-spacing:.2px;
  padding:9px 20px;
}

/* ---------- Navbar ---------- */
header.nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.nav-brand{
  display:flex;align-items:center;gap:12px;
}
.nav-brand img{
  height:46px;width:auto;
}
.wordmark{
  font-size:22px;position:relative;padding-bottom:3px;
  color:var(--forest);
}
.wordmark::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--clay);
}
nav.links{display:flex;gap:26px;align-items:center;}
nav.links a{
  font-size:14.5px;color:var(--ink-soft);
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.links a:hover{color:var(--forest);border-color:var(--olive);}
nav.links a.active{color:var(--forest);border-color:var(--clay);}
.btn-login{
  background:var(--clay);color:#fff !important;
  padding:10px 22px;border-radius:3px;
  font-size:14.5px;font-weight:600;
  border-bottom:none !important;
}
.btn-login:hover{background:var(--clay-dark) !important;color:#fff !important;}

/* Mobile nav toggle */
.mobile-toggle{
  display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;
}
.mobile-toggle span{
  width:26px;height:3px;background:var(--forest);border-radius:2px;
}

/* ---------- Theme toggle (light / dark mode) ---------- */
.theme-toggle{
  background:none;border:1px solid var(--line);
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--forest);
  margin-right:14px;flex-shrink:0;
  transition:color .2s ease,border-color .2s ease;
}
.theme-toggle:hover{border-color:var(--clay);color:var(--clay);}
.theme-toggle{position:relative;}
.theme-toggle svg{
  width:18px;height:18px;
  position:absolute;top:50%;left:50%;
  margin:-9px 0 0 -9px;
  transition:opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-120deg) scale(.4);}
html.dark-mode .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1);}
html.dark-mode .theme-toggle .icon-moon{opacity:0;transform:rotate(120deg) scale(.4);}

/* Mobile nav overlay */
.mobile-nav{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:var(--forest);z-index:100;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  transform:translateX(-100%);transition:transform .3s ease;
}
.mobile-nav.active{transform:translateX(0);}
.mobile-nav-close{
  position:absolute;top:24px;right:28px;background:none;border:none;
  color:var(--cream);font-size:2.2rem;cursor:pointer;
}
.mobile-nav-links{text-align:center;}
.mobile-nav-links li{margin:20px 0;}
.mobile-nav-links a{
  color:var(--cream);font-family:'Fraunces',serif;font-size:1.5rem;
}
.mobile-nav-links a:hover{color:var(--sand);}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--forest);color:#fff;
  padding:14px 28px;border-radius:3px;
  font-size:15px;font-weight:600;
  display:inline-block;border:none;cursor:pointer;
  font-family:'Karla',sans-serif;
  transition:background .15s ease;
}
.btn-primary:hover{background:var(--forest-dark);}
.btn-secondary{
  background:var(--clay);color:#fff;
  padding:14px 28px;border-radius:3px;
  font-size:15px;font-weight:600;
  display:inline-block;border:none;cursor:pointer;
  font-family:'Karla',sans-serif;
  transition:background .15s ease;
}
.btn-secondary:hover{background:var(--clay-dark);}
.btn-outline{
  background:transparent;color:var(--forest);
  border:2px solid var(--olive);
  padding:12px 26px;border-radius:3px;
  font-size:15px;font-weight:600;
  display:inline-block;cursor:pointer;
  font-family:'Karla',sans-serif;
  transition:all .15s ease;
}
.btn-outline:hover{background:var(--forest);color:#fff;border-color:var(--forest);}
.btn-outline-light{
  background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,.5);
  padding:12px 26px;border-radius:3px;
  font-size:15px;font-weight:600;
  display:inline-block;cursor:pointer;
  font-family:'Karla',sans-serif;
  transition:all .15s ease;
}
.btn-outline-light:hover{background:#fff;color:var(--forest);border-color:#fff;}
.link-secondary{
  font-size:15px;font-weight:600;color:var(--forest);
  border-bottom:1px solid var(--olive);padding-bottom:2px;
}
.link-secondary.light{color:#fff;border-color:rgba(255,255,255,.5);}

/* ---------- Hero ---------- */
.hero{padding:76px 0 64px;}
.hero-grid{
  display:flex;gap:56px;align-items:center;
}
.hero-grid > div:first-child{flex:1.05;}
.hero-grid > div:last-child{flex:.95;}
.hero h1{font-size:47px;line-height:1.14;letter-spacing:-.5px;}
.hero p.lede{
  font-size:18px;line-height:1.6;color:var(--ink-soft);
  max-width:46ch;margin:22px 0 30px;
}
.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.hero-art{position:relative;}
.hero-art img{
  width:100%;height:auto;border-radius:4px;
  object-fit:cover;
}
.hero-art .hero-img{
  width:100%;height:420px;object-fit:cover;border-radius:4px;
}
.float-card{
  position:absolute;left:22px;bottom:-26px;
  background:#fff;border:1px solid var(--line);
  padding:14px 20px;border-radius:3px;
  font-size:13.5px;color:var(--ink-soft);
  box-shadow:0 6px 18px rgba(30,58,95,.10);
}
.float-card strong{color:var(--forest);font-family:'Fraunces',serif;font-size:15px;}

/* ---------- Stats strip ---------- */
.stats{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px 0;margin-top:70px;
}
.stats-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.stat{flex:1;min-width:150px;text-align:center;}
.stat .num{font-family:'Fraunces',serif;font-size:32px;color:var(--forest);}
.stat .label{font-size:13px;color:var(--ink-soft);margin-top:4px;}

/* ---------- Sections ---------- */
.section{padding:74px 0;}
.section.alt{background:var(--sand);}
.section-head{max-width:560px;margin-bottom:42px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:32px;letter-spacing:-.3px;}
.section-head p{color:var(--ink-soft);font-size:15.5px;margin-top:12px;line-height:1.6;}

/* ---------- Sites marquee (infinite slider) ---------- */
.sites-marquee{
  background:#000;
  padding:70px 0;
  overflow:hidden;
  position:relative;
  border-top:1px solid #222;
  border-bottom:1px solid #222;
}
.sites-marquee::before,
.sites-marquee::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.sites-marquee::before{
  left:0;
  background:linear-gradient(to right, #000 0%, transparent 100%);
}
.sites-marquee::after{
  right:0;
  background:linear-gradient(to left, #000 0%, transparent 100%);
}
.sites-marquee-head{
  text-align:center;
  margin-bottom:44px;
}
.sites-marquee-head h2{
  color:#fff;
  font-size:32px;
  letter-spacing:-.3px;
}
.sites-marquee-head p{
  color:#9AA9B5;
  font-size:15.5px;
  margin-top:12px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6;
}
.sites-marquee-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:marqueeLeftToRight 18s linear infinite;
  will-change:transform;
}
.sites-marquee:hover .sites-marquee-track{
  animation-play-state:paused;
}
@keyframes marqueeLeftToRight{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
.site-square{
  width:220px;
  height:240px;
  background:linear-gradient(145deg, #141414 0%, #0a0a0a 100%);
  border:1px solid #2a2a2a;
  border-radius:8px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  flex-shrink:0;
  position:relative;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.site-square:hover{
  border-color:var(--clay);
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(190,91,46,.15);
}
.site-square::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(to right, var(--clay), transparent);
  border-radius:10px 10px 0 0;
}
.site-square h3{
  font-size:16px;
  color:#fff;
  font-weight:500;
  margin-bottom:8px;
  line-height:1.3;
}
.site-square p{
  font-size:12.5px;
  color:#A8A8A8;
  line-height:1.5;
  margin:0 0 12px;
  flex:1;
}
.site-square .badge{
  align-self:flex-start;
  font-size:11px;
  font-weight:600;
  padding:4px 12px;
  border-radius:20px;
  white-space:nowrap;
}
.site-square .badge.actif{
  background:rgba(59,94,126,.2);
  color:#7AB8D4;
  border:1px solid rgba(59,94,126,.4);
}
.site-square .badge.ferme{
  background:rgba(190,91,46,.15);
  color:var(--clay);
  border:1px solid rgba(190,91,46,.35);
}
/* Keep old site-row styles for reference (unused) */
.sites-list{border-top:1px solid var(--line);}
.site-row{
  display:flex;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.site-row .site-name{flex:0 0 220px;font-family:'Fraunces',serif;font-size:19px;color:var(--forest);}
.site-row .site-desc{flex:1;font-size:14.5px;color:var(--ink-soft);line-height:1.55;}
.badge{
  flex:0 0 auto;align-self:center;font-size:12.5px;font-weight:600;
  padding:5px 12px;border-radius:20px;white-space:nowrap;
}
.badge.actif{background:#E1ECF5;color:#3B5E7E;}
.badge.ferme{background:#F1E4DA;color:var(--clay-dark);}

/* ---------- Activities grid ---------- */
.activities-grid{
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.activity{
  flex:1 1 20%;min-width:190px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:28px 22px;min-height:190px;
}
.activity svg{width:30px;height:30px;color:var(--clay);margin-bottom:16px;}
.activity h3{font-size:16.5px;font-weight:500;color:var(--forest);margin-bottom:8px;}
.activity p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0;}

/* ---------- Impact band ---------- */
.impact-band{background:var(--forest);color:var(--cream);padding:70px 0;}
.impact-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
.impact-band h2{color:#fff;font-size:29px;max-width:520px;line-height:1.3;}
.impact-band .link-secondary{color:#fff;border-color:rgba(255,255,255,.5);}

/* ---------- Roles / system access ---------- */
.roles-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.role-row{
  display:flex;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.role-row .role-name{flex:0 0 220px;font-family:'Fraunces',serif;font-size:17px;color:var(--forest);}
.role-row p{flex:1;margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.55;}
.system-note{
  margin-top:26px;font-size:13.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;
}
.system-note svg{width:16px;height:16px;color:var(--olive);}

/* ---------- Partners (premium black marquee, right to left) ---------- */
.partners-marquee{
  overflow:hidden;
  position:relative;
  padding:10px 0 14px;
}
.partners-marquee::before,
.partners-marquee::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:110px;
  z-index:2;
  pointer-events:none;
}
.partners-marquee::before{
  left:0;
  background:linear-gradient(to right, var(--sand) 0%, transparent 100%);
}
.partners-marquee::after{
  right:0;
  background:linear-gradient(to left, var(--sand) 0%, transparent 100%);
}
.partners-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:marqueeRightToLeft 22s linear infinite;
  will-change:transform;
}
.partners-marquee:hover .partners-track{
  animation-play-state:paused;
}
@keyframes marqueeRightToLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.partner{
  background:#0A0A0A;
  color:#fff;
  font-family:'Fraunces',serif;
  font-size:16px;
  letter-spacing:.5px;
  padding:18px 34px;
  border-radius:6px;
  border:1px solid #1F1F1F;
  white-space:nowrap;
  text-align:center;
  position:relative;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.partner::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(to right, var(--clay), transparent);
  border-radius:6px 6px 0 0;
}
.partner:hover{
  border-color:var(--clay);
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

/* ---------- Footer ---------- */
footer{background:var(--forest-dark);color:var(--cream);padding:56px 0 28px;}
.footer-grid{display:flex;flex-wrap:wrap;gap:36px;}
.footer-grid > div:first-child{flex:1.4 1 260px;}
.footer-grid > div:not(:first-child){flex:1 1 150px;}
footer .wordmark{color:#fff;font-size:20px;}
footer .wordmark::after{background:var(--clay);}
footer .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
footer .footer-brand img{height:40px;width:auto;}
footer p.tag{color:#C4D1DC;font-size:13.5px;margin-top:14px;max-width:34ch;line-height:1.6;}
footer h4{font-size:13px;text-transform:none;color:#C4D1DC;margin:0 0 14px;font-weight:600;font-family:'Karla',sans-serif;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
footer a{color:#E7E6DE;font-size:14px;}
footer a:hover{color:#fff;}
.footer-bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:#9AA9B5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ============================================================
   Page Hero (inner pages)
   ============================================================ */
.page-hero{
  background:var(--forest);
  color:var(--cream);
  padding:80px 0 64px;
  text-align:center;
  position:relative;
}
.page-hero h1{color:#fff;font-size:40px;letter-spacing:-.4px;}
.page-hero .page-hero-quote{
  font-size:17px;color:#C4D1DC;margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto;
}

/* ============================================================
   Mission & Vision page
   ============================================================ */
.vision-block,
.mission-block{
  background:#fff;border:1px solid var(--line);
  padding:40px;border-radius:4px;margin-bottom:24px;
}
.vision-block h2,
.mission-block h2{font-size:28px;margin-bottom:18px;}
.vision-block p,
.mission-block p{color:var(--ink-soft);font-size:15.5px;line-height:1.7;margin-bottom:14px;}
.mission-block ul{list-style:disc;padding-left:22px;margin-top:10px;}
.mission-block ul li{
  color:var(--ink-soft);font-size:15px;line-height:1.7;margin-bottom:8px;
}

/* Objectifs Stratégiques — split panel over background image */
.obj-section{
  position:relative;
  padding:74px 0;
  overflow:hidden;
}
.obj-bg{
  position:absolute;inset:0;
  background-color:#142A45;
  background-image:url('images/business%20strategie.jpeg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.obj-bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(rgba(20,42,69,.55), rgba(20,42,69,.55));
}
.obj-section .wrap{position:relative;z-index:1;}
.obj-slide{
  display:flex;
  background:var(--cream);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.obj-left{
  background:var(--forest);
  color:#fff;
  width:27%;
  padding:56px 38px;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.obj-left h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:32px;
  line-height:1.2;
  margin:0 0 18px;
  color:#fff;
}
.obj-left p{
  font-size:14px;
  line-height:1.65;
  color:#D3DEE8;
  margin:0;
}
.obj-mark{
  margin-top:auto;
  padding-top:30px;
  font-family:'Fraunces',serif;
  font-size:15px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.2);
}
.obj-mark span{display:block;font-family:'Karla',sans-serif;font-size:11.5px;color:#A7B8C6;margin-top:4px;}

.obj-right{
  width:73%;
  display:flex;align-items:center;
  padding:44px 40px;
}
.obj-pillars{
  display:flex;flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  max-width:820px;
  margin:0 auto;
}
.obj-pillar{
  flex:0 0 180px;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--forest);
  padding:20px 18px 18px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.obj-pillar:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(30,58,95,.15);}
.obj-pillar.clay{border-top-color:var(--clay);}
.obj-pillar.olive{border-top-color:var(--olive);}
.obj-pillar .obj-icon{
  width:34px;height:34px;border-radius:50%;
  background:var(--forest);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.obj-pillar.clay .obj-icon{background:var(--clay);}
.obj-pillar.olive .obj-icon{background:var(--olive);}
.obj-pillar .obj-icon svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8;}
.obj-pillar .obj-num{
  font-family:'Fraunces',serif;font-size:12px;color:var(--ink-soft);
  letter-spacing:.5px;margin-bottom:6px;
}
.obj-pillar h3{
  font-family:'Fraunces',serif;font-weight:500;font-size:16px;
  color:var(--forest);margin:0 0 8px;line-height:1.25;
}
.obj-pillar p{
  font-size:12.3px;line-height:1.55;color:var(--ink-soft);margin:0;
}

/* Notre Parcours images */
.parcours-img{
  height:230px;
  background-size:cover;
  background-position:center;
  border-radius:6px;
  margin-bottom:18px;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(30,58,95,.12);
}

/* Timeline / two-column */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.grid-2 h3{font-size:20px;margin-bottom:14px;color:var(--forest);}
.grid-2 p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin-bottom:12px;}

/* ============================================================
   News page
   ============================================================ */
.filter-tags{
  display:flex;gap:10px;margin-bottom:32px;flex-wrap:wrap;
}
.filter-tag{
  padding:8px 18px;background:#fff;border:1px solid var(--line);
  border-radius:20px;cursor:pointer;font-family:'Karla',sans-serif;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);
  transition:all .15s ease;
}
.filter-tag:hover,.filter-tag.active{
  background:var(--forest);color:#fff;border-color:var(--forest);
}
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(30,58,95,.08);}
.news-card-image{height:190px;background-size:cover;background-position:center;}
.news-card-content{padding:24px;}
.news-card-date{color:var(--clay);font-size:12.5px;font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;}
.news-card h3{font-size:18px;color:var(--forest);margin-bottom:10px;font-weight:500;}
.news-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px;}
.read-more{color:var(--clay);font-weight:600;font-size:14px;}
.read-more:hover{color:var(--clay-dark);}

/* ============================================================
   Apply page
   ============================================================ */
.apply-categories{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:40px;
}
.apply-category{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--clay);
  padding:28px 24px;border-radius:4px;
}
.apply-category h3{
  font-size:17px;color:var(--forest);margin-bottom:10px;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.apply-category h3 svg{width:20px;height:20px;color:var(--clay);flex-shrink:0;}
.apply-category p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}

/* Formulaire de Candidature — callout & card in brand blue */
.form-callout h2{color:var(--forest);}
.form-callout h2::after{
  content:"";
  display:block;width:56px;height:3px;margin:10px auto 0;
  background:linear-gradient(90deg,var(--forest),#5C9BD4);
  border-radius:2px;
}
.form-callout p{color:#3B5E7E;font-weight:600;}
.apply-form{
  max-width:720px;margin:0 auto;
  background:#fff;border:1px solid #D3E2EF;
  border-top:5px solid var(--forest);
  box-shadow:0 12px 30px rgba(30,58,95,.10);
  padding:40px;border-radius:8px;
}
.apply-form .btn-primary{background:linear-gradient(90deg,var(--forest),#2E6DA4);}

/* ---------- Wizard multi-step candidature ---------- */
.wizard-progress{background:#E4EDF5;border-radius:20px;height:6px;margin-bottom:12px;overflow:hidden;}
.wizard-progress-bar{
  height:100%;width:33.33%;
  background:linear-gradient(90deg,var(--forest),#5C9BD4);
  border-radius:20px;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.wizard-steps-label{display:flex;justify-content:space-between;gap:6px;margin-bottom:28px;flex-wrap:wrap;}
.wizard-step-label{font-size:11.5px;color:var(--ink-soft);font-weight:700;letter-spacing:.3px;opacity:.6;transition:color .25s ease,opacity .25s ease;}
.wizard-step-label.active{color:var(--forest);opacity:1;}
.wizard-step-label.done{color:#3B8E4A;opacity:.9;}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:riseIn .45s cubic-bezier(.22,1,.36,1) both;}
.wizard-step.active.flip-in{animation:wizardFlipIn .65s cubic-bezier(.22,1,.36,1) both;}
.step-title{
  font-family:'Fraunces',serif;font-size:17px;color:var(--forest);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.wizard-badge{
  width:26px;height:26px;border-radius:8px;
  background:var(--forest);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:13px;flex-shrink:0;
}
.wizard-btn-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;}
.wizard-btn-row > span{flex:1;}
.wizard-btn-row .btn-primary,.wizard-btn-row .btn-outline{margin:0;}
.wizard-btn-row .btn-outline{padding:12px 20px;font-size:13.5px;border-radius:20px;}
.wizard-btn-row .btn-primary{padding:12px 26px;font-size:13.5px;border-radius:20px;}
html.dark-mode .wizard-progress{background:#1B3450;}
html.dark-mode .wizard-steps-label{color:#9FB2C6;}
html.dark-mode .wizard-step-label.active{color:#7AB8D4;}
html.dark-mode .step-title{color:#E8EEF5;}
.form-group{margin-bottom:20px;}
.form-group label{
  display:block;margin-bottom:8px;font-weight:600;color:var(--ink);
  font-size:14px;
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:3px;
  font-family:'Karla',sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--cream);transition:border-color .15s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(92,122,140,.12);
}
.form-group textarea{min-height:120px;resize:vertical;}

/* ============================================================
   Contact page — premium card (dark panel + form)
   ============================================================ */
.ct-section{
  padding:74px 0;
  background:linear-gradient(135deg,#DCE3EA 0%,#C4D3DE 55%,#AFC2D2 100%);
}
.ct-card{
  max-width:920px;margin:0 auto;
  background:#fff;
  border-radius:26px;
  box-shadow:0 30px 60px rgba(20,42,69,.25);
  padding:26px;
  display:flex;gap:26px;
}
.ct-panel{
  flex:0 0 40%;
  background:var(--forest);
  border-radius:20px;
  padding:38px 32px;
  color:#fff;
  display:flex;flex-direction:column;
  box-shadow:0 14px 30px rgba(20,42,69,.35);
}
.ct-panel h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:24px;margin:0 0 26px;color:#fff;
}
.ct-row{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px;}
.ct-row .ct-badge{
  flex:0 0 32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.ct-row .ct-badge svg{width:15px;height:15px;stroke:#DCE6F0;fill:none;stroke-width:1.8;}
.ct-row p{margin:0;font-size:13.3px;line-height:1.5;color:#D3DEE8;}
.ct-row p b{
  display:block;color:#fff;font-size:10.5px;letter-spacing:.5px;font-weight:700;
  margin-bottom:2px;text-transform:uppercase;opacity:.7;
}
.ct-quick{display:flex;gap:12px;margin-top:auto;padding-top:22px;}
.ct-quick a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.ct-quick a:hover{background:var(--clay);}
.ct-quick svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8;}
.ct-quick a.wa svg{fill:#fff;stroke:none;}
.ct-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);}
.ct-socials-title{width:100%;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:2px;font-weight:600;}
.ct-socials a{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.12);transition:background .2s ease,transform .2s ease;
}
.ct-socials a:hover{background:var(--clay);transform:translateY(-2px);}
.ct-socials svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ct-socials a.icon-fill svg{fill:#fff;stroke:none;}

.ct-content{flex:1;padding:38px 30px 30px 14px;display:flex;flex-direction:column;}
.ct-content h2{font-family:'Fraunces',serif;font-weight:500;font-size:25px;color:var(--forest);margin:0 0 6px;}
.ct-content .ct-sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 26px;}

.ct-field{margin-bottom:14px;}
.ct-field input,.ct-field textarea{
  width:100%;border:none;background:var(--cream);
  border-radius:10px;
  padding:14px 16px;font-family:'Karla',sans-serif;font-size:13.5px;color:var(--ink);
  resize:none;
}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#A39C86;}
.ct-field textarea{min-height:88px;}
.ct-field input:focus,.ct-field textarea:focus{outline:2px solid var(--forest);outline-offset:1px;}

.ct-send{
  align-self:flex-start;
  margin-top:6px;
  background:var(--clay);color:#fff;border:none;
  padding:13px 34px;border-radius:24px;
  font-size:12.5px;font-weight:700;letter-spacing:1.2px;
  cursor:pointer;font-family:'Karla',sans-serif;
  box-shadow:0 10px 20px rgba(190,91,46,.35);
  transition:background .2s ease;
}
.ct-send:hover{background:var(--clay-dark);}

.ct-success{margin-top:16px;}
.ct-success p:first-child{color:var(--forest);font-weight:600;font-size:1.1rem;margin:0 0 4px;}
.ct-success p:last-child{color:var(--ink-soft);font-size:14px;margin:0;}

@media (max-width:760px){
  .ct-card{flex-direction:column;}
  .ct-panel,.ct-content{flex:1;}
  .ct-content{padding:30px 8px 10px;}
}

/* Quick contact cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.card{
  background:#fff;border:1px solid var(--line);
  padding:32px 24px;border-radius:4px;text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(30,58,95,.08);}
.card h3{font-size:17px;color:var(--forest);margin-bottom:10px;font-weight:500;}
.card p{font-size:14px;color:var(--ink-soft);margin-bottom:6px;}
.icon-card-icon{
  width:56px;height:56px;margin:0 auto 14px;
  background:var(--sand);border-radius:50%;
  display:flex;justify-content:center;align-items:center;
}
.icon-card-icon svg{width:26px;height:26px;color:var(--clay);}
.whatsapp-btn svg{width:18px;height:18px;flex-shrink:0;}

/* Map embeds (Google Maps) */
.map-embed{
  height:300px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(30,58,95,.12);
}
.map-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ============================================================
   Article Modal (news page)
   ============================================================ */
.article-modal-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(20,42,69,.75);
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(4px);
  animation:fadeIn .25s ease;
}
.article-modal{
  background:#fff;
  border-radius:12px;
  width:100%;
  max-width:720px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  animation:modalIn .3s cubic-bezier(.22,1,.36,1);
}
.article-modal-close{
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  border:none;
  font-size:20px;
  color:var(--forest);
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:all .15s ease;
}
.article-modal-close:hover{
  background:var(--clay);
  color:#fff;
  transform:scale(1.1);
}
.article-modal-image{
  height:260px;
  background-size:cover;
  background-position:center;
  border-radius:12px 12px 0 0;
}
.article-modal-content{
  padding:32px 36px 28px;
}
.article-modal-date{
  color:var(--clay);
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:10px;
}
.article-modal-content h2{
  font-family:'Fraunces',serif;
  font-size:26px;
  color:var(--forest);
  margin-bottom:14px;
  line-height:1.25;
}
.article-modal-summary{
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.6;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.article-modal-body{
  font-size:15px;
  color:var(--ink);
  line-height:1.75;
  margin-bottom:20px;
}
.article-modal-footer{
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--ink-soft);
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalIn{
  from{transform:translateY(30px) scale(.97);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}
@media (max-width:600px){
  .article-modal-content{padding:24px 20px;}
  .article-modal-image{height:180px;}
}

/* ============================================================
   CTA banner
   ============================================================ */
.cta-banner{
  background:var(--forest);color:var(--cream);
  padding:70px 0;text-align:center;
}
.cta-banner h2{color:#fff;font-size:30px;margin-bottom:12px;}
.cta-banner p{color:#C4D1DC;font-size:15.5px;margin-bottom:24px;}
.cta-banner-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   Leadership
   ============================================================ */
.leadership{background:var(--sand);padding:70px 0;}
.leadership-content{
  display:flex;align-items:center;gap:40px;max-width:900px;margin:0 auto;
}
.leadership-image{
  width:200px;height:200px;border-radius:50%;
  background-size:cover;background-position:center;flex-shrink:0;
  border:4px solid #fff;box-shadow:0 4px 14px rgba(30,58,95,.12);
}
.leadership-text h3{font-size:22px;color:var(--forest);margin-bottom:10px;}
.leadership-text .quote{
  font-style:italic;color:var(--ink-soft);font-size:16px;
  margin-bottom:14px;line-height:1.6;
}
.leadership-text p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;}

/* ============================================================
   Mission & Vision — modern split panel (mv-)
   ============================================================ */
.mv-section{padding:74px 0;background:#E7E1D2;}
.mv-slide{
  display:flex;
  background:var(--cream);
  box-shadow:0 20px 50px rgba(30,58,95,.18);
  overflow:hidden;
}
.mv-left{
  background:var(--forest);
  color:#fff;
  width:30%;
  padding:56px 40px;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.mv-left h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:33px;
  line-height:1.2;
  margin:0 0 22px;
  color:#fff;
}
.mv-left p{
  font-size:14px;
  line-height:1.65;
  color:#D3DEE8;
  margin:0;
}
.mv-mark{
  margin-top:auto;
  padding-top:30px;
  font-family:'Fraunces',serif;
  font-size:15px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.2);
}
.mv-mark span{display:block;font-family:'Karla',sans-serif;font-size:11.5px;color:#A7B8C6;margin-top:4px;}

/* Right side */
.mv-right{
  width:70%;
  display:flex;flex-direction:column;
}
.mv-cards{
  flex:1;
  display:flex;gap:28px;
  padding:52px 48px 36px;
}
.mv-card{
  flex:1;
  background:#fff;
  border:1px solid var(--line);
  padding-top:22px;
  position:relative;
  display:flex;flex-direction:column;
}
.mv-icon-circle{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  width:48px;height:48px;border-radius:50%;
  background:var(--forest);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(30,58,95,.25);
}
.mv-icon-circle svg{width:22px;height:22px;}
.mv-card-label{
  background:var(--forest);
  color:#fff;
  text-align:center;
  font-family:'Fraunces',serif;
  font-size:17px;
  padding:12px 0 10px;
  margin-top:14px;
}
.mv-card-body{
  padding:22px 26px 28px;
  text-align:center;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
}
.mv-card.clay .mv-card-label{background:var(--clay);}
.mv-card.clay .mv-icon-circle{background:var(--clay);}

/* Photo / illustration band */
.mv-band{
  position:relative;
  height:230px;
  background:var(--forest-dark);
  overflow:hidden;
  border-top:3px solid var(--clay);
}
.mv-band-img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.mv-band-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,42,69,.78) 0%, rgba(20,42,69,.25) 55%, rgba(20,42,69,.15) 100%);
}
.mv-accent{position:absolute;}
.mv-accent.clay{width:70px;height:60px;background:var(--clay);top:0;right:70px;}
.mv-accent.olive{width:46px;height:46px;background:var(--olive);bottom:0;left:0;}
.mv-band-caption{
  position:absolute;left:40px;bottom:22px;color:#fff;
  font-family:'Fraunces',serif;font-size:15px;
  border-left:2px solid var(--clay);padding-left:14px;
}
.mv-band-caption span{display:block;font-family:'Karla',sans-serif;font-size:12px;color:#C4D1DC;margin-top:3px;}

/* Engagements checklist */
.engagements-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.engagement-item{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--olive);
  padding:16px 18px;display:flex;align-items:flex-start;gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.engagement-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(30,58,95,.08);}
.engagement-item svg{width:20px;height:20px;color:var(--olive);flex-shrink:0;margin-top:3px;}
.engagement-item p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}

/* ============================================================
   Utility
   ============================================================ */
.text-center{text-align:center;}
.text-primary{color:var(--forest);}
.mt-lg{margin-top:24px;}
.mb-lg{margin-bottom:24px;}
.mb-xl{margin-bottom:40px;}

/* Scroll reveal */
.scroll-reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.scroll-reveal.visible{opacity:1;transform:translateY(0);}

/* ============================================================
   3D motion design — perspective, depth, tilt, 3D transitions
   ============================================================ */

/* Give cards a shared 3D context for tilted children */
.cd-threed, .leadership-content, .mv-slide, .obj-slide, .ct-card, .hero-art{
  perspective:1300px;
}

/* 3D tilt cards: rise up and rotate into view on hover */
.cd-threed{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-radius .3s ease;
  will-change:transform;
}
.cd-threed:hover{box-shadow:0 35px 70px rgba(15,30,55,.22);}

/* inner layers pop out along the Z axis */
.cd-face,
.cd-face-top{
  transform-style:preserve-3d;
}
.cd-face > svg, .icon-card-icon, .activity svg, .obj-pillar .obj-icon{
  transform:translateZ(36px);
  transition:transform .4s ease;
}
.cd-threed:hover .cd-face > svg,
.cd-threed:hover .icon-card-icon,
.cd-threed:hover .activity svg,
.cd-threed:hover .obj-pillar .obj-icon{
  transform:translateZ(60px) scale(1.15);
}

/* wizard 3D flip between screens */
.wizard-3d-wrap{perspective:1100px;}
.wizard-step.flip-in{animation:wizardFlipIn .65s cubic-bezier(.22,1,.36,1) both;}
.wizard-step.flip-out-left{animation:wizardFlipOutLeft .4s ease both;}
.wizard-step.flip-out-right{animation:wizardFlipOutRight .4s ease both;}
@keyframes wizardFlipIn{
  from{opacity:0;transform:rotateX(-18deg) translateY(22px) scale(.96);}
  to{opacity:1;transform:rotateX(0) translateY(0) scale(1);}
}
@keyframes wizardFlipOutLeft{
  from{opacity:1;transform:rotateX(0) translateX(0);}
  to{opacity:0;transform:rotateX(12deg) translateX(-45px);}
}
@keyframes wizardFlipOutRight{
  from{opacity:1;transform:rotateX(0) translateX(0);}
  to{opacity:0;transform:rotateX(-12deg) translateX(45px);}
}

/* depth shadow strips under band/panels */
.mv-slide, .obj-slide, .ct-card{
  transform-style:preserve-3d;
}
.mv-slide::after, .obj-slide::after, .ct-card::after{
  content:"";
  position:absolute;left:6%;right:6%;bottom:-14px;height:26px;
  background:radial-gradient(ellipse at 50% 0%, rgba(15,30,55,.25) 0%, transparent 72%);
  filter:blur(6px);
  pointer-events:none;
  z-index:-1;
}

/* parallax hero layers: image + floating card at different depths */
.hero-art{perspective:900px;}
.hero-art .hero-img{transition:transform .8s ease;transform:translateZ(0);}
.hero-art .float-card{
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
}
.hero:hover .hero-art .hero-img{transform:translateZ(20px) scale(1.015);}
.hero:hover .hero-art .float-card{transform:translateZ(64px) translateY(-9px);}

/* leadership photo gently lifts */
.leadership-image{transition:transform .6s cubic-bezier(.34,1.56,.64,1);}
.leadership:hover .leadership-image{transform:rotateY(8deg) rotateX(-4deg) translateZ(24px) scale(1.06);}
.leadership-image{transform-style:preserve-3d;}

/* ============================================================
   Creative motion — animations, dynamic icons, morph transitions
   ============================================================ */

/* Announcement bar: slow living gradient */
.announce{
  background:linear-gradient(90deg,var(--forest) 0%,#2A5A8C 50%,var(--forest) 100%);
  background-size:200% 100%;
  animation:announceShift 9s linear infinite;
}
@keyframes announceShift{
  from{background-position:0% 0;}
  to{background-position:200% 0;}
}

/* Hero entrance: soft rise */
@keyframes riseIn{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-grid > div:first-child{animation:riseIn .7s cubic-bezier(.22,1,.36,1) both;}
.hero-grid > div:last-child{animation:riseIn .7s cubic-bezier(.22,1,.36,1) .18s both;}

/* Floating hero card */
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
.float-card{animation:floatY 4.5s ease-in-out infinite;}

/* Live pulse on "Actif" badges */
.site-square .badge{position:relative;}
.site-square .badge.actif{padding-left:26px;}
.site-square .badge.actif::before,
.site-square .badge.actif::after{
  content:"";position:absolute;left:11px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:currentColor;
}
.site-square .badge.actif::after{animation:ping 2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ping{
  0%{transform:scale(1);opacity:.65;}
  80%,100%{transform:scale(2.8);opacity:0;}
}

/* Staggered reveals inside grids */
.news-grid .scroll-reveal:nth-child(2){transition-delay:.07s;}
.news-grid .scroll-reveal:nth-child(3){transition-delay:.14s;}
.news-grid .scroll-reveal:nth-child(4){transition-delay:.21s;}
.news-grid .scroll-reveal:nth-child(5){transition-delay:.28s;}
.news-grid .scroll-reveal:nth-child(6){transition-delay:.35s;}
.engagements-grid .scroll-reveal:nth-child(2){transition-delay:.06s;}
.engagements-grid .scroll-reveal:nth-child(3){transition-delay:.12s;}
.engagements-grid .scroll-reveal:nth-child(4){transition-delay:.18s;}
.engagements-grid .scroll-reveal:nth-child(5){transition-delay:.24s;}
.engagements-grid .scroll-reveal:nth-child(6){transition-delay:.30s;}
.engagements-grid .scroll-reveal:nth-child(7){transition-delay:.36s;}

/* Dynamic icons: springy motion on hover */
.activity svg,
.apply-category h3 svg,
.engagement-item svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.activity:hover svg{transform:rotate(-8deg) scale(1.18);}
.apply-category:hover h3 svg{transform:rotate(8deg) scale(1.22);}
.engagement-item:hover svg{transform:scale(1.3);}
.obj-pillar .obj-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.obj-pillar:hover .obj-icon{transform:rotate(-10deg) scale(1.12);}

/* Morph transitions: cards round out on hover */
.site-square,
.partner,
.card,
.news-card,
.apply-category,
.obj-pillar{
  transition:border-radius .45s cubic-bezier(.22,1,.36,1),
             border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.site-square:hover,
.partner:hover,
.card:hover,
.news-card:hover,
.apply-category:hover,
.obj-pillar:hover{
  border-radius:18px;
}
.site-square:hover::before,
.partner:hover::before{border-radius:18px 18px 0 0;}

/* Shine sweep on buttons */
.btn-primary,.btn-secondary,.ct-send{position:relative;overflow:hidden;}
.btn-primary::after,.btn-secondary::after,.ct-send::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;
  width:45%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn-primary:hover::after,.btn-secondary:hover::after,.ct-send:hover::after{left:135%;}

/* News image slow zoom */
.news-card-image{transition:transform .6s cubic-bezier(.22,1,.36,1);}
.news-card:hover .news-card-image{transform:scale(1.07);}

/* Scroll progress bar (injected by JS) */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--clay),#7AB8D4);
  z-index:300;border-radius:0 3px 3px 0;
}

/* ============================================================
   Dark mode (jour / nuit)
   ============================================================ */
body{transition:background-color .3s ease,color .3s ease;}
header.nav{transition:background-color .3s ease,border-color .3s ease;}

html.dark-mode{
  --cream:#0D1A2B;
  --sand:#12233A;
  --ink:#E8EEF5;
  --ink-soft:#9FB2C6;
  --line:#253A52;
}
html.dark-mode header.nav{background:#10203A;}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode .wordmark{color:#E8EEF5;}
html.dark-mode .stat .num,
html.dark-mode .role-row .role-name,
html.dark-mode .grid-2 h3,
html.dark-mode .card h3,
html.dark-mode .link-secondary,
html.dark-mode .ct-content h2,
html.dark-mode .ct-success p:first-child,
html.dark-mode .float-card strong{color:#E8EEF5;}
html.dark-mode nav.links a{color:#9FB2C6;}
html.dark-mode nav.links a:hover{color:#fff;border-color:#7AB8D4;}
html.dark-mode nav.links a.active{color:#fff;}
html.dark-mode .mobile-toggle span{background:#E8EEF5;}
html.dark-mode .mobile-nav-links a,
html.dark-mode .mobile-nav-close{color:#E8EEF5;}
html.dark-mode .announce{color:#D7E1EC;}
html.dark-mode .float-card{background:#13253C;border-color:var(--line);}
html.dark-mode .card,
html.dark-mode .news-card,
html.dark-mode .mv-card,
html.dark-mode .obj-pillar,
html.dark-mode .apply-category,
html.dark-mode .apply-form,
html.dark-mode .engagement-item,
html.dark-mode .filter-tag,
html.dark-mode .ct-card{background:#13253C;border-color:var(--line);}
html.dark-mode .filter-tag{color:var(--ink-soft);}
html.dark-mode .form-group input,
html.dark-mode .form-group textarea,
html.dark-mode .form-group select{background:#0D1A2B;color:var(--ink);border-color:var(--line);}
html.dark-mode .btn-outline{color:#E8EEF5;}
html.dark-mode .badge.actif{background:#1B3450;color:#7AB8D4;}
html.dark-mode .badge.ferme{background:#3A2519;color:#D98E63;}
html.dark-mode .leadership-image{border-color:#223852;}
html.dark-mode .map-embed,
html.dark-mode .parcours-img{border-color:var(--line);box-shadow:0 8px 20px rgba(0,0,0,.45);}
html.dark-mode .mv-section,
html.dark-mode .ct-section{background:linear-gradient(135deg,#0D1A2B 0%,#122A44 100%);}
html.dark-mode .theme-toggle{color:#E8EEF5;}
html.dark-mode .theme-toggle:hover{color:#7AB8D4;border-color:#7AB8D4;}
html.dark-mode .form-callout p{color:#7AB8D4;}
html.dark-mode .apply-form{border-color:var(--line);box-shadow:0 12px 30px rgba(0,0,0,.4);}
html.dark-mode .apply-form label{color:#E8EEF5;}
html.dark-mode .obj-pillar h3,
html.dark-mode .apply-category h3,
html.dark-mode .activity h3,
html.dark-mode .news-card h3{color:#E8EEF5;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:920px){
  nav.links{display:none;}
  .mobile-toggle{display:flex;}
  .hero-grid{flex-direction:column;}
  .stats-row{justify-content:flex-start;}
  .activity{flex:1 1 45%;}
  .site-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .site-row .site-name{flex-basis:auto;}
  .role-row{flex-direction:column;gap:8px;}
  .role-row .role-name{flex-basis:auto;}
  .impact-band .wrap{flex-direction:column;align-items:flex-start;}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .obj-slide{flex-direction:column;}
  .obj-left,.obj-right{width:100%;}
  .obj-pillar{flex:0 0 45%;}
  .mv-slide{flex-direction:column;}
  .mv-left,.mv-right{width:100%;}
  .mv-cards{flex-direction:column;padding:44px 28px 28px;}
  .mv-icon-circle{left:32px;transform:none;}
  .engagements-grid{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .apply-categories{grid-template-columns:1fr;}
  .leadership-content{flex-direction:column;text-align:center;}
  .hero h1{font-size:36px;}
  .page-hero h1{font-size:32px;}
}

@media (max-width:600px){
  .wrap{padding:0 20px;}
  .nav-inner{padding:0 20px;}
  .wordmark{font-size:18px;}
  .nav-brand img{height:38px;}
  .hero{padding:50px 0 40px;}
  .hero h1{font-size:30px;}
  .hero p.lede{font-size:16px;}
  .hero-art .hero-img{height:280px;}
  .obj-pillar{flex:0 0 100%;}
  .news-grid{grid-template-columns:1fr;}
  .activity{flex:1 1 100%;min-height:auto;}
  .section{padding:50px 0;}
  .section-head h2{font-size:26px;}
  .impact-band h2{font-size:24px;}
  .apply-form{padding:24px;}
  .contact-form{padding:24px;}
  .contact-info{padding:24px;}
  .vision-block,.mission-block{padding:24px;}
  .footer-bottom{flex-direction:column;text-align:center;}
}

/* ============================================================
   Partnerships Page Styles
   ============================================================ */

.partnerships-intro {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ============================================================
   Card Images for Partnerships Categories
   ============================================================ */

.card-image-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  margin-bottom: 20px;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-image-wrap img {
  transform: scale(1.08);
}

/* Dark mode support for card images */
.dark-mode .card-image-wrap {
  opacity: 0.9;
}

.dark-mode .card:hover .card-image-wrap {
  opacity: 1;
}

/* ============================================================
   Actualites Page (Articles + Nouvelles) Styles
   ============================================================ */

/* Empty states (page stays empty until admin publishes) */
.actualites-empty {
  display: none;
  text-align: center;
  padding: 70px 24px;
  background: var(--cream);
  border: 2px dashed var(--sand);
  border-radius: 18px;
  max-width: 560px;
  margin: 24px auto 0;
}
.actualites-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--forest-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(30, 58, 95, 0.25);
}
.actualites-empty-icon svg {
  width: 34px;
  height: 34px;
  color: var(--white);
}
.actualites-empty h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--forest);
  margin-bottom: 8px;
}
.actualites-empty p {
  color: #6b7280;
  font-size: 15px;
  margin: 0;
}
.dark-mode .actualites-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.dark-mode .actualites-empty h3 { color: #e8eef5; }
.dark-mode .actualites-empty p { color: #9aa7b5; }
.dark-mode .actualites-empty-icon {
  background: linear-gradient(135deg, #BE5B2E, #d97a4a);
  box-shadow: 0 10px 24px rgba(190, 91, 46, 0.3);
}

/* ===== Offres d'emploi publiées par l'admin ===== */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.offer-card {
  background: var(--cream);
  border: 1px solid var(--sand);
  border-top: 4px solid var(--forest);
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(30, 58, 95, 0.14);
}
.offer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.badge-offer {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--forest), #2E6DA4);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.offer-deadline {
  font-size: 12px;
  color: var(--clay);
  font-weight: 700;
}
.offer-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--forest);
  margin: 0;
}
.offer-location {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0;
}
.offer-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.offer-apply-btn {
  margin-top: auto;
  width: 100%;
  text-align: center;
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(90deg, var(--forest), #2E6DA4);
  transition: filter 0.25s ease, transform 0.2s ease;
}
.offer-apply-btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.dark-mode .offer-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.dark-mode .offer-card h3 { color: #E8EEF5; }
.dark-mode .offer-location,
.dark-mode .offer-desc { color: #9FB2C6; }

/* ===== Nos Produits ===== */
.products-hero {
  position: relative;
  min-height: 360px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 20px;
}
.products-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('../images/lesoffre.png') center center / cover no-repeat;
  opacity: 0.15;
  z-index: 0;
}
.products-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.products-hero-content {
  position: relative;
  z-index: 2;
  max-width: 740px;
}
.products-hero h1 {
  color: var(--white);
  font-size: 44px;
  margin-bottom: 14px;
  font-weight: 600;
}
.products-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
}

/* Product tabs */
.product-tabs--modern {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  padding: 0 12px;
}
.product-tab {
  padding: 13px 24px;
  border: 2px solid var(--line);
  border-radius: 32px;
  background: var(--white);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-tab:hover {
  border-color: var(--olive);
  color: var(--forest);
}
.product-tab.active {
  background: linear-gradient(135deg, var(--forest), var(--forest-dark));
  border-color: var(--forest);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.25);
}
.tab-emoji {
  font-size: 18px;
}

/* Products grid */
.products-grid--modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

/* Product cards */
.product-card {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.06);
  transition: all 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(30, 58, 95, 0.14);
}
.product-card-image {
  width: 100%;
  height: 180px;
  background: #e5e7eb;
  background-size: cover;
  background-position: center;
}
.product-card-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-card-cat {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--forest), #2E6DA4);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  align-self: flex-start;
}
.cat-pharmacy { background: linear-gradient(135deg, #10B981, #059669); }
.cat-food { background: linear-gradient(135deg, #F59E0B, #D97706); }
.cat-animal { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.product-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--forest);
  margin: 0;
}
.product-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--clay);
}

/* Empty state */
.products-empty {
  display: block;
  text-align: center;
  padding: 60px 24px;
  background: var(--cream);
  border: 2px dashed var(--sand);
  border-radius: 18px;
  max-width: 520px;
  margin: 0 auto;
}
.products-empty-illustration {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 22px;
}
.empty-bag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--forest-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(30, 58, 95, 0.25);
  animation: pulse-bag 2.5s ease-in-out infinite;
}
.empty-bag svg { width: 34px; height: 34px; color: var(--white); }
.empty-sparkle {
  position: absolute;
  font-size: 16px;
  opacity: 0.45;
  animation: sparkle 2s ease-in-out infinite;
}
.empty-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--forest);
  margin-bottom: 8px;
}
.empty-text {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.7;
}
@keyframes pulse-bag {
  0%, 100% { box-shadow: 0 12px 28px rgba(30, 58, 95, 0.25); }
  50% { box-shadow: 0 18px 40px rgba(30, 58, 95, 0.35); }
}
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Dark mode */
.dark-mode .products-hero::before { opacity: 0.12; }
.dark-mode .product-tab {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.dark-mode .product-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.dark-mode .product-card h3 { color: #E8EEF5; }
.dark-mode .product-card p { color: #9FB2C0; }
.dark-mode .products-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.dark-mode .empty-title { color: #c7d4e4; }
.dark-mode .empty-text { color: #8a9aae; }

/* Responsive */
@media (max-width: 767px) {
  .product-tabs--modern { gap: 8px; }
  .product-tab { padding: 10px 16px; font-size: 14px; }
  .products-hero h1 { font-size: 32px; }
  .products-grid--modern { grid-template-columns: 1fr; }
  .products-empty { padding: 50px 20px; }
}

.actualites-hero {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 20px;
}

.actualites-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.actualites-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.actualites-hero h1 {
  color: var(--white);
  font-size: 44px;
  margin-bottom: 16px;
  font-weight: 600;
}

.actualites-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
}

/* Tabs */
.news-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.news-tab {
  padding: 12px 26px;
  border: 2px solid var(--line);
  border-radius: 30px;
  background: var(--white);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.25s ease;
}

.news-tab:hover {
  border-color: var(--olive);
  color: var(--forest);
}

.news-tab.active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.25);
}

.news-tab-section {
  display: none;
}

.news-tab-section.active {
  display: block;
}

/* Dark mode */
.dark-mode .news-tab {
  background: #1a2a3a;
  border-color: #2a3a4a;
  color: #a0b0c0;
}

.dark-mode .news-tab.active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}

.dark-mode .actualites-hero {
  background: linear-gradient(135deg, #0d1a2a 0%, #142A45 100%);
}

/* Responsive */
@media (max-width: 767px) {
  .actualites-hero h1 {
    font-size: 30px;
  }

  .actualites-hero {
    min-height: 240px;
    padding: 50px 15px;
  }

  .news-tab {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 11px 16px;
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .actualites-hero h1 {
    font-size: 26px;
  }

  .news-tabs {
    gap: 8px;
  }

  .news-tab {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* ============================================================
   Research Section - Improved Design
   ============================================================ */

.research-section {
  max-width: 900px;
  margin: 0 auto;
}

.research-header {
  text-align: center;
  margin-bottom: 40px;
}

.research-icon-large {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 40px rgba(30, 58, 95, 0.25);
}

.research-icon-large svg {
  width: 36px;
  height: 36px;
  color: var(--white);
}

.research-header h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.research-subtitle {
  font-size: 16px;
  color: var(--ink-soft);
}

.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 35px;
}

.research-card {
  background: var(--white);
  border-radius: 16px;
  padding: 30px;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.research-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
  border-color: var(--clay);
}

.research-card-icon {
  width: 55px;
  height: 55px;
  background: var(--cream);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.research-card-icon svg {
  width: 26px;
  height: 26px;
  color: var(--clay);
}

.research-card h3 {
  font-size: 18px;
  color: var(--forest);
  margin-bottom: 12px;
}

.research-card p {
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 18px;
}

.research-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.research-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--forest);
  background: var(--cream);
  padding: 5px 12px;
  border-radius: 15px;
}

.research-benefits {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 25px;
  background: var(--cream);
  border-radius: 12px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.benefit-icon {
  width: 28px;
  height: 28px;
  background: var(--clay);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-icon svg {
  width: 14px;
  height: 14px;
  color: var(--white);
}

.benefit-item span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* Dark mode support */
.dark-mode .research-card {
  background: #1a2a3a;
  border-color: #2a3a4a;
}

.dark-mode .research-card:hover {
  border-color: var(--clay);
}

.dark-mode .research-card-icon {
  background: #1e3040;
}

.dark-mode .research-card h3 {
  color: var(--white);
}

.dark-mode .research-card p {
  color: #a0b0c0;
}

.dark-mode .research-tag {
  background: #1e3040;
  color: var(--clay);
}

.dark-mode .research-benefits {
  background: #1a2a3a;
}

.dark-mode .benefit-item span {
  color: var(--white);
}

/* Responsive */
@media (max-width: 768px) {
  .research-header h2 {
    font-size: 26px;
  }
  
  .research-icon-large {
    width: 65px;
    height: 65px;
  }
  
  .research-icon-large svg {
    width: 30px;
    height: 30px;
  }
  
  .research-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .research-card {
    padding: 25px;
  }
  
  .research-benefits {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }
}

@media (max-width: 575px) {
  .research-header h2 {
    font-size: 22px;
  }
  
  .research-icon-large {
    width: 55px;
    height: 55px;
  }
  
  .research-icon-large svg {
    width: 26px;
    height: 26px;
  }
  
  .research-card {
    padding: 20px;
  }
  
  .research-card-icon {
    width: 45px;
    height: 45px;
  }
  
  .research-card-icon svg {
    width: 22px;
    height: 22px;
  }
  
  .research-card h3 {
    font-size: 16px;
  }
  
  .benefit-item span {
    font-size: 13px;
  }
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.project-item {
  background: var(--white);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.project-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--clay);
}

.project-item-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.project-icon {
  width: 50px;
  height: 50px;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-icon svg {
  width: 24px;
  height: 24px;
  color: var(--clay);
}

.project-item-header h3 {
  font-size: 18px;
  color: var(--forest);
  margin-bottom: 5px;
}

.project-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--clay);
  padding: 3px 10px;
  border-radius: 12px;
}

.project-item-content p {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 15px;
}

/* Research Section */
.research-section {
  max-width: 800px;
  margin: 0 auto;
}

.research-content {
  background: var(--cream);
  border-radius: 12px;
  padding: 30px;
}

.research-content > p {
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 20px;
  font-weight: 500;
}

.research-list {
  list-style: none;
  padding: 0;
}

.research-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.research-list li:last-child {
  border-bottom: none;
}

.research-list li svg {
  width: 20px;
  height: 20px;
  color: var(--clay);
  flex-shrink: 0;
  margin-top: 2px;
}

.research-list li span {
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Dark mode support */
.dark-mode .project-item {
  background: #1a2a3a;
  border-color: #2a3a4a;
}

.dark-mode .project-item:hover {
  border-color: var(--clay);
}

.dark-mode .project-icon {
  background: #1e3040;
}

.dark-mode .project-item-header h3 {
  color: var(--white);
}

.dark-mode .project-item-content p {
  color: #a0b0c0;
}

.dark-mode .research-content {
  background: #1a2a3a;
}

.dark-mode .research-content > p {
  color: var(--white);
}

.dark-mode .research-list li span {
  color: #a0b0c0;
}

.dark-mode .research-list li {
  border-bottom-color: #2a3a4a;
}

/* Responsive */
@media (max-width: 768px) {
  .project-item {
    padding: 20px;
  }
  
  .project-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .project-icon {
    width: 45px;
    height: 45px;
  }
  
  .project-item-header h3 {
    font-size: 16px;
  }
  
  .research-content {
    padding: 20px;
  }
}

/* Hero Section */
.projects-hero {
  position: relative;
  min-height: 350px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}

.projects-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.projects-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.projects-hero h1 {
  color: var(--white);
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 600;
}

.projects-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

/* Introduction */
.projects-intro {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Project Cards */
.project-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.project-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.project-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.08);
}

.project-status {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-active {
  background: #2E7D32;
  color: var(--white);
}

.status-planifie {
  background: var(--clay);
  color: var(--white);
}

.project-content {
  padding: 25px;
}

.project-content h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--forest);
}

.project-content p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--olive);
}

.project-location,
.project-area {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Dark mode support */
.dark-mode .projects-hero {
  background: linear-gradient(135deg, #0d1a2a 0%, #142A45 100%);
}

.dark-mode .project-card {
  background: #1a2a3a;
  border-color: #2a3a4a;
}

.dark-mode .project-content h3 {
  color: var(--white);
}

.dark-mode .project-content p {
  color: #a0b0c0;
}

.dark-mode .project-meta {
  color: #7A8FA3;
}

/* Responsive */
@media (max-width: 768px) {
  .projects-hero h1 {
    font-size: 36px;
  }
  
  .projects-hero {
    min-height: 280px;
    padding: 60px 15px;
  }
  
  .project-image {
    height: 180px;
  }
}

/* Hero Section */
.jobs-hero {
  position: relative;
  min-height: 400px;
  background:
    linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(21, 40, 66, 0.9) 100%),
    url('../images/lesoffre.png') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}

.jobs-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.jobs-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.jobs-hero h1 {
  color: var(--white);
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 600;
}

.jobs-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  margin-bottom: 30px;
}

.jobs-hero .btn-primary {
  background: var(--clay);
  font-size: 16px;
  padding: 14px 30px;
}

.jobs-hero .btn-primary:hover {
  background: var(--clay-dark);
}

/* Introduction Section */
.jobs-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.jobs-intro-content h2 {
  margin-bottom: 20px;
}

.jobs-intro-content > p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 25px;
}

.jobs-benefits-list {
  list-style: none;
  padding: 0;
}

.jobs-benefits-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--ink);
}

.jobs-benefits-list li svg {
  width: 20px;
  height: 20px;
  color: var(--clay);
  flex-shrink: 0;
}

.jobs-intro-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.jobs-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Job Category Cards */
.job-category-card {
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.job-category-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.job-category-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-category-icon svg {
  width: 28px;
  height: 28px;
  color: var(--clay);
}

.job-category-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.job-category-card p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   Process Flow - Schematic Design
   ============================================================ */

.process-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  padding: 80px 0;
}

.process-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 50px;
  position: relative;
}

.process-item {
  flex: 1;
  max-width: 250px;
  text-align: center;
  padding: 30px 20px;
  background: var(--white);
  border-radius: 16px;
  border: 2px solid var(--line);
  position: relative;
  transition: all 0.4s ease;
  z-index: 2;
}

.process-item:hover {
  border-color: var(--clay);
  box-shadow: 0 20px 50px rgba(190, 91, 46, 0.15);
  transform: translateY(-10px);
}

.process-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(30, 58, 95, 0.3);
}

.process-icon svg {
  width: 32px;
  height: 32px;
  color: var(--white);
}

.process-content .step-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--clay);
  background: rgba(190, 91, 46, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.process-content h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--forest);
}

.process-content p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.process-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 70px;
  margin-top: 30px;
  flex-shrink: 0;
}

.process-connector svg {
  width: 24px;
  height: 24px;
  color: var(--clay);
}

/* Responsive */
@media (max-width: 900px) {
  .process-flow {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .process-item {
    max-width: 100%;
    width: 100%;
  }

  .process-connector {
    width: 70px;
    height: 40px;
    margin-top: 0;
  }

  .process-connector svg {
    transform: rotate(90deg);
  }
}

/* Dark mode support */
.dark-mode .process-section {
  background: linear-gradient(180deg, #0d1a2a 0%, #142A45 100%);
}

.dark-mode .process-item {
  background: #1a2a3a;
  border-color: #2a3a4a;
}

.dark-mode .process-item:hover {
  border-color: var(--clay);
  box-shadow: 0 20px 50px rgba(190, 91, 46, 0.2);
}

.dark-mode .process-icon {
  background: linear-gradient(135deg, var(--clay) 0%, var(--clay-dark) 100%);
}

.dark-mode .process-content h3 {
  color: var(--white);
}

.dark-mode .process-content p {
  color: #a0b0c0;
}

.dark-mode .process-connector svg {
  color: var(--clay);
}

/* ============================================================
   Partner CTA Section
   ============================================================ */

.partner-cta {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  padding: 80px 0;
}

.partner-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.partner-cta-content h2 {
  color: var(--white);
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 600;
}

.partner-cta-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 30px;
}

.partner-cta-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.partner-cta-buttons .btn-primary {
  background: var(--clay);
  color: var(--white);
}

.partner-cta-buttons .btn-primary:hover {
  background: var(--clay-dark);
}

.partner-cta-buttons .btn-outline {
  border-color: var(--white);
  color: var(--white);
}

.partner-cta-buttons .btn-outline:hover {
  background: var(--white);
  color: var(--forest);
}

.partner-cta-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.partner-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.partner-cta-image:hover img {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  .partner-cta-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .partner-cta-content h2 {
    font-size: 28px;
  }

  .partner-cta-image {
    order: -1;
  }
}

/* Dark mode support */
.dark-mode .partner-cta {
  background: linear-gradient(135deg, #0d1a2a 0%, #142A45 100%);
}

/* ============================================================
   Partners Page - Table with Logos
   ============================================================ */

.section--partners {
  padding: 60px 0;
}

.partners-table-wrapper {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line);
  overflow-x: auto;
}

.partners-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.partners-table thead {
  background: linear-gradient(135deg, var(--forest) 0%, #2a4a6a 100%);
  color: var(--white);
}

.partners-table th {
  padding: 20px 24px;
  text-align: left;
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.partners-table th.th-logo {
  width: 100px;
  text-align: center;
}

.partners-table th.th-name {
  width: 280px;
}

.partners-table th.th-desc {
  min-width: 400px;
}

.partners-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: all 0.3s ease;
}

.partners-table tbody tr:last-child {
  border-bottom: none;
}

.partners-table tbody tr:hover {
  background: var(--cream);
}

.partners-table tbody tr:nth-child(even) {
  background: rgba(247, 242, 231, 0.4);
}

.partners-table tbody tr:nth-child(even):hover {
  background: var(--cream);
}

.partners-table td {
  padding: 20px 24px;
  vertical-align: middle;
}

.td-logo {
  text-align: center;
  width: 100px;
}

.partner-table-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--cream);
  padding: 6px;
  border: 2px solid var(--line);
  transition: all 0.3s ease;
}

.partner-table-logo:hover {
  transform: scale(1.1);
  border-color: var(--forest);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.partner-table-logo--placeholder {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--clay) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
}

.partner-table-logo--placeholder span {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
}

.td-name {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.4;
}

.td-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.partners-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* Dark mode */
.dark-mode .partners-table-wrapper {
  background: #1e3040;
  border-color: #2a4a5a;
}

.dark-mode .partners-table th {
  background: linear-gradient(135deg, #142840 0%, #1e3050 100%);
}

.dark-mode .partners-table tbody tr {
  border-color: #2a4a5a;
}

.dark-mode .partners-table tbody tr:nth-child(even) {
  background: rgba(30, 48, 64, 0.5);
}

.dark-mode .partners-table tbody tr:hover {
  background: #253a4a;
}

.dark-mode .partner-table-logo {
  background: #253a4a;
  border-color: #3a5a6a;
}

.dark-mode .partner-table-logo:hover {
  border-color: var(--clay);
}

.dark-mode .td-name {
  color: var(--clay);
}

.dark-mode .td-desc {
  color: #a0b0c0;
}

/* Responsive */
@media (max-width: 768px) {
  .partners-table th,
  .partners-table td {
    padding: 16px 18px;
  }
  
  .partner-table-logo {
    width: 48px;
    height: 48px;
  }
  
  .partner-table-logo--placeholder {
    width: 48px;
    height: 48px;
  }
  
  .partner-table-logo--placeholder span {
    font-size: 14px;
  }
  
  .td-name {
    font-size: 14px;
  }
  
  .td-desc {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .partner-row-logo {
    width: 56px;
    height: 56px;
  }
  .partner-row-logo--placeholder span {
    font-size: 16px;
  }
  .partner-row-name h3 {
    font-size: 14px;
  }
  .partner-row-right p {
    font-size: 13px;
  }
}