/* =========================================================================
   Levain — Feuille de style partagée
   Basée sur design-system.md (palette hex exacte, typo, motion)
   ========================================================================= */

:root {
  /* Couleurs */
  --croute: #C88A3A;        /* Croûte dorée — primaire */
  --pain-brule: #8A4B1E;    /* Pain brûlé — primaire foncé */
  --creme: #F4E9D6;         /* Farine crème — secondaire */
  --kraft: #E3CFAF;         /* Kraft — secondaire papier */
  --rouge-tampon: #C13B2A;  /* Rouge tampon — accent / sceau */
  --encre: #2A211A;         /* Encre four — texte / fonds sombres */
  --mie: #6B5D4F;           /* Mie — texte secondaire */
  --ligne: #D8C7AC;         /* Poussière de farine — bordures */
  --lait: #FDFBF6;          /* Lait — fond global (jamais blanc pur) */
  --succes: #5E7A3D;        /* Levain actif */
  --attention: #D89A2E;     /* Grigne */
  --erreur: #A82A1C;        /* Braise */
  --info: #4A6670;          /* Ardoise */

  /* Type */
  --font-title: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  /* Layout / motion */
  --container: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-warm: 0 12px 32px rgba(138, 75, 30, .10);
  --ease-levain: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 300ms;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (max-width: 860px) { html { scroll-padding-top: 76px; } }
html, body { overflow-x: hidden; }   /* garde-fou anti-scroll horizontal */
body {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  color: var(--encre);
  background-color: var(--lait);
  /* Grain papier kraft en overlay très léger */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--pain-brule); }
button { font: inherit; cursor: pointer; }

/* ---------- Focus visible (accessibilité) ---------- */
:focus-visible {
  outline: 3px solid var(--rouge-tampon);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--encre);
  color: var(--lait);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur) var(--ease-levain);
}
.skip-link:focus { top: 16px; }

/* =========================================================================
   Typographie
   ========================================================================= */
h1, h2, h3, .display {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 .5em;
  color: var(--encre);
}
h1, h2, .display {
  font-variation-settings: "opsz" 120, "SOFT" 60, "WONK" 1;
}
.display {
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);   /* jusqu'à 72px */
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
h1 {
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);  /* 52px */
}
h2 {
  font-weight: 600;
  font-size: clamp(1.85rem, 3.5vw, 2.25rem); /* 36px */
}
h3 {
  font-weight: 600;
  font-size: 1.625rem;   /* 26px */
  font-variation-settings: "opsz" 40, "SOFT" 40;
}
p { margin: 0 0 1rem; }
em { font-style: italic; }

/* Mot clé en italique Fraunces Croûte dorée */
.accent-em {
  font-family: var(--font-title);
  font-style: italic;
  color: var(--croute);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}

.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;   /* micro 13px */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pain-brule);
  margin: 0 0 20px;
}

.body-lg { font-size: 1.25rem; line-height: 1.55; color: var(--mie); }
.small   { font-size: 0.9375rem; }
.micro   { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; }
.muted   { color: var(--mie); }

/* Le « 8 % » et chiffres clés soulignés d'un trait doré */
.hl {
  background-image: linear-gradient(var(--croute), var(--croute));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.18em;
  padding-bottom: 0.02em;
  font-weight: 600;
}

.stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 3.5rem);  /* 56px */
  color: var(--croute);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Sceau Rouge tampon */
.seal {
  display: inline-block;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 500;
  color: var(--rouge-tampon);
  font-size: 1.0625rem;
  padding: 6px 2px;
  position: relative;
}
.seal::before { content: "— "; opacity: .6; }

/* =========================================================================
   Layout
   ========================================================================= */
