/* ==========================================================================
   InTest — inertron.css
   Page « Inertron by InTest » (inertron.html), chargée après main.css.
   Maquettes Figma : page 6056:6298 (1680 px), en-tête compact 10031:5371,
   haut de page mobile 10034:6874.

   1.  Tokens de la page
   2.  En-tête Inertron (.site-header--inertron) : onglet, logo, ancres, état compact
   3.  Hero Inertron (.hero--inertron) : fond, cadre, textes, chiffres
   4.  Visuel animé (.inertron-stage) et sélecteur d'objet (.objet-picker)
   5.  Sections claires Inertron (.section--inertron)
   6.  Lecteur vidéo maquetté (.video-player) + section Vidéo
   7.  Ce que mesure Inertron (.mci)
   8.  Principe (fond sombre) : étapes, tracés, théorie
   9.  Modèles & capacités (.models)
   10. Précision de mesure (.precision-table)
   11. Avantages (.advantages)
   12. Contact (.contact--inertron)
   13. Responsive
   14. Mouvement réduit
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  --inertron-grey-100: #f3f4f6;   /* Figma inertron/grey-100 */
  --inertron-grey-200: #e9ebef;   /* Figma inertron/grey-200 */
  --inertron-veil: #3a424e;       /* inertron/dark-grey (#29323f) à 92 % sur blanc : fond « Principe » */
  --inertron-contact: #273140;    /* inertron/dark-grey à 92 % sur navy : fond du contact */
  --inertron-glow: #475465;       /* « inertron gradient » : halo radial de 589 px de rayon */
  --inertron-glow-0: rgb(71 84 101 / 0);
  --inertron-bar: var(--inertron-900); /* barre compacte de l’en-tête (inertron/dark-grey) */
  --inertron-tab-top: #165aab;    /* onglet « Retour à l'accueil » : bleu mesuré sur la maquette */
  --inertron-tab-bottom: #1b5dae;
  --black-10: rgb(0 0 0 / 0.1);   /* filets des sections claires */
  --inertron-line: #b9c6d3;       /* traits du fond animé du hero (page de référence : --in-300) */
}

/* La navigation d'ancres est dans l'en-tête : le décalage des ancres et des titres de rail
   se limite à l'en-tête compact (main.css ajoute sinon la hauteur d'une barre d'ancres) */
:root:has(.site-header--inertron) {
  --sticky-offset: var(--header-sticky-h);
}

/* Interlignes arrondis au pixel, comme Figma (56 × 1,1 = 61,6 → 62 px ; 12 × 1,2 = 14,4 → 14 px…) :
   évite une dérive cumulée de plusieurs pixels sur la hauteur de la page. */
.hero-inertron__stat dt,
.mci__num,
.model__range,
.model__label,
.advantage__num,
.principe-trace figcaption,
.principe-theory__kicker {
  line-height: 1.2;
  line-height: round(1.2em, 1px);
}

.hero-inertron__lead,
.inertron-video__kicker,
.mci__foot,
.precision-table thead th,
.precision-table td {
  line-height: 1.3;
  line-height: round(1.3em, 1px);
}

/* 2. En-tête Inertron -----------------------------------------------------------
   Fixe (main.css). En haut de page, il est posé dans le cadre du hero : onglet bleu
   « InTest — Retour à l'accueil » découpé en diagonale (x 10 → 361, y 10 → 87), grand
   logo Inertron, ancres de la page et langue. Au défilement (.is-sticky, main.js), il
   devient une barre sombre de 86 px avec ombre douce : l'onglet InTest s'efface, le logo
   Inertron se réduit (255 → 106 px) et prend sa place à gauche, les liens se recentrent. */
.inertron-header__bg {
  display: none;
}

