/* ============================================================
   Recycl'ace — DA partagée (extraite de home.html)
   Source unique pour procede / produits / partenariats.
   ============================================================ */
:root{
  /* Palette Recycl'ace — alignée sur le logo (vert/turquoise + bleu marine, fond bleu nuit). Premium retenu. */
  --ink:#0a1820; --ink2:#0e2230; --white:#eef3f1; --mut:#90a0a2; --mut2:#5f7173;
  --green:#3ab07e; --green-soft:#57c997; --teal:#26b0a3; --marine:#0d3b5c;
  --line:rgba(238,243,241,.12);
  /* alias hérités → palette logo : les anciens noms 'amber' pointent désormais vers le vert */
  --amber:var(--green); --amber-soft:var(--green-soft); --ember:var(--teal);
  /* régime LUMIÈRE (sections « preuve » : matière, chiffres, produits, futur) */
  --paper:#eaf2ed; --paper2:#dde9e3; --ink-soft:#3d574f; --green-deep:#1c7a55;
  --line-d:rgba(10,24,32,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Sora",-apple-system,sans-serif; background:var(--ink); color:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
.mono{font-family:"Space Mono",monospace}
section{position:relative}
.wrap{max-width:1280px; margin:0 auto; padding:0 60px}

/* ---------- NAV ---------- */
nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:24px 60px; transition:background .3s, padding .3s, border-color .3s; border-bottom:1px solid transparent}
nav.solid{background:rgba(10,24,32,.72); backdrop-filter:blur(14px); padding:18px 60px; border-color:var(--line)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--white); font-weight:600; font-size:20px; letter-spacing:-.01em}
.brand .lmark{height:30px; width:auto; display:block; filter:drop-shadow(0 2px 9px rgba(0,0,0,.4))}
.brand .ap{color:var(--amber-soft)}
.links{display:flex; align-items:center; gap:34px}
.links a{color:var(--white); text-decoration:none; font-size:14px; font-weight:300; opacity:.78; transition:opacity .2s}
.links a:hover{opacity:1}
.links a.cur{opacity:1; color:var(--amber-soft)}
.shop{border:1px solid var(--line); border-radius:100px; padding:9px 20px; font-size:13px; opacity:1!important}

/* ---------- GRAIN ---------- */
.grain{position:fixed; inset:0; z-index:60; opacity:.05; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:11px; background:var(--amber); color:#06141b; border-radius:100px; padding:16px 30px; font-size:15px; font-weight:600; text-decoration:none; box-shadow:0 10px 30px rgba(58,176,126,.26); transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--white); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{border-color:rgba(58,176,126,.5)}
.link2{color:var(--white); opacity:.74; text-decoration:none; font-size:15px; font-weight:300}
.link2:hover{opacity:1}

/* ---------- PAGE HERO 2 colonnes (titre gauche / animation droite) ---------- */
.phero{position:relative; overflow:hidden; padding:152px 0 96px; background:linear-gradient(180deg,var(--ink),var(--ink2))}
.phero .pbg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.14;
  filter:brightness(.6) contrast(1.1) saturate(.7)}
.phero .pwash{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 130% at 82% 28%, rgba(58,176,126,.12), transparent 58%), linear-gradient(180deg, rgba(10,24,32,.35), var(--ink2))}
.phero .pgrid{position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center}
.phero .inner{max-width:600px}
.phero h1{font-weight:200; font-size:60px; line-height:1.02; letter-spacing:-.025em; margin-top:20px}
.phero h1 em{font-style:normal; font-weight:300; color:var(--amber-soft)}
.phero .lead{margin-top:24px; font-size:18px; line-height:1.62; font-weight:300; color:var(--mut); max-width:480px}
.phero .cta{margin-top:38px; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
/* scène animée à droite (visuel / médaillon par page) */
.phero .pstage{position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden; border:1px solid var(--line);
  background:#0f2230; box-shadow:0 34px 80px rgba(0,0,0,.5)}
.phero .pstage .simg{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.82) contrast(1.06) saturate(.92)}
.phero .pstage .sglow{position:absolute; inset:0; background:radial-gradient(58% 58% at 50% 44%, rgba(58,176,126,.3), transparent 66%); mix-blend-mode:screen; animation:spulse 5.5s ease-in-out infinite}
.phero .pstage .sring{position:absolute; inset:0; pointer-events:none}
@keyframes spulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- TYPO SECTION ---------- */
.eyebrow{display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.22em; color:var(--amber-soft); text-transform:uppercase}
.eyebrow::before{content:""; width:32px; height:1px; background:var(--amber-soft)}
.kicker{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber-soft); margin-bottom:20px}
.h2{font-weight:200; font-size:48px; line-height:1.06; letter-spacing:-.02em; max-width:760px}
.h2 b{font-weight:600}
.csub{margin-top:18px; color:var(--mut); font-weight:300; font-size:17px; max-width:600px; line-height:1.6}

