/* ===========================================================
   WOOBYZ — Design system (Encre + Menthe)
   Titres : Space Grotesk · Texte : Satoshi
   =========================================================== */
:root{
  --encre:#0A0F0D;
  --encre-2:#0F1714;
  --carte:#121A17;
  --menthe:#00E6A2;
  --craie:#F4F6F3;
  --ardoise:#7E8A84;
  --ligne:rgba(244,246,243,.08);
  --ligne-2:rgba(244,246,243,.14);
  --maxw:1120px;
  --titre:'Space Grotesk',system-ui,sans-serif;
  --texte:'Satoshi','Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--encre);color:var(--craie);font-family:var(--texte);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--titre);font-weight:600;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.menthe{color:var(--menthe)}
.muted{color:var(--ardoise)}
img{max-width:100%;display:block}

/* Bouton CTA unique */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--menthe);color:var(--encre);font-family:var(--texte);font-weight:700;font-size:1rem;padding:15px 26px;border-radius:10px;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,230,162,.22)}
.cta svg{width:18px;height:18px}
.cta-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--craie);font-weight:500;padding:15px 4px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.cta-ghost:hover{color:var(--menthe);border-color:var(--menthe)}

/* Header / nav */
header{position:sticky;top:0;z-index:50;background:rgba(10,15,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.logo{display:flex;align-items:center;height:40px;flex:0 0 auto}
.logo svg{height:40px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.95rem;color:var(--craie);opacity:.82;transition:opacity .2s,color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--menthe)}
.nav .cta{padding:11px 20px;font-size:.92rem}
/* Burger (menu mobile) — cache par defaut */
.burger{display:none}
.navtog{display:none}

/* Hero principal */
.hero{position:relative;padding:96px 0 88px;overflow:hidden;background-image:url('hero-bg.svg');background-repeat:no-repeat;background-position:right -20px top;background-size:min(60%,740px) auto}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.hero::before{width:620px;height:620px;background:radial-gradient(circle,rgba(0,230,162,.20),transparent 65%);top:-220px;right:-160px}
.hero::after{width:520px;height:520px;background:radial-gradient(circle,rgba(0,230,162,.10),transparent 65%);bottom:-260px;left:-180px}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.4rem,6vw,4.3rem);max-width:15ch}
.hero p.sub{margin-top:24px;font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--ardoise);max-width:58ch}
.hero .actions{margin-top:40px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* Hero de page secondaire */
.page-hero{position:relative;padding:84px 0 56px;border-bottom:1px solid var(--ligne);overflow:hidden}
.page-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(0,230,162,.14),transparent 65%);top:-240px;right:-120px;z-index:0}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:18ch}
.page-hero p{margin-top:20px;color:var(--ardoise);font-size:1.15rem;max-width:60ch}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--menthe);border:1px solid rgba(0,230,162,.3);padding:7px 14px;border-radius:100px;margin-bottom:26px;font-weight:500}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--menthe);box-shadow:0 0 10px var(--menthe)}

/* Bandeau preuve */
.preuve{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:var(--encre-2)}
.preuve .grid{display:grid;grid-template-columns:repeat(3,1fr)}
.preuve .item{padding:28px 24px;display:flex;align-items:center;gap:14px;border-left:1px solid var(--ligne)}
.preuve .item:first-child{border-left:0}
.preuve .ico{flex:0 0 auto;color:var(--menthe)}
.preuve .item b{font-family:var(--titre);font-weight:600;display:block;font-size:1.02rem;color:var(--craie);line-height:1.25}
.preuve .item span{font-size:.86rem;color:var(--ardoise)}

/* Sections generiques */
section.block{padding:104px 0}
section.block.tight{padding:80px 0}
.alt{background:var(--encre-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.lead{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--menthe);font-weight:600;margin-bottom:18px}
.h2{font-size:clamp(1.9rem,4vw,3rem);max-width:22ch}
.sec-intro{max-width:62ch;color:var(--ardoise);font-size:1.1rem;margin-top:20px}

/* Colonnes de cartes */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.card{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:34px 30px;transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(0,230,162,.35);transform:translateY(-3px)}
.card .ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,230,162,.1);color:var(--menthe);margin-bottom:22px}
.card h3{font-size:1.25rem;margin-bottom:10px}
.card p{color:var(--ardoise);font-size:.98rem}
.card .num{font-family:var(--titre);color:var(--menthe);font-weight:600;font-size:.95rem;margin-bottom:14px;display:block}

