/* ============================================================
   page.css — design system pour pages internes (SaaS, métier, etc.)
   Hérite des tokens et patterns de index3.css (body.idx3)
   ============================================================ */

/* ============================================================
   PAGE HERO — asymétrique, plus compact que la home
   ============================================================ */
.idx3-page-hero {
  position: relative;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 5vw, 80px) clamp(64px, 8vw, 110px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--noir-0) 0%, var(--noir-1) 30%, var(--noir-1) 70%, var(--noir-0) 100%);
  overflow: hidden;
  isolation: isolate;
}
.idx3-page-hero__mesh {
  position: absolute;
  inset: -10%;
  z-index: -1;
  filter: blur(100px) saturate(120%);
  opacity: .25;
  pointer-events: none;
}
.idx3-page-hero__mesh::before {
  content: "";
  position: absolute;
  width: 50%; height: 50%;
  top: 0; left: 5%;
  background: radial-gradient(circle, var(--lume-1) 0%, transparent 70%);
  border-radius: 50%;
}
.idx3-page-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 0;
  align-items: end;
  max-width: 1280px;
  margin: 0 auto;
}
/* Le <div> qui contient crumbs/eyebrow/title/lead disparaît du layout :
   ses enfants deviennent items du grid, ce qui permet de placer
   chacun dans la grille (titre pleine largeur, lead à gauche, meta à droite). */
.idx3-page-hero__layout > div { display: contents; }
.idx3-page-hero__layout > div > .idx3-page-hero__crumbs,
.idx3-page-hero__layout > div > .idx3-page-hero__eyebrow,
.idx3-page-hero__layout > div > .idx3-page-hero__title {
  grid-column: 1 / -1;
}
.idx3-page-hero__layout > div > .idx3-page-hero__lead {
  grid-column: 1;
  margin-top: clamp(32px, 4vw, 56px);
}
.idx3-page-hero__layout > .idx3-page-hero__meta {
  grid-column: 2;
  margin-top: clamp(32px, 4vw, 56px);
}
.idx3-page-hero__crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.idx3-page-hero__crumbs a { color: var(--ink-3); text-decoration: none; }
.idx3-page-hero__crumbs a:hover { color: var(--lume-1); }
.idx3-page-hero__crumbs strong { color: var(--lume-1); font-weight: 400; }
.idx3-page-hero__crumbs span::before { content: " / "; opacity: .5; margin: 0 4px; }
.idx3-page-hero__crumbs span:first-child::before { display: none; }

.idx3-page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 24px;
  display: inline-block;
}
.idx3-page-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--lume-1);
  margin-right: 12px;
  vertical-align: middle;
}
.idx3-page-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: none;
}
.idx3-page-hero__title em {
  font-style: italic;
  color: var(--lume-1);
}
.idx3-page-hero__lead {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0;
}

.idx3-page-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.idx3-page-hero__meta .label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
  display: block;
}
.idx3-page-hero__meta .val { color: var(--ink-1); }
.idx3-page-hero__meta .val--lume { color: var(--lume-1); }

@media (max-width: 980px) {
  .idx3-page-hero__layout { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   PAGE SECTION — wrapper standard pour blocs internes
   ============================================================ */
.idx3-page-section {
  padding: clamp(80px, 12vw, 140px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  position: relative;
}
.idx3-page-section--alt {
  background: linear-gradient(180deg, var(--noir-0) 0%, var(--noir-1) 30%, var(--noir-1) 70%, var(--noir-0) 100%);
}
.idx3-page-section__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  max-width: 1280px;
}
.idx3-page-section__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.idx3-page-section__num::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--lume-1);
}
.idx3-page-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 22ch;
}
.idx3-page-section__title em { font-style: italic; color: var(--lume-1); }
.idx3-page-section__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 16px 0 0;
  max-width: 64ch;
}
.idx3-page-section__body {
  max-width: 1280px;
  margin: 0 auto;
}

/* ============================================================
   STACK PANEL — terminal-style tech specs
   ============================================================ */
