/* ==========================================================================
   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 */
  --page-max: 2560px; /* au-delà, la composition (figée) se centre ; les fonds restent pleine largeur */
  --frame: calc(var(--page-max) - 2 * var(--gutter)); /* largeur maximale de la grille */
  --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 globale ----------------------------------------------------------------
   Toutes les dimensions sont en rem (filets de 1–3 px exceptés) : 1rem = 16 px jusqu'à
   1680 px de large (maquette), puis la composition entière grandit avec l'écran —
   colonne gauche, marges, textes, visuels — sans changer ses proportions :
   ×1,1 à 1920 px, ×1,3 à 2400 px, ×1,37 à 2560 px, puis se fige.
   … mais seulement si la hauteur de la fenêtre suit (1.6vh = 16 px pour 1000 px de haut) :
   on voit toujours au moins autant de contenu en hauteur que sur un écran 1680 × 1050.
   Sinon (écran 1920 × 1080, ultra-large), la composition garde sa taille et s'élargit.
   Base en % : la taille de police choisie dans le navigateur reste respectée. */
html {
  font-size: clamp(100%, min(30% + 0.66667vw, 1.6vh), 136.67%);
  -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;
}

/* 5. Typographie ----------------------------------------------------------- */
.t-display {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.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.05em;
}

.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) */
.u-underline {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.u-underline::after {
  content: "";
  position: absolute;
  z-index: -1;
  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);
}

.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.05em;
}

.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-70);
}

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

/* Sur-titre atténué (pages intérieures : navy 70 %) */
.eyebrow--muted {
  color: var(--navy-70);
}

/* Tuile d'appel à l'action 200 × 200 (composant « cta-tile ») */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 12.5rem;
  min-height: 12.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);
}