@media (min-width: 75em) {
  .site-header--inertron {
    --brand-w: clamp(7.5rem, 33.75vw - 17.8125rem, 15.9375rem); /* 255 px dès 1600 px, 120 px à 1200 px */
    height: 6rem; /* y 24 → 120 */
  }

  /* main.css décale l'en-tête standard en mode compact : ici, il garde sa place */
  .site-header--inertron.is-sticky {
    top: 0;
    left: calc(max(var(--gutter), 50% - var(--page-max) / 2 + var(--gutter)) + 1px);
    height: var(--header-sticky-h);
  }

  /* Fond de la barre compacte : pleine largeur, opacité 0 → 1 */
  .inertron-header__bg {
    position: absolute;
    top: calc(-1 * var(--hero-pt));
    left: calc(-1 * max(var(--gutter), 50vw - var(--page-max) / 2 + var(--gutter)) - 1px);
    right: calc(-1 * max(var(--gutter), 50vw - var(--page-max) / 2 + var(--gutter)));
    z-index: -1;
    display: block;
    height: var(--header-sticky-h);
    background: var(--inertron-bar);
    box-shadow: 0 0.5rem 2rem rgb(3 14 30 / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease), top 0.4s var(--ease);
  }

  .site-header--inertron.is-sticky .inertron-header__bg {
    top: 0;
    opacity: 1;
  }

  /* Onglet « Retour à l'accueil » : 350,7 × 77 px, diagonale de (350,7 ; 0) à (288 ; 77) */
  .inertron-home {
    position: absolute;
    top: -0.875rem;   /* y = 10 */
    left: -0.9375rem; /* x = 10 */
    width: 21.918rem;
    height: 4.8125rem;
    padding: 0.125rem 0 0 2.375rem; /* logo en (48, 31) */
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0s;
  }

  /* Barre compacte : l'onglet InTest remonte et s'efface (hors de l'ordre de tabulation) */
  .site-header--inertron.is-sticky .inertron-home {
    opacity: 0;
    visibility: hidden;
    transform: translate(-0.625rem, -100%);
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.4s;
  }

  /* Grand logo « Inertron by InTest » (texte de 75 px) en (391, 44) */
  .inertron-brand {
    position: absolute;
    top: 1.3125rem; /* y = 45 */
    left: 22.875rem;
    width: var(--brand-w);
    transition: width 0.4s var(--ease), top 0.4s var(--ease), left 0.4s var(--ease);
  }

  /* Barre compacte : logo de 106 × 50 px (+ 25 %), centré dans la barre, à la place de l'onglet */
  .site-header--inertron.is-sticky .inertron-brand {
    top: 1.125rem;
    left: var(--rail-px);
    width: 6.625rem;
  }

  /* Ancres + langue : cellule de 879 px alignée à droite (marge 48 px), centre à y = 91,5 */
  .inertron-header__bar {
    position: absolute;
    top: 2.96875rem;
    right: calc(var(--main-px) + 1px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(54.9375rem, 100% - 24.375rem - var(--brand-w) - var(--main-px) - 1px);
    height: 2.5rem;
    transition: transform 0.4s var(--ease);
  }

  .site-header--inertron.is-sticky .inertron-header__bar {
    transform: translateY(-1.53125rem); /* centre à 43 px : milieu de la barre de 86 px */
  }
}

.inertron-home {
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  color: var(--white);
}

/* Fond bleu découpé en diagonale + découpe blanche (cadre de la page) contre le fond sombre */
.inertron-home::before,
.inertron-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.inertron-home::before {
  background: linear-gradient(180deg, var(--inertron-tab-top), var(--inertron-tab-bottom));
  clip-path: polygon(0 0, 100% 0, 82.13% 100%, 0 100%);
}

.inertron-home::after {
  background: var(--white);
  clip-path: polygon(80.62% 0, 100% 0, 90.54% 52.92%);
}

.inertron-home__logo {
  flex: none;
  width: 7.5rem; /* 120 px */
}

/* « Retour à l'accueil » : 12 px, précédé d'un filet vertical de 36 px */
.inertron-home__text {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--white-70);
  transition: color 0.2s var(--ease);
}

.inertron-home__text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 2.25rem;
  background: var(--white-15);
  transform: translateY(-50%);
}

.inertron-home:hover .inertron-home__text {
  color: var(--white);
}

/* Focus : blanc sur l'onglet bleu et la barre sombre (bleu dans la liste des langues, sur fond blanc) */
.site-header--inertron :focus-visible {
  outline-color: var(--white);
}

.site-header--inertron .lang__list :focus-visible {
  outline-color: var(--blue-500);
}

.inertron-home:focus-visible {
  outline-offset: -0.375rem;
}

.inertron-brand {
  display: block;
}

.inertron-brand__logo {
  width: 100%;
  view-transition-name: inertron-logo; /* reçoit le logo de l'onglet Inertron (main.css, 12 ter) */
}

.mobile-nav.is-open .mobile-nav__promo-logo {
  view-transition-name: none;
}

/* Arrivée sur la page : petit halo sur le logo une fois en place ; sans transition entre
   pages (Firefox…), le logo arrive de la droite */
@media (prefers-reduced-motion: no-preference) {
  .inertron-brand__logo {
    animation: inertron-logo-focus 1s var(--ease-out) 0.35s both;
  }

  @supports not (view-transition-name: none) {
    .inertron-brand {
      animation: inertron-brand-arrive 0.7s var(--ease-out) both;
    }
  }
}

@keyframes inertron-logo-focus {
  40% {
    filter: drop-shadow(0 0 1.25rem rgb(255 255 255 / 0.45));
  }
}

@keyframes inertron-brand-arrive {
  from {
    opacity: 0;
    transform: translateX(min(50vw, 40rem));
  }
}

/* Liens d'ancres : 14 px capitales, actif en gras blanc (scrollspy de main.js) */
.inertron-nav {
  flex: 0 1 46.3125rem; /* 741 px @1680 */
  min-width: 0;
}

.inertron-nav__list {
  display: flex;
  justify-content: space-between;
  column-gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inertron-nav__link {
  display: grid;
  justify-items: center; /* libellé centré dans la largeur réservée au gras */
  padding: 0.8125rem 0; /* zone cliquable de 40 px */
  font-size: clamp(0.75rem, 0.03125rem + 0.9375vw, 0.875rem); /* 14 px dès 1440 px, 12 px à 1200 px */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white-70);
  transition: color 0.2s var(--ease);
}

