:root {
  /* Identité BSM : terracotta de marque (logo #af7470) et neutres chauds. */
  --ink: #211a18;          /* texte principal */
  --deep: #231a17;         /* fonds sombres (hero, bandeaux, pied de page) */
  --deep-2: #4a3732;       /* fonds sombres secondaires, sous-titres */
  --warm-grey: #8a7c77;    /* texte tertiaire */
  --accent: #b4756e;       /* terracotta de marque */
  --accent-strong: #9d5f58;/* terracotta soutenu : boutons, liens (AA sur blanc) */
  --accent-deep: #8a5049;  /* survol des boutons */
  --accent-light: #e9c2b9; /* terracotta clair : titres et accents sur fond sombre */
  --accent-tint: #f3e2de;  /* fond teinté très clair */
  --paper: #f8f5f0;        /* fond général */
  --paper-deep: #efe7df;   /* fond alterné */
  --white: #fff;
  --muted: #6d645f;        /* texte secondaire — 5,5:1 sur --paper */
  --line: rgba(33, 26, 24, .13);
  --line-strong: rgba(33, 26, 24, .22);

  /* Polices auto-hébergées (voir fonts.css). Fraunces ne sert qu'aux italiques de titre. */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Geist', 'Segoe UI Variable', 'Segoe UI', system-ui, Arial, sans-serif;

  /* Échelle typographique. Les tailles précédentes (15 px de base, 10 px pour les
     intitulés) passaient mal sur un écran courant : tout est remonté d'environ 15 %. */
  --text-2xs: .72rem;      /* 11,5 px — micro-intitulés */
  --text-xs: .8rem;        /* 12,8 px — intitulés, pastilles */
  --text-sm: .9rem;        /* 14,4 px — légendes, méta */
  --text-base: 1.0625rem;  /* 17 px — texte courant */
  --text-md: 1.1875rem;    /* 19 px — chapôs */
  --measure: 68ch;         /* longueur de ligne confortable */

  --container: 1280px;
  --pad: clamp(22px, 5.1vw, 82px);
  --ease: cubic-bezier(.2, .75, .25, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Ombres teintées de la couleur du fond plutôt qu'en noir pur. */
  --shadow-sm: 0 2px 8px rgba(58, 40, 35, .06);
  --shadow-md: 0 10px 30px rgba(58, 40, 35, .1);
  --shadow-lg: 0 24px 60px rgba(58, 40, 35, .16);

  --z-header: 60;
  --z-panel: 70;
  --z-overlay: 90;
  --z-skip: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: var(--text-base); font-weight: 400; line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body, input, select, textarea, button { font-family: var(--sans); }
/* `height: auto` : une image rétrécie par `max-width` garde ses proportions, même quand la
   balise porte des attributs width et height. Sans lui, la hauteur restait celle de
   l'attribut et l'image s'écrasait. Les images qui remplissent un cadre de hauteur fixe
   déclarent leur propre hauteur et un `object-fit`. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { color: var(--ink); background: var(--accent-light); }
.container { width: min(100% - var(--pad) * 2, var(--container)); margin-inline: auto; }
.container--narrow { max-width: 920px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: var(--z-skip); top: 8px; left: 8px; padding: 12px 18px; color: #fff; background: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Anneau de focus visible et homogène pour la navigation au clavier. */
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 2px; }
.site-footer :focus-visible, .inner-hero :focus-visible, .home-hero :focus-visible, .story-band :focus-visible, .home-end-cta :focus-visible, .solutions-path :focus-visible { outline-color: var(--accent-light); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
h1, h2 { text-wrap: balance; }
h1 em, h2 em, h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-optical-sizing: auto; letter-spacing: -.015em; }
h1 { font-size: clamp(3rem, 7vw, 6.75rem); }
h2 { margin-bottom: 0; font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); }
p { color: var(--muted); text-wrap: pretty; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; }
.eyebrow--light { color: var(--accent-light); }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(180,117,110,.14); }
.arrow { display: inline-block; margin-left: 4px; transition: transform .25s var(--ease); }
a:hover .arrow, a:hover > span[aria-hidden="true"] { transform: translate(3px, -3px); }
/* Le soulignement se dessine au survol plutôt que d'être toujours présent. */
.text-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding-bottom: 5px; color: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; transition: color .2s ease; }
.text-link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; content: ''; transform-origin: left; transition: transform .35s var(--ease); }
.text-link:hover { color: var(--accent-deep); }
.text-link:hover::after { animation: link-underline .45s var(--ease); }
.text-link--large { font-size: var(--text-base); }
@keyframes link-underline { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 20px; padding: 0 26px; border: 1px solid transparent; border-radius: 3px; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.button--accent { color: #fff; background: var(--accent-strong); box-shadow: 0 6px 18px rgba(157,95,88,.22); }
.button--accent:hover { background: var(--accent-deep); box-shadow: 0 12px 26px rgba(157,95,88,.3); }
.button--dark { color: #fff; background: var(--deep); }
.button--dark:hover { background: var(--deep-2); }
.button--ghost { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.045); backdrop-filter: blur(8px); }
.button--ghost:hover, .button--outline-light:hover { color: #fff; border-color: var(--accent-strong); background: var(--accent-strong); }
.button--outline-light { color: #fff; border-color: rgba(255,255,255,.38); background: transparent; }
.section { padding-block: clamp(86px, 10vw, 150px); }

/* ============================================================
   Bandeau d'annonce et navigation principale
   ============================================================ */
.topline { position: relative; z-index: calc(var(--z-header) + 1); color: rgba(255,255,255,.72); background: var(--deep); font-size: var(--text-2xs); letter-spacing: .04em; }
.topline__inner { display: flex; width: min(100% - var(--pad) * 2, var(--container)); min-height: 38px; align-items: center; justify-content: space-between; gap: 16px; margin-inline: auto; }
.topline__inner > span, .topline__inner > a { display: inline-flex; align-items: center; gap: 10px; }
.topline__inner > a { color: var(--accent-light); font-weight: 600; transition: color .2s ease; }
.topline__inner > a:hover { color: #fff; }

.site-header { position: sticky; z-index: var(--z-header); top: 0; background: rgba(248,245,240,.88); border-bottom: 1px solid transparent; transition: box-shadow .3s ease, background .3s ease, border-color .3s ease; backdrop-filter: saturate(1.6) blur(18px); }
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(250,247,243,.96); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; width: min(100% - var(--pad) * 2, 1440px); min-height: 76px; align-items: center; gap: clamp(20px, 3vw, 48px); margin-inline: auto; }
.brand { display: flex; width: 132px; flex: 0 0 132px; align-items: center; transition: opacity .2s ease; }
.brand:hover { opacity: .78; }
.brand img { width: 100%; height: auto; }

.primary-nav { display: flex; align-items: center; margin-right: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.nav-item { position: static; }

/* Le soulignement actif se dessine sous l'intitulé, il remplace un simple changement de couleur. */
.nav-link { position: relative; display: inline-flex; min-height: 76px; align-items: center; gap: 6px; padding-inline: 10px; color: #3d3430; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: color .2s ease; }
.nav-link::after { position: absolute; bottom: 24px; left: 10px; width: calc(100% - 20px); height: 1.5px; background: var(--accent-strong); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-link:hover { color: var(--accent-strong); }
.nav-link:hover::after, .nav-link.is-active::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--accent-strong); font-weight: 600; }
.nav-link__chevron { width: 9px; height: 6px; transition: transform .3s var(--ease); }
.nav-link[aria-expanded="true"] .nav-link__chevron { transform: rotate(180deg); }

/* Panneau déroulant : pleine largeur sous l'en-tête, aligné sur la grille du site. */
.nav-panel { position: absolute; top: 100%; right: 0; left: 0; border-top: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .22s; }
.nav-item--has-panel.is-open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-panel__inner { display: grid; width: min(100% - var(--pad) * 2, var(--container)); grid-template-columns: .95fr 1.35fr .9fr; gap: clamp(28px, 4vw, 64px); margin-inline: auto; padding-block: 40px 44px; }
.nav-panel--plain .nav-panel__inner { grid-template-columns: .95fr 1.5fr; }
.nav-panel__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.nav-panel__intro strong { color: var(--ink); font-size: 1.6rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.nav-panel__intro p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.nav-panel__intro .text-link { margin-top: 6px; }
.nav-panel__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px clamp(24px, 3vw, 48px); }
.nav-panel__group { display: flex; flex-direction: column; }
.nav-panel__heading { margin: 0 0 6px; color: var(--warm-grey); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.nav-panel__group a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); color: #4f4743; font-size: var(--text-sm); font-weight: 500; transition: color .2s ease, padding-left .25s var(--ease); }
.nav-panel__group a i { color: var(--accent-strong); font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s var(--ease); }
.nav-panel__group a:hover { color: var(--accent-strong); padding-left: 6px; }
.nav-panel__group a:hover i { opacity: 1; transform: translateX(0); }

/* Mise en avant de One Face dans le panneau. */
.nav-panel__feature { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 20px; border: 1px solid var(--line); background: var(--paper-deep); transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease; }
.nav-panel__feature:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.nav-panel__feature img { width: 100%; height: 104px; margin-bottom: 2px; object-fit: cover; }
.nav-panel__badge { align-self: flex-start; padding: 3px 8px; color: #fff; background: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav-panel__feature strong { color: var(--ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; }
.nav-panel__text { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.nav-panel__cta { color: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; }
.nav-panel__cta i { display: inline-block; font-style: normal; transition: transform .25s var(--ease); }
.nav-panel__feature:hover .nav-panel__cta i { transform: translate(3px, -3px); }

/* Voile derrière le panneau ouvert, pour détacher le menu du contenu. */
.nav-scrim { position: fixed; z-index: calc(var(--z-header) - 1); inset: 0; background: rgba(33,26,24,.3); opacity: 0; transition: opacity .25s ease; }
.nav-scrim[hidden] { display: none; }
.nav-scrim.is-visible { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-contact { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; padding: 0 18px; border-radius: 3px; color: #fff; background: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: background .2s ease, transform .2s var(--ease); }
.header-contact:hover { background: var(--accent-deep); transform: translateY(-1px); }
.header-contact:active { transform: translateY(0) scale(.985); }

.header-search { position: relative; display: flex; width: 252px; height: 44px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 3px; background: rgba(255,255,255,.6); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.header-search__icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--warm-grey); fill: none; stroke: currentColor; stroke-width: 1.7; }
.search-input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: var(--text-sm); }
.search-input::placeholder { color: var(--warm-grey); opacity: 1; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.header-search:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(180,117,110,.16); }

.search-results { position: absolute; z-index: var(--z-panel); top: calc(100% + 9px); right: 0; width: min(400px, calc(100vw - 32px)); padding: 7px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); box-shadow: var(--shadow-lg); }
.search-results[hidden] { display: none; }
.search-results__heading { padding: 9px 10px 8px; color: var(--warm-grey); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.search-result { display: grid; grid-template-columns: 50px 1fr auto; gap: 13px; align-items: center; padding: 9px; border-radius: 2px; border-top: 1px solid rgba(33,26,24,.07); transition: background .18s ease; }
.search-result:hover, .search-result:focus-visible { background: var(--accent-tint); }
.search-result__image { width: 50px; height: 50px; overflow: hidden; border-radius: 2px; background: var(--paper-deep); }
.search-result__image img { width: 100%; height: 100%; object-fit: cover; }
.search-result__copy { display: grid; gap: 2px; }
.search-result__copy strong { color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.search-result__copy span { color: var(--muted); font-size: var(--text-2xs); }
.search-result__arrow { color: var(--accent-strong); font-size: 15px; }
.search-results__empty { padding: 16px 10px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.search-results__all { display: block; margin-top: 4px; padding: 11px 10px; border-top: 1px solid var(--line); color: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; text-align: center; transition: background .18s ease; }
.search-results__all:hover { background: var(--accent-tint); }

/* Bouton menu : trois traits qui se transforment en croix. */
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 3px; background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; left: 50%; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s ease; }
.menu-toggle span:nth-child(1) { top: 16px; transform: translateX(-50%); }
.menu-toggle span:nth-child(2) { top: 21px; transform: translateX(-50%); }
.menu-toggle span:nth-child(3) { top: 26px; transform: translateX(-50%); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

.nav-mobile-extra { display: none; }
/* Landing page */
.home-hero { position: relative; min-height: min(780px, calc(100svh - 117px)); min-height: clamp(640px, calc(100svh - 117px), 870px); overflow: hidden; color: #fff; background: #231a17; isolation: isolate; }
.home-hero__photo, .home-hero__veil { position: absolute; z-index: -2; inset: 0; }
.home-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 43%; }
.home-hero__veil { z-index: -1; background: linear-gradient(90deg, rgba(26,19,17,.91) 0%, rgba(26,19,17,.77) 35%, rgba(26,19,17,.22) 75%, rgba(26,19,17,.08) 100%), linear-gradient(0deg, rgba(26,19,17,.48), transparent 45%); }
.home-hero__content { position: relative; display: flex; min-height: inherit; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 85px 100px; }
.home-hero__content .eyebrow { margin-bottom: 30px; }
.home-hero h1 { max-width: 900px; margin: 0 0 21px; font-size: clamp(4.25rem, 9.2vw, 9rem); font-weight: 500; letter-spacing: -.075em; line-height: .88; }
.home-hero h1 em { color: var(--accent-light); }
.home-hero__content > p { max-width: 480px; margin: 0; color: rgba(255,255,255,.8); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.home-hero__foot { position: absolute; right: 0; bottom: 27px; left: 0; display: flex; justify-content: space-between; color: rgba(255,255,255,.65); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
/* Carte « One Face » : la nouveauté mise en avant dans la bannière d'accueil. */
.hero-product-card { position: absolute; right: clamp(24px, 6vw, 92px); bottom: 86px; display: grid; width: min(320px, 25vw); grid-template-columns: 96px 1fr; gap: 15px; align-items: center; padding: 13px; border-top: 3px solid var(--accent-strong); color: var(--ink); background: rgba(249,246,241,.96); box-shadow: 0 22px 54px rgba(0,0,0,.26); animation: float-card 6s ease-in-out infinite; transition: transform .3s var(--ease), box-shadow .3s ease; }
.hero-product-card:hover { animation-play-state: paused; box-shadow: 0 28px 62px rgba(0,0,0,.32); transform: translateY(-5px); }
.hero-product-card__badge { position: absolute; top: -11px; left: 13px; padding: 4px 9px; color: #fff; background: var(--accent-strong); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero-product-card > img { width: 96px; height: 88px; object-fit: cover; }
.hero-product-card > div { display: grid; gap: 5px; }
.hero-product-card > div > span { color: var(--warm-grey); font-size: 8px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.hero-product-card strong { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.hero-product-card__link { color: var(--accent-strong) !important; font-size: 9.5px; font-weight: 700; letter-spacing: .02em !important; text-transform: none !important; }
.hero-product-card__link i { font-style: normal; display: inline-block; transition: transform .25s var(--ease); }
.hero-product-card:hover .hero-product-card__link i { transform: translate(3px, -3px); }
.hero-scroll { position: absolute; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.63); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; transform: translateX(-50%); }
.hero-scroll > span { position: relative; width: 1px; height: 27px; overflow: hidden; background: rgba(255,255,255,.26); }
.hero-scroll > span::after { position: absolute; top: -30px; left: 0; width: 1px; height: 16px; background: var(--accent-light); content: ''; animation: scroll-line 1.7s ease-in-out infinite; }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; pointer-events: none; }
.hero-orbit--one { top: -270px; right: 2%; width: min(780px, 62vw); aspect-ratio: 1; }
.hero-orbit--two { top: -154px; right: 10%; width: min(550px, 48vw); aspect-ratio: 1; border-color: rgba(180,117,110,.28); }
.home-proof { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr; align-items: center; padding: 23px var(--pad); border-bottom: 1px solid var(--line); background: #f0e9e1; }
.home-proof > div { display: grid; justify-content: center; gap: 3px; padding: 4px 16px; border-right: 1px solid var(--line); }
.home-proof > div:first-child { padding-left: 0; }
.home-proof > div > strong { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.home-proof > div > strong i { color: var(--accent); font-style: normal; }
.home-proof > div > span { color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.home-proof > a { justify-self: end; color: var(--warm-grey); font-size: 10px; font-weight: 700; }
.section-heading { margin-bottom: clamp(36px, 5vw, 68px); }
.section-heading--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 38px; }
.section-heading .eyebrow { margin-bottom: 17px; }
.section-heading h2 { max-width: 780px; }
.section-heading > p { max-width: 42ch; margin: 0 0 6px; font-size: var(--text-base); line-height: 1.75; }
.section-categories { padding-bottom: clamp(70px, 8vw, 114px); }
.category-cards { display: grid; grid-template-columns: 1.25fr 1fr .95fr; gap: 14px; align-items: start; }
.category-card { position: relative; min-height: clamp(320px, 38vw, 475px); overflow: hidden; color: #fff; background: #b5aaa3; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s ease; }
.category-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
/* Decalage vertical : la rangee cesse de lire comme trois blocs identiques. */
.category-card--body { margin-top: clamp(20px, 3.5vw, 52px); min-height: clamp(300px, 35vw, 440px); }
.category-card--laser { margin-top: clamp(40px, 7vw, 104px); min-height: clamp(280px, 32vw, 405px); }
.category-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(15,25,19,.03) 25%, rgba(15,25,19,.67) 100%); content: ''; transition: opacity .35s ease; }
.category-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.category-card--face > img { object-position: 55% center; }
.category-card--laser > img { object-position: 48% center; }
.category-card:hover > img { transform: scale(1.055); }
.category-card__index { position: absolute; top: 24px; left: 25px; color: rgba(255,255,255,.8); font-size: 9px; letter-spacing: .16em; }
.category-card > div { position: absolute; right: 25px; bottom: 25px; left: 25px; }
.category-card h3 { margin-bottom: 17px; font-size: clamp(2.5rem, 4vw, 4rem); line-height: .94; }
.category-card > div > span { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.55); font-size: var(--text-sm); font-weight: 500; transition: gap .25s var(--ease), border-color .25s ease; }
.category-card:hover > div > span { gap: 20px; border-color: #fff; }
.category-card > div > span > b { font-size: 15px; font-weight: 400; }
.section-products { background: #f3eee7; }
.section-products .section-heading { margin-bottom: 52px; }
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 18px; }
.product-card { display: flex; min-width: 0; flex-direction: column; }
.product-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / .91; background: #e8ded5; }
.product-card__image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.product-card:hover .product-card__image > img { transform: scale(1.045); }
.product-card__number { position: absolute; top: 14px; left: 15px; color: rgba(255,255,255,.9); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .14em; text-shadow: 0 1px 4px rgba(33,26,24,.5); }
.product-card__arrow { position: absolute; right: 12px; bottom: 12px; display: grid; width: 35px; height: 35px; place-items: center; color: var(--ink); background: var(--accent-light); font-size: 17px; transition: transform .25s ease; }
.product-card:hover .product-card__arrow { transform: rotate(45deg); }
.product-card__meta { display: flex; min-height: 30px; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; color: var(--muted); font-size: var(--text-2xs); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.product-card h3 { margin-bottom: 14px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.product-card h3 a { transition: color .2s ease; }
.product-card:hover h3 a { color: var(--accent-strong); }
/* L appel a l action est pousse en bas : les liens s alignent quel que soit le titre. */
.product-card .text-link { margin-top: auto; align-self: flex-start; }
.product-pill { padding: 4px 8px; border-radius: 2px; color: var(--accent-deep); background: var(--accent-tint); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; }
.product-pill--accent { color: #fff; background: var(--accent-strong); }

/* One Face : la carte de la nouveauté se distingue dans la grille. */
.product-card--featured .product-card__image { outline: 2px solid var(--accent-strong); outline-offset: 0; }
.product-card__award { position: absolute; top: 12px; right: 12px; z-index: 2; max-width: 108px; padding: 5px 8px; color: #fff; background: var(--accent-strong); font-size: 7.5px; font-weight: 700; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.product-card--featured h3 a { color: var(--accent-deep); }
.product-card h3 { min-height: 46px; margin: 2px 0 11px; font-size: clamp(1rem, 1.4vw, 1.22rem); letter-spacing: -.035em; line-height: 1.22; }
.product-card h3 a:hover { color: #9d5f58; }
.product-card .text-link { border: 0; color: #9d5f58; font-size: 9px; }
.story-band { position: relative; display: grid; min-height: 620px; grid-template-columns: 1fr 1fr; color: #fff; background: var(--deep); }
.story-band__image { position: relative; min-height: 560px; overflow: hidden; }
.story-band__image::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 68%, var(--deep)); content: ''; }
.story-band__image > img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: 54% 40%; }
.story-band__content { display: flex; max-width: 690px; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(54px, 8vw, 112px) clamp(40px, 7vw, 108px); }
.story-band__content .eyebrow { margin-bottom: 23px; }
.story-band__content h2 { margin-bottom: 23px; font-size: clamp(3rem, 5.7vw, 5.5rem); }
.story-band__content h2 em { color: var(--accent-light); }
.story-band__content p { max-width: 470px; color: rgba(255,255,255,.72); font-size: 13px; }
.story-band__content .button { margin-top: 14px; }
.story-band__stamp { position: absolute; right: 5%; bottom: 38px; display: flex; width: 118px; height: 118px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.37); border-radius: 50%; color: rgba(255,255,255,.8); text-align: center; transform: rotate(-12deg); }
.story-band__stamp span { font-size: 8px; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.story-band__stamp i { color: var(--accent-light); font-size: 15px; font-style: normal; font-weight: 700; letter-spacing: .12em; }
.section-support { background: var(--paper); }
.support-grid { display: grid; grid-template-columns: 1fr 1fr 1.22fr; gap: 12px; }
.support-card { position: relative; display: flex; min-height: 350px; flex-direction: column; align-items: flex-start; padding: 27px; border: 1px solid var(--line); transition: background .3s ease, transform .3s var(--ease), border-color .3s ease; }
.support-card:hover { border-color: transparent; background: #f1eae2; transform: translateY(-5px); }
.support-card__number { color: var(--warm-grey); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; }
.support-card__icon { position: absolute; top: 23px; right: 24px; color: #a86a63; font-size: 18px; }
.support-card h3 { margin: 56px 0 15px; font-size: clamp(1.8rem, 2.7vw, 2.65rem); }
.support-card p { max-width: 34ch; margin-bottom: 28px; font-size: var(--text-sm); line-height: 1.7; }
.support-card .text-link { margin-top: auto; }
.support-card--quote { color: #fff; background: var(--deep); }
.support-card--quote:hover { background: #3c2d29; }
.support-card--quote .support-card__number, .support-card--quote .eyebrow { color: rgba(255,255,255,.65); }
.support-card--quote blockquote { margin: 33px 0 23px; color: #fff; font-family: var(--serif); font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.32; }
.support-card--quote .text-link { color: var(--accent-light); }
/* Mise en page editoriale : le titre reste a gauche pendant que le texte defile a droite.
   Auparavant le texte occupait une colonne etroite sous un titre pleine largeur, laissant
   une grande zone vide sur la droite de la section. */
.home-source { padding-top: 76px; background: #f4efe9; }
.home-source > .container { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.home-source .section-heading { position: sticky; top: 118px; margin-bottom: 0; }
.home-source .section-heading h2 { font-size: clamp(2.1rem, 2.9vw, 2.9rem); }
.home-source .rich-content { max-width: var(--measure); }
.rich-content--home { max-height: none; }
.partner-band { padding-block: 105px; border-block: 1px solid var(--line); background: #f0e9e1; }
.partner-band__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; }
.partner-band__inner .eyebrow { margin-bottom: 20px; }
.partner-band__inner h2 { margin-bottom: 20px; }
.partner-band__inner p { max-width: 480px; font-size: 13px; }
.partner-band__inner .text-link { margin-top: 9px; }
.partner-band__marks { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 20px; align-items: center; }
.partner-band__marks > img { width: 94px; height: 94px; object-fit: contain; mix-blend-mode: multiply; }
.partner-band__marks > span { display: flex; min-height: 92px; align-items: center; justify-content: center; border-left: 1px solid var(--line); color: #746a65; font-family: var(--serif); font-size: 16px; text-align: center; }
.home-end-cta { position: relative; overflow: hidden; padding-block: clamp(88px, 12vw, 165px); color: #fff; background: var(--deep); isolation: isolate; }
.home-end-cta .container { position: relative; z-index: 2; }
.home-end-cta .eyebrow { margin-bottom: 20px; }
.home-end-cta h2 { margin-bottom: 30px; font-size: clamp(3.3rem, 7.3vw, 7.4rem); }
.home-end-cta h2 em { color: var(--accent-light); }
.home-end-cta__decor { position: absolute; z-index: -1; right: -2%; bottom: -33%; color: rgba(255,255,255,.035); font-size: clamp(15rem, 35vw, 40rem); font-weight: 700; letter-spacing: -.1em; line-height: .9; }

/* Interior and editorial pages */
.inner-hero { position: relative; display: flex; min-height: clamp(470px, 53vw, 680px); overflow: hidden; align-items: center; color: white; background: var(--deep); isolation: isolate; }
.inner-hero--compact { min-height: 410px; }
.inner-hero__image, .inner-hero__tint { position: absolute; z-index: -2; inset: 0; }
.inner-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.inner-hero__tint { z-index: -1; background: linear-gradient(90deg, rgba(18,37,28,.91), rgba(18,37,28,.55) 55%, rgba(18,37,28,.15)), linear-gradient(0deg, rgba(18,37,28,.35), transparent 50%); }
.inner-hero__content { padding-block: 64px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 50px; color: rgba(255,255,255,.62); font-size: 9px; }
.breadcrumbs a:hover { color: var(--accent-light); }
.breadcrumbs span:last-child { color: rgba(255,255,255,.92); }
.inner-hero .eyebrow { margin-bottom: 19px; }
.inner-hero h1 { max-width: 980px; margin-bottom: 20px; font-size: clamp(3.2rem, 8vw, 7rem); }
.inner-hero h1 em { color: var(--accent-light); }
.inner-hero__lead { max-width: 620px; margin-bottom: 25px; color: rgba(255,255,255,.76); font-size: 14px; }
.inner-hero__index { position: absolute; right: var(--pad); bottom: 26px; color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .14em; }
.inner-hero--category { min-height: 520px; }
.inner-hero--category .inner-hero__lead { max-width: 470px; }
.page-content-section { padding-top: 80px; }
/* Mesure de lecture : une ligne trop longue fatigue, surtout sur ces textes denses. */
.rich-content { max-width: var(--measure); color: #4a4340; font-size: var(--text-base); line-height: 1.8; overflow-wrap: break-word; }
.rich-content h2 { margin: 72px 0 22px; color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -.03em; line-height: 1.15; }
.rich-content h2:first-child, .rich-content h3:first-child, .rich-content h4:first-child { margin-top: 0; }
.rich-content h3 { margin: 48px 0 16px; color: var(--ink); font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.rich-content h4, .rich-content h5, .rich-content h6 { margin: 32px 0 11px; color: var(--deep-2); font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
.rich-content p { margin-bottom: 22px; color: #574f4b; }
.rich-content ul, .rich-content ol { display: grid; gap: 11px; margin: 22px 0 30px; padding-left: 22px; color: #574f4b; }
.rich-content li { padding-left: 4px; }
.rich-content li::marker { color: #b4756e; }
.rich-content a { color: var(--accent-strong); text-decoration: underline; text-decoration-color: rgba(157,95,88,.38); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s ease, color .2s ease; }
.rich-content a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }
.rich-content strong, .rich-content b { color: #3d3430; font-weight: 700; }
.rich-content blockquote { margin: 34px 0; padding: 24px 30px; border-left: 3px solid var(--accent); color: var(--deep); background: var(--accent-tint); font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.55; }
/* Les visuels repris de l'ancien site sont souvent petits : un cadre évite qu'ils flottent
   au milieu d'un grand vide et les fait lire comme des illustrations assumées. */
.rich-content img { width: auto; max-width: min(100%, 760px); height: auto; margin: 30px auto; padding: 18px; border: 1px solid var(--line); background: var(--paper-deep); object-fit: contain; }
.rich-content figure img, .bsm-person img, .rich-content a > img { padding: 0; border: 0; background: none; }
.rich-content figure { margin: 30px 0; }
.rich-content figcaption { margin-top: 10px; color: var(--warm-grey); font-size: var(--text-sm); text-align: center; }
.rich-content table { width: 100%; margin-block: 30px; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rich-content th, .rich-content td { padding: 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.rich-content th { color: var(--ink); background: var(--paper-deep); }
.rich-content hr { height: 1px; margin: 36px 0; border: 0; background: var(--line); }
.rich-content details { margin: 10px 0; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); transition: border-color .25s ease, box-shadow .25s ease; }
.rich-content details[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.rich-content details > :not(summary) { padding-inline: 20px; }
.rich-content details > :last-child { padding-bottom: 18px; }
.rich-content summary { position: relative; padding: 16px 48px 16px 20px; color: var(--ink); cursor: pointer; font-size: 1.02rem; font-weight: 600; list-style: none; transition: color .2s ease; }
.rich-content summary::-webkit-details-marker { display: none; }
.rich-content summary::after { position: absolute; top: 50%; right: 20px; width: 11px; height: 11px; border-right: 1.5px solid var(--accent-strong); border-bottom: 1.5px solid var(--accent-strong); content: ''; transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
.rich-content details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.rich-content summary:hover { color: var(--accent-strong); }
.rich-content details > :last-child { margin-bottom: 0; }

/* ============================================================
   Bandeau palmarès : ce qui distingue les machines BSM.
   ============================================================ */
.innovation-band { position: relative; padding-block: clamp(76px, 9vw, 132px); color: #fff; background: var(--deep); isolation: isolate; }
.innovation-band::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(90% 120% at 82% 12%, rgba(180,117,110,.28), transparent 62%); content: ''; }
.innovation-band__inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(34px, 4.5vw, 70px) clamp(36px, 5vw, 88px); align-items: start; }
.innovation-band__copy h2 { margin: 18px 0 20px; font-size: clamp(2.2rem, 3.8vw, 3.5rem); }
.innovation-band__copy h2 em { color: var(--accent-light); }
.innovation-band__copy p { max-width: 46ch; margin-bottom: 28px; color: rgba(255,255,255,.76); }

.innovation-list { display: grid; margin: 0; padding: 0; gap: 0; list-style: none; }
.innovation-list li { display: grid; gap: 5px; padding: 19px 0; border-top: 1px solid rgba(255,255,255,.16); }
.innovation-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.innovation-list strong { color: var(--accent-light); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.innovation-list span { color: rgba(255,255,255,.84); font-size: var(--text-base); line-height: 1.6; }

/* Le discours tient la colonne de gauche ; le visuel du prix ouvre celle de droite,
   suivi des preuves. Les deux colonnes s'équilibrent ainsi en hauteur. */
.innovation-band__copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.innovation-award { grid-column: 2; grid-row: 1; margin: 0; }
.innovation-list { grid-column: 2; grid-row: 2; align-content: start; }
.innovation-award img { width: 100%; height: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; }
.innovation-award figcaption { margin-top: 12px; color: rgba(255,255,255,.6); font-size: var(--text-sm); }

/* ============================================================
   Mini-Lab — cosmétique fraîche sur-mesure
   ============================================================ */
.minilab-hero { position: relative; padding: 26px 0 clamp(60px, 7vw, 96px); background: var(--paper-deep); }
.minilab-hero__image { max-width: var(--container); margin: 0 auto 36px; padding-inline: var(--pad); }
.minilab-hero__image img { width: 100%; height: clamp(260px, 36vw, 460px); border-radius: 4px; object-fit: cover; object-position: center 58%; }
.minilab-hero .breadcrumbs { margin-bottom: 26px; color: var(--warm-grey); }
.minilab-hero .eyebrow { margin-bottom: 18px; }
.minilab-hero h1 { max-width: 15ch; margin-bottom: 20px; font-size: clamp(2.9rem, 6vw, 5.4rem); }
.minilab-hero h1 em { color: var(--accent-strong); }
.minilab-hero__lead { max-width: 58ch; margin-bottom: 26px; font-size: var(--text-md); line-height: 1.65; }
.minilab-hero__award { max-width: 62ch; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); line-height: 1.65; }
.minilab-hero__award strong { color: var(--ink); font-weight: 600; }

/* Les trois temps de la préparation. */
.minilab-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; }
.minilab-step { display: grid; align-content: start; gap: 9px; padding: 28px 26px 30px; background: var(--paper); }
.minilab-step__number { color: var(--accent-strong); font-family: var(--serif); font-size: 1.6rem; font-style: italic; line-height: 1; }
.minilab-step strong { color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; }
.minilab-step__text { color: var(--muted); font-size: var(--text-sm); line-height: 1.65; }
.minilab-figures { margin: 0; }

.minilab-water { position: relative; padding-block: clamp(70px, 8vw, 118px); color: #fff; background: var(--deep); isolation: isolate; }
.minilab-water::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(80% 110% at 18% 20%, rgba(180,117,110,.25), transparent 60%); content: ''; }
.minilab-water__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(34px, 5vw, 84px); align-items: center; }
.minilab-water__copy h2 { margin: 16px 0 20px; font-size: clamp(2.1rem, 3.6vw, 3.3rem); }
.minilab-water__copy h2 em { color: var(--accent-light); }
.minilab-water__copy p { max-width: 52ch; margin-bottom: 18px; color: rgba(255,255,255,.78); }
.minilab-water__visual { margin: 0; }
.minilab-water__visual img { width: 100%; height: auto; border-radius: 4px; }
.minilab-water__visual figcaption { margin-top: 12px; color: rgba(255,255,255,.6); font-size: var(--text-sm); }

.minilab-capsules { background: var(--paper-deep); }
.minilab-families { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.minilab-family { display: flex; flex-direction: column; gap: 13px; padding: 26px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease; }
.minilab-family:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.minilab-family > img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.minilab-family__head { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.minilab-family h3 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.minilab-family p { margin: 0; font-size: var(--text-sm); line-height: 1.65; }
.minilab-family ul { display: flex; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 7px; list-style: none; }
.minilab-family li { padding: 5px 10px; border-radius: 2px; background: var(--accent-tint); color: var(--accent-deep); font-size: var(--text-2xs); font-weight: 600; }

/* Trois colonnes : les six engagements remplissent exactement deux rangées. Avec auto-fit,
   les cellules restantes laissaient apparaitre le fond de la grille. */
.minilab-commitments__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.minilab-commitment { display: grid; align-content: start; gap: 8px; padding: 26px 24px 28px; background: var(--paper); }
.minilab-commitment strong { color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.minilab-commitment p { margin: 0; font-size: var(--text-sm); line-height: 1.65; }
.minilab-origin { margin: 26px 0 0; color: var(--warm-grey); font-size: var(--text-sm); }

/* Avis clients reconstitués depuis les données Google de l'ancien site. */
.section-reviews { background: var(--paper-deep); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 52px; }
.review-card { display: flex; margin: 0; flex-direction: column; gap: 15px; padding: 28px 26px 26px; border: 1px solid var(--line); background: var(--paper); }
.review-card__stars { color: var(--accent); font-size: 14px; letter-spacing: .18em; }
.review-card blockquote { margin: 0; color: #4f4743; font-size: 13px; line-height: 1.75; }
.review-card figcaption { display: grid; gap: 3px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.review-card figcaption strong { color: var(--ink); font-size: 12px; font-weight: 600; }
.review-card figcaption span { color: var(--warm-grey); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* Trio de raccourcis en bas de contenu : cartes plutôt que titres et liens alternés. */
.bsm-linkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 34px 0 40px; }
.bsm-linkcard { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 128px; padding: 20px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease; }
.bsm-linkcard:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.bsm-linkcard strong { color: var(--ink); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.bsm-linkcard span { color: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; }
.bsm-linkcard i { display: inline-block; font-style: normal; transition: transform .25s var(--ease); }
.bsm-linkcard:hover i { transform: translate(3px, -3px); }

/* Blocs reconstruits depuis l'ancien site : surtitres, liens, repères chiffrés, portraits. */
.bsm-kicker { margin: 54px 0 10px; color: var(--accent-strong); font-size: 10px; font-weight: 700; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }
.bsm-kicker:first-child { margin-top: 0; }
.bsm-kicker + h2, .bsm-kicker + h3, .bsm-kicker + h4 { margin-top: 0; }
.bsm-cta { margin: 18px 0 26px; }
.bsm-cta a { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--accent-strong); font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.bsm-cta a::after { content: '↗'; }
.bsm-cta a:hover { color: var(--accent-deep); }

.bsm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 40px 0 44px; border: 1px solid var(--line); background: var(--line); }
.bsm-stat { display: grid; align-content: center; gap: 7px; padding: 26px 22px; background: var(--paper); text-align: left; }
.bsm-stat strong { color: var(--accent-strong); font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.bsm-stat span { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; line-height: 1.45; text-transform: uppercase; }
.bsm-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; margin: 42px 0 48px; }
.bsm-person { margin: 0; }
.bsm-person img { width: 100%; aspect-ratio: 3 / 4; margin: 0; object-fit: cover; object-position: center 22%; background: var(--paper-deep); }
.bsm-person figcaption { display: grid; gap: 3px; margin-top: 14px; text-align: left; }
.bsm-person figcaption strong { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.bsm-person figcaption span { color: var(--accent-strong); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sitemap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.sitemap-grid h2 { margin: 12px 0 27px; font-size: 2.2rem; }
.sitemap-grid ul { margin: 0 0 40px; padding: 0; list-style: none; }
.sitemap-grid li { border-top: 1px solid var(--line); }
.sitemap-grid li a { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; font-size: 12px; }
.sitemap-grid li a:hover { color: #9d5f58; }
.sitemap-grid li span { color: #b4756e; }
.category-strip { padding-block: 24px; background: var(--accent-light); }
.category-strip__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.technology-tile { position: relative; display: flex; min-height: 126px; flex-direction: column; justify-content: space-between; padding: 15px 18px; border-right: 1px solid rgba(33,26,24,.18); transition: background .2s ease; }
.technology-tile:first-child { border-left: 1px solid rgba(33,26,24,.18); }
.technology-tile:hover { background: rgba(255,255,255,.3); }
.technology-tile > span { color: #8a5f58; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.technology-tile strong { max-width: 150px; font-size: 16px; font-weight: 600; line-height: 1.1; }
.technology-tile b { position: absolute; right: 15px; bottom: 13px; font-size: 16px; font-weight: 400; }
.source-longform { padding-top: 40px; background: #f3eee7; }
.product-count { color: var(--muted); font-size: 11px; }
.category-support { padding-block: 88px; background: #eae0d7; }
.category-support__inner { text-align: center; }
.category-support__inner .eyebrow { margin-bottom: 16px; }
.category-support__inner h2 { margin-bottom: 15px; }
.category-support__inner p { max-width: 620px; margin: 0 auto 25px; }

/* Product pages */
.product-hero { padding: 24px 0 68px; color: var(--ink); background: #f0e9e1; }
.product-hero .breadcrumbs { margin: 8px 0 35px; color: #948a84; }
.product-hero .breadcrumbs span:last-child { color: #655b56; }
.product-hero__grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(44px, 8vw, 120px); align-items: center; }
.product-hero__copy { padding-block: 20px; }
.product-hero__copy .eyebrow { margin-bottom: 24px; }
.product-hero__copy h1 { max-width: 730px; margin-bottom: 22px; font-size: clamp(3rem, 5.5vw, 5.7rem); }
.product-hero__copy > p { max-width: 590px; font-size: 14px; line-height: 1.8; }
.product-hero__copy .hero-actions { margin-top: 27px; }
.product-hero__copy .text-link { border: 0; color: #8a5049; }
.product-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-hero__facts span { color: #746a65; font-size: 9px; }
.product-hero__facts span::before { margin-right: 7px; color: #b4756e; content: '✳'; }
.product-hero__visual { position: relative; padding: 22px 22px 26px; background: #e5dbd1; }
.product-hero__photo { height: clamp(360px, 47vw, 570px); overflow: hidden; background: #eae1d8; }
.product-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__caption { display: flex; justify-content: space-between; gap: 20px; padding-top: 14px; color: #6f6660; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.product-hero__index { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: #fff; background: var(--deep); font-size: 10px; }
.product-hero__index i { color: var(--accent-light); font-style: normal; }
.product-detail { background: var(--paper); }
.product-detail__layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(50px, 7vw, 110px); align-items: start; }
.product-detail__aside { position: sticky; top: 125px; padding-top: 4px; }
.product-detail__aside .eyebrow { margin-bottom: 17px; }
.product-detail__aside h2 { margin-bottom: 17px; font-size: clamp(2.4rem, 4vw, 3.7rem); }
.product-detail__aside p { margin-bottom: 23px; font-size: var(--text-sm); line-height: 1.7; }
.product-detail__aside .button { min-height: 50px; padding-inline: 18px; font-size: var(--text-2xs); }
.product-rich-content { max-width: 790px; }
.section-related { background: #f2ece5; }
.section-related .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Fiche réécrite (Épil 808) : titre long, ligne d'offre sous le chapô. */
.product-hero--long-title .product-hero__copy h1 { font-size: clamp(2.5rem, 3.9vw, 4.1rem); line-height: 1.08; }
.product-hero--long-title .product-hero__copy h1 em { color: var(--accent-strong); }
.product-hero__copy > .product-hero__offer { display: inline-block; margin: 2px 0 0; padding: 11px 16px; border-left: 2px solid var(--accent); color: var(--ink); background: rgba(255,255,255,.5); font-size: var(--text-sm); font-weight: 600; line-height: 1.55; }

/* Comparatif : colonne BSM teintée. Sur mobile, chaque ligne devient une carte. */
.bsm-compare { margin: 30px 0 38px; }
.rich-content .bsm-compare table { margin: 0; }
.bsm-compare thead th { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; }
.rich-content .bsm-compare thead th:nth-child(2) { color: #fff; background: var(--accent-strong); }
.bsm-compare tbody th { width: 24%; font-weight: 600; }
.bsm-compare td:first-of-type { color: var(--ink); background: var(--accent-tint); font-weight: 600; }

/* Publics et formules d'équipement, en cartes dans la colonne de texte. */
.bsm-audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 30px 0 38px; }
.bsm-audience { padding: 26px 24px 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-deep); }
.rich-content .bsm-audience h3 { margin: 0 0 10px; font-size: 1.22rem; }
.rich-content .bsm-audience > p { margin-bottom: 14px; }
.rich-content .bsm-audience ul { margin: 0 0 24px; }
.bsm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 26px 0 38px; }
.bsm-option { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.bsm-option--featured { border-color: var(--accent); background: var(--accent-tint); }
.rich-content .bsm-option h3 { margin: 0; font-size: 1.12rem; }
.rich-content .bsm-option p { margin: 0; font-size: var(--text-sm); line-height: 1.65; }
.rich-content .bsm-option .bsm-option__term { color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ============================================================
   Nos solutions : écosystème, accompagnement, pôles technologiques
   ============================================================ */
.inner-hero--long-title h1 { max-width: 1040px; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.04; }
.inner-hero__quote { max-width: 620px; margin-bottom: 0; color: var(--accent-light); font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-style: italic; line-height: 1.4; }

.solutions-intro__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.solutions-intro__grid .section-heading { margin-bottom: 0; }
.solutions-intro__grid h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
.solutions-intro__copy p { max-width: 62ch; margin-bottom: 20px; font-size: var(--text-base); line-height: 1.8; }
.solutions-intro .bsm-stats { margin: clamp(44px, 5vw, 68px) 0 0; }

/* Créateurs de centres et infirmières : bandeau sombre, quatre étapes. */
.solutions-path { position: relative; padding-block: clamp(76px, 9vw, 132px); color: #fff; background: var(--deep); isolation: isolate; }
.solutions-path::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(80% 110% at 85% 10%, rgba(180,117,110,.26), transparent 62%); content: ''; }
.solutions-path__head { max-width: 820px; margin-bottom: clamp(36px, 5vw, 56px); }
.solutions-path__head h2 { margin: 16px 0 20px; font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.solutions-path__head h2 em { color: var(--accent-light); }
.solutions-path__head p { max-width: 60ch; margin: 0; color: rgba(255,255,255,.76); }
.solutions-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 clamp(32px, 4vw, 48px); padding: 0; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.14); list-style: none; }
.solutions-step { display: grid; align-content: start; gap: 10px; padding: 28px 24px 30px; background: var(--deep); }
.solutions-step__number { color: var(--accent-light); font-family: var(--serif); font-size: 1.6rem; font-style: italic; line-height: 1; }
.solutions-step strong { color: #fff; font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.solutions-step p { margin: 0; color: rgba(255,255,255,.72); font-size: var(--text-sm); line-height: 1.65; }

.solutions-institutes { background: var(--paper-deep); }
.solutions-institutes .section-heading h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.solutions-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.solutions-benefit { display: grid; align-content: start; gap: 9px; padding: 28px 24px 30px; background: var(--paper); }
.solutions-benefit strong { color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
.solutions-benefit p { margin: 0; font-size: var(--text-sm); line-height: 1.65; }

/* Pôles : chaque carte mène à la fiche ou à la catégorie correspondante. */
.solutions-poles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.solutions-pole { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); transition: border-color .25s ease, box-shadow .3s ease; }
.solutions-pole:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.solutions-pole__number { color: var(--accent-strong); font-family: var(--serif); font-size: 1.5rem; font-style: italic; line-height: 1; }
.solutions-pole h3 { margin: 4px 0 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.22; }
.solutions-pole p, .solutions-pole li { font-size: var(--text-sm); line-height: 1.7; }
.solutions-pole p { margin: 0; }
.solutions-pole .solutions-pole__tagline { color: var(--deep-2); font-family: var(--serif); font-size: 1.02rem; font-style: italic; line-height: 1.45; }
.solutions-pole ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted); }
.solutions-pole li::marker { color: var(--accent); }
.solutions-pole li strong { color: var(--ink); font-weight: 600; }
.solutions-pole__flagship { display: grid; width: 100%; gap: 2px; padding: 12px 15px; border-left: 2px solid var(--accent); background: var(--accent-tint); }
.solutions-pole__flagship span { color: var(--accent-strong); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.solutions-pole__flagship strong { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.solutions-pole__flagship em { color: var(--accent-deep); font-size: var(--text-xs); font-style: normal; font-weight: 600; }
.solutions-pole .text-link { margin-top: auto; }

.solutions-faq { background: #f4efe9; }
.solutions-faq__inner { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.solutions-faq .section-heading { position: sticky; top: 118px; margin-bottom: 0; }
.solutions-faq .section-heading h2 { font-size: clamp(2.1rem, 2.9vw, 2.9rem); }

/* About and team */
.about-hero { position: relative; min-height: 700px; overflow: hidden; color: #fff; background: #2a201d; isolation: isolate; }
.about-hero__photo, .about-hero__wash { position: absolute; z-index: -2; inset: 0; }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.about-hero__wash { z-index: -1; background: linear-gradient(90deg, rgba(30,22,19,.94) 0%, rgba(30,22,19,.8) 43%, rgba(30,22,19,.15) 100%); }
.about-hero__content { padding-block: 55px 90px; }
.about-hero .breadcrumbs { margin-bottom: 68px; }
.about-hero .eyebrow { margin-bottom: 22px; }
.about-hero h1 { max-width: 780px; margin-bottom: 22px; font-size: clamp(4.2rem, 8vw, 8rem); }
.about-hero h1 em { color: var(--accent-light); }
.about-hero p { max-width: 440px; color: rgba(255,255,255,.75); }
.about-hero .button { margin-top: 17px; }
.about-copy { background: var(--paper); }
.about-copy__lead { display: grid; grid-template-columns: .7fr 1.3fr; gap: 18px 60px; align-items: end; margin-bottom: 50px; }
.about-copy__lead .eyebrow { grid-column: 1 / -1; }
.about-copy__lead h2 { max-width: 650px; }
.about-copy__lead > p { max-width: 330px; margin-bottom: 7px; font-size: 13px; }
/* Colonne unique : le multi-colonnes dissociait les portraits de leurs légendes. */
.about-copy .rich-content { max-width: 860px; }

/* Contact and mailto form */
.contact-hero { padding: 23px 0 86px; background: var(--paper-deep); }
.contact-hero .breadcrumbs { margin: 8px 0 65px; color: #8f8580; }
.contact-hero .breadcrumbs span:last-child { color: #564c47; }
.contact-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: end; }
.contact-hero__grid .eyebrow { margin-bottom: 19px; }
.contact-hero h1 { margin-bottom: 18px; font-size: clamp(4rem, 8vw, 7.6rem); }
.contact-hero h1 em { color: #9d5f58; }
.contact-hero__grid > div:first-child > p { max-width: 530px; margin-bottom: 0; font-size: 14px; }
.contact-hero__note { display: grid; justify-self: end; min-width: min(390px, 100%); gap: 11px; padding: 23px 26px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.42); }
.contact-hero__note > span { margin-bottom: 4px; color: #8a807a; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.contact-hero__note > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; }
.contact-hero__note > a:hover { color: #9d5f58; }
.contact-main { padding-top: 82px; }
.contact-main__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.contact-details .eyebrow { margin-bottom: 16px; }
.contact-details h2 { margin-bottom: 32px; font-size: clamp(3rem, 5vw, 4.7rem); }
.contact-details h2 em { color: var(--accent); }
.contact-detail { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-detail > span { display: block; margin-bottom: 6px; color: #8f8580; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.contact-detail > a, .contact-detail > p { color: #433a36; font-size: 12px; }
.contact-detail > p { margin: 0; }
.contact-detail > p strong { font-weight: 500; }
.contact-detail__map { height: 208px; margin-top: 18px; overflow: hidden; filter: grayscale(1) contrast(.92); }
.contact-detail__map iframe { width: 100%; height: 100%; border: 0; }
/* Carte stylisée : trame de rues décalée (les diagonales symétriques dessinaient une croix). */
.contact-map-card { position: relative; display: flex; min-height: 200px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; overflow: hidden; margin-top: 18px; padding: 24px; background-color: #ece3da; background-image: linear-gradient(118deg, transparent 26%, rgba(255,255,255,.85) 26%, rgba(255,255,255,.85) 30%, transparent 30%), linear-gradient(12deg, transparent 68%, rgba(255,255,255,.7) 68%, rgba(255,255,255,.7) 71%, transparent 71%), linear-gradient(90deg, transparent 18%, rgba(255,255,255,.55) 18%, rgba(255,255,255,.55) 21%, transparent 21%), linear-gradient(0deg, rgba(33,26,24,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(33,26,24,.055) 1px, transparent 1px); background-size: auto, auto, auto, 26px 26px, 26px 26px; transition: filter .25s ease; }
.contact-map-card::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(0deg, rgba(236,227,218,.97) 12%, rgba(236,227,218,.55) 46%, transparent 72%); content: ''; }
/* Repère placé au-dessus du libellé : « Anzin-Saint-Aubin » allonge la ligne jusqu'au centre. */
.contact-map-card::before { position: absolute; z-index: 1; top: 22%; left: 50%; width: 15px; height: 15px; border: 4px solid var(--paper); border-radius: 50% 50% 50% 0; background: var(--accent-strong); box-shadow: 0 4px 12px rgba(33,26,24,.3); content: ''; transform: translate(-50%, -50%) rotate(-45deg); }
.contact-map-card > span, .contact-map-card > strong, .contact-map-card > small, .contact-map-card > b { position: relative; z-index: 1; }
.contact-map-card > span { color: #9c8a85; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.contact-map-card > strong { color: var(--ink); font-family: var(--serif); font-size: 27px; font-weight: 500; }
.contact-map-card > small { color: #7a716b; font-size: 10px; }
.contact-map-card > b { margin-top: 10px; color: #9d5f58; font-size: 9px; font-weight: 700; }
.contact-map-card:hover { filter: saturate(1.16); }
.contact-form-wrap { padding: clamp(24px, 4vw, 52px); background: #f2ece5; }
.contact-form-intro { margin-bottom: 29px; }
.contact-form-intro .eyebrow { margin-bottom: 12px; }
.contact-form-intro h2 { margin-bottom: 10px; font-size: clamp(2.3rem, 3.7vw, 3.55rem); }
.contact-form-intro h2 em { color: #9d5f58; }
.contact-form-intro p { margin: 0; font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 15px; }
.form-grid label { display: grid; gap: 7px; color: #564c47; font-size: 10px; font-weight: 600; }
/* L'intitulé et son astérisque forment une seule ligne de grille. */
.form-grid label > span { display: inline-flex; align-items: baseline; gap: 4px; }
.form-grid label > span > b { color: var(--accent-strong); font-size: 11px; line-height: 1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid rgba(33,26,24,.17); border-radius: 0; outline: none; color: var(--ink); background: rgba(255,255,255,.68); font-size: 11px; transition: border-color .2s ease, box-shadow .2s ease; }
.form-grid select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #746a65 50%), linear-gradient(135deg, #746a65 50%, transparent 50%); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
.form-grid textarea { min-height: 128px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #b4756e; box-shadow: 0 0 0 2px rgba(180,117,110,.26); }
.form-field--full { grid-column: 1 / -1; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 19px; margin-top: 22px; }
.form-submit .button { cursor: pointer; }
.form-submit > p { max-width: 230px; margin: 0; font-size: 9px; }
.form-status { min-height: 20px; margin: 10px 0 0; color: #8a5049; font-size: 11px; }

/* Footer */
.site-footer { padding: 0 var(--pad); color: rgba(255,255,255,.78); background: #1a1312; }
.footer-cta { display: flex; max-width: var(--container); align-items: flex-end; justify-content: space-between; gap: 35px; margin: 0 auto; padding: 82px 0 66px; border-bottom: 1px solid rgba(255,255,255,.16); }
.footer-cta .eyebrow { margin-bottom: 15px; }
.footer-cta h2 { color: #fff; font-size: clamp(2.7rem, 5.3vw, 5rem); }
.footer-cta h2 em { color: var(--accent-light); }
.footer-cta .button { flex: 0 0 auto; margin-bottom: 7px; }
.footer-main { display: grid; max-width: var(--container); grid-template-columns: 1.35fr 1fr 1.25fr 1.2fr; gap: 35px; margin: 0 auto; padding: 52px 0 55px; }
.footer-brand > a { display: grid; justify-items: start; gap: 15px; }
.footer-brand img { width: 150px; height: auto; }
.footer-brand span { color: rgba(255,255,255,.57); font-size: 10px; line-height: 1.65; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column h3 { margin-bottom: 6px; color: #fff; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-column > a, .footer-column > span { color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.7; transition: color .2s ease; }
.footer-column > a:hover { color: var(--accent-light); }
.footer-bottom { display: flex; max-width: var(--container); min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.46); font-size: 8px; }
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: 19px; }
.footer-bottom a { transition: color .2s ease; }
.footer-bottom a:hover { color: var(--accent-light); }
.back-top { white-space: nowrap; }

/* Motion and responsive layout */
/* ============================================================
   Mouvement
   Tout passe par opacity et transform, les seules propriétés que le navigateur
   anime sans recalculer la mise en page.
   ============================================================ */

/* Apparition au défilement. Le décalage entre voisins vient de --card-order. */
.reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--card-order, 0) * 70ms); }
.js-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Entrée de la bannière d'accueil, jouée au chargement plutôt qu'au défilement :
   la section est déjà visible quand la page s'ouvre. */
.js-ready .home-hero__content > * { animation: hero-rise .95s var(--ease) backwards; }
.js-ready .home-hero__content > *:nth-child(1) { animation-delay: .12s; }
.js-ready .home-hero__content > *:nth-child(2) { animation-delay: .22s; }
.js-ready .home-hero__content > *:nth-child(3) { animation-delay: .34s; }
.js-ready .home-hero__content > *:nth-child(4) { animation-delay: .44s; }
.js-ready .home-hero__content > *:nth-child(5) { animation-delay: .54s; }
.js-ready .home-hero .hero-product-card { animation: hero-card-in 1s var(--ease) .7s backwards, float-card 6s ease-in-out 1.7s infinite; }
.js-ready .home-hero .hero-scroll { animation: hero-rise .8s var(--ease) .9s backwards; }
/* Léger zoom arrière de la photo : la bannière cesse d'être une image figée. */
.js-ready .home-hero__photo img { animation: hero-zoom 14s var(--ease) forwards; }
.js-ready .hero-orbit { animation: orbit-in 1.6s var(--ease) .3s backwards; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-card-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes orbit-in { from { opacity: 0; transform: scale(.88) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Bannières des pages intérieures : même principe, en plus sobre. */
.js-ready .inner-hero__content > *, .js-ready .about-hero__content > *, .js-ready .contact-hero__grid > *, .js-ready .product-hero__copy > *, .js-ready .product-hero__visual { animation: hero-rise .8s var(--ease) backwards; }
.js-ready .inner-hero__content > *:nth-child(2), .js-ready .about-hero__content > *:nth-child(2), .js-ready .product-hero__copy > *:nth-child(2) { animation-delay: .09s; }
.js-ready .inner-hero__content > *:nth-child(3), .js-ready .about-hero__content > *:nth-child(3), .js-ready .product-hero__copy > *:nth-child(3) { animation-delay: .18s; }
.js-ready .inner-hero__content > *:nth-child(4), .js-ready .about-hero__content > *:nth-child(4), .js-ready .product-hero__copy > *:nth-child(4) { animation-delay: .27s; }
.js-ready .inner-hero__content > *:nth-child(5), .js-ready .product-hero__copy > *:nth-child(5) { animation-delay: .36s; }
.js-ready .product-hero__copy > *:nth-child(6) { animation-delay: .45s; }
.js-ready .product-hero__visual { animation-delay: .2s; }

/* Transition entre les pages. Le navigateur qui ne connaît pas cette règle
   navigue normalement : rien à charger, aucun script. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .22s var(--ease) both; }
::view-transition-new(root) { animation: page-in .34s var(--ease) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes scroll-line { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } }

@media (max-width: 1180px) {
  :root { --pad: clamp(24px, 4vw, 56px); }
  .site-header__inner { gap: 18px; }
  .brand { width: 124px; flex-basis: 124px; }
  .nav-list { gap: 2px; }
  .nav-link { padding-inline: 8px; }
  .header-search { width: 186px; }
  .header-contact { padding-inline: 13px; }
  .home-hero h1 { font-size: clamp(4.25rem, 9vw, 7.6rem); }
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; }
}

@media (max-width: 920px) {
  :root { --pad: 28px; }
  /* Le filtre d'arrière-plan de l'en-tête sert de bloc conteneur aux éléments en position
     fixe : il empêchait le menu mobile de couvrir l'écran (hauteur réduite à 48 px). */
  .site-header, .site-header.is-scrolled { background: var(--paper); backdrop-filter: none; }
  .site-header__inner { min-height: 72px; }
  .brand { width: 122px; flex-basis: 122px; }
  .header-search { display: none; }
  .header-contact { display: none; }
  .menu-toggle { display: block; }

  /* Menu mobile : panneau plein écran, défilable, sous l'en-tête. */
  .primary-nav { position: fixed; z-index: var(--z-panel); top: var(--header-offset, 110px); right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; overflow-y: auto; padding: 8px var(--pad) 40px; background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s; overscroll-behavior: contain; }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { min-height: 58px; justify-content: space-between; padding-inline: 0; font-size: 1.05rem; font-weight: 500; }
  .nav-link::after { display: none; }
  .nav-link__chevron { width: 12px; height: 8px; }

  .nav-panel { position: static; max-height: 0; overflow: hidden; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height .35s var(--ease); }
  .nav-item--has-panel.is-open .nav-panel { max-height: 720px; }
  .nav-panel__inner { display: flex; width: 100%; flex-direction: column; gap: 18px; padding-block: 0 22px; }
  .nav-panel__intro { display: none; }
  .nav-panel__groups { grid-template-columns: 1fr; gap: 14px; }
  .nav-panel__group a { padding: 10px 0; font-size: var(--text-sm); }
  .nav-panel__feature { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
  .nav-panel__feature img { width: 76px; height: 76px; flex: 0 0 76px; margin: 0; }
  .nav-panel__badge, .nav-panel__text { display: none; }
  .nav-panel__feature strong { font-size: 1.05rem; }

  .nav-mobile-extra { display: grid; gap: 14px; margin-top: 28px; }
  .nav-mobile-extra .header-search { display: flex; width: 100%; height: 50px; }
  .nav-mobile-extra .button { width: 100%; }
  .nav-mobile-call { justify-self: center; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
  body.nav-open { overflow: hidden; }
  .home-hero { min-height: min(760px, calc(100svh - 109px)); }
  .hero-product-card { width: 255px; grid-template-columns: 72px 1fr; }
  .hero-product-card > img { width: 72px; height: 68px; }
  .home-proof { grid-template-columns: 1fr 1.25fr 1fr; }
  .home-proof > a { display: none; }
  .category-cards { grid-template-columns: 1fr 1fr; }
  .category-card:first-child { grid-column: 1 / -1; min-height: 410px; }
  .story-band { grid-template-columns: .85fr 1.15fr; }
  .story-band__content { padding-inline: 34px; }
  .story-band__stamp { width: 90px; height: 90px; right: 22px; bottom: 20px; }
  .support-card { min-height: 330px; padding: 21px; }
  .partner-band__inner { gap: 40px; }
  .footer-main { grid-template-columns: 1.2fr 1fr 1.1fr; }
  .footer-contact { grid-column: 2 / 4; }
  .product-hero__grid { gap: 35px; }
  .product-detail__layout { grid-template-columns: 220px minmax(0, 1fr); gap: 50px; }
  .about-copy__lead { grid-template-columns: 1fr; }
  .about-copy__lead .eyebrow { grid-column: auto; }
  .about-copy__lead > p { max-width: 600px; }
  .contact-main__grid { gap: 42px; }
  .solutions-steps, .solutions-benefits, .solutions-poles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root { --pad: 21px; }
  .minilab-commitments__grid, .minilab-families { grid-template-columns: minmax(0, 1fr); }
  body { font-size: 1rem; }
  /* La mise en page éditoriale repasse sur une colonne, sinon les repères chiffrés
     débordaient de l'écran (largeur de défilement 559 px pour 390 px visibles). */
  .home-source > .container { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .innovation-band__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .minilab-water__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .minilab-commitments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minilab-hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .minilab-hero__image img { height: clamp(200px, 48vw, 280px); }
  .innovation-band__copy, .innovation-list, .innovation-award { grid-column: auto; grid-row: auto; }
  .home-source .section-heading { position: static; }
  .topline { height: 31px; font-size: 8px; }
  .topline__inner > span { max-width: 100%; gap: 8px; }
  .topline__inner > span .status-dot { display: none; }
  .topline__inner > a { display: none; }
  .site-header__inner { width: 100%; min-height: 69px; gap: 10px; padding-inline: var(--pad); }
  .brand { width: 110px; flex-basis: 110px; }
  .header-actions { margin-left: auto; gap: 9px; }
  .menu-toggle { width: 42px; height: 42px; }
  .nav-link { min-height: 54px; font-size: 1rem; }
  .home-hero { min-height: min(760px, calc(100svh - 100px)); min-height: clamp(650px, calc(100svh - 100px), 790px); }
  .home-hero__photo img { object-position: 57% center; }
  .home-hero__veil { background: linear-gradient(90deg, rgba(26,19,17,.88), rgba(26,19,17,.5) 100%), linear-gradient(0deg, rgba(26,19,17,.75), transparent 70%); }
  .home-hero__content { justify-content: flex-start; padding-block: 75px 145px; }
  .home-hero__content .eyebrow { max-width: 280px; margin-bottom: 24px; font-size: 8px; }
  .home-hero h1 { max-width: calc(100vw - var(--pad) * 2); margin-bottom: 18px; font-size: clamp(2.65rem, 12.5vw, 4rem); }
  .home-hero__content > p { max-width: 350px; font-size: 13px; }
  .hero-actions { align-items: flex-start; gap: 9px; margin-top: 23px; }
  .hero-actions .button { min-height: 47px; gap: 13px; padding-inline: 14px; font-size: 9px; }
  .hero-product-card { right: auto; bottom: 53px; left: var(--pad); width: min(265px, calc(100vw - var(--pad) * 2)); grid-template-columns: 66px 1fr; padding: 8px; animation: none; }
  .hero-product-card > img { width: 66px; height: 59px; }
  .hero-product-card strong { font-size: 13px; }
  .hero-product-card > div > span { font-size: 7px; }
  .hero-product-card a { font-size: 8px; }
  .hero-scroll { display: none; }
  .home-hero__foot { bottom: 12px; align-items: flex-start; flex-direction: column; gap: 2px; font-size: 7px; }
  .hero-orbit--one { top: -90px; right: -55%; width: 120vw; }
  .hero-orbit--two { top: 5px; right: -30%; width: 90vw; }
  .home-proof { grid-template-columns: 1fr 1fr; gap: 17px 6px; padding-block: 19px; }
  .home-proof > div { align-items: center; padding: 2px 8px; text-align: center; }
  .home-proof > div:nth-child(2) { border-right: 0; }
  .home-proof > div > strong { font-size: 16px; }
  .home-proof > div > span { font-size: 8px; }
  .section { padding-block: 76px; }
  .section-heading--split { align-items: flex-start; flex-direction: column; gap: 20px; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2 { font-size: clamp(2.55rem, 12vw, 3.9rem); }
  .section-heading > p { max-width: 450px; font-size: 12px; }
  .category-cards { grid-template-columns: 1fr; gap: 10px; }
  .category-card, .category-card:first-child { min-height: 350px; grid-column: auto; }
  .category-card:first-child { min-height: 390px; }
  .category-card h3 { font-size: 3.1rem; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 11px; }
  .product-card__image { aspect-ratio: .88 / 1; }
  .product-card__number { top: 9px; left: 9px; font-size: 7px; }
  .product-card__arrow { right: 8px; bottom: 8px; width: 30px; height: 30px; font-size: 14px; }
  .product-card__meta { min-height: 31px; gap: 4px; margin-top: 5px; font-size: 7px; letter-spacing: .04em; }
  .product-card h3 { min-height: 44px; margin: 2px 0 8px; font-size: 13px; }
  .product-card .text-link { font-size: 8px; }
  .story-band { grid-template-columns: 1fr; }
  .story-band__image { min-height: 390px; max-height: 470px; }
  .story-band__image > img { min-height: 390px; object-position: center 33%; }
  .story-band__image::after { background: linear-gradient(0deg, var(--deep), transparent 47%); }
  .story-band__content { padding: 20px var(--pad) 77px; }
  .story-band__content h2 { font-size: clamp(3.2rem, 13vw, 4.7rem); }
  .story-band__content p { font-size: 12px; }
  .story-band__stamp { right: 21px; top: 20px; bottom: auto; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card { min-height: 270px; padding: 23px; }
  .support-card h3 { margin-top: 35px; font-size: 2.4rem; }
  .support-card--quote blockquote { margin: 23px 0; }
  .home-source { padding-top: 68px; }
  .home-source .rich-content { font-size: 12px; }
  .partner-band { padding-block: 72px; }
  .partner-band__inner { grid-template-columns: 1fr; gap: 35px; }
  .partner-band__inner h2 { font-size: 3.4rem; }
  .partner-band__marks { grid-template-columns: 80px 1fr 1fr; gap: 10px; }
  .partner-band__marks > img { width: 72px; height: 72px; }
  .partner-band__marks > span { min-height: 72px; font-size: 13px; }
  .home-end-cta h2 { font-size: clamp(3.5rem, 15vw, 5.5rem); }
  .footer-cta { align-items: flex-start; flex-direction: column; padding-block: 65px 47px; }
  .footer-cta h2 { font-size: 3.1rem; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-block: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 13px; padding-block: 18px; }
  .footer-bottom > div { gap: 10px 14px; }
  .back-top { display: none; }
  .inner-hero { min-height: 530px; }
  .inner-hero--compact { min-height: 340px; }
  .inner-hero__content { padding-block: 35px; }
  .breadcrumbs { gap: 7px; margin-bottom: 45px; font-size: 8px; }
  .inner-hero h1 { font-size: clamp(3.2rem, 13vw, 5.5rem); }
  .inner-hero__lead { font-size: 12px; }
  .page-content-section { padding-top: 65px; }
  .rich-content { font-size: 12px; line-height: 1.8; }
  .rich-content h2 { margin-top: 52px; font-size: 2.25rem; }
  .rich-content h3 { margin-top: 37px; font-size: 1.45rem; }
  .sitemap-grid { grid-template-columns: 1fr; gap: 18px; }
  .sitemap-grid h2 { font-size: 1.8rem; }
  .category-strip { overflow-x: auto; }
  .category-strip__grid { width: max-content; min-width: 100%; grid-template-columns: repeat(5, minmax(145px, 1fr)); }
  .technology-tile { min-height: 105px; padding: 12px; }
  .technology-tile strong { font-size: 13px; }
  .inner-hero--category { min-height: 500px; }
  .product-hero { padding: 13px 0 43px; }
  .product-hero .breadcrumbs { margin: 10px 0 25px; }
  .product-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .product-hero__copy { padding: 0; }
  .product-hero__copy .eyebrow { margin-bottom: 16px; font-size: 8px; }
  .product-hero__copy h1 { margin-bottom: 15px; font-size: clamp(2.9rem, 11.4vw, 4.4rem); }
  .product-hero__copy > p { font-size: 12px; }
  .product-hero__copy .hero-actions { gap: 13px; margin-top: 17px; }
  .product-hero__copy .hero-actions .button { width: 100%; }
  .product-hero__facts { gap: 7px 12px; margin-top: 24px; }
  .product-hero__facts span { font-size: 8px; }
  .product-hero__visual { padding: 12px 12px 17px; }
  .product-hero__photo { height: min(107vw, 450px); }
  .product-detail__layout { grid-template-columns: 1fr; gap: 38px; }
  .product-detail__aside { position: static; }
  .product-detail__aside h2 { font-size: 2.8rem; }
  .product-detail__aside p { max-width: 450px; }
  .section-related .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-hero { min-height: 730px; }
  .about-hero__photo img { object-position: 68% center; }
  .about-hero__wash { background: linear-gradient(90deg, rgba(30,22,19,.88), rgba(30,22,19,.43)), linear-gradient(0deg, rgba(30,22,19,.55), transparent 65%); }
  .about-hero__content { padding-block: 30px 60px; }
  .about-hero .breadcrumbs { margin-bottom: 58px; }
  .about-hero h1 { font-size: clamp(4rem, 16vw, 6.5rem); }
  .about-copy__lead { gap: 15px; margin-bottom: 38px; }
  .about-copy__lead h2 { font-size: 2.75rem; }
  .contact-hero { padding: 13px 0 55px; }
  .contact-hero .breadcrumbs { margin: 10px 0 45px; }
  .contact-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-hero h1 { font-size: clamp(4rem, 15vw, 6rem); }
  .contact-hero__grid > div:first-child > p { font-size: 12px; }
  .contact-hero__note { width: 100%; justify-self: stretch; }
  .contact-main { padding-top: 60px; }
  .contact-main__grid { grid-template-columns: 1fr; gap: 47px; }
  .contact-details h2 { font-size: 3.8rem; }
  .contact-form-wrap { padding: 24px 18px; }
  .contact-form-intro h2 { font-size: 2.4rem; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-field--full { grid-column: auto; }
  .form-submit { align-items: flex-start; flex-direction: column; }
  .form-submit > p { max-width: none; }

  .product-hero--long-title .product-hero__copy h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .product-hero__copy > .product-hero__offer { font-size: 12px; }
  .bsm-compare thead { display: none; }
  .bsm-compare table, .bsm-compare tbody, .bsm-compare tr, .bsm-compare th, .bsm-compare td { display: block; width: 100%; }
  .bsm-compare tbody th { width: auto; }
  .bsm-compare tr { margin-bottom: 10px; border: 1px solid var(--line); }
  .rich-content .bsm-compare th, .rich-content .bsm-compare td { border: 0; }
  .rich-content .bsm-compare td + td { border-top: 1px solid var(--line); }
  .bsm-compare td::before { display: block; margin-bottom: 2px; color: var(--warm-grey); content: attr(data-label); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

  .inner-hero--long-title h1 { font-size: clamp(2.1rem, 8.6vw, 3rem); }
  .inner-hero__quote { font-size: 1.15rem; }
  .page-nos-solutions .section-heading h2, .solutions-path__head h2 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .solutions-intro__grid, .solutions-faq__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .solutions-intro__copy p { font-size: 13px; }
  .solutions-faq .section-heading { position: static; }
  .solutions-steps, .solutions-benefits, .solutions-poles__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready .reveal:not(.is-visible) { opacity: 1; transform: none; }
}