/* =============================================================================
   site.css — QR Code by Belentia, portage v3.3 (24/09/2026)
   Chargée par layouts/vitrine APRÈS base.css et la feuille de la page.
   1. l'ancien système « Canopée » (.ld-*) re-stylé avec les jetons v3.3 :
      blanc pur, encre #111827, filets #E6E8EE, rayon 14, indigo en touches,
      AUCUNE ombre, aucun filet latéral coloré, aucune bande sombre ;
   2. quelques gabarits partagés (lecture, formulaire, atterrissage).
   ========================================================================== */

:root { --accent: #4F46E5; --chip-bg: #F2F3F5; }

/* ---------- Socle ---------- */
.ld-container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.skip-to-content { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; text-decoration: none; transition: top .18s; }
.skip-to-content:focus { top: 12px; }
.ld-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rv { opacity: 1; transform: none; }
main#main-content { display: block; min-height: 50vh; }

/* ---------- Boutons ---------- */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 10px 20px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ld-btn:hover { text-decoration: none; }
.ld-btn-primary { background: var(--accent); color: var(--accent-ink); }
.ld-btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.ld-btn-ghost { background: #fff; color: var(--ink); border-color: var(--btn-line, #D9DCE3); }
.ld-btn-ghost:hover { background: var(--soft); border-color: var(--line-strong); color: var(--ink); }
.ld-btn-lg { min-height: 48px; padding: 12px 24px; font-size: 17px; }
.ld-btn[disabled], .ld-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ld-btn .ico { width: 18px; height: 18px; }

/* ---------- En-tête de page (hero des pages internes) ---------- */
.ld-hero { text-align: left; max-width: 820px; padding: var(--space-8) 0 var(--space-6); }
/* Pastille grise d'origine → « eyebrow » de la maquette (v31.css § 1) : gris, capitales espacées,
   point indigo de 6 px, sans fond ; l'icône Phosphor de l'ancienne pastille est masquée. */
.ld-hero-badge, .ld-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2);
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase;
}
.ld-hero-badge::before, .ld-eyebrow::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.ld-hero-badge .ico { display: none; }
[style*="text-align:center"] > .ld-hero-badge, [style*="text-align: center"] > .ld-hero-badge, .ld-cta .ld-eyebrow { justify-content: center; }
.ld-hero h1 { font-family: var(--font-title); font-weight: 700; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-2); }
.ld-hero h1 em { font-style: normal; color: var(--accent); }
.ld-hero > p { font-size: 19px; color: var(--text); max-width: 60ch; margin: 0 0 var(--space-4); }
.ld-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ld-hero-checks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); font-size: 15px; color: var(--muted); }
.ld-hero-checks span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--chip-bg); border-radius: var(--radius-pill); }
.ld-hero-checks .ico { color: var(--accent); width: 18px; height: 18px; }

/* ---------- Aperçu (fenêtre) ---------- */
.ld-mock-wrap { padding: var(--space-4) 0; }
.ld-mock { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: none; }
.ld-mock-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.ld-mock-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line); }
.ld-mock-url { margin-left: 12px; font-size: 13px; color: var(--muted); background: var(--soft); border-radius: var(--radius-pill); padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-mock-shot { display: block; width: 100%; height: auto; }

/* ---------- Cas d'usage (tuiles) ---------- */
.ld-usecases { padding: var(--space-4) 0 var(--space-2); }
.ld-usecases-label { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: var(--space-2); }
.ld-usecases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ld-usecase { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); text-decoration: none; }
a.ld-usecase:hover { border-color: var(--line-strong); text-decoration: none; }
.ld-usecase .ico { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.ld-usecase strong { display: block; font-size: 16px; color: var(--ink); font-weight: 600; }
.ld-usecase small { font-size: 14px; color: var(--muted); }

/* ---------- Sections ---------- */
.ld-section { padding: var(--section-y) 0; }
.ld-section.alt { background: #fff; border-top: 1px solid var(--line); }
.ld-section-head { max-width: 720px; margin: 0 0 var(--space-6); text-align: left; }
.ld-section-head h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(28px, 3.6vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--space-2); }
.ld-section-head p { color: var(--muted); font-size: 17px; }

/* ---------- Cartes de fonctionnalités ---------- */
.ld-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ld-feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); box-shadow: none; transition: border-color var(--t) var(--ease); }
.ld-feature:hover { border-color: var(--line-strong); box-shadow: none; transform: none; }
.ld-feature-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: var(--space-2); }
.ld-feature h3 { font-family: var(--font-title); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); line-height: 1.3; }
.ld-feature p { font-size: 16px; color: var(--text); }
.ld-feature p + p { margin-top: var(--space-1); }
.ld-feature ul { margin-top: var(--space-1); }
.ld-feature li { font-size: 15px; color: var(--text); }