/* Largeur réservée au libellé en gras : aucun décalage quand le lien actif change */
.inertron-nav__link::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
}

.inertron-nav__link:hover {
  color: var(--white);
}

.inertron-nav__link[aria-current="true"] {
  font-weight: 700;
  color: var(--white);
}

.inertron-nav__link:focus-visible {
  outline-offset: 0.25rem;
}

/* 3. Hero Inertron -------------------------------------------------------------
   Fond inertron/dark-grey plein (l'onglet bleu est dessiné par l'en-tête) + halo radial
   centré en (951, 570). Cadre de 10 px : bord droit du fond à x = 1669. */
.hero--inertron .hero__bg {
  right: calc(0.625rem + 1px);
  background: var(--inertron-900);
}

.hero--inertron .hero__bg::after {
  display: none;
}

.hero-inertron__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 36.8125rem at calc(100% - 44.875rem) 35rem, var(--inertron-glow), var(--inertron-glow-0));
}

/* Grille : filet haut (x 371 → 1656) et filet gauche (y 103 → bas), reliés par la diagonale
   qui contourne l'onglet ; contenu à y = 223 */
.hero--inertron .hero__grid {
  padding-top: 12.4375rem;
  border-left: 0;
  box-shadow: inset -1px 0 0 var(--white-15); /* filet droit (x = 1655) sans réduire la colonne du visuel */
}

.hero--inertron .hero__grid::before,
.hero--inertron .hero__grid::after {
  content: "";
  position: absolute;
  background: var(--white-15);
}

.hero--inertron .hero__grid::before {
  top: 0;
  left: 21.6875rem;
  right: 0;
  height: 1px;
}

.hero--inertron .hero__grid::after {
  top: 4.9375rem;
  bottom: 0;
  left: 0;
  width: 1px;
}

.hero-inertron__notch {
  position: absolute;
  top: 0;
  left: 0;
  width: 21.6875rem;
  height: 5rem;
  overflow: visible;
  color: var(--white-15);
}

.hero--inertron .hero__body {
  min-height: 0;
  padding-top: 0;
  border-right: 0;
}

.hero--inertron .hero__rail {
  padding: 0 var(--rail-px) 2.5rem;
  border-right-color: var(--white-15);
}

/* Colonne texte : 652 px à 1680 px, jamais plus ; au-delà, l'espace va à la colonne du visuel */
.hero--inertron .hero__main {
  container-type: inline-size; /* taille du H1 relative à la colonne */
  flex: 0 1 40.75rem;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
  min-height: 0;
  padding: 0 0 4.4375rem var(--main-px); /* 71 px sous « Brevetée par » */
}

.hero-inertron__intro {
  display: flex;
  flex-direction: column;
  gap: 2.125rem;
}

/* H1 : 67 px @1680 ; « nouvelle génération » (souligné, insécable) tient toujours dans la colonne */
.hero-inertron__title {
  padding-left: 0;
  font-size: clamp(2.25rem, 4vw, 4.1875rem);
  font-size: clamp(1.75rem, 11.4cqi, 4.1875rem);
}

/* Filet dégradé posé sous la 2e ligne (y 357 → 360), de la longueur du texte (« nouvelle
   génération ») ; il compte dans la hauteur du titre (bloc de 137 px dans la maquette) */
.hero-inertron__title {
  margin-bottom: 0.1875rem;
}

.hero-inertron__title .u-underline::after {
  bottom: -3px;
}

.hero-inertron__lead {
  max-width: 31.5rem; /* 504 px */
  font-size: var(--fs-lead);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--white-70);
}

/* Chiffres clés */
.hero-inertron__stats {
  display: flex;
  margin: 0;
}

.hero-inertron__stat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-right: 2rem;
  white-space: nowrap;
}

.hero-inertron__stat + .hero-inertron__stat {
  padding-left: 1.5rem;
  border-left: 1px solid var(--white-15);
}

.hero-inertron__stat dt {
  order: 2;
  color: var(--white-70);
}

.hero-inertron__stat dd {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Tuiles accolées 262 × 140 */
.hero-inertron__tiles {
  flex-wrap: nowrap;
}

.hero-inertron__tiles .tile {
  flex: 0 1 16.40625rem;
  width: auto;
  min-height: 8.75rem;
}

.hero-inertron__tiles .tile:not(.tile--primary) {
  border-color: var(--white-30);
}

.hero-inertron__patent {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--white-70);
}

.hero-inertron__patent img {
  width: 7.375rem; /* 118 × 30 */
  height: 1.875rem;
}

/* Colonne du visuel : 700 px @1680, puis tout l'espace restant (scène centrée dedans) */
.hero-inertron__visual {
  position: relative;
  flex: 1 0 clamp(28rem, 41.667vw, 43.75rem);
  min-width: 0;
}

