/* ═══════════════════════════════════════════════════════════════════════════
   CPI — SOCLE COMMUN
   Toute la structure du site : mise en page, hero, composants, formulaire,
   pied de page, animations, accessibilité.

   Ce fichier ne contient AUCUN choix esthétique arbitraire : couleurs, rayons,
   graisses et rythmes passent tous par des variables. Chaque design (v1 à v8)
   se contente de redéfinir ces variables et de retoucher quelques composants.

   Ordre de chargement obligatoire :
       <link href="base.css">  puis  <link href="vN.css">

   SOMMAIRE
   01. Variables      06. Boutons        11. Approche      16. Contact
   02. Reset          07. Header         12. Diagnostic    17. Footer
   03. Typographie    08. Hero           13. Situations    18. Pages légales
   04. Layout         09. Références     14. Parcours      19. Maquette
   05. Animations     10. Cartes         15. Secteurs
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 01. VARIABLES ═══════════════════════════════════════════════════════ */

:root {
  /* — Couleurs (extraites du logo CPI) — */
  --c-ink:        #0A1226;
  --c-ink-2:      #131E3A;
  --c-ink-3:      #22304F;
  --c-steel:      #545E6D;
  --c-steel-2:    #69737F;
  --c-steel-3:    #6B7583;
  --c-line:       #E3E7EC;
  --c-line-2:     #F0F2F5;
  --c-paper:      #FFFFFF;
  --c-mist:       #F4F6F9;
  --c-accent:     #FD5A00;
  --c-accent-dp:  #DB4B00;
  --c-accent-txt: #E04E00;   /* orange assombri : titres sur fond clair */
  --c-accent-sm:  #BF4100;   /* orange encore plus sombre : petit texte */
  --c-accent-sf:  #FFF1E8;

  /* — Habillage des surfaces (le principal levier des thèmes) — */
  --surface:        var(--c-paper);
  --surface-alt:    var(--c-mist);
  --card-bg:        var(--c-paper);
  --card-border:    1px solid var(--c-line);
  --card-shadow:    none;
  --card-shadow-hv: none;
  --panel-bg:       var(--c-ink);

  /* — Typographie — */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-alt: var(--font);

  --fs-h1:    clamp(2.15rem, 4.3vw, 3.5rem);
  --fs-h2:    clamp(1.9rem, 3.7vw, 2.9rem);
  --fs-h3:    clamp(1.12rem, 1.5vw, 1.35rem);
  --fs-lead:  clamp(1.02rem, 1.25vw, 1.14rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  --h-track:  -0.038em;   /* interlettrage des titres */
  --h-weight: 700;

  /* — Formes — */
  --r-xl:   26px;
  --r-lg:   18px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-pill: 999px;
  --r-btn:  var(--r-pill);

  /* — Rythme — */
  --space-section: clamp(72px, 9vw, 132px);
  --gutter:        clamp(20px, 4vw, 48px);
  --container:     1280px;
  --grid-gap:      16px;

  /* — Mouvement — */
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --fast:  190ms ease-out;
  --slow:  480ms var(--ease);   /* apparition des sections au defilement */

  --header-h: 74px;
  --preheader-h: 36px;
  /* Tout ce qui est figé en haut de page. Sert de référence à tout le calage
     vertical : ancres, hero, menu mobile, pages légales. */
  --chrome-h: calc(var(--preheader-h) + var(--header-h));
}


/* ═══ 02. RESET ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--c-ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

[id] { scroll-margin-top: calc(var(--chrome-h) + 24px); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-ink); color: #fff; padding: 14px 22px;
}
.skip-link:focus { left: 0; }

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ═══ 03. TYPOGRAPHIE ═════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--font-alt);
  font-weight: var(--h-weight); line-height: 1.06;
  letter-spacing: var(--h-track); text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.03; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.024em; line-height: 1.25; }
p  { text-wrap: pretty; }

.muted       { color: var(--c-accent-txt); }
.muted-light { color: rgba(255,255,255,.6); }
.h1-accent   { color: var(--c-accent); }

.eyebrow {
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-accent-sm); margin-bottom: 18px;
  display: flex; align-items: center; gap: 11px;
}
/* Le filet se dessine à l'entrée dans le champ de vision */
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--c-accent);
  border-radius: 2px; transform-origin: left;
  transform: scaleX(0); transition: transform 520ms var(--ease) 120ms;
}
.reveal.is-in .eyebrow::before,
.eyebrow.is-in::before,
.is-in .eyebrow::before { transform: scaleX(1); }
.eyebrow--onDark { color: var(--c-accent); }

.badge {
  display: inline-block;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink); background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 9px 18px; border-radius: var(--r-pill); margin-bottom: 24px;
}
.badge--onDark {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Badge placé à l'intérieur du h1 (métier + ville) : sa propre taille de
   police, sur sa propre ligne, autorisé à passer sur deux lignes en mobile. */
.h1__local {
  display: block; width: fit-content;
  white-space: normal; line-height: 1.5;
}

.prose p + p { margin-top: 16px; }
.prose strong { font-weight: 600; }


/* ═══ 04. LAYOUT ══════════════════════════════════════════════════════════ */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--space-section); position: relative; }
.section--mist { background: var(--surface-alt); }
.section--flush { padding-block: 0; margin-block: var(--space-section); }

.section__head {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(20px, 3.6vw, 60px); align-items: end;
  margin-bottom: clamp(36px, 4.4vw, 58px);
}
.section__head > .eyebrow { grid-column: 1 / -1; }
.section__lead { font-size: var(--fs-lead); color: var(--c-steel); }
.section__lead p + p { margin-top: 13px; }
.section__lead strong { color: var(--c-ink); font-weight: 600; }
.section__lead .btn { margin-top: 22px; }

.grid { display: grid; gap: var(--grid-gap); }
.grid-4   { grid-template-columns: repeat(4, 1fr); }
.grid-exp { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1080px) { .grid-4, .grid-exp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-4, .grid-exp { grid-template-columns: 1fr; } }

/* L'en-tête de section se replie dès 900 px, et non 700 : entre les deux, la
   colonne d'accroche descend sous ~260 px alors que le bouton qu'elle contient
   est en white-space: nowrap. Il sortait de l'écran — sur tous les designs, y
   compris ceux qui ne retouchent pas cette grille. */
@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}


/* ═══ 05. ANIMATIONS ══════════════════════════════════════════════════════
   Uniquement transform et opacity : rien qui déclenche un recalcul de mise en
   page. Tout se coupe si le système demande à réduire les animations.
   ═════════════════════════════════════════════════════════════════════════ */

