/* VFP Ink Technologies — global styles
   Palette calibrée d'après le site officiel vfp-ink-technologies.com :
   fond blanc quasi pur, rouge VFP vif en accent, texte gris très foncé. */
:root {
  --vfp-red: #E3032E;        /* rouge VFP plus vif */
  --ink: #9EA0A4;            /* gris clair VFP principal — ne pas repasser en noir */
  /* Neutres légèrement teintés rouge VFP — chroma faible, quasi neutres */
  --paper: #FEFCFC;          /* ~ oklch(99.5% 0.002 25) */
  /* Nuances dérivées */
  --ink-2: rgba(31,31,31,0.78);
  --paper-2: #F7F4F3;              /* ~ oklch(96.5% 0.003 25) */
  --paper-3: #EDE9E8;              /* ~ oklch(93.5% 0.004 25) */
  --graphite: rgba(31,31,31,0.68);  /* WCAG AA ≥ 4.5:1 sur paper */
  --ink-soft: #9EA0A4;             /* texte tertiaire / méta sur fond sombre */
  --line: rgba(31,31,31,0.12);
  --line-strong: rgba(31,31,31,0.4);
  /* Surfaces & bordures sur fond ink (KPI dark, sections sombres) */
  --paper-on-ink: #ffffff;
  --paper-on-ink-soft: rgba(255,255,255,0.85);   /* lead/body sur fond sombre */
  --paper-on-ink-mute: rgba(255,255,255,0.7);    /* eyebrow/meta sur fond sombre */
  --line-on-ink: #3B3F45;
  --meta-on-ink: #E8E8E6;
  /* Tokens statut (pills certifications, badges) */
  --status-warn-bg: #F4E5D6;       /* tan clair, contraste suffisant pour rouge */
  --status-warn-fg: #8A1F00;       /* rouge foncé, AA ≥ 4.5:1 sur status-warn-bg */
  --status-ok-bg: #E8F0E8;
  --status-ok-fg: #1a6b3a;
  /* Tokens carte (FranceMap, WorldMap, SalesSection) */
  --map-bg: #2A2A2E;
  --map-stroke: #3B3F45;
  --map-grid: #DEDEDC;
  --map-pin-stroke: #D8223A;
  --font-display: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* Easing — courbes recommandées pour micro-interactions */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --density: 1;
  --header-height: 67px;
  /* Hauteur de la barre d'ancres sticky (.section-nav), mesurée sur le rendu.
     Les éléments sticky posés SOUS elle doivent s'en décaler, sinon leur haut
     passe dessous (elle est en z-index 30). */
  --section-nav-height: 76px;
  --lead-width: 66.6667%;          /* sous-titres (.lead) = 2/3 de la largeur de page */
}
/* Mobile : le lead reprend toute la largeur (2/3 deviendrait illisible) */
@media (max-width: 600px) { :root { --lead-width: 100%; } }
/* Dans une grille / un split multi-colonnes, titres et leads occupent 100% de leur colonne
   (le 2/3 ne vaut que pour les blocs pleine largeur à une seule colonne) */
[class*="grid"], [class*="split"] { --lead-width: 100%; }
@supports (color: oklch(0% 0 0)) {
  :root {
    --paper: oklch(99.5% 0.002 25);
    --paper-2: oklch(96.5% 0.003 25);
    --paper-3: oklch(93.5% 0.004 25);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
::selection { background: var(--vfp-red); color: var(--paper); }
p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  white-space: pre-line !important;
}

/* Skip link — visible on focus only, top-left, above all UI */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 4px; transform: translateY(-200%); transition: transform 0.18s var(--ease-out-quart);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--vfp-red); outline-offset: 2px; }
main:focus { outline: none; }
/* Focus-visible global — clavier uniquement, halo rouge VFP */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 3px; border-radius: 2px; }
/* Form controls : focus-visible explicite, offset reduit pour ne pas chevaucher la bordure du champ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 2px;
}
/* Sections sombres : focus en blanc cassé pour visibilité */
.section.dark :focus-visible,
.about-tabs button:focus-visible { outline-color: var(--vfp-red); outline-offset: 4px; }

/* Grid helper */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); }
@media (max-width: 600px) { .container { padding: 0 20px; } }
@media (max-width: 380px) { .container { padding: 0 16px; } }

/* Top nav — 3-column flex: brand | nav | actions. No absolute positioning to avoid overlap. */
.topbar { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.topbar > .container { position: relative; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 2vw, 40px); position: relative; flex-wrap: nowrap; }
.topbar-inner > .brand { flex: 0 0 auto; }
.topbar-inner > .nav-right { flex: 0 0 auto; margin-left: auto; }
.navlinks { display: flex; gap: clamp(16px, 1.6vw, 28px); font-size: 14px; font-weight: 500; flex: 1 1 auto; justify-content: center; min-width: 0; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.brand img { height: 34px; width: auto; }
.topbar-inner > .brand img { height: 44px; }
.navlinks a { position: relative; padding: 8px 0; color: var(--ink); opacity: 0.85; transition: opacity 0.15s; }
.navlinks a:hover, .navlinks a.active { opacity: 1; }
.navlinks a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 2px; background: var(--vfp-red); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.topbar-search-btn {
  background: transparent; border: 1px solid var(--line);
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.topbar-search-btn:hover { background: var(--paper-2); border-color: var(--ink); }
.topbar-search-btn:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 2px; }
.lang-switch { display: flex; gap: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; background: var(--paper-2); border-radius: 999px; padding: 4px; }
.lang-switch button { border: 0; background: transparent; min-height: 32px; min-width: 36px; padding: 8px 12px; border-radius: 999px; color: var(--graphite); font-size: 11px; font-family: inherit; letter-spacing: 0.08em; }
.lang-switch button.on { background: var(--vfp-red); color: var(--paper); }
.lang-switch button:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 500; font-size: 14px; border: 1px solid transparent; transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart); white-space: nowrap; }
.btn-primary { background: var(--vfp-red); color: var(--paper); }
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--vfp-red); }
/* CTA section fond rouge : btn-dark ne doit pas devenir rouge sur hover */
.section.dark[style*="--vfp-red"] .btn-dark:hover,
.cta-grid .btn-dark:hover { background: var(--paper); color: var(--ink); }

/* Mega menu — full-width panel, aligned with global container */
.navlinks a.open { opacity: 1; }
.navlinks a.open::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 2px; background: var(--vfp-red); }
.megamenu-wrap {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -12px rgba(31,31,31,0.08);
  z-index: 55;
  animation: mmFade 0.22s ease;
  /* Garde-fou : le panneau ne dépasse jamais le bas de la fenêtre, quel que soit
     le nombre d'entrées piloté depuis le BO. 100% = hauteur de .topbar, seul
     ancêtre positionné, donc le bloc conteneur de ce panneau absolu. */
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes mmFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.megamenu {
  /* Rythme vertical centralisé : la densification par hauteur d'écran plus bas
     ne réécrit que ces variables, pas les règles de mise en forme. */
  --mm-pad-top: 48px;
  --mm-pad-bottom: 8px;
  --mm-col-pad-bottom: 40px;
  --mm-kicker-gap: 18px;
  --mm-row-pad: 7px;
  --mm-link-size: 14px;
  --mm-feature-pad: 36px 32px;
  --mm-feature-title: 26px;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.1fr 1.1fr;
  gap: 0;
  padding: var(--mm-pad-top) 0 var(--mm-pad-bottom);
  text-align: left;
  position: relative;
}
/* Menus hors "produits" : nb de colonnes piloté par --mm-cols (groupes) + la carte feature, pour occuper toute la largeur comme "Nos produits". */
.megamenu.megamenu-about {
  grid-template-columns: repeat(var(--mm-cols, 2), minmax(0, 1fr)) 1.15fr;
}
.megamenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent);
}
.mm-col { padding: 0 36px var(--mm-col-pad-bottom, 40px) 0; border-right: 1px solid var(--line); }
.mm-col:first-child { padding-left: 0; }
.mm-col + .mm-col { padding-left: 36px; }
.mm-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--ink); font-weight: 700; text-transform: uppercase;
  margin-bottom: var(--mm-kicker-gap, 18px);
  line-height: 1.5;
}
.mm-kicker-sub { color: var(--ink); font-weight: 700; }
.mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-list li a {
  display: block;
  font-size: var(--mm-link-size, 14px);
  padding: var(--mm-row-pad, 7px) 0;
  color: var(--ink);
  position: relative;
  transition: color 0.15s, padding-left 0.2s;
}
.mm-list li a::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  width: 6px; height: 1px; background: var(--vfp-red);
  opacity: 0; transform: translateY(-50%);
  transition: opacity 0.15s, left 0.2s;
}
.mm-list li a:hover { color: var(--vfp-red); padding-left: 14px; }
.mm-list li a:hover::before { opacity: 1; left: 0; }
.mm-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--vfp-red); text-transform: uppercase;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  width: 100%;
  transition: gap 0.2s;
}
.mm-all:hover { gap: 14px; }
.mm-all span { transition: transform 0.2s; }
.mm-all:hover span { transform: translateX(3px); }

.mm-feature {
  background: var(--ink);
  color: var(--paper);
  padding: var(--mm-feature-pad, 36px 32px);
  margin: calc(-1 * var(--mm-pad-top, 48px)) -24px calc(-1 * var(--mm-pad-bottom, 8px)) 0;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  border-left: 0;
}
.mm-feature::before {
  content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; background: var(--vfp-red);
}
.mm-feature-title {
  font-family: var(--font-display); font-size: var(--mm-feature-title, 26px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.08; color: var(--paper);
  display: inline-block;
  transition: color 0.15s;
}
.mm-feature-title span { color: var(--vfp-red); margin-left: 4px; transition: margin-left 0.2s; display: inline-block; }
.mm-feature-title:hover span { margin-left: 10px; }
.mm-feature-desc { font-size: 13px; color: var(--paper-2); line-height: 1.55; opacity: 0.8; }
.mm-feature-stats {
  display: flex; gap: 28px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mm-feature-stats > div { display: flex; flex-direction: column; gap: 2px; }
.mm-feature-stats b {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; color: var(--paper);
}
.mm-feature-stats span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-2); opacity: 0.7;
}

@media (max-width: 1200px) {
  .megamenu { grid-template-columns: 1fr 1fr 1fr; }
  .megamenu.megamenu-about { grid-template-columns: repeat(var(--mm-cols, 2), minmax(0, 1fr)); }
  .mm-feature { grid-column: 1 / -1; margin: 16px 0 0; }
}

/* Écrans peu hauts (portables 13-14", fenêtre non plein écran) : on densifie le
   panneau pour qu'il n'avale pas la fenêtre et laisse voir la page en dessous.
   Critère = hauteur de viewport, pas largeur : c'est elle qui pose le problème. */
@media (max-height: 860px) {
  .megamenu {
    --mm-pad-top: 26px;
    --mm-col-pad-bottom: 22px;
    --mm-kicker-gap: 12px;
    --mm-row-pad: 4px;
    --mm-link-size: 13.5px;
    --mm-feature-pad: 24px 26px;
    --mm-feature-title: 21px;
  }
  .mm-kicker { font-size: 11px; }
  .mm-all { margin-top: 12px; padding-top: 11px; }
  .mm-feature { gap: 10px; }
  .mm-feature-desc { font-size: 12.5px; }
  .mm-feature-stats { gap: 22px; padding-top: 12px; }
  .mm-feature-stats b { font-size: 18px; }
  .mm-feature-stats span { font-size: 11px; }
}

/* Headings */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--vfp-red); display: inline-block; }
.h-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 0.98; font-size: clamp(44px, 6vw, 92px); margin: 0; text-wrap: balance; max-width: var(--lead-width); }
.h-section { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(34px, 4.2vw, 58px); margin: 0; text-wrap: balance; max-width: var(--lead-width); }
.h-sub { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; font-size: clamp(22px, 2vw, 28px); margin: 0; line-height: 1.15; }
.section-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--vfp-red); }
.lead { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--graphite); max-width: var(--lead-width); }

/* Section */
section.section { padding: clamp(72px, 10vw, 140px) 0; border-bottom: 1px solid var(--line); }
section.section.dark { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink-2); }
section.section.dark .lead { color: var(--paper-2); }
section.section.dark .eyebrow { color: var(--paper-2); }

/* Cards, badges */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.badge.dark { border-color: var(--ink-2); color: var(--paper-2); }
.badge.red { background: var(--vfp-red); color: var(--paper); border-color: var(--vfp-red); }

.product-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart); cursor: pointer; }
.product-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18); }
.product-thumb { position: relative; aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden; }
.product-thumb::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,0.03) 10px 11px); }
.product-thumb .swatch { position: absolute; left: 24px; right: 24px; top: 24px; bottom: 24px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.product-thumb .ref { position: absolute; left: 16px; top: 16px; z-index: 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--graphite); background: rgba(250,250,247,0.9); padding: 4px 8px; border-radius: 2px; }
.product-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.product-sub { font-size: 13px; color: var(--graphite); line-height: 1.4; }
.product-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.product-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.arrow { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-size: 14px; transition: transform 0.2s; }
.product-card:hover .arrow { transform: translateX(3px); background: var(--vfp-red); }

/* Footer — fond gris clair VFP (--ink), tokens de texte scopés pour rester lisibles dessus */
footer.site-footer {
  --foot-fg: rgba(255, 255, 255, 0.85);
  --foot-fg-strong: var(--paper);
  --foot-fg-mute: rgba(255, 255, 255, 0.68);
  --foot-line: rgba(255, 255, 255, 0.24);
  --foot-line-strong: rgba(255, 255, 255, 0.38);
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--foot-fg);
  padding: clamp(48px, 6vw, 76px) 0 26px;
  border-top: 1px solid var(--foot-line);
}
/* Liseré d'accent rouge en tête de footer (trait actif, usage rouge autorisé) */
footer.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--vfp-red);
}
footer.site-footer a { color: var(--foot-fg); font-size: 13px; transition: color 0.22s var(--ease-out-quart); }
footer.site-footer a:hover { color: var(--foot-fg-strong); }
footer.site-footer .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; margin-bottom: clamp(16px, 2vw, 22px); }
/* min-width:0 sur chaque colonne : sans ça, une piste fr garde min-width:auto et refuse de
   passer sous la largeur de son plus long lien (ex. « Fiches de Sécurité des produits »),
   ce qui dilate la grille au-delà du container et coupe le contenu de droite (incident footer). */
footer.site-footer .foot-col { min-width: 0; }
footer.site-footer .foot-col li a { overflow-wrap: break-word; }
footer.site-footer .foot-col h5 {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foot-fg-strong);
  margin: 0 0 16px;
  padding-top: 12px;
}
/* Tick rouge au-dessus de chaque titre de colonne */
footer.site-footer .foot-col h5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--vfp-red);
}
footer.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
/* Liens de navigation : soulignement révélé au hover, sans reflow (background-size) */
footer.site-footer .foot-col li a {
  display: inline;
  color: var(--foot-fg);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.22s var(--ease-out-quart), background-size 0.32s var(--ease-out-quart);
}
footer.site-footer .foot-col li a:hover { color: var(--foot-fg-strong); background-size: 100% 1px; }
footer.site-footer .foot-bottom {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  font-size: 11px;
  color: var(--foot-fg-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
/* Les 3 zones (copyright · liens légaux · badge TPMGE) peuvent rétrécir et se replier :
   le badge reste toujours visible au lieu d'être poussé hors écran. */
footer.site-footer .foot-bottom > span { min-width: 0; }
footer.site-footer .foot-credit { flex: 0 0 auto; margin-left: auto; }
footer.site-footer .foot-bottom a:hover { color: var(--foot-fg-strong); }
footer.site-footer .foot-cookie-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.85;
}
footer.site-footer .foot-cookie-btn:hover { opacity: 1; color: var(--foot-fg-strong); }
footer.site-footer .brand img { filter: none; }
/* Bandeau Contact — pleine largeur, infos alignées sur une seule ligne sous la grille */
footer.site-footer .foot-grid > .foot-col:last-child {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--foot-line);
}
footer.site-footer .foot-grid > .foot-col:last-child > h5 { margin: 0; padding-top: 0; flex-shrink: 0; }
/* Tick rouge repositionné inline (trait avant le label, cohérent en disposition horizontale) */
footer.site-footer .foot-grid > .foot-col:last-child > h5::before {
  position: static;
  display: inline-block;
  width: 12px;
  margin-right: 9px;
  vertical-align: middle;
}
footer.site-footer .foot-grid > .foot-col:last-child ul {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
}
footer.site-footer .foot-grid > .foot-col:last-child .foot-contact-li--address { margin-top: 0; }

/* Page transitions */
.page-enter { animation: pageEnter 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Mobile menu */
.menu-btn { display: none; }
@media (max-width: 1180px) {
  .navlinks { display: none !important; }
  .menu-btn { display: inline-flex; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 12px; color: var(--ink); align-items: center; justify-content: center; }
  .topbar-inner { gap: 12px; }
  /* Une fois la nav repliee dans le tiroir hamburger, le CTA Contact et le
     selecteur de langue vivent dans le drawer (dfoot). On masque leurs copies
     top-bar pour que .nav-right reste etroit et ne deborde jamais sur petit
     ecran. Le hamburger reste le point d'entree unique de la navigation. */
  .nav-right .btn-primary,
  .nav-right .lang-switch { display: none; }
  .lang-switch { padding: 3px; }
  .lang-switch button { padding: 5px 8px; font-size: 12px; }
  /* Brand stays left, actions stay right, nav collapses into the drawer. No absolute hack needed. */
}
@media (max-width: 1024px) {
  footer.site-footer { padding: 32px 0 16px; }
  footer.site-footer .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin-bottom: 24px; }
  footer.site-footer .foot-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  footer.site-footer .foot-credit { margin-left: 0; }
}

/* Mobile drawer */
.topbar .mobile-drawer { position: fixed; inset: 0; background: rgba(10,10,11,0.45); z-index: 100; display: none; backdrop-filter: blur(2px); }
.topbar .mobile-drawer.open { display: block; animation: drawerFade 0.2s ease; }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
.topbar .mobile-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(88vw, 380px); background: var(--paper); padding: 0; display: flex !important; flex-direction: column !important; box-shadow: -10px 0 40px rgba(0,0,0,0.18); overflow: hidden; animation: drawerSlide 0.28s cubic-bezier(.2,.8,.2,1); }
@keyframes drawerSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.topbar .mobile-drawer .dhead { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.topbar .mobile-drawer .dclose { background: transparent; border: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); border-radius: 999px; transition: background 0.15s; }
.topbar .mobile-drawer .dclose:hover { background: var(--bone); }

.topbar .mobile-drawer .dnav { display: flex; flex-direction: column; padding: 8px 24px 24px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.topbar .mobile-drawer-panel .dnav-item { border-bottom: 1px solid var(--line); }
.topbar .mobile-drawer-panel .dnav-item:last-child { border-bottom: 0; }
.topbar .mobile-drawer-panel .dnav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar .mobile-drawer-panel .dnav-row > a { display: flex !important; align-items: baseline; gap: 16px; padding: 18px 0 !important; border-bottom: 0 !important; font-family: var(--font-display); font-size: 28px !important; font-weight: 500; letter-spacing: -0.015em; color: var(--ink) !important; opacity: 1 !important; position: static !important; flex: 1; line-height: 1.1; }
.topbar .mobile-drawer-panel .dnav-row > a::after { display: none !important; }
.topbar .mobile-drawer-panel .dnav-row > a .dnum { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; color: var(--graphite); min-width: 22px; }
.topbar .mobile-drawer-panel .dnav-row > a.active .dlabel { color: var(--vfp-red); }
.topbar .mobile-drawer-panel .dnav-row > a.active .dnum { color: var(--vfp-red); }
.topbar .mobile-drawer-panel .dnav-chev { background: transparent; border: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); border-radius: 999px; transition: background 0.15s, transform 0.2s ease; flex: 0 0 auto; }
.topbar .mobile-drawer-panel .dnav-chev:hover { background: var(--bone); }
.topbar .mobile-drawer-panel .dnav-item.expanded .dnav-chev { transform: rotate(180deg); }
.topbar .mobile-drawer-panel .dnav-sub { padding: 4px 0 18px; display: flex; flex-direction: column; gap: 18px; }
.topbar .mobile-drawer-panel .dnav-subgroup .dnav-subkicker { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); margin-bottom: 8px; }
.topbar .mobile-drawer-panel .dnav-subgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.topbar .mobile-drawer-panel .dnav-subgroup li { padding: 0; }
.topbar .mobile-drawer-panel .dnav-subgroup li a { display: block; padding: 8px 0; font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--ink); letter-spacing: -0.005em; opacity: 0.85; }
.topbar .mobile-drawer-panel .dnav-subgroup li a:hover { color: var(--vfp-red); opacity: 1; }

/* Pied du tiroir epingle en bas : la nav (.dnav) defile, le pied reste fixe,
   les langues sont donc toujours accessibles au bas du burger. */