/* 4. Visuel animé ------------------------------------------------------------------
   - Fond animé (canvas sur tout le fond du hero, inertron.js) : mécanisme de l'hexapode centré
     sur la machine, apparition en fondu.
   - Scène de référence 700 × 646 (colonne droite à 1680 px) : tout y est placé en %.
   - Clip : cadre recadré 1080 × 968 des rendus (machine au même endroit dans tous les clips),
     posé pour que la machine coïncide avec le visuel de la maquette.
   - Affiche (1re image du clip « drone ») : affichage immédiat, repli images fixes. */
.hero-inertron__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}

.hero-inertron__canvas.is-on {
  opacity: 1;
}

.inertron-stage {
  position: relative;
  aspect-ratio: 700 / 646;
}

/* Scène de 700 px (à l’échelle de la page) centrée dans sa colonne ; sur une fenêtre basse, elle se réduit
   pour que la machine et le sélecteur restent entiers dans le premier écran (scène en haut à
   13,94 rem, bas des libellés du sélecteur à 0,7 × la largeur + 5,375 rem, plus 1,5 rem de marge). */
@media (min-width: 75em) {
  .inertron-stage {
    width: clamp(28rem, (100vh - 20.8125rem) / 0.7, min(100%, 43.75rem));
    margin-inline: auto;
  }
}

.inertron-stage__clip {
  position: absolute;
  isolation: isolate; /* le fondu en addition ne concerne que les deux lecteurs */
  top: -13.48%;   /* y = 136 */
  left: 13.93%;   /* x = 1053,5 */
  width: 79.26%;  /* 554,9 px */
  aspect-ratio: 1080 / 968;
  pointer-events: none;
}

.inertron-stage__poster,
.inertron-stage__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Lecteurs (inertron.js) : fondu enchaîné exact en addition (plus-lighter), sinon simple fondu */
.inertron-stage__media {
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.inertron-stage__media.is-on {
  opacity: 1;
}

.inertron-stage__media + .inertron-stage__media {
  mix-blend-mode: plus-lighter;
}

.inertron-stage__clip.is-playing .inertron-stage__poster {
  opacity: 0;
}

/* Images fixes (Safari sans HEVC, lecture refusée, mouvement réduit) : fondu entre deux calques */
.inertron-stage__still {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.inertron-stage__still.is-on {
  opacity: 1;
}

/* Sélecteur d'objet : 4 boutons de 56 px, centrés sous la machine (y = 713) */
.objet-picker {
  position: absolute;
  top: 75.85%;
  left: 28.43%;
  display: flex;
  gap: 0.75rem;
}

.objet-picker__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  width: 3.5rem;
  color: var(--white);
}

.objet-picker__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid var(--white-15);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.objet-picker__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.objet-picker__label {
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white-30);
  transition: color 0.25s var(--ease);
}

.objet-picker__btn:hover .objet-picker__icon {
  border-color: var(--white-30);
  background-color: rgb(255 255 255 / 0.15);
}

.objet-picker__btn:hover .objet-picker__label {
  color: var(--white-70);
}

.objet-picker__btn[aria-pressed="true"] .objet-picker__icon {
  border-color: var(--white-70);
}

.objet-picker__btn[aria-pressed="true"] .objet-picker__label {
  color: var(--white);
}

/* Objet actif (maquette) : cadre blanc 70 %, libellé blanc et filet bleu de 24 × 2 px centré
   sous le pictogramme */
.objet-picker__icon::after {
  content: "";
  position: absolute;
  top: 2.8125rem;
  left: 1rem;
  width: 1.5rem;
  height: 2px;
  background: var(--blue-500);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.objet-picker__btn[aria-pressed="true"] .objet-picker__icon::after {
  opacity: 1;
}

/* Pause / reprise de l'animation (WCAG 2.2.2), discrète, à droite des pictogrammes */
.inertron-stage__toggle {
  position: absolute;
  top: calc(75.85% + 0.75rem);
  right: 1.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--white-15);
  color: var(--white-70);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.inertron-stage__toggle[hidden] {
  display: none;
}

.inertron-stage__toggle svg {
  width: 1rem;
  height: 1rem;
}

.inertron-stage__toggle:hover {
  border-color: var(--white-70);
  color: var(--white);
}

.inertron-stage__toggle-play,
.inertron-stage__toggle.is-paused .inertron-stage__toggle-pause {
  display: none;
}

.inertron-stage__toggle.is-paused .inertron-stage__toggle-play {
  display: block;
}

/* 5. Sections claires Inertron ------------------------------------------------------
   Grille sur fond gris (#e9ebef ou #f3f4f6), filets noirs à 10 %. */
.section--inertron {
  --line: var(--black-10);
  --rail-pt: 4rem;
  --main-pt: 4rem;
}

.section--inertron .section__grid {
  border-bottom: 1px solid var(--line);
  background: var(--inertron-grey-200);
}

.section--inertron-pale .section__grid {
  background: var(--inertron-grey-100);
}

.section--inertron .eyebrow {
  color: var(--navy-70);
}

.section--inertron .section-head__title,
.inertron-principe .section-head__title {
  max-width: 51.25rem;
}

.section--inertron .section-head__lead {
  flex-basis: 23.25rem;
}

/* 6. Lecteur vidéo maquetté ----------------------------------------------------------
   Vignette + barre de contrôle factice ; le bouton ouvre la modale vidéo (main.js). */
.video-player {
  position: relative;
  flex: 0 1 48.75rem;
  min-width: 0;
  overflow: hidden;
  background: var(--inertron-900);
  color: var(--white);
}

.video-player__poster {
  width: 100%;
}

.video-player__controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 3.5rem;
  padding: 0 1.25rem;
  background: var(--inertron-900);
}