.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 la grille du hero (bordures blanches à 15 %). */
.site-header {
  position: fixed;
  top: var(--hero-pt);
  left: calc(max(var(--gutter), 50% - var(--page-max) / 2 + var(--gutter)) + 1px); /* après le filet gauche de la grille */
  right: max(var(--gutter), 50% - var(--page-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(--page-max) / 2 + var(--gutter)));
  right: calc(-1 * max(var(--gutter), 50vw - var(--page-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 clamp(1rem, 22vw - 15.6rem, 7.5rem); /* 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 » --------------------------------------------------- */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  height: 37.5rem;
  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 .eyebrow {
  color: var(--navy-70);
}

.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 {
    top: 0.875rem;
    left: max(0.75rem, 50% - var(--page-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(--page-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: clamp(1rem, 22vw - 13.1625rem, 9.9375rem); /* 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 .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, grille à 24 px. */
.hero {
  position: relative;
  isolation: isolate;
  max-width: var(--page-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(--frame);
  margin-inline: auto;
  padding-top: var(--header-h);
  border-left: 1px solid var(--white-20);
}

.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;
}

.hero__title {
  padding-left: 1.5rem;
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* 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) */
.hero--home .hero__body {
  min-height: 42.4375rem;
  padding-top: 7.3125rem;
}

.hero--home .hero__rail {
  margin-top: 0.375rem;
  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 {
  min-height: 35.125rem;
}

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

.hero-home__titles {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-width: 0;
}

.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) */
.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%);
}

.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 */
.hero-home__bottom {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 880fr) minmax(0, 471fr);
}

@media (min-width: 105.0625em) {
  .hero-home__bottom {
    grid-template-columns: var(--rail-w) 55rem minmax(0, 1fr);
  }
}

.hero-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 2.5rem var(--rail-px);
  border-top: 1px solid var(--white-20);
  border-right: 1px solid var(--white-20);
  white-space: nowrap;
}

.hero-stat__value {
  font-size: var(--fs-stat);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-card {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1.5rem var(--main-px);
  background: var(--white);
  color: var(--navy);
}

.about-card__texts {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

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

.about-card__dots {
  flex: none;
  width: 5.3125rem;
  height: 5.0625rem;
  color: var(--blue-500);
}

.hero-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem 2.5rem 3rem 3rem;
  border-right: 1px solid var(--white-15);
}

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

/* Chiffres clés */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.figure {
  display: grid;
  grid-template-columns: 1px auto;
  grid-template-rows: auto auto;
  column-gap: 1.875rem;
  row-gap: 0.5rem;
  justify-content: start;
  white-space: nowrap;
}

.figure::before {
  content: "";
  grid-row: 1 / 3;
  grid-column: 1;
  background: linear-gradient(180deg, var(--blue-500), #a2d8ff);
}

.figure__value {
  grid-row: 1;
  grid-column: 2;
}

.figure__label {
  grid-row: 2;
  grid-column: 2;
}

.figure__value {
  font-size: var(--fs-stat);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

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

.photo-strip .media {
  aspect-ratio: auto;
  height: 20rem;
}

.certifications {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.certifications__label {
  font-size: 0.75rem;
  line-height: 1.25; /* 15 px : interligne « normal » de la police Inter utilisée dans Figma */
  letter-spacing: 0;
  text-transform: uppercase;
}

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

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

.cert-card__logo {
  flex: none;
  width: 2.5625rem;
  height: 2.11294rem;
}

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

.cert-card__title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cert-card__sub {
  font-size: 0.75rem;
  letter-spacing: 0;
  opacity: 0.7;
}

.cert-card--logo {
  justify-content: center;
  padding-block: 0.5rem;
}

.cert-card--logo img {
  width: 9.3125rem;
}

/* Secteurs d'activité */
.sectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.sector {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-bottom: 1px solid var(--line);
}

.sectors > li:nth-child(even) .sector,
.sectors > .sector:nth-child(even) {
  padding: 2.5rem 0 2.5rem 2.5rem;
  border-left: 1px solid var(--line);
}

.sectors > li {
  display: flex;
}

.sectors > li > .sector {
  flex: 1;
}

.sector__media {
  flex: none;
  width: 10rem;
  height: 10rem;
}

.sector__body,
.card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.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);
}

.sector__body > p,
.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: 4rem;
  --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 .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);
}

/* 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: 3rem;
}

.innova .section__main {
  --main-pt: 3rem;
  --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;
  max-width: 32.5rem;
}

.innova__title {
  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.05em;
}

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

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

.key-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.key-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.5rem;
  border-left: 1px solid var(--white-15);
}

.key-stats dt {
  order: 2;
  color: var(--white-70);
}

.key-stats dd {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Tuiles InNova : 3 carrés de 200 px max, qui se resserrent avec la colonne */
.innova .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 12.5rem));
}

.innova .tile {
  width: auto;
  min-height: 0;
  aspect-ratio: 1;
}

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

.innova-visual__logo {
  position: absolute;
  top: -2.1%;
  left: 26.57%;
  width: 50.35%;
}

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

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

.innova-visual__img {
  position: absolute;
  top: 13.87%;
  left: 15.73%;
  width: 72.03%;
  height: auto;
  transition: transform 0.6s var(--ease);
}

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

.innova-visual__caption strong {
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  line-height: round(1.15em, 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__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 1.2;
}

.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.04em;
}

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

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

.contact__text {
  max-width: 33rem;
  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);
  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;
  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 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;
  }

  /* 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;
  }
}

/* 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;
  }
}

/* ≤ 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-home__bottom {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }

  .hero-aside {
    display: none;
  }

  .about-card {
    border-right: 1px solid var(--white-15);
  }

  .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;
  }

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

  .hero-home__bottom {
    grid-template-columns: 1fr;
  }

  .hero-stat {
    border-right: 0;
  }

  .about-card {
    border-right: 0;
  }

  .hero-aside {
    display: flex;
    padding: 2rem var(--main-px) 2.5rem;
  }

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

  /* Chiffres */
  .figures {
    gap: 1.5rem;
  }

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

  .photo-strip .media,
  .photo-strip .media:last-child {
    height: auto;
    aspect-ratio: 314.75 / 320;
  }

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

  /* Secteurs */
  .sectors {
    grid-template-columns: 1fr;
  }

  .sector,
  .sectors > li:nth-child(even) .sector {
    padding: 2rem 0;
    border-left: 0;
  }

  /* 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;
  }

  /* InNova */
  .key-stats {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.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: 10rem;
    padding: 1.25rem;
    font-size: 1.125rem;
  }

  .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;
  }

  .about-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem var(--main-px) 2.5rem;
  }

  .about-card__dots {
    width: 3.75rem;
    height: 3.5625rem;
  }

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

  .figures {
    gap: 2rem;
  }

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

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

  .sector__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .key-stats > div {
    padding: 0 1rem;
  }

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

  .innova .tiles .tile:first-child {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 8.75rem;
  }

  .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;
  }
}