/* =========================================================================
   Direct Pay Solutions — Système de design
   Navy + Clover green. Modern, trustworthy, expert.
   ========================================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Bricolage+Grotesque:wght@600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---- Tokens ---- */
:root {
  /* Brand */
  --navy-900: #071726;
  --navy-800: #0a2036;
  --navy-700: #0c2340;   /* brand navy */
  --navy-600: #143456;
  --navy-grad: linear-gradient(160deg, #0c2340 0%, #071726 100%);

  --green-600: #0a8f52;
  --green-500: #12b76a;  /* primary accent / CTA */
  --green-400: #2fd483;
  --green-50:  #e8f8f0;
  --on-accent: #042a18;

  --ink:       #0b1a2b;
  --ink-soft:  #41546a;
  --ink-faint: #6c7d92;

  --paper:     #f6f7f5;  /* warm off-white page bg */
  --paper-2:   #eef1ee;
  --white:     #ffffff;
  --line:      rgba(11, 26, 43, 0.10);
  --line-2:    rgba(11, 26, 43, 0.06);
  --line-on-dark: rgba(255, 255, 255, 0.14);

  /* Type */
  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Geometry */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);

  --shadow-sm: 0 1px 2px rgba(7, 23, 38, 0.06), 0 4px 14px rgba(7, 23, 38, 0.05);
  --shadow-md: 0 10px 30px rgba(7, 23, 38, 0.10), 0 2px 8px rgba(7, 23, 38, 0.06);
  --shadow-lg: 0 30px 70px rgba(7, 23, 38, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1340px; }
.section { padding-block: clamp(40px, 5.5vw, 84px); }
.section-tight { padding-block: clamp(28px, 3.5vw, 52px); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.display { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.12rem; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); line-height: 1.5; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-600);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--green-500); display: inline-block; }
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark { color: var(--green-400); }

/* Hero accueil : marque en escalier + accroche insécable */
.h1-kicker { display: block; font-size: 0.40em; line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-soft); margin-bottom: 0.5rem; }
.hero-tagline { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: -0.01em; color: var(--ink); }
.nowrap { white-space: nowrap; }

/* Pastilles du hero : chaque pastille sur une ligne, 2 rangées si besoin */
.hero-chips { flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 560px) { .hero-chips { flex-wrap: wrap; } }

