/* ==========================================================================
   IMF - Valves & Regulation Solutions
   Feuille de styles principale

   1.  Polices
   2.  Design tokens
   3.  Base & reset
   4.  Utilitaires (container, sr-only, eyebrow, typo)
   5.  Composants (boutons, icônes, liens)
   6.  En-tête & navigation (desktop + mobile)
   7.  Méga menus
   8.  Hero
   9.  Produits (aide au choix, catégories, cartes)
   10. Applications
   11. Société
   12. Actualités
   13. Certifications
   14. Pied de page (contact + footer)
   15. Animations (apparition au scroll, hover)
   ========================================================================== */

/* 1. Polices - variables, auto-hébergées (RGPD), sous-ensemble latin
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Polices de repli calées sur les métriques d'Inter : limite le décalage
   de mise en page (CLS) pendant le chargement. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* 2. Design tokens
   ========================================================================== */
:root {
  /* Couleurs (variables Figma) */
  --c-navy: #09002d;
  --c-night: #0e033b;
  --c-dark: #171838;
  --c-ink: #0a0e2a;
  --c-violet: #210e70;
  --c-red: #ff4a4a;
  --c-red-strong: #ee3434;
  --c-blue: #133ae6;
  --c-white: #fff;
  --c-beige: #f8f6f1;
  --c-beige-dark: #efece3;
  --c-grey: #d8d8e8;
  --c-grey-dark: #5c5d74;
  --c-white-30: rgb(255 255 255 / 0.3);
  --c-header: rgb(11 13 84 / 0.95);
  --u-hover: linear-gradient(90deg, var(--c-blue), var(--c-red)); /* filet de survol */

  /* Typographies */
  --ff-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ff-code: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Échelle fluide : valeurs mobile (390 px) → desktop (1870 px) de la maquette */
  --fs-h1: clamp(2.625rem, 1.999rem + 2.568vw, 5rem);                   /* 42 → 80 */
  --fs-display-l: clamp(2.125rem, 1.499rem + 2.568vw, 4.5rem);          /* 34 → 72 */
  --fs-display-m: clamp(1.75rem, 1.487rem + 1.081vw, 2.75rem);          /* 28 → 44 */
  --fs-cat-num: clamp(2.5rem, 1.973rem + 2.162vw, 4.5rem);              /* 40 → 72 */
  --fs-figure: clamp(1.75rem, 1.157rem + 2.432vw, 4rem);                /* 28 → 64 */
  --fs-figure-unit: clamp(0.8125rem, 0.681rem + 0.541vw, 1.3125rem);    /* 13 → 21 */
  --fs-title-l: clamp(1.5rem, 1.368rem + 0.541vw, 2rem);                /* 24 → 32 */
  --fs-title-news: clamp(1.125rem, 1.059rem + 0.27vw, 1.375rem);        /* 18 → 22 */
  --fs-title-card: clamp(1.125rem, 1.092rem + 0.135vw, 1.25rem);        /* 18 → 20 */
  --fs-lead: clamp(0.9375rem, 0.855rem + 0.338vw, 1.25rem);             /* 15 → 20 */
  --fs-intro: clamp(0.9375rem, 0.921rem + 0.068vw, 1rem);               /* 15 → 16 */
  --fs-hero-lede: clamp(1rem, 0.984rem + 0.068vw, 1.0625rem);           /* 16 → 17 */
  --fs-card-text: clamp(0.875rem, 0.842rem + 0.135vw, 1rem);            /* 14 → 16 */
  --fs-app-text: clamp(0.875rem, 0.859rem + 0.068vw, 0.9375rem);        /* 14 → 15 */

  /* Mise en page */
  --container: 1520px;
  --container-wide: 1530px;
  --gutter: clamp(1.5625rem, 5.5vw, 5rem);                              /* 25 → 80 */
  --section-pad: clamp(3.5rem, 2.149rem + 5.541vw, 8.625rem);           /* 56 → 138 */
  --radius-card: 17px;
  --radius-btn: 12px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.2, 0.65, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.8s;

  /* Calques */
  --z-header: 100;

  /* En-tête desktop : position au repos, marges latérales (69 px à 2300 px, maquette
     « IMF-desktop-home-2300px »), haut du méga menu (mis à jour par l'état sticky) */
  --header-top: 50px;
  --header-height: 70px;
  --header-inset: clamp(40px, 3.7vw, 69px);
  --mega-top: 139px;

  color-scheme: light;
}

/* 3. Base & reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* <source> n'a pas de display:none par défaut : dans un <picture> en display:contents,
   il deviendrait un élément de grille et décentrerait l'image */
picture > source {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: 100px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-beige);
  color: var(--c-dark);
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

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

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

img {
  height: auto;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-red);
  color: var(--c-white);
}

/* 4. Utilitaires
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-header) + 10);
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  background: var(--c-white);
  color: var(--c-dark);
  font-weight: 600;
  translate: 0 -200%;
  transition: translate var(--dur) var(--ease-out);
}

.skip-link:focus {
  translate: 0 0;
}

/* Surtitre : barre rouge + capitales Geist Mono */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 3px;
  height: 10px;
  background: var(--c-red);
}

.eyebrow--wide {
  gap: 15px;
}

.display-l {
  font-size: var(--fs-display-l);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
}

.section-title {
  max-width: 10.2em;
}

.display-m {
  font-size: var(--fs-display-m);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Soulignement dégradé (composant « underline-degrad ») : collé au texte et passant
   sous les lettres (jambages) ; il se trace de gauche à droite à l'apparition du titre */
.u-gradient {
  position: relative;
  z-index: 0; /* contexte d'empilement : le filet passe sous le texte */
  white-space: nowrap;
}

.u-gradient::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.02em;
  right: 0.02em;
  bottom: 5px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-blue) 18%, var(--c-red) 80%);
  transform-origin: left center;
}

/* Tracé à l'apparition : titre du hero une fois ses lignes en place (hero.js),
   titres révélés au défilement (main.js) */
.hero__title.is-split .u-gradient::after {
  transform: scaleX(0);
}

.hero__title.is-drawn .u-gradient::after {
  animation: u-draw 0.9s var(--ease-out) backwards;
}

.js [data-reveal] .u-gradient::after {
  transform: scaleX(0);
  transition: transform 0.9s 0.45s var(--ease-out);
}

.js [data-reveal].is-revealed .u-gradient::after {
  transform: none;
}

@keyframes u-draw {
  from {
    transform: scaleX(0);
  }
}

/* Soulignement au survol : filet dégradé bleu → rouge de 1 px qui se déploie de gauche
   à droite sous le texte (titres de cartes, entrées des méga menus, liens du footer) */
.news-card__title a,
.product-card__title a,
.app-card__title a,
.mega-product__name,
.mega-sector__title,
.mega-news__title,
.footer-col a,
.link-arrow {
  background: var(--u-hover) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}

.footer-col a {
  transition-duration: var(--dur);
}

.mega-sector__title {
  justify-self: start;
}

@media (hover: hover) {
  .news-card:hover .news-card__title a,
  .product-card:hover .product-card__title a,
  .app-card:hover .app-card__title a,
  .mega-product:hover .mega-product__name,
  .mega-sector:hover .mega-sector__title,
  .mega-news__item:hover .mega-news__title,
  .footer-col a:hover {
    background-size: 100% 1px;
  }

  .link-arrow:hover {
    background-size: calc(100% - 34px) 1px; /* texte seul, sans la flèche */
  }
}

/* même indication au clavier */
.news-card__title a:focus-visible,
.product-card__title a:focus-visible,
.app-card__title a:focus-visible,
.mega-product:focus-visible .mega-product__name,
.mega-sector:focus-visible .mega-sector__title,
.mega-news__item:focus-visible .mega-news__title,
.footer-col a:focus-visible {
  background-size: 100% 1px;
}

.link-arrow:focus-visible {
  background-size: calc(100% - 34px) 1px;
}

/* Bloc d'introduction de section (surtitre + titre | texte) */
.section-intro {
  display: grid;
  gap: 16px;
}

.section-intro__main {
  display: grid;
  gap: clamp(16px, 12.31px + 0.946vw, 30px);
  padding-top: clamp(0px, -5.3px + 1.35vw, 20px);
}

.section-intro__text {
  max-width: 730px;
  font-size: var(--fs-intro);
  line-height: 1.6;
  color: var(--c-grey-dark);
}

@media (min-width: 56.25em) {
  .section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    align-items: end;
  }

  .section-intro__text {
    line-height: 1.625;
    letter-spacing: -0.01em;
  }
}

/* 5. Composants
   ========================================================================== */