.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--slow), transform var(--slow);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Entree du hero : le contenu part a opacite 0, donc TOUT ce temps est percu
   comme du temps de chargement. La choregraphie est conservee mais resserree :
   le titre est entierement lisible a 0,60 s au lieu de 0,89 s, le bandeau de
   chiffres a 0,84 s au lieu de 1,28 s. */
.js [data-anim] { opacity: 0; transform: translateY(16px); animation: rise .50s var(--ease) forwards; }
.js [data-anim="1"] { animation-delay: .04s; }
.js [data-anim="2"] { animation-delay: .10s; }
.js [data-anim="3"] { animation-delay: .18s; }
.js [data-anim="4"] { animation-delay: .26s; }
.js [data-anim="5"] { animation-delay: .34s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Très lent panoramique sur la photo du hero : donne vie à l'image fixe
   sans jamais gêner la lecture (24 s, amplitude 4 %). */
@keyframes derive {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1.05) translate3d(0, 0, 0); }
}

/* Halos de fond, très lents */
@keyframes flotte {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important; transition-duration: .001ms !important;
  }
  .js .reveal, .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .hero__bg img { animation: none !important; }
}


/* ═══ 06. BOUTONS ═════════════════════════════════════════════════════════
   Volontairement compacts : dans une page dense, un bouton trop gros donne
   un air amateur et écrase la navigation.
   ═════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: var(--fs-small); font-weight: 600;
  padding: 11px 12px 11px 21px;
  border-radius: var(--r-btn); border: 1.5px solid transparent;
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
  white-space: nowrap;
}
.btn--lg { padding: 13px 14px 13px 25px; font-size: var(--fs-body); }
.btn--block { width: 100%; justify-content: center; }

.btn__arrow {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  transition: transform var(--fast), background var(--fast);
}
.btn--lg .btn__arrow { width: 26px; height: 26px; font-size: 12px; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--c-ink); color: #fff; }
.btn--primary .btn__arrow { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: #060C1A; }

.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent .btn__arrow { background: rgba(255,255,255,.24); color: #fff; }
.btn--accent:hover { background: var(--c-accent-dp); }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); padding-inline: 21px; }
.btn--ghost:hover { border-color: var(--c-ink); }

.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn__li {
  width: 21px; height: 21px; flex: none; background: var(--c-ink); color: #fff;
  border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.btn[disabled] { opacity: .55; pointer-events: none; }


/* ═══ 06 bis. PRÉ-EN-TÊTE ═════════════════════════════════════════════════

   Bandeau fin figé au-dessus de l'en-tête : téléphone et e-mail cliquables.
   Fond anthracite quel que soit le thème — il sert de socle à l'en-tête, qui
   est transparent tant qu'on n'a pas défilé.
   ════════════════════════════════════════════════════════════════════════ */

.preheader {
  position: fixed; inset: 0 0 auto 0; z-index: 101;
  height: var(--preheader-h);
  display: flex; align-items: center;
  background: var(--c-ink); color: rgba(255,255,255,.8);
  font-size: var(--fs-micro); line-height: 1;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.preheader__inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); width: 100%; }
.preheader__item { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; white-space: nowrap; }
.preheader__item:hover { color: #fff; }
.preheader__item svg { width: 14px; height: 14px; flex: none; color: var(--c-accent); }
.preheader__note { margin-left: auto; color: rgba(255,255,255,.48); white-space: nowrap; }

/* Sous 900 px l'e-mail complet ne tient plus à côté du reste. */
@media (max-width: 900px) { .preheader__note { display: none; } }

/* Sur mobile, la barre d'appel fixe en bas remplit le même rôle : on retire le
   bandeau, et sa hauteur avec — sinon tout le calage vertical garderait un
   décalage pour un élément invisible. */
@media (max-width: 1080px) {
  :root { --preheader-h: 0px; }
  .preheader { display: none; }
}

/* ═══ 07. HEADER ══════════════════════════════════════════════════════════ */

.header {
  position: fixed; inset: var(--preheader-h) 0 auto 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--fast), border-color var(--fast);
}
.header.is-stuck {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--c-line);
}
@media (max-width: 1080px) {
  .header.is-stuck {
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

.header__inner { display: flex; align-items: center; gap: 26px; }

.header__logo { position: relative; display: block; height: 36px; flex: none; }
.header__logo img { height: 36px; width: auto; display: block; transition: opacity var(--fast); }
.header__logo .logo--light { position: absolute; left: 0; top: 0; opacity: 0; }
body.has-dark-hero .header:not(.is-stuck) .logo--color { opacity: 0; }
body.has-dark-hero .header:not(.is-stuck) .logo--light { opacity: 1; }
body.menu-open .header .logo--color { opacity: 1 !important; }
body.menu-open .header .logo--light { opacity: 0 !important; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav a { font-size: var(--fs-small); font-weight: 500; color: var(--c-ink); position: relative; padding-block: 6px; white-space: nowrap; }
/* « Approche & Offres » est le seul intitulé en deux mots : sans nowrap il se
   coupait en deux lignes et décalait toute la rangée. Entre 1081 px (où le
   menu complet apparaît) et 1260 px, l'écart entre les liens se resserre pour
   que la rangée ne vienne pas toucher le bouton d'appel à l'action. */
@media (min-width: 1081px) and (max-width: 1260px) { .nav { gap: 18px; } }
/* Entre 1081 et 1200 px, la rangée complète (logo non compressible + 7 liens
   + bouton) ne tient pas : on resserre les écarts et la typo du menu pour que
   le bouton d'appel à l'action reste entier dans l'écran. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .header__inner { gap: 14px; }
  .nav { gap: 11px; }
  .nav a { font-size: .8rem; }
  .header__cta { font-size: .8rem; padding-left: 14px; }
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--c-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--fast);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav__cta { display: none; }

.header__cta { flex: none; font-size: .84rem; padding: 8px 9px 8px 18px; gap: 9px; }
.header__cta .btn__arrow { width: 26px; height: 26px; font-size: 12px; }

@media (min-width: 1081px) {
  body.has-dark-hero .header:not(.is-stuck) .nav > a { color: #fff; }
  body.has-dark-hero .header:not(.is-stuck) .header__cta { background: #fff; color: var(--c-ink); }
  body.has-dark-hero .header:not(.is-stuck) .header__cta:hover { background: rgba(255,255,255,.88); }
}
body.has-dark-hero:not(.menu-open) .header:not(.is-stuck) .burger span { background: #fff; }
body.menu-open .header { background: var(--surface); border-bottom-color: var(--c-line); }
body.menu-open .header .burger span { background: var(--c-ink); }

.burger { display: none; width: 44px; height: 44px; position: relative; flex: none; }
.burger span {
  position: absolute; left: 11px; width: 22px; height: 2px;
  background: var(--c-ink); border-radius: 2px; transition: transform var(--fast);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .header__cta { display: none; }
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--chrome-h) 0 0 0; margin: 0; padding: 32px var(--gutter) 46px;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    background: var(--surface); border-top: 1px solid var(--c-line);
    overflow-y: auto;

    /* Menu fermé. On bascule sur `display` et non sur `visibility`.
       `visibility` s'anime de façon discrète : mise dans la liste des
       transitions, elle pouvait rester bloquée sur `hidden` alors que la
       classe `is-open` était bien posée — le menu s'ouvrait sans jamais
       apparaître. Un fondu de 190 ms ne vaut pas ce risque. */
    display: none;
    opacity: 0; transform: translateY(-10px);
    transition: opacity var(--fast), transform var(--fast);
  }
  .nav.is-open { display: flex; opacity: 1; transform: none; }

  /* `backdrop-filter` fait de l'en-tête le bloc conteneur de tous ses
     descendants en `position: fixed`. Le menu, qui devrait couvrir l'écran,
     s'y retrouvait enfermé et se réduisait à la hauteur de l'en-tête — un
     rectangle de 79 px au lieu de la page entière. On retire le filtre tant
     que le menu est ouvert, et on rend le fond opaque pour compenser. */
  body.menu-open .header,
  body.menu-open .header.is-stuck {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--surface);
  }
  .nav a { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; padding: 15px 0; border-bottom: 1px solid var(--c-line-2); }
  .nav a::after { display: none; }
  .nav__cta {
    display: flex !important; justify-content: center; margin-top: 24px; padding: 16px 24px !important;
    background: var(--c-ink); color: #fff !important; border-radius: var(--r-btn); border: 0 !important;
    font-size: var(--fs-body) !important;
  }
  body.menu-open { overflow: hidden; }
}


