/* ==========================================================================
   KossTechnologie — Feuille de style principale
   Palette : rouge de la marque (#E84838) / charbon chaud / neutres beiges
   ========================================================================== */

/* --- 0. Polices auto-hébergées ------------------------------------------- */
/* Inter + Archivo, sous-ensemble latin, servies depuis le site lui-même :
   pas de requête vers un tiers, chargement rapide en connexion faible. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/archivo-latin-800-normal.woff2') format('woff2');
}

/* --- 1. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
img, svg, video { display: block; max-width: 100%; height: auto; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  /* Couleurs — le rouge du logo porte toute l'identité,
     un charbon chaud lui donne son assise, les neutres tirent vers le beige. */
  --red-800: #8E1F11;
  --red-700: #A32617;   /* survol */
  --red-600: #C63321;   /* texte et boutons sur blanc — contraste 5,4:1 */
  --red-500: #E84838;   /* rouge exact du logo — aplats et décor */
  --red-400: #F26A58;
  --red-300: #FF8A78;   /* sur fond sombre */
  --red-100: #FDE9E5;
  --red-50:  #FEF5F3;

  --dark-900: #1C1310;  /* charbon chaud : sections sombres */
  --dark-800: #2A1C17;
  --dark-700: #3D2A23;

  --ink:    #1C1512;
  --body:   #5C4F4A;
  --muted:  #8B7B75;
  --line:   #E8DFDB;
  --line-2: #F4EEEC;
  --bg:     #FFFFFF;
  --bg-alt: #FBF7F5;

  --green: #1F7A57;

  /* Alias de compatibilité : les règles écrites avec --blue-* suivent la
     nouvelle palette sans qu'il faille les réécrire une par une. */
  --blue-900: var(--dark-900);
  --blue-800: var(--red-700);
  --blue-700: var(--red-600);
  --blue-600: var(--red-500);
  --blue-200: #F3C9C1;
  --blue-100: var(--red-100);
  --blue-50:  var(--red-50);

  /* Accent conservé sous son ancien nom */
  --brand-500: var(--red-500);
  --brand-600: var(--red-600);
  --brand-700: var(--red-700);
  --brand-300: var(--red-300);
  --brand-100: var(--red-100);

  /* Typo */
  --f-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Espacements */
  --gap:   1.25rem;
  --pad-x: clamp(1.15rem, 4vw, 2.5rem);
  --sec-y: clamp(3.75rem, 8vw, 6.5rem);
  --wrap:  1180px;

  /* Divers */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;
  --sh-1: 0 1px 2px rgba(40,20,14,.06), 0 3px 10px rgba(40,20,14,.07);
  --sh-2: 0 2px 8px rgba(40,20,14,.08), 0 18px 44px rgba(40,20,14,.13);
  --sh-red: 0 8px 26px rgba(198,51,33,.30);
  --ease: cubic-bezier(.22,.68,.36,1);
}

/* --- 3. Base ------------------------------------------------------------- */
body {
  overflow-wrap: break-word;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-head);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -.018em;
  font-weight: 700;
  text-wrap: balance;
  -webkit-hyphens: auto; hyphens: auto;
}
h1 { font-size: clamp(2.05rem, 4.4vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.4rem); }
h4 { font-size: 1.03rem; letter-spacing: -.005em; }

p { text-wrap: pretty; }
a { color: var(--blue-700); text-decoration-color: color-mix(in srgb, var(--blue-700) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--blue-800); }