.text-green { color: var(--green-600); }
.text-soft { color: var(--ink-soft); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  padding: 0.92em 1.5em; border-radius: 999px; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  cursor: pointer; white-space: nowrap; line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--green-500); color: var(--on-accent); box-shadow: 0 8px 22px rgba(18, 183, 106, 0.32); }
.btn-primary:hover { background: var(--green-400); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18, 183, 106, 0.4); }
.btn-dark { background: var(--navy-700); color: #fff; }
.btn-dark:hover { background: var(--navy-600); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-ghost.on-dark { color: #fff; border-color: var(--line-on-dark); }
.btn-ghost.on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn-lg { padding: 1.08em 1.9em; font-size: 1.05rem; }
.btn-block { width: 100%; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--green-600);
  transition: gap .25s var(--ease);
}
.arrow-link:hover { gap: 0.85em; }
.arrow-link svg { width: 1em; height: 1em; }

/* ---- Pills / chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.82rem; font-weight: 600; padding: 0.45em 0.9em; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-soft);
  white-space: nowrap;
}
.chip-green { background: var(--green-50); color: var(--green-600); border-color: transparent; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }

/* ============================ HEADER ============================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 247, 245, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-color: var(--line); background: rgba(246,247,245,0.92); }
.nav { display: flex; align-items: center; gap: 1.1rem; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-size: 1.06rem; color: var(--ink); letter-spacing: -0.03em; }
.brand-text span { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-600); margin-top: 3px; white-space: nowrap; }

.nav-menu { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-weight: 600; font-size: 0.95rem; color: var(--ink); padding: 0.55em 0.6em; border-radius: 10px; white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--green-600); }
.nav-link.active { color: var(--green-600); }
.nav-link.active::after { content: ""; position: absolute; left: 0.85em; right: 0.85em; bottom: 0.2em; height: 2px; background: var(--green-500); border-radius: 2px; }
.nav-link .caret { width: 0.82em; height: 0.82em; transition: transform .25s var(--ease); opacity: .9; margin-left: 0.05em; stroke-width: 2.4; }
.nav-item:hover .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 12px; min-width: 320px; opacity: 0; visibility: hidden; transition: all .25s var(--ease); z-index: 50;
}
.dropdown.wide { min-width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.8rem; border-radius: 12px; transition: background .18s; }
.dropdown a:hover { background: var(--paper); }
.dropdown .d-ico { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--green-50); display: grid; place-items: center; color: var(--green-600); }
.dropdown .d-ico svg { width: 19px; height: 19px; }
.dropdown .d-txt b { display: block; font-size: 0.95rem; color: var(--ink); font-family: var(--body); }
.dropdown .d-txt span { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.35; }

.nav-cta { display: flex; align-items: center; gap: 1.15rem; }
.nav-phone { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; color: var(--ink); font-size: 0.92rem; white-space: nowrap; padding-left: 0.4rem; }
.nav-phone .np-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; flex: none; }
.nav-phone .np-ico svg { width: 17px; height: 17px; }
.nav-phone .np-txt { display: flex; flex-direction: column; line-height: 1.05; }
.nav-phone .np-label { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.nav-phone svg { width: 1.05em; height: 1.05em; color: var(--green-600); }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav { position: fixed; inset: 76px 0 0 0; background: var(--paper); z-index: 90; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; padding: 1.5rem var(--gutter) 3rem; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav summary { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 700; font-size: 1.15rem; font-family: var(--display); list-style: none; cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary .caret { width: 1em; height: 1em; transition: transform .25s; }
.mobile-nav details[open] summary .caret { transform: rotate(180deg); }
.mobile-nav .m-sub { padding: 0 0 1rem; }
.mobile-nav .m-sub a { display: block; padding: 0.6rem 0; color: var(--ink-soft); font-weight: 500; }
.mobile-nav > a { display: block; padding: 1rem 0; font-weight: 700; font-size: 1.15rem; font-family: var(--display); border-bottom: 1px solid var(--line); }
.mobile-nav .m-actions { margin-top: 1.8rem; display: grid; gap: 0.8rem; }

/* ============================ HERO ============================ */
.hero { position: relative; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-media { position: relative; }
.trust-strip { border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 40px); display: grid; gap: 1.4rem; justify-items: center; }
.trust-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- Generic dark band ---- */
.band-dark { background: var(--navy-grad); color: #fff; position: relative; overflow: hidden; }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }
.band-dark .lead, .band-dark p { color: rgba(255,255,255,0.82); }
.grid-glow::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(18,183,106,0.18), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(20,52,86,0.6), transparent 60%);
  pointer-events: none;
}
.dotgrid::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none; opacity: .6;
}

/* ---- Media frames ---- */
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--paper-2); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-32 { aspect-ratio: 3/2; }
.ratio-43 { aspect-ratio: 4/3; }
.ratio-11 { aspect-ratio: 1/1; }
.ratio-169 { aspect-ratio: 16/9; }

/* Image affichée en entier, jamais recadrée : le cadre suit le ratio naturel de l'image. */
.media-frame.fit-full { aspect-ratio: auto; height: auto; }
.media-frame.fit-full img { position: static; width: 100%; height: auto; object-fit: contain; display: block; }

/* Image de produit affichée en entier dans un cadre à hauteur fixe : le cadre garde son
   format (grille propre) mais l'image ne se fait plus recadrer, une marge la sépare du bord. */
.media-frame.fit-contain { box-sizing: border-box; padding: 0.85rem; }
.media-frame.fit-contain img { object-fit: contain; }

/* Placeholder imagery */
.ph {
  position: relative; display: grid; place-items: center; color: var(--ink-faint);
  background:
    repeating-linear-gradient(135deg, rgba(11,26,43,0.05) 0 12px, rgba(11,26,43,0.02) 12px 24px),
    var(--paper-2);
}
.ph span { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--white); padding: 0.4em 0.8em; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* Floating stat card on media */
.float-card {
  position: absolute; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line-2);
}
.float-card .fc-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; flex: none; }
.float-card .fc-ico svg { width: 20px; height: 20px; }
.float-card b { font-family: var(--display); font-size: 1.15rem; display: block; line-height: 1; }
.float-card span { font-size: 0.78rem; color: var(--ink-faint); }