/* Etapes detaillees (methode) */
.steps{margin-top:56px;display:grid;gap:20px}
.step-row{display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:30px 30px}
.step-row .n{font-family:var(--titre);font-weight:700;font-size:1.1rem;color:var(--encre);background:var(--menthe);width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.step-row h3{font-size:1.3rem;margin-bottom:8px}
.step-row p{color:var(--ardoise)}
.step-row .garanti{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--menthe);font-weight:600}
.step-row .garanti svg{width:16px;height:16px}

/* Deux colonnes texte/visuel */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:40px}
.split .visual{background:var(--carte) url('mesh.svg') center/cover no-repeat;border:1px solid var(--ligne);border-radius:18px;min-height:320px;display:flex;align-items:center;justify-content:center;color:var(--ardoise);font-family:var(--titre);text-align:center;padding:30px;position:relative;overflow:hidden}
.split .visual::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,162,.12),transparent 60%);filter:blur(50px);top:-80px;right:-60px}

/* Checklist */
.checklist{list-style:none;margin-top:28px;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:var(--craie)}
.checklist li svg{flex:0 0 auto;width:22px;height:22px;color:var(--menthe);margin-top:2px}
.checklist li b{font-family:var(--titre);font-weight:600}
.checklist li span{color:var(--ardoise)}

/* Tableau comparatif */
.compare{margin-top:48px;border:1px solid var(--ligne);border-radius:16px;overflow:hidden}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--ligne);font-size:.98rem;vertical-align:top}
.compare thead th{font-family:var(--titre);font-size:.95rem;background:var(--encre-2)}
.compare thead th.us{color:var(--menthe)}
.compare td:first-child{color:var(--ardoise);width:34%}
.compare tr:last-child td{border-bottom:0}
.compare .yes{color:var(--menthe);font-weight:600}

/* Tarifs */
.price-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.price{background:var(--carte);border:1px solid var(--ligne);border-radius:18px;padding:36px 32px}
.price.fea{border-color:rgba(0,230,162,.4)}
.price h3{font-size:1.4rem;margin-bottom:6px}
.price .desc{color:var(--ardoise);margin-bottom:22px}
.price .big{font-family:var(--titre);font-weight:700;font-size:2.4rem;color:var(--craie);line-height:1}
.price .big small{font-size:1rem;color:var(--ardoise);font-weight:500;font-family:var(--texte)}
.price ul{list-style:none;margin:22px 0 28px;display:grid;gap:12px}
.price li{display:flex;gap:10px;color:var(--craie);font-size:.96rem}
.price li svg{flex:0 0 auto;width:20px;height:20px;color:var(--menthe);margin-top:2px}

/* Secteurs */
.tags{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.tag{border:1px solid var(--ligne);background:var(--carte);border-radius:100px;padding:13px 24px;font-family:var(--titre);font-weight:500;font-size:1rem;color:var(--craie);transition:border-color .2s,color .2s}
.tag:hover{border-color:rgba(0,230,162,.4);color:var(--menthe)}

/* Placeholder */
.placeholder{border:1px dashed rgba(126,138,132,.45);border-radius:16px;padding:46px 34px;margin-top:40px;text-align:center;color:var(--ardoise)}
.placeholder .pill{display:inline-block;font-family:var(--titre);font-weight:600;color:var(--menthe);border:1px solid rgba(0,230,162,.3);border-radius:100px;padding:6px 16px;font-size:.8rem;letter-spacing:.08em;margin-bottom:16px}

/* Offres / postes */
.jobs{margin-top:48px;display:grid;gap:14px}
.job{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--carte);border:1px solid var(--ligne);border-radius:14px;padding:22px 26px;transition:border-color .2s,transform .2s}
.job:hover{border-color:rgba(0,230,162,.35);transform:translateX(3px)}
.job .t{font-family:var(--titre);font-weight:600;font-size:1.1rem}
.job .m{color:var(--ardoise);font-size:.9rem;margin-top:4px}
.job .arrow{color:var(--menthe)}