strong { color: var(--ink); font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--blue-800); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-sm); text-decoration: none; transition: top .18s var(--ease);
}
.skip:focus { top: 8px; color: #fff; }

/* --- 4. Utilitaires ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-narrow { max-width: 760px; }
.section { padding-block: var(--sec-y); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-2); }
.section--blue { background: var(--dark-900); color: #D8CBC5; }
.section--blue h2, .section--blue h3 { color: #fff; }
.center { text-align: center; }
.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;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--red-600); margin-bottom: .85rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--brand-500); border-radius: 2px;
}
.section--blue .eyebrow { color: var(--red-300); }
.center .eyebrow::before { display: none; }

.lede { font-size: clamp(1.03rem, 1.6vw, 1.16rem); color: var(--body); max-width: 62ch; }
.center .lede { margin-inline: auto; }

.sec-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }

/* --- 5. Boutons ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--blue-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-head); font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  padding: .82rem 1.4rem; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--red-700); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--brand-600); --btn-fg: #fff; }
.btn--accent:hover { background: var(--red-700); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-red); }

.btn--ghost {
  background: transparent; color: var(--blue-800); border-color: var(--line);
}
.btn--ghost:hover { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-800); }

.btn--light { background: #fff; color: var(--blue-800); }
.btn--light:hover { background: var(--blue-100); color: var(--blue-900); }

.btn--wide { width: 100%; }
.btn--lg { padding: 1rem 1.7rem; font-size: 1.02rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.center .btn-row { justify-content: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-head); font-weight: 600; font-size: .93rem;
  color: var(--blue-700); text-decoration: none;
}
.arrow-link::after { content: "→"; transition: transform .18s var(--ease); }
.arrow-link:hover::after { transform: translateX(4px); }

/* --- 6. En-tête ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(40,20,14,.10); }
.header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand__logo { height: 44px; width: auto; }
@media (max-width: 420px) { .brand__logo { height: 38px; } }
.footer .brand__logo { height: 52px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.nav a {
  font-size: .93rem; font-weight: 500; color: var(--ink); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--r-sm); white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
/* le bouton de devis intégré au menu ne sert qu'en version mobile */
.nav > .btn { display: none; }
.nav a:hover { background: var(--blue-50); color: var(--blue-800); }
.nav a[aria-current="page"] { color: var(--blue-700); font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.lang {
  display: flex; align-items: center; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.lang a {
  font-family: var(--f-head); font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  padding: .38rem .55rem; text-decoration: none; color: var(--muted); background: #fff;
}
.lang a[aria-current="true"] { background: var(--blue-700); color: #fff; }
.lang a:not([aria-current="true"]):hover { background: var(--blue-50); color: var(--blue-800); }

.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; padding: 0;
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: .75rem var(--pad-x) 1.4rem;
    gap: 0; box-shadow: var(--sh-2);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: .85rem .4rem; border-bottom: 1px solid var(--line-2); border-radius: 0; font-size: 1rem; }
  .nav > .btn { display: inline-flex; margin-top: 1rem; border-bottom: 0; }
  .header__actions .btn--cta { display: none; }
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(920px 520px at 84% 6%, rgba(232,72,56,.16), transparent 64%),
    radial-gradient(700px 420px at 6% 96%, rgba(232,72,56,.07), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
  border-bottom: 1px solid var(--line-2);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    linear-gradient(rgba(198,51,33,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,51,33,.10) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(880px 560px at 76% 22%, #000, transparent 72%);
  mask-image: radial-gradient(880px 560px at 76% 22%, #000, transparent 72%);
}
.hero__inner {
  position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; color: var(--blue-700); }
.hero__lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); margin-bottom: 1.8rem; max-width: 54ch; }

.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--blue-800);
  background: #fff; border: 1px solid var(--blue-200);
  padding: .34rem .7rem; border-radius: 100px;
}
.badge svg { width: 14px; height: 14px; flex-shrink: 0; }

.hero__art {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--sh-2);
}
.hero__art figcaption {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line);
  font-size: .8rem; color: var(--muted);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.hero__art figcaption b { color: var(--ink); font-weight: 600; }

/* Variante photo : l'image occupe toute la carte, la légende passe dessous */
.hero__art--photo { padding: 0; overflow: hidden; }
.hero__art--photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.hero__art--photo figcaption {
  margin: 0; padding: .95rem clamp(1rem, 3vw, 1.4rem);
  border-top: 1px solid var(--line);
}

/* --- 7b. Photos & galerie ------------------------------------------------ */
.photo {
  border-radius: var(--r); overflow: hidden; background: var(--bg-alt);
  border: 1px solid var(--line);
}
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.gallery figure:hover .photo img, .video:hover > img { transform: scale(1.05); }

/* Grille de photos. align-items:start évite que les lignes s'étirent sur la
   hauteur de la plus haute : chaque légende reste collée sous son image. */
.gallery {
  display: grid; gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
}
.gallery figure { margin: 0; display: flex; flex-direction: column; }
.gallery .photo { aspect-ratio: 4 / 3; }
.gallery figcaption { margin-top: .6rem; font-size: .84rem; color: var(--muted); }
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .gallery { grid-template-columns: minmax(0, 1fr); } .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }

/* Bandeau photo pleine largeur : une seule image forte, légende courte sous
   l'image et machines listées en pastilles.                                 */
.showcase {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-2); background: #fff;
}
.showcase > img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .9s var(--ease);
}
.showcase:hover > img { transform: scale(1.035); }
.showcase figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem 1.2rem; flex-wrap: wrap;
  padding: .9rem clamp(1rem, 3vw, 1.5rem); border-top: 1px solid var(--line);
}
.showcase figcaption > b {
  font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--ink);
}
.showcase__tags { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 600px) { .showcase > img { aspect-ratio: 4 / 3; } }

/* --- 7c. Vidéo -----------------------------------------------------------
   Façade : on affiche une image fixe et un bouton. L'iframe YouTube n'est
   créée qu'au clic — aucune requête vers un tiers tant que le visiteur ne
   demande pas la vidéo, et la page reste légère en connexion faible.        */
.video {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--blue-900);
}
.video > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; gap: .8rem; align-content: center;
  background: linear-gradient(180deg, rgba(28,19,16,.15), rgba(28,19,16,.55));
  border: 0; padding: 0; color: #fff;
  transition: background .2s var(--ease);
}
.video__play:hover { background: linear-gradient(180deg, rgba(28,19,16,.25), rgba(28,19,16,.62)); }
.video__play span {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--brand-600); display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s var(--ease);
}
.video__play:hover span { transform: scale(1.08); }
.video__play span::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 22px solid #fff;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.video__play em {
  font-style: normal; font-family: var(--f-head); font-weight: 600; font-size: .95rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
@media (max-width: 600px) { .video__play span { width: 58px; height: 58px; } }

/* Schéma au trait + photo réelle dans la même carte : le dessin explique le
   principe, la photo prouve que la machine existe et tourne.                */