.idx3-stack-panel {
  border: 1px solid var(--line);
  background: rgba(14,15,17,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  isolation: isolate;
}
.idx3-stack-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--lume-1) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  pointer-events: none;
}
.idx3-stack-panel { position: relative; }
.idx3-stack-panel__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-stack-panel__head strong { color: var(--lume-1); font-weight: 500; }
.idx3-stack-panel__body { padding: 8px 0; }
.idx3-stack-panel__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 24px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.idx3-stack-panel__row:last-child { border-bottom: 0; }
.idx3-stack-panel__row .k { color: var(--ink-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.idx3-stack-panel__row .v { color: var(--ink-1); }
.idx3-stack-panel__row .v em { color: var(--lume-1); font-style: normal; }

/* ============================================================
   MODULES GRID — cartes module avec hover
   ============================================================ */
.idx3-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.idx3-modules--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .idx3-modules--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .idx3-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .idx3-modules,
  .idx3-modules--4 { grid-template-columns: 1fr; }
}
.idx3-module {
  padding: 28px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(28,31,35,.4);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    border-color .35s var(--ease),
    background-color .35s var(--ease),
    transform .4s var(--ease),
    box-shadow .4s var(--ease);
}
.idx3-module:hover {
  border-color: rgba(88,145,199,.55);
  background: rgba(88,145,199,.06);
  transform: translateY(-4px);
  box-shadow: 0 18px 42px -18px rgba(88,145,199,.35);
}
/* Glow radial qui monte par le haut au hover (signal "actif") */
.idx3-module::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(600px circle at 50% 0%, rgba(88,145,199,.18), transparent 55%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.idx3-module:hover::before { opacity: 1; }

/* Variante <a> : affordance "cliquable" plus marquée */
a.idx3-module {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
a.idx3-module::after {
  content: "→";
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--lume-1);
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity .35s var(--ease),
    transform .35s var(--ease);
  pointer-events: none;
}
a.idx3-module:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.idx3-module__title { transition: color .3s var(--ease); }
a.idx3-module:hover .idx3-module__title { color: var(--lume-1); }
a.idx3-module:focus-visible {
  outline: 2px solid var(--lume-1);
  outline-offset: 4px;
}
.idx3-module__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--lume-1);
  margin-bottom: 12px;
}
.idx3-module__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink-1);
}
.idx3-module__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.idx3-module__tag {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
}

/* ============================================================
   WORKFLOW — steps numérotés narratifs
   ============================================================ */