/* icons:start - généré par scripts/build-icons.py, ne pas éditer à la main */
:root {
  --icon-arrow: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.49992 0.146447C5.30465 -0.0488155 4.98807 -0.0488155 4.79281 0.146447C4.59755 0.341709 4.59755 0.658291 4.79281 0.853553L5.14636 0.5L5.49992 0.146447ZM4.79281 8.14664C4.59755 8.34191 4.59755 8.65849 4.79281 8.85375C4.98807 9.04901 5.30465 9.04901 5.49992 8.85375L5.14636 8.5002L4.79281 8.14664ZM8.64642 5.00006H9.14642V4.00006H8.64642V4.50006V5.00006ZM0.5 4.00006C0.223858 4.00006 0 4.22392 0 4.50006C0 4.7762 0.223858 5.00006 0.5 5.00006L0.5 4.50006V4.00006ZM5.14636 0.5L4.79281 0.853553L9.14646 5.20721L9.50001 4.85365L9.85357 4.5001L5.49992 0.146447L5.14636 0.5ZM5.14636 8.5002L5.49992 8.85375L9.14646 5.20721L8.79291 4.85365L8.43935 4.5001L4.79281 8.14664L5.14636 8.5002ZM8.64642 4.50006V4.00006H0.5V4.50006L0.5 5.00006L8.64642 5.00006V4.50006Z' fill='%23696B7A'/%3E%3C/svg%3E"); /* ico-arrow.svg */
  --icon-chevron: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.35356 0.646326C1.15829 0.451063 0.841712 0.451062 0.646448 0.646323C0.451185 0.841584 0.451184 1.15817 0.646445 1.35343L1 0.999878L1.35356 0.646326ZM0.646447 11.6465C0.451184 11.8417 0.451184 12.1583 0.646447 12.3536C0.841709 12.5488 1.15829 12.5488 1.35355 12.3536L1 12L0.646447 11.6465ZM1 0.999878L0.646445 1.35343L6.50004 7.20708L6.85359 6.85353L7.20715 6.49998L1.35356 0.646326L1 0.999878ZM1 12L1.35355 12.3536L6.50004 7.20708L6.14648 6.85353L5.79293 6.49998L0.646447 11.6465L1 12Z' fill='%23AFB0BA'/%3E%3C/svg%3E"); /* arrow.svg */
  --icon-close: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.06058' y1='0.353539' x2='18.0606' y2='17.3535' stroke='%23696B7A'/%3E%3Cline y1='-0.5' x2='24.0416' y2='-0.5' transform='matrix(-0.707107 0.707107 0.707107 0.707107 17.707 0.707092)' stroke='%23696B7A'/%3E%3C/svg%3E"); /* ico-close.svg */
  --icon-search: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='ico-search' fill-rule='evenodd' clip-rule='evenodd' d='M11.0721 9.89761L14.7509 13.5804C15.0796 13.9102 15.0796 14.4449 14.7713 14.7533C14.6069 14.9185 14.3807 15 14.1753 15C13.9493 15 13.7437 14.9185 13.5793 14.7533L9.88016 11.0908C8.79072 11.9345 7.47559 12.3458 6.1601 12.3458C4.5778 12.3458 3.01586 11.7494 1.80333 10.5347C-0.60111 8.12778 -0.60111 4.21802 1.80333 1.81059C3.01586 0.597436 4.5778 0 6.1601 0C7.74264 0 9.30458 0.597436 10.5171 1.81059C12.7366 4.01268 12.9217 7.49008 11.0721 9.89761ZM2.99461 9.36414C3.85786 10.2072 4.96754 10.6808 6.18008 10.6808C7.37223 10.6808 8.52303 10.2281 9.36567 9.36414C10.2082 8.49901 10.6809 7.38838 10.6809 6.17472C10.6809 4.96046 10.2287 3.82884 9.36567 2.9852C8.5023 2.14165 7.3926 1.66862 6.18008 1.66862C4.96754 1.66862 3.83724 2.14165 2.99461 2.9852C1.24785 4.75452 1.24785 7.6147 2.99461 9.36414Z' fill='white'/%3E%3C/svg%3E"); /* ico-search.svg */
  --icon-phone: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_24050_13985)'%3E%3Cmask id='mask0_24050_13985' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='14' height='14'%3E%3Cpath d='M14 0H0V14H14V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_24050_13985)'%3E%3Cpath d='M12.8328 9.86941V11.6194C12.8335 11.7819 12.8002 11.9427 12.7351 12.0915C12.6701 12.2404 12.5746 12.374 12.4549 12.4838C12.3352 12.5937 12.1938 12.6773 12.04 12.7293C11.8861 12.7814 11.723 12.8007 11.5612 12.7861C9.76617 12.591 8.04193 11.9777 6.52701 10.9952C5.11758 10.0996 3.92263 8.90467 3.02701 7.49524C2.04117 5.97344 1.42766 4.24082 1.23618 2.43774C1.2216 2.27643 1.24077 2.11385 1.29247 1.96035C1.34417 1.80686 1.42726 1.66581 1.53646 1.54618C1.64566 1.42656 1.77857 1.33099 1.92672 1.26554C2.07488 1.2001 2.23505 1.16622 2.39701 1.16607H4.14701C4.43011 1.16329 4.70456 1.26353 4.91921 1.44813C5.13386 1.63273 5.27406 1.88908 5.31368 2.16941C5.38754 2.72944 5.52453 3.27933 5.72201 3.80857C5.8005 4.01736 5.81748 4.24427 5.77096 4.46242C5.72443 4.68057 5.61635 4.8808 5.45951 5.03941L4.71868 5.78024C5.54909 7.24064 6.75828 8.44983 8.21868 9.28024L8.95951 8.53941C9.11812 8.38257 9.31835 8.27448 9.5365 8.22796C9.75465 8.18144 9.98156 8.19842 10.1903 8.27691C10.7196 8.47439 11.2695 8.61138 11.8295 8.68524C12.1129 8.72521 12.3717 8.86794 12.5567 9.08628C12.7417 9.30461 12.8399 9.58332 12.8328 9.86941Z' stroke='white' stroke-width='0.875'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_24050_13985'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); /* ico-phone.svg */
  --icon-email: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.33366 2.33398H11.667C12.3087 2.33398 12.8337 2.85898 12.8337 3.50065V10.5007C12.8337 11.1423 12.3087 11.6673 11.667 11.6673H2.33366C1.69199 11.6673 1.16699 11.1423 1.16699 10.5007V3.50065C1.16699 2.85898 1.69199 2.33398 2.33366 2.33398Z' stroke='white' stroke-width='0.875'/%3E%3Cpath d='M12.8337 3.5L7.00033 7.58333L1.16699 3.5' stroke='white' stroke-width='0.875'/%3E%3C/svg%3E"); /* ico-email.svg */
  --icon-linkedin: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9289 11.928H9.85224V8.67883C9.85224 7.90299 9.83474 6.90549 8.77307 6.90549C7.68807 6.90549 7.52474 7.75133 7.52474 8.62633V11.928H5.44807V5.24883H7.43724V6.16466H7.46641C7.74641 5.63966 8.41724 5.08549 9.42641 5.08549C11.5206 5.08549 11.9114 6.46216 11.9114 8.25883V11.928H11.9289ZM3.11474 4.33299C2.95655 4.33299 2.79991 4.30184 2.65377 4.2413C2.50762 4.18077 2.37483 4.09204 2.26297 3.98018C2.15111 3.86832 2.06239 3.73553 2.00185 3.58939C1.94131 3.44324 1.91016 3.2866 1.91016 3.12841C1.91016 2.97022 1.94131 2.81358 2.00185 2.66744C2.06239 2.52129 2.15111 2.3885 2.26297 2.27664C2.37483 2.16479 2.50762 2.07606 2.65377 2.01552C2.79991 1.95499 2.95655 1.92383 3.11474 1.92383C3.43422 1.92383 3.74061 2.05074 3.96651 2.27664C4.19241 2.50255 4.31932 2.80894 4.31932 3.12841C4.31932 3.44789 4.19241 3.75428 3.96651 3.98018C3.74061 4.20608 3.43422 4.33299 3.11474 4.33299ZM4.15307 11.928H2.07641V5.24883H4.15307V11.928Z' fill='white'/%3E%3C/svg%3E"); /* ico-linkedin.svg */
  --icon-sparkle: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='17.7134' height='19.5013' viewBox='0 0 17.7134 19.5013' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M6.43404 4.76837e-07L7.00635 1.71695C8.21321 5.33751 8.77232 6.29552 11.485 7.38169L12.8861 7.94174L11.485 8.50179C8.77705 9.58796 8.21804 10.5421 7.00539 14.1665L6.43213 15.8807L5.85981 14.1656C4.6624 10.5752 4.10611 9.62202 1.37562 8.49337L0 7.92764L1.38035 7.37512C4.09481 6.28895 4.65214 5.33196 5.85899 1.71038L6.43404 4.76837e-07ZM9.81323 7.94256C8.9807 7.53054 8.2547 6.93182 7.6918 6.19262C7.16192 5.43645 6.74046 4.60956 6.43969 3.73643C6.13985 4.60951 5.7184 5.4364 5.18851 6.19262C4.62279 6.93558 3.89209 7.53713 3.05388 7.95009C4.7133 8.826 5.93802 10.3478 6.43959 12.1553C6.7413 11.2803 7.1637 10.4515 7.69358 9.69255C8.25552 8.95335 8.98164 8.35458 9.81323 7.94256Z' fill='white'/%3E%3Cpath id='Vector_2' d='M12.4683 9.65491L13.0407 11.3719C13.6262 13.1293 13.8506 13.5178 15.1055 14.0195L16.5066 14.5795L15.1055 15.1396C13.8525 15.6402 13.6281 16.0287 13.0397 17.7872L12.4665 19.5013L11.8941 17.7862C11.3134 16.0438 11.089 15.6573 9.82364 15.1311L8.44801 14.5654L9.82837 14.0129C11.0833 13.5113 11.3077 13.1219 11.8932 11.3653L12.4683 9.65491ZM13.5762 14.5803C13.0934 14.2409 12.7107 13.778 12.4683 13.2396C12.2251 13.7798 11.8404 14.2447 11.3548 14.5841C11.8385 14.9226 12.2232 15.3855 12.4683 15.9239C12.7107 15.3846 13.0934 14.9207 13.5762 14.5803Z' fill='white'/%3E%3Cpath id='Vector_3' d='M13.6751 5.22718C14.4294 4.92547 14.5803 4.62375 14.882 3.71861C15.1837 4.62375 15.3346 4.92547 16.0888 5.22718C15.3346 5.52889 15.1846 5.83061 14.882 6.73575C14.5803 5.83061 14.4257 5.53642 13.6751 5.22718Z' fill='white'/%3E%3Cpath id='Vector_4' d='M14.882 1.81034L15.4543 3.52728C15.7344 4.37208 15.8069 4.46354 16.3123 4.66626L17.7134 5.22632L16.3123 5.78637C15.8079 5.98814 15.7353 6.08432 15.4534 6.92535L14.8801 8.63947L14.3078 6.92441C14.0306 6.09093 13.9571 5.9938 13.4442 5.7826L12.0685 5.21688L13.4489 4.66436C13.9543 4.46164 14.0269 4.36641 14.3069 3.52537L14.882 1.81034Z' fill='white'/%3E%3C/g%3E%3C/svg%3E"); /* ico-sparkle.svg */
  --icon-arrow-up: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='15.05' height='16' viewBox='0 0 15.05 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M11 3.53492V10.5C11 13.5376 8.53757 16 5.5 16C2.46243 16 0 13.5376 0 10.5V6.99731C0 6.44503 0.447715 5.99731 1 5.99731C1.55228 5.99731 2 6.44503 2 6.99731V10.5C2 12.433 3.567 14 5.5 14C7.433 14 9 12.433 9 10.5V3.53492L6.74246 5.79246C6.33241 6.20251 5.66759 6.20251 5.25754 5.79246C4.84749 5.38241 4.84749 4.71759 5.25754 4.30754L9.25754 0.307538C9.66759 -0.102513 10.3324 -0.102513 10.7425 0.307538L14.7425 4.30754C15.1525 4.71759 15.1525 5.38241 14.7425 5.79246C14.3324 6.20251 13.6676 6.20251 13.2575 5.79246L11 3.53492Z' fill='white'/%3E%3C/g%3E%3C/svg%3E"); /* ico-arrow-up.svg */
  --icon-restart: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12a9 9 0 1 0 2.64-6.36M3 4v5h5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ico-restart.svg */
  --icon-edit: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ico-edit.svg */
  --icon-product: url("data:image/svg+xml,%3Csvg width='40' height='28' viewBox='0 0 120 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23000' stroke-width='4' stroke-linejoin='round'%3E%3Crect x='42' y='6' width='36' height='20' rx='4'/%3E%3Cpath d='M54 26v8h12v-8'/%3E%3Crect x='26' y='34' width='68' height='34' rx='10'/%3E%3Ccircle cx='60' cy='51' r='8'/%3E%3Cpath d='M6 51h20M94 51h20'/%3E%3C/g%3E%3C/svg%3E"); /* ico-product.svg */
  --icon-download: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.85355 6.00028C9.04882 5.80502 9.04882 5.48844 8.85355 5.29318C8.65829 5.09791 8.34171 5.09791 8.14645 5.29318L8.5 5.64673L8.85355 6.00028ZM0.853356 5.29317C0.658094 5.09791 0.341512 5.09791 0.146249 5.29317C-0.0490133 5.48844 -0.0490133 5.80502 0.146249 6.00028L0.499802 5.64673L0.853356 5.29317ZM3.99994 9.14679L3.99994 9.64679L4.99994 9.64679L4.99994 9.14679L4.49994 9.14679L3.99994 9.14679ZM4.99994 1.00037C4.99994 0.724224 4.77608 0.500366 4.49994 0.500366C4.2238 0.500366 3.99994 0.724224 3.99994 1.00037L4.49994 1.00037L4.99994 1.00037ZM8.5 5.64673L8.14645 5.29318L3.79279 9.64683L4.14635 10.0004L4.4999 10.3539L8.85355 6.00028L8.5 5.64673ZM0.499802 5.64673L0.146249 6.00028L3.79279 9.64683L4.14635 9.29327L4.4999 8.93972L0.853356 5.29317L0.499802 5.64673ZM4.49994 9.14679L4.99994 9.14679L4.99994 1.00037L4.49994 1.00037L3.99994 1.00037L3.99994 9.14679L4.49994 9.14679Z' fill='%23FF4A4A'/%3E%3Cpath d='M1.5 13.5H7.5' stroke='%23FF4A4A' stroke-linecap='round'/%3E%3C/svg%3E"); /* ico-download.svg */
  --icon-expand: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.5h4.5V6M6 14.5H1.5V10M14.5 1.5 9.5 6.5M1.5 14.5l5-5' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ico-expand.svg */
  --icon-check: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5 4.3 7.8 11 1' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ico-check.svg */
}
/* icons:end */

/* Icônes monochromes : SVG utilisés en masque, coloriés via currentColor */
.icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.icon--arrow {
  -webkit-mask-image: var(--icon-arrow);
  mask-image: var(--icon-arrow);
  -webkit-mask-size: 10px 9px;
  mask-size: 10px 9px;
}

