/* ==========================================================================
   InTest — main.css
   Feuille de style commune (composants partagés + page d'accueil).
   Maquette de référence : Figma « Intest design v6 » — desktop 1680 px.

   1.  Polices
   2.  Tokens (couleurs, typo, layout)
   3.  Reset & base
   4.  Utilitaires
   5.  Typographie
   6.  Layout : sections à rail
   7.  Composants (eyebrow, tuiles, liens, boutons, cartes…)
   8.  En-tête, méga menu, navigation mobile
   9.  Hero (commun) + hero d'accueil
   10. Sections de l'accueil
   11. Contact & pied de page (communs)
   12. Modales (vidéo, visionneuse)
   13. Responsive
   ========================================================================== */

/* 1. Polices ---------------------------------------------------------------
   DM Sans : fonte variable instanciée à opsz=14 (réglage utilisé dans Figma),
   graisse 300→700, sous-ensemble latin + symboles (≈ ± → ·). */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* Couleurs (variables Figma) */
  --navy: #09244a;
  --navy-70: rgb(9 36 74 / 0.7);
  --navy-20: rgb(9 36 74 / 0.2);
  --navy-15: rgb(9 36 74 / 0.15);
  --navy-10: rgb(9 36 74 / 0.1);
  --blue-100: #daefff;
  --blue-200: #bcd8f2;
  --blue-400: #67ade0;
  --blue-500: #0482dc;
  --blue-600: #0369b4;
  --blue-700: #215198;
  --blue-800: #1e3a89;
  --blue-deep: #0e54b3;
  --grey-200: #dae0e9;
  --ink: #171838;
  --inertron-900: #29323f;
  --white: #fff;
  --white-70: rgb(255 255 255 / 0.7);
  --white-30: rgb(255 255 255 / 0.3);
  --white-20: rgb(255 255 255 / 0.2);
  --white-15: rgb(255 255 255 / 0.15);

  --gradient-accent: linear-gradient(90deg, #a2d8ff, var(--blue-500));
  --gradient-hero: linear-gradient(180deg, var(--blue-700), var(--blue-800));
  --gradient-overlay: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-deep) 93.533%);

  /* Typographie */
  --ff-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.2rem + 3.6vw, 4.8125rem); /* 77px @1680 */
  --fs-stat: clamp(3.5rem, 1.5rem + 4.3vw, 6rem); /* 96px */
  --fs-h2: clamp(2rem, 1rem + 2.4vw, 3.5rem); /* 56px */
  --fs-h3: clamp(1.5rem, 1rem + 1vw, 2rem); /* 32px */
  --fs-lead: clamp(1.125rem, 0.95rem + 0.4vw, 1.3125rem); /* 21px */

  /* Layout (maquette 2200 px, 10064:2915) : au-delà de 1680 px, la grille de contenu (rail 280 +
     colonne 1350 = 1632 px avec ses filets) se centre ; l'en-tête, le fond du haut de page et les
     fonds de section restent pleine largeur (l'en-tête et le haut de page jusqu'à 2560 px) */
  --page-max: 1680px; /* largeur de la composition, marges comprises */
  --frame: calc(var(--page-max) - 2 * var(--gutter)); /* largeur maximale de la grille : 1632 px */
  --header-max: 2560px; /* en-tête et haut de page : pleine largeur jusqu'à 2560 px, centrés au-delà */
  --header-frame: calc(var(--header-max) - 2 * var(--gutter));
  --gutter: 1.5rem;
  --rail-w: clamp(13.75rem, 16.667vw, 17.5rem); /* colonne gauche : 280 px @1680 */
  --rail-px: clamp(1.5rem, 1.905vw, 2rem); /* marges du rail : 32 px @1680 */
  --nav-rail-w: clamp(13.75rem, 19.05vw, 20rem); /* colonne du logo et rail du méga menu : 320 px @1680 */
  --nav-rail-px: clamp(1.5rem, 2.381vw, 2.5rem);
  --main-px: clamp(1.5rem, 2.857vw, 3rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 7.6875rem;
  --hero-pt: 1.5rem;
  --header-sticky-h: 5.375rem; /* en-tête compact : 86 px @1680 */
  --page-nav-h: 3.125rem; /* navigation interne collée : 50 px */
  --sticky-offset: var(--header-sticky-h); /* hauteur collée en haut de l'écran (ancres, titres de rail) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pages avec navigation interne : l'en-tête compact + la barre d'ancres restent collés */
:root:has([data-page-nav]) {
  --sticky-offset: calc(var(--header-sticky-h) + var(--page-nav-h));
}

/* Ancres : jamais sous les éléments collés */
[id] {
  scroll-margin-top: var(--sticky-offset);
}

/* 3. Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Échelle ----------------------------------------------------------------------
   Toutes les dimensions sont en rem (filets de 1–3 px exceptés) : 1rem = 16 px à toutes les
   largeurs, sans agrandissement sur les grands écrans (au-delà de 1680 px, la grille se
   centre : voir « Layout »). Base en % : la taille de police choisie dans le navigateur
   reste respectée. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 20rem;
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul[role="list"], ol[role="list"], .list-reset {
  padding: 0;
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.section--dark :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

::selection {
  background: var(--blue-500);
  color: var(--white);
}

/* 4. Utilitaires ----------------------------------------------------------- */
.u-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
}

.no-scroll {
  overflow: hidden;
}

/* Retour à la ligne imposé par la maquette, ignoré sous 1440 px (colonne de titre plus étroite) */
@media (max-width: 89.9375em) {
  .u-br-wide {
    display: none;
  }
}

/* 5. Typographie ----------------------------------------------------------- */
/* « display/xl-light » : 77 px, −2 % */
.t-display {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* « heading/xl-light » : 56 px, −4 % */
.t-h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  line-height: round(1.1em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.04em;
}

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

.t-lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.02em;
}

.t-mono {
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-mono-sm {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  line-height: round(1.2em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Soulignement dégradé des titres H1 (h1-decoration), derrière le texte (jambages par-dessus) ;
   reflet « laser » animé : ::before (§ 12 bis) */
.u-underline {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.u-underline::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0.065em;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--gradient-accent);
  pointer-events: none;
}

/* Icônes du sprite */
.ico {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
}

.ico-arrow {
  flex: none;
  width: 0.91919rem;
  height: 0.66919rem;
  overflow: visible;
}

/* Flèche ↗ : flèche → pivotée de −45° dans un carré de 17 px */
.ico-ne {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  transition: transform 0.25s var(--ease);
}

.ico-ne .ico-arrow {
  transform: rotate(-45deg);
  transition: transform 0.35s var(--ease);
}

/* Survol : la flèche ↗ pivote à l'horizontale (→) */
a:hover .ico-ne .ico-arrow,
a:focus-visible .ico-ne .ico-arrow,
button:hover .ico-ne .ico-arrow,
button:focus-visible .ico-ne .ico-arrow {
  transform: rotate(0deg);
}

/* 6. Layout : sections à rail ---------------------------------------------- */
.section {
  --line: var(--navy-10);
  --rail-pt: 2rem;
  --rail-pb: 7.5rem;
  --main-pt: 2rem;
  --main-pb: 7.5rem;
  --main-gap: 5rem;
  position: relative;
  padding-inline: var(--gutter);
  overflow-x: clip; /* décors débordants (ombres, visuels) sans scroll horizontal */
  background: var(--section-bg, var(--white));
  color: var(--navy);
}

.section--tint {
  --section-bg: var(--blue-100);
}

.section--dark {
  --line: var(--white-15);
  --section-bg: var(--blue-800);
  color: var(--white);
  isolation: isolate;
}

.section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--blue-800);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.section__grid {
  display: flex;
  max-width: var(--frame);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}

.section__grid--top {
  border-top: 1px solid var(--line);
}

/* Au-delà de 1680 px, la grille de contenu (1632 px) reste centrée mais ses filets verticaux
   extérieurs passent aux bords du cadre : 24 px des bords de l'écran (cadre de 2560 px au plus,
   comme l'en-tête et le haut de page). Le filet entre colonne gauche et contenu et les filets
   horizontaux gardent la largeur de la grille (maquette 2300 px, 10078:6344). */
@media (min-width: 105.0625em) {
  .section > .section__grid,
  .site-footer > .site-footer__grid {
    border-inline-color: transparent;
  }

  .section::before,
  .site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(var(--gutter), 50% - var(--header-max) / 2 + var(--gutter));
    right: max(var(--gutter), 50% - var(--header-max) / 2 + var(--gutter));
    border-inline: 1px solid var(--line);
    pointer-events: none;
  }
}

.section__rail {
  flex: 0 0 var(--rail-w);
  min-width: 0;
  padding: var(--rail-pt) var(--rail-px) var(--rail-pb);
  border-right: 1px solid var(--line);
}

.section__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--main-gap);
  min-width: 0;
  padding: var(--main-pt) var(--main-px) var(--main-pb);
}

/* En-tête de section : titre + chapô */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
}

.section-head__title {
  flex: 1;
  min-width: 0;
  max-width: 51.875rem; /* 830 px : mesure de la maquette */
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  line-height: round(1.1em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.04em; /* « heading/xl-light » */
}

.section-head__lead {
  flex: 0 0 22.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy-70);
}

.section--dark .section-head__lead {
  color: var(--white-70);
}

/* 7. Composants ------------------------------------------------------------ */

/* Sur-titre « mono » avec pictogramme InTest (composant « sub titre ») */
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 15.5625rem;
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}

.eyebrow__icon {
  flex: none;
  width: 0.86031rem;
  height: 0.8125rem;
  margin-top: 3px;
  color: var(--blue-500);
}

.section--dark .eyebrow,
.hero .eyebrow {
  color: var(--white);
}

.section--dark .eyebrow__icon,
.hero .eyebrow__icon {
  color: var(--blue-400);
}

/* Tuile d'appel à l'action 250 × 120 (composant « cta-tile ») */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 15.625rem;
  min-height: 7.5rem;
  padding: 1.5rem;
  border: 1px solid var(--white-15);
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: left;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.tile .ico-ne {
  align-self: flex-end;
}

.tile__sub {
  display: block;
  margin-top: 0.3125rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.02em;
  color: var(--white-70);
}

.tile--primary {
  background: var(--blue-500);
  border-color: var(--blue-500);
}

/* Tuile secondaire du hero : filet blanc à 30 % */
.tile--outline {
  border-color: var(--white-30);
}

.tile:hover {
  background-color: rgb(255 255 255 / 0.08);
}

.tile--primary:hover {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
}

.tiles {
  display: flex;
  flex-wrap: wrap;
}

/* Lien « En savoir plus → » */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--blue-500);
}

.link-arrow .ico-arrow {
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover .ico-arrow,
.link-arrow:focus-visible .ico-arrow {
  transform: translateX(0.25rem);
}

.link-arrow:hover {
  color: var(--blue-600);
}

/* Bouton plein (« BT big blue ») */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 1.5rem 1rem 2rem;
  background: var(--blue-500);
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  transition: background-color 0.3s var(--ease);
}

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

/* Bouton contour clair (« BT big light white ») */
.btn--outline-light {
  min-height: 0;
  padding: 1rem 1rem 1rem 1.25rem;
  background: transparent;
  border: 1px solid var(--white-70);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.btn--outline-light .ico-ne {
  color: var(--white-70);
}

.btn--outline-light:hover {
  background: rgb(255 255 255 / 0.08);
}

/* Bouton carré 40 × 40 (composant « toggle ») */
.btn-square {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--navy-15);
  color: var(--navy);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

a:hover > .btn-square,
a:focus-visible > .btn-square,
.btn-square:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--white);
}

