/* ---------- noir immediat, jamais de flash blanc ---------- */
html, body { background: #000000 !important; color: #ffffff; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-italic.woff2") format("woff2");
}

:root {
  /* socle sombre repris de Vesper */
  --bg: #000000;
  --text: #ffffff;
  --muted: #9a9a9a;
  --dim: #d8d8d8;
  --border: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.10);
  --card: rgba(255, 255, 255, 0.035);

  /* palette ICOTEKIA transposee en accents sur fond noir
     (Uranian #a3cef1 / Air Superiority #6096ba / Yinmn #044a8a) */
  --accent: #a3cef1;
  --accent-2: #6096ba;
  --accent-deep: #044a8a;
  --glow: rgba(163, 206, 241, 0.30);
  --glow-soft: rgba(163, 206, 241, 0.16);

  --ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --shell: 1240px;
  --gut: 40px;
  --h1: 60px;
  --h2: 38px;
  --lede: 17px;
  --nav-h: 40px;
  --btn-h: 42px;
  --sec-y: 120px;
}

html, body {
  background: #000000;
  background: var(--bg, #000000);
  color: #ffffff;
  color: var(--text, #ffffff);
}
html { scroll-behavior: smooth; }

body {
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
svg { display: block; }
img, video { max-width: 100%; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

/* grain global */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ================= HEADER ================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px;
  padding: 18px var(--gut);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border-soft);
}

.logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 16px; font-weight: 600; letter-spacing: 0.14em; color: #fff; }
.logo-mark { width: 26px; height: 26px; flex: none; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 8px; justify-self: center; }
.nav a {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--nav-h); padding: 0 16px;
  border: 1px solid rgba(198, 198, 198, 0.42); border-radius: 7px;
  background: linear-gradient(105deg, #050505 0%, #232323 48%, #3f3f3f 100%);
  color: #f3f3f3; font-size: 13.5px; letter-spacing: -0.01em; white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nav a::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.6s ease;
}
.nav a:hover { border-color: rgba(163, 206, 241, 0.75); background: linear-gradient(105deg, #0d1218 0%, #2c3946 45%, #48606f 100%); box-shadow: 0 0 18px var(--glow-soft); }
.nav a:hover::before { transform: translateX(120%); }
.nav a[aria-current="page"] { border-color: rgba(163, 206, 241, 0.6); color: #fff; }

.header-right { justify-self: end; display: inline-flex; align-items: center; gap: 10px; }

/* selecteur de langue */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; height: var(--nav-h); padding: 0 12px;
  border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,0.03);
  color: var(--dim); font-size: 13px; cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.lang-btn:hover { border-color: rgba(163,206,241,0.55); color: #fff; background: rgba(163,206,241,0.07); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
  display: none; flex-direction: column; gap: 2px; padding: 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lang.is-open .lang-menu { display: flex; }
.lang-menu a { padding: 9px 11px; border-radius: 6px; font-size: 13.5px; color: var(--dim); transition: background 0.2s ease, color 0.2s ease; }
.lang-menu a:hover { background: rgba(163, 206, 241, 0.12); color: #fff; }

/* ================= BOUTONS ================= */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 18px; border-radius: 7px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 48%, transparent 76%);
  transform: translateX(-130%); transition: transform 0.65s ease;
}
.btn:hover::after { transform: translateX(130%); }

.btn-solid {
  background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%);
  color: #06202f; border: 1px solid #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
.btn-solid:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 42%, #c9dcf0 100%);
  border-color: #eaf3ff;
  box-shadow: inset 0 1px 0 #fff, 0 0 26px var(--glow), 0 8px 18px rgba(255,255,255,0.12);
}

.btn-ghost {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 46%, rgba(96,150,186,0.12));
  color: #fff; border: 1px solid rgba(198,198,198,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.btn-ghost:hover {
  background: linear-gradient(135deg, rgba(163,206,241,0.20), rgba(0,0,0,0.36) 48%, rgba(96,150,186,0.18));
  border-color: rgba(163,206,241,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 24px var(--glow);
}

/* ================= HERO ================= */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; justify-content: center; padding: 120px 0 96px; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #000; }
.hero-fallback {
  position: absolute; inset: 0; z-index: 0; background-color: #000;
  background-image:
    radial-gradient(62% 46% at 50% 40%, rgba(163,206,241,0.20) 0%, rgba(163,206,241,0) 72%),
    radial-gradient(112% 70% at 50% 8%, rgba(96,150,186,0.20) 0%, rgba(4,74,138,0.10) 38%, rgba(0,0,0,0) 70%);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 20%, rgba(0,0,0,0) 34%),
    linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.80) 20%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0) 62%);
}
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; width: 100%; padding: 0 var(--gut); }

.badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 9px 16px; border: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent-2) 0%, #1b2a36 52%, #06090c 100%);
  color: #f2f7fc; font-size: 12.5px; letter-spacing: -0.01em;
}
.badge-star { width: 18px; height: 20px; flex: none; filter: drop-shadow(0 0 4px var(--glow)); }

.hero h1 { display: flex; flex-direction: column; align-items: center; font-size: var(--h1); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; }
.headline-line { display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em; }
.headline-text { display: block; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.03em; color: var(--accent); }

.lede { max-width: 620px; margin-top: 20px; color: var(--muted); font-size: var(--lede); line-height: 1.55; letter-spacing: -0.015em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ================= SECTIONS ================= */
.sec { position: relative; padding: var(--sec-y) 0; }
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.eyebrow { display: inline-block; margin-bottom: 14px; color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.sec h2 { font-size: var(--h2); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; }
.sec h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--accent); }
.sec-sub { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; overflow: hidden;
  padding: 26px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--card);
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.card:hover { border-color: rgba(163,206,241,0.42); background: rgba(163,206,241,0.05); box-shadow: 0 0 30px rgba(163,206,241,0.08); transform: translateY(-2px); }
.card h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* frictions */
.friction { display: flex; align-items: flex-start; gap: 14px; padding: 22px; }
.friction svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }
.friction p { color: var(--dim); font-size: 15px; line-height: 1.5; }

/* process */
.step { padding-top: 30px; border-top: 1px solid var(--border-soft); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 18px; border: 1px solid rgba(163,206,241,0.4); border-radius: 8px; background: rgba(163,206,241,0.08); color: var(--accent); font-size: 13px; font-weight: 600; }
.step h3 { font-size: 17.5px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.62; }

