/* ==========================================================================
   Erogene — Landing page styles
   Built on the Erogene Design System tokens (Violet primary, Arimo, soft radii)
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* Violet — primary */
  --violet-lightest:#f4f1fd;
  --violet-light:#ede9fc;
  --violet-light-active:#cabcf4;
  --violet-normal:#5527dd;
  --violet-normal-hover:#4d23c7;
  --violet-normal-active:#441fb1;
  --violet-dark:#401da6;
  --violet-darker:#1e0e4d;
  /* Orange — secondary */
  --orange-lightest:#fff0f0;
  --orange-light:#ffe8e8;
  --orange-normal:#ff6665;
  --orange-normal-hover:#e65c5b;
  --orange-normal-active:#cc5251;
  /* Green — success */
  --green-lightest:#e2f2eb;
  --green-normal:#40a578;
  /* Grey — neutral */
  --grey-100:#edeeee;
  --grey-200:#dadbdd;
  --grey-300:#878c90;
  --grey-400:#7a7e82;
  --grey-500:#65696c;
  --grey-600:#515456;
  --grey-800:#2f3132;
  --ink:#1e1e1e;
  --ink-soft:#212121;
  --stroke-subtle:#e9ebf8;
  --white:#ffffff;

  --font-body:"Arimo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tracking-tight:-0.24px;

  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-pill:40px;
  --radius-full:9999px;
  --shadow-card:8px 8px 32px 0 rgba(0,0,0,0.1);
  --shadow-violet:8px 8px 32px 0 rgba(85,39,221,0.28);

  --maxw:1120px;
}