/* Formulaire */
.form{margin-top:40px;display:grid;gap:18px;max-width:560px}
.form .row{display:grid;gap:8px}
.form label{font-size:.9rem;color:var(--ardoise);font-family:var(--titre);font-weight:500}
.form input,.form textarea,.form select{background:var(--encre-2);border:1px solid var(--ligne-2);border-radius:10px;padding:14px 16px;color:var(--craie);font-family:var(--texte);font-size:1rem}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--menthe)}
.form textarea{min-height:120px;resize:vertical}

/* CTA final */
.final{position:relative;padding:120px 0;text-align:center;overflow:hidden;background-image:url('mesh.svg');background-size:cover;background-position:center}
.final::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,162,.16),transparent 62%);top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(70px);z-index:0}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(2rem,5vw,3.4rem);max-width:20ch;margin:0 auto}
.final .cta{margin-top:40px}

/* Prose (pages legales) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:1.5rem;margin:40px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--craie);margin-bottom:14px}
.prose ul{margin:0 0 14px 20px;color:var(--craie)}
.prose li{margin-bottom:8px}
.prose .small{color:var(--ardoise);font-size:.9rem}

/* Footer */
footer{border-top:1px solid var(--ligne);padding:64px 0 40px;background:var(--encre)}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-logo svg{height:38px;width:auto}
.foot-tagline{color:var(--ardoise);font-size:.9rem;margin-top:16px;max-width:36ch}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h4{font-family:var(--titre);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ardoise);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:var(--craie);opacity:.8;font-size:.95rem;margin-bottom:11px;transition:color .2s,opacity .2s}
.foot-col a:hover{color:var(--menthe);opacity:1}
.foot-bottom{margin-top:48px;padding-top:26px;border-top:1px solid var(--ligne);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--ardoise);font-size:.84rem}

/* ============ Responsive ============ */
@media(max-width:1080px){
  .nav{justify-content:flex-start;gap:12px;height:66px}
  .logo{height:26px}
  .logo svg{height:26px}
  /* Bouton burger */
  .burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-left:auto;flex:0 0 auto;border:1px solid var(--ligne-2);border-radius:10px;background:transparent;cursor:pointer}
  .burger span{display:block;width:20px;height:2px;background:var(--craie);border-radius:2px;transition:transform .25s,opacity .25s}
  .navtog:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtog:checked ~ .burger span:nth-child(2){opacity:0}
  .navtog:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Panneau de menu deroulant */
  .nav-links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:rgba(10,15,13,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne);max-height:0;overflow:hidden;transition:max-height .32s ease}
  .nav-links a{padding:16px 24px;font-size:1.05rem;opacity:.92;border-top:1px solid var(--ligne);white-space:normal}
  .nav-links a:first-child{border-top:0}
  .navtog:checked ~ .nav-links{max-height:78vh}
  .nav .cta{padding:10px 16px;font-size:.9rem}
  /* Empilements */
  .preuve .grid{grid-template-columns:1fr}
  .preuve .item{border-left:0;border-top:1px solid var(--ligne)}
  .preuve .item:first-child{border-top:0}
  .cols3,.cols2,.price-cards{grid-template-columns:1fr;margin-top:40px}
  .split{grid-template-columns:1fr;gap:28px}
  .split .visual{min-height:240px;order:-1}
  section.block{padding:72px 0}
  section.block.tight{padding:56px 0}
  .hero{padding:56px 0 52px}
  .final{padding:88px 0}
  .foot-top{flex-direction:column}
  .foot-links{gap:32px}
  .step-row{grid-template-columns:1fr}
  .step-row .n{margin-bottom:-6px}
  .compare th,.compare td{padding:13px 14px;font-size:.88rem}
  .compare td:first-child{width:34%}
}
@media(max-width:520px){
  .nav .cta .lbl-long{display:none}
  .wrap{padding:0 18px}
  .hero h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .h2{font-size:clamp(1.6rem,6.5vw,2.1rem)}
  .card{padding:26px 22px}
  .price{padding:28px 22px}
  .compare th,.compare td{padding:12px 11px;font-size:.82rem}
  .compare td:first-child{width:38%}
  .foot-bottom{flex-direction:column;gap:8px}
  .cta{padding:14px 22px;font-size:.95rem}
}

