/* =====================================================================
   GOSTORE PRO — feuille de style
   Charte graphique reprise de gostore.be/gostore-b2b.php :
   ardoise #23262d, rouge GoStore #e30613, dégradé radial gris foncé #34373d → #17191d,
   titres Poppins, textes Roboto, gris #a2a2a2 / #d6d5d5.
   Moteur et animations Zidee (principes d'Emil Kowalski :
   ease-out fort pour les entrées, hover réservé aux souris, :active,
   prefers-reduced-motion, pas de scale(0)).
   ===================================================================== */

@font-face { font-family: "Poppins"; src: url("../fonts/poppins-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ardoise: #23262d;        /* bg-extra-medium-slate-blue */
  --ardoise-900: #1f232c;    /* bg-dark-slate-blue */
  --ardoise-950: #191c22;
  --ardoise-700: #2c3038;
  --ardoise-600: #3a3f48;
  --grad-a: #34373d;         /* dégradé radial du fond : gris foncé neutre (le rouge ressort mieux) */
  --grad-b: #17191d;
  --rouge: #e30613;          /* text-parrot-green / btn-dark-gray */
  --rouge-logo: #ec1c24;
  --rouge-700: #b9050f;
  --blanc: #ffffff;
  --gris: #a2a2a2;           /* texte courant gostore.be */
  --gris-clair: #d6d5d5;     /* text-light-gray */
  --gris-fonce: #626262;     /* text-dark-gray */
  --clair: #f4f4f4;
  --encre: #232323;
  --ligne-claire: rgba(255, 255, 255, .12);
  --ligne-sombre: rgba(35, 38, 45, .12);

  --f-titre: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texte: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: clamp(16px, 3.2vw, 48px);
  --radius: 6px;             /* border-radius-6px des cartes gostore.be */
  --radius-l: 14px;
  --hdr-h: 76px;
  --maxw: 1440px;

  --fs-xs: .78rem;
  --fs-sm: .94rem;
  --fs-base: clamp(1rem, .96rem + .2vw, 1.08rem);
  --fs-lead: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 3vw, 4rem);
  --fs-h1: clamp(2.2rem, 1.2rem + 4.2vw, 5.4rem);
  --fs-giant: clamp(3.4rem, 1.6rem + 8vw, 6.5rem);

  --mx: 60%;
  --my: 20%;
}

/* ---------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--ardoise);
  scroll-behavior: auto;
}
/* La barre de défilement garde sa place : rien ne se décale quand le preloader s'ouvre */
html { scrollbar-gutter: stable; }
html.is-loading { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--gris-clair);
  background: var(--ardoise);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Fond "radial-gradient" de gostore.be : le dégradé suit la souris */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(at 60% 20%, var(--grad-a), var(--grad-b));
}
body.fond-dynamique::before { background: radial-gradient(at var(--mx) var(--my), var(--grad-a), var(--grad-b)); }
body { isolation: isolate; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, [role="button"], label, summary { touch-action: manipulation; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: var(--blanc); text-wrap: balance; }
em { font-style: normal; color: var(--rouge); }
strong, b { font-weight: 700; color: var(--blanc); }
::selection { background: var(--rouge); color: var(--blanc); }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--rouge); color: var(--blanc); padding: 10px 16px; border-radius: 99px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.theme-deep { background: rgba(25, 28, 34, .72); }
.theme-solid { background: var(--ardoise); }
.theme-light { background: var(--clair); color: var(--gris-fonce); }
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light strong, .theme-light b { color: var(--ardoise); }
.theme-red { background: var(--rouge); color: var(--blanc); }
.theme-red em { color: var(--ardoise); }

.label { font-family: var(--f-titre); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.label-tiret { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.label-tiret::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.theme-red .label { color: var(--blanc); }
.idx { font-family: var(--f-titre); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .1em; color: var(--gris); white-space: nowrap; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--gris-clair); }
.theme-light .lead { color: var(--gris-fonce); }
.h-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; margin-right: .15em; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------- Boutons */
.btn-pill {
  --bg: var(--rouge); --fg: var(--blanc);
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 8px 0 24px;
  border-radius: 99px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-titre); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(227, 6, 19, .7);
  user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn-pill:active { transform: scale(.97); }
.btn-pill.btn-light { --bg: var(--blanc); --fg: var(--ardoise); box-shadow: none; }
.btn-pill.btn-dark { --bg: var(--ardoise); --fg: var(--blanc); box-shadow: none; }
.btn-xl { height: 64px; padding: 0 10px 0 30px; font-size: .88rem; }
.btn-plus {
  position: relative; width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 300ms var(--ease-out);
}
.btn-xl .btn-plus { width: 46px; height: 46px; }
.btn-plus::before, .btn-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40%; height: 2px; background: var(--bg); border-radius: 2px;
  transform: translate(-50%, -50%);
}
.btn-plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Texte qui défile au survol */
.btn-marquee-txt { position: relative; display: block; overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .btn-pill:hover { --bg: var(--ardoise); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
  .theme-deep .btn-pill:hover, .hdr .btn-pill:hover { --bg: var(--blanc); --fg: var(--ardoise); }
  .btn-pill.btn-light:hover { --bg: var(--rouge); --fg: var(--blanc); }
  .btn-pill:hover .btn-plus { transform: rotate(90deg); }
  .btn-marquee:hover .btn-marquee-txt { color: transparent; }
  .btn-marquee:hover .btn-marquee-txt::after {
    content: attr(data-text) "\00a0\00a0✦\00a0\00a0" attr(data-text) "\00a0\00a0✦\00a0\00a0" attr(data-text) "\00a0\00a0✦\00a0\00a0";
    position: absolute; left: 0; top: 0;
    color: var(--fg);
    white-space: nowrap;
    animation: btn-defile 3.2s linear infinite;
  }
}
@keyframes btn-defile { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px;
  border-radius: 99px; border: 1.5px solid currentColor; color: var(--blanc);
  font-family: var(--f-titre); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  user-select: none; -webkit-user-select: none; white-space: nowrap;
}
.btn-ghost .ico { width: 18px; height: 18px; }
.btn-ghost:active { transform: scale(.97); }
.btn-ghost-xl { height: 64px; padding: 0 30px; }
.theme-light .btn-ghost { color: var(--ardoise); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background: var(--blanc); color: var(--ardoise); border-color: var(--blanc); }
  .theme-light .btn-ghost:hover { background: var(--ardoise); color: var(--blanc); border-color: var(--ardoise); }
  .theme-red .btn-ghost:hover { color: var(--rouge); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-titre); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blanc);
}
.link-arrow::after { content: "→"; color: var(--rouge); transition: transform 200ms var(--ease-out); }
.theme-light .link-arrow { color: var(--ardoise); }
.theme-red .link-arrow::after { color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover::after { transform: translateX(5px); } }

