/* HAYATAK — design system. Editorial / warm-modern. */
:root{
--ink:#023B2F;--ink-2:#01251D;--ink-70:rgba(2,59,47,.78);--ink-55:rgba(2,59,47,.72);--ink-40:rgba(2,59,47,.66);
--paper:#FFFFFF;--paper-2:#FAF8F3;--paper-3:#F2EFE7;
--mint:#BFE9C9;--mint-2:#D7F1DE;--mint-soft:#EDF7F0;
--apricot:#F7C79B;--apricot-2:#FBE2CB;--apricot-soft:#FDF2E8;
--clay:#A85B18;
--line:rgba(2,59,47,.13);--line-2:rgba(2,59,47,.26);--line-w:rgba(255,255,255,.18);
--r-sm:10px;--r:14px;--r2:22px;--r3:34px;--r-pill:999px;
/* couleurs fonctionnelles — même chroma, teintes distinctes */
--success:oklch(.58 .13 155);--success-bg:oklch(.95 .04 155);
--warning:oklch(.68 .13 70);--warning-bg:oklch(.96 .04 70);
--danger:oklch(.56 .16 26);--danger-bg:oklch(.95 .04 26);
--info:oklch(.56 .11 240);--info-bg:oklch(.95 .03 240);
/* espacements — base 4 */
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
/* ombres */
--sh-1:0 1px 2px rgba(2,59,47,.06);--sh-2:0 16px 34px -18px rgba(2,59,47,.28);--sh-3:0 30px 60px -30px rgba(2,59,47,.38);
--focus:0 0 0 3px var(--mint),0 0 0 5px var(--ink);
--fs:"Archivo",ui-sans-serif,system-ui,sans-serif;
--fm:"Geist Mono",ui-monospace,monospace;
--fa:"IBM Plex Sans Arabic","Archivo",sans-serif;
--ease:cubic-bezier(.2,.7,.2,1);
--pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--fs);font-size:17px;line-height:1.6;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[dir="rtl"] body{font-family:var(--fa)}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none;transition:color .2s}
a:hover{color:var(--clay)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
.ink :focus-visible,.ftr :focus-visible{outline-color:var(--mint)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:13px 20px;border-radius:0 0 var(--r) 0;font-size:15px;font-weight:550}
.skip:focus{left:0;color:#fff}
/* grain */
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── type ── */
.d0,.d1,.d2,.d3{font-family:var(--fs);font-weight:700;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
.d0{font-size:clamp(46px,9.2vw,140px);font-variation-settings:"wdth" 108;line-height:.86;letter-spacing:-.05em}
.d1{font-size:clamp(38px,5.6vw,88px);font-variation-settings:"wdth" 104}
.d2{font-size:clamp(29px,3.5vw,54px);letter-spacing:-.035em;line-height:1}
.d3{font-size:clamp(21px,1.9vw,30px);letter-spacing:-.025em;line-height:1.12;font-weight:600}
html[dir="rtl"] .d0,html[dir="rtl"] .d1,html[dir="rtl"] .d2,html[dir="rtl"] .d3{letter-spacing:0;line-height:1.15}
.kick{font-family:var(--fm);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);font-weight:500;display:block}
.lede{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ink-70);letter-spacing:-.012em;text-wrap:pretty;max-width:62ch}
.body{color:var(--ink-70);text-wrap:pretty;max-width:68ch}
.body+.body{margin-top:1em}
.mono{font-family:var(--fm);font-size:13px;letter-spacing:-.01em}
.tiny{font-size:13.5px;line-height:1.55;color:var(--ink-55)}
.ital{font-style:italic;font-variation-settings:"wdth" 92}
em{font-style:italic}
strong,b{font-weight:650}
h1,h2,h3,h4{font-weight:inherit;font-size:inherit}

/* ── layout ── */
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:940px}
.band{position:relative;padding-block:clamp(64px,8vw,132px)}
.band-s{padding-block:clamp(44px,5vw,76px)}
.ink{background:var(--ink);color:var(--paper)}
.ink .kick{color:rgba(255,255,255,.62)}
.ink .lede,.ink .body,.ink .tiny{color:rgba(255,255,255,.72)}
.ink a{color:var(--mint)}
.ink a:hover{color:var(--apricot)}
.soft{background:var(--paper-2)}
.mintbg{background:var(--mint-soft)}
.apri{background:linear-gradient(170deg,var(--apricot-soft),var(--apricot-2))}
.rule{height:1px;background:var(--line);border:0}
.ink .rule,.ftr .rule{background:var(--line-w)}
.cols{display:grid;gap:clamp(28px,4vw,72px)}
@media(min-width:900px){.c-7-5{grid-template-columns:1.35fr 1fr}.c-5-7{grid-template-columns:1fr 1.35fr}.c-2{grid-template-columns:1fr 1fr}.c-3{grid-template-columns:repeat(3,1fr)}.c-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:620px)and (max-width:899px){.c-3,.c-4{grid-template-columns:1fr 1fr}}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}.mt64{margin-top:64px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-size:15.5px;font-weight:550;letter-spacing:-.01em;white-space:nowrap;transition:background .25s,color .25s,box-shadow .3s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-fill{background:var(--ink);color:#fff}
.btn-fill:hover{background:var(--ink-2);color:#fff;box-shadow:0 16px 34px -14px rgba(2,59,47,.5)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:var(--mint-2);color:var(--ink)}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.ink .btn-line{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);color:#fff}
.ink .btn-line:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff;background:rgba(255,255,255,.06)}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;pointer-events:none;transform:none;box-shadow:none;cursor:not-allowed}
.btn[data-loading="1"]{pointer-events:none;position:relative;color:transparent}
.btn[data-loading="1"]::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;color:#fff;animation:spin .7s linear infinite}
.btn-line[data-loading="1"]::after,.btn-mint[data-loading="1"]::after{color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-lg{height:60px;padding:0 32px;font-size:17px}
.arw{transition:transform .3s var(--ease)}
.btn:hover .arw,.lnk:hover .arw{transform:translateX(4px)}
html[dir="rtl"] .btn:hover .arw,html[dir="rtl"] .lnk:hover .arw{transform:translateX(-4px)}
.lnk{display:inline-flex;align-items:center;gap:9px;font-weight:550;font-size:15.5px;padding-bottom:3px;border-bottom:1.5px solid var(--line-2);width:fit-content}
.lnk:hover{border-color:var(--clay)}
.ink .lnk{border-color:rgba(255,255,255,.3)}

/* ── tags ── */
.tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;background:var(--mint);color:var(--ink);font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.tag-line{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-55)}
.tag-apri{background:var(--apricot);color:var(--ink)}
.tag-ok{background:var(--success-bg);color:var(--success)}
.tag-warn{background:var(--warning-bg);color:var(--warning)}
.tag-danger{background:var(--danger-bg);color:var(--danger)}
.tag-soon{background:transparent;box-shadow:inset 0 0 0 1px currentColor;color:var(--ink-40)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:26px;width:auto}
.nav{display:none;align-items:center;gap:2px}
@media(min-width:1040px){.nav{display:flex}}
.nav a,.nav .navbtn{padding:9px 13px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-70);transition:background .2s,color .2s}
.nav a:hover,.nav .navbtn:hover{background:var(--paper-3);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--mint-soft)}
.hdr-act{display:flex;align-items:center;gap:10px}
.drop{position:relative}
.drop-p{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:250px;background:#fff;border-radius:var(--r2);box-shadow:0 0 0 1px var(--line),0 28px 60px -24px rgba(2,59,47,.35);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease);z-index:95}
.drop[data-open="1"] .drop-p{opacity:1;visibility:visible;transform:none}
.drop-p a{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:14px;font-size:14.5px;font-weight:550}
.drop-p a:hover{background:var(--mint-soft);color:var(--ink)}
.drop-p a span{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--ink-40);font-weight:400}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
@media(min-width:1040px){.burger{display:none}}
.mnu{position:fixed;inset:0;z-index:100;background:var(--paper);padding:22px var(--pad) 40px;overflow-y:auto;display:none;flex-direction:column}
.mnu[data-open="1"]{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mnu-l{display:flex;flex-direction:column;margin-top:24px}
.mnu-l a{font-size:clamp(28px,7vw,42px);font-weight:600;letter-spacing:-.035em;padding:13px 0;border-bottom:1px solid var(--line)}
.langs{display:flex;gap:3px;padding:3px;border-radius:999px;background:var(--paper-3)}
.langs button{padding:6px 11px;border-radius:999px;font-family:var(--fm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-55);transition:.2s}
.langs button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ── hero ── */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,var(--apricot-soft) 100%)}
.hero-glow{position:absolute;inset-inline-end:-14%;top:-22%;width:min(820px,90vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(191,233,201,.75),rgba(191,233,201,0) 72%);pointer-events:none}
.hero-glow2{position:absolute;inset-inline-start:-16%;bottom:-30%;width:min(700px,80vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(247,199,155,.7),rgba(247,199,155,0) 70%);pointer-events:none}

