/* ==========================================================================
   Mon Saju — landing (public/index.html)
   Fidèle à design/maquettes/site/landing.html (mobile 390 et desktop 1440).
   Feuilles chargées avant celle-ci : fonts.css, tokens, base, puis les
   composants communs (icons, button, tags, pillars, faq, chrome). Le <body>
   porte `ds` (typographie du design system, base.css). Aucune valeur
   hexadécimale : jetons uniquement, plus quelques `rgb()` pour les objets
   (couverture papier) dont la couleur ne dépend pas du thème.
   CSP stricte : aucun style en ligne.
   ========================================================================== */

body { overflow-x: hidden; }
figure { margin: 0; }

/* ---------------- Héros ---------------- */
.hero { padding: 20px 0 36px; }
.hero .wrap { display: grid; gap: 28px; }
.hero__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero__kicker .ko { font-size: 15px; letter-spacing: 0; color: var(--accent-ink); }
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.75rem); }
.hero h1 em { display: block; }
.hero .lead { margin-top: 18px; max-width: 30rem; }
.hero__cta { margin-top: 24px; display: grid; gap: 12px; justify-items: start; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--ink-3); }
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); margin-right: 8px; }
.hero__meta b { color: var(--ink-2); font-weight: 600; }
.hero__meta-price { flex-basis: 100%; }
.hero__meta-price::before { display: none !important; }

