/* ==========================================================================
   IMF - blocs des pages de contenu (gabarit « all in one »)
   Chargée après main.css sur les pages intérieures. Chaque bloc correspond à un
   bloc du builder WordPress (core stylé par theme.json, pattern ou bloc ACF) ;
   la référence (B01…B32) renvoie aux annotations de la maquette Figma.

   Sommaire
   1. Jetons et gabarit de section
   2. B01 Hero de page · B02 Sommaire
   3. B03–B13 Texte & médias (.prose)
   4. B14 Intro 50/50 · B15 Boutons & liens
   5. B16–B19 Colonnes · Média & texte
   6. B20–B24 Mise en avant
   7. B25–B27 Accordéon · FAQ · Galerie (+ visionneuse)
   8. B28 Slider
   9. B29–B32 Logos · Actualités · Formulaire & coordonnées · CTA
   10. Rubrique Société : hero (compact, chiffres clés, photo seule) · cartes à
       filet dégradé · services · repères en colonnes · groupe · texte + cartes ·
       certifications · liste des actualités (filtres, à la une, pagination)
   11. Applications : badge du hero, secteurs sur fond clair, frise de la chaîne
       de valeur, cartes d'étape, trois niveaux de réponse
   ========================================================================== */

/* 1. Jetons et gabarit de section
   ========================================================================== */
:root {
  --fs-h2: clamp(2rem, 1.736rem + 1.081vw, 3rem);                       /* 32 → 48 */
  --fs-h3: clamp(1.5rem, 1.434rem + 0.27vw, 1.75rem);                   /* 24 → 28 */
  --fs-light-m: clamp(1.125rem, 1.059rem + 0.27vw, 1.375rem);          /* 18 → 22 */
  --fs-num: clamp(2rem, 1.868rem + 0.541vw, 2.5rem);                    /* 32 → 40 */
  --section-pad-l: clamp(4rem, 3.078rem + 3.784vw, 7.5rem);             /* 64 → 120 */
  --block-gap: clamp(3rem, 2.473rem + 2.162vw, 5rem);                   /* 48 → 80 */
  --space-xl: clamp(2.5rem, 2.104rem + 1.622vw, 4rem);                  /* 40 → 64 */
  --c-placeholder: #9ea0b0;
  --c-muted: #5c5f73;
  interpolate-size: allow-keywords; /* ouverture animée des <details> (navigateurs récents) */
}

.section {
  padding-block: var(--section-pad-l);
  background: var(--c-white);
}

.section--beige {
  background: var(--c-beige);
}

/* deux sections de même fond à la suite : l'espace entre elles n'est pas doublé */
.section:not(.section--beige) + .section:not(.section--beige),
.section--beige + .section--beige {
  padding-top: calc(var(--section-pad-l) / 2);
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), 960px);
  margin-inline: auto;
}

/* blocs successifs d'une section */
.blocks > * + * {
  margin-top: var(--block-gap);
}

.blocks > .section-intro + * {
  margin-top: clamp(2.5rem, 1.973rem + 2.162vw, 4.5rem); /* 40 → 72 */
}

/* Titres et textes partagés par les blocs */
.title-m,
.prose > h2,
.page-hero__title {
  text-wrap: balance;
}

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

.title-s {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.05;
}

.title-xs {
  font-size: var(--fs-title-card);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.text {
  font-size: var(--fs-intro);
  line-height: 1.625;
  letter-spacing: -0.01em;
  color: var(--c-grey-dark);
}

.text--s {
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0;
}

.text--xs {
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: 0;
}

.num {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  color: var(--c-red);
}

/* Intro 50/50 (B14) : variantes de taille du titre */
.section-intro--m .section-intro__main,
.section-intro--s .section-intro__main {
  gap: clamp(16px, 13.37px + 0.676vw, 28px);
  padding-top: 0;
}

.section-intro__aside {
  display: grid;
  justify-items: start;
  gap: 16px;
}

/* 2. B01 Hero de page · B02 Sommaire
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 99.97px + 5.135vw, 196px) 0 clamp(56px, 41.24px + 3.784vw, 112px);
  background: var(--c-navy);
  color: var(--c-white);
}

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

.breadcrumb {
  display: inline-flex;
  margin-bottom: clamp(32px, 27.78px + 1.081vw, 48px);
  padding: 7px clamp(14px, 12.42px + 0.405vw, 20px);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.1);
  font-family: var(--ff-code);
  font-size: 0.75rem;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 15px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.breadcrumb li + li::before {
  content: "/";
  font-size: 0.625rem;
  opacity: 0.3;
}

.breadcrumb a {
  opacity: 0.7;
  transition: opacity var(--dur-fast) linear;
}

@media (hover: hover) {
  .breadcrumb a:hover {
    opacity: 1;
  }
}

.page-hero__grid {
  display: grid;
  gap: 48px;
}

.page-hero__text {
  display: grid;
  justify-items: start;
  gap: clamp(20px, 16.84px + 0.811vw, 32px);
}

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

.page-hero__lead {
  max-width: 680px;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

/* visuel : photo + vignette qui la chevauche (parallaxe : main.js) */
.page-hero__visual {
  position: relative;
  width: min(100%, 645px);
  aspect-ratio: 645 / 440;
}

.page-hero__photo,
.page-hero__thumb {
  position: absolute;
  overflow: hidden;
}

.page-hero__photo {
  inset: 0 7.44% 12.27% 0;
  border-radius: 20px;
}

.page-hero__thumb {
  left: 62.48%;
  top: 67.73%;
  width: 37.52%;
  aspect-ratio: 242 / 141;
  border-radius: 12px;
  box-shadow: 0 4px 35px rgb(0 0 0 / 0.1);
}

/* l'image remplit son cadre (le <picture> ne crée pas de boîte) */
.page-hero__photo picture,
.page-hero__thumb picture,
.media-text__img picture {
  display: contents;
}

.page-hero__photo img,
.page-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 56.25em) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 645px);
    align-items: center;
    gap: clamp(40px, 9.61px + 4.324vw, 80px);
  }
}

