/* ==========================================================================
   DONLOXHARMER — Couche de marque appliquée par-dessus le gabarit Finspire
   --------------------------------------------------------------------------
   Ne modifie pas finspire.css : redéfinit uniquement les variables du gabarit
   et ajoute les composants absents (fiches produits, coordonnées, intro).
   Couleurs issues du cahier de normes graphiques DonloxHarmer :
     PMS 200 C  → #C30E2E (rouge)
     PMS 431 C  → #5A6771 (acier)
     PMS 410 C  → #88746A (taupe)
   Typographie : Gotham Book / Medium.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typographie Gotham (remplace General Sans du gabarit)
   -------------------------------------------------------------------------- */
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-light.woff2') format('woff2');       font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-book.woff2') format('woff2');        font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-book-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-medium.woff2') format('woff2');      font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-bold.woff2') format('woff2');        font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-bold.woff2') format('woff2');        font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/gotham-black.woff2') format('woff2');       font-weight:800; font-style:normal; font-display:swap; }

/* --------------------------------------------------------------------------
   2. Palette : les variables du gabarit prennent les couleurs DonloxHarmer
   -------------------------------------------------------------------------- */
:root {
  --dh-rouge:        #C30E2E;
  --dh-rouge-clair:  #DF2143;
  --dh-acier:        #5A6771;
  --dh-acier-clair:  #6F7C86;
  --dh-taupe:        #88746A;
  --dh-encre:        #1B2229;
  --dh-gris-pale:    #E8EAEB;
  --dh-gris-tres-pale:#F3F4F5;

  --base-color-brand--white: #FFFFFF;
  --base-color-brand--black: var(--dh-encre);
  --base-color-neutral--black: var(--dh-encre);
  --base-color-neutral--white: #FFFFFF;
  --base-color-neutral--neutral-darkest: var(--dh-encre);
  --base-color-neutral--neutral-darker: #2B343B;
  --base-color-neutral--neutral-dark: #46525C;
  --base-color-neutral--neutral: #6E7A84;
  --base-color-neutral--neutral-light: #A9B2B8;
  --base-color-neutral--neutral-lighter: #D3D8DB;
  --base-color-neutral--neutral-lightest: var(--dh-gris-pale);

  --text-color--text-primary: var(--dh-acier);
  --text-color--text-alternate: #FFFFFF;
  --text-color--text-secondary: var(--dh-encre);

  --background-color--background-primary: var(--dh-acier);
  --background-color--background-secondary: var(--dh-acier-clair);
  --background-color--background-tertiary: var(--dh-gris-pale);
  --background-color--background-alternate: var(--dh-encre);

  --border-color--border-primary: var(--dh-encre);
  --border-color--border-secondary: var(--base-color-neutral--neutral-light);
  --border-color--border-alternate: #FFFFFF;

  --link-color--link-primary: var(--dh-encre);
  --link-color--link-secondary: var(--base-color-neutral--neutral-light);
  --link-color--link-alternate: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2 bis. Contraste — le gabarit force les liens en blanc et fait beaucoup
   hériter. On établit ici deux contextes explicites : clair et foncé.
   -------------------------------------------------------------------------- */
a { color: inherit; }

/* --- Contexte FONCÉ : fond acier, texte clair ---------------------------- */
.section-about,
.section-services,
.section-portfolio,
.section-logo,
.section-cta { color: var(--dh-gris-pale); }

.section-about :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption),
.section-services :is(h1,h2,h3,h4,h5,h6,p,li),
.section-portfolio :is(h1,h2,h3,h4,h5,h6,p,li),
.section-logo :is(h1,h2,h3,h4,h5,h6,p,li),
.section-cta :is(h1,h2,h3,h4,h5,h6,p,li),
.footer :is(h1,h2,h3,h4,h5,h6,p,li) { color: var(--dh-gris-pale); }

/* --- Contexte CLAIR : fond gris pâle ou blanc, texte encre --------------- */
.section-hero,
.section-overview,
.section-content,
.section-news-list,
.section-news,
.section-contact,
.section-contact-form,
.section-about.background-grey,
.section-about.background-light-grey { color: var(--dh-encre); }

.section-hero :is(h1,h2,h3,h4,h5,h6,p,li),
.section-overview :is(h1,h2,h3,h4,h5,h6,p,li),
.section-content :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd),
.section-news-list :is(h1,h2,h3,h4,h5,h6,p,li),
.section-news :is(h1,h2,h3,h4,h5,h6,p,li),
.section-contact :is(h1,h2,h3,h4,h5,h6,p,li),
.section-contact-form :is(h1,h2,h3,h4,h5,h6,p,li),
.section-about.background-grey :is(h1,h2,h3,h4,h5,h6,p,li),
.section-about.background-light-grey :is(h1,h2,h3,h4,h5,h6,p,li) { color: var(--dh-encre); }

/* --- Îlots foncés posés sur un fond clair (et l'inverse) ----------------- */
/* Déclarés APRÈS les règles de contexte : ils reprennent la main. */
.header-card-left, .header-card-right,
.banner-cta-card,
.bloc-arrondi:not(.clair),
.bandeau-urgence,
.footer { color: var(--dh-gris-pale); }

.header-card-left :is(h1,h2,h3,h4,h5,h6,p,li),
.header-card-right :is(h1,h2,h3,h4,h5,h6,p,li),
.banner-cta-card :is(h1,h2,h3,h4,h5,h6,p,li),
.bloc-arrondi:not(.clair) :is(h1,h2,h3,h4,h5,h6,p,li),
.bandeau-urgence :is(h1,h2,h3,h4,h5,h6,p,li) { color: var(--dh-gris-pale); }

