@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --ink: #0b1914;
  --muted: #596660;
  --paper: #f3f5f2;
  --surface: #ffffff;
  --forest: #064b35;
  --leaf: #188255;
  --gold: #d4a63a;
  --clay: #ad4f35;
  --blue: #174d68;
  --line: rgba(11, 25, 20, 0.13);
  --line-strong: rgba(11, 25, 20, 0.24);
  --line-control: rgba(11, 25, 20, 0.48);
  --shadow: 0 24px 70px rgba(11, 25, 20, 0.14);
  --radius: 8px;
  --content: 1440px;
  --header-height: 82px;
  --gutter: max(24px, calc((100vw - var(--content)) / 2));
  --dock-space: 0px;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  padding-bottom: var(--dock-space);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-primary);
  line-height: 1.55;
  letter-spacing: 0;
}

body.nav-open {
  overflow: hidden;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  color: #fff;
  background: var(--forest);
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 160ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

main:focus {
  outline: 0;
}

::selection {
  color: #fff;
  background: var(--forest);
}

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(212, 166, 58, 0.72);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  transition: box-shadow 220ms ease, background 220ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 12px 36px rgba(11, 25, 20, 0.08);
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.brand strong,
.brand small {
  display: block;
  white-space: nowrap;
}

.brand strong {
  font-family: var(--font-primary);
  font-size: 1.08rem;
  font-weight: 700;
}

.brand small {
  color: var(--muted);
  font-size: 0.82rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.site-nav a {
  position: relative;
  text-decoration: none;
  transition: color 180ms ease;
}

.site-nav > a:not(.nav-cta):not(.language-link)::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-nav > a:not(.nav-cta):not(.language-link):hover::after,
.site-nav > a:not(.nav-cta):not(.language-link).is-active::after {
  transform: scaleX(1);
}

.site-nav a:hover {
  color: var(--forest);
}

.site-nav .language-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(6, 75, 53, .18);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
}

.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-weight: 750;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.nav-cta {
  color: #fff;
  background: var(--forest);
  border: 1px solid var(--forest);
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible,
.site-nav .nav-cta.is-active {
  color: #fff;
}

.button-primary {
  color: #fff;
  background: var(--forest);
  border: 1px solid var(--forest);
}

.button-secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.08);
}

.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 160ms ease;
}

.nav-toggle span + span {
  margin-top: 5px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

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

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  min-height: min(720px, calc(100svh - var(--header-height)));
  overflow: hidden;
  padding: clamp(24px, 5vw, 56px) 0 58px;
  isolation: isolate;
}

.hero-slide,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slide {
  opacity: 0;
  transition: opacity 800ms ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transform: scale(1.025);
  transition: transform 5s ease;
}

.hero-slide.is-active img {
  transform: scale(1.08);
}

.hero-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 15, 11, 0.94) 0%, rgba(6, 28, 20, 0.78) 48%, rgba(8, 25, 33, 0.32) 100%),
    linear-gradient(0deg, rgba(3, 15, 11, 0.74) 0%, rgba(3, 15, 11, 0) 54%);
}