/* ---------- Texte + visuel ---------- */
.ld-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.ld-split + .ld-split { margin-top: var(--space-8); }
.ld-split.flip .ld-split-visual { order: 2; }
.ld-split-text h3 { font-family: var(--font-title); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin-bottom: var(--space-2); }
.ld-split-text p { color: var(--text); margin-bottom: var(--space-2); }
.ld-split-text ul { padding: 0; list-style: none; }
.ld-split-text li { display: flex; gap: 10px; align-items: baseline; margin-bottom: var(--space-1); font-size: 16px; color: var(--text); }
.ld-split-text li .ico { color: var(--accent); flex-shrink: 0; position: relative; top: 3px; }
.ld-split-visual { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: var(--space-3); box-shadow: none; }
.ld-issue-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: 12px; background: #fff; }
.ld-issue-card:last-child { margin-bottom: 0; }
.ld-issue-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ld-issue-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.ld-issue-reco { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; line-height: 1.55; }
.ld-issue-reco .ico { color: var(--accent); flex-shrink: 0; }
.ld-issue-reco.ai { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 8px; }

/* ---------- Pastilles d'état : teinte 9 % + filet complet ---------- */
.ld-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.ld-badge.ok { background: var(--soft); border-color: var(--line); color: var(--text); }
.ld-badge.warn { background: var(--soft); border-color: var(--line); color: var(--text); }
.ld-badge.crit { background: color-mix(in srgb, #FF3B30 9%, #fff); border-color: color-mix(in srgb, #FF3B30 40%, #fff); color: #B3261E; }
.ld-badge.soon { background: color-mix(in srgb, var(--accent) 9%, #fff); border-color: color-mix(in srgb, var(--accent) 30%, #fff); color: var(--accent); }

/* ---------- Étapes ---------- */
.ld-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ld-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); position: relative; }
.ld-step-num { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 600; font-size: 17px; margin-bottom: var(--space-2); position: static; }
.ld-step h3 { font-family: var(--font-title); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.ld-step p { font-size: 16px; color: var(--text); }
.ld-step-time { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: 14px; font-weight: 600; color: var(--muted); background: var(--chip-bg); padding: 4px 12px; border-radius: var(--radius-pill); }

/* ---------- Offres ---------- */
.ld-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); align-items: stretch; }
.ld-pricing.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; margin: 0 auto; }
.ld-price { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-3); box-shadow: none; position: relative; }
.ld-price.pop { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, #fff); box-shadow: none; }
.ld-price-pop { position: absolute; top: -13px; left: var(--space-3); padding: 3px 12px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ld-price h3 { font-family: var(--font-title); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ld-price-sub { font-size: 15px; color: var(--muted); margin-bottom: var(--space-3); }
.ld-price-amount { font-family: var(--font-title); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.ld-price-amount small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ld-price ul { list-style: none; padding: 0; margin: var(--space-3) 0; flex: 1; }
.ld-price li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; color: var(--text); margin-bottom: 10px; }
.ld-price li .ico { color: var(--accent); flex-shrink: 0; position: relative; top: 3px; }
.ld-price .ld-btn { width: 100%; }

/* ---------- Tableau comparatif ---------- */
.ld-compare { max-width: 880px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.ld-compare-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-2); align-items: center; padding: 14px var(--space-3); border-bottom: 1px solid var(--line); font-size: 16px; color: var(--text); }
.ld-compare-row:last-child { border-bottom: 0; }
.ld-compare-row.head { background: #fff; font-family: var(--font-title); font-weight: 600; font-size: 15px; color: var(--ink); }
.ld-compare-row > span:nth-child(2), .ld-compare-row > span:nth-child(3) { text-align: center; }
.ld-compare-row .ico.yes { color: var(--accent); }
.ld-compare-row .ico.no { color: var(--line-strong); }
.ld-compare-row small { display: block; color: var(--muted); font-size: 14px; }

/* ---------- FAQ (composant .faq de la maquette, appliqué à .ld-faq) ---------- */
.ld-faq { max-width: 820px; margin: 0; border-top: 1px solid var(--line); }
.ld-faq details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; margin: 0; }
.ld-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 44px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--ink); }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary:hover { color: var(--accent); }
.ld-faq summary .ico { color: var(--muted); transition: transform var(--t) var(--ease); flex-shrink: 0; width: 20px; height: 20px; }
.ld-faq details[open] summary .ico { transform: rotate(45deg); color: var(--accent); }
.ld-faq details p, .ld-faq details > div { padding: 0 0 20px; color: var(--text); font-size: 16px; max-width: 68ch; }
.ld-faq details p + p { margin-top: var(--space-1); padding-top: 0; }
.ld-faq details a { font-weight: 600; }