/* ============================ CARDS ============================ */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-ico { width: 50px; height: 50px; border-radius: 13px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; margin-bottom: 1.1rem; }
.card-ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 1.22rem; margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Product card */
.product-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.product-card .pc-media { aspect-ratio: 4/3; background: linear-gradient(160deg, #f0f3f0, #e3e8e3); position: relative; overflow: hidden; }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; }
/* Image de produit affichée en entier : le cadre de la carte garde sa hauteur uniforme
   (grille propre), l'image ne se fait plus recadrer. */
.product-card .pc-media.fit-contain { box-sizing: border-box; padding: 0.85rem; }
.product-card .pc-media.fit-contain img { object-fit: contain; }
.product-card .pc-body { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.product-card .pc-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600); }
.product-card h3 { font-size: 1.35rem; margin: 0.5rem 0 0.5rem; }
.product-card p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.product-card .pc-foot { margin-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; }
.badge-best { background: var(--navy-700); color: #fff; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4em 0.7em; border-radius: 999px; position: absolute; top: 14px; left: 14px; z-index: 2; }

/* feature list with checks */
.checks { display: grid; gap: 0.7rem; }
.checks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-50); margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a8f52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; }
.checks.on-dark li { color: rgba(255,255,255,0.8); }
.checks li .spec { display: block; }

/* stat row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat b { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; display: block; line-height: 1; color: var(--ink); white-space: nowrap; }
.stat b .u { display: inline; white-space: nowrap; margin-left: 0.04em; }
.band-dark .stat b { color: #fff; }
.band-dark .stat b .u { color: var(--green-400); }
.stat span { font-size: 0.92rem; color: var(--ink-faint); margin-top: 0.4rem; display: block; }
.band-dark .stat span { color: rgba(255,255,255,0.6); }

/* logos strip */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 60px); }
.logos span { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink-faint); opacity: 0.65; letter-spacing: -0.02em; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 1.2rem; }
.step { display: flex; gap: 1.2rem; align-items: flex-start; }
.step .num { counter-increment: step; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--navy-700); color: #fff; font-family: var(--display); font-weight: 800; display: grid; place-items: center; font-size: 1.1rem; }
.step .num::before { content: counter(step, decimal-leading-zero); }
.step h4 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.step p { color: var(--ink-soft); font-size: 0.96rem; }

/* Quote / testimonial */
.quote { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -0.02em; }
.quote-by { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.6rem; }
.quote-by .av { width: 50px; height: 50px; border-radius: 50%; background: var(--paper-2); flex: none; overflow: hidden; }
.quote-by b { display: block; font-size: 0.98rem; }
.quote-by span { font-size: 0.86rem; color: var(--ink-faint); }