.topbar .mobile-drawer .dfoot { flex: 0 0 auto; padding: 24px 24px 14px; border-top: 1px solid var(--line); background: var(--bone); }
.topbar .mobile-drawer .dfoot .dmeta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite); line-height: 1.8; margin-bottom: 16px; }
.topbar .mobile-drawer .dfoot .dlang { display: flex; justify-content: flex-start; }

/* Prevent drawer from appearing on desktop even if stuck open */
@media (min-width: 1181px) {
  .topbar .mobile-drawer, .topbar .mobile-drawer.open { display: none !important; }
  .menu-btn { display: none !important; }
}

/* ——— Mobile / tablet responsive overrides (selecteurs reels uniquement,
       les hacks [style*="..."] ont ete supprimes apres refacto BEM Vagues 1-3) ——— */
@media (max-width: 1024px) {
  /* Sales France zone cards collapse into 2x2 */
  .sales-france-strip { grid-template-columns: 1fr 1fr !important; }

  /* Sales WORLD cards stack */
  .sales-world-grid > article { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .sales-world-grid > article:last-child { border-bottom: 0 !important; }

  /* Product card thumbs a bit smaller on mobile */
  .product-thumb { aspect-ratio: 3/2; }

  /* Hero side controls align */
  .h-display { font-size: clamp(36px, 9vw, 56px) !important; }
  .h-section { font-size: clamp(28px, 7vw, 44px) !important; }

  /* Stacked rows : add borders back */
  .mobile-stack-borders > button { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }

  /* Footer brand social */
  footer.site-footer .foot-col { min-width: 0; }
}

@media (max-width: 600px) {
  footer.site-footer .foot-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .h-display { font-size: clamp(34px, 10vw, 48px) !important; letter-spacing: -0.02em; }
  .h-section { font-size: clamp(26px, 8vw, 38px) !important; }
  .lead { font-size: 15px !important; }
  section.section { padding: 56px 0 !important; }
  .btn { padding: 11px 18px; font-size: 13px; }
  .topbar { padding: 10px 0 !important; }
  .brand img { height: 28px !important; }
  .topbar-inner > .brand img { height: 34px !important; }
  footer.site-footer { padding: 28px 0 16px; }
}

/* Touch targets WCAG AA — boost mobile à 44×44 minimum */
@media (max-width: 800px) {
  .topbar .icon-btn,
  .product-cart-btn,
  .foot-social .social-btn { width: 34px; height: 34px; }
  .filter-pills .pill,
  .market-chips .market-chip {
    padding: 12px 18px;
    min-height: 44px;
  }
  .lang-switch button { padding: 10px 12px; min-height: 36px; }
}

/* Hide scrollbars on slides */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.sales-france-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.sales-france-zone-card {
  min-height: 148px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.sales-france-zone-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.sales-france-zone-card.on {
  border-color: var(--vfp-red);
  background: var(--vfp-red);
  color: var(--paper);
}
.sales-zone-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}
.sales-zone-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}
.sales-zone-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.86;
}
.sales-zone-initials {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
/* Groupes internes de la carte : entête (n° + zone) poussé en haut, pied (contact + action) en bas */
.sales-zone-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sales-zone-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
/* Affordance « Voir la carte » : signale que la carte est cliquable et pilote la carte du dessous.
   Discrète au repos (mono graphite + flèche en cercle liseré fin), s'anime au survol (accent VFP). */
.sales-zone-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  transition: color 0.2s var(--ease-out-quart);
}
.sales-zone-action__label { line-height: 1; }
.sales-zone-action__icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--graphite);
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
/* Survol d'une carte inactive : la flèche gagne l'accent VFP et avance légèrement (« go ») */
.sales-france-zone-card:not(.on):hover .sales-zone-action { color: var(--ink); }
.sales-france-zone-card:not(.on):hover .sales-zone-action__icon {
  border-color: rgba(227, 3, 46, 0.3);
  background: rgba(227, 3, 46, 0.08);
  color: var(--vfp-red);
  transform: translateX(3px);
}
/* Carte active (fond rouge) : l'action devient un état confirmé « Affichée ✓ » en blanc translucide */
.sales-france-zone-card.on .sales-zone-action { color: var(--paper); }
.sales-france-zone-card.on .sales-zone-action__label { opacity: 0.92; }
.sales-france-zone-card.on .sales-zone-action__icon {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
  color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  .sales-france-zone-card:not(.on):hover .sales-zone-action__icon { transform: none; }
}
.sales-map-frame {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}
.sales-map-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sales-map-frame-world {
  max-width: none;
  border: 0;
  background: transparent;
}
.service-sites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  max-width: 520px;
}
.service-site-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.service-site-card span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
.service-site-card strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  .service-sites-grid { grid-template-columns: 1fr; }
  .sales-france-strip { grid-template-columns: 1fr !important; }
  .sales-france-zone-card { min-height: 118px; }
}

/* Utility */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Tweaks panel */
.tweaks-panel { position: fixed; right: 24px; bottom: 24px; width: 300px; background: var(--ink); color: var(--paper); border-radius: 6px; padding: 18px; font-size: 13px; z-index: 1000; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: none; }
@media (max-width: 600px) {
  .tweaks-panel { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; }
}
.tweaks-panel.open { display: block; animation: pageEnter 0.2s; }
.tweaks-panel h4 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.tweaks-panel .row { margin-bottom: 14px; }
.tweaks-panel .row-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-2); margin-bottom: 6px; }
.tweaks-panel .swatches { display: flex; gap: 6px; }
.tweaks-panel .sw { width: 24px; height: 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.tweaks-panel .sw.on { border-color: var(--paper); }
.tweaks-panel select { width: 100%; background: var(--ink-2); color: var(--paper); border: 1px solid var(--ink-2); border-radius: 4px; padding: 8px; font-family: inherit; font-size: 12px; }
.tweaks-panel .close-x { background: transparent; border: 0; color: var(--paper-2); cursor: pointer; }

/* ============================================================ */
/* === ENRICHISSEMENT 2026 — Composants visuels supplémentaires */
/* ============================================================ */

/* ──────── Icon buttons (header) ──────── */
.topbar .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: transparent; color: var(--ink); border: 1px solid transparent;
  position: relative; cursor: pointer;
  transition: background 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.topbar .icon-btn:hover { background: var(--paper-2); border-color: var(--line); }
.topbar .cart-btn .cart-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--vfp-red); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ──────── Eyebrow / section helpers ──────── */
.section-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--vfp-red); text-transform: uppercase; }
.section.dark { background: var(--ink); color: var(--paper); }
.section.dark .h-section, .section.dark .lead { color: var(--paper); }
.section.dark .lead { color: rgba(255,255,255,0.85); }

/* ──────── Home — Hero ──────── */
.home-hero {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: min(78vh, 720px);
}
.home-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px,7vw,96px) clamp(28px,5vw,96px);
}
.home-hero-slide {
  position: relative;
  min-height: 320px;
  animation: heroSlideFade 0.6s var(--ease-out-quart) both;
}
.home-hero-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.home-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(40px,5vw,72px);
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}
.home-hero-desc {
  margin-top: 24px;
  font-size: clamp(16px,1.2vw,18px);
  line-height: 1.55;
  color: var(--graphite);
  max-width: 52ch;
}
.home-hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.home-hero-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}
.home-hero-tabs {
  display: flex;
  gap: 2px;
}
.home-hero-tab {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 14px 6px; /* 28×24+ hit zone around the visible bar */
  display: inline-flex; align-items: center;
  border-radius: 4px;
}
.home-hero-tab:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 2px; }
.home-hero-tab-bar {
  display: block; height: 3px; background: var(--line);
  width: var(--bar-w, 14px);
  transition: width 0.3s var(--ease-out-quart), background 0.3s var(--ease-out-quart);
}
.home-hero-tab[aria-selected="true"] .home-hero-tab-bar { background: var(--vfp-red); width: 40px; }
.home-hero-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--graphite);
  margin-left: auto;
}
.home-hero-visual {
  position: relative;
  background: var(--tint, #EEF1F3);
  transition: background 0.7s var(--ease-out-quart);
  overflow: hidden;
  min-height: 320px;
}
.home-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroSlideFade 0.6s var(--ease-out-quart) both;
}
.home-hero-badge {
  position: absolute;
  right: 32px;
  bottom: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  background: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border: 1px solid var(--line);
}
.home-hero-pause {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--graphite); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.home-hero-pause:hover { color: var(--ink); background: var(--paper-2); }
.home-hero-pause:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 2px; }
@keyframes heroSlideFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .home-hero-slide { animation: none !important; }
}
@media (max-width: 1024px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero-visual { min-height: 320px; height: 320px; }
}
@media (max-width: 600px) {
  .home-hero-visual { height: 260px; }
}

/* ──────── Home — Products tabs strip ──────── */
.grid-products-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1024px) { .grid-products-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .grid-products-4 { grid-template-columns: 1fr; } }

.product-card-mini {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
  overflow: hidden;
}
.product-card-mini:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18); }
.product-card-mini-thumb { aspect-ratio: 1/1; background: var(--paper-2); position: relative; overflow: hidden; }
.product-card-mini-thumb svg,
.product-card-mini-thumb img {
  transition: transform 0.4s var(--ease-out-quart);
}
.product-card-mini:hover .product-card-mini-thumb svg,
.product-card-mini:hover .product-card-mini-thumb img {
  transform: scale(1.035);
}
.product-card-mini-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card-mini-ref { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--vfp-red); text-transform: uppercase; }
.product-card-mini-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.product-card-mini-sub { font-size: 13px; color: var(--graphite); line-height: 1.4; }

/* ──────── Home — Services grid (asymmetric) ──────── */
.services-grid { display: grid; gap: 16px; }
.services-grid-mixed {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
}
.services-grid-mixed > .service-card-feature {
  grid-row: span 2;
}
.service-card {
  background: var(--paper); border: 1px solid var(--line); padding: 24px 22px;
  text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 240px;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.service-card-feature {
  background: var(--paper-2); padding: 36px 32px;
  border-color: var(--ink);
}
.service-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.service-card-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--vfp-red); }
.service-card-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.service-card-feature .service-card-title { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.service-card-desc { font-size: 13.5px; color: var(--graphite); line-height: 1.5; margin-top: 12px; flex: 1; }
.service-card-feature .service-card-desc { font-size: 15px; line-height: 1.55; max-width: 42ch; margin-top: 16px; }
.service-card-cta {
  margin-top: 18px; font-size: 12px; color: var(--vfp-red);
  font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s var(--ease-out-quart);
}
.service-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18); }
.service-card:hover .service-card-cta { gap: 10px; }
@media (max-width: 1024px) {
  .services-grid-mixed { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .services-grid-mixed > .service-card-feature { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 600px)  {
  .services-grid-mixed { grid-template-columns: 1fr; }
  .services-grid-mixed > .service-card-feature { grid-column: auto; }
}

/* ──────── Home — News + Shows ──────── */
.show-row {
  display: grid; grid-template-columns: 150px 2fr 1.4fr 1.4fr 40px;
  gap: 24px; align-items: center;
  padding: 22px 24px;
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 0.2s;
}
.show-row:first-child { border-top: 0; }
.show-row:hover { background: var(--paper-2); }
@media (max-width: 1024px) {
  .show-row { grid-template-columns: 100px 1fr; gap: 12px; padding: 18px 20px; }
  .show-row > *:nth-child(3), .show-row > *:nth-child(4), .show-row > *:nth-child(5) { display: none; }
}

.grid-3-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .grid-3-news { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .grid-3-news { grid-template-columns: 1fr; } }

.news-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
  overflow: hidden;
  padding: 0;
  height: 100%;
}
.news-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18); }
/* Inner clickable wrapper utilisé quand la card est <article> et contient <a class news-card-inner> */
.news-card-inner {
  display: flex; flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.news-card-inner:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: -2px;
}
.news-card-thumb { position: relative; overflow: hidden; aspect-ratio: 3/2; background: var(--paper-2); }
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out-quart); }
.news-card:hover .news-card-thumb img { transform: scale(1.035); }
.news-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card-body h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.news-card-body p { margin: 0; font-size: 14px; color: var(--graphite); line-height: 1.5; }
/* Used by ArticlesPage in compact form (no thumb) */
.news-card > .eyebrow,
.news-card > h3,
.news-card > p,
.news-card > .read-more,
.news-card > .news-card-inner > .eyebrow,
.news-card > .news-card-inner > h3,
.news-card > .news-card-inner > p,
.news-card > .news-card-inner > .read-more { padding-left: 22px; padding-right: 22px; }
.news-card > .eyebrow,
.news-card > .news-card-inner > .eyebrow { padding-top: 22px; }
.news-card > .read-more,
.news-card > .news-card-inner > .read-more { padding-bottom: 22px; margin-top: auto; padding-top: 12px; color: var(--vfp-red); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.news-card > h3,
.news-card > .news-card-inner > h3 { margin: 8px 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.news-card > p,
.news-card > .news-card-inner > p { margin: 0; font-size: 14px; color: var(--graphite); line-height: 1.5; }
.news-card-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vfp-red); padding-top: 10px;
}

/* ──────── Home — Certifications ──────── */
.cert-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
@media (max-width: 1024px) { .cert-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .cert-grid { grid-template-columns: repeat(2, 1fr); } }

/* Frise horizontale (variant alternative pour Home) — différencie de .cert-grid */
.cert-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cert-strip-item {
  flex: 1 0 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  scroll-snap-align: start;
  transition: background 0.2s var(--ease-out-quart);
}
.cert-strip-item:last-child { border-right: 0; }
.cert-strip-item:hover { background: var(--paper-2); }
.cert-strip-item .cert-strip-mark {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper-2);
  text-align: center;
  padding: 4px;
  line-height: 1.05;
}
.cert-strip-item .cert-strip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cert-strip-item .cert-strip-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cert-strip-item .cert-strip-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
@media (max-width: 600px) {
  .cert-strip-item { min-width: 220px; padding: 18px 20px; }
}

/* Grid news featured — première card sur 2 colonnes (desktop) */
.grid-3-news.featured > :first-child {
  grid-column: span 2;
}
.grid-3-news.featured > :first-child .news-card-thumb {
  aspect-ratio: 16/9;
}
.grid-3-news.featured > :first-child .news-card-body h3 {
  font-size: clamp(20px, 1.8vw, 26px);
}
@media (max-width: 1024px) {
  .grid-3-news.featured > :first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .grid-3-news.featured > :first-child { grid-column: span 1; }
  .grid-3-news.featured > :first-child .news-card-thumb { aspect-ratio: 3/2; }
}

/* ──────── Home — CTA dark ──────── */
.home-cta {
  position: relative;
  overflow: hidden;
}
.home-cta > .container { position: relative; }
.home-cta__halo {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--vfp-red) 35%, transparent), transparent 70%);
}
.home-cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 60px;
  align-items: end;
}
.home-cta__eyebrow { color: var(--paper-on-ink-mute); }
.home-cta__title { margin-top: 14px; color: var(--paper-on-ink); }
.home-cta__lead { margin-top: 16px; color: var(--paper-on-ink-soft); max-width: var(--lead-width); }
.home-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
@media (max-width: 1024px) {
  .home-cta-grid { grid-template-columns: 1fr; gap: 24px; }
  .home-cta__actions { align-items: flex-start; }
}

/* ──────── Products page — filters / chips ──────── */
.products-mock-hero {
  padding: clamp(60px,7vw,100px) 0 clamp(36px,4vw,52px);
  border-bottom: 1px solid var(--line);
}
.products-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vfp-red);
}
.products-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px,4.8vw,72px); letter-spacing: -0.025em;
  line-height: 1; margin: 20px 0 0;
}
.products-lead {
  margin: 22px 0 0; font-size: clamp(15px,1.2vw,19px);
  line-height: 1.55; color: var(--graphite); max-width: 58ch;
}
.products-category-section { padding: clamp(40px,5vw,72px) 0; border-bottom: 1px solid var(--line); }
.products-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.products-category-card {
  position: relative; aspect-ratio: 16/10; overflow: hidden; border: 0;
  padding: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.products-category-card-dark {
  background: var(--ink);
  background: linear-gradient(135deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 80%, var(--paper)) 100%);
  color: var(--paper);
}
.products-category-card-light {
  background: var(--paper-2); border: 1px solid var(--line);
}
.category-stripes,
.market-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 20px, color-mix(in oklch, var(--vfp-red) 6%, transparent) 20px 21px);
  transition: transform 0.4s var(--ease-out-quart), opacity 0.2s var(--ease-out-quart);
}
.market-stripes { background-image: repeating-linear-gradient(45deg, transparent 0 28px, rgba(255,255,255,0.04) 28px 29px); }
/* Visuel abstrait par univers d'application (HeroMotif, comme la home) */
.market-motif {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  transition: transform 0.4s var(--ease-out-quart), opacity 0.2s var(--ease-out-quart);
}
.market-motif-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.products-market-card:hover .market-motif,
.products-market-card:focus-visible .market-motif { transform: scale(1.03); opacity: 0.65; }
.category-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.4s var(--ease-out-quart), opacity 0.2s var(--ease-out-quart);
  pointer-events: none;
}
.category-num {
  position: absolute; top: 28px; left: 32px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; color: var(--vfp-red); text-transform: uppercase;
}
.category-ref {
  position: absolute; top: 28px; right: 32px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; color: var(--graphite); text-transform: lowercase;
}
.products-category-card-dark .category-ref { color: var(--paper-2); opacity: 0.5; }
.category-copy { position: absolute; bottom: 32px; left: 32px; right: 32px; }
.category-copy h2 {
  font-family: var(--font-display); font-size: clamp(28px,3.4vw,48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 0;
}
.category-copy p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--graphite); max-width: 42ch; }
.products-category-card-dark .category-copy p { color: var(--paper-2); opacity: 0.8; }
.category-copy span,
.market-copy span {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: gap 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
.category-copy span svg,
.market-copy span svg { transition: transform 0.2s var(--ease-out-quart); color: inherit; }

/* Overrides texte tuile : après les règles de base pour gagner en cascade */
.products-category-card.has-tile-text .category-copy,
.products-category-card.has-tile-text .category-copy h2,
.products-category-card.has-tile-text .category-copy p,
.products-category-card.has-tile-text .category-copy span,
.products-category-card.has-tile-text .category-ref {
  color: var(--tile-text);
  opacity: 1;
}
.products-category-card.has-tile-outline .category-copy h2,
.products-category-card.has-tile-outline .category-copy span {
  -webkit-text-stroke: 0.045em var(--tile-outline);
  paint-order: stroke fill;
}
.products-market-card.has-tile-text .market-copy,
.products-market-card.has-tile-text .market-copy h3,
.products-market-card.has-tile-text .market-copy span,
.products-market-card.has-tile-text .market-meta {
  color: var(--tile-text);
}
.products-market-card.has-tile-outline .market-copy h3,
.products-market-card.has-tile-outline .market-copy span {
  -webkit-text-stroke: 0.045em var(--tile-outline);
  paint-order: stroke fill;
}
.products-category-card:hover,
.products-category-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(31,31,31,0.28);
}
.products-category-card-light:hover,
.products-category-card-light:focus-visible { border-color: var(--ink); }
.products-category-card:hover .category-art,
.products-category-card:focus-visible .category-art { transform: scale(1.025); }
.products-category-card:hover .category-stripes,
.products-category-card:focus-visible .category-stripes { transform: translateX(8px); opacity: 0.75; }
.products-category-card:hover .category-copy span,
.products-category-card:focus-visible .category-copy span { gap: 14px; }
.products-category-card:hover .category-copy span svg,
.products-category-card:focus-visible .category-copy span svg { transform: translateX(3px); }
.products-market-section { padding: clamp(56px,7vw,96px) 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.products-market-head { margin-bottom: 32px; }
.products-market-head h2,
.products-results-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,2.4vw,34px);
  letter-spacing: -0.02em; margin: 12px 0 0;
}
.products-market-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.products-market-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border: 0; padding: 0;
  background: var(--ink);
  background: linear-gradient(160deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 70%, black) 100%);
  color: var(--paper); cursor: pointer; text-align: left; font-family: inherit;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), filter 0.2s var(--ease-out-quart);
}
.products-market-card.market-1 {
  background: var(--vfp-red);
  background: linear-gradient(160deg, var(--vfp-red) 0%, color-mix(in oklch, var(--vfp-red) 65%, black) 100%);
}
.products-market-card.market-2 {
  background: var(--ink);
  background: linear-gradient(160deg, color-mix(in oklch, var(--ink) 88%, var(--paper)) 0%, var(--ink) 100%);
}
.products-market-card.market-3 {
  background: var(--ink);
  background: linear-gradient(160deg, var(--graphite) 0%, var(--ink) 100%);
}
.market-meta {
  position: absolute; top: 20px; left: 20px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; color: var(--paper-2); opacity: 0.6;
}
.market-copy { position: absolute; bottom: 20px; left: 20px; right: 20px; }
.market-copy h3 {
  font-family: var(--font-display); font-size: clamp(18px,1.6vw,24px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.market-copy span { margin-top: 12px; font-size: 12px; letter-spacing: 0.14em; }
.products-market-card:hover,
.products-market-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(31,31,31,0.32);
  filter: saturate(1.05);
}
.products-market-card:hover .market-stripes,
.products-market-card:focus-visible .market-stripes { transform: translateX(8px); opacity: 0.8; }
.products-market-card:hover .market-copy span,
.products-market-card:focus-visible .market-copy span { gap: 14px; }
.products-market-card:hover .market-copy span svg,
.products-market-card:focus-visible .market-copy span svg { transform: translateX(3px); }
.products-tabs { position: sticky; top: 67px; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.products-tabs-inner { display: flex; gap: 0; align-items: center; flex-wrap: wrap; }
.products-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 16px 18px 14px 0;
  margin-right: 24px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--graphite); text-transform: uppercase;
}
.products-tab {
  display: flex; flex-direction: column; gap: 2px; padding: 18px 28px 16px 0;
  margin-right: 28px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: inherit; text-align: left;
}
.products-tab.on { border-bottom-color: var(--vfp-red); }
.products-tab span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--graphite); text-transform: uppercase;
}
.products-tab.on span { color: var(--vfp-red); }
.products-tab strong {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--graphite);
}
.products-tab.on strong { color: var(--ink); }
.products-subfilters { padding: 22px 0; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.products-subfilter-row,
.products-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.products-subfilter-row { gap: 10px; margin-bottom: 14px; }
.products-subfilter-row span,
.products-chip-row > span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--graphite); text-transform: uppercase; margin-right: 8px;
}
.products-subfilter-row button {
  padding: 5px 12px; border: 0; background: transparent; color: var(--graphite);
  cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.products-subfilter-row button.on { background: var(--ink); color: var(--paper); }
.products-chip-row button {
  padding: 5px 12px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-size: 12px; font-family: var(--font-mono); cursor: pointer;
  transition: opacity 0.15s var(--ease-out-quart);
}
.products-chip-row button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.products-chip-row button[disabled] { opacity: 0.4; cursor: not-allowed; }
.products-chip-count { margin-left: 4px; color: var(--graphite); font-size: 11px; }
.products-chip-row button.on .products-chip-count { color: var(--paper-2); }
.products-results { padding: clamp(48px,6vw,80px) 0; background: var(--paper); }
.products-results-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 24px; flex-wrap: wrap; gap: 18px;
}
.products-active-filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.products-active-filters__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite); margin-right: 4px;
}
.products-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--vfp-red);
  background: rgba(229, 23, 42, 0.06); color: var(--vfp-red);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  cursor: pointer; transition: background 0.15s var(--ease-out-quart);
}
.products-active-chip:hover { background: rgba(229, 23, 42, 0.14); }
@media (max-width: 900px) {
  .products-category-grid,
  .products-market-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .products-category-grid,
  .products-market-grid { grid-template-columns: 1fr; }
  .category-num, .category-ref { top: 20px; }
  .category-num { left: 22px; }
  .category-ref { right: 22px; }
  .category-copy { left: 22px; right: 22px; bottom: 24px; }
}