/* soulignement : tracé à l'apparition du titre */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__title .u-gradient::after {
    animation: u-draw 0.9s var(--ease-out) backwards;
    animation-delay: 1s;
  }
}

/* B02 · Sommaire : ancres vers les H2 */
.toc {
  border-bottom: 1px solid var(--c-grey);
  background: var(--c-white);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  text-transform: uppercase;
}

.toc__inner {
  display: flex;
  align-items: center;
  gap: 24px 40px;
  padding-block: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.toc__label {
  flex: none;
  color: var(--c-grey-dark);
}

.toc__list {
  display: flex;
  gap: 40px;
  white-space: nowrap;
}

.toc__link {
  display: inline-flex;
  gap: 10px;
  padding-bottom: 2px;
  background: var(--u-hover) 0 100% / 0 1px no-repeat;
  color: var(--c-dark);
  transition: background-size var(--dur) var(--ease-out);
}

.toc__num {
  color: var(--c-red);
}

@media (hover: hover) {
  .toc__link:hover {
    background-size: 100% 1px;
  }
}

.toc__link:focus-visible {
  background-size: 100% 1px;
}

/* 3. B03–B13 Texte & médias : contenu de l'éditeur (blocs core)
   ========================================================================== */
.prose {
  color: var(--c-dark);
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: -0.01em;
}

.prose > * + * {
  margin-top: 24px;
}

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

.prose > .lead {
  margin-top: 32px;
}

.prose > h3 {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
}

.prose > h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose > h5 {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-red);
}

.prose > :is(h3, h4, figure, blockquote),
.prose > :not(.eyebrow) + h2 {
  margin-top: var(--space-xl);
}

.prose > h3 + * {
  margin-top: 28px;
}

.prose > h5 {
  margin-top: clamp(40px, 35.78px + 1.081vw, 56px);
}

.prose > h5 + * {
  margin-top: 10px;
}

.prose > .callout {
  margin-top: 48px;
}

.prose > hr {
  margin-top: clamp(40px, 35.78px + 1.081vw, 56px);
}

.prose > hr + * {
  margin-top: 20px;
}

.prose a:not([class]):not(.post-meta a) {
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) linear;
}

@media (hover: hover) {
  .prose a:not([class]):not(.post-meta a):hover {
    color: var(--c-red);
  }
}

.prose strong {
  font-weight: 600;
}

.prose .small {
  max-width: 720px;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-grey-dark);
}

/* B07 · Tableau « IMF » */
.prose .table {
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.prose thead th {
  padding: 14px 18px;
  background: var(--c-dark);
  color: var(--c-white);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
}

.prose tbody tr {
  border-bottom: 1px solid var(--c-grey);
}

.prose tbody th,
.prose tbody td {
  padding: 15px 18px;
  vertical-align: middle;
}

.prose tbody th {
  width: 36%; /* 346 px sur 960 */
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.prose tbody td {
  font-size: 0.9375rem;
  line-height: 1.38;
  letter-spacing: 0;
}

/* B08 · Listes numérotée et à puces */
.prose ol,
.prose ul:not([class]) {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.prose ol {
  counter-reset: prose-ol;
}

.prose ol > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  counter-increment: prose-ol;
}

.prose ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-red);
}

.prose ul:not([class]) > li {
  position: relative;
  padding-left: 19px;
}

.prose ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--c-red);
}

/* B09 · Image + légende */
.prose__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 532;
  border-radius: 12px;
  object-fit: cover;
}

.prose figcaption {
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

/* B10 · Citation */
.prose blockquote {
  display: grid;
  gap: 16px;
  margin-inline: 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--c-red);
}

.prose blockquote p {
  font-size: var(--fs-light-m);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.prose cite {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

/* B11 · Encadré */
.callout {
  display: grid;
  gap: 14px;
  padding: clamp(24px, 21.36px + 0.676vw, 32px) clamp(20px, 15.78px + 1.081vw, 36px);
  border-radius: 12px;
  background: var(--c-beige);
}

/* B12 · Fichier */
.file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 20px clamp(16px, 13.89px + 0.541vw, 24px);
  border-radius: 10px;
  background: var(--c-beige);
}

.file__type {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-beige-dark);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-red);
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
}

.file__meta {
  display: grid;
  flex: 1 1 240px;
  gap: 4px;
}

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