/* Lecteur vidéo : bouton lecture 61 × 61 (composant « play-button ») */
.play-btn {
  display: grid;
  place-items: center;
  width: 3.8125rem;
  height: 3.8125rem;
  background: var(--white);
  color: var(--blue-500);
  box-shadow: -0.625rem 0.625rem 1.9375rem rgb(0 0 0 / 0.42);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.play-btn .ico {
  width: 3.8125rem;
  height: 3.8125rem;
}

/* Image : remplit son conteneur (équivalent object-fit: cover Figma) */
.media {
  position: relative;
  overflow: hidden;
  background: var(--grey-200);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 8. En-tête ----------------------------------------------------------------
   Le header est posé dans le cadre du hero (bordures blanches à 15 %), pleine largeur
   jusqu'à 2560 px : logo au bord gauche, langue et onglet Inertron au bord droit ; la
   navigation suit la grille de contenu centrée (--nav-shift). */
.site-header {
  /* décalage de la grille centrée, calculé sur la largeur de l'en-tête (100 % = écran − 49 px) */
  --nav-shift: max(0px, (100% - var(--frame) + 1px) / 2);
  position: fixed;
  top: var(--hero-pt);
  left: calc(max(var(--gutter), 50% - var(--header-max) / 2 + var(--gutter)) + 1px); /* après le filet gauche du cadre */
  right: max(var(--gutter), 50% - var(--header-max) / 2 + var(--gutter));
  z-index: 30;
  display: flex;
  align-items: flex-start;
  height: var(--header-h);
  color: var(--white);
  transition: top 0.4s var(--ease), left 0.4s var(--ease), height 0.4s var(--ease);
}

/* Fond de l'en-tête compact (reprend le fond du hero : dégradé, ciel, voile), pleine largeur */
.site-header__bg {
  position: absolute;
  top: calc(-1 * var(--hero-pt));
  left: calc(-1 * max(var(--gutter), 50vw - var(--header-max) / 2 + var(--gutter)));
  right: calc(-1 * max(var(--gutter), 50vw - var(--header-max) / 2 + var(--gutter)));
  z-index: -1;
  height: var(--header-sticky-h);
  overflow: hidden;
  background: var(--gradient-hero);
  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__bg::before,
.site-header__bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

.site-header__bg::before {
  top: -0.625rem;
  height: 36.5rem;
  background: url("../img/common/hero-ciel-1680.webp") center top / cover no-repeat;
  opacity: 0.6;
}

.site-header__bg::after {
  background: var(--gradient-overlay);
  opacity: 0.5;
}

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

.site-header__brand {
  flex: 0 0 var(--nav-rail-w);
  height: 6.9375rem;
  border-top: 1px solid var(--white-15);
  transition: flex-basis 0.4s var(--ease), height 0.4s var(--ease), border-color 0.3s var(--ease);
}

.site-header__logo {
  display: block;
  width: 12.5rem;
  margin: 2.25rem 0 0 clamp(1.5rem, 3.452vw, 3.625rem);
  transition: width 0.4s var(--ease), margin 0.4s var(--ease);
}

.site-header__logo img {
  width: 100%;
}

.site-header__bar {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: var(--header-h);
  margin-right: 24.5rem; /* diagonale (48) + emplacement de l'onglet Inertron (344) */
  padding: 0 1rem 0 calc(clamp(1rem, 22vw - 15.6rem, 7.5rem) + var(--nav-shift)); /* 120 px @1680 → 32 px @1280 */
  border-top: 1px solid var(--white-15);
  transition: height 0.4s var(--ease), margin 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.3s var(--ease);
}

/* Tracé décoratif : diagonale + retour sous l'onglet Inertron */
.site-header__outline {
  position: absolute;
  top: 0;
  right: 0;
  width: 24.5rem;
  height: var(--header-h);
  overflow: visible;
  pointer-events: none;
  color: var(--white-15);
  transition: opacity 0.3s var(--ease);
}

/* Encoche des filets de l'en-tête mobile (≤ 1199 px uniquement) */
.site-header__notch {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 3.3125rem clamp(0.75rem, 2.5vw - 1.125rem, 1.5rem); /* 24 px @1680 → 14 px @1280 */
  transition: padding 0.4s var(--ease), color 0.2s var(--ease);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: clamp(0.75rem, 2.5vw - 1.125rem, 1.5rem);
  right: clamp(0.75rem, 2.5vw - 1.125rem, 1.5rem);
  bottom: 2.5rem;
  height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.site-nav__link:hover::after,
.site-nav__link[aria-expanded="true"]::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav__link .ico-chevron {
  flex: none;
  width: 0.48169rem;
  height: 0.28506rem;
  transition: transform 0.3s var(--ease);
}

.site-nav__link[aria-expanded="true"] .ico-chevron {
  transform: rotate(180deg);
}

/* Sélecteur de langue (composant « lang-switcher ») */
.lang {
  position: relative;
  flex: none;
}

.lang__btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--white-15);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  line-height: round(1.2em, 1px); /* interligne arrondi au pixel, comme Figma */
  text-transform: uppercase;
  transition: border-color 0.3s var(--ease);
}

.lang__btn:hover,
.lang__btn[aria-expanded="true"] {
  border-color: var(--white-70);
}

.lang__btn .ico-chevron {
  flex: none;
  width: 0.29419rem;
  height: 0.19131rem;
  transition: transform 0.3s var(--ease);
}

.lang__btn[aria-expanded="true"] .ico-chevron {
  transform: rotate(180deg);
}

.lang__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--white);
  box-shadow: 0 1rem 2rem rgb(3 14 30 / 0.25);
}

.lang__list a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--navy);
  text-transform: uppercase;
}

.lang__list a:hover,
.lang__list a[aria-current="true"] {
  background: var(--blue-100);
  color: var(--blue-500);
}

/* Onglet « Inertron by InTest » découpé dans le cadre blanc */
.inertron-tab {
  position: absolute;
  top: -0.9375rem;
  right: calc(-1 * var(--gutter));
  transition: right 0.4s var(--ease);
  width: 23.75rem;
  height: 5.8125rem;
  color: var(--white);
}

.inertron-tab__wedge,
.inertron-tab__shape {
  max-width: none;
}

.inertron-tab__wedge {
  position: absolute;
  top: -1px;
  left: -1.1875rem;
  width: 24.9375rem; /* 400 px dans Figma : le dernier pixel sortait de la page */
  height: 4.875rem;
  /* Seul le triangle blanc au-dessus de la pointe (y ≈ 49 px) est visible : le reste, caché sous
     l'onglet sombre, laissait un filet clair sur son bord bas aux échelles non entières */
  clip-path: inset(0 0 36% 0);
}

.inertron-tab__shape {
  position: absolute;
  top: 0;
  right: 0.625rem;
  width: 24.25rem;
  height: 4.8125rem;
}

.inertron-tab__content {
  position: absolute;
  top: 0.9375rem;
  left: 4.625rem;
  display: flex;
  align-items: center;
  gap: 1.0625rem;
}

.inertron-tab__img {
  width: 4.25rem;
  height: 3.125rem;
  object-fit: contain;
  object-position: bottom;
  transition: transform 0.4s var(--ease);
}

.inertron-tab__label {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 12.3125rem;
}

.inertron-tab__logo {
  width: 5.3125rem;
  height: 2.5rem;
}

.inertron-tab__sep {
  flex: 1;
  border-left: 1px solid var(--white-15);
  max-width: 1px;
  margin-left: auto;
}

.inertron-tab__text {
  align-self: center;
  width: 5.5625rem;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--white-70);
}

.inertron-tab:hover .inertron-tab__img {
  transform: translateY(-3px) rotate(-2deg);
}

.burger {
  display: none;
}

/* Méga menu « Solutions » --------------------------------------------------- */
/* 1400 px au plus, centré sous l'en-tête. Hauteur de 600 px, ou plus si une rubrique en a besoin
   (pas de barre de défilement dans le menu). */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  max-width: 87.5rem;
  min-height: 37.5rem;
  margin-inline: auto;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 2.5rem 2.5rem rgb(3 14 30 / 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
}

.mega__rail {
  display: flex;
  flex: 0 0 var(--nav-rail-w);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--navy-15);
}

.mega__head {
  padding: 2rem var(--nav-rail-px) 1.5rem;
}

.mega__tabs {
  border-top: 1px solid var(--navy-10);
}

.mega__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 3.75rem;
  padding: 0 var(--nav-rail-px);
  border-bottom: 1px solid var(--navy-10);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: left;
  transition: background-color 0.2s var(--ease);
}

.mega__tab-num {
  flex: none;
  width: 1.5rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  line-height: round(1.2em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0;
  color: var(--blue-500);
}

.mega__tab-label {
  flex: 1;
}

.mega__tab .ico-arrow {
  color: var(--blue-500);
  opacity: 0;
  transform: translateX(-0.375rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.mega__tab::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  width: 3px;
  background: var(--blue-500);
  transform: scaleY(0);
  transition: transform 0.2s var(--ease);
}

.mega__tab:hover {
  background: rgb(218 239 255 / 0.5);
}

.mega__tab[aria-selected="true"] {
  background: var(--blue-100);
}

.mega__tab[aria-selected="true"]::before {
  transform: none;
}

.mega__tab[aria-selected="true"] .ico-arrow {
  opacity: 1;
  transform: none;
}

.mega__cta {
  width: 100%;
  min-height: 7.5rem;
}

.mega__panes {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mega__pane {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  padding: 2rem var(--main-px) 2.5rem;
  overflow-y: auto;
}

.mega__pane[hidden] {
  display: none;
}

.mega__intro {
  display: flex;
  gap: 2.5rem;
}

.mega__intro-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

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

.mega__title {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.mega__text {
  max-width: 31.25rem;
  color: var(--navy-70);
}

.mega__text--wide {
  max-width: 37.5rem;
}

/* Visuel 200 × 200 de la rubrique (photo, logo ou produits sur fond bleu 100) */
.mega__visual {
  flex: none;
  width: 12.5rem;
  height: 12.5rem;
  overflow: hidden;
  background: var(--blue-100);
}

.mega__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega__visual--logo {
  display: grid;
  place-items: center;
}

.mega__visual--logo img {
  width: 9.875rem;
  height: auto;
  object-fit: contain;
}

/* Sous-rubriques : 2 colonnes (437 / 458 px), éventuellement une ligne pleine largeur au-dessus */
.mega__links {
  display: grid;
  grid-template-columns: minmax(0, 437fr) minmax(0, 458fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--navy-10);
}

.mega__link-item--full {
  grid-column: 1 / -1;
}

.mega__link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  min-height: 5rem; /* 80 px : le texte sur 2 lignes déborde dans les marges, comme la maquette */
  padding: 0.25rem 1.25rem 0.25rem 0;
  border-bottom: 1px solid var(--navy-10);
}

/* Colonne de droite : filet gauche + marge */
.mega__link-item:not(.mega__link-item--full) ~ .mega__link-item:not(.mega__link-item--full) .mega__link {
  padding-left: 1.25rem;
  border-left: 1px solid var(--navy-10);
}

.mega__link-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.mega__link-title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.mega__link-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  line-height: round(1.5em, 1px); /* interligne arrondi au pixel, comme Figma */
  color: var(--navy-70);
}

.mega__link:hover .mega__link-title {
  color: var(--blue-500);
}

.mega__sectors {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

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

.mega__sector-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__sector {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid var(--grey-200);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.mega__sector img {
  flex: none;
  width: 3.125rem;
  height: 3.125rem;
  object-fit: cover;
}

.mega__sector:hover {
  border-color: var(--blue-500);
  background: rgb(218 239 255 / 0.4);
}

/* Carte promo Inertron du méga menu (composant « mega-menu-inertron ») */
.mega__promo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 20rem;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.5rem 2.5rem;
  overflow: hidden;
  background: #212832; /* #29323f + voile noir 20 % */
  color: var(--white);
}

.mega__promo::before {
  content: "";
  position: absolute;
  top: -7.8125rem;
  left: -8.0625rem;
  z-index: -1;
  width: 36.125rem;
  height: 55.125rem;
  background: radial-gradient(50% 50% at 50% 50%, #475465 0%, rgb(71 84 101 / 0) 100%);
}

.mega__promo-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.625rem;
  width: 100%;
}

.mega__promo-kicker {
  color: var(--white-70);
}

.mega__promo-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.mega__promo-logo {
  width: 8.875rem;
  height: 4.1875rem;
}

.mega__promo-tagline {
  width: 13rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--white-70);
}

.mega__promo-visual {
  position: relative;
  width: 15rem;
  height: 11.0625rem;
}

.mega__promo-visual img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transition: transform 0.5s var(--ease);
}

.mega__promo-visual::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 8rem;
  width: 12.6875rem;
  height: 3.0625rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.3);
  filter: blur(1.16875rem);
  transform: rotate(2.4deg);
}

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

