:root {
  --c-white: #fff;
  --c-deep: #181818;
  --c-deep-2: #2d2d2d;
  --c-teal: #e11616;
  --c-mint: #e11616;
  --c-text: #5a5a5a;
  --c-soft: #fff;
  --c-soft-2: #fff;
  --c-border: rgb(0 0 0 / 10%);
  --max: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  font-family: "Source Sans 3", Montserrat, Arial, sans-serif;
  color: var(--c-text);
  background: #fff;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(720px 420px at 100% -10%, rgb(225 22 22 / 8%), transparent 64%),
    radial-gradient(620px 420px at -10% 30%, rgb(0 0 0 / 5%), transparent 66%);
}

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

.wrap {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
}

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgb(0 0 0 / 12%);
  transition: box-shadow 0.34s ease, background-color 0.34s ease, border-color 0.34s ease;
  background: rgb(255 255 255 / 98%);
  border-bottom-color: rgb(20 31 42 / 8%);
  box-shadow: 0 8px 30px rgb(20 31 42 / 8%);
}

/* Header et hero 2026 — composition calée sur la nouvelle image d'usinage. */
@media (width >= 1251px) {
  .header-main {
    width: calc(100% - 56px);
    max-width: none;
    min-height: 112px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(24px, 2.5vw, 42px);
  }

  .brand img,
  .header.is-scrolled .brand img {
    max-height: 58px;
    width: clamp(270px, 19vw, 330px);
  }

  .header.is-scrolled .header-main {
    min-height: 92px;
  }
}

.header-main {
  position: relative;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  transition: min-height 0.34s cubic-bezier(0.22, 1, 0.36, 1), gap 0.34s ease;
}

.primary-nav {
  min-width: 0;
  min-height: 66px;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgb(20 31 42 / 5.5%);
  border-radius: 18px;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 28px rgb(20 31 42 / 8%);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}

.primary-nav a {
  min-height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Source Sans 3", Arial, sans-serif;
  white-space: nowrap;
  position: relative;
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: none;
  padding: 6px 2px;
  transition: color 0.22s ease, transform 0.22s ease, text-shadow 0.22s ease;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--c-teal);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.primary-nav .nav-home {
  color: var(--c-teal);
}

.nav-home img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.header-quote.button-pill {
  min-height: 56px;
  margin: 0;
  padding: 0 clamp(24px, 2vw, 34px);
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ec1717, #c90000);
  box-shadow: 0 10px 24px rgb(225 22 22 / 22%);
  font-size: 1.05rem;
  white-space: nowrap;
}

.hero {
  isolation: isolate;
  background: #fff;
  z-index: 3;
  height: min(830px, calc(100svh - 92px));
  min-height: 720px;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.hero::before,
.hero::after {
  content: none;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  opacity: 1;
  filter: none;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
  transform: translate3d(0, var(--hero-parallax-y, 0), 0) scale(1.018);
}

.hero-layout {
  grid-template-columns: 1.08fr 0.92fr;
  gap: 14px;
  align-items: stretch;
  position: relative;
  z-index: 2;
  width: min(80%, 1340px);
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(900px, 66%);
  padding-top: clamp(120px, 15vh, 158px);
}

.hero-copy h1 {
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  color: #222a33;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(3rem, 3.45vw, 4rem);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.hero-copy h1 span {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: inherit;
  display: block;
  color: inherit;
}

.hero-copy h1 .hero-title-accent {
  margin-bottom: 0.08em;
  color: #df1010;
}

.hero-title-rule {
  display: block;
  border-radius: 999px;
  background: #e11616;
  width: 88px;
  height: 4px;
  margin-top: 28px;
}

.metiers-list {
  width: min(880px, 100%);
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 18px;
}

.metier-item {
  position: relative;
  min-width: 0;
  flex-direction: column;
  font-weight: 700;
  text-align: center;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 12px;
  color: #363636;
  font-size: 13px;
  line-height: 1.25;
  min-height: 56px;
  cursor: default;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
}

.metier-item::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  width: 1px;
  height: 138px;
  background: rgb(25 37 48 / 16%);
}

.metier-item:last-child::after {
  content: none;
}

.metier-item > span:last-child {
  max-width: 130px;
  display: block;
  align-self: center;
}

.icon-wrap {
  flex: 0 0 74px;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  filter: drop-shadow(0 8px 9px rgb(190 0 0 / 20%));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e11616, #c60f0f);
  box-shadow: 0 8px 16px rgb(225 22 22 / 34%);
}

.icon-wrap img {
  width: 28px;
  height: 28px;
}

.hero.reveal .hero-copy,
.hero.reveal .metier-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.75s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.reveal .metier-item {
  transition-delay: calc(240ms + (var(--hero-item-index, 0) * 85ms));
}

.hero .metier-item:nth-child(1) { --hero-item-index: 0; }
.hero .metier-item:nth-child(2) { --hero-item-index: 1; }
.hero .metier-item:nth-child(3) { --hero-item-index: 2; }
.hero .metier-item:nth-child(4) { --hero-item-index: 3; }
.hero .metier-item:nth-child(5) { --hero-item-index: 4; }
.hero .metier-item:nth-child(6) { --hero-item-index: 5; }

.hero.reveal.is-visible .hero-copy,
.hero.reveal.is-visible .metier-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (width <= 1250px) {
  .header {
    box-shadow: 0 10px 22px rgb(0 0 0 / 8%);
    position: sticky;
  }

  .header-main,
  .header.is-scrolled .header-main {
    min-height: 86px;
    padding: 12px 0;
    display: grid;
    grid-template-columns: auto minmax(20px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
  }

  .brand {
    grid-column: 1;
  }

  .brand img,
  .header.is-scrolled .brand img {
    width: clamp(178px, 22vw, 235px);
    max-height: 48px;
  }

  .header-quote.button-pill {
    padding-inline: 22px;
    font-size: 0.95rem;
    grid-column: 3;
    display: inline-flex;
    min-height: 48px;
    margin: 0;
  }

  .menu-toggle {
    min-height: 48px;
    grid-column: 4;
    display: inline-flex;
    justify-self: end;
  }

  .primary-nav {
    min-height: 0;
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgb(20 31 42 / 16%);
    gap: 22px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(430px, calc(100vw - 28px));
    display: none;
  }

  .primary-nav.is-open {
    gap: 2px;
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
  }

  .primary-nav a {
    padding: 0 16px;
    border-radius: 12px;
    min-height: 52px;
    justify-content: flex-start;
  }

  .primary-nav a::after {
    left: 16px;
    bottom: 4px;
    width: 42px;
  }

  .hero {
    padding: 40px 0 32px;
    height: auto;
    min-height: 720px;
  }

  .hero-layout {
    gap: 18px;
    width: min(calc(100% - 56px), 1040px);
  }

  .hero-content {
    width: min(720px, 72%);
    padding: 94px 0 70px;
  }

  .hero-copy h1 {
    font-size: clamp(2.65rem, 5vw, 3.65rem);
  }

  .metiers-list {
    row-gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metier-item:nth-child(3)::after,
  .metier-item:nth-child(6)::after {
    content: none;
  }
}

@media (width <= 760px) {
  .header-main,
  .header.is-scrolled .header-main {
    min-height: 72px;
    grid-template-columns: auto 1fr auto;
    padding: 9px 0;
    display: block;
  }

  .brand img,
  .header.is-scrolled .brand img {
    width: clamp(158px, 43vw, 190px);
    max-height: 42px;
  }

  .header-quote.button-pill {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    grid-column: 3;
    min-height: 44px;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    margin: 0;
    transform: translate3d(0, -50%, 0);
  }

  .hero {
    overflow: hidden;
    min-height: 760px;
    padding: 0;
  }

  .hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 90%) 62%, rgb(255 255 255 / 46%) 100%);
    content: none;
  }

  .hero-video-bg {
    object-position: 56% center;
    transform: none;
  }

  .hero-layout {
    width: min(calc(100% - 30px), 660px);
    display: block;
  }

  .hero-content {
    width: 100%;
    padding: 58px 0 46px;
  }

  .hero-copy h1 {
    overflow-wrap: anywhere;
    max-width: none;
    line-height: 1.1;
    font-size: clamp(1.75rem, 8vw, 2.2rem);
    letter-spacing: -0.025em;
  }

  .hero-title-rule {
    width: 70px;
    height: 3px;
    margin-top: 22px;
  }

  .metiers-list {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .metier-item {
    padding: 0 10px;
    gap: 10px;
    grid-template-columns: 40px 1fr;
    min-height: 40px;
    font-size: 12.5px;
    line-height: 1.18;
  }

  .metier-item:nth-child(3)::after {
    content: "";
  }

  .metier-item:nth-child(even)::after {
    content: none;
  }

  .metier-item::after {
    height: 122px;
  }

  .icon-wrap {
    flex-basis: 62px;
    width: 40px;
    height: 40px;
  }

  .icon-wrap img {
    width: 18px;
    height: 18px;
  }
}

@media (width <= 420px) {
  .hero {
    min-height: 735px;
  }

  .hero-content {
    padding-top: 46px;
  }

  .hero-copy h1 {
    font-size: clamp(1.85rem, 8.7vw, 2.25rem);
  }

  .metier-item {
    min-height: 134px;
    padding-inline: 7px;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.reveal .hero-copy,
  .hero.reveal .metier-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.header.is-scrolled {
  background: rgb(255 255 255 / 98.5%);
  border-bottom-color: rgb(0 0 0 / 8%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}

.header.is-scrolled .header-main {
  min-height: 76px;
  gap: 28px;
}

.brand img {
  width: clamp(150px, 15vw, 185px);
  height: auto;
  max-height: 42px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 8%));
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.34s ease;
}

.header.is-scrolled .brand img {
  width: clamp(145px, 13vw, 170px);
  max-height: 38px;
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.menu-toggle {
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgb(0 0 0 / 16%);
  border-radius: 999px;
  background: rgb(0 0 0 / 3%);
  color: #252525;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Caché uniquement au-delà du point de bascule vers le menu complet : sans
   cette portée en media query, cette règle (non conditionnelle, plus bas
   dans le fichier que les media queries qui l'affichent en mobile) reprenait
   la main sur elles et masquait le bouton du menu sur mobile/tablette. */
@media (width > 1250px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: rgb(225 22 22 / 8%);
  border-color: rgb(225 22 22 / 30%);
}

.menu-toggle:active {
  transform: scale(0.985);
}

.menu-toggle-icon {
  position: relative;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentcolor;
  flex: 0 0 auto;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentcolor;
}

.menu-toggle-icon::before {
  top: -6px;
}

.menu-toggle-icon::after {
  top: 6px;
}

.primary-nav a.is-active {
  color: var(--c-teal);
  text-shadow: 0 0 14px rgb(225 22 22 / 20%);
}

.primary-nav a.is-active::after {
  transform: scaleX(1);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--c-teal);
  transform: translateY(-1px);
  text-shadow: 0 0 14px rgb(225 22 22 / 24%);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

.primary-nav a:active {
  transform: translateY(0) scale(0.98);
}

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 22%) 55%, rgb(255 255 255 / 92%) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero::after {
  content: none;
}

.hero-copy h1::after {
  content: none;
}

.metier-item:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.section {
  padding: 100px 0;
}

.decor-surface {
  position: relative;

  --decor-shift: 0px;
}

/* Variante « neutre » : fond blanc explicite, plutôt que de dépendre du
   fond par défaut des classes de section qui l'accompagnent — au même
   titre que decor-b/decor-c/decor-gray déclarent le leur. */
.decor-surface.decor-a {
  background: #fff;
}

.decor-surface > .wrap {
  position: relative;
  z-index: 1;
}

.decor-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    url("assets/decor/motif-points-gris.svg"),
    url("assets/decor/motif-grand-cercle-fin.svg"),
    url("assets/decor/motif-repere-cible.svg");
  background-repeat: no-repeat;
  background-size: 138px, 420px, 240px, 88px;
  background-position:
    5% calc(14% + var(--decor-shift)),
    92% calc(72% + var(--decor-shift)),
    9% calc(90% + var(--decor-shift)),
    74% calc(38% + var(--decor-shift));
}

/* Variante gris clair : ponctue chaque page d'un chapitre plus marqué entre
   deux sections blanches (le noir reste réservé à "Parc machines"), pour
   éviter l'effet "tout blanc" plutôt que de multiplier les nuances
   quasi-identiques de decor-b / decor-c. Texte inchangé : assez clair pour
   rester lisible avec les couleurs sombres par défaut. */
.decor-surface.decor-gray {
  background: linear-gradient(175deg, #eef0f1 0%, #e4e7e9 55%, #eaecee 100%);
}

/* Première section de pieces-serie.html, déjà visible sans scroll au
   chargement : même correctif que #pieces-unitaires plus bas, on neutralise
   le grand glissement de section (le reveal en cascade du texte et le
   surlignage rouge restent inchangés). */
#pieces-serie.engage-section.reveal .text-content,
#pieces-serie.engage-section.reveal .section-figure {
  opacity: 1;
  transform: none;
  filter: none;
}

.engage-section.reveal .text-content {
  opacity: 0;
  transform: translate3d(clamp(-680px, -32vw, -140px), 0, 0) rotate(-6deg) scale(0.94);
  filter: blur(6px);
  transition:
    opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.engage-section.reveal .section-figure {
  opacity: 0;
  transform: translate3d(clamp(140px, 32vw, 680px), 0, 0) rotate(6deg) scale(0.94);
  filter: blur(6px);
  transition:
    opacity 1.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 120ms;
  will-change: opacity, transform, filter;
}

.engage-section.reveal.is-visible .text-content,
.engage-section.reveal.is-visible .section-figure {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  filter: blur(0);
}

/* Toute première section de pieces-unitaires.html, déjà visible au
   chargement : même correctif que .intro-section plus haut, on neutralise
   le grand glissement de section (le reveal du texte à l'intérieur et le
   surlignage rouge restent inchangés). Scopé par id pour ne pas toucher les
   autres .engage-section du site (Doosan Puma 4100, Exemple de réalisation...). */
#pieces-unitaires.engage-section.reveal .text-content,
#pieces-unitaires.engage-section.reveal .section-figure {
  opacity: 1;
  transform: none;
  filter: none;
}

/* En layout inversé (photo à gauche, texte à droite — cf. .split-grid.reverse
   sur pieces-serie.html et pieces-unitaires.html), le texte et la photo
   doivent glisser depuis LEUR côté visuel respectif, sinon ils se croisent
   en plein milieu de l'animation : on inverse simplement les deux glissades. */
.engage-section.reveal .split-grid.reverse .text-content {
  transform: translate3d(clamp(140px, 32vw, 680px), 0, 0) rotate(6deg) scale(0.94);
}

.engage-section.reveal .split-grid.reverse .section-figure {
  transform: translate3d(clamp(-680px, -32vw, -140px), 0, 0) rotate(-6deg) scale(0.94);
}

/* .split-grid.reverse ajoute 2 classes de plus que .text-content /
   .section-figure seuls : sans ceci, ces sélecteurs plus spécifiques
   continuaient à imposer la position de départ même une fois .is-visible
   ajouté, et les éléments restaient bloqués sur le côté au lieu de revenir
   au centre. */
.engage-section.reveal.is-visible .split-grid.reverse .text-content,
.engage-section.reveal.is-visible .split-grid.reverse .section-figure {
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.plan-section.reveal .plan-copy {
  opacity: 0;
  transform: translate3d(clamp(-640px, -30vw, -130px), 0, 0) rotate(-6deg) scale(0.95);
  filter: blur(6px);
  transition:
    opacity 1.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.plan-section.reveal .plan-map-wrap {
  opacity: 0;
  transform: translate3d(clamp(130px, 30vw, 640px), 0, 0) rotate(6deg) scale(0.95);
  filter: blur(6px);
  transition:
    opacity 1.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 120ms;
  will-change: opacity, transform, filter;
}

.plan-section.reveal.is-visible .plan-copy,
.plan-section.reveal.is-visible .plan-map-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  filter: blur(0);
}

mark {
  position: relative;
  display: inline-block;
  color: #fff;
  background: var(--c-teal);
  padding: 2px 10px 5px;
  box-decoration-break: clone;
  /* stylelint-disable-next-line property-no-vendor-prefix -- requis par Safari, qui ne connaît que la version préfixée */
  -webkit-box-decoration-break: clone;
}

/* Étiquette rouge au-dessus de chaque titre de section : taille et graisse
   harmonisées ici pour toutes les pages (avant, seul le dégradé de couleur
   était défini globalement, la taille dépendait du contexte local). */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

/* Petit rappel du rideau rouge du page-hero sur les autres titres de
   section : une barre qui se déploie de gauche à droite avant le kicker,
   pour garder le même dynamisme (barre puis étiquette puis titre) partout. */
.section-kicker::before {
  content: "";
  flex: none;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.reveal.is-visible .section-kicker::before {
  transform: scaleX(1);
}

/* Titres de section « nus » (juste un kicker + un h2 dans .wrap, sans
   .intro-copy / .text-content / .plan-copy / .key-figures-heading autour) :
   harmonisés sur la même taille que les autres titres de section du site. */
.legal-section > .wrap > h2,
#apercu-title,
.contact-form-section .contact-form-intro h2 {
  margin: 0 0 18px;
  max-width: 720px;
  color: #1f1f1f;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.2;
}

.section-kicker,
.key-prefix,
.contact-showcase h2 span {
  --tint-reveal: 0;

  background-image: linear-gradient(
    to right,
    var(--c-teal) 0%,
    var(--c-teal) calc(var(--tint-reveal) * 100%),
    #9a9a9a calc(var(--tint-reveal) * 100%),
    #9a9a9a 100%
  );
  /* stylelint-disable-next-line property-no-vendor-prefix -- required by Chrome/Edge for background-clip: text */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Les titres marqués gardent un vrai surlignage rouge lisible : le bandeau
   rouge se remplit de haut en bas au moment du reveal (clip-path), plutôt
   qu'un simple fondu — y compris les h1 des en-têtes de page (page-hero),
   même traitement que les h2. */
.reveal h1 mark,
.reveal h2 mark {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.4s ease,
    color 0.4s ease;
  transition-delay: 320ms;
}

.reveal.is-visible h1 mark,
.reveal.is-visible h2 mark {
  clip-path: inset(0 0 0% 0);
}

/* Sur les en-têtes de page (rideau rouge + titre qui monte), le surlignage
   du h1 ne doit se remplir qu'une fois le titre arrivé, sinon il se remplit
   pendant que le texte est encore invisible et l'effet est perdu. */
.legal-hero h1 mark,
.page-hero h1 mark {
  transition-delay: 1.05s;
}

/* La toute première section qui suit un page-hero est visible dès le
   chargement, en même temps que le rideau rouge de l'en-tête : sans ce
   décalage, son propre dynamisme d'arrivée démarrait pendant que le rideau
   jouait encore, et les deux animations se chevauchaient. On attend donc
   la fin du rideau + du titre (~1,6s) avant de lancer son reveal. */
.page-hero + section.reveal {
  transition-delay: 1.05s;
}

.page-hero + section.reveal .text-content > *,
.page-hero + section.reveal .plan-copy > * {
  transition-delay: calc(var(--entry-delay, 0ms) + 1.05s);
}

.page-hero + section.reveal .text-content > h2,
.page-hero + section.reveal .plan-copy > h2 {
  transition-delay: 1.05s;
}

.page-hero + section.reveal .section-figure img,
.page-hero + section.reveal .plan-map-wrap {
  transition-delay: 1.05s;
}

.page-hero + section.reveal h2 mark {
  transition-delay: 1.25s;
}

/* Même principe pour le récit du parc machines : son titre (Visite
   d'atelier) suit directement le page-hero et doit attendre le rideau. */
.page-hero + .machines-story .machines-story-head.reveal {
  transition-delay: 1.05s;
}

.page-hero + .machines-story .machines-story-head.reveal h2 mark {
  transition-delay: 1.25s;
}

@media (prefers-reduced-motion: reduce) {
  .section-kicker,
  .key-prefix,
  .contact-showcase h2 span {
    --tint-reveal: 1;
  }

  .reveal h1 mark,
  .reveal h2 mark {
    clip-path: none;
    transition: none;
  }

  .section-kicker::before,
  .machines-story-kicker::before,
  #plan .plan-kicker::after {
    transform: scaleX(1) !important;
  }
}

.engage-section {
  position: relative;
  background: #fff;
  box-shadow: none;
}

.engage-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  height: 72px;
  background: #fff;
  pointer-events: none;
}

/* Même correctif que .page-hero + .intro-section::before plus haut : cette
   bande déborde de 72px vers le haut et cachait le bas du texte du hero. */
.page-hero + .engage-section::before {
  content: none;
}

.split-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
}

.split-grid.reverse {
  grid-template-columns: 0.95fr 1.05fr;
}

.text-content h2 {
  margin: 0 0 24px;
  color: #202020;
  font-size: clamp(30px, 3vw, 56px);
  line-height: 1.2;
}

.text-content ul,
.text-content p {
  margin: 0;
  color: #5a5a5a;
  font-size: clamp(1.08rem, 1.2vw, 1.5rem);
  line-height: 1.45;
}

.text-content ul {
  padding-left: 26px;
}

.text-content li::marker {
  color: var(--c-teal);
}

/* Bulle de texte harmonisée entre la 1ère section de pieces-serie.html
   (.series-copy) et celle de pieces-unitaires.html (#pieces-unitaires
   .text-content) : padding/coins ici, le reste (fond/ombre/typo) est
   harmonisé plus bas avec le parc machines. */
#pieces-serie .series-copy,
#pieces-unitaires .text-content {
  padding: 42px 40px 34px;
  border-radius: 120px 120px 28px;
}

.button-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--c-mint);
  color: #fff;
  font-weight: 800;
  margin-top: 28px;
  gap: 10px;
  transition: transform 0.32s ease, box-shadow 0.32s ease, filter 0.32s ease, background-color 0.32s ease;
}