/* ---------------------------------------------------------- Preloader (logo GoStore + rideau en deux, comme gostore.be) */
.loader { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; }
html:not(.js) .loader { display: none; }
.loader-half {
  position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--ardoise);
  will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
}
.loader-l { left: 0; }
.loader-r { right: 0; }
.loader-stage { position: relative; z-index: 2; width: min(200px, 42vw); will-change: opacity, transform; }
.loader-logo { width: 100%; height: auto; animation: clignoter 1.8s infinite; }
/* Pages suivantes : même taille de logo que le rideau de transition (aucun saut entre les deux) */
.loader.is-short .loader-stage { width: 120px; }
/* Ouverture : animée en CSS (transform/opacity = compositeur), indépendante du travail JavaScript de la page */
.loader.is-open .loader-stage { opacity: 0; transform: scale(.96); transition: opacity 260ms ease-out, transform 260ms ease-out; }
.loader.is-open .loader-bar { opacity: 0; transition: opacity 200ms ease-out; }
.loader.is-open .loader-l { transform: translate3d(-101%, 0, 0); transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1) 120ms; }
.loader.is-open .loader-r { transform: translate3d(101%, 0, 0); transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1) 120ms; }
@keyframes clignoter { 0% { opacity: .8; } 40% { opacity: .2; } 100% { opacity: .8; } }
.loader-bar {
  will-change: opacity;
  position: absolute; z-index: 2; left: 50%; bottom: max(9svh, 40px);
  width: min(200px, 50vw); height: 2px; transform: translateX(-50%);
  background: var(--ligne-claire); border-radius: 2px; overflow: hidden;
}
.loader-bar span {
  position: absolute; inset: 0; background: var(--rouge);
  transform-origin: left; transform: scaleX(0);
  animation: charge 2.4s var(--ease-out) forwards;
}
.loader.is-short .loader-bar { display: none; }
.loader.is-done .loader-bar span { animation: none; transform: scaleX(1); transition: transform 300ms var(--ease-out); }
@keyframes charge { to { transform: scaleX(.88); } }
.gostore-clignote { animation: clignoter 1.8s infinite; }

/* Rideau des transitions entre pages */
.curtain {
  position: fixed; inset: 0; z-index: 890;
  background: var(--ardoise);
  transform: translateY(101%);
  pointer-events: none;
  display: grid; place-items: center;
}
.curtain-logo { width: 120px; opacity: 0; }
.curtain { will-change: transform; }
html.is-leaving .curtain { transform: translateY(0); transition: transform 500ms var(--ease-drawer); }
html.is-leaving .curtain-logo { opacity: 1; transition: opacity 300ms ease 200ms; animation: clignoter 1.8s infinite; }

/* ---------------------------------------------------------- Curseur */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.js .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 950; pointer-events: none; }
  .cursor-dot {
    position: absolute; left: -7px; top: -7px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--rouge);
    transition: transform 280ms var(--ease-out), background-color 200ms ease, opacity 200ms ease;
  }
  .cursor-label {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.9);
    font-family: var(--f-titre); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--blanc); opacity: 0; white-space: nowrap;
    transition: opacity 200ms ease, transform 280ms var(--ease-out);
  }
  .cursor.is-link .cursor-dot { transform: scale(2.6); opacity: .35; }
  .cursor.is-label .cursor-dot { transform: scale(6.2); opacity: 1; }
  .cursor.is-label .cursor-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .cursor.is-hidden .cursor-dot { transform: scale(.4); opacity: 0; }
}