.mega__promo:hover .mega__promo-visual img {
  transform: translateY(-0.25rem);
}

/* Navigation mobile (panneau plein écran) ---------------------------------- */
.mobile-nav {
  display: none;
}

/* Pages intérieures : rubrique courante, fil d'Ariane, sous-navigation ----------- */

/* Navigation : sur une page intérieure, la rubrique courante reste blanche,
   les autres entrées passent à 70 %. */
.site-nav--in-section .site-nav__link {
  color: var(--white-70);
  transition: color 0.3s var(--ease);
}

.site-nav--in-section .site-nav__item--current > .site-nav__link,
.site-nav--in-section .site-nav__link:hover,
.site-nav--in-section .site-nav__link[aria-expanded="true"] {
  color: var(--white);
}

.mobile-nav__sub a[aria-current="page"] {
  color: var(--white);
}

/* Fil d'Ariane : DM Mono 12 px capitales, séparateurs verticaux 1 × 9 px bleu 400 */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  line-height: round(1.2em, 1px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white-70);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  flex: none;
  width: 1px;
  height: 0.5625rem;
  margin-right: -1px; /* filet posé sur une boîte de largeur nulle, comme la maquette */
  background: var(--blue-400);
}

.breadcrumb__link {
  transition: color 0.2s var(--ease);
}

.breadcrumb__link:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb__link[aria-current="page"] {
  color: var(--breadcrumb-current, var(--white));
  text-decoration: none;
}

/* Sous-navigation de bas de hero (« nav-secondaire ») : rail de rubrique + onglets.
   Variantes par variables : --subnav-accent (soulignement actif), --subnav-rail-bg,
   --subnav-pt (position verticale des libellés). */
.subnav {
  --subnav-h: 3.9375rem; /* + filet haut = 64 px */
  display: flex;
  border-top: 1px solid var(--white-15);
  border-right: 1px solid var(--white-15);
  color: var(--white);
}

.subnav__rail {
  display: flex;
  flex: 0 0 var(--rail-w);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--subnav-h);
  padding: 0 var(--rail-px);
  border-right: 1px solid var(--white-15);
  background: var(--subnav-rail-bg, var(--navy-15));
  color: var(--white-70);
  white-space: nowrap;
}

.subnav__list {
  display: flex;
  gap: 2.5rem;
  min-width: 0;
  margin: 0;
  padding: 0 var(--main-px);
  list-style: none;
}

.subnav__list > li {
  display: flex;
}

.subnav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--subnav-h);
  padding: var(--subnav-pt, 1.4375rem) 0 1.375rem;
  border-bottom: 2px solid transparent; /* réservé : pas de décalage à l'activation */
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--white-70);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

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

.subnav__link[aria-current="page"],
.subnav__link[aria-current="true"] {
  border-bottom-color: var(--subnav-accent, var(--blue-200));
  color: var(--white);
}

.subnav :focus-visible {
  outline-color: var(--white);
  outline-offset: -2px;
}

/* En-tête compact (≥ 1200 px) : barre de 86 px collée en haut, éléments réduits (maquette 10031:5371) */
@media (min-width: 75em) {
  .site-header.is-sticky {
    --nav-shift: max(0px, (100% - var(--frame) - 0.75rem) / 2); /* en-tête collé : écran − 36 px */
    top: 0.875rem;
    left: max(0.75rem, 50% - var(--header-max) / 2 + 0.75rem);
    height: 3.875rem;
  }

  .site-header.is-sticky .site-header__bg {
    top: -0.875rem;
    left: calc(-1 * max(0.75rem, 50vw - var(--header-max) / 2 + 0.75rem));
  }

  .site-header.is-sticky .site-header__brand {
    flex-basis: calc(var(--nav-rail-w) * 0.753); /* 241 px @1680 */
    height: 3.875rem;
    border-top-color: transparent;
  }

  .site-header.is-sticky .site-header__logo {
    width: 8.2075rem; /* 131 px */
    margin: 0.65rem 0 0 2.8125rem;
  }

  .site-header.is-sticky .site-header__bar {
    height: 3.8125rem;
    border-top-color: transparent;
    margin-right: 23.5625rem;
    padding-left: calc(clamp(1rem, 22vw - 13.1625rem, 9.9375rem) + var(--nav-shift)); /* 159 px @1680 */
  }

  .site-header.is-sticky .site-nav__link {
    padding-block: 1.375rem;
  }

  .site-header.is-sticky .site-nav__link::after {
    bottom: 0.75rem;
  }

  .site-header.is-sticky .site-header__outline {
    opacity: 0;
  }

  .site-header.is-sticky .mega {
    left: 0.8125rem;
  }

  .site-header.is-sticky .inertron-tab {
    right: calc(-1 * var(--gutter) - 0.625rem);
  }
}