.button-pill::after {
  content: "→";
  display: inline-block;
  font-size: 1.08em;
  line-height: 1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.button-pill:hover,
.button-pill:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgb(225 22 22 / 26%);
  filter: brightness(1.03);
}

.button-pill:hover::after,
.button-pill:focus-visible::after {
  transform: translate3d(5px, 0, 0);
}

.pulse-target {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.click-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255 255 255 / 58%);
  pointer-events: none;
  animation: click-pulse 0.56s ease-out forwards;
}

.button-pill:active {
  transform: translateY(0) scale(0.985);
}

.section-figure {
  margin: 0;
  box-shadow: 0 10px 22px rgb(10 39 64 / 10%);
  border-radius: 22px;
  overflow: hidden;
}

.section-figure img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 22px;
  transform: translate3d(0, var(--media-parallax-y, 0), 0) scale(1.04);
  will-change: transform;
}

/* Savoir-faire : composition claire et très aérée comme sur la maquette fournie. */
.key-figures-section {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 8vw, 118px) 0 clamp(92px, 8vw, 124px);
  color: #2c313b;
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
}

.key-figures-wrap {
  position: relative;
  z-index: 1;
}

.key-figures-heading {
  display: grid;
  column-gap: clamp(34px, 7vw, 110px);
  row-gap: 18px;
  align-items: start;
  margin-bottom: clamp(34px, 4vw, 48px);
}

.key-figures-heading .section-kicker {
  grid-column: 1 / -1;
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.key-figures-heading h2 {
  margin: 0;
  max-width: 820px;
  color: #2c313b;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(2.35rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.06em;
}

.key-figures-heading h2 span {
  display: block;
  white-space: nowrap;
}

.key-figures-heading h2 mark {
  display: inline;
  padding: 0.02em 0.18em 0.08em;
  color: #fff;
  background: var(--c-teal);
  box-decoration-break: clone;
  /* stylelint-disable-next-line property-no-vendor-prefix -- requis par Safari, qui ne connaît que la version préfixée */
  -webkit-box-decoration-break: clone;
}

.key-figures-heading > p:last-child {
  margin: 10px 0 0;
  padding-top: clamp(12px, 1.7vw, 26px);
  color: var(--c-text);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 600;
  line-height: 1.6;
}

.key-figures-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #dde2e8;
  border-radius: 18px;
  overflow: hidden;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 24px 60px rgb(15 25 36 / 7%);
}

.key-figure-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(204px, 18vw, 248px);
  padding: clamp(28px, 2.8vw, 38px) clamp(24px, 2.8vw, 36px) clamp(24px, 2.5vw, 34px);
  background: rgb(255 255 255 / 88%);
  border-right: 1px solid #dde2e8;
  border-bottom: 1px solid #dde2e8;
  transition: transform 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease;
}

.key-figure-card:nth-child(3n) {
  border-right: 0;
}

.key-figure-card:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.key-figure-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.key-figure-card:hover {
  background: rgb(255 255 255 / 96%);
  box-shadow: inset 0 0 0 1px rgb(225 22 22 / 4%);
  transform: translateY(-2px);
}

.key-figure-card:hover::before,
.key-figures-section.is-visible .key-figure-card::before {
  transform: scaleX(1);
}

.key-figure-value {
  margin: 0;
  min-width: 0;
  color: #2c313b;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(3.1rem, 5vw, 5.9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.085em;
  font-variant-numeric: tabular-nums lining-nums;
}

.key-number {
  display: inline-block;
}

.key-prefix {
  font-size: 0.58em;
  letter-spacing: -0.03em;
}

.key-unit {
  color: #8b9099;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 0.28em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.key-figure-card h3 {
  margin: 30px 0 0;
  color: var(--c-text);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  font-weight: 600;
  line-height: 1.45;
}

.key-figures-section.reveal .key-figures-heading > *,
.key-figures-section.reveal .key-figure-card {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.key-figures-section.reveal .key-figures-heading > * {
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.key-figures-section.reveal .key-figures-heading h2 {
  clip-path: inset(0 0 100% 0);
  transition: opacity 1.05s ease, transform 1.25s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.key-figures-section.reveal .key-figures-heading > p:last-child {
  transition-delay: 280ms;
}

.key-figures-section.reveal .key-figure-card {
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.4s ease,
    box-shadow 0.4s ease;
  transition-delay: calc(220ms + (var(--figure-index, 0) * 140ms));
}

.key-figure-card:nth-child(1) { --figure-index: 0; }
.key-figure-card:nth-child(2) { --figure-index: 1; }
.key-figure-card:nth-child(3) { --figure-index: 2; }
.key-figure-card:nth-child(4) { --figure-index: 3; }
.key-figure-card:nth-child(5) { --figure-index: 4; }
.key-figure-card:nth-child(6) { --figure-index: 5; }

.key-figures-section.reveal.is-visible .key-figures-heading > *,
.key-figures-section.reveal.is-visible .key-figure-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.key-figures-section.reveal.is-visible .key-figures-heading h2 {
  clip-path: inset(0 0 0 0);
}

.key-figures-section.reveal {
  opacity: 0;
  transform: none;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.key-figures-section.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.text-content.dark,
.text-content.dark h2,
.text-content.dark ul {
  color: #353535;
}

#parc-machines .text-content.dark {
  background: #fff;
  padding: 42px 40px 34px;
  box-shadow: 0 20px 44px rgb(0 0 0 / 10%);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 120px 120px 120px 28px;
}

#parc-machines .text-content.dark h2 {
  color: #1f1f1f;
  font-size: clamp(1.55rem, 2.1vw, 2.4rem);
  margin-bottom: 18px;
}

#parc-machines .text-content.dark ul {
  color: #5a5a5a;
  font-size: clamp(0.98rem, 1.08vw, 1.2rem);
  line-height: 1.5;
}

.text-content.dark li::marker {
  color: var(--c-teal);
}

.focus-note {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(26px, 3vw, 36px) clamp(28px, 4vw, 48px);
  background: #fff;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgb(0 0 0 / 7%);
  color: #5a5a5a;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
}

.focus-note img {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

@media (width <= 540px) {
  .focus-note {
    flex-direction: column;
    text-align: center;
    padding: 22px 20px;
  }
}

.contact-showcase {
  width: min(100%, 1220px);
  min-height: 560px;
  margin: 0 auto;
  border-radius: 34px;
  padding: 60px 66px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 93%) 45%, rgb(255 255 255 / 52%) 68%, rgb(255 255 255 / 18%) 100%),
    url("assets/images/background-nous-contacter.webp") center / cover no-repeat;
  border: 1px solid rgb(0 0 0 / 8%);
  box-shadow:
    0 16px 40px rgb(0 0 0 / 14%),
    inset 0 0 0 1px rgb(225 22 22 / 3.5%);
}

.contact-showcase h2 {
  margin: 0;
  color: #0e1116;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.contact-showcase h2 span {
  display: inline-block;
}

.contact-form-section .wrap {
  width: min(calc(100% - 36px), 1220px);
  max-width: none;
}

/* Colonne texte + carte formulaire, cote a cote, sur le modele de la
   maquette de reference (eyebrow / titre / trait rouge / accroche /
   arguments a puces, puis la carte sombre du formulaire). */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
}

.contact-form-intro {
  max-width: 400px;
}

.contact-form-intro .about-intro {
  margin: 0;
  max-width: 340px;
}

.contact-divider {
  display: block;
  width: 48px;
  height: 3px;
  margin: 18px 0 16px;
  background: var(--c-teal);
}

.contact-perks {
  list-style: none;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #e2e0dc;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 340px;
}

.contact-perks li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #2a2a2a;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.contact-perks-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e0dc;
  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 25%);
}

.contact-perks-icon img {
  width: 16px;
  height: 16px;
}

@media (width <= 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-form-intro,
  .contact-form-intro .about-intro,
  .contact-perks {
    max-width: none;
  }
}

#formulaire.contact-form-section,
#formulaire.contact-form-section.decor-surface.decor-gray {
  background: #fff;
}

#formulaire.contact-form-section::after {
  opacity: 0.62;
  background-image:
    url("assets/decor/motif-points-rouges.svg"),
    url("assets/decor/motif-grand-cercle-fin.svg"),
    url("assets/decor/motif-repere-cible.svg"),
    url("assets/decor/motif-chevrons.svg"),
    url("assets/decor/motif-points-gris.svg");
  background-size: 128px, 280px, 96px, 100px, 120px;
  background-position:
    6% calc(10% + var(--decor-shift)),
    96% calc(82% - var(--decor-shift)),
    91% calc(12% + var(--decor-shift)),
    9% calc(78% - var(--decor-shift)),
    50% calc(92% + var(--decor-shift));
}

/* Carte de formulaire sombre, dans l'esprit atelier des sections
   page-hero / machines-story (même noir, même grain de points, même accent
   rouge) plutôt que la carte blanche précédente. */
.contact-form-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, #1c1e22 0%, #222428 100%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 28px;
  padding: clamp(30px, 3.4vw, 46px);
  box-shadow:
    0 30px 72px rgb(0 0 0 / 35%),
    0 0 0 1px rgb(225 22 22 / 10%) inset;
  color: #fff;
  will-change: transform, opacity;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 260px at 100% 0%, rgb(225 22 22 / 18%), transparent 70%),
    radial-gradient(1px 1px at center, rgb(255 255 255 / 10%) 1px, transparent 1.5px);
  background-size: auto, 26px 26px;
  pointer-events: none;
}

.contact-form-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / 6%);
  pointer-events: none;
}