/* ── figures / photos ── */
.fig{position:relative;overflow:hidden;border-radius:var(--r3);background:var(--paper-3)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.fig:hover img{transform:scale(1.035)}
.fig-cap{position:absolute;inset-inline-start:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:999px;padding:7px 15px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ratio-4x5{aspect-ratio:4/5}.ratio-1{aspect-ratio:1}.ratio-3x2{aspect-ratio:3/2}.ratio-16x9{aspect-ratio:16/9}
.bleed{width:100vw;margin-inline-start:50%;transform:translateX(-50%)}
html[dir="rtl"] .bleed{transform:translateX(50%)}

/* ── cards ── */
.card{background:#fff;border-radius:var(--r3);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(22px,2.4vw,34px);transition:box-shadow .4s,transform .4s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -34px rgba(2,59,47,.35)}
.ink .card{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-w)}
.num{font-family:var(--fm);font-size:12px;letter-spacing:.16em;color:var(--ink-40)}
.ink .num{color:rgba(255,255,255,.62)}

/* service tiles */
.svc{display:block;position:relative;border-radius:var(--r3);overflow:hidden;background:var(--paper-3);aspect-ratio:4/5}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,59,47,0) 32%,rgba(2,37,29,.88) 100%)}
.svc:hover img{transform:scale(1.06)}
.svc-t{position:absolute;inset-inline:22px;bottom:20px;z-index:2;color:#fff}
.svc-t b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.svc-t small{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.75)}

