/* Levier · page publique v2 (direction C « Levier humain », validée par Tim le 22.10.2026). */
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url("app/assets/fonts/hanken-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url("app/assets/fonts/hanken-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url("app/assets/fonts/hanken-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url("app/assets/fonts/hanken-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:800;font-display:swap;src:url("app/assets/fonts/hanken-grotesk-800.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-weight:600;font-display:swap;src:url("app/assets/fonts/spectral-600-normal.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url("app/assets/fonts/spectral-400-italic.woff2") format("woff2")}

:root{
  --bg:#FBFAF7; --sand:#F4F0E8; --sand-2:#EDE6D8; --white:#FFFFFF; --line:#E8E3D9;
  --ink:#1F2A44; --ink-2:#4A5470; --muted:#5F6679;
  --acc:#B8613F; --acc-d:#9C4D2E; --acc-dd:#8A4429; --acc-soft:#F8E9E0; --ok:#2C6E4C; --ok-soft:#E5F2EA;
  --display:"Spectral",Georgia,serif; --ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --r-sm:14px; --ease:cubic-bezier(.16,1,.3,1);
  --sh:0 24px 60px -24px rgba(31,42,68,.25),0 0 0 1px rgba(31,42,68,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--acc-soft)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100% - 48px);margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(32px,4vw,52px)}
h3{font-size:22px;line-height:1.25}
.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:60ch}
.muted{color:var(--muted)}.small{font-size:14px}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 24px;border-radius:14px;background:var(--acc-d);color:#fff;font:600 17px/1 var(--ui);text-decoration:none;border:0;cursor:pointer;box-shadow:0 1px 2px rgba(156,77,46,.3),inset 0 1px 0 rgba(255,255,255,.16);transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{background:var(--acc-dd);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(156,77,46,.6)}
.btn:active{transform:none}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(31,42,68,.05)}.btn-ghost:hover{background:var(--white);box-shadow:0 0 0 1px var(--ink-2),0 8px 20px -10px rgba(31,42,68,.25)}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--sand)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px;border-radius:11px}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:99px;background:var(--sand);color:var(--ink-2);font:600 13px/1 var(--ui);white-space:nowrap}
.pill-ok{background:var(--ok-soft);color:var(--ok)}.pill-acc{background:var(--acc-soft);color:var(--acc-d)}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh)}

/* Navigation */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{height:76px;display:flex;align-items:center;gap:40px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 23px/1 var(--ui);letter-spacing:-.045em}
.logo svg{width:30px;height:30px}.logo b{color:var(--acc)}
.nav-links{display:flex;gap:30px;font-weight:500;color:var(--ink-2)}
.nav-links a{text-decoration:none}.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.langs{font:600 14px/1 var(--ui);letter-spacing:.04em;color:var(--muted);display:flex;gap:10px}
.langs a{text-decoration:none}.langs a:hover{color:var(--ink)}.langs b{color:var(--ink)}