.contact-form-card > * {
  position: relative;
  z-index: 1;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-form label {
  display: grid;
  gap: 9px;
  color: rgb(255 255 255 / 84%);
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-form label:nth-of-type(3),
.contact-form label:nth-of-type(4) {
  grid-column: 1 / -1;
}

.contact-form .contact-form-actions,
.contact-form-feedback {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 14px;
  background: rgb(255 255 255 / 7%);
  color: #fff;
  padding: 14px 16px;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease;
}

.contact-form input[name="name"],
.contact-form input[name="email"],
.contact-form input[name="phone"] {
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}

.contact-form input[name="name"] {
  background-image: url("assets/icons/account-outline-e11616.svg");
}

.contact-form input[name="email"] {
  background-image: url("assets/icons/email-outline-e11616.svg");
}

.contact-form input[name="phone"] {
  background-image: url("assets/icons/phone-outline-e11616.svg");
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgb(255 255 255 / 52%);
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: rgb(255 255 255 / 8%);
  border-color: rgb(225 22 22 / 55%);
  box-shadow: 0 0 0 3px rgb(225 22 22 / 16%);
}

.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.contact-form-actions .button-pill {
  margin-top: 0;
  min-height: 56px;
  padding: 0 clamp(24px, 2vw, 34px);
  border-radius: 14px;
  background: linear-gradient(135deg, #ec1717, #c90000);
  box-shadow: 0 10px 24px rgb(225 22 22 / 22%);
  font-size: 1.05rem;
}

.contact-form-feedback {
  min-height: 1.4em;
  margin: 6px 0 0;
  color: rgb(255 255 255 / 78%);
  font-weight: 600;
}

.contact-form-section.reveal .contact-form-card {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.985);
  transition:
    opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.contact-form-section.reveal.is-visible .contact-form-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.contact-form-section.reveal .contact-form-card label {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.contact-form-section.reveal.is-visible .contact-form-card label {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.contact-form-section.reveal .contact-form-card label:nth-of-type(1) { transition-delay: 160ms; }
.contact-form-section.reveal .contact-form-card label:nth-of-type(2) { transition-delay: 260ms; }
.contact-form-section.reveal .contact-form-card label:nth-of-type(3) { transition-delay: 360ms; }
.contact-form-section.reveal .contact-form-card label:nth-of-type(4) { transition-delay: 460ms; }
.contact-form-section.reveal .contact-form-card .contact-form-actions { transition-delay: 560ms; }
.contact-form-section.reveal .contact-form-card .contact-form-feedback { transition-delay: 640ms; }

.contact-form-card[data-intersection-scroll] {
  transform: translate3d(0, calc((1 - var(--intersection-reveal, 0)) * 26px), 0) scale(calc(0.988 + (var(--intersection-reveal, 0) * 0.012)));
  opacity: calc(0.58 + (var(--intersection-reveal, 0) * 0.42));
}

.plan-section {
  background: #fff;
  padding: 78px 0 84px;
  color: var(--c-text);
  position: relative;
  overflow: hidden;
  border-top: 0;
  box-shadow: none;
}

.plan-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  height: 72px;
  background: #fff;
  pointer-events: none;
}

.plan-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.plan-copy {
  max-width: 500px;
}

.plan-kicker {
  margin: 0 0 16px;
  color: var(--c-text);
  font-size: 0.98rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.plan-copy h2 {
  margin: 0 0 18px;
  color: #202020;
  font-size: clamp(2rem, 3vw, 3.35rem);
  line-height: 1.30;
}

.plan-lead {
  margin: 0;
  color: #5a5a5a;
  font-size: 1.08rem;
  line-height: 1.65;
}

.plan-details {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.plan-details p {
  margin: 0;
  color: #5a5a5a;
  font-size: 1rem;
  line-height: 1.65;
}

.plan-details strong {
  color: #202020;
}

.plan-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.plan-actions .button-pill {
  margin-top: 0;
}

.plan-media {
  display: grid;
  gap: 20px;
}

.plan-devanture {
  margin: 0;
  background: linear-gradient(160deg, #fff 0%, #f4f4f4 100%);
  padding-bottom: 22px;
}

.plan-devanture img {
  max-height: 260px;
}

.plan-devanture figcaption {
  margin: 10px 22px 0;
  color: var(--c-text);
  font-size: 0.92rem;
}

.plan-map-wrap {
  background: #fff;
  border-radius: 28px;
  padding: 14px;
  box-shadow: 0 24px 54px rgb(0 0 0 / 10%);
  border: 1px solid rgb(0 0 0 / 12%);
}

.plan-map {
  display: block;
  width: 100%;
  min-height: 430px;
  border: 0;
  border-radius: 20px;
  filter: saturate(0.94) contrast(1.04);
  margin-top: 45px;
}

.social-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--c-teal);
  font-weight: 800;
  text-transform: lowercase;
  border: 2px solid var(--c-teal);
}

.footer {
  position: relative;
  overflow: hidden;
  padding: 0 0 16px;
  color: var(--c-text);
  background:
    linear-gradient(
      180deg,
      #fbfbfc 0%,
      #f8f8f9 45%,
      #f6f6f7 100%
    );
  border-top: 0;
  box-shadow: 0 -10px 28px rgb(20 24 28 / 6%);
  isolation: isolate;
  padding-bottom: 10px;
}

.footer::before {
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  height: 72px;
  background: #fff;
  pointer-events: none;
  content: none;
}

/* Fin trait rouge qui se dessine en haut du footer au scroll (jamais au
   chargement, piloté par .reveal.is-visible comme le reste du site). */
.footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 120ms;
  pointer-events: none;
}

.footer.reveal.is-visible::after {
  transform: scaleX(1);
}

.footer-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: none;
}

.footer-logo-wrap img {
  display: block;
  width: 220px;
  max-width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
  filter: none;
}

.footer-logo-wrap {
  align-items: center;
  border-radius: 0;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}

.footer-head-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-head-actions .button-pill {
  margin: 0;
  color: #fff;
}

.footer-main {
  display: grid;
  grid-template-columns:
    minmax(250px, 1.42fr)
    minmax(160px, 0.88fr)
    minmax(180px, 0.92fr)
    minmax(220px, 1fr);
  align-items: start;
  gap: clamp(42px, 5.6vw, 92px);
  padding-top: 42px;
  padding-bottom: 40px;
  border-bottom: 0;
}

/* Arrivée du footer au scroll, dans la continuité du reste du site : le
   footer garde son fondu/montée générique (.reveal), et ses colonnes
   arrivent en plus en cascade (même easing que .intro-copy > * ailleurs). */
.footer.reveal .footer-main > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer.reveal.is-visible .footer-main > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.footer.reveal .footer-main > *:nth-child(1) {
  transition-delay: 0ms;
}

.footer.reveal .footer-main > *:nth-child(2) {
  transition-delay: 90ms;
}

.footer.reveal .footer-main > *:nth-child(3) {
  transition-delay: 180ms;
}

.footer.reveal .footer-main > *:nth-child(4) {
  transition-delay: 270ms;
}

.footer h3 {
  position: relative;
  margin: 7px 0 32px;
  padding-bottom: 17px;
  color: #202020;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer p,
.footer li,
.footer a {
  margin: 0;
  color: var(--c-text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}

.legal {
  position: relative;
  padding-top: 12px;
  min-height: 45px;
  margin-top: -40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.86rem;
  z-index: 1;
}

.legal div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sticky-actions {
  position: fixed;
  z-index: 50;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 26px rgb(225 22 22 / 28%);
}

.sticky-actions a {
  width: 82px;
  height: 86px;
  display: grid;
  place-items: center;
  gap: 6px;
  background: var(--c-teal);
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
}

.sticky-actions img {
  width: 30px;
  height: 30px;
}

.sticky-actions span {
  font-size: 0.72rem;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.982);
  transition:
    opacity 1.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal .text-content > *,
.reveal .plan-copy > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--entry-delay, 0ms) + 180ms);
  will-change: opacity, transform;
}

.reveal .text-content > h2,
.reveal .plan-copy > h2 {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1.05s ease,
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible .text-content > *,
.reveal.is-visible .plan-copy > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal.is-visible .text-content > h2,
.reveal.is-visible .plan-copy > h2 {
  clip-path: inset(0 0 0 0);
}

.reveal .text-content > *:nth-child(1),
.reveal .plan-copy > *:nth-child(1) {
  --entry-delay: 0ms;
}

.reveal .text-content > *:nth-child(2),
.reveal .plan-copy > *:nth-child(2) {
  --entry-delay: 160ms;
}

.reveal .text-content > *:nth-child(3),
.reveal .plan-copy > *:nth-child(3) {
  --entry-delay: 320ms;
}

.reveal .text-content > *:nth-child(4),
.reveal .plan-copy > *:nth-child(4) {
  --entry-delay: 480ms;
}

.reveal .text-content > *:nth-child(5),
.reveal .plan-copy > *:nth-child(5) {
  --entry-delay: 640ms;
}

.reveal .section-figure img,
.reveal .plan-map-wrap {
  opacity: 0;
  transform: translate3d(0, calc(28px + var(--media-parallax-y, 0px)), 0) scale(1.12) rotate(3deg);
  transition:
    opacity 2.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.25s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2.1s cubic-bezier(0.16, 1, 0.3, 1);
  filter: saturate(0.94) contrast(1.03);
  will-change: opacity, transform, filter;
}

.reveal.is-visible .section-figure img,
.reveal.is-visible .plan-map-wrap {
  opacity: 1;
  transform: translate3d(0, var(--media-parallax-y, 0), 0) scale(1) rotate(0deg);
  filter: saturate(1) contrast(1);
}

.word-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}

.word-reveal > * {
  display: inline-block;
  transform: translate3d(0, 130%, 0) rotate(10deg);
  transition: transform 1.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(420ms + (var(--word-index, 0) * 85ms));
}

.reveal.is-visible .word-reveal > * {
  transform: translate3d(0, 0, 0) rotate(0deg);
}

@keyframes click-pulse {
  from {
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(16);
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal .text-content > *,
.reveal .plan-copy > *,
.engage-section.reveal .text-content,
.engage-section.reveal .section-figure,
.plan-section.reveal .plan-copy,
.plan-section.reveal .plan-map-wrap,
.reveal .section-figure img,
.reveal .plan-map-wrap,
.key-figures-section.reveal .key-figures-heading > *,
.key-figures-section.reveal .key-figure-card,
.footer.reveal .footer-main > *,
.footer-brand-rule,
.footer::after {
    opacity: 1;
    transform: none;
    transition: none;
    filter: none;
    clip-path: none;
  }

  .hero-video-bg,
  .section-figure img,
  .plan-map-wrap {
    transform: none;
  }
}

body.legal-page {
  background: #fff;
}

.legal-main {
  background: #fff;
}

.legal-header-main {
  min-height: 96px;
}

.legal-back-btn {
  margin-left: auto;
  margin-top: 0;
}

.legal-hero,
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(170deg, var(--c-deep) 0%, var(--c-deep-2) 100%);
  padding: 54px 0 46px;
  color: #fff;
}

/* Rideau rouge qui balaie l'en-tête de gauche à droite puis se lève pour
   révéler le fond noir : déclenché par .is-visible (ajouté par l'observer
   au chargement, immédiat ici puisque l'en-tête est tout en haut de page). */
.legal-hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, #a80710, var(--c-teal) 60%);
  clip-path: inset(0 100% 0 0);
}

.legal-hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 25%) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 100% 0;
  clip-path: inset(0 100% 0 0);
}

.legal-hero::before,
.reveal.is-visible.page-hero::before {
  animation:
    hero-curtain-wipe 0.55s cubic-bezier(0.6, 0, 0.3, 1) 0.03s forwards,
    hero-curtain-lift 0.36s cubic-bezier(0.6, 0, 0.3, 1) 0.68s forwards;
}

.legal-hero::after,
.reveal.is-visible.page-hero::after {
  animation:
    hero-curtain-wipe 0.55s cubic-bezier(0.6, 0, 0.3, 1) 0.03s forwards,
    hero-curtain-sheen 0.55s ease 0.03s forwards;
}

@keyframes hero-curtain-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hero-curtain-lift {
  to { clip-path: inset(0 0 100% 0); }
}

@keyframes hero-curtain-sheen {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}

.legal-hero-inner,
.page-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.legal-kicker,
.page-kicker {
  margin: 0;
  color: rgb(255 255 255 / 72%);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(14px);
}

.legal-hero h1,
.page-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.08;
  opacity: 0;
  transform: translateY(18px);
}

.legal-hero p,
.page-hero p {
  margin: 0;
  max-width: 820px;
  color: rgb(255 255 255 / 86%);
  font-size: 1.06rem;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(14px);
}

.legal-hero .legal-kicker,
.page-hero.reveal.is-visible .page-kicker {
  animation: hero-content-rise 0.36s ease 0.75s forwards;
}

.legal-hero h1,
.page-hero.reveal.is-visible h1 {
  animation: hero-content-rise 0.4s ease 0.82s forwards;
}

.legal-hero p,
.page-hero.reveal.is-visible p {
  animation: hero-content-rise 0.36s ease 0.9s forwards;
}

@keyframes hero-content-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-hero::before,
  .page-hero::before,
  .legal-hero::after,
  .page-hero::after {
    animation: none !important;
    clip-path: inset(0 0 100% 0) !important;
  }

  .legal-kicker,
  .page-kicker,
  .legal-hero h1,
  .page-hero h1,
  .legal-hero p,
  .page-hero p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.legal-section {
  padding-top: 68px;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.section-kicker + h2 + .legal-grid {
  margin-top: clamp(24px, 3vw, 36px);
}

.legal-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  border: 1px solid rgb(0 0 0 / 12%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 8%);
}

.legal-card.wide {
  grid-column: 1 / -1;
}

.legal-card h2,
.legal-card h3 {
  margin: 0 0 16px;
  color: #222;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.legal-stack {
  display: grid;
  gap: 14px;
}

.legal-stack p {
  margin: 0;
  color: #5a5a5a;
  font-size: 1rem;
  line-height: 1.6;
}

.legal-stack strong {
  display: inline-block;
  margin-bottom: 2px;
  color: #222;
}

.legal-stack a {
  color: var(--c-deep-2);
  font-weight: 700;
}

.legal-note {
  color: var(--c-text);
  font-size: 0.96rem;
}

/* Trio d'arguments de fin de page (pieces-serie.html / pieces-unitaires.html) :
   grille à 3 colonnes fixes (jamais d'orpheline en 2e ligne), carte à icône
   avec entrée animée en cascade au scroll, cf. le même principe que
   .key-figure-card plus haut (--feature-index pilote le délai). */
.feature-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  margin-top: 28px;
}

/* Même rail technique que .overview-grid sur l'accueil, pour que les trios
   de "bulles" des pages Pièces de série / Pièces unitaires suivent le même
   langage visuel plutôt que de rester un bloc de cartes isolé. */
.feature-grid::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 2%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgb(225 22 22 / 45%) 12%, rgb(225 22 22 / 45%) 88%, transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.9s ease 0.15s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.reveal.is-visible .feature-grid::before {
  opacity: 1;
  transform: scaleX(1);
}

.feature-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: clamp(28px, 2.8vw, 36px) clamp(24px, 2.4vw, 30px);
  border: 1px solid rgb(0 0 0 / 10%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 8%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}

.feature-card-index {
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgb(0 0 0 / 16%);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgb(225 22 22 / 30%);
  box-shadow: 0 26px 54px rgb(0 0 0 / 14%);
}

.feature-card-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #e11616 0%, #a80f0f 100%);
  box-shadow: 0 10px 22px rgb(225 22 22 / 30%);
}

.feature-card-icon img {
  width: 26px;
  height: 26px;
}

.feature-card h2 {
  margin: 0 0 12px;
  color: #1f1f1f;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.2;
}

.feature-card p {
  margin: 0;
  color: #5a5a5a;
  font-size: 1rem;
  line-height: 1.6;
}

/* Glissade + rotation + zoom + flou, une carte de chaque côté et celle du
   milieu qui remonte comme une bulle — même langage que les autres
   sections .reveal du site, adapté à 3 éléments plutôt qu'à un duo
   photo/texte, avec les mêmes courbes et durées. */
.reveal .feature-card {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity 1.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
  transition-delay: calc(120ms + (var(--feature-index, 0) * 160ms));
  will-change: opacity, transform, filter;
}