/* stat */
.stat b{display:block;font-size:clamp(38px,4.4vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1;font-variation-settings:"wdth" 106}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--ink-55);max-width:24ch}
.ink .stat span{color:rgba(255,255,255,.68)}

/* steps */
.step{padding-top:22px;border-top:1.5px solid var(--ink)}
.ink .step{border-color:rgba(255,255,255,.4)}

/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:16px;background:var(--paper)}
.ink .marq,.marq.on-ink{border-color:var(--line-w);background:transparent}
.marq-t{display:flex;gap:52px;width:max-content;animation:slide 42s linear infinite;font-family:var(--fm);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);white-space:nowrap}
.marq-t span{display:flex;align-items:center;gap:52px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── accordion (legal) ── */
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc-h{display:flex;align-items:flex-start;gap:20px;width:100%;text-align:start;padding:24px 0;transition:color .2s}
.acc-h:hover{color:var(--clay)}
.acc-h .t{font-size:clamp(18px,1.7vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.25;flex:1}
.acc-h .n{font-family:var(--fm);font-size:11.5px;letter-spacing:.16em;color:var(--ink-40);padding-top:6px;flex:none;min-width:62px;white-space:nowrap}
.acc-h .ic{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;transition:.3s var(--ease)}
.acc-h .ic::before,.acc-h .ic::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.acc-h .ic::before{width:12px;height:1.6px}
.acc-h .ic::after{width:1.6px;height:12px;transition:transform .3s var(--ease)}
.acc[data-open="1"] .acc-h .ic{background:var(--ink);color:#fff;box-shadow:none}
.acc[data-open="1"] .acc-h .ic::after{transform:scaleY(0)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.acc[data-open="1"] .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-c{padding:0 0 30px;max-width:74ch}
.acc-c>*+*{margin-top:14px}
.acc-c p{color:var(--ink-70);font-size:16px;line-height:1.68}
.acc-c h4{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink);margin-top:26px}
.acc-c ul,.acc-c ol{padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;color:var(--ink-70);font-size:16px;line-height:1.6}
.acc-c li::marker{color:var(--ink-40)}
.acc-c .note{background:var(--mint-soft);border-radius:var(--r2);padding:18px 20px;font-size:15px;color:var(--ink);line-height:1.6}
.acc-c .warn{background:var(--apricot-soft);border-radius:var(--r2);padding:18px 20px;font-size:15px;color:var(--ink);line-height:1.6}
.acc-c table{width:100%;border-collapse:collapse;font-size:15px}
.acc-c th{text-align:start;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);font-weight:500;padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
.acc-c td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-70);vertical-align:top}
.acc-c td:first-child{color:var(--ink);font-weight:500}
html[dir="rtl"] .acc-c th,html[dir="rtl"] .acc-c td{padding:0 0 10px 14px}

/* legal chrome */
.legal-hero{background:var(--paper-2);border-bottom:1px solid var(--line)}
.toc{position:sticky;top:96px;align-self:start;display:none}
@media(min-width:1040px){.toc{display:block}}
.toc a{display:block;padding:8px 0 8px 14px;border-inline-start:1.5px solid var(--line);font-size:14px;color:var(--ink-55)}
.toc a:hover{border-color:var(--ink);color:var(--ink)}
.legal-grid{display:grid;gap:clamp(28px,4vw,64px)}
@media(min-width:1040px){.legal-grid{grid-template-columns:236px 1fr}}
.doclinks{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.doclinks{grid-template-columns:repeat(4,1fr)}}
.doclinks a{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
.doclinks a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.doclinks a b{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.doclinks a span{font-size:13.5px;color:var(--ink-55);line-height:1.45}
.meta-grid{display:grid;gap:0}
.meta-grid div{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 0;border-bottom:1px solid var(--line)}
@media(min-width:640px){.meta-grid div{grid-template-columns:220px 1fr;gap:20px}}
.meta-grid dt,.meta-grid b{font-family:var(--fm);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);font-weight:500}
.meta-grid dd,.meta-grid span{font-size:16px;color:var(--ink)}

/* ── forms ── */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--fm);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-40)}
.in{height:54px;padding:0 18px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font-size:16px;outline:none;transition:box-shadow .2s;width:100%}
textarea.in{height:auto;min-height:130px;padding:15px 18px;resize:vertical;line-height:1.55}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-55) 50%),linear-gradient(135deg,var(--ink-55) 50%,transparent 50%);background-position:calc(100% - 21px) 24px,calc(100% - 16px) 24px;background-size:5px 5px;background-repeat:no-repeat}
.in:focus{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--mint-soft)}
.in::placeholder{color:var(--ink-40)}