.video-player__track {
  flex: 1;
  height: 1px;
  background: var(--white);
}

.video-player__tools {
  display: flex;
  align-items: center;
  gap: 1.375rem; /* « CC   ⛶ » : trois espaces de DM Mono 12 px */
}

.video-player__fs {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
}

.video-player__btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
}

.video-player__btn .play-btn {
  position: absolute;
  top: calc(50% - 0.5px);
  left: calc(50% + 0.5px);
  transform: translate(-50%, -50%);
}

.video-player__btn:hover .play-btn,
.video-player__btn:focus-visible .play-btn {
  background: var(--blue-500);
  color: var(--white);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-player__btn:focus-visible {
  outline-offset: -0.25rem;
}

/* Variante compacte (« Principe ») : pas de bouton lecture visible au repos */
.video-player--compact {
  flex: 0 0 26rem;
}

.video-player--compact .video-player__controls {
  position: relative;
  margin-top: -1px; /* la barre recouvre l'image sur 1 px, comme la maquette */
}

.video-player--compact .play-btn {
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.video-player--compact .video-player__btn:hover .play-btn,
.video-player--compact .video-player__btn:focus-visible .play-btn {
  opacity: 1;
}

/* Section vidéo : lecteur 780 × 440 + texte, marges de 64 px (section de 569 px) */
.inertron-video .section__main {
  --main-pt: 4rem;
  --main-pb: 4rem;
  flex-direction: row;
  align-items: flex-start;
  gap: 3rem;
}

.inertron-video__text {
  display: flex;
  flex: 1 1 18.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
}

.inertron-video__kicker {
  color: var(--blue-500);
}

.inertron-video__desc {
  max-width: 32.5rem; /* longueur de ligne lisible en très grand écran */
  color: var(--navy-70);
}

/* 7. Ce que mesure Inertron ------------------------------------------------------------ */
.inertron-mesure .section__main {
  --main-gap: 3rem;
}

/* Colonnes flex de base nulle : contenus de même largeur, comme la maquette */
.mci {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

.mci__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding: 2.5rem 2.25rem;
}

.mci__item:first-child {
  padding-left: 0;
}

.mci__item + .mci__item {
  border-left: 1px solid var(--line);
}

.mci__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem; /* espaceur de 8 px + écart de 20 px */
}

.mci__icon {
  flex: none;
  width: 7.5rem;
  height: 6rem;
}

.mci__num,
.model__range,
.advantage__num {
  color: var(--blue-500);
}

.mci__title,
.principe-step__title,
.advantage__title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.mci__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy-70);
}

.mci__foot {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy-70);
}

/* 8. Principe (fond sombre) -------------------------------------------------------------- */
.inertron-principe {
  --section-bg: var(--white); /* marges blanches autour de la grille */
  --rail-pt: 4rem;
  --main-pt: 4rem;
  --main-gap: 4rem;
}

.inertron-principe .section__grid {
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle 36.8125rem at 45.1875rem 26.875rem, var(--inertron-glow), var(--inertron-glow-0)), var(--inertron-veil);
}

.principe-intro {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.principe-intro__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
  min-height: 35.4375rem;
}

.principe-intro__title {
  flex: 1 0 auto;
}

.principe-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.principe-step {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.principe-step__num {
  flex: 0 0 2rem;
  color: var(--blue-400);
}

.principe-step__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.principe-step__text {
  max-width: 45rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--white-70);
}

/* Tracés ROLL / PITCH / YAW : le curseur parcourt les positions mesurées en continu (inertron.js) */
.principe-traces {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 3.5rem 3rem 3rem;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.03);
}

.principe-traces__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.principe-trace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.principe-trace__plot {
  position: relative;
  width: 17.5rem;
  max-width: 100%;
  aspect-ratio: 1;
}

.principe-trace__plot img,
.principe-trace__cursor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.principe-trace figcaption {
  color: var(--white-70);
}

.principe-traces__caption {
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: var(--white-70);
}

/* Théorie : T = P + a · v² · MCI */
.principe-theory {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}

.principe-theory__kicker {
  font-weight: 400;
  color: var(--white-70);
}

.principe-formula {
  display: flex;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: clamp(1.5rem, 0.15rem + 3.2vw, 3.5rem); /* 56 px @1680 */
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: pre;
  color: var(--white-70);
}

.principe-formula__mci {
  padding: 2px 0.875rem;
  background: var(--blue-400);
  color: var(--white);
}

.principe-theory__text {
  max-width: 51.25rem;
  color: var(--white-70);
}

