/* ============================================================
   Fiikra Agency — Style pages locales
   Néo-brutaliste · dark · neon-blue · grid pattern
   ============================================================ */

:root{
  --bg:#050505;
  --card:#111111;
  --fg:#ffffff;
  --mute:#9ca3af;
  --neon:#3B82F6;
  --neon-purple:#8B5CF6;
  --acid:#CCFF00;
  --gold:#D4AF37;
  --border:#333333;
  --border-soft:#1a1a1a;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:#E0E0E0;
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;
}
body[dir="rtl"]{font-family:'Almarai',sans-serif;direction:rtl}

::selection{background:var(--neon);color:#000}

a{color:var(--fg);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:3px
}

img{max-width:100%;height:auto;display:block}

.wrap{max-width:1400px;margin:0 auto;padding:0 1.5rem}

/* ===== Skip-link a11y ===== */
.skip{
  position:absolute;left:-9999px;top:0;
  background:#fff;color:#000;padding:.6rem 1rem;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
  z-index:9999;text-transform:uppercase
}
.skip:focus{left:8px;top:8px;position:fixed}

/* ===== Navigation top ===== */
nav.top{
  position:sticky;top:0;
  background:#050505;
  border-bottom:2px solid var(--border);
  z-index:50;
}
nav.top .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:80px;padding:0 1.5rem;
}
nav.top a.brand{
  font-family:'Syne',sans-serif;
  font-weight:800;text-transform:uppercase;
  letter-spacing:-.04em;font-size:1.6rem;
  color:#fff;display:flex;gap:.6rem;align-items:center;
  z-index:60;
}
nav.top a.brand span{
  width:16px;height:16px;background:var(--neon);
  display:inline-block
}
nav.top ul{
  display:none;gap:2rem;list-style:none;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;
}
nav.top ul a{color:var(--mute);position:relative;padding-bottom:4px}
nav.top ul a::before{
  content:"";position:absolute;bottom:-5px;left:0;
  width:0%;height:2px;background:var(--neon);
  transition:width .3s ease
}
nav.top ul a:hover::before,
nav.top ul a[aria-current]::before{width:100%}
nav.top ul a:hover,
nav.top ul a[aria-current]{color:#fff}

.cta-nav{
  background:#fff;color:#000;font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;font-size:.7rem;letter-spacing:.15em;
  font-weight:700;padding:.8rem 1.4rem;border:2px solid #fff;
  transition:all .15s ease
}
.cta-nav:hover{background:var(--neon);color:#fff;border-color:var(--neon)}

.burger{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:2px solid #fff;
  background:transparent;color:#fff;cursor:pointer;
  transition:all .15s
}
.burger:hover{background:var(--neon);border-color:var(--neon)}
.burger svg{width:24px;height:24px}

@media(min-width:1024px){
  nav.top ul{display:flex}
  .burger{display:none}
}

/* ===== Menu mobile ===== */
#mobileMenu{
  position:fixed;inset:0;background:#050505;
  z-index:40;transform:translateX(100%);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1);
  padding:8rem 1.5rem 2rem;overflow-y:auto;
  display:flex;flex-direction:column;gap:1.5rem;
  background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;
}
#mobileMenu.open{transform:translateX(0)}
#mobileMenu a{
  font-family:'Syne',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:2rem;
  color:#fff;letter-spacing:-.02em;text-align:center;
  padding:.5rem 0;transition:color .15s
}
#mobileMenu a:hover{color:var(--neon)}

/* ===== Hero ===== */
header.hero{
  position:relative;padding:6rem 0 4rem;
  border-bottom:2px solid var(--border);
  background:#080808;overflow:hidden;
}
header.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(59,130,246,.12), transparent 60%);
  pointer-events:none;
}
@media(min-width:1024px){
  header.hero{padding:8rem 0 5rem}
}

.chip{
  display:inline-block;
  border:1px solid var(--neon);color:var(--neon);
  padding:.4rem .9rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  margin-bottom:1.5rem;background:rgba(59,130,246,.05)
}
.chip.acid{border-color:var(--acid);color:var(--acid)}

h1{
  font-family:'Syne',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(3rem,10vw,7rem);color:#fff;margin-bottom:1.75rem;
}
h1 .accent{
  color:transparent;background:linear-gradient(90deg,var(--neon),#fff);
  -webkit-background-clip:text;background-clip:text;
}

.lead{
  font-family:'JetBrains Mono',monospace;
  font-size:.95rem;color:#cbd5e1;max-width:640px;
  border-left:2px solid var(--neon);padding-left:1.25rem;
  line-height:1.7;margin-bottom:2rem
}
[dir="rtl"] .lead{
  border-left:none;border-right:2px solid var(--neon);
  padding-left:0;padding-right:1.25rem
}

/* ===== Sections ===== */
main section{
  padding:5rem 0;border-bottom:2px solid var(--border);
  position:relative;
}
main section:nth-child(even){background:#080808}

h2{
  font-family:'Syne',sans-serif;text-transform:uppercase;
  font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,5.5vw,3.5rem);color:#fff;
  margin-bottom:2rem;
}
h2 .accent{color:var(--neon)}

h3{
  font-family:'Syne',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:1.2rem;color:var(--acid);
  margin:0 0 .75rem;letter-spacing:-.01em;
}

p{margin-bottom:1.1rem;color:#d1d5db;font-size:1.02rem}
@media(min-width:768px){p{font-size:1.1rem}}

ul.bullets{
  list-style:none;
  border-left:2px solid var(--border);
  padding-left:1.5rem;margin:1.25rem 0 1.75rem;
}
[dir="rtl"] ul.bullets{
  border-left:none;border-right:2px solid var(--border);
  padding-left:0;padding-right:1.5rem
}
ul.bullets li{
  margin-bottom:.75rem;color:#cbd5e1;
  font-family:'Space Grotesk',sans-serif
}
ul.bullets li::before{
  content:"> ";color:var(--neon);font-weight:bold;
  font-family:'JetBrains Mono',monospace;
}

/* ===== Cards grid ===== */
.grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:2.5rem;
}

.card{
  background:var(--card);
  border:2px solid var(--border);
  padding:1.75rem;
  transition:border-color .2s,transform .15s,box-shadow .2s;
  position:relative;
}
.card:hover,.card:focus-within{
  border-color:var(--neon);
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 0 var(--neon);
}
.card h3{margin-top:0}
.card p{font-size:.95rem;margin-bottom:1rem}

/* ===== CTA bouton néo-brutal ===== */
.cta{
  display:inline-block;
  background:#fff;color:#000;
  font-weight:700;padding:1rem 1.6rem;
  border:2px solid #fff;
  text-transform:uppercase;font-size:.8rem;letter-spacing:.15em;
  font-family:'JetBrains Mono',monospace;
  box-shadow:4px 4px 0 0 var(--neon);
  transition:transform .1s,box-shadow .1s;
  margin-top:1.5rem;cursor:pointer;
}
.cta:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 0 var(--neon);
}
.cta:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 0 var(--neon);
}
.cta-secondary{
  background:transparent;color:#fff;border-color:#fff;
  box-shadow:4px 4px 0 0 #fff;
}
.cta-secondary:hover{
  box-shadow:6px 6px 0 0 var(--neon);
  border-color:var(--neon);color:var(--neon)
}
.cta-small{padding:.55rem .9rem;font-size:.65rem;margin-top:.75rem}

/* ===== FAQ accordéon ===== */
details{
  border:2px solid var(--border);
  padding:1.25rem 1.5rem;margin-bottom:1rem;
  background:var(--card);transition:border-color .15s;
}
details[open]{border-color:var(--neon)}
summary{
  cursor:pointer;list-style:none;
  font-family:'Syne',sans-serif;font-weight:700;
  color:#fff;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";color:var(--neon);font-size:1.5rem;
  font-family:'JetBrains Mono',monospace;line-height:1;
  transition:transform .2s;
}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:1rem;color:#cbd5e1;font-size:1rem;margin-bottom:0}

/* ===== Breadcrumb ===== */
.breadcrumb{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--mute);margin-bottom:1.5rem;display:flex;gap:.5rem;
  flex-wrap:wrap;align-items:center;
}
.breadcrumb a{color:var(--mute)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{color:var(--neon)}

/* ===== Footer ===== */
footer{
  padding:4rem 0 2rem;
  background:#030303;border-top:2px solid var(--border);
  color:var(--mute);font-size:.95rem;
}
footer .grid-foot{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-bottom:3rem;
}
footer h4{
  font-family:'Syne',sans-serif;text-transform:uppercase;
  font-size:.85rem;color:#fff;margin-bottom:1rem;
  letter-spacing:.1em;
}
footer ul{list-style:none}
footer li{margin-bottom:.5rem}
footer a{color:var(--mute);transition:color .15s}
footer a:hover{color:#fff}
footer .copyright{
  border-top:1px solid var(--border-soft);
  padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--mute)
}

/* ===== Marquee bandeau marchés ===== */
.marquee{
  overflow:hidden;border-top:2px solid var(--border);
  border-bottom:2px solid var(--border);
  background:#050505;padding:1rem 0;
}
.marquee-track{
  display:inline-flex;gap:2rem;
  animation:marquee 24s linear infinite;
  white-space:nowrap;
}
.marquee-track span{
  font-family:'Syne',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;
  font-size:1.6rem;color:#fff;
}
.marquee-track span.dim{color:var(--mute)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ===== Stats row ===== */
.stats{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:2px solid var(--border);margin-top:2.5rem;background:var(--card);
}
.stat{
  padding:2rem 1.5rem;text-align:center;
  border-right:2px solid var(--border);
}
.stat:last-child{border-right:none}
.stat .num{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(2rem,5vw,3rem);color:var(--neon);
  display:block;line-height:1;margin-bottom:.5rem;
}
.stat .lbl{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);
}
@media(max-width:600px){
  .stat{border-right:none;border-bottom:2px solid var(--border)}
  .stat:last-child{border-bottom:none}
}

/* ===== Print ===== */
@media print{
  nav.top,#mobileMenu,.cta,footer .copyright{display:none}
  body{background:#fff;color:#000}
}