/* Navigation interne de la page (ancres) : posée au bas du hero puis collée sous l'en-tête compact */
.page-nav {
  position: sticky;
  top: var(--header-sticky-h);
  z-index: 20;
  max-width: var(--page-max);
  height: 4rem; /* boîte constante : pas de saut de mise en page quand la barre se réduit */
  margin: -4rem auto 0;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.page-nav > .subnav {
  position: relative;
  pointer-events: auto;
  max-width: var(--frame);
  margin-inline: auto;
  border-left: 1px solid var(--white-15);
  transition: height 0.4s var(--ease), background-color 0.4s var(--ease);
}

/* Ombre portée de la barre collée : grise, en retrait de 32 px sur les côtés (maquette 10031:5371) */
.page-nav > .subnav::after {
  content: "";
  position: absolute;
  inset: 0 2rem;
  z-index: -1;
  box-shadow: 0 1.5rem 0.9375rem -0.75rem rgb(0 0 0 / 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.page-nav.is-stuck > .subnav::after {
  opacity: 1;
}

.page-nav .subnav__link {
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), height 0.4s var(--ease), padding 0.4s var(--ease);
}

/* Collée : barre de 50 px navy 91 % pleine largeur, rail de 304 px depuis le bord gauche
   (au-delà de 2560 px, le rail reste aligné sur la grille centrée) */
.page-nav.is-stuck {
  max-width: none;
  padding-inline: 0;
}

.page-nav.is-stuck > .subnav {
  --subnav-h: var(--page-nav-h);
  max-width: none;
  height: var(--page-nav-h);
  margin: 0;
  border-top-width: 0;
  border-left: 0;
  background: rgb(9 36 74 / 0.91);
}

.page-nav.is-stuck .subnav__rail {
  flex-basis: calc(var(--rail-w) + max(var(--gutter), 50% - var(--page-max) / 2 + var(--gutter)));
  min-height: var(--page-nav-h);
  padding-left: calc(var(--rail-px) + max(0px, 50% - var(--page-max) / 2));
}

.page-nav.is-stuck .subnav__link {
  height: var(--page-nav-h);
  padding: 0.125rem 0 0; /* libellés centrés, filet actif au ras du bas de la barre */
}

/* 9. Hero ------------------------------------------------------------------
   Cadre blanc de 10 px autour du fond, filets du cadre à 24 px : pleine largeur jusqu'à
   2560 px. Le contenu (corps, bas de l'accueil) suit la grille centrée de 1631 px. */
.hero {
  position: relative;
  isolation: isolate;
  max-width: var(--header-max);
  margin-inline: auto;
  padding: var(--hero-pt) var(--gutter) 0;
  overflow-x: clip;
  color: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0.625rem 0.625rem 0;
  z-index: -1;
  overflow: hidden;
  background: var(--gradient-hero);
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0 0 -2.3125rem;
  background: var(--gradient-overlay);
  opacity: 0.5;
}

.hero__grid {
  position: relative;
  max-width: var(--header-frame);
  margin-inline: auto;
  padding-top: var(--header-h);
  border-left: 1px solid var(--white-20);
}

.hero__body,
.hero-home__bottom {
  max-width: calc(var(--frame) - 1px);
  margin-inline: auto;
}

.hero__body {
  display: flex;
  align-items: stretch;
  min-height: 42.4375rem;
  padding-top: 9.3125rem;
  border-right: 1px solid var(--white-15);
}

.hero__rail {
  flex: 0 0 var(--rail-w);
  padding: 1.5625rem var(--rail-px) 2.5rem;
  border-right: 1px solid var(--white-20);
}

.hero__main {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 2rem;
  min-width: 0;
  min-height: 33.125rem;
}

/* H1 « display/xl-light » : −2 % (les H1 R&D et Inertron, en « ml-light » 67 px, restent à −4 %) */
.hero__title {
  padding-left: 1.5rem;
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Ciel (accueil, pages intérieures) : photo à 60 %, fondue vers le bas */
.hero__sky {
  position: absolute;
  top: -0.625rem;
  left: -0.625rem;
  right: -0.625rem;
  height: 36.5rem;
  background: url("../img/common/hero-ciel-1680.webp") center top / cover no-repeat;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, #000 5.9375rem, transparent 36.5rem);
  mask-image: linear-gradient(180deg, #000 5.9375rem, transparent 36.5rem);
}

/* Accueil : bâtiment détouré à 30 %, fondu sur les côtés */
.hero--home .hero__building {
  position: absolute;
  top: 13.375rem;
  left: max(2%, 59.2% - 59.3125rem); /* centre du bâtiment à 59 % de la largeur, comme la maquette */
  width: min(114.4%, 118.6875rem);
  aspect-ratio: 1898.9 / 887.6;
  background: url("../img/home/hero-batiment-1024.webp") center bottom / 100% 100% no-repeat;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(43.6% 263% at 42% 31.2%, #000 0%, transparent 100%);
  mask-image: radial-gradient(43.6% 263% at 42% 31.2%, #000 0%, transparent 100%);
}

/* Accueil : le contenu démarre 117 px sous l'en-tête, le rail 6 px plus bas (maquette) */
/* Accueil (maquette 10072:5800) : corps de 594 px, contenu à 64 px du haut, colonne gauche et son
   filet à 65 px, sur-titre à 80 px */
.hero--home .hero__body {
  min-height: 0;
  padding-top: 0;
}

.hero--home .hero__rail {
  margin-top: 4.0625rem;
  padding-top: 0.9375rem;
}

.hero--home .hero__rail .eyebrow {
  max-width: 10.8125rem; /* 173 px : « Intest : là où / la performance / se mesure » */
}

.hero--home .hero__main {
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  padding-block: 4rem;
}

.hero--home .hero__title {
  padding-bottom: 1px; /* bloc titre de 232 px dans la maquette (filet décoratif inclus) */
}

/* Colonne titre : 751 px au plus (titre et chapô en retrait de 24 px), tuiles 32 px sous le chapô ;
   la vidéo (460 px) suit directement, l'espace restant reste à droite */
.hero-home__titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2rem;
  min-width: min(38.375rem, 100%);
  max-width: 46.9375rem;
}

.hero--home .tiles {
  padding-left: 1.5rem;
}

.hero-home__text {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Chapô sous le H1 (« heading/lg-light2 », blanc 70 %) */
.hero__lead {
  max-width: 38.375rem; /* 566 px de texte + 2 × 24 px */
  padding-inline: 1.5rem;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.3;
  line-height: round(1.3em, 1px);
  letter-spacing: -0.02em;
  color: var(--white-70);
}

/* Carte vidéo (500 × 500 ; 460 × 460 sur l'accueil) */
.video-card {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: 31.25rem;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--navy);
}

.video-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.video-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22.2%;
  background: linear-gradient(180deg, rgb(3 14 30 / 0) 0%, rgb(3 14 30 / 0.7) 100%);
  pointer-events: none;
}

.video-card__btn {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
}

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

.video-card__caption {
  position: absolute;
  bottom: 0;
  left: calc(50% + 0.5px);
  z-index: 1;
  padding: 0.25rem 0.625rem;
  background: var(--white-70);
  font-size: 0.75rem;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  transform: translateX(-50%);
}

.hero--home .video-card {
  flex: 0 1 28.75rem;
  width: auto;
  min-width: 16.25rem;
}

.video-card:hover .video-card__img {
  transform: scale(1.04);
}

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

/* Bas du hero d'accueil : cellule vide sous la colonne gauche (son filet se prolonge) et 4 chiffres
   clés de 148 px de haut séparés par des filets (maquette 10072:5800) */
.hero-home__bottom {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
}

.hero-home__bottom-rail {
  border-right: 1px solid var(--white-20);
}

.hero-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--white-15);
  border-right: 1px solid var(--white-15);
}

.hero-figure {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  padding: 1.875rem 2rem 2.125rem;
  white-space: nowrap;
}

.hero-figure + .hero-figure {
  border-left: 1px solid var(--white-15);
}

.hero-figure dt {
  order: 2;
}

.hero-figure__value {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Au-delà de 1680 px, la grille centrée se détache du cadre : filet droit du cadre tracé sur toute
   la hauteur du hero (sous l'en-tête), le corps perd le sien ; les chiffres gardent leur filet droit
   (maquette 2300 px) */
@media (min-width: 105.0625em) {
  .hero__grid {
    background: linear-gradient(var(--white-15), var(--white-15)) right var(--header-h) / 1px calc(100% - var(--header-h)) no-repeat;
  }

  .hero__body {
    border-right: 0;
  }
}

/* 10. Sections de l'accueil -------------------------------------------------- */

/* Qualité & conformité : 4 certifications */
.certifications__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Certification : carte (logo, domaine, intitulé) et précision centrée dessous */
.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cert-card {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.1875rem; /* 20 px dans Figma, contour intérieur compris */
  border: 1px solid var(--grey-200);
  background: var(--white);
}

/* Logos centrés dans un cadre de 65 × 77 px */
.cert-card__logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 4.0625rem;
  height: 4.8125rem;
}

.cert-card__logo img {
  width: 4.0625rem;
  height: auto;
}

.cert-card__logo--ce img {
  translate: -0.175rem 0.0625rem; /* calage optique de la maquette (−2,8 / +1 px) */
}

.cert-card__logo--aircyber img {
  width: 3.5rem;
}

.cert-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cert-card__kicker {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cert-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cert__note {
  max-width: 12.5rem;
  font-size: 0.75rem;
  line-height: 1.22;
  line-height: round(1.22em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0;
  text-align: center;
  color: var(--navy-70);
}

/* Secteurs d'activité : 4 colonnes (contenus de 264,75 px à 1680 px, filets au milieu des
   gouttières de 65 px). Grille secondaire (subgrid) : vignettes, titres, textes et liens restent alignés
   d'une colonne à l'autre ; sans subgrid, le titre réserve 2 lignes. */
.sectors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(4rem + 1px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

.sector {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  align-content: start;
  justify-items: start;
  min-width: 0;
  padding-block: 2.5rem;
}

.sector + .sector::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-2rem - 1px);
  width: 1px;
  background: var(--line);
}

.sector__media {
  justify-self: stretch;
  aspect-ratio: 264.75 / 160;
  margin-bottom: 0.75rem; /* 24 px sous la vignette */
}

.sector__title {
  min-height: 3.9375rem; /* 2 lignes : 63 px dans la maquette */
  margin-right: -0.25rem; /* « Off-road, hydraulique & » : 268 px rendus pour 265 dans Figma */
  font-size: 1.625rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

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

.num {
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: 0.04em;
  color: var(--blue-500);
}

.offer-card__body > p,
.value > p:last-child {
  max-width: 32.5rem; /* longueur de ligne lisible en très grand écran */
}

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

/* Offre */
.offer .section__rail {
  --rail-pt: 3rem;
}

.offer .section__main {
  --main-pt: 3rem;
  --main-pb: 6rem;
  --main-gap: 3.1875rem;
}

.offer-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.offer-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  padding: 3rem 2.5rem 3rem 0;
}

.offer-card__media {
  width: min(20rem, 100%);
  aspect-ratio: 320 / 154;
}

.offer-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.offer-card__body > p {
  color: var(--navy-70);
}

.offer-card .link-arrow {
  margin-top: auto;
  padding-top: 1.8125rem;
}

/* Blocs entièrement cliquables (secteurs, offre) : le lien « En savoir plus » du bloc s'étend
   à tout le bloc par un pseudo-élément — un seul lien, un seul arrêt de tabulation. Au survol,
   la photo s'agrandit légèrement et la flèche du lien avance. */
.sector,
.offer-card {
  position: relative;
}

.sector .link-arrow::after,
.offer-card .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sector .link-arrow:focus-visible,
.offer-card .link-arrow:focus-visible {
  outline: none;
}

.sector .link-arrow:focus-visible::after,
.offer-card .link-arrow:focus-visible::after {
  outline: 2px solid var(--blue-500);
  outline-offset: -2px;
}

.sector .media > img,
.offer-card .media > img {
  transition: transform 0.6s var(--ease-out);
}

.sector:hover .media > img,
.offer-card:hover .media > img {
  transform: scale(1.04);
}

/* Déroulement d'un projet (.project-tl) : animation d'origine de la préprod (paquet intest-frise-projet-v2),
   sous les cartes de l'offre, sur toute la largeur de la colonne. assets/js/projet.js construit la scène SVG (.pm),
   pilote la frise (.tl : remplissage --f de 0 à 1 par phase, jalons et libellés allumés par .is-on) et ajoute les
   commandes. Couleurs de la préprod (la scène les reprend en dur), unités du site. Sans script, la frise s'affiche
   remplie. Panneau de moins de 780 px : frise verticale, scène collée sous l'en-tête (container query, que le script
   suit). Les phases portent --w (largeur en % de la frise) ; --s ne sert qu'à l'animation CSS de la préprod. */
.project-tl {
  --tl-navy-900: #071b3d;
  --tl-navy-800: #0b2a5e;
  --tl-navy-700: #0f3e8c;
  --tl-azure: #0a66c2;
  --tl-azure-600: #0a7cff;
  --tl-sky: #8ac3f0;
  --tl-ink: #0e1a2b;
  --tl-ink-2: #44526a;
  --tl-ink-3: #7a8698;
  --tl-line: #e4e9f0;
  --tl-track: #ebeff4;
  position: relative;
  container: frise / inline-size;
  padding: 1.625rem clamp(1.25rem, 3vw, 2.5rem) 1.875rem;
  background: var(--white);
  border: 1px solid var(--tl-line);
}

.project-tl__title {
  margin-bottom: 1.125rem;
  font: 400 0.75rem/1 var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-ink-3);
}

/* Frise : phases proportionnelles (--w), jalons entre elles, libellés des jalons au-dessus de la barre */
.tl {
  --track: 0.5rem;
  --lab: 3.625rem;
  display: flex;
  padding: var(--lab) 0 0;
  list-style: none;
}

.tl__phase {
  position: relative;
  flex: var(--w) 1 0;
  min-width: 0;
  padding-top: calc(var(--track) + 0.875rem);
  text-align: center;
}

.tl__phase::before,
.tl__phase::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5px;
  right: 1.5px;
  height: var(--track);
  border-radius: 3px;
}

.tl__phase::before {
  background: var(--tl-track);
}

.tl__phase::after {
  background: linear-gradient(90deg, var(--c1), var(--c2));
}

.tl__phase:first-child::before,
.tl__phase:first-child::after {
  left: 0;
  border-radius: 99px 3px 3px 99px;
}

.tl__phase--open::before,
.tl__phase--open::after {
  right: 0;
  -webkit-mask: linear-gradient(90deg, #000 45%, transparent);
  mask: linear-gradient(90deg, #000 45%, transparent);
}

.tl__phase:nth-child(1) {
  --c1: #b9daf5;
  --c2: var(--tl-sky);
}

.tl__phase:nth-child(3) {
  --c1: #5aa6ec;
  --c2: var(--tl-azure-600);
}

.tl__phase:nth-child(5) {
  --c1: var(--tl-azure-600);
  --c2: var(--tl-azure);
}

.tl__phase:nth-child(6) {
  --c1: var(--tl-azure);
  --c2: var(--tl-navy-700);
}

.tl__phase:nth-child(8) {
  --c1: var(--tl-navy-700);
  --c2: var(--tl-navy-800);
}

.tl__phase:nth-child(10) {
  --c1: var(--tl-azure);
  --c2: var(--tl-sky);
}

.tl__phase span {
  display: block;
  padding: 0 0.25rem;
  font-size: 0.90625rem; /* 14,5 px */
  font-weight: 500;
  line-height: 1.3;
  color: var(--tl-ink);
}

.tl__ms {
  position: relative;
  z-index: 1;
  flex: 0 0 0;
}

.tl__ms::before {
  content: "";
  position: absolute;
  top: calc(var(--track) / 2 - 0.5rem);
  left: -0.5rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--white);
  border-radius: 4px;
  background: var(--tl-navy-800);
  box-shadow: 0 0 0 1px var(--tl-line);
  transform: rotate(45deg);
}

.tl__ms span {
  position: absolute;
  bottom: calc(100% + 0.625rem);
  left: 0;
  width: max-content;
  max-width: 9.5em;
  padding: 0 0 0.125rem 0.625rem;
  border-left: 1.5px solid var(--tl-line);
  font: 400 0.71875rem/1.3 var(--ff-mono); /* 11,5 px */
  letter-spacing: -0.01em;
  color: var(--tl-ink-3);
}

.tl__ms span::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -1.5px;
  width: 1.5px;
  height: 0.625rem;
  background: var(--tl-line);
}

/* Frise pilotée par le script */
.tl--driven .tl__phase::after {
  transform: scaleX(var(--f, 0));
  transform-origin: left;
}

.tl--driven .tl__phase:not(.is-on) span {
  opacity: 0.35;
}

.tl--driven .tl__ms:not(.is-on)::before {
  background: var(--white);
  border-color: var(--tl-track);
  transform: rotate(45deg) scale(0.8);
}

.tl--driven .tl__ms:not(.is-on) span {
  opacity: 0;
  transform: translateY(0.375rem);
}

@media (prefers-reduced-motion: no-preference) {
  .tl--driven .tl__phase span {
    transition: opacity 0.5s ease;
  }

  .tl--driven .tl__ms::before {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .tl--driven .tl__ms span {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
}

/* Frise cliquable : une phase ou un jalon relance l'animation au début de cette étape (libellé = bouton) */
.tl--seek .tl__phase,
.tl--seek .tl__ms {
  cursor: pointer;
}

.tl--seek [role="button"]:focus-visible {
  outline: 2px solid var(--tl-azure);
  outline-offset: 3px;
  border-radius: 3px;
}

.tl--seek .tl__ms::before {
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .tl--seek .tl__phase:hover span,
  .tl--seek .tl__ms:hover span {
    opacity: 1;
    color: var(--tl-azure);
  }

  .tl--seek .tl__phase:hover::before {
    background: #d5e6f8;
  }

  .tl--seek .tl__ms:hover::before {
    background: var(--tl-azure);
    border-color: var(--white);
    transform: rotate(45deg) scale(1.3);
  }
}

/* Scène : la machine se construit au fil de la frise (repère de 1000 unités = largeur de la frise) */
.pm {
  margin-bottom: 0.375rem;
}

.pm:empty {
  display: none;
}

.pm__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.pm-ground {
  stroke: var(--tl-line);
  stroke-width: 1;
}

.pm-paper {
  fill: #fff;
  stroke: #d3dce7;
  stroke-width: 1;
}

.pm-draw {
  fill: none;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.pm-text {
  stroke: #c9d3e0;
  stroke-width: 3;
}

.pm-rule {
  stroke: var(--tl-line);
  stroke-width: 1;
}

.pm-sign {
  stroke: var(--tl-navy-800);
  stroke-width: 1.4;
}

.pm-plan {
  stroke: var(--tl-azure);
  stroke-width: 0.7;
}

.pm-dim {
  stroke: var(--tl-sky);
  stroke-width: 0.8;
}

.pm-factory {
  stroke: var(--tl-ink-3);
  stroke-width: 1.2;
}

.pm-part {
  fill: #eef2f7;
  stroke: #b6c2d2;
  stroke-width: 1;
}

.pm-part--glass {
  fill-opacity: 0.6;
}

.pm-glass {
  fill-opacity: 0.22;
  stroke: var(--tl-azure);
  stroke-width: 1;
}

.pm-frame {
  fill: none;
  stroke: #c9d3e0;
  stroke-width: 0.6;
}

.pm-truck {
  fill: var(--tl-ink-2);
}

.pm-truck--cab,
.pm-screen {
  fill: var(--tl-navy-900);
}

.pm-truck__glass {
  fill: #dcebfa;
}

.pm-wheel {
  fill: var(--tl-ink);
}

.pm-wave {
  fill: none;
  stroke: var(--tl-sky);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pm-led {
  fill: #3ddc97;
}

.pm-live,
.pm-innova,
.pm-fig,
.pm-tool,
.pm-badge {
  opacity: 0;
}

/* Personnages (chef de projet, client) et outils tenus en main */
.pm-fig path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pm-fig circle {
  fill: currentColor;
}

.pm-fig--chef {
  color: var(--tl-azure);
}

.pm-fig--client {
  color: var(--tl-ink-3);
}

.pm-fig .pm-pencil {
  stroke: #f5b800;
  stroke-width: 1.8;
}

.pm-fig .pm-pencil__tip {
  stroke: var(--tl-ink);
  stroke-width: 1.2;
}

.pm-fig .pm-wrench {
  stroke: var(--tl-ink-2);
  stroke-width: 1.6;
}

.pm__svg .pm-folder {
  fill: #fff;
  stroke: var(--tl-azure);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.pm__svg .pm-folder__lines {
  fill: none;
  stroke: var(--tl-sky);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.pm-innova > rect {
  filter: drop-shadow(0 6px 10px rgb(11 42 94 / 0.16));
}

.pm-badge circle {
  fill: var(--tl-navy-800);
  stroke: #fff;
  stroke-width: 2;
}

.pm-badge path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Banc en marche : la tige du vérin va et vient, le voyant clignote */
@media (prefers-reduced-motion: no-preference) {
  .is-live .pm-rod {
    animation: pm-rod 1.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  }

  .is-live .pm-led {
    animation: pm-blink 1.6s ease infinite;
  }
}

@keyframes pm-rod {
  50% {
    transform: translateX(-8px);
  }
}

@keyframes pm-blink {
  50% {
    opacity: 0.35;
  }
}

/* Commandes Pause / Lecture et Rejouer, toujours visibles : en haut à droite du panneau (de la scène en frise
   verticale) ; masquées en mouvement réduit (.is-still, état final affiché d'emblée) */
.pm__ctrl {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
}

.pm.is-still .pm__ctrl {
  display: none;
}

.pm__replay {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--tl-line);
  border-radius: 99px;
  background: var(--white);
  font-size: 0.78125rem; /* 12,5 px */
  font-weight: 500;
  line-height: 1;
  color: var(--tl-ink-2);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pm__replay:focus-visible {
  outline: 2px solid var(--tl-azure);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .pm__replay:hover {
    color: var(--tl-azure);
    border-color: var(--tl-sky);
  }
}

/* Légende : le chef de projet, interlocuteur unique */
.pm-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tl-line);
}

.pm-legend svg {
  display: block;
  flex: none;
}

.pm-legend p {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tl-ink);
}

.pm-legend strong {
  font-weight: 700;
}

/* Panneau de moins de 920 px : libellés resserrés */
@container frise (max-width: 57.4375em) {
  .tl__phase span {
    padding: 0 0.125rem;
    font-size: 0.8125rem;
  }

  .tl__ms span {
    font-size: 0.6875rem;
  }
}

/* Panneau de moins de 780 px : frise verticale (hauteurs proportionnelles aux durées), scène collée sous l'en-tête
   compact avec ses commandes ; le script resserre alors le cadrage de la scène sur l'action (« caméra ») */
@container frise (max-width: 48.6875em) {
  .pm {
    position: sticky;
    top: var(--header-sticky-h);
    z-index: 2;
    margin: 0 -0.5rem 0.875rem;
    padding: 0.375rem 0.5rem 0;
    background: var(--white);
    border-bottom: 1px solid var(--tl-line);
  }

  .tl {
    flex-direction: column;
    padding: 0 0 0 0.25rem;
  }

  .tl__phase {
    display: flex;
    flex: none;
    align-items: center;
    min-height: max(2.75rem, var(--w) * 0.34375rem);
    padding: 0.375rem 0 0.375rem calc(var(--track) + 1.125rem);
    text-align: left;
  }

  .tl__phase::before,
  .tl__phase::after {
    top: 1.5px;
    bottom: 1.5px;
    left: 0;
    right: auto;
    width: var(--track);
    height: auto;
  }

  .tl__phase::after {
    background: linear-gradient(180deg, var(--c1), var(--c2));
  }

  .tl__phase:first-child::before,
  .tl__phase:first-child::after {
    top: 0;
    border-radius: 99px 99px 3px 3px;
  }

  .tl__phase--open::before,
  .tl__phase--open::after {
    bottom: 0;
    -webkit-mask: linear-gradient(180deg, #000 45%, transparent);
    mask: linear-gradient(180deg, #000 45%, transparent);
  }

  .tl__phase span {
    padding: 0;
  }

  .tl__ms + .tl__phase {
    padding-top: 1.375rem;
  }

  .tl__phase:has(+ .tl__ms) {
    padding-bottom: 1.375rem;
  }

  .tl__ms {
    flex: none;
    height: 0;
  }

  .tl__ms::before {
    top: -0.5rem;
    left: calc(var(--track) / 2 - 0.5rem);
  }

  .tl__ms span {
    top: 50%;
    bottom: auto;
    left: calc(var(--track) + 1.125rem);
    max-width: none;
    padding: 0;
    border: 0;
    background: var(--white);
    font-size: 0.71875rem;
    transform: translateY(-50%);
  }

  .tl__ms span::before {
    display: none;
  }

  .tl--driven .tl__phase::after {
    transform: scaleY(var(--f, 0));
    transform-origin: top;
  }

  .tl--driven .tl__ms:not(.is-on) span {
    transform: translateY(-50%);
  }
}

/* InNova */
.innova .section__bg {
  background-image: var(--gradient-overlay-92), url("../img/home/innova-bg-1052.webp"), var(--gradient-hero);
}

.section--dark {
  --gradient-overlay-92: linear-gradient(180deg, rgb(30 58 137 / 0.92) 0%, rgb(14 84 179 / 0.92) 93.533%);
}

.innova .section__rail {
  --rail-pt: 4rem;
}

.innova .section__main {
  --main-pt: 4rem;
  --main-pb: 5rem;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.innova__text {
  display: flex;
  flex: 0 1 37.5rem;
  flex-direction: column;
  gap: 3rem;
  min-width: 0;
}

.innova__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Titre : logo InNova « Measurement and control » (245 × 64) */
.innova__title img {
  display: block;
  width: 15.3125rem;
  height: auto;
}

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

.innova__desc {
  color: var(--white-70);
}

/* Tuiles InNova : 3 colonnes égales dans la colonne de texte (600 px à 1680 px), hauteur de 120 px */
.innova .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.innova .tile {
  width: auto;
}

.innova-visual {
  position: relative;
  flex: 0 1 35.75rem;
  min-width: 0;
  aspect-ratio: 572 / 476;
}

.innova-visual__zoom {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.innova-visual__shadow {
  position: absolute;
  top: 32.71%;
  left: -14.57%;
  width: 129.77%;
  height: 69.54%;
  max-width: none;
  transform: rotate(2.4deg);
  pointer-events: none;
}

/* Photo du poste : 508 × 381 dans le visuel de 572 × 476 (maquette) */
.innova-visual__img {
  position: absolute;
  top: 3.92%;
  left: 5.59%;
  width: 88.81%;
  height: auto;
  transition: transform 0.6s var(--ease);
}

.innova-visual__caption {
  position: absolute;
  top: 82.77%;
  left: 22.73%;
  width: 54.72%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8125rem;
  text-align: center;
}

.innova-visual__title {
  white-space: nowrap;
  font-size: 1.3125rem;
  font-weight: 300;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.02em;
}

.innova-visual__hint {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--white-30);
  transition: color 0.3s var(--ease);
}

.innova-visual__hint .ico {
  width: 1.5rem;
  height: 1.5rem;
}

.innova-visual__zoom:hover .innova-visual__img {
  transform: scale(1.03);
}

.innova-visual__zoom:hover ~ .innova-visual__caption .innova-visual__hint,
.innova-visual__zoom:focus-visible ~ .innova-visual__caption .innova-visual__hint {
  color: var(--white-70);
}

/* Carrières */
.careers .section__rail {
  --rail-pt: 3rem;
}

.careers .section__main {
  --main-pt: 3rem;
}

.careers .section-head__lead {
  opacity: 0.7;
}

.values {
  display: grid;
  grid-template-columns: minmax(0, 390.67fr) minmax(0, 431.67fr) minmax(0, 431.67fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

.value {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem;
}

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

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

.value .num {
  color: var(--blue-600);
}

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

.photo-row .media {
  aspect-ratio: 407.33 / 360;
}

.jobs {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.jobs__list {
  display: grid;
  grid-template-columns: minmax(0, 616.5fr) minmax(0, 637.5fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.jobs__list > li {
  border-top: 1px solid var(--line);
}

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

.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: 1.125rem 1.25rem 1.125rem 0;
}

.jobs__list > li:nth-child(even) .job {
  padding-left: 1.25rem;
}

.job__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}

.job:hover .job__title {
  color: var(--blue-500);
}

.careers .btn {
  align-self: flex-start;
}

/* FAQ */
.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__question {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question-text {
  flex: 1;
}

.faq__toggle {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--navy-20);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5625rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.28125rem;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}

.faq__toggle::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__toggle::after {
  transform: rotate(0deg);
}

.faq__question:hover .faq__toggle {
  border-color: var(--navy);
}

.faq__item[open] .faq__toggle {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.faq__answer {
  overflow: hidden;
}

.faq__answer p {
  max-width: 56.25rem;
  padding: 0 4.5rem 1.75rem 0;
  color: var(--navy-70);
}

/* 11. Contact & pied de page ------------------------------------------------- */
.contact .section__bg {
  background-image: var(--gradient-overlay-92), url("../img/common/contact-bg-1680.webp");
}

.contact .section__rail {
  --rail-pt: 7.5rem;
}

.contact .section__main {
  --main-pt: 7.5rem;
  --main-gap: 3rem;
}

.contact__title {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em; /* « display/xl-light » */
}

.contact__row {
  display: flex;
  gap: 1.5rem;
  border-top: 1px solid var(--white-15);
}

.contact__row .tile {
  align-self: flex-start; /* 250 × 120, sans s'étirer sur la hauteur du texte */
}

.contact__body {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 2rem;
  min-width: 0;
  padding: 1.5rem 0;
}

.contact__text {
  max-width: 37rem;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* interligne arrondi au pixel, comme Figma */
  letter-spacing: -0.02em;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  white-space: nowrap;
}

.contact__info dt {
  color: var(--blue-400);
}

.contact__info a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer {
  --line: var(--white-15);
  position: relative;
  padding-inline: var(--gutter);
  background: var(--navy);
  color: var(--white);
}

.site-footer__grid {
  max-width: var(--frame);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}

.site-footer__top {
  display: flex;
}

.site-footer__rail {
  display: flex;
  flex: 0 0 var(--rail-w);
  justify-content: center;
  padding: 4rem var(--rail-px);
  border-right: 1px solid var(--line);
}

.site-footer__logo {
  display: block;
  width: min(11.75rem, 100%);
  height: max-content;
}

.site-footer__main {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 3rem;
  min-width: 0;
  padding: 4rem var(--main-px) 6rem;
}

.site-footer__contact {
  display: flex;
  flex: 0 1 31.625rem;
  flex-direction: column;
  gap: 3rem;
}

.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-style: normal;
}

.footer-contacts a,
.footer-contacts p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-contacts .ico {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--blue-400);
}

.footer-contacts a:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-social__label {
  color: var(--blue-400);
}

.footer-social__list {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--white-30);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.footer-social__link:hover {
  border-color: var(--white-70);
  background: rgb(255 255 255 / 0.06);
}

.footer-social__link .i-linkedin {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--blue-500);
}

.footer-social__link .i-youtube {
  width: 1.78563rem;
  height: 1.25rem;
}

.footer-links {
  display: flex;
  gap: 3rem;
}

.footer-links__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-links__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.footer-links__title {
  color: var(--blue-400);
}

.footer-links__title a:hover {
  color: var(--white);
}

.footer-links__group ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.2;
  line-height: round(1.2em, 1px);
  letter-spacing: -0.02em;
}

.footer-links__group ul a:hover {
  color: var(--blue-400);
}

.site-footer__bottom {
  display: flex;
}

/* Filet au-dessus des langues : toute la largeur de l'écran. Placé en haut du bloc (position statique, top
   auto) et étendu aux bords du pied de page, son premier ancêtre positionné */
.site-footer__bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}

.site-footer__langs {
  display: flex;
  flex: 0 0 var(--rail-w);
  justify-content: center; /* 5 × 36 px + 4 × 12 px = 228 px, centrés dans le rail de 280 px */
  gap: 0.75rem;
  margin: 0;
  padding: 1.5rem 0;
  list-style: none;
  border-right: 1px solid var(--line);
}

.site-footer__langs a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 1.875rem;
  border: 1px solid var(--white-15);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0;
  transition: border-color 0.3s var(--ease);
}

.site-footer__langs a:hover {
  border-color: var(--white-70);
}

.site-footer__langs a[aria-current="true"] {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
}

.site-footer__legal {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 1.5rem var(--main-px);
  font-size: 0.875rem;
  line-height: 1.2;
  line-height: round(1.2em, 1px); /* interligne arrondi au pixel, comme Figma */
}

/* 12. Modales ------------------------------------------------------------------ */
.modal {
  width: min(70rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: visible;
}

.modal::backdrop {
  background: rgb(3 14 30 / 0.85);
  backdrop-filter: blur(0.25rem);
}

.modal[open] {
  animation: modal-in 0.3s var(--ease);
}

.modal__close {
  position: absolute;
  top: -3.25rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--white-30);
  color: var(--white);
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}

.modal__close::after {
  transform: rotate(-45deg);
}

.modal__close:hover {
  background: var(--white);
  color: var(--navy);
}

.modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.modal__frame iframe,
.modal__frame video,
.modal__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.modal__placeholder {
  position: absolute;
  inset: auto 0 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, rgb(3 14 30 / 0), rgb(3 14 30 / 0.85));
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modal--image .modal__frame {
  aspect-ratio: auto;
  background: var(--white);
}

.modal--image img {
  object-fit: contain;
  max-height: calc(100vh - 7.5rem);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
}

/* 12 quater. Prise de contact (bas à droite) ------------------------------------------
   Bouton fermé : maquette 8001:4516 (bleu 500, pictogramme 26 px avec pastille verte « en ligne »).
   Fenêtre ouverte : d'après l'exemple fourni, dans le langage graphique du site (angles vifs,
   en-tête dégradé du hero). Textes et boutons de la fenêtre en bleu 600 (contraste AA, petits
   textes). Sujets proposés, puis formulaire → messagerie (main.js). */
.chat {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  z-index: 24; /* sous l'en-tête et le menu mobile */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;
}

.chat > * {
  pointer-events: auto;
}

/* Menu mobile ou visionneuse ouverts : le bouton s'efface */
.no-scroll .chat {
  display: none;
}

.chat__launch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.3125rem;
  background: var(--blue-500);
  color: var(--white);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 0.875rem 1.875rem -0.625rem rgb(3 14 30 / 0.55);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.chat__launch:hover {
  background: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 1.125rem 2.25rem -0.75rem rgb(3 14 30 / 0.6);
}

.chat__launch-icon {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
}

.chat__launch-dot {
  fill: #44c955;
  stroke: var(--blue-500);
  transition: stroke 0.2s var(--ease);
}

.chat__launch:hover .chat__launch-dot {
  stroke: var(--blue-600);
}

/* Fenêtre ouverte : le bouton se réduit à son pictogramme (il referme la fenêtre) */
.chat.is-open .chat__launch {
  padding: 0.625rem;
}

.chat.is-open .chat__launch-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.chat__panel {
  display: flex;
  flex-direction: column;
  width: min(23.75rem, 100vw - 2 * var(--gutter));
  max-height: min(38.75rem, 100vh - 7rem);
  max-height: min(38.75rem, 100dvh - 7rem);
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1.875rem 4.375rem -1.25rem rgb(7 27 61 / 0.45), 0 0 0 1px rgb(7 27 61 / 0.06);
  transform-origin: bottom right;
}

.chat__panel[hidden] {
  display: none;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 1rem 1.125rem;
  background: var(--gradient-hero);
  color: var(--white);
}

.chat__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(255 255 255 / 0.14);
}

.chat__avatar-icon {
  width: 1.25rem;
  height: 1.1875rem;
  color: var(--white);
}

.chat__title {
  min-width: 0;
  margin: 0;
}

.chat__title strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.chat__title span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.78125rem;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.8);
}

.chat__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  margin-left: auto;
  background: rgb(255 255 255 / 0.12);
  color: var(--white);
  transition: background-color 0.2s var(--ease);
}

.chat__close:hover {
  background: rgb(255 255 255 / 0.22);
}

.chat__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

.chat__head :focus-visible {
  outline-color: var(--white);
}

.chat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f3f5f8;
}

.chat__msg {
  max-width: 88%;
  margin: 0;
  padding: 0.6875rem 0.875rem;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(7 27 61 / 0.08);
  font-size: 0.90625rem;
  line-height: 1.5;
}

.chat__msg--me {
  align-self: flex-end;
  background: var(--blue-600);
  color: var(--white);
}

.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chat__chip {
  padding: 0.5rem 0.8125rem;
  border: 1px solid var(--blue-600);
  background: var(--white);
  color: var(--blue-600);
  font-size: 0.84375rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.chat__chip:hover {
  background: var(--blue-600);
  color: var(--white);
}

.chat__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat__form[hidden] {
  display: none;
}

.chat__field {
  width: 100%;
  padding: 0.625rem 0.8125rem;
  border: 1px solid var(--navy-15);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 0.90625rem;
  line-height: 1.4;
  resize: vertical;
}

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

.chat__field:focus-visible {
  border-color: var(--blue-500);
  outline: 2px solid var(--blue-200);
  outline-offset: 0;
}

/* Écrans tactiles : 16 px mini, sinon iOS zoome sur le champ */
@media (pointer: coarse) {
  .chat__field {
    font-size: 1rem;
  }
}

.chat__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--navy-70);
}

