/* Sense Epix — site vitrine.
   Mise en page et typographie partagées avec rumisense.eu (encre #0f172a, gris
   « slate », pile de polices système) ; couleurs tirées du logo Sense Epix, en
   bleus. Le vert de l'écosystème ne subsiste que dans la section sombre. */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Accent : le cyan du logo (tracés, pastilles, icônes) et son bleu profond
     (textes, boutons). Toute la page s'y réfère, via --primary*. */
  --primary: #149cbb;
  --primary-strong: var(--brand-navy);
  --primary-10: rgba(20, 156, 187, 0.1);
  --primary-20: rgba(20, 156, 187, 0.2);
  /* Vert de l'écosystème Rumexperts : réservé à la section sombre. */
  --green: #1ab68e;
  --green-strong: #12926f;
  --ink: #0f172a;
  --sky: #dff4ff;
  /* Bleus du logo Sense Epix : ils distinguent le produit du vert de Rumisense. */
  /* Bleu du logo : titres d'accent et boutons. */
  --brand-navy: rgb(29, 115, 167);
  --brand-navy-hover: rgb(22, 94, 138);
  --brand-cyan: #24acc2;
  --brand-sky: #d7eff5;
  --brand-sky-soft: #e8f5f9;
  --brand-azure: #dcebfb;
  --brand-line: #cfe6ee;
  /* Fond teinté : deux halos de bleus voisins sur un voile clair, comme le
     dégradé menthe de Rumisense — c'est l'écart entre les deux teintes qui le fait vivre. */
  --tint-gradient:
    radial-gradient(circle at 12% 15%, var(--brand-sky) 0%, transparent 48%),
    radial-gradient(circle at 88% 20%, var(--brand-azure) 0%, transparent 45%),
    linear-gradient(180deg, var(--brand-sky-soft), var(--slate-50));
  --white: #ffffff;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;

  --critical: #dc2626;
  --alert: #f59e0b;
  --predictive: #6366f1;
  --surveillance: #0ea5e9;

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --shadow-soft: 0 18px 45px -24px rgba(15, 23, 42, 0.35);
  --container: 80rem;
  --header-h: 4.5rem;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background: var(--slate-50);
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--font-mono); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--primary-20); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background: var(--white); padding: 0.75rem 1rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft);
}
.skip-link:focus { top: 1rem; }

/* ── Primitives ───────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--primary-20); background: var(--primary-10); color: var(--primary-strong);
  border-radius: 999px; padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.eyebrow, .kicker {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-navy);
}
.accent { color: var(--brand-navy); }
.link { font-size: 0.875rem; font-weight: 600; color: var(--primary-strong); border-bottom: 1px solid var(--primary-20); transition: border-color 0.2s; }
.link:hover { border-color: var(--primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid transparent; border-radius: var(--radius-xl);
  padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  transition: filter 0.2s, transform 0.2s, border-color 0.2s, color 0.2s, background-color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 0.5rem 1rem; }
/* Un seul bouton plein, au bleu marine du logo ; le fantôme reste en contour. */
.btn--primary { background: var(--brand-navy); color: var(--white); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--brand-navy-hover); }
.btn--ghost { background: var(--white); border-color: var(--slate-300); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-strong); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.3); color: var(--white); margin-top: 2.5rem; }
.btn--outline-light:hover { border-color: var(--primary); color: var(--primary); }

.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

.priority {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); padding: 0.1875rem 0.5rem;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white); background: var(--slate-400);
}
.priority--critical { background: var(--critical); }
.priority--alert { background: var(--alert); color: var(--ink); }
.priority--predictive { background: var(--predictive); }
.priority--surveillance { background: var(--surveillance); }
.priority--normal { background: var(--primary); }

.illustration-note { margin-top: 0.75rem; font-size: 0.6875rem; color: var(--slate-500); }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-header__inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-nav__links { display: flex; gap: 1.75rem; font-size: 0.875rem; font-weight: 500; }
.site-nav__links a { transition: color 0.2s; }
.site-nav__links a:hover { color: var(--primary-strong); }
.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.lang-switch { display: flex; border: 1px solid var(--slate-300); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.lang-switch a { display: block; padding: 0.375rem 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--slate-600); }
.lang-switch a:hover { color: var(--primary-strong); }
.lang-switch a[aria-current="page"] { background: var(--brand-navy); color: var(--white); }

.logo { display: block; height: 2.75rem; width: auto; }