/* ═══ 08. HERO ════════════════════════════════════════════════════════════
   Identique dans les huit designs : photo d'atelier plein cadre sous un voile
   anthracite, et les quatre chiffres-clés visibles dès l'arrivée, sans
   défiler. Le titre est volontairement contenu pour cela.
   ═════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--c-ink); color: #fff; overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 44%;
  animation: derive 26s ease-in-out infinite;
}
/* Pause pilotée par main.js : hors de l'écran, ces animations ne coûtent que
   des images perdues. Voir aussi les halos plus bas. */
body.hero-hors-champ .hero__bg img,
body.hero-hors-champ .hero::before,
body.hero-hors-champ .hero::after { animation-play-state: paused; }

.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,38,.88) 0%, rgba(10,18,38,.80) 44%, rgba(10,18,38,.95) 100%),
    radial-gradient(900px 460px at 78% 16%, rgba(253,90,0,.28), transparent 66%);
}

/* Deux halos très lents, pour que le fond ne soit jamais tout à fait figé.
   Pas de `filter: blur()` ici : un dégradé radial est déjà flou par nature,
   et le flou de 80 px imposait au navigateur deux tampons hors écran de la
   taille d'un demi-écran, recalculés à chaque image de l'animation. Le
   dégradé a été étalé jusqu'au bord pour retrouver exactement le même fondu. */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  border-radius: 50%;
}
.hero::before {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: -12vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(253,90,0,.20) 0%, rgba(253,90,0,.10) 42%, transparent 78%);
  animation: flotte 22s ease-in-out infinite;
}
.hero::after {
  width: 38vw; height: 38vw; max-width: 500px; max-height: 500px;
  right: -8vw; top: -12vw;
  background: radial-gradient(circle, rgba(36,64,107,.38) 0%, rgba(36,64,107,.19) 44%, transparent 80%);
  animation: flotte 28s ease-in-out infinite reverse;
}

@media (max-width: 860px) {
  .hero::before, .hero::after { animation: none; }
}

.hero__inner {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0;
  padding-top: calc(var(--chrome-h) + clamp(24px, 3.4vw, 52px));
  padding-bottom: clamp(24px, 3vw, 42px);
  display: flex; align-items: center;
}
.hero__body { max-width: 940px; }
.hero__lead { font-size: var(--fs-lead); color: rgba(255,255,255,.74); max-width: 62ch; margin-top: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero__strip { display: none; }

/* Chiffres-clés : quatre blocs, visibles sans défiler */
.hero__figs { position: relative; z-index: 2; flex: none; margin-top: clamp(28px, 3.5vw, 56px); padding-bottom: clamp(24px, 2.8vw, 44px); }
.hero__figs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.fig {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-md);
  padding: clamp(17px, 2vw, 23px) clamp(15px, 1.7vw, 22px) clamp(16px, 1.9vw, 23px);
  transition: background var(--fast), border-color var(--fast);
}
.fig::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 24px; height: 24px;
  border-top: 3px solid var(--c-accent);
  border-left: 3px solid var(--c-accent);
  border-top-left-radius: var(--r-md);
}
.fig:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.38); }
.fig__icon {
  position: absolute; right: -12px; bottom: -14px;
  width: 76px; height: 76px; color: rgba(255,255,255,.13);
}
.fig__num, .fig__label { position: relative; }
.fig__num {
  display: block; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: #fff;
}
.fig__label { display: block; margin-top: 7px; font-size: var(--fs-micro); color: rgba(255,255,255,.62); line-height: 1.35; }

@media (max-width: 900px) {
  .hero__figs-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__figs { padding-bottom: 42px; }
}
@media (max-width: 560px) {
  .hero { min-height: 0; }
  .hero__inner { padding-top: calc(var(--chrome-h) + 44px); padding-bottom: 34px; }
}


/* ═══ 09. RÉFÉRENCES ══════════════════════════════════════════════════════ */

.trust { padding-block: clamp(40px, 5vw, 66px); background: var(--surface); }
.trust__refs-label {
  font-size: var(--fs-micro); color: var(--c-steel-2);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px;
}
.logos { display: flex; flex-wrap: wrap; gap: 11px; }
.logos li {
  display: flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 0 24px; flex: 1 1 150px;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-md);
  transition: border-color var(--fast), transform var(--fast), background var(--fast);
}
.logos li:hover { border-color: var(--c-accent); transform: translateY(-3px); }
.logos li span {
  font-size: clamp(.92rem, 1.25vw, 1.08rem); font-weight: 700;
  color: var(--c-steel-3); text-align: center; line-height: 1.2;
  transition: color var(--fast);
}
.logos li:hover span { color: var(--c-ink); }
.logos--images li img { max-height: 32px; width: auto; filter: grayscale(1); opacity: .62; transition: filter var(--fast), opacity var(--fast); }
.logos--images li:hover img { filter: none; opacity: 1; }
@media (max-width: 620px) { .logos li { flex-basis: 126px; padding: 0 13px; min-height: 54px; } }


