:root{--accent:#3D7A52;--accent-clair:#4A9465;--accent-pale:#2D5A3D;--accent-glow:rgba(61,122,82,.25);--transition:.4s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"]{--fond:#090D18;--fond-2:#0E1525;--fond-carte:#131D2E;--fond-carte-2:#192234;--texte:#E8EDF5;--texte-2:#7A8FAF;--texte-3:#3A4D66;--bordure:rgba(255,255,255,.06);--bordure-2:rgba(255,255,255,.12);--ombre:rgba(0,0,0,.4)}
[data-theme="light"]{--fond:#F4F1EC;--fond-2:#EDE9E2;--fond-carte:#FFFFFF;--fond-carte-2:#F8F6F2;--texte:#1A1E2A;--texte-2:#5A6478;--texte-3:#A8B0BE;--bordure:rgba(0,0,0,.06);--bordure-2:rgba(0,0,0,.12);--ombre:rgba(0,0,0,.08)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--fond);color:var(--texte);overflow-x:hidden;transition:background var(--transition),color var(--transition);cursor:none}
.curseur{width:10px;height:10px;background:var(--accent-clair);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;mix-blend-mode:screen}
.curseur-anneau{width:36px;height:36px;border:1px solid var(--accent-clair);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:.45}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 clamp(20px,5vw,80px);height:68px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--fond) 80%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--bordure);transition:background var(--transition)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-marque{width:36px;height:36px;background:linear-gradient(135deg,var(--accent-pale),var(--accent-clair));border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:20px;font-weight:900;color:#fff;box-shadow:0 4px 20px var(--accent-glow)}
.nav-logo-nom{font-size:17px;font-weight:600;color:var(--texte);letter-spacing:-.3px}
.nav-liens{display:flex;align-items:center;gap:28px;list-style:none}
.nav-liens a{text-decoration:none;color:var(--texte-2);font-size:14px;font-weight:400;transition:color .2s;position:relative}
.nav-liens a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--accent-clair);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-liens a:hover{color:var(--texte)}
.nav-liens a:hover::after{transform:scaleX(1)}
.nav-droite{display:flex;align-items:center;gap:14px}
.btn-theme{width:44px;height:26px;background:var(--fond-carte);border:1px solid var(--bordure-2);border-radius:13px;cursor:pointer;position:relative;transition:background var(--transition)}
.btn-theme-pastille{width:20px;height:20px;background:var(--accent-clair);border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}
[data-theme="light"] .btn-theme-pastille{transform:translateX(18px)}
.btn-theme-pastille svg{width:11px;height:11px}
.btn-dl-nav{padding:9px 20px;background:linear-gradient(135deg,var(--accent-pale),var(--accent-clair));color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;text-decoration:none;transition:opacity .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 16px var(--accent-glow)}
.btn-dl-nav:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-glow)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:100px clamp(20px,5vw,80px) 80px;position:relative;overflow:hidden}
.hero-grille{position:absolute;inset:0;background-image:linear-gradient(var(--bordure) 1px,transparent 1px),linear-gradient(90deg,var(--bordure) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 70%);pointer-events:none}
.orbe{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.orbe-1{width:600px;height:600px;top:-150px;right:-200px;background:radial-gradient(circle,rgba(61,122,82,.14) 0%,transparent 70%);animation:flotter 8s ease-in-out infinite}
.orbe-2{width:380px;height:380px;bottom:-80px;left:-100px;background:radial-gradient(circle,rgba(61,122,82,.08) 0%,transparent 70%);animation:flotter 10s ease-in-out infinite reverse}
.orbe-3{width:260px;height:260px;top:40%;left:38%;background:radial-gradient(circle,rgba(61,122,82,.06) 0%,transparent 70%);animation:flotter 6s ease-in-out infinite 2s}
@keyframes flotter{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.04)}}
.hero-corps{position:relative;z-index:2;max-width:660px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:color-mix(in srgb,var(--accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--accent-clair) 30%,transparent);border-radius:20px;font-size:12px;color:var(--accent-clair);letter-spacing:.5px;font-weight:500;margin-bottom:28px;opacity:0;animation:monter .7s ease forwards .2s}
.badge-dot{width:6px;height:6px;background:var(--accent-clair);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero-titre{font-family:'Playfair Display',serif;font-size:clamp(40px,7vw,86px);font-weight:900;line-height:1.0;letter-spacing:-2px;color:var(--texte);opacity:0;animation:monter .8s ease forwards .4s}
.hero-titre-vert{background:linear-gradient(135deg,var(--accent-clair),#7BC49A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.hero-sous{font-size:clamp(15px,2vw,17px);color:var(--texte-2);line-height:1.75;max-width:500px;margin:20px 0 44px;font-weight:300;opacity:0;animation:monter .8s ease forwards .6s}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:monter .8s ease forwards .8s}
@keyframes monter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.btn-prim{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:linear-gradient(135deg,var(--accent-pale),var(--accent-clair));color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 30px var(--accent-glow);position:relative;overflow:hidden}
.btn-prim::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .2s}
.btn-prim:hover{transform:translateY(-2px);box-shadow:0 16px 40px var(--accent-glow)}
.btn-prim:hover::after{opacity:1}
.btn-sec{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;background:var(--fond-carte);color:var(--texte);border:1px solid var(--bordure-2);border-radius:14px;font-size:15px;font-weight:400;font-family:'DM Sans',sans-serif;cursor:pointer;text-decoration:none;transition:transform .2s,border-color .2s,background .2s}
.btn-sec:hover{transform:translateY(-2px);border-color:var(--accent-clair);background:color-mix(in srgb,var(--accent) 8%,var(--fond-carte))}

/* MOCKUP */
.hero-mockup{position:absolute;right:clamp(20px,6vw,110px);top:50%;transform:translateY(-50%);z-index:2;opacity:0;animation:monter 1s ease forwards 1s}
.tel{width:230px;height:470px;background:linear-gradient(145deg,var(--fond-carte-2),var(--fond-carte));border-radius:40px;border:1.5px solid var(--bordure-2);box-shadow:0 40px 80px var(--ombre),0 0 0 1px var(--bordure),inset 0 1px 0 var(--bordure-2);position:relative;overflow:hidden;animation:flotterTel 6s ease-in-out infinite 1.5s}
@keyframes flotterTel{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
.tel-ecran{position:absolute;inset:12px;background:var(--fond);border-radius:30px;overflow:hidden;display:flex;flex-direction:column}
.tel-barre{height:26px;background:linear-gradient(135deg,var(--accent-pale),var(--accent-clair));opacity:.65}
.tel-contenu{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:9px}
.tel-h{font-size:8px;font-weight:600;color:var(--texte);letter-spacing:.3px}
.tel-search{height:24px;background:var(--fond-carte);border-radius:7px;border:1px solid var(--bordure)}
.tel-pills{display:flex;gap:5px}
.tel-pill{height:16px;border-radius:8px;background:var(--fond-carte);border:1px solid var(--bordure)}
.tel-pill.on{background:linear-gradient(135deg,var(--accent-pale),var(--accent-clair));border-color:transparent}
.tel-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:1}
.tel-card{background:var(--fond-carte);border-radius:10px;border:1px solid var(--bordure);overflow:hidden;display:flex;flex-direction:column}
.tel-card-img{flex:1}
.tel-card-info{padding:5px 7px}
.tc-n{height:4px;background:var(--texte-3);border-radius:2px;margin-bottom:4px}
.tc-p{height:4px;width:50%;background:color-mix(in srgb,var(--accent) 40%,transparent);border-radius:2px}

/* STATS */
.stats{padding:60px clamp(20px,5vw,80px);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px;border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.stat{padding:36px 24px;text-align:center;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;position:relative;cursor:default}
.stat::before{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 0%,transparent);transition:background .3s;border-radius:4px}
.stat:hover::before{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.stat.vis{opacity:1;transform:translateY(0)}
.stat-n{font-family:'Playfair Display',serif;font-size:46px;font-weight:900;color:var(--texte);line-height:1;position:relative}
.stat-n span{color:var(--accent-clair)}
.stat-l{font-size:13px;color:var(--texte-2);margin-top:8px;font-weight:300;position:relative}

/* SECTION */
.section{padding:100px clamp(20px,5vw,80px)}
.s-et{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-clair);font-weight:600;margin-bottom:16px;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.s-ti{font-family:'Playfair Display',serif;font-size:clamp(30px,4.5vw,56px);font-weight:800;color:var(--texte);line-height:1.1;letter-spacing:-1px;max-width:580px;opacity:0;transform:translateY(14px);transition:opacity .7s ease .1s,transform .7s ease .1s}
.s-so{font-size:16px;color:var(--texte-2);font-weight:300;line-height:1.7;max-width:480px;margin-top:14px;opacity:0;transform:translateY(14px);transition:opacity .7s ease .2s,transform .7s ease .2s}
.va{opacity:1!important;transform:translateY(0)!important}

/* FONC */
.fonc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:56px}
.fonc-c{padding:30px;background:var(--fond-carte);border-radius:20px;border:1px solid var(--bordure);position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s;opacity:0;transform:translateY(28px)}
.fonc-c.vis{opacity:1;transform:translateY(0)}
.fonc-c::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-clair),transparent);opacity:0;transition:opacity .3s}
.fonc-c:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent-clair) 30%,transparent);box-shadow:0 20px 50px var(--ombre)}
.fonc-c:hover::before{opacity:1}
.fonc-num{font-family:'Playfair Display',serif;font-size:12px;color:var(--texte-3);margin-bottom:18px;letter-spacing:1px}
.fonc-tit{font-size:17px;font-weight:600;color:var(--texte);margin-bottom:10px;line-height:1.3}
.fonc-txt{font-size:14px;color:var(--texte-2);line-height:1.7;font-weight:300}
.fonc-trait{width:30px;height:2px;background:linear-gradient(90deg,var(--accent-pale),var(--accent-clair));border-radius:2px;margin-top:18px}