.file__info {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

/* B13 · Séparateur + méta & partage (gabarit article) */
.prose hr {
  height: 1px;
  border: 0;
  background: var(--c-grey);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.post-meta__share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.post-meta__share :is(a, button) {
  background: var(--u-hover) 0 100% / 0 1px no-repeat;
  color: var(--c-red);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: background-size var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .post-meta__share :is(a, button):hover {
    background-size: 100% 1px;
  }
}

/* 4. B15 Boutons & liens (planche)
   ========================================================================== */
.btn-board {
  display: grid;
  gap: 24px 40px;
  align-items: start;
}

.btn-board__card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 28px;
  overflow: hidden;
  padding: clamp(24px, 13.46px + 2.703vw, 48px);
  border-radius: 14px;
  background: var(--c-white);
}

.btn-board__card--dark {
  background: var(--c-navy) url("../img/decor/glow-hero.webp") 30% 55% / cover no-repeat;
  background-image: image-set(
    url("../img/decor/glow-hero.avif") type("image/avif"),
    url("../img/decor/glow-hero.webp") type("image/webp")
  );
  color: var(--c-white);
}

.btn-board__row {
  display: grid;
  gap: 12px 24px;
}

.btn-board__label {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.btn-board__card--dark .btn-board__label {
  color: var(--c-white);
}

.btn-board__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

@media (min-width: 37.5em) {
  .btn-board__row {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
  }
}

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

/* 5. B16–B19 Colonnes · Média & texte
   ========================================================================== */
.cols {
  display: grid;
  gap: 40px;
}

.col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 12px;
}

.col > .link-arrow {
  margin-top: 8px;
}

.cols--33-66 > .col:first-child {
  gap: 20px;
}

.cols--33-66 > .col:first-child > .btn {
  margin-top: 12px;
}

.cols__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 8.84px + 0.811vw, 24px);
}

.cols__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 488 / 340;
  border-radius: 12px;
  object-fit: cover;
}

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

@media (min-width: 64em) {
  .cols--33-66 {
    grid-template-columns: minmax(0, 480fr) minmax(0, 1000fr);
    align-items: center;
  }
}

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

/* B19 · Média & texte : 1 ou 2 visuels superposés */
.media-text {
  display: grid;
  gap: 48px 40px;
}

.media-text__text {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 13.37px + 0.676vw, 28px);
}

.media-text__text .lead {
  max-width: 620px;
  padding-top: 12px;
}

.media-text__text .text {
  max-width: 580px;
  margin-top: -12px;
}

.media-text__visuals {
  position: relative;
  aspect-ratio: 740 / 540;
}

.media-text__img {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
}

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

.media-text__img--back {
  left: 16.22%;
  top: 3.7%;
  width: 83.78%;
  height: 66.67%;
}

.media-text__img--front {
  left: 0;
  top: 48.52%;
  width: 58.11%;
  height: 49.63%;
  box-shadow: 0 24px 60px rgb(9 0 45 / 0.18);
}

@media (min-width: 64em) {
  .media-text {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

/* 6. B20–B24 Mise en avant
   ========================================================================== */

/* B20 · Chiffres clés : carte blanche, filets verticaux */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 14px;
  background: var(--c-white);
}

.figures__item {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(20px, 17.36px + 0.676vw, 32px) clamp(18px, 14.05px + 1.014vw, 36px);
}

.figures__item:nth-child(2n) {
  border-left: 1px solid var(--c-beige-dark);
}

.figures__item:nth-child(n + 3) {
  border-top: 1px solid var(--c-beige-dark);
}

.figures dt {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.figures dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

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

.figures__unit {
  font-size: var(--fs-title-card);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--c-grey-dark);
}

@media (min-width: 64em) {
  .figures {
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  }

  .figures__item:nth-child(n) {
    border-top: 0;
    border-left: 1px solid var(--c-beige-dark);
  }

  .figures__item:first-child {
    border-left: 0;
  }

  .figures__value {
    white-space: nowrap;
  }
}

/* B21 · Cartes numérotées · B22 cartes logo */
.cards {
  display: grid;
  gap: clamp(16px, 7.57px + 2.162vw, 40px);
}

.card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 19.78px + 1.081vw, 36px);
  border-radius: 14px;
  background: var(--c-white);
}

.card .title-xs {
  padding-top: 8px;
}

.logo-card {
  display: grid;
  align-content: start;
  gap: 36px;
  padding: clamp(28px, 23.78px + 1.081vw, 40px);
  border: 1px solid var(--c-grey);
  border-radius: var(--radius-card);
  background: var(--c-white);
}

.logo-card__logo {
  width: auto;
  height: 70px;
}

.logo-card__body {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.logo-card__label {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-red);
}

.logo-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.logo-card__text {
  font-size: 0.84375rem;
  line-height: 1.55;
  color: var(--c-grey-dark);
}

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

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

  .logo-card {
    min-height: 385px;
  }
}

/* B23 · Repères : frise de 3 à 6 dates (défilement horizontal sur mobile) */
.timeline {
  display: grid;
  gap: clamp(16px, 13.37px + 0.676vw, 28px);
}

.timeline__list {
  display: grid;
  grid-auto-columns: minmax(220px, 72%);
  grid-auto-flow: column;
  gap: 40px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 25px var(--gutter) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  /* le filet de la frise */
  background: linear-gradient(var(--c-beige-dark), var(--c-beige-dark)) 0 4px / 100% 1px no-repeat;
}

.timeline__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 12px;
  scroll-snap-align: start;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -25px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-red);
}

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

.timeline__item .title-xs {
  padding-top: 4px;
}

@media (min-width: 64em) {
  .timeline__list {
    grid-auto-columns: minmax(0, 1fr);
    margin-inline: 0;
    padding: 25px 0 0;
    overflow: visible;
  }
}

/* B24 · Liste libellée */
.labelled {
  display: grid;
  gap: 40px;
}

.labelled__row {
  display: grid;
  gap: 8px 40px;
  padding-block: 22px;
  border-top: 1px solid var(--c-beige-dark);
}