/* ═══ 10. CARTES ══════════════════════════════════════════════════════════ */

.card {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  padding: clamp(23px, 2.4vw, 32px);
  position: relative;
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.card:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: var(--card-shadow-hv); }
.card h3 { margin-bottom: 11px; }
.card p  { color: var(--c-steel); font-size: var(--fs-small); }

/* Filet supérieur qui se déploie au survol */
.card--situation { overflow: hidden; }
.card--situation::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--c-accent); transform: scaleX(.16); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.card--situation:hover::before { transform: scaleX(1); }

.card--exp { display: flex; flex-direction: column; }
.card__icon {
  width: 64px; height: 64px; object-fit: contain; object-position: left center;
  margin-bottom: 18px; transition: transform 380ms var(--ease);
}
.card--exp:hover .card__icon { transform: translateY(-4px) scale(1.07); }
.card__num {
  position: absolute; top: 24px; right: 26px;
  font-size: 1.5rem; font-weight: 700; color: #8A919D;
  letter-spacing: -.05em; transition: color var(--fast);
}
.card--exp:hover .card__num { color: var(--c-accent); }
.card__claim { color: var(--c-ink) !important; font-weight: 600; font-size: var(--fs-body) !important; margin-bottom: 9px; }
.card__list { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--c-line); display: grid; gap: 8px; }
.card__list li { font-size: var(--fs-small); color: var(--c-steel); padding-left: 19px; position: relative; line-height: 1.5; }
.card__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; border-radius: 2px; background: var(--c-accent); }
.card__link {
  margin-top: auto; padding-top: 21px;
  font-size: var(--fs-small); font-weight: 600; color: var(--c-ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--fast), gap var(--fast);
}
.card__link:hover { color: var(--c-accent-sm); gap: 13px; }
.card__link span { transition: transform 240ms var(--ease); display: inline-block; }
.card__link:hover span { transform: translateX(3px); }

.card--featured { border-color: var(--c-ink); }
.card__flag {
  position: absolute; top: -10px; left: clamp(23px, 2.4vw, 32px);
  background: var(--c-accent); color: var(--c-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
}

.card--cta { background: var(--c-ink); border-color: var(--c-ink); justify-content: center; align-items: flex-start; }
/* Avec six domaines, la carte d’appel occupe seule la troisième rangée :
   elle s’étale sur toute la largeur et se lit en ligne plutôt qu’en colonne. */
.grid-exp .card--cta {
  grid-column: 1 / -1;
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(20px, 2.4vw, 36px);
}
.grid-exp .card--cta h3 { flex: 1 1 260px; margin-bottom: 0; }
.grid-exp .card--cta p  { flex: 2 1 340px; margin-bottom: 0 !important; }
/* En colonne, les flex-basis pensés pour la rangée (260/340 px) deviennent des
   hauteurs imposées : la carte s'étirait sur tout l'écran d'un téléphone. */
@media (max-width: 700px) {
  .grid-exp .card--cta { flex-direction: column; align-items: stretch; }
  .grid-exp .card--cta h3, .grid-exp .card--cta p { flex: 0 0 auto; }
}
.card--cta:hover { border-color: var(--c-accent); }
.card--cta h3 { color: #fff; }
.card--cta p  { color: rgba(255,255,255,.64) !important; margin-bottom: 24px; }


/* ═══ 10b. PORTES D'ENTRÉE ════════════════════════════════════════════════ */

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-bottom: 30px; }
.door {
  padding: 20px 24px; background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 5px; position: relative; overflow: hidden;
  transition: border-color var(--fast), transform var(--fast);
}
.door::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 340ms var(--ease);
}
.door:hover { border-color: var(--c-accent); transform: translateY(-3px); }
.door:hover::after { transform: scaleX(1); }
.door__title { font-weight: 700; font-size: var(--fs-body); letter-spacing: -0.025em; }
.door__items { font-size: var(--fs-micro); color: var(--c-steel); line-height: 1.5; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }


/* ═══ 11. APPROCHE ════════════════════════════════════════════════════════ */

.thread { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 5px; margin-bottom: clamp(32px, 4vw, 50px); }
.thread li {
  font-size: var(--fs-small); font-weight: 600; padding: 8px 17px;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-pill);
  display: flex; align-items: center;
  transition: border-color var(--fast), transform var(--fast);
}
.thread li:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.thread li + li::before { content: "→"; color: var(--c-accent); margin-right: 14px; margin-left: -5px; font-weight: 400; }
.thread li:last-child { border-color: var(--c-accent); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.step {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  padding: clamp(24px, 2.6vw, 34px);
  position: relative; overflow: hidden;
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.step:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: var(--card-shadow-hv); }
.step::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease);
}
.step.is-in::after { transform: scaleX(1); }
.step:nth-child(2)::after { transition-delay: .1s; }
.step:nth-child(3)::after { transition-delay: .2s; }
.step__num {
  display: block; font-size: 2.2rem; font-weight: 700; letter-spacing: -.05em; line-height: 1;
  color: var(--c-accent); margin-bottom: 16px; transition: transform 340ms var(--ease);
}
.step:hover .step__num { transform: translateX(6px); }
.step h3 { margin-bottom: 9px; }
.step p  { color: var(--c-steel); font-size: var(--fs-small); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }


/* ═══ 12. DIAGNOSTIC FLASH ════════════════════════════════════════════════ */

.panel { border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; }
.panel--dark { background: var(--panel-bg); color: #fff; }
.panel__body { padding: clamp(30px, 4.4vw, 62px); }
.panel__title { margin-bottom: 18px; }
.panel__lead { color: rgba(255,255,255,.68); font-size: var(--fs-lead); max-width: 52ch; margin-bottom: 24px; }
.panel__list { display: grid; gap: 10px; margin-bottom: 30px; }
.panel__list li { padding-left: 26px; position: relative; color: rgba(255,255,255,.87); font-size: var(--fs-small); }
.panel__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 13px; height: 2px; border-radius: 2px; background: var(--c-accent); }
.panel__media { position: relative; min-height: 300px; overflow: hidden; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); }
.panel:hover .panel__media img { transform: scale(1.05); }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } .panel__media { min-height: 220px; order: -1; } }


/* ═══ 12b. OFFRES — tableau des formats d'intervention ═══════════════
   Chaque ligne se lit comme une carte : mêmes rayons, même filet, même orange
   au survol. La première ligne (Diagnostic Flash) passe sur l'encre du site
   pour signaler le point d'entrée. Sous 860 px le tableau se replie en blocs
   empilés, chaque cellule reprenant son en-tête via data-label.
   ════════════════════════════════════════════════════════════════════ */