.reveal.is-visible .feature-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  filter: blur(0);
}

.reveal.is-visible .feature-card:hover {
  transform: translateY(-6px);
}

.feature-card:nth-child(1) {
  --feature-index: 0;

  transform: translate3d(clamp(-220px, -14vw, -90px), 36px, 0) rotate(-6deg) scale(0.94);
}

.feature-card:nth-child(2) {
  --feature-index: 1;

  transform: translate3d(0, 90px, 0) rotate(3deg) scale(0.94);
}

.feature-card:nth-child(3) {
  --feature-index: 2;

  transform: translate3d(clamp(90px, 14vw, 220px), 36px, 0) rotate(6deg) scale(0.94);
}

/* Le surlignage rouge du titre « éclôt » juste après la carte elle-même,
   pour ne pas retomber avant que la carte ne soit visible. */
.reveal .feature-card h2 mark {
  transition-delay: calc(560ms + (var(--feature-index, 0) * 150ms));
}

@media (width <= 900px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .feature-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (width <= 1250px) {
  .header-main {
    padding: 14px 0;
    min-height: initial;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .brand img {
    width: 178px;
    max-height: 40px;
  }

  .hero-layout,
  .split-grid,
  .split-grid.reverse,
  .plan-grid,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .split-grid,
  .split-grid.reverse {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .section {
    padding: 84px 0;
  }

  .split-grid .text-content {
    order: 1;
  }

  .split-grid .section-figure {
    order: 2;
  }

  #pieces-unitaires .text-content {
    border-radius: 60px;
    padding: 30px 26px 24px;
  }

  .contact-showcase {
    min-height: 500px;
    border-radius: 26px;
    padding: 50px 42px;
    background-position: 58% center;
  }

  .contact-showcase h2 {
    font-size: clamp(2.05rem, 4.2vw, 3.5rem);
  }

  .plan-grid {
    gap: 30px;
  }

  .plan-copy {
    max-width: none;
  }

  .plan-map {
    min-height: 380px;
  }

  .footer-head {
    gap: 18px;
    align-items: flex-start;
  }

  .footer-head-actions {
    flex-wrap: wrap;
  }

  .sticky-actions {
    display: none;
  }

  .decor-surface::after {
    opacity: 0.22;
  }

  .legal-page .header-main {
    flex-direction: row;
    align-items: center;
  }
}

@media (width <= 1024px) {
  .wrap {
    width: min(calc(100% - 28px), var(--max));
  }

  .hero {
    padding: 26px 0 24px;
  }

  .hero-layout {
    gap: 12px;
  }

  .section {
    padding: 44px 0;
  }

  .split-grid,
  .split-grid.reverse,
  .plan-grid,
  .footer-main {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark {
    padding: 36px 34px 30px;
  }

  .split-grid {
    gap: 30px;
  }

  .plan-grid {
    gap: 26px;
  }

  .plan-copy {
    max-width: none;
  }

  .plan-map {
    min-height: 260px;
  }

  .contact-showcase {
    padding: 44px 38px;
    min-height: 420px;
  }

  .footer-main {
    gap: 22px;
  }

  .footer-head {
    gap: 16px;
  }
}

@media (width <= 980px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-card.wide {
    grid-column: auto;
  }
}

@media (width <= 760px) {
  html {
    scroll-padding-top: 96px;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgb(255 255 255 / 98%);
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .wrap {
    width: min(calc(100% - 16px), var(--max));
  }

  .header-main {
    padding: 12px 0;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
  }

  .brand img {
    width: 156px;
    max-height: 36px;
  }

  .primary-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
    padding: 10px 12px 6px;
    margin-top: 4px;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 18px;
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 14px 28px rgb(0 0 0 / 8%);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav a {
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
  }

  .primary-nav a::after {
    content: none;
  }

  .engage-section.reveal .text-content {
    transform: translate3d(-34px, 0, 0) scale(0.985);
  }

  .engage-section.reveal .section-figure {
    transform: translate3d(34px, 0, 0) scale(0.985);
  }

  .engage-section.reveal .split-grid.reverse .text-content {
    transform: translate3d(34px, 0, 0) scale(0.985);
  }

  .engage-section.reveal .split-grid.reverse .section-figure {
    transform: translate3d(-34px, 0, 0) scale(0.985);
  }

  .engage-section.reveal.is-visible .split-grid.reverse .text-content,
  .engage-section.reveal.is-visible .split-grid.reverse .section-figure {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .plan-section.reveal .plan-copy {
    transform: translate3d(-28px, 0, 0) scale(0.985);
  }

  .plan-section.reveal .plan-map-wrap {
    transform: translate3d(28px, 0, 0) scale(0.985);
  }

  #parc-machines .text-content.dark {
    border-radius: 22px;
  }

  .contact-showcase {
    border-radius: 18px;
    background:
      linear-gradient(90deg, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 92%) 60%, rgb(255 255 255 / 52%) 100%),
      url("assets/images/background-nous-contacter.webp") 72% center / cover no-repeat;
    background-position: 70% center;
    min-height: 0;
    padding: 18px 12px;
  }

  .contact-showcase h2 {
    font-size: clamp(1.18rem, 5.6vw, 1.5rem);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .plan-copy h2 {
    font-size: clamp(1.1rem, 5.4vw, 1.42rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .decor-surface::after {
    background-size: 66px, 150px, 168px, 10px, 124px, 62px, 48px;
    opacity: 0;
  }

  #pieces-unitaires .text-content {
    border-radius: 22px;
    padding: 20px 14px 16px;
  }

  .split-grid,
  .plan-grid {
    gap: 12px;
  }

  .split-grid .section-figure {
    margin-top: 8px;
  }

  .contact-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form-actions .button-pill,
  .plan-actions .button-pill {
    width: 100%;
  }

  .section {
    padding: 30px 0;
  }

  .legal-hero,
  .page-hero {
    padding: 36px 0 30px;
  }

  .legal-section {
    padding-top: 36px;
  }

  .legal-card {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .plan-section {
    padding: 34px 0 42px;
  }

  .split-grid.reverse .text-content {
    order: 1;
  }

  .split-grid.reverse .section-figure {
    order: 2;
  }

  .text-content h2 {
    font-size: clamp(1.02rem, 5.1vw, 1.34rem);
    margin-bottom: 8px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .text-content h2 mark,
.plan-copy h2 mark,
.contact-showcase h2 mark {
    display: inline;
    line-height: 1.08;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.01em 0.1em 0.06em;
    font-size: 0.88em;
  }

  .text-content ul,
  .plan-lead {
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .text-content ul {
    padding-left: 16px;
  }

  .plan-details {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .plan-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .plan-map-wrap {
    padding: 8px;
    border-radius: 16px;
  }

  .plan-map {
    min-height: 220px;
    border-radius: 12px;
  }

  .footer-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
  }

  .footer-logo-wrap img {
    width: 136px;
  }

  .footer-head-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding-bottom: 14px;
    gap: 14px;
  }

  .footer {
    padding: 20px 0 10px;
  }

  .footer h3 {
    margin-bottom: 6px;
  }

  .footer p,
  .footer li,
  .footer a {
    font-size: 0.93rem;
  }

  .legal {
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 10px;
  }
}

/* Finitions de lisibilite et d'accessibilite */
::selection {
  background: rgb(225 22 22 / 20%);
  color: #181818;
}

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid rgb(225 22 22 / 42%);
  outline-offset: 3px;
}

/* Filet rouge sobre pour mieux detacher les principales bulles du fond. */
:where(
  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark,
  .contact-showcase,
  .legal-card,
  .contact-form-card
) {
  border-color: rgb(177 25 25 / 30%);
  box-shadow:
    0 20px 44px rgb(0 0 0 / 10%),
    inset 0 0 0 1px rgb(225 22 22 / 3.5%);
}

@media (width <= 760px) {
  :where(
    #pieces-unitaires .text-content,
    #parc-machines .text-content.dark,
    .contact-showcase
  ) {
    border-color: rgb(177 25 25 / 38%);
    box-shadow:
      0 12px 28px rgb(0 0 0 / 10%),
      inset 0 0 0 1px rgb(225 22 22 / 5%);
  }
}

/* Adaptation finale de la grille de chiffres aux paliers du site. */
@media (width <= 1024px) {
  .key-figures-section.section {
    padding: 54px 0;
  }

  .key-figures-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 30px;
  }

  .key-figures-heading .section-kicker {
    margin-bottom: 0;
  }

  .key-figures-heading > p:last-child {
    max-width: 640px;
    margin-top: 0;
    padding-top: 0;
  }

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

  .key-figure-card {
    padding: 24px 20px 20px;
    min-height: 186px;
  }
}

@media (width <= 760px) {
  .key-figures-section.section {
    padding: 64px 0;
    overflow: hidden;
  }

  .key-figures-heading {
    margin-bottom: 24px;
  }

  .key-figures-heading h2 {
    font-size: clamp(2.35rem, 8.8vw, 3.35rem);
    line-height: 0.98;
  }

  .key-figure-card {
    min-height: 172px;
    padding: 24px 20px 22px;
  }

  .key-figure-value {
    font-size: clamp(2.6rem, 11vw, 4rem);
  }

  .key-figure-card h3 {
    margin-top: 18px;
    font-size: 0.9rem;
  }

  .key-figures-section.reveal .key-figures-heading > *,
  .key-figures-section.reveal .key-figure-card {
    transform: translate3d(0, 16px, 0);
  }

  .key-figures-section.reveal.is-visible .key-figures-heading > *,
  .key-figures-section.reveal.is-visible .key-figure-card {
    transform: translate3d(0, 0, 0);
  }
}

@media (width <= 540px) {
  .key-figures-section.section {
    padding: 42px 0;
  }

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

  .key-figure-card {
    min-height: 162px;
    padding: 22px 16px 18px;
  }

  .key-figure-value {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

}

@media (width <= 480px) {
  .wrap {
    width: min(calc(100% - 18px), var(--max));
  }

  .header-main {
    padding: 10px 0;
    gap: 6px;
  }

  .brand img {
    width: 146px;
    max-height: 34px;
  }

  .menu-toggle {
    padding: 9px 14px;
    font-size: 0.9rem;
  }

  .hero {
    padding: 8px 0 12px;
  }

  .hero-copy h1 {
    font-size: clamp(1.22rem, 6.4vw, 1.52rem);
  }

  .plan-copy h2 {
    font-size: clamp(1rem, 5vw, 1.24rem);
  }

  .split-grid .section-figure {
    margin-top: 10px;
  }

  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark {
    padding: 16px 10px 12px;
  }

  #parc-machines .text-content.dark {
    border-radius: 22px;
  }

  .text-content h2 {
    font-size: clamp(0.98rem, 5vw, 1.22rem);
    margin-bottom: 8px;
  }

  #parc-machines .text-content.dark h2,
  #pieces-unitaires .text-content h2 {
    font-size: clamp(0.98rem, 5vw, 1.22rem);
  }

  .button-pill {
    min-height: 50px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .contact-showcase {
    min-height: 312px;
    padding: 16px 10px;
  }

  .contact-showcase h2 {
    font-size: clamp(0.98rem, 5vw, 1.22rem);
  }

  .plan-map {
    min-height: 210px;
  }

  .footer {
    padding: 32px 0 18px;
  }

  .footer h3 {
    font-size: 0.98rem;
  }

  .footer p,
  .footer li,
  .footer a {
    font-size: 0.9rem;
  }

  .legal {
    gap: 8px;
  }
}

@media (width <= 390px) {
  .wrap {
    width: min(calc(100% - 16px), var(--max));
  }

  .brand img {
    width: 136px;
    max-height: 32px;
  }

  .menu-toggle {
    padding: 8px 12px;
  }

  .primary-nav {
    padding: 8px 10px 4px;
  }

  .primary-nav a {
    padding: 12px 0;
    font-size: 14px;
  }

  .hero-copy h1 {
    font-size: clamp(1.08rem, 6vw, 1.32rem);
    line-height: 1.04;
  }

  .metiers-list {
    margin-top: 12px;
    gap: 6px 8px;
    grid-template-columns: 1fr;
  }

  .split-grid .section-figure {
    margin-top: 10px;
  }

  .metier-item {
    grid-template-columns: 40px 1fr;
    min-height: 40px;
    font-size: 12px;
    line-height: 1.18;
  }

  .icon-wrap {
    width: 40px;
    height: 40px;
  }

  .icon-wrap img {
    width: 18px;
    height: 18px;
  }

  .contact-showcase {
    min-height: 276px;
    padding: 14px 9px;
  }

  .contact-showcase h2 {
    font-size: clamp(0.9rem, 4.8vw, 1.08rem);
  }

  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark {
    padding: 15px 10px 12px;
  }

  #parc-machines .text-content.dark {
    border-radius: 22px;
  }

  .text-content h2 {
    font-size: clamp(0.92rem, 4.8vw, 1.1rem);
    margin-bottom: 8px;
  }

  .plan-copy h2 {
    font-size: clamp(0.92rem, 4.8vw, 1.1rem);
  }

  .section {
    padding: 34px 0;
  }

  .plan-section {
    padding: 30px 0 38px;
  }

  .plan-map {
    min-height: 200px;
  }

  #parc-machines .text-content.dark h2 {
    font-size: clamp(0.92rem, 4.8vw, 1.1rem);
    line-height: 1.06;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #pieces-unitaires .text-content h2 {
    font-size: clamp(0.92rem, 4.8vw, 1.1rem);
    line-height: 1.06;
  }

  .footer-head-actions {
    gap: 8px;
  }

  .footer-main {
    gap: 12px;
  }

  .legal {
    font-size: 0.9rem;
  }
}

@media (width <= 1024px) {
  .header-main {
    gap: 10px;
  }

  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark,
  .contact-showcase {
    width: 100%;
    padding: 28px 22px 22px;
    border-radius: 28px;
  }

  .split-grid .section-figure,
  .split-grid.reverse .section-figure {
    width: 100%;
    margin: 0;
    min-height: 260px;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }

  .text-content h2,
.plan-copy h2,
.contact-showcase h2 {
    line-height: 1.08;
  }

  .plan-section {
    padding: 34px 0 42px;
  }
}

@media (width <= 760px) {
  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark,
  .contact-showcase {
    padding: 18px 12px 16px;
    border-radius: 22px;
  }

  .split-grid .section-figure,
  .split-grid.reverse .section-figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }

  .split-grid,
  .split-grid.reverse,
  .plan-grid,
  .footer-main {
    gap: 12px;
  }
}

@media (width <= 760px) {
  .hero,
  .section,
  .plan-section,
  .footer {
    overflow: visible;
  }

  .split-grid,
  .split-grid.reverse,
  .plan-grid,
  .footer-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark,
  .contact-showcase {
    width: 100%;
    border-radius: 22px;
    padding: 18px 12px 16px;
  }

  .section-figure img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }

  .split-grid .text-content,
  .split-grid.reverse .text-content {
    order: 1;
  }

  .split-grid .section-figure,
  .split-grid.reverse .section-figure {
    order: 2;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 22px;
  }

  .section-figure {
    width: 100%;
  }

#parc-machines .text-content.dark h2,
#pieces-unitaires .text-content h2,
.text-content h2,
.plan-copy h2,
.contact-showcase h2 {
    font-size: clamp(1.02rem, 5.2vw, 1.35rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .text-content ul,
  .plan-lead {
    font-size: 0.92rem;
    line-height: 1.42;
  }

  .text-content ul,
  .plan-details p,
  .footer p,
  .footer li,
  .footer a {
    font-size: 0.9rem;
  }
}

/* Priorités finales du nouveau header/hero après les paliers historiques. */
@media (width >= 1251px) {
  .header-main,
  .header.is-scrolled .header-main {
    width: calc(100% - 56px);
    max-width: none;
    min-height: 112px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(24px, 2.5vw, 42px);
  }

  .primary-nav {
    min-height: 66px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    padding: 0 14px;
    width: 100%;
    max-width: 990px;
    justify-self: center;
  }

  .primary-nav a {
    min-height: 66px;
    padding-inline: clamp(14px, 1.2vw, 24px);
  }
}

.hero .metiers-list {
  width: min(880px, 100%);
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}

.hero .metier-item {
  min-width: 0;
  min-height: 164px;
  padding: 0 15px;
  display: flex;
  grid-template-columns: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-size: clamp(0.78rem, 0.84vw, 0.96rem);
  line-height: 1.42;
  text-align: center;
}

.hero .metier-item > span:last-child {
  max-width: 130px;
  align-self: auto;
}

.hero .icon-wrap {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  border-radius: 0;
}

.hero .icon-wrap img {
  width: 38px;
  height: 38px;
}

@media (width <= 1250px) {
  .hero .metiers-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
    width: 100%;
    margin-left: 0;
  }
}

@media (width <= 760px) {
  .hero .metiers-list {
    margin-top: 38px;
    gap: 24px 0;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 50%));
    overflow: hidden;
  }

  .hero .metier-item {
    min-height: 140px;
    padding: 0 10px;
    display: flex;
    grid-template-columns: none;
    gap: 13px;
    font-size: 0.78rem;
    width: 100%;
    padding-inline: 6px;
  }

  .hero .icon-wrap {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .hero .icon-wrap img {
    width: 30px;
    height: 30px;
  }
}

/* Sur téléphone (contrairement aux tablettes ~760px), la liste des 6
   métiers prenait beaucoup de hauteur avant d'atteindre "Découvrir
   l'atelier" : resserré sans rien retirer, pour un premier écran plus
   dynamique au scroll. */
@media (width <= 480px) {
  .hero-content {
    padding-top: 40px;
  }

  .hero .metiers-list {
    margin-top: 26px;
    gap: 14px 0;
  }

  .hero .metier-item {
    min-height: 104px;
    gap: 9px;
  }

  .hero .icon-wrap {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .hero .icon-wrap img {
    width: 24px;
    height: 24px;
  }
}

@media (width >= 1251px) {
  .hero-content {
    padding-top: clamp(145px, 17vh, 180px);
  }

  .hero .metiers-list {
    width: min(920px, calc(100% + 40px));
    margin-left: -40px;
  }

  .hero .icon-wrap {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
  }

  .hero-video-bg {
    object-position: right center;
  }
}

@media (width <= 760px) {
  .hero-content,
  .hero .metiers-list,
  .hero .metier-item {
    min-width: 0;
    max-width: 100%;
  }

  .hero-copy h1 span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
  }

  .hero .metier-item > span:last-child {
    max-width: 135px;
    overflow-wrap: anywhere;
  }
}

@media (width <= 1024px) {
  .key-figures-section {
    padding: 70px 0 80px;
  }
}

@media (width <= 760px) {
  .key-figures-section {
    padding: 58px 0 64px;
  }

  .key-figures-heading > p:last-child {
    font-size: 1rem;
    line-height: 1.55;
  }

  .key-figures-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 540px) {
  .key-figures-section {
    padding: 50px 0 56px;
  }

  .key-figures-heading h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .key-figure-card h3 {
    margin-top: 16px;
    font-size: 0.82rem;
  }
}

/* Overrides finaux pour les deux points signalés. */

#pieces-serie .series-figure,
#pieces-unitaires .section-figure,
#parc-machines .section-figure {
  position: relative;
  z-index: 2;
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  border-radius: 30px;
}