.container {
  max-width: var(--container);
  margin-inline: auto;
  /* Gouttières confortables + prise en compte de l'encoche (safe-area) */
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
@media (min-width: 768px) {
  .container {
    padding-left: max(48px, env(safe-area-inset-left));
    padding-right: max(48px, env(safe-area-inset-right));
  }
}

section { padding-block: 64px; }
@media (min-width: 768px) {
  section { padding-block: 96px; }
}

.section-lead { max-width: 62ch; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Séparateur festonné « ticket » */
.ticket-edge {
  height: 16px;
  background:
    radial-gradient(circle at 12px 0, transparent 12px, var(--kraft) 12px) 0 0 / 24px 16px repeat-x;
  border: 0;
  margin: 0;
}
.ticket-edge.on-creme {
  background:
    radial-gradient(circle at 12px 0, transparent 12px, var(--creme) 12px) 0 0 / 24px 16px repeat-x;
}

/* =========================================================================
   Navigation
   ========================================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 251, 246, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-levain), box-shadow var(--dur) var(--ease-levain);
}
.nav.scrolled {
  border-bottom-color: var(--ligne);
  box-shadow: 0 4px 20px rgba(138, 75, 30, .05);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 80, "SOFT" 60, "WONK" 1;
}
.wordmark .logo-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: block;
}
.wordmark .logo-mark .grain { fill: var(--croute); }
.wordmark .logo-mark .stalk { stroke: var(--pain-brule); }

/* Séparation nette navigation / CTA */
.nav__group {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-right: 28px;
  border-right: 1px solid var(--ligne);
}
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: var(--croute);
  transition: width var(--dur) var(--ease-levain);
}
.nav__links a:not(.btn):hover::after,
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--pain-brule); }

.nav__toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--encre);
  align-items: center;
  justify-content: center;
}
.nav__toggle svg { display: block; }
/* Icônes hamburger / croix : on n'affiche que la bonne selon l'état.
   Sélecteurs descendants pour passer devant `.nav__toggle svg`. */
.nav__toggle .nav__toggle-icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--close { display: block; }

/* Éléments réservés au tiroir mobile : masqués en desktop */
.nav__group-label,
.nav__cta-note,
.nav__overlay { display: none; }

.nav__cta { flex: 0 0 auto; }

/* =========================================================================
   Menu mobile — tiroir off-canvas (logo + kebab uniquement dans la barre)
   ========================================================================= */
@media (max-width: 860px) {
  /* Barre épurée : logo à gauche, bouton menu à droite, rien d'autre */
  .nav__inner { min-height: 64px; gap: 12px; }
  /* La barre reste au-dessus du tiroir : le bouton kebab devient la croix de fermeture */
  /* IMPORTANT : `backdrop-filter` sur .nav ferait de la barre le bloc conteneur des
     descendants `position: fixed` (tiroir + voile), qui seraient alors bornés à la
     hauteur du header au lieu du viewport. On le neutralise sur mobile et on rend la
     barre opaque pour conserver la lisibilité sans le flou. */
  .nav {
    z-index: 130;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--lait);
  }
  .nav__toggle { display: inline-flex; position: relative; z-index: 131; background: var(--lait); }

  /* Voile d'assombrissement derrière le panneau */
  .nav__overlay {
    display: block;
    position: fixed;
    /* respecte l'attribut [hidden] posé par le JS quand le menu est fermé */
  }
  .nav__overlay[hidden] { display: none; }
  .nav__overlay {
    inset: 0;
    background: rgba(42, 33, 26, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-levain), visibility var(--dur) var(--ease-levain);
    z-index: 110;
  }
  .nav__overlay.open { opacity: 1; visibility: visible; }

  /* Panneau off-canvas latéral, plein hauteur */
  .nav__group {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--lait);
    border-left: 1px solid var(--ligne);
    box-shadow: -12px 0 40px rgba(42, 33, 26, 0.18);
    padding: 24px 24px calc(28px + env(safe-area-inset-bottom));
    padding-right: calc(24px + env(safe-area-inset-right));
    z-index: 120;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;              /* hors du flux de tabulation quand fermé */
    transition: transform var(--dur) var(--ease-levain), visibility var(--dur) var(--ease-levain);
    /* Décale le contenu sous la barre (qui reste visible avec la croix) */
    padding-top: calc(64px + env(safe-area-inset-top) + 12px);
  }
  .nav__group.open { transform: translateX(0); visibility: visible; }

  .nav__group-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mie);
    margin: 4px 0 20px;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-right: 0;
    border-right: 0;
    width: 100%;
  }
  .nav__links li { width: 100%; }
  .nav__links a:not(.btn) {
    padding: 16px 0;
    min-height: 44px;
    border-bottom: 1px solid var(--ligne);
    display: flex;
    align-items: center;
    font-size: 1.125rem;
  }
  .nav__links a:not(.btn)::after { display: none; }

  .nav__cta { width: 100%; margin-top: auto; padding-top: 24px; }
  .nav__cta .btn { display: block; width: 100%; text-align: center; padding: 15px 20px; }
  .nav__cta-note {
    display: block;
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--mie);
  }

  /* Verrou de scroll du body quand le menu est ouvert */
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__group, .nav__overlay { transition: none; }
}