/* ── footer ── */
.ftr{background:var(--ink);color:#fff;padding-block:clamp(56px,6vw,92px) 32px}
.ftr a{color:rgba(255,255,255,.76);font-size:15px}
.ftr a:hover{color:var(--mint)}
.ftr h4{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:16px;font-weight:500}
.ftr-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.ftr-logo{height:26px;width:auto}
.ftr-mark{display:block;width:100%;height:auto;margin-top:clamp(40px,5vw,72px);opacity:.3;user-select:none;pointer-events:none}

/* reveal */
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.is-vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none}}

/* misc */
@media(min-width:1040px){.c-5{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}}
@media(min-width:620px)and (max-width:1039px){.c-5{grid-template-columns:1fr 1fr}}
.only-lg{display:none!important}
@media(min-width:1040px){.only-lg{display:inline-flex!important}.drop{display:block}}
.drop{display:none}
@media(min-width:900px){.offset-y{transform:translateY(38px)}}
.strip{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.strip{grid-template-columns:repeat(4,1fr);gap:20px}}
.svc-plain{background:var(--mint);display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.svc-plain::after{display:none}
.svc-plain .svc-t{position:static;inset:auto;color:var(--ink)}
.svc-plain .svc-t small{color:var(--ink-70)}
.svc-apri{background:var(--apricot-2)}
[data-lang-lock="fr"]{margin-inline-end:auto}
.formstatus{padding:13px 18px;border-radius:var(--r);font-size:15px;line-height:1.5}
.formstatus.ok{background:var(--mint);color:var(--ink)}
.formstatus.err{background:var(--apricot-2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(181,101,31,.35)}
.formstatus.pending{background:var(--paper-3);color:var(--ink-55)}
#ctcount{align-self:flex-end;color:var(--ink-40);font-family:var(--fm);font-size:11.5px}
.hide{display:none!important}
.center{text-align:center}
.maxw-46{max-width:46ch}.maxw-56{max-width:56ch}
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:80;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:flex;gap:10px}
@media(min-width:760px){.sticky-cta{display:none}}
.sticky-cta .btn{flex:1;height:48px;font-size:14.5px}
@media(max-width:759px){body{padding-bottom:76px}}

/* ══ Carte Côte d'Ivoire ══ */
.mapwrap{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:940px){.mapwrap{grid-template-columns:1.15fr 1fr}}
.cimap{width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.cimap .land{fill:rgba(255,255,255,.075);stroke:var(--mint);stroke-width:1.6;stroke-linejoin:round}
.cimap .soon{fill:rgba(255,255,255,.3)}
.cimap .soon-lbl{fill:rgba(255,255,255,.64);font-family:var(--fm);font-size:15px;letter-spacing:.06em}
.cimap .live{fill:var(--mint)}
.cimap .live-lbl{fill:#fff;font-family:var(--fs);font-weight:600;font-size:23px;letter-spacing:-.01em}
.cimap .halo{fill:var(--mint);opacity:.28;transform-box:fill-box;transform-origin:center;animation:ping 2.8s cubic-bezier(.2,.7,.2,1) infinite}
.cimap .halo2{animation-delay:1.4s}
@keyframes ping{0%{transform:scale(.5);opacity:.42}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
.zonelist{display:flex;flex-wrap:wrap;gap:9px}
.zonelist li{list-style:none}
.zone{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500}
.zone-live{background:var(--mint);color:var(--ink)}
.zone-soon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:rgba(255,255,255,.72)}
.zone-soon .zdot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}

/* ══ Bande éditoriale (alternative aux grilles de cartes) ══ */
.edito-list{border-top:1px solid var(--line-w)}
.edito-list li{list-style:none;display:grid;gap:6px 26px;padding:22px 0;border-bottom:1px solid var(--line-w)}
@media(min-width:760px){.edito-list li{grid-template-columns:44px 1fr 1.25fr;align-items:baseline}}
.edito-list .n{font-family:var(--fm);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.62)}
.edito-list b{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff}
.edito-list p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.76)}