.market-chips .market-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart);
}
.market-chips .market-chip:hover { border-color: var(--ink); }
.market-chips .market-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.sticky-filters { position: sticky; top: 67px; z-index: 20; background: var(--paper); }
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pills .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--paper); color: var(--graphite);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart);
}
.filter-pills .pill:hover { color: var(--ink); border-color: var(--ink); }
.filter-pills .pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.filter-selects { display: flex; flex-wrap: wrap; gap: 12px; }
.filter-select {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  color: var(--graphite);
}
.filter-select > span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite);
}
.filter-select select, .filter-select input {
  border: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink); min-width: 140px;
}
.filter-select select:focus-visible, .filter-select input:focus-visible {
  outline: none; /* déplacé sur le wrapper via focus-within */
}
.filter-select:focus-within {
  outline: 2px solid var(--vfp-red);
  outline-offset: 2px;
  border-color: var(--ink);
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 80px 0; text-align: center; color: var(--graphite);
}

/* Home — inline factsheet (replaces hero-metric KPI grid) */
.home-factsheet {
  list-style: none; margin: 44px 0 0; padding: 28px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0;
}
.home-factsheet-row {
  display: grid; grid-template-columns: 36px 80px 1fr;
  align-items: baseline; gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.home-factsheet-row:last-child { border-bottom: 0; }
.home-factsheet-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--vfp-red); text-transform: uppercase;
}
.home-factsheet-value {
  font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1;
  color: var(--ink);
}
.home-factsheet-label {
  font-size: 14px; color: var(--graphite); line-height: 1.4;
  text-align: left;
}
@media (max-width: 600px) {
  .home-factsheet-row { grid-template-columns: 28px 60px 1fr; gap: 12px; }
}

/* Contact form fields — proper label wrappers */
.contact-field { display: flex; flex-direction: column; gap: 4px; }
.contact-field > span { display: block; }
.contact-field > input,
.contact-field > select,
.contact-field > textarea { font: inherit; color: inherit; }
.contact-field:focus-within > span { color: var(--ink); }
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: none; border-bottom-color: var(--vfp-red);
}

/* ──────── Product card — visuel ──────── */
.product-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart); cursor: pointer; }
.product-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18); }
.product-card .product-thumb { position: relative; aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden; display: block; }
.product-card .product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-card .product-thumb-ref {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--graphite); background: rgba(255,255,255,0.92); padding: 4px 8px; border-radius: 2px;
}
.product-card:hover .product-thumb img { transform: scale(1.04); }
.product-card .product-thumb img { transition: transform 0.4s; }
.product-card .product-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card .product-body h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.product-card .product-body h3 a { color: inherit; }
.product-card .product-body .product-sub { margin: 0; font-size: 13px; color: var(--graphite); line-height: 1.4; }
.product-card .product-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.product-card .product-actions {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line);
}
.product-link {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vfp-red);
}
.product-link svg { flex: none; display: block; }
.product-cart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--vfp-red); color: var(--paper); border: 0; cursor: pointer;
  transition: background 0.2s var(--ease-out-quart);
}
.product-cart-btn:hover { background: var(--ink); }
.product-cart-btn.in-cart { background: var(--ink); }

/* ──────── Product page — hero + body ──────── */
.product-mockup-page {
  --ink: #9EA0A4;
  --ink-2: rgba(158, 160, 164, 0.78);
  --graphite: rgba(158, 160, 164, 0.58);
  --line: rgba(158, 160, 164, 0.12);
  --line-strong: rgba(158, 160, 164, 0.4);
}
.product-mockup-title-row {
  display: block;
  margin: clamp(8px, 1vw, 16px) 0 clamp(28px, 3.5vw, 48px);
}
.product-mockup-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  animation: none;
}
.product-brief-col { padding-top: clamp(8px, 1vw, 16px); }
.product-mockup-section-grid {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: clamp(32px, 6vw, 100px);
  animation: none;
}

.product-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vfp-red);
}
.product-eyebrow--paper { color: var(--paper-2); }
.product-eyebrow-dash { width: 22px; height: 1px; background: currentColor; display: inline-block; }

/* full-bleed border (comme .topbar) ; gouttières via .container enfant */
.product-breadcrumb { padding: 22px 0; border-bottom: 1px solid var(--line); }
.product-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.product-breadcrumb li { min-width: 0; }
.product-breadcrumb a,
.product-breadcrumb [aria-current="page"] {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.product-breadcrumb a { color: var(--graphite); }
.product-breadcrumb [aria-current="page"] { color: var(--ink); }
.product-breadcrumb .sep { color: var(--line-strong); flex-shrink: 0; }

.product-hero { border-bottom: 1px solid var(--line); background: var(--paper); }
/* padding vertical uniquement : ne pas ecraser la gouttiere horizontale de .container */
.product-hero-inner { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 3.5vw, 48px); }
.product-hero-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  gap: 20px;
  flex-wrap: wrap;
}
.product-hero-ref {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--graphite);
  text-transform: uppercase;
}
.product-hero-ref strong { color: var(--ink); font-weight: inherit; }

.product-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  /* gris brand fonce : les tokens locaux de .product-mockup-page sont volontairement delaves,
     le titre doit ressortir (sinon la fiche parait vide) */
  color: rgba(31, 31, 31, 0.9);
}
.product-subtitle {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--graphite);
  max-width: 56ch;
  margin: 14px 0 0;
}

.product-mockup-visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  background: var(--ink);
  overflow: hidden;
  border-radius: 2px;
}
.product-visual-radial {
  position: absolute; inset: 0;
  background-image: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.08), transparent 60%);
}
.product-visual-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 28px, rgba(255, 255, 255, 0.02) 28px 29px);
}
/* cadre fin : le visuel remplit la boite, le gris ne reste qu'un mince contour */
.product-visual-stage {
  position: absolute; inset: 5%;
  display: flex; align-items: center; justify-content: center;
}
.product-visual-stage img { width: 100%; height: 100%; object-fit: contain; }
.product-badge-row {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.product-gallery-strip {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  z-index: 3;
}
.product-gallery-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(31, 31, 31, 0.12);
  background: var(--paper);
}
.product-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 9px;
  border-radius: 999px;
}

.product-brief-col { display: flex; flex-direction: column; gap: 0; }
.product-brief-list { border-top: 1px solid var(--ink); }
.product-spec-row {
  display: grid;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.product-spec-row--brief { grid-template-columns: 1fr 1.2fr; }
.product-spec-row--full { grid-template-columns: 1fr 2fr; gap: 20px; padding: 22px 0; }
.product-spec-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
.product-spec-row--full .product-spec-key { font-size: 11px; letter-spacing: 0.08em; }
.product-spec-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  /* valeurs (la "donnee" de la fiche) en gris brand fonce pour qu'elles ressortent */
  color: rgba(31, 31, 31, 0.88);
}
.product-spec-row--full .product-spec-val { font-size: 20px; font-weight: 500; }

.product-hero-ctas {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.product-hero-ctas .btn-primary { padding: 14px 26px; }
/* FT / FDS download CTAs — highlighted, full-width, right of the product visual */
.product-hero-ctas--docs { gap: 12px; align-self: stretch; }
.product-hero-ctas--docs .btn { width: 100%; justify-content: center; padding: 15px 24px; }
.product-mockup-page .btn-doc-outline {
  background: var(--paper);
  color: var(--vfp-red);
  border-color: var(--vfp-red);
}
.product-mockup-page .btn-doc-outline:hover {
  background: var(--vfp-red);
  color: var(--paper);
  transform: translateY(-1px);
}
.product-doc-shortcut {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color 0.15s var(--ease-out-quart);
}
.product-doc-shortcut:hover { color: var(--ink); }
.product-doc-shortcut:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 3px; }

/* ============ Hero produit — stage studio + fiche editoriale ============ */
.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ---- Stage produit (gauche) : fond clair, halo rouge, ombre portee ---- */
.product-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(165deg, var(--paper) 0%, var(--paper-2) 68%, var(--paper-3) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-stage-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 52% at 72% 22%, rgba(227, 3, 46, 0.10), transparent 70%);
  pointer-events: none;
}
.product-stage-tick {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 3px;
  background: var(--vfp-red);
  border-radius: 2px;
}
.product-stage-img {
  position: relative;
  width: 78%;
  height: 78%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-stage-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(31, 31, 31, 0.20));
}
.product-stage-badges {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.product-stage-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  background: rgba(254, 252, 252, 0.82);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
}

/* ---- Fiche editoriale (droite) ---- */
.product-lede { min-width: 0; }
.product-lede-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.product-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
.product-ref-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
.product-lede .product-h1 { margin: 0; }
.product-lede .product-subtitle { margin: 10px 0 0; }

/* ---- Description hero : 2 lignes + "voir plus" (ClickUp 869dwat72) ---- */
.product-lede-desc-wrap { margin-top: 14px; }
.product-lede-desc {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.6;
}
.product-lede-desc :where(p) { margin: 0; }
.product-lede-desc :where(p) + :where(p) { margin-top: 8px; }
.product-lede-more {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--vfp-red);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.product-lede-more:hover { text-decoration: underline; }

/* ---- Blocs 01 / 02 / 03 ---- */
.product-facts {
  margin-top: clamp(22px, 3vw, 34px);
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
.product-fact { min-width: 0; }
.product-fact-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(31, 31, 31, 0.92);
  margin-bottom: 12px;
}
.product-fact-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--vfp-red);
}

/* 01 — grille de specs serree, 2 colonnes, filets fins */
.product-spec-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.product-spec-cell {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.product-spec-cell:nth-child(1),
.product-spec-cell:nth-child(2) { border-top: 0; }
.product-spec-cell:nth-child(odd) { border-left: 0; }
.product-spec-cell dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 4px;
}
.product-spec-cell dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgba(31, 31, 31, 0.9);
}
/* Ligne libre (spec sans couple clé/valeur, ex. électronique imprimée). */
.product-spec-cell--solo dd {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
}

/* 02 — avantages en pastilles a coche */
.product-adv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-adv li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(31, 31, 31, 0.82);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px 6px 11px;
}
.product-adv li svg { color: var(--vfp-red); flex: none; }

/* 03 — supports en tags */
.product-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.product-tag {
  font-size: 12.5px;
  color: var(--graphite);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
}
.product-tag--more {
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--vfp-red);
  border-color: rgba(227, 3, 46, 0.3);
  transition: background 0.18s var(--ease-out-quart), color 0.18s var(--ease-out-quart);
}
.product-tag--more:hover { background: var(--vfp-red); color: var(--paper); border-color: var(--vfp-red); }

.product-fact-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  transition: color 0.18s var(--ease-out-quart);
}
.product-fact-more:hover { color: var(--vfp-red); }

/* ---- CTA cote a cote ---- */
.product-cta-row {
  margin-top: clamp(24px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-cta-row .btn { width: 100%; justify-content: center; padding: 14px 20px; }
/* Ajout selection : pleine largeur sous TDS / FDS.
   Couleur solide (pas var(--ink)) car la fiche produit redefinit --ink en gris clair. */
.product-cta-row .product-add-selection {
  grid-column: 1 / -1;
  background: #2a2a2a;
  color: var(--paper);
  border-color: transparent;
}
.product-cta-row .product-add-selection:hover {
  background: var(--vfp-red);
  transform: translateY(-1px);
}
.product-cta-row .product-add-selection.is-added {
  background: color-mix(in srgb, #2a2a2a 72%, var(--paper));
  color: var(--paper);
}
.product-cta-row .product-add-selection.is-added:hover {
  background: var(--vfp-red);
}

@media (max-width: 1024px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .product-stage { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .product-spec-grid { grid-template-columns: 1fr; }
  .product-spec-cell:nth-child(2) { border-top: 1px solid var(--line); }
  .product-spec-cell { border-left: 0; }
  .product-cta-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .product-fact-more, .product-tag--more { transition: none; }
}

.product-tabs-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--header-height, 67px);
  z-index: 20;
}
.product-mockup-tabs { display: flex; gap: 0; align-items: stretch; }
.product-tab-btn {
  padding: 18px 28px 18px 0;
  margin-right: 28px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--graphite);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.15s var(--ease-out-quart);
}
.product-tab-btn[aria-selected="true"] {
  border-bottom-color: var(--vfp-red);
  color: var(--ink);
  font-weight: 600;
}
.product-tab-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--line-strong);
}
.product-tab-btn[aria-selected="true"] .product-tab-num { color: var(--vfp-red); }

.product-section { padding: clamp(56px, 7vw, 96px) 0; border-bottom: 1px solid var(--line); }
.product-section--overview { min-height: 430px; }
.product-section--alt { background: var(--paper-2); }
.product-section--dark { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink-2); }
.product-section--related { padding: clamp(56px, 7vw, 96px) 0; background: var(--paper); border-bottom: 0; }

.product-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.product-h2--paper { color: var(--paper); }

.product-overview-text {
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
  margin: 0;
}
.product-section-related-head { margin-bottom: 32px; }

.product-mockup-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.product-app-item {
  padding: 24px 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  gap: 14px;
  align-items: center;
}
.product-app-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vfp-red);
  letter-spacing: 0.1em;
}
.product-app-text { font-size: 15px; font-weight: 500; }

.product-doc-link {
  display: flex;
  justify-content: space-between;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-2);
  align-items: center;
  color: var(--paper);
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.product-doc-link:hover .product-doc-title { color: var(--vfp-red); }
.product-doc-link:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 4px; }
.product-doc-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product-doc-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-top: 4px;
}

.product-mockup-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-mockup-related-card {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.product-related-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.product-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-related-body { padding: 18px 18px 20px; }
.product-related-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.product-related-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.product-related-subtitle {
  font-size: 13px;
  color: var(--graphite);
  margin-top: 6px;
  line-height: 1.4;
}
.product-mockup-visual::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.16) 50%, transparent 62%);
  transform: translateX(-60%);
  transition: transform 0.55s var(--ease-out-quart);
}
.product-mockup-visual:hover::before { transform: translateX(60%); }
.product-mockup-visual img,
.product-mockup-visual svg {
  transition: transform 0.45s var(--ease-out-quart);
}
.product-mockup-visual:hover img,
.product-mockup-visual:hover svg {
  transform: scale(1.025);
}
.product-mockup-tabs button:hover {
  color: var(--ink) !important;
}
.product-mockup-apps > div {
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.product-mockup-apps > div:hover {
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18);
}
.product-mockup-related-card:hover,
.product-mockup-related-card:focus-visible {
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18);
}
.product-mockup-related-card img,
.product-mockup-related-card svg {
  transition: transform 0.4s var(--ease-out-quart);
}
.product-mockup-related-card:hover img,
.product-mockup-related-card:hover svg,
.product-mockup-related-card:focus-visible img,
.product-mockup-related-card:focus-visible svg {
  transform: scale(1.035);
}
@keyframes productHeroIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes productPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
  .product-hero-grid { grid-template-columns: 1fr !important; }
  .product-body-grid { grid-template-columns: 1fr !important; }
  .product-mockup-hero-grid,
  .product-mockup-section-grid,
  .product-mockup-related { grid-template-columns: 1fr !important; }
  .product-mockup-tabs { overflow-x: auto; scrollbar-width: none; }
  .product-mockup-tabs::-webkit-scrollbar { display: none; }
}
.product-page .specs { width: 100%; border-collapse: collapse; margin-top: 14px; }
.product-page .specs th, .product-page .specs td { padding: 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 14px; }
.product-page .specs th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); width: 40%; font-weight: 500; }
.product-page .specs td { font-family: var(--font-display); color: var(--ink); }
.doc-link {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  transition: background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.doc-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ──────── Services page ──────── */
@media (max-width: 1024px) {
  .services-row { grid-template-columns: 1fr !important; }
  .services-row-illu, .services-row-text { order: initial !important; }
}

/* ──────── About page ──────── */
@media (max-width: 1024px) {
  .about-story-grid, .engagements-grid { grid-template-columns: 1fr !important; }
  .values-grid { grid-template-columns: 1fr !important; }
  .kpi-block-dark { grid-template-columns: repeat(2, 1fr) !important; }
  /* CTA grid (fin de page about & autres) — bouton pleine largeur */
  .cta-grid { grid-template-columns: 1fr !important; gap: 28px !important; align-items: start !important; }
  .cta-grid > div:last-child { justify-content: flex-start !important; }
}
@media (max-width: 600px) {
  .kpi-block-dark { grid-template-columns: 1fr !important; }
  .cert-table-head, .cert-table-row { grid-template-columns: 1fr 0.6fr !important; gap: 8px !important; padding: 14px 16px !important; }
  .cert-table-head > *:nth-child(2), .cert-table-row > *:nth-child(2),
  .cert-table-head > *:nth-child(3), .cert-table-row > *:nth-child(3) { display: none; }
}
/* Tabs about — touch targets 44px mobile */
.about-tab-btn { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 600px) {
  .about-tab-btn { min-height: 48px; padding: 12px 0 !important; }
}
/* KPI separators rouges — masqués sous 1024px (grille empilée) */
@media (max-width: 1024px) {
  .kpi-block-dark > div { padding-left: 0 !important; }
  .kpi-block-dark > div > span[aria-hidden="true"] { display: none !important; }
}

/* ──────── Contact ──────── */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .form-grid-2 { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ──────── Sales section ──────── */
.sales-contact-link {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink);
  text-decoration: none;
  transition: background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.sales-contact-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ──────── Footer enrich ──────── */
.foot-social .social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45); color: var(--paper);
  background: rgba(255,255,255,0.06);
  transition: background 0.22s var(--ease-out-quart), border-color 0.22s var(--ease-out-quart), color 0.22s var(--ease-out-quart), transform 0.22s var(--ease-out-quart);
}
.foot-social .social-btn:hover { background: var(--vfp-red); border-color: var(--vfp-red); color: #fff; transform: translateY(-2px); }

/* ──────── Grid products listing ──────── */
.grid-products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1100px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .grid-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grid-products { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .search-products-grid { grid-template-columns: repeat(3, 1fr); }
  .search-network-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .search-products-grid { grid-template-columns: repeat(2, 1fr); }
  .search-field { align-items: flex-start; }
  .search-field svg { margin-top: 14px; }
}
@media (max-width: 600px) {
  .search-hero { padding: 56px 0 36px; }
  .search-field { gap: 10px; margin-top: 28px; }
  .search-clear { font-size: 12px; padding-left: 4px; }
  .search-products-grid,
  .search-network-grid { grid-template-columns: 1fr; }
  .search-news-row { grid-template-columns: 1fr; gap: 8px; }
  .search-news-row span { min-width: 0; }
}

/* ──────── Page head ──────── */
.page-head { padding-top: clamp(40px,5vw,80px) !important; }

/* ──────── Search page — aligned with mockup ──────── */
.search-hero {
  padding: clamp(60px, 8vw, 120px) 0 48px;
  border-bottom: 1px solid var(--line);
}
.search-hero .h-display {
  font-size: clamp(40px, 5vw, 76px);
  margin-top: 18px;
}
.search-field {
  margin-top: 36px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  color: var(--ink);
}
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 8px 0;
}
.search-field input::placeholder { color: rgba(31,31,31,0.38); opacity: 1; }
.search-field input::-webkit-search-decoration,
.search-field input::-webkit-search-cancel-button,
.search-field input::-webkit-search-results-button,
.search-field input::-webkit-search-results-decoration { display: none; }
.search-field input:focus-visible { outline: none; }
.search-clear {
  background: transparent;
  border: 0;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 0 10px 12px;
  white-space: nowrap;
}
.search-clear:hover { color: var(--ink); }
.search-count,
.search-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
.search-count { margin-top: 18px; }
.search-suggestions { background: var(--paper); }
.search-section-label { margin-bottom: 20px; }
.search-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-chip-row button,
.search-tag {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.search-chip-row button:hover,
.search-tag:hover,
.search-network-card:hover,
.search-news-row:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.search-results .container { max-width: 1440px; }
.search-groups {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.search-group { margin: 0; }
.search-group-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
  font-weight: 500;
}
.search-group-title span { color: var(--graphite); }
.search-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 18px;
}
.search-taxonomy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.search-tag-red {
  background: var(--vfp-red);
  color: #fff;
  border-color: var(--vfp-red);
}
.search-tag-dark { border-color: var(--ink); }
.search-news-list {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.search-news-row {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.search-news-row span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--graphite);
  min-width: 100px;
}
.search-news-row strong {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.search-network-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.search-network-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: #fff;
  min-height: 126px;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.search-network-card span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
.search-network-card strong {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.search-network-card small {
  margin-top: auto;
  font-size: 13px;
  color: var(--graphite);
}
.search-empty {
  padding: 80px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.search-empty div {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--graphite);
}
.search-empty p {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ──────── News page — mockup animations ──────── */
.news-page-head .container {
  animation: newsHeadIn 0.42s var(--ease-out-quart) both;
}
.news-tabs {
  position: sticky;
  top: 67px;
  z-index: 25;
  padding: 18px 0 !important;
  background: var(--paper);
}
.news-tabs .filter-pills {
  gap: 10px;
}
.news-tabs .pill {
  position: relative;
  overflow: hidden;
  gap: 8px;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.news-tabs .pill span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--vfp-red);
}
.news-tabs .pill::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: var(--vfp-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease-out-quart);
}
.news-tabs .pill:hover,
.news-tabs .pill:focus-visible {
  transform: translateY(-1px);
}
.news-tabs .pill:hover::after,
.news-tabs .pill:focus-visible::after,
.news-tabs .pill.on::after {
  transform: scaleX(1);
}
.news-tab-panel {
  animation: newsPanelIn 0.3s var(--ease-out-quart) both;
}
.news-article-grid .news-card,
.news-salon-list .salon-row,
.dist-list li {
  animation: newsItemIn 0.32s var(--ease-out-quart) both;
}
.news-article-grid .news-card:nth-child(2),
.news-salon-list .salon-row:nth-child(2) { animation-delay: 0.03s; }
.news-article-grid .news-card:nth-child(3),
.news-salon-list .salon-row:nth-child(3) { animation-delay: 0.06s; }
.news-article-grid .news-card:nth-child(n+4),
.news-salon-list .salon-row:nth-child(n+4) { animation-delay: 0.09s; }
.news-card .read-more span {
  display: inline-block;
  transition: transform 0.2s var(--ease-out-quart);
}
.news-card:hover .read-more span,
.news-card:focus-within .read-more span {
  transform: translateX(3px);
}
@keyframes newsHeadIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes newsPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes newsItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ──────── Prose (markdown rendering) ──────── */
.news-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vfp-red);
  text-decoration: none;
  margin-bottom: 24px;
  transition: opacity 0.15s var(--ease-out-quart);
}
.news-back-link:hover { opacity: 0.7; }
.news-mock-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.55em;
  letter-spacing: -0.01em;
  color: var(--graphite);
  display: block;
  margin-top: 8px;
}