/* DOWNLOAD */
.dl-wrap{margin:0 clamp(20px,5vw,80px);border-radius:28px;background:linear-gradient(135deg,var(--accent-pale) 0%,#1E4D35 50%,var(--accent-clair) 100%);padding:80px clamp(24px,5vw,80px);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:40px}
.dl-wrap::before{content:'';position:absolute;width:500px;height:500px;top:-200px;right:-150px;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);border-radius:50%}
.dl-txt{position:relative;z-index:1;max-width:520px}
.dl-tit{font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,46px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:12px}
.dl-so{font-size:16px;color:rgba(255,255,255,.75);font-weight:300;line-height:1.6}
.dl-acts{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.apk-btn{display:flex;align-items:center;gap:14px;padding:16px 24px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:14px;color:#fff;text-decoration:none;transition:background .2s,transform .2s,border-color .2s;cursor:pointer;min-width:210px}
.apk-btn:hover{background:rgba(255,255,255,.2);transform:translateX(4px);border-color:rgba(255,255,255,.35)}
.apk-ico{width:38px;height:38px;background:rgba(255,255,255,.12);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.apk-ico svg{width:20px;height:20px;fill:white}
.apk-txt{display:flex;flex-direction:column}
.apk-p{font-size:10px;opacity:.7;letter-spacing:.5px}
.apk-g{font-size:14px;font-weight:600}
.dl-soon{font-size:12px;color:rgba(255,255,255,.45);text-align:center;letter-spacing:.4px}

/* FONDATEURS */
.fondateurs{padding:100px clamp(20px,5vw,80px)}
.fond-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:56px}
.fond-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.fond-c{background:var(--fond-carte);border-radius:22px;border:1px solid var(--bordure);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;opacity:0;transform:translateY(36px);cursor:default}
.fond-c.vis{opacity:1;transform:translateY(0)}
.fond-c:hover{transform:translateY(-6px);box-shadow:0 24px 60px var(--ombre);border-color:color-mix(in srgb,var(--accent-clair) 25%,transparent)}
.fond-photo-z{height:220px;position:relative;overflow:hidden}
.fond-photo{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s;filter:grayscale(15%)}
.fond-c:hover .fond-photo{transform:scale(1.04);filter:grayscale(0%)}
.fond-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--fond-carte) 100%)}
.fond-body{padding:0 24px 28px}
.fond-nom{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--texte);margin-bottom:4px;margin-top:2px}
.fond-role{font-size:11px;color:var(--accent-clair);font-weight:500;letter-spacing:.8px;text-transform:uppercase;margin-bottom:14px}
.fond-mot{font-size:13px;color:var(--texte-2);line-height:1.7;font-weight:300;font-style:italic;margin-bottom:18px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.fond-contacts{display:flex;flex-direction:column;gap:6px}
.fond-lien{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--texte-2);text-decoration:none;font-weight:300;padding:6px 10px;border-radius:8px;transition:background .2s,color .2s}
.fond-lien:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-clair)}
.fond-puce{width:5px;height:5px;background:var(--texte-3);border-radius:50%;flex-shrink:0;transition:background .2s}
.fond-lien:hover .fond-puce{background:var(--accent-clair)}