.idx3-workflows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.idx3-workflow {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--noir-0);
  align-items: start;
}
.idx3-workflow__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--lume-1);
}
.idx3-workflow__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink-1);
}
.idx3-workflow__body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.idx3-workflow__body p:last-child { margin-bottom: 0; }
.idx3-workflow__body em {
  font-style: italic;
  color: var(--lume-3);
}
.idx3-workflow__chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.idx3-workflow__chain span {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}
.idx3-workflow__chain span::before { content: "→"; color: var(--lume-1); margin-right: 6px; }
.idx3-workflow__chain span:first-child::before { display: none; }
@media (max-width: 640px) {
  .idx3-workflow { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .idx3-workflow__num { font-size: 40px; }
}

/* ------------------------------------------------------------
   Workflow stack — animation "blocs qui tombent l'un sur l'autre"
   avec léger tremblement décroissant à l'atterrissage.
   Déclenchée quand la section .reveal entre dans le viewport.
   ------------------------------------------------------------ */
.idx3-page-section.reveal .idx3-workflow {
  opacity: 0;
  transform: translateY(-32px);
  transform-origin: center top;
  will-change: transform, opacity;
}
.idx3-page-section.reveal.in .idx3-workflow {
  /* État de repos explicite : le bloc reste visible après l'animation.
     L'animation ne sert qu'à l'entrée ; backwards gère le délai du stagger. */
  opacity: 1;
  transform: translateY(0);
  animation: wfFallShake 1.1s cubic-bezier(.5, .05, .35, 1) backwards;
}
@keyframes wfFallShake {
  0%   { opacity: 0; transform: translateY(-36px) rotate(0); }
  35%  { opacity: 1; transform: translateY(0) rotate(0); }
  /* tremblement décroissant après l'impact */
  45%  { transform: translateY(-3px) rotate(0.6deg); }
  55%  { transform: translateY(0) rotate(-0.45deg); }
  65%  { transform: translateY(-1.5px) rotate(0.3deg); }
  75%  { transform: translateY(0) rotate(-0.18deg); }
  85%  { transform: translateY(-0.5px) rotate(0.08deg); }
  100% { transform: translateY(0) rotate(0); }
}
.idx3-page-section.reveal.in .idx3-workflow:nth-child(1) { animation-delay:   0ms; }
.idx3-page-section.reveal.in .idx3-workflow:nth-child(2) { animation-delay: 360ms; }
.idx3-page-section.reveal.in .idx3-workflow:nth-child(3) { animation-delay: 720ms; }
.idx3-page-section.reveal.in .idx3-workflow:nth-child(4) { animation-delay:1080ms; }
.idx3-page-section.reveal.in .idx3-workflow:nth-child(5) { animation-delay:1440ms; }
.idx3-page-section.reveal.in .idx3-workflow:nth-child(6) { animation-delay:1800ms; }

@media (prefers-reduced-motion: reduce) {
  .idx3-page-section.reveal .idx3-workflow,
  .idx3-page-section.reveal.in .idx3-workflow {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ============================================================
   COMPARISON TABLE — vs concurrents
   ============================================================ */
.idx3-compare {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.idx3-compare thead th {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lume-1);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.idx3-compare thead th:first-child { color: var(--lume-1); }
.idx3-compare tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.idx3-compare tbody td:first-child {
  color: var(--ink-1);
}
.idx3-compare tbody td.yes { color: var(--success); }
.idx3-compare tbody td.no { color: var(--danger); opacity: .8; }
.idx3-compare tbody tr:nth-child(odd) td { background: rgba(255,255,255,.015); }
.idx3-compare tbody tr.us td:first-child { color: var(--lume-1); font-weight: 500; }
.idx3-compare tbody tr.us td.yes { color: var(--lume-1); }
.idx3-compare .scroll-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ============================================================
   INTÉGRATIONS GRID
   ============================================================ */
.idx3-integ {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.idx3-integ__item {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(28,31,35,.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .3s var(--ease);
}
.idx3-integ__item:hover { border-color: rgba(88,145,199,.3); }
.idx3-integ__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-1);
}
.idx3-integ__name em {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lume-1);
  display: block;
  margin-bottom: 4px;
  font-style: normal;
}
.idx3-integ__desc {
  font-size: 12px;
  font-family: var(--font-mono);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   PLANS GRID — pricing cards
   ============================================================ */
.idx3-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.idx3-plan {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(28,31,35,.6) 0%, rgba(14,15,17,.6) 100%);
  position: relative;
  isolation: isolate;
}
.idx3-plan--featured {
  border-color: var(--lume-1);
  background: linear-gradient(160deg, rgba(88,145,199,.08) 0%, rgba(14,15,17,.8) 100%);
}
.idx3-plan--featured::before {
  content: "Le plus populaire";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lume-1);
  color: var(--noir-0);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
}
.idx3-plan__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--ink-1);
}
.idx3-plan__price {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--lume-1);
  margin: 24px 0 8px;
}
.idx3-plan__price sub {
  font-size: 14px;
  color: var(--ink-3);
  vertical-align: baseline;
  font-family: var(--font-mono);
  margin-left: 6px;
}
.idx3-plan__period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
  display: block;
}
.idx3-plan__features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idx3-plan__features li {
  font-size: 13px;
  color: var(--ink-2);
  padding-left: 20px;
  position: relative;
}
.idx3-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lume-1);
}

/* ============================================================
   VOCAB GRID — vocabulaire produit
   ============================================================ */
.idx3-vocab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.idx3-vocab__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding-right: 24px;
  padding-left: 24px;
}
.idx3-vocab__item:nth-child(3n) { border-right: 0; }
@media (max-width: 980px) {
  .idx3-vocab__item:nth-child(3n) { border-right: 1px solid var(--line); }
  .idx3-vocab__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 640px) {
  .idx3-vocab__item:nth-child(2n) { border-right: 1px solid var(--line); }
  .idx3-vocab__item { border-right: 0 !important; }
}
.idx3-vocab__term {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--lume-1);
  margin: 0 0 6px;
}
.idx3-vocab__def {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   FACTS row — chiffres clés inline
   ============================================================ */
.idx3-facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(40px, 6vw, 64px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.idx3-facts-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.idx3-facts-row .num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--lume-1);
  font-weight: 400;
}
.idx3-facts-row .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ============================================================
   PROSE — long-form content
   ============================================================ */