/* ---------------------------------------------------------- Header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 800;
  height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  color: var(--blanc);
  transition: transform 400ms var(--ease-out);
}
.hdr::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(35, 38, 45, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 300ms ease;
}
.hdr::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -2; pointer-events: none;
  background: linear-gradient(rgba(20,22,27,.55), rgba(20,22,27,0));
  transition: opacity 300ms ease;
}
.hdr.is-solid::after { opacity: 1; box-shadow: 0 1px 0 var(--ligne-claire); }
.hdr.is-solid::before { opacity: 0; }
.hdr.is-hidden { transform: translateY(-100%); }
html.menu-open .hdr { transform: none; }
html.menu-open .hdr::after { opacity: 0; }

.hdr-logo { display: flex; align-items: center; gap: 10px; justify-self: start; }
.hdr-logo .logo-svg { width: clamp(140px, 11vw, 190px); height: auto; }
.hdr-pro {
  font-family: var(--f-titre); font-size: .62rem; font-weight: 700; letter-spacing: .14em; line-height: 1;
  padding: 5px 7px 4px; border-radius: 4px; background: var(--rouge); color: var(--blanc); transform: translateY(-4px);
}
.hdr-nav { display: flex; justify-content: center; }
.hdr-link { position: relative; font-family: var(--f-titre); font-size: .86rem; font-weight: 500; padding: 6px 0; white-space: nowrap; }
.hdr-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rouge); transform: scaleX(0); transform-origin: right;
  transition: transform 300ms var(--ease-out);
}
.hdr-link.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .hdr-link:hover::after { transform: scaleX(1); transform-origin: left; } }
.hdr-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.hdr-tel { display: flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.hdr-tel-ico { width: 38px; height: 38px; transition: transform 200ms var(--ease-out); }
.hdr-tel-txt { display: flex; flex-direction: column; line-height: 1.2; }
.hdr-tel-txt small { font-weight: 400; font-size: .72rem; color: var(--gris); letter-spacing: .02em; }
.hdr-tel:active .hdr-tel-ico { transform: scale(.94); }

.burger { display: none; width: 46px; height: 46px; border-radius: 50%; position: relative; }
.burger span {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 300ms var(--ease-out);
}
.burger span:first-child { top: 19px; }
.burger span:last-child { top: 26px; }
html.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
html.menu-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Navigation : sous-menus */
.nav-list { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.sub-toggle { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.sub-toggle svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 200ms var(--ease-out); }
.nav-item.is-open .sub-toggle svg { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 320px;
  list-style: none; margin: 0; padding: 10px;
  background: var(--blanc); color: var(--ardoise);
  border-radius: 10px; border-top: 3px solid var(--rouge);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
  transform-origin: 30px 0;
  opacity: 0; transform: scale(.97) translateY(-4px); visibility: hidden;
  transition: opacity 150ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.sub-2col { display: grid; grid-template-columns: 1fr 1fr; min-width: 600px; column-gap: 4px; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }
.nav-item.is-open > .sub { opacity: 1; transform: none; visibility: visible; transition: opacity 150ms ease, transform 200ms var(--ease-out); }
.sub a { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 6px; transition: background-color 150ms ease; }
.sub a span { font-family: var(--f-titre); font-weight: 600; font-size: .9rem; line-height: 1.3; }
.sub a small { font-size: .76rem; color: var(--gris-fonce); line-height: 1.35; }
.sub a[aria-current="page"] { background: #f1f1f1; }
.sub a[aria-current="page"] span { color: var(--rouge); }
@media (hover: hover) and (pointer: fine) { .sub a:hover { background: #f3f3f3; } .sub a:hover span { color: var(--rouge); } }

/* Menu plein écran */
.mnav {
  position: fixed; inset: 0; z-index: 790;
  background: var(--ardoise); color: var(--blanc);
  padding: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 20px) var(--gutter) calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 600ms var(--ease-drawer), visibility 0s linear 600ms;
  overscroll-behavior: contain; overflow-y: auto;
}
html.menu-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 600ms var(--ease-drawer); }
.mnav-links { display: flex; flex-direction: column; gap: 4px; }
.mnav-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--f-titre); font-size: clamp(1.7rem, 7vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
  opacity: 0; transform: translateY(24px);
  transition: opacity 300ms ease, transform 500ms var(--ease-out);
}
html.menu-open .mnav-link { opacity: 1; transform: none; transition-delay: calc(150ms + var(--i) * 60ms); }
.mnav-link.is-active .mnav-label { color: var(--rouge); }
.mnav-num { font-size: .78rem; font-weight: 600; color: var(--rouge); letter-spacing: .1em; }
.mnav-group { opacity: 0; transform: translateY(24px); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
html.menu-open .mnav-group { opacity: 1; transform: none; transition-delay: calc(150ms + var(--i) * 60ms); }
.mnav-group .mnav-link { opacity: 1; transform: none; }
.mnav-sub { list-style: none; margin: 4px 0 12px 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mnav-sub a { font-size: .92rem; color: var(--gris-clair); }
.mnav-foot {
  display: grid; grid-template-columns: 1fr auto; gap: 22px 18px; align-items: end; margin-top: 30px;
  opacity: 0; transform: translateY(16px); transition: opacity 300ms ease, transform 500ms var(--ease-out);
}
html.menu-open .mnav-foot { opacity: 1; transform: none; transition-delay: 420ms; }
.mnav-cta { grid-column: 1 / -1; justify-self: start; height: 54px; }
.mnav-contact { display: flex; flex-direction: column; gap: 2px; font-family: var(--f-titre); font-weight: 500; }
.mnav-contact .label { margin-bottom: 4px; }
.mnav-social { display: flex; gap: 10px; }
.mnav-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ligne-claire); }
@media (min-width: 1181px) { .mnav { display: none; } }

/* ---------------------------------------------------------- HERO accueil : Revolution Slider (gostore.be) */
.hero-rev { position: relative; z-index: 0; isolation: isolate; background: #1c1c1c; } /* les calques Revolution (z-index 999) restent sous l'en-tête et le menu */
.hero-rev .rev_slider_wrapper { background: #1c1c1c; }

/* Voile de lisibilité : plus sombre à gauche, derrière les titres et sous-titres */
.hero-rev .rev_slider .tp-bgimg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,22,27,.72) 0%, rgba(20,22,27,.5) 38%, rgba(20,22,27,.12) 72%, rgba(20,22,27,0) 100%),
    linear-gradient(180deg, rgba(20,22,27,.45), rgba(20,22,27,0) 30%, rgba(20,22,27,.2));
}
@media (max-width: 778px) { .hero-rev .rev_slider .tp-bgimg::after { background: linear-gradient(180deg, rgba(20,22,27,.5), rgba(20,22,27,.45) 50%, rgba(20,22,27,.3)); } }
.home-architecture .architecture-title { font-family: var(--f-titre) !important; font-weight: 600 !important; color: var(--blanc); }
.home-architecture .architecture-btn {
  font-family: var(--f-titre) !important; font-weight: 500 !important; color: var(--blanc) !important; letter-spacing: .04em;
  text-transform: uppercase; padding: 0 0 4px !important; border-bottom: 1px solid rgba(255,255,255,.6) !important;
  transition: border-color 200ms ease, color 200ms ease !important;
}
/* Tablette : le sous-titre passe sur 2 lignes au lieu de déborder de l'écran */
@media (min-width: 779px) and (max-width: 1100px) {
  .home-architecture .architecture-btn { white-space: normal !important; width: min(560px, 58vw) !important; line-height: 1.5 !important; }
}
@media (max-width: 778px) {
  .home-architecture .architecture-btn { white-space: normal !important; width: 86vw !important; max-width: 420px; text-align: center !important; line-height: 1.5 !important; }
  .home-architecture .architecture-title { text-align: center !important; }
}
.home-architecture .architecture-btn:hover { color: var(--blanc) !important; border-color: var(--rouge) !important; }
.home-architecture .metis.tparrows { width: 67px; height: 67px; background: var(--blanc); }
.home-architecture .metis.tparrows::before {
  content: "" !important; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: var(--ardoise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home-architecture .tparrows.tp-leftarrow::before { transform: scaleX(-1); }
.home-architecture .tparrows.tp-rightarrow { transform: matrix(1, 0, 0, 1, -67, -327) !important; }
.home-architecture .tparrows.tp-leftarrow { transform: matrix(1, 0, 0, 1, -67, -260) !important; }
.home-architecture .tparrows:hover { background: var(--ardoise) !important; }
.home-architecture .tparrows:hover::before { background: var(--blanc); }
.hero-down {
  position: absolute; left: 50%; bottom: 28px; z-index: 30; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--blanc); color: var(--ardoise);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: rebond 2.4s var(--ease-in-out) infinite;
}
.hero-down .ico { width: 18px; height: 18px; transform: rotate(90deg); }
@keyframes rebond { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* Points rouges décoratifs (gostore.be) */
.points { position: absolute; inset: 0; pointer-events: none; z-index: 25; }
.points-hero { height: calc(100svh - 100px); }
.point { position: absolute; width: 50px; height: 50px; }
.points-bloc { z-index: 0; }
html.js .point { opacity: 0; }
@media (max-width: 860px) { .points { display: none; } }

/* Bloc en surimpression sous le slider */
.overlap { position: relative; z-index: 30; display: flex; justify-content: flex-end; }
.overlap-box {
  width: min(100%, 860px); margin-top: -110px;
  background: var(--ardoise); padding: clamp(28px, 3vw, 46px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; gap: 6px; font-family: var(--f-titre); text-transform: uppercase;
}
.overlap-t { color: var(--rouge); font-weight: 500; font-size: clamp(1rem, .8rem + .7vw, 1.38rem); letter-spacing: .02em; }
.overlap-s { color: var(--blanc); font-size: clamp(.9rem, .8rem + .35vw, 1.1rem); }

/* ---------------------------------------------------------- Sections communes */
.section { position: relative; padding-block: clamp(70px, 9vw, 140px); }
.section-tight { padding-block: clamp(50px, 6vw, 90px); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head > div { min-width: 0; }
.sec-title { font-size: var(--fs-h2); }
.sec-title-sm { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); letter-spacing: -.02em; }
.sec-intro { max-width: 46em; margin: -10px 0 clamp(28px, 3vw, 44px); color: var(--gris-clair); }
.sec-more { margin-top: clamp(26px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--gris); }
.split2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.note { margin-top: 18px; font-size: .85rem; color: var(--gris); max-width: 52em; }

/* À propos (accueil) */
.about { padding-top: clamp(60px, 8vw, 120px); }
.about-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.xp { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: clamp(26px, 3vw, 46px) clamp(30px, 3.4vw, 54px); }
.xp-b { position: absolute; top: 0; bottom: 0; width: 60px; border: 10px solid var(--rouge); }
.xp-bl { left: 0; border-right: 0; }
.xp-br { right: 0; border-left: 0; }
.xp-n { font-family: var(--f-titre); font-size: clamp(4.5rem, 3rem + 5vw, 8rem); font-weight: 600; line-height: .9; letter-spacing: -5px; color: var(--rouge); }
.xp-t { font-family: var(--f-titre); color: var(--blanc); font-size: 1rem; line-height: 1.5; }
.about-h1 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.8rem); }
.about-sub { margin-top: 18px; font-family: var(--f-titre); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.about-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gutter); align-items: end; margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--ligne-claire); }
.about-text { font-family: var(--f-titre); font-size: clamp(1.15rem, .9rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: var(--blanc); }
.about-text .w { opacity: .2; }
html:not(.js) .about-text .w { opacity: 1; }
.about-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about-foot .about-btns { margin-top: 0; justify-content: flex-end; }

/* Chiffres */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.stat { border-top: 2px solid var(--rouge); padding-top: 18px; }
.stat-n { font-family: var(--f-titre); font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--blanc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-l { margin-top: 10px; font-size: var(--fs-sm); color: var(--gris-clair); }
.stats-note { margin-top: clamp(26px, 3vw, 40px); font-family: var(--f-titre); font-size: var(--fs-lead); color: var(--gris-clair); }
.stats-note strong { color: var(--rouge); }

/* Bloc rouge */
.cibles { overflow: hidden; }
.cibles-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.cibles-t { display: flex; flex-direction: column; text-align: right; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.cibles-t strong { font-weight: 700; }
.cibles-atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.atout img { width: 70px; height: 70px; margin-bottom: 14px; }
.atout h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; margin-bottom: 8px; }
.atout p { color: rgba(255,255,255,.92); font-size: var(--fs-sm); line-height: 1.65; }

/* Secteurs : grands titres + photo collante */
.services-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gutter); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.svc-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.svc-list { display: flex; flex-direction: column; }
.svc { padding-block: clamp(22px, 4svh, 44px); border-top: 1px solid var(--ligne-claire); opacity: .32; transition: opacity 400ms ease; }
.svc:last-child { border-bottom: 1px solid var(--ligne-claire); }
.svc.is-active { opacity: 1; }
.svc-head { display: flex; align-items: baseline; gap: 18px; }
.svc-num { font-family: var(--f-titre); font-size: var(--fs-xs); font-weight: 600; color: var(--rouge); letter-spacing: .1em; }
.svc-title { font-size: clamp(1.5rem, 1rem + 2vw, 2.8rem); }
.svc-body { margin-top: 12px; padding-left: 38px; max-width: 34em; }
.svc-body ul { margin: 14px 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-body li { border: 1px solid var(--ligne-claire); border-radius: 99px; padding: 4px 14px; font-size: .8rem; color: var(--gris-clair); }
.svc-media-inline { display: none; }
.svc-stage { position: sticky; top: calc(var(--hdr-h) + 4svh); aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--ardoise-900); }
.svc-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 600ms ease, transform 1200ms var(--ease-out); }
.svc-stage > .is-active { opacity: 1; transform: none; }