/* ---------- Cartes de confiance ---------- */
.ld-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ld-trust-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: #fff; text-align: left; }
.ld-trust-card > .ico, .ld-trust-card .ld-trust-icon .ico { width: 28px; height: 28px; color: var(--accent); display: block; margin-bottom: var(--space-2); }
.ld-trust-card h3 { font-family: var(--font-title); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.ld-trust-card p { font-size: 16px; color: var(--text); }

/* ---------- Bandeau final : teinte 4 %, filet complet, jamais sombre ---------- */
.ld-cta { position: relative; text-align: center; padding: var(--space-8) var(--space-4); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 4%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 14%, #fff); color: var(--text); overflow: hidden; }
.ld-cta::before { content: none; display: none; }
.ld-cta h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(28px, 3.6vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 auto var(--space-2); max-width: 24ch; }
.ld-cta p { color: var(--text); margin: 0 auto var(--space-4); max-width: 54ch; }
.ld-cta .ld-btn-primary { background: var(--accent); }
.ld-cta .ld-btn-ghost { background: #fff; }
.ld-cta-note { margin-top: var(--space-2); font-size: 15px; color: var(--muted); }
.ld-cta-short { display: none; }

/* ---------- Gabarit de lecture (légal, guide, journal) : colonne 720 px ---------- */
.ld-legal { max-width: 720px; margin: 0 auto; padding: var(--space-8) 0 var(--space-4); color: var(--text); }
.ld-legal h1 { font-family: var(--font-title); font-weight: 700; font-size: clamp(32px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--space-2); }
.ld-legal .ld-legal-date { font-size: 15px; color: var(--muted); margin-bottom: var(--space-6); }
.ld-legal h2 { font-family: var(--font-title); font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: var(--space-6) 0 var(--space-2); }
.ld-legal h3 { font-family: var(--font-title); font-weight: 600; font-size: 19px; color: var(--ink); margin: var(--space-4) 0 var(--space-1); }
.ld-legal p, .ld-legal li { font-size: 17px; line-height: 1.7; color: var(--text); margin-bottom: var(--space-2); }
.ld-legal ul, .ld-legal ol { padding-left: 22px; margin-bottom: var(--space-2); }
.ld-legal ul { list-style: disc; }
.ld-legal ol { list-style: decimal; }
.ld-legal li { margin-bottom: var(--space-1); }
.ld-legal li::marker { color: var(--muted); }
.ld-legal a { color: var(--accent); font-weight: 600; }
.ld-legal a.ld-btn-primary { color: #fff; }
.ld-legal a.ld-btn-ghost { color: var(--ink); }
.ld-legal .ld-legal-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: #fff; margin-bottom: var(--space-2); }
.ld-legal .ld-legal-card ul { list-style: none; padding: 0; margin: 0; }
.ld-legal .ld-legal-card li { margin-bottom: 6px; }
.ld-legal table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-3); font-size: 15px; }
.ld-legal th, .ld-legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ld-legal th { font-weight: 600; color: var(--ink); }
.ld-legal code { font-size: .92em; background: var(--soft); border-radius: 6px; padding: 1px 6px; }

/* ---------- Formulaires (signaler un bug, connexion, inscription…) ---------- */
.ld-bugform { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); box-shadow: none; }
.ld-field { margin-bottom: var(--space-3); }
.ld-field label, .ld-field .ld-field-label { display: block; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: var(--space-1); }
.ld-field label small { font-weight: 400; color: var(--muted); }
.ld-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.ld-field select,
.ld-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--btn-line, #D9DCE3); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.4;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ld-field input:focus, .ld-field select:focus, .ld-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.ld-field textarea { resize: vertical; min-height: 140px; }
.ld-field-error { margin-top: 6px; font-size: 15px; color: #B3261E; font-weight: 500; }
.ld-bugform-radios { display: flex; flex-direction: column; gap: var(--space-1); }
.ld-bugform-radios label { display: flex; gap: 10px; align-items: flex-start; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 500; font-size: 16px; color: var(--text); cursor: pointer; margin: 0; }
.ld-bugform-radios label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, #fff); }
.ld-bugform-radios input { accent-color: var(--accent); position: relative; top: 3px; flex-shrink: 0; }
.ld-bugform-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 500; border: 1px solid transparent; margin-bottom: var(--space-3); }
.ld-bugform-alert.ok { background: color-mix(in srgb, #34C759 9%, #fff); border-color: color-mix(in srgb, #34C759 40%, #fff); color: #1F7A36; }
.ld-bugform-alert.err { background: color-mix(in srgb, #FF3B30 9%, #fff); border-color: color-mix(in srgb, #FF3B30 40%, #fff); color: #B3261E; }
.ld-bugform-alert .ico { flex-shrink: 0; position: relative; top: 2px; }
.ld-bugform-note { margin-top: var(--space-2); text-align: center; font-size: 15px; color: var(--muted); }
.ld-flash { padding-top: var(--space-3); }
.ld-flash .ld-bugform-alert { margin-bottom: 0; }
.ld-flash .ld-bugform-alert + .ld-bugform-alert { margin-top: var(--space-1); }

/* ---------- Pied : lignes de conformité conservées sous le pied de la maquette ---------- */
.footer__meta { margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.footer__manage { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; }
.footer__manage:hover { color: var(--ink); text-decoration: underline; }
.footer__fine { margin-top: var(--space-1); font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 820px; }
.footer__fine a { color: var(--muted); text-decoration: underline; }
.nav__actions .btn--primary { color: var(--accent-ink); }
.nav__links .nav__link[aria-current="page"], .more__panel a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.mobile-panel nav a[aria-current="page"] { color: var(--accent); }

/* ---------- Page d'atterrissage courte (Wi-Fi, vCard) et pages internes ---------- */
.ld-page-intro { padding: var(--space-8) 0 var(--space-4); max-width: 820px; }

/* ---------- Réactif ---------- */
@media (max-width: 960px) {
  .ld-features, .ld-steps, .ld-trust-grid, .ld-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-usecases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-split { grid-template-columns: 1fr; gap: var(--space-4); }
  .ld-split.flip .ld-split-visual { order: 0; }
}
@media (max-width: 720px) {
  .ld-container { padding-inline: 16px; }
  .ld-features, .ld-steps, .ld-trust-grid, .ld-usecases-grid, .ld-pricing, .ld-pricing.two { grid-template-columns: 1fr; }
  .ld-section { padding: var(--space-8) 0; }
  .ld-section-head { margin-bottom: var(--space-4); }
  .ld-hero { padding: var(--space-6) 0 var(--space-4); }
  .ld-hero > p { font-size: 17px; }
  .ld-hero-actions .ld-btn { width: 100%; }
  .ld-split + .ld-split { margin-top: var(--space-6); }
  .ld-split-visual { padding: var(--space-2); }
  .ld-compare-row { grid-template-columns: 1.3fr .7fr .7fr; padding: 12px 14px; font-size: 15px; gap: 8px; }
  .ld-cta { padding: var(--space-6) var(--space-2); }
  .ld-cta .ld-btn { width: 100%; }
  .ld-cta .ld-cta-xtra { display: none; }
  .ld-legal { padding: var(--space-6) 0 var(--space-2); }
  .ld-bugform { padding: var(--space-3) var(--space-2); }
  .ld-faq summary { font-size: 17px; padding: 16px 0; }
  .ld-mock-url { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-btn, .ld-feature, .ld-faq summary .ico { transition: none; }
}

/* ---------- Accueil : le vrai générateur React posé dans la grille .quick de la maquette ---------- */
.quick__mount { display: contents; }
.quick__intro { margin-top: var(--space-2); max-width: 52ch; }
.quick__fields { margin-top: var(--space-4); }
.quick__more { margin-top: var(--space-3); }
.quick__note { margin-top: var(--space-2); max-width: 56ch; }
.field__error { display: block; margin-top: 6px; font-size: 14px; color: #B3261E; }
.quick__ctrls:empty { display: none; }
.quick .btn--primary[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Article : la couverture 3:2 du guide dans le cadre 16:10 de la maquette ---------- */
.article__cover img.qb-article-cover { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Icônes au trait (partials/site/icon, remplace Phosphor sur la vitrine) ---------- */
svg.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.nav__actions svg.ico--sm { width: 16px; height: 16px; }
.ld-feature-icon .ico { width: 24px; height: 24px; }
.ld-split-text li .ico, .ld-price li .ico, .ld-issue-reco .ico { width: 18px; height: 18px; }

/* ---------- Cibles tactiles (contrôle du 24/09/2026) ---------- */
/* Fil d'Ariane de l'article et commandes de la démo : 44 px de haut sans changer l'allure. */
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.tour__btn { min-height: 40px; padding-inline: 14px; }
/* Liens des mentions en petits caractères : zone de toucher agrandie, mise en page inchangée
   (le rembourrage vertical est compensé par une marge négative). */
.footer__fine a { display: inline-block; padding-block: 14px; margin-block: -14px; }
/* Liens fléchés (« Lire le guide », « Comparer en détail »…) : 44 px de zone de toucher, allure inchangée.
   Sous 721 px, les feuilles de page leur donnent déjà min-height: 44px (comme la maquette) : la marge
   négative y raccourcissait chaque section de 18 px (passe 9,5 du 24/09). */
@media (min-width: 721px) { .link-arrow { padding-block: 9px; margin-block: -9px; } }

/* ---------- Dernier tour (24/09/2026) ---------- */
/* Confidentialité : carte « traitement local », icône et texte sur la même ligne, sans puce. */
.ld-legal .ld-legal-card ul { list-style: none; padding-left: 0; }
.ld-legal .ld-legal-card li:has(> svg) { display: flex; gap: 10px; align-items: flex-start; }
.ld-legal .ld-legal-card li::marker { content: none; }
.ld-legal .ld-legal-card li svg { flex: none; width: 20px; height: 20px; margin-top: 5px; color: var(--accent); }
/* Liens autonomes des bandeaux de fin (« Voir les tarifs », « Lire la FAQ ») : encre indigo vive
   (ils étaient en indigo pâle, pensé pour un fond sombre) et 44 px de zone de toucher sans changer la mise en page. */
.ld-cta-note a { color: var(--accent); font-weight: 600; display: inline-block; padding-block: 13px; margin-block: -13px; }
/* Connexion : « Mot de passe oublié ? » en cible de 44 px. */
.ld-touch-link { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* En-tête de page sans visuel (FAQ recomposée) : colonne de lecture, chapô aéré. */
.page-head--solo { max-width: 46rem; }
.page-head--solo > * + * { margin-top: var(--space-2); }
.page-head--solo > p:not(.eyebrow) { font-size: 18px; line-height: 1.6; color: var(--text); }
.page-head--solo > .page-head__actions { margin-top: var(--space-4); }
/* Pages d'atterrissage Wi-Fi / vCard recomposées (24/09) : boutons sous le chapô, cartes aérées. */
.landing-cards .card { padding: var(--space-4); }
.landing-cards .card h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 19px; margin-bottom: var(--space-1); }
.landing-cards .card h3 .check { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.landing-cards .card > p { color: var(--text); }
.landing-cards .ticks { margin-top: var(--space-3); }
.landing-cards .ticks .check { flex: none; width: 20px; height: 20px; margin-top: 3px; }
/* En-têtes recomposés à l'intérieur d'un .ld-container (fonctionnalités, cas d'usage, sécurité, guide). */
.page-head--in-ld { padding: var(--space-8) 0 var(--space-4); }
@media (max-width: 720px) { .page-head--in-ld { padding: var(--space-6) 0 var(--space-3); } }

/* ---------- Passe 9,5 (24/09/2026) ---------- */
/* Pages légales : identité de l'éditeur, de l'hébergeur et du vendeur en liste de définitions.
   Libellé gris au-dessus (téléphone) ou à gauche (ordinateur), valeur en encre, filet de 1 px entre les paires,
   sans deux-points orphelins. */
.ld-legal .ld-facts { margin: 0; }
.ld-legal .ld-facts > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.ld-legal .ld-facts > div:first-child { border-top: 0; padding-top: 0; }
.ld-legal .ld-facts > div:last-child { padding-bottom: 0; }
.ld-legal .ld-facts dt { font-size: 15px; line-height: 1.7; color: var(--muted); font-weight: 500; }
.ld-legal .ld-facts dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ld-legal .ld-facts > div { grid-template-columns: minmax(0, 1fr); }
  .ld-legal .ld-facts dt { font-size: 13px; line-height: 1.5; }
}
/* /signaler-un-bug : boutons radio de gravité à 20 px (13 px avant) ; la carte entière reste la zone de toucher (48 px). */
.ld-bugform-radios input[type="radio"] { width: 20px; height: 20px; margin: 0; top: 2px; }
/* Pied de page : le filet de « © 2026 Belentia » ne couvrait que le texte (100 px) et « Gérer mes cookies »
   flottait à côté. Le filet passe sur toute la rangée ; copyright à gauche, cookies à droite, même ligne. */
.footer__meta { margin-top: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--line); justify-content: space-between; }
.footer__meta .footer__legal { margin: 0; padding: 0; border-top: 0; }
/* Tableaux texte à 3 colonnes (/fonctionnalites « correction d'erreur », /cas-usage « Quel type pour quel besoin ») :
   sous 560 px, la 3e colonne passait à 4 ou 5 lignes de 2 mots. Elle passe sous les deux premières, en toute largeur. */
@media (max-width: 560px) {
  .ld-compare:has(small) .ld-compare-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; }
  .ld-compare:has(small) .ld-compare-row > span:nth-child(2) { text-align: right; font-weight: 600; color: var(--ink); }
  .ld-compare:has(small) .ld-compare-row > span:nth-child(3) { grid-column: 1 / -1; text-align: left; }
  .ld-compare:has(small) .ld-compare-row.head > span:nth-child(3) { display: none; }
}
/* Pages /en recomposées (passe 9,5) : pastilles qui passent à la ligne, cartes à pastille d'icône,
   3e carte en pleine largeur quand la grille passe à 2 colonnes (aucune carte orpheline). */
.en-facts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); padding: 0; list-style: none; }
.en-facts .chip { font-size: 14px; padding: 7px 13px 7px 9px; }
.en-facts .chip > .check { flex: none; width: 18px; height: 18px; margin: 0; }
.en-cards .card { padding: var(--space-4); }
.en-cards .card__icon svg.ico { width: 20px; height: 20px; }
.en-cards .card h2 { font-size: 19px; line-height: 1.3; margin: var(--space-2) 0 var(--space-1); }
.en-cards .card > p { color: var(--text); }
@media (max-width: 1024px) and (min-width: 721px) { .en-cards > .card:nth-child(3):last-child { grid-column: 1 / -1; } }

/* Passe 9,5 b (24/09) — /fonctionnalites, correction d'erreur : barre proportionnelle aux vraies tolérances
   (7, 15, 25 et 30 % ; H = 72 px), qui se remplit à l'entrée dans l'écran. Sans animation si mouvement réduit. */
.ec-val { display: inline-grid; grid-template-columns: 72px 3.4em; align-items: center; gap: 10px; white-space: nowrap; text-align: right; } /* origine commune des barres */
.ec-bar { display: block; flex: none; height: 6px; border-radius: 3px; background: var(--accent); transform-origin: left center; }
.ec-bar--7 { width: 17px; } .ec-bar--15 { width: 36px; } .ec-bar--25 { width: 60px; } .ec-bar--30 { width: 72px; }
[data-ec-meter].ec-wait .ec-bar { transform: scaleX(0); }
[data-ec-meter] .ec-bar { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
[data-ec-meter] .ld-compare-row:nth-child(3) .ec-bar { transition-delay: .08s; }
[data-ec-meter] .ld-compare-row:nth-child(4) .ec-bar { transition-delay: .16s; }
[data-ec-meter] .ld-compare-row:nth-child(5) .ec-bar { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) { [data-ec-meter] .ec-bar { transition: none; } [data-ec-meter].ec-wait .ec-bar { transform: none; } }

/* 24/09/2026 — barre de navigation : liens au milieu de la barre dès 901 px (marque à
   gauche, actions à droite), comme Mot de passe et Transcriptor. Grille 1fr auto 1fr :
   le milieu est celui de la barre, pas celui de l'espace entre la marque et les boutons.
   Sous 901 px (burger), rien ne change. */
@media (min-width: 901px) {
  .nav .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav .nav__inner > .brand { justify-self: start; }
  .nav .nav__links { justify-self: center; margin-left: 0; }
  .nav .nav__spacer { display: none; }
  .nav .nav__actions { justify-self: end; }
}