
/* ---- Fonts (Sora, served locally) ---- */
@font-face{font-family:'Sora';src:url('fonts/sora-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Sora';src:url('fonts/sora-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sora';src:url('fonts/sora-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sora';src:url('fonts/sora-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Sora';src:url('fonts/sora-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sora';src:url('fonts/sora-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --navy:#2B2D42; --green:#00E67B; --green-d:#06B863; --purple:#7014F3;
  --sky:#97DFFC; --lime:#F0F3BD; --yellow:#F2DF14;
  --ink:#2B2D42; --muted:#5b5e72; --line:#e7e9ef;
  --bg:#ffffff; --soft:#F6F7FA; --radius:18px; --radius-sm:12px;
  --maxw:1160px; --shadow:0 18px 50px -24px rgba(43,45,66,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:'Sora',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.3rem,6vw,4rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:700}
h3{font-size:1.18rem;font-weight:700}
p{margin:0 0 1em}
strong{font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.measure{max-width:680px;margin-left:auto;margin-right:auto}
.measure-wide{max-width:840px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.muted{color:var(--muted)}
.skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;left:0;top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{position:fixed;width:auto;height:auto;clip:auto;clip-path:none;left:12px;top:12px;padding:10px 14px;background:var(--navy);color:#fff;border-radius:8px;z-index:200}
.ic{width:1.25em;height:1.25em;flex:0 0 auto}

/* ---- eyebrow ---- */
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-d);margin:0 0 .8em}
.eyebrow--purple{color:var(--purple)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.98rem;
  padding:.8em 1.35em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn .ic{width:1.05em;height:1.05em}
.btn--lg{padding:.95em 1.7em;font-size:1.04rem}
@media(max-width:430px){
  .btn--lg{padding:.9em 1.15em;font-size:.95rem}
  .btn{max-width:100%;white-space:normal;text-align:center}
}
.btn--green{background:var(--green);color:var(--navy);border-color:var(--green)}
.btn--green:hover{background:#00cf6f;border-color:#00cf6f;transform:translateY(-2px)}
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:#1f2133;transform:translateY(-2px)}
.btn--purple{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn--purple:hover{background:#5d10cc;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__row{display:flex;align-items:center;gap:46px;min-height:70px}
.header__row .brand{margin-right:auto}
.header__row .primary-nav{margin-left:auto}
.brand{display:inline-flex;align-items:center;gap:.55em;font-weight:800;font-size:1.4rem;letter-spacing:-.03em}
.brand__icon{width:38px;height:38px;border-radius:10px}
.brand--light .brand__word{color:var(--navy)}
.brand--dark .brand__word{color:#fff}
.brand__dot{color:var(--green)}
.primary-nav{display:flex;align-items:center;gap:20px}
.primary-nav>ul{display:flex;gap:15px;list-style:none;margin:0;padding:0;align-items:center}
.primary-nav li{flex:0 0 auto}
.primary-nav a{font-size:.9rem;font-weight:600;color:var(--navy);opacity:.82;white-space:nowrap}
.primary-nav a:hover{opacity:1;color:var(--purple)}
.header__cta{font-size:.88rem;padding:.6em 1.05em;white-space:nowrap;flex:0 0 auto}
@media(min-width:861px) and (max-width:1150px){
  .primary-nav{gap:14px}.primary-nav>ul{gap:13px}
  .primary-nav a{font-size:.84rem}.header__cta{font-size:.82rem;padding:.55em .9em}
  .brand{font-size:1.24rem}.brand__icon{width:33px;height:33px}
}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:.2s}

/* ---- hero ---- */
.hero{position:relative;padding:60px 0 44px;overflow:hidden}
.hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 18%,rgba(112,20,243,.10),transparent 60%),
             radial-gradient(50% 60% at 8% 92%,rgba(0,230,123,.12),transparent 62%)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.hero h1{margin-bottom:.3em}
.hl{color:var(--green-d);position:relative}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.18em;background:var(--green);opacity:.45;border-radius:4px;z-index:-1}
.lead{font-size:1.22rem;color:#3c3f54;max-width:30em}
.hero__actions{display:flex;gap:12px;flex-wrap:nowrap;align-items:center;margin:1.5em 0 1.1em}
.hero__ticks{display:flex;gap:12px 20px;flex-wrap:wrap;list-style:none;padding:0;margin:0;color:var(--navy);font-weight:600;font-size:.93rem}
.hero__ticks li{display:flex;align-items:center;gap:.4em;white-space:nowrap;flex:0 0 auto}
.hero__ticks .ic{color:var(--green-d);flex:0 0 auto}
@media(max-width:400px){.hero__ticks{font-size:.86rem;gap:10px 14px}}
.hero__media{position:relative;isolation:isolate}
.hero__media img{border-radius:26px;box-shadow:var(--shadow);position:relative;z-index:2;width:100%;object-fit:cover;aspect-ratio:4/5}
.hero__badge{position:absolute;left:-14px;bottom:26px;z-index:3;display:flex;flex-direction:column;line-height:1.05;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 16px 40px -16px rgba(43,45,66,.45);border-radius:16px;padding:14px 18px}
.hero__badge strong{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.hero__badge span{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:2px}
.hero__pattern{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('img/patterns/pattern_dynamisme_green.svg');background-size:200px;background-repeat:repeat}

/* ---- stat band ---- */
.statband{background:linear-gradient(110deg,var(--navy) 0%,#23253a 55%,#2a1c44 100%);color:#fff}
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:46px 22px;text-align:center}
.stat{padding:0 10px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.1)}
.stat__num{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;color:var(--green);letter-spacing:-.02em;line-height:1}
.stat__label{color:#c7c9d6;font-size:.92rem;margin-top:.55em}

/* ---- sections ---- */
.sec{padding:72px 0}
.sec--soft{background:var(--soft)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.split--reverse .split__img{order:-1}
.split__img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover;aspect-ratio:4/5}
.big-claim{font-size:1.15rem;background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);padding:16px 20px;border-radius:10px}
.sec--soft .big-claim{background:#fff}

/* steps */
.steps{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:22px}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--vert{max-width:760px;margin-inline:auto}
.step{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.steps--3 .step{flex-direction:column}
.step__n{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--green);color:var(--navy);
  font-weight:800;font-size:1.3rem;display:grid;place-items:center}
.step h3{margin-bottom:.3em}
.step p{margin:0;color:var(--muted)}

/* features */
.feats{display:grid;gap:22px;margin-top:36px}
.feats--3{grid-template-columns:repeat(3,1fr)}
.feats--2{grid-template-columns:repeat(2,1fr)}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.sec--soft .feat{background:#fff}
.feat__ic{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:14px;
  background:rgba(0,230,123,.14);color:var(--green-d);margin-bottom:14px}
.feat__ic .ic{width:26px;height:26px}
.feat h3{margin-bottom:.35em}
.feat p{margin:0;color:var(--muted)}

/* callout */
.callout{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px;max-width:820px;margin-inline:auto;text-align:center;box-shadow:var(--shadow)}
.callout--accent{border-top:5px solid var(--purple)}
.callout--green{background:var(--navy);color:#fff;border:0}
.callout--green .eyebrow{color:var(--green)}
.callout--green p{color:#d3d5e0}

/* pattern strip */
.patternstrip{height:104px;background:var(--green) url('img/patterns/pattern_dynamisme.svg') center/200px repeat}

/* acronym */
.acro{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;margin:34px auto 0}
.acro__item{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.acro__item>span{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--purple);color:#fff;
  font-weight:800;font-size:1.6rem;display:grid;place-items:center}
.acro__item h3{margin:0}
.acro__item p{margin:0;color:var(--muted);font-size:.95rem}

/* faqs */
.faqs{display:grid;gap:12px;margin-top:8px}
.faqcat{margin-bottom:34px}
.faqcat h2{font-size:1.3rem;margin-bottom:14px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq summary{cursor:pointer;font-weight:600;padding:16px 20px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--purple);font-weight:700;transition:.2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 20px 18px;color:var(--muted)}

/* bands */
.band{padding:60px 0}
.band--green{background:var(--green)}
.band--navy{background:var(--navy)}
.band--gradient{background:linear-gradient(115deg,var(--navy) 0%,#2c1a52 60%,var(--purple) 140%);position:relative;overflow:hidden}
.band--gradient::after{content:"";position:absolute;inset:0;
  background-image:url('img/patterns/pattern_vision.svg');background-size:200px;background-repeat:repeat;pointer-events:none}
.band__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;z-index:1}
.band__actions{display:flex;gap:12px;flex-wrap:wrap}
.band--green h2{color:var(--navy)}
.band--green p{color:#0c4a2e;margin:.3em 0 0;font-weight:500}
.band--navy h2,.band--gradient h2{color:#fff;max-width:16em}
.band--navy p,.band--gradient p{color:#cfd2e4;margin:.3em 0 0}

/* page hero */
.pagehero{position:relative;background:var(--soft);padding:64px 0 56px;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehero h1{max-width:14em}
.pagehero .lead{font-size:1.18rem;color:#3c3f54;max-width:40em}
.pagehero__pat{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('img/patterns/pattern_methodicite.svg');background-size:200px;background-repeat:repeat}
.pagehero>.wrap{position:relative;z-index:1}

/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.18s}
a.post:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--purple)}
.post__ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(112,20,243,.1);color:var(--purple);margin-bottom:14px}
.post h2{font-size:1.12rem;font-weight:700;line-height:1.25}
.post p{color:var(--muted);margin:0 0 16px}
.post__go{margin-top:auto;color:var(--purple);font-weight:700;display:inline-flex;align-items:center;gap:.4em;font-size:.95rem}
.post--soon{opacity:.72}
.post__soon{position:absolute;top:18px;right:18px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--purple);background:rgba(112,20,243,.1);padding:3px 9px;border-radius:999px}

/* breadcrumb + article prose */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:.86rem;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--purple);font-weight:600}
.crumb span[aria-hidden]{opacity:.6}
.pagehero--art h1{max-width:18em;font-size:clamp(1.9rem,4.4vw,2.9rem)}
.prose--art{font-size:1.06rem}
.prose--art h2{font-size:1.4rem;margin:1.5em 0 .5em}
.prose--art h2:first-child{margin-top:0}
.prose--art p{margin:0 0 1.1em;color:#33364a}
.prose--art a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* contact */
.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start;margin-bottom:40px}
.contact__cards{display:grid;gap:18px}
.ccard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.18s}
.ccard:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--green)}
.ccard__ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(0,230,123,.14);color:var(--green-d);margin-bottom:12px}
.ccard h2{font-size:1.2rem}
.ccard p{color:var(--muted)}
.ccard__go{color:var(--purple);font-weight:700;display:inline-flex;align-items:center;gap:.4em}
.contact__coords{list-style:none;padding:24px;margin:0;background:var(--soft);border-radius:var(--radius)}
.contact__coords li{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;row-gap:6px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--navy);font-weight:500}
.contact__coords li:last-child{border:0}
.contact__coords .ic{color:var(--green-d);flex:0 0 auto}
.contact__coords a{color:var(--purple);font-weight:600;white-space:nowrap}
.contact{grid-template-columns:1.25fr .9fr}
.cwa{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,#0a3d1f,#0c6b38);color:#fff;border-radius:var(--radius);padding:22px 26px;transition:.18s}
.cwa:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cwa__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.16);flex:0 0 auto}
.cwa__ic .wa-ic{width:30px;height:30px;color:#fff}
.cwa__t{display:flex;flex-direction:column;line-height:1.3}
.cwa__t strong{font-size:1.1rem;font-weight:700}
.cwa__t span{color:#cdeed8;font-size:.94rem}
.cwa__cta{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;font-weight:700;white-space:nowrap;background:#25D366;color:#0a3d1f;padding:10px 16px;border-radius:999px}
.contact__side{display:grid;gap:18px;align-content:start}
.contact__quick{display:grid;gap:12px}
.qlink{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.18s}
.qlink:hover{border-color:var(--purple);box-shadow:var(--shadow);transform:translateY(-2px)}
.qlink__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(112,20,243,.1);color:var(--purple);flex:0 0 auto}
.qlink__t{display:flex;flex-direction:column;line-height:1.25}
.qlink__t strong{font-weight:700}
.qlink__t span{color:var(--muted);font-size:.88rem}
.qlink>.ic{margin-left:auto;color:var(--purple);flex:0 0 auto}
.contact__app{background:var(--soft);border-radius:var(--radius);padding:18px 20px}
.contact__app-h{font-weight:700;margin:0 0 10px}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.form--big{max-width:720px;margin-inline:auto}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:16px;color:var(--navy)}
.form input,.form select,.form textarea{width:100%;margin-top:7px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-weight:400;color:var(--ink);background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--purple)}
.form__note{font-size:.84rem;color:var(--muted);margin:.8em 0 0;display:flex;gap:.5em;align-items:flex-start}
.form__note .ic{color:var(--green-d);flex:0 0 auto;margin-top:.1em}
.prose p{max-width:none}

/* footer */
.site-footer{background:var(--navy);color:#c7c9d6;padding:56px 0 26px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
.footer__tagline{color:var(--green);font-weight:700;margin:.8em 0 .3em}
.footer__blurb{font-size:.92rem;max-width:24em}
.footer__col h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8da0;font-weight:700;margin-bottom:14px}
.footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer__col a{font-size:.94rem;color:#c7c9d6}
.footer__col a:hover{color:#fff}
.footer__cta h2{font-size:1.15rem;color:#fff;text-transform:none;letter-spacing:-.01em}
.footer__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid #3a3d52;font-size:.84rem;color:#8a8da0}

/* ---- WhatsApp ---- */
.wa-ic{width:1.15em;height:1.15em;flex:0 0 auto}
.btn--wa{background:#25D366;color:#0a3d1f;border-color:#25D366}
.btn--wa:hover{background:#1fbe5a;border-color:#1fbe5a;transform:translateY(-2px)}
.btn--wa .wa-ic{color:#0a3d1f}
.btn--wa-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45)}
.btn--wa-ghost:hover{background:#25D366;border-color:#25D366;color:#0a3d1f}
.btn--wa-ghost .wa-ic{color:currentColor}
.btn--wa-light{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--wa-light:hover{border-color:#25D366;transform:translateY(-2px)}
.btn--wa-light .wa-ic{color:#25D366}
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex;align-items:center;gap:.5em;
  background:#25D366;color:#0a3d1f;font-weight:700;font-size:.95rem;padding:13px 18px;border-radius:999px;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:.18s}
.wa-fab .wa-ic{width:1.45em;height:1.45em}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(37,211,102,.7)}

/* ---- socials ---- */
.footer__socials{display:flex;gap:10px;margin-top:18px}
.footer__socials a,.contact__socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.08);color:#fff;transition:.18s}
.footer__socials a:hover{background:var(--green);color:var(--navy);transform:translateY(-2px)}
.footer__socials a svg,.contact__socials a svg,.footer__socials a .wa-ic,.contact__socials a .wa-ic{width:20px;height:20px}
.footer__wa{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;margin:14px 0 0;color:#25D366;font-weight:700}
.footer__wa .wa-ic{width:1.2em;height:1.2em;flex:0 0 auto}
.footer__wa a{color:#fff;white-space:nowrap}
.contact__socials{display:flex;gap:10px;padding-top:8px}
.contact__socials a{background:var(--soft);color:var(--navy)}
.contact__socials a:hover{background:var(--purple);color:#fff;transform:translateY(-2px)}

/* ---- contact extras ---- */
.ccard--wa{background:linear-gradient(120deg,#0a3d1f,#075a2e);color:#fff;border-color:transparent}
.ccard--wa h2,.ccard--wa p{color:#fff}
.ccard__ic--wa{background:rgba(255,255,255,.15);color:#fff}
.ccard__ic--wa .wa-ic{width:26px;height:26px}
.ccard__go--wa{color:#9affc4}
.contact__coords .tag{margin-left:auto;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#0a3d1f;background:rgba(37,211,102,.22);padding:2px 8px;border-radius:999px}

/* ---- before / après ---- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;max-width:940px;margin:34px auto 0}
.ba__col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.ba__col--yes{border-color:rgba(0,230,123,.55);box-shadow:var(--shadow)}
.ba__tag{font-weight:700;font-size:.92rem;color:var(--muted);margin:0 0 16px}
.ba__tag--yes{color:var(--green-d)}
.ba__col ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ba__col li{display:flex;gap:.7em;align-items:flex-start;font-size:1rem;line-height:1.45}
.ba__col li .ic{flex:0 0 auto;width:1.3em;height:1.3em;margin-top:.08em}
.ba__col--no li .ic{color:#c2384a}
.ba__col--yes li .ic{color:var(--green-d)}
.ba__arrow{display:grid;place-items:center;color:var(--purple)}
.ba__arrow .ic{width:32px;height:32px}

/* ---- impact band ---- */
.band--impact{background:linear-gradient(120deg,var(--navy),#2a1c44);color:#fff;padding:64px 0}
.band--impact h2{color:#fff;max-width:18em;margin-inline:auto}
.band--impact__eyebrow{color:var(--green)}
.impact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:38px 0 0}
.istat{text-align:center;padding:0 12px}
.istat__n{font-size:clamp(2.4rem,5vw,3.3rem);font-weight:800;color:var(--green);line-height:1;letter-spacing:-.02em}
.istat__l{color:#cfd2e4;font-size:.96rem;margin:.6em auto 0;max-width:17em}
.impact__src{color:#9a9db5;font-size:.85rem;margin:30px 0 0}

/* ---- partenaires ---- */
.partners{padding:34px 0 48px;text-align:center}
.partners__label{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.partners__row{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:14px 30px;max-width:980px}
.partners__item{display:flex;align-items:center;justify-content:center;height:60px;padding:0 4px}
.partners__logo{max-height:46px;width:auto;max-width:156px;object-fit:contain;
  filter:grayscale(1) contrast(1.15);opacity:.78;transition:filter .2s,opacity .2s}
.partners__item:hover .partners__logo{filter:none;opacity:1}
.partners__name{font-size:.95rem;font-weight:700;color:#8d90a4;white-space:nowrap;transition:color .2s}
.partners__item--word:hover .partners__name{color:var(--navy)}
@media(max-width:640px){.partners__row{gap:10px 20px}.partners__item{height:48px}
  .partners__logo{max-height:34px;max-width:112px}.partners__name{font-size:.85rem}}

/* ---- simulateur ---- */
.sim{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 38px 30px;max-width:880px;margin-inline:auto}
.sim__head h2{margin:.1em 0 .3em}
.sim__head p{color:var(--muted);margin:0}
.sim__grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin:26px 0 8px}
.sim__label{display:block;font-weight:600;margin-bottom:4px}
.sim__value{display:block;font-size:1.85rem;font-weight:800;color:var(--purple);letter-spacing:-.02em;line-height:1.1}
.sim input[type=range]{width:100%;margin:16px 0 4px;accent-color:var(--purple);height:6px;cursor:pointer}
.sim__scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}
.sim__results{background:var(--soft);border-radius:var(--radius-sm);padding:6px 18px}
.sim__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.sim__row:last-child{border-bottom:0}
.sim__rl{color:var(--muted);font-size:.95rem}
.sim__rv{font-weight:700;white-space:nowrap}
.sim__rv--green{color:var(--green-d)}
.sim__row--accent .sim__rv{color:var(--purple);font-size:1.12rem}
.sim__row--final .sim__rl{font-weight:600;color:var(--ink)}
.sim__row--final .sim__rv{color:var(--navy)}
.sim__note{font-size:.83rem;color:var(--muted);margin:18px 0 18px}

/* ---- testimonials ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.tcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:18px}
.sec--soft .tcard{background:#fff}
.tcard__q{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.tcard__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard__who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tcard__id{display:flex;flex-direction:column;line-height:1.25}
.tcard__id strong{font-weight:700}
.tcard__id span{color:var(--muted);font-size:.88rem}

/* ---- véhicule (photos réelles de la flotte) ---- */
.vhero{margin:26px 0 0;position:relative}
.vhero img{width:100%;height:auto;border-radius:22px;display:block;box-shadow:0 30px 60px -30px rgba(43,45,66,.5)}
.vhero figcaption{margin-top:10px;text-align:center;font-size:.82rem;color:var(--muted)}
.vspecs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 8px}
.vspec{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.vspec__ic{color:var(--green-d);flex:0 0 auto;display:flex;margin-top:2px}
.vspec div{display:flex;flex-direction:column;gap:2px}
.vspec strong{font-size:.98rem;color:var(--navy)}
.vspec span{font-size:.84rem;color:var(--muted);line-height:1.4}
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
.vgrid__item{margin:0;position:relative;border-radius:18px;overflow:hidden}
.vgrid__item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.vgrid__item figcaption{position:absolute;left:12px;bottom:10px;background:rgba(14,16,24,.72);color:#fff;
  font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:999px;backdrop-filter:blur(3px)}
@media(max-width:860px){
  .vspecs{grid-template-columns:1fr;gap:10px}
  .vgrid{grid-template-columns:1fr}
}

/* ---- bandeau Abidjan (investisseurs) ---- */
.abjband{position:relative;isolation:isolate;overflow:hidden;margin:0}
.abjband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.abjband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(43,45,66,.90) 0%,rgba(43,45,66,.62) 52%,rgba(112,20,243,.34) 100%)}
.abjband__inner{padding:54px 0;color:#fff}
.abjband__eyebrow{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.abjband__claim{margin:0;max-width:36ch;font-size:1.42rem;line-height:1.38;font-weight:600}
@media(max-width:640px){.abjband__inner{padding:38px 0}.abjband__claim{font-size:1.14rem}}

/* ---- formulaire intention investisseur ---- */
.iform{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 36px;
  box-shadow:0 24px 54px -34px rgba(43,45,66,.4)}
.iform__intro h2{margin:6px 0 12px}
.iform__reassure{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.iform__reassure li{display:flex;gap:.55em;align-items:center;font-size:.9rem;color:var(--muted)}
.iform__reassure .ic{color:var(--green-d);flex:0 0 auto}
.iform__form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld--full{grid-column:1/-1}
.fld label,.fld legend{font-size:.82rem;font-weight:600;color:var(--navy)}
.fld .opt{font-weight:400;color:var(--muted)}
.fld input,.fld textarea{font:inherit;font-size:.94rem;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:#fbfbfd;color:var(--navy);width:100%;transition:border-color .16s,box-shadow .16s}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(112,20,243,.14);background:#fff}
.fld textarea{resize:vertical;min-height:78px}
.fld__hint{font-size:.76rem;color:var(--muted)}
fieldset.fld{border:0;padding:0;margin:0}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg__opt{position:relative;flex:1 1 160px}
.seg__opt input{position:absolute;opacity:0;pointer-events:none}
.seg__opt span{display:block;text-align:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  font-size:.88rem;font-weight:600;color:var(--muted);background:#fbfbfd;cursor:pointer;transition:.16s}
.seg__opt input:checked+span{border-color:var(--purple);color:var(--purple);background:rgba(112,20,243,.07)}
.seg__opt input:focus-visible+span{box-shadow:0 0 0 3px rgba(112,20,243,.18)}
@media(max-width:900px){
  .iform{grid-template-columns:1fr;gap:26px;padding:26px 22px}
  .iform__form{grid-template-columns:1fr}
}

/* ---- app section ---- */
.appsec__head{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.appsec__icon{width:64px;height:64px;border-radius:16px;box-shadow:0 10px 26px -12px rgba(43,45,66,.5);flex:0 0 auto}
.appsec__head h2{margin:2px 0 0}
.appsec__intro{margin:0 0 30px}
.appstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:start}
.appshot{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.appshot img{width:100%;max-width:190px;border-radius:22px;border:5px solid #0e1018;background:#0e1018;
  box-shadow:0 22px 46px -22px rgba(43,45,66,.55);display:block}
.appshot figcaption{margin-top:12px;display:flex;flex-direction:column;gap:3px}
.appshot figcaption strong{font-size:.94rem;color:var(--navy)}
.appshot figcaption span{font-size:.8rem;color:var(--muted);line-height:1.35}
.appsec__cta{margin-top:30px;text-align:center}
@media(max-width:1000px){
  .appstrip{grid-template-columns:repeat(3,1fr);gap:18px 14px}
  .appshot:nth-child(n+4){display:none}
}
@media(max-width:640px){
  .appstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .appshot{flex:0 0 62%;scroll-snap-align:center}
  .appshot:nth-child(n+4){display:flex}
  .appsec__head{gap:12px}.appsec__icon{width:52px;height:52px}
}

/* ---- play store button ---- */
.playbtn{display:inline-flex;align-items:center;gap:.7em;background:var(--navy);color:#fff;border-radius:14px;
  padding:10px 18px;border:1px solid var(--navy);transition:.18s}
.playbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.playbtn__ic .play-ic{width:26px;height:26px;display:block}
.playbtn__t{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.playbtn__t small{font-size:.7rem;opacity:.85;font-weight:500}
.playbtn__t strong{font-size:1.05rem;font-weight:700}
.playbtn--footer{margin-top:14px}

/* ---- responsive ---- */
@media(max-width:1024px){
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;inset:68px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:12px 22px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-135%);transition:.25s;visibility:hidden}
  .primary-nav.open{transform:none;visibility:visible}
  .primary-nav>ul{flex-direction:column;gap:0;width:100%}
  .primary-nav>ul li{border-bottom:1px solid var(--line)}
  .primary-nav>ul a{display:block;padding:14px 2px;font-size:1.02rem}
  .header__cta{margin-top:16px;justify-content:center}
}
@media(max-width:920px){
  .ba{grid-template-columns:1fr;max-width:520px}
  .tgrid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .ba__arrow{transform:rotate(90deg);padding:4px 0}
  .appsec__grid{grid-template-columns:1fr;gap:24px}
  .appsec__phones{height:430px;margin-top:8px}
  .impact__grid{gap:18px}
  .hero__grid,.split{grid-template-columns:1fr;gap:34px}
  .split--reverse .split__img{order:0}
  .hero__media{max-width:430px;margin:0 auto}
  .statband__grid{grid-template-columns:repeat(2,1fr);gap:8px 0}
  .stat:nth-child(3)::before{display:none}
  .steps--3,.feats--3,.posts{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
}
@media(max-width:760px){
  .steps--3,.feats--3,.feats--2,.posts,.acro,.tgrid,.impact__grid{grid-template-columns:1fr}
  .appsec__phones{height:360px}
  .phone{width:158px;top:10px}
  .phone--front{transform:translateX(-70%) rotate(-5deg)}
  .phone--back{transform:translateX(-14%) rotate(6deg) scale(.93)}
  .band__inner{flex-direction:column;align-items:flex-start}
  .band__actions{width:100%}
  .band__actions .btn{flex:1;justify-content:center}
  .form__row{grid-template-columns:1fr}
  .sim{padding:26px 20px 24px}
  .sim__grid{grid-template-columns:1fr;gap:22px}
  .partners__row{gap:14px 26px}
  .partners__name{font-size:1.04rem}
  .footer__grid{grid-template-columns:1fr}
  .statband__grid{grid-template-columns:1fr 1fr}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;flex:none;justify-content:center}
  .cwa{flex-direction:column;align-items:flex-start;gap:14px}
  .cwa__cta{margin-left:0}
  .wa-fab span{display:none}
  .wa-fab{padding:14px;right:14px;bottom:14px}
  .wa-fab .wa-ic{width:1.7em;height:1.7em}
}

/* ============================ retours du designer, 10/08/26 ============================ */

/* Barre de confiance remontée dans le hero, sous les deux boutons. */
.hero__trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0;
  margin:26px 0 0;border-top:1px solid var(--line);padding-top:18px}
.hero__trust li{display:flex;flex-direction:column;line-height:1.25}
.hero__trust strong{font-size:1.16rem;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.hero__trust span{font-size:.82rem;color:var(--muted);margin-top:3px}
@media(max-width:520px){
  .hero__trust{grid-template-columns:1fr;gap:10px}
  .hero__trust li{flex-direction:row;align-items:baseline;gap:.6em}
  .hero__trust span{margin-top:0}
}
/* Mobile : liseret sous les stats, photo en pleine largeur */
@media(max-width:640px){
  .hero__trust{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px}
  .hero__media{max-width:none;width:calc(100% + 44px);margin:0 -22px}
  .hero__media img{border-radius:0}
  .hero__badge{left:14px}
}

/* Le véhicule, sur fond violet de marque : casse la suite de blancs et de gris. */
.sec--vehicle{background:linear-gradient(160deg,#7014F3 0%,#5A0FC6 100%);color:#fff;position:relative;overflow:hidden}
.sec--vehicle::after{content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,230,123,.35),transparent 68%);pointer-events:none}
.sec--vehicle h2,.sec--vehicle strong{color:#fff}
.sec--vehicle p{color:rgba(255,255,255,.86)}
.eyebrow--onpurple{color:var(--green)}
.vmodel{margin:30px 0 0;border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 30px 70px -30px rgba(9,3,26,.75)}
.vmodel img{width:100%;height:auto;display:block}
.vmodel figcaption{position:absolute;left:16px;bottom:14px;background:rgba(14,16,24,.72);color:#fff;
  font-size:.84rem;font-weight:600;padding:7px 13px;border-radius:999px;backdrop-filter:blur(4px)}
.sec--vehicle .vspec{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.sec--vehicle .vspec strong{color:#fff}
.sec--vehicle .vspec span{color:rgba(255,255,255,.78)}
.sec--vehicle .vspec__ic{color:var(--green)}

/* La colonne « avec Flot » se lit d'un coup d'œil : fond vert de marque. */
.ba__col--yes{background:#D8F7E7;border-color:rgba(0,230,123,.75)}

/* De l'air au-dessus des boutons qui referment une section. */
.sec .btn--navy,.sec .btn--ghost{margin-top:14px}
.faqs+.center{margin-top:30px}
.steps+.center,.feats+.center{margin-top:30px}

/* Témoignages : structure volontairement différente du bloc du dessus, plus de cartes
   encadrées, mais des colonnes séparées par un filet, sur fond crème. */
.sec--quotes{background:#F4F1EA}
.sec--quotes .tgrid{gap:0;margin-top:42px}
.sec--quotes .tcard{background:none;border:0;border-left:1px solid #DCD5C6;border-radius:0;
  padding:4px 26px 0;gap:26px}
.sec--quotes .tcard:first-child{border-left:0;padding-left:0}
.tcard__n{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#8C8676}
.sec--quotes .tcard__q{font-size:1.02rem;line-height:1.6}
.sec--quotes .tcard__who img{width:44px;height:44px}
.sec--quotes .tcard__id strong{font-size:.95rem}
@media(max-width:920px){
  .sec--quotes .tcard{border-left:0;border-top:1px solid #DCD5C6;padding:24px 0 0}
  .sec--quotes .tcard:first-child{border-top:0;padding-top:4px}
}

/* Exploration du véhicule : points d'intérêt posés sur la photo officielle. */
.vexplore{position:relative}
.vhot{position:absolute;transform:translate(-50%,-50%);z-index:3;background:none;border:0;padding:0;
  cursor:pointer;display:flex;align-items:center;gap:9px;font:inherit;color:inherit}
.vhot__dot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;position:relative;
  background:var(--green);box-shadow:0 0 0 4px rgba(255,255,255,.55),0 6px 16px rgba(9,3,26,.35)}
.vhot__dot::before,.vhot__dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--navy);border-radius:2px}
.vhot__dot::before{width:11px;height:2.5px}
.vhot__dot::after{width:2.5px;height:11px}
.vhot[aria-expanded="true"] .vhot__dot::after{display:none}
.vhot__lbl{background:rgba(14,16,24,.78);color:#fff;font-size:.83rem;font-weight:600;white-space:nowrap;
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.vhot__pop{position:absolute;left:36px;top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;
  width:250px;background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px;font-size:.9rem;
  line-height:1.45;box-shadow:0 20px 44px -14px rgba(9,3,26,.5);opacity:0;visibility:hidden;
  transition:opacity .16s,transform .16s;text-align:left;white-space:normal;z-index:4}
.vhot[aria-expanded="true"] .vhot__pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
/* une fois ouverte, la bulle porte le titre : l'étiquette du point disparaît. */
.vhot[aria-expanded="true"] .vhot__lbl{opacity:0;pointer-events:none}
.vhot__pop b{display:block;font-family:inherit;font-weight:700;color:var(--navy);margin-bottom:5px;font-size:.94rem}
/* quand une bulle est ouverte, les autres étiquettes s'effacent pour ne pas encombrer */
.vexplore:has(.vhot[aria-expanded="true"]) .vhot[aria-expanded="false"] .vhot__lbl{opacity:.28}
.vexplore:has(.vhot[aria-expanded="true"]) .vhot[aria-expanded="false"] .vhot__dot{opacity:.55}
.vhot__lbl,.vhot__dot{transition:opacity .18s}
.vhot:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:999px}
/* Sur la moitié droite de la photo, la bulle s'ouvre vers la gauche pour rester dans le cadre. */
.vhot--gauche .vhot__pop{left:auto;right:36px;transform-origin:right center}
/* Panneau mobile : la bulle ancrée au point sortait du cadre (le conteneur de référence
   est le bouton, minuscule). Sous 760 px on affiche donc un panneau unique en bas de
   l'image, rempli par le JS, place constante, jamais coupée, jamais débordante. */
.vpop-mob{display:none}
@media(max-width:760px){
  .vhot__lbl,.vhot__pop{display:none}
  /* purement informatif : il ne doit pas intercepter les clics des points qu'il recouvre */
  /* Sous 760 px, l'image ne fait que ~290 px de haut : une bulle en surimpression
     mangeait la voiture. Le panneau se place donc SOUS la photo, dans le flux. */
  .vpop-mob{display:block;background:#fff;color:var(--ink);border-radius:14px;
    padding:0 16px;font-size:.92rem;line-height:1.5;margin-top:0;max-height:0;overflow:hidden;
    box-shadow:0 14px 34px -18px rgba(9,3,26,.45);transition:max-height .2s ease,margin-top .2s ease,padding .2s ease}
  .vpop-mob.on{max-height:260px;margin-top:14px;padding:15px 16px}
  /* la légende en surimpression couvrait un point : sous 760 px elle passe sous la photo */
  .vexplore figcaption{position:static;background:none;backdrop-filter:none;padding:10px 2px 0;
    color:rgba(255,255,255,.9);font-size:.82rem;line-height:1.4}
  .vpop-mob b{display:block;font-weight:700;color:var(--navy);margin-bottom:5px;font-size:.94rem}
}

/* Vue 360° manipulable, activée dès que des images sont déposées dans assets/img/veh360/. */
.v360{position:relative;cursor:grab;touch-action:pan-y;user-select:none}
.v360:active{cursor:grabbing}
.v360 .v360__f{display:none;width:100%;height:auto}
.v360 .v360__f.on{display:block}
.v360__hint{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:7px;background:rgba(14,16,24,.74);color:#fff;
  font-size:.83rem;font-weight:600;padding:7px 14px;border-radius:999px;backdrop-filter:blur(4px);
  transition:opacity .25s}
.v360.touche .v360__hint{opacity:0}
.v360:focus-visible{outline:3px solid var(--green);outline-offset:4px}

/* Pages secondaires : un fond pastel différent d'une page à l'autre. */
.pagehero--menthe{background:#E8FBF1}
.pagehero--ciel{background:#E6F5FE}
.pagehero--lilas{background:#F1EAFE}
.pagehero--sable{background:#FBF4E8}