.chat__consent input {
  flex: none;
  margin-top: 0.125rem;
  accent-color: var(--blue-500);
}

.chat__consent a {
  color: var(--blue-600);
  text-decoration: underline;
}

.chat__send {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--blue-600);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.2s var(--ease);
}

.chat__send:hover {
  background: var(--blue-700);
}

.chat__foot {
  margin: 0;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--navy-10);
  background: var(--white);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--navy-70);
}

.chat__foot a {
  color: var(--blue-600);
}

@media (prefers-reduced-motion: no-preference) {
  .chat__panel {
    animation: chat-in 0.25s var(--ease-out);
  }
}

@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
}

/* Mobile : bouton réduit au pictogramme (le libellé reste lu par les lecteurs d'écran) */
@media (max-width: 39.9375em) {
  .chat__launch {
    padding: 0.625rem;
  }

  .chat__launch-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media print {
  .chat {
    display: none;
  }
}

/* 12 ter. Transition entre pages ---------------------------------------------------
   View Transitions entre documents (Chrome, Edge, Safari 18.2+ ; ailleurs, navigation
   habituelle) : fondu rapide de la page, et le logo Inertron de l'onglet de l'en-tête (ou de la
   carte du menu mobile ouvert) rejoint sa place dans l'en-tête de la page Inertron, et
   inversement. main.js réserve cette transition aux passages vers / depuis la page Inertron. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

::view-transition-group(inertron-logo) {
  animation-duration: 0.6s;
  animation-timing-function: var(--ease-out);
}

.inertron-tab__logo,
.mobile-nav.is-open .mobile-nav__promo-logo {
  view-transition-name: inertron-logo;
}

/* 12 bis. Animations --------------------------------------------------------------
   Actives uniquement si le JavaScript est chargé (classe .js sur <html>) et si l'utilisateur
   n'a pas demandé de réduire les animations. Sans JS : tout est visible, sans effet. */

/* Titres de rail collés sous l'en-tête jusqu'à la fin de leur section (hero compris) */
.hero__rail .eyebrow,
.section__rail .eyebrow {
  position: sticky;
  top: calc(var(--sticky-offset) + 2rem);
}

@media (prefers-reduced-motion: no-preference) {
  /* H1 : lignes révélées par un masque, de bas en haut, l'une après l'autre */
  .js [data-split-lines]:not(.is-split) {
    visibility: hidden;
    animation: split-fallback 0s 2.5s forwards; /* filet de sécurité si le script échoue */
  }

  .split-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.16em; /* jambages et filet dégradé non coupés */
    margin-bottom: -0.16em;
  }

  .split-line__inner {
    display: block;
    transform: translateY(120%); /* accents et hampes entièrement sous le masque (padding 0,16 em) */
    transition: transform 1s var(--ease-out);
    transition-delay: calc(var(--line, 0) * 0.12s + 0.1s);
  }

  .is-split-in .split-line__inner {
    transform: none;
  }

  /* Filet dégradé du H1 : se dessine de gauche à droite une fois les lignes en place */
  .js .u-underline::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--ease-out);
  }

  .js .u-underline.is-drawn::after {
    transform: none;
  }

  /* Reflet « laser » : un éclat lumineux parcourt le filet de gauche à droite toutes les 3 s
     (1,3 s de passage), une fois le filet tracé ; il apparaît et s'efface en fondu aux deux
     extrémités (masque) au lieu d'être coupé net ; en pause hors écran (main.js) */
  .u-underline::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0.065em;
    right: 0;
    bottom: calc(-1px - 0.375rem);
    height: calc(3px + 0.75rem);
    background:
      radial-gradient(4.5rem 1.5px at center, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0)),
      radial-gradient(4.5rem 0.4375rem at center, rgb(162 216 255 / 0.5), rgb(162 216 255 / 0));
    background-repeat: no-repeat;
    background-size: 9rem 100%;
    background-position: -9rem 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
    pointer-events: none;
    animation: underline-laser 3s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite;
  }

  .js .u-underline:not(.is-drawn)::before {
    animation: none;
  }

  .u-underline.is-offscreen::before {
    animation-play-state: paused;
  }

  /* Accueil : le bâtiment « respire » (zoom / dézoom très lent) et le décor défile moins vite que
     la page — ciel à 65 %, bâtiment à 80 % de la vitesse du défilement (--hero-scroll : main.js) */
  .hero--home .hero__sky {
    translate: 0 calc(var(--hero-scroll, 0px) * 0.35);
    will-change: translate;
  }

  .hero--home .hero__building {
    translate: 0 calc(var(--hero-scroll, 0px) * 0.2);
    transform-origin: 42% 60%;
    animation: hero-breathe 20s ease-in-out infinite alternate;
    will-change: translate, scale;
  }

  .hero--home.is-offscreen .hero__building {
    animation-play-state: paused;
  }

  /* Apparition au défilement : léger fondu + montée de 24 px */
  .js [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  .js [data-reveal] {
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
}

@keyframes split-fallback {
  to {
    visibility: visible;
  }
}

/* Éclat du filet H1 : entre par la gauche, sort par la droite, puis attend la fin du cycle */
@keyframes underline-laser {
  0% {
    background-position: -9rem 50%;
  }

  45%,
  100% {
    background-position: calc(100% + 9rem) 50%;
  }
}

@keyframes hero-breathe {
  to {
    scale: 1.06;
  }
}

/* Compteurs animés : chiffres à chasse fixe pendant l'animation (pas de tremblement) */
.is-counting {
  font-variant-numeric: tabular-nums;
}

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

/* ≤ 1439 px : on resserre le hero d'accueil */
@media (max-width: 89.9375em) {
  .section-head {
    gap: 2.5rem;
  }

  .section-head__lead {
    flex-basis: 18.75rem;
  }

  .video-card {
    width: clamp(16.25rem, 22vw, 21.75rem);
  }

  .mega__promo {
    flex-basis: 17.5rem;
    padding-inline: 1.5rem;
  }

  /* Certifications sur 2 × 2 : en dessous de 1440 px, « CYBERSÉCURITÉ » ne tient plus sur 4 colonnes */
  .certifications__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Secteurs sur 2 × 2 : filet vertical entre les colonnes, filet horizontal entre les rangées */
  .sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector:nth-child(3)::before {
    display: none;
  }

  .sector:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
  }

  .sector:nth-child(3)::after {
    right: calc(-2rem - 1px);
  }

  .sector:nth-child(4)::after {
    left: calc(-2rem - 1px);
  }
}