/* FAQ / accordion */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q { width: 100%; text-align: left; background: none; border: none; padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink); }
.acc-q .pm { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; position: relative; transition: .25s var(--ease); }
.acc-q .pm::before, .acc-q .pm::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.acc-q .pm::before { width: 12px; height: 2px; }
.acc-q .pm::after { width: 2px; height: 12px; }
.acc-item.open .pm { background: var(--green-500); border-color: var(--green-500); }
.acc-item.open .pm::before, .acc-item.open .pm::after { background: #042a18; }
.acc-item.open .pm::after { transform: scaleY(0); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-a-inner { padding-bottom: 1.4rem; color: var(--ink-soft); max-width: 70ch; }

/* CTA band */
.cta-band { background: var(--navy-grad); color: #fff; border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 64px); position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; }
.cta-band .lead, .cta-band p { color: rgba(255,255,255,0.88); }
.cta-band .eyebrow { color: var(--green-400); }

/* Breadcrumb */
.crumb { font-size: 0.86rem; color: var(--ink-faint); display: flex; gap: 0.5em; align-items: center; }
.crumb a:hover { color: var(--green-600); }
.crumb .sep { opacity: 0.4; }

/* page hero (subpages) */
.page-hero { padding-block: clamp(40px, 6vw, 72px); }
.page-hero .eyebrow { margin-bottom: 1rem; }

/* ============================ FOOTER ============================ */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.7); padding-top: clamp(56px, 7vw, 90px); }
.site-footer h4 { color: #fff; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 3.5rem; border-bottom: 1px solid var(--line-on-dark); }
.footer-grid a { color: rgba(255,255,255,0.7); display: block; padding: 0.32rem 0; transition: color .2s; }
.footer-grid a:hover { color: var(--green-400); }
.footer-brand .brand-text b { color: #fff; }
.footer-brand p { font-size: 0.95rem; margin: 1.1rem 0 1.4rem; max-width: 34ch; }
.footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.3rem 0; font-size: 0.95rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--green-400); flex: none; margin-top: 2px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.8rem; font-size: 0.84rem; color: rgba(255,255,255,0.5); }
.footer-bottom .fb-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-legal { font-size: 0.76rem; color: rgba(255,255,255,0.38); line-height: 1.6; padding-bottom: 2.5rem; max-width: 90ch; }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto; } }

/* ---- Utilities ---- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.2rem; } .mb-3 { margin-bottom: 2rem; }
.maxw-sm { max-width: 44ch; } .maxw-md { max-width: 60ch; } .maxw-lg { max-width: 72ch; }
.flex { display: flex; } .items-center { align-items: center; } .gap-1 { gap: 0.6rem; } .gap-2 { gap: 1rem; } .wrap { flex-wrap: wrap; }
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

/* Hero phone (M2 — lien telephone visible, suivi WhatConverts). Cible tactile >= 44px. */
.hero-phone { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 48px; padding: 0.45rem 1.15rem 0.45rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.hero-phone:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--green-500); }
.hero-phone:active { transform: translateY(0); }
.hero-phone .hp-ico { width: 38px; height: 38px; border-radius: 999px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; flex: none; }
.hero-phone .hp-ico svg { width: 19px; height: 19px; }
.hero-phone .hp-txt { display: flex; flex-direction: column; line-height: 1.12; }
.hero-phone .hp-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.hero-phone .hp-txt b { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }

/* Credit pied de page (M8 — Social Influence). Ligne propre, discrete. */
.footer-credit { flex-basis: 100%; order: 3; font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.footer-credit a { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: #fff; }
.divider { height: 1px; background: var(--line); border: none; margin: 0; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1719px) {
  /* Mesuré : la nav FR complète (avec téléphone) ne tient dans la fenêtre qu'à
     partir de ~1708px. Sous ce seuil le téléphone se retire de la nav ; il
     reste bien visible dans le hero de chaque page et dans le tiroir mobile. */
  .nav-phone { display: none; }
}
@media (max-width: 1440px) {
  .nav { gap: 0.7rem; }
  .nav-cta { gap: 0.8rem; }
  .nav-link { padding-inline: 0.42em; }
}
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1140px) {
  /* La nav bilingue ne tient plus sur une ligne sous ~1150px : passage au
     tiroir mobile plus tôt (avant : 920px). */
  .nav-menu { display: none; }
  .burger { display: flex; }
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav-cta .btn:not(.btn-primary) { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-card { display: none; }
  /* On phones the header keeps only the brand and the burger; the primary CTA
     lives in the drawer as a full-width button, so hide it here to prevent the
     header row from overflowing the viewport. */
  .nav-cta .btn-primary { display: none; }
  /* Let grid and flex items shrink below their min-content so columns never
     exceed the viewport on the narrowest phones (no horizontal clipping). */
  .hero-grid > *, .grid > *, .steps, .step, .step > * { min-width: 0; }
  /* Allow long button labels to wrap on phones instead of forcing the row
     wider than the viewport (btn default is white-space: nowrap). */
  .btn { white-space: normal; }
  /* Hero accueil sur mobile : le H1 .display et le sur-titre .eyebrow ne doivent
     jamais dépasser la largeur du téléphone. On réduit l'échelle du titre et on
     autorise le sur-titre (inline-flex) à passer sur deux lignes. */
  .display { font-size: clamp(2rem, 7.2vw, 2.7rem); overflow-wrap: break-word; }
  .eyebrow { flex-wrap: wrap; max-width: 100%; }
}

/* ---------- Logo officiel DPS (chantier 1, phase 3) ---------- */
.brand-logo { height: 40px; width: auto; max-width: none; object-fit: contain; display: block; }
.site-header .brand-logo { height: 40px; }
.footer-logo-badge { display: inline-block; background: #fff; padding: 9px 14px; border-radius: 12px; line-height: 0; }
.footer-logo-badge .brand-logo { height: 46px; }
@media (max-width: 480px) {
  .site-header .brand-logo { height: 34px; }
}

/* ===================================================================== */
/* ROUND 3 — pastilles cliquables, callout taux, bloc 0,92 %, modale     */
/* ===================================================================== */

/* Astérisque crédit (R9) */
.ast { color: var(--green-600); font-weight: 700; }

/* Pastilles en boutons (R3) : reset + interactivité */
.chip { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; line-height: 1.1;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease); }
button.chip:hover { border-color: var(--green-500); background: var(--green-50); color: var(--ink); }
button.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.chip .ast { margin-left: 1px; }
/* 5e pastille : revendeur Clover certifié, légèrement mise en avant */
.chip.chip-cert { background: var(--green-50); border-color: var(--green-500); color: var(--green-600); font-weight: 700; }
button.chip.chip-cert:hover { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.chip.chip-cert .dot { background: var(--green-600); }
button.chip.chip-cert:hover .dot { background: #fff; }

/* Callout de taux (R3.1) : badge en haut à droite du hero média (desktop), statique en mobile */
.rate-callout { position: absolute; top: clamp(10px, 1.6vw, 18px); right: clamp(10px, 1.6vw, 18px); z-index: 4;
  display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--navy-700); color: #fff; padding: 0.66em 1.05em; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(7,23,38,0.30); border: 1px solid rgba(255,255,255,0.14);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.rate-callout:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(7,23,38,0.36); }
.rate-callout:focus-visible { outline: 2px solid var(--green-400); outline-offset: 2px; }
.rate-callout .rc-label { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-400); font-weight: 700; }
.rate-callout .rc-value { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.05; }
@media (max-width: 900px) {
  .rate-callout { position: static; margin: 0 auto 1rem; align-self: center; flex-direction: row; align-items: baseline; gap: 0.5em; box-shadow: 0 10px 24px rgba(7,23,38,0.22); }
}

/* Bloc 0,92 % en évidence (R3.3) */
.rate-highlight { display: grid; grid-template-columns: minmax(190px, 270px) 1fr; gap: clamp(22px, 4vw, 52px); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 46px); box-shadow: var(--shadow-sm); }
.rh-figure { display: flex; flex-direction: column; gap: 0.45rem; padding-right: clamp(14px, 2vw, 26px); border-right: 1px solid var(--line); }
.rh-num { font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 7.4vw, 5.2rem); line-height: 0.92; letter-spacing: -0.04em; color: var(--green-600); white-space: nowrap; }
.rh-num .rh-unit { font-size: 0.5em; }
.rh-cap { font-size: 0.82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3; }
.rh-body h2 { font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -0.02em; }
@media (max-width: 760px) {
  .rate-highlight { grid-template-columns: 1fr; }
  .rh-figure { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 1rem; flex-direction: row; align-items: baseline; gap: 0.6em; }
}

/* Note de conditions (R9) — ink-soft pour contraste WCAG AA (5,6:1 sur paper) */
.footnote { margin-top: 1.6rem; font-size: 0.82rem; color: var(--ink-soft); max-width: 72ch; line-height: 1.55; }

/* Mini-modale accessible (R3.2) */
.dps-modal-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(7,23,38,0.55); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .2s var(--ease), visibility 0s linear .2s; }
.dps-modal-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .2s var(--ease); }
.dps-modal { position: relative; background: var(--white); border-radius: var(--radius); max-width: 460px; width: 100%; padding: 1.9rem 1.9rem 1.7rem;
  box-shadow: var(--shadow-lg); transform: translateY(8px) scale(0.985); opacity: 0; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.dps-modal-overlay.open .dps-modal { transform: none; opacity: 1; }
.dps-modal h3 { font-size: 1.25rem; letter-spacing: -0.02em; padding-right: 2.2rem; }
.dps-modal p { margin-top: 0.85rem; color: var(--ink-soft); line-height: 1.6; }
.dps-modal .popup-cond { font-size: 0.88rem; color: var(--ink); background: var(--green-50); border-radius: 10px; padding: 0.8em 1em; }
.dps-modal .btn { margin-top: 1.2rem; }
.dps-modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--white); cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: background .15s var(--ease); }
.dps-modal-close:hover { background: var(--paper-2); }
.dps-modal-close:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dps-modal-overlay, .dps-modal { transition: opacity .01s; }
}