.icon--arrow-sm {
  width: 10px;
  height: 9px;
  -webkit-mask-image: var(--icon-arrow);
  mask-image: var(--icon-arrow);
}

.icon--chevron {
  width: 8px;
  height: 13px;
  -webkit-mask-image: var(--icon-chevron);
  mask-image: var(--icon-chevron);
}

.icon--close {
  width: 18px;
  height: 17px;
  -webkit-mask-image: var(--icon-close);
  mask-image: var(--icon-close);
}

.icon--search {
  width: 15px;
  height: 15px;
  -webkit-mask-image: var(--icon-search);
  mask-image: var(--icon-search);
}

.icon--phone,
.icon--email,
.icon--linkedin {
  width: 14px;
  height: 14px;
}

.icon--phone {
  -webkit-mask-image: var(--icon-phone);
  mask-image: var(--icon-phone);
}

.icon--email {
  -webkit-mask-image: var(--icon-email);
  mask-image: var(--icon-email);
}

.icon--linkedin {
  -webkit-mask-image: var(--icon-linkedin);
  mask-image: var(--icon-linkedin);
}

.icon--sparkle {
  width: 18px;
  height: 20px;
  -webkit-mask-image: var(--icon-sparkle);
  mask-image: var(--icon-sparkle);
}

.icon--arrow-up {
  width: 15px;
  height: 16px;
  -webkit-mask-image: var(--icon-arrow-up);
  mask-image: var(--icon-arrow-up);
}

/* Boutons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-white);
  --btn-border: transparent;
  position: relative;
  isolation: isolate; /* le fond dégradé du survol passe sous le texte */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 16px 20px 16px 25px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
  transition:
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* Survol : fond dégradé bleu → rouge en fondu (un dégradé ne se transitionne pas,
   son opacité si). Boutons contour : contour seul, cf. ci-dessous. */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

/* Boutons contour : le dégradé ne colore que le contour (anneau de 1 px découpé
   par masque), le texte garde sa couleur */
.btn--outline-light::before,
.btn--outline-dark::before,
.products-card__all::before {
  padding: 1px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.btn .icon {
  transition: transform var(--dur) var(--ease-out);
}

.btn--primary {
  --btn-bg: var(--c-red);
  --btn-border: var(--c-red);
}

.btn--outline-light {
  --btn-border: var(--c-white);
}

.btn--outline-dark {
  --btn-fg: var(--c-dark);
  --btn-border: rgb(14 3 59 / 0.7);
}

.btn--block {
  width: 100%;
}

/* Tailles : L (défaut) · M · S */
.btn--m {
  min-height: 0;
  padding: 12px 20px 12px 25px;
  font-size: 1.0625rem;
  line-height: 1;
}

.btn--s {
  min-height: 0;
  padding: 6px 9px 6px 11px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 400;
}

.btn--s .icon {
  width: 14px;
  height: 14px;
  -webkit-mask-size: 6px 5.4px;
  mask-size: 6px 5.4px;
}

/* Téléchargement : icône flèche vers le bas */
.btn--download {
  gap: 18px;
}

.icon--download {
  -webkit-mask-image: var(--icon-download);
  mask-image: var(--icon-download);
  -webkit-mask-size: 9px 14px;
  mask-size: 9px 14px;
}

.btn--s .icon--download {
  -webkit-mask-size: 6.75px 10.5px;
  mask-size: 6.75px 10.5px;
}

@media (hover: hover) {
  .btn:hover {
    --btn-border: transparent;
  }

  .btn:hover::before {
    opacity: 1;
  }

  .btn:hover .icon {
    transform: translateX(4px);
  }

  .btn:hover .icon--download {
    transform: translateY(2px);
  }
}

/* Lien texte + flèche */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-red);
  font-size: 1rem;
  line-height: 1.55;
}

.link-arrow .icon {
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .link-arrow:hover .icon {
    transform: translateX(4px);
  }
}

.link-arrow--strong {
  font-weight: 600;
}

.link-arrow--dark {
  color: var(--c-dark);
}

/* sur fond sombre : libellé mono (cf. « Voir les produits » des cartes Applications) */
.link-arrow--mono {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--c-white);
}

/* Lien « étendu » : toute la carte devient cliquable, le libellé reste le titre */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stretched-link:focus-visible {
  outline: none;
}

.stretched-link:focus-visible::after {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: inherit;
}

/* Sélecteur de langue */
.lang-switch {
  display: flex;
  gap: 20px;
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  line-height: 1.17;
}

.lang-switch a {
  position: relative;
  opacity: 0.7;
  transition: opacity var(--dur-fast) linear;
}

.lang-switch a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}

.lang-switch a[aria-current="true"] {
  opacity: 1;
}

.lang-switch a[aria-current="true"]::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .lang-switch a:hover {
    opacity: 1;
  }

  .lang-switch a:hover::after {
    transform: scaleX(1);
  }
}

/* 6. En-tête & navigation
   ========================================================================== */
.site-header__bar {
  position: fixed;
  z-index: var(--z-header);
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 15px 0 25px;
  color: var(--c-white);
}

/* Fond « pilule » : pseudo-élément pour ne pas créer de bloc conteneur
   (les méga menus sont en position fixe par rapport à la fenêtre). */
.site-header__bar::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 12px;
  background: var(--c-header);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -24px rgb(9 0 45 / 0.6);
  transition:
    opacity var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.site-header__logo {
  position: relative;
  z-index: 3;
  display: block;
  flex: none;
  border-radius: 6px;
}

.site-header__logo img {
  width: 151px;
  height: auto;
  transition: width var(--dur) var(--ease-out);
}

.site-header__tools {
  display: none;
}

/* Bouton burger (mobile) */
.burger {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-white-30);
  border-radius: 50%;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.burger__lines {
  position: relative;
  width: 18px;
  height: 11px;
}

.burger__lines span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur-fast) linear,
    top var(--dur) var(--ease-out);
}

.burger__lines span:nth-child(1) {
  top: 0;
}

.burger__lines span:nth-child(2) {
  top: 5px;
}

.burger__lines span:nth-child(3) {
  top: 10px;
}

.burger[aria-expanded="true"] {
  border-color: transparent;
}

.burger[aria-expanded="true"] .burger__lines span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg) scaleX(1.33);
}

.burger[aria-expanded="true"] .burger__lines span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__lines span:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg) scaleX(1.33);
}

@media (hover: hover) {
  .burger:hover {
    background: rgb(255 255 255 / 0.08);
  }
}

/* Navigation - mobile : tiroir plein écran */
.site-nav {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: var(--c-white);
  color: var(--c-dark);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

/* Fondu sous la barre flottante : le contenu du tiroir défile dessous */
.site-nav::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 96px;
  background: linear-gradient(var(--c-white) 72%, rgb(255 255 255 / 0));
  pointer-events: none;
}

.is-menu-open .site-nav {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility 0s;
}

.site-nav__scroll {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 100px;
}

.site-nav__list {
  padding: 0 25px;
}

.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-grey);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  transition: color var(--dur-fast) linear;
}

.site-nav__link .icon--arrow-sm {
  color: var(--c-dark);
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .site-nav__link:hover .icon--arrow-sm {
    transform: translateX(4px);
  }
}

/* Apparition échelonnée des entrées du tiroir */
.site-nav__item {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity var(--dur) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.is-menu-open .site-nav__item {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}

/* Niveau 2 : un seul sous-menu affiché, les autres entrées masquées */
.site-nav.is-sub-open .site-nav__item:not(.is-active),
.site-nav.is-sub-open .site-nav__item.is-active > .site-nav__link {
  display: none;
}

.site-nav__mobile-footer {
  display: grid;
  gap: 24px;
  margin-top: auto;
  padding: 99px 25px 0;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 59px;
  padding: 0 16px;
  border: 1px solid var(--c-grey);
  border-radius: var(--radius-btn);
  transition: border-color var(--dur-fast) linear;
}

.search-field:focus-within {
  border-color: var(--c-dark);
}

.search-field .icon {
  color: var(--c-dark);
}

.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-size: 0.875rem;
  outline: none;
}

.search-field input::placeholder {
  color: rgb(23 24 56 / 0.6);
}

.site-nav__mobile-footer .lang-switch {
  justify-self: center;
  color: var(--c-dark);
}

.site-nav__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 8px -25px 0;
  padding: 9px 0;
  background: var(--c-dark);
  color: var(--c-white);
}

.social-label {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.social-link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .social-link:hover {
    background: var(--c-white);
    color: var(--c-night);
  }
}