.article-page .article-hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 40px); }
.article-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(28px, 3.4vw, 48px);
  margin: 12px 0 0;
  text-wrap: balance;
  max-width: 28ch;
}
.article-lead { margin-top: 18px; max-width: 56ch; }

.prose { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.prose p { margin: 0 0 16px; }
.prose h2 { margin: 32px 0 12px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.015em; }
.prose h3 { margin: 24px 0 10px; font-family: var(--font-display); font-size: 19px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose a { color: var(--vfp-red); text-decoration: underline; text-underline-offset: 2px; }

/* Tablet stickys top */
@media (max-width: 1024px) {
  .sticky-filters { top: 0 !important; }
  .about-tabs { top: 0 !important; }
}

/* ──────── Salons listing ──────── */
.salon-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--paper); }
.salon-row {
  display: block;
  border-top: 1px solid var(--line);
  transition: background 0.2s var(--ease-out-quart);
}
.salon-row:first-child { border-top: 0; }
.salon-row:hover { background: var(--paper-2); }
.salon-row-link {
  display: grid; grid-template-columns: 140px 1fr auto;
  gap: 24px; align-items: center;
  padding: 22px 24px;
  color: inherit;
  text-decoration: none;
}
.salon-date strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--vfp-red); line-height: 1; }
.salon-date span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.salon-body h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.salon-body p { margin: 4px 0 0; font-size: 14px; color: var(--graphite); }
.salon-body .salon-stand { font-family: var(--font-mono); font-size: 12px; color: var(--ink); margin-top: 4px; }
.salon-arrow {
  color: var(--vfp-red);
  font-size: 20px;
  transition: transform 0.2s var(--ease-out-quart);
}
.salon-row:hover .salon-arrow,
.salon-row:focus-within .salon-arrow { transform: translateX(3px); }
@media (max-width: 800px) {
  .salon-row-link { grid-template-columns: 80px 1fr; }
  .salon-arrow { display: none; }
  .salon-row .salon-cta { grid-column: 1 / -1; }
}

.dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.dist-list li {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1.5fr 1.4fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  transition: background 0.2s var(--ease-out-quart);
  animation-delay: calc(var(--row-index, 0) * 0.025s);
}
.dist-list li:first-child { border-top: 0; }
.dist-list li:hover { background: var(--paper-2); }
.dist-list .dist-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
}
.dist-list strong {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.dist-list span,
.dist-list a {
  min-width: 0;
  font-size: 13px;
  color: var(--graphite);
}
.dist-list a {
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease-out-quart);
}
.dist-list a:hover { color: var(--vfp-red); }
@media (max-width: 900px) {
  .dist-list li { grid-template-columns: 56px 1fr; gap: 8px 16px; }
  .dist-list li > *:nth-child(n+4) { grid-column: 2; }
}
@media (max-width: 1024px) {
  .news-tabs { top: 0; }
}

/* News page — faithful mockup layout */
.news-mock-head {
  padding: clamp(60px, 8vw, 120px) 0 48px;
  border-bottom: 1px solid var(--line);
}
.news-mock-head .section-num {
  display: inline-flex;
  color: var(--vfp-red);
}
.news-mock-head .h-display {
  margin-top: 18px;
  font-size: clamp(40px, 5vw, 76px);
  color: var(--ink);
}
.news-mock-head .lead {
  margin-top: 22px;
  max-width: 56ch;
  font-size: 20px;
  line-height: 1.45;
}
.news-mock-tabs {
  position: sticky;
  top: 67px;
  z-index: 30;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.news-mock-tab-list {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.news-mock-tab-list button {
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  transition: color 0.18s var(--ease-out-quart), border-color 0.18s var(--ease-out-quart);
}
.news-mock-tab-list button span {
  margin-right: 8px;
  color: var(--vfp-red);
}
.news-mock-tab-list button:hover,
.news-mock-tab-list button:focus-visible,
.news-mock-tab-list button.on {
  color: var(--ink);
}
.news-mock-tab-list button.on {
  border-bottom-color: var(--vfp-red);
}
.news-mock-body {
  padding-top: clamp(72px, 10vw, 140px);
}
.news-show-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--ink);
  background: var(--line);
}
.news-show-card {
  min-height: 244px;
  padding: 36px 32px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
  transition: background 0.18s var(--ease-out-quart);
  scroll-margin-top: 120px;
}
.news-show-card:hover,
.news-show-card:focus-visible {
  background: var(--paper-2);
}
.news-show-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
.news-show-card h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.news-show-card p {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--graphite);
  letter-spacing: -0.005em;
}
.news-show-meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.news-show-meta span {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.news-show-meta strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}
.news-show-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
}
.news-show-num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--vfp-red);
}

/* === Page détail salon === */
.salon-head .news-back-link { margin-bottom: 26px; }
.salon-head .section-num { display: inline-flex; }
.salon-head .h-display { margin-top: 16px; font-size: clamp(40px, 5vw, 76px); color: var(--ink); }
.salon-head .news-mock-brand { margin-top: 14px; font-size: 0.42em; color: var(--graphite); }
.salon-head-meta {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.salon-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.salon-facts-band { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.salon-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
}
.salon-fact { background: var(--paper); padding: 28px clamp(20px, 3vw, 36px); }
.salon-fact dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.salon-fact dd {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.salon-fact dd.is-accent { color: var(--vfp-red); }

.salon-cover { padding-top: clamp(40px, 5vw, 64px); }
.salon-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }

.salon-foot { border-top: 1px solid var(--line); }

@media (max-width: 600px) {
  .salon-facts { grid-template-columns: 1fr 1fr; }
}

/* Picto rubrique (hub Actualités) */
.news-show-icon { margin-bottom: 18px; }

/* Logo salon (optionnel) sur la carte, aligné à droite sous le numéro */
.news-show-logo {
  display: flex;
  justify-content: flex-end;
}
.news-show-logo img {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}

/* Nav rubriques Actualités (cross-page) — réutilisée sur salons/brochures/articles */
.news-tabs {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.news-tabs__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  align-items: center;
}
.news-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.news-tab:hover { color: var(--ink); }
.news-tab.is-active {
  color: var(--vfp-red);
  border-bottom-color: var(--vfp-red);
}
.news-tab__num {
  font-size: 13px;
  color: var(--vfp-red);
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  .news-tabs__inner { flex-wrap: nowrap; overflow-x: auto; gap: 0 20px; }
  .news-tab { white-space: nowrap; }
}
.news-dist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.news-dist-head p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--graphite);
  max-width: 56ch;
}
.news-dist-head > div:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.news-dist-table {
  border: 1px solid var(--ink);
  background: #fff;
}
.news-dist-table-head,
.news-dist-row {
  display: grid;
  grid-template-columns: 0.6fr 1.5fr 1.4fr 1.4fr 1fr;
  gap: 20px;
  align-items: center;
}
.news-dist-table-head {
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.news-dist-table-head span:last-child {
  text-align: right;
}
.news-dist-row {
  padding: 22px 24px;
  border-top: 1px solid var(--line);
  transition: background 0.18s var(--ease-out-quart);
}
.news-dist-table-head + .news-dist-row {
  border-top: 0;
}
.news-dist-row:hover {
  background: var(--paper-2);
}
.news-dist-row .dist-code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--vfp-red);
}
.news-dist-row strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.news-dist-row span,
.news-dist-row a {
  min-width: 0;
  font-size: 13px;
  color: var(--graphite);
}
.news-dist-row em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 13px;
  color: var(--graphite);
}
.news-dist-row a {
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.news-dist-row > span:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
}
.news-dist-foot {
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--graphite);
}
.news-dist-foot a {
  color: var(--vfp-red);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .news-show-grid { grid-template-columns: 1fr; }
  .news-dist-table-head { display: none; }
  .news-dist-row { grid-template-columns: 56px 1fr; gap: 8px 16px; }
  .news-dist-row > *:nth-child(n+3) { grid-column: 2; }
  .news-dist-row > span:last-child { text-align: left; }
}
@media (max-width: 600px) {
  .news-mock-head .h-display {
    font-size: 38px !important;
    line-height: 1.02;
    max-width: 9ch;
  }
  .news-mock-head .lead { font-size: 16px; }
  .news-mock-tabs { top: 0; }
  .news-mock-tab-list { gap: 18px; }
  .news-mock-tab-list button { font-size: 10.5px; }
  .news-show-card { grid-template-columns: 1fr; padding: 28px 24px; }
  .news-show-num { font-size: 56px; }
}

/* Focus visible pour tous les inputs/selects/textarea du Contact (sans classe .form) */
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 2px;
  border-bottom-color: var(--vfp-red);
}

/* ──────── Forms (Contact, Devis) ──────── */
.form label {
  display: block; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite);
}
.form label input, .form label select, .form label textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink);
  transition: border-bottom-color 0.2s var(--ease-out-quart);
}
.form label input:focus-visible,
.form label select:focus-visible,
.form label textarea:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 2px;
  border-bottom-color: var(--vfp-red);
}
/* Fallback navigateurs sans :focus-visible */
.form label input:focus,
.form label select:focus,
.form label textarea:focus {
  border-bottom-color: var(--vfp-red);
}

/* ──────── Empty state ──────── */
.empty { padding: 60px 0; text-align: center; color: var(--graphite); font-family: var(--font-mono); letter-spacing: 0.06em; }

/* ──────── Read more chip on cards ──────── */
.read-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vfp-red); margin-top: auto; padding-top: 12px; }

/* ──────── Article body ──────── */
.article-cover { aspect-ratio: 16/8; overflow: hidden; background: var(--paper-2); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ──────── Visual feedback widget ──────── */
.feedback-pointer {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(158, 160, 164, 0.34);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(31, 31, 31, 0.14);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.18s var(--ease-out-quart), border-color 0.18s var(--ease-out-quart), color 0.18s var(--ease-out-quart), transform 0.18s var(--ease-out-quart);
}
.feedback-pointer:hover {
  background: var(--vfp-red);
  border-color: var(--vfp-red);
  color: var(--paper);
  transform: translateY(-1px);
}
.feedback-pointer:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 3px; }
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 18px;
  background: rgba(31, 31, 31, 0.62);
}
.feedback-modal__panel {
  width: min(1280px, 100%);
  height: min(880px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(158, 160, 164, 0.34);
  border-radius: 8px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.26);
}
.feedback-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.feedback-modal__header h2 {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0;
}
.feedback-modal__header p {
  margin: 0;
  max-width: 760px;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.5;
}
.feedback-icon-button,
.feedback-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.feedback-icon-button:hover,
.feedback-toolbar button:hover,
.feedback-toolbar button.is-active {
  border-color: var(--vfp-red);
  color: var(--vfp-red);
}
.feedback-modal__body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
}
.feedback-canvas-shell {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
}
.feedback-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.feedback-canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: auto;
  cursor: crosshair;
  touch-action: none;
}
.feedback-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}
.feedback-form label {
  display: grid;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.feedback-points {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
.feedback-points h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.feedback-points p {
  margin: 0;
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.45;
}
.feedback-point-field {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.feedback-point-field > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--vfp-red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
}
.feedback-form input,
.feedback-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 12px;
}
.feedback-form textarea { resize: vertical; min-height: 150px; }
.feedback-form input:focus-visible,
.feedback-form textarea:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 2px;
}
.feedback-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.feedback-submit,
.feedback-success button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--vfp-red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feedback-submit:disabled { opacity: 0.72; cursor: wait; }
.feedback-error {
  margin: 0;
  color: var(--vfp-red);
  font-size: 13px;
  line-height: 1.45;
}
.feedback-success {
  display: grid;
  gap: 12px;
  align-content: start;
  color: var(--ink);
}
.feedback-success a {
  color: var(--vfp-red);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}
.feedback-loading {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 280px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .feedback-pointer {
    right: 16px;
    bottom: 16px;
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .feedback-pointer span { display: none; }
  .feedback-modal { padding: 0; }
  .feedback-modal__panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .feedback-modal__header { padding: 14px; }
  .feedback-modal__header p { display: none; }
  .feedback-modal__body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .feedback-canvas-shell {
    min-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .feedback-toolbar {
    overflow-x: auto;
    padding: 10px;
  }
  .feedback-form {
    max-height: 42vh;
    padding: 14px;
  }
}

/* ──────── Quote pill (header, visible only if cart > 0) ──────── */
.quote-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px;
  background: var(--vfp-red); color: var(--paper);
  border: 0; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
  animation: quotePillIn 0.28s var(--ease-out-quart);
}
.quote-pill:hover { background: var(--ink); transform: translateY(-1px); }
.quote-pill:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 2px; }
.quote-pill-label { white-space: nowrap; }
.quote-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--paper); color: var(--vfp-red);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0;
}
.quote-pill:hover .quote-pill-count { color: var(--ink); }
@keyframes quotePillIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1024px) {
  .quote-pill-label { display: none; }
  .quote-pill { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }
}

/* ──────── Quote drawer (Ma sélection) ──────── */
.quote-drawer {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10, 10, 11, 0.45);
  display: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out-quart);
}
.quote-drawer.open { display: block; opacity: 1; animation: qdFade 0.2s var(--ease-out-quart); }
@keyframes qdFade { from { opacity: 0; } to { opacity: 1; } }

.quote-drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(92vw, 420px);
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
  animation: qdSlide 0.28s var(--ease-out-quart);
}
@keyframes qdSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.quote-drawer .qdrawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.quote-drawer .qdrawer-head h3 {
  margin: 0;
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.005em;
}
.quote-drawer .dclose {
  background: transparent; border: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); border-radius: 999px;
  transition: background 0.2s var(--ease-out-quart);
}
.quote-drawer .dclose:hover { background: var(--paper-2); }

.quote-drawer .qdrawer-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
  color: var(--graphite); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
}

.quote-drawer .qdrawer-list {
  list-style: none; margin: 0; padding: 12px 0;
  flex: 1; overflow-y: auto;
}
.quote-drawer .qdrawer-list li {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}
.quote-drawer .qdrawer-list li:last-child { border-bottom: 0; }
.quote-drawer .qd-thumb {
  width: 64px; height: 64px;
  border-radius: 4px;
  position: relative; overflow: hidden;
  background: var(--qd-thumb-bg, var(--paper-2));
}
.quote-drawer .qd-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.quote-drawer .qd-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.quote-drawer .qd-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.3;
}
.quote-drawer .qd-ref {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--graphite); text-transform: uppercase;
}
.quote-drawer .qd-actions {
  display: flex; align-items: flex-end; gap: 12px; margin-top: 6px; flex-wrap: wrap;
}
.quote-drawer .qd-actions label {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  flex: 1 1 150px; min-width: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--graphite); text-transform: uppercase;
}
/* Quantité souhaitée en toutes lettres (« 5 kg », « à définir ») : le champ n'est plus
   un compteur à 56 px, il doit accueillir une phrase courte. */
.quote-drawer .qd-actions input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--line); background: var(--paper);
  font-family: inherit; font-size: 13px; color: var(--ink);
  border-radius: 2px;
  text-transform: none; letter-spacing: 0;
}
.quote-drawer .qd-actions input::placeholder { color: var(--graphite); opacity: 0.55; }
.quote-drawer .qdrawer-full {
  margin: 0; padding: 12px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 0 var(--vfp-red);
  font-size: 13px; line-height: 1.45; color: var(--graphite);
}
.quote-drawer .qd-actions input:focus-visible {
  outline: 2px solid var(--vfp-red); outline-offset: 2px; border-color: var(--vfp-red);
}
.quote-drawer .qd-remove {
  background: transparent; border: 0; padding: 4px 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--vfp-red); text-transform: uppercase; cursor: pointer;
  margin-left: auto;
}
.quote-drawer .qd-remove:hover { text-decoration: underline; }

.quote-drawer .qdrawer-foot {
  border-top: 1px solid var(--line);
  padding: 18px 24px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper-2);
  flex-shrink: 0;
}
.quote-drawer .qd-summary {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--graphite); text-transform: uppercase;
}
.quote-drawer .qd-cta { display: flex; gap: 10px; }
.quote-drawer .qd-cta .btn { flex: 1; justify-content: center; }

/* ============================================================ */
/* === ENRICHISSEMENT 2026 — Refonte parcours devis            */
/* ============================================================ */