/* Héros : la douleur, reconnue */
.hero{padding:72px 0 0;overflow-x:clip}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.05;max-width:23ch}
.hero .lead{margin:24px 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.checks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:28px;color:var(--ink-2);font-size:16px}
.checks li{display:flex;gap:10px;align-items:center}
.checks li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6E4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.hero-visual{position:relative;height:520px}
.hero-visual::before{content:"";position:absolute;inset:-30px -60px -30px 10px;background:var(--sand);border-radius:40px;z-index:0}
.hero-visual .card{position:absolute;z-index:1}
.c-match{left:30px;right:30px;top:40px;padding:26px;animation:float-in .9s var(--ease) .1s both}
.cm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px}
.q{font:italic 400 24px/1.4 var(--display)}
.cm-why{display:flex;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.cm-why svg{color:var(--ok)}
.c-letter{left:120px;right:-10px;top:270px;padding:22px;animation:float-in .9s var(--ease) .35s both}
.cl-head{display:flex;gap:10px;align-items:center;font-size:15px;margin-bottom:14px}.cl-head .pill{margin-left:auto}
.cl-lines{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}.cl-lines i{display:block;height:8px;border-radius:4px;background:#ECE7DE}.cl-lines i:nth-child(1){width:94%}.cl-lines i:nth-child(2){width:86%}.cl-lines i:nth-child(3){width:97%}.cl-lines i:nth-child(4){width:58%}
.c-chip{left:0;top:448px;padding:14px 18px;display:flex;gap:10px;align-items:center;font-size:15px;animation:float-in .9s var(--ease) .6s both}.c-chip svg{color:var(--acc)}
@keyframes float-in{from{opacity:0;transform:translateY(18px)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px;padding:28px 32px;background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.stats b{display:block;font:600 40px/1 var(--display);letter-spacing:-.02em;margin-bottom:8px}
.stats span{color:var(--ink-2);font-size:15px}
.stats .src{grid-column:1/-1;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}

/* Douleurs */
section{padding:120px 0 0}
.pains h2{max-width:20ch}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pain{background:var(--white);border-radius:var(--r);padding:28px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:14px}
.pain-say{font:italic 400 22px/1.35 var(--display);color:var(--ink)}
.pain p:last-child{color:var(--ink-2);font-size:16px}
.cause{margin-top:32px;font:600 clamp(20px,2vw,26px)/1.4 var(--display);max-width:44ch;color:var(--acc-d)}

/* Urgence */
.urgence .urg-in{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:center;background:var(--ink);color:#fff;border-radius:32px;padding:56px}
.urgence h2{color:#fff}.urgence .lead{color:#C9D0DE;margin-top:18px}
.calc{padding:28px;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.calc label{font-weight:600}
.calc input{height:52px;border-radius:12px;border:1px solid var(--line);padding:0 14px;font:500 17px var(--ui);color:var(--ink);background:var(--bg)}
.calc input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.calc-out{min-height:96px;background:var(--sand);border-radius:var(--r-sm);padding:16px 18px;font-size:16px}
.calc-out b{display:block;font:600 26px/1.2 var(--display);margin:2px 0 6px}
.calc-note{font-size:13px;color:var(--muted)}

/* Méthode */
.methode .lead{margin-top:16px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;counter-reset:s}
.step{position:relative;background:var(--white);border-radius:var(--r);padding:28px 24px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px}
.step::after{content:"";position:absolute;top:44px;right:-20px;width:20px;height:2px;background:var(--line)}
.step:last-child::after{display:none}
.when{align-self:flex-start;font:700 13px/1 var(--ui);color:var(--acc-d);background:var(--acc-soft);padding:7px 10px;border-radius:99px}
.step p{color:var(--ink-2);font-size:16px}

/* Essai */
.essai-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.essai-form{margin-top:32px;padding:24px;display:flex;flex-direction:column;gap:10px}
.essai-form label{font-weight:600}
.essai-row{display:flex;gap:10px}
.essai-row input{flex:1;min-width:0;height:56px;border-radius:12px;border:1px solid var(--line);padding:0 16px;font:400 18px var(--ui);color:var(--ink);background:var(--bg)}
.essai-row input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.results{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.res{background:var(--white);border-radius:var(--r-sm);padding:20px 22px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;animation:float-in .5s var(--ease) both}
.res-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600}
.res .q{font-size:18px;color:var(--ink)}
.res-empty{grid-column:1/-1;color:var(--muted)}

/* Offre */
.offre .lead{margin-top:16px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
.plan{background:var(--white);border-radius:var(--r);padding:30px 28px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:12px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:6px;color:var(--ink-2);font-size:16px}
.plan li{display:flex;gap:10px}.plan li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);margin-top:10px;flex:none}
.price{font:600 34px/1.1 var(--display);letter-spacing:-.02em}
.plan-main{box-shadow:0 0 0 2px var(--acc),var(--sh);position:relative}
.plan-main .pill{align-self:flex-start}
.plan-main .btn{margin-top:auto;align-self:flex-start}
.guarantee{display:flex;gap:18px;align-items:flex-start;margin-top:20px;padding:26px 28px;background:var(--ok-soft);box-shadow:none}
.guarantee svg{width:30px;height:30px;color:var(--ok)}
.guarantee p{color:var(--ink-2);margin-top:6px;max-width:80ch}

/* Éthique */
.eth-in{background:var(--sand);border-radius:32px;padding:48px 56px}
.eth-in p{margin-top:14px;color:var(--ink-2);font-size:18px;max-width:72ch}

/* Qui */
.qui-in{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center}
.qui img{width:260px;height:260px;border-radius:32px;object-fit:cover;box-shadow:var(--sh)}
.qui .lead{margin-top:16px}
.facts{list-style:none;display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}
.facts li{background:var(--white);border-radius:var(--r-sm);padding:16px 18px;box-shadow:0 0 0 1px var(--line);font-size:14px;color:var(--ink-2);min-width:200px;flex:1}
.facts b{display:block;font:600 24px/1.1 var(--display);color:var(--ink);margin-bottom:4px}

/* FAQ */
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.qa{background:var(--white);border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);padding:0 22px}
.qa summary{list-style:none;cursor:pointer;padding:20px 30px 20px 0;font-weight:600;font-size:18px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:16px;font:400 26px/1 var(--ui);color:var(--acc-d);transition:transform .25s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 0 20px;color:var(--ink-2)}

/* Final */
.final{padding-bottom:0}
.final-in{background:var(--acc-d);color:#fff;border-radius:32px;padding:64px 56px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.final h2{color:#fff}.final .lead{color:#FBE6DC}
.tel{color:#fff;font-weight:600;text-underline-offset:4px}

/* Pied */
.foot{padding:72px 0 48px}
.foot-in{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:40px;border-top:1px solid var(--line);padding-top:40px}
.foot a{text-underline-offset:3px}

/* Apparition au défilement (contenu visible sans script) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .pain-grid .reveal:nth-child(2),.js .steps .reveal:nth-child(2),.js .plans .reveal:nth-child(2){transition-delay:.08s}
.js .pain-grid .reveal:nth-child(3),.js .steps .reveal:nth-child(3),.js .plans .reveal:nth-child(3){transition-delay:.16s}
.js .steps .reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* Tablette et téléphone */
@media (max-width:980px){
  .hero-in,.urgence .urg-in,.essai-head,.faq-in,.qui-in{grid-template-columns:1fr}
  .hero-visual{height:470px}.hero-visual::before{inset:-20px -20px -20px 0}.c-letter{right:0}
  .pain-grid,.plans{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}.step::after{display:none}
  .results{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}.foot-in > div:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .nav-links,.langs{display:none}
  .nav-in{gap:12px}
  .hero{padding-top:36px}
  .hero-visual{height:430px}.hero-visual::before{inset:-16px -16px -16px -16px}
  .c-match{left:0;right:0}.c-letter{left:30px;right:0;top:250px}.c-chip{top:380px}
  .q{font-size:20px}
  .stats{grid-template-columns:1fr;margin-top:48px}
  section{padding-top:80px}
  .urgence .urg-in,.eth-in,.final-in{padding:32px 22px;border-radius:24px}
  .steps{grid-template-columns:1fr}
  .essai-row{flex-direction:column}
  .qui img{width:180px;height:180px}
  .foot-in{grid-template-columns:1fr}
}