/* ══ Frise numérotée (comment ça marche) ══ */
.frise{display:grid;gap:0;counter-reset:f}
@media(min-width:900px){.frise{grid-template-columns:repeat(4,1fr)}}
.frise > li{list-style:none;position:relative;padding:26px 24px 26px 0;border-top:1.5px solid var(--ink)}
@media(max-width:899px){.frise > li{padding-right:0}}
.frise > li::before{counter-increment:f;content:counter(f,decimal-leading-zero);position:absolute;top:-1.5px;left:0;transform:translateY(-50%);background:var(--paper-2);padding-right:10px;font-family:var(--fm);font-size:12px;letter-spacing:.16em;color:var(--ink-40)}
.frise h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:14px}
.frise p{margin-top:7px;font-size:15.5px;line-height:1.6;color:var(--ink-70)}

/* ══ Bandeau de logos / moyens de paiement ══ */
.paybar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.paybar .lbl{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40);margin-inline-end:6px}

/* ══ Store buttons ══ */
.store{display:inline-flex;align-items:center;gap:11px;height:58px;padding:0 22px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);color:#fff;transition:background .25s,box-shadow .25s}
.store:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
.store svg{flex:none}
.store span{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.store small{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.72}
.store b{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.store[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ══ Design system reference page ══ */
.ds-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sw{border-radius:var(--r2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.sw i{display:block;height:78px}
.sw span{display:block;padding:11px 13px;font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--ink-55);line-height:1.5}
.sw span b{display:block;color:var(--ink);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;margin-bottom:3px}
.ds-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ds-box{padding:clamp(20px,2.4vw,30px);border-radius:var(--r3);box-shadow:inset 0 0 0 1px var(--line)}
.ds-spec{font-family:var(--fm);font-size:11.5px;color:var(--ink-40);letter-spacing:.04em}
.sk{background:linear-gradient(90deg,var(--paper-3) 25%,var(--paper-2) 37%,var(--paper-3) 63%);background-size:400% 100%;animation:sk 1.4s ease-in-out infinite;border-radius:8px;height:14px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}