/* VISION */
.vision{padding:80px clamp(20px,5vw,80px);background:var(--fond-2);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.vis-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto}
.etapes{display:flex;flex-direction:column;margin-top:36px}
.etape{display:flex;gap:18px;padding-bottom:32px;position:relative;opacity:0;transform:translateX(-18px);transition:opacity .6s ease,transform .6s ease}
.etape.vis{opacity:1;transform:translateX(0)}
.etape::before{content:'';position:absolute;left:12px;top:26px;bottom:0;width:1px;background:var(--bordure-2)}
.etape:last-child::before{display:none}
.etape-num{width:26px;height:26px;background:linear-gradient(135deg,var(--accent-pale),var(--accent-clair));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0}
.etape-tit{font-size:15px;font-weight:600;color:var(--texte);margin-bottom:5px}
.etape-txt{font-size:13px;color:var(--texte-2);line-height:1.65;font-weight:300}
.citation{font-family:'Playfair Display',serif;font-size:clamp(22px,3.5vw,36px);font-weight:700;color:var(--texte);line-height:1.35;letter-spacing:-.5px;opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.citation.vis{opacity:1;transform:translateY(0)}
.cit-aut{margin-top:18px;font-size:13px;color:var(--texte-2);font-weight:300}
.cit-aut strong{color:var(--accent-clair)}

/* FOOTER */
footer{padding:60px clamp(20px,5vw,80px) 40px;border-top:1px solid var(--bordure);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.f-logo{font-family:'Playfair Display',serif;font-size:26px;font-weight:900;color:var(--texte)}
.f-logo span{color:var(--accent-clair)}
.f-slo{font-size:13px;color:var(--texte-2);margin-top:5px;font-weight:300}
.f-r{text-align:right}
.f-pays{font-size:12px;color:var(--texte-2);margin-bottom:6px;font-weight:300}
.f-copy{font-size:12px;color:var(--texte-3)}

/* SCROLL BAR */
.scroll-b{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent-pale),var(--accent-clair));z-index:200;width:0%;transition:width .08s linear}