.labelled__row:last-child {
  border-bottom: 1px solid var(--c-beige-dark);
}

.labelled__row dt {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.labelled__row dt::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--c-red);
}

.labelled__row dd {
  font-size: var(--fs-intro);
  line-height: 1.625;
  letter-spacing: -0.01em;
  color: var(--c-grey-dark);
}

@media (min-width: 64em) {
  .labelled__row {
    grid-template-columns: 420px minmax(0, 1fr);
    align-items: center;
  }
}

/* 7. B25–B27 Accordéon · FAQ · Galerie
   ========================================================================== */
.accordion {
  overflow: hidden;
  border: 1px solid var(--c-grey);
  border-radius: 12px;
}

.accordion--narrow {
  max-width: 960px;
  margin-inline: auto;
}

.accordion details + details {
  border-top: 1px solid var(--c-grey);
}

.accordion summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px clamp(18px, 15.36px + 0.676vw, 28px);
  cursor: pointer;
  font-size: var(--fs-light-m);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.03em;
  list-style: none;
  transition: background-color var(--dur-fast) linear;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

/* pastille + / − */
.accordion summary::after {
  content: "+";
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--c-beige);
  color: var(--c-red);
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease-out);
}

.accordion details[open] > summary::after {
  content: "−";
}

.accordion summary:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .accordion summary:hover {
    background: rgb(248 246 241 / 0.6);
  }
}

.accordion__body {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: 0 clamp(18px, -6.03px + 6.164vw, 120px) 28px clamp(18px, 15.36px + 0.676vw, 28px);
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: -0.01em;
}

/* ouverture animée là où le navigateur sait le faire */
@media (prefers-reduced-motion: no-preference) {
  .accordion details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size var(--dur) var(--ease-out),
      content-visibility var(--dur) allow-discrete;
  }

  .accordion details[open]::details-content {
    block-size: auto;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--c-beige);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* B26 · FAQ 33/66 : intro collante */
.faq {
  display: grid;
  gap: 32px 40px;
}

.faq__intro {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 13.37px + 0.676vw, 28px);
}

@media (min-width: 64em) {
  .faq {
    grid-template-columns: minmax(0, 480fr) minmax(0, 1000fr);
    align-items: start;
  }

  .faq__intro {
    position: sticky;
    top: 120px;
  }
}

/* B27 · Galerie */
.gallery {
  display: grid;
  gap: 32px 24px;
}

.gallery__item {
  display: grid;
  gap: 12px;
  margin: 0;
}

.gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-beige);
}

.gallery__link img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.gallery__expand {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-dark);
  opacity: 0;
  translate: 0 -4px;
  transition:
    opacity var(--dur) var(--ease-out),
    translate var(--dur) var(--ease-out);
}

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

.gallery__link:focus-visible .gallery__expand {
  opacity: 1;
  translate: 0 0;
}

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

  .gallery__link:hover .gallery__expand {
    opacity: 1;
    translate: 0 0;
  }
}

@media (hover: none) {
  .gallery__expand {
    opacity: 1;
    translate: 0 0;
  }
}

.gallery figcaption {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

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

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

/* Visionneuse (blocs.js) */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-white);
}

.lightbox::backdrop {
  background: rgb(9 0 45 / 0.92);
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0;
  padding: 72px clamp(16px, 4vw, 96px);
}

.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100dvh - 180px);
  border-radius: 12px;
  object-fit: contain;
}

.lightbox__figure figcaption {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  text-transform: uppercase;
}

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-dark);
  transition: background-color var(--dur-fast) linear;
}

.lightbox__btn--close {
  top: 16px;
  right: 16px;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__btn--prev {
  left: 16px;
}

.lightbox__btn--prev .icon {
  rotate: 180deg;
}

.lightbox__btn--next {
  right: 16px;
}

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

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__figure {
    animation: lightbox-in var(--dur) var(--ease-out) backwards;
  }
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
}

/* 8. B28 Slider photo légendé (blocs.js : flèches, progression ; sans JS : défilement)
   ========================================================================== */
.section--slider {
  padding-top: calc(var(--section-pad-l) - 20px);
}

.slider {
  display: grid;
  gap: clamp(20px, 16.84px + 0.811vw, 32px);
}

.slider__track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-card);
}

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

.slider__track:focus-visible {
  outline-offset: 4px;
}

.slider__slide {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  color: var(--c-white);
}

.slider__slide picture,
.slider__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(9 0 45 / 0) 45%, rgb(9 0 45 / 0.85));
}

.slider__caption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 10.51px + 2.432vw, 56px);
  right: clamp(20px, 10.51px + 2.432vw, 56px);
  bottom: clamp(20px, 13.67px + 1.622vw, 44px);
  display: grid;
  gap: 12px;
  max-width: 760px;
  font-size: 0.9375rem;
  line-height: 1.38;
}

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

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

.slider__controls {
  display: flex;
  align-items: center;
  gap: 16px clamp(16px, 11.78px + 1.081vw, 32px);
}

.slider__controls[hidden] {
  display: none;
}

.slider__progress {
  display: flex;
  flex: 1;
  gap: 8px;
}

.slider__progress span {
  flex: 1;
  height: 2px;
  background: var(--c-grey);
  transition: background-color var(--dur) var(--ease-out);
}

.slider__progress span.is-active {
  background: var(--c-red);
}

.slider__arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 34px;
  border: 1px solid var(--c-dark);
  border-radius: 40px;
  color: var(--c-dark);
  transition:
    background-color var(--dur-fast) linear,
    color var(--dur-fast) linear,
    opacity var(--dur-fast) linear;
}