.offers { overflow-x: auto; }
.offers__table {
  width: 100%; min-width: 700px;
  border-collapse: separate; border-spacing: 0 10px;
  text-align: left;
}
/* Intitulé du tableau : lu par les lecteurs d'écran, invisible à l'écran
   (le titre de section le dit déjà). */
.offers__table caption {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.offers__table thead th {
  padding: 0 26px 4px;
  font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--c-steel-2);
}

.offers__row > * {
  background: var(--card-bg); vertical-align: top;
  padding: clamp(20px, 2.1vw, 26px);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  transition: border-color var(--fast);
}
.offers__row > *:first-child {
  width: 26%; border-left: 1px solid var(--c-line);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.offers__row > *:last-child {
  width: 19%; border-right: 1px solid var(--c-line);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.offers__row:hover > * { border-color: var(--c-accent); }

.offers__flag {
  display: inline-block; margin-bottom: 11px;
  background: var(--c-accent); color: var(--c-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.offers__name {
  display: block; font-size: var(--fs-h3); font-weight: var(--h-weight);
  letter-spacing: var(--h-track); line-height: 1.25; color: var(--c-ink);
}
.offers__row td p { color: var(--c-steel); font-size: var(--fs-small); line-height: 1.55; }
/* Ligne « Livrable(s) » : même tiret orange que les listes des cartes. */
.offers__deliverable { margin-top: 9px; padding-left: 19px; position: relative; }
.offers__deliverable::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 8px; height: 2px; border-radius: 2px; background: var(--c-accent);
}
.offers__time {
  display: block; font-size: var(--fs-body); font-weight: 700;
  letter-spacing: -.02em; color: var(--c-ink);
}
.offers__detail { display: block; margin-top: 6px; font-size: var(--fs-micro); color: var(--c-steel-2); line-height: 1.45; }

/* ── Ligne mise en avant : Diagnostic Flash ── */
.offers__row--lead > * { background: var(--panel-bg); border-color: var(--panel-bg); }
.offers__row--lead .offers__name,
.offers__row--lead .offers__time { color: #fff; }
.offers__row--lead td p { color: rgba(255,255,255,.72); }
.offers__row--lead .offers__deliverable { color: rgba(255,255,255,.9); }
.offers__row--lead .offers__detail { color: rgba(255,255,255,.6); }

.offers__foot {
  margin-top: 32px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 20px 40px;
}
.offers__note { color: var(--c-steel); font-size: var(--fs-small); max-width: 62ch; }

/* ── Repli en blocs empilés : un tableau à trois colonnes ne tient pas sur
     un téléphone. Chaque ligne redevient une carte, chaque cellule affiche
     son en-tête de colonne. ── */
@media (max-width: 860px) {
  .offers { overflow-x: visible; }
  .offers__table { min-width: 0; border-spacing: 0; }
  .offers__table, .offers__table tbody, .offers__row, .offers__row > * { display: block; width: auto; }
  .offers__table thead { display: none; }

  .offers__row {
    background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg);
    padding: clamp(20px, 4vw, 26px); margin-bottom: 12px;
    transition: border-color var(--fast);
  }
  .offers__row:hover { border-color: var(--c-accent); }
  .offers__row > *,
  .offers__row:hover > * {
    background: transparent; border: 0; border-radius: 0; padding: 0; width: auto;
  }
  /* Les regles de colonne (largeur en %, coins arrondis) sont plus specifiques
     que la remise a plat ci-dessus : sans cette neutralisation explicite, la
     premiere et la derniere cellule gardaient 26 % et 19 % de large — les
     intitules se coupaient en deux — et leurs coins arrondis faisaient courber
     le filet de separation en plein milieu de la carte. */
  .offers__row > *:first-child,
  .offers__row > *:last-child { width: auto; border-radius: 0; }
  .offers__row > *:first-child { border-left: 0; }
  .offers__row > *:last-child  { border-right: 0; }
  .offers__row--lead > * { background: transparent; }
  .offers__row > * + * { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--c-line); }

  .offers__row td::before {
    content: attr(data-label); display: block; margin-bottom: 7px;
    font-size: var(--fs-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em; color: var(--c-steel-2);
  }

  .offers__row--lead { background: var(--panel-bg); border-color: var(--panel-bg); }
  .offers__row--lead > * + * { border-top-color: rgba(255,255,255,.14); }
  .offers__row--lead td::before { color: rgba(255,255,255,.55); }
  .offers__foot .btn { width: 100%; justify-content: center; }
}


/* ═══ 12c. VALEURS — bande de transition sous le hero ════════════════
   Une seule ligne : intitulé à gauche, cinq mots séparés par un point orange.
   Elle emprunte le vocabulaire des cartes (fond, filet, rayon) pour ne pas
   introduire une forme de plus dans la page.
   ══════════════════════════════════════════════════════════════ */

.valeurs {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 32px);
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 14px clamp(24px, 3vw, 44px);
}
.valeurs__label {
  font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--c-steel-2);
  display: flex; align-items: center; gap: 11px;
}
/* Même filet orange que les intitulés de section. */
.valeurs__label::before {
  content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--c-accent);
  flex: none;
}

/* Grille et non ligne séparée par des points : un séparateur posé entre les
   mots reste orphelin en bout de ligne dès que la liste se replie. Ici chaque
   valeur porte son propre tiret et les colonnes se recomposent toutes seules,
   5 sur ordinateur, 3 puis 2 sur téléphone. */
.valeurs__liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px clamp(14px, 2vw, 26px);
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -.02em; color: var(--c-ink);
}
.valeurs__liste li { display: flex; align-items: baseline; gap: 10px; }
.valeurs__liste li::before {
  content: ""; width: 11px; height: 2px; border-radius: 2px;
  background: var(--c-accent); flex: none; transform: translateY(-.28em);
}

/* L'intitulé passe au-dessus dès 1120 px : en dessous, il mange la place des
   cinq colonnes et « Résultats » tombe seul sur une deuxième ligne. */
@media (max-width: 1120px) {
  .valeurs { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 860px) {
  .valeurs__liste { font-size: var(--fs-small); }
}


/* ═══ 13. SITUATIONS ══════════════════════════════════════════════════════ */

.situations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.situations li {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-md);
  padding: 18px 20px 18px 46px; position: relative;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.5;
  transition: border-color var(--fast), transform var(--fast), background var(--fast);
}
.situations li::before {
  content: ""; position: absolute; left: 20px; top: 25px;
  width: 13px; height: 2px; border-radius: 2px; background: var(--c-accent);
  transition: width var(--fast);
}
.situations li:hover { border-color: var(--c-accent); transform: translateY(-3px); }
.situations li:hover::before { width: 20px; }