/* Navigation - desktop */
@media (min-width: 75em) {
  /* Au repos : pleine largeur, posé sur le hero, défile avec la page */
  .site-header__bar {
    position: absolute;
    top: var(--header-top);
    left: var(--header-inset);
    right: var(--header-inset);
    gap: 24px;
    padding: 0;
  }

  .site-header__bar::before {
    opacity: 0;
    box-shadow: none;
  }

  .site-header__logo img {
    width: 261px;
    transition: none;
  }

  .burger {
    display: none;
  }

  .site-nav {
    position: static;
    z-index: 3;
    opacity: 1;
    visibility: visible;
    background: none;
    color: inherit;
    transition: none;
  }

  .site-nav::before {
    display: none;
  }

  .site-nav__scroll {
    display: contents;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(28px, -20.4px + 4.03vw, 55px);
    padding: 0;
  }

  .site-nav__item {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .site-nav__item--mobile,
  .site-nav__mobile-footer,
  .site-nav__link .icon--arrow-sm {
    display: none;
  }

  .site-nav__link {
    position: relative;
    display: block;
    width: auto;
    height: var(--header-height);
    padding: 0;
    border: 0;
    font-size: 1rem;
    line-height: calc(var(--header-height) + 9px);
    white-space: nowrap;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 3px;
    margin-left: -9px;
    background: var(--c-red);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease-out);
  }

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

  @media (hover: hover) {
    .site-nav__link:hover::after {
      transform: scaleX(1);
    }
  }

  .site-header__tools {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, -50.27px + 5.522vw, 46px); /* 46 px : maquettes 1870, 2300 et sticky */
    padding-top: 7px;
  }

  .site-header__tools .lang-switch {
    margin-top: 8px;
  }

  .site-header__search {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 4px -8px 0;
    border-radius: 50%;
    transition: background-color var(--dur-fast) linear;
  }

  @media (hover: hover) {
    .site-header__search:hover {
      background: rgb(255 255 255 / 0.1);
    }
  }

  /* Sticky : une fois l'en-tête sorti de l'écran, une barre compacte pleine largeur
     descend du haut de la fenêtre (maquette « IMF-desktop-home-sticky-header ») */
  .site-header.is-sticky {
    --header-top: 10px;
    --mega-top: 90px;
  }

  .site-header.is-sticky .site-header__bar {
    position: fixed;
    left: 10px;
    right: 10px;
    height: 69px;
    padding: 0 40px;
    animation: header-in 0.55s var(--ease-out) backwards;
  }

  .site-header.is-unsticking .site-header__bar {
    pointer-events: none;
    animation: header-out 0.26s var(--ease-in-out) both;
  }

  /* retour à l'état de repos : l'en-tête réapparaît en fondu */
  .site-header.is-returning .site-header__bar {
    animation: header-fade 0.4s var(--ease-out) backwards;
  }

  .site-header.is-sticky .site-header__bar::before {
    opacity: 1;
    box-shadow: 0 18px 40px -24px rgb(9 0 45 / 0.6);
  }

  .site-header.is-sticky .site-header__logo img {
    width: 175px;
  }

  /* En barre compacte, les éléments sont simplement centrés verticalement */
  .site-header.is-sticky .site-nav__link {
    height: 69px;
    line-height: 69px;
  }

  .site-header.is-sticky .site-header__tools {
    gap: 46px;
    padding-top: 0;
  }

  .site-header.is-sticky .site-header__tools .lang-switch,
  .site-header.is-sticky .site-header__search {
    margin-top: 0;
  }

  .site-header.is-sticky .site-header__contact {
    min-height: 0;
    padding: 6px 9px 6px 11px;
    border-radius: 9px;
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .site-header.is-sticky .site-header__contact .icon {
    width: 14px;
    height: 14px;
    -webkit-mask-size: 6px 5.4px;
    mask-size: 6px 5.4px;
  }

  @keyframes header-in {
    from {
      top: -79px;
      opacity: 0;
    }

    to {
      top: 10px;
      opacity: 1;
    }
  }

  @keyframes header-out {
    from {
      top: 10px;
      opacity: 1;
    }

    to {
      top: -79px;
      opacity: 0;
    }
  }

  @keyframes header-fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* 7. Méga menus
   ========================================================================== */

/* Mobile : sous-menu (niveau 2) affiché dans le tiroir */
.mega {
  display: none;
}

.mega.is-open {
  display: block;
  animation: mega-slide-in var(--dur-slow) var(--ease-out) backwards;
}

@keyframes mega-down {
  from {
    opacity: 0;
    translate: 0 -10px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes mega-up {
  from {
    opacity: 1;
    translate: 0 0;
  }

  to {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes mega-slide-in {
  from {
    opacity: 0;
    translate: 24px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.mega__mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-grey);
}

.mega__mobile-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.mega__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -14px -14px -14px 0;
  border-radius: 50%;
  color: var(--c-grey-dark);
}

.mega__back .icon {
  width: 9px;
  height: 9px;
}

.mega__close {
  display: none;
}

.mega__inner {
  display: grid;
  gap: 40px;
  padding-top: 28px;
}

.mega__intro {
  display: grid;
  gap: 6px;
  margin-bottom: 34px;
}

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

.mega__title em {
  font-style: normal;
  color: var(--c-red);
}

.mega__meta {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Familles de produits */
.mega-families {
  display: grid;
  gap: 40px;
}

.mega-family__head {
  display: grid;
  gap: 10px;
  margin-bottom: 30px;
}

.mega-family__num {
  color: var(--c-red);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

.mega-family__title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.mega-family__list {
  border: 1px solid var(--c-grey);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-white);
}

.mega-product {
  position: relative;
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr);
  align-items: center;
  gap: 21px;
  min-height: 110px;
  padding: 14px 18px 14px 24px;
  transition: background-color var(--dur-fast) linear;
}

.mega-family__list > li + li {
  border-top: 1px solid var(--c-grey);
}

.mega-product__num {
  position: absolute;
  top: 9px;
  left: 13px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  color: var(--c-ink);
}

/* nom en ligne : le filet de survol suit chaque ligne d'un nom sur deux lignes */
.mega-product__text {
  display: block;
  line-height: 1.05;
}

.mega-product__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.mega-product__desc {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.7;
}

@media (hover: hover) {
  .mega-product:hover {
    background: var(--c-beige);
  }

  .mega-product:hover .product-media img {
    transform: scale(1.08);
  }
}

/* Visuel produit cadré comme dans la maquette (zone 187 × 180,4) */
.product-media {
  position: relative;
  display: block;
  aspect-ratio: 187 / 180.4;
}

.product-media img {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 100%);
  max-width: none;
  height: auto;
  transform-origin: 50% 60%;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Secteurs d'application (méga menu) */
.mega-sectors {
  display: grid;
}

.mega-sector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 15px 18px 0;
  border-bottom: 1px solid var(--c-grey);
}

.mega-sector__media,
.mega-sector__desc {
  display: none;
}

.mega-sector__title {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
}

.mega-sector .icon--chevron {
  color: var(--c-dark);
}

/* Rubriques société (méga menu) */
.mega-rubrics {
  display: grid;
}

.mega-rubric {
  position: relative;
}

.mega-rubric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 15px 18px 0;
  border-bottom: 1px solid var(--c-grey);
}

.mega-rubric__title {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
}

.mega-rubric__tag,
.mega-rubric__body,
.mega-rubric__links {
  display: none;
}

/* Cartes latérales sombres */
.mega-aside-card {
  display: grid;
  gap: 18px;
  padding: 36px 24px;
  border-radius: var(--radius-card);
  background: var(--c-night);
  color: var(--c-white);
}

.mega-aside-card__kicker {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-red);
}

.mega-aside-card__title {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
}

.mega-aside-card__text {
  font-size: 0.9375rem;
  line-height: 1.38;
}

.btn--sm {
  min-height: 0;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 400;
}

.btn--sm .icon--arrow {
  width: 14px;
  height: 14px;
  -webkit-mask-size: 6px 5.4px;
  mask-size: 6px 5.4px;
}

.mega-aside-card__tel {
  padding-top: 20px;
  border-top: 1px solid var(--c-white-30);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.mega-news {
  gap: 0;
  padding: 28px 24px;
}

.mega-news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  text-transform: uppercase;
}

.mega-news__head p {
  color: var(--c-red);
}

.mega-news__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mega-news__item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--c-white-30);
}

.mega-news__thumb {
  overflow: hidden;
  border-radius: 4px;
}

.mega-news__thumb img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.mega-news__meta {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-red);
}

.mega-news__title {
  display: inline; /* le filet de survol suit chaque ligne du titre */
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

@media (hover: hover) {
  .mega-news__item:hover .mega-news__thumb img {
    transform: scale(1.1);
  }
}

/* « À voir aussi » */
.mega__more {
  display: grid;
  gap: 16px;
  padding: 40px 0 0;
}

.mega__more-label {
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  line-height: 15.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(10 14 42 / 0.6);
}

.pills {
  display: grid;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 100px;
  color: var(--c-ink);
  font-size: 0.75rem;
  line-height: 17px;
  transition:
    background-color var(--dur-fast) linear,
    color var(--dur-fast) linear;
}

.pill .icon--arrow-sm {
  color: var(--c-red);
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .pill:hover .icon--arrow-sm {
    transform: translateX(3px);
  }
}

/* Variantes mobiles : les panneaux Applications et Société restent des listes */
.mega--applications .mega__aside,
.mega--applications .mega__more,
.mega--societe .mega__aside,
.mega--societe .mega__more,
.mega--applications .mega__intro,
.mega--societe .mega__intro {
  display: none;
}

.mega--applications .mega__inner,
.mega--societe .mega__inner {
  padding-top: 8px;
}

/* Desktop : panneaux pleine largeur sous l'en-tête */
@media (min-width: 75em) {
  .mega {
    position: fixed;
    z-index: 2;
    top: calc(var(--mega-top) - var(--scroll-y, 0px));
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--mega-top) + var(--scroll-y, 0px));
    max-height: calc(100dvh - var(--mega-top) + var(--scroll-y, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-white);
    box-shadow: 0 4px 40px rgb(0 0 0 / 0.5);
    color: var(--c-dark);
    white-space: normal;
  }

  .mega.is-open {
    animation: mega-down var(--dur) var(--ease-out) backwards;
  }

  .mega.is-closing {
    pointer-events: none;
    animation: mega-up 0.22s var(--ease-in-out) both;
  }

  .mega__mobile-head {
    display: none;
  }

  .mega__close {
    position: absolute;
    top: 50px;
    right: max(12px, (100vw - var(--container-wide)) / 2 - 120px);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--c-grey-dark);
    transition:
      background-color var(--dur-fast) linear,
      color var(--dur-fast) linear;
  }

  @media (hover: hover) {
    .mega__close:hover {
      background: var(--c-beige);
      color: var(--c-dark);
    }
  }

  .mega__inner,
  .mega--applications .mega__inner,
  .mega--societe .mega__inner {
    grid-template-columns: minmax(0, 1fr) var(--aside, clamp(300px, 26vw, 487px));
    gap: 30px 40px;
    width: min(100% - 2 * var(--gutter), var(--container-wide));
    margin-inline: auto;
    padding: 28px 0 var(--mega-pb, 46px);
  }

  /* Hauteurs de panneaux calées sur la maquette (912 / 766 / 587 px) */
  .mega--produits {
    --aside: clamp(300px, 26vw, 487px);
    --mega-pb: 34px;
  }

  .mega--applications {
    --mega-pb: 64px;
  }

  .mega--societe {
    --mega-pb: 82px;
  }

  .mega--produits .mega__inner {
    column-gap: 30px;
  }

  .mega--applications,
  .mega--societe {
    --aside: 320px;
  }

  .mega__intro,
  .mega--applications .mega__intro,
  .mega--societe .mega__intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    margin-bottom: 28px;
  }

  .mega__title {
    font-size: 1.8125rem;
    letter-spacing: -0.05em;
  }

  .mega__main {
    display: flex;
    flex-direction: column;
  }

  .mega__aside,
  .mega--applications .mega__aside,
  .mega--societe .mega__aside {
    display: block;
    padding-top: 7px;
  }

  .mega-families {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
  }

  .mega-family {
    padding-top: 30px;
    border-top: 1px solid var(--c-grey);
  }

  .mega-sectors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 25px;
  }

  .mega-sector {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 0;
    border: 0;
  }

  .mega-sector .icon--chevron {
    display: none;
  }

  .mega-sector__media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 373 / 175;
    background: var(--c-beige-dark);
  }

  .mega-sector__media picture {
    height: 100%;
  }

  .mega-sector__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
  }

  .mega-sector__title {
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .mega-sector__desc {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--c-grey-dark);
  }

  @media (hover: hover) {
    .mega-sector:hover .mega-sector__media img {
      transform: scale(1.06);
    }
  }

  .mega-rubrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 30px 20px;
  }

  .mega-rubric__head {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 90px;
    padding: 0 0 20px;
    border: 0;
  }

  .mega-rubric__head .icon--chevron {
    display: none;
  }

  .mega-rubric__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .mega-rubric__tag {
    display: inline-flex;
    gap: 8px;
  }

  .mega-rubric__tag::before {
    height: 11px;
  }

  .mega-rubric__body {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--c-grey);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .mega-rubric__links {
    display: block;
    border-top: 1px solid var(--c-grey);
  }

  .mega-rubric__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 10px 13px 0;
    border-bottom: 1px solid var(--c-grey);
    font-size: 0.875rem;
    line-height: 1.4;
    transition: color var(--dur-fast) linear;
  }

  .mega-rubric__links .icon--arrow-sm {
    width: 11px;
    color: var(--c-red);
    transition: transform var(--dur) var(--ease-out);
  }

  @media (hover: hover) {
    .mega-rubric__links a:hover .icon--arrow-sm {
      transform: translateX(4px);
    }
  }

    .mega__more,
  .mega--applications .mega__more,
  .mega--societe .mega__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px var(--gutter);
    background: var(--c-beige);
  }

  .mega__more-label {
    padding-right: 6px;
  }

  .pills {
    display: contents;
  }

  .pill {
    background: var(--c-white);
  }

  @media (hover: hover) {
    .pill:hover {
      background: var(--c-dark);
      color: var(--c-white);
    }
  }
}

/* Voile derrière le méga menu */
.mega-backdrop {
  position: fixed;
  z-index: calc(var(--z-header) - 1);
  inset: 0;
  background: rgb(23 24 56 / 0.8);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

@media (min-width: 75em) {
  .is-mega-open .mega-backdrop {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--dur) var(--ease-out),
      visibility 0s;
  }
}

/* Verrouillage du défilement quand le tiroir mobile est ouvert */
.has-menu-open {
  overflow: hidden;
}

/* 8. Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 79.70px + 7.770vw, 225px) 0 clamp(48px, 40.89px + 1.824vw, 75px);
  background: var(--c-navy);
  color: var(--c-white);
}

.hero__decor {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.hero__glow,
.hero__circles {
  position: absolute;
  max-width: none;
}

/* Mobile : composition dédiée de la maquette (935 × 1250, décalée -260 / -30) ;
   halos en raster basse définition, filets ronds en SVG par-dessous */
.hero__glow,
.hero__circles {
  left: -66.67vw;
  top: -7.7vw;
  width: 239.74vw;
  height: auto;
}

@media (min-width: 56.25em) {
  /* Desktop : halo (raster basse déf.) + cercles vectoriels nets */
  .hero__glow {
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 0;
  }

  .hero__circles {
    left: 5.67%;
    top: -21.93vw;
    width: 100.71%;
    height: auto;
  }
}