/* ---------- REVEAL ---------- */
.rv{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s} .rv.d4{transition-delay:.32s}

/* ---------- STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:70px}
.stat{border-top:1px solid var(--line); padding-top:24px}
.stat .n{font-weight:200; font-size:62px; letter-spacing:-.02em; color:var(--white)}
.stat .n span{color:var(--amber-soft)}
.stat p{margin-top:10px; color:var(--mut); font-weight:300; font-size:15px}

/* ---------- STEP CARDS (réutilisable) ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:64px}
.step{position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0f2230; aspect-ratio:4/5}
.step .ph{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.62) contrast(1.06)}
.step .ph.g{background-size:contain; background-repeat:no-repeat; background-position:center 46%; filter:brightness(.95) contrast(1.05)}
.step .ov{position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,34,48,.95) 8%, rgba(14,34,48,.2) 55%, transparent 100%)}
.step .tx{position:absolute; left:24px; right:24px; bottom:24px}
.step .st{font-family:"Space Mono",monospace; font-size:12px; color:var(--amber-soft); letter-spacing:.08em}
.step h3{font-weight:400; font-size:23px; margin-top:8px}
.step p{margin-top:8px; font-size:14px; color:var(--mut); font-weight:300; line-height:1.5}

/* ---------- PRODUCT CARDS (réutilisable) ---------- */
.prodgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px}
.card{border:1px solid var(--line); border-radius:18px; padding:30px; background:#0f2230; min-height:480px; display:flex; flex-direction:column; transition:transform .25s, border-color .25s}
.card:hover{transform:translateY(-5px); border-color:rgba(58,176,126,.4)}
.card .pimg{height:230px; display:flex; align-items:center; justify-content:center; margin-bottom:8px}
.card .pimg img{height:100%; filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.card .pimg.soon{color:var(--mut2); font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.1em; border:1px dashed var(--line); border-radius:12px; width:100%}
.card .pimg.ph{width:100%; background-size:cover; background-position:center; border-radius:12px; filter:brightness(.84) contrast(1.04)}
.card h3{font-weight:500; font-size:22px; margin-top:auto}
.card .spec{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.card .spec li{list-style:none; display:flex; gap:10px; font-size:13.5px; color:var(--mut); font-weight:300; align-items:baseline}
.card .spec li::before{content:"—"; color:var(--amber-soft)}
.tag{align-self:flex-start; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--amber-soft); border:1px solid var(--line); border-radius:100px; padding:5px 12px; margin-bottom:18px}

/* ---------- COLOR PICKER (réutilisable) ---------- */
.picker{display:grid; grid-template-columns:1.35fr .65fr; gap:46px; align-items:center; margin-top:54px}
.pview{aspect-ratio:16/11; border-radius:18px; background-size:cover; background-position:center; border:1px solid var(--line); transition:opacity .3s ease}
.pctrl .pname{font-weight:300; font-size:32px; letter-spacing:-.01em}
.dots{display:flex; gap:16px; margin-top:26px}
.dots .dot{width:46px; height:46px; border-radius:50%; background:var(--c); border:2px solid transparent; cursor:pointer; transition:transform .2s, border-color .2s; box-shadow:0 6px 16px rgba(0,0,0,.45); outline:none}
.dots .dot:hover{transform:scale(1.09)}
.dots .dot.active{border-color:var(--white)}

/* ---------- PREUVE ---------- */
.logos{display:flex; flex-wrap:wrap; gap:18px 46px; justify-content:center; margin-top:54px; align-items:center}
.logos span{font-weight:500; font-size:19px; color:var(--mut); opacity:.8; letter-spacing:.01em}
.impact{display:flex; gap:60px; justify-content:center; margin-top:70px; flex-wrap:wrap}
.impact .n{font-weight:200; font-size:46px; color:var(--white)} .impact .n span{color:var(--amber-soft)}
.impact p{color:var(--mut); font-size:14px; margin-top:6px; font-weight:300}

/* ---------- CTA PARTNER ---------- */
.partner{padding:160px 0; text-align:center; position:relative; overflow:hidden; background:var(--ink2)}
.partner .pg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 28%; filter:brightness(.3) contrast(1.1)}
.partner .pw{position:absolute; inset:0; z-index:1; background:radial-gradient(80% 120% at 50% 50%, rgba(58,176,126,.16), transparent 60%), linear-gradient(0deg, var(--ink2), rgba(14,34,48,.6))}
.partner .inner{position:relative; z-index:2}
.partner h2{font-weight:200; font-size:54px; line-height:1.04; letter-spacing:-.02em; max-width:780px; margin:0 auto}
.partner h2 em{font-style:normal; color:var(--amber-soft)}
.partner p{color:var(--mut); font-weight:300; font-size:18px; margin:24px auto 40px; max-width:520px}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); border-top:1px solid var(--line); padding:60px 0 40px}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap}
.foot .fl a{display:block; color:var(--mut); text-decoration:none; font-size:14px; font-weight:300; margin-bottom:10px}
.foot .fl a:hover{color:var(--white)}
.copyr{margin-top:46px; color:var(--mut2); font-size:12px; font-weight:300}