/* =========================================================================
   Boutons
   ========================================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 32px;
  transition: transform var(--dur) var(--ease-levain),
              background-color var(--dur) var(--ease-levain),
              color var(--dur) var(--ease-levain),
              box-shadow var(--dur) var(--ease-levain);
  line-height: 1.2;
}
.btn--primary {
  background: var(--croute);
  color: var(--encre);
  border-bottom: 2px solid var(--pain-brule);  /* liseré croûte */
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--pain-brule);
  color: var(--lait);
  transform: translateY(-2px);
  box-shadow: var(--shadow-warm);
}
.btn--secondary {
  background: transparent;
  border: 1.5px solid var(--pain-brule);
  color: var(--pain-brule);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--creme);
  transform: translateY(-2px);
}
.btn--compact { padding: 11px 20px; font-size: 1rem; }
.btn--block { display: block; width: 100%; text-align: center; }

/* Lien-sceau : trait ondulé */
.link-wavy {
  color: var(--pain-brule);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--croute);
  text-underline-offset: 4px;
}
.link-wavy:hover { color: var(--rouge-tampon); text-decoration-color: var(--rouge-tampon); }

/* =========================================================================
   Cartes
   ========================================================================= */
.card {
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 32px;
}
.card--lait { background: var(--lait); }

.card__icon {
  color: var(--croute);
  margin-bottom: 16px;
}
.card__icon svg { width: 40px; height: 40px; }

.card h3 { margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }

/* Carte chiffre */
.stat-card { text-align: center; }
.stat-card .stat { display: block; margin-bottom: 12px; }
.stat-card .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mie);
  line-height: 1.4;
}

/* Carte preuve / témoignage */
.quote-card { position: relative; }
.quote-card .badge-neg {
  position: absolute;
  top: -14px; right: 20px;
}
.quote-card blockquote {
  margin: 0 0 20px;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--encre);
  font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 1;
}
.quote-card figcaption {
  font-size: 0.9375rem;
  color: var(--mie);
}
.quote-card figcaption strong { color: var(--pain-brule); font-weight: 600; }

/* Auteur du témoignage : monogramme + identité */
.quote-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.quote-card__id {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.quote-card__id strong { display: block; }
.quote-card__role {
  font-size: 0.8125rem;
  color: var(--mie);
}

/* Avatar monogramme (initiales, pas d'image) */
.avatar-mono {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--creme);
  border: 1px solid var(--ligne);
  color: var(--pain-brule);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 1;
}
.card--lait .avatar-mono,
.quote-card .avatar-mono { background: var(--lait); }

/* =========================================================================
   Bande de réassurance (sous le hero)
   ========================================================================= */
.reassure-strip {
  background: var(--kraft);
  border-bottom: 1px solid var(--ligne);
  padding-block: 28px;
}
.reassure-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
  text-align: center;
}
@media (min-width: 720px) {
  .reassure-strip__list { grid-template-columns: repeat(4, 1fr); }
}
.reassure-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
@media (min-width: 720px) {
  .reassure-strip__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 40px;
    background: var(--ligne);
  }
}
.reassure-strip__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--pain-brule);
  letter-spacing: -0.02em;
}
.reassure-strip__unit {
  font-size: 1.05rem;
  color: var(--mie);
}
.reassure-strip__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--mie);
  line-height: 1.35;
  max-width: 22ch;
}
.reassure-strip__note {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: .04em;
  color: var(--mie);
  opacity: .8;
}