.hero__top {
  display: grid;
  gap: 36px;
}

.hero__top > * {
  min-width: 0;
}

.hero__text {
  display: grid;
  gap: 24px;
  justify-items: start;
}

.hero__title-block {
  display: grid;
  gap: 16px;
}

.hero__title {
  max-width: 8.3em;
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.hero__lede {
  max-width: 431px;
  font-size: var(--fs-hero-lede);
  line-height: 1.55;
  opacity: 0.7;
}

.hero__actions {
  display: grid;
  gap: 12px;
  width: 100%;
}

/* Soulignement : « pression » sur mobile, « régulation » sur desktop */
.hero__title .u-gradient--desktop::after {
  display: none;
}

.hero__visual {
  display: grid;
  gap: 13px;
}

.hero__photo {
  position: relative;
  isolation: isolate; /* les photos empilées restent sous la vignette « Nos produits » */
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 750 / 543;
  background: var(--c-night);
}

.hero__photo img {
  position: absolute;
  left: -7.73%;
  top: -9.21%;
  width: 114%;
  max-width: none;
  height: 115.65%;
  object-fit: cover;
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 100% 100%, rgb(0 0 0 / 0.55), transparent 70%);
  pointer-events: none;
}

.hero__photo-label {
  position: absolute;
  z-index: 1;
  right: clamp(16px, 13.4px + 0.68vw, 26px);
  bottom: clamp(16px, 14.16px + 0.473vw, 23px);
  display: grid;
  justify-items: end;
  gap: 8px;
  font-size: clamp(1.0625rem, 0.995rem + 0.27vw, 1.3125rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero__photo-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--c-red);
}

/* Carte « Nos produits » */
.products-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: 98px;
  padding: 0 11px 0 21px;
  border-radius: var(--radius-btn);
  background: var(--c-white);
  box-shadow: 0 24px 48px -16px rgb(10 14 42 / 0.1);
  color: var(--c-dark);
}

.products-card__head {
  display: grid;
  justify-items: start;
  gap: 10px;
  width: 90px;
  flex: none;
}

.products-card__title {
  font-size: clamp(1.05rem, 1.04rem + 0.04vw, 1.125rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.products-card__all {
  position: relative;
  isolation: isolate;
  padding: 6px 7px;
  border: 1px solid var(--c-red);
  border-radius: 6px;
  color: var(--c-red);
  font-size: 0.6875rem;
  line-height: 1.3;
  transition:
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* même survol que les boutons contour : contour dégradé en fondu */
.products-card__all::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .products-card__all:hover {
    border-color: transparent;
  }

  .products-card__all:hover::before {
    opacity: 1;
  }
}

.products-card__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 11px 3px 6.5px;
  border-radius: 14px;
  font-size: 0.76rem;
  line-height: 1.15;
  transition: background-color var(--dur-fast) linear;
}

.products-card__item .product-media {
  width: 75px;
  flex: none;
}

@media (hover: hover) {
  .products-card__item:hover {
    background: var(--c-beige);
  }

  .products-card__item:hover .product-media img {
    transform: scale(1.08);
  }
}

/* Chiffres clés */
.key-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 36px;
}

.key-figure {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "value unit"
    "label label";
  justify-content: start;
  column-gap: 2px;
  row-gap: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--c-white-30);
}

.key-figure__value {
  grid-area: value;
  font-size: var(--fs-figure);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.key-figure__tilde {
  font-size: 0.5em;
  vertical-align: 0.15em;
}

.key-figure__unit {
  grid-area: unit;
  align-self: start;
  padding-top: 0.15em;
  font-size: var(--fs-figure-unit);
  font-weight: 300;
  line-height: 0.97;
  letter-spacing: -0.03em;
  opacity: 0.7;
}

.key-figure__label {
  grid-area: label;
  font-family: var(--ff-code);
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (min-width: 37.5em) {
  .products-card {
    max-width: 370px;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    width: auto;
  }
}

@media (min-width: 56.25em) {
  .hero__top {
    grid-template-columns: minmax(0, 672fr) minmax(0, 750fr);
    align-items: start;
    gap: clamp(40px, -18.45px + 6.495vw, 103px);
  }

  .hero__text {
    gap: 27px;
  }

  .hero__title-block {
    gap: 22px;
  }

  .hero__title {
    letter-spacing: -0.05em;
  }

  .hero__title .u-gradient--mobile::after {
    display: none;
  }

  .hero__title .u-gradient--desktop::after {
    display: block;
  }

  .hero__visual {
    position: relative;
    display: block;
    margin-top: 12px;
  }

  .products-card {
    position: absolute;
    left: -84px;
    top: 71.64%;
    width: 370px;
    height: 105px;
    padding: 0 16px 0 24px;
  }

  .products-card__head {
    width: 103px;
  }

  .products-card__item {
    gap: 12px;
    padding: 3px 12px 3px 7px;
    font-size: 0.8125rem;
  }

  .products-card__item .product-media {
    width: 80px;
  }

  .key-figures {
    justify-content: space-between;
    gap: 30px 24px;
    margin-top: clamp(48px, 27.59px + 2.268vw, 70px);
  }

  .key-figure {
    min-height: 100px;
    padding-left: 30px;
    column-gap: 2px;
  }

  .key-figure__label {
    margin-top: 0;
  }

  .key-figure__tilde {
    font-size: 1em;
    vertical-align: 0;
  }
}

@media (min-width: 56.25em) and (max-width: 74.99em) {
  .products-card {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 13px;
  }
}

/* Animation d'entrée du hero (CSS seul : visible même sans JS) */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-enter],
  .page-hero [data-enter] {
    animation: enter-up 1s var(--ease-out) backwards;
    animation-delay: calc(var(--d, 0) * 90ms + 80ms);
  }

  .hero__photo[data-enter] {
    animation-name: enter-photo;
    animation-duration: 1.3s;
  }

  /* zoom d'entrée : première photo seulement (les suivantes arrivent en fondu) */
  .hero__photo[data-enter] > .hero__slide:first-child img {
    animation: enter-zoom 1.8s var(--ease-out) backwards;
    animation-delay: 80ms;
  }

  /* Chiffres clés : item par item, de gauche à droite ; le chiffre puis son libellé
     glissent de -20 px en fondu */
  .hero .key-figure[data-enter] {
    --kf: calc((var(--d, 5) - 5) * 160ms + 650ms);
    animation: kf-line 0.5s var(--ease-out) backwards;
    animation-delay: var(--kf);
  }

  .hero .key-figure[data-enter] > * {
    animation: kf-in 0.6s var(--ease-out) backwards;
    animation-delay: var(--kf);
  }

  .hero .key-figure[data-enter] > .key-figure__label {
    animation-delay: calc(var(--kf) + 110ms);
  }
}

@keyframes kf-line {
  from {
    border-left-color: transparent;
  }
}

@keyframes kf-in {
  from {
    opacity: 0;
    translate: 0 -20px;
  }
}

/* pas d'étape « to » : l'élément rejoint sa propre opacité (chapô à 0,7) sans à-coup final */
@keyframes enter-up {
  from {
    opacity: 0;
    translate: 0 28px;
  }
}

@keyframes enter-photo {
  from {
    opacity: 0;
    clip-path: inset(8% 0 8% 0 round var(--radius-card));
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--radius-card));
  }
}

@keyframes enter-zoom {
  from {
    scale: 1.12;
  }

  to {
    scale: 1;
  }
}

/* Titre : apparition ligne par ligne (hero.js) - un masque par ligne, élargi pour
   laisser passer accents, jambages et soulignement. En colonne flex, les marges
   négatives des lignes ne fusionnent pas : la hauteur du titre reste identique
   pendant et après l'animation. */
.is-split {
  display: flex;
  flex-direction: column;
}

.split-line {
  display: block;
  overflow: hidden;
  overflow: clip;
  margin-block: -0.18em -0.3em;
  padding-block: 0.18em 0.3em;
}

.split-line__inner {
  display: block;
  animation: line-up 1.1s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms + 170ms);
}

@keyframes line-up {
  from {
    opacity: 0;
    transform: translateY(150%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Photo : les secteurs se succèdent en fondu enchaîné (hero.js). La nouvelle passe
   au-dessus de l'ancienne, qui ne disparaît qu'une fois recouverte. */
.hero__slide {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0s 1.3s,
    visibility 0s 1.3s;
}

.hero__slide.is-current {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.3s var(--ease-in-out);
}

.hero__slide:not(:first-child) img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hero__slide .hero__photo-label {
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 0.4s linear,
    translate 0.4s var(--ease-out);
}

.hero__slide.is-current .hero__photo-label {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.8s 0.5s var(--ease-out),
    translate 0.8s 0.5s var(--ease-out);
}

/* Vignette : les familles se succèdent en glissant vers le haut (hero.js) */
.products-card__slides {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-width: 0;
}

.products-card__slides > .products-card__item {
  position: absolute;
  top: 50%;
  left: 0;
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  translate: 0 -15%;
  transition:
    opacity 0.4s linear,
    translate 0.6s var(--ease-out),
    visibility 0s 0.6s;
}

.products-card__slides > .products-card__item.is-current {
  opacity: 1;
  visibility: visible;
  translate: 0 -50%;
  transition:
    opacity 0.5s 0.15s linear,
    translate 0.7s 0.1s var(--ease-out),
    visibility 0s;
}

.products-card__slides > .products-card__item.is-leaving {
  translate: 0 -85%;
}

/* 9. Produits
   ========================================================================== */
.products {
  padding: var(--section-pad) 0 clamp(60px, 52.09px + 2.027vw, 90px);
}

/* Aide au choix « 4 questions » (composant .wizard - cf. _docs/brief-aide-au-choix.md v2.1)
   Variantes : .wizard--band (bandeau) · .wizard--compact (méga menu, menu mobile)
   États : repos · .is-active (questions) · .is-results
   -------------------------------------------------------------------------- */
.wizard {
  --wz-dim: rgb(255 255 255 / 0.66); /* textes secondaires : opacité ≥ 0,62 pour l'AA sur le fond nuit */
  --wz-line: rgb(255 255 255 / 0.15);
  position: relative;
  isolation: isolate;
  background: var(--c-night);
  color: var(--c-white);
}

.wizard[aria-busy="true"] {
  cursor: progress;
}

/* En-tête : surtitre, titre, barre d'étapes, compteur */
.wizard__title {
  font-size: var(--fs-title-l);
  font-weight: 400;
  line-height: 1;
}

.wizard__counter {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.82);
}

.wizard__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wizard__step {
  display: grid;
  align-content: start;
  gap: 8px;
  width: 100%;
  font-family: var(--ff-code);
  font-size: 0.59375rem;
  line-height: 12.35px;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  color: var(--wz-dim);
  transition: color var(--dur-fast) linear;
}

.wizard__step::before {
  content: "";
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.25);
  transition: background-color var(--dur) var(--ease-out);
}

.wizard__step-label,
.wizard__step-ans {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard__step b {
  margin-right: 0.35em;
  font-weight: 700;
  color: rgb(255 255 255 / 0.82);
}

/* réponse choisie, sous le nom de l'étape */
.wizard__step-ans {
  min-height: 16px;
  font-family: var(--ff-sans);
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(255 255 255 / 0.9);
}

.wizard:not(.is-active) .wizard__step-ans {
  display: none;
}

.wizard__step.is-done::before {
  background: rgb(255 74 74 / 0.6);
}

.wizard__step.is-current {
  color: var(--c-white);
}

.wizard__step.is-current::before {
  background: var(--c-red);
}

.wizard__step.is-current b {
  color: var(--c-red);
}

@media (hover: hover) {
  button.wizard__step:hover {
    color: var(--c-white);
  }

  button.wizard__step:not(.is-done, .is-current):hover::before {
    background: rgb(255 255 255 / 0.5);
  }
}

/* Question */
.wizard__stage {
  display: grid;
  gap: 24px;
}

.wizard__q {
  display: grid;
  align-content: start;
  gap: 11px;
}

.wizard__kicker {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 15.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-red);
}

.wizard__q-title {
  max-width: 427px;
  font-size: var(--fs-title-l);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.wizard__q-title:focus {
  outline: none;
}

.wizard__help {
  max-width: 440px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.7);
}

.wizard__chips,
.wizard__recap {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}

.wizard__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 42px;
  padding: 11px 18px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  color: var(--c-white);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
  transition:
    background-color var(--dur-fast) linear,
    border-color var(--dur-fast) linear,
    color var(--dur-fast) linear,
    opacity var(--dur-fast) linear;
}