.idx3-prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.idx3-prose p { margin: 0 0 24px; }
.idx3-prose p:last-child { margin-bottom: 0; }
.idx3-prose em { color: var(--lume-3); font-style: italic; }
.idx3-prose strong { color: var(--ink-1); font-weight: 500; }
.idx3-prose h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 48px 0 16px;
  color: var(--ink-1);
}
.idx3-prose h3 em { font-style: italic; color: var(--lume-1); }
.idx3-prose ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.idx3-prose ul li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 10px;
}
.idx3-prose ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--lume-1);
}

/* ============================================================
   PRODUCT BADGE — pour la fiche SaaS
   ============================================================ */
.idx3-prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid var(--lume-1);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 28px;
}
.idx3-prod-badge::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--lume-1);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--lume-glow);
  animation: prodPulse 2.4s ease-in-out infinite;
}
@keyframes prodPulse { 50% { opacity: .35; } }

/* ============================================================
   FORM CONTACT
   ============================================================ */
.idx3-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.idx3-form__row { display: flex; flex-direction: column; gap: 8px; }
.idx3-form__row--full { grid-column: 1 / -1; }
.idx3-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-form input,
.idx3-form select,
.idx3-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-1);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.idx3-form input:focus,
.idx3-form select:focus,
.idx3-form textarea:focus {
  outline: none;
  border-color: var(--lume-1);
  background: rgba(88,145,199,.05);
}
.idx3-form textarea { min-height: 160px; resize: vertical; }
@media (max-width: 640px) {
  .idx3-form { grid-template-columns: 1fr; }
}

/* ============================================================
   STATUS LIST — pour /status/
   ============================================================ */
.idx3-status {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.idx3-status__row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 18px 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
}
.idx3-status__row:last-child { border-bottom: 0; }
.idx3-status__row--head {
  background: rgba(255,255,255,.02);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--lume-1);
}
.idx3-status__name { color: var(--ink-1); font-family: var(--font-body); font-size: 15px; }
.idx3-status__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--success);
}
.idx3-status__state::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: lumePulse 2.4s ease-in-out infinite;
}
.idx3-status__state.is-warn { color: var(--warning); }
.idx3-status__state.is-warn::before { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.idx3-status__state.is-down { color: var(--danger); }
.idx3-status__state.is-down::before { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.idx3-status__uptime { color: var(--ink-2); text-align: right; }
@media (max-width: 780px) {
  .idx3-status__row { grid-template-columns: 1fr 1fr; }
  .idx3-status__row--head { display: none; }
  .idx3-status__name { grid-column: 1 / -1; font-weight: 500; }
}

/* ============================================================
   LEGAL — long-form (CGV, mentions, RGPD)
   ============================================================ */
.idx3-legal {
  max-width: 80ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.idx3-legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 64px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.idx3-legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.idx3-legal h2 em { font-style: italic; color: var(--lume-1); }
.idx3-legal p { margin: 0 0 20px; }
.idx3-legal ul { margin: 0 0 20px; padding: 0; list-style: none; }
.idx3-legal ul li { padding-left: 24px; position: relative; margin-bottom: 10px; }
.idx3-legal ul li::before { content: "→"; position: absolute; left: 0; color: var(--lume-1); }
.idx3-legal a { color: var(--lume-1); text-decoration: underline; text-underline-offset: 3px; }
.idx3-legal strong { color: var(--ink-1); font-weight: 500; }
.idx3-legal em { color: var(--lume-3); font-style: italic; }

/* ============================================================
   TESTIMONIAL — pour /references/
   ============================================================ */
.idx3-testimonial {
  border-left: 2px solid var(--lume-1);
  padding: 32px 0 32px 40px;
  margin-bottom: 48px;
  max-width: 800px;
}
.idx3-testimonial:last-child { margin-bottom: 0; }
.idx3-testimonial blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  color: var(--ink-1);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.idx3-testimonial cite {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-style: normal;
}
.idx3-testimonial cite strong { color: var(--lume-1); font-weight: 500; }

/* ============================================================
   STICKY TOC — table des matières latérale
   ============================================================ */
.idx3-toc {
  position: sticky;
  top: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.idx3-toc__label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.idx3-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.idx3-toc li {
  counter-increment: toc;
  padding: 8px 0;
}
.idx3-toc a {
  color: var(--ink-2);
  text-decoration: none;
  display: flex;
  gap: 12px;
  transition: color .25s var(--ease);
}
.idx3-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--ink-3);
  font-size: 10px;
  flex-shrink: 0;
}
.idx3-toc a:hover { color: var(--lume-1); }
.idx3-toc a:hover::before { color: var(--lume-1); }