.principe-theory__text strong {
  font-weight: 700;
}

/* 9. Modèles & capacités ---------------------------------------------------------------------- */
.inertron-models .section__main {
  --main-gap: 2rem;
}

.models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--inertron-grey-100);
}

.model {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem; /* écart minimal ; à 1680 px la hauteur fixe (526 px) répartit l'espace */
  min-height: 32.875rem;
  padding: 2.25rem;
}

.model + .model {
  border-left: 1px solid var(--line);
}

.model__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.model__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Échelle de capacité : carré en pointillés (tirets 4 / 2 px) + carré bleu en bas à gauche */
.model__scale {
  --dash-x: repeating-linear-gradient(90deg, var(--navy) 0 0.25rem, transparent 0.25rem 0.375rem);
  --dash-y: repeating-linear-gradient(180deg, var(--navy) 0 0.25rem, transparent 0.25rem 0.375rem);
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  background:
    linear-gradient(var(--blue-200), var(--blue-200)) left bottom / var(--scale) var(--scale) no-repeat,
    var(--dash-x) left top / 100% 1px no-repeat,
    var(--dash-x) left bottom / 100% 1px no-repeat,
    var(--dash-y) left top / 1px 100% no-repeat,
    var(--dash-y) right top / 1px 100% no-repeat;
}

.model__scale--200 { --scale: 1.75rem; }
.model__scale--1500 { --scale: 2.75rem; }
.model__scale--10000 { --scale: 4.25rem; }

.model__label {
  color: var(--navy-70);
}

.model__specs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.model__specs li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy-70);
}

.model__visual {
  flex: none;
  width: 10.625rem;
  height: 10.625rem;
  border: 1px solid var(--line);
}

.model__visual img {
  width: 10.5rem;
  height: 10.5rem;
}

.models-notes {
  display: flex;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy-70);
}

.models-notes p {
  flex: 1;
}

/* 10. Précision de mesure (tableau) ----------------------------------------------------------- */
.inertron-precision .section__main {
  --main-gap: 4rem;
}

.precision-table {
  overflow-x: auto;
}

.precision-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.precision-table th,
.precision-table td {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.precision-table thead th {
  padding: 0 0 1.25rem;
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-500);
}

.precision-table thead th:first-child {
  color: var(--navy-70);
}

.precision-table tbody th {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.precision-table td {
  font-size: var(--fs-lead);
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* Renvois ⁽¹⁾ ⁽²⁾ (les parenthèses en exposant n'existent pas dans DM Sans) */
.precision-table sup {
  position: relative;
  top: -0.86em; /* haut du renvoi au niveau des capitales, comme ⁽¹⁾ dans la maquette */
  margin-left: 2px;
  font-size: 0.5em;
  font-weight: 400;
  line-height: 0;
  vertical-align: baseline;
}

.precision-table sup a:hover {
  color: var(--blue-500);
}

.precision-notes {
  color: var(--navy-70);
}

.precision-notes span + span {
  margin-left: 0.5rem; /* « .   (2) » : trois espaces dans la maquette */
}

/* 11. Avantages ------------------------------------------------------------------------------- */
.inertron-advantages .section__main {
  --main-gap: 4rem;
}

.advantages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--inertron-grey-100);
}

.advantage {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  padding: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.advantage:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line);
}

.advantage__list {
  max-width: 32.5rem;
  margin: 0;
  padding-left: 1.5rem;
  color: var(--navy-70);
}

/* Carte d'appel « Une question ? » */
.advantage--cta {
  padding: 0;
  background: var(--blue-500);
}

.advantages > .advantage--cta {
  border-left: 0;
}

.advantage__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.375rem;
  height: 100%;
  padding: 1.5rem 1.75rem 1.75rem;
  color: var(--white);
  transition: background-color 0.3s var(--ease);
}

.advantage__cta .ico-ne {
  position: absolute;
  top: 2.34375rem;   /* flèche centrée dans un carré de 44 px placé à 24 px du haut… */
  right: 2.60438rem; /* … et à 28,17 px de la droite */
}

.advantage__cta-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--white-70);
}

.advantage__cta:hover {
  background: var(--blue-600);
}

.advantage__cta:focus-visible {
  outline-color: var(--navy);
}

/* 12. Contact : fond inertron/dark-grey + halo (au lieu de la photo de l'accueil) -------------- */
.contact--inertron {
  --section-bg: var(--inertron-contact);
}

.contact--inertron .section__bg {
  background-color: var(--inertron-contact);
  background-image: radial-gradient(circle 36.8125rem at calc(50% - 7.3125rem) 2.375rem, var(--inertron-glow), var(--inertron-glow-0));
}

/* 13. Responsive -------------------------------------------------------------------------------- */

/* ≤ 1439 px */
@media (max-width: 89.9375em) {
  .section--inertron .section-head__lead {
    flex-basis: 18.75rem;
  }

  .hero-inertron__stat {
    padding-right: 1.25rem;
  }

  .hero-inertron__stat + .hero-inertron__stat {
    padding-left: 1rem;
  }
}

