/* =====================================================================
   MB DISTRIBUTIONS - Design system v3 (KomTop)
   Marque : vert pomme #89BF24 + blanc + anthracite.
   Direction : specialiste de la piece automobile - barre d'arguments en
   haut, en-tete dense (menu deroulant + telephone + devis), titre en
   capitales sur photo, bandes d'arguments, cartes d'action.
   Arrondis tres faibles, densite d'information assumee.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}

/* ---------- Tokens ---------- */
:root {
  --green: #89bf24;
  --green-600: #6f9d1c;
  --green-700: #5d8517;
  --green-050: #f2f7e9;
  --ink: #10160f;
  --ink-2: #1a231a;   /* barre du haut */
  --graphite: #39463a;
  --text: #16201a;
  --muted: #5b6b5c;
  --line: #e5e9e1;
  --line-2: #d9ded2;  /* separateurs plus marques (en-tete, bandes) */
  --mist: #f6f7f4;
  --paper: #ffffff;
  --star: #ffb020;

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", ui-serif, serif;

  /* Largeur de contenu alignee sur la maquette du client (28/07) : le site
     respire plus large, l'en-tete et le corps partagent la meme marge.
     Les blocs de texte long gardent leur propre limite (820 px) pour rester
     lisibles : c'est la mise en page qui s'elargit, pas les paragraphes. */
  --wrap: 1520px;
  --gut: clamp(18px, 4vw, 40px);

  /* Arrondis discrets (demande client : faibles mais visibles) */
  --r-lg: 10px;
  --r-md: 8px;
  --r-sm: 6px;
  --r-btn: 6px;

  --hdr: 74px; /* hauteur de la barre principale */

  --sh-sm: 0 1px 2px rgba(16,22,15,.05);
  --sh-md: 0 10px 30px rgba(16,22,15,.08);
  --sh-lg: 0 24px 60px rgba(16,22,15,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Ceinture de securite : aucune page ne defile horizontalement sur mobile.
   `clip` et non `hidden` : `hidden` creerait un contexte de defilement qui
   casserait l'en-tete collant. */
body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
.mbicon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: middle; }
a { color: var(--green-700); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--green-600); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.12; letter-spacing: -.022em; color: var(--ink); }
h1 { font-weight: 800; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
:focus-visible { outline: 3px solid rgba(137,191,36,.55); outline-offset: 2px; border-radius: 4px; }

/* Plus de serif italique (retour Benjamin 23/07 : typo datee) : meme police, graisse forte. */
.accent { font-style: normal; font-weight: 800; color: var(--green-700); }

/* ---------- Apparition au scroll (JS ajoute .rv puis .rv-in) ---------- */
.js .rv { opacity: 0; }
.js .rv-in { animation: mbRise .65s var(--ease) both; }
@keyframes mbRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; }
  .js .rv-in { animation: none; }
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(48px, 8vw, 104px); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #d9e0d4; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700);
}
.section--ink .eyebrow, .hero--photo .eyebrow { color: var(--green); }