/* Badge rond « NÉGOCIÉ » */
.badge-neg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--rouge-tampon);
  color: var(--lait);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-12deg);
  box-shadow: 0 4px 12px rgba(193, 59, 42, .25);
  border: 2px solid rgba(253, 251, 246, .35);
}

/* =========================================================================
   Grilles utilitaires
   ========================================================================= */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   Héros
   ========================================================================= */
.hero {
  background: var(--creme);
  border-bottom: 1px solid var(--ligne);
}
.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 64px; }
}
.hero__copy { max-width: 40ch; }
.hero-cta { margin-top: 32px; }
.hero-cta .reassurance {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--mie);
  max-width: 42ch;
}
.hero-seal { margin-top: 28px; }

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ligne);
  opacity: .75;
}
.trust-bar span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mie);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trust-bar span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--croute);
}

/* Visuel héros — carte « facture négociée » (linogravure/tampon) */
.hero__visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0DCB8, var(--kraft));
  display: grid;
  place-items: center;
  border: 1px solid var(--ligne);
  box-shadow: var(--shadow-warm);
  overflow: hidden;
}
.hero__visual .invoice {
  background: var(--lait);
  width: 74%;
  border-radius: var(--radius);
  border: 1px solid var(--ligne);
  padding: 22px 24px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 26px rgba(138,75,30,.14);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--encre);
}
.hero__visual .invoice .inv-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--ligne);
}
.hero__visual .invoice .inv-row:last-child { border-bottom: 0; }
.hero__visual .invoice .old { color: var(--mie); text-decoration: line-through; }
.hero__visual .invoice .new { color: var(--succes); font-weight: 500; }
.hero__visual .invoice .inv-title {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .625rem;
  color: var(--mie);
  margin-bottom: 10px;
}
.hero__visual .badge-neg {
  position: absolute;
  bottom: 14%;
  right: 12%;
  width: 84px; height: 84px;
  font-size: .72rem;
}

/* =========================================================================
   Bandeau douleur (Kraft)
   ========================================================================= */
.band-kraft { background: var(--kraft); }
.band-kraft .pain-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 820px) {
  .band-kraft .pain-grid { grid-template-columns: 3fr 2fr; }
}
.pain-chart {
  border: 1px solid var(--pain-brule);
  border-radius: var(--radius);
  background: rgba(253,251,246,.5);
  padding: 24px;
}
.pain-chart svg { width: 100%; height: auto; }

/* =========================================================================
   Bandeau transparence (Encre four)
   ========================================================================= */
.band-encre {
  background: var(--encre);
  color: var(--lait);
}
.band-encre h2, .band-encre h3 { color: var(--lait); }
.band-encre .muted, .band-encre p { color: #C9BCAC; }
.band-encre .stat { color: var(--croute); }
.band-encre .hl { color: var(--lait); }

.compare {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 720px) {
  .compare { grid-template-columns: 1fr 1fr; }
}
.compare__col {
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
}
.compare__col--bad {
  background: rgba(168,42,28,.12);
  border: 1px solid rgba(193,59,42,.4);
}
.compare__col--bad .compare__head { color: #E0A79E; }
.compare__col--good {
  background: rgba(94,122,61,.14);
  border: 1px solid rgba(94,122,61,.5);
}
.compare__col--good .compare__head { color: #B8CC97; }
.compare__head {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8125rem;
  margin-bottom: 16px;
}
.compare__col ul { list-style: none; margin: 0; padding: 0; }
.compare__col li {
  padding: 8px 0 8px 26px;
  position: relative;
  color: var(--lait);
}
.compare__col--bad li { color: #D8CABB; text-decoration: line-through; text-decoration-color: rgba(193,59,42,.6); }
.compare__col li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 12px; height: 12px;
  border-radius: 3px;
}
.compare__col--bad li::before { background: var(--rouge-tampon); }
.compare__col--good li::before { background: var(--succes); }
.compare__col--good .badge-neg { position: absolute; top: -16px; right: 20px; }

/* =========================================================================
   Tableau comparatif (offre)
   ========================================================================= */
/* Conteneur à défilement horizontal pour le tableau sur petit écran */
.table-scroll {
  margin-top: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.table-scroll .compare-table { margin-top: 0; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  font-size: 1rem;
  background: var(--lait);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ligne);
}
.compare-table th, .compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--ligne);
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8125rem;
  background: var(--creme);
}
.compare-table thead th:last-child { color: var(--pain-brule); }
.compare-table tbody th {
  font-weight: 600;
  color: var(--mie);
  width: 32%;
}
.compare-table td:last-child { font-weight: 600; color: var(--pain-brule); }
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) {
  .compare-table { font-size: .9375rem; min-width: 520px; }
  .compare-table th, .compare-table td { padding: 12px 12px; }
  .table-scroll { border: 1px solid var(--ligne); }
}