/* hero-bg mobile */
@media(max-width:1080px){.hero{background-size:130% auto;background-position:right -10px top}}

/* Stats marche */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.stat{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:28px 26px}
.stat b{font-family:var(--titre);font-size:2.2rem;color:var(--menthe);display:block;line-height:1}
.stat span{display:block;margin-top:10px;color:var(--ardoise);font-size:.95rem}
.src{font-size:.82rem;margin-top:16px}
/* Preuves de missions */
.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.mission{background:var(--carte);border:1px dashed var(--ligne-2);border-radius:16px;padding:26px}
.mission .tagm{font-family:var(--titre);color:var(--menthe);font-size:.85rem;font-weight:600}
.mission h3{font-size:1.12rem;margin:10px 0 18px;color:var(--craie)}
.mstats{display:flex;gap:22px;border-top:1px solid var(--ligne);padding-top:16px}
.mstats b{font-family:var(--titre);font-size:1.45rem;color:var(--craie);display:block;line-height:1}
.mstats small{color:var(--ardoise);font-size:.78rem}
/* FAQ */
.faq{margin-top:40px;display:grid;gap:12px;max-width:820px}
.faq details{background:var(--carte);border:1px solid var(--ligne);border-radius:12px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--titre);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--craie)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--menthe);font-size:1.5rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq details>div{padding:0 0 22px;color:var(--ardoise)}
/* Grille de salaires */
.salary{margin-top:8px;border:1px solid var(--ligne);border-radius:16px;overflow:hidden}
.salary table{width:100%;border-collapse:collapse}
.salary th,.salary td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--ligne);font-size:.98rem}
.salary thead th{font-family:var(--titre);background:var(--encre-2);font-size:.9rem}
.salary tbody td:first-child{font-family:var(--titre);color:var(--craie)}
.salary .pk{color:var(--menthe);font-weight:600}
.salary tr:last-child td{border-bottom:0}
@media(max-width:1080px){.stats,.missions{grid-template-columns:1fr}.salary th,.salary td{padding:13px 12px;font-size:.85rem}}

/* Temoignages */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.quote{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:28px 26px;position:relative}
.quote .mark{font-family:var(--titre);color:var(--menthe);font-size:3rem;line-height:.5;opacity:.55;height:22px}
.quote p{color:var(--craie);margin:6px 0 20px;font-size:1.02rem}
.quote .who{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--ligne);padding-top:16px}
.quote .who b{font-family:var(--titre);font-weight:600;font-size:.95rem;color:var(--craie)}
.quote .who span{color:var(--ardoise);font-size:.85rem}
.badge-ex{position:absolute;top:14px;right:14px;font-family:var(--titre);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--menthe);border:1px solid rgba(0,230,162,.35);border-radius:100px;padding:4px 10px}
@media(max-width:1080px){.quotes{grid-template-columns:1fr}}

/* Champ fichier (CV) */
.form input[type=file]{padding:11px 14px;cursor:pointer;color:var(--ardoise)}
.form input[type=file]::file-selector-button{background:rgba(0,230,162,.12);color:var(--menthe);border:1px solid rgba(0,230,162,.35);border-radius:8px;padding:8px 14px;margin-right:14px;font-family:var(--texte);font-weight:600;cursor:pointer;transition:background .2s}
.form input[type=file]::file-selector-button:hover{background:rgba(0,230,162,.2)}

/* fix espace bouton nav */
.nav .cta{gap:0}

/* cta nowrap */
.cta{white-space:nowrap}