/* --- Reset --------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  letter-spacing:var(--tracking-tight);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;letter-spacing:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

/* --- Layout helpers ------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.eyebrow{
  font:700 12px/1 var(--font-body);
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--violet-normal);
}
.section-title{
  font:700 clamp(30px,5vw,44px)/1.05 var(--font-body);
  letter-spacing:-0.8px;
  margin-top:12px;
}
.section-lead{
  font:400 clamp(16px,2.2vw,19px)/1.6 var(--font-body);
  color:var(--grey-500);
  margin-top:14px;
  max-width:620px;
}
.center{text-align:center}
.center .section-lead{margin-left:auto;margin-right:auto}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 16px/1 var(--font-body);
  letter-spacing:var(--tracking-tight);
  border:none;border-radius:var(--radius-sm);
  padding:16px 24px;
  transition:background .16s ease-out,color .16s ease-out,transform .16s ease-out,box-shadow .16s ease-out;
}
.btn-primary{background:var(--violet-normal);color:var(--white);box-shadow:var(--shadow-violet)}
.btn-primary:hover{background:var(--violet-normal-hover)}
.btn-primary:active{background:var(--violet-normal-active);transform:translateY(1px)}
.btn-light{background:var(--white);color:var(--violet-normal)}
.btn-light:hover{background:var(--violet-lightest)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.5)}
.btn-ghost:hover{background:rgba(255,255,255,0.12)}
.btn-lg{padding:18px 30px;font-size:17px}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(30,30,30,0.06);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:9px}
.brand img{width:30px;height:30px;object-fit:contain}
.brand span{font:700 22px/1 var(--font-body);letter-spacing:var(--tracking-tight);color:var(--ink)}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font:400 15px/1 var(--font-body);color:var(--grey-500);transition:color .16s ease-out}
.nav a:hover{color:var(--ink)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-cta .signin{font:600 15px/1 var(--font-body);color:var(--violet-normal)}
.header-cta .signin:hover{color:var(--violet-normal-hover)}
.header-cta .btn{padding:11px 20px}
.header-cta .cta-short{display:none}
.nav-toggle{display:none}

/* ==========================================================================
   Hero  (full-bleed violet with soft radial highlight)
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--violet-normal);
  color:var(--white);
}
.hero::before{
  content:"";position:absolute;left:-10%;top:-40%;
  width:70%;height:140%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;right:-15%;bottom:-45%;
  width:60%;height:120%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(30,14,77,0.55), transparent 62%);
  pointer-events:none;
}
.hero .wrap{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
  padding-top:80px;padding-bottom:88px;
}
.hero h1{
  font:700 clamp(38px,6.2vw,64px)/1.02 var(--font-body);
  letter-spacing:-1.5px;
}
.hero .lead{
  font:400 clamp(17px,2.4vw,20px)/1.55 var(--font-body);
  opacity:.9;margin-top:20px;max-width:480px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{font:400 13px/1.5 var(--font-body);opacity:.72;margin-top:20px;max-width:420px}
.hero-note strong{font-weight:700}

/* Hero visual — animated phone demo (ported from the design canvas) */
.hero-visual{display:flex;justify-content:center;align-items:center}
.phone-demo{animation:eroFloat 6s ease-in-out infinite}
.phone{
  position:relative;width:308px;height:624px;flex:none;
  background:var(--white);
  color:var(--ink); /* device surface: text defaults to ink, not the hero's white */
  border-radius:44px;
  box-shadow:0 30px 70px rgba(85,39,221,0.22);
  border:1px solid var(--stroke-subtle,#e9ebf8);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.phone-statusbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 4px;font:600 13px/1 var(--font-body);color:var(--ink-soft)}
.phone-statusbar .glyphs{display:flex;gap:5px;align-items:center}
.phone-session{display:flex;align-items:center;justify-content:space-between;padding:8px 22px 0}
.level-pill{display:inline-flex;align-items:center;gap:6px;background:var(--violet-light);color:var(--violet-normal);font:700 11px/1 var(--font-body);padding:7px 11px;border-radius:var(--radius-full)}
.session-label{font:700 12px/1 var(--font-body);color:var(--grey-400,#7a7e82)}
.phone-progress{margin:7px 22px 0;height:5px;border-radius:5px;background:var(--grey-100);overflow:hidden}
.phone-progress i{display:block;height:100%;border-radius:5px;background:var(--violet-normal)}
.phone-progress i.anim{width:10%;animation:eroProg 12s linear infinite}

/* card stack */
.deck{position:relative;flex:1;margin:16px 22px}
.card{
  position:absolute;inset:0;border-radius:22px;background:#fff;
  border:1px solid var(--stroke-subtle,#e9ebf8);
  box-shadow:0 14px 30px rgba(0,0,0,0.08);
  overflow:hidden;display:flex;flex-direction:column;
}
.card-1{z-index:3;box-shadow:0 16px 34px rgba(85,39,221,0.14);animation:eroCard1 12s ease-in-out infinite}
.card-2{z-index:2;animation:eroCard2 12s ease-in-out infinite}
.card-3{z-index:1;animation:eroCard3 12s ease-in-out infinite}
.card-top{height:118px;display:flex;align-items:center;justify-content:center;position:relative}
.card-cat{position:absolute;top:14px;left:16px;display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-body)}
.card-cat .dot{width:8px;height:8px;border-radius:50%}
.card-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.card-ic-violet{background:var(--violet-normal);box-shadow:0 10px 22px rgba(85,39,221,0.35)}
.card-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center}
.card-body .prompt{margin:0;font:700 22px/1.25 var(--font-body);letter-spacing:-0.3px;text-wrap:balance;color:var(--ink)}
.card-3 .card-body .prompt,.card-2 .card-body .prompt{font-size:21px}
.role-tag{font:700 10px/1 var(--font-body);letter-spacing:1.2px;text-transform:uppercase;color:var(--grey-300);border:1px solid var(--grey-200);border-radius:var(--radius-full);padding:5px 11px;margin-bottom:14px}

/* decision stamps */
.stamp{position:absolute;font:700 15px/1 var(--font-body);padding:6px 12px;border-radius:10px;transform:rotate(-12deg);border:3px solid;opacity:0}
.stamp-yes{top:22px;right:16px;border-color:var(--violet-normal);color:var(--violet-normal)}
.stamp-curious{top:22px;left:16px;border-color:var(--orange-normal);color:var(--orange-normal-active);font-size:14px}
.stamp-no{top:22px;right:16px;border-color:var(--grey-400,#7a7e82);color:var(--grey-400,#7a7e82)}
.stamp1{animation:eroStamp1 12s ease-in-out infinite}
.stamp2{animation:eroStamp2 12s ease-in-out infinite}
.stamp3{animation:eroStamp3 12s ease-in-out infinite}

/* feedback panel */
.feedback{position:absolute;inset:-2px;z-index:10;border-radius:22px;background:#fff;display:flex;flex-direction:column;padding:22px 20px;box-sizing:border-box;opacity:0;transform:translateY(26px);animation:eroFeed 12s ease-in-out infinite}
.fb-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.fb-check{width:56px;height:56px;border-radius:50%;background:var(--green-lightest);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.fb-title{font:700 20px/1.1 var(--font-body);letter-spacing:-0.3px}
.fb-sub{font:400 13px/1.35 var(--font-body);color:var(--grey-500);margin-top:4px}
.fb-rows{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.fb-row{display:flex;align-items:center;gap:11px;background:var(--violet-lightest);border-radius:14px;padding:12px 14px}
.fb-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fb-label{flex:1;font:700 13.5px/1.2 var(--font-body);color:var(--ink)}
.fb-badge{font:700 10px/1 var(--font-body);padding:5px 9px;border-radius:var(--radius-full)}
.fb-match{color:var(--green-normal);background:var(--green-lightest)}
.fb-explore{color:var(--orange-normal-active);background:var(--orange-light)}
.fb-note{margin-top:auto;display:flex;align-items:flex-start;gap:9px;background:var(--grey-100);border-radius:14px;padding:12px 14px}
.fb-note svg{flex-shrink:0;margin-top:1px}
.fb-note span{font:400 12px/1.4 var(--font-body);color:var(--grey-600,#515456)}
.fb-note strong{color:var(--ink)}

/* action bar */
.phone-actions{
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:6px 22px 26px;flex:none;
}
.act{
  border:none;cursor:pointer;border-radius:var(--radius-full);
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(30,14,77,0.14);
  transition:transform .16s ease-out,box-shadow .16s ease-out;
}
.act:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(30,14,77,0.20)}
.act:active{transform:translateY(0) scale(.94)}
.act-no{width:66px;height:66px;color:var(--orange-normal)}          /* Non — Orange Secondary Normal */
.act-curious{width:56px;height:56px;color:var(--violet-normal);background:var(--violet-light)} /* Curieux·se — Violet Primary Normal */
.act-yes{width:72px;height:72px;color:var(--white);background:var(--green-normal);box-shadow:0 14px 30px rgba(64,165,120,0.40)} /* Oui — Green Success Normal */
.act-yes:hover{box-shadow:0 20px 40px rgba(64,165,120,0.48)}
.act svg{display:block}

/* animation timeline */
@keyframes eroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes eroProg{0%{width:10%}20%{width:37%}45%{width:68%}70%,100%{width:100%}}
@keyframes eroCard1{0%,20%{transform:translate(0,0) rotate(0) scale(1);opacity:1}25%{transform:translate(150%,-8%) rotate(16deg);opacity:0}25.01%,94%{transform:translate(150%,-8%);opacity:0}95%,100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes eroCard2{0%,20%{transform:translateY(14px) scale(.94);opacity:1}25%,40%{transform:translateY(0) scale(1);opacity:1}45%{transform:translateY(-155%) rotate(-3deg);opacity:0}45.01%,94%{transform:translateY(-155%);opacity:0}95%,100%{transform:translateY(14px) scale(.94);opacity:1}}
@keyframes eroCard3{0%,45%{transform:translateY(28px) scale(.88);opacity:1}50%,65%{transform:translateY(0) scale(1);opacity:1}70%{transform:translate(-155%,4%) rotate(-16deg);opacity:0}70.01%,94%{transform:translate(-160%,0);opacity:0}95%,100%{transform:translateY(28px) scale(.88);opacity:1}}
@keyframes eroStamp1{0%,18%{opacity:0;transform:scale(.7) rotate(-12deg)}22%,25%{opacity:1;transform:scale(1) rotate(-12deg)}26%,100%{opacity:0}}
@keyframes eroStamp2{0%,40%{opacity:0;transform:scale(.7) rotate(-12deg)}43%,46%{opacity:1;transform:scale(1) rotate(-12deg)}47%,100%{opacity:0}}
@keyframes eroStamp3{0%,64%{opacity:0;transform:scale(.7) rotate(-12deg)}67%,70%{opacity:1;transform:scale(1) rotate(-12deg)}71%,100%{opacity:0}}
@keyframes eroFeed{0%,66%{transform:translateY(26px);opacity:0}78%,100%{transform:translateY(0);opacity:1}}

/* Respect reduced-motion: freeze on the finished-session state */
@media (prefers-reduced-motion:reduce){
  .phone-demo,.phone-progress i.anim,.card,.stamp{animation:none!important}
  .phone-progress i.anim{width:100%}
  .card{opacity:0}
  .feedback{animation:none!important;opacity:1;transform:none}
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust{background:var(--violet-lightest);padding:26px 0}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 36px;align-items:center}
.trust .item{display:flex;align-items:center;gap:10px;font:600 14px/1.3 var(--font-body);color:var(--violet-dark)}
.trust .item svg{flex:none}

/* ==========================================================================
   Promise / core principle — editorial statement on light surface
   ========================================================================== */
.promise{padding:88px 0}
.promise .quote{max-width:820px;margin:0 auto;text-align:center;position:relative}
.promise .mark{
  font:700 96px/0.7 var(--font-body);
  color:var(--violet-light-active);
  display:block;height:52px;
  user-select:none;
}
.promise .eyebrow{margin-bottom:26px}
.promise h2{
  font:700 clamp(26px,4vw,40px)/1.28 var(--font-body);
  letter-spacing:-0.6px;color:var(--ink);
  margin-top:8px;
}
.promise h2 em{font-style:normal;color:var(--violet-normal)}
.promise p{
  font:400 17px/1.6 var(--font-body);color:var(--grey-500);
  max-width:560px;margin:22px auto 0;
}
.promise .rule{
  width:56px;height:4px;border-radius:99px;
  background:var(--violet-normal);
  margin:32px auto 0;
}

/* ==========================================================================
   How it works
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.step{
  background:var(--white);border:1px solid var(--grey-100);
  border-radius:var(--radius-lg);padding:32px 28px;
}
.step .num{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--violet-lightest);color:var(--violet-normal);
  font:700 18px/1 var(--font-body);
  display:flex;align-items:center;justify-content:center;
}
.step h3{font:700 20px/1.2 var(--font-body);letter-spacing:-0.3px;margin-top:20px}
.step p{font:400 15px/1.55 var(--font-body);color:var(--grey-500);margin-top:10px}

/* ==========================================================================
   Features
   ========================================================================== */
.features{background:var(--violet-lightest)}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
.feature{
  background:var(--white);border-radius:var(--radius-lg);padding:34px 32px;
  box-shadow:0 8px 32px rgba(85,39,221,0.06);
  display:flex;gap:20px;align-items:flex-start;
}
.feature .ic{
  flex:none;width:52px;height:52px;border-radius:var(--radius-md);
  background:var(--violet-lightest);color:var(--violet-normal);
  display:flex;align-items:center;justify-content:center;
}
.feature h3{font:700 19px/1.2 var(--font-body);letter-spacing:-0.3px}
.feature p{font:400 15px/1.55 var(--font-body);color:var(--grey-500);margin-top:8px}

/* ==========================================================================
   Radar / insight split
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{
  display:flex;align-items:center;justify-content:center;
  /* « at 20% 0% » impose radial-gradient : en linear-gradient la règle est
     invalide, donc ignorée, et le bloc restait sans fond. */
  background:radial-gradient(120% 120% at 20% 0%, var(--violet-light) 0%, var(--violet-lightest) 100%);
  border-radius:var(--radius-lg);padding:44px;aspect-ratio:1/0.9;
}
.split ul{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.split li{display:flex;gap:12px;font:400 16px/1.5 var(--font-body);color:var(--grey-800)}
.split li svg{flex:none;margin-top:2px;color:var(--violet-normal)}
.split li strong{font-weight:700;color:var(--ink)}

/* radar svg */
.radar{width:100%;max-width:340px}
.radar .grid{fill:none;stroke:var(--violet-light-active);stroke-width:1}
.radar .axis{stroke:var(--violet-light-active);stroke-width:1}
.radar .give{fill:rgba(85,39,221,0.20);stroke:var(--violet-normal);stroke-width:2}
.radar .receive{fill:rgba(255,102,101,0.16);stroke:var(--orange-normal);stroke-width:2;stroke-dasharray:4 3}
.radar .lbl{font:700 11px/1 var(--font-body);fill:var(--grey-500)}
.radar-legend{display:flex;gap:22px;justify-content:center;margin-top:18px}
.radar-legend span{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--font-body);color:var(--grey-500)}
.radar-legend i{width:14px;height:4px;border-radius:99px}
.radar-legend .g{background:var(--violet-normal)}
.radar-legend .r{background:var(--orange-normal)}

/* ==========================================================================
   Privacy pledge
   ========================================================================== */
.pledge{background:var(--violet-darker);color:var(--white)}
.pledge .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.pledge .eyebrow{color:var(--orange-normal)}
.pledge h2{font:700 clamp(28px,4vw,42px)/1.1 var(--font-body);letter-spacing:-0.8px;margin-top:12px}
.pledge-list{display:flex;flex-direction:column;gap:22px}
.pledge-item{display:flex;gap:16px}
.pledge-item .ic{
  flex:none;width:44px;height:44px;border-radius:var(--radius-md);
  background:rgba(255,255,255,0.08);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.pledge-item h3{font:700 17px/1.2 var(--font-body);letter-spacing:-0.2px}
.pledge-item p{font:400 15px/1.55 var(--font-body);opacity:.72;margin-top:6px}

.steps-more{text-align:center;margin-top:36px}
.steps-more a{
  font:700 16px/1 var(--font-body);letter-spacing:var(--tracking-tight);
  color:var(--violet-normal);
}
.steps-more a:hover{color:var(--violet-normal-hover)}

/* ==========================================================================
   Pages éditoriales  (générées depuis content/pages/*.md)
   ========================================================================== */
.page-head{
  background:var(--violet-normal);
  color:var(--white);
  padding:72px 0 64px;
}
.page-head .eyebrow{color:var(--white);opacity:.72}
.page-head h1{
  font:700 clamp(34px,5.4vw,54px)/1.05 var(--font-body);
  letter-spacing:-1.2px;
  max-width:15ch;
  margin-top:12px;
}
.page-lead{
  font:400 clamp(17px,2.1vw,20px)/1.5 var(--font-body);
  opacity:.88;max-width:56ch;margin-top:18px;
}

.page-body{padding:72px 0 88px}
.prose{max-width:68ch}
.prose > *:first-child{margin-top:0}
.prose h2{
  font:700 clamp(24px,3.2vw,32px)/1.15 var(--font-body);
  letter-spacing:-0.6px;color:var(--ink);
  margin-top:56px;
}
.prose h3{
  font:700 19px/1.25 var(--font-body);
  letter-spacing:-0.2px;color:var(--ink);
  margin-top:36px;
}
.prose p{font:400 17px/1.7 var(--font-body);color:var(--grey-600);margin-top:18px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--violet-normal);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--violet-normal-hover)}
.prose ul,.prose ol{margin-top:18px;padding-left:0;list-style:none}
.prose ol{counter-reset:prose-ol}
.prose li{
  position:relative;padding-left:30px;
  font:400 17px/1.7 var(--font-body);color:var(--grey-600);
  margin-top:12px;
}
.prose ul li::before{
  content:"";position:absolute;left:8px;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--violet-light-active);
}
.prose ol li{counter-increment:prose-ol}
.prose ol li::before{
  content:counter(prose-ol);position:absolute;left:0;top:2px;
  font:700 13px/1.55 var(--font-body);color:var(--violet-normal);
}
.prose blockquote{
  margin-top:28px;padding:4px 0 4px 22px;
  border-left:3px solid var(--violet-light-active);
}
.prose blockquote p{font-style:italic;color:var(--grey-500);margin-top:0}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--violet-lightest);color:var(--violet-dark);
  padding:2px 6px;border-radius:6px;
}
.prose hr{
  border:none;border-top:1px solid var(--stroke-subtle);
  margin:48px 0 0;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final{text-align:center}
.final .card{
  position:relative;overflow:hidden;
  background:var(--violet-normal);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-violet);
  color:var(--white);
  padding:72px 40px;
}
.final .card::before{
  content:"";position:absolute;left:50%;top:-60%;transform:translateX(-50%);
  width:80%;height:160%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,0.14), transparent 60%);
}
.final .card>*{position:relative;z-index:1}
.final h2{font:700 clamp(30px,5vw,48px)/1.05 var(--font-body);letter-spacing:-1px;max-width:660px;margin:0 auto}
.final p{font:400 18px/1.5 var(--font-body);opacity:.9;margin:18px auto 0;max-width:480px}
.final .hero-actions{justify-content:center}
.final small{display:block;font:400 13px/1.5 var(--font-body);opacity:.7;margin-top:20px}
/* Passerelle pour qui a déjà un espace : sur fond violet, donc en blanc. */
.final p.final-alt{font:400 14.5px/1.5 var(--font-body);opacity:.82;margin:14px auto 0}
.final-alt a{color:var(--white);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.final-alt a:hover{opacity:.85}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--white);border-top:1px solid var(--grey-100);padding:56px 0 40px}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-footer .brand span{font-size:20px}
.site-footer .tagline{font:400 14px/1.6 var(--font-body);color:var(--grey-500);margin-top:14px;max-width:260px}
.foot-col h4{font:700 12px/1 var(--font-body);letter-spacing:.8px;text-transform:uppercase;color:var(--grey-300);margin-bottom:16px}
.foot-col a{display:block;font:400 15px/1 var(--font-body);color:var(--grey-500);padding:7px 0;transition:color .16s ease-out}
.foot-col a:hover{color:var(--violet-normal)}
.foot-bottom{
  max-width:var(--maxw);margin:40px auto 0;padding:22px 24px 0;
  border-top:1px solid var(--grey-100);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font:400 13px/1.5 var(--font-body);color:var(--grey-300);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .section{padding:72px 0}
  .hero .wrap{grid-template-columns:1fr;gap:48px;text-align:center;padding-top:56px;padding-bottom:64px}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-note{margin-left:auto;margin-right:auto}
  .steps{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .pledge .wrap{grid-template-columns:1fr;gap:40px}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .page-head{padding:56px 0 48px}
  .page-body{padding:56px 0 72px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .header-cta .signin{display:none}
  .header-cta .cta-long{display:none}
  .header-cta .cta-short{display:inline}
  .header-cta .btn{padding:10px 16px;font-size:15px}
  .final .card{padding:56px 24px}
  .site-footer .wrap{grid-template-columns:1fr}
  .trust .wrap{gap:12px 22px}
  .page-head h1{max-width:none}
  .prose h2{margin-top:44px}
  .prose p,.prose li{font-size:16px}
}