/* ≤ 1199 px : en-tête mobile + panneau de navigation */
@media (max-width: 74.9375em) {
  :root {
    --header-h: 4.625rem; /* haut du corps du hero : filet droit de la grille à 74 px */
    --header-sticky-h: 4rem; /* barre compacte : 64 px */
    --frame-w: 0.625rem; /* cadre blanc de la page (fond du hero, panneau de navigation) */
  }

  /* En-tête posé sur le hero (maquette mobile 10034:6874) : logo 140 px à 40 px du haut,
     burger encadré de 48 px dans l'encoche des filets de la grille (filet haut, diagonale,
     retour sous le burger). Au défilement : barre de 64 px (fond du hero), logo et burger réduits
     et recentrés, avec la même transition qu'en desktop. Menu ouvert : en-tête déployé. */
  .site-header {
    top: 0;
    justify-content: space-between;
    height: 5.75rem;
  }

  .site-header.is-sticky {
    height: var(--header-sticky-h);
  }

  /* Encoche : filet haut (du filet gauche de la grille à 130 px du bord droit), diagonale
     68 × 58 px, retour de 62 px jusqu'au filet droit */
  .site-header:not(.site-header--inertron)::before {
    content: "";
    position: absolute;
    top: calc(var(--hero-pt) - 1px);
    left: -1px;
    right: 8.125rem;
    height: 1px;
    background: var(--white-15);
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }

  .site-header__notch {
    position: absolute;
    top: calc(var(--hero-pt) - 1px);
    right: 0;
    display: block;
    width: 8.125rem;
    height: 3.6875rem;
    overflow: visible;
    color: var(--white-15);
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }

  .site-header.is-sticky::before,
  .site-header.is-sticky .site-header__notch {
    opacity: 0;
  }

  .site-header__bg {
    top: 0;
    left: calc(-1 * var(--gutter) - 1px);
    right: calc(-1 * var(--gutter));
  }

  .hero__grid {
    padding-top: calc(var(--header-h) - var(--hero-pt));
  }

  .site-header__brand {
    flex: none;
    height: auto;
    border: 0;
  }

  .site-header__logo {
    width: 8.78125rem;
    margin: 2.5rem 0 0 1.8125rem;
  }

  .site-header.is-sticky .site-header__logo {
    width: 6.5rem;
    margin: 1rem 0 0 var(--rail-px);
  }

  .site-header__bar,
  .site-header__outline,
  .inertron-tab,
  .mega {
    display: none;
  }

  .burger {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0.75rem 1px 0 0;
    border: 1px solid var(--white-15);
    transition: margin 0.4s var(--ease), border-color 0.2s var(--ease);
  }

  .site-header.is-sticky .burger {
    margin-top: 0.5rem;
  }

  .burger__bar,
  .burger__bar::before,
  .burger__bar::after {
    width: 1.25rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), height 0.3s var(--ease);
  }

  .burger__bar {
    position: relative;
  }

  .burger__bar::before,
  .burger__bar::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .burger__bar::before {
    top: -0.375rem;
  }

  .burger__bar::after {
    top: 0.375rem;
  }

  .burger[aria-expanded="true"] .burger__bar {
    background: transparent;
  }

  /* Croix de fermeture : traits de 2 px */
  .burger[aria-expanded="true"] .burger__bar::before,
  .burger[aria-expanded="true"] .burger__bar::after {
    height: 2px;
  }

  .burger[aria-expanded="true"] .burger__bar::before {
    transform: translateY(0.34375rem) rotate(45deg);
  }

  .burger[aria-expanded="true"] .burger__bar::after {
    transform: translateY(-0.40625rem) rotate(-45deg);
  }

  /* Menu ouvert : en-tête déployé, même défilée (maquette 10050:7581) */
  .site-header.is-nav-open {
    height: 5.75rem;
  }

  .site-header.is-nav-open .site-header__bg {
    opacity: 0;
  }

  .site-header.is-nav-open .site-header__logo {
    width: 8.78125rem;
    margin: 2.5rem 0 0 1.8125rem;
  }

  .site-header.is-nav-open .burger {
    margin-top: 0.75rem;
  }

  .site-header.is-nav-open::before,
  .site-header.is-nav-open .site-header__notch {
    opacity: 1;
  }

  /* Menu ouvert et défilé : logo et filets de l'en-tête s'effacent pour ne pas gêner la lecture ;
     la croix reste, sur fond opaque (le contenu passe dessous) */
  .site-header__logo {
    transition: width 0.4s var(--ease), margin 0.4s var(--ease), opacity 0.25s var(--ease), visibility 0s;
  }

  .site-header.is-nav-scrolled .site-header__logo {
    opacity: 0;
    visibility: hidden;
    transition: width 0.4s var(--ease), margin 0.4s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }

  .site-header.is-nav-scrolled::before,
  .site-header.is-nav-scrolled .site-header__notch {
    opacity: 0;
  }

  .site-header.is-nav-open .burger {
    background: #152553;
  }

  /* Panneau plein écran (maquette 10050:7581) : fond #152553 dans le cadre blanc de la page,
     filets de la grille, menu, carte Inertron, langues, réseaux. Niveaux 2 et 3 « Solutions »
     (proposition) : les 5 rubriques numérotées du méga menu, puis leurs liens. */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: var(--frame-w) solid var(--white);
    border-bottom: 0;
    background: #152553;
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease), visibility 0s;
  }

  /* Filets de la grille : gauche dès le haut, droit sous l'encoche de l'en-tête, bas à 12 px
     du bas de l'écran (ou après le contenu s'il est plus long) */
  .mobile-nav__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100% - var(--hero-pt) + var(--frame-w) - 0.75rem);
    margin: calc(var(--hero-pt) - var(--frame-w)) calc(var(--gutter) - var(--frame-w)) 0.75rem;
    padding: calc(var(--header-h) - var(--hero-pt) + 3.1875rem) 1.1875rem 1.375rem;
    border-bottom: 1px solid var(--white-15);
    border-left: 1px solid var(--white-15);
  }

  .mobile-nav__inner::after {
    content: "";
    position: absolute;
    top: calc(var(--header-h) - var(--hero-pt));
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--white-15);
  }

  .mobile-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__item + .mobile-nav__item {
    border-top: 1px solid rgb(255 255 255 / 0.09);
  }

  /* Niveau 1 : 26,7 px, filet dégradé de 2 × 20 px devant le libellé */
  .mobile-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.875rem 0 0.875rem 1.25rem;
    font-size: 1.66667rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: left;
  }

  .mobile-nav__link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    width: 2px;
    height: 1.25rem;
    margin-top: -0.625rem;
    background: linear-gradient(180deg, #60b4f0, var(--blue-500));
  }

  .mobile-nav__link .ico-chevron,
  .mobile-nav__rubric-btn .ico-chevron {
    flex: none;
    width: 0.5rem;
    height: 0.3125rem;
    transition: transform 0.3s var(--ease);
  }

  .mobile-nav__link[aria-expanded="true"] .ico-chevron,
  .mobile-nav__rubric-btn[aria-expanded="true"] .ico-chevron {
    transform: rotate(180deg);
  }

  /* Niveau 2 : rubriques numérotées (comme les onglets du méga menu) */
  .mobile-nav__rubrics {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__rubric {
    border-top: 1px solid rgb(255 255 255 / 0.09);
  }

  .mobile-nav__rubric-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8125rem 0;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--white-70);
    transition: color 0.2s var(--ease);
  }

  .mobile-nav__rubric-btn:hover,
  .mobile-nav__rubric-btn[aria-expanded="true"] {
    color: var(--white);
  }

  .mobile-nav__rubric-btn .ico-chevron {
    margin-left: auto;
  }

  .mobile-nav__num {
    flex: none;
    width: 1.25rem;
    font-family: var(--ff-mono);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--blue-400);
  }

  /* Niveau 3 : liens de la rubrique, avec leur description (comme dans le méga menu) */
  .mobile-nav__pane {
    padding: 0 0 1rem 2rem;
  }

  .mobile-nav__deep-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__deep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
  }

  .mobile-nav__deep-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .mobile-nav__deep-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .mobile-nav__deep-desc {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--white-70);
  }

  .mobile-nav__deep[aria-current="page"] .mobile-nav__deep-title {
    color: var(--blue-400);
  }

  .mobile-nav__label {
    margin: 0.75rem 0 0.5rem;
    font-family: var(--ff-mono);
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white-70);
  }

  .mobile-nav__sectors {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__sector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem;
    border: 1px solid var(--white-15);
    font-size: 0.875rem;
    line-height: 1.3;
    transition: border-color 0.2s var(--ease);
  }

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

  .mobile-nav__sector img {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
  }

  /* Carte Inertron (mêmes proportions que l'onglet de l'en-tête desktop) */
  .mobile-nav__promo {
    display: flex;
    align-items: center;
    gap: 1.0625rem;
    min-height: 5.4375rem;
    margin-top: 1.4375rem;
    padding: 1.3125rem 0.5625rem 1rem;
    background:
      radial-gradient(50% 84% at 50% 41%, rgb(71 84 101) 0%, rgb(71 84 101 / 0) 100%),
      var(--inertron-900, #29323f);
  }

  .mobile-nav__promo-img {
    flex: none;
    width: 4.25rem;
    height: 3.125rem;
    object-fit: contain;
    object-position: bottom;
  }

  .mobile-nav__promo-label {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    min-width: 0;
  }

  .mobile-nav__promo-logo {
    flex: none;
    width: 5.3125rem;
    height: 2.5rem;
  }

  .mobile-nav__promo-sep {
    flex: none;
    width: 1px;
    background: var(--white-15);
  }

  .mobile-nav__promo-text {
    align-self: center;
    max-width: 5.5625rem;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--white-70);
  }

  .mobile-nav__langs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5625rem 0 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__langs a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.5rem;
    border: 1px solid var(--white-15);
    font-size: 0.8125rem;
    line-height: 1;
    transition: border-color 0.2s var(--ease);
  }

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

  .mobile-nav__langs a[aria-current="true"] {
    border-color: var(--navy);
    background: var(--white);
    color: var(--navy);
  }

  .mobile-nav__social {
    display: flex;
    justify-content: center;
    margin: 1.125rem 0 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__social-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 2.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-nav__social-link .i-linkedin {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--blue-500);
  }

  .mobile-nav__social-link .i-youtube {
    width: 1.78563rem;
    height: 1.25rem;
  }

  .hero__body {
    min-height: 0;
    padding-top: 4.5rem;
  }

  /* Hero : colonne titre souple, vidéo de 220 à 460 px, tuiles qui se resserrent */
  .hero-home__titles {
    flex: 1 1 0;
    min-width: 0;
  }

  .hero--home .video-card {
    flex: 0 0 clamp(15rem, 30vw - 7rem, 28.75rem); /* 240 px mini : légende « InTest en images » entière */
    min-width: 0;
  }

  .hero--home .tiles {
    flex-wrap: nowrap;
  }

  .hero--home .tiles .tile {
    flex: 0 1 15.625rem;
    width: auto;
  }

  /* Chiffres du hero resserrés, libellés sur 2 lignes si besoin */
  .hero-figure {
    padding-inline: 1.5rem;
    white-space: normal;
  }

  .hero-figure__value {
    font-size: 2.75rem;
    white-space: nowrap;
  }

  .innova .section__main {
    flex-direction: column;
    align-items: stretch;
  }

  .innova__text {
    flex-basis: auto;
  }

  .innova-visual {
    width: min(35.75rem, 100%);
    margin: 1.5rem auto 0;
  }

  .site-footer__main {
    flex-direction: column;
  }

  .site-footer__contact {
    flex-basis: auto;
  }

  .footer-links {
    flex-wrap: wrap;
  }
}