/* Custom checkbox VFP — utilisable dans le drawer et la page devis */
.vfp-check {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--graphite); text-transform: uppercase;
  user-select: none;
  line-height: 1.3;
}
.vfp-check-input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.vfp-check-box {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: border-color 0.18s var(--ease-out-quart), background 0.18s var(--ease-out-quart), color 0.18s var(--ease-out-quart), transform 0.18s var(--ease-out-quart);
}
.vfp-check-box svg { transform: scale(0.6); opacity: 0; transition: transform 0.2s var(--ease-out-quart), opacity 0.18s var(--ease-out-quart); }
.vfp-check.is-checked .vfp-check-box {
  border-color: var(--vfp-red); color: var(--vfp-red); background: var(--paper);
}
.vfp-check.is-checked .vfp-check-box svg { transform: scale(1); opacity: 1; }
.vfp-check:hover .vfp-check-box { border-color: var(--ink); }
.vfp-check.is-checked:hover .vfp-check-box { border-color: var(--vfp-red); }
.vfp-check-input:focus-visible + .vfp-check-box {
  outline: 2px solid var(--vfp-red); outline-offset: 2px; border-color: var(--vfp-red);
}
.vfp-check.is-checked .vfp-check-label { color: var(--ink); }

/* ============================================================ */
/* === Contact drawer (right panel)                              */
/* ============================================================ */
.contact-drawer {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 10, 11, 0.45);
  display: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out-quart);
}
.contact-drawer.open { display: block; opacity: 1; animation: qdFade 0.2s var(--ease-out-quart); }
.contact-drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(96vw, 520px);
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
  animation: qdSlide 0.28s var(--ease-out-quart);
}
.contact-drawer .cdrawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.contact-drawer .cdrawer-eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--vfp-red); text-transform: uppercase;
  margin-bottom: 6px;
}
.contact-drawer .cdrawer-head h3 {
  margin: 0;
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.15;
}
.contact-drawer .dclose {
  background: transparent; border: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); border-radius: 999px;
  transition: background 0.2s var(--ease-out-quart);
  flex-shrink: 0;
}
.contact-drawer .dclose:hover { background: var(--paper-2); }

.contact-drawer .cdrawer-body {
  flex: 1; overflow-y: auto;
  padding: 22px 28px 28px;
}
.contact-drawer .cdrawer-lead {
  font-size: 14px; color: var(--graphite);
  margin: 0 0 22px; line-height: 1.5;
}
.contact-drawer .cdrawer-form { display: flex; flex-direction: column; gap: 20px; }
.contact-drawer .cdrawer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
}
.contact-drawer .cdrawer-field { display: block; }
.contact-drawer .cdrawer-field--full { grid-column: 1 / -1; }
.contact-drawer .cdrawer-field span { display: block; margin-bottom: 4px; }
.contact-drawer .cdrawer-field input:focus-visible,
.contact-drawer .cdrawer-field select:focus-visible,
.contact-drawer .cdrawer-field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--vfp-red);
}
.contact-drawer .cdrawer-foot {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.contact-drawer .cdrawer-contact-meta {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--graphite); text-transform: uppercase;
}
.contact-drawer .cdrawer-contact-meta a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--graphite); text-decoration: none;
}
.contact-drawer .cdrawer-contact-meta a:hover { color: var(--ink); }
.contact-drawer .cdrawer-success {
  padding: 60px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.contact-drawer .cdrawer-success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--vfp-red); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 520px) {
  .contact-drawer .cdrawer-grid { grid-template-columns: 1fr; }
  .contact-drawer .cdrawer-head { padding: 20px 22px 14px; }
  .contact-drawer .cdrawer-body { padding: 18px 22px 22px; }
}

/* Drawer — case sample par item */
.quote-drawer .qd-sample {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.quote-drawer .qdrawer-list li.is-sample {
  background: var(--paper-2);
  box-shadow: inset 2px 0 0 0 var(--vfp-red);
}

/* ============ Devis page — grid 2 colonnes ============ */
.devis-head { padding-top: clamp(48px,5vw,72px); padding-bottom: clamp(28px,3vw,40px); }
.devis-section { padding-top: clamp(8px,2vw,24px); padding-bottom: clamp(56px,6vw,96px); }

.devis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px,3.5vw,56px);
  align-items: start;
}
@media (max-width: 900px) {
  .devis-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Colonne items */
.devis-col-head {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: clamp(20px,2vw,28px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.devis-col-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--vfp-red); text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.devis-col-eyebrow-sep { color: var(--line-strong, var(--line)); }
.devis-col-eyebrow-samples { color: var(--ink); }
.devis-col-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px,2.6vw,34px); letter-spacing: -0.02em; line-height: 1.05;
}

.devis-items-list {
  display: flex; flex-direction: column;
  gap: 14px;
}

/* Card item produit */
.devis-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  transition: border-color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
  animation: devisItemIn 0.28s var(--ease-out-quart) both;
}
@keyframes devisItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.devis-item:hover { border-color: var(--ink); box-shadow: 0 8px 18px -12px rgba(31,31,31,0.12); }
.devis-item.is-sample {
  background: var(--paper-2);
  border-color: var(--vfp-red);
  box-shadow: inset 3px 0 0 0 var(--vfp-red);
}
/* Sur mobile la vignette reste une vignette. En passant la carte sur une seule colonne,
   le carré `aspect-ratio: 1/1` prenait toute la largeur de l'écran : chaque produit
   occupait une hauteur d'écran entière, et le formulaire, placé après la liste, se
   retrouvait à plusieurs milliers de pixels du haut de page. */
@media (max-width: 640px) {
  .devis-item { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .devis-item-num { top: 10px; right: 12px; }
}
@media (max-width: 400px) {
  .devis-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
}

.devis-item-thumb {
  aspect-ratio: 1/1;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.devis-item-thumb img,
.devis-item-thumb svg { width: 100%; height: 100%; object-fit: cover; }

.devis-item-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.devis-item-meta { display: flex; flex-direction: column; gap: 4px; }
.devis-item-ref {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--vfp-red); text-transform: uppercase;
}
.devis-item-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px,1.4vw,20px); letter-spacing: -0.012em; line-height: 1.2;
  color: var(--ink);
}
.devis-item-sub { margin: 0; font-size: 13px; color: var(--graphite); line-height: 1.45; }

.devis-item-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.devis-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.devis-field-note textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
.devis-field-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--graphite); text-transform: uppercase;
}
.devis-field input,
.devis-field select,
.devis-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit; font-size: 14px; color: var(--ink);
  border-radius: 3px;
  transition: border-color 0.18s var(--ease-out-quart), box-shadow 0.18s var(--ease-out-quart);
  -webkit-appearance: none; appearance: none;
}
.devis-field input::placeholder,
.devis-field textarea::placeholder { color: var(--graphite); opacity: 0.55; }
.devis-field input:focus-visible,
.devis-field select:focus-visible,
.devis-field textarea:focus-visible {
  outline: none;
  border-color: var(--vfp-red);
  box-shadow: 0 0 0 2px rgba(227, 3, 46, 0.14);
}

.devis-item-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.devis-item-remove {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--vfp-red); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.18s var(--ease-out-quart), border-color 0.18s var(--ease-out-quart);
}
.devis-item-remove:hover { background: var(--paper-2); border-color: var(--vfp-red); }
.devis-item-remove:focus-visible {
  outline: 2px solid var(--vfp-red); outline-offset: 2px;
}

/* Empty state */
.devis-empty {
  max-width: 540px; margin: 0 auto;
  text-align: center;
  padding: clamp(32px,5vw,64px) 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.devis-empty-art { width: clamp(180px,40vw,240px); height: auto; opacity: 0.95; }
.devis-empty-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--vfp-red); text-transform: uppercase;
}
.devis-empty-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px,3vw,34px); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink);
}
.devis-empty-text { margin: 0; color: var(--graphite); max-width: 42ch; }

/* Form column — sticky desktop */
.devis-col-form { position: relative; }
@media (min-width: 901px) {
  .devis-col-form { position: sticky; top: 100px; }
}

.devis-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(24px,2.4vw,32px);
  display: flex; flex-direction: column; gap: 20px;
}

.devis-form-head { display: flex; flex-direction: column; gap: 4px; }
.devis-form-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--vfp-red); text-transform: uppercase;
}
.devis-form-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px,2.2vw,28px); letter-spacing: -0.018em; line-height: 1.1;
}

.devis-form { display: flex; flex-direction: column; gap: 22px; position: relative; }

.devis-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
}
.devis-field-full { grid-column: 1 / -1; }
@media (max-width: 540px) {
  .devis-form-grid { grid-template-columns: 1fr; }
}

/* Border-bottom only fields for the form */
.devis-field-bb input,
.devis-field-bb select,
.devis-field-bb textarea {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 8px 0 10px;
  font-size: 15px;
}
.devis-field-bb input:focus-visible,
.devis-field-bb select:focus-visible,
.devis-field-bb textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--vfp-red);
  box-shadow: 0 1px 0 0 var(--vfp-red);
}
.devis-field-bb select { background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% + 2px), calc(100% - 9px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

.devis-form-captcha { display: flex; min-height: 65px; }

.devis-form-recap {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.devis-form-recap-line {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--graphite); text-transform: uppercase;
}
.devis-form-recap-num {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  min-width: 32px;
}
.devis-form-recap-line.is-accent .devis-form-recap-num { color: var(--vfp-red); }
.devis-form-recap-line.is-accent .devis-form-recap-text { color: var(--ink); }

.devis-form-submit {
  width: 100%; justify-content: center;
  padding: 16px 24px; font-size: 14px;
}

.devis-form-error {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(227, 3, 46, 0.06);
  border: 1px solid var(--vfp-red);
  border-radius: 3px;
  color: var(--vfp-red);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}

/* ── Cadrage « c'est un devis » : assurances, étapes, mentions ─────────────── */
/* Le visiteur doit comprendre au premier regard qu'il demande un chiffrage, pas qu'il
   passe commande : pas de prix, pas de paiement, une réponse humaine sous 48h. */
.devis-assurances {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.devis-assurances li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite);
}
/* Seule la mention « gratuit, sans engagement » prend l'accent : c'est le message. */
.devis-assurances li:first-child { border-color: var(--vfp-red); color: var(--vfp-red); }
.devis-assurances svg { flex: none; }

.devis-steps {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
/* Pas de trait de liaison entre les étapes : dans la colonne étroite du formulaire, le
   fil passe à la ligne et le connecteur d'une étape enroulée pendait en début de ligne
   comme un tiret orphelin. L'espacement suffit à lire la séquence. */
.devis-step {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite); opacity: 0.5;
}
.devis-step-num { font-weight: 700; color: var(--ink); }
.devis-step.is-done { opacity: 0.8; }
.devis-step.is-current { opacity: 1; }
.devis-step.is-current .devis-step-num { color: var(--vfp-red); }

.devis-col-note { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--graphite); }

/* Numérotation de la ligne, comme sur un document de devis. */
.devis-item { position: relative; }
.devis-item-num {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--vfp-red);
}

/* Le monospace capitales est réservé aux ÉTIQUETTES courtes, comme partout sur le site.
   Une phrase entière traitée ainsi se lit mal et jure avec le reste de la page : la
   mention de confidentialité et l'indication de préremplissage repassent donc en police
   de texte, casse normale. */
.devis-form-required {
  margin: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite); opacity: 0.75;
}
.devis-form-privacy {
  margin: 0;
  font-size: 12px; line-height: 1.5; color: var(--graphite); opacity: 0.8;
}
.devis-form-owner {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--paper-2);
  border-left: 2px solid var(--vfp-red);
  border-radius: 0 3px 3px 0;
  font-size: 13px; color: var(--graphite);
}
.devis-form-owner b { color: var(--ink); font-weight: 600; }
/* Relais lecteur d'écran de l'état d'envoi : visuellement neutre, jamais display:none,
   sinon aria-live ne relaie plus rien. */
.devis-form-status {
  margin: 0; height: 0; overflow: hidden;
  font-size: 0; line-height: 0; color: transparent;
}

/* ── Sélecteur de territoire (pays cherchable, département en France) ──────── */
.tpick { position: relative; display: flex; flex-direction: column; gap: 4px; }
.tpick-control { position: relative; display: flex; align-items: center; }
.tpick-icon {
  position: absolute; left: 0; display: inline-flex;
  color: var(--graphite); opacity: 0.5; pointer-events: none;
}
.tpick-caret {
  position: absolute; right: 2px; display: inline-flex;
  color: var(--graphite); opacity: 0.5; pointer-events: none;
  transition: transform 0.2s var(--ease-out-quart);
}
.tpick.is-open .tpick-caret { transform: rotate(180deg); }
.tpick-input { width: 100%; padding-left: 24px !important; padding-right: 24px !important; }
.tpick-list {
  position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
  margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 264px; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 28px -18px rgba(31,31,31,0.35);
}
.tpick-option {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px; color: var(--graphite);
}
.tpick-option.is-active { background: var(--paper-2); color: var(--ink); }
.tpick-option.is-selected { color: var(--ink); font-weight: 600; }
.tpick-option.is-selected .tpick-option-hint { color: var(--vfp-red); }
.tpick-option-hint {
  flex: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--graphite); opacity: 0.6;
}
.tpick-empty { padding: 10px; font-size: 13px; color: var(--graphite); }
/* Balisé en <span> et non en <p> : le reset impose p { font-size: 17px !important }
   pour le texte éditorial, ce qui rendrait ce libellé de service énorme. Même raison
   pour .devis-form-required, .devis-form-privacy, .devis-form-owner et .devis-col-note,
   tous passés en <div>. */
.tpick-hint {
  display: block;
  margin: 6px 0 0;
  font-size: 12px; line-height: 1.45; color: var(--graphite); opacity: 0.8;
}

/* ── Écran de confirmation ────────────────────────────────────────────────── */
/* Il occupe toute la largeur, il ne vit plus dans la colonne du formulaire : l'envoi
   vide la sélection, et l'ancien emplacement disparaissait avec elle. */
.devis-success {
  display: flex; flex-direction: column; gap: clamp(24px,3vw,36px);
  animation: devisItemIn 0.32s var(--ease-out-quart) both;
}
.devis-success-head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.devis-success-mark {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--vfp-red);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vfp-red);
}
.devis-success-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px,3vw,40px); letter-spacing: -0.02em; line-height: 1.06;
  color: var(--graphite);
}
.devis-success-title:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 6px; }
.devis-success-body { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--graphite); }
.devis-success-mail {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--graphite);
}
.devis-success-mail b { color: var(--ink); font-weight: 600; }

.devis-success-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.devis-success-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(20px,2vw,26px);
  display: flex; flex-direction: column; gap: 10px;
}
.devis-success-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--graphite);
}
.devis-success-ref {
  margin: 0;
  font-family: var(--font-mono); font-size: clamp(22px,2.4vw,30px);
  letter-spacing: 0.14em; color: var(--vfp-red);
}
.devis-success-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.devis-success-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.devis-success-list-ref {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite);
}
.devis-success-list-name { font-size: 14px; color: var(--ink); font-weight: 600; }
.devis-success-list-tag {
  padding: 2px 8px; border-radius: 999px;
  background: var(--paper-2); color: var(--vfp-red);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.devis-success-next { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.devis-success-next li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; line-height: 1.5; color: var(--graphite);
}
.devis-success-next-num {
  flex: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink);
}
.devis-success-back { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .devis-success { animation: none; }
  .tpick.is-open .tpick-caret { transition: none; }
}

/* Spinner */
.devis-spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 999px;
  animation: devisSpin 0.7s linear infinite;
  display: inline-block;
}
@keyframes devisSpin { to { transform: rotate(360deg); } }

/* === Utilities ============================================================ */
.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;
}

/* === Route loader (Suspense fallback pendant le chargement d'un chunk lazy) */
.route-loader {
  min-height: 60vh;
  display: block;
  background:
    linear-gradient(
      90deg,
      var(--paper) 0%,
      var(--paper-2) 50%,
      var(--paper) 100%
    );
  background-size: 200% 100%;
  animation: routeLoaderShimmer 1.6s var(--ease-out-quart) infinite;
}
@keyframes routeLoaderShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .route-loader { animation: none; background: var(--paper-2); }
}

/* === Devis hydration skeleton =========================================== */
/* Affiche pendant le SSR + la premiere frame post-hydratation, avant que
   le localStorage du panier soit lu. Evite le flash "vide -> items". */
.devis-skeleton {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; margin: 0 auto;
  padding: 24px 0;
}
.devis-skeleton-card {
  display: grid; grid-template-columns: 88px 1fr; gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.devis-skeleton-thumb {
  width: 88px; height: 88px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: devisSkeletonShimmer 1.4s var(--ease-out-quart) infinite;
}
.devis-skeleton-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.devis-skeleton-line {
  height: 10px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: devisSkeletonShimmer 1.4s var(--ease-out-quart) infinite;
}
.devis-skeleton-line.w-30 { width: 30%; }
.devis-skeleton-line.w-45 { width: 45%; }
.devis-skeleton-line.w-50 { width: 50%; }
.devis-skeleton-line.w-60 { width: 60%; }
@keyframes devisSkeletonShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .devis-skeleton-thumb,
  .devis-skeleton-line { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Market hub pages — added 2026-05-11
   Classes utilisées par MarketHubPage.jsx et MarketsPage.jsx.
   Réutilise max les tokens existants (var(--...)). Aucune couleur en dur.
───────────────────────────────────────────────────────────────────────────── */

/* ── KPI block hero (section 01) ── */
.market-kpi-row {
  display: flex;
  gap: 0;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.market-kpi-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 40px 0 0;
  min-width: 140px;
}
.market-kpi-item:not(:first-child) {
  padding-left: 40px;
}
.market-kpi-sep {
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 28px;
  background: var(--vfp-red);
}
.market-kpi-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.market-kpi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ── Products grid (section 02) ── */
.market-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .market-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .market-products-grid { grid-template-columns: 1fr; }
}

/* ── Supports & articles (sections 03/04) : responsive collapse ── */
@media (max-width: 1024px) {
  .market-supports-grid,
  .market-articles-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* KPI block dark responsive dans hero CategoryHubPage */
@media (max-width: 768px) {
  .chub-kpi-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
  .chub-kpi-block > div { padding-left: 0 !important; }
}

/* Lien explorer dans CategoryCard : hover gap */
.chub-cat-link:hover { gap: 14px; }
.chub-cat-link:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 3px; border-radius: 2px; }

/* Card catégorie hover subtil */
.chub-cat-card a.chub-cat-link { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════
   Certifications + blog hub — added 2026-05-11
   ══════════════════════════════════════════════════════════════════ */

/* ── CertificationsPage ─────────────────────────────────────────── */
.cert-hero { padding-bottom: clamp(36px, 5vw, 72px); }

/* Table des certifications */
.cert-table-wrap {
  border: 1px solid var(--ink);
  background: var(--paper);
  overflow-x: auto;
}
.cert-table-header {
  display: grid;
  grid-template-columns: 56px 120px 1fr 1.2fr 140px 72px;
  gap: 16px;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper-on-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-items: center;
}
.cert-table-row {
  display: grid;
  grid-template-columns: 56px 120px 1fr 1.2fr 140px 72px;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  align-items: center;
  transition: background 0.18s var(--ease-out-quart);
}
.cert-table-row:hover { background: var(--paper-2); }
.cert-cell { font-size: 14px; color: var(--ink); }
.cert-cell--num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
}
.cert-cell--code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink);
}
.cert-cell--name {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.cert-cell--scope {
  font-size: 13.5px;
  color: var(--graphite);
  line-height: 1.4;
}
.cert-cell--year {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--graphite);
  text-align: right;
}

/* Status pills — carrés, sans border-radius, mono 10px */
.cert-status-pill {
  display: inline-block;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
}
.cert-status-pill--warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}
.cert-status-pill--ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

/* Engagements — liste verticale numérotée */
.cert-eng-list { border-top: 1px solid var(--line); }
.cert-eng-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cert-eng-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
  padding-top: 4px;
}
.cert-eng-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  max-width: 64ch;
  margin: 0;
}

/* Bandeau documentation (fond ink) */
.cert-doc-band { border-bottom: none !important; }
.cert-doc-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 80px);
  justify-content: space-between;
  flex-wrap: wrap;
}
.cert-doc-cta { flex-shrink: 0; padding-top: 6px; }

/* Responsive cert table */
@media (max-width: 1024px) {
  .cert-table-header,
  .cert-table-row { grid-template-columns: 48px 96px 1fr 110px 60px; gap: 12px; }
  .cert-table-header > :nth-child(3),
  .cert-cell--name { display: none; }
}
@media (max-width: 640px) {
  .cert-table-header,
  .cert-table-row { grid-template-columns: 40px 1fr 100px 52px; gap: 10px; padding: 14px 16px; }
  .cert-table-header > :nth-child(2),
  .cert-cell--code,
  .cert-table-header > :nth-child(4),
  .cert-cell--scope { display: none; }
  .cert-eng-item { grid-template-columns: 56px 1fr; gap: 16px; padding: 32px 0; }
  .cert-doc-inner { flex-direction: column; gap: 28px; }
  /* CTA pleine largeur + label qui s'enroule : un bouton nowrap au label long
     forcait une largeur min-content (307px) superieure au viewport a 320px,
     debordant de 3px. Full-width + white-space:normal supprime la fuite. */
  .cert-doc-cta { width: 100%; }
  .cert-doc-cta .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ── ArticlesPage ────────────────────────────────────────────────── */

/* Barre de filtres sticky WAI-ARIA tablist */
.art-filterbar {
  position: sticky;
  top: 67px;
  z-index: 25;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.art-filterbar-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.art-filter-tab {
  position: relative;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  cursor: pointer;
  min-height: 36px;
  transition: color 0.18s var(--ease-out-quart), border-color 0.18s var(--ease-out-quart), background 0.18s var(--ease-out-quart);
}
.art-filter-tab:hover { color: var(--ink); border-color: var(--ink); }
.art-filter-tab.on { color: var(--ink); border-color: var(--ink); }
.art-filter-tab.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--vfp-red);
  border-radius: 1px;
}
.art-filter-tab:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 3px; }
/* Tag sans contenu pour la sélection courante : grisé et non cliquable */
.art-filter-tab.is-empty,
.art-filter-tab:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Layout principal : main + sidebar */
.art-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.art-main { min-width: 0; }