.slider__arrow .icon {
  width: 10px;
  height: 9px;
}

.slider__arrow--prev .icon {
  rotate: 180deg;
}

.slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

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

@media (pointer: coarse) {
  .slider__arrow {
    width: 52px;
    height: 44px;
  }
}

@media (min-width: 48em) {
  .slider__slide {
    aspect-ratio: 1520 / 720;
  }
}

/* 9. B29–B32 Logos · Actualités · Formulaire & coordonnées · CTA
   ========================================================================== */

/* B29 · Logos & références */
.logos {
  display: grid;
  gap: 24px;
}

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

.logos__list li {
  display: grid;
  place-items: center;
  height: 96px;
  border: 1px solid var(--c-grey);
  border-radius: 10px;
  color: var(--c-grey-dark);
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
}

.logos__list img {
  max-width: 70%;
  max-height: 56px;
  filter: grayscale(1);
  opacity: 0.75;
  transition:
    filter var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .logos__list li:hover img {
    filter: none;
    opacity: 1;
  }
}

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

@media (min-width: 75em) {
  .logos__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* B30 · Dernières actualités : cartes de l'accueil (.news-card, main.css) */
.latest .news__grid {
  margin-top: clamp(32px, 27.78px + 1.081vw, 48px);
}

/* B31 · Formulaire (habillage IMF du plugin de formulaires) */
.contact-grid {
  display: grid;
  gap: 30px;
  align-items: start;
}

.form-card {
  display: grid;
  gap: 16px;
  padding: clamp(32px, 25.67px + 1.622vw, 57px) clamp(20px, 15.78px + 1.081vw, 36px) clamp(24px, 20.84px + 0.811vw, 36px);
  border: 1px solid var(--c-grey);
  border-radius: 18px;
  background: var(--c-white);
}

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

.form-card__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-card__group--sep {
  padding-top: 18px;
  border-top: 1px dashed var(--c-beige-dark);
}

/* légende flottante : elle passe sous le filet du groupe au lieu de s'y poser */
.form-card__legend {
  float: left;
  width: 100%;
  margin-bottom: 16px;
  padding: 0;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
}

.form-card__group > * + * {
  margin-top: 16px;
}

.form-card__group > .form-card__legend + * {
  clear: both;
  margin-top: 0;
}

/* type de demande : cartes radio */
.choices {
  display: grid;
  gap: 10px;
}

.choice {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--c-beige);
  border-radius: 6px;
  background: var(--c-beige);
  cursor: pointer;
  transition: border-color var(--dur-fast) linear;
}

.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice:has(:checked) {
  border-color: var(--c-grey);
}

.choice:has(:checked)::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 14px;
  width: 12px;
  height: 9px;
  background: var(--c-red);
  -webkit-mask: var(--icon-check) no-repeat center / contain;
  mask: var(--icon-check) no-repeat center / contain;
}

.choice:has(:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

@media (hover: hover) {
  .choice:hover {
    border-color: var(--c-grey);
  }
}

.choice__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.choice__desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--c-muted);
}

.choice__products {
  margin-top: 4px;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.4;
}

.choice__products em {
  color: var(--c-grey-dark);
}

.choice__products strong {
  font-weight: 600;
  color: var(--c-red);
}

/* champs */
.fields {
  display: grid;
  gap: 16px 14px;
}

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

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.field__req {
  font-weight: 400;
  color: var(--c-red);
}

.field__opt {
  font-weight: 400;
}

.field :is(input, textarea) {
  width: 100%;
  padding: 13px 12px;
  border: 1px solid var(--c-grey);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-dark);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  transition: border-color var(--dur-fast) linear;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field ::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

.field :is(input, textarea):hover {
  border-color: var(--c-grey-dark);
}

.field :is(input, textarea):focus-visible {
  border-color: var(--c-dark);
  outline: 2px solid var(--c-red);
  outline-offset: 1px;
}