/* ≤ 1279 px : les libellés des chiffres peuvent passer sur deux lignes */
@media (max-width: 79.9375em) {
  .hero-inertron__stat dt {
    max-width: 10em;
    white-space: normal;
  }
}

/* ≤ 1199 px : en-tête mobile (main.css : 92 px, compact 64 px) — onglet bleu réduit au logo InTest
   dans le coin du cadre, logo Inertron, menu ; hero sur fond sombre plein, visuel sous le texte */
@media (max-width: 74.9375em) {
  .site-header--inertron {
    --tab-inset: 0.625rem; /* cadre blanc du hero */
  }

  /* Ancres de la page en tête du panneau mobile (masquées dans l'en-tête sous 1200 px) */
  .mobile-nav__page {
    margin-bottom: 2rem;
  }

  .mobile-nav__page-title {
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    color: var(--white-70);
  }

  .mobile-nav__anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__anchors a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--white-15);
    font-size: 0.9375rem;
    transition: border-color 0.2s var(--ease);
  }

  .mobile-nav__anchors a:hover {
    border-color: var(--white-70);
  }

  .inertron-header__bg {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--gutter) - 1px);
    right: calc(-1 * var(--gutter));
    z-index: -1;
    display: block;
    height: var(--header-sticky-h);
    background: var(--inertron-bar);
    box-shadow: 0 0.5rem 2rem rgb(3 14 30 / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
  }

  .site-header--inertron.is-sticky .inertron-header__bg {
    opacity: 1;
  }

  /* Onglet : 60 px de haut dans le coin du cadre (centre aligné sur le burger), 64 px collé */
  .inertron-home {
    position: absolute;
    top: var(--tab-inset);
    left: calc(var(--tab-inset) - var(--gutter) - 1px);
    height: 3.75rem;
    padding: 0 3rem 0 0.875rem;
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0s;
  }

  .site-header--inertron.is-sticky .inertron-home {
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-1 * var(--tab-inset)), -100%);
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.4s;
  }

  .inertron-home::before {
    clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
  }

  .inertron-home::after {
    display: none;
  }

  /* « Retour à l'accueil » : conservé pour les lecteurs d'écran (nom du lien) */
  .inertron-home__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .inertron-home__logo {
    width: 6rem;
  }

  /* Logo Inertron (85 × 40) à 16 px de l'onglet, centré sur lui */
  .inertron-brand {
    position: absolute;
    top: calc(var(--tab-inset) + 0.625rem);
    left: calc(var(--tab-inset) + 10.875rem - var(--gutter) - 1px);
    width: 5.3125rem;
    transition: top 0.4s var(--ease), left 0.4s var(--ease), width 0.4s var(--ease), opacity 0.25s var(--ease), visibility 0s;
  }

  /* Barre compacte de 64 px : logo de 104 × 49 px (+ 22 %) aligné sur le contenu */
  .site-header--inertron.is-sticky .inertron-brand {
    top: 0.46875rem;
    left: var(--rail-px);
    width: 6.5rem;
  }

  .site-header--inertron .burger {
    margin-left: auto;
  }

  /* Menu ouvert : pas de barre sombre sur le panneau ; menu défilé : onglet et logo s'effacent
     (main.css : la croix reste, sur fond opaque) */
  .site-header--inertron.is-nav-open .inertron-header__bg {
    opacity: 0;
  }

  .site-header--inertron.is-nav-scrolled .inertron-home,
  .site-header--inertron.is-nav-scrolled .inertron-brand {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }

  .inertron-header__bar {
    display: none;
  }

  .hero-inertron__notch,
  .hero--inertron .hero__grid::before,
  .hero--inertron .hero__grid::after {
    display: none;
  }

  .hero-inertron__glow {
    background: radial-gradient(circle min(36.8125rem, 90vw) at 60% 62%, var(--inertron-glow), var(--inertron-glow-0));
  }

  .hero--inertron .hero__bg {
    right: 0.625rem;
  }

  .hero--inertron .hero__grid {
    padding-top: calc(var(--header-h) - var(--hero-pt) + 3rem);
    border-left: 1px solid var(--white-15);
  }

  .hero--inertron .hero__body {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-areas:
      "rail main"
      "rail visual";
  }

  .hero--inertron .hero__rail {
    grid-area: rail;
  }

  .hero--inertron .hero__main {
    grid-area: main;
    padding: 0 var(--main-px) 3rem;
  }

  .hero-inertron__visual {
    grid-area: visual;
    padding: 0 var(--main-px) 2.5rem;
  }

  .inertron-stage {
    max-width: 37.5rem;
    margin: 3.5rem auto 0; /* place des tracés et du haut des clips (satellite, tuyère) */
  }

  .inertron-stage__toggle {
    right: 0;
  }

  /* Vidéo et « Principe » : lecteur au-dessus / au-dessous du texte */
  .inertron-video .section__main,
  .principe-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
  }

  .video-player,
  .video-player--compact {
    flex: none;
    width: 100%;
  }

  .video-player {
    max-width: 48.75rem;
  }

  .video-player--compact {
    max-width: 35rem;
  }

  .principe-intro__text {
    min-height: 0;
  }

  /* « Ce que mesure Inertron » et « Avantages » : deux colonnes */
  .mci {
    flex-wrap: wrap;
  }

  .mci__item {
    flex: 1 1 50%;
  }

  .mci__item:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .mci__item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantage:not(:nth-child(3n + 1)) {
    border-left: 0;
  }

  .advantage:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .advantages > .advantage--cta {
    border-left: 0;
  }
}