/* Article featured */
.art-featured {
  border: 1px solid var(--line);
  margin-bottom: 40px;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.art-featured:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18); }
.art-featured-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  color: inherit;
  text-decoration: none;
}
.art-featured-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--paper-2);
}
.art-featured-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out-quart); }
.art-featured:hover .art-featured-thumb img { transform: scale(1.03); }
.art-featured-body {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.art-featured-title { font-size: clamp(22px, 2.2vw, 32px) !important; }
.art-featured-excerpt { max-width: 48ch; font-size: 15px; }
.art-featured-read { display: flex; align-items: center; margin-top: auto; }

/* Grille articles — 2 colonnes desktop */
.art-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* Métadonnées mono */
.art-card-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.art-meta-date { color: var(--graphite); }
.art-meta-sep  { color: var(--graphite); opacity: 0.5; }
.art-meta-tag  { color: var(--vfp-red); }
.art-arrow { display: inline-block; transition: transform 0.2s var(--ease-out-quart); }
.news-card:hover .art-arrow,
.news-card:focus-within .art-arrow,
.art-featured:hover .art-arrow { transform: translateX(3px); }

/* Sidebar tags (desktop uniquement) */
.art-sidebar {
  position: sticky;
  top: calc(67px + 18px + 56px);
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.art-sidebar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 16px;
}
.art-sidebar-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.art-sidebar-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--graphite);
  text-align: left;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.art-sidebar-tag:hover { color: var(--ink); background: var(--paper-2); }
.art-sidebar-tag.on { color: var(--ink); border-left-color: var(--vfp-red); background: var(--paper-2); }
.art-sidebar-tag:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 2px; }
.art-sidebar-tag.is-empty,
.art-sidebar-tag:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.art-sidebar-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--graphite);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Pagination */
.art-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.art-page-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--graphite);
  cursor: pointer;
  padding: 8px 12px;
  transition: color 0.18s var(--ease-out-quart), border-color 0.18s var(--ease-out-quart), background 0.18s var(--ease-out-quart);
}
.art-page-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.art-page-btn:disabled { opacity: 0.3; cursor: default; }
.art-page-num.on {
  color: var(--ink);
  border-color: var(--ink);
  border-bottom: 2px solid var(--vfp-red);
}
.art-page-btn:focus-visible { outline: 2px solid var(--vfp-red); outline-offset: 3px; }

/* État vide */
.art-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 40px 0;
}

/* Section body — espacement ajusté */
.art-body-section { padding-top: clamp(48px, 6vw, 80px); }

/* Responsive */
@media (max-width: 1024px) {
  .art-filterbar { top: 0; }
  .art-sidebar { display: none; }
  .art-layout { grid-template-columns: 1fr; }
  .art-featured-inner { grid-template-columns: 1fr; }
  .art-featured-thumb { aspect-ratio: 16/9; max-height: 280px; }
}
@media (max-width: 640px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-featured-body { padding: 20px; }
  .art-pagination { flex-wrap: wrap; gap: 4px; }
}

/* ============================================================ */
/* === Contact + Home pillars — added 2026-05-11 ============= */
/* ============================================================ */

/* ──────── ContactPage — team grid ──────── */
.contact-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 1024px) {
  .contact-team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .contact-team-grid { grid-template-columns: 1fr; }
}

/* ──────── ContactPage — distributors list layout ──────── */
.contact-dist-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-dist-layout { grid-template-columns: 1fr; }
}

/* dist-mail-btn hover */
.dist-mail-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.dist-mail-btn:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 3px;
}

/* ──────── ContactPage — form layout ──────── */
.contact-form-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 5vw, 100px);
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-form-layout { grid-template-columns: 1fr; }
}

/* form-name-grid collapse mobile */
.form-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 600px) {
  .form-name-grid { grid-template-columns: 1fr; }
}

/* ──────── ContactPage — spinner ──────── */
.contact-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spinnerRotate 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-spinner { animation-duration: 2s; }
}

/* ──────── HomePage — markets grid (5 cols) ──────── */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1200px) {
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .markets-grid { grid-template-columns: 1fr; }
}

/* market pillar card hover */
.market-pillar-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18);
}
.market-pillar-card:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 3px;
}

/* ──────── HomePage — category pillar cards ──────── */
.category-pillar-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(31,31,31,0.18);
}
.category-pillar-card:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 3px;
}

/* ──────── HomePage — certifications bande sombre ──────── */
.certs-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 1024px) {
  .certs-band-inner { grid-template-columns: 1fr; }
}

/* ──────── HomePage — blog section ──────── */
.home-blog ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .home-blog ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .home-blog ul { grid-template-columns: 1fr; }
}

/* ──────── HomePage — nouvelles classes BEM (refacto inline styles) ──────── */

/* ──────── Utilities sémantiques globales (Vague 1) ──────── */

/* .scroll-anchor — scroll-margin-top pour tous les id="*-section-*" */
.scroll-anchor { scroll-margin-top: 120px; }

/* .mono-meta — meta date/info gris mono, ~30 occurrences */
.mono-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* .honeypot — champs anti-spam, invisible (utility partagee : ContactPage, DevisPage, FeedbackWidget) */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Section utilities partagées --- */
.section-head-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 36px;
}

/* --- tabs-pill (HomeProducts) --- */
.tabs-pill {
  display: flex;
  gap: 4px;
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 999px;
}
.tabs-pill button {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
.tabs-pill button.on {
  background: var(--vfp-red);
  color: var(--paper);
}

/* --- HomeProducts --- */
.home-products {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.home-products-title { margin-top: 12px; }
.home-products-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* --- HomeAbout --- */
.home-about { background: var(--paper); }
.home-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.home-about-media { position: relative; }
.home-about-overlay {
  position: absolute;
  left: 40px; right: 40px; top: 40px; bottom: 40px;
  background: var(--vfp-red);
  opacity: 0.94;
}
.home-about-overlay-content {
  position: absolute;
  left: 40px; right: 40px; top: 40px; bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: var(--paper);
  z-index: 1;
}
.home-about-overlay-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.home-about-overlay-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 10px;
}
.home-about-heading { margin-top: 14px; }
.home-about-lead { margin-top: 18px; max-width: 52ch; }
.home-about-cta { margin-top: 24px; }

/* --- HomeServices --- */
.home-services { background: var(--paper-2); }
.home-services-intro { max-width: 780px; margin-bottom: 40px; }
.home-services-title { margin-top: 12px; }
.home-services-cta { margin-top: 20px; }

/* --- HomeMarkets --- */
.home-markets {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.home-markets-title { margin-top: 10px; }
.home-markets-lead { margin-top: 12px; max-width: 52ch; }

/* market pillar card — base (layout + colors) */
.market-pillar-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  border: 1px solid var(--line);
  min-height: 180px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.market-pillar-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
  margin-bottom: 10px;
}
.market-pillar-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.market-pillar-card__excerpt {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--graphite);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.market-pillar-card__cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vfp-red);
}

/* --- HomeCategories --- */
.home-categories {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.home-categories-head { margin-bottom: 40px; }
.home-categories-title { margin-top: 10px; }
.home-categories-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* category pillar card — base */
.category-pillar-card {
  display: flex;
  gap: 20px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  align-items: flex-start;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.category-pillar-card__num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--vfp-red);
  line-height: 1;
  flex-shrink: 0;
  width: 2ch;
}
.category-pillar-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* --- HomeCertsBand --- */
.home-certs-band { background: var(--ink); color: var(--paper-on-ink); }
.home-certs-band__section-num { color: rgba(255,255,255,0.5); }
.home-certs-band__title {
  margin-top: 10px;
  color: var(--paper-on-ink);
  text-wrap: balance;
}
.home-certs-band__lead {
  margin-top: 14px;
  color: var(--paper-on-ink-soft);
  max-width: var(--lead-width);
}
.home-certs-band__cta { margin-top: 24px; }

/* cert-pills-wrap */
.cert-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* cert-dark-pill — base layout + hover */
.cert-dark-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line-on-ink);
  background: transparent;
  transition: border-color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart);
}
.cert-dark-pill:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
}
.cert-dark-pill__code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-on-ink);
}
.cert-dark-pill__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-on-ink);
  opacity: 0.7;
}

/* --- HomeBlog --- */
.home-blog { background: var(--paper); border-top: 1px solid var(--line); }
.home-blog-title { margin-top: 10px; }
.home-blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-blog-grid .news-card { height: 100%; }
.home-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-blog-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
}
.home-blog-card__eyebrow {
  font-size: 12px;
  margin-left: 0;
}

/* --- HomeShows --- */
.home-news { background: var(--paper); }
.home-shows-head-left { max-width: 60ch; }
.home-shows-title { margin-top: 12px; }
.home-shows-list {
  border: 1px solid var(--line);
  background: var(--paper);
}
/* show-row cells — classes BEM (remplace les inline styles) */
.show-row__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--vfp-red);
}
.show-row__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.show-row__loc { font-size: 14px; }
.show-row__stand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.show-row__arrow {
  color: var(--vfp-red);
  font-size: 16px;
  text-align: right;
}

/* --- HomeNewsroom : bandes Salons + Actualités (maquette TPMGE-VFP-2026-03) --- */
section.section.home-newsroom {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding: clamp(40px, 5vw, 72px) 0;
}
.home-nr-band + .home-nr-band {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.home-nr-band > .eyebrow { margin-bottom: 22px; }
.home-nr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.home-nr-head__txt {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(72ch, calc(100% - 12rem));
}
.home-nr-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(28px, 3.2vw, 46px);
  color: var(--ink);
  text-wrap: pretty;
  max-width: none;
}
.home-nr-sub {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 46ch;
}
.home-nr-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--graphite);
  background: var(--paper);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.home-nr-pill svg { transition: transform 0.18s ease; }
.home-nr-pill:hover {
  border-color: var(--vfp-red);
  color: var(--vfp-red);
}
.home-nr-pill:hover svg { transform: translateX(4px); }
.home-nr-pill:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 3px;
}

/* Grille salons : bordure continue, séparateurs internes */
.home-nr-salons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
}
.home-nr-salon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px 22px;
  border-right: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
  min-width: 0;
}
.home-nr-salon:last-child { border-right: 0; }
.home-nr-salon:hover { background: var(--paper-2); }
.home-nr-salon:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: -2px;
  z-index: 1;
}
.home-nr-salon__date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--vfp-red);
  letter-spacing: 0.02em;
}
.home-nr-salon__name {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--graphite);
  line-height: 1.2;
}
.home-nr-salon__place {
  font-size: 15px;
  color: var(--ink);
}
.home-nr-salon__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}
.home-nr-salon__stand {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.home-nr-salon__stand.is-tbc { color: color-mix(in oklch, var(--ink) 55%, transparent); }
.home-nr-salon__arrow {
  color: var(--vfp-red);
  display: flex;
  transition: transform 0.18s ease;
}
.home-nr-salon:hover .home-nr-salon__arrow { transform: translateX(4px); }

/* Grille articles : 3 cartes texte */
.home-nr-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.home-nr-articles > li {
  min-width: 0;
  display: flex;
}
.home-nr-article {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  border: 1px solid var(--line);
  padding: 26px 24px 22px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease;
}
.home-nr-article:hover { border-color: var(--graphite); }
.home-nr-article:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 3px;
}
.home-nr-article__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.home-nr-article__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--graphite);
}
.home-nr-article__excerpt {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.home-nr-article__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
.home-nr-article__more svg { transition: transform 0.18s ease; }
.home-nr-article:hover .home-nr-article__more svg { transform: translateX(4px); }

@media (max-width: 1080px) {
  .home-nr-salons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-nr-salon:nth-child(2n) { border-right: 0; }
  .home-nr-salon:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .home-nr-articles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-nr-salons { grid-template-columns: 1fr; }
  .home-nr-salon {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .home-nr-salon:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .home-nr-salon:last-child { border-bottom: 0; }
  .home-nr-head { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-nr-pill svg,
  .home-nr-salon__arrow,
  .home-nr-article__more svg { transition: none; }
}

/* --- HomeCta --- */
.home-cta { position: relative; overflow: hidden; }
.home-cta__halo {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--vfp-red) 35%, transparent), transparent 70%);
  pointer-events: none;
}
.home-cta__container { position: relative; }
.btn.btn-lg { padding: 16px 28px; font-size: 15px; }

/* --- Responsive HomeAbout / HomeCategories / HomeBlog / HomeShows --- */
@media (max-width: 1024px) {
  .home-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .home-categories-grid { grid-template-columns: 1fr 1fr; }
  .home-blog-grid { grid-template-columns: 1fr 1fr; }
  .section-head-split { margin-bottom: 28px; }
}
@media (max-width: 600px) {
  .home-categories-grid { grid-template-columns: 1fr; }
  .home-blog-grid { grid-template-columns: 1fr; }
  .home-about-overlay,
  .home-about-overlay-content { left: 20px; right: 20px; top: 20px; bottom: 20px; }
}

/* ──────── DistributorsPage ──────── */
.dist-hero { padding-bottom: clamp(36px, 5vw, 72px); }
.dist-hero-count {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* World map */
.dist-map-wrap {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
}
.dist-map-svg {
  display: block;
  width: 100%;
  height: auto;
}
.dist-pin { cursor: pointer; outline: none; }
.dist-pin circle:first-child { transition: r 0.2s var(--ease-out-quart), opacity 0.2s var(--ease-out-quart); transform-origin: center; }
.dist-pin:hover circle:first-child,
.dist-pin:focus-visible circle:first-child,
.dist-pin.is-active circle:first-child {
  r: 14;
  opacity: 0.22;
}
.dist-pin:focus-visible {
  outline: 2px solid var(--vfp-red);
  outline-offset: 2px;
  border-radius: 50%;
}
.dist-map-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 18px));
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  min-width: 160px;
  max-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.dist-map-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--ink);
}
.dist-map-tip-country {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.dist-map-tip-company {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.dist-map-tip-city {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
}
.dist-map-hint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--graphite);
}

/* Filters */
.dist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dist-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 240px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--graphite);
  transition: border-color 0.2s var(--ease-out-quart);
}
.dist-search:focus-within { border-color: var(--ink); color: var(--ink); }
.dist-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.dist-search input::placeholder { color: var(--graphite); }
.dist-zone-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dist-zone-tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), background 0.2s var(--ease-out-quart);
}
.dist-zone-tab:hover { border-color: var(--ink); color: var(--ink); }
.dist-zone-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Zone blocks */
.dist-zone-block {
  padding-top: 28px;
  margin-bottom: 40px;
}
.dist-zone-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.dist-zone-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
}
.dist-zone-name { flex: 1; font-size: clamp(20px, 1.5vw, 24px); }
.dist-zone-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--graphite);
}

/* Distributor cards */
.dist-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .dist-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dist-card-grid { grid-template-columns: 1fr; } }

.dist-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
  scroll-margin-top: 100px;
}
.dist-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.dist-card.is-active {
  border-color: var(--vfp-red);
  box-shadow: 0 0 0 3px rgba(227,3,46,0.08);
}
.dist-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dist-card-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vfp-red);
  flex-shrink: 0;
}
.dist-card-country {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.dist-card-city {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 4px;
}
.dist-card-company {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.dist-card-address {
  font-size: 13px;
  line-height: 1.5;
  color: var(--graphite);
}
.dist-card-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.dist-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--graphite);
  text-decoration: none;
  transition: color 0.15s var(--ease-out-quart);
  word-break: break-word;
}
.dist-card-link:hover { color: var(--vfp-red); }

.dist-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--graphite);
  font-size: 15px;
  border: 1px dashed var(--line);
  border-radius: 4px;
}

.dist-cta-band { border-bottom: none !important; }

/* Contact page — distributors CTA teaser */
.contact-dist-teaser {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.contact-dist-teaser .btn {
  margin-top: 6px;
}

@media (max-width: 768px) {
  .dist-filters { flex-direction: column; align-items: stretch; }
  .dist-search { width: 100%; }
  .dist-zone-tabs { justify-content: flex-start; }
}

/* ──────── Vague 1 — Composants partagés ──────── */

/* ── Illustrations.jsx ── */
.hero-motif-svg { position: absolute; inset: 0; }
.service-illustration-svg { width: 100%; height: 100%; display: block; }
.product-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 36px);
  color: rgba(255,255,255,0.92);
}
.product-glyph__class {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.product-glyph__ref {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4.4vw, 64px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(255,255,255,0.96);
  word-break: break-word;
}
.product-glyph__foot {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.cert-badge-placeholder {
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  gap: 6px;
}
.cert-badge-placeholder__pattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(31,31,31,0.04) 12px 13px);
}
.cert-badge-placeholder__label {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
}
.cert-badge-placeholder__sub {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  text-align: center;
}

/* ── SectionNav.jsx ── */
.section-nav {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 67px;
  background: var(--paper);
  z-index: 30;
}
.section-nav > .container {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.section-nav-btn {
  /* Les onglets sont des <a href="#ancre"> : partageables et navigables au clavier.
     display + text-decoration ramenent le rendu a celui des anciens <button>. */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 8px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.section-nav-btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--vfp-red);
}
.section-nav-btn__num {
  color: var(--vfp-red);
  margin-right: 8px;
}

/* ── TopBar.jsx ── */
.topbar-nav-item { position: relative; }
.topbar-nav-chevron {
  margin-left: 7px;
  transition: transform 0.2s ease;
  opacity: 0.55;
  transform: rotate(var(--rot, 0deg));
}
.mm-feature .mm-kicker { color: var(--paper); }
.mobile-drawer-cta { width: 100%; justify-content: center; margin-bottom: 20px; }

/* ── Footer.jsx ── */
.foot-col-brand { padding-top: 12px; }
.foot-col-brand .brand { display: inline-flex; margin-bottom: 10px; }
.foot-brand__logo { height: 30px; width: auto; }
.foot-tagline {
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
  margin: 12px 0 0;
}
.foot-social {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.foot-contact-li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
}
.foot-contact-li .icon { color: var(--paper); flex-shrink: 0; }
.foot-contact-li a { font-size: 13px; }
.foot-contact-li--address {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
}
.foot-contact-li--address .icon { margin-top: 2px; color: var(--paper); flex-shrink: 0; }

/* ── ContactDrawer.jsx ── */
/* Réutilise .contact-field__label et .contact-field__input via ContactPage */
.cdrawer-submit-btn { width: 100%; justify-content: center; }

/* Champs ContactDrawer — aliases vers le pattern ContactPage */
.cdrawer-field span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.cdrawer-field input,
.cdrawer-field select,
.cdrawer-field textarea {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.cdrawer-field select { padding-right: 20px; }
.cdrawer-field textarea { resize: vertical; }

/* Honeypot ContactDrawer — utilise .honeypot (utility globale) */
/* form-error ContactDrawer */
.form-error {
  margin-top: 12px;
  color: var(--vfp-red);
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

/* ── RedCtaSection.jsx ── */
.red-cta-section { background: var(--paper); border-top: 0 !important; }
.red-cta-box {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--vfp-red);
  padding: clamp(32px, 5vw, 64px);
}
.red-cta-box__title { color: var(--ink); }
.red-cta-box__lead { margin-top: 18px; color: var(--graphite); }
.red-cta-box__actions { display: flex; justify-content: flex-end; }
.cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 60px;
  align-items: end;
}

/* ── FranceMap.jsx ── */
.france-map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.france-map-grid-dot { fill: var(--map-stroke); }
.france-map-outline { fill: var(--map-bg); }
.france-map-hit { cursor: pointer; fill: transparent; }
.france-map-zone-active--stroke { stroke: var(--map-pin-stroke); }

/* ── WorldMap.jsx ── */
.world-map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.world-map-grid-dot { fill: var(--map-grid); }
.world-map-base { fill: var(--map-bg); }
.world-map-zone-active--stroke { stroke: var(--map-pin-stroke); }
.world-map-pin-shape { fill: var(--vfp-red); stroke: var(--map-pin-stroke); }