.hero-content {
  align-self: center;
  /* Le gutter est un padding : s'il est compte dans le max-width, la colonne
     de texte retrecit quand l'ecran s'elargit (620px a 1920, contre 1052 a
     1440). On l'ajoute pour garder 1100px de texte quelle que soit la taille. */
  max-width: calc(1100px + 2 * var(--gutter));
  padding: 0 var(--gutter);
  color: #fff;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Titre empile a fort contraste, mais assez contenu pour rester lisible sur
   desktop large et ne pas deborder quand la promesse est longue. */
.hero-title {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-title-lead {
  font-size: clamp(2rem, 4vw, 4.5rem);
}

.hero-title-strong {
  display: block;
  max-width: 980px;
  font-size: clamp(2.15rem, 5.2vw, 5.8rem);
}

.hero-copy {
  max-width: 690px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.18rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hero-audience li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-marquee {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(3, 15, 11, 0.82);
  color: #fff;
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  animation: hero-marquee 30s linear infinite;
}

.hero-marquee-group {
  display: flex;
  align-items: center;
}

.hero-marquee span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  padding: 0 24px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero-marquee span::after {
  position: absolute;
  right: -2px;
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 50%;
  background: var(--gold);
}





.slider-button,
.slider-dots button {
  cursor: pointer;
}

.slider-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.4rem;
  line-height: 1;
  transition: background 180ms ease, border-color 180ms ease;
}

.slider-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.slider-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-play .icon-play {
  fill: currentColor;
  stroke: none;
}

.slider-play[data-state="playing"] .icon-play,
.slider-play[data-state="paused"] .icon-pause {
  display: none;
}

.slider-play[hidden] {
  display: none;
}

/* Legende du visuel, calee a droite juste au-dessus de la bande d'actualites :
   elle decrit le pole affiche sans disputer sa place au titre de marque. */
.hero-caption {
  justify-self: end;
  max-width: min(460px, 100%);
  margin: 0 var(--gutter) clamp(22px, 3vw, 38px);
  padding-top: 18px;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.hero-caption-kicker {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-caption h2 {
  margin: 0 0 8px;
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
}

.hero-caption p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Rail vertical colle au bord droit du hero, a la maniere de reperes de
   chapitre : il indique le pole affiche sans occuper de place dans la page. */
.hero-rail {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(14px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(-50%);
}


.slider-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Zone tactile de 44px autour d'un repere visuellement fin. */
.slider-dots button {
  position: relative;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.slider-dots button::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 2px;
  content: "";
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  transform: translateX(-50%);
  transition: background 180ms ease;
}

.slider-dots button:hover::before {
  background: rgba(255, 255, 255, 0.7);
}

.slider-dots button.is-active::before {
  background: rgba(255, 255, 255, 0.28);
}

/* Progression du defilement automatique, dessinee de haut en bas. */
.slider-dots button.is-active::after {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: calc(100% - 6px);
  content: "";
  border-radius: 999px;
  background: var(--gold);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
}

.hero.is-playing .slider-dots button.is-active::after {
  animation: slide-progress var(--slide-duration, 5000ms) linear forwards;
}

@keyframes slide-progress {
  to {
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes hero-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------------ */
/* Bande d'acces rapide ancree en bas du hero                          */
/* ------------------------------------------------------------------ */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.trust-strip div {
  min-height: 112px;
  padding: 24px clamp(18px, 3vw, 40px);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-strip div:last-child {
  border-right: 0;
}

.trust-strip strong {
  display: block;
  color: #fff;
  font-family: var(--font-primary);
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

.trust-strip span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.quick-access {
  display: grid;
  grid-template-columns: minmax(260px, 0.48fr) minmax(320px, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: start;
  padding: clamp(34px, 5vw, 58px) var(--gutter);
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.quick-access h2 {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.quick-access-grid a {
  position: relative;
  min-height: 132px;
  padding: 20px;
  overflow: hidden;
  background: #f8faf7;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}

.quick-access-grid a::after {
  position: absolute;
  right: 18px;
  bottom: 16px;
  content: "\2192";
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 850;
  transition: transform 180ms ease;
}

.quick-access-grid a:hover,
.quick-access-grid a:focus-visible {
  color: #fff;
  background: var(--forest);
}

.quick-access-grid a:hover::after,
.quick-access-grid a:focus-visible::after {
  transform: translateX(4px);
}

.quick-access-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.quick-access-grid strong {
  display: block;
  margin-top: 12px;
  padding-right: 18px;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.3;
}

.quick-access-grid a:hover span,
.quick-access-grid a:focus-visible span,
.quick-access-grid a:hover strong,
.quick-access-grid a:focus-visible strong {
  color: #fff;
}

.section {
  padding: clamp(56px, 7vw, 104px) var(--gutter);
}

.section-heading {
  max-width: 760px;
}

.section-lead {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.section-heading h2,
.export-content h2,
.contact-band h2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(2.1rem, 3.7vw, 3.7rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.intro-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(280px, 1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}

.intro-copy {
  color: var(--muted);
  font-size: 1.06rem;
}

.intro-copy p:first-child {
  margin-top: 0;
}

.brand-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 30px;
  background: var(--line);
  border: 1px solid var(--line);
}

.brand-proof div {
  min-height: 132px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.brand-proof strong {
  display: block;
  color: var(--forest);
  font-size: 0.92rem;
  font-weight: 850;
}

.brand-proof span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.proof-section {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 38px;
  background: var(--line);
  border: 1px solid var(--line);
}

.proof-grid article {
  min-height: 220px;
  padding: 26px;
  background: #f8faf7;
}

.proof-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 850;
}

.proof-grid h3 {
  margin: 0 0 12px;
  color: var(--forest);
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.proof-grid p {
  margin: 0;
  color: var(--muted);
}

.activities-section {
  background: #e8efeb;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.activity-card {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 42px rgba(11, 25, 20, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.activity-card:hover {
  box-shadow: 0 24px 56px rgba(11, 25, 20, 0.13);
  transform: translateY(-5px);
}

.activity-card img {
  width: 100%;
  height: 240px;
  flex: 0 0 240px;
  object-fit: cover;
  transition: transform 500ms ease;
}

.activity-card:hover img {
  transform: scale(1.035);
}

.activity-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.activity-card span {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 850;
}

.activity-card h3 {
  margin: 10px 0 12px;
  font-family: var(--font-primary);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.16;
}

.activity-card p {
  margin: 0;
  color: var(--muted);
}

.activity-card .check-list {
  gap: 8px;
  margin: 18px 0 0;
}

.activity-card .check-list li {
  padding-left: 22px;
  color: var(--muted);
}

.activity-card .check-list li::before {
  width: 10px;
}

.activity-card a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  color: var(--forest);
  font-weight: 800;
  text-decoration: none;
}

.activity-card a::after,
.footer-columns a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 180ms ease;
}

.activity-card a:hover::after,
.footer-columns a:hover::after {
  transform: translateX(4px);
}

.footer-columns a::after {
  display: none;
}

.export-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(280px, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  background: #063d2d;
  color: #fff;
}

.export-media img {
  width: 100%;
  min-height: 420px;
  max-height: 620px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 20px 20px 0 rgba(212, 166, 58, 0.22);
}

.export-content p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.86);
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--gold);
}

.commitment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 44px;
  background: var(--line);
  border: 1px solid var(--line);
}

.commitment-grid article {
  min-height: 220px;
  padding: 26px;
  background: var(--surface);
  transition: background 180ms ease, color 180ms ease;
}

.commitment-grid article:hover {
  color: #fff;
  background: var(--forest);
}

.commitment-grid h3 {
  margin: 0 0 14px;
  color: var(--forest);
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 500;
}

.commitment-grid p {
  margin: 0;
  color: var(--muted);
}

.commitment-grid article:hover h3,
.commitment-grid article:hover p {
  color: #fff;
}

.vision-values-section .section-heading {
  max-width: 920px;
}

.vision-quote {
  max-width: 920px;
  margin-top: 38px;
  padding: clamp(28px, 4vw, 46px);
  color: #fff;
  background: var(--forest);
  border-radius: var(--radius);
}

.vision-quote blockquote {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.7rem, 3vw, 3.1rem);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

.vision-quote cite {
  display: block;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
  font-weight: 700;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}

.mission-grid article {
  min-height: 260px;
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
}

.mission-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mission-grid h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 500;
  line-height: 1.14;
}

.mission-grid p {
  margin: 0;
  color: var(--muted);
}

.value-grid {
  grid-template-columns: repeat(3, 1fr);
}

.commitment-focus {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
}

.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(52px, 6vw, 80px) var(--gutter);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(23, 63, 97, 0.94), rgba(23, 75, 54, 0.92)),
    url("../images/btp.webp") center / cover;
}

.contact-band div {
  max-width: 760px;
}

.contact-band p:last-child {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer {
  padding: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-nav a.is-active {
  color: var(--forest);
}

.site-nav .nav-cta.is-active {
  color: #fff;
}

.button-dark {
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
}

.button-light {
  color: var(--forest);
  background: #fff;
  border: 1px solid #fff;
}

.button-ghost {
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--line-control);
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);
}

.button-primary:hover,
.nav-cta:hover {
  background: #053f2c;
  border-color: #053f2c;
  box-shadow: 0 12px 30px rgba(11, 25, 20, 0.18);
}

.button-ghost:hover {
  background: rgba(6, 75, 53, 0.08);
  border-color: var(--forest);
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.78);
}

.button-light:hover {
  background: #eef2f0;
  border-color: #eef2f0;
  box-shadow: 0 12px 30px rgba(11, 25, 20, 0.18);
}

.button-dark:hover {
  background: #16302a;
  border-color: #16302a;
  box-shadow: 0 12px 30px rgba(11, 25, 20, 0.18);
}

.button:active,
.nav-cta:active,
.filter-button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(11, 25, 20, 0.22);
}

.button-primary:active,
.nav-cta:active {
  background: #053f2c;
  border-color: #053f2c;
}

.button-ghost:active {
  background: rgba(6, 75, 53, 0.08);
  border-color: var(--forest);
}

.button-secondary:active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.78);
}

.button-light:active {
  background: #eef2f0;
  border-color: #eef2f0;
}

.button-dark:active {
  background: #16302a;
  border-color: #16302a;
}

.button:disabled,
.nav-cta:disabled,
.filter-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-primary:disabled:hover,
.nav-cta:disabled:hover {
  background: var(--forest);
  border-color: var(--forest);
}

.button-ghost:disabled:hover {
  background: transparent;
  border-color: var(--line-control);
}

.button-secondary:disabled:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.52);
}