.hero-card { padding: 16px 14px 18px; position: relative; }
.hero-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; padding: 0 2px; }
.hero-card__head .meta { font-size: 13px; }
.hero-card .pillars { gap: 5px; }
.versus { margin-top: 20px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.versus__row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 12px 2px 0; }
.versus__row + .versus__row { border-top: 1px dashed var(--line); margin-top: 12px; }
.versus__lbl { font: 600 12px/1.5 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 1px; }
.versus__row p { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.versus__row p b { color: var(--ink); font-weight: 600; }
.versus__row--saju .versus__lbl { color: var(--accent-ink); }
.versus__row--saju p { color: var(--ink); }
.versus__row--sign p b { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.ko--wood { color: var(--wood); }

/* ---------------- Sections ---------------- */
.sec-head { max-width: 46rem; }
.sec-head .kicker { margin-bottom: 14px; }
.sec-head .lead { margin-top: 16px; }

/* Duel */
.duels { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.duel { padding: 16px 18px 18px; display: grid; gap: 8px; }
.duel + .duel { border-top: 1px solid var(--line-soft); }
.duel__crit { font: 600 12px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.duel__side { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.4; }
.duel__side .i { width: 18px; height: 18px; align-self: start; margin-top: 2px; }
.duel__side--sign { color: var(--ink-3); }
.duel__side--saju { color: var(--ink); font-weight: 600; }
.duel__side--saju .i { color: var(--accent-ink); }
.duel__big { font: 600 26px/1 var(--font-display); margin-right: 6px; }
.duel__side--sign .duel__big { color: var(--ink-3); }
.duels-head { display: none; grid-template-columns: 1fr 1fr 1.25fr; border-bottom: 1px solid var(--line); }
.duels-head div { padding: 18px 24px; font: 600 13px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.duels-head div:last-child { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.mid-cta { margin-top: 32px; display: grid; gap: 14px; justify-items: start; }
.mid-cta p { font: 500 italic 22px/1.3 var(--font-display); color: var(--ink-2); }

/* Découvrir */
.disc { margin-top: 32px; display: grid; gap: 12px; }
.disc__item { padding: 20px 18px; display: grid; gap: 10px; }
.disc__top { display: flex; justify-content: space-between; align-items: center; }
.disc__num { font: 500 italic 20px/1 var(--font-display); color: var(--accent-ink); }
.disc__item p { color: var(--ink-2); font-size: 15px; }
.disc__ex { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.disc__ex b { color: var(--ink); font-weight: 600; }
.strip { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; margin-top: 12px; align-items: start; }
.strip__cells, .strip__lbl { grid-column: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.strip__cells i { height: 10px; border-radius: 2px; background: var(--el); }
.strip__lbl { margin-top: 8px; display: flex !important; flex-wrap: wrap; gap: 4px 12px; }
.strip__lbl span { font: 600 12px/1.2 var(--font-ui); color: var(--el-ink); white-space: nowrap; text-align: left; }
.strip__zero { grid-column: 2; grid-row: 1 / span 2; align-self: start; font: 600 12px/1 var(--font-ui); color: var(--el-ink); border: 1.5px dashed var(--el); border-radius: 4px; padding: 6px 7px; margin-top: -3px; white-space: nowrap; }
.frise { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 12px; position: relative; }
.frise i { height: 8px; border-radius: 2px; background: var(--el); }
.frise i.now { outline: 2px solid var(--ink); outline-offset: 2px; }
.frise-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font: 500 12px/1.2 var(--font-ui); color: var(--ink-3); }
.frise-now { color: var(--ink); font-weight: 600; text-align: center; }
.el-ink-water { color: var(--water-ink); }
.el-ink-wood { color: var(--wood-ink); }

/* Aperçu du rapport */
.preview { margin-top: 32px; display: grid; gap: 16px; }
.cover {
  position: relative; aspect-ratio: 3 / 4; max-width: 300px; margin: 0 auto; width: 100%;
  background: var(--cover-paper); color: var(--cover-ink); border-radius: 6px; padding: 26px 22px 20px;
  box-shadow: 0 1px 0 rgba(60, 40, 20, .08), 0 26px 50px -22px var(--cover-shadow), 14px 14px 0 -6px var(--cover-edge);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
[data-theme="dark"] .cover { box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .7), 14px 14px 0 -6px rgb(26 49 90); }
.cover__brand { font: 600 11px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--cover-ink-2); }
.cover__pre { margin-top: 22px; font: italic 500 16px/1 var(--font-display); color: var(--cover-ink-2); }
.cover__name { font: 500 54px/1 var(--font-display); margin-top: 4px; }
.cover__seal { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 30px); gap: 2px 3px; padding: 9px 10px; background: var(--seal); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--on-seal-ring); }
.cover__seal span { font: 600 25px/1.15 var(--font-ko); color: var(--on-seal); text-align: center; }
.cover__dm { margin-top: 16px; font: 500 15px/1.35 var(--font-ui); color: var(--cover-ink); }
.cover__dm .ko { color: rgb(63 107 74); }
.cover__dm small { font-size: inherit; color: var(--cover-ink-2); }
.cover__date { margin-top: auto; font: 500 12px/1.4 var(--font-ui); color: var(--cover-ink-2); }
.cover__tag { position: absolute; top: 12px; right: -8px; transform: rotate(4deg); background: rgb(242 220 214); color: rgb(168 53 47); /* encre vermillon du clair : le fond reste clair en sombre (la couverture est du papier) ; 4,97:1 */ }
.extract { padding: 22px 20px 20px; }
.extract__h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.extract .read { font-size: 20px; }
.extract .read .ko { color: var(--wood); font-size: .92em; }
.extract__cap { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.toc { padding: 20px 18px 8px; }
.toc__part { font: 600 12px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 6px 0 4px; }
.toc__part + ol { margin-bottom: 12px; }
.toc li { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.toc li:last-child { border-bottom: 0; }
.toc li span:first-child { font: 500 italic 17px/1 var(--font-display); color: var(--ink-3); font-variant-numeric: oldstyle-nums !important; }

/* Méthode */
.proofs { margin-top: 28px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.proof { align-content: start; padding: 22px 0; display: grid; grid-template-columns: 44px 1fr; gap: 16px; border-bottom: 1px solid var(--line); background: none; border-left: 0; border-right: 0; border-top: 0; border-radius: 0; }
.proof__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--accent-ink); }
.proof__ico .i { width: 22px; height: 22px; }
.proof p { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.proof p b { color: var(--ink); font-weight: 600; }
.author { margin-top: 20px; font-size: 14px; color: var(--ink-3); max-width: 44rem; }

/* FAQ */
.faq-grid { display: grid; gap: 24px; }

/* CTA final */
.final { background: var(--ink-block); padding: 72px 0 80px; text-align: left; position: relative; overflow: hidden; }
.final__glyph { white-space: nowrap; position: absolute; right: -60px; bottom: -50px; font: 600 220px/1 var(--font-ko); color: rgba(236, 232, 222, .05); pointer-events: none; }
.final .wrap { position: relative; }
.final .h1 em { color: var(--accent); display: block; }
.final .hero__meta { color: var(--ink-3); }
.final .hero__meta b { color: var(--ink-2); }
.final .hero__meta span + span::before { background: var(--ink-3); }
.final .btn { background: var(--accent-fill); }

/* ---------------- Desktop ---------------- */
@media (min-width: 900px) {
  .hero { padding: 40px 0 88px; }
  .hero .wrap { grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
  .hero h1 { font-size: clamp(3.5rem, 1rem + 4.6vw, 5.25rem); }
  .hero .lead { margin-top: 26px; }
  .hero__cta { margin-top: 34px; grid-auto-flow: row; }
  .hero-card { padding: 26px 24px 28px; }
  .hero-card .pillars { gap: 10px; }
  .hero-card .pillar { padding: 18px 4px 16px; }
  .hero-card .pillar__g { font-size: 52px; }
  .hero-card .pillar__sub, .hero-card .pillar__roman { font-size: 13px; }
  .versus__row { grid-template-columns: 96px 1fr; }
  .versus__row p { font-size: 16px; }
  .duels-head { display: grid; }
  .duel { grid-template-columns: 1fr 1fr 1.25fr; padding: 0; gap: 0; align-items: stretch; }
  .duel__crit { padding: 22px 24px; font-size: 13px; align-self: center; margin: 0; }
  .duel__side { padding: 20px 24px; align-items: center; font-size: 17px; }
  .duel__side .i { align-self: center; margin: 0; }
  .duel__side--saju { background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .duel__big { font-size: 30px; }
  .mid-cta { grid-auto-flow: column; justify-content: start; align-items: center; gap: 28px; }
  .disc { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .disc__item { padding: 24px 22px; align-content: start; }
  .preview { grid-template-columns: 300px 1fr 1fr; gap: 24px; align-items: start; }
  .preview .cover { margin: 0; }
  .preview__col { display: grid; gap: 16px; }
  .proofs { grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 0; }
  .proof { grid-template-columns: 1fr; padding: 28px 0 0; border-bottom: 0; border-top: 1px solid var(--ink); }
  .faq-grid { grid-template-columns: 1fr 1.5fr; gap: 72px; }
  .final { padding: 120px 0 128px; }
  .final .wrap { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 48px; }
  .final__glyph { font-size: 420px; right: 40px; bottom: -90px; }
}