/* =========================================================================
   Étapes / timeline
   ========================================================================= */
.steps { display: grid; gap: 24px; }
.step {
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 28px 28px 28px 32px;
  position: relative;
}
.step__num {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--croute);
  font-size: 1.125rem;
  letter-spacing: .04em;
}
.step h3 { margin-top: 6px; }

/* =========================================================================
   FAQ (accordéon)
   ========================================================================= */
.faq { max-width: 780px; }
.faq__item {
  border-bottom: 1px solid var(--ligne);
}
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 24px 40px 24px 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--encre);
  position: relative;
  display: block;
  font-variation-settings: "opsz" 40, "SOFT" 40;
}
.faq__q::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--croute);
  transition: transform var(--dur) var(--ease-levain);
}
.faq__q[aria-expanded="true"]::after { content: "–"; }
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease-levain);
}
.faq__a > div { padding: 0 0 24px; color: var(--mie); }
.faq__a p:last-child { margin-bottom: 0; }

/* =========================================================================
   Encadré rassurance
   ========================================================================= */
.reassure-box {
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--succes);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-top: 40px;
}
.reassure-box strong { color: var(--succes); }

/* =========================================================================
   CTA final
   ========================================================================= */
.cta-final { background: var(--creme); text-align: center; }
.cta-final .container { max-width: 760px; }
.cta-final .reassurance { margin-top: 20px; }
.cta-final .contact-line {
  margin-top: 20px;
  font-size: 1.0625rem;
  color: var(--mie);
}
.cta-final .contact-line a { font-weight: 600; }

/* =========================================================================
   Formulaire (estimer)
   ========================================================================= */
.form-hero { background: var(--creme); border-bottom: 1px solid var(--ligne); }
.form-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) {
  .form-grid { grid-template-columns: 5fr 6fr; gap: 56px; }
}
.reassure-list { list-style: none; margin: 24px 0 0; padding: 0; }
.reassure-list li {
  padding: 8px 0 8px 34px;
  position: relative;
  color: var(--encre);
}
.reassure-list li svg {
  position: absolute;
  left: 0; top: 10px;
  width: 22px; height: 22px;
  color: var(--succes);
}

.form-card {
  background: var(--lait);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-warm);
}
.form-card h3 { margin-bottom: 4px; }
.form-card .form-note { color: var(--mie); font-size: .9375rem; margin-bottom: 24px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: 6px;
  color: var(--encre);
}
.field .req { color: var(--rouge-tampon); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-sm);
  background: var(--lait);
  color: var(--encre);
  transition: border-color var(--dur) var(--ease-levain), box-shadow var(--dur) var(--ease-levain);
}
.field textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--croute);
  box-shadow: 0 0 0 3px rgba(200,138,58,.2);
}

/* Consentement RGPD */
.field--consent { margin-top: 4px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  font-size: .9375rem;
  color: var(--mie);
  line-height: 1.5;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--croute);
  cursor: pointer;
}
.consent a { color: var(--pain-brule); font-weight: 600; }
.field input:invalid:not(:placeholder-shown) { border-color: var(--erreur); }
.field .hint { font-size: .8125rem; color: var(--mie); margin-top: 4px; }