#pieces-serie .series-figure::before,
#parc-machines .section-figure::before,
#pieces-unitaires .section-figure::before {
  content: "";
  position: absolute;
  inset: 28px -14px -14px -18px;
  border-left: 1.5px solid rgb(225 22 22 / 75%);
  border-bottom: 1.5px solid rgb(225 22 22 / 75%);
  border-top: 0;
  border-right: 0;
  border-radius: 30px 0 30px 30px;
  pointer-events: none;
}

#pieces-serie .series-figure::before,
#pieces-unitaires .section-figure::before {
  inset: 28px -18px -14px -14px;
  border-left: 0;
  border-right: 1.5px solid rgb(225 22 22 / 75%);
  border-radius: 0 30px 30px;
}

/* Même liseré rouge sur les sections en layout inversé (photo à gauche,
   cf. .split-grid.reverse) : "Doosan Puma 4100" (pieces-serie.html) et
   "Exemple de réalisation" (pieces-unitaires.html) — la photo y est à
   gauche, donc la variante "par défaut" du cadre (bord gauche/bas).
   Ces deux photos rejouaient aussi leur glissade d'entrée (et donc le
   cadre qui se retrouvait décalé/penché le temps de l'anim) à chaque
   fois qu'on les recroisait en remontant après un rechargement en cours
   de page — même bug que les premières sections, même correctif : on
   neutralise leur dynamisme d'entrée pour de bon. */
.split-grid.reverse .section-figure {
  position: relative;
  z-index: 2;
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  border-radius: 30px;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.split-grid.reverse .section-figure::before {
  content: "";
  position: absolute;
  inset: 28px -14px -14px -18px;
  border-left: 1.5px solid rgb(225 22 22 / 75%);
  border-bottom: 1.5px solid rgb(225 22 22 / 75%);
  border-top: 0;
  border-right: 0;
  border-radius: 30px 0 30px 30px;
  pointer-events: none;
}

.split-grid.reverse .section-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 28px;
  box-shadow: 0 18px 42px rgb(0 0 0 / 22%);
}

#pieces-serie .series-figure img,
#pieces-unitaires .section-figure img,
#parc-machines .section-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 18px 42px rgb(0 0 0 / 22%);
}

@media (width <= 760px) {
  #pieces-serie .series-figure::before,
  #pieces-unitaires .section-figure::before,
  #parc-machines .section-figure::before,
  .split-grid.reverse .section-figure::before {
    inset: 18px -10px -10px;
    border-width: 1.25px;
  }

  #pieces-serie .series-figure::before,
  #pieces-unitaires .section-figure::before {
    inset: 18px -10px -10px;
  }
}

/* Grille d'aperçus de l'accueil (Pièces de série / Pièces unitaires / Parc machines / À propos). */

/* Alignée sur la même largeur que .hero-layout (le bloc "Usinage de pièces
   mécaniques" etc. au-dessus) plutôt que le .wrap standard, pour que la
   grille démarre et finisse pile au même niveau que la liste de métiers.
   Uniquement au-delà de 1024px : en dessous, la grille passe en 2 puis 1
   colonne et l'alignement au pixel près compte moins que les marges. */
@media (width > 1024px) {
  #apercu.section > .wrap {
    width: min(80%, 1340px);
    max-width: none;
  }
}

.overview-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: clamp(46px, 5vw, 60px);
}

/* Rail technique horizontal, en écho au fil rouge du parc machines : une
   ligne qui se trace au scroll juste au-dessus des cartes, pour donner un
   petit côté "feuille de route" futuriste sans aller jusqu'au scroll pinné. */
.overview-grid::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 2%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgb(225 22 22 / 45%) 12%, rgb(225 22 22 / 45%) 88%, transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.9s ease 0.15s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.reveal.is-visible .overview-grid::before {
  opacity: 1;
  transform: scaleX(1);
}

.overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 8%);
  color: inherit;
  text-decoration: none;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.overview-card:hover,
.overview-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgb(0 0 0 / 12%);
}

.overview-card-index {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgb(20 20 20 / 55%);
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* Entrée en cascade des 4 cartes, même logique que .feature-card (glissade +
   flou + zoom léger, délai piloté par --overview-index) : jusqu'ici cette
   grille arrivait d'un bloc avec le fondu générique de .reveal, sans relief. */
.reveal .overview-card {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 44px, 0) scale(0.95);
  transition:
    opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s ease;
  transition-delay: calc(220ms + (var(--overview-index, 0) * 130ms));
  will-change: opacity, transform, filter;
}

.reveal.is-visible .overview-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.overview-card:nth-child(1) { --overview-index: 0; }
.overview-card:nth-child(2) { --overview-index: 1; }
.overview-card:nth-child(3) { --overview-index: 2; }
.overview-card:nth-child(4) { --overview-index: 3; }

.overview-card-media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #eee;
}

.overview-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.overview-card:hover .overview-card-media img,
.overview-card:focus-visible .overview-card-media img {
  transform: scale(1.06);
}

.overview-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 26px 26px;
}

.overview-card-body h3 {
  margin: 0 0 8px;
  color: #1f1f1f;
  font-size: 1.24rem;
  line-height: 1.3;
}

.overview-card-body p {
  margin: 0;
  color: #5a5a5a;
  font-size: 0.98rem;
  line-height: 1.55;
  flex-grow: 1;
}

.overview-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--c-teal);
  font-weight: 700;
  font-size: 0.92rem;
}