/* « Je ne sais pas encore », « Indifférent » : aucun filtre */
.wizard__chip.is-neutral {
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.22);
}

.wizard__chip[aria-pressed="true"] {
  border-color: var(--c-white);
  background: var(--c-white);
  color: var(--c-night);
}

/* option qui mènerait à 0 modèle */
.wizard__chip:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

/* nombre de modèles obtenus en choisissant l'option */
.wizard__n {
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.88);
  font-family: var(--ff-code);
  font-size: 0.65625rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wizard__chip[aria-pressed="true"] .wizard__n {
  background: rgb(14 3 59 / 0.08);
  color: var(--c-night);
}

@media (hover: hover) {
  .wizard__chip:not(:disabled):hover {
    border-color: rgb(255 255 255 / 0.5);
    background: rgb(255 255 255 / 0.1);
  }

  .wizard__chip[aria-pressed="true"]:hover {
    background: var(--c-white);
  }
}

/* Pied : navigation · Recommencer · compteur · bouton */
.wizard__foot,
.wizard__foot-nav,
.wizard__foot-end,
.wizard__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wizard__foot {
  justify-content: space-between;
  gap: 20px 24px;
}

.wizard__foot-nav {
  gap: 8px 18px;
}

.wizard__foot-end {
  justify-content: flex-end;
  gap: 14px 24px;
  margin-left: auto;
}

.wizard__prev {
  min-height: 42px;
  padding: 12px 19px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 8px;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  transition:
    border-color var(--dur-fast) linear,
    color var(--dur-fast) linear;
}

.wizard__prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wizard__skip {
  min-height: 42px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--wz-dim);
  transition: color var(--dur-fast) linear;
}

.wizard__status {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 15.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wz-dim);
}

.wizard__restart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  color: rgb(255 255 255 / 0.88);
  font-size: 0.84375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 4px;
  transition:
    color var(--dur-fast) linear,
    text-decoration-color var(--dur-fast) linear;
}

.icon--restart {
  width: 16px;
  height: 16px;
  -webkit-mask-image: var(--icon-restart);
  mask-image: var(--icon-restart);
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .wizard__prev:not(:disabled):hover {
    border-color: var(--c-white);
    color: var(--c-white);
  }

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

  .wizard__restart:hover {
    color: var(--c-white);
    text-decoration-color: var(--c-white);
  }

  .wizard__restart:hover .icon--restart {
    transform: rotate(-120deg);
  }
}

/* compteur en continu : nombre, libellé, part du catalogue */
.wizard__meter {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wizard__meter-n {
  min-width: 1.3em;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wizard__meter-text {
  display: grid;
  gap: 8px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.82);
}

.wizard__meter-bar {
  display: block;
  width: 150px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.16);
}

.wizard__meter-bar::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--c-red);
  transform: scaleX(var(--p, 1));
  transform-origin: left;
  transition: transform var(--dur) cubic-bezier(0.2, 0.7, 0.2, 1);
}

.btn--wiz {
  min-height: 51px;
  padding: 16px 20px 16px 25px;
  border-radius: 14px;
  font-size: 1.0625rem;
  line-height: 1;
}

/* Résultats (dans le bandeau) */
.wizard__res-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}

.wizard__res-head .wizard__q {
  flex: 1 1 520px;
  min-width: 0;
  gap: 12px;
}

.wizard__res-head .wizard__q-title {
  max-width: none;
}

.wizard__note {
  flex: 0 1 300px;
  font-size: 0.78125rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.68);
}

.wizard__recap {
  gap: 8px;
  margin-top: 2px;
}

.wizard__recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  color: var(--c-white);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  transition:
    background-color var(--dur-fast) linear,
    border-color var(--dur-fast) linear;
}

.wizard__recap-k {
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wz-dim);
}

.icon--edit {
  width: 12px;
  height: 12px;
  color: var(--wz-dim);
  -webkit-mask-image: var(--icon-edit);
  mask-image: var(--icon-edit);
}

@media (hover: hover) {
  .wizard__recap-chip:hover {
    border-color: var(--c-white);
    background: rgb(255 255 255 / 0.06);
  }
}

.wizard__zero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 20px 22px;
  border: 1px dashed rgb(255 255 255 / 0.3);
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.74);
}

.wizard__zero strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-white);
}

.wizard__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.wizard__tile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.04);
  color: var(--c-white);
  transition:
    background-color var(--dur-fast) linear,
    border-color var(--dur-fast) linear;
}

.wizard__thumb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 8px;
  background: #f1efe9;
}

.wizard__thumb img {
  width: auto;
  max-width: 44px;
  height: auto;
  max-height: 44px;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* pictogramme générique tant que la série n'a pas de photo */
.wizard__thumb:empty::before {
  content: "";
  width: 40px;
  height: 28px;
  background: #a9a6b8;
  -webkit-mask: var(--icon-product) no-repeat center / contain;
  mask: var(--icon-product) no-repeat center / contain;
}

.wizard__tile-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wizard__tile-fam,
.wizard__tile-spec {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard__tile-fam {
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wz-dim);
}

.wizard__tile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.wizard__o2 {
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-night);
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
}

.wizard__tile-spec {
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.8);
}

@media (hover: hover) {
  .wizard__tile:hover {
    border-color: rgb(255 255 255 / 0.5);
    background: rgb(255 255 255 / 0.09);
  }

  .wizard__tile:hover .wizard__thumb img {
    transform: scale(1.1);
  }
}

.wizard__more {
  justify-self: start;
  min-height: 40px;
  padding: 0 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) linear;
}

@media (hover: hover) {
  .wizard__more:hover {
    text-decoration-color: var(--c-white);
  }
}

.wizard__error {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.8);
}

/* Apparition du contenu à chaque étape */
.wizard__body.is-entering > * {
  animation: wizard-in 0.5s var(--ease-out) backwards;
}

.wizard__body.is-entering > * + * {
  animation-delay: 0.07s;
}

@keyframes wizard-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Cibles tactiles ≥ 44 px */
@media (pointer: coarse) {
  .wizard__chip,
  .wizard__prev,
  .wizard__skip,
  .wizard__recap-chip,
  .wizard__more {
    min-height: 44px;
  }

  .wizard__skip {
    display: inline-flex;
    align-items: center;
  }

  button.wizard__step {
    min-height: 44px;
  }
}

/* -- Variante bandeau -------------------------------------------------------- */
.wizard--band {
  display: grid;
  gap: 20px;
  margin-top: clamp(48px, 31.66px + 4.189vw, 110px);
  padding: 27px 28px;
  overflow: hidden;
  border: 1px solid var(--c-white);
  border-radius: var(--radius-card);
  background: var(--c-night) url("../img/decor/glow-wizard.webp") center / cover no-repeat;
  background-image: image-set(
    url("../img/decor/glow-wizard.avif") type("image/avif"),
    url("../img/decor/glow-wizard.webp") type("image/webp")
  );
  transition:
    border-color var(--dur) var(--ease-out),
    border-radius var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.wizard--band:not(.is-active) {
  cursor: pointer;
}

.wizard--band.is-active {
  border-color: transparent;
  border-radius: 20px;
  box-shadow: 0 24px 48px -16px rgb(10 14 42 / 0.25);
}

/* halo en haut à droite de l'état question (maquette « wizard-q1 ») */
.wizard--band::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle closest-side, rgb(255 74 74 / 0.18), rgb(137 66 152 / 0.15) 28%, rgb(19 58 230 / 0.12) 57%, rgb(19 58 230 / 0) 99%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.wizard--band.is-active::after {
  opacity: 1;
}

.wizard--band .wizard__head {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.wizard--band .wizard__counter,
.wizard--band:not(.is-active) .wizard__steps {
  display: none;
}

.wizard--band .wizard__steps {
  gap: 6px;
}

.wizard--band .wizard__step {
  gap: 10px;
  font-size: clamp(0.5625rem, 0.48rem + 0.35vw, 0.65625rem);
  letter-spacing: clamp(0.02em, -0.03em + 0.2vw, 0.1em);
}

.wizard--band .wizard__step-ans {
  font-size: 0.6875rem;
}

.wizard--band.is-active .wizard__body {
  display: grid;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--wz-line);
}

.wizard--band .wizard__stage--results {
  gap: 20px;
}

/* mobile : navigation, puis compteur + Recommencer, puis bouton pleine largeur */
.wizard--band .wizard__foot-end {
  justify-content: space-between;
  width: 100%;
}

.wizard--band .wizard__foot-end .btn {
  flex: 1 1 100%;
}

.wizard--band .wizard__meter {
  order: -1;
  margin-right: auto;
}

.wizard--band .wizard__status {
  flex-basis: 100%;
}

.wizard__short {
  display: none;
}

@media (max-width: 29.99em) {
  .wizard--band .wizard__long {
    display: none;
  }

  .wizard--band .wizard__short {
    display: inline;
  }

  .wizard--band .wizard__meter-n {
    font-size: 2rem;
  }

  .wizard--band .wizard__meter-bar {
    width: 120px;
  }

  /* Recommencer : pictogramme seul (nom accessible porté par aria-label) */
  .wizard--band .wizard__restart {
    justify-content: center;
    min-width: 44px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.24);
  }

  .wizard--band .wizard__restart-text {
    display: none;
  }
}

/* repos : bouton + accroche */
.wizard__start {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 20px;
}

.wizard__teaser {
  max-width: 379px;
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.7;
}

.btn--wizard {
  min-height: 51px;
  padding: 16px 20px 16px 25px;
  border-radius: 14px;
  font-size: 1.0625rem;
  line-height: 1;
}

@media (hover: hover) {
  .btn--wizard:hover .icon--sparkle {
    transform: rotate(18deg) scale(1.12);
  }
}

@media (min-width: 37.5em) {
  .wizard--band .wizard__foot-end {
    justify-content: flex-end;
    width: auto;
  }

  .wizard--band .wizard__foot-end .btn {
    flex: none;
  }

  .wizard--band .wizard__meter {
    order: 0;
    margin-right: 0;
  }

  .wizard--band .wizard__status {
    flex-basis: auto;
  }
}