.button-light:disabled:hover {
  background: #fff;
  border-color: #fff;
}

.button-dark:disabled:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.94fr) minmax(280px, 0.72fr);
  gap: clamp(30px, 6vw, 82px);
  align-items: end;
  min-height: min(650px, calc(100svh - var(--header-height)));
  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(44px, 6vw, 72px);
  overflow: hidden;
  color: #fff;
  background: #0a1f18;
  isolation: isolate;
}

/* L'image est un <img> plutot qu'un background : un url() relatif place dans une
   custom property est resolu par rapport a la feuille de style, ce qui renvoyait
   vers assets/css/assets/images/... et cassait tous les heros internes. */
.page-hero-media,
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 18, 14, 0.9), rgba(12, 34, 26, 0.7), rgba(13, 34, 45, 0.24)),
    linear-gradient(0deg, rgba(4, 16, 12, 0.7), rgba(4, 16, 12, 0) 55%);
}

.page-hero h1 {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(2.4rem, 4.6vw, 5rem);
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
}

.page-hero p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.15rem;
  line-height: 1.7;
}

.page-hero .update-note {
  display: inline-flex;
  width: auto;
  margin: 4px 0 0;
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.page-hero-card {
  padding: 24px 0 0 26px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.52);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.page-hero-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 0.78rem;
}

.page-actions,
.card-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.breadcrumb {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  font-weight: 700;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  margin-right: 8px;
  content: "/";
  color: rgba(255, 255, 255, 0.45);
}

.breadcrumb a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.breadcrumb a:hover {
  color: #fff;
  text-decoration-color: var(--gold);
}

.breadcrumb [aria-current="page"] {
  color: #fff;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(280px, 1fr);
  gap: clamp(30px, 6vw, 86px);
  align-items: start;
}