.overview-card-cta::after {
  content: "→";
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.overview-card:hover .overview-card-cta::after,
.overview-card:focus-visible .overview-card-cta::after {
  transform: translate3d(4px, 0, 0);
}

@media (width <= 1024px) {
  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 640px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Bande CTA fine avant le footer (accueil). */
.cta-band {
  padding: clamp(56px, 6vw, 84px) 0;
  text-align: center;
}

.cta-band-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: center;
}

/* Petit trait technique qui se trace au-dessus du titre, écho discret au
   rail des sections plus dynamiques (parc machines / notre histoire) plutôt
   qu'un bloc entièrement statique en toute fin de page. */
.cta-band-inner::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e11616, #a80f0f);
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.reveal.is-visible .cta-band-inner::before {
  transform: scaleX(1);
  opacity: 1;
}

.cta-band-inner h2,
.cta-band-inner p,
.cta-band-inner .button-pill {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-band-inner h2 {
  margin: 0;
  color: #202020;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  transition-delay: 120ms;
}

.cta-band-inner p {
  margin: 0;
  color: #5a5a5a;
  font-size: 1.05rem;
  line-height: 1.6;
  transition-delay: 260ms;
}

.cta-band-inner .button-pill { transition-delay: 400ms; }

.reveal.is-visible .cta-band-inner h2,
.reveal.is-visible .cta-band-inner p,
.reveal.is-visible .cta-band-inner .button-pill {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Récit vertical du parc machines (page parc-machines.html) : chaque machine
   est une étape que le scroll révèle et « allume » en couleur au passage,
   sur un fond atelier noir/gris avec rappel rouge — cf. .story-item.is-active
   piloté par IntersectionObserver dans script.js, et le rail latéral rempli
   au fil du scroll (--story-progress). */
.machines-story {
  position: relative;
  padding: clamp(64px, 9vw, 108px) 0 clamp(48px, 7vw, 84px);
  background: linear-gradient(180deg, #14161a 0%, #1b1d22 50%, #14161a 100%);
  overflow: hidden;
}

.machines-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(1px 1px at center, rgb(255 255 255 / 14%) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

.machines-story-head {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.machines-story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--c-teal);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.machines-story-kicker::before {
  content: "";
  flex: none;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.reveal.is-visible .machines-story-kicker::before {
  transform: scaleX(1);
}

.machines-story-title {
  margin: 0;
  max-width: 720px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.2;
}

.machines-story-body {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.machines-story-rail {
  position: relative;
  width: 3px;
  margin: 10px auto 0;
  background: rgb(255 255 255 / 12%);
  border-radius: 2px;
}

.machines-story-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--c-teal) 0%, #ff8b85 100%);
  border-radius: 2px;
  box-shadow: 0 0 14px rgb(225 22 22 / 55%);
  will-change: transform;
}

.machines-story-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

.story-item {
  --story-active: 0;
}

.story-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.story-item:nth-child(even) .story-card {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.story-item:nth-child(even) .story-card-media {
  order: 2;
  transform: translate3d(clamp(60px, 16vw, 280px), 26px, 0) scale(0.96);
}

/* Chaque étape arrive maintenant en glissement croisé (photo et bulle
   blanche partent de côtés opposés, comme .engage-section ailleurs sur le
   site), en plus du dégradé de couleur/texte déjà en place — sens inversé
   une étape sur deux puisque la mise en page (photo/texte) s'inverse aussi. */
.story-card-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px rgb(0 0 0 / 45%);
  opacity: 0;
  transform: translate3d(clamp(-280px, -16vw, -60px), 26px, 0) scale(0.96);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-item.is-active .story-card-media {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.story-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.85) brightness(0.72) contrast(1.05);
  transform: scale(1.08);
  transition: filter 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, transform;
}

.story-item.is-active .story-card-media img {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1);
}

.story-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 55%) 100%);
  opacity: 1;
  transition: opacity 0.6s ease;
}

.story-item.is-active .story-card-media::after {
  opacity: 0.4;
}

/* Le texte de chaque machine vit dans une carte blanche bien lisible, qui
   « sort » légèrement de son cadre et dont les lignes s'animent une à une
   quand l'étape devient active (même logique de stagger que .text-content
   sur les pages pièces-serie / pieces-unitaires). */
.story-card-body {
  display: block;
  padding: clamp(24px, 2.6vw, 34px) clamp(26px, 2.8vw, 38px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 50px rgb(0 0 0 / 35%);
  opacity: 0;
  transform: translate3d(clamp(60px, 16vw, 280px), 26px, 0) scale(0.98);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s ease;
}

.story-item:nth-child(even) .story-card-body {
  transform: translate3d(clamp(-280px, -16vw, -60px), 26px, 0) scale(0.98);
}

.story-item.is-active .story-card-body {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  box-shadow: 0 30px 64px rgb(0 0 0 / 20%);
}

.story-card-body > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-item.is-active .story-card-body > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.story-card-title {
  transition-delay: 60ms;
  display: block;
  margin: 0 0 10px;
  color: #1c1c1c;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.story-card-spec {
  transition-delay: 140ms;
  display: block;
  max-width: 46ch;
  color: #3d4045;
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
}

/* Le surlignage rouge du nom de la machine « éclôt » juste après le titre,
   même principe que .reveal h2 mark mais piloté par .story-item.is-active
   puisque le récit machines n'utilise pas le système .reveal générique. */
.story-card-title mark {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.4s ease,
    color 0.4s ease;
  transition-delay: 380ms;
}

.story-item.is-active .story-card-title mark {
  clip-path: inset(0 0 0% 0);
}

/* La toute première carte (Tour Puma 5100) est visible dès le chargement,
   en même temps que le titre "Visite d'atelier" : sans ce délai elle
   s'activait avant que le rideau + le titre de la section aient fini. Les
   cartes suivantes se déclenchent naturellement au scroll (pas besoin de ce
   décalage) et gardent le glissement croisé défini plus haut.
   Scopé à ".page-hero + .machines-story" : c'est uniquement vrai quand le
   récit suit directement l'en-tête de page (parc machines) - les autres
   récits ".machines-story" plus bas dans une page (a-propos.html) n'ont pas
   ce rideau à attendre et doivent s'activer normalement au scroll. */
.page-hero + .machines-story .story-item:first-child .story-card-media,
.page-hero + .machines-story .story-item:first-child .story-card-body,
.page-hero + .machines-story .story-item:first-child .story-card-media img,
.page-hero + .machines-story .story-item:first-child .story-card-media::after {
  transition-delay: 1.05s;
}

.page-hero + .machines-story .story-item:first-child .story-card-title {
  transition-delay: 1.11s;
}

.page-hero + .machines-story .story-item:first-child .story-card-spec {
  transition-delay: 1.19s;
}

.page-hero + .machines-story .story-item:first-child .story-card-title mark {
  transition-delay: 1.43s;
}

/* Variante non cliquable de .story-card (page a-propos.html : "Notre
   histoire" et "Précision" racontent une chronologie / un procédé, pas une
   machine à ouvrir en détail) - même mise en page et mêmes animations, sans
   le curseur pointeur ni la sémantique de bouton. */
.story-card--static {
  cursor: default;
}

.focus-note-dark {
  margin-top: clamp(48px, 7vw, 80px);
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 14%);
  color: rgb(255 255 255 / 82%);
}

@media (width <= 900px) {
  .machines-story-body {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .story-card,
  .story-item:nth-child(even) .story-card {
    grid-template-columns: 1fr;
  }

  .story-item:nth-child(even) .story-card-media {
    order: 0;
  }

  .story-card-body {
    margin-top: -34px;
    position: relative;
    z-index: 1;
  }
}

@media (width <= 760px), (prefers-reduced-motion: reduce) {
  .story-card-media img {
    filter: grayscale(0) brightness(1) contrast(1);
    transform: none;
  }

  .story-card-media,
  .story-card-body,
  .story-card-body > * {
    opacity: 1;
    transform: none;
  }

  .story-card-title mark {
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-card,
  .story-card-media,
  .story-card-media img,
  .story-card-body,
  .story-card-title mark,
  .machines-story-rail-fill {
    transition: none;
  }
}

/* Frise historique (page a-propos.html). */
.about-intro {
  margin: 18px 0 0;
  max-width: 720px;
  color: #5a5a5a;
  font-size: 1.08rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   A PROPOS - version compacte, 4 sections, 2 photos
   --------------------------------------------------------- */

.about-section {
  position: relative;
  overflow: hidden;
}

/* Le fondu générique .reveal (opacity + léger scale/translateY) est très bien
   pour un élément isolé, mais appliqué à une section entière collée à ses
   voisines (fond sombre continu d'une section à l'autre), le léger
   rétrécissement le temps de la transition laissait apparaître un filet
   blanc du fond de page entre les sections. On garde uniquement le fondu
   d'opacité pour les sections entières ; tout le reste (cartes, kicker,
   photo, texte...) garde ses propres animations internes, inchangées. */
.about-section.reveal,
.about-section.reveal.is-visible {
  transform: none;
}

.about-section--dark {
  background: linear-gradient(180deg, #14161a 0%, #1b1d22 50%, #14161a 100%);
  color: #fff;
}

/* Même grain de points que .machines-story (parc-machines.html), pour que
   le fond soit vraiment identique et pas seulement la même couleur de base. */
.about-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(1px 1px at center, rgb(255 255 255 / 14%) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

/* Repli plus serré vers "Notre histoire" juste après (même fond, plus de
   rupture de couleur) : pas besoin d'un grand vide entre les deux. */
.about-section--intro.section {
  padding-bottom: clamp(56px, 7vw, 84px);
}

.about-section > .wrap {
  position: relative;
  z-index: 1;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.about-copy,
.about-heading,
.about-story {
  max-width: 100%;
}

.about-copy > *,
.about-heading > *,
.about-story > *,
.about-pill {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-layout > .about-copy,
.about-layout > .about-figure,
.about-story,
.about-capabilities .key-figures-wrap {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-layout > .about-copy {
  transform: translate3d(-48px, 36px, 0) scale(0.985);
}

.about-layout > .about-figure {
  transform: translate3d(48px, 54px, 0) scale(0.97);
}

.about-section.reveal.is-visible .about-layout > .about-copy,
.about-section.reveal.is-visible .about-layout > .about-figure,
.about-section.reveal.is-visible .about-story,
.about-capabilities.reveal.is-visible .key-figures-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.about-section.reveal.is-visible .about-copy > *,
.about-section.reveal.is-visible .about-heading > *,
.about-section.reveal.is-visible .about-story > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-section.reveal .about-copy > *:nth-child(1),
.about-section.reveal .about-heading > *:nth-child(1),
.about-section.reveal .about-story > *:nth-child(1) {
  transition-delay: 90ms;
}

.about-section.reveal .about-copy > *:nth-child(2),
.about-section.reveal .about-heading > *:nth-child(2),
.about-section.reveal .about-story > *:nth-child(2) {
  transition-delay: 190ms;
}

.about-section.reveal .about-copy > *:nth-child(3),
.about-section.reveal .about-heading > *:nth-child(3),
.about-section.reveal .about-story > *:nth-child(3) {
  transition-delay: 290ms;
}

.about-section.reveal .about-copy > *:nth-child(4) {
  transition-delay: 390ms;
}

.about-section.reveal .about-copy > *:nth-child(5) {
  transition-delay: 490ms;
}

.about-section.reveal .about-pill:nth-child(1) { transition-delay: 260ms; }
.about-section.reveal .about-pill:nth-child(2) { transition-delay: 340ms; }
.about-section.reveal .about-pill:nth-child(3) { transition-delay: 420ms; }

.about-section.reveal.is-visible .about-pill {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}

.about-copy {
  display: grid;
  gap: 18px;
}

.about-copy h2,
.about-heading h2 {
  margin: 0;
  color: #222a33;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(2.15rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.about-copy h2 mark,
.about-heading h2 mark {
  display: inline-block;
  padding: 0.02em 0.18em 0.08em;
  color: #fff;
  background: var(--c-teal);
  box-decoration-break: clone;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
}

.about-lead,
.about-heading > p:last-child,
.about-history-note {
  margin: 0;
  color: var(--c-text);
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.7;
}

.about-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgb(225 22 22 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 82%);
  color: #333842;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgb(20 31 42 / 8%);
}

.about-figure {
  position: relative;
  z-index: 2;
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  border-radius: 30px;
}

.about-figure img {
  width: 100%;
  height: auto;
  max-height: min(420px, 48vw);
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 18px 42px rgb(0 0 0 / 22%);
  position: relative;
  z-index: 1;
  filter: saturate(1.05) contrast(1.02);
}

.about-figure--finish img {
  max-height: min(390px, 44vw);
  object-position: center 52%;
}

.about-figure-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgb(17 24 39 / 72%);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.45;
  backdrop-filter: blur(10px);
}

.about-figure::before {
  content: "";
  position: absolute;
  inset: 28px -14px -14px -18px;
  border-left: 1.5px solid rgb(225 22 22 / 75%);
  border-bottom: 1.5px solid rgb(225 22 22 / 75%);
  border-top: 0;
  border-right: 0;
  border-radius: 30px 0 30px 30px;
  pointer-events: none;
}

/* Section "L'atelier" (a-propos.html) - version simple, calquée sur la
   logique de l'exemple : un bloc texte, un bloc photo, et une cascade de
   panneaux déclenchée uniquement quand la section entre dans le viewport.
   On évite ici les couches d'animation génériques de .reveal pour garder un
   timing lisible et stable. */
.atelier-section {
  background: linear-gradient(180deg, #14161a 0%, #1b1d22 52%, #14161a 100%);
  color: #fff;
  padding: clamp(18px, 2.8vw, 34px) 0 clamp(26px, 4vw, 54px);
}

.atelier-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(22px, 3.6vw, 38px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.atelier-text {
  display: grid;
  gap: 14px;
  padding: clamp(6px, 1vw, 12px) 0;
}

.atelier-text .machines-story-kicker {
  margin: 0 0 8px;
}

.atelier-text .about-lead {
  max-width: 760px;
  margin: 0;
  color: rgb(255 255 255 / 80%);
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.7;
}

.atelier-text .about-pill-row {
  gap: 12px;
  margin-top: 6px;
}

.atelier-text .about-pill {
  min-height: 40px;
  padding: 0 14px;
  border-color: rgb(225 22 22 / 22%);
  background: rgb(255 255 255 / 92%);
  color: #333842;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px rgb(0 0 0 / 8%);
}

.atelier-section .section-kicker {
  --tint-reveal: 1;

  color: var(--c-teal);
}

.atelier-section .section-kicker::before {
  transform: scaleX(1);
}

.atelier-section h2 mark {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.4s ease,
    color 0.4s ease;
  transition-delay: 320ms;
}

.atelier-section.in-view h2 mark {
  clip-path: inset(0 0 0 0);
}

.atelier-photo-col {
  position: relative;
  height: clamp(380px, 42vw, 580px);
  margin-right: clamp(-24px, -1.4vw, -10px);
}

.atelier-panels {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  border-radius: 10px;
}

.atelier-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  opacity: 0;
  transform: translateX(140px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.68, 0, 1),
    transform 0.6s cubic-bezier(0.22, 0.68, 0, 1);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0% 100%);
  will-change: opacity, transform;
}

.atelier-panel:not(:last-child) {
  margin-right: 3px;
}

.atelier-panel:first-child {
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);
}

.atelier-panel:last-child {
  clip-path: polygon(4% 0, 100% 0, 100% 100%, 0% 100%);
}

.atelier-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -4%;
  right: -4%;
  background-image: url("assets/images/devanture-atelier.webp");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  filter: grayscale(0.08) brightness(0.9) contrast(1.04);
}

.atelier-panel:nth-child(1)::before { background-position: 0% 0; }
.atelier-panel:nth-child(2)::before { background-position: 50% 0; }
.atelier-panel:nth-child(3)::before { background-position: 100% 0; }

.atelier-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 3px 0 6px -2px var(--c-teal);
  pointer-events: none;
}

[data-atelier-reveal].in-view .atelier-panel {
  opacity: 1;
  transform: translateX(0);
}

[data-atelier-reveal].in-view .atelier-panel:nth-child(3) { transition-delay: 0.05s; }
[data-atelier-reveal].in-view .atelier-panel:nth-child(2) { transition-delay: 0.15s; }
[data-atelier-reveal].in-view .atelier-panel:nth-child(1) { transition-delay: 0.25s; }

.atelier-text > * {
  opacity: 0;
  transform: translateX(78px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.68, 0, 1),
    transform 0.7s cubic-bezier(0.22, 0.68, 0, 1);
}

[data-atelier-reveal].in-view .atelier-text > * {
  opacity: 1;
  transform: translateX(0);
}

.atelier-text > *:nth-child(1) { transition-delay: 0.05s; }
.atelier-text > *:nth-child(2) { transition-delay: 0.15s; }
.atelier-text > *:nth-child(3) { transition-delay: 0.25s; }
.atelier-text > *:nth-child(4) { transition-delay: 0.35s; }
.atelier-text > *:nth-child(5) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .atelier-panel,
  .atelier-text > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

@media (width <= 860px) {
  .atelier-card {
    grid-template-columns: 1fr;
  }

  .atelier-photo-col {
    height: 300px;
    margin-right: 0;
  }

  .atelier-text .machines-story-title {
    max-width: none;
    font-size: clamp(1.8rem, 6vw, 2.35rem);
  }
}

@media (width <= 760px) {
  .atelier-text .about-pill {
    min-height: 36px;
  }
}

/* La photo (3 panneaux) et le bloc texte glissent horizontalement (78-140px)
   pour converger en 2 colonnes — mais .atelier-card repasse en 1 colonne dès
   860px (cf. règle juste au-dessus), donc entre 761 et 860px ce glissement
   partait d'un bloc désormais empilé sur toute la largeur et débordait de
   l'écran (jusqu'à 64px de dépassement mesuré en tablette portrait). Montée
   verticale au lieu du glissement latéral tant que la mise en page est
   empilée, alignée sur la même borne que .atelier-card. */
@media (width <= 860px) {
  .atelier-panel {
    transform: translate3d(0, 22px, 0);
  }

  .atelier-text > * {
    transform: translate3d(0, 22px, 0);
  }

  [data-atelier-reveal].in-view .atelier-panel,
  [data-atelier-reveal].in-view .atelier-text > * {
    transform: translate3d(0, 0, 0);
  }
}

.about-story {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.about-heading {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.about-heading .section-kicker {
  margin: 0;
}

.about-history-year {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(225 22 22 / 16%);
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 10px 20px rgb(0 0 0 / 10%);
}

.about-history-note {
  max-width: 720px;
  padding-left: 18px;
  border-left: 3px solid var(--c-teal);
}

.about-section--story .about-heading,
.about-section--dark .about-copy {
  color: #fff;
}

.about-section--story .about-heading .section-kicker,
.about-section--dark .about-copy .section-kicker {
  color: var(--c-teal);
}

.about-section--story .about-heading > p:last-child,
.about-section--dark .about-lead,
.about-section--story .about-history-note {
  color: rgb(255 255 255 / 78%);
}

.about-section--story .about-history-note {
  border-left-color: rgb(225 22 22 / 80%);
}

.about-heading--dark h2,
.about-section--dark .about-copy h2 {
  color: #fff;
}

.about-section--dark .about-pill {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(225 22 22 / 45%);
  color: #fff;
}

.about-section--dark .about-figure {
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 30px 70px rgb(0 0 0 / 34%);
}

.about-section--dark .about-figure-caption {
  background: rgb(8 10 13 / 74%);
}

.about-timeline-shell {
  margin-top: clamp(30px, 4.2vw, 52px);
}

.about-timeline-body {
  margin: 0 auto;
  display: grid;
  width: min(calc(100% - 24px), 1120px);
  grid-template-columns: 32px minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 30px);
}

.about-timeline-body .machines-story-rail {
  margin-top: 16px;
  background: rgb(255 255 255 / 10%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.about-timeline-list {
  gap: clamp(18px, 3vw, 28px);
}

.about-timeline-item {
  position: relative;
}

.about-timeline-item::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease,
    box-shadow 0.7s ease;
  top: 28px;
  left: -54px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff5b5b 0%, var(--c-teal) 100%);
  box-shadow:
    0 0 0 9px rgb(225 22 22 / 10%),
    0 0 32px rgb(225 22 22 / 52%);
  transform: scale(0.62);
  opacity: 0.5;
}

.about-timeline-item.is-active::before {
  transform: scale(1);
  opacity: 1;
  box-shadow:
    0 0 0 10px rgb(225 22 22 / 16%),
    0 0 38px rgb(225 22 22 / 74%);
}

.about-timeline-card {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 40px);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 5%)),
    rgb(20 22 26 / 92%);
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow:
    0 28px 64px rgb(0 0 0 / 32%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  transform: translate3d(0, 32px, 0) scale(0.97);
  filter: blur(5px);
}

.about-timeline-card > * {
  position: relative;
  z-index: 1;
}

.about-timeline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background:
    radial-gradient(360px 180px at 0% 0%, rgb(225 22 22 / 18%), transparent 58%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 22%) 100%);
}

.about-timeline-card::after {
  content: none;
  inset: auto 16px 16px auto;
  width: 92px;
  height: 92px;
  border-radius: 26px;
  border-color: rgb(225 22 22 / 14%);
  background:
    linear-gradient(135deg, rgb(225 22 22 / 14%), transparent 72%),
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 12%), transparent 52%);
}

.about-timeline-item.is-active .about-timeline-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  box-shadow:
    0 34px 82px rgb(0 0 0 / 36%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 18%);
}

.about-timeline-card h3 {
  position: relative;
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  margin: 12px 0 10px;
  font-size: clamp(1.15rem, 1.9vw, 1.72rem);
  line-height: 1.12;
  letter-spacing: -0.05em;
}

.about-timeline-card p {
  position: relative;
  margin: 0;
  font-size: 0.98rem;
  color: rgb(255 255 255 / 80%);
  line-height: 1.68;
}