@media(max-width:900px){.hero-mockup{display:none}.vis-in{grid-template-columns:1fr;gap:36px}.nav-liens{display:none}.fond-grid{grid-template-columns:1fr}}
@media(max-width:600px){.dl-wrap{flex-direction:column}.hero-btns{flex-direction:column}.btn-prim,.btn-sec,.apk-btn{width:100%;justify-content:center}}

.apercu {
  padding: 100px 0;
  overflow: hidden;
}

.apercu-header {
  padding: 0 clamp(20px, 5vw, 80px);
  margin-bottom: 56px;
}

.ap-et {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-clair);
  font-weight: 600;
  margin-bottom: 14px;
}

.ap-ti {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 800;
  color: var(--texte);
  line-height: 1.1;
  letter-spacing: -1px;
}

/* Piste */
.piste-wrap {
  position: relative;
  overflow: hidden;
}

.piste {
  display: flex;
  width: max-content;
}

.piste-inner {
  display: flex;
  gap: 20px;
  padding: 10px 10px 24px;
}

/* Fondu bords */
.piste-fondu {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
  z-index: 2;
}

.piste-fondu-g {
  left: 0;
  background: linear-gradient(90deg, var(--fond), transparent);
}

.piste-fondu-d {
  right: 0;
  background: linear-gradient(-90deg, var(--fond), transparent);
}

/* Animations */
.piste-gauche {
  animation: defilerG 36s linear infinite;
}

.piste-droite {
  animation: defilerD 40s linear infinite;
}

.piste-gauche:hover,
.piste-droite:hover {
  animation-play-state: paused;
}

@keyframes defilerG {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes defilerD {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Slide item */
.slide-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.slide-img {
  width: 150px;
  height: 306px;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid var(--bordure-2);
  box-shadow: 0 20px 50px var(--ombre), 0 0 0 1px var(--bordure);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  background: var(--fond-carte);
}

.slide-item:hover .slide-img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 32px 70px var(--ombre), 0 0 0 1px rgba(74,148,101,0.25);
}

.slide-nom {
  font-size: 12px;
  color: var(--texte-2);
  font-weight: 300;
  letter-spacing: 0.2px;
}