/* pièces jointes : zone de dépôt */
.dropzone {
  position: relative;
  padding: 24px 18px;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: var(--c-beige);
  color: var(--c-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
  transition: border-color var(--dur-fast) linear;
}

.dropzone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone:hover,
.dropzone:has(:focus-visible) {
  border-color: var(--c-grey-dark);
}

.dropzone:has(:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
  color: var(--c-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.consent input {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 4px 0 0;
  accent-color: var(--c-red);
}

.form-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 12px;
}

.form-card__note {
  max-width: 380px;
  color: var(--c-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.form-card__note a {
  color: var(--c-dark);
  white-space: nowrap;
}

.form-card__status:empty {
  display: none;
}

.form-card__status {
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--c-beige);
  font-size: 0.875rem;
  line-height: 1.4;
}

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

/* coordonnées (acf/coordonnees) */
.contact-cards {
  display: grid;
  gap: 30px;
}

.contact-card {
  display: grid;
  justify-items: start;
  gap: 14px;
  border-radius: 12px;
}

.contact-card--dark {
  padding: 34px 26px;
  border: 1px solid var(--c-ink);
  background: var(--c-dark);
  color: var(--c-white);
}

.contact-card--beige {
  position: relative;
  overflow: hidden;
  gap: 10px;
  padding: 37px 30px 40px;
  border-radius: 0 0 12px 12px;
  background: var(--c-beige);
  color: var(--c-ink);
}

/* filet dégradé en tête de carte */
.contact-card--beige::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
}

.contact-card__label {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-red);
}

.contact-card--dark .contact-card__label {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.contact-card__phone {
  font-size: clamp(2rem, 1.786rem + 0.878vw, 2.8125rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.contact-card__email {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.15;
}

.contact-card__hours {
  color: #b3b6c9;
  font-size: 0.875rem;
  line-height: 1.6;
}

.contact-card__list {
  width: 100%;
}

.contact-card__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-block: 17px;
  font-size: 1.03125rem;
  line-height: 1;
}

.contact-card__list li + li {
  border-top: 1px dashed #d4d0c3;
}

.contact-card__list a,
.contact-card__email,
.contact-card__phone {
  background: var(--u-hover) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease-out);
}

.contact-card__list a {
  color: var(--c-red);
  font-size: 0.90625rem;
}

@media (hover: hover) {
  .contact-card__list a:hover,
  .contact-card__email:hover,
  .contact-card__phone:hover {
    background-size: 100% 1px;
  }
}

.contact-card address {
  margin-bottom: 15px;
  font-size: 1.03125rem;
  font-style: normal;
  line-height: 1.1;
}

.contact-social {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  justify-self: start;
  font-size: 1rem;
  line-height: 1.55;
}

.contact-social__icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
}

.contact-social__icon .icon {
  width: 13px;
  height: 13px;
}

@media (min-width: 75em) {
  .contact-grid {
    grid-template-columns: minmax(0, 1010fr) minmax(0, 490fr);
  }
}

/* B32 · Blocs CTA */
.cta-band {
  display: grid;
  gap: 32px 40px;
  overflow: hidden;
  padding: clamp(36px, 25.46px + 2.703vw, 66px) clamp(24px, 4.31px + 5.05vw, 80px);
  border-radius: var(--radius-card);
  background: var(--c-navy) url("../img/decor/glow-hero.webp") 25% 40% / cover no-repeat;
  background-image: image-set(
    url("../img/decor/glow-hero.avif") type("image/avif"),
    url("../img/decor/glow-hero.webp") type("image/webp")
  );
  color: var(--c-white);
}

.cta-band__text {
  display: grid;
  justify-items: start;
  gap: 20px;
  max-width: 819px;
}

.cta-band__text > p:last-child {
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: -0.01em;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

@media (min-width: 64em) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.cta-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  max-width: 960px;
  margin-inline: auto;
  padding: 28px clamp(20px, 15.78px + 1.081vw, 36px);
  border-radius: 12px;
  background: var(--c-beige);
}

.cta-compact__text {
  display: grid;
  gap: 6px;
}

.cta-compact__title {
  font-size: var(--fs-title-card);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.cta-compact__meta {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

/* 10. Rubrique Société (Société, Qualité, Contact, Actualités, Article)
   ========================================================================== */

/* B01 · Hero de page, variantes de la rubrique : titre 80, chapô gris (--l) ·
   sans visuel (--compact) · photo seule (__visual--single) · chiffres clés (.stats) */
.page-hero--l .page-hero__title {
  font-size: var(--fs-h1);
  line-height: 0.95;
}

.page-hero--l .page-hero__lead {
  max-width: 731px;
  color: rgb(179 182 201 / 0.7); /* #b3b6c9 à 70 % (couleur, pas d'opacité : l'entrée en fondu reste nette) */
  font-size: var(--fs-hero-lede);
  line-height: 1.6;
  letter-spacing: 0;
}

.page-hero--compact {
  padding-bottom: clamp(64px, 46.08px + 4.595vw, 132px);
}

.page-hero--compact .page-hero__text {
  max-width: 905px;
}

.page-hero__visual--single {
  aspect-ratio: 597 / 386;
}

.page-hero__visual--single .page-hero__photo {
  inset: 0;
}

@media (min-width: 56.25em) {
  /* photo seule (597 px) : la colonne de texte garde la largeur du titre */
  .page-hero__grid:has(.page-hero__visual--single) {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
  }

  .page-hero__visual--single {
    justify-self: end;
    width: min(100%, 597px);
  }
}

/* chiffres clés : libellé au-dessus, valeur fine, unité en exposant */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: clamp(40px, 29.46px + 2.703vw, 80px);
}

.stats__item {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--c-white-30);
}

.stats dt {
  font-family: var(--ff-code);
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.7;
}

.stats dd {
  font-size: clamp(28px, 25.36px + 0.676vw, 38px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.stats__unit {
  margin-left: 0.15em;
  font-size: 0.55em;
  vertical-align: 0.7em;
  letter-spacing: 0;
  opacity: 0.7;
}

/* petits écrans : valeurs un peu plus petites pour qu'une valeur longue (« −270 → +200 °C »)
   tienne dans sa colonne */
@media (max-width: 37.49em) {
  .stats dd {
    font-size: 1.375rem;
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  /* même entrée que les chiffres de l'accueil : item par item, libellé puis valeur */
  .page-hero .stats__item[data-enter] {
    --kf: calc((var(--d, 5) - 5) * 160ms + 650ms);
    animation: kf-line 0.5s var(--ease-out) backwards;
    animation-delay: var(--kf);
  }

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

  .page-hero .stats__item[data-enter] > dd {
    animation-delay: calc(var(--kf) + 110ms);
  }
}

/* Cartes à filet dégradé (« blocA ») : 1, 2 ou 3 par ligne, lien optionnel en pied */
.grad-cards {
  display: grid;
  gap: clamp(16px, 12.31px + 0.946vw, 30px);
}

.grad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
  padding: clamp(48px, 42.99px + 1.284vw, 67px) clamp(22px, 19.89px + 0.541vw, 30px) clamp(28px, 24.84px + 0.811vw, 40px);
  border-radius: 0 0 12px 12px;
  background: var(--c-white);
}

.grad-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
}

.grad-card__label {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-red);
}

.grad-card__title {
  color: var(--c-ink);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.grad-card__text {
  color: var(--c-grey-dark);
  font-size: 0.875rem;
  line-height: 1.6;
}

.grad-card > .link-arrow {
  margin-top: auto;
  padding-top: clamp(20px, 13.67px + 1.622vw, 44px);
}

@media (min-width: 48em) {
  .grad-cards--2,
  .grad-cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .grad-cards--3 .grad-card {
    min-height: 302px;
  }

  .grad-cards--2 .grad-card {
    min-height: 300px;
  }
}

/* Services : un panneau blanc, 5 colonnes numérotées */
.services {
  display: grid;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-white);
}

.services__item {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 27px 24px 28px;
}

.services__item + .services__item {
  border-top: 1px solid var(--c-beige-dark);
}

.services__title {
  font-size: var(--fs-title-card);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.services__text {
  color: var(--c-grey-dark);
  font-size: 0.8125rem;
  line-height: 1.6;
}

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

  .services__item + .services__item {
    border-top: 0;
  }
}

@media (min-width: 75em) {
  .services {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* B23 · Repères, variante « colonnes » : filet continu, sans pastilles */
.timeline--plain .timeline__list {
  padding-top: 0;
  background-position: 0 0;
}

.timeline--plain .timeline__item {
  padding-top: 24px;
}

.timeline--plain .timeline__item::before {
  content: none;
}

@media (min-width: 64em) {
  .timeline--plain .timeline__list {
    gap: 0;
  }

  .timeline--plain .timeline__item {
    padding: 24px 24px 0;
  }
}

/* Groupe : section sombre, logo du groupe, chiffres et cartes des marques */
.group {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 51.97px + 5.135vw, 148px) 0 clamp(56px, 44.41px + 2.973vw, 100px);
  background: var(--c-navy);
  color: var(--c-white);
}

.group__grid {
  display: grid;
  gap: 48px;
}

.group__text {
  display: grid;
  justify-items: start;
  gap: clamp(20px, 16.84px + 0.811vw, 32px);
}

.group__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.group__lead {
  max-width: 731px;
  color: rgb(179 182 201 / 0.7);
  font-size: var(--fs-hero-lede);
  line-height: 1.6;
}

.group__logo {
  justify-self: center;
  width: clamp(180px, 148.64px + 8.041vw, 299px);
  height: auto;
}

.brand-cards {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 32.62px + 1.892vw, 68px);
}

.brand-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 4px;
  background: rgb(255 255 255 / 0.05);
}