.hero { background: var(--tint-gradient); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero__inner { display: grid; gap: 3rem; align-items: center; padding-block: 3.5rem 3rem; }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1fr 1.1fr; padding-block: 5rem 4rem; } }
.hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.hero__title { margin-top: 1.25rem; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.hero__lead { margin-top: 1.5rem; max-width: 40rem; font-size: 1.125rem; line-height: 1.7; color: var(--slate-700); }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__assets { margin-top: 2.5rem; display: grid; gap: 1rem; max-width: 42rem; }
@media (min-width: 640px) { .hero__assets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.hero__assets li { display: flex; gap: 0.75rem; align-items: flex-start; }
.hero__asset-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--brand-line); color: var(--brand-navy); box-shadow: var(--shadow-soft); }
.hero__asset-icon .icon { width: 1.375rem; height: 1.375rem; stroke-width: 3.2; }
.hero__assets strong { display: block; font-size: 0.875rem; font-weight: 800; line-height: 1.3; }
.hero__assets li > span:last-child { font-size: 0.8125rem; line-height: 1.45; color: var(--slate-600); }

.hero-orbit { margin: 0; }
.hero-orbit svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }

.orbit__track { fill: none; stroke: #b5e0ea; stroke-width: 1.5; }
.orbit__track--dashed { stroke-dasharray: 3 7; }
.orbit__track--faint { stroke: rgba(36, 172, 194, 0.14); }
.orbit__anchor { fill: none; stroke: none; }
.orbit__spoke { stroke: rgba(20, 156, 187, 0.25); stroke-width: 1.5; }
.orbit__flow { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 140; animation: flow 2.6s linear infinite; }
.orbit__dot { fill: var(--primary); opacity: 0.55; }

/* Les anneaux tournent autour du moteur ; leur cercle d'ancrage invisible
   centre la boîte de référence sur l'origine. */
.orbit__ring { transform-box: fill-box; transform-origin: center; }
.orbit__ring--outer { animation: spin 110s linear infinite; }
.orbit__ring--middle { animation: spin 70s linear infinite reverse; }
.orbit__chip { transform-box: fill-box; transform-origin: center; animation: spin 110s linear infinite reverse; }
.orbit__chip rect { fill: var(--white); stroke: var(--slate-200); filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.08)); }
.orbit__chip text { font-size: 14px; font-weight: 600; fill: var(--ink); }

/* Une nuance de bleu du logo par famille. */
.fam--predict, .fam-glyph--predict { fill: var(--brand-navy); }
.fam--score, .fam-glyph--score { fill: var(--brand-cyan); }
.fam--train, .fam-glyph--train { fill: #065295; }
.fam--data, .fam-glyph--data { fill: #7fc6d8; }

.orbit__family rect { fill: var(--white); stroke: var(--primary-20); stroke-width: 1.5; filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.1)); }
.orbit__family-name { font-size: 17px; font-weight: 800; fill: var(--ink); }
.orbit__family-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--slate-500); }

.orbit__core { fill: var(--white); stroke: var(--primary-20); stroke-width: 2; filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.18)); }
.orbit__pulse { fill: var(--primary); opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: core-pulse 3.2s ease-out infinite; }
.orbit__core-name { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; fill: var(--ink); }
.orbit__core-tag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--primary-strong); }

.strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; border-top: 1px solid var(--slate-200); font-size: 0.875rem; color: var(--slate-600); }
.strip span { display: inline-flex; align-items: center; gap: 0.625rem; }
.strip b { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--primary-10); color: var(--primary-strong); font-weight: 700; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding-block: 5rem; }
.section--tight { padding-block: 4rem; }
.section--tint { background: var(--tint-gradient); border-block: 1px solid var(--brand-line); }
.section--dark {
  --primary: var(--green);
  --primary-strong: var(--green-strong);
  --primary-10: rgba(26, 182, 142, 0.1);
  --primary-20: rgba(26, 182, 142, 0.2);
  background: var(--ink); color: var(--white); position: relative; overflow: hidden;
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 0%, rgba(26, 182, 142, 0.22), transparent 40%);
}
.section--dark > .container { position: relative; }
.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-title { margin-top: 0.75rem; font-size: clamp(1.875rem, 3.4vw, 2.625rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; }
.section-intro { margin-top: 1rem; font-size: 1.0625rem; color: var(--slate-600); }
.section--dark .eyebrow { color: #95dae8; }
.section--dark .section-intro { color: var(--slate-300); }

/* ── Familles & modèles ───────────────────────────────────────────────── */
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; padding: 0.375rem; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-2xl); width: fit-content; max-width: 100%; }
.tab { display: inline-flex; align-items: baseline; gap: 0.5rem; border: 0; background: none; border-radius: var(--radius-xl); padding: 0.625rem 1rem; font-weight: 700; color: var(--slate-600); transition: background-color 0.2s, color 0.2s; }
.tab small { font-weight: 500; font-size: 0.75rem; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--brand-navy); color: var(--white); }
.tab__glyph { color: var(--primary); }
.tab[aria-selected="true"] .tab__glyph { color: var(--white); }