/* Bandeau défilant */
.band { padding-block: clamp(22px, 3.4vw, 44px); overflow: hidden; background: var(--ardoise); border-block: 1px solid var(--ligne-claire); }
.band-track { display: flex; width: max-content; will-change: transform; margin: 0; padding: 0; list-style: none; }
.band-item {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); padding-right: clamp(18px, 3vw, 42px);
  font-family: var(--f-titre); font-size: clamp(1.8rem, 1rem + 3.4vw, 4.4rem); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; color: var(--blanc);
}
.band-item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px var(--gris-clair); }
.band-star { color: var(--rouge); -webkit-text-stroke: 0; font-size: .6em; }

/* Cartes */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.fgrid-3 { grid-template-columns: repeat(3, 1fr); }
.card { display: block; scroll-snap-align: start; }
.card-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--ardoise-900); transform: translateZ(0); }
.card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(31,35,44,.6)); pointer-events: none; }
.card-media > img, .card-media > .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card-tags { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px;
  background: var(--blanc); color: var(--ardoise);
  font-family: var(--f-titre); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.chip-ico { width: 12px; height: 12px; color: var(--rouge); }
.card-title { margin-top: 16px; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); letter-spacing: -.02em; }
.card-text { margin: 6px 0 12px; font-size: var(--fs-sm); color: var(--gris); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ligne-claire); font-size: .82rem; color: var(--gris); }
.fcard-more {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: var(--rouge); color: var(--blanc); min-height: 260px;
}
.fcard-more .label { color: var(--blanc); }
.fcard-more strong { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.fcard-more .link-arrow::after { color: var(--blanc); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media > img { transform: scale(1.05); }
  .card:hover .card-title { color: var(--rouge); }
  .fcard-more { transition: background-color 200ms ease; }
  .fcard-more:hover { background: var(--rouge-700); }
}
.card-title { transition: color 200ms ease; }

/* Normes & ROI (accueil) */
.roi-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.roi-list li { padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--ligne-claire); font-size: .88rem; color: var(--gris-clair); }
.roi-list b { display: block; font-family: var(--f-titre); font-size: clamp(1.4rem, 1rem + 1vw, 2rem); color: var(--rouge); letter-spacing: -.02em; }

/* Réalisations (slider) */
.works-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px);
  gap: clamp(14px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 20px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.works-track::-webkit-scrollbar { display: none; }
.works-track .card-media { aspect-ratio: 4 / 5; }
.works-nav { display: flex; gap: 10px; }
.works-nav button {
  width: 52px; height: 52px; border-radius: 50%; background: var(--blanc); color: var(--ardoise);
  display: grid; place-items: center; font-size: 1.1rem;
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease, color 200ms ease;
}
.works-nav button:active { transform: scale(.94); }
.works-nav button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .works-nav button:not(:disabled):hover { background: var(--rouge); color: var(--blanc); } }

/* Étapes */
ol.steps { list-style: none; margin: 0; padding: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.step {
  position: relative; min-height: 250px;
  padding: clamp(22px, 2.2vw, 32px); border-radius: var(--radius);
  background: rgba(255,255,255,.035); border: 1px solid var(--ligne-claire);
  display: flex; flex-direction: column; gap: 22px;
}
.step-n { font-family: var(--f-titre); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); font-weight: 600; line-height: 1; color: var(--rouge); letter-spacing: -.04em; }
.step h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); margin-bottom: 8px; }
.step p { font-size: var(--fs-sm); color: var(--gris); }
.theme-light .step { background: var(--blanc); border-color: var(--ligne-sombre); }
.theme-light .step p { color: var(--gris-fonce); }

/* Logos clients (bandeau défilant) */
.logos { overflow: hidden; }
.logos-head { text-align: center; margin-bottom: clamp(26px, 3vw, 44px); }
.logos-head .sec-title { display: inline-block; }
.logos-head .sec-intro { margin: 14px auto 0; }
.logos-band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-item { flex: none; width: clamp(160px, 16vw, 250px); height: 110px; margin-right: clamp(20px, 3vw, 56px); display: grid; place-items: center; }
.logo-item img { max-width: 100%; max-height: 82px; width: auto; height: auto; transition: transform 300ms var(--ease-out); } /* couleurs d'origine des logos */
@media (hover: hover) and (pointer: fine) { .logo-item:hover img { transform: scale(1.05); } }
html:not(.js) .logos-track { flex-wrap: wrap; justify-content: center; width: auto; }

/* Avis Google */
.avis .sec-head { margin-bottom: 20px; }
.avis-centre .sec-head { justify-content: center; text-align: center; }
.avis-centre .sec-head .idx { display: none; }
.avis-widget { width: 100%; padding-inline: clamp(16px, 3.6vw, 72px); }
.avis [class^="elfsight-app"] { min-height: 160px; width: 100%; }

/* FAQ + accordéons */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--hdr-h) + 30px); display: flex; flex-direction: column; gap: 18px; }
.faq-head p { color: var(--gris-clair); }
.acc { display: flex; flex-direction: column; gap: 10px; }
.acc-item { background: var(--blanc); border-radius: 5px; box-shadow: 0 6px 22px -14px rgba(0,0,0,.6); color: var(--gris-fonce); }
.acc-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-family: var(--f-titre); font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--encre);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f2f2f2; transition: transform 300ms var(--ease-out), background-color 200ms ease; }
.acc-item summary i::before, .acc-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--rouge); transform: translate(-50%, -50%); border-radius: 2px; }
.acc-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 300ms var(--ease-out); }
.acc-item[open]:not(.is-closing) summary i { background: var(--rouge); }
.acc-item[open]:not(.is-closing) summary i::before { background: var(--blanc); }
.acc-item[open]:not(.is-closing) summary i::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--blanc); }
.acc-item[open]:not(.is-closing) summary { color: var(--rouge); }
.acc-body { overflow: hidden; transition: height 320ms var(--ease-out); }
.acc-body > div { padding: 0 22px 20px; font-size: .96rem; line-height: 1.7; }
.acc-body p + p { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .acc-item summary:hover { color: var(--rouge); } }