.brand-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 4px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brand-card__label {
  color: var(--c-red);
}

.brand-card__name {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.brand-card__text {
  font-size: 0.875rem;
  line-height: 1.4;
}

.group__motto {
  margin-top: clamp(40px, 33.67px + 1.622vw, 64px);
  font-size: var(--fs-light-m);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

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

@media (min-width: 56.25em) {
  .group__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    align-items: center;
  }
}

@media (min-width: 75em) {
  .brand-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Texte + cartes (Nous rejoindre, Exigences particulières) */
.split {
  display: grid;
  gap: 40px 30px;
}

.split__text {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: clamp(16px, 13.37px + 0.676vw, 28px);
  padding-top: clamp(0px, -5.3px + 1.35vw, 20px);
}

.split__text .lead {
  margin-top: clamp(4px, -3.38px + 1.892vw, 32px);
  color: var(--c-dark);
}

.split__text .text {
  margin-top: -8px;
  color: var(--c-dark);
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: minmax(0, 742fr) minmax(0, 750fr);
    align-items: start;
  }
}

/* B22 · Cartes logo, ligne de 5 (certifications) */
@media (min-width: 48em) {
  .cards--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (min-width: 48em) {
  /* boutons de téléchargement alignés en pied de carte */
  .cards--5 .logo-card {
    grid-template-rows: auto 1fr;
  }

  .cards--5 .logo-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .cards--5 .logo-card__body > .btn {
    margin-top: auto;
  }
}

@media (min-width: 87.5em) {
  .cards--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 30px;
  }

  .cards--5 .logo-card {
    min-height: 421px;
    padding-inline: 32px;
  }
}

/* Actualités : filtres par catégorie */
.news-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.news-filters__label,
.news-filters__count {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.news-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-pill {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--c-grey);
  border-radius: 40px;
  background: var(--c-white);
  color: var(--c-dark);
  font-size: 0.9375rem;
  line-height: 1.38;
  transition:
    background-color var(--dur-fast) linear,
    border-color var(--dur-fast) linear,
    color var(--dur-fast) linear;
}

.filter-pill[aria-current="page"] {
  border-color: var(--c-dark);
  background: var(--c-dark);
  color: var(--c-white);
}

@media (hover: hover) {
  .filter-pill:not([aria-current="page"]):hover {
    border-color: var(--c-dark);
  }
}

@media (pointer: coarse) {
  .filter-pill {
    padding-block: 11px;
  }
}

@media (min-width: 64em) {
  .news-filters__count {
    margin-left: auto;
  }
}

/* Actualités : article à la une (carte cliquable par le titre) */
.feature-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--c-white);
}