.h-xl  { font-size: clamp(1.85rem, 4vw, 2.7rem); }
.lead  { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.section--ink .lead { color: #aeb9a7; }
.muted { color: var(--muted); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head.center { margin-inline: auto; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: .98rem; line-height: 1;
  padding: .92rem 1.4rem; border-radius: var(--r-btn);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.btn .mbicon { width: 1.1em; height: 1.1em; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--green); color: #131b0c; box-shadow: 0 6px 18px rgba(137,191,36,.22); }
.btn--primary:hover { background: #93cb27; color: #131b0c; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover { border-color: rgba(137,191,36,.55); color: var(--green-700); }
.btn--light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--light:hover { background: rgba(255,255,255,.16); color: #fff; }
/* Sur photo sombre : contour blanc net (deuxieme action du haut de page) */
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--lg { padding: 1.05rem 1.7rem; font-size: 1.02rem; }
.btn--block { width: 100%; }


/* ---------- Barre du haut (arguments + avis) ---------- */
.topbar { background: var(--ink-2); color: #cfd8ca; font-size: .8rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; padding-block: .3rem; }
.topbar__args { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 2.2rem; list-style: none; margin: 0; padding: 0; }
.topbar__args li { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__args .mbicon { width: 1rem; height: 1rem; color: var(--green); flex: none; }
.topbar__right { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.topbar__note { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__note b { color: #fff; font-weight: 800; }
.topbar__src { color: #9aa694; }
.stars { display: inline-flex; gap: 1px; }
.stars .star .mbicon { width: .95rem; height: .95rem; color: #4b5548; fill: none; }
.stars .star.is-on .mbicon { color: var(--star); fill: var(--star); }

/* ---------- En-tete principal ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(16,22,15,.02), 0 6px 20px rgba(16,22,15,.05);
}
.header-bar { display: flex; align-items: center; gap: 1.4rem; min-height: var(--hdr); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt b { font-size: 1.08rem; }
.brand__txt span { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.custom-logo-link { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.custom-logo { max-height: 54px; width: auto; height: auto; }

/* ---------- Barre de recherche du catalogue ----------
   Elle occupe la place laissee par le menu, qui descend sur une deuxieme ligne. */
.header-nav-row { border-top: 1px solid var(--line-2); }
.header-nav-row .primary-nav { margin-inline: 0; }
.header-nav-row .primary-nav > ul > li > a { height: 46px; }

.csearch { position: relative; flex: 1 1 auto; min-width: 0; max-width: 620px; margin-inline: auto; }
.csearch__field {
  display: flex; align-items: center; gap: .5rem;
  background: var(--mist); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: .28rem .28rem .28rem .8rem;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.csearch__field:focus-within { background: #fff; border-color: var(--green); box-shadow: 0 0 0 3px rgba(137,191,36,.16); }
.csearch__ic { display: grid; place-items: center; color: var(--muted); flex: none; }
.csearch__ic .mbicon { width: 18px; height: 18px; }
/* 16 px exactement, pas moins : sous 16 px Safari iOS zoome la page a la mise au
   point du champ et n'en ressort pas tout seul. Le champ etait a 15,2 px et se
   trouve sur toutes les pages (constat de l'audit mobile du 31/07/2026). */
.csearch__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: 0;
  font: inherit; font-size: 1rem; color: var(--ink); padding: .5rem 0;
}
.csearch__input::placeholder { color: var(--muted); }
.csearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.csearch__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: var(--r-sm);
  background: var(--green); color: #131b0c; cursor: pointer;
  transition: background .16s var(--ease);
}
.csearch__go:hover { background: var(--green-700); color: #fff; }
.csearch__go .mbicon { width: 18px; height: 18px; }

/* Panneau de suggestions */
.csearch__panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: .4rem; max-height: 66vh; overflow-y: auto;
}
.csearch__panel[hidden] { display: none; }
.csearch__grp { padding: .35rem .25rem .1rem; }
.csearch__grp-t {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: .3rem .55rem .35rem;
}
.csearch__it {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .55rem; border-radius: var(--r-sm); color: var(--graphite);
}
.csearch__it:hover, .csearch__it.is-on { background: var(--green-050); color: var(--green-700); }
.csearch__it b { font-weight: 700; font-size: .93rem; color: var(--ink); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csearch__it:hover b, .csearch__it.is-on b { color: var(--green-700); }
.csearch__kind {
  flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--mist); border-radius: 999px; padding: .2rem .5rem;
}
.csearch__nb { flex: none; font-size: .78rem; font-weight: 700; color: var(--muted); }
.csearch__all {
  display: block; margin-top: .3rem; padding: .65rem .55rem; border-top: 1px solid var(--line);
  font-weight: 700; font-size: .9rem; color: var(--green-700);
}
.csearch__vide { padding: .9rem .6rem; font-size: .92rem; color: var(--muted); }

/* Version posee sur les pages de catalogue */
.csearch--page { max-width: none; margin-inline: 0; margin-bottom: clamp(18px, 2vw, 26px); }

/* Menu : capitales, deroulants au survol et au clavier */
.primary-nav { margin-inline: auto; align-self: stretch; display: flex; align-items: stretch; }
.primary-nav > ul { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.primary-nav > ul > li { position: relative; display: flex; align-items: stretch; }
.primary-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: 0 .78rem; color: var(--graphite);
  font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.primary-nav > ul > li > a:hover { color: var(--ink); }
.primary-nav > ul > li:hover > a,
.primary-nav > ul > li:focus-within > a { color: var(--ink); border-bottom-color: var(--green); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a { color: var(--green-700); border-bottom-color: var(--green); }
.primary-nav .caret { width: .8rem; height: .8rem; opacity: .55; }

/* Sous-menus */
.primary-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 268px; margin: 0; padding: .4rem; list-style: none;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.primary-nav > ul > li:hover > .sub-menu,
.primary-nav > ul > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-nav .sub-menu a {
  display: block; padding: .62rem .7rem; border-radius: var(--r-sm);
  color: var(--graphite); font-weight: 600; font-size: .92rem;
}
.primary-nav .sub-menu a:hover { background: var(--green-050); color: var(--green-700); }

/* Mega-menu des marques */
.primary-nav .mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); z-index: 20;
  width: min(880px, calc(100vw - 2 * var(--gut)));
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.primary-nav > ul > li:hover > .mega,
.primary-nav > ul > li:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__in { padding: 1.3rem 1.4rem 1.1rem; }
.mega__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin-bottom: 1rem; }
.mega__head b { font-size: 1rem; color: var(--ink); }
.mega__head span { font-size: .84rem; color: var(--muted); }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.mega__grid a {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .85rem .6rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--graphite); text-align: center;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.mega__grid a:hover { border-color: var(--green); background: var(--green-050); transform: translateY(-1px); }
.mega__logo { display: grid; place-items: center; height: 34px; width: 100%; }
.mega__logo img { max-height: 30px; max-width: 78px; width: auto; object-fit: contain; }
.mega__mono {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-050); color: var(--green-700); font-weight: 800; font-size: 1rem;
}
.mega__name { font-size: .86rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.mega__nb { font-size: .72rem; font-weight: 600; color: var(--muted); }
.mega__foot { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.mega__foot a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: var(--green-700); }

/* Actions de droite */
.header-actions { display: flex; align-items: center; gap: .7rem; flex: none; }
.header-phone { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.header-phone__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--green-700); flex: none; }
.header-phone__ic .mbicon { width: 17px; height: 17px; }
.header-phone__txt { display: flex; flex-direction: column; line-height: 1.15; }
.header-phone__txt b { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.header-phone__txt span { font-size: .74rem; color: var(--muted); font-weight: 600; }
.header-phone:hover .header-phone__ic { border-color: var(--green); background: var(--green-050); }
.header-sep { width: 1px; height: 34px; background: var(--line-2); }
.nav-mobile-actions { display: none; }
/* Boutons de depliage des sous-menus : ajoutes par le JS, utiles seulement
   quand le menu passe en panneau (sous 1120 px). Masques partout ailleurs. */
.submenu-toggle { display: none; }

/* Bouton WhatsApp (icone officielle) */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: #25d366; color: #fff;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  box-shadow: 0 4px 14px rgba(37,211,102,.3);
}
.wa-btn:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.4); }
.wa-btn .mbicon { width: 22px; height: 22px; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 19px; height: 2px; background: var(--ink); position: relative; transition: .2s var(--ease); }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero photo ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 90px); }
.hero--photo { color: #fff; padding-block: clamp(56px, 8vw, 104px) 0; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* Eclairci le 23/07 (retour Benjamin : hero "un peu sombre"). Les vraies photos remplaceront le visuel. */
  background: linear-gradient(95deg, rgba(10,13,9,.9) 0%, rgba(10,13,9,.8) 38%, rgba(10,13,9,.52) 66%, rgba(10,13,9,.3) 100%);
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
/* Hero sans photo (devis, pages internes) : les deux colonnes partent du haut,
   sinon le titre flotte au milieu d'un formulaire plus long. */
.hero:not(.hero--photo) .hero__grid { align-items: start; }
.hero__title { font-size: clamp(2.3rem, 5vw, 3.7rem); margin-bottom: 1.1rem; color: var(--ink); line-height: 1.06; }
.hero--photo .hero__title { color: #fff; }
.hero--photo .hero__title .accent { color: var(--green); }
.hero--photo .lead { color: #ccd5c6; }

/* Accueil : titre en capitales, deux boutons, bande d'arguments collee en bas.
   Depuis le 31/07 la demande de devis par immatriculation occupe la colonne de
   droite (retour Benjamin).

   La carte etait figee a 400 px de 1 100 px jusqu'a 2 560 px pendant que sa
   colonne, elle, continuait de grandir : sur un grand ecran elle flottait au
   milieu d'un vide, et le selecteur moteur / boite se tassait (retour Benjamin
   du 31/07, mesure a dix largeurs). Elle suit maintenant la largeur disponible,
   avec un plancher a 420 px sous lequel les gages passaient sur deux lignes.
   Les deux pistes restent en minmax(0,...) : une piste fixe en px deborderait. */
.hero--photo .hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 33%, 500px));
  align-items: center; padding-bottom: clamp(36px, 5vw, 72px);
}
.hero--photo .hero__intro { max-width: 900px; }
.hero__aside { min-width: 0; }
.hero--photo .hero__title {
  text-transform: uppercase; font-weight: 800;
  font-size: clamp(1.95rem, 3.9vw, 3.05rem); line-height: 1.05; letter-spacing: -.02em;
}
.hero--photo .hero__title .accent { display: block; }
.hero--photo .lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(20px, 2.5vw, 30px); }

/* Bande d'arguments (bas du hero) */
.reassure { position: relative; z-index: 1; background: rgba(9,12,8,.74); border-top: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.reassure__in { display: grid; grid-template-columns: repeat(6, 1fr); }
.reassure__i { display: flex; align-items: center; gap: .7rem; padding: 1.05rem .9rem; border-left: 1px solid rgba(255,255,255,.11); }
.reassure__i:first-child { border-left: 0; padding-left: 0; }
.reassure__i > .mbicon { width: 1.5rem; height: 1.5rem; color: var(--green); flex: none; }
.reassure__i b { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; line-height: 1.25; }
.reassure__i span span { display: block; font-size: .8rem; color: #a9b4a4; margin-top: .15rem; line-height: 1.3; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 600;
  border-radius: var(--r-sm); padding: .45rem .75rem;
}
.hero--photo .badge { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #e4eadd; }
.badge .mbicon { width: 1rem; height: 1rem; color: var(--green); }

/* ---------- Widget plaque ---------- */
/* container-type: la carte se dimensionne sur la place qu'on lui donne et ne
   peut plus, par son contenu, forcer sa colonne plus large que l'ecran. C'est
   ce qui coupait le texte du haut de page sur iPhone (retour Benjamin 02/08) :
   "Boite de vitesses" en une seule ligne imposait un plancher de 340 px a
   TOUTE la colonne, texte d'introduction compris, et .page-hero (overflow
   hidden) rognait le debord au lieu de le laisser voir. */
.plate-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: clamp(20px, 2.6vw, 28px);
  color: var(--text);
  container: plate / inline-size;
}
.plate-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.plate-card__head .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--green-050); color: var(--green-700); display: grid; place-items: center; flex: none; }
.plate-card__head .ic .mbicon { width: 20px; height: 20px; }
.plate-card__head b { font-size: 1.08rem; color: var(--ink); display: block; }
.plate-card__head span span { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; }
/* Version posee dans une carte qui porte deja son cadre et son titre (haut de
   page d'accueil) : le widget ne redessine ni fond ni bordure. */
.plate-card--compact { border: 0; box-shadow: none; padding: 0; background: transparent; }
.plate-card--compact .seg { margin-bottom: .7rem; }
.plate-card--compact .field { margin-bottom: .6rem; }
.plate-card--compact .plate-hint { margin-bottom: .9rem; }

/* minmax(0, 1fr) et non 1fr : une colonne en "1fr" refuse de descendre sous la
   largeur minimale de son contenu, donc un libelle insecable elargit la carte. */
.seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem; background: var(--mist); border-radius: var(--r-md); padding: .28rem; margin-bottom: 1rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem .5rem; border-radius: var(--r-sm); font-weight: 700; font-size: .92rem; color: var(--graphite);
  cursor: pointer; transition: .16s var(--ease); user-select: none;
  white-space: nowrap; text-align: center;
}
.seg span .mbicon { width: 1.05rem; height: 1.05rem; flex: none; }

/* Le libelle s'adapte a la largeur REELLE de la carte, pas a celle de l'ecran :
   le meme widget vit dans une colonne de haut de page, dans une carte d'accueil
   et sur la page de devis, ou la place disponible n'a rien a voir.
   Ordre de degradation : ligne unique avec icone, puis police reduite, puis
   sans icone, puis deux lignes. Jamais de texte coupe.
   Les paliers gardent au moins 12 % de marge entre le texte rendu et la place
   disponible : c'est cette marge qui absorbe l'ecart de metrique entre Safari
   iOS et Chrome, a l'origine du bug du 02/08. Mesure : scripts d'audit. */
@container plate (max-width: 430px) {
  .seg span { font-size: .84rem; padding-inline: .3rem; gap: .3rem; }
}
@container plate (max-width: 345px) {
  .seg span { padding-inline: .2rem; gap: 0; }
  .seg span .mbicon { display: none; }
}
@container plate (max-width: 300px) {
  .seg span { font-size: .72rem; padding-inline: .12rem; }
}
@container plate (max-width: 270px) {
  .seg span { white-space: normal; line-height: 1.15; }
}
/* Repli pour les navigateurs sans requete de conteneur (Safari anterieur a 16,
   donc iOS 15 et moins) : on retombe sur la fenetre, moins precis mais sur. */
@supports not (container-type: inline-size) {
  @media (max-width: 780px) {
    .seg span { font-size: .8rem; padding-inline: .2rem; gap: 0; }
    .seg span .mbicon { display: none; }
  }
  @media (min-width: 961px) and (max-width: 1120px) {
    .seg span { font-size: .82rem; padding-inline: .25rem; gap: .25rem; }
  }
}
.seg input:checked + span { background: #fff; color: var(--green-700); box-shadow: var(--sh-sm); }
.seg input:focus-visible + span { outline: 3px solid rgba(137,191,36,.5); }

.field { margin-bottom: .85rem; }
.field > label { display: block; font-size: .82rem; font-weight: 700; color: var(--graphite); margin-bottom: .35rem; }
.input, .select, .textarea {
  width: 100%; font: inherit; color: var(--text);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .8rem .95rem; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(137,191,36,.14); }
.textarea { min-height: 120px; resize: vertical; }

/* Plaque francaise */
.plate-input { display: flex; align-items: stretch; border: 2px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.plate-input .eu { width: 34px; background: #0b3a9e; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .6rem; font-weight: 700; }
.plate-input .eu .stars { font-size: .7rem; line-height: 1; }
.plate-input input {
  flex: 1; border: 0; outline: none; text-transform: uppercase;
  font-weight: 800; font-size: 1.3rem; letter-spacing: .12em; text-align: center;
  color: var(--ink); padding: .55rem .4rem; min-width: 0; background: #fff;
}
.plate-input input::placeholder { color: #b9c2b6; letter-spacing: .1em; }
.plate-hint { font-size: .8rem; color: var(--muted); margin: .55rem 0 1rem; display: flex; align-items: center; gap: .4rem; }
.plate-hint .mbicon { color: var(--green-700); }

/* ---------- Grilles / cartes ---------- */
.grid { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--sh-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(137,191,36,.4); }
.card__ic { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--green-050); color: var(--green-700); display: grid; place-items: center; margin-bottom: 1rem; }
.card__ic .mbicon { width: 23px; height: 23px; }
.card h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.card p { color: var(--muted); margin: 0; font-size: .97rem; }
.card__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-weight: 700; color: var(--green-700); font-size: .95rem; }
.card__link .mbicon { width: .95rem; height: .95rem; transition: transform .18s var(--ease); }
.card:hover .card__link .mbicon { transform: translateX(3px); }

/* Agences (carte photo de facade : page Qui sommes-nous + page Contact) */
.agence-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.agence-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(137,191,36,.4); }
/* 4/3 : c'est le format natif des deux photos (1200 x 900), donc le cadre montre
   le fichier entier, sans rien couper. Le format large essaye le 31/07 rognait le
   bas des deux vitrines : la coupure gagnee sur Puget etait perdue sur Cannes
   (retour Baptiste le meme jour). Le calage reste reglable par agence dans
   Personnaliser > Coordonnees, pour une photo qui ne serait pas en 4/3. */
.agence-card__media { margin: 0; aspect-ratio: 4 / 3; background: var(--mist); }
.agence-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.agence-card__body { padding: clamp(18px, 2.1vw, 26px); }
.agence-card__body h3 { font-size: 1.14rem; margin: 0 0 .6rem; }
.agence-card__line {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 0 0 .35rem; color: var(--muted); font-size: .97rem;
}
.agence-card__line:last-child { margin-bottom: 0; }
.agence-card__line .mbicon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .17rem; color: var(--green-700); }

/* Univers (2 grandes cartes photo) */
.univers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); }
.univers-card {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 36px); min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.univers-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); color: #fff; }
.univers-card__bg { position: absolute; inset: 0; z-index: 0; }
.univers-card__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(35%) brightness(.62); transition: transform .7s var(--ease); }
.univers-card:hover .univers-card__bg img { transform: scale(1.045); }
.univers-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,16,10,.3) 0%, rgba(12,16,10,.62) 55%, rgba(12,16,10,.94) 100%); }
.univers-card > *:not(.univers-card__bg) { position: relative; z-index: 2; }
.univers-card .kicker { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: .4rem; }
.univers-card h3 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: .35rem; }
.univers-card p { color: #c9d2c3; margin-bottom: 1rem; max-width: 46ch; font-size: .96rem; }
.univers-card .go { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff; font-size: .96rem; }
.univers-card .go .mbicon { width: 1rem; height: 1rem; transition: transform .18s var(--ease); }
.univers-card:hover .go .mbicon { transform: translateX(4px); }

/* Le recadrage force de la carte "boites" (zoom 1,35 sur le coin haut gauche)
   n'a plus lieu d'etre depuis le 04/08 : les deux cartes ont chacune leur propre
   photo, cadree au fichier. Il servait a tirer deux images differentes du meme
   fichier, hero.jpg etant duplique en univers-boites.jpg. */

/* Bloc photo + texte (equipe, expedition, conseiller) */
.media-text {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px); align-items: center;
}
.media-text__media {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-lg); background: var(--mist);
}
.media-text__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-text__body h2 { margin-bottom: .9rem; }
.media-text__body p { color: var(--muted); margin-bottom: .8rem; max-width: 56ch; }
.media-text__body p:last-child { margin-bottom: 0; }
.media-text__cta { margin-top: 1.4rem; }
.media-text--inverse .media-text__media { order: 2; }
.section--ink .media-text__body p { color: #c9d2c3; }
@media (max-width: 860px) {
  .media-text { grid-template-columns: 1fr; }
  .media-text--inverse .media-text__media { order: 0; }
}

/* Piliers */
.pillar { display: flex; flex-direction: column; height: 100%; }
.pillar .tag { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); background: var(--green-050); border-radius: 6px; padding: .32rem .6rem; margin-bottom: .9rem; }

