/* Batira Négoce : page de présentation (negoce.batira.pro) */
@font-face{font-family:"Jakarta";font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Kufi";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/noto-kufi-arabic-arabic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
:root{--ink:#14213D;--ink-2:#46506A;--ink-3:#727B90;--bg:#F6F1EA;--sheet:#fff;--line:#E7DFD3;--or:#D9531E;--or-d:#B9441A;--gold:#FFD66B;--ok:#1F8A5B;--r:16px;--h:"Jakarta","Kufi",system-ui,sans-serif;--b:"Inter","Kufi",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
[dir=rtl] body{font-family:"Kufi","Inter",system-ui,sans-serif;line-height:1.85}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:"Kufi",var(--h);letter-spacing:0!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.w{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--h);margin:0;line-height:1.12;letter-spacing:-.03em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.or{background:var(--or);color:#fff;box-shadow:0 14px 30px -14px rgba(217,83,30,.9)}.btn.or:hover{background:var(--or-d)}
.btn.ln{border-color:rgba(20,33,61,.18);color:var(--ink);background:rgba(255,255,255,.6)}.btn.ln:hover{border-color:var(--ink)}
.btn.wh{background:#fff;color:var(--ink)}
.btn.sm{min-height:40px;padding:8px 16px;font-size:14.5px}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* en-tête */
.top{position:sticky;top:0;z-index:20;background:rgba(246,241,234,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,33,61,.06)}
.top .w{display:flex;align-items:center;gap:22px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--h);font-weight:800;font-size:22px;letter-spacing:-.04em}
.brand img{width:34px;height:34px}.brand em{font-style:normal;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);padding:4px 9px;border-radius:7px}
[dir=rtl] .brand em{letter-spacing:0}
.top nav{display:flex;gap:22px;margin-inline-start:auto}.top nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--ink-2)}.top nav a:hover{color:var(--ink)}
.top .act{display:flex;gap:10px;align-items:center}
.lang{font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px}
/* héros */
.hero{padding:70px 0 40px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-30% -10% auto auto;width:780px;height:780px;background:radial-gradient(closest-side,rgba(255,214,107,.55),rgba(255,214,107,0));pointer-events:none}
[dir=rtl] .hero:before{inset:-30% auto auto -10%}
.hero .w{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.kick{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-d);margin:0 0 18px}
[dir=rtl] .kick{letter-spacing:0;font-size:15px}
.kick i{width:22px;height:2px;background:var(--or)}
.hero h1{font-size:clamp(38px,5.2vw,64px);font-weight:800}
.hero h1 b{color:var(--or)}
.hero .lead{font-size:20px;color:var(--ink-2);margin:22px 0 30px;max-width:560px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .note{margin-top:16px;font-size:14.5px;color:var(--ink-3)}
.shot{position:relative}
.frame{border-radius:18px;background:#fff;box-shadow:0 50px 100px -40px rgba(20,33,61,.55),0 0 0 1px rgba(20,33,61,.08);overflow:hidden}
.frame .bar{height:30px;background:#EFE9E0;display:flex;gap:6px;align-items:center;padding:0 12px}.frame .bar i{width:10px;height:10px;border-radius:50%;background:#D9CFC2}
.phone{position:absolute;width:31%;bottom:-34px;inset-inline-start:-34px;border-radius:26px;border:7px solid var(--ink);overflow:hidden;box-shadow:0 30px 60px -20px rgba(20,33,61,.6);background:#fff}
.phone img{aspect-ratio:9/16;object-fit:cover;object-position:top}
/* bande « fini le carnet » */
.pains{padding:70px 0 30px}
.sec-h{max-width:720px;margin:0 0 34px}
.sec-h h2{font-size:clamp(30px,3.6vw,44px);font-weight:800}
.sec-h p{color:var(--ink-2);font-size:18.5px;margin:14px 0 0}
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pc{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.pc s{display:block;color:var(--ink-3);font-size:15px;text-decoration-color:var(--or);text-decoration-thickness:2px;margin-bottom:8px}
.pc b{display:block;font-family:var(--h);font-size:18.5px;line-height:1.3;margin-bottom:6px}
.pc p{margin:0;font-size:15px;color:var(--ink-2)}
/* fonctionnalités */
.feat{padding:60px 0}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fc{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative}
.fc .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#FDEDE3;color:var(--or-d);margin-bottom:16px}
.fc .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fc h3{font-size:19px;margin-bottom:8px}
.fc p{margin:0;color:var(--ink-2);font-size:15.5px}
.fc ul{margin:10px 0 0;padding-inline-start:18px;color:var(--ink-2);font-size:15px}
.fc.dk{background:var(--ink);color:#fff;border-color:var(--ink)}.fc.dk p,.fc.dk ul{color:#C9D0DE}.fc.dk .ic{background:rgba(255,214,107,.14);color:var(--gold)}
/* captures */
.gal{padding:50px 0}
.gg{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gi figure{margin:0}.gi figcaption{margin-top:12px;font-size:15.5px;color:var(--ink-2)}.gi figcaption b{color:var(--ink)}
/* réseau */
.net{padding:60px 0}
.nb{background:var(--ink);color:#fff;border-radius:28px;padding:50px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;background-image:radial-gradient(80% 120% at 100% 0%,rgba(217,83,30,.45),transparent 60%)}
[dir=rtl] .nb{background-image:radial-gradient(80% 120% at 0% 0%,rgba(217,83,30,.45),transparent 60%)}
.nb h2{font-size:clamp(28px,3.2vw,40px)}.nb p{color:#C9D0DE;font-size:17.5px}
.nb .card{background:#fff;color:var(--ink);border-radius:18px;padding:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.nb .card .t{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.nb .card .t span{font-size:12px;font-weight:700;background:#FDEDE3;color:var(--or-d);padding:3px 9px;border-radius:99px}
.nb .card div.r{display:flex;justify-content:space-between;font-size:14.5px;padding:7px 0;border-top:1px solid #EEE7DD}
/* tarifs */
.price{padding:70px 0}
.pr{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pl{background:var(--sheet);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column}
.pl.hl{border:2px solid var(--or);box-shadow:0 30px 60px -36px rgba(217,83,30,.8);position:relative}
.pl.hl:before{content:attr(data-tag);position:absolute;top:-13px;inset-inline-start:24px;background:var(--or);color:#fff;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:99px}
.pl h3{font-size:22px}.pl .who{color:var(--ink-3);font-size:15px;margin:4px 0 18px}
.pl .p{font-family:var(--h);font-size:44px;font-weight:800;letter-spacing:-.03em}.pl .p small{font-size:16px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.pl ul{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:9px;font-size:15.5px}
.pl li{display:flex;gap:9px}.pl li:before{content:"✓";color:var(--ok);font-weight:800}
.pl .btn{margin-top:auto}
.pnote{margin-top:18px;color:var(--ink-3);font-size:14.5px;text-align:center}
/* questions */
.faq{padding:40px 0 70px}
.fq{max-width:860px;display:grid;gap:10px}
.fq details{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.fq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.fq summary::-webkit-details-marker{display:none}.fq summary:after{content:"+";font-size:22px;line-height:1;color:var(--or)}.fq details[open] summary:after{content:"−"}
.fq p{margin:10px 0 0;color:var(--ink-2);font-size:15.5px}
/* appel final */
.end{padding:0 0 80px}
.eb{background:linear-gradient(135deg,#E06A33,#C4572E);color:#fff;border-radius:28px;padding:54px;text-align:center}
.eb h2{font-size:clamp(28px,3.4vw,42px)}.eb p{font-size:18px;opacity:.92;margin:12px auto 26px;max-width:620px}
.eb .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.eb .btn.ln{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--ink-3);font-size:14.5px}
footer .w{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}footer a{text-decoration:none}footer a:hover{color:var(--ink)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:980px){.hero .w,.nb{grid-template-columns:1fr}.pg{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}.pr{grid-template-columns:1fr}.gg{grid-template-columns:1fr}.top nav{display:none}.phone{inset-inline-start:auto;inset-inline-end:-10px;width:34%}.hero{padding-top:40px}}
@media (max-width:620px){body{font-size:16px}.pg,.fg{grid-template-columns:1fr}.nb,.eb{padding:30px 22px}.top .act .btn.ln{display:none}.top .w{gap:12px}.brand{font-size:19px}.brand em{font-size:11px}.hero .lead{font-size:18px}.btn{width:100%}.hero .ctas .btn,.eb .ctas .btn{width:100%}.top .act .btn{width:auto}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.kick.gd{color:var(--gold)}.kick.gd i{background:var(--gold)}
.brand em{white-space:nowrap}@media (max-width:620px){[dir=rtl] .brand em{display:none}.lang{padding:6px 10px;font-size:13px}}