/* ≤ 1023 px : une colonne — le rail devient un sur-titre */
@media (max-width: 63.9375em) {
  :root {
    --rail-px: 1.5rem;
    --main-px: 1.5rem;
  }

  .section__grid {
    flex-direction: column;
  }

  .section__rail {
    flex-basis: auto;
    padding: 2.5rem var(--rail-px) 0;
    border-right: 0;
  }

  .section__main {
    --main-gap: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }

  .offer .section__main,
  .innova .section__main,
  .careers .section__main {
    padding-top: 1.5rem;
  }

  .contact .section__rail {
    padding-top: 5rem;
  }

  .contact .section__main {
    padding-top: 1.5rem;
  }

  .section-head {
    flex-direction: column;
    gap: 1.25rem;
  }

  .section-head__lead {
    flex-basis: auto;
    max-width: 35rem;
  }

  /* Hero */
  .hero__body {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__body {
    padding-top: 2.5rem;
  }

  .hero__rail {
    flex: none; /* en colonne, la base de 220–280 px deviendrait une hauteur */
    padding-bottom: 1.5rem;
    border-right: 0;
  }

  .hero__main {
    flex-direction: column;
    gap: 2.5rem;
    min-height: 0;
    padding: 0 var(--main-px) 3.5rem;
  }

  .hero__title {
    padding-left: 0;
  }

  .hero-home__titles {
    gap: 2.5rem;
  }

  .hero--home .hero__body {
    min-height: 0;
    padding-top: 2.5rem;
  }

  .hero--home .hero__rail {
    margin-top: 0;
    padding-top: 0;
  }

  .hero--home .hero__rail .eyebrow {
    max-width: none;
  }

  .hero--home .hero__main {
    min-height: 0;
  }

  .hero__lead {
    padding-inline: 0;
  }

  .hero-home__titles {
    flex: none;
  }

  .video-card,
  .hero--home .video-card {
    flex: none;
    width: min(100%, 26.25rem);
  }

  .hero--home .tiles {
    padding-left: 0;
  }

  /* Chiffres du hero : 2 × 2, sans la cellule de la colonne gauche */
  .hero-home__bottom {
    grid-template-columns: 1fr;
  }

  .hero-home__bottom-rail {
    display: none;
  }

  .hero-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
  }

  .hero-figure:nth-child(3) {
    border-left: 0;
  }

  .hero-figure:nth-child(n + 3) {
    border-top: 1px solid var(--white-15);
  }

  .hero-figure {
    padding: 1.5rem var(--main-px) 1.75rem;
  }

  .hero--home .hero__building {
    top: auto;
    bottom: 0;
    left: -10%;
    width: 160%;
  }

  /* Offre */
  .offer-cards {
    grid-template-columns: 1fr;
  }

  .offer-card {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
  }

  .offer-cards > li:last-child .offer-card {
    border-bottom: 0;
  }

  .offer-card__media {
    width: 100%;
  }

  .offer-card .link-arrow {
    padding-top: 0.5rem;
  }

  /* Carrières */
  .values {
    grid-template-columns: 1fr;
  }

  .value,
  .value:first-child {
    padding: 2rem 0;
  }

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

  .photo-row {
    grid-template-columns: 1fr 1fr;
  }

  .photo-row .media:last-child {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
  }

  .jobs__list {
    grid-template-columns: 1fr;
  }

  .jobs__list > li:nth-child(even) {
    border-left: 0;
  }

  .jobs__list > li:nth-child(even) .job {
    padding-left: 0;
  }

  /* Contact */
  .contact__row {
    flex-direction: column;
    gap: 0;
    padding-top: 1.5rem;
  }

  .contact__body {
    flex-direction: column;
  }

  /* Footer */
  .site-footer__top,
  .site-footer__bottom {
    flex-direction: column;
  }

  .site-footer__rail,
  .site-footer__langs {
    flex-basis: auto;
    border-right: 0;
  }

  .site-footer__rail {
    padding-bottom: 0;
  }

  .site-footer__main {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .site-footer__langs {
    padding-bottom: 0;
  }
}

/* Sous-navigation ≤ 1023 px : sans rail, onglets défilants horizontalement */
@media (max-width: 63.9375em) {
  .subnav__rail {
    display: none;
  }

  .subnav__list {
    flex: 1;
    gap: 1.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .subnav__list::-webkit-scrollbar {
    display: none;
  }
}

/* Tablette : cartes « offre » en ligne (visuel à gauche) */
@media (min-width: 40em) and (max-width: 63.9375em) {
  .offer-card {
    display: grid;
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
}

/* ≤ 639 px : mobile */
@media (max-width: 39.9375em) {
  :root {
    --gutter: 1rem;
    --rail-px: 1.25rem;
    --main-px: 1.25rem;
  }

  :root {
    --hero-pt: 1rem;
    --frame-w: 0.375rem;
  }

  .hero__bg {
    inset: 0.375rem 0.375rem 0;
  }

  .hero__sky {
    background-image: url("../img/common/hero-ciel-960.webp");
  }

  .hero--home .hero__building {
    background-image: url("../img/home/hero-batiment-640.webp");
  }

  .tiles .tile {
    flex: 1 1 50%;
    width: auto;
    min-height: 7.5rem;
    padding: 1rem;
    font-size: 1.0625rem; /* « Contactez-nous » sur une ligne dès 375 px */
  }

  .hero--home .hero__body {
    padding-top: 3.9375rem;
  }

  .hero--home .hero__rail {
    padding-bottom: 0;
  }

  .hero--home .hero__rail .eyebrow {
    max-width: 13.75rem; /* retours à la ligne de la maquette : « … là où la / performance se mesure » */
  }

  /* Espace sur-titre → titre : 159 px sur un écran de 667 px, de façon à finir les tuiles
     15 px au-dessus du bas de l'écran (2,5 rem mini sur écran bas, 12 rem maxi sur écran haut) */
  .hero--home .hero__main {
    padding-top: clamp(2.5rem, 100vh - 31.75rem, 12rem);
    padding-top: clamp(2.5rem, 100svh - 31.75rem, 12rem);
  }

  .hero-home__text {
    display: contents;
  }

  /* Texte souligné trop long pour une ligne : le filet suit le dernier fragment
     (bloc conteneur d'un élément en ligne = du début du 1er fragment à la fin du dernier) */
  .u-underline {
    display: inline;
  }

  .u-underline::after {
    bottom: 0.125em; /* même position qu'en inline-block : zone de contenu 1,3 em, interligne 1 em */
  }

  .hero-home__titles .tiles {
    order: 1;
  }

  .hero-home__titles .hero__lead {
    order: 2;
  }

  .hero-figure {
    padding-inline: 1.25rem;
  }

  .hero-figure__value {
    font-size: 2.5rem;
  }

  .photo-row,
  .certifications__list {
    grid-template-columns: 1fr;
  }

  .photo-row .media:last-child {
    grid-column: auto;
    aspect-ratio: 407.33 / 360;
  }

  /* Secteurs : une colonne, filets horizontaux entre les blocs */
  .sectors {
    grid-template-columns: 1fr;
  }

  .sector {
    padding-block: 2rem;
  }

  .sector + .sector::before,
  .sector:nth-child(n + 3)::after {
    display: none;
  }

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

  .sector__title {
    min-height: 0;
  }

  .innova .tiles {
    grid-template-columns: 1fr 1fr;
  }

  .innova .tiles .tile:first-child {
    grid-column: span 2;
  }

  .job {
    padding-right: 0;
  }

  .faq__question {
    gap: 1rem;
  }

  .faq__answer p {
    padding-right: 0;
  }

  .innova .section__bg {
    background-image: var(--gradient-overlay-92), url("../img/home/innova-bg-640.webp"), var(--gradient-hero);
  }

  .contact .section__bg {
    background-image: var(--gradient-overlay-92), url("../img/common/contact-bg-960.webp");
  }

  .contact__info {
    white-space: normal;
  }

  .footer-social__list {
    flex-wrap: wrap;
  }

  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-links__group {
    white-space: normal;
  }

  .site-footer__langs {
    flex-wrap: wrap;
  }
}

/* ≤ 359 px : tuiles du hero resserrées pour rester côte à côte */
@media (max-width: 22.4375em) {
  .tiles .tile {
    padding: 1rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}