.about-timeline-card .about-history-year {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 2px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  min-height: 30px;
  padding: 0 13px;
  background: linear-gradient(135deg, #ff2626 0%, #c90000 100%);
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 10px 22px rgb(0 0 0 / 20%);
}

.about-section--precision {
  margin-top: -1px;
}

.about-capabilities {
  background: #f5f5f6;
}

.about-capabilities .key-figures-heading {
  row-gap: 14px;
}

.about-capabilities .key-figures-heading h2 {
  max-width: 760px;
}

.about-capabilities .key-figures-heading h2 span {
  display: inline;
  white-space: normal;
}

.about-capabilities .key-figures-heading h2 mark {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.about-capabilities .key-figures-heading > p:last-child {
  max-width: 700px;
}

.about-capabilities .key-figures-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.about-capabilities .key-figure-card {
  min-height: 0;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.about-capabilities .key-figure-card:nth-child(3n) {
  border-right: 1px solid #dde2e8;
}

.about-capabilities .key-figure-card:nth-child(4n) {
  border-right: 0;
}

.about-capabilities .key-figure-card:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.about-capabilities .key-figure-value {
  margin-bottom: 6px;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 0.95;
}

.about-capabilities .key-figure-rule {
  display: block;
  width: 28px;
  height: 2px;
  margin: 14px 0 12px;
  background: var(--c-teal);
}

.about-capabilities .key-figure-card h3 {
  max-width: 15ch;
  margin-top: 0;
  margin-bottom: 4px;
  padding-top: 0;
}

.about-capabilities .key-figure-sub {
  margin: 0;
  max-width: 22ch;
  color: var(--c-text);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.5;
}

.about-capabilities .key-prefix {
  color: var(--c-teal);
  font-size: 0.62em;
}

.about-capabilities .key-unit {
  font-size: 0.32em;
}

@media (width <= 1024px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-figure img {
    max-height: min(360px, 52vw);
  }

  .about-capabilities .key-figures-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-capabilities .key-figure-card:nth-child(2n) {
    border-right: 0;
  }
}

@media (width <= 760px) {
  .about-copy {
    gap: 14px;
  }

  .about-copy h2,
  .about-heading h2 {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    line-height: 1.08;
  }

  .about-figure {
    border-radius: 24px;
  }

  .about-figure img {
    max-height: 300px;
  }

  .about-figure-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    font-size: 0.84rem;
  }

  .about-capabilities .key-figures-grid {
    grid-template-columns: 1fr;
  }

  .about-capabilities .key-figure-card,
  .about-capabilities .key-figure-card:nth-child(2n),
  .about-capabilities .key-figure-card:nth-child(4n) {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-copy > *,
  .about-heading > *,
  .about-story > *,
  .about-pill,
  .about-layout > .about-copy,
  .about-layout > .about-figure,
  .about-story,
  .about-capabilities .key-figures-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }

  .about-timeline-body {
    width: 100%;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 16px;
  }

  .about-timeline-item::before {
    left: -33px;
    top: 22px;
    width: 13px;
    height: 13px;
  }
}

/* Section "Pièces de série" - composition alignée sur la maquette fournie.
   Le padding bas est volontairement plus généreux que le haut : la photo
   déborde de son cadre (liseré rouge + dérive de parallaxe au scroll,
   ~30px), et la section suivante juste en dessous a un fond opaque qui
   « écrasait » visuellement ce débord quand il n'y avait pas assez de
   marge pour le contenir. */
#pieces-serie {
  background: #fff;
  padding: clamp(34px, 4vw, 52px) 0 clamp(80px, 7vw, 104px);
}

/* Alignement final des bulles de texte des sections série / unitaires et
   parc machines : même traitement visuel des trois côtés. */
#pieces-serie .series-copy,
#pieces-unitaires .text-content,
#parc-machines .text-content.dark {
  background: #fff;
  box-shadow: 0 20px 44px rgb(0 0 0 / 10%);
  border: 1px solid rgb(0 0 0 / 10%);
}

#pieces-serie .series-copy h2,
#pieces-unitaires .text-content h2,
#parc-machines .text-content.dark h2,
.split-grid.reverse .text-content h2 {
  margin: 0;
  max-width: 610px;
  color: #1f1f1f;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.55rem, 2.1vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

#pieces-serie .series-copy h2 .series-title-label,
#pieces-unitaires .text-content h2 .series-title-label,
#parc-machines .text-content.dark h2 .series-title-label,
.split-grid.reverse .text-content h2 .series-title-label {
  display: block;
}

#pieces-serie .series-copy h2 mark,
#pieces-unitaires .text-content h2 mark,
#parc-machines .text-content.dark h2 mark,
.split-grid.reverse .text-content h2 mark {
  display: inline-block;
  padding: 2px 10px 5px;
  color: #fff;
  background: var(--c-teal);
}

#pieces-serie .series-copy ul,
#pieces-unitaires .text-content ul,
#parc-machines .text-content.dark ul,
.split-grid.reverse .text-content ul,
.split-grid.reverse .text-content p {
  color: var(--c-text);
  font-size: clamp(0.98rem, 1.08vw, 1.2rem);
  line-height: 1.5;
}

#pieces-serie .series-copy li::marker,
#pieces-unitaires .text-content li::marker,
#parc-machines .text-content.dark li::marker {
  color: var(--c-teal);
}

@media (width <= 760px) {
  #pieces-serie .series-copy,
  #pieces-unitaires .text-content,
  #parc-machines .text-content.dark {
    border-radius: 22px;
  }

  #pieces-serie .series-copy h2,
  #pieces-unitaires .text-content h2,
  #parc-machines .text-content.dark h2,
  .split-grid.reverse .text-content h2 {
    font-size: clamp(1.02rem, 5.1vw, 1.34rem);
    line-height: 1.08;
  }

  #pieces-serie .series-copy h2 mark,
  #pieces-unitaires .text-content h2 mark,
  #parc-machines .text-content.dark h2 mark,
  .split-grid.reverse .text-content h2 mark {
    padding: 0.01em 0.1em 0.06em;
  }
}

/* Bas de page : plan + footer calés sur la nouvelle maquette. */
#plan.plan-section {
  position: relative;
  background: #fff;
  padding: clamp(38px, 4vw, 62px) 0 clamp(18px, 2.6vw, 28px);
  overflow: visible;
}

#plan.plan-section::before {
  display: none;
}

/* Carte unique, sombre, dans laquelle vivent le texte et la carte —
   même esprit atelier que la carte de formulaire, avec un léger motif de
   hachures rouges en fond, sur le modèle de la maquette de référence. */
#plan .plan-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, #1c1e22 0%, #17191c 100%);
  border-radius: 28px;
  padding: clamp(28px, 3.6vw, 48px);
  box-shadow: 0 30px 72px rgb(0 0 0 / 32%);
}

#plan .plan-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgb(225 22 22 / 55%) 0 2px, transparent 2px 12px);
  opacity: 0.14;
  /* stylelint-disable-next-line property-no-vendor-prefix -- required by Chrome/Edge for mask-image */
  -webkit-mask-image: linear-gradient(115deg, transparent 55%, black 100%);
  mask-image: linear-gradient(115deg, transparent 55%, black 100%);
  pointer-events: none;
}

#plan .plan-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: start;
  gap: clamp(22px, 3vw, 40px);
}

#plan .plan-media[data-intersection-scroll] {
  transform: translate3d(0, calc((1 - var(--intersection-reveal, 0)) * 24px), 0) scale(calc(0.988 + (var(--intersection-reveal, 0) * 0.012)));
  opacity: calc(0.6 + (var(--intersection-reveal, 0) * 0.4));
  will-change: transform, opacity;
}

#plan .plan-copy {
  max-width: none;
  padding: clamp(12px, 1.6vw, 22px) 0 0;
}

#plan .plan-kicker {
  margin-bottom: 16px;
  color: #e11616;
  font-size: 0.94rem;
  letter-spacing: 0.22em;
}

#plan .plan-kicker::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 2px;
  margin-left: 20px;
  background: linear-gradient(90deg, rgb(225 22 22 / 10%) 0%, rgb(225 22 22 / 100%) 78%, rgb(225 22 22 / 10%) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

#plan.reveal.is-visible .plan-kicker::after {
  transform: scaleX(1);
}

#plan .plan-copy h2 {
  margin: 0;
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  letter-spacing: -0.05em;
  max-width: 640px;
  font-size: clamp(1.9rem, 3.4vw, 3.45rem);
  line-height: 1.02;
}

#plan .plan-copy h2 span {
  display: block;
}

#plan .plan-copy h2 mark {
  display: inline-block;
  padding: 2px 10px 5px;
  color: #fff;
  background: var(--c-teal);
}

#plan .plan-lead {
  margin: 18px 0 0;
  max-width: 640px;
  color: rgb(255 255 255 / 66%);
  font-size: 1rem;
  line-height: 1.55;
}

#plan .plan-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
  gap: 16px;
}

#plan .plan-detail {
  display: grid;
  align-content: start;
  gap: 10px;
}

#plan .plan-detail-icon {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgb(225 22 22 / 55%);
  border-radius: 50%;
  background: rgb(255 255 255 / 6%);
  width: 34px;
  height: 34px;
}

#plan .plan-detail-icon img {
  width: 18px;
  height: 18px;
}

#plan .plan-details p {
  margin: 0;
  color: rgb(255 255 255 / 58%);
  font-size: 0.94rem;
  line-height: 1.52;
}

#plan .plan-details strong {
  display: block;
  margin-bottom: 0;
  color: #fff;
  font-size: 0.98rem;
}

#plan .plan-details a {
  color: rgb(255 255 255 / 58%);
}

#plan .plan-actions {
  margin-top: 24px;
}

#plan .plan-actions .button-pill {
  background: linear-gradient(135deg, #f01b1b 0%, #e11616 100%);
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  clip-path: none;
  box-shadow: 0 10px 24px rgb(225 22 22 / 24%);
}

#plan .plan-actions .button-pill::after {
  margin-left: 16px;
}

/* Carte carte/plan unique, sombre, dans laquelle flottent la photo de
   façade, le repère et les deux actions — plutôt que photo et carte
   empilées séparément. */
#plan .plan-map-wrap {
  position: relative;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 72px rgb(0 0 0 / 30%);
  background: #14161a;
}

#plan .plan-map {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  display: block;
  background: #14161a;
  aspect-ratio: 1.72 / 1.35;
  object-fit: cover;
  filter: saturate(0.96) brightness(1.02) contrast(1.03);
}

#plan .plan-devanture {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  width: min(52%, 300px);
  margin: 0;
  padding: 0;
  background: #14161a;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgb(0 0 0 / 45%);
}

#plan .plan-devanture img {
  display: block;
  width: 100%;
  height: 130px;
  max-height: none;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#plan .plan-devanture figcaption {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 82%) 100%);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
}

#plan .plan-map-link {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  color: #fff;
  background: linear-gradient(90deg, rgb(20 22 26 / 92%) 0%, rgb(28 30 34 / 96%) 100%);
  border-radius: 0;
  text-decoration: none;
  min-height: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 3;
}

#plan .plan-map-link img {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

#plan .plan-map-link:hover,
#plan .plan-map-link:focus-visible {
  color: #fff;
}

#plan .plan-map-link::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f01b1b 0%, #cf0b0b 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
  width: 80px;
  height: 50px;
}

#plan .plan-map-send {
  position: absolute;
  right: 16px;
  bottom: 8px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 8px 18px rgb(0 0 0 / 35%);
  transition: transform 0.28s ease;
}

#plan .plan-map-send img {
  width: 18px;
  height: 18px;
}

#plan .plan-map-send:hover,
#plan .plan-map-send:focus-visible {
  transform: scale(1.12);
}

#plan .plan-media,
#plan .plan-copy {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#plan .plan-media:hover .plan-devanture img,
#plan .plan-media:focus-within .plan-devanture img {
  transform: scale(1.03);
}

#plan .plan-media:hover .plan-map,
#plan .plan-media:focus-within .plan-map {
  transform: scale(1.02);
}

@media (width <= 640px) {
  #plan .plan-devanture {
    width: min(60%, 220px);
  }

  #plan .plan-devanture img {
    height: 100px;
  }
}

.footer-main > div:first-child p {
  max-width: 260px;
}

@media (width <= 1024px) {
  .contact-form-section .wrap {
    width: min(calc(100% - 28px), 1220px);
  }

  #plan .plan-grid {
    grid-template-columns: 1fr;
  }

  #plan .plan-copy {
    order: 1;
  }

  #plan .plan-media {
    order: 2;
    min-height: 360px;
  }

  #plan .plan-map {
    aspect-ratio: 1.55 / 1;
  }
}

@media (width <= 760px) {
  .contact-form-section .wrap {
    width: min(calc(100% - 24px), 1220px);
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form label:nth-of-type(4),
  .contact-form .contact-form-actions,
  .contact-form-feedback {
    grid-column: auto;
  }

  #plan.plan-section {
    padding: 28px 0 20px;
  }

  #plan .plan-panel {
    padding: 22px;
    border-radius: 22px;
  }

  #plan .plan-kicker {
    margin-bottom: 18px;
  }

  #plan .plan-copy h2 {
    max-width: none;
    font-size: clamp(1.38rem, 7vw, 1.9rem);
  }

  #plan .plan-lead {
    font-size: 0.95rem;
  }

  #plan .plan-details {
    margin-top: 26px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #plan .plan-detail {
    gap: 10px;
  }

  #plan .plan-media {
    min-height: 0;
  }

  #plan .plan-devanture img {
    max-height: 200px;
  }

  #plan .plan-map {
    aspect-ratio: 1.72 / 1;
  }

  #plan .plan-map-link {
    min-height: 46px;
    padding: 0 16px;
    font-size: 0.82rem;
  }

  #plan .plan-map-link::before {
    width: 70px;
    height: 46px;
  }
}

/* Final cleanup for the lower page block: restore visibility and remove the gray divider. */

/* =========================================================
   BOUTON ANGULAIRE — STYLE DE LA CAPTURE
   ========================================================= */

.button-angle {
  min-width: 178px;
  min-height: 46px;
  padding: 0 27px 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: linear-gradient(135deg, #ef1b1b 0%, #e11616 58%, #d51010 100%);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 54%,
    88% 100%,
    0 100%
  );
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.button-angle::after {
  content: "⟶";
  display: block;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 180ms ease;
}

.button-angle:hover,
.button-angle:focus-visible {
  color: #fff;
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.button-angle:hover::after,
.button-angle:focus-visible::after {
  transform: translate(4px, -1px);
}

.button-angle:focus-visible {
  outline: 2px solid rgb(225 22 22 / 30%);
  outline-offset: 4px;
}


/* =========================================================
   FOOTER — STYLE PROCHE DE LA CAPTURE
   ========================================================= */

/* Supprime l'ancien grand rectangle blanc placé au-dessus */

/* L'ancien footer-head ne doit plus occuper d'espace */

/* Grille principale */

/* Logo et présentation */

.footer-brand > p {
  max-width: 330px;
  margin: 24px 0 0;
  color: var(--c-text);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.65;
}

.footer-brand-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 15px;
  background: #e11616;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 260ms;
}

.footer.reveal.is-visible .footer-brand-rule {
  transform: scaleX(1);
}

/* Titres des colonnes */

.footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 1.5px;
  background: #e11616;
}

/* Texte général */