/* ── Placeholder.jsx ── */
.placeholder {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--placeholder-tint, var(--paper-2));
}
.placeholder__stripe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(31,31,31,0.07) 12px 13px);
}
.placeholder--dark .placeholder__stripe {
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.06) 12px 13px);
}
.placeholder__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 2;
  color: var(--graphite);
  background: rgba(243,243,243,0.92);
}
.placeholder--dark .placeholder__label {
  color: var(--paper);
  background: rgba(20,20,20,0.85);
}
/* Hit-area transparente partagee par FranceMap et WorldMap */
.world-map-hit { cursor: pointer; fill: transparent; }

/* ── Icon.jsx — IconBadge (cercle avec icone) ── */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-badge-size, 44px);
  height: var(--icon-badge-size, 44px);
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.icon-badge--red {
  background: var(--vfp-red);
  color: #fff;
  border-color: var(--vfp-red);
}
.icon-badge--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.icon-badge--soft {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
.icon-badge--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.icon-badge--red-soft {
  background: rgba(227, 3, 46, 0.08);
  color: var(--vfp-red);
  border-color: rgba(227, 3, 46, 0.18);
}

/* ── Responsive Vague 1 ── */
@media (max-width: 1024px) {
  .numbered-list__item { grid-template-columns: 48px 1fr; gap: 16px; }
  .kpi-block-dark { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kpi-block-dark { grid-template-columns: 1fr; }
  .kpi-block-dark__item { padding-left: 0; }
  .kpi-block-dark__sep { display: none; }
}

/* ──────── BEM refacto SalesSection ──────── */

/* Section wrapper */
.sales-section {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}

/* Dot-grid background */
.sales-dot-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, rgba(10,10,11,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Container relative wrapper */
.sales-container {
  position: relative;
}

/* Section header (titre + lead) */
.sales-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sales-section-intro {
  max-width: none;
}

.sales-section-title {
  font-size: clamp(34px, 4.6vw, 64px);
  margin-top: 18px;
  max-width: max-content;
}

.sales-section-lead {
  max-width: 80ch;
  font-size: 17px;
  margin: 0;
}

/* Bloc France / International */
.sales-block {
  margin-top: 72px;
}

.sales-block--intl {
  margin-top: 64px;
}

/* Header numéroté (01 · France / 02 · International) */
.sales-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.sales-block-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sales-block-num--france {
  color: var(--vfp-red);
}

.sales-block-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.sales-block-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--graphite);
  letter-spacing: 0.1em;
}

/* Panneau détail (grille 3 colonnes) — commun France + International */
.sales-detail-panel {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.3fr;
  gap: 0;
  border: 1px solid var(--ink);
  background: #fff;
  overflow: hidden;
}

/* Colonne 1 — carte */
.sales-detail-map {
  background: var(--paper-2);
  padding: 40px 36px;
  border-right: 1px solid var(--line);
  position: relative;
}

.sales-detail-map__label { margin-bottom: 24px; color: var(--graphite); }

.sales-detail-zone-label {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--graphite);
}

.sales-detail-coords {
  position: absolute;
  bottom: 14px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--graphite);
}

/* Colonne 2 — identité commerciale */
.sales-detail-identity {
  padding: 40px 36px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

/* Label "Votre contact" */
.sales-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
}

/* Titre région — modificateurs selon taille */
.sales-identity-region {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 14px;
  color: var(--vfp-red);
}

.sales-identity-region--france {
  font-size: clamp(24px, 2.4vw, 34px);
}

.sales-identity-region--intl {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
}

/* Row avatar + nom */
.sales-identity-person {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sales-person-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sales-person-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 4px;
}

/* Liens contact (email / tel) */
.sales-identity-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Span flex-1 dans les liens contact */
.sales-link-text {
  flex: 1;
}

/* Colonne 3 — fond dark (départements / pays) */
.sales-detail-dark {
  padding: 40px 36px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
}

.sales-dark-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--map-grid);
}

.sales-dark-count {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
}

.sales-dark-pills {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-dark-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 9px;
  border: 1px solid var(--map-stroke);
  border-radius: 2px;
  background: var(--map-stroke);
  color: var(--paper);
  line-height: 1;
}

.sales-dark-hint {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* Responsive — panneau détail */
@media (max-width: 1024px) {
  .sales-detail-panel {
    grid-template-columns: 1fr 1fr;
  }
  .sales-detail-dark {
    grid-column: 1 / -1;
    border-top: 1px solid var(--ink);
  }
}

@media (max-width: 640px) {
  .sales-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .sales-detail-panel {
    grid-template-columns: 1fr;
  }
  .sales-detail-map {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sales-detail-identity {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ──────── BEM refacto ContactPage ──────── */

/* Sections — scroll-margin partagé + border-bottom */
.contact-hero,
.contact-team,
.contact-dist,
.contact-people,
.contact-form-section { scroll-margin-top: 120px; }

.contact-section--bordered { border-bottom: 1px solid var(--line); }

/* HeroSection */
.contact-hero { padding-bottom: clamp(36px, 5vw, 72px); }
/* Pas de surcharge de taille : le titre reprend le socle .h-display du site
   (clamp(44px, 6vw, 92px)), comme les autres pages hero (Distributeurs,
   Certifications, Marchés). Il était gonflé à clamp(56px, 8vw, 112px). */
.contact-hero__title { margin-top: 14px; }
.contact-hero__lead { margin-top: 18px; max-width: var(--lead-width); }

/* TeamSection — header + title row */
.contact-team__header { margin-bottom: 40px; }
.contact-team__title-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* TeamSection — member card */
.contact-team__item { padding-top: 24px; }
.contact-team__member-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.contact-team__member-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
.contact-team__member-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 4px;
}
.contact-team__member-role {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.contact-team__member-zone {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 16px;
}
.contact-team__member-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.contact-team__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.contact-team__link--phone { color: var(--graphite); }

/* DistributorsList */
.contact-dist__title { margin-top: 12px; }
.contact-dist__lead { font-size: clamp(15px, 1.1vw, 17px); }
.contact-dist__summary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ContactForm — success state */
.contact-form-success {
  padding: clamp(40px, 5vw, 60px);
  border: 1px solid var(--ink);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.contact-form-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vfp-red);
  color: var(--paper-on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-form-success__title { margin: 0; }
.contact-form-success__body {
  margin: 0;
  font-size: 15px;
  color: var(--graphite);
  max-width: 48ch;
  line-height: 1.6;
}

/* ContactForm — honeypot utilise .honeypot (utility partagee) */

/* ContactForm — champs label étendus */
.contact-field__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.contact-field--mb { margin-bottom: 28px; }

/* ContactForm — input base */
.contact-input {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}

/* ContactForm — select padding-right pour la flèche native */
.contact-select { padding-right: 20px; }

/* ContactForm — textarea resize */
.contact-textarea {
  resize: vertical;
  padding-top: 12px;
}

/* form-name-grid avec marge basse */
.form-name-grid--mb { margin-bottom: 28px; }

/* ContactForm — turnstile */
.contact-turnstile { margin-bottom: 24px; }

/* ContactForm — actions row */
.contact-form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ContactForm — bouton submit */
.contact-submit-btn {
  padding: 16px 28px;
  font-size: 15px;
  gap: 10px;
}

/* ContactForm — message d'erreur */
.contact-form__error {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

/* FormSection — sidebar sticky */
.contact-form-layout__sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}
.contact-form__title { margin-top: 12px; max-width: none; font-size: clamp(26px, 2.3vw, 36px); }
.contact-form__lead {
  margin-top: 16px;
  font-size: clamp(15px, 1.1vw, 17px);
}

/* PeopleSection — interlocuteurs transverses, fin de page.
   Volontairement sans fiche ni portrait : un filet par entrée suffit, le bloc
   ferme la page sans concurrencer les fiches territoriales. Les !important
   neutralisent la règle globale p { … !important }. */
.contact-people { border-top: 1px solid var(--line); }
/* minmax large à dessein : la colonne doit tenir « email | téléphone » d'un seul
   tenant, sinon le séparateur se retrouve orphelin en fin de ligne. En dessous,
   la grille repasse à une colonne avant que la ligne ne casse. */
.contact-people__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.contact-people__item {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.contact-people__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--graphite);
}
.contact-people__role {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
}
.contact-people__lines {
  margin: 14px 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.contact-people__sep { color: var(--line); }
.contact-people__link {
  color: var(--graphite);
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  transition: color 0.15s var(--ease-out-quart), border-color 0.15s var(--ease-out-quart);
}
.contact-people__link:hover { color: var(--vfp-red); border-color: var(--vfp-red); }
/* Sur mobile la ligne ne tient plus : on empile et on retire le séparateur
   plutôt que de le laisser pendre en fin de première ligne. */
@media (max-width: 560px) {
  .contact-people__lines { flex-direction: column; align-items: flex-start; gap: 8px; }
  .contact-people__sep { display: none; }
}

/* ──────── BEM refacto CategoryHubPage ──────── */

/* --- Hero section --- */
.chub-hero {
  background: var(--ink);
  color: var(--paper);
  padding-bottom: clamp(56px, 8vw, 120px);
}
.section-num--on-dark { color: var(--vfp-red); }
.chub-hero__title { margin-top: 14px; color: var(--paper-on-ink); }
.chub-hero__lead  { margin-top: 18px; color: var(--paper-on-ink-soft); max-width: var(--lead-width); }
.chub-hero__nonCmr { margin-top: 20px; }
/* --- KPI block --- */
.chub-kpi-block {
  display: grid;
  grid-template-columns: var(--cols, repeat(4, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-on-ink);
  margin-top: 48px;
  padding-top: 36px;
}
.chub-kpi-block__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-left: 24px;
}
.chub-kpi-block__item:first-child { padding-left: 0; }
.chub-kpi-block__sep {
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 28px;
  background: var(--vfp-red);
}
.chub-kpi-block__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta-on-ink);
  opacity: 0.7;
}
.chub-kpi-block__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper-on-ink);
}
.chub-kpi-block__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--meta-on-ink);
  max-width: 22ch;
}

/* --- Numbered list (Applications) --- */
.numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.numbered-list__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.numbered-list__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
}
.chub-applications__title { font-size: 22px; margin-bottom: 10px; }
.chub-applications__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 60ch;
}

/* --- Tech specs table --- */
.chub-specs-table {
  border: 1px solid var(--ink);
  background: var(--paper);
}
.chub-specs-table__head {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  gap: 16px;
}
.chub-specs-table__row {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  padding: 18px 24px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.chub-specs-table__row:last-child { border-bottom: 0; }
.chub-specs-table__cell-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--graphite);
}
.chub-specs-table__cell-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

/* --- Empty state --- */
.chub-empty {
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* --- Grid produits 3 colonnes (variante CategoryHubPage) --- */
.grid-products--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .grid-products--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .grid-products--3 { grid-template-columns: 1fr; } }

/* --- Section split layout (0.7fr 1.3fr) --- */
.chub-section-split {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(24px, 5vw, 80px);
}
.chub-section-split--mb { margin-bottom: 40px; }
.chub-section-split__title { margin-top: 14px; }
.chub-section-split__lead  { margin-top: 18px; max-width: 36ch; }
.chub-section-split__end   { align-self: end; }

/* --- Specs section background --- */
.chub-specs-section { background: var(--paper-2); }

/* --- Ranges head --- */
.chub-ranges__head { margin-bottom: 40px; }
.chub-ranges__lead { margin-top: 12px; max-width: var(--lead-width); }
.chub-ranges__count {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
}

/* --- CTA terminal rouge --- */
.chub-cta {
  background: var(--vfp-red);
  color: var(--paper-on-ink);
  border-top: 0;
}
.chub-cta__title { color: var(--paper-on-ink); }
.chub-cta__lead  { margin-top: 18px; color: var(--paper-on-ink-soft); }
.chub-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.chub-cta__btn--secondary { opacity: 0.85; }

/* --- Responsive CategoryHubPage --- */
@media (max-width: 1024px) {
  .chub-section-split { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .chub-cta__actions { align-items: flex-start; }
}
@media (max-width: 768px) {
  .chub-kpi-block {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .chub-kpi-block__item { padding-left: 0; }
  .chub-kpi-block__sep  { display: none; }
}

/* ──────── BEM refacto MarketHubPage ──────── */

/* ── ProductCard wrapper (supprime les inline textDecoration + color) ── */
.market-product-card {
  text-decoration: none;
  color: inherit;
}
.market-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Hero (section 01) ── */
.market-hero {
  padding-bottom: clamp(36px, 5vw, 72px);
}
.market-hero__title {
  margin-top: 14px;
  text-wrap: balance;
}
.market-hero__lead {
  margin-top: 18px;
  max-width: var(--lead-width);
}

/* ── Section headers communs ── */
.market-section__head {
  margin-bottom: 40px;
}
.market-section__title {
  margin-top: 12px;
  text-wrap: balance;
}
.market-section__empty {
  color: var(--graphite);
  font-style: italic;
}

/* ── Supports section bg (section 03) ── */
.market-supports-section {
  background: var(--paper-2);
}

/* ── Supports grid — layout 0.7fr / 1.3fr ── */
.market-supports-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}

/* ── Articles grid — layout 0.7fr / 1.3fr ── */
.market-articles-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}

/* ── Numbered list partagee (supports + articles + docs) ── */
.market-numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.market-numbered-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.market-numbered-list__item--center {
  align-items: center;
  padding: 20px 0;
}
.market-numbered-list__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
}

/* ── Article item body ── */
.market-article__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.market-article__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
}
.market-article__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Remplace les onMouseOver/onMouseOut handlers JSX — hover CSS pur */
.market-article__title-link {
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s var(--ease-out-quart);
}
.market-article__title-link:hover {
  color: var(--vfp-red);
}
.market-article__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ── Support row (item de la liste supports) ── */
.market-support__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.market-support__label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

/* ── Documents section bg (section 05) ── */
.market-docs-section {
  background: var(--paper-2);
}

/* ── Documents list ── */
.market-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.market-docs-list__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.market-docs__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.market-docs__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.market-docs__type {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ── Btn ghost taille reduite (dl button) ── */
.btn-ghost--small {
  font-size: 13px;
  padding: 9px 18px;
}

/* ── Responsive : collapse grids supports + articles ── */
@media (max-width: 1024px) {
  .market-supports-grid,
  .market-articles-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ──────── BEM refacto AboutPage ──────── */

/* scroll anchors */
.about-scroll-anchor { scroll-margin-top: 120px; }

/* page-head override */
.about-page__head { padding-bottom: clamp(36px,5vw,72px); }

/* hero */
.about-hero__title { margin-top: 14px; font-size: clamp(34px, 4.6vw, 64px); }
.about-hero__lead  { margin-top: 18px; max-width: var(--lead-width); }

/* story grid — extends .about-story-grid (responsive rules already in file) */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px,6vw,90px);
  align-items: center;
}
.about-story__title { margin-top: 12px; font-size: clamp(28px, 3.2vw, 44px); }
.about-story__lead  { margin-top: 18px; }

/* Carte de marque (section 01 Qui sommes-nous) : logo VFP encadre */
.about-brand-card {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.about-brand-card__logo {
  width: min(70%, 300px);
  height: auto;
}
.about-brand-card__since {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Variante photo : une image editoriale remplit tout le cadre, le millesime passe en pastille posee dessus */
.about-brand-card--photo {
  position: relative;
  display: block;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: var(--paper-2);
}
.about-brand-card--photo .about-brand-card__logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}
.about-brand-card--photo .about-brand-card__since {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* kpi dark section */
.about-kpi-section { background: var(--ink); color: var(--paper); }

/* kpi-block-dark — extends class already referenced in responsive rules */
.kpi-block-dark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line-on-ink);
  padding-top: 40px;
}
.kpi-block-dark__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: var(--pl, 18px);
}
.kpi-block-dark__item:first-child { padding-left: 0; }
.kpi-block-dark__sep {
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 28px;
  background: var(--vfp-red);
}
.kpi-block-dark__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta-on-ink);
  opacity: 0.7;
}
.kpi-block-dark__value {
  font-family: var(--font-display);
  font-size: clamp(36px,5vw,68px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper-on-ink);
}
.kpi-block-dark__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--meta-on-ink);
  max-width: 22ch;
}

/* expertise — diptyque éditorial Héritage / Innovation */
.about-expertise { padding-top: clamp(8px, 2vw, 24px); }
.about-expertise__head {
  display: grid;
  grid-template-columns: minmax(150px, 0.26fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: baseline;
  padding-bottom: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.about-expertise__lead {
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 70ch;
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .about-expertise__head { grid-template-columns: 1fr; gap: 14px; }
}

/* diptyque : 2 volets équilibrés, auto-responsive sans media query */
.expertise-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 72px);
}
.expertise-panel {
  --rule: var(--line-strong);
  --tag: var(--graphite);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.expertise-panel--accent {
  --rule: var(--vfp-red);
  --tag: var(--vfp-red);
  border-top-width: 2px;
}
.expertise-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.expertise-panel__tag { color: var(--tag); font-weight: 500; }
.expertise-panel__years { color: var(--graphite); opacity: 0.72; }
.expertise-panel__years::before {
  content: "·";
  margin-right: 14px;
  color: var(--line-strong);
}
.expertise-panel__index {
  margin-left: auto;
  color: var(--ink-soft);
  opacity: 0.55;
  letter-spacing: 0.18em;
}
.expertise-panel__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.expertise-panel__body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--graphite);
  max-width: 60ch;
}

/* vision — extends .section-alt */
.about-vision { background: var(--paper-2); }

/* vision-grid */
.vision-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px,5vw,90px);
  align-items: start;
}
.about-vision__title { margin-top: 14px; }
.about-vision__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 68ch;
  white-space: pre-line;
}

/* engagements — extends .engagements-grid (responsive rules already in file) */
.engagements-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(24px,5vw,80px);
}
.about-engagements__title { margin-top: 16px; }
.about-engagements__lead  { margin-top: 22px; max-width: 36ch; }

/* numbered list (about-specific — avoids global utility) */
.about-numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.about-numbered-list__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.engagements__item-title { font-size: 22px; margin-bottom: 10px; }
.engagements__item-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 60ch;
}

/* team */
.team-head-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 56px;
}
.about-team__title { margin-top: 14px; }
.about-team__intro {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--graphite);
  max-width: 80ch;
}

/* team-grid — extends class already referenced in responsive rules */
.team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-2);
}
.team-card__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sources carrees avec du vide au-dessus de la tete : on zoome en ancrant
     le bas pour rogner le vide superieur et cadrer tete + buste en carre */
  object-position: center bottom;
  transform: scale(1.2);
  transform-origin: center bottom;
  display: block;
}
.team-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
}
.team-card__name { font-size: 20px; margin: 0; }
.team-card__role {
  margin: 0;
  font-size: 13.5px;
  color: var(--graphite);
  line-height: 1.45;
}
.team-card__email {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  text-decoration: none;
  transition: color 0.2s var(--ease-out-quart);
}
.team-card__email:hover { color: var(--vfp-red); }

/* certifications head */
.about-certs__head  { margin-bottom: 40px; }
.about-certs__title { margin-top: 14px; }

/* cert-link-grid — extends class already in file */
.cert-link-grid {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cert-link-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  height: 100%;
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.cert-link-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cert-link-card__desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--graphite);
  line-height: 1.55;
}
.cert-link-card__links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
.cert-link-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.cert-link-card__link--doc {
  color: var(--vfp-red);
  border-bottom-color: rgba(227,3,46,0.28);
}

/* about cert table (4-col layout, distinct from .cert-table-header 6-col) */
.about-cert-table {
  border: 1px solid var(--ink);
  background: var(--paper);
}
.about-cert-table__head {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1fr 0.6fr;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  gap: 16px;
}
.about-cert-table__head-year { text-align: right; }
.about-cert-table__row {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1fr 0.6fr;
  padding: 22px 24px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.about-cert-table__row:last-child { border-bottom: 0; }
.about-cert-table__cell-ref {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-cert-table__ref-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-cert-table__doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--vfp-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(227,3,46,0.28);
}
.about-cert-table__cell-scope { font-size: 14px; color: var(--graphite); }
.about-cert-table__cell-year {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--graphite);
}

/* status pills */
.cert-status-pill {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cert-status-pill.is-ok   { background: var(--status-ok-bg);   color: var(--status-ok-fg); }
.cert-status-pill.is-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }

/* associations / écosystème */
.about-associations { border-top: 1px solid var(--line); }
.about-associations__title { margin-top: 12px; margin-bottom: 12px; }
.about-associations__intro { margin-bottom: 40px; max-width: 72ch; }

/* Sous-groupes partenaires empilés pleine largeur */
.ecosystem-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.ecosystem-group__title {
  margin-bottom: 16px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vfp-red);
}
/* Variante compacte du partner-grid dans les sous-groupes : blocs par 4, taille uniforme */
.partner-grid--compact {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* partner-grid — extends class */
.partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Carte partenaire (écosystème) : format vertical unique, avec ou sans logo */
.partner-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 64px;
  padding: 22px 18px;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.2s var(--ease-out-quart);
}
.partner-link__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.partner-link__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--graphite);
  margin-top: 4px;
}
.partner-link__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}
/* Zone logo : hauteur fixe identique pour toutes les cartes (logo ou icône fallback) */
.partner-link__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
}
.partner-link__logo img {
  width: 150px;
  height: 48px;
  max-width: 150px;
  max-height: 48px;
  object-fit: contain;
}
/* Logo clair/blanc (ex. Fimor, NBC) : pastille foncée pour rester visible sur carte claire */
.partner-link__logo--dark {
  box-sizing: border-box;
  padding: 6px 16px;
  border-radius: 8px;
  background: var(--map-bg);
}
.partner-link__logo--dark img {
  height: 36px;
  max-height: 36px;
}

