/* ═══════════════════════════════════════════════════════════════════
   Yukibuy — thème « Galerie » (référence Apple)
   Canvas blanc, bandes #f5f5f7, cartes blanches 28 px sans ombre,
   typographie noire compacte, un seul bleu pour les contrôles.
   Chargé après brand.css : il en reprend les tokens et neutralise l'encre.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --g-white: #ffffff; --g-mist: #f5f5f7; --g-frost: #fafafc; --g-hair: #d6d6d6; --g-ctrl: #e6e6e8;
  --g-ink: #1d1d1f; --g-slate: #707070; --g-steel: #86868b; --g-blue: #0066cc; --g-blue-fill: #0071e3; --g-orange: #b64400;
  --g-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --g-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --g-ease: cubic-bezier(.16, 1, .3, 1);   /* ressort doux, longue fin */
  --g-ease-io: cubic-bezier(.4, 0, .2, 1);

  /* On réécrit les tokens de brand.css */
  --primary: var(--g-blue-fill); --primary-dark: #0062c4; --primary-light: #eef4fb;
  --ink: var(--g-white); --ink-2: var(--g-mist); --ink-line: var(--g-hair); --ink-text: var(--g-slate); --ink-accent: var(--g-blue);
  --accent: var(--g-blue); --text: var(--g-ink); --text-muted: var(--g-slate); --text-light: var(--g-steel);
  --bg: var(--g-white); --bg-subtle: var(--g-mist); --bg-indigo: var(--g-mist); --border: var(--g-hair); --border-light: var(--g-ctrl);
  --mono: var(--g-text); --radius-sm: 10px; --radius: 20px; --radius-lg: 28px;
  --shadow: none; --shadow-lg: none; --shadow-md: none;
}

/* ───────── Base typographique ───────── */
html { scroll-behavior: smooth; }
body { font-family: var(--g-text); color: var(--g-ink); background: var(--g-white); font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, .logo, .pricing-price, .fact strong, .score-num, .waste-amount, .transparency-stat strong, .result-roas-number { font-family: var(--g-display); font-weight: 600; letter-spacing: -0.015em; }
.hero--poster h1.display, h1.display--sm { font-weight: 600; letter-spacing: -1.2px; line-height: 1.05; }
.hero--poster h1.display { font-size: clamp(40px, 6.2vw, 80px); }
h1.display--sm { font-size: clamp(34px, 4.2vw, 56px); }
.section-title, .section-title--lg { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: 0; font-weight: 600; }
.section-subtitle, .hero-sub, .page-subtitle { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--g-slate); }
.section-label, .page-label, .hero-eyebrow { font-family: var(--g-display); font-size: 21px; font-weight: 600; letter-spacing: 0.231px; text-transform: none; color: var(--g-ink); display: block; margin-bottom: 8px; }
.section-label::before, .page-label::before { display: none; content: none; }
.hero-eyebrow .hero-badge-dot { display: none; }
a { color: inherit; }
p a, .faq-a a, .deal a, .checklist a { color: var(--g-blue); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--g-ease); }
p a:hover, .faq-a a:hover { background-size: 100% 1px; }
.mono, .campaign-meta, .method-rule, .step-number, .card .num, .step .n, .points li::before { font-family: var(--g-text); letter-spacing: -0.224px; }

/* ───────── Surfaces : tout en clair ───────── */
.hero--ink, .hero--poster, .page-hero, .facts, .final-cta-section, .footer, .transparency, .header--ink, .header--ink.is-scrolled, .mobile-cta { background: var(--g-white); color: var(--g-ink); border: 0; }
.hero--ink::before, .page-hero::before, .hero--ink .hero-visual::before { display: none; }
.hero--ink h1, .hero--ink h1 em, .hero--poster h1.display em, h1.display--sm em, .page-title, .final-cta-section h2, .final-cta-section h2 em, .transparency h4, .transparency-stat strong { color: var(--g-ink); }
.hero--ink .hero-sub, .hero--ink .reassurance-item, .final-cta-section p, .final-cta-section .reassurance-item, .page-subtitle, .transparency p, .transparency-stat small, .hero--ink .visual-footnote, .hero--ink .deal li { color: var(--g-slate); }
.hero--ink .reassurance-item svg, .hero--ink .reassurance-item .check, .reassurance-item svg { color: var(--g-blue); }
.hero--ink .deal { background: var(--g-mist); border: 0; border-radius: 28px; padding: 28px; }
.hero--ink .deal h4, .hero--ink .deal strong { color: var(--g-ink); }
.facts { background: var(--g-mist); padding: 24px 0; }
.fact { border-left: 1px solid var(--g-hair); }
.fact strong { color: var(--g-ink); font-size: clamp(36px, 4vw, 56px); letter-spacing: -1px; }
.fact span { color: var(--g-slate); }
.final-cta-section { background: var(--g-mist); padding: 128px 0; }
.footer { background: var(--g-mist); color: var(--g-slate); border-top: 1px solid var(--g-hair); }
.footer-brand .logo, .footer-col h5 { color: var(--g-ink); }
.footer-brand p, .footer-col a, .footer-contact a, .footer-bottom { color: var(--g-slate); }
.footer-col a:hover, .footer-contact a:hover { color: var(--g-ink); }
.footer-bottom { border-top-color: var(--g-hair); }
.transparency { background: var(--g-white); border: 0; border-radius: 28px; padding: 40px; }
.section { padding: 90px 0; }
.section-alt { background: var(--g-mist); border: 0; }
#confiance { background: var(--g-mist); border: 0; }
#probleme, #definitions { background: var(--g-mist); }

/* ───────── En-tête : barre blanche translucide, 1 px d'arête ───────── */
.header, .header--ink, .header--ink.is-scrolled { background: rgba(250,250,252,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--g-ctrl); transition: background .3s var(--g-ease-io); }
.header .logo, .header--ink .logo, .header--ink.is-scrolled .logo { color: var(--g-ink); font-size: 19px; letter-spacing: 0.228px; }
.header .logo span, .header--ink .logo span { color: var(--g-ink); font-weight: 400; }
.header .nav a, .header--ink .nav a, .header--ink.is-scrolled .nav a { color: rgba(0,0,0,.8); font-size: 14px; letter-spacing: -0.224px; font-weight: 400; padding: 6px 10px; border-radius: 10px; position: relative; }
.header .nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: var(--g-ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--g-ease); }
.header .nav a:hover { color: var(--g-ink); background: transparent; }
.header .nav a:hover::after { transform: scaleX(1); }
.header--ink .hamburger, .header--ink.is-scrolled .hamburger { border-color: var(--g-steel); }
.header--ink .hamburger span, .header--ink.is-scrolled .hamburger span { background: var(--g-ink); }
.header--ink .nav.mobile-open, .header .nav.mobile-open { background: var(--g-frost); border-bottom: 1px solid var(--g-ctrl); }