.family { display: grid; gap: 2.5rem; }
.family + .family { margin-top: 4rem; }
.tabs:not([hidden]) ~ .family + .family { margin-top: 0; }
@media (min-width: 1024px) { .family { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.family:focus-visible { outline-offset: 8px; }
.family__title { margin-top: 0.75rem; font-size: 1.625rem; font-weight: 800; line-height: 1.2; }
.family__intro { margin-top: 0.75rem; color: var(--slate-600); }
@media (min-width: 1024px) { .family__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } }

.chart-card { margin: 1.75rem 0 0; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-3xl); padding: 1.5rem; box-shadow: var(--shadow-soft); }
.chart-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.875rem; }
.chart-card__head span { font-size: 0.75rem; color: var(--slate-500); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--slate-600); }
.legend__item::before { content: ""; display: inline-block; width: 1rem; height: 3px; border-radius: 2px; margin-right: 0.375rem; vertical-align: middle; }
.legend__item--ink::before { background: var(--ink); }
.legend__item--primary::before { background: var(--primary); }

.model-list { display: grid; gap: 0 2rem; align-content: start; border-top: 1px solid var(--slate-200); }
@media (min-width: 640px) { .model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.model-list li { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 0; border-bottom: 1px solid var(--slate-200); }
.model-list strong { font-size: 0.9375rem; font-weight: 700; }
.model-list span { font-size: 0.8125rem; color: var(--slate-600); }

/* Illustrations SVG */
.illus { display: block; width: 100%; height: auto; margin-top: 1rem; font-family: var(--font-sans); font-size: 12px; fill: var(--ink); }
.illus text { fill: var(--ink); }
.illus .figure { font-weight: 800; font-size: 14px; }
.illus .mono { font-family: var(--font-mono); font-size: 12px; fill: var(--slate-700); }
.illus .tag { font-size: 10px; font-weight: 700; fill: var(--primary-strong); }
.gridline path { stroke: var(--slate-200); stroke-dasharray: 3 5; }
.band { fill: var(--primary); opacity: 0.16; }
.line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line--past { stroke: var(--ink); }
.line--future { stroke: var(--primary); stroke-dasharray: 6 5; }
.today { stroke: var(--slate-400); stroke-dasharray: 4 5; }
.pulse { fill: var(--primary); stroke: var(--white); stroke-width: 2; }
.track { stroke: var(--slate-100); stroke-width: 14; stroke-linecap: round; }
.bar { stroke: var(--primary); stroke-width: 14; stroke-linecap: round; }
.connector path { fill: none; stroke: var(--slate-300); stroke-width: 1.5; stroke-dasharray: 4 4; animation: dash 1.2s linear infinite; }
.node { fill: var(--slate-50); stroke: var(--slate-200); }
.core { fill: var(--ink); }
.illus .core__label { fill: var(--white); font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.output { fill: var(--brand-sky-soft); stroke: var(--brand-line); }
.text-lines path { stroke: var(--primary); stroke-width: 4; stroke-linecap: round; opacity: 0.55; }

/* ── Chaîne de composition ────────────────────────────────────────────── */
.chain { display: grid; gap: 1rem; counter-reset: chain; }
@media (min-width: 640px) { .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chain { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.chain__step { position: relative; background: var(--white); border: 1px solid var(--brand-line); border-radius: var(--radius-2xl); padding: 1.25rem 1.125rem; }
@media (min-width: 1024px) {
  .chain__step:not(:last-child)::after {
    content: ""; position: absolute; top: 2rem; right: -1rem; width: 1rem; height: 2px;
    background: linear-gradient(90deg, var(--primary-20), var(--primary));
  }
}
.chain__index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--primary-strong); }
.chain__role { margin-top: 0.5rem; font-size: 1.125rem; font-weight: 800; }
.chain__model { margin-top: 0.125rem; font-size: 0.75rem; font-weight: 600; color: var(--primary-strong); }
.chain__out { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.priority-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.priority-row .priority { font-size: 0.6875rem; padding: 0.375rem 0.75rem; }

/* ── Approche ─────────────────────────────────────────────────────────── */
.principles { display: grid; gap: 1rem; }
@media (min-width: 640px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.principle { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-3xl); padding: 1.75rem; box-shadow: var(--shadow-soft); }
.principle__index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--primary-strong); }
.principle h3 { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.principle p { margin-top: 0.625rem; font-size: 0.9375rem; color: var(--slate-600); }

/* ── Architecture ─────────────────────────────────────────────────────── */
/* Une seule ligne relie les trois étapes ; une impulsion la parcourt de bout en bout. */
.flow { position: relative; overflow: hidden; display: grid; gap: 2.5rem; padding: 0 0 0.5rem 1.75rem; }
.flow::before, .flow::after { content: ""; position: absolute; border-radius: 2px; }
.flow::before { left: 0.3125rem; top: 0.5rem; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(26, 182, 142, 0.25), rgba(26, 182, 142, 0.9), rgba(26, 182, 142, 0.25)); }
.flow::after { left: 0.1875rem; top: 0; width: 6px; height: 72px; background: linear-gradient(180deg, transparent, var(--white), var(--primary), transparent); box-shadow: 0 0 18px rgba(26, 182, 142, 0.7); animation: pulse-y 3.2s linear infinite; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; padding-top: 2.25rem; }
  .flow::before { left: 0; right: 0; top: 0.3125rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, rgba(26, 182, 142, 0.25), rgba(26, 182, 142, 0.9), rgba(26, 182, 142, 0.25)); }
  .flow::after { top: 0.1875rem; left: 0; width: 96px; height: 6px; background: linear-gradient(90deg, transparent, var(--white), var(--primary), transparent); animation: pulse-x 3.2s linear infinite; }
}
.flow__step { position: relative; }
.flow__step::before { content: ""; position: absolute; left: -1.75rem; top: 0.125rem; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--primary); box-shadow: 0 0 0 4px rgba(26, 182, 142, 0.15); }
@media (min-width: 900px) { .flow__step::before { left: 0; top: -2.25rem; } }
.flow__visual { height: 88px; display: flex; align-items: center; margin-bottom: 1.25rem; }
.flow__label { font-family: var(--font-mono); font-size: 0.75rem; color: #95dae8; text-transform: uppercase; letter-spacing: 0.08em; }
.flow__step h3 { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 800; }
.flow__step p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--slate-300); }
.flow__step .flow__note { margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--white); border-left: 2px solid var(--primary); padding-left: 0.75rem; }
.flow__step code { display: inline-block; margin-top: 1rem; font-size: 0.75rem; color: var(--primary); background: rgba(26, 182, 142, 0.1); border: 1px solid rgba(26, 182, 142, 0.25); border-radius: var(--radius-lg); padding: 0.25rem 0.5rem; }

