/* ============================================================
   Atlas Kynetis — Portail (index.html)
   Un seul champ de particules porte les deux métiers : le bloc terrain
   (Atlas BOX Maroc) à gauche, le bassin versant (FluviAtlas) à droite.
   Couleur d'action neutre : le violet de la marque Atlas Kynetis.
   ============================================================ */

.ky-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ky-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0.78) 22%, rgba(0,0,0,0) 55%),
    linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 45%);
  transition: opacity var(--t-slow);
}
body.page-portail main, body.page-portail footer, body.page-portail .ky-hero { position: relative; z-index: 2; }
body.leaving { animation: none; }
body.leaving .ky-hero, body.leaving .ky-products, body.leaving .navbar { opacity: 0; transition: opacity .45s ease; }

/* ── Hero ──────────────────────────────────────────────────── */
.ky-hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 140px 0 var(--s10); }
.ky-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--d-amber); margin-bottom: var(--s3);
}
.ky-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--d-amber); }
.ky-hero-title {
  font-weight: 400; font-size: clamp(2.6rem, 6.2vw, 6rem);
  line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch;
}
.ky-hero-title .ky-accent { color: var(--ky-primary); }
.ky-hero-sub { margin-top: var(--s4); font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ky-text-2); max-width: 560px; line-height: 1.7; }
.ky-hero-actions { margin-top: var(--s5); display: flex; gap: 12px; flex-wrap: wrap; }
.ky-scroll-hint { margin-top: var(--s8); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ky-muted); display: flex; align-items: center; gap: 12px; }
.ky-scroll-hint::before { content: ''; width: 36px; height: 1px; background: var(--ky-border-2); }

/* ── Produits : deux volets séparés par un filet ───────────── */
.ky-products { padding: var(--s8) 0 var(--s16); }
.ky-products-label { display: flex; justify-content: space-between; align-items: end; gap: var(--s3); margin-bottom: var(--s5); }
.ky-products-label h2 { font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.05; }
.ky-products-label p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ky-muted); }
.ky-products-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ky-border-2); border-radius: var(--r-xl); overflow: hidden; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ky-product-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s8) var(--s6) var(--s6); min-height: 560px; isolation: isolate;
  transition: background var(--t-slow);
}
.ky-product-card + .ky-product-card { border-left: 1px solid var(--ky-border-2); }
.ky-product-card--ab { --accent: var(--ab-primary); --accent-text: var(--ab-light); --accent-fill: var(--ab-action); --accent-fill-h: var(--ab-action-h); --on-accent: #fff; --spark: var(--d-amber); }
.ky-product-card--fa { --accent: var(--fa-primary); --accent-text: var(--fa-cyan); --accent-fill: var(--fa-action); --accent-fill-h: var(--fa-action-h); --on-accent: #fff; --spark: var(--d-coral); }
.ky-product-card:hover, .ky-product-card:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ky-card-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--spark); }
.ky-card-name { font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; }
.ky-card-tagline { font-size: 1.02rem; line-height: 1.7; color: var(--ky-text-2); max-width: 46ch; }
.ky-card-features { margin: var(--s2) 0 auto; border-top: 1px solid var(--ky-border); }
.ky-card-feature { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--ky-border); font-size: 0.93rem; line-height: 1.5; color: var(--ky-text-2); }
.ky-card-feature svg { flex-shrink: 0; margin-top: 4px; color: var(--accent-text); }
.ky-card-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent-fill); color: var(--on-accent);
  transition: gap var(--t-normal), background var(--t-fast);
}
.ky-product-card:hover .ky-card-cta, .ky-product-card:focus-visible .ky-card-cta { gap: 18px; background: var(--accent-fill-h); }
.ky-card-logo { height: 40px; width: auto; }

/* ── À propos / contact ────────────────────────────────────── */
.ky-about { padding: var(--s16) 0; background: #000; border-top: 1px solid var(--ky-border); }
.ky-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: start; }
.ky-about h2 { font-weight: 400; font-size: clamp(2.3rem, 5vw, 4.4rem); letter-spacing: -0.04em; line-height: 1.02; }
.ky-about p { font-size: 1.12rem; color: var(--ky-text-2); line-height: 1.85; max-width: 560px; }
.ky-contact-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s10) 0; background: #000; border-top: 1px solid var(--ky-border); }
.ky-contact-bar p { font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; font-weight: 400; color: var(--ky-text); }
.ky-contact-links { display: flex; gap: 12px; flex-wrap: wrap; }
.ky-contact-link { font-family: var(--font-mono); font-size: 0.88rem; padding: 12px 22px; border-radius: var(--r-full); border: 1px solid var(--ky-border-2); color: var(--ky-text-2); transition: all var(--t-fast); word-break: break-all; }
.ky-contact-link:hover { color: var(--ky-text); border-color: var(--ky-primary); background: rgba(181, 141, 230, 0.1); }
.ky-footer-index { background: #000; }

@media (max-width: 900px) {
  .ky-products-grid { grid-template-columns: 1fr; }
  .ky-product-card + .ky-product-card { border-left: 0; border-top: 1px solid var(--ky-border-2); }
  .ky-product-card { min-height: 0; padding: var(--s6) var(--s3) var(--s5); }
  .ky-about-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .ky-hero { padding-bottom: var(--s8); }
  .ky-veil { background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.2) 75%); }
  .ky-products-label { flex-direction: column; align-items: flex-start; }
}