.row-2 { display: grid; gap: 18px; }
@media (min-width: 480px) { .row-2 { grid-template-columns: 1fr 1fr; } }

/* Champ upload mis en avant */
.upload {
  border: 2px dashed var(--croute);
  border-radius: var(--radius);
  background: var(--creme);
  padding: 24px;
  text-align: center;
  transition: background var(--dur) var(--ease-levain), border-color var(--dur) var(--ease-levain);
  cursor: pointer;
  display: block;
}
.upload:hover, .upload:focus-within { background: #F0E4CE; border-color: var(--pain-brule); }
.upload svg { width: 34px; height: 34px; color: var(--pain-brule); margin-bottom: 8px; }
.upload .upload-title { font-weight: 600; color: var(--encre); }
.upload .upload-sub { font-size: .875rem; color: var(--mie); }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload .file-name { display:block; margin-top: 8px; font-family: var(--font-mono); font-size: .8125rem; color: var(--succes); }

.form-submit { margin-top: 8px; }
.form-microcopy { font-size: .9375rem; color: var(--mie); margin-top: 12px; text-align: center; }

/* État de confirmation */
.confirm {
  display: none;
  text-align: center;
  padding: 8px 4px;
}
.confirm.show { display: block; }
.confirm .check-round {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--succes);
  color: var(--lait);
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.confirm .check-round svg { width: 34px; height: 34px; }

/* Mini rappel confiance sous formulaire */
.mini-trust { text-align: center; }
.mini-trust .stat { font-size: 2.5rem; }
.mini-trust .label { font-size: .875rem; text-transform: none; letter-spacing: normal; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  background: var(--encre);
  color: #C9BCAC;
  padding-block: 64px 40px;
}
.footer a { color: #D8CABB; text-decoration: none; }
.footer a:hover { color: var(--croute); }
.footer__top {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
}
.footer .wordmark { color: var(--lait); }
.footer .wordmark .grain { fill: var(--croute); }
.footer .wordmark .stalk { stroke: var(--croute); }
.footer .footer__baseline {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.125rem;
  color: #C9BCAC;
  margin-top: 12px;
  max-width: 34ch;
  font-variation-settings: "opsz" 40, "SOFT" 60;
}
.footer h4 {
  font-family: var(--font-body);
  color: var(--lait);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 10px; }
.footer__legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(216,199,172,.2);
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
}
.footer__transp {
  margin-top: 16px;
  font-size: .875rem;
  color: #A99B8B;
  max-width: 70ch;
}
.footer__transp .hl { color: var(--croute); background-image: linear-gradient(var(--croute),var(--croute)); }

/* =========================================================================
   Motion / reveal
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-levain), transform var(--dur) var(--ease-levain);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
  .reveal { transition: opacity var(--dur) ease; transform: none; }
  .btn:hover, .btn:focus-visible { transform: none; }
}

/* =========================================================================
   Pages légales
   ========================================================================= */
.legal-hero { background: var(--creme); border-bottom: 1px solid var(--ligne); }
.legal-hero .container { max-width: 820px; }
.legal { padding-block: 64px 96px; }
.legal .container { max-width: 820px; }
.legal .prose h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ligne);
}
.legal .prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal .prose h3 { font-size: 1.25rem; margin-top: 32px; }
.legal .prose p, .legal .prose li { color: var(--encre); }
.legal .prose ul { padding-left: 22px; }
.legal .prose li { margin-bottom: 8px; }
.legal .prose code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--pain-brule);
}
.legal .legal-note {
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--attention);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: .9375rem;
  color: var(--mie);
}
.legal .legal-note p:last-child { margin-bottom: 0; }

/* Petites utilités */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.lead-block { max-width: 720px; }
.lead-block.center { margin-inline: auto; }

/* =========================================================================
   RESPONSIVE MOBILE — corrections dédiées petits écrans (~360 / 390 / 768)
   Ne touche pas au rendu desktop (règles sous max-width uniquement).
   ========================================================================= */