/* Icônes au trait */
.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--xl { width: 76px; height: 76px; stroke-width: 2; color: var(--slate-300); }
.icon__strike { stroke: var(--primary); stroke-width: 3.5; }
.icon__accent { stroke: var(--primary); }
.gdpr-badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); background: var(--white); border: 1px solid var(--slate-200); }
.gdpr-badge .icon { color: var(--ink); }
.gdpr-badge--dark { margin-top: 1rem; color: var(--white); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.gdpr-badge--dark .icon { color: var(--white); }

/* Engrenages : les dents sont un pointillé épais sur un cercle. */
.engine { width: 120px; height: 88px; }
.engine__gear { transform-box: fill-box; transform-origin: center; }
.engine__gear--large { animation: spin 9s linear infinite; }
.engine__gear--small { animation: spin 5.4s linear infinite reverse; }
.engine__teeth { fill: none; stroke: var(--primary); stroke-width: 9; stroke-dasharray: 8.17 8.17; }
.engine__teeth--small { stroke-width: 7; stroke-dasharray: 7.85 7.85; }
.engine__body { fill: var(--primary); }
.engine__hub { fill: var(--ink); }

/* Résultat fictif */
.result { width: 100%; max-width: 240px; height: 88px; }
.result__grid path { stroke: rgba(255, 255, 255, 0.08); }
.result__bar { fill: rgba(255, 255, 255, 0.14); transform-box: fill-box; transform-origin: bottom; animation: breathe 3.6s ease-in-out infinite; }
.result__bar:nth-child(odd) { animation-delay: 0.4s; }
.result__bar:nth-child(3n) { animation-delay: 0.8s; }
.result__bar--last { fill: var(--primary); }
.result__line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: trace 3.6s ease-out infinite; }
.result__dot { fill: var(--white); stroke: var(--primary); stroke-width: 2.5; animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.pillars { margin-top: 3.5rem; display: grid; gap: 1rem; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillars li { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-2xl); padding: 1.25rem; background: rgba(255, 255, 255, 0.04); }
.pillars h4 { font-size: 0.9375rem; font-weight: 800; }
.pillars h4::before { content: ""; display: block; width: 1.5rem; height: 3px; border-radius: 2px; background: var(--primary); margin-bottom: 0.75rem; }
.pillars p { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--slate-300); }