.situations__close {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-line);
  font-size: var(--fs-lead); color: var(--c-steel);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 17px;
}
.situations__close a {
  font-weight: 600; color: var(--c-ink);
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--c-accent); padding-bottom: 2px;
  transition: color var(--fast), gap var(--fast);
}
.situations__close a:hover { color: var(--c-accent-sm); gap: 13px; }
@media (max-width: 980px) { .situations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .situations { grid-template-columns: 1fr; } }


/* ═══ 14. PARCOURS ════════════════════════════════════════════════════════ */

.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 4.5vw, 70px); align-items: center; }
.split__media { border-radius: var(--r-xl); overflow: hidden; background: var(--c-line); }
.split__media img { width: 100%; height: auto; transition: transform .65s var(--ease); }
.split__media:hover img { transform: scale(1.04); }
.split__text .prose { margin-top: 24px; color: var(--c-steel); }
.split__text .prose strong { color: var(--c-ink); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 26px; }
.tags li {
  font-size: var(--fs-micro); font-weight: 500; padding: 7px 14px;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-pill);
  color: var(--c-steel);
  transition: border-color var(--fast), color var(--fast), transform var(--fast);
}
.tags li:hover { border-color: var(--c-accent); color: var(--c-ink); transform: translateY(-2px); }
.tags--onDark li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.82); }
.tags--onDark li:hover { border-color: var(--c-accent); color: #fff; background: rgba(253,90,0,.16); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__media { max-width: 400px; } }


/* ═══ 14b. IMPACTS CHIFFRÉS ════════════════════════════════════
   Le chiffre d'abord, gros, puis le contexte. Un lecteur industriel balaie la
   colonne de gauche des résultats avant de lire quoi que ce soit.
   ══════════════════════════════════════════════════════════════════ */

.impacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

.impact {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex; flex-direction: column;
  transition: transform var(--fast), border-color var(--fast);
}
.impact:hover { transform: translateY(-4px); border-color: var(--c-accent); }

.impact__chiffre {
  font-size: clamp(2rem, 3.1vw, 2.7rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; color: var(--c-accent-txt);
}
.impact__precision {
  margin-top: 7px; font-size: var(--fs-micro); font-weight: 500;
  color: var(--c-steel-2) !important;
}
.impact h3 {
  margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--c-line);
  font-size: var(--fs-body); line-height: 1.3;
}
.impact__texte {
  margin-top: 9px; font-size: var(--fs-small); line-height: 1.55; color: var(--c-steel);
}
.impact__texte strong { color: var(--c-ink); font-weight: 600; }

@media (max-width: 1080px) { .impacts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .impacts { grid-template-columns: 1fr; } }


/* ═══ 15. SECTEURS ════════════════════════════════════════════════════════ */

.sectors { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--grid-gap); }
.sector--lead { background: var(--panel-bg); color: #fff; border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; }
.sector__media { position: relative; min-height: 290px; overflow: hidden; }
.sector__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); }
.sector--lead:hover .sector__media img { transform: scale(1.05); }
.sector__body { padding: clamp(26px, 3.2vw, 46px); }
.sector__body h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: 12px; }
.sector__body > p { color: rgba(255,255,255,.68); font-size: var(--fs-small); }
.sector--others {
  background: var(--card-bg); border: var(--card-border); border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 38px);
}
.sector--others h3 { margin-bottom: 9px; }
.sector--others > p { color: var(--c-steel); font-size: var(--fs-small); }
.sector__note { margin-top: 4px; padding-top: 19px; border-top: 1px solid var(--c-line); font-size: var(--fs-micro) !important; color: var(--c-steel-2) !important; }
@media (max-width: 1080px) { .sectors { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .sector--lead { grid-template-columns: 1fr; } .sector__media { min-height: 200px; } }


/* ═══ 16. CTA FINAL ═══════════════════════════════════════════════════════ */

.cta-final { background: var(--panel-bg); color: #fff; padding-block: clamp(70px, 8.5vw, 126px); position: relative; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 360px at 50% 0%, rgba(253,90,0,.2), transparent 68%);
}
.cta-final__inner { max-width: 800px; margin-inline: auto; text-align: center; position: relative; }
.cta-final h2 { margin-bottom: 20px; }
.cta-final p { color: rgba(255,255,255,.68); font-size: var(--fs-lead); }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 36px; }


/* ═══ 17. CONTACT ═════════════════════════════════════════════════════════ */

.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 3.8vw, 60px); align-items: start; }
.contact h2 { margin-bottom: 14px; }
.contact__intro { color: var(--c-steel); font-size: var(--fs-lead); margin-bottom: 30px; }

.form { display: grid; gap: 17px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.req { color: var(--c-accent-sm); }

.field input, .field select, .field textarea {
  width: 100%; padding: 12px 15px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-size: var(--fs-small);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea { resize: vertical; min-height: 116px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(253,90,0,.13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-steel-2); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C62828; }
.field__err { font-size: var(--fs-micro); color: #C62828; display: none; }
.field.has-error .field__err { display: block; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 11px; margin-top: 3px; }
.field--check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--c-accent); padding: 0; }
.field--check label { font-weight: 400; font-size: var(--fs-micro); color: var(--c-steel); line-height: 1.5; }
.field--check label a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.field--check .field__err { grid-column: 1 / -1; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: var(--fs-small); padding: 13px 17px; border-radius: var(--r-md); display: none; line-height: 1.5; }
.form__status.is-ok    { display: block; background: #E9F6EC; color: #1B5E20; border: 1px solid #BEE3C6; }
.form__status.is-error { display: block; background: #FDECEC; color: #B3261E; border: 1px solid #F3C6C4; }

.contact__side { display: grid; gap: var(--grid-gap); }
.contact__card { background: var(--panel-bg); color: #fff; border-radius: var(--r-xl); padding: clamp(26px, 3vw, 36px); }
.contact__label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .11em; color: rgba(255,255,255,.52); margin-bottom: 12px; }
.contact__phone { display: block; font-size: clamp(1.6rem, 2.7vw, 2.1rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.1; transition: color var(--fast); }
.contact__phone:hover { color: var(--c-accent); }
.contact__mail { display: block; margin-top: 11px; font-size: var(--fs-small); color: rgba(255,255,255,.68); word-break: break-word; }
.contact__mail:hover { color: var(--c-accent); }
.contact__meta { background: var(--card-bg); border: var(--card-border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 32px); }
.contact__meta dt { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent-sm); margin-bottom: 5px; }
.contact__meta dd { margin: 0 0 19px; font-size: var(--fs-small); color: var(--c-steel); }
.contact__meta dd:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } }


/* ═══ 18. FOOTER ══════════════════════════════════════════════════════════ */

.footer { background: var(--c-ink); color: #fff; padding-block: clamp(50px, 6vw, 74px) 30px; }
.footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); padding-bottom: 42px; border-bottom: 1px solid var(--c-ink-3); }
.footer__brand img { height: 44px; width: auto; margin-bottom: 20px; }
.footer__brand .logo--color { display: none; }
.footer__baseline { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.028em; margin-bottom: 9px; }
.footer__desc { color: rgba(255,255,255,.5); font-size: var(--fs-small); max-width: 42ch; }
.footer__col-title { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: rgba(255,255,255,.44); margin-bottom: 15px; }
.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.footer__nav a, .footer__contact a, .footer__contact p { font-size: var(--fs-small); color: rgba(255,255,255,.72); transition: color var(--fast); }
.footer__nav a:hover, .footer__contact a:hover { color: var(--c-accent); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 13px 26px; justify-content: space-between; align-items: center; padding-top: 26px; font-size: var(--fs-micro); color: rgba(255,255,255,.44); }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; gap: 34px; } }