/* Etapes (section sombre, ligne animee) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); }
.step { position: relative; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.step::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0;
  background: var(--green);
  transition: width .9s var(--ease);
}
.step.rv-in::before { width: 100%; }
.step:nth-child(1)::before { transition-delay: .15s; }
.step:nth-child(2)::before { transition-delay: .45s; }
.step:nth-child(3)::before { transition-delay: .75s; }
.step:nth-child(4)::before { transition-delay: 1.05s; }
.step__idx {
  display: inline-block; font-size: .82rem; font-weight: 800; letter-spacing: .14em;
  color: var(--green); margin-bottom: .8rem;
}
.step h3 { color: #fff; font-size: 1.12rem; margin-bottom: .35rem; }
.step p { color: #aeb9a7; font-size: .95rem; margin: 0; }

/* Chiffres */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 20px); }
.stat { text-align: left; padding: clamp(16px, 2vw, 22px); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); }
.section:not(.section--ink) .stat { background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); }
.stat b { display: block; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; color: var(--green); line-height: 1.05; }
.section:not(.section--ink) .stat b { color: var(--green-700); }
.stat span { display: block; margin-top: .4rem; font-size: .9rem; color: #aeb9a7; font-weight: 600; }
.section:not(.section--ink) .stat span { color: var(--muted); }

/* Bandeau de confiance */

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: .6rem; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 1.25rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .99rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--green-050); color: var(--green-700); display: grid; place-items: center; transition: .2s var(--ease); }
.faq summary .pm .mbicon { width: 14px; height: 14px; }
.faq details[open] summary .pm { background: var(--green); color: #131b0c; transform: rotate(45deg); }
.faq .ans { padding: 0 1.25rem 1.15rem; color: var(--muted); font-size: .97rem; }

/* ---------- Bandeau CTA ---------- */
.cta-band { background: linear-gradient(120deg, var(--ink), #17231a); border-radius: var(--r-lg); padding: clamp(30px, 5vw, 60px); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 50% 130%, rgba(137,191,36,.25), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #c3cebe; max-width: 56ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; }

/* ---------- Listing catalogue ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); }
.product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(137,191,36,.4); }
.product-card__media { aspect-ratio: 4/3; background: var(--mist); position: relative; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #c3cdbf; }
.product-card__media .ph .mbicon { width: 52px; height: 52px; }
.product-card__state { position: absolute; top: 10px; left: 10px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(16,22,15,.88); color: #fff; padding: .3rem .55rem; border-radius: 6px; }
.product-card__body { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.product-card__body h3 { font-size: 1rem; line-height: 1.3; margin-bottom: .3rem; }
.product-card__meta { font-size: .85rem; color: var(--muted); margin-bottom: .8rem; }
.product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.price { font-weight: 800; color: var(--ink); font-size: 1.12rem; }
.price small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.price--na { font-size: .88rem; font-weight: 700; color: var(--green-700); }
.stock-dot { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--green-700); }
.stock-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }

/* Sous-navigation de silo (marques, modeles, motorisations) */
.silo-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.8rem; }
.silo-nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 600; color: var(--graphite);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .5rem .85rem; transition: .16s var(--ease);
}
.silo-nav a:hover { border-color: rgba(137,191,36,.55); color: var(--green-700); }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.fiche__media { position: sticky; top: 138px; }
.fiche__gallery { aspect-ratio: 4/3; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; place-items: center; overflow: hidden; }
.fiche__gallery .ph { color: #c3cdbf; text-align: center; }
.fiche__gallery .ph .mbicon { width: 64px; height: 64px; margin-inline: auto; }
.fiche h1 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); }
.fiche .tag { display: inline-flex; font-size: .78rem; font-weight: 700; color: var(--green-700); background: var(--green-050); border-radius: 6px; padding: .34rem .65rem; }
.spec-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.spec-table th, .spec-table td { text-align: left; padding: .65rem .2rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.spec-table th { color: var(--muted); font-weight: 600; width: 45%; }
.spec-table td { font-weight: 700; color: var(--ink); }
.price-box { background: var(--green-050); border: 1px solid rgba(137,191,36,.3); border-radius: var(--r-md); padding: 1.15rem 1.3rem; margin: 1.2rem 0; }
.price-box .amount { font-size: 1.9rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.price-box .amount small { font-size: .85rem; color: var(--muted); font-weight: 600; }

/* ---------- Formulaire devis ---------- */
.devis-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(22px, 3vw, 32px); color: var(--text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-note { font-size: .8rem; color: var(--muted); }
.form-msg { padding: .95rem 1.05rem; border-radius: var(--r-md); font-weight: 600; margin-bottom: 1rem; display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; }
.form-msg--ok { background: var(--green-050); color: var(--green-700); border: 1px solid rgba(137,191,36,.3); }
.form-msg--err { background: #fdecec; color: #b3261e; border: 1px solid #f6caca; }
.req { color: #c0392b; }

/* ---------- Fil d'Ariane ---------- */
.crumbs { font-size: .85rem; color: var(--muted); padding-block: 1.1rem .2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green-700); }
.crumbs .sep { opacity: .5; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--ink); color: #aeb9a7; padding-block: clamp(48px, 6vw, 80px) 2rem; margin-top: clamp(24px, 4vw, 48px); }
.site-footer a { color: #cdd6c4; }
.site-footer a:hover { color: var(--green); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(24px, 3vw, 44px); }
.footer-brand b { color: #fff; font-size: 1.15rem; }
.footer-logo { height: 72px; width: auto; display: block; }
.footer-brand p { font-size: .95rem; }
.footer-col h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.footer-contact div { display: flex; gap: .6rem; margin-bottom: .65rem; font-size: .93rem; }
.footer-contact .mbicon { width: 1.1rem; height: 1.1rem; color: var(--green); flex: none; margin-top: 3px; }
.footer-bottom { margin-top: clamp(28px, 4vw, 52px); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .84rem; color: #8b9784; }
.footer-bottom a { color: #8b9784; }
.footer-bottom a:hover { color: var(--green); }

/* ---------- WhatsApp flottant (mobile) ---------- */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.4); }
.wa-float .mbicon { width: 28px; height: 28px; }

/* ---------- Utilitaires ---------- */
.hide { display: none !important; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 2.2rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; font-size: .92rem; color: var(--graphite); background: #fff; }
.pagination .page-numbers.current { background: var(--green); border-color: var(--green); color: #131b0c; }
.pagination a.page-numbers:hover { border-color: rgba(137,191,36,.55); color: var(--green-700); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .fiche { grid-template-columns: 1fr; }
  .fiche__media { position: static; }
}
/* Le catalogue garde trois colonnes jusqu'a 960 px. A 1 024 px (iPad en paysage,
   iPad Pro en portrait) deux colonnes donnaient des vignettes de 463 px, deux
   fois la taille d'une vignette de bureau (audit mobile du 31/07/2026). */
@media (max-width: 960px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Entre 961 et 1 090 px, le haut de page de catalogue est encore sur deux
   colonnes mais la carte de recherche est etroite : "Boite de vitesses" se
   coupait en deux dans le selecteur. Traite depuis le 04/08 par la requete de
   conteneur sur .plate-card, qui mesure la carte au lieu de la fenetre. */
@media (max-width: 860px) {
  /* La recherche passe sur sa propre ligne : coincee entre le logo et les
     actions, son champ tombait sous 120 px. */
  .header-bar { flex-wrap: wrap; padding-bottom: .6rem; gap: .8rem; }
  .csearch--header { order: 3; flex: 1 0 100%; max-width: none; margin-inline: 0; }
  .univers { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .wa-float { display: inline-flex; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ==================== Page contact ==================== */
.contact-list { margin-top: 1.8rem; display: grid; gap: 1.05rem; }
.contact-item { display: flex; gap: .85rem; align-items: flex-start; }
.contact-item__ic {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--green-050, #f2f8e8); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--green-700);
}
.contact-item__ic .mbicon { width: 1.15rem; height: 1.15rem; }
.contact-item b { display: block; font-size: .92rem; margin-bottom: .1rem; }
.contact-item a, .contact-item span { color: var(--muted); }
.contact-item a:hover { color: var(--green-700); }

/* Menu du bas de footer : en ligne, sans puces */
.footer-bottom ul { display: inline; list-style: none; margin: 0; padding: 0; }
.footer-bottom li { display: inline-block; list-style: none; margin: 0 0 0 1.1rem; }
.footer-bottom li:first-child { margin-left: 0; }

/* ==================== Badges de reassurance fiche produit ==================== */
.trust-badges {
  list-style: none; margin: 1.1rem 0 0; padding: .9rem 1.1rem;
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
  background: var(--green-050); border: 1px solid var(--line); border-radius: var(--r-md);
}
.trust-badges li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--text); }
.trust-badges .mbicon { color: var(--green-700); flex: none; }

/* ==================== Pop-up confirmation devis ==================== */
.mb-modal {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: rgba(12, 16, 10, .55); padding: var(--gut);
}
.mb-modal[hidden] { display: none; }
.mb-modal__box {
  background: var(--paper); border-radius: var(--r-lg); max-width: 420px; width: 100%;
  padding: clamp(24px, 4vw, 40px); text-align: center; box-shadow: 0 24px 64px rgba(10, 14, 9, .28);
}
.mb-modal__ic {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1rem;
  background: var(--green-050); border-radius: 50%; color: var(--green-700);
}
.mb-modal__ic .mbicon { width: 1.6rem; height: 1.6rem; }
.mb-modal__box h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.mb-modal__box p { color: var(--muted); margin-bottom: 1.3rem; }
body.mb-modal-open { overflow: hidden; }

/* ==================== Barre d'outils listing (compte + tri) ==================== */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 1.3rem; }
.list-count { font-size: .9rem; font-weight: 700; color: var(--muted); }
.sort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-left: auto; }
.sort-bar__label { font-size: .82rem; font-weight: 700; color: var(--muted); margin-right: .15rem; }
.sort-bar__opt {
  font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: .3rem .7rem; border: 1px solid transparent; border-radius: var(--r-sm);
  transition: border-color .2s, color .2s, background .2s;
}
.sort-bar__opt:hover { color: var(--green-700); background: var(--green-050); }
.sort-bar__opt.is-on { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--sh-sm); font-weight: 700; }

/* ==================== Vignettes marques (facon vignettes constructeur) ==================== */
.brand-block { margin: 0 0 clamp(24px, 4vw, 40px); }
.brand-block__title { font-size: 1.05rem; margin-bottom: .9rem; }
.brand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .8rem;
}
.brand-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.15rem .8rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; text-align: center; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.brand-card:hover { border-color: var(--green-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 22, 15, .08); }
.brand-card__logo { height: 52px; display: grid; place-items: center; }
.brand-card__logo img { max-height: 52px; max-width: 108px; object-fit: contain; }
.brand-card__mono {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-050); color: var(--green-700); font-weight: 800; font-size: 1.2rem;
}
.brand-card__label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); line-height: 1.35; }

/* Fallback logo marque sur les cartes produit sans photo */
/* Logo de marque en visuel : cartes de listing ET fiche produit (meme traitement partout,
   les photos de pieces ne sont pas exploitables cote fournisseur). */
.product-card__media .ph--logo,
.fiche__gallery .ph--logo { display: grid; place-items: center; width: 100%; height: 100%; background: var(--mist); }
.product-card__media .ph--logo img { max-width: 42%; max-height: 52%; object-fit: contain; opacity: .85; }
.fiche__gallery .ph--logo img { max-width: 46%; max-height: 42%; object-fit: contain; opacity: .9; }

/* ==================== Hero catalogue avec image de fond ====================
   Pleine largeur SOUS le menu flottant (comme le hero de la home), fil d'Ariane integre. */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(32px, 4.5vw, 56px);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(10,13,9,.9) 0%, rgba(10,13,9,.74) 45%, rgba(10,13,9,.45) 100%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--green); }
.page-hero h1 { color: #fff; }
.page-hero .lead, .page-hero .muted { color: #ccd5c6; }
.page-hero .crumbs { padding-block: 0; margin: 0 0 1.2rem; }
.page-hero .crumbs a { color: #aab7a2; }
.page-hero .crumbs a:hover { color: var(--green); }
.page-hero .crumbs span { color: #d5ddcf; }
.page-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.page-hero__media { max-width: 460px; justify-self: end; width: 100%; }
/* Sans widget (pages d'entreprise), le texte occupe toute la largeur au lieu de
   se tasser dans la colonne de gauche en laissant l'autre vide. */
.page-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.page-hero__grid--solo .page-hero__intro { max-width: 62ch; }
.page-hero__grid--solo .lead { font-size: clamp(1.02rem, 1.4vw, 1.16rem); }
@media (max-width: 960px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media { justify-self: stretch; max-width: none; }
}

/* ==================== Blog ==================== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
.post-card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.post-card:hover { border-color: var(--green-600); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 22, 15, .08); }
.post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--mist); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__body h2, .post-card__body h3 { font-size: 1.06rem; line-height: 1.35; }
.post-card__body h2 a, .post-card__body h3 a { color: var(--text); text-decoration: none; }
.post-card__body h2 a:hover, .post-card__body h3 a:hover { color: var(--green-700); }
.post-card__meta { font-size: .82rem; color: var(--muted); font-weight: 600; }
.post-card__excerpt { font-size: .92rem; color: var(--muted); }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .9rem; color: var(--muted); font-weight: 600; }
.byline .mbicon { color: var(--green-700); }
.article-body { max-width: 780px; margin-inline: auto; }

/* ==================== Fiche produit v2 (form en haut a droite, specs sous la photo) ==================== */
.fiche__media { position: static; }
.fiche__info { position: sticky; top: 138px; }
@media (max-width: 900px) { .fiche__info { position: static; } }
.price-box .from { display: block; font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.fiche__block-title { font-size: 1.05rem; margin: 1.7rem 0 .8rem; }
.fiche .devis-card { margin-top: 1.2rem; }
.fiche__contact { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }

/* Prix carte produit : "A partir de" en sur-ligne, montant jamais coupe */
.price { display: inline-flex; flex-direction: column; line-height: 1.25; }
.price__from { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.price__val { white-space: nowrap; }
.product-card__foot { align-items: center; }

/* =====================================================================
   V3 : trois cartes d'action, recherche par vehicule, bande de preuves
   ===================================================================== */

/* ---------- Trois cartes sous le haut de page ---------- */
/* Colle sous la bande d'arguments, comme sur la maquette du client. */
.acard {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: 0 6px 22px rgba(16,22,15,.06);
  padding: clamp(24px, 2.2vw, 32px);
  min-height: 430px;
  /* Une liste deroulante impose sa plus longue option comme largeur minimale :
     sans min-width, la piste de grille s'elargit pour la marque au nom le plus
     long et la carte deborde de l'ecran en mobile. */
  min-width: 0;
}
.acard__t { font-size: 1.06rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4rem; }
.acard__s { font-size: .95rem; color: var(--muted); margin-bottom: 1.35rem; }

/* Carte devis du haut de page : posee sur la photo, elle n'a pas besoin de la
   hauteur minimale qui aligne les cartes de la rangee du dessous. */
.acard--hero {
  min-height: 0; box-shadow: var(--sh-lg);
  padding: clamp(20px, 2vw, 26px);
}
.acard--hero .acard__s { margin-bottom: 1.1rem; }
.acard--hero .acheck { gap: .55rem; margin-bottom: 1.1rem; }
.acard--hero .acheck li { font-size: .9rem; }


/* Liste a coches */
.acheck { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .7rem; }
.acheck li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--text); line-height: 1.4; }
.acheck .mbicon { width: 1.1rem; height: 1.1rem; color: var(--green-700); flex: none; margin-top: .18rem; stroke-width: 2.4; }

/* ---------- Bande de preuves ---------- */
.proof { background: var(--mist); border-block: 1px solid var(--line-2); }
.proof__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding-block: 1.1rem; }
.proof__avis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-right: 2rem; border-right: 1px solid var(--line-2); }
.proof__note { display: inline-flex; align-items: center; gap: .5rem; }
.proof__note b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.proof__note .stars .star .mbicon { width: 1.05rem; height: 1.05rem; color: #c8cfc4; fill: none; }
.proof__note .stars .star.is-on .mbicon { color: var(--star); fill: var(--star); }
.proof__src { font-size: .82rem; font-weight: 700; color: var(--muted); }
.proof__quote { margin: 0; font-size: .88rem; color: var(--graphite); font-style: italic; max-width: 42ch; }
.proof__quote cite { display: block; font-style: normal; font-weight: 700; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
/* Les quatre chiffres tiennent sur une seule ligne : `nowrap` au-dessus de 1100 px,
   la taille du texte s'ajuste au lieu de renvoyer le dernier chiffre a la ligne. */
.proof__stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.4rem; flex: 1; margin-left: auto; min-width: 0; }
@media (min-width: 1100px) {
  .proof__stats { flex-wrap: nowrap; gap: clamp(1rem, 2.2vw, 2.4rem); }
  .proof__stat { min-width: 0; }
  .proof__stat span span { white-space: nowrap; }
}
.proof__stat { display: inline-flex; align-items: center; gap: .7rem; }
.proof__stat > .mbicon { width: 1.7rem; height: 1.7rem; color: var(--green-700); flex: none; }
.proof__stat b { display: block; font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.02em; }
.proof__stat span span { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Sur grand ecran, le catalogue passe a 4 colonnes : avec la mise en page
   elargie, 3 colonnes donneraient des vignettes produit demesurees. */
@media (min-width: 1400px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .grid-4 { gap: clamp(18px, 1.6vw, 24px); }
}

/* ---------- Titres de section en capitales (direction v3) ---------- */
.section-head .h-xl { text-transform: none; }
.eyebrow { letter-spacing: .12em; }

/* ---------- Responsive v3 ---------- */
/* En-tete : le menu se resserre, puis passe en panneau sous 1080 px. */
@media (max-width: 1400px) {
  .primary-nav > ul > li > a { padding: 0 .58rem; font-size: .75rem; }
  .header-bar { gap: 1rem; }
}
@media (max-width: 1340px) {
  /* .72rem tombait a 11,5 px, sous la limite de lisibilite. A .75rem le menu
     s'arrete encore 71 px avant les boutons d'action a 1 121 px, la largeur la
     plus serree ou il reste affiche (mesure du 31/07/2026). */
  .primary-nav > ul > li > a { padding: 0 .45rem; font-size: .75rem; letter-spacing: .02em; }
  .header-phone__txt { display: none; }
  .header-sep { display: none; }
  .header-bar { gap: .7rem; }
  .header-actions .btn--cta { padding: .85rem 1rem; }
}
@media (max-width: 1120px) {
  /* Le menu sort du flux : sa ligne se replie sur son seul filet, qui n'a plus
     rien a separer. Sans ca, un trait flotte sous l'en-tete. */
  .header-nav-row { border-top: 0; }
  /* Menu en panneau deroulant : l'en-tete garde le telephone et la demande de devis. */
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: block; margin: 0;
    max-height: calc(100vh - var(--hdr)); overflow-y: auto;
    background: #fff; border-top: 1px solid var(--line-2); box-shadow: var(--sh-lg);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .2s var(--ease);
  }
  .primary-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; padding: .6rem .4rem 0; gap: .1rem; }
  .primary-nav > ul > li { display: block; position: static; }
  .primary-nav > ul > li > a { border-bottom: 0; padding: .75rem .9rem; font-size: .88rem; }
  .primary-nav > ul > li:hover > a, .primary-nav > ul > li:focus-within > a { border-bottom-color: transparent; }
  /* Sous-menus replies par defaut : le panneau reste court et lisible au pouce. */
  .primary-nav > ul > li { border-bottom: 1px solid var(--line); }
  .primary-nav > ul > li:last-child { border-bottom: 0; }
  .primary-nav .menu-item-has-children { position: relative; }
  .primary-nav .caret { display: none; }
  .submenu-toggle {
    position: absolute; top: 0; right: 0; width: 54px; height: 48px;
    display: grid; place-items: center; background: none; border: 0; padding: 0;
  }
  .submenu-toggle span, .submenu-toggle span::before {
    content: ""; display: block; width: 13px; height: 2px; border-radius: 2px;
    background: var(--graphite); transition: transform .2s var(--ease);
  }
  .submenu-toggle span::before { transform: rotate(90deg); }
  .is-open > .submenu-toggle span::before { transform: rotate(0deg); }
  .primary-nav .sub-menu, .primary-nav .mega {
    position: static; width: auto; min-width: 0; transform: none; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: 0 0 .3rem 1rem;
    display: none;
  }
  .primary-nav .is-open > .sub-menu, .primary-nav .is-open > .mega { display: block; }
  .primary-nav .mega__in { padding: .2rem 0 .4rem; }
  .primary-nav .mega__head { display: none; }
  .mega__grid { grid-template-columns: 1fr 1fr; gap: .45rem; padding-right: .8rem; }
  /* Les huit premieres marques suffisent sur mobile, "Toutes les marques" fait le reste. */
  .mega__grid li:nth-child(n+9) { display: none; }
  .mega__foot { margin-top: .7rem; padding-top: .7rem; }
  /* La nav sort du flux : c'est le bloc d'actions qui tient la droite. */
  .header-actions { margin-left: auto; }
  .header-phone__txt { display: flex; }
  .header-sep { display: block; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile-actions { display: grid; gap: .5rem; padding: .2rem .8rem .9rem; }
  .header-actions .btn--cta { display: none; }
}
/* La carte devis passe sous le titre. Le seuil est monte de 1 024 a 1 280 px le
   31/07 : entre les deux, la carte tenait a cote du titre mais les deux etaient
   a l'etroit (carte a 400 px, titre sur cinq lignes). Sous le titre elle fait
   520 px et respire ; c'est la meme carte, pas une version degradee. */
@media (max-width: 1280px) {
  .hero--photo .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--photo .hero__intro { max-width: none; }
  .hero__aside { max-width: 520px; }
}
@media (max-width: 1024px) {
  .reassure__in { grid-template-columns: repeat(3, 1fr); }
  .reassure__i:nth-child(4) { border-left: 0; padding-left: 0; }
  .proof__avis { border-right: 0; padding-right: 0; }
  .proof__stats { margin-left: 0; }
}
@media (max-width: 1100px) {
  /* Barre du haut : un seul argument, le reste passerait sur deux lignes. */
  .topbar__args li:nth-child(n+2) { display: none; }
  .topbar__in { min-height: 34px; }
}
@media (max-width: 720px) {
  .topbar__right { display: none; }
  .topbar__args { justify-content: center; width: 100%; }
  .reassure__in { grid-template-columns: 1fr 1fr; }
  .reassure__i { border-left: 0; padding-inline: 0; }
  .hero--photo .hero__title { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .hero__cta .btn { width: 100%; }
  .proof__stats { gap: .8rem 1.6rem; }
}

/* =====================================================================
   Confort tactile (audit mobile et tablette du 31/07/2026)
   ===================================================================== */

/* Plusieurs libelles secondaires passaient sous 12 px, la limite en dessous de
   laquelle un texte est signale comme illisible sur mobile. Le "F" et l'etoile
   de la plaque bleue restent volontairement petits : ils reproduisent une vraie
   plaque d'immatriculation, ce n'est pas du texte a lire. */
.header-phone__txt span { font-size: .75rem; }
.product-card__state { font-size: .75rem; }
.price small { font-size: .75rem; }
.pillar .tag { font-size: .75rem; }
.price-box .from { font-size: .75rem; }

/* Sur un ecran tactile, les cibles secondaires montaient a peine a 25-34 px de
   haut : le doigt vise un carre d'environ 45 px, pas un curseur. Rien ne change
   sur les ecrans avec souris, ou ces liens sont deja confortables. */
@media (hover: none) {
  .header-phone { min-height: 44px; }
  .card__link { min-height: 44px; margin-top: .7rem; }
  /* Les etiquettes simples restent compactes, celles qui sont des LIENS
     (maillage marque / modele / motorisation en haut de fiche) montent a 40 px. */
  .tag { min-height: 34px; display: inline-flex; align-items: center; }
  a.tag { min-height: 40px; min-width: 42px; justify-content: center; }
}

/* Bandeau d'avis clients */
.avis-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: clamp(20px, 2.6vw, 32px); }
.avis-head h2 { margin: 0; }
.avis-note { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.avis-note b { font-size: 1.15rem; }
.avis-note span { color: var(--muted); font-size: .93rem; }
.avis-lien { font-size: .93rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* La bande d'avis defile toute seule vers la gauche. Le cadre masque ce qui
   deborde, la piste porte l'animation, et son contenu est ecrit deux fois : a
   -50 % la seconde moitie est exactement a la place de la premiere, la boucle ne
   se voit pas. Les ecarts sont des marges (pas un "gap") pour que ce -50 % tombe
   pile sur la carte suivante. Voile blanc sur les deux bords pour que les cartes
   entrent et sortent sans etre coupees net. */
.avis-defile { --avis-ecart: clamp(12px, 1.6vw, 20px); position: relative; overflow: hidden; }
.avis-defile::before,
.avis-defile::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 5vw, 64px);
  z-index: 2; pointer-events: none;
}
.avis-defile::before { left: 0; background: linear-gradient(to right, var(--voile, var(--paper)), rgba(255,255,255,0)); }
.avis-defile::after { right: 0; background: linear-gradient(to left, var(--voile, var(--paper)), rgba(255,255,255,0)); }
.section--mist .avis-defile { --voile: var(--mist); }
.section--mist .avis-defile::before { background: linear-gradient(to right, var(--mist), rgba(246,247,244,0)); }
.section--mist .avis-defile::after { background: linear-gradient(to left, var(--mist), rgba(246,247,244,0)); }
.section--ink .avis-defile { --voile: var(--ink); }
.section--ink .avis-defile::before { background: linear-gradient(to right, var(--ink), rgba(16,22,15,0)); }
.section--ink .avis-defile::after { background: linear-gradient(to left, var(--ink), rgba(16,22,15,0)); }
.avis-piste {
  display: flex; width: max-content; margin: 0; padding: 0 0 .6rem; list-style: none;
  animation: mbdist-avis-defile var(--avis-duree, 60s) linear infinite;
}
/* Pause quand la souris se pose, quand on arrive au clavier, et quand un doigt
   reste appuye sur la bande (le seul equivalent du survol sur telephone). */
.avis-defile:hover .avis-piste,
.avis-defile:focus-within .avis-piste,
.avis-defile:active .avis-piste { animation-play-state: paused; }
@keyframes mbdist-avis-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.avis-carte {
  flex: 0 0 clamp(260px, 78vw, 340px); margin-right: var(--avis-ecart);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2vw, 24px);
  display: flex; flex-direction: column; gap: .7rem;
}
/* Mouvement desactive dans les reglages du systeme : on revient a la bande qu'on
   fait glisser au doigt, et le double n'a plus de raison d'etre. */
@media (prefers-reduced-motion: reduce) {
  .avis-defile { overflow-x: auto; overscroll-behavior-x: contain; }
  .avis-defile::before, .avis-defile::after { display: none; }
  .avis-piste { animation: none; scroll-snap-type: x mandatory; }
  .avis-carte { scroll-snap-align: start; }
  .avis-carte--double { display: none; }
}
.section--mist .avis-carte { background: #fff; }
.section--ink .avis-carte { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.avis-carte p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.section--ink .avis-carte p { color: #c9d2c3; }
.avis-carte footer { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; }
.avis-carte footer span { color: var(--muted); }

/* ==================== Blog : sommaire, colonne collante, categories ==================== */
.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.article-main { min-width: 0; max-width: 780px; }
.article-aside__in { position: sticky; top: 138px; }
/* Les ancres du sommaire doivent s'arreter SOUS l'en-tete collant. */
.entry-content h2, .entry-content h3 { scroll-margin-top: 138px; }

.toc {
  border: 1px solid var(--line); border-left: 3px solid var(--green-600);
  border-radius: var(--r-md); background: var(--mist);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px); margin-bottom: clamp(24px, 3vw, 36px);
}
.toc__t { display: flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc__t .mbicon { width: 1rem; height: 1rem; color: var(--green-700); }
.toc__l { margin: .9rem 0 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: .45rem; font-size: .95rem; }
.toc__l > li { display: flex; gap: .45rem; }
.toc__l > li:not(.is-sub) { counter-increment: toc; }
.toc__l > li:not(.is-sub)::before { content: counter(toc) "."; color: var(--muted); font-weight: 700; flex: none; }
.toc__l li.is-sub { margin-left: 1.4rem; font-size: .9rem; }
.toc__l li.is-sub::before { content: "– "; color: var(--muted); }
.toc__l a { color: var(--graphite); }
.toc__l a:hover { color: var(--green-700); }

.aside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 26px); box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: .8rem;
}
.aside-card__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--mist); color: var(--green-700); }
.aside-card b { font-size: 1.08rem; line-height: 1.25; }
.aside-card p { margin: 0; font-size: .92rem; color: var(--muted); }
.btn--full { width: 100%; justify-content: center; }
.aside-card__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .88rem; color: var(--muted); }
.aside-card__pts li { display: flex; align-items: flex-start; gap: .45rem; }
.aside-card__pts .mbicon { width: .95rem; height: .95rem; color: var(--green-600); flex: none; margin-top: 3px; }
.aside-card__dir { display: grid; gap: .4rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 600; }
.aside-card__dir a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); }
.aside-card__dir a:hover { color: var(--green-700); }
.aside-card__dir .mbicon { width: 1rem; height: 1rem; color: var(--green-700); }