.content-panel {
  padding: clamp(24px, 4vw, 38px);
  background: transparent;
  border-top: 1px solid var(--line-strong);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.content-panel h3,
.metric-card h3,
.service-card h3,
.product-card h3,
.news-card h3 {
  margin: 0 0 12px;
  line-height: 1.16;
}

.content-panel h3,
.metric-card h3,
.service-card h3,
.product-card h3,
.news-card h3 {
  font-family: var(--font-primary);
  font-weight: 500;
}

.content-panel p,
.service-card p,
.product-card p,
.news-card p,
.metric-card p {
  color: var(--muted);
}

.metric-grid,
.service-grid,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.metric-card,
.service-card,
.news-card,
.product-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(11, 25, 20, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.news-card,
.product-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.metric-card:hover,
.service-card:hover,
.news-card:hover,
.product-card:hover {
  box-shadow: 0 24px 56px rgba(11, 25, 20, 0.12);
  transform: translateY(-4px);
}

.metric-card,
.service-card {
  padding: 26px;
}

.metric-card strong {
  display: block;
  margin-bottom: 14px;
  color: var(--forest);
  font-family: var(--font-primary);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 0.95;
}

.service-card small,
.product-card small,
.news-card small {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--gold);
  font-weight: 850;
  text-transform: uppercase;
}

.news-date {
  display: block;
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.news-card h3 a {
  text-decoration: none;
}

.news-card h3 a:hover {
  color: var(--forest);
}

.realisation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
  font-size: 0.84rem;
  font-weight: 700;
}

.realisation-meta span {
  display: inline-flex;
  align-items: center;
}

.realisation-meta span + span::before {
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background: var(--gold);
  border-radius: 50%;
  content: "";
}

.realisation-client {
  margin: -2px 0 12px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.realisation-detail {
  font-size: 1.03rem;
  line-height: 1.82;
}

.section-more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.editorial-rhythm {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.dark-section {
  color: #fff;
  background: #091914;
}

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

.dark-section p,
.dark-section li {
  color: rgba(255, 255, 255, 0.75);
}

.dark-section .service-card,
.dark-section .commitment-grid article {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.dark-section .service-card p,
.dark-section .commitment-grid p {
  color: rgba(255, 255, 255, 0.72);
}

.timeline {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.timeline article {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.06);
}

.timeline strong {
  color: var(--gold);
}

.product-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 4px;
}

.filter-button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  color: var(--forest);
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.filter-button:hover {
  background: rgba(6, 75, 53, 0.08);
  border-color: var(--forest);
}

.filter-button:active {
  background: rgba(6, 75, 53, 0.08);
  border-color: var(--forest);
}

.filter-button .filter-count {
  margin-left: 8px;
  opacity: 0.65;
  font-weight: 700;
}

.filter-button.is-active {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
}

.filter-button:disabled:hover {
  background: #fff;
  border-color: var(--line-control);
}

.filter-result {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.empty-state {
  margin-top: 26px;
  padding: 42px 24px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}

.empty-state h3 {
  margin: 0 0 8px;
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 500;
}

.empty-state p {
  margin: 0 0 18px;
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.product-card img,
.news-card img {
  width: 100%;
  height: 240px;
  flex: 0 0 240px;
  object-fit: cover;
  transition: transform 500ms ease;
}

.product-card:hover img,
.news-card:hover img {
  transform: scale(1.035);
}

.product-visual {
  display: grid;
  width: 100%;
  height: 240px;
  flex: 0 0 240px;
  place-items: center;
  background: linear-gradient(135deg, #07533b, #c3952c);
}

.product-visual span {
  display: inline-grid;
  min-width: 112px;
  min-height: 112px;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 1.02rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.import-visual {
  background: linear-gradient(135deg, #174d68, #be8731);
}

.product-card > div:last-child,
.news-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.news-card .button,
.product-card .card-actions {
  align-self: flex-start;
  margin-top: auto;
}

.product-card .card-actions {
  padding-top: 24px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.content-panel .check-list li {
  color: var(--muted);
}

.content-panel .check-list li::before {
  background: var(--forest);
}

.content-questions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.content-questions article {
  min-height: 170px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.06);
}

.content-questions h3 {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.24;
}

.content-questions p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.soft-section .content-questions,
.section:not(.dark-section) .content-questions {
  background: var(--line);
  border-color: var(--line);
}

.soft-section .content-questions article,
.section:not(.dark-section) .content-questions article {
  background: var(--surface);
}

.soft-section .content-questions h3,
.section:not(.dark-section) .content-questions h3 {
  color: var(--forest);
}

.soft-section .content-questions p,
.section:not(.dark-section) .content-questions p {
  color: var(--muted);
}

.catalogue-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 18px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.catalogue-note {
  display: grid;
  grid-template-columns: minmax(180px, 0.26fr) 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 18px 20px;
  color: #fff;
  background: var(--forest);
  border-radius: var(--radius);
}

.catalogue-note strong {
  color: var(--gold);
  font-size: 0.88rem;
  text-transform: uppercase;
}

.catalogue-note span {
  color: rgba(255, 255, 255, 0.82);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(280px, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.contact-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.contact-item {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 180ms ease, transform 180ms ease;
}

.contact-item:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.contact-item strong {
  display: block;
  margin-bottom: 4px;
}

.form-card {
  padding: clamp(24px, 4vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(16, 32, 25, 0.07);
}

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

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.field label {
  color: var(--forest);
  font-size: 0.9rem;
  font-weight: 800;
}

.field .optional {
  color: var(--muted);
  font-weight: 600;
}

.required-mark {
  margin-left: 2px;
  color: var(--clay);
}

.form-legend {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.86rem;
}

.field-error {
  display: none;
  margin: 0;
  color: var(--clay);
  font-size: 0.85rem;
  font-weight: 700;
}

.field.is-invalid .field-error {
  display: block;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--clay);
  background: #fdf7f5;
}

.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(173, 79, 53, 0.14);
}

.form-status {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #f4f8f5;
  font-size: 0.94rem;
}

.form-status[hidden] {
  display: none;
}

.form-status strong {
  display: block;
  color: var(--forest);
}

.form-status.is-error {
  border-color: rgba(173, 79, 53, 0.4);
  background: #fdf5f2;
}

.form-status.is-error strong {
  color: var(--clay);
}

.form-status .status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link-button {
  padding: 0;
  color: var(--forest);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover {
  color: var(--leaf);
}

.form-prefill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  color: var(--forest);
  background: #eef4f0;
  border: 1px solid rgba(6, 75, 53, 0.18);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.form-prefill[hidden] {
  display: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(6, 75, 53, 0.1);
  outline: 0;
}

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

.soft-section {
  background: #e8efeb;
}

.media-band {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.media-band img {
  width: 100%;
  height: clamp(260px, 23vw, 380px);
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius);
}

.media-carousel {
  position: relative;
  width: 100%;
  height: clamp(260px, 23vw, 380px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius);
}

.media-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 520ms ease, transform 720ms ease;
}

.media-carousel img.is-active {
  opacity: 1;
  transform: none;
}

.media-carousel-dots {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(11, 25, 20, 0.12);
  backdrop-filter: blur(10px);
}

.media-carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  cursor: pointer;
  background: rgba(11, 25, 20, 0.28);
  border: 0;
  border-radius: 50%;
  transition: background 180ms ease, transform 180ms ease;
}

.media-carousel-dots button:hover,
.media-carousel-dots button.is-active {
  background: var(--forest);
  transform: scale(1.2);
}

.export-media .media-carousel {
  height: clamp(420px, 34vw, 620px);
  box-shadow: 20px 20px 0 rgba(212, 166, 58, 0.22);
}

.export-media .media-carousel img {
  min-height: 0;
  max-height: none;
  box-shadow: none;
}

.form-layout h2,
.media-band h2,
.legal-content h2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.08;
}

.legal-hero {
  min-height: 500px;
  grid-template-columns: minmax(280px, 900px);
}

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

.legal-content article {
  min-height: 260px;
  padding: 40px;
  background: var(--surface);
}

.legal-content h2 {
  font-size: 2rem;
}

.legal-content p {
  color: var(--muted);
}

.legal-content a {
  color: var(--forest);
  font-weight: 700;
}

/* Pied de page pleine largeur, aligne sur la meme gouttiere que les sections. */
/* Sortie des pages legales : elles sont indexees, donc atteignables
   directement depuis une recherche, et doivent offrir une suite. */
.legal-outro {
  background: #e8efeb;
  text-align: center;
}

.legal-outro .section-heading {
  max-width: 640px;
  margin: 0 auto;
}

.legal-outro .page-actions {
  justify-content: center;
}

.footer-card {
  padding: clamp(44px, 5vw, 72px) var(--gutter);
  color: #151a16;
  background: #fff;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(420px, 0.9fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
}

.footer-brand {
  max-width: 510px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  color: var(--ink);
  font-weight: 800;
}

.footer-logo img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
}

.footer-brand p {
  max-width: 460px;
  color: #5e695f;
  line-height: 1.7;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.footer-socials svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.footer-socials a:hover {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
  transform: translateY(-2px);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: clamp(28px, 4vw, 68px);
}

.footer-columns strong {
  display: block;
  margin-bottom: 20px;
  color: #0f1511;
  font-size: 0.92rem;
}

.footer-columns a {
  display: block;
  margin: 0 0 14px;
  color: #5e695f;
  font-size: 0.86rem;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-columns a:hover,
.footer-bottom a:hover {
  color: var(--forest);
}

.footer-columns a:hover {
  transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Apparitions au defilement                                           */
/* ------------------------------------------------------------------ */

/* Rien n'est masque si l'utilisateur demande a limiter les animations.
   L'etat cache est enferme dans `no-preference` plutot qu'annule ensuite :
   une media query n'ajoute pas de specificite, un bloc d'annulation aurait
   perdu contre les selecteurs ci-dessous. */
@media (prefers-reduced-motion: no-preference) {
  /* L'etat cache est declare ici, en CSS, et non pose par JavaScript : sinon le
     contenu s'affiche une fraction de seconde avant que le script ne le masque,
     ce qui produit un clignotement visible sur machine lente.
     `no-reveal` est pose par le garde-fou du <head> si le script ne demarre
     jamais : aucun contenu ne peut rester invisible a cause d'une erreur JS. */
  html.js:not(.no-reveal) .section-heading,
  html.js:not(.no-reveal) .intro-copy,
  html.js:not(.no-reveal) .content-panel,
  html.js:not(.no-reveal) .export-content,
  html.js:not(.no-reveal) .export-media,
  html.js:not(.no-reveal) .media-band > img,
  html.js:not(.no-reveal) .media-band > .media-carousel,
  html.js:not(.no-reveal) .form-card,
  html.js:not(.no-reveal) .activity-grid > *,
  html.js:not(.no-reveal) .service-grid > *,
  html.js:not(.no-reveal) .metric-grid > *,
  html.js:not(.no-reveal) .news-grid > *,
  html.js:not(.no-reveal) .product-grid > *,
  html.js:not(.no-reveal) .commitment-grid > *,
  html.js:not(.no-reveal) .trust-strip > *,
  html.js:not(.no-reveal) .timeline > *,
  html.js:not(.no-reveal) .contact-list > * {
    opacity: 0;
    /* translate3d plutot que translateY : la composition passe sur le GPU sans
       avoir a declarer will-change sur des dizaines d'elements. */
    transform: translate3d(var(--rv-x, 0), var(--rv-y, 22px), 0) scale(var(--rv-s, 1));
    transition:
      opacity var(--rv-dur, 620ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-delay, 0ms),
      transform var(--rv-dur, 620ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-delay, 0ms);
  }

  /* Variantes : chaque famille ne redefinit que ses parametres, l'effet et la
     transition restent declares une seule fois ci-dessus. */

  /* Cartes : deplacement un peu plus ample et infime mise a l'echelle, ce qui
     donne l'impression qu'elles avancent vers le lecteur. */
  html.js:not(.no-reveal) .activity-grid > *,
  html.js:not(.no-reveal) .service-grid > *,
  html.js:not(.no-reveal) .metric-grid > *,
  html.js:not(.no-reveal) .news-grid > *,
  html.js:not(.no-reveal) .product-grid > * {
    --rv-y: 28px;
    --rv-s: 0.985;
  }

  /* Visuels : leger recadrage qui se stabilise, sans deplacement vertical. */
  html.js:not(.no-reveal) .export-media,
  html.js:not(.no-reveal) .media-band > img,
  html.js:not(.no-reveal) .media-band > .media-carousel {
    --rv-y: 0px;
    --rv-s: 1.05;
    --rv-dur: 900ms;
  }

  /* Lignes de liste et blocs pleine largeur : glissement lateral court. */
  html.js:not(.no-reveal) .timeline > *,
  html.js:not(.no-reveal) .contact-list > * {
    --rv-y: 0px;
    --rv-x: -18px;
    --rv-dur: 520ms;
  }

  /* Bande de reperes : deplacement discret, elle est dense et proche du hero. */
  html.js:not(.no-reveal) .trust-strip > *,
  html.js:not(.no-reveal) .commitment-grid > * {
    --rv-y: 16px;
    --rv-dur: 520ms;
  }

  /* Etat revele. Meme specificite que l'etat cache, place apres pour l'emporter. */
  html.js:not(.no-reveal) .is-visible,
  html.js:not(.no-reveal) .media-band > img.is-visible,
  html.js:not(.no-reveal) .media-band > .media-carousel.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Effets pilotes par le defilement                                    */
/* ------------------------------------------------------------------ */

/* Ces deux effets utilisent les animations liees au defilement natives : elles
   tournent hors du fil principal, donc sans risque de saccade, et ne coutent
   aucune ligne de JavaScript. La ou elles ne sont pas supportees, il ne se
   passe simplement rien : les deux effets sont decoratifs. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Barre de progression de lecture, sous l'en-tete fixe.
       En absolu, donc retiree du flux flex de l'en-tete. */
    .site-header::after {
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      content: "";
      background: linear-gradient(90deg, var(--forest), var(--gold));
      transform: scaleX(0);
      transform-origin: left center;
      animation: lecture-progression linear;
      animation-timeline: scroll(root block);
    }

    @keyframes lecture-progression {
      to {
        transform: scaleX(1);
      }
    }

    /* Parallaxe des heros internes : le visuel derive plus lentement que la
       page. L'echelle de depart cree la marge necessaire pour que le
       deplacement ne decouvre jamais le bord de l'image. */
    .page-hero-media {
      transform: scale(1.12);
      animation: hero-parallaxe linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    @keyframes hero-parallaxe {
      to {
        transform: scale(1.12) translate3d(0, 7%, 0);
      }
    }
  }
}

.to-top {
  position: fixed;
  z-index: 12;
  right: 20px;
  bottom: calc(20px + var(--dock-space));
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--forest);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(11, 25, 20, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms, background 180ms ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--leaf);
}

.to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast {
  position: fixed;
  z-index: 30;
  bottom: 24px;
  left: 50%;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 20px;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(16, 32, 25, 0.12);
  color: #5e695f;
  font-size: 0.84rem;
}

.footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.footer-bottom a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1000px) {
  .nav-toggle {
    display: block;
  }

  /* Menu lateral : le panneau glisse depuis la droite et occupe toute la hauteur
     restante sous l'en-tete. `position: absolute` et non `fixed` : `.site-header`
     porte un `backdrop-filter`, qui fait de l'en-tete le bloc conteneur de ses
     descendants fixes ; un panneau fixe se calerait donc sur l'en-tete et non sur
     la fenetre. L'en-tete etant `sticky`, l'absolu donne deja le bon repere. */
  .site-nav {
    position: absolute;
    z-index: 25;
    top: var(--header-height);
    right: 0;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: min(380px, 86vw);
    height: calc(100svh - var(--header-height));
    padding: 18px 16px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 1rem;
    background: var(--surface);
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: -24px 0 60px rgba(11, 25, 20, 0.18);
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 100ms ease, visibility 0s linear 180ms;
  }

  /* `visibility` et pas seulement une sortie d'ecran : sans elle, les liens du
     panneau ferme resteraient atteignables au clavier. Elle bascule sans duree,
     mais apres la transition a la fermeture, comme `.route-veil`. */
  .site-nav.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 100ms ease, visibility 0s;
  }

  /* Voile d'arriere-plan. Pseudo-element permanent sur `body` : anime dans les
     deux sens, et aucun markup a ajouter, donc valable aussi pour les pages PHP
     ecrites a la main. Au-dessus du bouton retour en haut (12), sous l'en-tete
     (20) et sous les indicateurs de chargement (90 et 92). Le clic atterrit sur
     `body` : `main.js` ferme deja le menu a tout clic hors du panneau. */
  body::after {
    position: fixed;
    z-index: 15;
    inset: 0;
    content: "";
    background: rgba(11, 25, 20, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }

  body.nav-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 120ms ease 280ms, visibility 0s;
  }

  /* Entree des liens en cascade. Le decalage n'est porte que par l'etat ouvert :
     a la fermeture, tout repart ensemble et le panneau ne traine pas. */
  .site-nav > a {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 220ms ease, transform 220ms ease, color 180ms ease;
  }

  .site-nav.is-open > a {
    opacity: 1;
    transform: none;
  }

  .site-nav.is-open > a:nth-child(1) {
    transition-delay: 60ms;
  }

  .site-nav.is-open > a:nth-child(2) {
    transition-delay: 86ms;
  }

  .site-nav.is-open > a:nth-child(3) {
    transition-delay: 112ms;
  }

  .site-nav.is-open > a:nth-child(4) {
    transition-delay: 138ms;
  }

  .site-nav.is-open > a:nth-child(5) {
    transition-delay: 164ms;
  }

  .site-nav.is-open > a:nth-child(6) {
    transition-delay: 190ms;
  }

  .site-nav.is-open > a:nth-child(7) {
    transition-delay: 216ms;
  }

  .site-nav.is-open > a:nth-child(8) {
    transition-delay: 242ms;
  }

  .site-nav.is-open > a:nth-child(9) {
    transition-delay: 260ms;
  }

  .site-nav.is-open > a:nth-child(10) {
    transition-delay: 260ms;
  }

  .site-nav.is-open > a:nth-child(n) {
    transition-delay: 0s;
  }

  /* Cible tactile pleine largeur et etat actif lisible en menu deroulant. */
  .site-nav > a:not(.nav-cta) {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    border-radius: var(--radius);
  }

  .site-nav > a:not(.nav-cta):not(.language-link)::after {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 0;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 180ms ease;
  }

  .site-nav > a:not(.nav-cta):not(.language-link):hover::after,
  .site-nav > a:not(.nav-cta):not(.language-link).is-active::after {
    transform: scaleY(1);
  }

  .site-nav > a:not(.nav-cta).is-active {
    color: var(--forest);
    background: #eef4f0;
  }

  .nav-cta {
    margin-top: 14px;
    color: #fff;
  }

  /* Mouvement reduit : plus de glissement ni de cascade, un fondu court suffit a
     signaler l'ouverture sans deplacer quoi que ce soit. */
  @media (prefers-reduced-motion: reduce) {
    .site-nav {
      transform: none;
      transition: opacity 120ms ease, visibility 0s linear 120ms;
    }

    .site-nav.is-open {
      transform: none;
      transition: opacity 120ms ease, visibility 0s;
    }

    .site-nav > a {
      transform: none;
      transition: none;
    }

    /* `:nth-child(n)` pour egaler la specificite des delais de cascade ci-dessus,
       sinon ils survivent et les liens apparaissent encore en escalier. */
    .site-nav.is-open > a:nth-child(n) {
      transition-delay: 0s;
    }

    body::after,
    body.nav-open::after {
      transition: opacity 120ms ease, visibility 0s linear 120ms;
    }

    body.nav-open::after {
      transition: opacity 120ms ease, visibility 0s;
    }
  }

  .hero,
  .quick-access,
  .intro-section,
  .export-section,
  .page-hero,
  .two-column,
  .media-band,
  .form-layout {
    grid-template-columns: 1fr;
  }

  .trust-strip,
  .activity-grid,
  .proof-grid,
  .commitment-grid,
  .value-grid,
  .commitment-focus,
  .mission-grid,
  .metric-grid,
  .service-grid,
  .news-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .legal-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1300px) and (min-width: 1001px) {
  .site-header {
    gap: 16px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .site-nav {
    gap: 12px;
    font-size: 0.86rem;
  }

  .nav-cta {
    padding: 0 14px;
  }
}

@media (max-width: 640px) {
  :root {
    /* Hauteur reelle de l'en-tete a cette taille : c'est le bouton menu, pas
       le logo, qui la fixe. La variable servant a calculer la hauteur du hero
       et la position du menu deroulant, une valeur sous-estimee decalait les
       deux. */
    --header-height: 72px;
  }

  .site-header {
    padding: 12px 16px;
  }

  .site-nav {
    right: 0;
    left: auto;
    width: 88vw;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .hero {
    min-height: min(600px, calc(100svh - var(--header-height)));
    padding: 0 0 46px;
  }

  /* Centrage vertical du texte dans la rangee libre du hero. `margin-block: auto`
     plutot que `align-self: center` : si le contenu depasse la hauteur de la
     rangee, les marges auto retombent a 0 et le bloc se cale en haut, au lieu de
     deborder par le haut et de se faire rogner par l'`overflow: hidden`. */
  .hero-content {
    align-self: stretch;
    margin-block: auto;
    padding: 28px 16px;
  }

  .hero-title {
    max-width: 100%;
    font-size: 2.35rem;
    line-height: 1.08;
  }

  /* Hero allege sur mobile : le texte principal suit la diapo active, les
     reperes secondaires passent dans la bande basse. */
  .hero-caption {
    display: none;
  }

  /* Le rail passe a l'horizontale : en vertical il chevaucherait le titre.
     Il redevient un element de la grille et se place entre le titre et la
     bande d'actualites. */
  .hero-rail {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 16px 14px;
    transform: none;
  }

  .hero-marquee-track {
    animation-duration: 24s;
  }

  .hero-marquee span {
    min-height: 46px;
    padding: 0 18px;
    font-size: 0.76rem;
  }

  .slider-dots {
    flex-direction: row;
  }

  .slider-dots button {
    width: 34px;
    height: 44px;
  }

  .slider-dots button::before,
  .slider-dots button.is-active::after {
    top: 50%;
    bottom: auto;
    left: 3px;
    width: calc(100% - 6px);
    height: 2px;
    transform: translateY(-50%);
  }

  .slider-dots button.is-active::after {
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
  }

  /* Animation dediee : celle du rail vertical etire sur l'axe Y. */
  .hero.is-playing .slider-dots button.is-active::after {
    animation-name: slide-progress-horizontal;
  }

  @keyframes slide-progress-horizontal {
    to {
      transform: translateY(-50%) scaleX(1);
    }
  }

  .hero-copy {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-audience {
    display: none;
  }

  .activity-card img,
  .product-card img,
  .news-card img,
  .product-visual {
    height: 220px;
    flex-basis: 220px;
  }

  .hero-actions,
  .button {
    width: 100%;
    text-align: center;
  }

  .to-top {
    right: 14px;
    bottom: 14px;
  }

  .contact-band {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 52px 16px;
  }

  .contact-band > div {
    width: 100%;
  }

  .activity-grid,
  .proof-grid,
  .commitment-grid,
  .value-grid,
  .commitment-focus,
  .mission-grid,
  .metric-grid,
  .service-grid,
  .news-grid,
  .product-grid,
  .field-grid,
  .brand-proof,
  .quick-access-grid,
  .content-questions,
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .quick-access {
    padding: 38px 16px;
  }

  .catalogue-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .quick-access-grid a {
    min-height: 108px;
    padding: 18px;
  }

  .proof-grid article,
  .commitment-grid article,
  .brand-proof div,
  .metric-card,
  .service-card {
    padding: 20px 18px;
  }

  .content-panel,
  .content-questions article,
  .form-card,
  .legal-content article {
    padding: 24px 18px;
  }

  .page-hero-card {
    padding: 18px 0 0 18px;
  }

  .catalogue-note,
  .contact-item {
    padding: 18px;
  }

  .activity-card > div,
  .product-card > div:last-child,
  .news-card > div {
    padding: 22px 18px;
  }

  .trust-strip {
    display: none;
  }

  .footer-card {
    padding: 36px 16px;
    text-align: center;
  }

  .footer-main {
    justify-items: center;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-logo,
  .footer-socials {
    justify-content: center;
  }

  .footer-columns {
    width: 100%;
  }

  .footer-columns a:hover {
    transform: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-bottom div {
    justify-content: center;
  }

  .section {
    padding: 52px 16px;
  }

  .page-hero {
    min-height: auto;
    padding: 56px 16px 42px;
  }

  .form-layout h2,
  .media-band h2 {
    font-size: 2.1rem;
  }

  .legal-content article {
    min-height: 0;
  }

  .page-hero p {
    font-size: 1rem;
  }

  .timeline article {
    grid-template-columns: 1fr;
  }

  .export-media img {
    min-height: 300px;
  }

  .export-media .media-carousel {
    height: clamp(300px, 76vw, 380px);
  }

  .export-media .media-carousel img {
    min-height: 0;
  }

  .media-band img {
    height: clamp(190px, 56vw, 260px);
  }

  .media-carousel {
    height: clamp(190px, 56vw, 260px);
  }

  .media-carousel-dots {
    right: 12px;
    bottom: 12px;
    gap: 7px;
    padding: 7px;
  }
}

/* Ecrans courts : le hero porte titre, accroche, deux actions, la legende du
   pole et la bande d'actualites. On resserre le rythme vertical plutot que de
   masquer du contenu ; la bande peut alors demander un leger defilement. */
@media (max-width: 640px) and (max-height: 720px) {
  .hero {
    padding-bottom: 46px;
  }

  /* Padding symetrique : un padding haut seul fausserait le centrage. */
  .hero-content {
    padding-block: 20px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-copy {
    margin-top: 16px;
    font-size: 0.94rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 20px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    font-size: 0.86rem;
  }

  .hero-rail {
    padding-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Chargement de page                                                  */
/* ------------------------------------------------------------------ */

/* Le site est multi-pages : entre le clic sur un lien et l'arrivee de la page
   suivante, le navigateur ne montre rien du tout. Ces deux elements comblent
   ce vide. La barre part a l'entree de chaque page et repart au depart ; le
   voile n'apparait qu'apres un delai, sinon une navigation rapide produirait
   un clignotement plus desagreable que l'attente qu'il masque. */

.route-progress {
  position: fixed;
  z-index: 92;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.route-progress.is-active {
  opacity: 1;
}

/* La largeur est animee plutot qu'un scaleX : la lueur portee suit le bord
   avant de la barre au lieu d'etre etiree avec elle. Sur 3 pixels de haut,
   le cout de mise en page est negligeable. */
.route-progress-bar {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, var(--forest), var(--leaf) 60%, var(--gold));
  box-shadow: 0 0 16px rgba(24, 130, 85, 0.5), 0 0 4px rgba(212, 166, 58, 0.85);
  transition: width 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.route-progress.is-active .route-progress-bar::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: route-sheen 1.1s linear infinite;
}

.route-veil {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(243, 245, 242, 0.86);
  backdrop-filter: blur(10px) saturate(1.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.route-veil.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s;
}

.route-veil-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 34px 44px;
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.route-veil.is-active .route-veil-card {
  transform: none;
}

.route-veil-mark {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(11, 25, 20, 0.16);
  object-fit: cover;
  animation: route-breathe 2.4s ease-in-out infinite;
}

.route-veil-title {
  margin: 0;
  color: var(--forest);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.route-veil-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.route-veil-line {
  position: relative;
  display: block;
  width: 168px;
  height: 2px;
  overflow: hidden;
  background: var(--line);
  border-radius: 999px;
}

.route-veil-line::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  content: "";
  background: linear-gradient(90deg, var(--forest), var(--gold));
  border-radius: inherit;
  animation: route-slide 1.25s ease-in-out infinite;
}

@keyframes route-sheen {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes route-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes route-slide {
  from {
    left: -40%;
  }

  to {
    left: 100%;
  }
}

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

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

  .hero-slide.is-active img {
    transform: scale(1.025);
  }

  .to-top,
  .toast {
    transition: none;
  }

  .route-veil-mark {
    animation: none;
  }

  .route-veil-line::after {
    left: 0;
    width: 100%;
    animation: none;
  }

  .route-progress.is-active .route-progress-bar::after {
    animation: none;
  }
}

@media (hover: none) {
  .activity-card:hover,
  .metric-card:hover,
  .service-card:hover,
  .news-card:hover,
  .product-card:hover,
  .contact-item:hover,
  .button:hover,
  .nav-cta:hover {
    transform: none;
  }

  /* Sur tactile, :hover reste colle au dernier element touche : sans cela le
     bouton garde sa couleur de survol apres le tap. L'appui reste signale par
     :active, qui lui a du sens ici. */
  .button-primary:hover,
  .nav-cta:hover {
    background: var(--forest);
    border-color: var(--forest);
    box-shadow: none;
  }

  .button-ghost:hover {
    background: transparent;
    border-color: var(--line-control);
  }

  .button-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.52);
  }

  .button-light:hover {
    background: #fff;
    border-color: #fff;
    box-shadow: none;
  }

  .button-dark:hover {
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: none;
  }

  .filter-button:not(.is-active):hover {
    background: #fff;
    border-color: var(--line-control);
  }

  .button:active,
  .nav-cta:active,
  .filter-button:active {
    box-shadow: inset 0 2px 6px rgba(11, 25, 20, 0.22);
  }
}