.product__art.product__art--pair { padding: 0; overflow: hidden; }
.product__art.product__art--pair .schema { display: block; padding: clamp(1rem, 3vw, 1.6rem); background: var(--red-50); }
.product__art.product__art--pair .schema img { display: block; width: 100%; height: auto; }
.pblock .product__art--pair .schema img { max-height: 190px; width: auto; max-width: 100%; margin-inline: auto; }
.product__art.product__art--pair .shot {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-top: 1px solid var(--line); transition: transform .6s var(--ease);
}
.product__art.product__art--pair:hover .shot { transform: scale(1.04); }
.product__art.product__art--pair .shot[style*="--pos"] { object-position: center var(--pos); }
.product__art.product__art--pair .shot-wrap { display: block; overflow: hidden; }
.product__art.product__art--pair figcaption {
  padding: .78rem clamp(.9rem, 2.5vw, 1.2rem); font-size: .82rem; color: var(--muted);
  border-top: 1px solid var(--line); background: #fff;
}

/* Photo dans une fiche produit */
.product__art.product__art--photo { padding: 0; overflow: hidden; border-color: var(--line); }
.product__art.product__art--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Recadrage : sur un portrait ramené en 4/3, le centre géométrique n'est pas
   le centre du sujet. --pos remonte le cadrage sans toucher au balisage.    */
.product__art.product__art--photo img[style*="--pos"] { object-position: center var(--pos); }
.product__art.product__art--photo figcaption {
  padding: .8rem 1.1rem; font-size: .82rem; color: var(--muted);
  border-top: 1px solid var(--line); background: #fff;
}

/* --- 7d. Fil de traitement (icônes + libellés traduisibles) -------------- */
.process { list-style: none; margin: 0; padding: 0; }
.process li { position: relative; display: flex; gap: .95rem; padding: .62rem 0; }
.process li::before {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: -4px;
  width: 1px; background: var(--line);
}
.process li:last-child::before { display: none; }
.process__ico {
  width: 39px; height: 39px; border-radius: 10px; flex-shrink: 0; position: relative;
  background: var(--blue-50); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--blue-700);
}
.process__ico svg { width: 21px; height: 21px; }
.process li:last-child .process__ico {
  background: var(--brand-100); border-color: #F4D6D0; color: var(--brand-600);
}
.process b {
  display: block; font-family: var(--f-head); font-weight: 600;
  font-size: .93rem; color: var(--ink); line-height: 1.35;
}
.process em { font-style: normal; display: block; font-size: .82rem; color: var(--muted); }

/* --- 8. Bandeau de chiffres --------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  overflow: hidden;
}
.stats > div { padding: 1.5rem 1.4rem; border-right: 1px solid var(--line-2); }
.stats > div:last-child { border-right: 0; }
.stats dt {
  font-family: var(--f-head); font-size: clamp(1.75rem, 3.3vw, 2.35rem); font-weight: 800;
  color: var(--red-600); line-height: 1; letter-spacing: -.035em;
}
.stats dd { margin: .45rem 0 0; font-size: .87rem; color: var(--body); }
@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}

/* --- 9. Grilles & cartes ------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; display: flex; flex-direction: column;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .93rem; }

a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover {
  border-color: var(--red-400); box-shadow: var(--sh-2); transform: translateY(-5px);
}
a.card:hover .machine__thumb, .card--link:hover .machine__thumb { background: var(--red-100); }

/* Carte machine */
.machine__thumb {
  background: var(--blue-50); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 1rem; margin-bottom: 1.15rem; aspect-ratio: 16 / 10;
  display: grid; place-items: center;
}
.machine__thumb img { width: 100%; height: 100%; object-fit: contain; }
.machine__meta {
  margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem;
}
.chip {
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  background: var(--blue-50); color: var(--blue-800);
  border: 1px solid var(--blue-100); padding: .24rem .55rem; border-radius: 100px;
}

/* Carte avec numéro (processus) */
.step { position: relative; padding-top: .35rem; }
.step__num {
  font-family: var(--f-head); font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  color: var(--red-600); display: block; margin-bottom: .6rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.step p { font-size: .9rem; }
.steps { counter-reset: s; }
.steps .step { border-top: 2px solid var(--line); padding-top: 1.1rem; }
.steps .step:first-child { border-top-color: var(--red-500); }

/* Icône dans un carré */
.ico {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-700); margin-bottom: 1rem; flex-shrink: 0;
}
.ico svg { width: 22px; height: 22px; }
.ico--accent { background: var(--blue-50); color: var(--blue-700); }

/* --- 10. Liste à coches -------------------------------------------------- */
.checks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.checks li { position: relative; padding-left: 1.85rem; font-size: .95rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.6-5.6L17.8 9l-7 7.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.6-5.6L17.8 9l-7 7.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--blue .checks li { color: #D8CBC5; }

/* --- 11. Tableaux de specs ---------------------------------------------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; -webkit-overflow-scrolling: touch;
}
table.specs { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
table.specs caption {
  text-align: left; padding: 1rem 1.15rem; font-size: .84rem; color: var(--muted);
  border-bottom: 1px solid var(--line-2); background: var(--bg-alt);
}
table.specs th, table.specs td { padding: .72rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-2); }
table.specs thead th {
  font-family: var(--f-head); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--blue-800);
  background: var(--blue-50); border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.specs tbody tr:last-child th, table.specs tbody tr:last-child td { border-bottom: 0; }
table.specs tbody tr:hover { background: var(--blue-50); }
table.specs tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.specs td { color: var(--body); font-variant-numeric: tabular-nums; }

.note {
  font-size: .82rem; color: var(--muted); margin-top: .8rem;
  padding-left: 1.6rem; position: relative;
}
.note::before {
  content: "i"; position: absolute; left: 0; top: .1em;
  width: 16px; height: 16px; border-radius: 50%; background: var(--blue-100); color: var(--blue-700);
  font-family: var(--f-head); font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
}

/* --- 12. Bloc produit (page catalogue) ---------------------------------- */
.product {
  scroll-margin-top: 96px;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-2);
}
.product:first-of-type { border-top: 0; padding-top: 0; }
.product__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; margin-bottom: 2rem;
}
@media (max-width: 880px) { .product__head { grid-template-columns: minmax(0, 1fr); } }
.product__art {
  background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1rem, 3vw, 1.8rem);
}
.product__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); }
@media (max-width: 780px) { .product__cols { grid-template-columns: minmax(0, 1fr); } }