.feature-card[hidden] {
  display: none;
}

.feature-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 900 / 540;
  background: var(--c-beige-dark);
}

.feature-card__media picture {
  display: contents;
}

.feature-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.feature-card__body {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 20px;
  padding: clamp(24px, 15.57px + 2.162vw, 56px);
}

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

.feature-card .news-card__meta {
  margin-top: 0;
}

.feature-card__title {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.05;
  text-wrap: balance;
}

.feature-card__title a {
  background: var(--u-hover) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}

.feature-card__text {
  font-size: var(--fs-intro);
  line-height: 1.625;
  letter-spacing: -0.01em;
}

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

  .feature-card:hover .feature-card__title a {
    background-size: 100% 1px;
  }

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

.feature-card__title a:focus-visible {
  background-size: 100% 1px;
}

@media (min-width: 64em) {
  .feature-card {
    grid-template-columns: minmax(0, 900fr) minmax(0, 620fr);
  }

  .feature-card__media {
    aspect-ratio: auto;
    min-height: 540px;
  }
}

/* méta des cartes : la catégorie ne se coupe pas, la date passe à la ligne si besoin */
.news-card__meta {
  flex-wrap: wrap;
  row-gap: 6px;
}

.news-card__meta .tag {
  white-space: nowrap;
}

/* Actualités : grille, absence de résultat, pagination */
.news__grid--list {
  row-gap: clamp(40px, 33.67px + 1.622vw, 64px);
}

.news__grid--list .news-card[hidden],
.news-empty[hidden] {
  display: none;
}

.news-empty {
  padding: 32px;
  border-radius: 12px;
  background: var(--c-white);
  color: var(--c-grey-dark);
  text-align: center;
}

.news-more {
  display: flex;
  justify-content: center;
}

.news-more .icon--arrow {
  rotate: 90deg;
}

@media (hover: hover) {
  .news-more .btn:hover .icon--arrow {
    transform: translateY(2px);
  }
}

.blocks--news {
  --block-gap: clamp(32px, 25.68px + 1.622vw, 56px);
}

.news-list {
  display: grid;
  gap: var(--block-gap);
}

/* 11. Applications (master, page secteur)
   ========================================================================== */

/* hero : vignette remplacée par un badge (adhésion, label) */
.page-hero__badge {
  position: absolute;
  left: 62.48%;
  top: 67.73%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  width: 37.52%;
  aspect-ratio: 242 / 141;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: 0 4px 35px rgb(0 0 0 / 0.1);
  color: var(--c-dark);
  font-family: var(--ff-mono);
  font-size: clamp(0.5625rem, 0.509rem + 0.216vw, 0.75rem);
  line-height: 1.55;
  text-transform: uppercase;
  text-align: center;
}

.page-hero__badge img {
  width: 75%;
  height: auto;
}

/* chiffres clés : valeur et unité sur deux lignes (maquette Hydrogène) */
.stats--stacked dd {
  white-space: normal;
}

.stats--stacked .stats__unit {
  display: block;
  margin: 0;
  font-size: 1em;
  vertical-align: baseline;
  opacity: 1;
}

/* secteurs : cartes sombres de l'accueil sur une section claire */
.section .app-grid {
  color: var(--c-white);
}

.blocks > .section-intro + .app-grid {
  margin-top: clamp(2.5rem, 1.973rem + 2.162vw, 4.5rem);
}

/* frise de la chaîne de valeur : défile horizontalement sous 900 px */
.value-chain {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: thin;
}

.value-chain:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}

.value-chain picture {
  display: block;
  width: max(760px, 100%);
  max-width: 1342px;
  margin-inline: auto;
}

.value-chain img {
  width: 100%;
  height: auto;
}

@media (min-width: 56.25em) {
  .value-chain {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* cartes d'étape : filet dégradé, liste fléchée, séries concernées */
.stage-cards {
  display: grid;
  gap: 24px;
}

.stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 32px 29px 28px;
  border-radius: 0 0 12px 12px;
  background: var(--c-beige);
}

.stage-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
}

.stage-card__label {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  color: var(--c-red);
}

.stage-card__title {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1;
}

.stage-card__text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--c-grey-dark);
}

.stage-card__list {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 17px;
  border-top: 1px solid var(--c-grey);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.stage-card__list li {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
}

.stage-card__list li::before {
  content: "→";
  color: var(--c-red);
  font-size: 0.875rem;
  font-weight: 500;
}

.stage-card__series {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
}

.stage-card__series a,
.stage-card__series span {
  display: block;
  padding: 7px 8px;
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-grey-dark);
  font-size: 0.75rem;
  line-height: 1;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

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

@media (pointer: coarse) {
  .stage-card__series a {
    padding-block: 11px;
  }
}

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

/* trois niveaux de réponse : carte blanche + composition de produits */
.levels {
  display: grid;
  gap: 24px;
}

.level-card {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(32px, 27.25px + 1.216vw, 51px) clamp(22px, 19.89px + 0.541vw, 30px) 30px;
  border-radius: 12px;
  background: var(--c-white);
}

.level-card__title {
  padding-bottom: 12px;
  font-size: var(--fs-title-l);
  font-weight: 400;
  line-height: 1;
}

.level-card__text {
  max-width: 409px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(23 24 56 / 0.75);
}

.level-card__visual {
  position: relative;
  aspect-ratio: 434 / 406;
}

.level-card__visual picture {
  display: contents;
}

.level-card__visual img {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: auto;
  scale: var(--flip, 1) 1;
}

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