.footer a {
  text-decoration: none;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.footer a:hover,
.footer a:focus-visible {
  color: #e11616;
}

/* Navigation */

.footer-navigation li {
  margin: 0;
}

.footer-navigation a {
  width: 100%;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.footer-navigation a::after {
  content: "›";
  color: #2f3438;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 0.8;
  transition: transform 160ms ease;
}

.footer-navigation a:hover::after {
  transform: translateX(4px);
}

/* Matières */

.footer-materials {
  display: grid;
  gap: 13px;
}

.footer-materials p {
  margin: 0;
}

/* Contact */

.footer-contact {
  min-width: 235px;
}

.footer-contact p {
  margin: 0;
}

.footer-contact-line {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-contact-line img {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.footer-contact-indent {
  padding-left: 32px;
  margin-top: 15px !important;
}

.footer-email {
  margin-top: 26px !important;
}

/* Ligne technique */

.footer-rail {
  display: block;
  width: calc(100% - 80px);
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  pointer-events: none;
}

/* Mentions légales */

.legal p {
  margin: 0;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.legal-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e11616;
}

/* =========================================================
   RETOUCHES MOBILE UNIQUEMENT — bloc isolé, placé en toute fin
   de fichier pour gagner la cascade sans jamais modifier les
   règles ci-dessus (donc sans aucun impact sur la version PC).
   ========================================================= */

/* 1) Footer : le "collage" entre l'email et le © venait du
   margin-top négatif de .legal (pensé pour le rail SVG desktop,
   qui est haut de ~34px). Sur mobile ce rail est écrasé à
   quelques pixels de haut par son ratio, donc ce même négatif
   plaque la ligne légale contre la colonne contact au-dessus. */
@media (width <= 760px) {
  .footer-main {
    padding-bottom: 26px;
  }

  .legal {
    margin-top: 0;
    padding-top: 18px;
    gap: 10px;
  }
}

/* 3) Parc machines sur mobile : le récit vertical coupait toute
   animation (opacity/transform figés) car le grand glissement
   croisé desktop débordait de l'écran. On lui redonne un vrai
   dynamisme d'arrivée, simple et fluide (fondu + montée + léger
   zoom photo), sans toucher à l'en-tête de section ni au rideau
   du page-hero qui restent gérés par .machines-story-head. */
@media (width <= 760px) {
  .story-card-media,
  .story-card-body {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.97);
    transition:
      opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-card-body {
    transition-delay: 90ms;
  }

  .story-item.is-active .story-card-media,
  .story-item.is-active .story-card-body {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .story-card-media img {
    filter: grayscale(0.35) brightness(0.85);
    transform: scale(1.08);
    transition:
      filter 0.9s ease,
      transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-item.is-active .story-card-media img {
    filter: grayscale(0) brightness(1);
    transform: scale(1);
  }

  .story-card-body > * {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-item.is-active .story-card-body > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .story-card-title mark {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: 320ms;
  }

  .story-item.is-active .story-card-title mark {
    clip-path: inset(0 0 0% 0);
  }
}

@media (width <= 760px) and (prefers-reduced-motion: reduce) {
  .story-card-media,
  .story-card-body,
  .story-card-body > *,
  .story-card-media img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-card-title mark {
    clip-path: none;
  }
}

/* 4) En-têtes de page (page-hero / legal-hero) légèrement moins
   hauts sur mobile : padding réduit + titre un peu plus compact,
   dynamisme d'arrivée (rideau, montée du texte) inchangé. */
@media (width <= 640px) {
  .legal-hero,
  .page-hero {
    padding: 26px 0 22px;
  }

  .legal-hero-inner,
  .page-hero-inner {
    gap: 10px;
  }

  .legal-hero h1,
  .page-hero h1 {
    font-size: clamp(1.6rem, 7.2vw, 2.3rem);
    line-height: 1.14;
  }

  .legal-hero p,
  .page-hero p {
    font-size: 0.94rem;
    line-height: 1.5;
  }
}

/* 6) Page d'accueil : les deux sections sous le hero ("Nos savoir-faire"
   et le bandeau d'appel à l'action) n'avaient qu'un fondu générique très
   discret. Sur mobile ET tablette (jusqu'à 1250px, la borne où le site
   bascule réellement en mise en page desktop), on leur donne une arrivée
   horizontale alternée (gauche puis droite), plus les 4 cartes de
   "Nos savoir-faire" qui arrivent en cascade légère. Scopé par
   #apercu / .cta-band, uniques à index.html : aucune autre page n'est
   concernée. */
@media (width <= 1250px) {
  #apercu.reveal {
    transform: translate3d(-64px, 0, 0);
  }

  #apercu.reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .cta-band.reveal {
    transform: translate3d(64px, 0, 0);
  }

  .cta-band.reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  /* Cascade plus riche pour les 4 cartes (flou + montée + zoom léger),
     même langage que le reveal desktop des .overview-card / .feature-card,
     mais avec des durées courtes pensées pour un scroll au doigt. */
  #apercu .overview-card {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 34px, 0) scale(0.93);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #apercu.reveal.is-visible .overview-card {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  #apercu.reveal.is-visible .overview-card:nth-child(1) { transition-delay: 0.08s; }
  #apercu.reveal.is-visible .overview-card:nth-child(2) { transition-delay: 0.18s; }
  #apercu.reveal.is-visible .overview-card:nth-child(3) { transition-delay: 0.28s; }
  #apercu.reveal.is-visible .overview-card:nth-child(4) { transition-delay: 0.38s; }

  /* La photo de chaque carte reste plate le reste du temps : ici le
     cadre est overflow:hidden (contrairement aux pages Pièces), donc un
     zoom-arrière sur l'image elle-même est sans risque de débord. */
  #apercu .overview-card-media img {
    transform: scale(1.22);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #apercu.reveal.is-visible .overview-card-media img {
    transform: scale(1);
  }

  #apercu.reveal.is-visible .overview-card:nth-child(1) .overview-card-media img { transition-delay: 0.08s; }
  #apercu.reveal.is-visible .overview-card:nth-child(2) .overview-card-media img { transition-delay: 0.18s; }
  #apercu.reveal.is-visible .overview-card:nth-child(3) .overview-card-media img { transition-delay: 0.28s; }
  #apercu.reveal.is-visible .overview-card:nth-child(4) .overview-card-media img { transition-delay: 0.38s; }

  /* Bandeau CTA : titre, texte et bouton arrivaient d'un bloc avec le
     glissement de la section ; une légère cascade interne leur donne un
     peu plus de vie au moment où ils passent au premier plan. */
  .cta-band.reveal .cta-band-inner > * {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cta-band.reveal .cta-band-inner > *:nth-child(1) { transition-delay: 0.05s; }
  .cta-band.reveal .cta-band-inner > *:nth-child(2) { transition-delay: 0.15s; }
  .cta-band.reveal .cta-band-inner > *:nth-child(3) { transition-delay: 0.25s; }

  .cta-band.reveal.is-visible .cta-band-inner > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (width <= 1250px) and (prefers-reduced-motion: reduce) {
  #apercu.reveal,
  .cta-band.reveal,
  #apercu .overview-card,
  #apercu .overview-card-media img,
  .cta-band-inner > * {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

/* 7) Pièces de série / Pièces unitaires : refonte complète du dynamisme
   mobile ET tablette (jusqu'à 1250px : .split-grid ne repasse en 2
   colonnes côte à côte qu'au-delà, cf. règle plus haut dans le fichier —
   en dessous, le texte et la photo sont empilés sur toute la largeur).
   Les glissements horizontaux hérités du desktop (jusqu'à 680px de
   translation + rotation + zoom photo, cadre à overflow visible pour le
   liseré rouge) ne fonctionnent pas sur un écran empilé : traversée trop
   longue, débordements (jusqu'à 274px mesurés en tablette), vide pendant
   la transition. On repart sur un système propre : fondu + légère montée
   verticale, rapide (0,5-0,65s, jamais plus), sans rotation ni zoom sur
   les photos (donc aucun risque de débordement/rognage), avec la photo
   toujours affichée nette (seule sa bulle glisse, pas l'image elle-même).
   Scopé via .mobile-showcase, posé sur le <body> de pieces-serie.html et
   pieces-unitaires.html uniquement : aucune autre page n'est concernée,
   et le PC de ces deux pages non plus (au-delà de 1250px, ce bloc entier
   ne s'applique plus). */
@media (width <= 1250px) {
  /* Plusieurs anciennes règles desktop (certaines scopées par #id, donc
     très prioritaires) imposent encore leurs propres opacity/transform à
     ces mêmes éléments. Plutôt que de dupliquer chaque combinaison de
     sélecteurs pour les dépasser en spécificité, on utilise !important
     ici : sans risque, puisque tout ce bloc est doublement scopé (media
     query mobile + .mobile-showcase sur pieces-serie.html/
     pieces-unitaires.html uniquement) et qu'aucune règle plus bas dans le
     fichier ne vient plus le contredire. */

  /* La section elle-même (l'élément <section class="engage-section reveal">
     qui enveloppe la photo ET le texte) n'a plus son propre fondu : seuls
     ses deux enfants (bulle de texte, photo) animent, chacun une fois,
     proprement — sinon la section restait translucide pendant que ses
     enfants étaient déjà nets, et donnait l'impression que la section
     suivante "mangeait" la photo du dessus. */
  .mobile-showcase .engage-section.reveal,
  .mobile-showcase .legal-section.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mobile-showcase .engage-section .text-content {
    opacity: 0 !important;
    transform: translate3d(0, 34px, 0) scale(0.98) !important;
    filter: none !important;
    transition:
      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* La bulle photo a droit à un peu plus de relief que le texte (flou +
     zoom léger en plus de la montée) : sans texte à l'intérieur, le flou
     ne nuit jamais à la lisibilité et donne un vrai effet "développement
     photo" façon Polaroid, cohérent avec le glissement flouté du desktop. */
  .mobile-showcase .engage-section .section-figure {
    opacity: 0 !important;
    transform: translate3d(0, 34px, 0) scale(0.92) !important;
    filter: blur(6px) !important;
    transition:
      opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-delay: 100ms !important;
  }

  .mobile-showcase .engage-section.reveal.is-visible .text-content {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .mobile-showcase .engage-section.reveal.is-visible .section-figure {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: blur(0) !important;
  }

  /* La toute première section de chaque page (juste après le page-hero)
     doit rester synchronisée avec la fin du rideau rouge de l'en-tête,
     exactement comme sur À propos / Contact / Parc machines : sans ce
     correctif plus précis (donc plus prioritaire), la règle générale
     ci-dessus la faisait partir immédiatement, avant même que le rideau
     ait fini de jouer — d'où l'impression que "l'en-tête ne correspond
     plus" et que "la section ne le suit pas". */
  .mobile-showcase .page-hero + .engage-section.reveal .text-content {
    transition-delay: 1.05s !important;
  }

  .mobile-showcase .page-hero + .engage-section.reveal .section-figure {
    transition-delay: 1.15s !important;
  }

  /* La photo elle-même reste toujours nette et fixe : c'est sa bulle
     (.section-figure, avec son cadre et son liseré rouge) qui glisse,
     jamais l'image à l'intérieur — le cadre de ces deux pages a
     volontairement overflow:visible pour laisser dépasser le liseré, donc
     tout glissement/zoom appliqué à l'image elle-même n'est jamais coupé
     et vient chevaucher la section suivante. */
  .mobile-showcase .engage-section .section-figure img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Bug trouvé en analysant le "décalé par rapport au scroll" signalé :
     un système hérité fait apparaître chaque enfant direct de
     .text-content (titre, liste, bouton) un par un, en 1,05 à 1,3s
     chacun, avec un décalage supplémentaire jusqu'à 640ms pour le
     dernier. Résultat : la bulle de texte (elle-même déjà pleinement
     visible en 0,5s ci-dessus) reste vide/fantôme jusqu'à 2,1s après
     le déclenchement — largement après que l'utilisateur ait continué
     à scroller. On désactive ce système interne pour ces deux pages :
     .text-content dans son ensemble suffit comme animation d'entrée. */
  .mobile-showcase .engage-section .text-content > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  /* Même décalage sur le surlignage rouge du titre : la première section
     de chaque page attend 1,25s avant de commencer à le peindre (pensé
     pour l'ancien système, deux fois plus lent) — le texte est déjà
     lisible depuis longtemps quand la couleur arrive enfin. Ramené à un
     délai court et cohérent sur les deux sections des deux pages. */
  .mobile-showcase .engage-section h2 mark,
  .mobile-showcase .legal-section h2 mark {
    transition-delay: 200ms !important;
    transition-duration: 0.35s !important;
  }

  /* Même règle que pour .text-content / .section-figure juste au-dessus :
     la première section de chaque page attend la fin du rideau avant que
     son surlignage ne se peigne, pour rester alignée sur le reste du site. */
  .mobile-showcase .page-hero + .engage-section.reveal h2 mark {
    transition-delay: 1.4s !important;
    transition-duration: 0.4s !important;
  }

  /* Les 3 cartes de chaque page ("Précision / Matières / ..." et
     "Étude / Secteurs / Réactivité") arrivent en cascade, avec le même
     flou + zoom léger que la photo ci-dessus pour un vrai relief. */
  .mobile-showcase .legal-section .feature-card {
    opacity: 0 !important;
    filter: blur(5px) !important;
    transform: translate3d(0, 30px, 0) scale(0.92) !important;
    transition:
      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-showcase .legal-section.reveal.is-visible .feature-card {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .mobile-showcase .legal-section.reveal.is-visible .feature-card:nth-child(1) {
    transition-delay: 0ms !important;
  }

  .mobile-showcase .legal-section.reveal.is-visible .feature-card:nth-child(2) {
    transition-delay: 130ms !important;
  }

  .mobile-showcase .legal-section.reveal.is-visible .feature-card:nth-child(3) {
    transition-delay: 260ms !important;
  }

  /* Footer : on garde le fondu générique du site, juste raccourci pour
     rester cohérent avec le rythme rapide du reste de ces deux pages. */
  .mobile-showcase .footer.reveal {
    transition:
      opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Le padding bas généreux de #pieces-serie (jusqu'à 104px) réservait de
     la place au débord du cadre photo + à la dérive de parallaxe au
     scroll (~30px), tous deux desktop uniquement. Sans le grand
     glissement desktop, ce vide devenait un blanc anormal avant "Doosan
     Puma 4100" : ramené à une valeur qui respire sans être excessive.
     #pieces-unitaires n'avait jamais eu ce padding généreux (34px de
     base seulement), ce qui donnait un espacement trop juste avant
     "Exemple de réalisation" comparé à sa page jumelle : alignée sur la
     même valeur pour que les deux pages respirent pareil. */
  #pieces-serie,
  #pieces-unitaires {
    padding-bottom: 90px;
  }
}

@media (width <= 1250px) and (prefers-reduced-motion: reduce) {
  .mobile-showcase .engage-section .text-content,
  .mobile-showcase .engage-section .section-figure,
  .mobile-showcase .legal-section .feature-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   RETOUCHES TABLETTE UNIQUEMENT — bloc isolé, placé en toute fin
   de fichier pour gagner la cascade sans jamais modifier les
   règles ci-dessus (donc sans aucun impact sur la version PC, ni
   sur la version mobile qui reste gérée par ses propres blocs
   <= 760px déjà validés).
   ============================================================ */
@media (width <= 1250px) and (width > 760px) {
  /* 1) Le bouton "Demander un devis" se retrouvait centré sur sa
     propre ligne : la règle plus ancienne imposait toujours
     flex-direction: column (et une grille en display), y compris
     une fois le header passé en .is-scrolled au scroll. On force
     une vraie ligne unique : logo à gauche, bouton + menu groupés
     à droite (marge auto sur le premier des deux), dans les deux
     états du header. */
  .header-main,
  .header.is-scrolled .header-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .header-main .brand {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-quote.button-pill {
    order: 1;
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline: 14px;
    min-height: 42px;
    font-size: 0.82rem;
  }

  .menu-toggle {
    order: 2;
    flex: 0 0 auto;
  }

  /* 2) Footer : les 4 colonnes restaient sur une seule ligne trop
     étroite. La marque prend sa propre ligne pleine largeur, les 3
     autres colonnes se répartissent sur la ligne suivante. */
  .footer-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* 3) et 4) Section "Doosan Puma 4100" / "Exemple de réalisation" :
     une fois le layout empilé sur tablette (photo puis texte), le
     grand glissement horizontal hérité du desktop (jusqu'à 680px,
     rotation, flou) n'a plus de sens et laissait un vide excessif
     autour de la section. On reprend le principe déjà validé sur
     mobile (.mobile-showcase) : padding réduit, fondu + légère
     montée, sans rotation ni flou sur la photo. */
  #pieces-serie + .engage-section,
  #pieces-unitaires + .engage-section {
    padding: 44px 0;
  }

  #pieces-serie + .engage-section .text-content,
  #pieces-unitaires + .engage-section .text-content {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.98);
    filter: none;
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #pieces-serie + .engage-section.reveal.is-visible .text-content,
  #pieces-unitaires + .engage-section.reveal.is-visible .text-content {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* 5) A propos : "Notre histoire" ne doit pas finir son fondu
     avant que "L'atelier" juste au-dessus (animée sur une minuterie
     fixe de 1,05s indépendante du scroll) n'ait terminé. Sur
     tablette cette section est plus compacte et le scroll l'atteint
     trop vite, d'où le décalage. */
  .about-section--story.reveal {
    transition-delay: 1.2s;
  }
}