/* =========================================================
   HadoTech - design system
   Bleu & rouge du logo + motif Faso Dan Fani
   ========================================================= */
:root{
  --ink:#0A1A4A;          /* bleu nuit */
  --ink-2:#13286B;
  --blue:#1E56F0;         /* bleu HadoTech */
  --blue-soft:#E7EEFF;
  --red:#E3173E;          /* rouge HadoTech */
  --red-soft:#FFE8EC;
  --ochre:#F4B13E;        /* touche Faso */
  --paper:#F4F6FB;
  --white:#FFFFFF;
  --text:#0D1530;
  --muted:#58637F;
  --line:#E1E6F1;
  --wa:#1FB855;
  --wave:#1DA1F2;
  --om:#FF7900;

  --f-display:'Times New Roman', Times, serif;
  --f-body:'Times New Roman', Times, serif;

  --r-s:10px; --r:16px; --r-l:24px; --r-xl:32px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.8,.24,1);

  --fani: repeating-linear-gradient(90deg,
     var(--blue) 0 26px, #fff 26px 29px, var(--red) 29px 37px, #fff 37px 40px,
     var(--ink) 40px 60px, var(--ochre) 60px 64px, var(--ink) 64px 70px, #fff 70px 73px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--f-body);font-size:16px;line-height:1.6;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:var(--red);color:#fff}

h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(30px,4.2vw,46px);font-weight:700}
h3{font-size:20px;font-weight:700;line-height:1.2}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.lede{color:var(--muted);font-size:18px;max-width:58ch}
.sec{padding:96px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px;flex-wrap:wrap}
.sec-head h2{max-width:18ch}
.sec-head .lede{max-width:46ch}
.fani-strip{height:6px;background:var(--fani)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px -8px rgba(227,23,62,.6)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(227,23,62,.7)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px -8px rgba(31,184,85,.55)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.btn-light:hover{background:rgba(255,255,255,.18)}

/* =================== HEADER =================== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 6px 24px -12px rgba(10,26,74,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.03em}
.brand img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.brand b{color:var(--red);font-weight:800}
.menu{display:flex;align-items:center;gap:4px}
.menu a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:15px;color:#2B3654;transition:background .2s,color .2s}
.menu a:hover{background:var(--paper);color:var(--ink)}
.menu .btn{margin-left:10px;padding:11px 20px;font-size:15px;color:#fff}
.menu .btn:hover{background:var(--red);color:#fff}
.burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.burger svg{width:26px;height:26px}

/* =================== HERO =================== */
.hero{position:relative;padding:56px 0 72px;background:
  radial-gradient(900px 500px at 85% -10%, #DCE6FF 0, transparent 60%),
  radial-gradient(600px 400px at -10% 110%, #FFE3E9 0, transparent 60%), var(--white)}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.offer{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px -8px rgba(10,26,74,.3);margin-bottom:22px}
.offer i{font-style:normal;background:var(--red);color:#fff;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700}
.hero h1{font-size:clamp(38px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-bottom:22px}
.rot{display:inline-block;color:var(--red);position:relative;white-space:nowrap}
.rot::after{content:"";display:inline-block;width:.07em;height:.82em;background:var(--red);margin-left:.06em;vertical-align:-.06em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero .lede{margin-bottom:30px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;color:var(--muted);font-weight:500}
.proof span{display:inline-flex;align-items:center;gap:7px}
.proof svg{width:18px;height:18px;color:var(--wa)}
.price-line{font-size:15px;color:var(--muted);margin:-14px 0 26px}
.price-line strong{font-family:var(--f-display);font-size:22px;color:var(--ink);letter-spacing:-.02em}

/* ---- Scène hero ---- */
.stage{position:relative;aspect-ratio:1/0.92;border-radius:var(--r-xl);background:linear-gradient(160deg,var(--ink-2),var(--ink) 70%);container-type:inline-size;overflow:hidden;box-shadow:0 40px 80px -40px rgba(10,26,74,.6)}
.stage::before{content:"";position:absolute;inset:0 auto 0 0;width:16px;background:repeating-linear-gradient(180deg,var(--blue) 0 26px,#fff 26px 29px,var(--red) 29px 37px,#fff 37px 40px,var(--ink) 40px 60px,var(--ochre) 60px 64px)}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 300px at 80% 20%,rgba(30,86,240,.45),transparent 70%),radial-gradient(300px 260px at 20% 95%,rgba(227,23,62,.35),transparent 70%);pointer-events:none}
.scene{position:absolute;inset:0;font-size:clamp(8px,2.15cqw,13px);z-index:1}
.browser{position:absolute;left:9%;top:8%;width:74%;background:#fff;border-radius:1.2em;overflow:hidden;box-shadow:0 2.4em 4em -1.6em rgba(0,0,0,.55)}
.b-bar{display:flex;align-items:center;gap:.6em;padding:.8em 1em;background:#EEF1F7;border-bottom:1px solid #E1E6F1}
.b-dots{display:flex;gap:.4em}.b-dots i{width:.75em;height:.75em;border-radius:50%;background:#FF5F57}.b-dots i:nth-child(2){background:#FEBC2E}.b-dots i:nth-child(3){background:#28C840}
.b-url{flex:1;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:999px;padding:.35em .9em;font-size:1.05em;font-weight:600;color:#1F2A44;min-width:0}
.b-url svg{width:1.05em;height:1.05em;color:#1FB855;flex-shrink:0}
.b-url span{overflow:hidden;white-space:nowrap}
.b-body{padding:1em;transition:opacity .35s}
.s-nav{display:flex;align-items:center;gap:1.2em;font-size:.95em;color:#5B6683;margin-bottom:.9em}
.s-nav b{font-family:var(--f-display);font-size:1.35em;margin-right:auto;letter-spacing:-.02em}
.s-nav .s-btn{color:#fff;padding:.35em .9em;border-radius:999px;font-weight:700}
.s-hero{display:flex;align-items:center;justify-content:space-between;border-radius:.9em;padding:1.2em 1.4em;color:#fff;margin-bottom:.9em;min-height:9em}
.s-hero small{display:block;font-size:.95em;opacity:.85}
.s-hero strong{display:block;font-family:var(--f-display);font-size:2em;line-height:1.05;margin:.2em 0 .6em;letter-spacing:-.02em}
.s-hero .s-cta{display:inline-block;background:#fff;color:#0D1530;font-weight:700;font-size:.95em;padding:.4em 1em;border-radius:999px}
.s-big{font-size:4.6em;line-height:1;filter:drop-shadow(0 .15em .2em rgba(0,0,0,.25))}
.s-items{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.s-item{background:#F4F6FB;border-radius:.8em;padding:.7em;font-size:.95em}
.s-item .s-emo{display:flex;align-items:center;justify-content:center;height:2.6em;font-size:1.9em;background:#fff;border-radius:.6em;margin-bottom:.5em}
.s-item b{display:block;color:#0D1530;font-size:1em;line-height:1.2}
.s-item em{font-style:normal;color:#5B6683;font-weight:600}

.phone{position:absolute;right:5%;bottom:6%;width:30%;aspect-ratio:9/18.6;background:#0D1530;border-radius:2.4em;padding:.55em;box-shadow:0 2.4em 4em -1.6em rgba(0,0,0,.7);animation:floaty 6s ease-in-out infinite}
.ph-screen{height:100%;background:#F4F6FB;border-radius:1.9em;overflow:hidden;display:flex;flex-direction:column}
.ph-top{background:var(--ink);color:#fff;padding:1.6em .9em .8em;font-weight:700;font-size:.95em;display:flex;justify-content:space-between;align-items:center}
.ph-top i{width:.6em;height:.6em;border-radius:50%;background:#28C840;box-shadow:0 0 0 .25em rgba(40,200,64,.25)}
.ph-kpi{background:var(--ink);color:#fff;padding:0 .9em 1em}
.ph-kpi small{opacity:.7;font-size:.85em}
.ph-kpi strong{display:block;font-family:var(--f-display);font-size:1.45em;letter-spacing:-.02em}
.ph-bars{display:flex;align-items:flex-end;gap:.3em;height:2.6em;margin-top:.5em}
.ph-bars i{flex:1;background:rgba(255,255,255,.3);border-radius:.2em .2em 0 0;transition:height .6s var(--ease)}
.ph-bars i:last-child{background:var(--red)}
.ph-list{padding:.7em .6em;display:flex;flex-direction:column;gap:.5em}
.ph-row{background:#fff;border-radius:.7em;padding:.55em .6em;font-size:.82em;line-height:1.3;color:#0D1530;box-shadow:0 .2em .5em rgba(10,26,74,.06)}
.ph-row b{display:block}
.ph-row span{color:#5B6683}
.ph-row.new{border-left:.3em solid var(--red);animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-.6em) scale(.96)}to{opacity:1;transform:none}}

.toast{position:absolute;display:flex;align-items:center;gap:.7em;background:#fff;border-radius:1em;padding:.75em 1em;font-size:1.02em;font-weight:600;color:#0D1530;box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.55);white-space:nowrap}
.toast .ti{width:2.3em;height:2.3em;border-radius:.7em;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast .ti svg{width:1.3em;height:1.3em}
.toast small{display:block;font-weight:500;color:#5B6683;font-size:.85em}
.t-ssl{left:4%;bottom:12%;animation:floaty 7s ease-in-out infinite reverse}
.t-ssl .ti{background:#E5F8EC;color:#1FB855}
.t-pay{left:30%;bottom:3.5%;}
.t-pay .ti{background:#FFF1E5;color:var(--om)}
.t-pay.show{animation:slidein .55s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateY(1.2em)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-.8em)}}
.sector-dots{position:absolute;right:5%;top:4%;display:flex;gap:.4em;z-index:2}
.sector-dots button{width:.65em;height:.65em;border-radius:50%;background:rgba(255,255,255,.35);font-size:inherit;padding:0}
.sector-dots button.on{background:#fff;width:1.8em;border-radius:999px}

/* =================== MARQUEE CLIENTS =================== */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--white)}
.clients-in{display:flex;align-items:center;gap:28px}
.clients-label{flex-shrink:0;font-weight:600;color:var(--muted);font-size:14.5px;padding-left:24px;max-width:150px;line-height:1.3}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--f-display);font-weight:700;font-size:22px;color:#8A93AC;letter-spacing:-.02em;white-space:nowrap;transition:color .2s}
.marquee-track span:hover{color:var(--ink)}
@keyframes marq{to{transform:translateX(-50%)}}

/* =================== CHIFFRES =================== */
.figures{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.figures-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:40px 24px;border-left:1px solid rgba(255,255,255,.1)}
.fig:first-child{border-left:0}
.fig strong{display:block;font-family:var(--f-display);font-size:clamp(40px,5vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1}
.fig strong em{font-style:normal;color:var(--red)}
.fig > span{display:block;margin-top:8px;color:rgba(255,255,255,.7);font-size:15.5px}

/* =================== SERVICES (bento) =================== */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tile{position:relative;background:var(--paper);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(10,26,74,.45)}
.tile.lg{grid-column:span 6}
.tile.sm{grid-column:span 3}
.tile .art{border-radius:var(--r);margin:-8px -8px 20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile.lg .art{height:230px}
.tile.sm .art{height:150px}
.tile .art svg{width:100%;height:100%}
.art.a-blue{background:linear-gradient(150deg,#DCE6FF,#C7D6FF)}
.art.a-red{background:linear-gradient(150deg,#FFE3E9,#FFD0DA)}
.art.a-ink{background:linear-gradient(150deg,var(--ink-2),var(--ink))}
.art.a-white{background:#fff}
.tile p{color:var(--muted);font-size:15.5px;margin:8px 0 18px;flex-grow:1}
.tile .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tile .from{font-size:14px;color:var(--muted)}
.tile .from b{display:block;font-family:var(--f-display);font-size:21px;color:var(--ink);letter-spacing:-.02em}
.tile .go{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;transition:background .2s}
.tile .go:hover{background:var(--red)}
.tile .go svg{width:16px;height:16px}

/* =================== SECTEURS (logiciels) =================== */
.sectors{background:var(--paper)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{padding:10px 18px;border-radius:999px;background:var(--white);border:1.5px solid var(--line);font-weight:700;font-size:15px;color:#2B3654;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sector-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.sector-copy h3{font-size:clamp(26px,3vw,34px);margin-bottom:12px}
.sector-copy p{color:var(--muted);margin-bottom:20px}
.checks{list-style:none;display:grid;gap:12px;margin-bottom:28px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.checks li::before{content:"";flex-shrink:0;width:22px;height:22px;border-radius:50%;margin-top:1px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.sector-note{font-size:14.5px;color:var(--muted);margin-top:14px}
.sector-note b{color:var(--ink)}

.dash{background:#fff;border-radius:var(--r-l);box-shadow:0 30px 70px -40px rgba(10,26,74,.5);overflow:hidden;display:grid;grid-template-columns:64px 1fr;min-height:400px;transition:opacity .3s}
.dash-side{background:var(--ink);padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.dash-side .logo-d{width:34px;height:34px;border-radius:10px;background:var(--red);color:#fff;font-family:var(--f-display);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.dash-side i{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1)}
.dash-side i.on{background:var(--blue)}
.dash-main{padding:22px}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.dash-top b{font-family:var(--f-display);font-size:19px;color:var(--ink)}
.dash-top span{font-size:13px;color:var(--muted);background:var(--paper);padding:6px 12px;border-radius:999px;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi small{display:block;font-size:12.5px;color:var(--muted)}
.kpi strong{font-family:var(--f-display);font-size:21px;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.kpi em{display:block;font-style:normal;font-size:12px;color:var(--wa);font-weight:700}
.dash-row{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.chart{border:1px solid var(--line);border-radius:14px;padding:14px}
.chart small,.ops small{font-size:12.5px;color:var(--muted);display:block;margin-bottom:10px}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars div i{width:100%;border-radius:6px 6px 2px 2px;background:var(--blue-soft);transition:height .7s var(--ease)}
.bars div:nth-child(6) i{background:var(--blue)}
.bars div:last-child i{background:var(--red)}
.bars div span{font-size:11px;color:var(--muted)}
.ops{border:1px solid var(--line);border-radius:14px;padding:14px}
.op{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px dashed var(--line);font-size:13px}
.op:first-of-type{border-top:0}
.op b{color:var(--ink);font-weight:600;display:block}
.op span{color:var(--muted);font-size:12px}
.op strong{color:var(--ink);white-space:nowrap;font-weight:700}

/* =================== POURQUOI =================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.why{padding:32px 28px 32px 0;border-bottom:1px solid var(--line)}
.why:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.why .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.why .ic svg{width:24px;height:24px}
.ic.b{background:var(--blue-soft);color:var(--blue)}
.ic.r{background:var(--red-soft);color:var(--red)}
.why h3{font-size:19px;margin-bottom:6px}
.why p{color:var(--muted);font-size:15.5px}

/* =================== PROCESSUS =================== */
.process{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.process h2{color:#fff}
.process .lede{color:rgba(255,255,255,.72)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;list-style:none;counter-reset:s}
.steps::before{content:"";position:absolute;top:31px;left:32px;right:calc(25% - 26px);height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 8px,transparent 8px 16px)}
.step{position:relative}
.step .num{width:64px;height:64px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative}
.step .num svg{width:26px;height:26px}
.step .num::after{counter-increment:s;content:counter(s);position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--f-display);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.step:first-child .num{background:var(--blue);border-color:var(--blue)}
.step h3{color:#fff;font-size:19px;margin-bottom:6px}
.step p{color:rgba(255,255,255,.7);font-size:15.5px}

/* =================== TARIFS =================== */
.pricing{background:var(--white)}
.seg{display:inline-flex;padding:5px;border-radius:999px;background:var(--paper);border:1px solid var(--line);margin-bottom:32px}
.seg button{padding:10px 20px;border-radius:999px;font-weight:700;font-size:15px;color:#2B3654;transition:all .2s}
.seg button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 6px 16px -8px rgba(10,26,74,.6)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plans[hidden]{display:none}
.plan{position:relative;border:1.5px solid var(--line);border-radius:var(--r-l);padding:30px 28px;display:flex;flex-direction:column;background:#fff;transition:border-color .25s,transform .3s var(--ease)}
.plan:hover{border-color:#B9C4DE;transform:translateY(-3px)}
.plan.hot{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 30px 60px -30px rgba(10,26,74,.7)}
.plan.hot::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--fani);border-radius:var(--r-l) var(--r-l) 0 0}
.plan .flag{position:absolute;top:22px;right:22px;background:var(--red);color:#fff;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px}
.plan h3{font-size:22px;margin-bottom:4px}
.plan.hot h3{color:#fff}
.plan .for{color:var(--muted);font-size:15px;margin-bottom:22px}
.plan.hot .for{color:rgba(255,255,255,.7)}
.amount{font-family:var(--f-display);font-weight:800;font-size:46px;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.plan.hot .amount{color:#fff}
.amount small{font-size:16px;font-weight:600;letter-spacing:0;margin-left:6px;color:var(--muted)}
.plan.hot .amount small{color:rgba(255,255,255,.65)}
.per{font-size:14px;color:var(--muted);margin:8px 0 22px}
.plan.hot .per{color:rgba(255,255,255,.6)}
.plan ul{list-style:none;display:grid;gap:11px;margin-bottom:26px;flex-grow:1}
.plan li{display:flex;gap:10px;font-size:15.5px;align-items:flex-start}
.plan li::before{content:"";flex-shrink:0;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .btn{width:100%}
.plan:not(.hot) .btn{background:var(--paper);color:var(--ink)}
.plan:not(.hot) .btn:hover{background:var(--ink);color:#fff}
.pricing-note{margin-top:22px;color:var(--muted);font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pricing-note .pay{display:inline-flex;gap:8px}
.chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-weight:700;font-size:13px;color:#fff}
.chip.wave{background:var(--wave)}
.chip.om{background:var(--om)}

/* =================== RÉALISATIONS =================== */
.works{background:var(--paper)}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{display:block;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.work:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(10,26,74,.5)}
.work.more{display:none}
.works.all .work.more{display:block}
.shot{position:relative;background:#EEF1F7;padding:10px 10px 0}
.shot .b-dots{position:absolute;top:10px;left:16px;font-size:9px}
.shot-frame{position:relative;margin-top:16px;aspect-ratio:16/10;border-radius:10px 10px 0 0;overflow:hidden;background:linear-gradient(135deg,var(--c1,#1E56F0),var(--c2,#0A1A4A))}
.shot-frame .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.03em;text-align:center;padding:16px}
.shot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 4s ease}
.work:hover .shot-frame img{transform:translateY(-8%) scale(1.04)}
.work-info{padding:18px 20px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.work-info h3{font-size:18px;margin-bottom:3px}
.work-info p{color:var(--muted);font-size:14.5px;line-height:1.45}
.work-info .arrow{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,color .2s}
.work:hover .arrow{background:var(--red);color:#fff}
.work-info .arrow svg{width:17px;height:17px}
.works-more{display:flex;justify-content:center;margin-top:34px}
.works.all .works-more{display:none}

/* =================== TÉMOIGNAGES =================== */
.voices-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.rating{display:flex;align-items:center;gap:14px;margin-top:26px}
.rating strong{font-family:var(--f-display);font-size:54px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1}
.stars{color:var(--ochre);font-size:20px;letter-spacing:2px}
.rating span{display:block;color:var(--muted);font-size:14.5px}
.chat{background:#E9E3DA;border-radius:var(--r-xl);padding:28px 24px;position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(10,26,74,.06) 1.2px,transparent 1.3px);background-size:18px 18px;background-color:#EFE8DE}
.chat-head{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.chat-head .av{width:40px;height:40px;border-radius:50%;background:var(--ink);overflow:hidden}
.chat-head .av img{width:100%;height:100%;object-fit:cover}
.chat-head b{display:block;color:var(--ink)}
.chat-head span{font-size:13px;color:var(--wa);font-weight:600}
.bubble{position:relative;max-width:88%;background:#fff;border-radius:4px 18px 18px 18px;padding:12px 16px 10px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.bubble:nth-child(odd){margin-left:auto;border-radius:18px 4px 18px 18px;background:#DCF8C6}
.bubble .who{font-weight:700;font-size:14px;margin-bottom:3px}
.bubble .who em{font-style:normal;font-weight:500;color:var(--muted)}
.bubble p{font-size:15.5px;color:#1B2337}
.bubble .meta{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:12px;color:#7A8195;margin-top:4px}
.bubble .meta .stars{font-size:12px;letter-spacing:1px}

/* =================== FAQ =================== */
.faq{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-side{position:sticky;top:100px}
.faq-side h2{margin-bottom:14px}
.ask{margin-top:28px;background:#fff;border-radius:var(--r-l);padding:22px;border:1px solid var(--line)}
.ask b{font-family:var(--f-display);font-size:19px;color:var(--ink);display:block;margin-bottom:4px}
.ask p{color:var(--muted);font-size:15px;margin-bottom:16px}
.qa{background:#fff;border-radius:var(--r);margin-bottom:10px;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.qa[open]{border-color:var(--blue);box-shadow:0 14px 30px -22px rgba(30,86,240,.6)}
.qa summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:16.5px;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A4A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease),background-color .2s}
.qa[open] summary::after{transform:rotate(45deg);background-color:var(--blue-soft)}
.qa .ans{padding:0 22px 20px;color:var(--muted);font-size:15.5px}
.qa .ans strong{color:var(--ink)}

/* =================== CONTACT =================== */
.contact{padding:96px 0}
.cta-panel{position:relative;background:var(--ink);border-radius:var(--r-xl);padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;overflow:hidden;color:#fff}
.cta-panel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--fani)}
.cta-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 360px at 90% 10%,rgba(30,86,240,.5),transparent 70%);pointer-events:none}
.cta-panel > *{position:relative;z-index:1}
.cta-panel h2{color:#fff;margin-bottom:14px}
.cta-panel .lede{color:rgba(255,255,255,.75);margin-bottom:28px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.coords{display:grid;grid-template-columns:repeat(3,auto);gap:10px 28px;justify-content:start;margin-bottom:28px}
.coords a,.coords div{display:flex;flex-direction:column;font-weight:600}
.coords small{color:rgba(255,255,255,.55);font-weight:500;font-size:13.5px}
.coords a:hover{color:#BFD0FF}
.paybar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.paybar span{color:rgba(255,255,255,.7);font-size:15px;margin-right:4px}
.paybtn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-weight:700;color:#fff;transition:transform .2s}
.paybtn:hover{transform:translateY(-2px)}
.paybtn.wave{background:var(--wave)}
.paybtn.om{background:var(--om)}
.wa-phone{justify-self:center;width:min(100%,330px);background:#0D1530;border-radius:40px;padding:10px;box-shadow:0 40px 70px -30px rgba(0,0,0,.8)}
.wa-screen{border-radius:31px;overflow:hidden;background:#EFE8DE;background-image:radial-gradient(rgba(10,26,74,.06) 1.2px,transparent 1.3px);background-size:16px 16px}
.wa-top{background:#075E54;color:#fff;padding:26px 16px 12px;display:flex;align-items:center;gap:10px}
.wa-top .av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#fff}
.wa-top .av img{width:100%;height:100%;object-fit:cover}
.wa-top b{display:block;font-size:15px}
.wa-top small{font-size:12px;opacity:.8}
.wa-body{padding:16px 12px 18px;display:flex;flex-direction:column;gap:8px;min-height:330px}
.msg{max-width:84%;padding:8px 11px 6px;border-radius:12px;font-size:14px;line-height:1.4;color:#111B21;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.msg.in{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:#DCF8C6;border-top-right-radius:3px}
.msg.them{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.msg time{display:block;text-align:right;font-size:11px;color:#667781;margin-top:2px}
.typing{align-self:flex-start;background:#fff;border-radius:12px;padding:10px 14px;display:none;gap:4px}
.typing.on{display:flex}
.typing i{width:7px;height:7px;border-radius:50%;background:#9AA3B5;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* =================== FOOTER =================== */
footer{background:#071237;color:rgba(255,255,255,.65)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:56px 0 40px}
footer .brand{color:#fff;margin-bottom:12px}
footer .brand b{color:#FF5A78}
.tagline{font-weight:600;color:#fff;font-size:14.5px;margin-bottom:10px}
footer p{font-size:15px;max-width:36ch}
footer h4{color:#fff;font-size:16px;margin-bottom:14px}
footer nav a,footer .fc a,footer .fc span{display:block;font-size:15px;padding:4px 0;transition:color .2s}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* =================== WHATSAPP FLOTTANT =================== */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px;background:var(--wa);color:#fff;border-radius:999px;padding:12px 18px 12px 14px;font-weight:700;box-shadow:0 14px 30px -10px rgba(31,184,85,.7);transition:transform .25s var(--ease)}
.wa-float:hover{transform:translateY(-3px)}
.wa-float svg{width:26px;height:26px}
.wa-float .pulse{position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(31,184,85,.6);animation:ring 2.4s infinite}
@keyframes ring{70%{box-shadow:0 0 0 16px rgba(31,184,85,0)}100%{box-shadow:0 0 0 0 rgba(31,184,85,0)}}

/* =================== Révélation douce =================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* =================== RESPONSIVE =================== */
@media (max-width:1000px){
  .burger{display:flex}
  .menu{position:fixed;top:78px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px 20px 24px;gap:2px;box-shadow:0 20px 30px -20px rgba(10,26,74,.35);transform:translateY(-110%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .menu.open{transform:none;visibility:visible}
  .menu a{padding:14px 16px;font-size:17px}
  .menu .btn{margin:10px 0 0}
}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .stage{max-width:640px;width:100%;margin:0 auto}
  .tile.lg{grid-column:span 12}
  .tile.sm{grid-column:span 6}
  .sector-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:520px}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .voices-grid,.faq-grid{grid-template-columns:1fr;gap:36px}
  .faq-side{position:static}
  .cta-panel{grid-template-columns:1fr;padding:44px 32px 52px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px}
  .steps::before{display:none}
}
@media (max-width:860px){
  .figures-grid{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(3){border-left:0}
  .fig{border-top:1px solid rgba(255,255,255,.1)}
  .why-grid{grid-template-columns:1fr 1fr}
  .why,.why:not(:nth-child(3n+1)){padding:26px 20px 26px 0;border-left:0}
  .why:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .clients-label{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .sec,.contact{padding:68px 0}
  .hero{padding:34px 0 56px}
  .hero-ctas .btn{flex:1 1 100%}
  .tile.sm{grid-column:span 12}
  .works-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why,.why:nth-child(even){padding:24px 0;border-left:0}
  .steps{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:last-child{display:none}
  .dash{grid-template-columns:1fr}
  .dash-side{display:none}
  .dash-row{grid-template-columns:1fr}
  .coords{grid-template-columns:1fr}
  .cta-panel{padding:36px 22px 48px;border-radius:var(--r-l)}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .wa-float span{display:none}
  .wa-float{padding:14px}
  .t-pay{left:4%;bottom:2.5%}
  .t-ssl{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .rv{opacity:1;transform:none}
}

/* =================== LOGO =================== */
.brand img{height:50px;width:auto;border-radius:0}
.foot-logo{display:inline-block;background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:16px}
.foot-logo img{height:40px;width:auto}
.menu a[aria-current="page"]{color:var(--red);background:var(--red-soft)}

/* =================== EN-TÊTE DE PAGE =================== */
.page-hero{position:relative;overflow:hidden;padding:44px 0 42px;background:
  radial-gradient(800px 380px at 90% -20%, #DCE6FF 0, transparent 60%),
  radial-gradient(520px 320px at -10% 120%, #FFE3E9 0, transparent 60%), var(--paper);border-bottom:1px solid var(--line)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14.5px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{font-weight:600;color:var(--blue)}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;margin-bottom:12px;max-width:22ch}
.page-hero::after{content:"";position:absolute;top:0;bottom:0;right:6%;width:18px;background:repeating-linear-gradient(180deg,var(--blue) 0 26px,#fff 26px 29px,var(--red) 29px 37px,#fff 37px 40px,var(--ink) 40px 60px,var(--ochre) 60px 64px);opacity:.9}
.page-hero .lede{font-size:18.5px}
.page-hero + .sec,.page-hero + .contact{padding-top:56px}

/* =================== APERÇU DES SERVICES (accueil) =================== */
.svc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{display:flex;align-items:center;gap:16px;padding:20px;border:1.5px solid var(--line);border-radius:var(--r-l);background:#fff;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(10,26,74,.5)}
.svc .si{flex-shrink:0;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.svc .si svg{width:26px;height:26px}
.svc .si.b{background:var(--blue-soft);color:var(--blue)}
.svc .si.r{background:var(--red-soft);color:var(--red)}
.svc b{display:block;font-family:var(--f-display);font-size:18px;color:var(--ink);letter-spacing:-.01em}
.svc small{display:block;color:var(--muted);font-size:14.5px}
.svc .ar{margin-left:auto;width:20px;height:20px;color:var(--muted);flex-shrink:0;transition:transform .2s,color .2s}
.svc:hover .ar{transform:translateX(3px);color:var(--red)}
.center-more{display:flex;justify-content:center;margin-top:30px}

/* =================== BANDEAU D'APPEL =================== */
.cta-band{padding:0 0 96px}
.band{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:44px 48px 52px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band::before{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--fani)}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 92% 0%,rgba(30,86,240,.55),transparent 70%);pointer-events:none}
.band > *{position:relative;z-index:1}
.band h2{color:#fff;font-size:clamp(26px,3.4vw,38px);margin-bottom:8px}
.band p{color:rgba(255,255,255,.75);font-size:17px;max-width:46ch}
.band-btns{display:flex;gap:12px;flex-wrap:wrap}
.sec.pricing + .cta-band,.sec.works + .cta-band,.sec.faq + .cta-band,.sec.sectors + .cta-band{padding-top:0}
.sec.works + .cta-band,.sec.faq + .cta-band,.sec.sectors + .cta-band{background:var(--paper)}
.faq-side .ask:first-child{margin-top:0}

@media (max-width:1080px){ .svc-links{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .svc-links{grid-template-columns:1fr}
  .brand img{height:40px}
  .page-hero::after{right:0;width:10px}
  .page-hero{padding:36px 0 34px}
  .band{padding:34px 22px 44px;border-radius:var(--r-l)}
  .band-btns .btn{flex:1 1 100%}
  .cta-band{padding-bottom:68px}
}

/* Captures : affichées seulement quand elles sont prêtes */
.shot-frame img{opacity:0;transition:opacity .6s ease,transform 4s ease}
.shot-frame img.ok{opacity:1}
.no-js .shot-frame img{opacity:1}

/* Réglages pour Times New Roman */
body{font-size:17px;line-height:1.65}
h1,h2,h3,h4{letter-spacing:-.01em;font-weight:700}
.hero h1,.page-hero h1{letter-spacing:-.015em;font-weight:700}
.brand,.fig strong,.amount,.rating strong,.marquee-track span,.kpi strong,.tile .from b,.svc b{letter-spacing:-.01em}

.svc-teaser{padding-bottom:24px}
.svc-teaser + #why{padding-top:40px}
@media (max-width:640px){.svc-teaser{padding-bottom:16px}.svc-teaser + #why{padding-top:32px}}