/* ---- ≤ 768px : empilement, typo hero, illustrations décoratives ---- */
@media (max-width: 768px) {
  /* Espacements verticaux resserrés mais confortables */
  section { padding-block: 52px; }

  /* Hero : réduire la typo XXL pour rester lisible sans déborder */
  .display { font-size: clamp(2.1rem, 8.5vw, 2.9rem); line-height: 1.08; }
  h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.55rem, 5.5vw, 1.9rem); }
  .body-lg { font-size: 1.125rem; }
  .hero__copy { max-width: none; }

  /* Le <br> forcé du hero peut créer des veuves : on laisse le flux gérer */
  .display br { display: none; }

  /* SIMPLIFIER le visuel héros : on retire le grand cercle décoratif
     (gradient + rotation + badge) et on garde seulement la facture,
     à plat, lisible — plus léger et sans casse de mise en page. */
  .hero__visual {
    aspect-ratio: auto;
    border-radius: var(--radius);
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    display: block;
    max-width: 340px;
    margin-inline: auto;
  }
  .hero__visual .invoice {
    width: 100%;
    transform: none;              /* plus de rotation qui déborde */
    box-shadow: var(--shadow-warm);
  }
  .hero__visual .badge-neg {
    position: static;
    width: 62px; height: 62px;
    margin: 16px auto 0;
    font-size: .625rem;
  }

  /* MASQUER l'illustration linogravure purement décorative de offre.html
     (épis de blé + compteur) : aucune info, allège la page. */
  .pain-chart--deco { display: none; }

  /* La courbe « +84 % » (index) reste : elle porte une info. On la resserre. */
  .pain-chart { padding: 18px; }

  /* Badges « négocié » : éviter tout débordement horizontal */
  .badge-neg { transform: rotate(-8deg); }
  .quote-card .badge-neg { right: 16px; top: -12px; }

  /* Cartes un peu moins « padding » pour gagner de la place utile */
  .card { padding: 24px; }

  /* Comparatif transparence : colonnes empilées déjà gérées, on ajuste le badge */
  .compare__col--good .badge-neg { right: 16px; }

  /* Grand « 8 % » de la carte transparence (offre) : plafonné sur mobile
     (!important pour battre le font-size inline de la page) */
  .band-encre .stat-card .stat { font-size: 3.75rem !important; }

  /* Boutons pleine largeur dans le hero pour un pouce confortable */
  .hero-cta .btn { display: block; width: 100%; text-align: center; }

  /* Cibles tactiles : le bouton compact repasse ≥ 44px */
  .btn--compact { padding: 13px 20px; }

  /* Trust-bar plus aérée */
  .trust-bar { gap: 10px 18px; margin-top: 28px; }

  /* Footer : cibles tactiles des listes de liens.
     Les colonnes sont déjà empilées sous 760px, mais chaque lien ne
     faisait que 20px de haut (+10px de marge = 30px de pas) : trop
     serré au pouce. On passe à ≥ 44px par lien, marge de li absorbée. */
  .footer ul li { margin-bottom: 0; }
  .footer ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* L'intitulé de colonne se rapproche : la hauteur de cible aère déjà */
  .footer h4 { margin-bottom: 8px; }

  /* Liens légaux du bas (· séparés) : zone de tap élargie sans casser
     la ligne. Le <a> reste inline-block pour garder les séparateurs. */
  .footer__legal a { display: inline-block; padding-block: 12px; }
}

/* ---- ≤ 480px (360/390) : réglages fins ---- */
@media (max-width: 480px) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Le grand « 8 % » inline (offre) : éviter qu'il pousse la largeur */
  .band-encre .stat[style],
  .band-encre .stat { font-size: 3.25rem !important; }
  .mini-trust .stat { font-size: 2.25rem; }

  /* Wordmark : garde le logo mais réduit un poil le libellé */
  .wordmark { font-size: 1.3rem; }
  .nav__inner { gap: 12px; }

  /* FAQ : question lisible sans coller le +/– */
  .faq__q { font-size: 1.0625rem; padding-right: 36px; }

  /* Séparateurs festonnés : ok, mais on évite qu'ils débordent */
  .ticket-edge { background-size: 20px 14px; height: 14px; }

  /* Footer : légal empilé proprement */
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 6px; }
}