/* ───────── Contrôles : pilules ───────── */
.btn { border-radius: 9999px; font-family: var(--g-text); font-weight: 400; letter-spacing: -0.224px; transition: transform .45s var(--g-ease), background-color .3s var(--g-ease-io), color .3s var(--g-ease-io), box-shadow .3s var(--g-ease-io), border-color .3s var(--g-ease-io); will-change: transform; }
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn-primary, .btn-primary-lg, .header .btn-primary, .header--ink .btn-primary, .header--ink.is-scrolled .btn-primary, .hero--ink .btn-primary-lg, .hero--ink .mobile-jump, .final-cta-section .btn-primary-lg, .mobile-cta .btn { background: var(--g-blue-fill); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-primary-lg:hover, .header .btn-primary:hover, .header--ink .btn-primary:hover, .header--ink.is-scrolled .btn-primary:hover, .hero--ink .btn-primary-lg:hover, .hero--ink .mobile-jump:hover, .final-cta-section .btn-primary-lg:hover { background: #0077ed; color: #fff; transform: translateY(-1px) scale(1.02); box-shadow: none; }
.header .btn-primary, .header--ink .btn-primary { padding: 8px 15px; font-size: 12px; line-height: 16px; letter-spacing: -0.12px; }
.btn-primary-lg { padding: 14px 28px; font-size: 17px; }
.btn-ghost, .hero--ink .btn-ghost, .btn-outline-primary { background: transparent; color: var(--g-ink); border: 1px solid var(--g-steel); }
.btn-ghost:hover, .hero--ink .btn-ghost:hover, .btn-outline-primary:hover { background: var(--g-ink); color: #fff; border-color: var(--g-ink); transform: translateY(-1px) scale(1.02); box-shadow: none; }
.hero--ink .btn-ghost { color: var(--g-blue); border-color: transparent; }
.hero--ink .btn-ghost:hover { background: transparent; color: var(--g-blue); transform: none; text-decoration: underline; }
.hero--ink .btn-ghost::after { content: " ›"; }

/* ───────── Premier écran : scène produit centrée ───────── */
.hero--poster { padding: 72px 0 40px; overflow: visible; }
.hero--poster .container { max-width: 1100px; }
.hero--poster .hero-eyebrow { text-align: center; max-width: none; margin-bottom: 12px; }
.hero--poster h1.display { text-align: center; max-width: 18ch; margin: 0 auto; }
.hero-grid { grid-template-columns: 1fr; justify-items: center; gap: 48px; margin-top: 28px; }
.hero-copy { text-align: center; max-width: 640px; }
.hero--poster .hero-sub { margin: 0 auto 28px; font-size: 21px; line-height: 1.38; letter-spacing: 0.011em; color: var(--g-slate); }
.hero--poster .hero-ctas { justify-content: center; }
.hero--poster .hero-reassurance { justify-content: center; }
.hero--poster .hero-visual { width: min(100%, 860px); }
.hero-stack { transform: none; }
.hero-stack .sheet { display: none; }
.hero-stack .dashboard-card, .dashboard-card { border-radius: 28px; border: 0; box-shadow: 0 0 0 1px var(--g-ctrl); overflow: hidden; }
.dashboard-card-header { background: var(--g-frost); border-bottom: 1px solid var(--g-ctrl); }
.campaign-tag { border-radius: 9999px; }
.hero--poster .visual-footnote { text-align: center; color: var(--g-steel); font-size: 12px; margin-top: 16px; }
/* capsule tarif flottante, posée sur le bas du rapport */
.hero-callout { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 16px; padding: 12px 12px 12px 22px; background: var(--g-white); border-radius: 28px; box-shadow: 0 0 0 1px var(--g-ctrl); white-space: nowrap; z-index: 3; }
.hero-callout strong { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; }
.hero-callout small { font-size: 12px; color: var(--g-slate); letter-spacing: -0.12px; display: block; }
.hero-callout .btn { padding: 8px 15px; font-size: 12px; line-height: 16px; }
.hero--poster .hero-visual { position: relative; margin-bottom: 36px; }

/* ───────── Cartes : blanches, 28 px, sans ombre, qui se soulèvent ───────── */
.problem-card, .trust-card, .method-card, .deliverable-card, .card, .feature-card, .step, .pricing-card, .upsell-card, .definition-item, .faq-item, .callback-card, .form-card, .report-doc, .illus img, .email-capture, .method-note, .deal {
  background: var(--g-white); border: 0; border-radius: 28px; box-shadow: none;
  transition: transform .6s var(--g-ease), box-shadow .6s var(--g-ease), background-color .3s var(--g-ease-io);
}
.pricing-card { box-shadow: 0 0 0 1px var(--g-blue-fill); }
.upsell-card, .form-card, .report-doc { box-shadow: 0 0 0 1px var(--g-ctrl); }
.report-doc::before, .report-doc::after { display: none; }
.problem-card:hover, .trust-card:hover, .method-card:hover, .deliverable-card:hover, .card:hover, .feature-card:hover, .step:hover, .definition-item:hover, .pricing-card:hover, .upsell-card:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 0 0 1px var(--g-ctrl); }
.pricing-card:hover { box-shadow: 0 0 0 1px var(--g-blue-fill); }
.method-rule, .points li::before, .step .n, .card .num, .step-number { background: var(--g-mist); border: 0; color: var(--g-ink); }
.method-card, .method-note { padding: 28px; }
.method-note { background: var(--g-mist); }
#definitions .definition-item { border: 0; padding: 24px 28px; }
.illus img { border: 0; box-shadow: 0 0 0 1px var(--g-ctrl); transition: transform .8s var(--g-ease); }
.illus:hover img { transform: scale(1.025); }
.tag, .campaign-tag, .pricing-tag, .hero-badge { border-radius: 9999px; }
.pricing-tag { background: transparent; color: var(--g-orange); padding: 0; font-size: 12px; font-weight: 600; letter-spacing: -0.12px; }
.pricing-tag.upsell { background: transparent; color: var(--g-slate); }
.pricing-price, .pricing-card .pricing-price { font-family: var(--g-display); font-weight: 600; color: var(--g-ink); letter-spacing: -1px; }
.pricing-price span, .pricing-card .pricing-price span { font-family: var(--g-text); color: var(--g-slate); }
.form-control { border-radius: 12px; border-color: var(--g-ctrl); background: var(--g-white); font-family: var(--g-text); transition: border-color .25s, box-shadow .25s, transform .25s; }
.form-control:focus { border-color: var(--g-blue-fill); box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
.platform-btn { border-radius: 12px; }
.platform-btn.selected, .platform-btn[aria-pressed="true"] { border-color: var(--g-blue-fill); background: var(--g-white); color: var(--g-blue-fill); box-shadow: 0 0 0 1px var(--g-blue-fill) inset; }
.upload-area { border-radius: 20px; }
:focus-visible { outline: 3px solid var(--g-blue-fill); outline-offset: 2px; }

/* ───────── « Highlights » : la confiance en carrousel horizontal ───────── */

/* ───────── Bandeau mobile ───────── */
.mobile-cta { background: rgba(250,250,252,.9); border-top: 1px solid var(--g-ctrl); }

/* ───────── Mouvement ───────── */
@media (prefers-reduced-motion: no-preference) {
  /* Entrée du premier écran : cascade plus ample */
  .hero--enter .hero-eyebrow, .hero--enter h1, .hero--enter .hero-sub, .hero--enter .hero-ctas, .hero--enter .mobile-jump, .hero--enter .hero-reassurance, .hero--enter .reassurance, .hero--enter .hero-price, .hero--enter .notice-box, .hero--enter .hero-deal { animation: g-rise .9s var(--g-ease) both; }
  .hero--enter .hero-eyebrow { animation-delay: .05s; }
  .hero--enter h1 { animation-delay: .15s; }
  .hero--enter .hero-sub { animation-delay: .3s; }
  .hero--enter .hero-ctas, .hero--enter .mobile-jump, .hero--enter .hero-price { animation-delay: .42s; }
  .hero--enter .hero-reassurance, .hero--enter .reassurance, .hero--enter .notice-box { animation-delay: .52s; }
  .hero--enter .hero-visual, .hero--enter .form-card { animation: g-stage 1.2s var(--g-ease) .35s both; }
  .hero--enter .hero-callout { animation: g-rise .8s var(--g-ease) 1.3s both; }
  .hero--enter .campaign-row { animation: rowIn .6s var(--g-ease) both; }
  .hero--enter .campaign-row:nth-child(1) { animation-delay: .9s; } .hero--enter .campaign-row:nth-child(2) { animation-delay: 1.05s; } .hero--enter .campaign-row:nth-child(3) { animation-delay: 1.2s; }
  .hero--enter .waste-box { animation: g-rise .6s var(--g-ease) 1.35s both; }
  @keyframes g-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes g-stage { from { opacity: 0; transform: translateY(60px) scale(.94); } to { opacity: 1; transform: none; } }

  /* Révélation au défilement, en cascade (classes posées par motion.js) */
  .g-in { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--g-ease), transform .9s var(--g-ease); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
  .g-in.is-in { opacity: 1; transform: none; }
  .g-in.g-scale { transform: translateY(24px) scale(.96); }
  .g-in.g-scale.is-in { transform: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; } /* remplacé par .g-in */
  html.js .reveal { opacity: 1; transform: none; transition: none; }

  /* Parallaxe du rapport (motion.js pilote --py et --ps) */
  .hero--poster .hero-visual { transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1)); transform-origin: 50% 0; }
  /* Grands chiffres : défilent légèrement plus lentement que la page */
  .fact strong { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .g-in { opacity: 1 !important; transform: none !important; } }

/* ───────── Responsive ───────── */
@media (max-width: 1024px) { .fact { border-left: 0; } .fact:nth-child(even) { border-left: 1px solid var(--g-hair); } }
@media (max-width: 768px) {
  body { font-size: 17px; }
  .hero--poster { padding: 40px 0 24px; }
  .hero--poster h1.display { font-size: clamp(36px, 10vw, 48px); letter-spacing: -0.8px; }
  .hero--poster .hero-sub { font-size: 19px; }
  .hero-callout { position: static; transform: none; margin: 16px auto 0; white-space: normal; justify-content: space-between; width: 100%; }
  .section { padding: 64px 0; }
  .final-cta-section { padding: 80px 0; }
  .section-label, .page-label, .hero-eyebrow { font-size: 17px; }
}

/* Priorité sur les feuilles de page : une seule famille d'affichage partout */
h1, h2, h3, h4, .section-title, .section-title--lg, .final-cta-section h2, .page-title, .pricing-name, .logo, .hero h1, .pricing-price, .deal h4, .method-card h4, .trust-card h4, .faq-q, .result-roas-number, .about-card h3 { font-family: var(--g-display) !important; }
.hero--poster .visual-footnote { margin-top: 56px; }
.hero--poster .hero-visual { margin-bottom: 20px; }
.final-cta-section h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.5px; }

/* Lisibilité des éléments hérités de l'encre */
.hero--ink .hero-price { color: var(--g-ink); font-size: clamp(44px, 6vw, 72px); letter-spacing: -1.2px; }
.hero--ink .hero-price span { color: var(--g-slate); font-size: 17px; letter-spacing: -0.374px; }
.hero-price-note { font-size: 14px; color: var(--g-slate); margin-top: 6px; }
.hero--ink .hero-badge, .hero-badge, .page-hero .notice { background: var(--g-mist); color: var(--g-ink); border: 0; font-family: var(--g-text); font-size: 12px; font-weight: 600; letter-spacing: -0.12px; }
.notice-box, .hero--ink .notice-box { background: var(--g-mist); border: 0; border-radius: 28px; padding: 28px; }
.notice-box h4, .hero--ink .notice-box h4 { color: var(--g-ink); }
.notice-box p, .hero--ink .notice-box p { color: var(--g-slate); }
.compare-table { border: 0; box-shadow: 0 0 0 1px var(--g-ctrl); border-radius: 20px; }
.compare-table th { background: var(--g-mist); color: var(--g-slate); }

/* Scène produit : la capsule ne recouvre ni la légende ni la bande suivante */
.hero--poster .visual-footnote { margin-top: 16px; padding-bottom: 52px; }
.hero-callout { bottom: -6px; }
.hero--poster { padding-bottom: 72px; }
@media (prefers-reduced-motion: no-preference) {
  .hero--poster .hero-visual { opacity: var(--po, 1); }
}

.hero--poster .visual-footnote { padding-bottom: 76px; }

/* ═══════════ Images du produit, cadres et graphiques ═══════════ */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.shot { background: var(--g-white); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--g-ctrl); transition: transform .7s var(--g-ease), box-shadow .7s var(--g-ease); }
.shot img { display: block; width: 100%; height: auto; }
.shot:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 0 1px var(--g-hair); }
.shot figcaption { padding: 12px 16px 14px; font-size: 14px; color: var(--g-slate); letter-spacing: -0.224px; }
.shot figcaption strong { color: var(--g-ink); font-weight: 600; display: block; }
/* Téléphone : cadre dessiné en CSS, l'image de la page 1 à l'intérieur */
/* Téléphone réaliste (dessiné en CSS) : cadre titane, Dynamic Island, boutons, barre d'état, lecteur PDF de Mail, rapport en mise en page mobile */
.phone { position: relative; width: 300px; height: 620px; border-radius: 52px; padding: 11px; margin: 0 auto; background: linear-gradient(160deg, #3a3b40 0%, #1c1d21 45%, #2a2b30 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 4px #0c0d10, 0 40px 80px -30px rgba(6,27,49,.45), 0 0 0 1px rgba(6,27,49,.06); }
.phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #4a4b50, #1c1d21); }
.phone-btn--mute { left: -3px; top: 112px; height: 26px; } .phone-btn--up { left: -3px; top: 162px; height: 50px; } .phone-btn--down { left: -3px; top: 224px; height: 50px; }
.phone-btn--power { right: -3px; top: 186px; height: 84px; background: linear-gradient(270deg, #4a4b50, #1c1d21); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; color: var(--s-ink); }
.ph-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 78px; height: 24px; border-radius: 16px; background: #000; z-index: 3; }
.ph-status { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 12px 22px 0 28px; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.ph-icons { display: flex; align-items: center; gap: 5px; }
.ph-appbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--s-frost); background: #fff; font-size: 13px; }
.ph-back { color: #0a7aff; font-size: 15px; } .ph-apptitle { font-weight: 600; letter-spacing: -0.2px; }
.ph-share { justify-self: end; width: 13px; height: 15px; border: 1.5px solid #0a7aff; border-top-color: transparent; border-radius: 3px; position: relative; }
.ph-share::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1.5px; height: 13px; background: #0a7aff; transform: translateX(-50%); }
.ph-viewport { flex: 1; overflow: hidden; background: #fff; position: relative; }
.ph-viewport::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.ph-doc { padding: 18px 18px 40px; font-family: var(--s-font); font-weight: 300; font-size: 11px; line-height: 1.45; letter-spacing: -0.1px; font-feature-settings: "tnum"; transition: transform 7s linear; }
.phone:hover .ph-doc { transform: translateY(calc(-100% + 480px)); }
.ph-kicker { font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--s-smoke); margin: 18px 0 6px; } .ph-doc .ph-kicker:first-child { margin-top: 0; }
.ph-title { font-size: 22px; line-height: 1.1; letter-spacing: -0.4px; color: var(--s-ink); }
.ph-sub { font-size: 10.5px; color: var(--s-slate); margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--s-frost); }
.ph-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--s-frost); }
.ph-stats > div { padding: 10px 0 10px 12px; border-left: 1px solid var(--s-frost); display: flex; flex-direction: column; gap: 3px; }
.ph-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; } .ph-stats > div:nth-child(n+3) { border-top: 1px solid var(--s-frost); }
.ph-lbl { font-size: 9px; color: var(--s-slate); display: block; }
.ph-val { font-size: 22px; line-height: 1.1; letter-spacing: -0.5px; color: var(--s-ink); } .ph-val small { font-size: 10px; color: var(--s-slate); margin-left: 2px; }
.ph-val--accent { color: var(--s-indigo); }
.ph-bar { display: block; height: 3px; width: 86px; background: var(--s-frost); border-radius: 2px; margin-top: 4px; overflow: hidden; } .ph-bar i { display: block; height: 100%; background: var(--s-ink); border-radius: 2px; }
.ph-line { display: flex; gap: 8px; margin-top: 14px; } .ph-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s-ink); margin-top: 4px; flex: none; }
.ph-line strong { display: block; font-weight: 500; font-size: 11px; } .ph-line p { margin: 2px 0 0; color: var(--s-slate); font-size: 10px; }
.ph-table { border-top: 1px solid var(--s-frost); }
.ph-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--s-frost); font-size: 10.5px; }
.ph-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-num { text-align: right; min-width: 36px; }
.ph-verdict { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; min-width: 58px; color: var(--s-ink); }
.ph-verdict::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--s-ink); }
.ph-verdict--watch { color: var(--s-steel); } .ph-verdict--watch::before { background: var(--s-lavender); }
.ph-verdict--ok, .ph-verdict--scale { color: var(--s-indigo); } .ph-verdict--ok::before, .ph-verdict--scale::before { background: var(--s-indigo); }
.ph-p { margin: 0; font-size: 10.5px; color: var(--s-ink); }
.ph-foot { margin-top: 12px; padding: 10px 12px; background: var(--s-mist); border-radius: 4px; font-size: 10px; color: var(--s-steel); } .ph-foot strong { font-weight: 400; color: var(--s-ink); }
.ph-loss { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--s-frost); }
.ph-loss strong { font-weight: 400; font-size: 11px; display: block; margin-top: 1px; } .ph-amt { font-size: 16px; letter-spacing: -0.3px; white-space: nowrap; }
.ph-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 110px; height: 4px; border-radius: 2px; background: #1d1d1f; z-index: 3; }
.showcase { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.showcase .split-copy p { font-size: 17px; color: var(--g-slate); }

/* Graphiques : cartes blanches, dessinées à l'apparition */
.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chart-card { background: var(--g-white); border-radius: 28px; padding: 28px; box-shadow: 0 0 0 1px var(--g-ctrl); transition: transform .7s var(--g-ease), box-shadow .7s var(--g-ease); min-height: 360px; display: flex; flex-direction: column; }
.chart-card:hover { transform: translateY(-8px) scale(1.012); }
.chart-card h3 { font-size: 21px; letter-spacing: 0; margin: 0 0 4px; }
.chart-card .lead { font-size: 14px; color: var(--g-slate); margin: 0 0 18px; letter-spacing: -0.224px; }
.chart-card svg { width: 100%; height: auto; display: block; margin-top: auto; }
.chart-card .foot { font-size: 12px; color: var(--g-steel); margin-top: 14px; letter-spacing: -0.12px; }
.chart-big { background: var(--g-white); border-radius: 28px; padding: 32px; box-shadow: 0 0 0 1px var(--g-ctrl); }
.chart-big svg { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--g-text); letter-spacing: -0.2px; }
.chart .axis { stroke: var(--g-ctrl); }
.chart .grid { stroke: #ededf0; stroke-dasharray: 2 4; }
.chart .lbl { fill: var(--g-slate); font-size: 11px; }
.chart .val { fill: var(--g-ink); font-size: 12px; font-weight: 600; }
.chart .blue { fill: var(--g-blue-fill); } .chart .red { fill: #e5484d; } .chart .amber { fill: #e08a1e; } .chart .green { fill: #1fae6e; } .chart .mist { fill: var(--g-ctrl); }
.chart .stroke-blue { stroke: var(--g-blue-fill); } .chart .stroke-red { stroke: #e5484d; } .chart .stroke-ink { stroke: var(--g-ink); }
@media (prefers-reduced-motion: no-preference) {
  .chart .bar { transform: scaleX(0); transform-origin: 0 50%; transform-box: fill-box; transition: transform 1.1s var(--g-ease); transition-delay: calc(var(--d, 0) * 120ms); }
  .chart .vbar { transform: scaleY(0); transform-origin: 50% 100%; transform-box: fill-box; transition: transform 1.1s var(--g-ease); transition-delay: calc(var(--d, 0) * 120ms); }
  .chart .line { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.8s var(--g-ease-io) .2s; }
  .chart .area { opacity: 0; transition: opacity 1.2s var(--g-ease-io) 1s; }
  .chart .arc { stroke-dasharray: var(--len) 1000; stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.3s var(--g-ease); transition-delay: calc(var(--d, 0) * 220ms + .1s); }
  .chart .dot, .chart .tag { opacity: 0; transform: scale(.6); transform-origin: center; transform-box: fill-box; transition: opacity .5s var(--g-ease), transform .7s var(--g-ease); transition-delay: calc(var(--d, 0) * 150ms + 1.1s); }
  .is-in .chart .bar, .is-in .chart .vbar { transform: none; }
  .is-in .chart .line { stroke-dashoffset: 0; }
  .is-in .chart .area { opacity: 1; }
  .is-in .chart .arc { stroke-dashoffset: 0; }
  .is-in .chart .dot, .is-in .chart .tag { opacity: 1; transform: none; }
}
@media (max-width: 1024px) { .charts { grid-template-columns: 1fr; } .shots { grid-template-columns: 1fr 1fr; } .showcase { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .shots { grid-template-columns: 1fr 1fr; gap: 12px; } .shot figcaption { font-size: 12px; } .phone { zoom: .8; } }

/* ═══════════ Le relevé (référence Stripe) : carte du premier écran et page d'exemple ═══════════ */
:root { --s-ink: #061b31; --s-slate: #64748d; --s-steel: #50617a; --s-smoke: #839bc8; --s-mist: #f8fafd; --s-frost: #e5edf5; --s-indigo: #533afd; --s-indigo-hover: #7389ff; --s-lavender: #b9b9f9; --s-lilac: #d6d9fc; --s-wash: #e8e9ff; --s-font: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; }
.ledger { font-family: var(--s-font); font-weight: 300; color: var(--s-ink); background: #fff; border: 1px solid var(--s-frost); border-radius: 4px; text-align: left; font-feature-settings: "ss01" on, "tnum" on; font-variant-numeric: tabular-nums; letter-spacing: -0.16px; width: 100%; max-width: 860px; }
.ledger-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 32px 20px; border-bottom: 1px solid var(--s-frost); }
.ledger-kicker { font-size: 12px; line-height: 1.45; letter-spacing: 0.5px; text-transform: uppercase; color: var(--s-smoke); margin-bottom: 6px; }
.ledger-title { font-size: 22px; line-height: 1.1; letter-spacing: -0.22px; font-weight: 300; color: var(--s-ink); }
.ledger-tag { font-size: 12px; font-weight: 400; color: var(--s-indigo); background: var(--s-wash); border-radius: 9999px; padding: 4px 10px; white-space: nowrap; }
.ledger-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--s-frost); }
.ledger-stat { padding: 20px 32px; border-left: 1px solid var(--s-frost); display: flex; flex-direction: column; gap: 8px; }
.ledger-stat:first-child { border-left: 0; }
.ledger-stat-label { font-size: 12px; line-height: 1.45; letter-spacing: -0.12px; color: var(--s-slate); }
.ledger-stat-value { font-size: 32px; line-height: 1.1; letter-spacing: -0.64px; font-weight: 300; color: var(--s-ink); }
.ledger-stat-value small { font-size: 14px; color: var(--s-slate); margin-left: 2px; letter-spacing: -0.14px; }
.ledger-stat--accent .ledger-stat-value { color: var(--s-indigo); }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; letter-spacing: -0.14px; }
.ledger-table th { font-weight: 400; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--s-smoke); text-align: left; padding: 14px 32px 10px; border-bottom: 1px solid var(--s-frost); }
.ledger-table td { padding: 14px 32px; border-bottom: 1px solid var(--s-frost); color: var(--s-ink); font-weight: 300; }
.ledger-table th.num, .ledger-table td.num { text-align: right; }
.ledger-table th:not(:first-child), .ledger-table td:not(:first-child) { padding-left: 12px; }
.ledger-table tbody tr { transition: background .25s var(--g-ease-io); }
.ledger-table tbody tr:hover { background: var(--s-mist); }
.verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--s-ink); white-space: nowrap; }
.verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-ink); flex-shrink: 0; }
.verdict--watch { color: var(--s-steel); } .verdict--watch::before { background: var(--s-lavender); }
.verdict--scale { color: var(--s-indigo); } .verdict--scale::before { background: var(--s-indigo); }
.ledger-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 32px; font-size: 14px; line-height: 1.4; color: var(--s-steel); background: var(--s-mist); border-radius: 0 0 4px 4px; }
.ledger-foot strong { font-weight: 400; color: var(--s-ink); }
.ledger-link { color: var(--s-indigo); font-weight: 400; white-space: nowrap; transition: color .2s; }
.ledger-link:hover { color: var(--s-indigo-hover); }
/* La carte d'origine ne doit plus imposer sa coque arrondie */
.hero-stack .ledger { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero--enter .ledger-row { animation: rowIn .6s var(--g-ease) both; }
  .hero--enter .ledger-row:nth-child(4) { animation-delay: 1.35s; }
  .hero--enter .ledger-stat { animation: g-rise .7s var(--g-ease) both; }
  .hero--enter .ledger-stat:nth-child(1) { animation-delay: .75s; } .hero--enter .ledger-stat:nth-child(2) { animation-delay: .85s; } .hero--enter .ledger-stat:nth-child(3) { animation-delay: .95s; } .hero--enter .ledger-stat:nth-child(4) { animation-delay: 1.05s; }
}
@media (max-width: 768px) {
  .ledger-head, .ledger-stat, .ledger-foot { padding-left: 20px; padding-right: 20px; }
  .ledger-stats { grid-template-columns: 1fr 1fr; }
  .ledger-stat:nth-child(odd) { border-left: 0; } .ledger-stat:nth-child(n+3) { border-top: 1px solid var(--s-frost); }
  .ledger-stat-value { font-size: 26px; }
  .ledger-table th, .ledger-table td { padding: 12px 20px; }
  .ledger-table th:nth-child(3), .ledger-table td:nth-child(3), .ledger-table th:nth-child(4), .ledger-table td:nth-child(4) { display: none; }
  .ledger-foot { flex-direction: column; align-items: flex-start; }
}

/* Page d'exemple : le document passe au même langage de relevé */
.report-doc { --primary: #533afd; --red: #061b31; --orange: #50617a; --green: #533afd; --red-light: #f8fafd; --orange-light: #f8fafd; --green-light: #e8e9ff; --text: #061b31; --text-muted: #64748d; --border: #e5edf5; --bg-subtle: #f8fafd; font-family: var(--s-font); font-weight: 300; font-feature-settings: "ss01" on, "tnum" on; border-radius: 4px; box-shadow: none; border: 1px solid var(--s-frost); }
.report-doc-header { background: #fff !important; color: var(--s-ink) !important; border-bottom: 1px solid var(--s-frost); border-radius: 4px 4px 0 0 !important; padding: 32px !important; }
.report-doc-header h2, .report-doc-header h3 { color: var(--s-ink) !important; font-weight: 300 !important; letter-spacing: -0.64px; font-size: 32px !important; font-family: var(--s-font) !important; }
.report-doc-header p, .report-meta-item { color: var(--s-slate) !important; opacity: 1 !important; }
.report-doc-header .report-meta-item strong { color: var(--s-ink); font-weight: 400; }
.report-doc h2, .report-doc h3, .report-doc h4 { font-family: var(--s-font) !important; font-weight: 300 !important; color: var(--s-ink); }
.campaigns-table th { background: #fff !important; color: var(--s-smoke) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px !important; }
.campaigns-table td { font-weight: 300; color: var(--s-ink); }
.campaigns-table td span[style*="background"] { background: transparent !important; color: var(--s-ink) !important; padding: 0 !important; font-weight: 400 !important; }
.loss-item, .action-item { background: #fff !important; border: 0 !important; border-top: 1px solid var(--s-frost) !important; border-radius: 0 !important; }
.loss-amount { color: var(--s-ink) !important; font-weight: 300 !important; font-size: 26px !important; letter-spacing: -0.26px; }
.action-num { background: var(--s-wash) !important; color: var(--s-indigo) !important; border-radius: 4px !important; }
.report-page-break { border-color: var(--s-frost) !important; color: var(--s-smoke) !important; }

/* Pages secondaires : l'en-tête reste « galerie » même quand brand.css voulait l'encre */
.header:has(+ .page-hero), .header:has(+ main .page-hero) { background: rgba(250,250,252,.82); border-bottom-color: var(--g-ctrl); }
.header:has(+ .page-hero) .logo, .header:has(+ main .page-hero) .logo, .header:has(+ .page-hero) .logo span, .header:has(+ main .page-hero) .logo span { color: var(--g-ink); }
.header:has(+ .page-hero) .nav a, .header:has(+ main .page-hero) .nav a { color: rgba(0,0,0,.8); }
.header:has(+ .page-hero) .btn-primary, .header:has(+ main .page-hero) .btn-primary { background: var(--g-blue-fill); color: #fff; }
.header:has(+ .page-hero) .btn-primary:hover, .header:has(+ main .page-hero) .btn-primary:hover { background: #0077ed; color: #fff; }
.footer a, .footer .logo, .footer p { color: var(--g-slate) !important; }
.footer a:hover { color: var(--g-ink) !important; }
/* Page d'exemple : score et bandeau final au langage du relevé */
.report-doc .score-big-circle { background: conic-gradient(var(--s-indigo) 0 73%, var(--s-frost) 73% 100%) !important; }
.report-doc .score-big-circle > * { background: #fff; }
.cta-banner { background: var(--s-indigo) !important; border-radius: 4px !important; }
.cta-banner h2, .cta-banner h3, .cta-banner p { color: #fff !important; font-weight: 300 !important; }
.cta-banner .btn, .cta-banner a.btn-white { border-radius: 4px !important; background: #fff !important; color: var(--s-indigo) !important; }
.report-doc span[style*="background:var(--orange-light)"], .report-doc span[style*="background: var(--orange-light)"] { background: var(--s-mist) !important; color: var(--s-steel) !important; border-color: var(--s-frost) !important; }
@media (max-width: 768px) { .hero--poster .visual-footnote { padding-bottom: 12px; margin-top: 8px; } .hero--poster { padding-bottom: 40px; } }

/* ═══════════ Mouvement v4 : visible ═══════════ */
.g-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--g-blue-fill); transform: scaleX(0); transform-origin: 0 50%; z-index: 1000; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .g-in { opacity: 0; transform: translateY(56px) scale(.985); filter: blur(10px); transition: opacity 1.1s var(--g-ease), transform 1.1s var(--g-ease), filter 1.1s var(--g-ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .g-in.is-in { opacity: 1; transform: none; filter: none; }
  .g-in.g-scale { transform: translateY(40px) scale(.94); }
  .g-in.g-scale.is-in { transform: none; }
  /* titre mot à mot */
  .hero--enter h1.g-split { animation: none; opacity: 1; }
  .g-word { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(1.5deg); filter: blur(8px); animation: g-word .9s var(--g-ease) both; animation-delay: calc(.1s + var(--w, 0) * 90ms); }
  @keyframes g-word { to { opacity: 1; transform: none; filter: none; } }
  .hero--enter .hero-sub { animation-delay: .9s; } .hero--enter .hero-ctas, .hero--enter .mobile-jump { animation-delay: 1.05s; } .hero--enter .hero-reassurance, .hero--enter .reassurance { animation-delay: 1.2s; }
  .hero--enter .hero-visual, .hero--enter .form-card { animation-delay: .8s; animation-duration: 1.4s; }
  .hero--enter .ledger-stat:nth-child(1) { animation-delay: 1.3s; } .hero--enter .ledger-stat:nth-child(2) { animation-delay: 1.4s; } .hero--enter .ledger-stat:nth-child(3) { animation-delay: 1.5s; } .hero--enter .ledger-stat:nth-child(4) { animation-delay: 1.6s; }
  .hero--enter .ledger-row:nth-child(1) { animation-delay: 1.7s; } .hero--enter .ledger-row:nth-child(2) { animation-delay: 1.85s; } .hero--enter .ledger-row:nth-child(3) { animation-delay: 2s; } .hero--enter .ledger-row:nth-child(4) { animation-delay: 2.15s; }
  .hero--enter .ledger-foot { animation: g-rise .7s var(--g-ease) 2.3s both; }
  .hero--enter .hero-callout { animation-delay: 2.5s; }
  /* relevé en 3D, téléphone qui flotte, point vivant sur le chiffre gaspillé */
  .hero-stack { transform-style: preserve-3d; will-change: transform; transition: transform .8s var(--g-ease); }
  .phone { animation: g-float 7s ease-in-out infinite; }
  @keyframes g-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
  .ledger-stat--accent .ledger-stat-value::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--s-indigo); margin-left: 10px; vertical-align: middle; animation: g-pulse 2.2s ease-out infinite; }
  @keyframes g-pulse { 0% { box-shadow: 0 0 0 0 rgba(83,58,253,.45); } 70% { box-shadow: 0 0 0 12px rgba(83,58,253,0); } 100% { box-shadow: 0 0 0 0 rgba(83,58,253,0); } }
  /* survols plus amples */
  .problem-card:hover, .trust-card:hover, .method-card:hover, .deliverable-card:hover, .card:hover, .feature-card:hover, .step:hover, .definition-item:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 0 1px var(--g-hair), 0 30px 60px -30px rgba(0,0,0,.18); }
  .shot:hover { transform: translateY(-14px) scale(1.04) !important; }
  .btn-primary:hover, .btn-primary-lg:hover { transform: translateY(-2px) scale(1.04); }
  .fact:hover strong { transform: translateY(-4px); color: var(--g-blue-fill); transition: transform .5s var(--g-ease), color .3s; }
  .fact strong { transition: transform .5s var(--g-ease), color .3s; }
  .illus:hover img { transform: scale(1.04) rotate(-.4deg); }
}
.hero-stack .ledger { backface-visibility: hidden; }

/* ═══════════ Sections héritées, réécrites dans le langage du relevé ═══════════ */
/* Étapes */
#solution .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid var(--s-frost); padding-top: 32px; }
#solution .steps-grid::before, #solution .steps-grid::after { display: none; }
#solution .step-card { text-align: left; position: relative; padding: 0 24px 0 0; }
#solution .step-number { width: auto; height: auto; background: none; border: 0; border-radius: 0; margin: 0 0 16px; font-family: var(--s-font) !important; font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -1.4px; color: var(--g-ink); display: block; font-feature-settings: "tnum"; }
#solution .step-number::before { content: "0"; color: var(--s-smoke); }
#solution .step-card h4 { font-size: 21px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
#solution .step-card p { font-size: 15px; color: var(--g-slate); }
/* Méthode : règles comme des lignes de relevé */
#methode .method-grid { gap: 0; border-top: 1px solid var(--s-frost); }
#methode .method-card { grid-template-columns: 96px 1fr; gap: 24px; padding: 32px 0; border: 0; border-bottom: 1px solid var(--s-frost); border-radius: 0; background: transparent; box-shadow: none; }
#methode .method-card:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--s-frost); }
#methode .method-card:nth-child(even) { padding-left: 40px; }
#methode .method-card:hover { transform: none; box-shadow: none; background: var(--s-mist); }
#methode .method-rule { width: auto; height: auto; background: none; font-family: var(--s-font) !important; font-weight: 300; font-size: 40px; letter-spacing: -0.96px; color: var(--g-ink); display: block; line-height: 1; }
#methode .tag { background: transparent; padding: 0; margin-right: 16px; font-weight: 400; font-size: 14px; color: var(--s-ink); display: inline-flex; align-items: center; gap: 8px; }
#methode .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-ink); }
#methode .tag-watch { color: var(--s-steel); } #methode .tag-watch::before { background: var(--s-lavender); }
#methode .tag-ok { color: var(--s-indigo); } #methode .tag-ok::before { background: var(--s-indigo); }
#methode .tag-na { color: var(--s-slate); } #methode .tag-na::before { background: var(--s-frost); }
#methode .method-note { background: transparent; border: 0; border-top: 1px solid var(--s-frost); border-radius: 0; padding: 28px 0 0; color: var(--g-slate); }
#methode .method-note i { color: var(--s-indigo); }
/* Transparence : bloc de métriques, filets, graisse 300 */
#confiance .transparency { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; background: transparent; border: 0; border-top: 1px solid var(--s-frost); border-bottom: 1px solid var(--s-frost); border-radius: 0; padding: 48px 0; }
#confiance .transparency h4 { font-size: 26px; font-weight: 600; letter-spacing: -0.26px; }
#confiance .transparency p { font-size: 17px; color: var(--g-slate); }
#confiance .transparency-stats { justify-content: space-between; gap: 24px; }
#confiance .transparency-stat strong { font-family: var(--s-font) !important; font-weight: 300; font-size: 56px; letter-spacing: -1.4px; color: var(--g-ink); }
#confiance .transparency-stat small { color: var(--g-slate); font-size: 14px; }
/* Checklist : bande à filets, texte lisible */
#checklist { padding: 48px 0; }
#checklist .email-capture { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; background: transparent; border: 0; border-top: 1px solid var(--s-frost); border-bottom: 1px solid var(--s-frost); border-radius: 0; padding: 32px 0; }
#checklist .email-capture-text { color: var(--g-ink); }
#checklist .email-capture-text h3 { font-size: 21px; font-weight: 600; color: var(--g-ink); margin-bottom: 4px; }
#checklist .email-capture-text p { color: var(--g-slate); opacity: 1; font-size: 15px; }
#checklist .email-input { border: 1px solid var(--g-ctrl); border-radius: 9999px; padding: 12px 18px; background: #fff; color: var(--g-ink); min-width: 260px; font-size: 15px; }
#checklist .email-input:focus { border-color: var(--g-blue-fill); box-shadow: 0 0 0 4px rgba(0,113,227,.15); outline: none; }
#checklist .btn-primary { background: var(--g-blue-fill) !important; color: #fff !important; font-weight: 400 !important; }
/* FAQ : liste à filets, question en 400, plus de carte */
#faq .faq-item, .faq-section .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--s-frost); border-radius: 0; box-shadow: none; }
#faq .faq-item:first-child, .faq-section .faq-item:first-child { border-top: 1px solid var(--s-frost); }
#faq .faq-item:hover { transform: none; box-shadow: none; }
#faq .faq-q, .faq-section .faq-q { font-size: 19px; font-weight: 500; letter-spacing: -0.2px; padding: 22px 0; background: transparent; font-family: var(--g-display) !important; }
#faq .faq-q:hover { color: var(--g-blue); }
#faq .faq-q-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--g-ctrl); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: transform .5s var(--g-ease), background .3s; }
#faq .faq-q.open .faq-q-icon { background: var(--g-ink); color: #fff; }
#faq .faq-a { font-size: 17px; color: var(--g-slate); padding: 0 0 24px; line-height: 1.5; }
@media (max-width: 900px) {
  #solution .steps-grid { grid-template-columns: 1fr 1fr; }
  #methode .method-card, #methode .method-card:nth-child(odd), #methode .method-card:nth-child(even) { padding: 24px 0; border-right: 0; }
  #confiance .transparency { grid-template-columns: 1fr; gap: 24px; }
  #checklist .email-capture { grid-template-columns: 1fr; }
  #checklist .email-capture-form { flex-direction: column; }
  #checklist .email-input { min-width: 0; width: 100%; }
}
@media (max-width: 600px) { #solution .steps-grid { grid-template-columns: 1fr; } #solution .step-number { font-size: 44px; } }

/* Correctifs : numéros d'étapes sans cadre, FAQ repliée proprement, lien visible dans Transparence */
#solution .step-number { box-shadow: none !important; outline: 0; padding: 0; }
#faq .faq-a, .faq-section .faq-a { padding-left: 0; padding-right: 0; padding-bottom: 0; }
#faq .faq-q.open + .faq-a, #faq .faq-item.open .faq-a, #faq .faq-a.open, .faq-section .faq-q.open + .faq-a, .faq-section .faq-item.open .faq-a { padding-bottom: 24px; }
#confiance .transparency a { color: var(--g-blue) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════ Images du produit : interfaces dessinées (langage du relevé) ═══════════ */
.ui-mock { font-family: var(--s-font); font-weight: 300; color: var(--s-ink); background: #fff; border: 1px solid var(--s-frost); border-radius: 4px; overflow: hidden; margin-top: 20px; font-size: 12px; line-height: 1.4; letter-spacing: -0.12px; text-align: left; font-feature-settings: "tnum"; transition: transform .7s var(--g-ease), box-shadow .7s var(--g-ease); }
.step-card:hover .ui-mock { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--s-frost), 0 24px 48px -28px rgba(6,27,49,.25); }
.ui-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--s-frost); background: var(--s-mist); }
.ui-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--s-frost); }
.ui-bar em { font-style: normal; color: var(--s-slate); margin-left: 8px; font-size: 11px; }
.ui-toolbar { display: flex; gap: 8px; padding: 12px 12px 8px; }
.ui-chip { border: 1px solid var(--s-frost); border-radius: 4px; padding: 4px 8px; color: var(--s-steel); }
.ui-chip--active { border-color: var(--s-indigo); color: var(--s-indigo); position: relative; }
.ui-menu { margin: 0 12px 10px auto; width: 56%; border: 1px solid var(--s-frost); border-radius: 4px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 8px 24px -12px rgba(6,27,49,.25); }
.ui-menu span { padding: 6px 10px; color: var(--s-steel); display: flex; justify-content: space-between; }
.ui-menu .ui-menu-on { background: var(--s-wash); color: var(--s-indigo); font-weight: 400; }
.ui-menu-on i { font-style: normal; }
.ui-rows { padding: 0 12px 14px; display: grid; gap: 8px; }
.ui-rows i { display: block; height: 8px; border-radius: 2px; background: var(--s-frost); width: var(--w, 50%); }
.ui-form-body { padding: 14px 12px; display: grid; gap: 10px; }
.ui-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--s-frost); border-radius: 4px; overflow: hidden; }
.ui-seg b, .ui-seg span { padding: 7px; text-align: center; }
.ui-seg b { background: var(--s-wash); color: var(--s-indigo); font-weight: 400; }
.ui-field label { display: block; font-size: 11px; color: var(--s-slate); margin-bottom: 4px; }
.ui-input { border: 1px solid var(--s-frost); border-radius: 4px; padding: 7px 9px; }
.ui-drop { border: 1px dashed var(--s-lavender); border-radius: 4px; padding: 9px; color: var(--s-ink); display: flex; gap: 8px; align-items: center; }
.ui-drop i { font-style: normal; color: var(--s-indigo); } .ui-drop small { margin-left: auto; color: var(--s-slate); }
.ui-btn { background: var(--s-indigo); color: #fff; border-radius: 4px; padding: 9px; text-align: center; font-weight: 400; }
.ui-mail-head { display: flex; gap: 10px; align-items: center; padding: 12px 12px 8px; }
.ui-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--s-indigo); color: #fff; display: grid; place-items: center; font-weight: 400; }
.ui-mail-head b { display: block; font-weight: 400; } .ui-mail-head small { color: var(--s-slate); font-size: 11px; }
.ui-mail-subject { padding: 0 12px 6px; font-weight: 400; font-size: 13px; }
.ui-mail-body { padding: 0 12px 10px; color: var(--s-steel); margin: 0; }
.ui-attach { margin: 0 12px 12px; border: 1px solid var(--s-frost); border-radius: 4px; padding: 8px 10px; display: flex; gap: 10px; align-items: center; }
.ui-attach i { font-style: normal; font-size: 10px; font-weight: 400; color: #fff; background: var(--s-ink); border-radius: 3px; padding: 2px 5px; }
.ui-attach small { margin-left: auto; color: var(--s-slate); }
.ui-ledger-table { font-size: 12px; }
.ui-ledger-table td { padding: 9px 12px; }
.ui-action { padding: 10px 12px; border-top: 1px solid var(--s-frost); background: var(--s-mist); color: var(--s-steel); }
.ui-action b { font-weight: 400; color: var(--s-indigo); margin-right: 6px; } .ui-action strong { font-weight: 400; color: var(--s-ink); }
/* avant / après */
.ui-ba { font-size: 14px; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ba-col { padding: 24px 28px; display: grid; grid-template-columns: 1fr; row-gap: 2px; }
.ba-col--after { border-left: 1px solid var(--s-frost); background: var(--s-mist); }
.ba-k { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--s-smoke); margin-bottom: 14px; }
.ba-v { font-size: 32px; letter-spacing: -0.64px; line-height: 1.1; color: var(--s-ink); font-weight: 300; }
.ba-v i { font-style: normal; font-size: 13px; color: var(--s-indigo); margin-left: 8px; vertical-align: middle; font-weight: 400; }
.ba-col small { color: var(--s-slate); margin-bottom: 16px; }
.illus-cap { font-size: 14px; color: var(--g-slate); text-align: center; margin-top: 12px; }
#solution .step-card .ui-mock { min-height: 190px; }
@media (prefers-reduced-motion: no-preference) {
  .ui-chip--active::after { content: ""; position: absolute; inset: -4px; border-radius: 6px; border: 1px solid var(--s-indigo); opacity: 0; animation: g-ring 2.4s ease-out infinite; }
  @keyframes g-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
  .is-in .ui-menu { animation: g-rise .6s var(--g-ease) .5s both; }
  .is-in .ui-attach { animation: g-rise .6s var(--g-ease) .6s both; }
}
@media (max-width: 600px) { .ba-grid { grid-template-columns: 1fr; } .ba-col--after { border-left: 0; border-top: 1px solid var(--s-frost); } }
.ui-ledger-table td:first-child { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-ledger-table td.num, .ui-ledger-table td:last-child { white-space: nowrap; }
.ui-ledger-table td { padding: 9px 10px; }
.ui-ledger-table { table-layout: fixed; width: 100%; }
.ui-ledger-table td:first-child { width: 46%; max-width: none; }
.ui-ledger-table td.num { width: 20%; }
.ui-ledger-table td:first-child { width: 38%; }
.ui-ledger-table td.num { width: 22%; }
.ui-ledger-table .verdict { font-size: 12px; gap: 6px; }
.ui-ledger-table .verdict::before { width: 7px; height: 7px; }

/* FAQ : même langage partout (accueil, page audit, page FAQ) — liste à filets, pas de cartes */
.faq-item, .section .faq-item, .faq-section .faq-item, .section-alt .faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--s-frost) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; transition: none; }
.faq-item:first-child { border-top: 1px solid var(--s-frost) !important; }
.faq-item:hover { transform: none !important; }
.faq-item > h4 { font-size: 19px !important; font-weight: 500 !important; letter-spacing: -0.2px; color: var(--g-ink); padding: 22px 0 6px; margin: 0 !important; font-family: var(--g-display) !important; }
.faq-item > p { font-size: 17px !important; color: var(--g-slate) !important; line-height: 1.5; padding: 0 0 22px; margin: 0; }
.faq-item .faq-q { font-size: 19px !important; font-weight: 500 !important; letter-spacing: -0.2px; padding: 22px 0 !important; background: transparent !important; color: var(--g-ink); font-family: var(--g-display) !important; }
.faq-item .faq-q:hover { color: var(--g-blue); }
.faq-item .faq-q-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--g-ctrl); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; transition: transform .5s var(--g-ease), background .3s, color .3s; }
.faq-item .faq-q.open .faq-q-icon { background: var(--g-ink); color: #fff; border-color: var(--g-ink); }
.faq-item .faq-a { font-size: 17px !important; color: var(--g-slate) !important; line-height: 1.5 !important; padding-left: 0 !important; padding-right: 0 !important; }
.faq-item .faq-a.open, .faq-item .faq-q.open + .faq-a { padding-bottom: 24px !important; }
.faq-section h3, .faq-group-title { font-size: 26px; font-weight: 600; letter-spacing: -0.26px; margin: 48px 0 8px; }

/* Graphiques : typographie et teintes du relevé */
.chart text { font-family: var(--s-font); font-weight: 300; }
.chart .lbl { fill: var(--s-slate); }
.chart .val { fill: var(--s-ink); font-weight: 400; }
.chart .grid { stroke: var(--s-frost); stroke-dasharray: 2 4; }
.chart-card, .chart-big { border-radius: 4px; box-shadow: 0 0 0 1px var(--s-frost); font-family: var(--s-font); }
.chart-card h3, .chart-big h3 { font-family: var(--g-display) !important; font-weight: 600; }
.chart-card .foot, .chart-card .lead { font-family: var(--s-font); }
.chart-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--s-lilac), 0 30px 60px -36px rgba(6,27,49,.25); }
.illus.chart-big img { display: none; }

/* Confiance : six garanties en cellules de relevé (filets, 4 px, pictogrammes au trait), plus de carrousel */
#confiance .trust-ledger { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--s-frost); border-radius: 4px; overflow: hidden; font-family: var(--s-font); text-align: left; }
#confiance .trust-cell { padding: 28px 32px 30px; border-left: 1px solid var(--s-frost); border-top: 1px solid var(--s-frost); display: flex; flex-direction: column; min-height: 230px; transition: background .3s var(--g-ease-io); }
#confiance .trust-cell:nth-child(3n+1) { border-left: 0; } #confiance .trust-cell:nth-child(-n+3) { border-top: 0; }
#confiance .trust-cell:hover { background: var(--s-mist); }
.trust-cell-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trust-kicker { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--s-smoke); font-weight: 400; padding-top: 2px; font-feature-settings: "tnum"; }
.trust-ico { width: 40px; height: 40px; border-radius: 4px; background: var(--s-wash); color: var(--s-indigo); display: grid; place-items: center; flex: none; transition: transform .5s var(--g-ease); }
.trust-ico svg { width: 20px; height: 20px; } #confiance .trust-cell:hover .trust-ico { transform: translateY(-3px); }
#confiance .trust-cell h4 { font-family: var(--s-font) !important; font-size: 19px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.25; color: var(--s-ink); margin: 18px 0 8px; }
#confiance .trust-cell p { font-size: 14.5px; line-height: 1.55; color: var(--s-slate); margin: 0; }
@media (max-width: 1024px) { #confiance .trust-ledger { grid-template-columns: 1fr 1fr; } #confiance .trust-cell { border-left: 1px solid var(--s-frost); border-top: 1px solid var(--s-frost); min-height: 0; } #confiance .trust-cell:nth-child(2n+1) { border-left: 0; } #confiance .trust-cell:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 600px) { #confiance .trust-ledger { grid-template-columns: 1fr; } #confiance .trust-cell { padding: 22px 20px 24px; border-left: 0 !important; border-top: 1px solid var(--s-frost) !important; } #confiance .trust-cell:first-child { border-top: 0 !important; } }

/* ── Pied de page commun à toutes les pages (structure auparavant dans index.html) ── */
.footer { background: var(--g-mist); padding: 56px 0 32px; color: var(--g-slate); border-top: 1px solid var(--g-hair); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .logo { color: var(--g-ink); margin-bottom: 12px; display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.footer-brand p { font-size: 14px; line-height: 1.7; color: var(--g-slate); max-width: 260px; margin: 0; }
.footer-contact { margin-top: 20px; font-size: 14px; }
.footer-contact a { color: var(--g-slate); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.footer-col h5 { font-size: 12px; font-weight: 600; color: var(--g-ink); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--g-slate); padding: 4px 0; transition: color .15s; }
.footer-bottom { border-top: 1px solid var(--g-hair); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--g-slate); flex-wrap: wrap; gap: 12px; }
.footer-bottom p { margin: 0; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* ── Lisibilité : les textes « fumée » passent à un gris-bleu à 4,8:1 ; la couleur claire reste pour filets et points ── */
:root { --s-smoke-text: #5f7294; }
.ledger-kicker, .ledger-table th, .trust-kicker, .ph-kicker { color: var(--s-smoke-text); }

/* ── Page légale ── */
.legal-section .container-sm { max-width: 760px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 20px; border-bottom: 1px solid var(--s-frost); margin-bottom: 8px; font-size: 14px; }
.legal-nav a { color: var(--s-indigo); font-weight: 400; }
.legal-block { padding: 36px 0 28px; border-bottom: 1px solid var(--s-frost); scroll-margin-top: 90px; }
.legal-block h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 18px; }
.legal-block h3 { font-family: var(--s-font); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--s-smoke-text); font-weight: 400; margin: 22px 0 6px; }
.legal-block p { font-size: 15.5px; line-height: 1.65; color: var(--g-slate); margin: 0; }
.legal-block p strong { color: var(--g-ink); font-weight: 500; }
.legal-block a { color: var(--s-indigo); }
.legal-updated { font-size: 13px; color: var(--g-slate); padding: 20px 0 48px; margin: 0; }

/* ── Page d'exemple : le rapport complet, dans le relevé ── */
.report-section { padding: 40px 0 80px; background: var(--g-mist); }
.report-ledger { max-width: 900px; margin: 0 auto; }
.report-ledger .ledger-head { align-items: center; }
.rp-sub { font-size: 14px; color: var(--s-slate); margin-top: 6px; }
.rp-bar { display: block; height: 3px; width: 100px; background: var(--s-frost); border-radius: 2px; overflow: hidden; } .rp-bar i { display: block; height: 100%; background: var(--s-ink); border-radius: 2px; }
.rp-block { padding: 24px 32px 28px; border-bottom: 1px solid var(--s-frost); font-weight: 300; } .rp-block--tight { padding: 18px 32px 0; border-bottom: 0; }
.rp-verdict { display: flex; gap: 12px; margin-bottom: 26px; } .rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-ink); margin-top: 7px; flex: none; }
.rp-verdict strong { display: block; font-weight: 500; font-size: 17px; letter-spacing: -0.2px; } .rp-verdict p { margin: 4px 0 0; color: var(--s-slate); font-size: 15px; }
.rp-kicker { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--s-smoke-text); margin: 22px 0 8px; } .rp-kicker--inline { margin: 0 0 4px; } .rp-block > .rp-kicker:first-child { margin-top: 0; }
.rp-p { font-size: 15.5px; line-height: 1.65; color: var(--s-ink); margin: 0; } .rp-p--muted { color: var(--s-slate); } .rp-p--small { font-size: 13.5px; }
.rp-flags { list-style: none; margin: 0; padding: 0; } .rp-flags li { padding: 10px 0; border-top: 1px solid var(--s-frost); font-size: 14.5px; color: var(--s-steel); line-height: 1.5; } .rp-flags li:last-child { border-bottom: 1px solid var(--s-frost); }
.rp-break { display: flex; align-items: center; gap: 14px; padding: 18px 32px; background: var(--s-mist); border-bottom: 1px solid var(--s-frost); font-size: 17px; font-weight: 400; letter-spacing: -0.2px; color: var(--s-ink); }
.rp-break span { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--s-smoke-text); font-weight: 400; }
.rp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rp-table { min-width: 640px; } .rp-table tbody tr.is-na td { color: var(--s-slate); } .rp-table tr.rp-total td { background: var(--s-mist); font-weight: 400; }
.rp-table .verdict { font-size: 13px; }
.verdict--ok { color: var(--s-indigo); } .verdict--ok::before { background: var(--s-indigo); }
.verdict--na { color: var(--s-slate); } .verdict--na::before { background: var(--s-frost); }
.rp-stack { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--s-frost); } .rp-stack i { display: block; height: 100%; }
.rp-stack--cut { background: var(--s-ink); } .rp-stack--watch { background: var(--s-lavender); } .rp-stack--ok, .rp-stack--scale { background: var(--s-indigo); } .rp-stack--na { background: var(--s-frost); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; } .rp-legend .verdict { font-size: 13px; }
.rp-loss, .rp-action, .rp-rule { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 32px; border-bottom: 1px solid var(--s-frost); font-weight: 300; }
.rp-loss strong, .rp-action strong, .rp-rule strong { display: block; font-size: 17px; font-weight: 400; letter-spacing: -0.2px; color: var(--s-ink); }
.rp-loss p, .rp-action p, .rp-rule p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--s-slate); }
.rp-amount { font-size: 28px; letter-spacing: -0.6px; white-space: nowrap; text-align: right; color: var(--s-ink); font-variant-numeric: tabular-nums; } .rp-amount small { display: block; font-size: 12px; color: var(--s-slate); letter-spacing: 0; margin-top: 2px; } .rp-amount--accent { color: var(--s-indigo); }
.rp-action, .rp-rule { justify-content: flex-start; }
.rp-num { font-size: 26px; letter-spacing: -0.5px; color: var(--s-indigo); min-width: 44px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-rule-id { flex: none; width: 36px; height: 26px; border-radius: 4px; background: var(--s-wash); color: var(--s-indigo); font-size: 12px; display: grid; place-items: center; margin-top: 2px; }
.rp-next { background: var(--s-mist); border: 1px solid var(--s-frost); border-radius: 4px; padding: 20px 22px; margin-bottom: 18px; } .rp-next strong { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; } .rp-next p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--s-steel); }
.report-ledger .ledger-foot { border-radius: 0 0 4px 4px; }
@media (max-width: 600px) { .rp-block, .rp-break, .rp-loss, .rp-action, .rp-rule { padding-left: 20px; padding-right: 20px; } .rp-block--tight { padding: 16px 20px 0; } .rp-loss { flex-direction: column; gap: 10px; } .rp-amount { text-align: left; font-size: 24px; } .rp-table .verdict { font-size: 12px; } }

/* ══ Passage au relevé des blocs hérités des pages secondaires (cartes → cellules à filets, 4 px, un seul indigo) ══ */
/* Grilles de cartes : un seul cadre, des cellules séparées par des filets */
.grid-3, .grid-2, .explainer-grid, .summary-grid, #confiance ~ * .steps, .steps { gap: 0 !important; background: #fff; border: 1px solid var(--s-frost); border-radius: 4px; overflow: hidden; }
.grid-3 > .card, .grid-3 > .feature-card, .grid-2 > .card, .explainer-item, .summary-card, .steps > .step {
  border: 0 !important; border-left: 1px solid var(--s-frost) !important; border-top: 1px solid var(--s-frost) !important; border-radius: 0 !important; box-shadow: none !important;
  background: #fff !important; padding: 28px 32px 30px !important; transform: none !important; transition: background .3s var(--g-ease-io) !important; font-family: var(--s-font); }
.grid-3 > :nth-child(3n+1), .steps > :nth-child(4n+1), .grid-2 > :nth-child(2n+1), .explainer-grid > :nth-child(2n+1), .summary-grid > :nth-child(3n+1) { border-left: 0 !important; }
.grid-3 > :nth-child(-n+3), .steps > :nth-child(-n+4), .grid-2 > :nth-child(-n+2), .explainer-grid > :nth-child(-n+2), .summary-grid > :nth-child(-n+3) { border-top: 0 !important; }
.grid-3 > .card:hover, .grid-3 > .feature-card:hover, .grid-2 > .card:hover, .explainer-item:hover, .summary-card:hover, .steps > .step:hover { background: var(--s-mist) !important; transform: none !important; box-shadow: none !important; }
.card h4, .feature-card h4, .explainer-item h4, .summary-card h4, .step h4 { font-family: var(--s-font) !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: -0.2px; color: var(--s-ink) !important; margin: 14px 0 8px !important; line-height: 1.3; }
.card p, .feature-card p, .explainer-item p, .summary-card p, .step p { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--s-slate) !important; margin: 0 !important; font-weight: 300; }
.card .num, .step .n { font-family: var(--s-font) !important; font-size: 26px !important; font-weight: 300 !important; color: var(--s-indigo) !important; background: transparent !important; border: 0 !important; width: auto !important; height: auto !important; letter-spacing: -0.5px; line-height: 1.1; margin: 0 !important; font-variant-numeric: tabular-nums; }
.feature-icon, .summary-icon { width: 40px !important; height: 40px !important; border-radius: 4px !important; background: var(--s-wash) !important; color: var(--s-indigo) !important; display: grid !important; place-items: center; font-size: 17px !important; margin: 0 !important; border: 0 !important; }
.summary-icon svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .grid-3, .grid-2, .explainer-grid, .summary-grid, .steps { grid-template-columns: 1fr !important; }
  .grid-3 > *, .grid-2 > *, .explainer-grid > *, .summary-grid > *, .steps > * { border-left: 0 !important; border-top: 1px solid var(--s-frost) !important; padding: 22px 20px 24px !important; }
  .grid-3 > :first-child, .grid-2 > :first-child, .explainer-grid > :first-child, .summary-grid > :first-child, .steps > :first-child { border-top: 0 !important; }
}
/* Encadrés : brume, filet, 4 px — plus d'orange ni de vert */
.deal, .notice-box, .highlight-box, .contact-box, .callback-card, .calc-card, .result-card, .diagnosis-box { background: var(--s-mist) !important; border: 1px solid var(--s-frost) !important; border-radius: 4px !important; box-shadow: none !important; color: var(--s-ink) !important; }
.callback-card, .calc-card, .result-card { background: #fff !important; }
.deal h4, .notice-box h4, .highlight-box h4, .highlight-box strong, .contact-box h3, .contact-box h4 { font-family: var(--s-font) !important; font-weight: 500 !important; color: var(--s-ink) !important; font-size: 16px; }
.deal li, .notice-box p, .highlight-box p, .contact-box p { color: var(--s-steel) !important; font-size: 14.5px; line-height: 1.6; }
.deal ul { margin: 10px 0 0; padding: 0; list-style: none; } .deal li { padding: 8px 0; border-top: 1px solid var(--s-frost); } .deal li:first-child { border-top: 0; }
.hero-badge, .page-hero .notice { background: var(--s-wash) !important; color: var(--s-indigo) !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; }
/* Calculateur : résultats en relevé */
.result-card { --green: var(--s-indigo); --orange: var(--s-steel); --red: var(--s-ink); --primary: var(--s-indigo); }
.result-card h2, .calc-card h2 { font-family: var(--s-font) !important; font-weight: 500 !important; font-size: 18px !important; color: var(--s-ink) !important; }
.result-roas-number { font-family: var(--s-font) !important; font-weight: 300 !important; font-size: 56px !important; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.result-roas-label { color: var(--s-slate) !important; font-size: 13px !important; }
.result-row { border-bottom: 1px solid var(--s-frost) !important; padding: 12px 0 !important; }
.result-label { color: var(--s-slate) !important; font-size: 14px !important; } .result-value { font-family: var(--s-font) !important; font-weight: 400 !important; color: var(--s-ink) !important; font-variant-numeric: tabular-nums; }
.result-value.green { color: var(--s-indigo) !important; } .result-value.orange { color: var(--s-steel) !important; } .result-value.red { color: var(--s-ink) !important; }
.diagnosis-box { padding: 16px 18px 16px 22px !important; font-size: 14.5px; line-height: 1.6; position: relative; }
.diagnosis-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 4px 0 0 4px; background: var(--s-ink); }
.diagnosis-box.green::before { background: var(--s-indigo); } .diagnosis-box.orange::before { background: var(--s-lavender); }
.diagnosis-box strong { font-weight: 500; }
/* Tableau comparatif : même langage que la table du relevé */
.compare-table { border: 1px solid var(--s-frost) !important; border-radius: 4px !important; font-family: var(--s-font); }
.compare-table th { background: #fff !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .5px; text-transform: uppercase; color: var(--s-smoke-text) !important; border-bottom: 1px solid var(--s-frost) !important; }
.compare-table td { font-size: 14.5px !important; font-weight: 300; color: var(--s-ink) !important; border-bottom: 1px solid var(--s-frost) !important; }
.compare-table td strong { font-weight: 400; }
.compare-table .fa-check, .compare-table .check-y { color: var(--s-indigo) !important; } .compare-table .fa-minus, .compare-table .check-n { color: var(--s-smoke) !important; }
/* FAQ : titres de catégorie en kicker, questions à filets */
.faq-category-title { font-family: var(--s-font) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .5px; text-transform: uppercase; color: var(--s-smoke-text) !important; border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 8px !important; display: block !important; }
.faq-item { border: 0 !important; border-bottom: 1px solid var(--s-frost) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; background: transparent !important; }
.faq-item .faq-q { padding: 20px 0 !important; font-size: 17px !important; font-weight: 500 !important; background: transparent !important; }
.faq-item .faq-a { padding: 0 0 22px !important; color: var(--s-slate) !important; font-size: 15.5px; line-height: 1.65; }
/* Accueil : tarifs en relevé */
.pricing-card, .upsell-card { border: 1px solid var(--s-frost) !important; border-radius: 4px !important; box-shadow: none !important; }
.pricing-card:hover, .upsell-card:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 48px -32px rgba(6,27,49,.25) !important; }
.pricing-tag { background: var(--s-wash) !important; color: var(--s-indigo) !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; }
.pricing-name { font-family: var(--s-font) !important; font-weight: 500 !important; }
.pricing-price { font-family: var(--s-font) !important; font-weight: 300 !important; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.pricing-feature i, .pricing-feature .fa-check { color: var(--s-indigo) !important; }
.pricing-feature { border-top: 1px solid var(--s-frost); padding: 11px 0 !important; } .pricing-feature:first-child { border-top: 0; }
/* Icônes des listes à coches : un seul indigo */
.check, .check-y, .hero-trust i, .hero-points i, .checklist i, .cta-reassurance i { color: var(--s-indigo) !important; }