/* Chiffres clés : cartes blanches, texte foncé (elles vivent sur fond pâle). */
.stats-item, .stats-item :is(h1,h2,h3,h4,h5,h6,p,li,div) { color: var(--dh-encre); }
.stats-item {
  background-color: #fff;
  border: 1px solid rgba(27,34,41,.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 1.25rem;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.stats-item:hover {
  border-color: var(--dh-rouge);
  transform: translateY(-3px);
  box-shadow: 0 .75rem 2rem rgba(27,34,41,.08);
}
.stats-item .heading-style-h2 { color: var(--dh-rouge); font-weight: 400; line-height: 1; }
.stats-item .text-size-regular { color: var(--base-color-neutral--neutral-dark); }

.bloc-arrondi.clair, .encadre-info,
.bloc-arrondi.clair :is(h1,h2,h3,h4,h5,h6,p,li),
.encadre-info :is(h1,h2,h3,h4,h5,h6,p,li) { color: var(--dh-encre); }

/* Les boutons portent toujours leur propre couleur. */
.button, .button :is(div,span,p) { color: inherit; }
.texte-rouge, .texte-rouge :is(h1,h2,h3,h4,h5,h6,p,strong) { color: var(--dh-rouge); }

/* Titres en Gotham Book (400) : plus fins que le Medium, tout en restant
   plus lisibles que le Light du gabarit d'origine. */
body { font-weight: 400; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.025em; }
h5, h6 { font-weight: 400; letter-spacing: -.015em; }
.heading-style-h1, .service-heading { letter-spacing: -.04em; font-weight: 400; }
strong, b { font-weight: 600; }

/* Titres légèrement réduits : Gotham est plus large que General Sans. */
h1, .heading-style-h1 { font-size: 9.5em; }
.service-heading { font-size: 9.5em; }
h2, .heading-style-h2 { font-size: 5.2em; }
h3, .heading-style-h3 { font-size: 4em; }
h4, .heading-style-h4 { font-size: 3.1em; }
h5, .heading-style-h5 { font-size: 2.4em; }
h6, .heading-style-h6 { font-size: 1.85em; }

/* --------------------------------------------------------------------------
   3. Accent rouge (remplace le vert du gabarit)
   -------------------------------------------------------------------------- */
.line-divider.green,
.line-divider.rouge { background-color: var(--dh-rouge); }

.button-icon-wrapper.green,
.button-icon-wrapper.rouge { background-color: var(--dh-rouge); }

.button.stroke-green,
.button.stroke-rouge {
  border-color: var(--dh-rouge);
  color: var(--dh-rouge);
  background-color: rgba(0,0,0,0);
}
.button.stroke-green:hover,
.button.stroke-rouge:hover { background-color: var(--dh-rouge); color: #fff; }
.button.stroke-green:hover .button-icon-wrapper.green { background-color: #fff; }

.button.rouge {
  background-color: var(--dh-rouge);
  border-color: var(--dh-rouge);
  color: #fff;
}
.button.rouge:hover { background-color: var(--dh-encre); border-color: var(--dh-encre); }

.button:hover { background-color: var(--dh-rouge); border-color: var(--dh-rouge); color: #fff; }
.button.white:hover { background-color: var(--dh-rouge); border-color: var(--dh-rouge); color: #fff; }
.button.link:hover { color: var(--dh-rouge); background-color: rgba(0,0,0,0); }

.tag-item.grey-stroke:hover,
.tag-item.grey-stroke.active,
.tag-item.grey-stroke.w--current {
  background-color: var(--dh-rouge);
  border-color: var(--dh-rouge);
  color: #fff;
}
.tag-item.rouge { background-color: var(--dh-rouge); border-color: var(--dh-rouge); color: #fff; }

.texte-rouge { color: var(--dh-rouge); }
h1 em, h2 em, h3 em, .heading-style-h1 em, .service-heading em { font-style: normal; color: var(--dh-rouge); }

/* --------------------------------------------------------------------------
   4. Intro « portes qui s'ouvrent »
   Pilotée entièrement par CSS : se retire même sans JavaScript.
   -------------------------------------------------------------------------- */
.intro-portes {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  display: grid; grid-template-columns: 1fr 1fr;
  animation: dhIntroFin .01s linear 2.7s forwards;
}
@keyframes dhIntroFin { to { visibility: hidden; } }
html.intro-off .intro-portes, .intro-portes.terminee { display: none !important; }

.intro-portes__panneau {
  position: relative; overflow: hidden;
  background: var(--dh-acier);
  will-change: transform;
}
.intro-portes__panneau:before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
}
.intro-portes__panneau--g { animation: dhPorteG 1.15s cubic-bezier(.76,0,.24,1) 1.45s forwards; }
.intro-portes__panneau--d { animation: dhPorteD 1.15s cubic-bezier(.76,0,.24,1) 1.45s forwards; }
@keyframes dhPorteG { to { transform: translateX(-101%); } }
@keyframes dhPorteD { to { transform: translateX(101%); } }

.intro-portes__barre {
  position: absolute; top: 50%; height: .35rem; width: 34%;
  border-radius: .35rem;
  background: linear-gradient(90deg, #8C979F, #DCE1E4, #8C979F);
  box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.45);
}
.intro-portes__panneau--g .intro-portes__barre { right: 6%; }
.intro-portes__panneau--d .intro-portes__barre { left: 6%; }

.intro-portes__marque {
  position: fixed; inset: 0; display: grid; place-items: center;
  z-index: 2; pointer-events: none;
}
.intro-portes__marque img {
  width: clamp(90px, 12vw, 150px);
  opacity: 0; transform: scale(.86);
  animation: dhMarque 1.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes dhMarque {
  0%   { opacity: 0; transform: scale(.86); }
  32%  { opacity: 1; transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
.intro-portes__filet {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  width: min(220px, 38vw); height: 2px; background: rgba(255,255,255,.2); overflow: hidden;
}
.intro-portes__filet span {
  display: block; height: 100%; width: 100%; background: var(--dh-rouge);
  transform-origin: left; transform: scaleX(0);
  animation: dhFilet 1.35s cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes dhFilet { 0% { transform: scaleX(0); } 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .intro-portes { display: none !important; } }

/* --------------------------------------------------------------------------
   5. Révélations au défilement
   Le gabarit pose des styles en ligne (opacity/transform) sur les éléments
   animés. On les neutralise à l'entrée dans la fenêtre.
   -------------------------------------------------------------------------- */
.js [data-anim] { opacity: 0; will-change: transform, opacity; }
.js [data-anim="monte"]  { transform: translateY(2.5rem); }
.js [data-anim="gauche"] { transform: translateX(-2.5rem); }
.js [data-anim="droite"] { transform: translateX(2.5rem); }
.js [data-anim="zoom"]   { transform: scale(.96); }
.js [data-anim="fondu"]  { transform: none; }
.js [data-anim].vu {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--delai, 0ms);
}
.js .ligne-anim { transform: scaleX(0); transform-origin: left; }
.js .ligne-anim.vu { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }

.zoom-image { overflow: hidden; }
.js .zoom-image > img { transform: scale(1.16); transition: transform 1.6s cubic-bezier(.22,1,.36,1); }
.js .zoom-image.vu > img { transform: scale(1.06); transition-duration: .9s; }

/* Survol d'une carte cliquable : l'image recule doucement dans son cadre
   (zoom out), comme dans le gabarit d'origine. Le repos est légèrement
   agrandi pour qu'aucun vide n'apparaisse une fois l'image revenue à 1. */
.zoom-image > img { transform: scale(1.06); transition: transform .9s cubic-bezier(.22,1,.36,1); }
.js a:hover .zoom-image.vu > img,
.js a:focus-visible .zoom-image.vu > img,
a:hover .zoom-image > img,
a:focus-visible .zoom-image > img {
  transform: scale(1);
  transition-duration: .9s;
}

[data-parallaxe] { will-change: transform; }

/* Repères de l'éditeur visuel : ils ne doivent produire aucune boîte, sans
   quoi une image en position absolue perdrait sa référence de hauteur. */
.champ-image { display: contents; }

/* --------------------------------------------------------------------------
   6. Barre de navigation — comportement au défilement
   -------------------------------------------------------------------------- */
/* Fond clair et opaque : le logo rouge et gris reste lisible sur toutes les
   sections, claires comme foncées. */
.navbar {
  background-color: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 .25rem 1.25rem rgba(27,34,41,.08);
  transition: background-color .35s, box-shadow .35s, top .35s;
}
.navbar.compacte {
  background-color: #fff;
  box-shadow: 0 .5rem 2rem rgba(27,34,41,.16);
  top: 1rem;
}
.navbar-logo { width: 100%; max-width: 15rem; }
.navbar-tel {
  color: var(--dh-encre);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  padding: .35rem .5rem;
}
.navbar-tel:hover { color: var(--dh-rouge); }
/* --- Menu déroulant (structure simple du gabarit) ------------------------ */
.navbar-menu {
  z-index: 20;
  background-color: var(--dh-gris-pale);
  border-radius: 1rem;
  margin-top: .75rem;
  padding-left: 5%;
  padding-right: 5%;
  color: var(--dh-encre);
  box-shadow: 0 1.25rem 3rem rgba(27,34,41,.18);
  transition: height .45s cubic-bezier(.22,1,.36,1);
}
.navbar-menu-wrapper {
  grid-column-gap: .35rem;
  grid-row-gap: .35rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* Le gabarit impose height:100% : dans un panneau dont la hauteur est
     animée à partir de 0, la liste se retrouve alors centrée dans le vide et
     seul son milieu reste visible. On la laisse dicter sa propre hauteur. */
  height: auto;
  justify-content: flex-start;
}
.navbar-link {
  width: 100%;
  padding: .55rem .75rem;
  border-radius: .6rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--dh-encre);
  text-align: center;
  transition: background-color .2s, color .2s;
}
.navbar-link:hover { background-color: #fff; color: var(--dh-rouge); }
.navbar-link.w--current { color: var(--dh-rouge); }
.navbar-link.w--current:after {
  content: '';
  display: block;
  width: 1.5rem; height: 2px;
  background: var(--dh-rouge);
  margin: .3rem auto 0;
}

/* Deux colonnes sur ordinateur : les pages à gauche, les sections à tiroirs
   à droite, séparées par un filet. Tout s'empile sous 992 px. */
.navbar-colonne { display: flex; flex-direction: column; align-items: center; width: 100%; gap: .1rem; }

@media screen and (min-width: 992px) {
  .navbar-menu-wrapper {
    flex-direction: row;
    align-items: stretch;
    grid-column-gap: 2rem;
    grid-row-gap: 0;
  }
  .navbar-colonne { align-items: stretch; }
  .navbar-colonne--pages { flex: 0 0 42%; justify-content: flex-start; }
  .navbar-colonne--sections {
    flex: 1 1 auto;
    padding-left: 2rem;
    border-left: 1px solid rgba(27,34,41,.14);
    gap: 1rem;
  }
  .navbar-menu-wrapper .navbar-link { text-align: left; }
  .navbar-menu-wrapper .navbar-link.w--current:after { margin-left: 0; margin-right: auto; }
  .navbar-sous-menu { align-items: stretch; }
}

/* Sections à sous-pages : la section reste cliquable, ses pages s'affichent
   juste en dessous afin que l'ensemble du site soit atteignable du menu. */
.navbar-groupe { width: 100%; }
.navbar-sous-menu {
  display: flex; flex-direction: column; align-items: center;
  gap: .1rem;
  padding: .25rem 0 .5rem;
}
.navbar-link.navbar-sous-lien {
  font-size: .95rem;
  font-weight: 400;
  padding: .35rem .75rem;
  opacity: .78;
}
.navbar-link.navbar-sous-lien:hover { opacity: 1; }
.navbar-link.navbar-sous-lien.w--current { opacity: 1; }
.navbar-link.navbar-sous-lien.w--current:after { width: 1rem; }

/* --------------------------------------------------------------------------
   6 bis. Corrections de mise en page du gabarit
   -------------------------------------------------------------------------- */
/* Respiration des en-têtes réduite de moitié. Le plancher de 9 rem garantit
   que le titre passe sous la barre de navigation fixe, même sur écran bas. */
.padding-section-xl { padding-top: max(13vh, 9rem); padding-bottom: 11vh; }


/* --- Services : défilement automatique façon carrousel -------------------- */
/* Une jauge verticale sous le numéro indique le temps restant avant le
   passage au service suivant. Elle disparaît si l'utilisateur préfère les
   animations réduites (la classe .carrousel n'est alors jamais posée). */
.service-column { position: relative; }
.service-jauge {
  position: absolute;
  left: 50%;
  top: 5.5rem;
  transform: translateX(-50%);
  width: 2px;
  height: 4.5rem;
  border-radius: 2px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s;
}
.service-component.carrousel .service-accordion.active .service-jauge { opacity: 1; }
.service-jauge span { display: block; width: 100%; height: 0; background: #fff; }
.service-component.carrousel .service-accordion.active .service-jauge span {
  animation: dhServiceJauge 6s linear forwards;
}
.service-component.carrousel.en-pause .service-jauge span { animation-play-state: paused; }
@keyframes dhServiceJauge { from { height: 0; } to { height: 100%; } }

/* Le passage d'un volet à l'autre s'adoucit pour se rapprocher d'un glissé.
   Réservé à l'affichage en accordéon : sous 992 px le gabarit déplie les
   trois services l'un sous l'autre, et masquer les inactifs les effacerait. */
@media screen and (min-width: 992px) {
  .service-accordion { transition: width .8s cubic-bezier(.22,1,.36,1); }
  .service-column-content { transition: opacity .5s ease; }
  .service-accordion:not(.active) .service-column-content { opacity: 0; }
}
@media screen and (max-width: 991px) {
  .service-jauge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .service-jauge { display: none; }
  .service-accordion, .service-column-content { transition: none; }
}

/* --- Onglets « Pourquoi DonloxHarmer » ----------------------------------- */
/* Sans les interactions Webflow, tous les textes d'onglets s'affichaient en
   même temps. On les replie et on ne déploie que l'onglet actif. */
/* Le gabarit place un clearfix (.w-tabs:before/:after) en case 1/1. Dans une
   grille, ces pseudo-éléments deviennent des cases occupées : la liste des
   onglets était repoussée en colonne 2 et l'image tombait en dessous. On les
   neutralise, puis on place explicitement l'image à gauche et les textes à
   droite. */
.feature-component {
  align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.feature-component:before,
.feature-component:after { display: none; }
.feature-tab-content { grid-area: 1 / 1 / 2 / 2; }
.feature-tab-menu { grid-area: 1 / 2 / 2 / 3; }
.feature-tab-link {
  cursor: pointer;
  opacity: 1;
  border-bottom: 1px solid rgba(169,178,184,.45);
  padding: 0;
  transition: opacity .3s;
}
.feature-tab-link:not(.w--current) .tab-heading-wrapper { opacity: .45; }
.feature-tab-link:hover .tab-heading-wrapper { opacity: 1; }
.tab-heading-wrapper {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  gap: 1.5rem;
  transition: opacity .3s;
}
.tab-heading-wrapper h3 { margin: 0; }
.feature-tab-link .button.icon-only {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(27,34,41,.2);
  background: transparent;
  transition: background-color .25s, border-color .25s, transform .25s;
}
.feature-tab-link .button.icon-only img { width: 1rem; height: 1rem; transition: transform .3s; }
.feature-tab-link.w--current .button.icon-only { background: var(--dh-rouge); border-color: var(--dh-rouge); }
.feature-tab-link.w--current .button.icon-only img { transform: rotate(135deg); filter: brightness(0) invert(1); }
.feature-text {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.feature-tab-link.w--current .feature-text { grid-template-rows: 1fr; }
.feature-text > * { overflow: hidden; min-height: 0; }
.feature-text p { padding-bottom: 1.75rem; max-width: 62ch; }

.feature-image-wrapper {
  width: 100%;
  border-radius: 1.875rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: sticky;
  top: 8rem;
}
.feature-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-tab-content { position: relative; }

/* --- Héros de l'accueil -------------------------------------------------- */
/* La carte « Parlons-en » se cale en bas à droite, sur la même ligne de base
   que la grande carte du titre. */
.hero-content-right { margin-left: 0; justify-content: flex-end; align-items: flex-end; }
.header-card-right { justify-self: end; width: 100%; max-width: 20rem; }
@media screen and (max-width: 991px) {
  .header-card-right { max-width: none; }
}

/* --- En-tête de page : taille de titre adaptative ------------------------ */
/* Le gabarit prévoit un titre très court (« Services »). Les titres longs
   passent en pleine largeur, avec une taille réduite et l'introduction
   dessous, sur une colonne mesurée. */
.heading-style-h1.titre-xl { font-size: 9.5em; }
.heading-style-h1.titre-l  { font-size: 6.4em; }
.heading-style-h1.titre-m  { font-size: 4.4em; line-height: 1.04; }

/* Placement du gabarit d'origine : le titre et le filet occupent les deux
   colonnes ; le paragraphe se place en dessous, dans la colonne de droite.
   (Le gabarit exporté le faisait via des identifiants #w-node-… ; on le
   reproduit ici avec les classes.) */
.about-component > .about-content-top { grid-area: 1 / 1 / 2 / 3; }
.about-component > .about-content-right { grid-area: 2 / 2 / 3 / 3; }
.about-component { row-gap: clamp(2rem, 4vw, 3.5rem); }
.about-content-right > * + * { margin-top: 1.5rem; }
.entete-page .about-content-right p { max-width: 62ch; }

@media screen and (max-width: 991px) {
  .heading-style-h1.titre-xl { font-size: 7.5em; }
  .heading-style-h1.titre-l  { font-size: 5.6em; }
  .heading-style-h1.titre-m  { font-size: 4.2em; }
  .about-component > .about-content-right { grid-area: 2 / 1 / 3 / 3; }
}
@media screen and (max-width: 767px) {
  .heading-style-h1.titre-xl { font-size: 6.4em; }
  .heading-style-h1.titre-l  { font-size: 5.4em; }
  .heading-style-h1.titre-m  { font-size: 4.4em; }
}

/* --- En-tête des articles et des réalisations ---------------------------- */
/* Le gabarit réservait un tiers de la largeur au bloc titre, ce qui étranglait
   les titres longs. On lui donne deux tiers sur ordinateur. */
@media screen and (min-width: 992px) {
  .news-header-card { grid-column: span 2 / span 2; width: 100%; max-width: 46rem; }
  .news-header-card .heading-style-h4 { font-size: 3.6em; line-height: 1.06; }
}
@media screen and (min-width: 1600px) {
  .news-header-card { max-width: 56rem; }
  .news-header-card .heading-style-h4 { font-size: 3.9em; }
}
@media screen and (max-width: 991px) {
  .news-header-card { width: 100%; padding-right: 0; }
}

/* --- Pages de réalisation : alignement des marges ------------------------ */
/* Le bloc d'en-tête du gabarit colle au bord ; on l'aligne sur la grille
   générale du site (3 % de chaque côté). */
.news-header-card { padding-left: clamp(1.5rem, 3vw, 3.5rem); padding-right: clamp(1.5rem, 3vw, 3.5rem); }
.section-content > .padding-global > .padding-section-l,
.section-content > .padding-global > .padding-section-m { width: 100%; max-width: var(--max-l, none); margin-inline: auto; }
.content-component { column-gap: clamp(2rem, 5vw, 5rem); }
.content-left { max-width: 22rem; }
.content-right { width: 100%; }
@media screen and (min-width: 992px) {
  .content-component { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .content-right { grid-column: auto !important; }
}

/* --- Hero « Nous joindre » ------------------------------------------------ */
/* Fond gris pâle plutôt qu'acier, coordonnées dans la colonne de droite. */
.section-contact {
  background-color: var(--dh-gris-pale);
  color: var(--dh-encre);
  height: auto;
}
.contact-component {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.contact-left { width: 100%; }
.contact-coordonnees { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); width: 100%; }
.contact-coordonnees .fiche-coord { margin-bottom: 0; min-width: 0; }
.contact-coordonnees .fiche-coord .valeur { font-size: 1.15rem; overflow-wrap: anywhere; }
.contact-coordonnees .fiche-coord .etiquette { line-height: 1.35; }
.padding-section-contact { padding-top: 20vh; padding-bottom: 8vh; }

@media screen and (max-width: 991px) {
  .contact-component { grid-template-columns: 1fr; }
  .contact-coordonnees { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* --------------------------------------------------------------------------
   7. Composants additionnels (dans le langage visuel du gabarit)
   -------------------------------------------------------------------------- */
.bloc-arrondi {
  border-radius: 1.25rem;
  border: 1px solid var(--background-color--background-tertiary);
  padding: 2rem;
}
.bloc-arrondi.plein {
  background-color: var(--background-color--background-primary);
  color: var(--background-color--background-tertiary);
  border-color: rgba(0,0,0,0);
}
.bloc-arrondi.clair { background-color: #fff; border-color: rgba(27,34,41,.12); color: var(--dh-encre); }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem; }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1.5rem; }
.grille-asym { display: grid; grid-template-columns: 5fr 7fr; grid-gap: 5rem; align-items: start; }
/* Variante : la colonne de droite s'aligne sur le bas de la colonne de gauche.
   Utile quand la gauche contient une image haute et la droite une liste courte. */
.grille-asym.bas { align-items: end; }
.grille-asym.bas > * { align-self: end; }
.grille-split { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4rem; align-items: center; }

.puces-produits { display: flex; flex-wrap: wrap; gap: .625rem; }
.puce-produit {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--base-color-neutral--neutral-light);
  border-radius: .75rem;
  padding: .625rem 1rem;
  font-size: .95rem;
  transition: border-color .2s, background-color .2s, color .2s;
}
.puce-produit:before { content: ''; width: .4rem; height: .4rem; background: var(--dh-rouge); transform: rotate(45deg); flex: none; }
.puce-produit:hover { border-color: var(--dh-rouge); }

.liste-cochee { list-style: none; padding-left: 0; margin: 0; }
.liste-cochee li { position: relative; padding: .5rem 0 .5rem 1.5rem; margin: 0; border-bottom: 1px solid rgba(169,178,184,.4); }
.liste-cochee li:before { content: ''; position: absolute; left: 0; top: 1.05rem; width: .45rem; height: .45rem; background: var(--dh-rouge); transform: rotate(45deg); }
.liste-2col { columns: 2; column-gap: 3rem; }
.liste-2col li { break-inside: avoid; }

.fiche-coord { border-top: 1px solid rgba(169,178,184,.45); padding-top: 1.25rem; margin-bottom: 2rem; }
.fiche-coord .etiquette { font-size: 1rem; opacity: .75; margin-bottom: .35rem; }
.fiche-coord .valeur { font-size: 1.35rem; font-weight: 500; }
.fiche-coord a { color: inherit; text-decoration: none; }
.fiche-coord a:hover { color: var(--dh-rouge); }

.bandeau-urgence {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: var(--dh-rouge); color: #fff;
  border-radius: 1.25rem; padding: 1.25rem 1.75rem;
  font-size: 1.15rem; font-weight: 500;
}
.bandeau-urgence a { color: #fff; text-decoration: underline; }

.encadre-info {
  border-left: 3px solid var(--dh-rouge);
  background: var(--dh-gris-tres-pale);
  color: var(--dh-encre);
  border-radius: 0 1rem 1rem 0;
  padding: 1.5rem 1.75rem;
}
.encadre-info h3 { font-size: 1.5rem; margin-bottom: .5rem; font-weight: 400; }
.encadre-info p { font-size: 1.05rem; }

.bandeau-defilant { border-block: 1px solid rgba(169,178,184,.4); overflow: hidden; padding-block: 1rem; }
.bandeau-defilant__piste { display: flex; width: max-content; animation: dhDefile 42s linear infinite; }
.bandeau-defilant:hover .bandeau-defilant__piste { animation-play-state: paused; }
.bandeau-defilant__item {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-inline: 1.5rem;
  font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--base-color-neutral--neutral); white-space: nowrap;
}
.bandeau-defilant__item:after { content: ''; width: .35rem; height: .35rem; background: var(--dh-rouge); transform: rotate(45deg); }
@keyframes dhDefile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.compteur { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.footer-component {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  grid-column-gap: clamp(2.5rem, 7vw, 7rem);
  grid-row-gap: 3.5rem;
  padding: clamp(2rem, 4vw, 4rem);
  border-color: rgba(232,234,235,.28);
}

/* --- Colonne de gauche : identité et coordonnées ------------------------- */
.footer-left { gap: 2rem; display: grid; align-content: start; }
.footer-logo-link { width: auto; max-width: 26rem; }
.footer-coord { max-width: 27rem; }
.footer-baseline {
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: .8;
  max-width: 34ch;
  margin-top: 1.25rem;
}
/* --- Colonne de droite : quatre colonnes (liens + heures) ---------------- */
.footer-right {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  align-content: start;
  margin-right: 0;
}

/* Coordonnées empilées (adresse, téléphone, courriel), heures en dessous. */
.footer-coord { display: grid; gap: 0; width: 100%; }
.footer-coord { border-top: 1px solid rgba(232,234,235,.22); margin-top: 1rem; }
.footer-coord__ligne {
  display: grid;
  gap: .5rem;
  padding: 1.6rem .5rem 1.6rem 0;
  border-bottom: 1px solid rgba(232,234,235,.22);
  text-decoration: none;
  transition: padding-left .25s, border-color .25s;
}
.footer-coord__ligne:hover { padding-left: .5rem; border-bottom-color: var(--dh-rouge); }
.footer-coord__etiquette { font-size: 1rem; opacity: .55; line-height: 1.2; }
.footer-coord__valeur {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.footer-coord__tel { font-size: 1.45rem; }
.footer-coord__ligne:hover .footer-coord__valeur { color: #fff; }


.footer-titre {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(232,234,235,.6);
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid rgba(232,234,235,.22);
}
.footer-link-list { gap: 0; }
.footer-sitemap {
  font-size: 1.05rem;
  font-weight: 400;
  padding: .45rem 0;
  line-height: 1.35;
  position: relative;
  transition: color .2s, padding-left .2s;
}
.footer-sitemap:before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: .3rem; height: .3rem;
  background: var(--dh-rouge);
  transform: translateY(-50%) rotate(45deg) scale(0);
  transition: transform .2s;
}
.footer-sitemap:hover { color: #fff; padding-left: .85rem; }
.footer-sitemap:hover:before { transform: translateY(-50%) rotate(45deg) scale(1); }

/* --- Heures d'ouverture -------------------------------------------------- */
.footer-heures__liste {
  display: grid;
  gap: .9rem;
  margin: 0;
}
.footer-heures__liste > div { display: grid; gap: .1rem; }
.footer-heures__liste dt { font-size: .95rem; opacity: .55; margin: 0; }
.footer-heures__liste dd { font-size: 1.05rem; font-weight: 500; margin: 0; }
.footer-urgence {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: .7rem 1rem;
  border-radius: .75rem;
  background: var(--dh-rouge);
  color: #fff;
  font-size: .98rem;
  font-weight: 600;
}
.footer-urgence a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.footer-urgence img { flex: none; }

/* --- Réseaux sociaux ----------------------------------------------------- */
/* Les pictogrammes sont foncés sur pastille pâle ; ils passent en blanc sur
   fond rouge au survol. */
.social-media-footer-wrapper { margin-top: 0; gap: .75rem; }
.social-media-button {
  background-color: var(--dh-gris-pale);
  transition: background-color .2s, transform .2s;
}
.social-media-button:hover { background-color: var(--dh-rouge); transform: translateY(-2px); }
.social-media-button img { width: 1.35rem; height: 1.35rem; transition: filter .2s; }
.social-media-button:hover img { filter: brightness(0) invert(1); }
/* Sur une section déjà pâle, la pastille passe en blanc avec un liseré. */
.section-contact .social-media-button,
.section-content .social-media-button {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(27,34,41,.12);
}
.section-contact .social-media-button:hover,
.section-content .social-media-button:hover {
  background-color: var(--dh-rouge);
  box-shadow: none;
}

/* Bas de page */
.footer-bas {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(232,234,235,.25);
  font-size: 1rem;
}
.footer-bas__liens { display: flex; gap: .6rem; align-items: center; opacity: .8; }
.footer-bas__liens a { text-decoration: none; }
.footer-bas__liens a:hover { color: #fff; text-decoration: underline; }
.footer-signature { opacity: .75; letter-spacing: .01em; }
.footer-signature a { text-decoration: none; transition: color .2s, opacity .2s; }
.footer-signature a:hover { color: #fff; }
.footer-signature strong { font-weight: 500; color: #fff; }
.footer-signature a:hover strong { color: var(--dh-rouge-clair); }

/* Vidéo pleine largeur de la page d'accueil */
.section-video-accueil { background-color: var(--dh-acier); position: relative; }
.video-accueil { border-radius: 2rem; }
@media screen and (max-width: 767px) { .video-accueil { aspect-ratio: 4 / 3; } }

.fil-ariane { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: 1rem; list-style: none; padding: 0; margin: 0; opacity: .8; }
.fil-ariane li { padding: 0; margin: 0; display: flex; gap: .5rem; align-items: center; }
.fil-ariane li + li:before { content: '/'; opacity: .5; }
.fil-ariane a { color: inherit; text-decoration: none; }
.fil-ariane a:hover { color: var(--dh-rouge); }

.contenu-riche p { margin-bottom: 1.25rem; }
/* Les puces adoptent exactement la taille et l'interlignage des paragraphes :
   le gabarit ne dimensionne que <p>, ce qui laissait les listes plus petites. */
li { font-size: 1.125rem; line-height: 1.5; }

/* --- Échelle des textes courants, réduite d'environ 10 % ----------------- */
/* Le gabarit dimensionne les paragraphes en rem (taille fixe) mais les
   classes utilitaires en em, relatif au « font-size: 1vw » du body. Sous
   1600 px de large, 1vw descend sous 16 px : les blocs en .text-size-regular
   paraissaient alors nettement plus petits que les paragraphes voisins.
   On garde la fluidité en vw, mais bornée — le plancher de .text-size-regular
   est exactement la taille d'un paragraphe. */
p { font-size: 1.125rem; line-height: 1.5; }
.text-size-xlarge  { font-size: clamp(1.7rem,  1.75vw, 2.4rem); }
.text-size-large   { font-size: clamp(1.5rem,  1.55vw, 2.1rem); }
.text-size-medium  { font-size: clamp(1.3rem,  1.32vw, 1.8rem); }
.text-size-regular { font-size: clamp(1.125rem, 1vw,   1.35rem); }
.text-size-small   { font-size: clamp(.95rem,   .8vw,  1.1rem); }
.contenu-riche h2 { font-size: 2.6rem; font-weight: 400; margin: 3rem 0 1rem; }
.contenu-riche h3 { font-size: 1.9rem; font-weight: 400; margin: 2.25rem 0 .75rem; }
.contenu-riche h2:first-child, .contenu-riche h3:first-child { margin-top: 0; }
.contenu-riche ul { list-style: none; padding-left: 0; }
.contenu-riche ul li { position: relative; padding: .35rem 0 .35rem 1.4rem; }
.contenu-riche ul li:before { content: ''; position: absolute; left: 0; top: 1rem; width: .4rem; height: .4rem; background: var(--dh-rouge); transform: rotate(45deg); }
.contenu-riche ol { padding-left: 1.5rem; }
.contenu-riche a { color: var(--dh-rouge); text-decoration: underline; text-underline-offset: .2em; }

.lecteur-video {
  position: relative;
  border-radius: 1.875rem;
  overflow: hidden;
  background: var(--dh-acier);
  aspect-ratio: 16/9;
}
/* Affiche : une vraie photo, visible tant que la vidéo n'est pas lancée. */
.lecteur-video__affiche { position: absolute; inset: 0; transition: opacity .4s; }
.lecteur-video__affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lecteur-video.joue .lecteur-video__affiche { opacity: 0; pointer-events: none; }

.lecteur-video video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }

.lecteur-video__voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,34,41,.12) 0%, rgba(27,34,41,.28) 55%, rgba(27,34,41,.68) 100%);
  transition: opacity .4s;
}
.lecteur-video.joue .lecteur-video__voile { opacity: 0; }

.lecteur-video__legende {
  position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  color: #fff; pointer-events: none;
  text-shadow: 0 .1rem 1.25rem rgba(0,0,0,.45);
  transition: opacity .4s;
}
.lecteur-video.joue .lecteur-video__legende { opacity: 0; }
.lecteur-video__legende .surtitre {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; opacity: .9; margin-bottom: .4rem;
}
.lecteur-video__legende p { color: #fff; margin: 0; }

.lecteur-video__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; transition: opacity .4s;
}
.lecteur-video.joue .lecteur-video__play { opacity: 0; pointer-events: none; }
.lecteur-video__play span {
  width: clamp(4rem, 7vw, 5.5rem); height: clamp(4rem, 7vw, 5.5rem);
  border-radius: 50%; background: var(--dh-rouge);
  display: grid; place-items: center;
  transition: transform .3s, background-color .3s;
  box-shadow: 0 .5rem 2rem rgba(0,0,0,.35), 0 0 0 0 rgba(195,14,46,.5);
  animation: dhPulse 2.8s infinite;
}
.lecteur-video__play:hover span { transform: scale(1.1); background-color: var(--dh-rouge-clair); }
.lecteur-video__play svg { width: 1.6rem; height: 1.6rem; fill: #fff; margin-left: .22rem; }
@keyframes dhPulse {
  0%   { box-shadow: 0 .5rem 2rem rgba(0,0,0,.35), 0 0 0 0 rgba(195,14,46,.45); }
  70%  { box-shadow: 0 .5rem 2rem rgba(0,0,0,.35), 0 0 0 1.75rem rgba(195,14,46,0); }
  100% { box-shadow: 0 .5rem 2rem rgba(0,0,0,.35), 0 0 0 0 rgba(195,14,46,0); }
}
@media (prefers-reduced-motion: reduce) { .lecteur-video__play span { animation: none; } }

.carte-geo { border-radius: 1.875rem; overflow: hidden; filter: grayscale(1) contrast(1.02); transition: filter .4s; }
.carte-geo:hover { filter: none; }
.carte-geo iframe { display: block; width: 100%; height: 28rem; border: 0; }

.retour-haut {
  position: fixed; right: 3%; bottom: 3%; z-index: 900;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--dh-rouge); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(.75rem);
  transition: opacity .35s, transform .35s, visibility .35s;
  box-shadow: 0 .75rem 2rem rgba(27,34,41,.3);
}
.retour-haut.visible { opacity: 1; visibility: visible; transform: none; }
.retour-haut svg { width: 1.1rem; height: 1.1rem; }

.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--dh-rouge); color: #fff; padding: .75rem 1.25rem; }
.lien-evitement:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--dh-rouge); outline-offset: 3px; }
::selection { background: var(--dh-rouge); color: #fff; }

/* Formulaire de contact enrichi */
.form-input.select-input { appearance: none; background-image: url("/assets/icones/chevron.svg"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.75rem; }
.form-note { font-size: .95rem; opacity: .7; margin-top: .75rem; }
.form-ligne-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; }

/* Galerie de projet */
.galerie-projet { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 1.25rem; }
.galerie-projet figure { margin: 0; border-radius: 1.25rem; overflow: hidden; }
.galerie-projet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-projet .g-12 { grid-column: span 12; }
.galerie-projet .g-8 { grid-column: span 8; }
.galerie-projet .g-6 { grid-column: span 6; }
.galerie-projet .g-4 { grid-column: span 4; }

/* Offres d'emploi */
.liste-postes { border-top: 1px solid rgba(169,178,184,.45); }
.poste {
  display: grid; grid-template-columns: 6fr 3fr 3fr 3rem;
  grid-gap: 2rem; align-items: center;
  padding: 2rem 0; border-bottom: 1px solid rgba(169,178,184,.45);
  text-decoration: none; color: inherit;
  transition: padding-left .3s;
}
.poste:hover { padding-left: 1rem; }
.poste__titre { font-size: 2rem; font-weight: 400; letter-spacing: -.02em; transition: color .2s; }
.poste:hover .poste__titre { color: var(--dh-rouge); }
.poste__champ { font-size: 1.05rem; }
.poste__champ b { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; font-weight: 500; margin-bottom: .2rem; }
.poste__fleche { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--background-color--background-primary); display: grid; place-items: center; justify-self: end; transition: background-color .2s; }
.poste:hover .poste__fleche { background: var(--dh-rouge); }
.poste__fleche img { width: 1rem; }

/* --- Ligne du temps « Notre histoire » ------------------------------------
   Rail vertical collant à gauche : les années restent visibles pendant la
   lecture, le trait rouge progresse et l'année courante s'allume. */
.ligne-temps {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-column-gap: 4rem;
  align-items: start;
  padding: 0 2.5rem 3rem;
}

.ligne-temps__rail {
  position: sticky;
  top: 9rem;
  align-self: start;
  padding-left: 1.75rem;
  display: flex;
  flex-direction: column;
  grid-row-gap: 1.5rem;
}
.ligne-temps__piste,
.ligne-temps__progression {
  position: absolute;
  left: .25rem;
  width: 2px;
  border-radius: 2px;
}
.ligne-temps__piste { top: .55rem; bottom: .55rem; background: rgba(27,34,41,.16); }
.ligne-temps__progression {
  top: .55rem; height: 0;
  background: var(--dh-rouge);
  transition: height .35s cubic-bezier(.22,1,.36,1);
}

.ligne-temps__repere {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  opacity: .45;
  transition: opacity .3s;
}
.ligne-temps__repere::before {
  content: '';
  position: absolute;
  left: -1.5rem; top: .55rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: rgba(27,34,41,.25);
  transform: translate(calc(-50% + 1px), -50%);
  transition: background-color .3s, box-shadow .3s, width .3s, height .3s;
}
.ligne-temps__annee {
  display: block;
  font-size: 1.05rem; font-weight: 400; line-height: 1.1;
  letter-spacing: -.01em;
}
.ligne-temps__annee sup { font-size: .65em; }
.ligne-temps__marque {
  display: block;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  opacity: .7; margin-top: .15rem;
}
.ligne-temps__repere:hover { opacity: .8; }
.ligne-temps__repere.est-passe { opacity: .7; }
.ligne-temps__repere.est-passe::before { background: var(--dh-rouge); }
.ligne-temps__repere.est-actif { opacity: 1; }
.ligne-temps__repere.est-actif .ligne-temps__annee { color: var(--dh-rouge); font-size: 1.3rem; }
.ligne-temps__repere.est-actif::before {
  background: var(--dh-rouge);
  width: .75rem; height: .75rem;
  box-shadow: 0 0 0 .28rem rgba(195,14,46,.16);
}

.ligne-temps__contenu { display: grid; grid-row-gap: 4rem; }
.ligne-temps__etape { scroll-margin-top: 9rem; }
.ligne-temps__etape + .ligne-temps__etape { border-top: 1px solid rgba(27,34,41,.12); padding-top: 4rem; }
.ligne-temps__meta { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ligne-temps__annee-inline {
  font-size: 2.25rem; font-weight: 400; line-height: 1;
  letter-spacing: -.02em; color: var(--dh-rouge);
}
.ligne-temps__annee-inline sup { font-size: .55em; }
.ligne-temps__etiquette {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  padding: .3rem .7rem; border-radius: .6rem;
  border: 1px solid rgba(27,34,41,.18);
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .ligne-temps__progression { transition: none; }
}

/* --------------------------------------------------------------------------
   8. Adaptatif
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .padding-section-xl { padding-top: 6rem; padding-bottom: 3rem; }
  .padding-section-xl.tablet-padding-l { padding-top: 3rem; padding-bottom: 2rem; }
  .footer-component { grid-template-columns: 1fr; }
  .footer-right { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .navbar-menu { max-height: 78vh; }
  /* Une seule colonne : on rend la place à l'ordre naturel du document. */
  .feature-component { grid-template-columns: minmax(0, 1fr); }
  .feature-tab-content, .feature-tab-menu { grid-area: auto; }
  .feature-image-wrapper { position: static; aspect-ratio: 16 / 10; margin-top: 2rem; }
  .content-left { position: static; max-width: none; margin-bottom: 2rem; }
  .padding-section-contact { padding-top: 15vh; padding-bottom: 6vh; }
  .grille-3, .grille-4 { grid-template-columns: 1fr 1fr; }
  .grille-asym, .grille-split { grid-template-columns: 1fr; grid-gap: 2.5rem; }
  .liste-2col { columns: 1; }
  .poste { grid-template-columns: 1fr 2.5rem; grid-row-gap: .75rem; }
  .poste__fleche { grid-row: 1; grid-column: 2; }
  .navbar-tel { display: none; }
  .carte-geo iframe { height: 22rem; }
}
@media screen and (max-width: 991px) {
  .ligne-temps { grid-template-columns: 1fr; padding: 0 1.5rem 2.5rem; }
  .ligne-temps__rail { display: none; }
  .ligne-temps__contenu { grid-row-gap: 3rem; }
  .ligne-temps__etape + .ligne-temps__etape { padding-top: 3rem; }
  .ligne-temps__annee-inline { font-size: 1.85rem; }
}
@media screen and (max-width: 767px) {
  .padding-section-xl { padding-top: 5rem; padding-bottom: 1rem; }
  .padding-section-xl.tablet-padding-l { padding-bottom: 1rem; }
  .footer-right { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bas { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .form-ligne-2 { grid-template-columns: 1fr; }
  .galerie-projet .g-8, .galerie-projet .g-6, .galerie-projet .g-4 { grid-column: span 12; }
  h1, .heading-style-h1, .service-heading { font-size: 6.5em; }
  .intro-portes__barre { width: 46%; }
}