/* ================================================================
   ROUND 3 — Auphan
   Styles spécifiques à page-auphan.php.
   Ne pas modifier les sections précédentes.
   ================================================================ */

/* R4.1 — Bande logos clients Auphan
   ---------------------------------------------------------------- */
.auphan-trust-strip { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; text-align: center; }
.auphan-client-logos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  justify-content: center;
}
.auphan-client-logos img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.65);
  transition: filter .2s ease;
}
.auphan-client-logos img:hover { filter: grayscale(0) opacity(1); }
.auphan-client-logos img.logo-dark { filter: brightness(0.25) opacity(.65); }
.auphan-client-logos img.logo-dark:hover { filter: brightness(0.25) opacity(1); }

/* R4.4 — Grille appareils compatibles (5 cartes) */
.grid-auphan-devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
@media (max-width: 767px) { .grid-auphan-devices { grid-template-columns: 1fr; } }

/* R4.5 — Carrousel intégrations (marquee CSS pur)
   ---------------------------------------------------------------- */
.auphan-marquee-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* fondu latéral pour un rendu propre */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.auphan-marquee {
  display: flex;
  width: max-content;
  animation: auphan-scroll 45s linear infinite;
}
.auphan-marquee:hover { animation-play-state: paused; }
.auphan-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.2rem);
  padding-inline: clamp(1rem, 2vw, 2rem);
  flex-shrink: 0;
}
.auphan-marquee-track img {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
  flex-shrink: 0;
  transition: filter .2s ease;
}
.auphan-marquee-track img:hover { filter: grayscale(0) opacity(1); }