/* ═══ 19. PAGES LÉGALES ═══════════════════════════════════════════════════ */

.legal { padding-top: calc(var(--chrome-h) + clamp(46px, 6vw, 84px)); padding-bottom: var(--space-section); }
.legal__inner { max-width: 760px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 11px; }
.legal__updated { color: var(--c-steel-2); font-size: var(--fs-small); margin-bottom: 44px; }
.legal h2 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-top: 42px; margin-bottom: 13px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p, .legal li { color: var(--c-steel); font-size: var(--fs-small); }
.legal p + p { margin-top: 11px; }
.legal ul { margin-top: 11px; display: grid; gap: 7px; }
.legal ul li { padding-left: 19px; position: relative; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; border-radius: 2px; background: var(--c-accent); }
.legal a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--c-accent-sm); }
/* Les vrais boutons (404, confirmation du formulaire…) ne sont pas des liens
   de texte : pas de soulignement, texte blanc lisible sur fond plein. */
.legal a.btn, .legal a.btn:hover { text-decoration: none; color: #fff; }
.legal strong { color: var(--c-ink); font-weight: 600; }
.legal .todo { background: var(--c-accent-sf); border: 1px solid #FFD9C2; border-radius: var(--r-md); padding: 15px 19px; margin-top: 15px; font-size: var(--fs-micro); color: #8A3A0B; }


/* ═══ 20. BARRE DE MAQUETTE ═══════════════════════════════════════════════
   Repère de navigation entre les propositions. À supprimer à la mise en ligne.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Barre de choix (phase de présentation uniquement) ─────────────────────
   Discrète au repos, elle s'éclaire au survol. Sur ordinateur elle liste les
   quatre propositions et met en évidence celle qu'on regarde ; sur mobile
   elle ne garde que le retour et remonte au-dessus de la barre d'appel. */
.switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 900; opacity: .48;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--c-ink); color: #fff;
  font-size: var(--fs-micro); font-weight: 600;
  padding: 8px 17px; border-radius: var(--r-pill);
  box-shadow: 0 12px 28px -10px rgba(10,18,38,.55);
  transition: opacity var(--fast);
}
.switch:hover, .switch:focus-within { opacity: 1; }