/* Parallaxe "GoStore votre partenaire B2B" */
.parallax { position: relative; height: clamp(380px, 60svh, 640px); overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--gutter); isolation: isolate; }
.parallax-media { position: absolute; inset: -12% 0; z-index: -2; }
.parallax-media img { width: 100%; height: 100%; object-fit: cover; }
.parallax::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(25,28,34,.2), rgba(25,28,34,.7)); }
.parallax-t { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--f-titre); font-weight: 600; font-size: var(--fs-giant); line-height: .95; letter-spacing: -.05em; color: var(--blanc); text-align: right; }

/* Bloc final "Conseil personnalisé sans engagement" */
.cta { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(80px, 10vw, 150px); }
.cta-bg { position: absolute; inset: -12% 0; z-index: -2; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(25,28,34,.95) 20%, rgba(25,28,34,.75)); }
.cta-grid { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 70px); align-items: center; }
.cta-grid > * { min-width: 0; }
.cta-logo { width: clamp(110px, 12vw, 190px); }
.cta-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); }
.cta-sub { margin-top: 16px; max-width: 36em; color: var(--gris-clair); }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cta-actions .btn-ghost { justify-content: center; }

/* ---------------------------------------------------------- Pied de page */
.ftr { background: var(--ardoise); color: var(--gris); padding: clamp(60px, 7vw, 100px) 0 calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-sm); line-height: 1.75; }
.ftr-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: var(--gutter); align-items: start; }
.ftr-h { font-family: var(--f-titre); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--blanc); margin-bottom: 12px; line-height: 1.3; }
.ftr-h-gap { margin-top: 32px; }
.ftr-logo { display: block; width: min(100%, 270px); margin-bottom: 18px; }
.ftr-logo .logo-svg { width: 100%; height: auto; }
.ftr-sign { color: var(--gris-clair); margin-bottom: 20px; }
.ftr-sr { margin-bottom: 18px; }
.ftr-sr-t { display: flex; align-items: center; gap: 6px; font-family: var(--f-titre); font-weight: 500; color: var(--blanc); }
.ftr-go { width: 26px; height: 26px; margin-left: -4px; }
.ftr-tva { margin-top: 6px; }
.ftr-list { list-style: none; margin: 0; padding: 0; }
.ftr a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .ftr a:hover { color: var(--rouge); } }
.ftr-badge { display: inline-block; background: var(--rouge); color: var(--blanc); font-family: var(--f-titre); font-size: .8rem; padding: 3px 16px; margin-bottom: 6px; }
.ftr-note { margin-top: 10px; }
.ftr-akena { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; font-family: var(--f-titre); font-weight: 500; color: var(--blanc); }
.ftr-akena .akena { width: 89px; height: auto; }
.ftr-mails { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ftr-mails li { display: flex; flex-direction: column; line-height: 1.4; }
.ftr-mails strong { font-weight: 500; font-family: var(--f-titre); }
.ftr-mails strong::before { content: "•"; color: var(--rouge-logo); margin-right: 6px; }
.ftr-social { display: flex; flex-wrap: wrap; gap: 8px; }
.ftr-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--blanc); transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .ftr-social a:hover { background: var(--rouge); color: var(--blanc); } }
.ftr-bottom {
  display: grid; grid-template-columns: 76px 1fr 76px; gap: 20px; align-items: center;
  margin-top: clamp(40px, 5vw, 70px); padding-top: 30px; border-top: 1px solid var(--ligne-claire);
  font-family: var(--f-titre); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; text-align: center;
}
.ftr-point img { width: 76px; height: 76px; }
.zidee {
  display: inline-block; font-family: Arial, sans-serif; font-weight: 900; letter-spacing: 1px; font-size: 14px;
  background: linear-gradient(90deg, #96301e 0%, #c7c958 10%, #1c932e 20%, #4aa5a8 30%, #595aa5 40%, #541043 50%, #1c3a3f 60%, #52afb7 70%, #4eaa4c 80%, #96301e 90%, #c7c958 100%);
  background-size: 1000% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: arc-en-ciel 10s linear infinite;
}
@keyframes arc-en-ciel { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* Pied de page sur ordinateur : mêmes proportions que le footer de gostore.be
   (pleine largeur, 4 colonnes égales, titres Poppins 22 px, textes 15 px / 30 px, icônes 54 px) */
@media (min-width: 1181px) {
  .ftr { padding: 6vw 0 0; font-size: 15px; line-height: 30px; }
  .ftr .wrap { max-width: none; padding-inline: clamp(40px, 5.5vw, 105px); }
  .ftr-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .ftr-logo { width: 270px; margin-bottom: 25px; }
  .ftr .ftr-sign { margin-bottom: 30px; max-width: 24em; }
  .ftr .ftr-tva { margin-top: 0; }
  .ftr-h, h2.ftr-h { font-size: 22px; line-height: 30px; letter-spacing: 0; margin-bottom: 8px; }
  .ftr-h-gap { margin-top: 40px; }
  .ftr-sr { margin-bottom: 30px; }
  .ftr-sr-t { font-size: 22px; line-height: 30px; margin-bottom: 2px; }
  .ftr-go { width: 28px; height: 28px; }
  .ftr-col p { margin-bottom: 0; }
  .ftr-badge { font-size: 14px; line-height: 30px; padding: 0 18px; margin: 4px 0 6px; }
  .ftr .ftr-note { margin-top: 30px; }
  .ftr-akena { margin-top: 30px; gap: 4px; font-size: 16px; }
  .ftr-mails { gap: 20px; margin-top: 20px; }
  .ftr-mails li { line-height: 30px; }
  .ftr-mails strong { font-family: var(--f-texte); font-weight: 600; color: var(--blanc); }
  .ftr-social { gap: 12px; margin-top: 10px; }
  .ftr-social a { width: 54px; height: 54px; }
  .ftr-social .ico { width: 24px; height: 24px; }
  .ftr-bottom { margin-top: 6vw; padding: 70px 0; font-size: 12px; line-height: 26px; }
}

/* Barre d'actions mobile (next step navigation de gostore.be) */
.nextstep { display: none; }
@media (max-width: 860px) {
  .nextstep {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 785;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(35, 38, 45, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ligne-claire);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .nextstep a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--f-titre); font-size: .64rem; line-height: 1.2; text-align: center; color: var(--blanc); }
  .nextstep a:active { transform: scale(.96); }
  .ns-ico { width: 30px; height: 30px; }
  .ftr { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------- Pages intérieures : en-tête */
.phero { position: relative; min-height: 76svh; display: grid; align-items: end; padding: calc(var(--hdr-h) + 60px) 0 clamp(44px, 6vw, 84px); overflow: hidden; isolation: isolate; }
.phero-bg { position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(25,28,34,.94) 0%, rgba(25,28,34,.7) 55%, rgba(25,28,34,.35) 100%), linear-gradient(0deg, rgba(25,28,34,.7), rgba(25,28,34,0) 40%); }
.phero-short { min-height: 0; }
.phero-short::after { display: none; }
.phero-title { font-size: var(--fs-h1); max-width: 15em; }
.phero-text { margin-top: 24px; max-width: 38em; font-size: var(--fs-lead); color: var(--gris-clair); }
.phero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.phero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.phero-chips .chip { height: 32px; background: rgba(255,255,255,.08); color: var(--blanc); border: 1px solid var(--ligne-claire); font-size: .68rem; }

/* Fil d'Ariane */
.ariane ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .8rem; color: var(--gris); }
.ariane li + li::before { content: "/"; margin: 0 10px; opacity: .5; }
.ariane [aria-current] { color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .ariane a:hover { color: var(--rouge); } }

/* Enjeux / valeurs */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.value { padding: clamp(22px, 2.2vw, 32px); border-radius: var(--radius); background: rgba(255,255,255,.035); border: 1px solid var(--ligne-claire); display: flex; flex-direction: column; gap: 14px; }
.value-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--rouge); color: var(--blanc); }
.value-ico .ico { width: 24px; height: 24px; }
.value h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.value p { font-size: var(--fs-sm); color: var(--gris); }