/* ≤ 1023 px : une colonne */
@media (max-width: 63.9375em) {
  .hero--inertron .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rail"
      "main"
      "visual";
  }

  .hero--inertron .hero__rail {
    padding: 0 var(--rail-px) 1.5rem;
    border-right: 0;
  }

  .hero--inertron .hero__main {
    gap: 2rem;
  }

  .section--inertron .section-head__lead {
    flex-basis: auto;
  }

  .principe-traces {
    padding: 2.5rem 1.5rem 2rem;
  }

  .principe-traces__grid {
    gap: 1.5rem;
  }

  .models {
    grid-template-columns: minmax(0, 1fr);
  }

  .model {
    min-height: 0;
  }

  .model + .model {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .models-notes {
    flex-direction: column;
    gap: 1rem;
  }

  .precision-table table {
    min-width: 40rem;
  }

  /* Ombres de défilement : signalent les colonnes masquées à gauche / à droite */
  .precision-table {
    background:
      linear-gradient(90deg, var(--inertron-grey-100) 30%, rgb(243 244 246 / 0)) left / 2.5rem 100% no-repeat local,
      linear-gradient(270deg, var(--inertron-grey-100) 30%, rgb(243 244 246 / 0)) right / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.12), transparent) left / 0.875rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.12), transparent) right / 0.875rem 100% no-repeat scroll;
  }
}

/* ≤ 639 px : mobile (maquette 10034:6874) */
@media (max-width: 39.9375em) {
  .site-header--inertron {
    --tab-inset: 0.375rem;
  }

  .inertron-home {
    padding-right: 2.5rem;
  }

  .inertron-home::before {
    clip-path: polygon(0 0, 100% 0, calc(100% - 2.5rem) 100%, 0 100%);
  }

  .inertron-home__logo {
    width: 5.5rem;
  }

  .inertron-brand {
    left: calc(var(--tab-inset) + 9.375rem - var(--gutter) - 1px);
    width: 4.75rem;
  }

  .hero--inertron .hero__bg {
    right: 0.375rem;
  }

  .hero-inertron__lead {
    font-size: 1.125rem;
  }

  .hero-inertron__stats {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-inertron__stat,
  .hero-inertron__stat + .hero-inertron__stat {
    padding: 0 0 0 1rem;
    border-left: 1px solid var(--white-15);
  }

  .hero-inertron__stat dt {
    max-width: none;
  }

  .hero-inertron__visual {
    padding-inline: 0;
  }

  .inertron-stage {
    margin-top: 2.5rem;
  }

  .objet-picker {
    left: 50%;
    gap: 0.5rem;
    transform: translateX(-50%);
  }

  .objet-picker__btn,
  .objet-picker__icon {
    width: 3rem;
  }

  .objet-picker__icon {
    height: 3rem;
  }

  .objet-picker__icon::after {
    top: 2.375rem;
    left: 0.75rem;
  }

  .objet-picker__btn {
    gap: 0.875rem;
  }

  .inertron-stage__toggle {
    right: 0.5rem;
    top: calc(75.85% + 0.5rem);
  }

  .mci__item,
  .mci__item:first-child,
  .mci__item:nth-child(3) {
    flex-basis: 100%;
    padding: 2rem 0;
    border-left: 0;
  }

  .mci__item + .mci__item {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .principe-traces__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .principe-trace__plot {
    width: min(15rem, 100%);
  }

  .model {
    padding: 1.75rem 1.25rem;
  }

  .advantages {
    grid-template-columns: minmax(0, 1fr);
  }

  .advantage:nth-child(even) {
    border-left: 0;
  }

  .advantage--cta {
    min-height: 12.5rem;
  }

  .precision-notes span + span {
    display: block;
    margin: 0.5rem 0 0;
  }
}

/* ≤ 359 px : sélecteur resserré (le bouton pause reste à côté des pictogrammes) */
@media (max-width: 22.4375em) {
  .objet-picker {
    gap: 0.375rem;
  }

  .objet-picker__btn,
  .objet-picker__icon {
    width: 2.75rem;
  }

  .objet-picker__icon {
    height: 2.75rem;
  }

  .objet-picker__icon::after {
    top: 2.125rem;
    left: 0.625rem;
  }

  .inertron-stage__toggle {
    right: 0.25rem;
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* 14. Mouvement réduit : pas de fondu ni de transition d'en-tête --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-inertron__canvas,
  .inertron-stage__media,
  .inertron-stage__still,
  .inertron-home,
  .inertron-brand,
  .inertron-header__bar,
  .inertron-header__bg {
    transition: none;
  }
}