/* ---------- RÉGIME LUMIÈRE (.light : sections « preuve ») ---------- */
.light{background:var(--paper); color:var(--ink)}
.light .kicker{color:var(--green-deep)}
.light .eyebrow{color:var(--green-deep)} .light .eyebrow::before{background:var(--green-deep)}
.light .h2,.light h1,.light h2,.light h3,.light h4{color:var(--ink)}
.light .h2 b,.light h2 b{color:var(--ink)}
.light .lead,.light .lead2,.light .csub,.light p,.light .desc{color:var(--ink-soft)}
.light .stat{border-top-color:var(--line-d)} .light .stat .n{color:var(--ink)} .light .stat .n span{color:var(--green-deep)}
.light .impact .n{color:var(--ink)} .light .impact .n span{color:var(--green-deep)} .light .impact p{color:var(--ink-soft)}
.light .card,.light .step,.light .eq,.light .defi,.light .value,.light .founder,.light .media{background:#fff; border-color:var(--line-d)}
.light .card .spec li,.light .speclist li{color:var(--ink-soft)} .light .card .spec li::before,.light .speclist li::before{color:var(--green-deep)}
.light .tag{color:var(--green-deep); border-color:var(--line-d)}
.light .num,.light .st,.light .di,.light .on,.light .fnode .dotn{color:var(--green-deep)}
.light .logos span{color:var(--ink-soft)}
.light .mono-circle{color:var(--green-deep); background:radial-gradient(circle at 35% 30%, rgba(28,122,85,.16), rgba(255,255,255,.4)); border-color:var(--line-d)}
.light .founder blockquote{color:var(--ink)} .light .founder blockquote::before{color:var(--green-deep)}
.light .btn.ghost{color:var(--ink); border-color:var(--line-d)}
.light .link2{color:var(--ink-soft)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .wrap{padding:0 26px} nav{padding:20px 26px} nav.solid{padding:16px 26px}
  .links{display:none}
  .phero{padding:120px 0 70px} .phero .pgrid{grid-template-columns:1fr; gap:40px} .phero .pstage{order:-1; max-width:340px}
  .phero h1{font-size:40px} .phero .lead{max-width:100%}
  .stats,.steps,.prodgrid{grid-template-columns:1fr} .h2{font-size:32px} .partner h2{font-size:34px}
  .picker{grid-template-columns:1fr}
  .impact{gap:34px}
}