/* Liste cochée */
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checks li { position: relative; padding: 14px 16px 14px 48px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--ligne-claire); font-size: .94rem; color: var(--blanc); line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--rouge); }
.checks li::after { content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 10px; margin-top: -7px; border: solid var(--blanc); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks-1 { grid-template-columns: 1fr; }
.theme-light .checks li { background: var(--blanc); border-color: var(--ligne-sombre); color: var(--ardoise); }

/* Pastilles de liens */
.flinks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flinks a { display: inline-block; padding: 6px 14px; border-radius: 99px; font-size: .8rem; font-family: var(--f-titre); font-weight: 500; background: rgba(255,255,255,.08); color: var(--blanc); border: 1px solid var(--ligne-claire); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.flinks a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .flinks a:hover { background: var(--rouge); border-color: var(--rouge); } }
.tchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tchips a { display: inline-flex; flex-direction: column; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--ligne-claire); transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.tchips a:active { transform: scale(.97); }
.tchips span { font-family: var(--f-titre); font-weight: 600; color: var(--blanc); }
.tchips small { font-size: .74rem; color: var(--gris); }
@media (hover: hover) and (pointer: fine) { .tchips a:hover { border-color: var(--rouge); background: rgba(227,6,19,.08); } }

/* Espaces / cas d'usage */
.usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.usecase { padding: clamp(22px, 2.4vw, 34px); border-radius: var(--radius); background: rgba(255,255,255,.035); border: 1px solid var(--ligne-claire); }
.usecase-n { font-family: var(--f-titre); font-weight: 600; color: var(--rouge); font-size: .8rem; letter-spacing: .1em; }
.usecase h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); margin: 6px 0 10px; }
.usecase p { color: var(--gris-clair); font-size: var(--fs-sm); }

/* Encadré chiffre */
.chiffre-box { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 50px); align-items: center; padding: clamp(26px, 3vw, 48px); border-radius: var(--radius-l); background: var(--rouge); color: var(--blanc); }
.chiffre-n { font-family: var(--f-titre); font-weight: 700; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.chiffre-box p { font-family: var(--f-titre); font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); line-height: 1.35; font-weight: 500; }
.chiffre-box small { display: block; margin-top: 8px; font-family: var(--f-texte); font-size: .82rem; opacity: .85; font-weight: 400; }
/* Dans une colonne étroite (page Normes & ROI) : le chiffre au-dessus, le texte en pleine largeur dessous */
.faq-head .chiffre-box { grid-template-columns: 1fr; gap: 14px; align-items: start; }
.faq-head .chiffre-n { font-size: clamp(3rem, 2rem + 3vw, 5rem); }
.faq-head .chiffre-box p { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }

/* Galerie de photos */
.split-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ardoise-900); }
.split-media > img { width: 100%; height: 100%; object-fit: cover; }
.duo-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.duo-photos .split-media { aspect-ratio: 4 / 5; }
.duo-photos .split-media:nth-child(2) { margin-top: clamp(30px, 5vw, 70px); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.gallery figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.gallery figure:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; font-size: .78rem; color: var(--blanc); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
@media (hover: hover) and (pointer: fine) { .gallery figure:hover img { transform: scale(1.05); } }

/* Produits (gamme PRO) */
.prod { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; padding-block: clamp(50px, 6vw, 90px); border-top: 1px solid var(--ligne-claire); scroll-margin-top: calc(var(--hdr-h) + 10px); }
.prod:nth-child(even) .prod-media { order: 2; }
.prod-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; }
.prod-n { font-family: var(--f-titre); font-weight: 600; color: var(--rouge); letter-spacing: .1em; font-size: .8rem; }
.prod h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); margin: 8px 0 6px; }
.prod-acc { font-family: var(--f-titre); color: var(--blanc); font-size: var(--fs-lead); margin-bottom: 16px; }
.prod p.prod-txt { color: var(--gris-clair); }
.prod .phero-chips .chip { background: var(--rouge); border-color: var(--rouge); }
.prod .checks { margin-top: 20px; grid-template-columns: 1fr; }
.prod-ideal { margin-top: 20px; font-size: .85rem; color: var(--gris); }
.prod-ideal .flinks { margin-top: 8px; }
.prod-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Simulateur ROI */
.simu { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--blanc); color: var(--gris-fonce); box-shadow: 0 30px 80px -40px rgba(0,0,0,.7); }
.simu-in { padding: clamp(26px, 3.4vw, 54px); display: flex; flex-direction: column; gap: 30px; }
.simu-step { font-family: var(--f-titre); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); margin-bottom: 14px; display: block; }
.simu-step span { color: var(--rouge); }
.simu-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; border: 0; padding: 0; margin: 0; }
.simu-types label { position: relative; }
.simu-types input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.simu-types span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #e2e2e2; font-family: var(--f-titre); font-weight: 600; color: var(--ardoise); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; text-align: center; }
.simu-types input:checked + span { background: var(--ardoise); border-color: var(--ardoise); color: var(--blanc); }
.simu-types input:focus-visible + span { outline: 2px solid var(--rouge); outline-offset: 2px; }
.simu-surf { display: flex; align-items: baseline; justify-content: space-between; }
.simu-val { font-family: var(--f-titre); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 600; color: var(--ardoise); letter-spacing: -.03em; line-height: 1; }
.simu-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 18px 0 8px; background: linear-gradient(90deg, var(--rouge) var(--p, 40%), #e6e6e6 var(--p, 40%)); cursor: pointer; }
.simu-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blanc); border: 6px solid var(--rouge); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.simu-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--blanc); border: 6px solid var(--rouge); }
.simu-bornes { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gris); }
.simu-note { font-size: .82rem; color: var(--gris); }
.simu-res { background: var(--ardoise); color: var(--gris-clair); padding: clamp(26px, 3.4vw, 54px); display: flex; flex-direction: column; gap: 18px; }
.simu-res h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rouge); font-weight: 600; }
.simu-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.simu-kpi { padding: 18px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--ligne-claire); }
.simu-kpi span { display: block; font-size: .8rem; color: var(--gris); }
.simu-kpi output { display: block; font-family: var(--f-titre); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 600; color: var(--blanc); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.simu-gain { padding: 22px; border-radius: 8px; background: var(--rouge); color: var(--blanc); }
.simu-gain span { font-size: .85rem; }
.simu-gain output { display: block; font-family: var(--f-titre); font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.simu-res .btn-pill { align-self: flex-start; --bg: var(--blanc); --fg: var(--ardoise); box-shadow: none; }

/* Témoignages */
.temos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.temo { margin: 0; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius); background: var(--blanc); color: var(--gris-fonce); display: flex; flex-direction: column; gap: 18px; }
.temo::before { content: "”"; font-family: var(--f-titre); font-size: 4rem; line-height: .6; color: var(--rouge); }
.temo blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--encre); }
.temo figcaption { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-titre); font-weight: 600; color: var(--ardoise); }
.temo .etoiles { color: #f5b301; letter-spacing: 2px; }

/* Showrooms */
.showrooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.showroom { padding: clamp(22px, 2.2vw, 30px); border-radius: var(--radius); background: rgba(255,255,255,.035); border: 1px solid var(--ligne-claire); display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); scroll-margin-top: 120px; }
.showroom h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 6px; }
.showroom h3 svg { width: 26px; height: 26px; }
.showroom a { color: var(--blanc); }
.showroom .link-arrow { margin-top: auto; padding-top: 8px; font-size: .74rem; }
.showroom-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; margin-bottom: clamp(20px, 3vw, 40px); }
.showroom-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Bureau technique : étapes en ligne */
.bt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: bt; }
.bt-list li { counter-increment: bt; padding: 20px 18px; border-radius: var(--radius); background: var(--rouge); color: var(--blanc); font-family: var(--f-titre); font-weight: 600; line-height: 1.3; }
.bt-list li::before { content: "0" counter(bt); display: block; font-size: .74rem; letter-spacing: .1em; opacity: .75; margin-bottom: 18px; }