/* Logos certifications (carte About §04) */
.cert-link-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 56px;
}
.cert-link-card__logo img {
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
}

/* Logo en tête de la page détail salon */
.salon-head-logo {
  display: flex;
  align-items: center;
  height: 56px;
  margin: 8px 0 18px;
}
.salon-head-logo img {
  max-width: 220px;
  max-height: 100%;
  object-fit: contain;
}

/* Vignette de couverture des brochures */
.brochure-cover {
  display: block;
  margin: -4px 0 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  aspect-ratio: 1.414 / 1;
  overflow: hidden;
}
.brochure-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* responsive adjustments for AboutPage */
@media (max-width: 1024px) {
  .about-story-grid { grid-template-columns: 1fr; }
  .vision-grid      { grid-template-columns: 1fr; }
  .engagements-grid { grid-template-columns: 1fr; }
  .team-head-grid   { grid-template-columns: 1fr; }
  .cert-link-grid   { grid-template-columns: repeat(2, 1fr); }
  .partner-grid     { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-groups { grid-template-columns: 1fr; gap: 32px; }
  .partner-grid--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .kpi-block-dark   { grid-template-columns: repeat(2, 1fr); }
  .values-grid      { grid-template-columns: 1fr; }
  .team-grid        { grid-template-columns: repeat(2, 1fr); }
  .cert-link-grid   { grid-template-columns: 1fr; }
  .partner-grid     { grid-template-columns: 1fr; }
  .partner-grid--compact { grid-template-columns: repeat(2, 1fr); }
  .about-cert-table__head,
  .about-cert-table__row { grid-template-columns: 1fr 1fr; }
  .about-cert-table__cell-scope,
  .about-cert-table__cell-year { display: none; }
}
@media (max-width: 480px) {
  .kpi-block-dark { grid-template-columns: 1fr; }
  .kpi-block-dark__item { --pl: 0px; }
  .kpi-block-dark__sep  { display: none; }
  .team-grid { grid-template-columns: 1fr; }
  .partner-grid--compact { grid-template-columns: 1fr; }
}

/* ──────── BEM refacto MarketsPage ──────── */

/* Hero */
.market-page-head { padding-bottom: clamp(36px, 5vw, 72px); }
.market-hero-title { margin-top: 14px; }
.market-hero-lead  { margin-top: 18px; max-width: 64ch; }

/* Section 02 head */
.market-section-head  { margin-bottom: 40px; }
.market-section-title { margin-top: 12px; }

/* Liste ordonnée */
.market-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Item de marché — grille 3 colonnes */
.market-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

/* Numéro mono rouge */
.market-item-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
  padding-top: 4px;
}

/* Colonne éditorial */
.market-item-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Titre cliquable */
.market-item-title { font-size: clamp(20px, 2vw, 26px); }

/* Lien titre : hover CSS pur (remplace onMouseOver JSX) */
.market-item-link {
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s var(--ease-out-quart);
}
.market-item-link:hover { color: var(--vfp-red); }

/* Lead texte */
.market-item-lead {
  font-size: 15px;
  margin: 0;
  max-width: 60ch;
}

/* CTA btn */
.market-item-cta {
  align-self: center;
  white-space: nowrap;
  font-size: 13px;
}

/* État vide */
.market-empty { color: var(--graphite); }

/* ──────── BEM refacto ServicesPage ──────── */

/* Hero */
.services-page-head { padding-bottom: clamp(36px, 5vw, 72px); }
.services-hero-title { margin-top: 14px; }
.services-hero-lead  { margin-top: 18px; max-width: 56ch; }

/* Section alternée pair/impair */
.services-section--even { background: var(--paper); border-top: 1px solid var(--line); }
.services-section--odd  { background: var(--paper-2); border-top: 1px solid var(--line); }

/* Grille 2-col alternée */
.services-row--even {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(24px, 5vw, 100px);
  align-items: center;
}
.services-row--odd {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(24px, 5vw, 100px);
  align-items: center;
}

/* Colonne illustration : ordre visuel */
.services-row-illu--left  { order: 0; }
.services-row-illu--right { order: 1; }

/* Eyebrow mono rouge au-dessus de l'illustration */
.services-row-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vfp-red);
  text-transform: uppercase;
}

/* Cadre illustration */
.services-row-illu-frame {
  margin-top: 22px;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  /* background : custom property dynamique conservée via style={} */
}

/* Colonne texte : ordre visuel */
.services-row-text--right { order: 1; }
.services-row-text--left  { order: 0; }

/* Picto + titre en ligne */
.services-row-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Titre h2 */
.services-row-title { margin-top: 0; }

/* Description */
.services-row-desc { margin-top: 18px; font-size: 18px; }

/* Bouton contact */
.services-row-btn { margin-top: 28px; }

/* Responsive : collapse 1-col — étend la règle existante */
@media (max-width: 1024px) {
  .services-row--even,
  .services-row--odd { grid-template-columns: 1fr !important; }
  .services-row-illu--left,
  .services-row-illu--right,
  .services-row-text--right,
  .services-row-text--left  { order: initial !important; }
}

/* ──────── BEM refacto ArticlesPage ──────── */

/* Hero */
.art-hero-section { padding-bottom: clamp(36px, 5vw, 72px); }
.art-hero-title   { margin-top: 14px; }
.art-hero-lead    { margin-top: 20px; }
.art-hero-count   { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite); }

/* Extrait tronqué à 3 lignes dans ArticleCard */
.art-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  color: var(--graphite);
  line-height: 1.5;
}

/* Label "Lire" mono rouge dans FeaturedCard */
.art-featured-read-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vfp-red);
}

/* Flèche colorée dans FeaturedCard */
.art-featured-read-arrow {
  color: var(--vfp-red);
  margin-left: 8px;
}

/* ──────── BEM refacto BrochuresPage ──────── */
.brochure-hero-title { margin-top: 14px; }
.brochure-hero-lead  { margin-top: 18px; max-width: 62ch; }

/* ──────── BEM refacto DistributorsPage ──────── */

/* Hero */
.dist-hero__title { margin-top: 14px; }
.dist-hero__lead  { margin-top: 20px; max-width: var(--lead-width); }

/* Section head (réutilise cert-section__eyebrow + __title) */
.dist-section__head     { margin-bottom: 40px; }
.dist-section__head--sm { margin-bottom: 32px; }

/* Section 03 annuaire — fond paper-2 */
.dist-list-section { background: var(--paper-2); }

/* CTA lead — max-width 60ch (variante du 56ch de cert-doc__lead) */
.dist-cta__lead { max-width: var(--lead-width); }

/* ──────── BEM refacto CertificationsPage ──────── */

/* Hero */
.cert-hero__title { margin-top: 14px; }
.cert-hero__lead  { margin-top: 20px; }

/* Section head — wrapper numéro + eyebrow + titre */
.cert-section__head  { margin-bottom: 40px; }
.cert-section__eyebrow { margin-left: 14px; }
.cert-section__title { margin-top: 14px; }

/* En-tête colonne "Année" : aligné à droite */
.cert-table-header__year { text-align: right; }

/* Section engagements — fond paper-2 */
.cert-eng-section { background: var(--paper-2); }
.cert-eng__head   { margin-bottom: 56px; }
.cert-eng-item__title { margin-bottom: 14px; }

/* Bandeau documentation dark — nouvelles classes éléments */
.section-num--on-dark-soft {
  color: var(--meta-on-ink);
  opacity: 0.65;
}
.cert-doc__title {
  margin-top: 14px;
  color: var(--paper-on-ink);
}
.cert-doc__lead {
  margin-top: 18px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--paper-on-ink-soft);
  max-width: var(--lead-width);
}

/* Bouton taille minimale accessible */
.btn--is-tall {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ──────── BEM refacto CategoriesPage ──────── */

/* Hero */
.categories-hero { padding-bottom: clamp(36px, 5vw, 72px); }
.categories-hero__title { margin-top: 14px; }
.categories-hero__lead { margin-top: 18px; max-width: var(--lead-width); }

/* Section grille */
.categories-grid-section { padding-top: clamp(56px, 8vw, 100px); }

/* Texte vide */
.chub-empty {
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* Grille 3 colonnes des cards catégories */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

/* Card catégorie — extension de .chub-cat-card */
.chub-cat-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--vfp-red);
  padding-top: 28px;
  height: 100%;
}

.chub-cat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.chub-cat-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vfp-red);
}

.chub-cat-card__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.chub-cat-card__title { font-size: 26px; }

/* Badge Non-CMR rouge soft */
.badge.badge--red-soft {
  background: rgba(227, 3, 46, 0.08);
  color: var(--vfp-red);
  border-color: rgba(227, 3, 46, 0.22);
  flex-shrink: 0;
}

.chub-cat-card__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 56ch;
  flex: 1;
}

.chub-cat-card__mini-kpis {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.chub-cat-card__mini-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chub-cat-card__mini-kpi-value {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.chub-cat-card__mini-kpi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Lien explorer — extension de .chub-cat-link (hover déjà en CSS) */
.chub-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vfp-red);
  transition: gap 0.2s var(--ease-out-quart);
}

/* Responsive : 3 col → 1 col sur mobile (remplace hack [style*=...] L3534) */
@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Long-form sections (pages piliers : marches + categories)
   Contrat data : sections[{ type: 'text' | 'faq', ... }]
   Rendu via src/components/LongFormSections.jsx
   ────────────────────────────────────────────────────────────────────────── */
.longform-section,
.longform-faq {
  border-top: 1px solid var(--line);
}
.longform-section__inner {
  max-width: 760px;
}
.longform-section__title {
  margin: 0 0 24px;
  text-wrap: balance;
}
.longform-section__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.longform-section__p {
  margin: 0;
  color: var(--graphite);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
}
.longform-faq__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.longform-faq__item {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.longform-faq__item:first-child {
  border-top: none;
  padding-top: 0;
}
.longform-faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--graphite);
  text-wrap: balance;
}
.longform-faq__a {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* Signature TPMGE — lockup premium "powered by + TPMGE" en mini-badge
   avec liseré conique rotatif (au repos) + shine sweep traversant (au hover).
   Variante fond sombre VFP (var(--ink)), mono/system stack. */
@property --tpmge-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.tpmge-badge {
  --tpmge-border: rgba(255, 255, 255, 0.12);
  --tpmge-shine: rgba(255, 255, 255, 0.32);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 5px 11px 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px var(--tpmge-border), 0 1px 0 rgba(0, 0, 0, 0.35);
  transition: box-shadow 380ms ease, background 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tpmge-badge::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--tpmge-angle),
    rgba(124, 58, 237, 0) 0deg,
    rgba(124, 58, 237, 0.7) 70deg,
    rgba(219, 39, 119, 0.75) 140deg,
    rgba(245, 158, 11, 0.7) 210deg,
    rgba(79, 70, 229, 0.65) 280deg,
    rgba(124, 58, 237, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  animation: tpmge-conic 14s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.tpmge-badge__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, var(--tpmge-shine) 50%, transparent 65%);
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform 0ms, opacity 200ms ease;
}

.tpmge-badge:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 1px 0 rgba(0, 0, 0, 0.4);
  transform: translateY(-0.5px);
}

.tpmge-badge:hover .tpmge-badge__shine {
  opacity: 1;
  transform: translateX(110%);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.tpmge-badge:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 3px rgba(124, 58, 237, 0.45);
}

.tpmge-badge__label {
  position: relative;
  z-index: 2;
  color: var(--paper-3, rgba(255, 255, 255, 0.55));
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: color 320ms ease, letter-spacing 320ms ease, opacity 320ms ease;
}

.tpmge-badge:hover .tpmge-badge__label {
  color: var(--paper, #f5f1ea);
  opacity: 1;
  letter-spacing: 0.14em;
}

.tpmge-mark {
  position: relative;
  z-index: 2;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8b5cf6; /* fallback */
  background-image: linear-gradient(110deg, #4f46e5, #7c3aed, #db2777, #f59e0b, #db2777, #7c3aed, #4f46e5);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tpmge-flow 7s linear infinite;
  transition: filter 0.3s ease;
}
.tpmge-badge:hover .tpmge-mark { filter: brightness(1.18) saturate(1.15); animation-duration: 2.5s; }
@keyframes tpmge-flow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes tpmge-conic { to { --tpmge-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .tpmge-mark { animation: none; background-position: 0% 50%; }
  .tpmge-badge::after { animation: none; opacity: 0.4; }
  .tpmge-badge__shine { display: none; }
  .tpmge-badge,
  .tpmge-badge__label,
  .tpmge-mark,
  .tpmge-badge:hover .tpmge-mark,
  .tpmge-badge:hover .tpmge-badge__label { transition: none; }
  .tpmge-badge:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact — territoires commerciaux (maquette TPMGE-VFP-2026-03)
   Cartes interactives France/Monde, légende de zones, fiche interlocuteur.
   Couleurs via tokens : --graphite pour le texte fort, --ink pour le tertiaire.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Intro : titre + recherche territoriale ─────────────────────────────── */
.contact-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
}
.contact-hero__title { max-width: none; }
.contact-hero__title em { font-style: normal; color: var(--vfp-red); }
.contact-intro__aside { display: flex; flex-direction: column; gap: 18px; }
.contact-hero__lead { max-width: none; margin: 0; }

.territory-search { position: relative; }
.territory-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink);
  pointer-events: none;
}
.territory-search__input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  padding: 0 16px 0 48px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--graphite);
}
.territory-search__input::-webkit-search-cancel-button { cursor: pointer; }
.territory-search__hint {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  margin: 0;
  min-height: 20px;
  letter-spacing: 0.02em;
}
.territory-search__hint b { color: var(--vfp-red); font-weight: 500; }

/* ── Entête de bloc : numéro, œilleton, titre, méta ─────────────────────── */
/* Empilée, comme .dist-section__head et .cert-section__head. La version flex
   précédente posait un mono 12px et un titre de 58px sur la même ligne de base,
   et son margin-left:auto sur la méta creusait un vide au milieu de la ligne.
   Le rythme vertical n'est pas redéclaré : le JSX réutilise .cert-section__eyebrow
   (margin-left:14px) et .cert-section__title (margin-top:14px). */
.territory-head { margin-bottom: clamp(28px, 3vw, 44px); }

/* .eyebrow est un inline-flex : sans flex:none, son filet rouge se comprime avant
   le texte et rétrécit sur un libellé long en petite largeur. */
.territory-head .eyebrow::before { flex: none; }

/* Méta en légende de bloc. Reste un <span> passé en display:block : la règle
   globale p { font-size:17px !important; color:var(--ink) !important } écraserait
   taille et couleur si c'était un <p>.
   --graphite et non --ink : à 13px, le gris clair tombe sous le seuil AA. La
   hiérarchie tient à l'échelle typographique, pas à la couleur, et le titre garde
   donc le --ink hérité comme tous les .h-section du site. */
.territory-head__meta {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--graphite);
}
@media (max-width: 600px) {
  .territory-head__meta { margin-top: 12px; }
}

/* ── Carte + fiche ──────────────────────────────────────────────────────── */
/* Le saut d'ancre natif (CTA « Écrire à … », lien de section) doit dégager la topbar
   et la barre de sections, toutes deux collantes, sinon le titre passe dessous. */
.territory-block { border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.territory-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.territory-split__map { min-width: 0; }

.tmap { width: 100%; height: auto; display: block; overflow: visible; margin-inline: auto; }
/* La colonne carte peut atteindre 1000px sur grand écran : sans plafond, la France
   (viewBox carré) rendrait une carte de 1000px de haut qui chasse la légende hors écran. */
.tmap--france { max-width: 640px; }
.tmap--world { max-width: 900px; }
.tmap__out { fill: var(--paper-2); stroke: var(--paper); stroke-width: 0.6; }
.tmap__area {
  fill: var(--paper-3);
  stroke: var(--paper);
  stroke-width: 0.7;
  cursor: pointer;
  transition: fill 0.18s var(--ease-out-quart);
}
.tmap__area.is-on { fill: var(--vfp-red); }
.tmap__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
  letter-spacing: 0.02em;
  transition: fill 0.18s var(--ease-out-quart);
}
/* Halo papier : le libellé reste lisible qu'il tombe sur une zone rouge, sur le
   fond clair ou à cheval sur une frontière. */
.tmap__label { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.tmap__label.is-on { fill: #fff; stroke: rgba(31, 31, 31, 0.35); }

/* ── Légende de zones ───────────────────────────────────────────────────── */
.territory-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 24px;
}
.territory-legend__item {
  background: var(--paper);
  border: 0;
  text-align: left;
  padding: 14px 16px;
  display: grid;
  gap: 3px;
  font: inherit;
  transition: background 0.15s var(--ease-out-quart);
}
.territory-legend__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-transform: uppercase;
}
.territory-legend__area { font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--graphite); }
.territory-legend__name { font-size: 12px; color: var(--ink); }
.territory-legend__item:hover { background: var(--paper-2); }
.territory-legend__item[aria-pressed="true"] { background: var(--vfp-red); }
.territory-legend__item[aria-pressed="true"] .territory-legend__num,
.territory-legend__item[aria-pressed="true"] .territory-legend__name { color: rgba(255, 255, 255, 0.78); }
.territory-legend__item[aria-pressed="true"] .territory-legend__area { color: #fff; }
.territory-legend__item:focus-visible { outline: 2px solid var(--graphite); outline-offset: -3px; }

.territory-note {
  margin-top: 20px;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  border-left: 2px solid var(--vfp-red);
  padding-left: 14px;
  max-width: 62ch;
}

/* ── Fiche interlocuteur ────────────────────────────────────────────────── */
.territory-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--vfp-red);
  padding: 28px;
  position: sticky;
  /* Décalée sous la barre d'ancres, pas seulement sous le header : sinon le filet
     rouge et l'œilleton « Zone 0x » se glissent derrière .section-nav au collage. */
  top: calc(var(--header-height) + var(--section-nav-height) + 24px);
}
.territory-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 20px;
}
.territory-card__zone { color: var(--vfp-red); }
.territory-card__who {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.territory-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-3);
  flex: 0 0 64px;
}
.territory-portrait--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--vfp-red);
}
.territory-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--graphite);
}
.territory-card__role { margin: 2px 0 0; font-size: 14px !important; color: var(--ink) !important; }

.territory-card__dl {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 12px;
  font-size: 14px;
}
.territory-card__dl dt {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  padding-top: 3px;
}
.territory-card__dl dd { margin: 0; overflow-wrap: anywhere; }
.territory-card__dl dd a {
  color: var(--graphite);
  border-bottom: 1px solid var(--line);
  transition: color 0.15s var(--ease-out-quart), border-color 0.15s var(--ease-out-quart);
}
.territory-card__dl dd a:hover { color: var(--vfp-red); border-color: var(--vfp-red); }

.territory-card__covlab {
  margin: 22px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink) !important;
}
.territory-card__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.territory-card__chips i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: var(--paper-2);
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.territory-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--vfp-red);
  font-weight: 500;
  font-size: 15px;
}
.territory-card__cta span { display: flex; transition: transform 0.15s var(--ease-out-quart); }
.territory-card__cta:hover span { transform: translateX(3px); }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
/* max-width : le formulaire occupait la colonne gauche d'une grille à deux
   colonnes. L'aside supprimé, sans plafond les champs s'étireraient sur toute
   la largeur du container. La valeur conserve la largeur de champ d'avant. */
.contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 900px;
}
.contact-field--full { grid-column: 1 / -1; }

/* Formulaire embarqué (server/formEmbed.mjs) : même gabarit que les champs natifs
   qu'il remplace, pour que la section garde sa largeur de colonne. La hauteur est
   FIXE et assumée : un cadre ne mesure pas le contenu qu'il encadre dès lors qu'il
   ne partage pas son document. Les 1020px valent le bas relevé du formulaire (989px,
   identique de 390 à 1440px de large, ses champs étant en pleine largeur) plus la
   place d'une ligne d'erreur de validation. Trop courte, elle ajoute un second
   ascenseur ; trop longue, un blanc sous le bouton. À reprendre si un champ est
   ajouté ou retiré côté Pardot, ce qui se fait sans toucher au dépôt. */
.contact-embed {
  display: block;
  width: 100%;
  max-width: 900px;
  height: 1020px;
  border: 0;
  color-scheme: light;
}

/* ── Adaptation petite largeur ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .contact-intro,
  .territory-split { grid-template-columns: 1fr; }
  .contact-intro { align-items: start; }
  .territory-card { position: static; }
}
@media (max-width: 600px) {
  .contact-fields { grid-template-columns: 1fr; }
  .territory-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tmap__area,
  .tmap__label,
  .territory-legend__item,
  .territory-card__cta span { transition: none; }
}