@media (min-width: 56.25em) {
  .wizard--band {
    grid-template-columns: minmax(0, 370px) minmax(0, 1fr) auto;
    gap: 0;
    min-height: 200px;
    padding: 36px 48px 40px;
  }

  .wizard--band .wizard__head {
    grid-column: 1;
    grid-row: 1;
    align-content: start;
    gap: 28px;
    padding-right: 24px;
  }

  .wizard--band .wizard__title {
    font-weight: 300;
  }

  .wizard--band .wizard__steps,
  .wizard--band:not(.is-active) .wizard__steps {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    gap: 14px;
  }

  .wizard--band .wizard__step {
    gap: 8px;
    font-size: 0.59375rem;
    letter-spacing: clamp(0.06em, -2.13px + 0.3vw, 0.18em); /* 900 → 1280 px */
  }

  .wizard--band .wizard__step-ans {
    font-size: 0.78125rem;
  }

  /* repos : barres pleines, libellés atténués (maquette accueil) */
  .wizard--band:not(.is-active) .wizard__step:not(.is-current) {
    color: var(--wz-dim);
  }

  .wizard--band:not(.is-active) .wizard__step:not(.is-current)::before {
    background: var(--c-white);
  }

  .wizard--band:not(.is-active) .wizard__step:not(.is-current) b {
    color: var(--wz-dim);
  }

  .wizard--band .wizard__counter {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: clamp(80px, 12vw, 230px);
    text-align: right;
  }

  .wizard--band .wizard__body {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  /* fermé : bouton et accroche à côté du titre, bandeau de 200 px (maquette « wizard-start ») */
  .wizard--band:not(.is-active) .wizard__body {
    grid-row: 1;
    align-self: start;
    margin-top: 58px;
  }

  .wizard--band.is-active .wizard__body {
    grid-column: 1 / -1;
    gap: 24px;
    margin-top: 25px;
    padding-top: 24px;
  }

  .wizard__start {
    flex-flow: row nowrap;
    align-items: center;
    gap: 30px;
  }

  .wizard__teaser {
    flex: 1 1 240px;
    font-size: 1rem;
    line-height: 1.35;
  }

  .wizard--band .wizard__stage {
    grid-template-columns: minmax(0, 471px) minmax(0, 1fr);
    column-gap: 0;
    padding-bottom: clamp(24px, -60px + 7vw, 70px);
  }

  .wizard--band .wizard__stage--results {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 16px;
  }

  .wizard--band .wizard__q {
    padding-right: 44px;
  }

  .wizard--band .wizard__res-head .wizard__q {
    padding-right: 0;
  }

  .wizard--band .wizard__chips {
    padding-top: 30px;
  }
}

/* -- Variante compacte (méga menu, menu mobile) ----------------------------- */
.wizard--compact {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 404px;
  padding: 24px;
  border-radius: var(--radius-card);
}

.wizard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wizard--compact .wizard__steps {
  gap: 6px;
  margin-top: 20px;
  padding-bottom: 14px;
}

.wizard--compact .wizard__step {
  gap: 10px;
  font-size: clamp(0.5625rem, 0.48rem + 0.35vw, 0.65625rem);
  font-size: clamp(0.5625rem, 2.15cqi, 0.65625rem);
  line-height: 11px;
  letter-spacing: clamp(0.02em, -0.03em + 0.2vw, 0.1em);
  letter-spacing: clamp(0.02em, -1.83px + 0.592cqi, 0.1em);
}

.wizard--compact .wizard__step::before {
  height: 2px;
  margin-bottom: 1px;
  border-radius: 0;
  background: var(--c-white-30);
}

.wizard--compact .wizard__step.is-current::before {
  height: 3px;
  margin-bottom: 0;
  background: var(--c-red);
}

.wizard--compact .wizard__step.is-done::before {
  background: rgb(255 74 74 / 0.6);
}

.wizard--compact .wizard__step-ans {
  margin-top: -4px;
  font-size: 0.6875rem;
  line-height: 14px;
  min-height: 14px;
}

.wizard--compact .wizard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.wizard--compact .wizard__stage {
  flex: 1;
  align-content: start;
  gap: 8px;
  padding: 10px 0 20px;
}

.wizard--compact .wizard__q {
  gap: 6px;
}

.wizard--compact .wizard__kicker {
  font-size: 0.59375rem;
  line-height: 14.7px;
  letter-spacing: 0.18em;
}

.wizard--compact .wizard__q-title {
  font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.5625rem);
  font-size: clamp(1.25rem, 5.8cqi, 1.5625rem);
  line-height: 26.4px;
  letter-spacing: -0.05em;
}

.wizard--compact .wizard__help {
  font-size: 0.75rem;
  line-height: 18px;
}

.wizard--compact .wizard__chips {
  gap: 8px;
  padding-top: 8px;
}

.wizard--compact .wizard__chip {
  gap: 7px;
  min-height: 32px;
  padding: 6px 7px 6px 13px;
  font-size: 0.75rem;
  line-height: 14.4px;
}

.wizard--compact .wizard__n {
  padding: 3px 6px;
  font-size: 0.59375rem;
}

/* compteur + bouton sur une ligne, sous les chips */
.wizard--compact .wizard__summary {
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--c-white-30);
}

.wizard--compact .wizard__meter {
  gap: 10px;
}

.wizard--compact .wizard__meter-n {
  font-size: 1.875rem;
}

.wizard--compact .wizard__meter-text {
  gap: 6px;
  font-size: 0.5625rem;
}

.wizard--compact .wizard__meter-bar {
  width: 110px;
}

.wizard--compact .btn--wiz {
  min-height: 0;
  padding: 10px 12px 10px 16px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.wizard--compact .wizard__foot {
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--c-white-30);
}

.wizard--compact .wizard__prev {
  min-height: 0;
  padding: 7px 12px;
  font-size: 0.84375rem;
}

.wizard--compact .wizard__restart {
  min-height: 32px;
  margin-right: auto;
  padding: 0 2px;
  font-size: 0.75rem;
}

.wizard--compact .icon--restart {
  width: 14px;
  height: 14px;
}

.wizard--compact .wizard__skip {
  min-height: 0;
  margin-left: auto;
  font-family: var(--ff-sans);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

.wizard--compact .wizard__restart + .wizard__skip {
  margin-left: 0;
}

/* résultats en colonne */
.wizard--compact .wizard__stage--results {
  gap: 14px;
}

.wizard--compact .wizard__res-head {
  gap: 10px;
}

.wizard--compact .wizard__res-head .wizard__q {
  flex-basis: 100%;
  gap: 8px;
}

.wizard--compact .wizard__note {
  flex-basis: 100%;
  font-size: 0.6875rem;
}

.wizard--compact .wizard__recap {
  gap: 6px;
}

.wizard--compact .wizard__recap-chip {
  gap: 7px;
  min-height: 30px;
  padding: 5px 11px;
  font-size: 0.6875rem;
}

.wizard--compact .wizard__tiles {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.wizard--compact .wizard__tile {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
}

.wizard--compact .wizard__thumb {
  width: 44px;
  height: 44px;
  border-radius: 7px;
}

.wizard--compact .wizard__thumb:empty::before {
  width: 32px;
  height: 22px;
}

.wizard--compact .wizard__tile-name {
  font-size: 0.875rem;
}

.wizard--compact .wizard__tile-spec {
  font-size: 0.6875rem;
}

.wizard--compact .wizard__zero {
  padding: 14px 16px;
}

/* Étroit (menu mobile) : réponses masquées sous les étapes, Recommencer en pictogramme,
   bouton pleine largeur sous le compteur */
@container (max-width: 399px) {
  .wizard--compact .wizard__step-ans,
  .wizard--compact .wizard__restart-text {
    display: none;
  }

  .wizard--compact .wizard__restart {
    justify-content: center;
    min-width: 32px;
    border: 1px solid rgb(255 255 255 / 0.24);
    border-radius: 50%;
  }

  .wizard--compact .wizard__summary .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 25em) {
  .wizard__step:not(.is-current) .wizard__step-label > span {
    display: none;
  }
}

/* Catégories */
.category {
  display: grid;
  gap: 24px;
  margin-top: clamp(48px, 31.66px + 4.189vw, 110px);
}

.category + .category {
  margin-top: clamp(48px, 44.84px + 0.811vw, 60px);
}

.category__head {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.category__num {
  color: var(--c-red);
  font-size: var(--fs-cat-num);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
}

.category__title {
  max-width: 276px;
}

.category__text {
  max-width: 340px;
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--c-grey-dark);
}

/* Grille de cartes produit */
.product-grid {
  display: grid;
  gap: 12px;
}

.product-grid > li {
  display: grid;
}

.product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "num count"
    "media media"
    "title title"
    "desc desc";
  align-content: start;
  padding: 23px 24px;
  border: 1px solid var(--c-beige-dark);
  background: var(--c-white);
  transition: box-shadow var(--dur) var(--ease-out);
}

.product-card__num,
.product-card__count {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-ink);
}

.product-card__num {
  grid-area: num;
  line-height: 16px;
}

.product-card__count {
  grid-area: count;
  justify-self: end;
  align-self: center;
}

.product-card__media {
  grid-area: media;
  justify-self: center;
  width: 149px;
  margin: 16px 0;
}

.product-card__title {
  grid-area: title;
  font-size: var(--fs-title-card);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.product-card__desc {
  grid-area: desc;
  margin-top: 9px;
  font-size: var(--fs-card-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-grey-dark);
}

.product-card--cta {
  grid-template-areas:
    "num num"
    "space space"
    "title title"
    "desc desc";
  grid-template-rows: auto 1fr auto auto;
  padding: 34px 27px 22px;
  color: var(--c-dark);
}

.product-card--cta .product-card__num {
  color: var(--c-grey-dark);
}

.product-card--cta .product-card__desc {
  color: inherit;
  opacity: 0.7;
}

.product-card--cta {
  min-height: 200px;
}

@media (hover: hover) {
  .product-card:hover {
    z-index: 1;
    box-shadow: 0 24px 50px -24px rgb(10 14 42 / 0.25);
  }

  .product-card:hover .product-media img {
    transform: translateY(-6px) scale(1.06);
  }

  .product-card--cta:hover .icon--arrow-sm {
    transform: translateX(6px);
  }
}

.product-card--cta .icon--arrow-sm {
  transition: transform var(--dur) var(--ease-out);
}

.product-card:focus-within {
  z-index: 1;
}

@media (min-width: 37.5em) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56.25em) {
  .category {
    gap: 32px;
  }

  .category__head {
    gap: 14px;
  }

  .category__text {
    max-width: 276px;
    font-size: 1rem;
    line-height: 1.625;
  }

  /* Grille jointive aux coins arrondis, comme dans la maquette */
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--c-beige-dark);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--c-beige-dark);
  }

  .product-grid > li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .product-card {
    grid-template-areas:
      "num num"
      "media media"
      "title count"
      "desc desc";
    grid-template-rows: auto 1fr auto auto;
    aspect-ratio: 380 / 400;
    min-height: 330px;
    /* Sans ces deux règles, aspect-ratio déduit la largeur de min-height
       (330 × 380 / 400 = 313,5 px) : la carte déborde de sa cellule et
       l'overflow de .product-grid coupe le texte à droite (~900 à 1400 px) */
    justify-self: stretch;
    min-width: 0;
    padding: 27px 29px 22px 26px;
    border: 0;
  }

  /* Visuel centré à 50 % − 46,5 px, comme dans la maquette (carte 380 × 400) */
  .product-card__media {
    position: absolute;
    left: 50%;
    top: calc(50% - 46.5px);
    width: min(187px, 62%);
    margin: 0;
    translate: -50% -50%;
  }

  .product-card__count {
    align-self: end;
    padding-bottom: 3px;
    text-align: right;
  }

  .product-card__desc {
    max-width: 303px;
    min-height: 47px;
  }
}

@media (min-width: 75em) {
  .category {
    grid-template-columns: minmax(220px, 361fr) minmax(0, 1140fr);
    column-gap: 29px;
    align-items: start;
    padding-top: 60px;
    border-top: 1px solid var(--c-grey);
  }

  .category__head {
    padding-top: 20px;
  }
}

/* 10. Applications
   ========================================================================== */
.applications {
  padding: clamp(64px, 48.98px + 3.851vw, 121px) 0 clamp(64px, 40.28px + 6.081vw, 154px);
  background: var(--c-night) url("../img/decor/glow-applications.webp") center / cover no-repeat;
  background-image: image-set(
    url("../img/decor/glow-applications.avif") type("image/avif"),
    url("../img/decor/glow-applications.webp") type("image/webp")
  );
  color: var(--c-white);
}

.applications .section-intro__text {
  color: var(--c-white);
  opacity: 0.7;
}

.app-grid {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.app-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 340 / 400;
  padding: 0 24px 34px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--c-dark);
}

/* Photo : repère de la maquette (cadre 798 × 691 décalé de -256 / -55),
   fondue vers le bas dans le bleu nuit de la carte */
.app-card__media {
  position: absolute;
  z-index: -1;
  inset: -8.68% -10.39% -0.32% -52.14%;
  max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 8%, transparent 92.4%);
  mask-image: linear-gradient(180deg, #000 8%, transparent 92.4%);
}