/* ---------------------------------------------------------- Formulaire d'audit */
.audit-hero { padding: calc(var(--hdr-h) + 50px) 0 clamp(36px, 4vw, 60px); }
.audit-hero h1 { font-size: var(--fs-h1); max-width: 14em; }
.audit-hero p { margin-top: 18px; max-width: 46em; font-size: var(--fs-lead); color: var(--gris-clair); }
.audit-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(30px, 5vw, 90px); align-items: start; padding-bottom: clamp(60px, 8vw, 120px); }
.audit-grid > *, .split2 > *, .faq-grid > * { min-width: 0; }
.audit-aside { position: sticky; top: calc(var(--hdr-h) + 30px); display: flex; flex-direction: column; gap: 26px; }
.audit-aside h2 { font-size: var(--fs-h3); }
.audit-promesses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.audit-promesses li { display: flex; gap: 12px; align-items: flex-start; color: var(--blanc); }
.audit-promesses .ico { color: var(--rouge); margin-top: 3px; }
.audit-sr { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ligne-claire); font-size: var(--fs-sm); }
.audit-sr div { display: flex; gap: 10px; }
.audit-sr .ico { color: var(--rouge); margin-top: 4px; }
.audit-sr strong { display: block; font-family: var(--f-titre); font-weight: 500; }
.audit-sr a { color: var(--blanc); }
.audit-48 { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; background: rgba(227,6,19,.12); border: 1px solid rgba(227,6,19,.4); color: var(--blanc); font-family: var(--f-titre); font-size: .9rem; }