.switch__back { display: inline-flex; align-items: center; gap: 8px; color: #fff; white-space: nowrap; }
.switch__back:hover { color: var(--c-accent); }
.switch__short { display: none; }

.switch__list {
  display: flex; align-items: center; gap: 4px; margin: 0; padding: 0 0 0 13px; list-style: none;
  border-left: 1px solid rgba(255,255,255,.22);
}
.switch__list a {
  display: grid; place-items: center; min-width: 31px; height: 27px; padding-inline: 7px;
  border-radius: 8px; color: rgba(255,255,255,.6); font-weight: 700;
  transition: background var(--fast), color var(--fast);
}
.switch__list a:hover { background: rgba(255,255,255,.15); color: #fff; }
.switch__list a.is-current { background: var(--c-accent); color: #fff; }

.switch__name { color: var(--c-accent); font-weight: 700; white-space: nowrap; }
.switch:hover .switch__name { color: #fff; }

@media (max-width: 780px) {
  .switch { bottom: 86px; right: 12px; padding: 9px 16px; opacity: .95; }
  .switch__list, .switch__name, .switch__long { display: none; }
  .switch__short { display: inline; }
}
/* ═══ CORRECTIFS DU SOCLE ═════════════════════════════════════════════════

   Réunis ici plutôt que dans les thèmes : ce sont des défauts du socle commun,
   ils valent donc pour les quatre propositions.
   ════════════════════════════════════════════════════════════════════════ */

/* Le bouton téléphone n'a pas de pastille fléchée : son contenu est donc plus
   bas que celui du bouton posé juste à côté, et les deux ne s'alignent pas.
   On lui donne un calage invisible de la hauteur exacte de la pastille — 30 px,
   33 px en grand format — plutôt qu'une hauteur fixe, qui casserait dès qu'un
   thème change les marges intérieures des boutons. */
.btn--tel::after { content: ""; width: 0; height: 30px; flex: none; }
.btn--lg.btn--tel::after { height: 33px; }

/* Sur fond clair, le bouton téléphone gardait un contour gris discret : il
   passe en orange pour ressortir à côté du bouton plein (demande client).
   Les fonds sombres (carte d'appel, panneaux) le repassent en blanc plus bas. */
.btn--ghost.btn--tel { border-color: var(--c-accent); }
.btn--ghost.btn--tel:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Un bouton fantôme posé sur un aplat sombre gardait un texte anthracite : le
   libellé disparaissait et il ne restait qu'un cadre vide. Concerne la carte
   « Votre situation n'entre dans aucune case ? », le panneau Diagnostic Flash
   et le bloc du secteur prioritaire. */
.card--cta .btn--ghost,
.panel--dark .btn--ghost,
.sector--lead .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.34);
}
.card--cta .btn--ghost:hover,
.panel--dark .btn--ghost:hover,
.sector--lead .btn--ghost:hover {
  border-color: #fff; background: rgba(255,255,255,.09);
}

/* Même chose pour le bouton principal : son aplat est anthracite, posé sur un
   aplat sombre il disparaissait. Il s'inverse — fond blanc, texte anthracite.
   La pastille fléchée reste orange, elle sert de repère. */
.card--cta .btn--primary,
.panel--dark .btn--primary,
.sector--lead .btn--primary {
  background: #fff; color: var(--c-ink);
}
.card--cta .btn--primary:hover,
.panel--dark .btn--primary:hover,
.sector--lead .btn--primary:hover {
  background: var(--c-accent); color: #fff;
}

/* Le panneau Diagnostic Flash : le texte était calé en haut alors que le visuel
   occupe toute la hauteur. On le centre — en calant les enfants à gauche, sinon
   le bouton s'étire sur toute la largeur du panneau. */
.panel__body {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
}
.panel__body > * { max-width: 100%; }

/* LinkedIn et téléphone côte à côte en fin de Parcours */
.parcours__actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }

/* ── Variantes « sur fond sombre » : à l'abri des thèmes ───────────────────
   Les thèmes redéfinissent `.eyebrow { color }` et `.tags li` à specificite
   egale, mais plus loin dans la cascade : ils ecrasaient donc la variante
   sombre du socle, et l'accroche « Point d'entree » finissait en anthracite
   sur un panneau anthracite. On double la classe pour reprendre la main. */
.eyebrow.eyebrow--onDark { color: var(--c-accent); background: transparent; }
.tags.tags--onDark li {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  font-weight: 500;
}
.tags.tags--onDark li:hover {
  border-color: var(--c-accent); color: #fff; background: rgba(253,90,0,.16);
}

/* ═══ TÉLÉPHONE ET BARRE D'APPEL ══════════════════════════════════════════

   Le numéro est un lien d'appel partout : sur mobile un appui suffit, sur
   ordinateur il reste lisible et copiable. Il apparaît dans l'en-tête, le
   menu, le hero, deux sections, le CTA final et le pied de page.
   ════════════════════════════════════════════════════════════════════════ */

.btn__ico { width: 17px; height: 17px; flex: none; }
.btn--tel { white-space: nowrap; }

/* ── Menu mobile : le numéro sous le bouton de contact ────────────────────── */
.nav__tel { display: none; }
@media (max-width: 1080px) {
  .nav__tel {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 9px;
    margin-top: 10px; padding: 15px 24px !important;
    border: none !important; border-radius: var(--r-btn);
    font-size: var(--fs-body) !important; font-weight: 700 !important;
    background: var(--c-accent) !important; color: #fff !important;
  }
  .nav__tel::after { display: none; }
}

/* ── Boutons flottants (bas droite) ────────────────────────────────────────
   Appel direct toujours à portée de clic, et retour en haut de page dès
   qu'on a défilé. Mêmes boutons sur ordinateur et sur mobile. */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.fab__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  box-shadow: 0 6px 22px rgba(10, 18, 38, .22);
  transition: transform var(--fast), box-shadow var(--fast),
              opacity var(--fast), visibility var(--fast);
}
.fab__btn svg { width: 24px; height: 24px; }
.fab__btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 18, 38, .3); }
.fab__btn--tel { background: var(--c-accent); color: #fff; }
.fab__btn--tel:hover { background: var(--c-accent-dp); }
.fab__btn--top {
  background: var(--c-paper); color: var(--c-ink);
  border: 1px solid var(--c-line);
  /* Invisible tant qu'on est en haut de page ; main.js pose .is-visible. */
  opacity: 0; visibility: hidden; transform: translateY(8px);
}
.fab__btn--top.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab__btn--top.is-visible:hover { transform: translateY(-3px); }

@media (max-width: 780px) {
  .fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .fab__btn { width: 48px; height: 48px; }
  /* Le menu plein écran passe devant */
  body.menu-open .fab { display: none; }
}

/* ── Bandeau de consentement cookies ───────────────────────────────────────
   Volontairement minuscule : une ligne, deux boutons de même taille (refuser
   est aussi accessible qu'accepter — exigence RGPD). Injecté par consent.js
   uniquement tant qu'aucun choix n'est mémorisé. */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: var(--c-paper); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: 0 12px 34px rgba(10, 18, 38, .2);
}
.consent__txt { font-size: var(--fs-small); line-height: 1.5; }
.consent__txt a { text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent__btn {
  padding: 10px 12px; border-radius: var(--r-btn);
  font-size: .9rem; font-weight: 700; line-height: 1;
  transition: background var(--fast);
}
.consent__btn--no { background: var(--c-mist); border: 1px solid var(--c-line); }
.consent__btn--no:hover { background: var(--c-line-2); }
.consent__btn--ok { background: var(--c-accent); color: #fff; }
.consent__btn--ok:hover { background: var(--c-accent-dp); }
@media (max-width: 780px) {
  /* Pleine largeur moins la place du bouton flottant, à droite */
  .consent { left: 12px; right: 74px; bottom: 12px; max-width: none; }
}

.in-frame .switch { display: none; }
.in-frame .fab { display: none !important; }
.in-frame .consent { display: none !important; }

/* En aperçu (vignette ou capture d'écran), le défilement doit être instantané :
   sinon l'ancre s'anime encore au moment où la capture est prise, et l'image
   montre le haut de page au lieu de la section visée. */
html.in-frame { scroll-behavior: auto; }

/* Le hero fait 100vh. Pour une capture d'aperçu on veut voir le hero ET les
   sections qui suivent dans une seule image : on lui rend une hauteur fixe,
   celle d'un écran d'ordinateur portable, et on capture dans une très haute
   fenêtre. Aucun défilement n'est nécessaire — c'est ce qui rendait les
   captures vides, la zone atteinte n'étant jamais repeinte à temps. */
html.in-frame .hero { min-height: 780px; }

/* Les apparitions au défilement partent d'opacity:0 et sont révélées par le JS.
   Une capture d'écran est prise trop tôt pour cela : en aperçu, on neutralise
   l'effet en CSS, donc dès le premier rendu. */
html.in-frame.js .reveal,
html.in-frame.js [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}


/* ═══ MOBILE — respiration et pleine largeur ══════════════════════════════
   Sur téléphone : les textes et boutons occupent toute la largeur
   disponible, les images décoratives sont bornées en hauteur, et les
   cartes empilées gagnent un peu d'air entre elles. */
@media (max-width: 900px) {
  :root { --grid-gap: 28px; }

  .hero__lead, .panel__lead, .footer__desc { max-width: none; }
  .split__media { max-width: none; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__actions .btn--accent { position: relative; }
  .hero__actions .btn--accent .btn__arrow { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); }
  .hero__actions .btn--accent:hover .btn__arrow { transform: translateY(-50%) translateX(3px); }

  .card__media img, .sector__media img { max-height: 220px; object-fit: cover; }
  .sector__media { min-height: 0; }
}