.app-card__media img {
  position: absolute;
  left: var(--l, 0%);
  top: var(--t, 0%);
  width: var(--w, 100%);
  max-width: none;
  height: var(--h, 100%);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: var(--o, 1);
  transition: transform 1.2s var(--ease-out);
}

.app-card__icon {
  position: absolute;
  top: clamp(24px, 18.7px + 1.35vw, 44px);
  left: clamp(24px, 21.9px + 0.54vw, 32px);
  display: grid;
  place-items: center;
  width: clamp(66px, 62.6px + 0.88vw, 79px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2);
  transition: background-color var(--dur) var(--ease-out);
}

.app-card__icon img {
  width: auto;
  height: clamp(30px, 28.6px + 0.37vw, 35.5px);
}

.app-card__count {
  margin-bottom: 8px;
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--c-red);
}

.app-card__title {
  max-width: 243px;
  font-size: var(--fs-title-l);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.app-card__desc {
  max-width: 363px;
  margin-top: 11px;
  font-size: var(--fs-app-text);
  line-height: 1.4;
  opacity: 0.7;
}

.app-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 19.8px + 1.08vw, 40px);
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 1.55;
  text-transform: uppercase;
}

.app-card__more .icon {
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .app-card:hover .app-card__media img {
    transform: scale(1.06);
  }

  .app-card:hover .app-card__icon {
    background: rgb(255 255 255 / 0.32);
  }

  .app-card:hover .app-card__more .icon {
    transform: translateX(5px);
  }
}

@media (min-width: 37.5em) {
  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .app-card {
    aspect-ratio: 491 / 634;
    padding: 0 clamp(24px, 18.33px + 0.945vw, 36px) clamp(34px, 23.61px + 1.732vw, 56px);
  }

  .app-card__count {
    display: none;
  }
}

@media (min-width: 56.25em) {
  .app-grid {
    margin-top: clamp(40px, 0.10px + 4.433vw, 83px);
  }
}

@media (min-width: 68.75em) {
  .app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 11. Société
   ========================================================================== */
.about {
  padding: clamp(64px, 57.54px + 1.655vw, 88.5px) 0 clamp(36px, 16.50px + 5.000vw, 110px);
}

.about__inner {
  display: grid;
  gap: 32px;
}

.about__text {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.about__intro {
  display: grid;
  gap: 30px;
  padding-top: clamp(0px, -5.3px + 1.35vw, 20px);
}

.about__title {
  max-width: min(615px, 8.6em);
}

.about__paragraphs {
  display: grid;
  gap: 16px;
  font-size: var(--fs-intro);
  line-height: 1.6;
}

.about__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.about__media {
  position: relative;
  aspect-ratio: 814 / 566;
  width: 100%;
  max-width: 814px;
  justify-self: end;
}

.about__photo {
  position: absolute;
  overflow: hidden;
  background: var(--c-beige-dark);
}

.about__photo img {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  max-width: none;
  height: auto;
  transition: transform 1.2s var(--ease-out);
}

.about__photo--facade {
  left: 20.76%;
  top: 0;
  width: 79.24%;
  aspect-ratio: 645 / 375;
  border-radius: 20px;
}

.about__photo--team {
  left: 4.55%;
  top: 51.94%;
  width: 53.19%;
  aspect-ratio: 433 / 272;
  border-radius: 15px;
  box-shadow: 0 4px 35px rgb(0 0 0 / 0.1);
}

@media (hover: hover) {
  .about__media:hover .about__photo img {
    transform: scale(1.04);
  }
}

@media (min-width: 80em) {
  .about__inner {
    grid-template-columns: minmax(0, 615fr) minmax(0, 814fr);
    gap: clamp(40px, -26px + 6.6vw, 98px);
    align-items: start;
  }

  .about__text {
    gap: 29px;
  }

  .about__paragraphs {
    line-height: 1.625;
    letter-spacing: -0.01em;
  }

  .about__lead {
    line-height: 1.3;
    letter-spacing: -0.03em;
  }

  .about__media {
    margin-top: clamp(40px, -8.85px + 4.885vw, 82.5px);
  }
}

/* 12. Actualités
   ========================================================================== */
.news {
  padding: clamp(16px, 2.30px + 3.514vw, 68px) 0 clamp(64px, 50.82px + 3.378vw, 114px);
  background: var(--c-white);
}

.news__grid {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.news-card {
  position: relative;
  display: grid;
  align-content: start;
}

.news-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 490 / 297;
  background: var(--c-beige);
}

.news-card__media img {
  position: absolute;
  left: -1.63%;
  top: -6.06%;
  width: 102.86%;
  max-width: none;
  height: 109.76%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(12px, 7.26px + 1.216vw, 30px);
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.tag {
  padding: 3px 8px;
  border: 1px solid var(--c-red);
  border-radius: 4px;
  color: var(--c-red);
}

.news-card__title {
  margin-top: clamp(12px, 10.42px + 0.405vw, 18px);
  font-size: var(--fs-title-news);
  font-weight: 600;
  line-height: 26px;
}

.news-card__text {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--c-grey-dark);
}

@media (hover: hover) {
  .news-card:hover .news-card__media img {
    transform: scale(1.05);
  }

}

@media (min-width: 48em) {
  .news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: clamp(32px, 15.97px + 2.087vw, 55px);
  }
}

/* 13. Certifications
   ========================================================================== */
.certifications {
  padding: clamp(40px, 32.41px + 1.892vw, 68px) 0 clamp(48px, 37.72px + 2.635vw, 87px);
}

.certifications__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.certifications__head .link-arrow {
  margin-right: -6px;
}

.cert-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.cert-card {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  min-height: 89px;
  padding: 18px 30px;
  border-radius: var(--radius-card);
  background: var(--c-white);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.cert-card img {
  flex: none;
  width: 59px;
  height: 49px;
}

.cert-card__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.cert-card__desc {
  margin-top: 4px;
  font-family: var(--ff-code);
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-red);
  opacity: 0.7;
}

@media (hover: hover) {
  .cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgb(10 14 42 / 0.3);
  }
}

@media (min-width: 48em) {
  .cert-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-top: 29px;
  }

  .cert-list > li {
    grid-column: span 2;
  }

  .cert-list > li:nth-child(n + 4) {
    grid-column: span 3;
  }

  .cert-card {
    min-height: 94px;
    padding: 20px clamp(18px, 9.64px + 1.089vw, 30px);
  }
}

@media (min-width: 80em) {
  .cert-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, -14.37px + 2.373vw, 30px);
  }

  .cert-list > li,
  .cert-list > li:nth-child(n + 4) {
    grid-column: auto;
  }

  .cert-card {
    gap: clamp(12px, -5.36px + 1.356vw, 20px);
  }
}

/* 14. Pied de page
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--c-night) url("../img/decor/glow-footer.webp") center top / cover no-repeat;
  background-image: image-set(
    url("../img/decor/glow-footer.avif") type("image/avif"),
    url("../img/decor/glow-footer.webp") type("image/webp")
  );
  color: var(--c-white);
}

.footer-contact {
  padding: clamp(64px, 44.24px + 5.068vw, 139px) 0 clamp(48px, 32.19px + 4.054vw, 108px);
}

.footer-contact__grid {
  display: grid;
  gap: 24px;
}

.footer-contact__intro {
  display: grid;
  gap: clamp(16px, 12.31px + 0.946vw, 30px);
}

.footer-contact__text {
  max-width: 470px;
  font-size: var(--fs-intro);
  line-height: 1.6;
  opacity: 0.7;
}

.footer-contact__actions {
  display: grid;
  gap: 12px;
}

.footer-contact__links {
  display: grid;
  gap: 11px;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.footer-contact__links a {
  display: inline-flex;
  align-items: center;
  gap: 19px;
  justify-self: start;
  background: var(--u-hover) 33px 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .footer-contact__links a:hover {
    background-size: calc(100% - 33px) 1px;
  }
}

@media (min-width: 37.5em) {
  .footer-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }
}

@media (min-width: 56.25em) {
  .footer-contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
  }

  .footer-contact__intro,
  .footer-contact__actions {
    align-self: end;
  }

  .footer-contact__intro {
    padding-top: 20px;
  }

  .footer-contact__text {
    grid-row: 2;
    max-width: 480px;
    line-height: 1.625;
    letter-spacing: -0.01em;
  }

  .footer-contact__links {
    grid-row: 2;
    align-self: start;
  }
}

.footer-main {
  position: relative;
  padding: 0 0 32px;
}

.footer-main__inner {
  display: grid;
  gap: 32px;
}

.footer-columns {
  display: grid;
  gap: 32px;
}

.footer-brand {
  display: grid;
  gap: 30px;
  padding-bottom: 27px;
}

.footer-brand + .footer-col {
  padding-top: 40px;
  border-top: 1px solid var(--c-white-30);
}

.footer-col:nth-child(3),
.footer-col:nth-child(4) {
  padding-bottom: 35px;
}

.footer-brand img {
  width: 140px;
}

.footer-brand p {
  max-width: 320px;
  font-size: 0.875rem;
  line-height: 22.4px;
  opacity: 0.7;
}

.footer-col h2 {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 15.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

.footer-col ul {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.footer-col li {
  padding: 1.5px 0 1.3px;
  font-size: 0.875rem;
  line-height: 21.7px;
}

.footer-col address {
  font-style: normal;
}

.footer-bottom {
  display: grid;
  padding-top: 25px;
  border-top: 1px solid var(--c-white-30);
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-bottom p,
.footer-bottom nav {
  opacity: 0.7;
}

.footer-bottom nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6em;
}

.footer-bottom nav li + li::before {
  content: "·";
  margin-right: 0.6em;
}

.footer-bottom nav a {
  transition: opacity var(--dur-fast) linear;
}

@media (hover: hover) {
  .footer-bottom nav a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Bouton « Vers le haut » */
.to-top {
  display: none;
}

@media (min-width: 48em) {
  .footer-main {
    padding: clamp(50px, 28.40px + 2.813vw, 81px) 0 40px;
    border-top: 1px solid var(--c-white-30);
  }

  .footer-main__inner {
    gap: 60px;
  }

  .footer-brand {
    padding-bottom: 0;
  }

  .footer-brand + .footer-col {
    padding-top: 0;
    border-top: 0;
  }

  .footer-col:nth-child(3),
  .footer-col:nth-child(4) {
    padding-bottom: 0;
  }

  .footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding-top: 29px;
  }

  .to-top {
    position: absolute;
    top: -47px;
    right: var(--gutter);
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: var(--c-night);
    text-align: center;
  }

  .to-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../svg/decor/cercle-degrade.svg") center / 100% no-repeat;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .to-top__inner {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 50px;
    font-family: var(--ff-code);
    font-size: 0.625rem;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .to-top .icon {
    transition: transform var(--dur) var(--ease-out);
  }

  @media (hover: hover) {
    .to-top:hover::before {
      transform: rotate(180deg);
    }

    .to-top:hover .icon {
      transform: translateY(-4px);
    }
  }
}

@media (min-width: 68.75em) {
  .footer-columns {
    grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-brand img {
    width: 191px;
  }
}

@media (min-width: 106.25em) {
  .to-top {
    top: 42px;
    right: clamp(16px, 2.73vw, 51px);
  }
}

/* 15. Animations
   ========================================================================== */

/* Apparition au défilement : activée seulement si JS est disponible */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    translate: 0 32px;
    transition:
      opacity var(--dur-slow) var(--ease-out),
      translate 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js [data-reveal="fade"] {
    translate: none;
  }

  .js [data-reveal="zoom"] {
    translate: none;
    scale: 0.96;
    transition:
      opacity var(--dur-slow) var(--ease-out),
      scale 1.1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js [data-reveal].is-revealed {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Impression */
@media print {
  .site-header,
  .mega-backdrop,
  .to-top {
    display: none !important;
  }

  .hero,
  .applications,
  .site-footer {
    background: none !important;
    color: #000 !important;
  }
}