/* Sommaire produits */
.toc {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 1rem; background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.toc a {
  font-family: var(--f-head); font-size: .85rem; font-weight: 600;
  padding: .45rem .85rem; background: #fff; border: 1px solid var(--line);
  border-radius: 100px; text-decoration: none; color: var(--blue-800);
  transition: all .15s var(--ease);
}
.toc a:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

/* --- 13. Bannière CTA ---------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(125deg, var(--dark-900) 0%, var(--red-800) 62%, var(--red-600) 100%);
  color: #F2DCD7;
}
.cta-band::after {
  content: ""; position: absolute; right: -90px; top: -90px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,120,.34), transparent 68%);
}
.cta-band__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 2rem; align-items: center; padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
@media (max-width: 820px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr); } }
.cta-band h2 { color: #fff; margin-bottom: .7rem; }
.cta-band p { max-width: 56ch; }

/* --- 14. Formulaire ------------------------------------------------------ */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: minmax(0, 1fr); } }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--sh-1);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-family: var(--f-head); font-size: .86rem; font-weight: 600;
  color: var(--ink); margin-bottom: .4rem;
}
.field label .req { color: var(--brand-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: .72rem .9rem; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #AA9A93; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field textarea { resize: vertical; min-height: 128px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235C4F4A' d='M5.5 7.5L10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 20px;
  padding-right: 2.4rem;
}
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.field__hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1.15rem; }
fieldset legend {
  font-family: var(--f-head); font-size: .86rem; font-weight: 600; color: var(--ink);
  margin-bottom: .55rem; padding: 0;
}
.check-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem .9rem; }
@media (max-width: 560px) { .check-grid { grid-template-columns: minmax(0, 1fr); } }
.check-grid label {
  display: flex; align-items: center; gap: .55rem; font-size: .9rem;
  font-family: var(--f-body); font-weight: 400; color: var(--body);
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: all .15s var(--ease); margin: 0;
}
.check-grid label:hover { border-color: var(--blue-200); background: var(--blue-50); }
.check-grid input { width: 17px; height: 17px; accent-color: var(--blue-700); flex-shrink: 0; }
.check-grid input:checked + span { color: var(--ink); font-weight: 500; }

/* Coordonnées */
.contact-list { list-style: none; padding: 0; display: grid; gap: 1.15rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list .ico { margin: 0; width: 38px; height: 38px; border-radius: 8px; }
.contact-list .ico svg { width: 18px; height: 18px; }
.contact-list dt, .contact-list b {
  display: block; font-family: var(--f-head); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .1rem;
}
.contact-list a { font-weight: 500; }

/* --- 15. Pied de page ---------------------------------------------------- */
.footer { background: var(--dark-900); color: #CDBDB6; padding-block: clamp(2.75rem, 5vw, 4rem) 0; }
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer h4 {
  color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 1rem; font-weight: 700;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer a { color: #CDBDB6; text-decoration: none; font-size: .92rem; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer p, .footer li { font-size: .92rem; }
.footer__legal { font-size: .8rem !important; margin-top: .9rem; color: #9C8A83; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.35rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: #9C8A83;
}

/* --- 16. WhatsApp flottant ---------------------------------------------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  transition: transform .18s var(--ease);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
@media (max-width: 600px) { .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; } }

/* --- 17. Apparition au défilement --------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Apparition en cascade : chaque carte d'une grille suit la précédente */
.grid > .reveal:nth-child(2) { transition-delay: .07s; }
.grid > .reveal:nth-child(3) { transition-delay: .14s; }
.grid > .reveal:nth-child(4) { transition-delay: .21s; }
.grid > .reveal:nth-child(5) { transition-delay: .28s; }
.grid > .reveal:nth-child(6) { transition-delay: .35s; }

/* --- 19. Refonte visuelle : schémas, graphiques, tuiles -----------------
   Principe : un titre, une phrase, puis l'image. Le texte long est remplacé
   par des schémas (chaîne, frise, carte) et des graphiques de capacité.     */

/* 19a. Hero à schéma de chaîne ------------------------------------------ */
.hero--flow .hero__inner { display: block; padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(2.4rem, 5vw, 3.8rem); }
.hero__top {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: end; margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.hero__top h1 { margin: 0; font-size: clamp(2.2rem, 4.9vw, 3.65rem); line-height: 1.06; }
.hero__top .hero__lede { margin-bottom: 1.3rem; }
@media (max-width: 900px) { .hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.flow-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: clamp(1.1rem, 2.6vw, 1.7rem);
}
.flow-card__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.flow-card__head .eyebrow { margin: 0; }
.flow-card__head > span:last-child { font-size: .84rem; color: var(--muted); }


/* Chaîne typographique : numéros reliés par un trait animé, sans dessin */
.chain {
  --gap: 1rem;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap);
}
.chain__step { position: relative; min-width: 0; }
.chain__link { display: block; text-decoration: none; color: inherit; }
.chain__n {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--red-400); color: var(--red-600);
  font: 800 .78rem/1 var(--f-head); letter-spacing: .02em;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.chain__step--end .chain__n { background: var(--red-500); border-color: var(--red-500); color: #fff; }
a.chain__link:hover .chain__n { background: var(--red-500); border-color: var(--red-500); color: #fff; transform: scale(1.08); }
a.chain__link:hover b { color: var(--red-600); }
.chain__txt { display: block; margin-top: .75rem; }
.chain b { display: block; font: 700 .95rem/1.25 var(--f-head); color: var(--ink); transition: color .18s var(--ease); }
.chain em { display: block; font-style: normal; font-size: .82rem; line-height: 1.35; color: var(--muted); margin-top: .2rem; }
/* trait pointillé qui défile entre deux numéros */
.chain__step:not(:last-child)::after {
  content: ""; position: absolute; top: 18px; left: 46px; right: calc(-1 * var(--gap) + 6px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--red-400) 0 5px, transparent 5px 10px);
  background-size: 20px 2px; animation: chain-x 1s linear infinite;
}
@keyframes chain-x { to { background-position: 20px 0; } }
@keyframes chain-y { to { background-position: 0 20px; } }
.flow-card.reveal .chain__step { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
.flow-card.reveal.is-in .chain__step { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .chain { grid-template-columns: minmax(0, 1fr); --gap: .9rem; }
  .chain__link { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: .9rem; align-items: center; }
  .chain__txt { margin-top: 0; }
  .chain__step:not(:last-child)::after {
    top: 44px; bottom: calc(-1 * var(--gap) + 6px); left: 18px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--red-400) 0 5px, transparent 5px 10px);
    background-size: 2px 20px; animation-name: chain-y;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chain__step::after { animation: none !important; }
  .flow-card.reveal .chain__step { opacity: 1; transform: none; }
}

/* Cartes de gamme, sans illustration */
.fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); }
.fam {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.35rem 1.2rem; text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.fam::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red-500);
  transform: scaleY(0); transform-origin: top; transition: transform .25s var(--ease);
}
.fam:hover { border-color: var(--red-400); box-shadow: var(--sh-2); transform: translateY(-4px); color: inherit; }
.fam:hover::before { transform: scaleY(1); }
.fam__n { font: 800 .76rem/1 var(--f-head); letter-spacing: .1em; color: var(--red-600); margin-bottom: .75rem; }
.fam h3 { font-size: 1.12rem; margin: 0 1.8rem 0 0; }
.fam .machine__meta { margin-top: auto; padding-top: 1rem; }
.fam__go { position: absolute; top: 1.05rem; right: 1.2rem; font-size: 1.1rem; color: var(--red-500); transition: transform .18s var(--ease); }
.fam:hover .fam__go { transform: translateX(4px); }
.fams > .reveal:nth-child(2) { transition-delay: .06s; } .fams > .reveal:nth-child(3) { transition-delay: .12s; }
.fams > .reveal:nth-child(4) { transition-delay: .18s; } .fams > .reveal:nth-child(5) { transition-delay: .24s; }
.fams > .reveal:nth-child(6) { transition-delay: .30s; }
@media (max-width: 980px) { .fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fams { grid-template-columns: minmax(0, 1fr); } .fam { padding: 1.05rem 1.1rem; } }

/* Sommaire numéroté (page Équipements) */
.navtiles--num { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.navtiles .navtile--num { flex-direction: row; align-items: center; gap: .65rem; padding: .8rem .85rem; }
.navtile__n {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--red-50); color: var(--red-600); font: 800 .74rem/1 var(--f-head);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.navtile--num:hover .navtile__n { background: var(--red-500); color: #fff; }
@media (max-width: 980px) { .navtiles--num { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .navtiles--num { grid-template-columns: repeat(2, minmax(0, 1fr)); } .navtiles .navtile--num { padding: .6rem; gap: .5rem; } .navtile--num > span:last-child { font-size: .8rem; } }

/* Carte Google Maps de l'atelier */
.gmap { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); background: var(--bg-alt); }
.gmap iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }
@media (max-width: 560px) { .gmap iframe { aspect-ratio: 1 / 1; } }

/* 19b. En-tête des pages intérieures ------------------------------------ */
.page-hero .hero__inner { display: block; padding-block: clamp(2.4rem, 5.5vw, 4rem) clamp(2rem, 4.5vw, 3rem); }
.page-hero .sec-head { max-width: 720px; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: .7rem; }

/* 19c. Sommaire visuel -------------------------------------------------- */
.navtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.navtiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.navtile {
  display: flex; flex-direction: column; gap: .55rem; padding: .7rem .7rem .85rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.navtile:hover { transform: translateY(-4px); border-color: var(--red-400); box-shadow: var(--sh-2); color: var(--ink); }
.navtile__art { aspect-ratio: 360 / 220; background: var(--red-50); border-radius: var(--r-sm); padding: .3rem; transition: background .18s var(--ease); }
.navtile:hover .navtile__art { background: var(--red-100); }
.navtile__art img { width: 100%; height: 100%; object-fit: contain; }
.navtile > span:last-child { font: 700 .86rem/1.3 var(--f-head); padding-inline: .15rem; }
.navtiles--4 .navtile { flex-direction: row; align-items: center; gap: .8rem; padding: .85rem; }
.navtiles--4 .tile__ico { margin: 0; }
@media (max-width: 980px) { .navtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .navtiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .navtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .navtiles--4 .navtile { padding: .6rem; gap: .55rem; }
  .navtiles--4 .tile__ico { width: 34px; height: 34px; }
  .navtiles--4 .navtile > span:last-child { font-size: .8rem; }
}

/* 19d. Bloc à deux colonnes, alterné ------------------------------------ */
.pblock {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4.2rem);
  align-items: center; padding-block: clamp(2.8rem, 6vw, 4.6rem);
  border-top: 1px solid var(--line-2); scroll-margin-top: 90px;
}
.pblock:first-child { border-top: 0; padding-top: clamp(1rem, 3vw, 2rem); }
.pblock--flip > .pblock__art { order: -1; }
.pblock h2 { margin-bottom: .6rem; }
.pblock .lede { margin-bottom: 1.3rem; }
.pblock__art { min-width: 0; }
.pblock__body { min-width: 0; }
@media (max-width: 880px) {
  .pblock { grid-template-columns: minmax(0, 1fr); }
  .pblock > .pblock__art { order: -1; }
}

.chips { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li {
  font-size: .8rem; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line); padding: .32rem .75rem; border-radius: 100px;
}
.chips--red li { background: var(--red-50); border-color: #F6D5CE; color: var(--red-700); }

/* 19e. Graphique de capacité ----------------------------------------------
   Une seule série : barres de plage (min–max) sur un axe commun, rouge de la
   marque. Libellés en encre, jamais en rouge. Survol et focus clavier
   affichent le détail ; le tableau complet reste accessible en dessous.     */
.cap {
  --label: 5.4rem;
  margin: 0 0 1.4rem; padding: 1rem 1.1rem .85rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
.cap__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: .9rem;
}
.cap__head b { font: 700 .92rem var(--f-head); color: var(--ink); }
.cap__head span { font-size: .78rem; color: var(--muted); }
.cap__rows { display: grid; gap: .5rem; }
.cap__row {
  position: relative; display: grid; grid-template-columns: var(--label) minmax(0, 1fr);
  align-items: center; gap: .8rem; border-radius: 6px; outline-offset: 3px;
}
.cap__name { font: 600 .8rem var(--f-head); color: var(--ink); white-space: nowrap; }
.cap__track {
  position: relative; height: 26px;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / var(--ticks)) 100%;
  border-right: 1px solid var(--line);
}
.cap__bar {
  position: absolute; top: 5px; height: 16px; border-radius: 4px;
  background: var(--red-500);
  left: calc(var(--a) / var(--max) * 100%);
  width: calc((var(--b) - var(--a)) / var(--max) * 100%);
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.cap__val {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--b) / var(--max) * 100% + 8px);
  font-size: .76rem; color: var(--body); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cap__row--flip .cap__val { left: auto; right: calc(100% - var(--a) / var(--max) * 100% + 8px); }
.cap__row--in .cap__val { left: auto; right: calc(100% - var(--b) / var(--max) * 100% + 8px); color: #fff; font-weight: 600; }
.cap__row:hover .cap__bar, .cap__row:focus-visible .cap__bar { background: var(--red-700); box-shadow: 0 0 0 3px var(--red-100); }
.cap__tip {
  position: absolute; left: calc(var(--label) + .8rem); bottom: calc(100% + 4px); z-index: 3;
  background: var(--dark-900); color: #F2DCD7; font-size: .76rem; line-height: 1.35;
  padding: .45rem .65rem; border-radius: 6px; white-space: normal;
  width: max-content; max-width: calc(100% - var(--label) - .8rem);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.cap__tip b { color: #fff; font-weight: 700; margin-right: .35rem; }
.cap__row:hover .cap__tip, .cap__row:focus-visible .cap__tip { opacity: 1; transform: none; }
.cap__axis { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); gap: .8rem; margin-top: .3rem; }
.cap__ticks { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap__ticks span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.cap__foot {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line-2);
  font-size: .76rem; color: var(--muted);
}
.cap details { width: 100%; }
.cap summary {
  cursor: pointer; font-weight: 600; color: var(--red-600); list-style: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.cap summary::-webkit-details-marker { display: none; }
.cap summary::after { content: "+"; font-weight: 700; }
.cap details[open] summary::after { content: "–"; }
.cap details .table-wrap { margin-top: .8rem; }
.cap-pair { display: grid; gap: .7rem; }
.cap-pair .cap { margin-bottom: 0; }
@media (max-width: 560px) { .cap-pair { grid-template-columns: minmax(0, 1fr); } .cap { --label: 4.6rem; } }

/* 19f. Frise d'étapes ---------------------------------------------------- */
.timeline {
  --n: 6; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.1rem;
}
.timeline li { position: relative; padding-top: 3.7rem; min-width: 0; }
.timeline li::before {
  content: ""; position: absolute; top: 24px; left: 56px; right: -.6rem; height: 2px;
  background: linear-gradient(90deg, var(--red-300), var(--line));
}
.timeline li:last-child::before { display: none; }
.timeline__ico {
  position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); color: var(--red-600);
  display: grid; place-items: center; box-shadow: var(--sh-1);
}
.timeline__ico svg { width: 22px; height: 22px; }
.timeline li:first-child .timeline__ico { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.timeline__n { display: block; font: 800 .68rem/1 var(--f-head); letter-spacing: .1em; color: var(--red-600); margin-bottom: .4rem; }
.timeline b { display: block; font: 700 1rem/1.25 var(--f-head); color: var(--ink); }
.timeline em { display: block; font-style: normal; font-size: .85rem; color: var(--muted); margin-top: .25rem; }
.timeline a { color: inherit; text-decoration: none; }
.timeline a:hover b { color: var(--red-600); }
@media (max-width: 900px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .timeline li { padding: 0 0 0 4.1rem; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
  .timeline li::before { top: 48px; left: 23px; right: auto; width: 2px; height: calc(100% - 48px + 1.2rem); background: linear-gradient(180deg, var(--red-300), var(--line)); }
}

/* 19g. Tuiles et lignes à pictogramme ------------------------------------ */
.tile__ico {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--red-50); color: var(--red-600);
  display: grid; place-items: center; margin-bottom: .85rem;
}
.tile__ico svg { width: 21px; height: 21px; }
.tiles { --cols: 3; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .8rem; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.05rem;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.tile:hover { border-color: #F2B6AA; transform: translateY(-2px); }
.tile b, .irows b { display: block; font: 700 .93rem/1.3 var(--f-head); color: var(--ink); }
.tile em, .irows em { display: block; font-style: normal; font-size: .84rem; color: var(--muted); margin-top: .15rem; }
@media (max-width: 780px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

.irows { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 1.05rem; }
.irows li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .95rem; align-items: center; }
.irows .tile__ico { margin: 0; }

/* 19h. Deux façons de démarrer ------------------------------------------ */
.modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
.mode { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.15rem; }
.mode__diag { display: flex; align-items: center; margin-bottom: .9rem; }
.mode__diag i { width: 30px; height: 20px; border-radius: 5px; background: var(--red-500); flex-shrink: 0; }
.mode__diag i.off { background: transparent; border: 1.5px dashed #EFA99C; }
.mode__diag s { width: 12px; height: 2px; background: #EFA99C; flex-shrink: 0; }
.mode b { display: block; font: 700 .95rem var(--f-head); color: var(--ink); }
.mode em { display: block; font-style: normal; font-size: .84rem; color: var(--muted); margin-top: .15rem; }
@media (max-width: 520px) { .modes { grid-template-columns: minmax(0, 1fr); } }

/* 19i. Carte de livraison ------------------------------------------------ */
.map { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.map__svg { display: block; width: 100%; height: auto; }
.map__sea { fill: #F6F1EE; }
.map__off { fill: #fff; stroke: #E2D6D1; stroke-width: 1; }
.map__on { fill: #FBE3DE; stroke: #F2A395; stroke-width: 1.2; }
.map__ci { fill: var(--red-500); stroke: #fff; stroke-width: 1.5; }
.map__lbl { font: 600 13px var(--f-body); fill: var(--body); text-anchor: middle; }
.map__lbl--ci { fill: #fff; font-size: 15px; font-weight: 700; }
.map__lbl--city { text-anchor: start; fill: #fff; font-size: 12px; font-weight: 700; }
.map__lbl--sea { font-style: italic; font-weight: 500; fill: #A8988F; }
.map__pin { fill: #fff; stroke: var(--red-800); stroke-width: 2.5; }
.map__pin-halo { fill: rgba(255,255,255,.35); animation: pin 2.4s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pin { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map__pin-halo { animation: none; } }
.map figcaption {
  display: flex; gap: .5rem 1.4rem; flex-wrap: wrap; padding: .8rem 1.1rem;
  border-top: 1px solid var(--line); font-size: .82rem; color: var(--body);
}
.key { display: inline-flex; align-items: center; gap: .45rem; }
.key::before { content: ""; width: 14px; height: 10px; border-radius: 3px; background: var(--red-500); }
.key--on::before { background: #FBE3DE; box-shadow: inset 0 0 0 1px #F2A395; }


.tiles--row .tile { display: flex; align-items: center; gap: .8rem; padding: .75rem .85rem; }
.tiles--row .tile__ico { margin: 0; width: 38px; height: 38px; }
@media (max-width: 420px) { .tiles--row { grid-template-columns: minmax(0, 1fr); } }
.map__canvas { position: relative; }
.map__inset {
  position: absolute; top: 12px; left: 12px; width: 33%;
  background: #fff; padding: 5px 5px 0; border-radius: 10px; box-shadow: var(--sh-2);
  transform: rotate(-1.5deg);
}
.map__inset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.map__inset span { display: block; font-size: .72rem; color: var(--muted); padding: .3rem .2rem .35rem; }
.map__lbl--city { text-anchor: middle; }


@media (max-width: 560px) {
  .map__inset { position: static; width: auto; transform: none; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; padding: .7rem .7rem 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .7rem; align-items: center; }
  .map__inset span { padding: 0 0 .7rem; font-size: .8rem; }
  .map__inset img { border-radius: 6px; }
  .map__lbl { font-size: 19px; }
  .map__lbl--ci { font-size: 22px; }
  .map__lbl--city { font-size: 17px; }
  .map__lbl--sea { font-size: 17px; }
}

/* 19j. Schéma annoté et mini-chaînes (SVG en ligne, texte traduit) ------- */
.diagram { margin: 0; background: var(--red-50); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(.8rem, 2.5vw, 1.4rem); }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { margin-top: .7rem; font-size: .8rem; color: var(--muted); text-align: center; }
.pblock__body .diagram { margin-bottom: 1.4rem; }
.diagram--mini { background: #fff; padding: 1.1rem 1.1rem .8rem; }
.dg-num { fill: var(--red-500); stroke: #fff; stroke-width: 2.5; }
.dg-num-t { font: 700 12px var(--f-head); fill: #fff; }
.dg-legend { display: none; list-style: none; padding: 0; margin: .9rem 0 0; gap: .45rem .9rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dg-legend li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink); font-weight: 500; }
.dg-legend span { width: 20px; height: 20px; border-radius: 50%; background: var(--red-500); color: #fff; font: 700 .7rem/20px var(--f-head); text-align: center; flex-shrink: 0; }
@media (max-width: 560px) { .dg-legend { display: grid; } }
.diagram .dg-v { display: none; max-width: 320px; margin-inline: auto; }
@media (max-width: 560px) { .diagram .dg-h { display: none; } .diagram .dg-v { display: block; } }
.dg-n { fill: none; stroke: #8E2A1B; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dg-o { fill: #FDF1EE; stroke: #8E2A1B; stroke-width: 3; stroke-linejoin: round; }
.dg-s { fill: #F6CFC7; stroke: #8E2A1B; stroke-width: 3; stroke-linejoin: round; }
.dg-d { fill: none; stroke: #8E2A1B; stroke-width: 1.7; stroke-linecap: round; opacity: .5; }
.dg-dot { fill: #8E2A1B; opacity: .32; }
.dg-gr { fill: none; stroke: #DCC7C0; stroke-width: 2.4; stroke-linecap: round; }
.dg-lead { fill: none; stroke: var(--red-500); stroke-width: 1.5; }
.dg-pt { fill: var(--red-500); stroke: #fff; stroke-width: 2; }
.dg-t { font: 600 13px var(--f-body); fill: var(--ink); }
.dg-t--sm { font-size: 13px; font-weight: 500; fill: var(--muted); }
.dg-t--lbl { font-size: 15px; font-weight: 600; }
.dg-t--lg { font-size: 15.5px; font-weight: 700; font-family: var(--f-head); }
.dg-box--end { fill: #fff; stroke: var(--red-500); stroke-width: 2; }
.dg-box { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.dg-box--on { fill: var(--red-500); stroke: var(--red-500); }
.dg-t--on { fill: #fff; }
.dg-arrow { fill: none; stroke: var(--red-500); stroke-width: 2; }
.dg-ret { fill: none; stroke: var(--red-300); stroke-width: 2; stroke-dasharray: 5 5; }
.dg-head { fill: var(--red-500); }
.dg-head--ret { fill: var(--red-300); }

/* 19k. Divers ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }
.photo-lg { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.photo-lg img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.photo-lg:hover img { transform: scale(1.03); }

.zeros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.zeros div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; }
.zeros b { display: block; font: 800 2.1rem/1 var(--f-head); color: var(--red-600); letter-spacing: -.03em; }
.zeros span { font-size: .84rem; color: var(--body); }

.partners { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.partners__lbl { width: 100%; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.partners span:not(.partners__lbl) {
  font: 800 .9rem var(--f-head); letter-spacing: .02em; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .85rem;
}

.card-plain { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem, 2.6vw, 1.6rem); }
.sub-h { font: 700 .78rem var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; }
.sec-head--tight { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }



/* --- 18. Impression ------------------------------------------------------ */
@media print {
  .header, .footer, .wa-float, .cta-band, .btn { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1rem; }
}
.cap table.specs td, .cap table.specs caption { white-space: nowrap; }

/* --- 20. Garde-fous mobile ------------------------------------------------
   Un élément flex ou grid refuse par défaut de rétrécir sous la largeur de
   son mot le plus long. Avec la taille de texte agrandie d'un téléphone,
   c'est ce qui faisait déborder tuiles, boutons et libellés.              */
.navtile > span:last-child, .irows li > div, .tiles--row .tile > div,
.contact-list li > div, .chain__txt, .fam h3, .showcase figcaption > b { min-width: 0; }
.navtile > span:last-child, .tile b, .irows b, .chain b { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn-row > .btn { max-width: 100%; }
}
.navtile > span:last-child { overflow-wrap: break-word; }
/* Sur petit écran, le sommaire numéroté passe sur une colonne : les noms de
   famille (« Classificateurs », « Concentrateurs ») ne tiennent pas sur une
   demi-largeur sans couper le mot.                                          */
@media (max-width: 440px) {
  .navtiles--num { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .navtiles .navtile--num { padding: .55rem .7rem; }
  .navtiles--num .navtile__n { width: 28px; height: 28px; }
  .navtiles--num .navtile--num > span:last-child { font-size: .88rem; }
}
/* La carte Google se charge par-dessus ce repère ; s'il reste visible, c'est
   que Google Maps n'a pas pu s'afficher (connexion, bloqueur…).           */
.gmap { position: relative; }
.gmap iframe { position: relative; z-index: 1; }
.gmap__ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem;
  color: var(--muted); font-size: .85rem;
}
.gmap__ph svg { width: 28px; height: 28px; color: var(--red-500); }