/* =========================================================
   SECTIONS & PAGES
   ========================================================= */

/* ---------------- HERO accueil ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 4rem;
  overflow: hidden;
}
#particles {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  margin-block: 1.4rem 1.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.6rem; }
.hero__trust-item { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.hero__trust-item svg { width: 20px; height: 20px; color: var(--accent-2); flex: none; }

/* Visuel héro : disque + orbites + carte flottantes */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 420px; }
.orbit {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--text-3) 35%, transparent);
}
.orbit--1 { width: 78%; aspect-ratio: 1; animation: spin 40s linear infinite; }
.orbit--2 { width: 100%; aspect-ratio: 1; animation: spin-rev 60s linear infinite; border-style: solid; border-color: color-mix(in srgb, var(--text-3) 20%, transparent); }
.orbit__sat {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: var(--nm-sm);
  color: var(--accent);
}
.orbit__sat svg { width: 20px; height: 20px; }
.orbit--1 .orbit__sat:nth-child(1) { top: -22px; left: calc(50% - 22px); }
.orbit--1 .orbit__sat:nth-child(2) { bottom: -22px; left: calc(50% - 22px); }
.orbit--2 .orbit__sat:nth-child(1) { top: calc(50% - 22px); left: -22px; }
.orbit--2 .orbit__sat:nth-child(2) { top: calc(50% - 22px); right: -22px; }

.hero__disc {
  position: relative;
  width: min(330px, 66%);
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: var(--nm-lg);
  animation: blob-morph 18s var(--ease-io) infinite;
}
.hero__disc svg { width: 52%; color: var(--accent); filter: drop-shadow(0 12px 22px rgba(79,110,242,.28)); }

.float-card {
  position: absolute;
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--nm-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  z-index: 3;
}
.float-card small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.float-card--1 { top: 8%; inset-inline-start: -4%; animation: float-y 7s var(--ease-io) infinite; }
.float-card--2 { bottom: 12%; inset-inline-end: -2%; animation: float-y 8.5s var(--ease-io) infinite 1.2s; }
.float-card--3 { bottom: 40%; inset-inline-start: -8%; animation: float-y-sm 6s var(--ease-io) infinite .6s; }
@media (max-width: 620px) {
  .float-card--3 { display: none; }
  .float-card--1 { inset-inline-start: 0; }
  .float-card--2 { inset-inline-end: 0; }
}

.scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}
.scroll-cue svg { width: 18px; height: 18px; animation: bob-arrow 2s var(--ease-io) infinite; }

/* ---------------- HERO pages intérieures ---------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; letter-spacing: .06em; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { opacity: .5; }
.page-hero__title { margin-block: 1.2rem 1.1rem; font-size: var(--fs-h1); }

/* ---------------- Cartes services ---------------- */
.svc-card { display: flex; flex-direction: column; gap: 1.1rem; height: 100%; }
.svc-card__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.svc-card__list { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding-top: .4rem; }
.svc-card__list li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: var(--fs-sm); color: var(--text-2);
}
.svc-card__list li::before {
  content: "";
  flex: none;
  margin-top: .52em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.svc-card__num {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text-3) 55%, transparent);
  transition: -webkit-text-stroke-color var(--t-med) var(--ease);
}
.card:hover .svc-card__num { -webkit-text-stroke-color: var(--accent); }

/* ---------------- Bandeau CTA ---------------- */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--nm-lg);
  padding: clamp(2.2rem, 5vw, 4rem);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--grad-brand);
  filter: blur(120px);
  opacity: .3;
  top: -180px; inset-inline-start: -120px;
  animation: drift-a 24s var(--ease-io) infinite;
}
.cta-band > * { position: relative; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }

/* ---------------- Split image / texte ---------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split--rev .split__media { order: 2; }
@media (max-width: 880px) { .split--rev .split__media { order: 0; } }

.portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--nm-lg);
  display: grid; place-items: center;
  overflow: hidden;
}
.portrait::after {
  content: "";
  position: absolute; inset: 18px;
  border-radius: var(--r-lg);
  box-shadow: var(--nm-in-sm);
  pointer-events: none;
}
.portrait svg { width: 62%; color: var(--accent); }
.portrait__badge {
  position: absolute;
  bottom: 22px; inset-inline-start: 22px;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--nm-sm);
  font-size: var(--fs-xs);
  font-weight: 800;
}

/* ---------------- Valeurs ---------------- */
.value-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* ---------------- Process (étapes) ---------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.step {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--nm-sm);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.step:hover { box-shadow: var(--nm-in); transform: translateY(-5px); }
.step__n {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: var(--glow-accent);
  margin-bottom: 1rem;
}
.step__title { font-size: 1.02rem; }
.step__text { margin-top: .5rem; font-size: var(--fs-sm); }

/* ---------------- Zones / laboratoires ---------------- */
.lab-card { display: flex; flex-direction: column; gap: 1.2rem; }
.lab-card__flag {
  width: 54px; height: 38px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--nm-flat);
  flex: none;
}
.lab-card__row { display: flex; align-items: flex-start; gap: .8rem; font-size: var(--fs-sm); color: var(--text-2); }
.lab-card__row svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: .2rem; }
.lab-card__row a:hover { color: var(--accent); }

/* Carte stylisée */
.map-frame {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
  box-shadow: var(--nm-in);
  overflow: hidden;
}
.map-frame svg { width: 100%; height: 100%; }
.map-pin {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translate(-50%,-50%);
}
.map-pin::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulse-ring 2.6s var(--ease-io) infinite;
}
.map-pin__label {
  position: absolute; top: -34px; left: 50%;
  transform: translateX(-50%);
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--nm-flat);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

/* ---------------- Tableau comparatif ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--nm-md); background: var(--surface); }
table.nm-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.nm-table th, .nm-table td { padding: 1.05rem 1.3rem; text-align: start; font-size: var(--fs-sm); }
.nm-table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nm-table tbody tr { transition: background var(--t-fast) var(--ease); }
.nm-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.nm-table tbody td:first-child { font-weight: 700; color: var(--text); }
.nm-table tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--text-3) 16%, transparent); }
.nm-table .ok { color: var(--success); font-weight: 800; }

/* ---------------- Contact ---------------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }

.hours { display: flex; flex-direction: column; gap: .5rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); padding: .5rem 0; }
.hours li + li { border-top: 1px dashed color-mix(in srgb, var(--text-3) 28%, transparent); }
.hours b { color: var(--text); }

/* ---------------- 404 / divers ---------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------------- RTL ---------------- */
[dir="rtl"] body { letter-spacing: 0; }
[dir="rtl"] .hero__title,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .kicker,
[dir="rtl"] .footer__title,
[dir="rtl"] .tl-item__meta,
[dir="rtl"] .gal-item__tag,
[dir="rtl"] .scroll-cue { letter-spacing: .04em; }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
[dir="rtl"] .drawer { clip-path: circle(0% at 46px 42px); }
[dir="rtl"] .drawer.is-open { clip-path: circle(150% at 46px 42px); }
[dir="rtl"] .footer__list a:hover { padding-inline-start: 0; padding-inline-end: 6px; }

/* Galerie en mode aperçu (page d'accueil) : 6 cas maximum */
.gallery--teaser .gal-item:nth-child(n+7) { display: none; }

/* Trajet animé sur la carte Paris ↔ Tel Aviv */
.map-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  stroke-dashoffset: 0;
  opacity: .85;
  animation: route-flow 2.4s linear infinite;
}
@keyframes route-flow { to { stroke-dashoffset: -34; } }
.map-dots circle { fill: var(--text-3); opacity: .28; }