@keyframes auphan-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* prefers-reduced-motion : bande statique scrollable horizontalement */
@media (prefers-reduced-motion: reduce) {
  .auphan-marquee {
    animation: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .auphan-marquee-track:last-child { display: none; } /* retire le doublon */
}

/* R4.6 — Cartes secteurs sans icone : ajustement espacement haut */
.card.auphan-card-noico { padding-top: clamp(1.2rem, 2.5vw, 1.8rem); }

/* ================================================================
   Fin du bloc ROUND 3 — Auphan
   ================================================================ */

/* ================================================================
   ROUND 3 — Contenu d'article de blogue (single.php)
   ================================================================ */
.entry-content h2 { margin-top: 2.4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.entry-content h3 { margin-top: 1.8rem; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.entry-content p { margin-top: 1rem; }
.entry-content a { color: var(--green-600); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--green-500); }
.entry-content strong { color: var(--ink); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.7rem 0; font-size: 0.96rem; border: 1px solid var(--line); background: var(--white); }
.entry-content thead th { background: var(--green-50); color: var(--ink); font-weight: 700; }
.entry-content th, .entry-content td { text-align: left; padding: 0.7em 0.95em; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry-content th + th, .entry-content td + td { border-left: 1px solid var(--line-2); }
.entry-content tbody tr:last-child td { border-bottom: none; }
.entry-content table strong { color: var(--green-600); }
/* M1 — tables d'article : les cellules s'enroulent pour tenir sur mobile ;
   .table-scroll (ajoute par site.js) sert de filet pour les tables vraiment larges. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.7rem 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.table-scroll > table { margin: 0; border: 0; }
@media (max-width: 600px) {
  .entry-content table { font-size: 0.9rem; }
  .entry-content th, .entry-content td { padding: 0.55em 0.6em; }
}

/* ===================================================================== */
/* Badge Avis Google (note réelle de la fiche, attribuée + cliquable)    */
/* ===================================================================== */
.google-reviews-badge {
	display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none;
	background: var(--white); border: 1px solid var(--line); border-radius: 999px;
	padding: 0.55em 1.05em; box-shadow: var(--shadow-sm); color: var(--ink);
	transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.google-reviews-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--green-500); }
.google-reviews-badge:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.grb-stars { display: inline-flex; gap: 1px; }
.grb-stars svg { width: 17px; height: 17px; fill: #f5a623; }
.grb-text { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.grb-text b { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.02rem; margin-right: 0.15em; }
.grb-count { color: var(--ink-faint); font-weight: 600; }
.grb-arrow svg { width: 15px; height: 15px; color: var(--green-600); }
.google-reviews-badge.on-dark { background: rgba(255,255,255,0.08); border-color: var(--line-on-dark); color: #fff; }
.google-reviews-badge.on-dark .grb-text { color: rgba(255,255,255,0.9); }
.google-reviews-badge.on-dark .grb-text b { color: #fff; }
.google-reviews-badge.on-dark .grb-count { color: rgba(255,255,255,0.65); }
.google-reviews-badge.on-dark .grb-arrow svg { color: var(--green-400); }

/* ===================================================================== */
/* M1 — cibles tactiles mobiles >= 44px (chips, liens du pied de page)    */
/* ===================================================================== */
@media (max-width: 560px) {
  .chip { min-height: 44px; }
  .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .fb-links { row-gap: 0.2rem; }
  .fb-links a, .footer-credit a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =====================================================================
   ROUND 5 — corrections ciblées (C18, C7, C4, C6, C19, C25)
   Bloc additif en fin de feuille : surcharge propre, rien de cassé en amont.
   ===================================================================== */

/* C18 — retrait des icônes décoratives (réversible : il suffit de retirer ce
   bloc pour les rétablir). Cibles : pastilles d'icône des cartes (.card-ico) et
   icônes des menus déroulants (.d-ico). On conserve toutes les affordances de
   navigation (caret du menu, hamburger, flèches de lien, icône téléphone). */
.card-ico,
.dropdown .d-ico,
.float-card .fc-ico,
.dps-force-card .ico { display: none !important; }
/* Le menu déroulant reste aligné une fois l'icône retirée. */
.dropdown a { gap: 0; }
/* Cartes flottantes du hero : sans la pastille, le texte reste bien centré. */
.float-card { gap: 0; }

/* C7 — crédit « Social Influence » dans sa couleur de marque (violet).
   Lavande #A78BFA sur le pied de page #071726 : contraste ~7.5:1 (WCAG AA franc). */
.footer-credit a { color: #A78BFA; font-weight: 600; text-decoration: none; }
.footer-credit a:hover,
.footer-credit a:focus-visible { color: #C4B5FD; text-decoration: underline; }

/* C4 / C25 — un nombre ne se sépare jamais de son symbole ou de son astérisque. */
.nowrap { white-space: nowrap; }
.ast { white-space: nowrap; }

/* C6 — marquee « Intégrations Auphan » : s'affiche correctement dès le
   chargement, sans dépendre d'un survol. On sort le conteneur de l'état initial
   masqué de .reveal (le mouvement vient déjà du défilement du marquee) et on
   stabilise la composition GPU pour éviter le repaint déclenché au survol. */
.auphan-marquee-wrap.reveal { opacity: 1; transform: none; transition: none; }
.auphan-marquee { will-change: transform; backface-visibility: hidden; }

/* C19 — rangées de boutons CTA toujours horizontales sur desktop, repli propre
   en colonne uniquement sur très petit écran. (.btn-row est déjà flex ; on le
   verrouille et on neutralise tout .btn-block parasite hérité dans une .btn-row.) */
.btn-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.btn-row .btn { width: auto; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* C2/C3 mev-web alignement ----------------------------------------
   C2 : section penalites (band-dark)
        - pastille on-dark rendue visible sur fond sombre
        - gap uniforme entre items (override style inline supprime)
   C3 : card Clover - deux items certifies MEV-WEB bien alignes

   Technique : chaque <li> passe de flex en grid 2 colonnes fixes
   (22px pastille | 1fr texte). Le 1fr force le texte a se contraindre
   dans sa colonne quelle que soit la longueur, elimine tout debordement
   ou decalage de hauteur entre items. Compatibilite : tous navigateurs
   modernes (grid support > 97 %). L'alignement mobile (1 colonne) est
   deja assure par les regles existantes.
------------------------------------------------------------------ */

/* Pastille de coche rendue visible sur fond sombre */
.checks.on-dark li::before {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2366d9a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Chaque item = grille 2 colonnes : pastille fixe + texte fluide */
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.7rem;
  align-items: start;
}

/* La pastille ::before reste dans sa colonne de 22px */
.checks li::before {
  grid-column: 1;
  grid-row: 1;
  /* margin-top deja defini dans la regle originale */
}

/* Gap uniforme dans la section penalites (dark) */
.band-dark .checks.on-dark {
  gap: 1rem;
}

/* Mobile : largeur pleine garantie */
@media (max-width: 768px) {
  .checks { width: 100%; }
}

/* ===== Round 6 : badge Clover Certified Dealer (C13) ===== */
.nav-cert-badge{height:42px;width:42px;border-radius:8px;flex:none;display:block;overflow:hidden;}
@media(max-width:1240px){.nav-cert-badge{display:none;}}
.hero-cert-badge{height:92px;width:92px;border-radius:12px;display:block;overflow:hidden;}

/* ===== Round 6 : la nav tient sur UNE ligne entre 1025 et 1560 px
   (onglet Financement + badge Certified Dealer ajoutes). ===== */
@media (max-width: 1560px) and (min-width: 1025px) {
  .nav { gap: 0.7rem; }
  .nav-link { font-size: 0.88rem; padding: 0.5em 0.42em; }
  .nav-cta { gap: 0.7rem; }
  .nav-phone .np-label { display: none; }
  .nav-cta .btn { padding-inline: 1em; font-size: 0.88rem; }
}
@media (max-width: 1180px) and (min-width: 1025px) {
  .nav-phone { display: none; }
}

/* ===== Round 7 : navigation des catégories du blog (C7) ===== */
.blog-cats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 2.2rem; }
.blog-cat {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--white);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.blog-cat:hover { border-color: var(--ink); color: var(--ink); }
.blog-cat.is-active { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
@media (max-width: 520px) { .blog-cat { font-size: 0.74rem; padding: 0.5rem 0.72rem; } }

/* ===== Round 7 : page auteur, E-E-A-T (C6) ===== */
.author-head {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
}
.author-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.author-role { margin: 0; }
.author-head { margin-top: 0; }
.author-head + .section { margin-top: 0; }
@media (max-width: 680px) {
  .author-head { grid-template-columns: 1fr; align-items: start; }
  .author-photo { max-width: 300px; }
}
body.author .page-hero { padding-block: 30px; }

/* ===== Sélecteur de langue FR/EN (bilingue, header + tiroir mobile) =====
   Compact en permanence : la nav FR est déjà pleine, chaque pixel compte. Le
   badge revendeur de la nav est retiré (il est affiché en grand dans le hero). */
.lang-switch { display:inline-flex; align-items:center; gap:0.1rem; font-size:0.78rem; font-weight:700; letter-spacing:0.02em; }
.lang-switch .ls-opt { color:var(--ink-soft); text-decoration:none; padding:0.25rem 0.22rem; border-radius:6px; line-height:1; }
.lang-switch a.ls-opt:hover { color:var(--green-600); background:rgba(10, 143, 82, 0.08); }
.lang-switch .ls-opt.is-active { color:var(--ink); }
.lang-switch .ls-sep { display:none; }
.nav-cta .nav-cert-badge { display:none; }
.mobile-nav .lang-switch { margin-top:1rem; width:100%; justify-content:center; font-size:1rem; }