.eyebrow--link { display: inline-block; margin-bottom: .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.8rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600;
  color: var(--graphite); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .45rem .9rem; transition: .16s var(--ease);
}
.chip span { color: var(--muted); font-weight: 600; font-size: .82rem; }
.chip:hover { border-color: rgba(137,191,36,.55); color: var(--green-700); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.is-on span { color: #a9b5a3; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.post-card__cat { font-weight: 700; color: var(--green-700); }

@media (max-width: 1040px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-main { max-width: 780px; margin-inline: auto; }
  /* Le bandeau de fin d'article prend le relais : pas de double appel a l'action. */
  .article-aside { display: none; }
}

/* ==================== Hubs des axes transverses ==================== */
.axe-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.axe-grid a {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .85rem; transition: .16s var(--ease);
}
.axe-grid a:hover { border-color: rgba(137,191,36,.55); }
.axe-grid b { font-size: .95rem; font-weight: 700; color: var(--ink); }
.axe-grid a:hover b { color: var(--green-700); }
.axe-grid span { font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }

.trans-t { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; }
.trans-hubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .6rem; }
.trans-hub {
  display: grid; gap: .3rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2vw, 24px); transition: .16s var(--ease);
}
.trans-hub:hover { border-color: rgba(137,191,36,.55); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 22, 15, .08); }
.trans-hub__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--mist); color: var(--green-700); margin-bottom: .4rem; }
.trans-hub b { font-size: 1.06rem; color: var(--ink); }
.trans-hub > span:last-child { font-size: .9rem; color: var(--muted); }
.section--ink .trans-hub { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }