/* ============================================================
   Belyo | Landing page
   ============================================================ */

/* --- Hero ---
   Fond calme : l'orange est réservé au dernier appel à l'action.
   Le diagnostic est le seul élément levé de cet écran. */
.hero {
  padding: 72px 0 84px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.15rem, 4.2vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 17ch;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 20px;
}
.hero .lede {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 26px;
}
.hero .lede sup { font-size: 0.6em; }
.hero-form .diag-widget { box-shadow: var(--shadow-forte); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 48px 0 56px; }
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-note { font-size: 0.85rem; color: var(--ink-soft); }

.reassurance-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.reassurance-list li {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.reassurance-list li::before { content: "✓"; color: var(--done); font-weight: 700; }

.hero-solo-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.hero-solo-inner .lede { margin-left: auto; margin-right: auto; }
.hero-solo-inner .hero-ctas { justify-content: center; }
.hero-solo-inner .reassurance-list { justify-content: center; }
.hero-solo-inner .hero-note { max-width: 60ch; margin: 0 auto; }

.diag-section { padding: 8px 0 64px; }
.diag-widget-wrap { max-width: 560px; margin: 0 auto; }

.hero-visual {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.hero-visual-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* --- Reveal on scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Un titre aligné à gauche au-dessus d'un contenu centré donne deux axes de
   lecture concurrents. Là où l'interrupteur et la carte sont centrés, le
   titre et son chapeau le sont aussi. */
.section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Avant / après (toggle) --- */
.ba-toggle {
  display: flex;
  width: fit-content;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 28px;
}
.ba-tab {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ba-tab.active { background: var(--ink); color: #fff; }

.ba-panel-wrap { max-width: 680px; margin: 0 auto; }
.ba-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.ba-list { list-style: none; margin: 0; padding: 0; }
.ba-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ba-list li:last-child { border-bottom: none; }
.ba-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; margin-top: 1px; }
.ba-list-bad .ba-mark { background: var(--urgent-soft); color: var(--urgent); }
.ba-list-good .ba-mark { background: var(--done-soft); color: var(--done); }
@media (max-width: 560px) {
  .ba-panel { padding: 24px 20px; }
}

/* --- Big stat callout --- */
/* Respiration éditoriale : pas de carte, pas de dégradé.
   Le chiffre porte seul, l'accent sert d'encre et non de fond. */
/* La mesure était fixée à 30 caractères et comptait sur text-wrap: balance
   pour rester lisible. Safari n'applique cette propriété qu'à partir de la
   version 17.5 : ailleurs, le texte tombait en escalier. La mesure est
   maintenant assez large pour bien se couper toute seule, et l'équilibrage
   ne fait qu'améliorer le résultat là où il existe. */
.big-stat {
  text-align: center;
  max-width: 42ch;
  margin: 0 auto;
}
.big-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.big-stat-label {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 38ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* --- Safe / secure list --- */
.safe-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
.safe-item { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.safe-icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.safe-icon svg { width: 19px; height: 19px; }
.safe-item h4 { font-size: 1rem; margin-bottom: 6px; }
.safe-item p { font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .safe-list { grid-template-columns: 1fr; }
}

/* --- Stats banner --- */
.stats-banner {
  background: var(--ink);
  color: #fff;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px 0;
  text-align: center;
}
.stat-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 26px 18px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.stat-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(232,85,30,0.5);
  background: rgba(255,255,255,0.06);
}
.stat-icon {
  width: 34px; height: 34px;
  margin: 0 auto 14px;
  border-radius: 9px;
  background: rgba(232,85,30,0.16);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 17px; height: 17px; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: #fff;
}
.stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* --- Problem section --- */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.problem-grid .card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.problem-grid .card p { color: var(--ink-soft); font-size: 0.95rem; }

.callout {
  display: flex;
  gap: 16px;
  background: var(--warn-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 32px;
}
.callout-icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--warn);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.callout h4 { font-size: 1rem; color: var(--warn); margin-bottom: 6px; }
.callout p { color: #6b551d; font-size: 0.92rem; }

@media (max-width: 760px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* --- How it works: scroll timeline --- */
#comment .container { max-width: 1440px; }
.solution-product-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}
.solution-product-visual {
  position: sticky;
  top: 96px;
}
.solution-product-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 14px;
}
@media (max-width: 1240px) {
  .solution-product-grid { grid-template-columns: 1fr; gap: 48px; }
  .solution-product-visual { position: static; }
  #comment .container { max-width: 1120px; }
}
.steps-timeline {
  position: relative;
}
.steps-track {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}
.steps-track-progress {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
}
.step-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  padding-bottom: 40px;
}
/* Ces grands intervalles n'ont de sens que si le panneau reste collé à
   l'écran pendant qu'on descend : c'est lui qui occupe la hauteur. En
   dessous de 1241 px il passe sous la liste, et les mêmes intervalles ne
   laissaient plus qu'un long couloir vide à faire défiler. */
@media (min-width: 1241px) {
  .solution-product-grid .step-row { padding-bottom: 380px; }
  /* La dernière étape a besoin qu'il reste de la hauteur sous elle : sans
     cette réserve, la colonne de droite se décolle et l'étape « Dossier »
     remonte hors de l'écran au moment précis où on la lit. */
  .solution-product-grid .step-row:last-child { padding-bottom: max(280px, calc(100vh - 460px)); }
}
.step-row:last-child { padding-bottom: 0; }
.step-dot {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.step-row.active .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
/* L'étape en cours de lecture est celle que le panneau de droite affiche.
   Sans ce repère, quatre pastilles allumées ne disent plus laquelle on
   regarde. */
.step-row.current .step-dot { box-shadow: 0 0 0 6px rgba(232, 85, 30, 0.16); }
@media (min-width: 1241px) {
  .step-row.active:not(.current) .step-content { opacity: 0.5; }
}
.step-content {
  flex: 1;
  padding-top: 6px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.step-row.active .step-content { opacity: 1; transform: translateX(0); }
.step-content h4 { font-size: 1rem; margin-bottom: 6px; }
.step-content p { font-size: 0.9rem; color: var(--ink-soft); }

/* Sans le panneau collé à droite, les quatre étapes tiennent dans un seul
   écran : les révéler une à une cacherait la dernière à quelqu'un qui ne
   descend pas plus bas. */
@media (max-width: 1240px) {
  .step-content { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step-content, .step-dot { transition: none; }
}

/* --- Product screenshot --- */
.product-shot {
  max-width: 1040px;
  margin: 0 auto;
}
.product-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.embed-tool-frame {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-levee);
  padding: 32px;
  overflow: hidden;
}
.embed-tool-frame .diagram-panel { top: 108px; }
@media (max-width: 640px) {
  .embed-tool-frame { padding: 20px; }
}

/* Collé à l'écran, le panneau doit tenir dans la fenêtre. L'étape « Dossier »
   mesure près de 1900 px : sur un portable de 14 ou 16 pouces, sa fin n'était
   jamais visible, et la page entière devait défiler pour en sortir. La carte
   tient désormais dans la hauteur disponible, et c'est la zone de l'étape qui
   défile, pas le site. */
@media (min-width: 1241px) {
  .embed-tool-frame {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
    padding: 22px;
  }
  .embed-tool-frame > #step-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .embed-tool-frame .diagram-panel { top: 0; }
  /* Dans une démonstration, les réglages de la société et la note de délai
     ne servent qu'à occuper de la place : la hauteur va à l'étape. */
  #inlineToolEmbed #company-settings,
  #inlineToolEmbed .deadline-legal-note { display: none; }
}
.product-shot-caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* --- Dashboard mockup (fiduciaires) --- */
.dash-mockup {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px;
  margin-bottom: 32px;
}
.dash-mockup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
}
.dash-mockup-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.dash-mockup-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 4px;
}
.dm-name { font-size: 0.9rem; font-weight: 500; }
.dm-deadline { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); text-align: right; min-width: 90px; }
@media (max-width: 640px) {
  .dash-mockup-row { grid-template-columns: 1fr; gap: 6px; }
  .dm-deadline { text-align: left; }
}

/* --- Fiduciaires section --- */
.fiduciaires-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fid-card { display: flex; flex-direction: column; gap: 10px; }
.fid-card .fid-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.fid-card h3 { font-size: 1.02rem; }
.fid-card p { color: var(--ink-soft); font-size: 0.92rem; }
.fid-card .ref { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }

@media (max-width: 900px) {
  .fiduciaires-grid { grid-template-columns: 1fr; }
}

/* --- Final CTA --- */
.final-cta {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  max-width: 1120px;
  margin: 0 auto;
}
/* Le libellé de l'appel à l'action est long : il doit pouvoir se couper,
   sinon il sort de l'encadré dès que la fenêtre se resserre. */
.final-cta .btn { white-space: normal; }
@media (max-width: 560px) {
  .final-cta { padding: 40px 20px; }
}
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.78); max-width: 50ch; margin: 0 auto 28px; }
.final-cta .btn-primary { background: #fff; color: var(--accent); }
.final-cta .btn-primary:hover { background: #eef2f5; }
.final-cta .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.final-cta .btn-secondary:hover { border-color: #fff; color: #fff; }
.final-cta-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Diagnostic widget --- */
.diag-widget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
}
.diag-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.diag-kicker::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.diag-widget h3 { font-size: 1.25rem; margin-bottom: 22px; }
.diag-question {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.diag-options { display: flex; flex-direction: column; gap: 10px; }
.diag-option {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.diag-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 12px 24px -16px rgba(232, 85, 30, 0.45);
  transform: translateY(-1px);
}
.diag-option::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  transition: border-color 0.15s ease;
}
.diag-option:hover::before { border-color: var(--accent); }
.diag-option::after {
  content: "→";
  margin-left: auto;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.diag-option:hover::after { opacity: 1; transform: translateX(0); }
.diag-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.diag-progress span {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--line-soft);
  transition: background 0.2s ease;
}
.diag-progress span.active { background: var(--accent); }
.diag-back {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  text-decoration: underline;
}

.diag-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.diag-result-badge.tone-info { background: var(--accent-soft); color: var(--accent); }
.diag-result-badge.tone-check { background: var(--done-soft); color: var(--done); }
.diag-result-badge.tone-warn { background: var(--warn-soft); color: var(--warn); }
.diag-result p { font-size: 0.95rem; color: var(--ink); margin-bottom: 20px; }
.diag-result-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
/* « Commencer ma cartographie » laissait croire que le diagnostic avait déjà
   analysé la société, alors qu'il n'en connaît même pas le nom. Cette ligne
   dit où l'on en est et ce qui vient ensuite. */
.diag-result-suite {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

/* --- Value props (reassurance framing) --- */
.value-row {
  display: flex;
  gap: 0;
}
.value-item {
  flex: 1;
  text-align: left;
  padding: 0 28px;
  border-left: 1px solid var(--line);
}
.value-item:first-child { padding-left: 0; border-left: none; }
.value-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 10px;
}
.value-item h4 { font-size: 0.98rem; margin-bottom: 6px; }
.value-item p { font-size: 0.86rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .value-row { flex-wrap: wrap; row-gap: 28px; }
  .value-item { flex: 0 0 calc(50% - 14px); }
  .value-item:nth-child(2) { border-left: 1px solid var(--line); padding-left: 28px; }
  .value-item:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .value-item { flex: 0 0 100%; border-left: none !important; padding-left: 0 !important; }
}

/* --- Cost comparison --- */
.compare-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  text-align: center;
}
.compare-item .compare-label { font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.compare-item .compare-value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.compare-old .compare-value { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--urgent); text-decoration-thickness: 2px; }
.compare-arrow { font-size: 1.3rem; color: var(--ink-soft); }
.compare-new .compare-value { color: var(--done); }
.compare-note-sub { font-size: 0.76rem; color: var(--ink-soft); margin-top: 4px; }

/* --- Pricing --- */
.pricing-intro {
  display: flex;
  gap: 16px;
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 40px;
}
.pricing-intro p { font-size: 0.92rem; color: var(--ink); margin: 0; }
.pricing-intro p strong { color: var(--accent); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pricing-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 780px;
  margin: 0 auto;
}
.price-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  background: linear-gradient(150deg, var(--accent) 0%, #f1793f 65%, #f6975e 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-levee);
  position: relative;
}
.price-card.featured .price-tagline,
.price-card.featured .price-note { color: rgba(255,255,255,0.75); }
.price-card.featured .price-list li { border-bottom-color: rgba(255,255,255,0.16); color: #fff; }
.price-card.featured h3 { color: #fff; }
.price-card.featured .price-amount span { color: rgba(255,255,255,0.75); }
.price-card.featured .btn-secondary { background: #fff; color: var(--accent); border-color: transparent; }
.price-card.featured .btn-secondary:hover { background: #eef2f5; }
.price-featured-tag {
  position: absolute;
  top: -12px; left: 26px;
  background: #fff;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.price-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.price-tagline { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 18px; min-height: 3.1em; }
.price-list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.price-list li {
  font-size: 0.88rem;
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.price-list li:last-child { border-bottom: none; }
.price-amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.price-amount span { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); }
.price-note { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 4px; }
.price-save {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 18px;
}
.price-card.featured .price-save { color: #fff; }
.price-scope {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--panel-soft, rgba(0,0,0,0.04));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 16px;
}
.price-card.featured .price-scope {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}
.price-scope-unlimited {
  color: var(--accent);
  background: var(--accent-soft, rgba(0,0,0,0.04));
  border-color: var(--accent);
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid-2 { max-width: none; }
}

/* --- Belyo Fiduciaire : carte à tarif évolutif --- */
/* La carte fiduciaire occupait toute la largeur sous les deux autres. Elle
   rejoint la grille : son en-tête, prévu pour une bande horizontale, s'empile
   donc comme celui des autres offres. */
.price-card-fid {
  max-width: none;
  margin: 0;
}
.fid-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.fid-head .price-tagline { min-height: 0; margin-bottom: 0; max-width: none; }
.fid-price-box { text-align: left; }
.fid-feature-list li { font-size: 0.88rem; }
.fid-slider-wrap { padding: 14px 16px 12px; }
.fid-slider-top { flex-wrap: wrap; gap: 4px 10px; }

/* Les trois offres n'ont pas le même nombre d'arguments. Sans cela, prix et
   boutons se retrouvent à des hauteurs différentes d'une colonne à l'autre :
   la liste absorbe l'espace libre pour que tout ce qui suit s'aligne. */
.price-card { display: flex; flex-direction: column; }
.price-card .price-list { flex: 1 0 auto; }
.fid-price-box .price-amount { margin-bottom: 2px; }
.fid-price-box .price-note { margin-bottom: 0; }
.fid-slider-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px 14px;
  margin-bottom: 24px;
}
.fid-slider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.fid-slider-top span:last-child { color: var(--accent); font-weight: 600; }
.fid-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
  margin: 0;
}
.fid-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(27,36,48,0.3);
  cursor: pointer;
}
.fid-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(27,36,48,0.3);
  cursor: pointer;
}
.fid-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 8px;
}
.fid-feature-list {
  columns: 2;
  column-gap: 24px;
  margin-bottom: 20px;
}
.fid-feature-list li { break-inside: avoid; }
.fid-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 10px 0 0;
}
@media (max-width: 640px) {
  .fid-head { flex-direction: column; }
  .fid-price-box { text-align: left; }
  .fid-feature-list { columns: 1; }
}

/* Les deux issues d'un même moment : acheter, ou essayer d'abord. Côte à
   côte et centrées sous les trois arguments ; empilées dès qu'elles ne
   tiennent plus sur une ligne. */
.fid-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
@media (max-width: 520px) {
  .fid-actions { flex-direction: column; align-items: stretch; }
  .fid-actions .btn { width: 100%; }
}

/* --- COMPARISON TABLE --- */
.compare-table-hint {
  display: none;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 20px 0 -8px;
  text-align: right;
}
.compare-table-hint.visible { display: block; }
.compare-table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 560px;
}
.compare-table th, .compare-table td {
  padding: 10px 16px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th {
  background: var(--panel);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.compare-table .ct-label { color: var(--ink-soft); font-weight: 500; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }

/* --- FAQ --- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px 22px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--accent);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--ink-soft); font-size: 0.9rem; padding-bottom: 18px; margin: 0; }

/* --- Trust / legal section --- */
.trust-banner {
  display: flex;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 40px;
}
.trust-banner p { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin: 0; }
.trust-banner strong { color: #fff; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.trust-block h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.trust-block dl { margin: 0; font-size: 0.92rem; }
.trust-block dt { color: var(--ink-soft); font-size: 0.8rem; margin-top: 10px; }
.trust-block dt:first-child { margin-top: 0; }
.trust-block dd { margin: 2px 0 0; color: var(--ink); }
.trust-location { display: flex; align-items: center; gap: 8px; }
.ch-cross { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.trust-block ul { margin: 0; padding: 0; list-style: none; }
.trust-block ul li { margin-bottom: 10px; }
.trust-block ul a { font-size: 0.92rem; text-decoration: none; }
.trust-block ul a:hover { text-decoration: underline; }
.placeholder-value { color: var(--warn); font-style: italic; }

@media (max-width: 760px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* Le tableau comparatif reprend les mêmes informations que les cartes :
   disponible pour qui veut vérifier, replié pour ne pas allonger la page. */
.compare-details { margin-top: 28px; }
.compare-details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.compare-details > summary::-webkit-details-marker { display: none; }
.compare-details > summary::after { content: "＋"; font-size: 0.85em; }
.compare-details[open] > summary::after { content: "−"; }
.compare-details > summary:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- « Ce que vous obtenez » sur petit écran ---------------- */

/* La démonstration interactive est une application de bureau : réduite à la
   largeur d'un téléphone, elle devient illisible et dessert la démonstration.
   En dessous de 900px on la remplace par ce qu'elle est censée prouver. */
.product-mobile { display: none; }

@media (max-width: 900px) {
  .product-shot { display: none; }
  .product-mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }
  .product-mobile li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px;
  }
  .product-mobile .pm-num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .product-mobile strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.98rem;
    margin-bottom: 4px;
  }
  .product-mobile p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
}

/* ---------------- Diagnostic : étape adresse e-mail ---------------- */

.diag-hint {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 16px;
}
.diag-email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.diag-email-form input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--panel);
  color: var(--ink);
}
.diag-email-form input:focus { outline: none; border-color: var(--accent); }
.diag-email-form input[aria-invalid="true"] { border-color: var(--urgent); }
.diag-email-form button { flex: 0 0 auto; }
.diag-email-error {
  margin: 10px 0 0;
  font-size: 0.83rem;
  color: var(--urgent);
}
/* Garder son résultat.
   Le résultat s'affichait autrefois seulement après avoir laissé son adresse.
   Un visiteur qui refusait repartait sans rien, et nous sans rien non plus :
   ni son adresse, ni sa visite. Le résultat est donc donné d'abord, et
   l'adresse demandée ensuite, sous un filet séparateur pour qu'on voie bien
   que la réponse est déjà acquise et que ceci vient en plus. */
.diag-garder {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.diag-garder .diag-hint { margin-bottom: 12px; }
.diag-email-merci {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--done);
}

.diag-email-legal {
  margin: 14px 0 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .nav-court { display: none; }

/* Deux boutons pleins plus les liens de navigation ne tiennent pas sous
   1040px. Le bouton secondaire ne disparaît pas pour autant : il se
   dépouille et raccourcit son libellé. Le faire disparaître renvoyait
   l'accès au compte au pied de page, c'est-à-dire, sur un téléphone,
   après toute la page d'accueil. Un client qui revient ne doit pas avoir
   à faire défiler une page de vente pour retrouver son espace. */
@media (max-width: 1040px) {
  .nav-actions .btn-secondary {
    border: none;
    background: none;
    padding: 8px 2px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .nav-actions .btn-secondary:hover { color: var(--accent); }
  .nav-actions .nav-long { display: none; }
  .nav-actions .nav-court { display: inline; }
}

/* ---------------- « Pourquoi maintenant » : la loi est encore mal connue ---------------- */

.urgence { max-width: 900px; margin: 0 auto; }
.urgence-tete { margin-bottom: 28px; }
.urgence-tete .badge { margin-bottom: 16px; }
.urgence-tete h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  max-width: 24ch;
  margin-bottom: 14px;
}
.urgence-tete p {
  color: var(--ink-soft);
  font-size: 1.04rem;
  max-width: 62ch;
}

.urgence-compteur {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--urgent);
  border-radius: var(--radius-lg);
  background: var(--panel);
  margin-bottom: 28px;
}
.uc-bloc { text-align: center; flex: 0 0 auto; }
.uc-valeur {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
}
.uc-valeur.uc-envigueur { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.uc-label {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 14ch;
  margin-inline: auto;
}
.uc-sep { width: 1px; align-self: stretch; background: var(--line); }
.uc-texte { flex: 1 1 260px; min-width: 0; }
.uc-texte p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.uc-texte strong { color: var(--ink); }

.urgence-faits {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.urgence-faits li {
  padding-top: 16px;
  border-top: 2px solid var(--line);
}
.urgence-faits strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin-bottom: 6px;
}
.urgence-faits p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .urgence-faits { grid-template-columns: 1fr; gap: 16px; }
  .uc-sep { display: none; }
}

/* Les sources officielles. Trois liens orange soulignés à la queue leu
   leu ressemblaient à des liens de bas de page publicitaire, pour des
   références légales, dont tout l'intérêt est d'inspirer confiance,
   c'était l'effet exactement inverse.
   Même intitulé barré d'un filet que le bloc de presse, pour que les deux
   se répondent, et des tuiles sobres où le nom de la source passe avant
   le lien. */
.urgence-sources { margin-top: 30px; }
.urgence-sources ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.urgence-sources li { margin: 0; }
.urgence-sources a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.urgence-sources a:hover { border-color: var(--line); background: var(--panel); }
.urgence-sources a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.src-nom {
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* La flèche ne signale que ce qui quitte le site. */
.urgence-sources a[target="_blank"] .src-nom::after {
  content: " ↗";
  color: var(--ink-soft);
  font-weight: 400;
}
.urgence-sources a:hover .src-nom { color: var(--accent); }
.src-note {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .urgence-sources ul { grid-template-columns: 1fr; }
}

.us-titre {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.urgence-sources ul { list-style: none; margin: 0; padding: 0; }
.us-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.footer-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }

/* Presse et associations professionnelles.
   Le bloc est placé juste sous le titre de la section, avant le compteur : la
   phrase « presque personne n'en parle encore » appelle immédiatement la preuve
   que des tiers, eux, en parlent. Tenu à part des sources officielles, qui
   n'ont pas le même statut. */
.urgence-presse { margin-bottom: 30px; }

/* Intitulé barré d'un filet : donne du poids au bloc sans lui voler la
   hiérarchie du h2 qui le précède. */
.up-intitule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.up-intitule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.urgence-presse ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.urgence-presse li { margin: 0; }

/* Toute la tuile est cliquable : le logo comme le titre mènent à l'article. */
.up-lien {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  height: 100%;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.up-lien:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-levee);
}
.up-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tant que le logo n'est pas déposé, le nom du titre s'affiche en toutes
   lettres. Le script le remplace par l'image dès qu'elle existe, jamais
   d'icône d'image cassée entre-temps. */
.up-marque {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  min-height: 34px;
}
.up-marque img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.up-titre {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.up-lien:hover .up-titre { color: var(--accent); }

/* Repoussé en bas de tuile pour que les deux cartes s'alignent même quand les
   titres d'articles n'ont pas le même nombre de lignes. */
.up-lire {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.up-lire::after { content: " ↗"; }
.up-lien:hover .up-lire { color: var(--accent); }
@media (max-width: 760px) {
  .urgence-presse ul { grid-template-columns: 1fr; gap: 14px; }
  .up-lien { padding: 16px 18px; }
}
}

/* La formule gratuite se dit en toutes lettres sous le titre des prix :
   la cacher ferait fuir ceux dont le cas est trivial, et ce sont eux qui
   parlent de vous à ceux dont le cas ne l'est pas. */
.offre-gratuite {
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.offre-gratuite a { color: var(--accent); font-weight: 500; }

/* ---------------- Témoignages ----------------
   Placés juste avant les prix : c'est là que le visiteur se demande si
   ça vaut CHF 149.–, et c'est là qu'un pair qui a déjà franchi le pas
   pèse plus que n'importe quel argument de notre part. */
.temoignages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.temoignage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 26px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.temoignage blockquote {
  margin: 0;
  flex: 1;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink);
}
/* Les guillemets français, posés en retrait pour ne pas décaler le texte. */
.temoignage blockquote::before {
  content: "« ";
  color: var(--accent);
}
.temoignage blockquote::after { content: " »"; color: var(--accent); }

/* L'attribution sous un filet : elle se lit après la citation, pas avec. */
.tm-auteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
/* Le nom du client s'affiche en toutes lettres tant que son logo n'a pas
   été déposé : jamais d'icône cassée, et la page reste lisible sans lui. */
.tm-marque {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  min-height: 26px;
}
.tm-marque img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
.tm-nom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.tm-role {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
@media (max-width: 980px) {
  .temoignages { grid-template-columns: 1fr; gap: 16px; }
  .temoignage { padding: 22px 20px 18px; }
}

/* ---------------- La carte fiduciaire, pleine largeur ----------------
   Elle sortait mal d'une grille à trois colonnes : c'est l'offre qui
   rapporte le plus, et la seule dont les avantages ne tiennent pas dans
   un tiers de largeur. Lui donner toute la ligne est le signal de
   prééminence le plus simple : plus grand se lit avant plus coloré. */
.fid-large {
  margin-top: 24px;
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--panel) 42%);
  padding: 26px 30px 22px;
}
.fid-tag {
  background: var(--accent);
  color: #fff;
  border: none;
}
/* L'étiquette « Pour les fiduciaires » déborde de 12 px au-dessus de la
   carte : Chrome en tient compte pour caler une ancre, et le bouton
   « Voir le tarif fiduciaire » faisait atterrir le titre sous l'en-tête
   collé. Cette réserve rend les pixels que l'étiquette avait pris. */
.fid-large { scroll-margin-top: 40px; }
.fid-unitaire {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--accent-hover);
  font-weight: 600;
}
/* Huit avantages sur une colonne feraient une liste interminable ; sur
   deux, l'œil embrasse l'ensemble sans avoir à tout lire. */
.fid-large .fid-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 14px;
  margin-bottom: 12px;
}
.fid-large .fid-feature-list li {
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 8px 0;
}
.fid-large .fid-feature-list li strong { font-weight: 600; }
.fid-large .fid-head { align-items: flex-start; gap: 32px; }
.fid-large .fid-head .price-tagline { font-size: 0.98rem; max-width: 52ch; }
.fid-large .fid-note { margin-top: 12px; }

/* La carte mesurait 899 px : sur un portable de 16 pouces, il fallait la
   faire défiler pour arriver au bouton. Le prix remonte à côté du titre au
   lieu de s'empiler dessous, ce qui rend à la carte la hauteur d'un écran. */
@media (min-width: 861px) {
  .fid-large .fid-head {
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 16px;
  }
  .fid-large .fid-price-box {
    flex: none;
    width: 300px;
    padding-top: 4px;
  }
  .fid-large .fid-slider-wrap {
    padding: 14px 20px 12px;
    margin-bottom: 16px;
  }
}
/* Un bouton qui traverse toute la carte serait disgracieux sur une ligne
   aussi large ; bridé sans consigne d'alignement, il se collait à gauche et
   avait l'air d'un oubli. Centré, comme la mention qui le précède. */
.fid-large .btn-block {
  margin: 14px auto 0;
  max-width: 340px;
}
@media (max-width: 860px) {
  .fid-large { padding: 26px 20px 24px; }
  .fid-large .fid-feature-list { grid-template-columns: 1fr; gap: 0; }
  .fid-large .btn-block { max-width: none; }
}
/* Le conseil qui renvoie vers l'autre offre n'est pas un argument de vente :
   il se lit en gris, comme une note, pas en accent comme un prix. */
.fid-unitaire.fid-conseil {
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 48ch;
  line-height: 1.5;
}

/* ---------------- Page d'erreur ----------------
   Une page 404 ne doit pas s'excuser, elle doit relancer : le visiteur
   cherchait quelque chose, on lui propose les trois endroits où il peut
   raisonnablement le trouver. */
.erreur-404 { max-width: 640px; margin: 40px auto 0; }
.erreur-404 h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 16px 0 14px;
}
.erreur-404 .lede { font-size: 1.04rem; color: var(--ink-soft); margin-bottom: 30px; }
.erreur-liens { display: flex; flex-direction: column; gap: 12px; }
.erreur-lien {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.erreur-lien:hover { border-color: var(--accent); transform: translateY(-1px); }
.erreur-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.el-titre { font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }
.el-titre::after { content: " →"; color: var(--ink-soft); font-weight: 400; }
.erreur-lien:hover .el-titre { color: var(--accent); }
.el-note { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.erreur-contact { margin-top: 26px; font-size: 0.9rem; color: var(--ink-soft); }

/* Le piège à robots. Il doit être absent visuellement et pour les lecteurs
   d'écran, mais présent dans le code : un robot lit le code, pas l'écran.
   « display:none » serait plus simple, mais certains automates ignorent
   justement les champs ainsi masqués. */
#diagSociete {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}