/* offres */
.offer { display: flex; flex-direction: column; padding: 30px; }
.offer.is-featured { border-color: rgba(163,206,241,0.45); background: linear-gradient(180deg, rgba(163,206,241,0.09), rgba(163,206,241,0.02)); }
.offer-tag { align-self: flex-start; margin-bottom: 16px; padding: 5px 10px; border-radius: 999px; background: rgba(163,206,241,0.14); color: var(--accent); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.offer h3 { font-size: 19px; margin-bottom: 12px; }
.offer p { flex: 1; }
.offer .btn { margin-top: 22px; align-self: flex-start; }

/* impact */
.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-box { padding: 40px 26px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--card); text-align: center; }
.stat-n { font-size: 54px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; background: linear-gradient(180deg, #ffffff 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-l { margin-top: 12px; color: var(--muted); font-size: 14px; letter-spacing: -0.01em; }

/* cas concrets */
.case { padding: 30px; }
.case h3 { font-size: 18px; margin-bottom: 20px; }
.ba { padding: 16px 0; border-top: 1px solid var(--border-soft); }
.ba:first-of-type { border-top: 0; padding-top: 0; }
.ba-k { display: block; margin-bottom: 7px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.ba-before .ba-k { color: #7c7c7c; }
.ba-after .ba-k { color: var(--accent); }
.ba p { color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.ba-before p { color: var(--muted); }

/* faq */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s ease;
}
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-item p { padding: 0 0 26px; max-width: 680px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

/* cta final */
.cta-final { position: relative; overflow: hidden; padding: 84px 40px; border: 1px solid var(--border-soft); border-radius: 18px; text-align: center; background:
  radial-gradient(80% 130% at 50% 118%, rgba(163,206,241,0.20) 0%, rgba(4,74,138,0.10) 40%, rgba(0,0,0,0) 72%), rgba(255,255,255,0.02); }
.cta-final h2 { font-size: 34px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.18; max-width: 720px; margin: 0 auto; }
.cta-final p { max-width: 620px; margin: 18px auto 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.cta-final .hero-actions { margin-top: 30px; }

/* ================= FOOTER ================= */
.footer { border-top: 1px solid var(--border-soft); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-tag { margin-top: 16px; max-width: 300px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.footer h4 { margin-bottom: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { color: var(--muted); font-size: 14.5px; transition: color 0.25s ease; }
.footer ul a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border-soft); color: #7c7c7c; font-size: 13px; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { transition: color 0.25s ease; }
.footer-legal a:hover { color: var(--accent); }

/* ================= BURGER + MENU MOBILE ================= */
.burger { display: none; place-content: center; justify-items: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 7px; background: rgba(8,8,8,0.55); cursor: pointer; z-index: 60; }
.burger span { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: #fff; transition: transform 0.25s ease, opacity 0.2s ease; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-backdrop { display: none; }

/* ================= ANIMATIONS ================= */
.appear {
  opacity: 1;
  animation-duration: 1.05s; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: var(--d, 0.08s);
}
.appear--scale { animation-name: in-scale; }
.appear--soft  { animation-name: in-soft; }
.appear--mask  { animation-name: in-mask; }
.appear--pop   { animation-name: in-pop; }
.appear--btn   { animation-name: in-btn; }
.appear--side  { animation-name: in-side; }
.lede.appear { animation-duration: 1.25s; }

@keyframes in-scale { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: scale(1); } }
@keyframes in-soft  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes in-mask  { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: translateY(0); } }
@keyframes in-pop   { 0% { opacity: 0; transform: scale(0.9); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes in-btn   { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes in-side  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes in-star  { 0% { opacity: 0; transform: scale(0.2) rotate(-50deg); } 65% { opacity: 1; transform: scale(1.2) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes in-em    { from { opacity: 0.35; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.badge-star { animation: in-star 0.9s cubic-bezier(0.16,1,0.3,1) 0.28s both; }
.hero h1 em { animation: in-em 1.2s cubic-bezier(0.16,1,0.3,1) 0.72s both; }
.appear.is-in { animation: none; opacity: 1; transform: none; clip-path: none; filter: none; }

/* reveal au scroll : etat de repos visible, jamais de page blanche */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--rd, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1279px) {
  :root { --h1: 46px; --h2: 32px; --gut: 28px; --sec-y: 96px; }
}
@media (max-width: 980px) {
  :root { --h1: 40px; --h2: 29px; --sec-y: 80px; }
  .grid-3, .impact { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --gut: 20px; --h1: 34px; --h2: 26px; --btn-h: 46px; --sec-y: 72px; }
  .header { grid-template-columns: 1fr auto auto; gap: 10px; padding: 14px var(--gut); padding-top: max(14px, env(safe-area-inset-top)); }
  .logo, .header-right, .burger { position: relative; z-index: 80; }
  .burger { display: grid; }
  .header-cta { display: none; }

  .menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(8,8,8,0.42); opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease, backdrop-filter 0.28s ease;
  }
  body.menu-open .menu-backdrop { opacity: 1; visibility: visible; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

  .nav {
    position: fixed; inset: 0; z-index: 45; justify-self: stretch;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 12px;
    padding: 96px 22px 32px; padding-top: max(96px, calc(env(safe-area-inset-top) + 88px));
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav a { width: 100%; height: 56px; font-size: 18px; border-radius: 10px; }
  body.menu-open { overflow: hidden; }

  .hero { padding: 110px 0 72px; }
  .grid-3, .grid-2, .impact { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .cta-final { padding: 56px 24px; }
  .cta-final h2 { font-size: 26px; }
  .stat-n { font-size: 44px; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  /* la pastille est longue en FR, on lui rend de l'air sous 560px */
  .badge { font-size: 11.5px; padding: 8px 12px; gap: 7px; }
  .badge-star { width: 15px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .appear, .hero h1 em, .badge-star { opacity: 1; transform: none; filter: none; }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* =======================================================================
   AJOUTS V2 : pages interieures, filtres, formulaire, texte legal, RTL
   ======================================================================= */

/* hero court des pages interieures */
.hero--page { min-height: 62vh; align-items: center; padding: 150px 0 80px; }
.hero--page .hero-copy { max-width: 860px; }
.hero--page h1 { font-size: clamp(30px, 4.4vw, 54px); }

/* bandeau de sous-titre sous un h1 de page */
.hero-note { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; color: var(--muted); font-size: 13.5px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* grille 4 colonnes */
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- catalogue d'agents --- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--border-soft); }
.filters-label { margin-inline-end: 4px; color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(255,255,255,0.03);
  color: var(--dim); font-size: 13px; cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.chip:hover { border-color: rgba(163,206,241,0.5); color: #fff; }
.chip[aria-pressed="true"] { border-color: rgba(163,206,241,0.8); background: rgba(163,206,241,0.14); color: var(--accent); }
.filters-count { margin-inline-start: auto; color: var(--muted); font-size: 13px; }

.agent { display: flex; flex-direction: column; padding: 24px; }
.agent-cat { align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(163,206,241,0.12); color: var(--accent); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.agent h3 { font-size: 16.5px; margin-bottom: 10px; }
.agent p { flex: 1; }
.agent-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tag { padding: 4px 9px; border: 1px solid var(--border-soft); border-radius: 5px; color: var(--muted); font-size: 11.5px; }
.tag--lvl { border-color: rgba(163,206,241,0.3); color: var(--accent-2); }
.agent[hidden] { display: none; }

/* --- applications --- */
.app { display: flex; flex-direction: column; padding: 30px; }
.app-kicker { color: var(--accent); font-size: 13px; margin-bottom: 12px; }
.app h3 { font-size: 21px; margin-bottom: 6px; }
.app p { flex: 1; margin-top: 10px; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* --- ressources --- */
.res { display: flex; flex-direction: column; padding: 28px; }
.res-type { align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(163,206,241,0.12); color: var(--accent); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.res h3 { font-size: 18px; line-height: 1.32; margin-bottom: 12px; }
.res p { flex: 1; }
.res-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; color: var(--muted); font-size: 13px; }
.theme-row { display: flex; flex-wrap: wrap; gap: 10px; }
.theme { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--card); color: var(--dim); font-size: 14px; transition: border-color 0.25s ease, color 0.25s ease; }
.theme:hover { border-color: rgba(163,206,241,0.45); color: #fff; }
.theme b { color: var(--muted); font-weight: 400; font-size: 12.5px; }

/* --- formulaire --- */
.form-wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { color: var(--dim); font-size: 13.5px; letter-spacing: -0.01em; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--border-soft); border-radius: 8px;
  background: rgba(255,255,255,0.03); color: #fff;
  font-family: inherit; font-size: 14.5px; line-height: 1.4;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6a6a6a; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(163,206,241,0.7);
  background: rgba(163,206,241,0.05); box-shadow: 0 0 0 3px rgba(163,206,241,0.12);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%239a9a9a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field select option { background: #0b0b0b; color: #fff; }
.form-note { margin-top: 8px; color: var(--muted); font-size: 13px; }
.aside-card { padding: 24px; }
.aside-card + .aside-card { margin-top: 16px; }
.aside-card h3 { font-size: 15.5px; margin-bottom: 9px; }
.aside-card a { color: var(--accent); }
.aside-card a:hover { text-decoration: underline; }

/* --- pages legales --- */
.legal { max-width: 780px; margin: 0 auto; }
.legal-updated { margin-bottom: 44px; padding: 12px 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 13.5px; }
.legal h2 { margin: 48px 0 16px; font-size: 21px; font-weight: 500; letter-spacing: -0.025em; color: #fff; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 13px; color: var(--muted); font-size: 15.5px; line-height: 1.72; }
.legal ul { margin: 0 0 18px; padding-inline-start: 20px; }
.legal li { margin-bottom: 9px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }
.legal-block { margin-bottom: 6px; color: var(--dim); font-size: 15.5px; line-height: 1.75; }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .form-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: 1fr; }
  .hero--page { min-height: auto; padding: 118px 0 56px; }
  .filters-count { margin-inline-start: 0; width: 100%; }
}

/* =======================================================================
   RTL : le site existe en arabe (dir="rtl" verifie sur icotekia.com/ar)
   ======================================================================= */
[dir="rtl"] { text-align: right; }
/* le crenage negatif latin abime l'ecriture arabe */
[dir="rtl"] .hero h1,
[dir="rtl"] .sec h2,
[dir="rtl"] .cta-final h2 { letter-spacing: 0; }
[dir="rtl"] .logo { letter-spacing: 0; }
[dir="rtl"] .hero-copy,
[dir="rtl"] .sec-head,
[dir="rtl"] .cta-final { text-align: center; }
/* l'entree laterale doit venir du cote oppose */
[dir="rtl"] @keyframes in-side { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
[dir="rtl"] .appear--side { animation-name: in-side-rtl; }
@keyframes in-side-rtl { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
/* le balayage de brillance part de l'autre bord */
[dir="rtl"] .btn::after { transform: translateX(130%); }
[dir="rtl"] .btn:hover::after { transform: translateX(-130%); }
[dir="rtl"] .nav a::before { transform: translateX(120%); }
[dir="rtl"] .nav a:hover::before { transform: translateX(-120%); }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .faq-item summary::after { transform: rotate(135deg) translate(-2px, -2px); }
[dir="rtl"] .faq-item[open] summary::after { transform: rotate(315deg) translate(-2px, -2px); }

/* Sur les heros courts des pages interieures, la copie est centree verticalement,
   donc pile sur la partie claire de l'onde. Le degrade du hero pleine hauteur
   (concu pour du texte en bas) ne suffit plus : on assombrit uniformement. */
.hero--page .hero-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.52) 26%, rgba(0, 0, 0, 0.46) 52%, rgba(0, 0, 0, 0.72) 82%, rgba(0, 0, 0, 0.94) 100%);
}

/* L'arabe ne connait pas l'italique. Instrument Serif n'a pas de glyphes arabes :
   le navigateur fabrique une oblique synthetique sur une police de repli, ce qui
   est fautif typographiquement. On garde l'accent par la couleur et la graisse. */
[dir="rtl"] .hero h1 em,
[dir="rtl"] .sec h2 em,
[dir="rtl"] .cta-final h2 em {
  font-family: inherit;
  font-style: normal;
  font-size: 1em;
  font-weight: 600;
}

/* --- engagements : ce sur quoi on s'engage, pas ce qu'on a obtenu --- */
.pledge { padding: 26px 28px; }
.pledge h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 16.5px; margin-bottom: 9px; }
.pledge h3::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}
@media (max-width: 700px) { .founder { padding: 30px 24px; } .founder p { font-size: 16px; } }

/* --- preuves : les produits qu'on a construits et qu'on opere --- */
.proof { display: flex; flex-direction: column; padding: 28px; }
.proof h3 { font-size: 19px; margin-bottom: 12px; }
.proof p { flex: 1; }
.proof-link {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-top: 22px; padding-bottom: 2px;
  color: var(--accent); font-size: 14px; letter-spacing: -0.01em;
  border-bottom: 1px solid transparent; transition: border-color .25s ease;
}
.proof-link:hover { border-bottom-color: var(--accent); }

/* --- Applications : une ligne par produit, capture a l'appui --- */
.app-list { display: flex; flex-direction: column; gap: 20px; }
.app-row {
  display: flex; align-items: center; gap: 40px;
  padding: 28px;
}
.app-row--flip { flex-direction: row-reverse; }
.app-shot {
  flex: 1 1 54%; min-width: 0; display: block;
  border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden;
  background: #0a0a0a; line-height: 0;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.app-shot img { width: 100%; height: auto; display: block; }
.app-row:hover .app-shot {
  border-color: rgba(163, 206, 241, 0.45);
  box-shadow: 0 0 34px rgba(163, 206, 241, 0.12);
  transform: translateY(-2px);
}
.app-body { flex: 1 1 46%; min-width: 0; }
.app-body h3 { font-size: 22px; margin-bottom: 12px; }
.app-body p { font-size: 15px; line-height: 1.65; }

@media (max-width: 980px) {
  .app-row, .app-row--flip { flex-direction: column; align-items: stretch; gap: 24px; }
  .app-body h3 { font-size: 20px; }
}