.form { background: var(--blanc); color: var(--gris-fonce); border-radius: var(--radius-l); padding: clamp(22px, 3.4vw, 50px); box-shadow: 0 30px 80px -40px rgba(0,0,0,.7); }
.form h2, .form h3, .form legend { color: var(--ardoise); }
.fs { border: 0; padding: 0; margin: 0 0 clamp(28px, 3.4vw, 42px); min-width: 0; }
.fs legend { display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 18px; font-family: var(--f-titre); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; letter-spacing: -.02em; }
.fs legend span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rouge); color: var(--blanc); font-size: .9rem; flex: none; }
.fs-help { font-size: .88rem; color: var(--gris); margin: -8px 0 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label, .field .flabel { font-family: var(--f-titre); font-size: .8rem; font-weight: 500; color: var(--ardoise); }
.req { color: var(--rouge); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; font-size: 16px; color: var(--ardoise);
  background: #f6f6f6; border: 1.5px solid #e3e3e3; border-radius: 6px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
  -webkit-appearance: none; appearance: none;
}
.field select { background: #f6f6f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e30613' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; padding-right: 40px; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--blanc); border-color: var(--ardoise); box-shadow: 0 0 0 4px rgba(35, 38, 45, .08); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--rouge); }
.field-err { font-size: .8rem; font-weight: 500; color: var(--rouge); }
.field-err:empty { display: none; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice > span {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 8px 18px; border-radius: 8px;
  border: 1.5px solid #e3e3e3; background: #f6f6f6; font-family: var(--f-titre); font-weight: 600; font-size: .9rem; color: var(--ardoise);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
  user-select: none; -webkit-user-select: none; line-height: 1.3;
}
.choice small { font-family: var(--f-texte); font-weight: 400; font-size: .76rem; color: var(--gris); }
.choice input:checked + span { background: var(--ardoise); color: var(--blanc); border-color: var(--ardoise); }
.choice input:checked + span small { color: var(--gris-clair); }
.choice input:focus-visible + span { outline: 2px solid var(--rouge); outline-offset: 2px; }
.choice:active > span { transform: scale(.97); }
.choices-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.choices-3 .choice > span { width: 100%; height: 100%; }
.fchoices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fchoice { position: relative; cursor: pointer; }
.fchoice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fchoice-in {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 8px; background: #f6f6f6; border: 1.5px solid #e3e3e3;
  font-family: var(--f-titre); font-weight: 500; font-size: .9rem; color: var(--ardoise); line-height: 1.3;
  transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
.fchoice-in::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #c9c9c9; background: var(--blanc) center / 12px no-repeat; transition: background-color 150ms ease, border-color 150ms ease; }
.fchoice input:checked + .fchoice-in { border-color: var(--rouge); background: #fff5f5; }
.fchoice input:checked + .fchoice-in::before { background-color: var(--rouge); border-color: var(--rouge); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.fchoice input:focus-visible + .fchoice-in { outline: 2px solid var(--rouge); outline-offset: 2px; }
.fchoice:active .fchoice-in { transform: scale(.98); }
.showroom-only { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 350ms var(--ease-out), opacity 250ms ease, margin 350ms var(--ease-out); }
.showroom-only > div { overflow: hidden; }
.form.has-showroom .showroom-only { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }

.captcha-box { padding: 18px; border-radius: 8px; background: #f6f6f6; border: 1.5px solid #e3e3e3; }
.captcha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha img { width: 200px; height: 64px; border-radius: 6px; border: 1.5px solid #e3e3e3; background: var(--blanc); user-select: none; -webkit-user-select: none; }
.captcha button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #d5d5d5; background: var(--blanc); font-size: 1.3rem; color: var(--ardoise); transition: transform 300ms var(--ease-out); }
.captcha button:active { transform: rotate(-90deg) scale(.95); }
.captcha input { max-width: 200px; letter-spacing: .3em; text-transform: lowercase; text-align: center; font-size: 22px !important; background: var(--blanc) !important; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; cursor: pointer; color: var(--gris-fonce); }
/* Case à cocher (RGPD) : dessinée en CSS, car le style des champs (.field input) retire l'apparence native */
.field .check input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 0; flex: none; margin: 1px 0 0; padding: 0; cursor: pointer;
  border: 1.5px solid #c9c9c9; border-radius: 5px; background: var(--blanc) center / 13px no-repeat;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.field .check input[type="checkbox"]:checked {
  background-color: var(--rouge); border-color: var(--rouge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.field .check input[type="checkbox"]:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; box-shadow: none; }
.field.is-error .check input[type="checkbox"] { border-color: var(--rouge); }
.check a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.form-submit .btn-pill { height: 60px; padding-left: 28px; font-size: .86rem; }
.form-submit .btn-pill[disabled] { opacity: .7; cursor: progress; }
.form-submit .btn-pill.is-loading .btn-plus { animation: tourne .8s linear infinite; }
.form-submit .btn-pill.is-loading .btn-plus::after { opacity: 0; }
@keyframes tourne { to { transform: rotate(360deg); } }
.form-msg { font-weight: 500; font-size: .92rem; }
.form-msg.is-error { color: var(--rouge); }
.form-note { margin-top: 14px; font-size: .8rem; color: var(--gris); }
.simu-recap { margin-bottom: 26px; padding: 16px 18px; border-radius: 8px; background: #fff5f5; border: 1px solid rgba(227,6,19,.25); color: var(--ardoise); font-size: .92rem; }
.simu-recap strong { color: var(--rouge); }

.merci { display: none; text-align: center; padding: clamp(30px, 5vw, 70px) 10px; color: var(--gris-fonce); }
.form-wrap.is-sent .form { display: none; }
.form-wrap.is-sent .merci { display: block; background: var(--blanc); border-radius: var(--radius-l); animation: monte 600ms var(--ease-out) both; }
@keyframes monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.merci-logo { width: 110px; margin: 0 auto; }
.merci h2 { font-size: var(--fs-h2); margin: 18px 0 14px; color: var(--ardoise); }
.merci p { max-width: 30em; margin: 0 auto; }

/* ---------------------------------------------------------- Texte (mentions) & 404 */
.prose { max-width: 780px; }
.prose h2 { font-size: var(--fs-h3); margin: 46px 0 14px; }
.prose p, .prose li { margin-bottom: 10px; }
.prose a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.e404 { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--hdr-h) var(--gutter) 40px; }
.e404 h1 { font-size: var(--fs-giant); line-height: .9; }
.e404 .e404-logo { width: min(40vw, 160px); margin: 24px auto; }
.ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--ardoise-900); color: var(--gris); font-size: .8rem; }

/* ---------------------------------------------------------- Révélations au scroll (état initial si JS) */
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .clip-reveal { clip-path: inset(0 0 100% 0); }
html.js .split-lines { opacity: 0; animation: gs-montre 0s linear 3s forwards; }
@keyframes gs-montre { to { opacity: 1; } }
.split-lines.is-split { display: flow-root; }
.split-lines > div { padding: .12em .1em .16em; margin: 0 -.1em -.28em; }
.split-lines > div:first-child { margin-top: -.12em; }
.split-lines > div:last-child { margin-bottom: -.16em; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 1560px) {
  .hdr-tel-txt { display: none; }
}
@media (min-width: 1181px) {
  :root { --hdr-h: 96px; }
  .hdr-link { font-size: clamp(.9rem, .7rem + .3vw, 1.02rem); padding: 8px 0; }
  .hdr .btn-pill { height: 52px; padding: 0 8px 0 24px; font-size: .8rem; }
  .sub a span { font-size: .96rem; }
}
@media (min-width: 1181px) and (max-width: 1340px) {
  .hdr .btn-marquee-txt { display: none; }
  .hdr .btn-pill { padding: 0 9px; }
  .nav-list { gap: 14px; }
}
@media (max-width: 1180px) {
  .hdr-nav { display: none; }
  .burger { display: block; }
  .hdr { grid-template-columns: auto 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .values, .showrooms { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .cibles-grid { grid-template-columns: 1fr; }
  .cibles-t { text-align: left; }
  .steps { grid-template-columns: 1fr 1fr; }
  .cta-grid { grid-template-columns: auto 1fr; }
  .cta-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .bt-list { grid-template-columns: repeat(3, 1fr); }
  .simu { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  :root { --hdr-h: 66px; }
  .hdr .btn-pill { height: 42px; padding: 0 6px 0 16px; font-size: .68rem; gap: 10px; }
  .hdr .btn-plus { width: 30px; height: 30px; }
  .hdr-tel { display: none; }
  .overlap-box { margin-top: 0; width: 100%; }
  .about-grid, .about-foot, .services-intro, .svc-wrap, .split2, .faq-grid, .audit-grid, .prod, .cibles-atouts { grid-template-columns: 1fr; }
  .about-foot .about-btns { justify-content: flex-start; }
  .xp { justify-self: start; }
  .svc-stage { display: none; }
  .svc { opacity: 1; }
  .svc-body { padding-left: 0; }
  .svc-media-inline { display: block; margin-top: 18px; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; }
  .svc-media-inline > * { width: 100%; height: 100%; object-fit: cover; }
  .usecases, .checks, .temos { grid-template-columns: 1fr; }
  .faq-head, .audit-aside { position: static; }
  .prod:nth-child(even) .prod-media { order: 0; }
  .roi-list { grid-template-columns: 1fr 1fr 1fr; }
  .phero { min-height: 70svh; }
  .chiffre-box { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure:nth-child(5n+1) { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .bt-list { grid-template-columns: 1fr 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-logo { width: 90px; }
  .ftr-bottom { grid-template-columns: 1fr; justify-items: center; }
  .ftr-bottom > :last-child:empty { display: none; }
  .home-architecture .tparrows.tp-rightarrow { transform: matrix(1, 0, 0, 1, -67, -67) !important; }
  .home-architecture .tparrows.tp-leftarrow { transform: matrix(1, 0, 0, 1, -67, -134) !important; }
  .home-architecture .architecture-title { font-size: 34px !important; line-height: 34px !important; }
  .hero-down { display: none; }
}
@media (max-width: 600px) {
  .hdr .btn-pill .btn-marquee-txt { display: none; }
  .hdr .btn-pill { padding: 0 6px; }
  .works-track { grid-auto-columns: 78vw; }
  .row, .row-3, .fchoices, .choices-3 { grid-template-columns: 1fr; gap: 0 8px; }
  .choices-3, .fchoices { gap: 8px; }
  .fgrid, .values, .showrooms, .stats, .steps, .ftr-grid, .simu-types, .simu-kpis { grid-template-columns: 1fr; }
  .simu-types { grid-template-columns: 1fr 1fr; }
  .roi-list { grid-template-columns: 1fr; }
  .bt-list { grid-template-columns: 1fr; }
  .cta-actions .btn-pill, .cta-actions .btn-ghost, .phero-actions .btn-pill, .phero-actions .btn-ghost, .about-btns .btn-pill, .about-btns .btn-ghost, .prod-actions .btn-pill, .prod-actions .btn-ghost { width: 100%; justify-content: space-between; }
  .cta-actions .btn-ghost, .phero-actions .btn-ghost, .about-btns .btn-ghost, .prod-actions .btn-ghost { justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 50px; padding-block: 10px; }
  .form-submit .btn-pill { width: 100%; justify-content: space-between; }
  .about-btns .btn-pill, .phero-actions .btn-pill, .cta-actions .btn-pill, .form-submit .btn-pill { white-space: normal; height: auto; min-height: 50px; padding-block: 8px; line-height: 1.25; }
  .xp-n { letter-spacing: -3px; }
  .parallax-t { font-size: clamp(2.6rem, 13vw, 4rem); }
}

/* ---------------------------------------------------------- Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .gostore-clignote, .loader-logo { animation: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .split-lines { opacity: 1; animation: none; }
  html.js .clip-reveal { clip-path: none; }
  html.js .point { opacity: 1; }
  .about-text .w { opacity: 1 !important; }
  .svc-stage > * { transform: none; }
}