/* ── Écosystème ───────────────────────────────────────────────────────── */
.ecosystem { display: grid; gap: 1rem; }
@media (min-width: 900px) { .ecosystem { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.ecosystem__card { display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid var(--slate-200); border-radius: var(--radius-3xl); padding: 2rem; background: var(--white); }
.ecosystem__brand { height: 5.5rem; display: flex; align-items: center; justify-content: center; }
.ecosystem__brand a { display: block; transition: transform 0.2s; }
.ecosystem__brand a:hover { transform: scale(1.03); }
/* Largeur et hauteur « auto » : les attributs HTML ne donnent que le ratio, les
   plafonds le conservent. Une largeur imposée déformerait le logo. */
.ecosystem__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 4rem; object-fit: contain; }
.ecosystem__logo--sensepix { max-height: 5.5rem; }
.ecosystem__card p:not(.kicker) { color: var(--slate-600); font-size: 0.9375rem; flex: 1; }
.ecosystem__card .link { align-self: flex-start; }
.ecosystem__card--core { background: linear-gradient(160deg, var(--white), var(--brand-sky-soft)); border-color: var(--brand-line); box-shadow: var(--shadow-soft); }

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
.contact__aside { margin-top: 2rem; font-size: 0.8125rem; color: var(--slate-500); max-width: 26rem; }
.contact__form { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-3xl); padding: 0.75rem; box-shadow: var(--shadow-soft); overflow: hidden; }
/* Hauteur du formulaire Teamleader mesurée (≈ 1 220 px) : l'iframe l'affiche en entier, sans défilement. */
.contact__frame { display: block; width: 100%; height: 1280px; border: 0; }
@media (max-width: 639px) { .contact__frame { height: 1420px; } }
@media (min-width: 1024px) { .contact__intro { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--slate-200); background: var(--white); padding-block: 3rem 2rem; }
.partners { padding-bottom: 2.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--slate-200); }
.partners__title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate-500); text-align: center; }
.partners__list { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; }
/* Même cadre pour tous : l'équilibre optique est fait dans les images elles-mêmes. */
.partners__list img { display: block; width: 180px; height: 80px; transition: transform 0.2s; }
.partners__list img:hover { transform: scale(1.04); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; font-size: 0.8125rem; color: var(--slate-500); }

/* ── Mouvement ────────────────────────────────────────────────────────── */
.fade-up { animation: fade-up 0.7s ease-out both; }
.hero-orbit.fade-up { animation-delay: 0.15s; }
.draw { stroke-dasharray: 6 5; animation: draw 2.8s ease-out both; }
.grow { animation: grow 1.4s ease-out both; transform-box: fill-box; transform-origin: left; }
.pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.js-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.js-reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .js-reveal { opacity: 1; transform: none; }

@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes dash { to { stroke-dashoffset: -16; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
@keyframes core-pulse { from { transform: scale(1); opacity: 0.3; } to { transform: scale(1.45); opacity: 0; } }
@keyframes pulse-x { from { left: -96px; } to { left: 100%; } }
@keyframes pulse-y { from { top: -72px; } to { top: 100%; } }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } }
@keyframes trace { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }

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

/* ── Petits écrans ────────────────────────────────────────────────────── */
@media (max-width: 1023px) { .site-nav { display: none; } }
@media (max-width: 639px) {
  .site-header__actions .btn { display: none; }
  .tabs { width: 100%; }
  .tab { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
  .tab small { display: none; }
  .section { padding-block: 3.75rem; }
  .ecosystem__card, .principle { padding: 1.5rem; }
  .partners__list { gap: 0.75rem 1rem; }
  .partners__list img { width: 144px; height: 64px; }
  .logo { height: 2rem; }
}