/* Shared styles for the 5-page static site.
   Tokens first: change colours/fonts here and every page follows. */
:root {
  --cobalt: #1b3f8f;
  --cobalt-soft: #c9d8f5;
  --ink: #0f1b2d;
  --muted: #4a5a66;
  --stone: #f2f4f3;
  --line: #c9d3d6;
  --sun: #f4b63f;
  --save: #0f6b4f;
  --white: #ffffff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; }
a { color: var(--cobalt); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section--stone { background: var(--stone); }

h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 16px; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 34em; }
.measure { max-width: 38em; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; }
.brand { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; padding: 8px 0; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; }

/* Buttons */
.btn { display: inline-block; padding: 13px 22px; border-radius: 8px; font-weight: 700; text-decoration: none; border: 2px solid transparent; line-height: 1.2; }
.btn--primary { background: var(--sun); color: var(--ink); }
.btn--primary:hover { background: #e9a82a; }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Hero */
.hero { padding: 48px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } .hero { padding: 72px 0; } }

/* Savings calculator */
.calc { background: var(--cobalt); color: var(--white); border-radius: 14px; padding: 26px 24px; }
.calc h2 { font-size: 1.3rem; margin-bottom: 18px; }
.calc label, .calc .calc-label { display: block; font-weight: 600; margin-bottom: 6px; }
.calc .field { display: flex; align-items: center; background: var(--white); color: var(--ink); border-radius: 8px; }
.calc .field:focus-within { outline: 3px solid var(--sun); outline-offset: 2px; }
.calc .affix { padding: 0 12px; color: var(--muted); font-weight: 700; }
.calc .field .affix:first-child { padding-right: 0; }
.calc input { flex: 1; min-width: 0; height: 52px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.calc input:focus { outline: none; }
.calc .out { margin: 22px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.calc .out-num { font-family: var(--serif); font-size: clamp(3rem, 12vw, 4.4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sun); }
.calc .out-text { color: var(--cobalt-soft); }
.calc .totals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.calc .totals dt { font-size: .85rem; color: var(--cobalt-soft); }
.calc .totals dd { margin: 0; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc details { margin-top: 18px; }
.calc summary { cursor: pointer; font-weight: 600; }
.calc .more { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 520px) { .calc .more { grid-template-columns: repeat(3, 1fr); } }
.calc .more input { height: 44px; font-size: 1.05rem; }
.calc .note { margin: 16px 0 0; font-size: .82rem; color: var(--cobalt-soft); }

/* Ruled lists instead of repeated cards */
.rows { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 1fr; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .rows li { grid-template-columns: 15em 1fr; } }
.rows strong { font-family: var(--serif); font-size: 1.15rem; }
.rows span { color: var(--muted); }

.two-col { display: grid; grid-template-columns: 1fr; gap: 12px 56px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1.2fr; } }

.steps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; padding-top: 14px; border-top: 4px solid var(--cobalt); }
.steps li::before { content: counter(step); display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--cobalt); line-height: 1; margin-bottom: 8px; }
.steps strong { display: block; margin-bottom: 4px; }
.steps span { color: var(--muted); }

.price { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.price:first-of-type { border-top: 1px solid var(--line); }
.price b { font-family: var(--serif); font-size: 1.2rem; }
.price .amount { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price .what { grid-column: 1 / -1; color: var(--muted); }
.price--main { background: var(--stone); padding-left: 14px; padding-right: 14px; border-left: 4px solid var(--sun); }

/* Footer with a single tile band */
.tile-band { height: 22px; background:
  radial-gradient(circle at 50% 50%, var(--white) 0 17%, transparent 18%),
  conic-gradient(from 45deg at 50% 50%, var(--cobalt) 0 25%, var(--white) 0 50%, var(--cobalt) 0 75%, var(--white) 0);
  background-size: 22px 22px; }
.site-footer { background: var(--ink); color: #d3dce2; padding: 36px 0; font-size: .95rem; }
.site-footer a { color: #ffffff; }
.site-footer .cols { display: grid; grid-template-columns: 1fr; gap: 20px 40px; }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-family: var(--sans); font-size: 1rem; margin-bottom: 8px; color: #ffffff; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 4px; }
.fine { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: .85rem; color: #9fb0ba; }

/* Pricing cards */
.plans { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; }
.plan--main { border: 2px solid var(--cobalt); box-shadow: 0 6px 20px rgba(27, 63, 143, 0.12); }
.plan h3 { margin: 4px 0 8px; }
.plan-tag { align-self: flex-start; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--stone); color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.plan-tag--main { background: var(--sun); color: var(--ink); }
.plan-price { margin: 0 0 8px; }
.plan-price .amount { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-price .per { display: block; color: var(--muted); font-size: .95rem; }
.plan-what { color: var(--muted); margin: 0 0 12px; }
.plan-list { margin: 0 0 14px; padding-left: 1.1em; }
.plan-list li { margin-bottom: 6px; }
.plan-note { margin: auto 0 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.plan .btn { text-align: center; }
.launch { margin-top: 24px; }
.small { font-size: .85rem; color: var(--muted); }

/* Language switcher */
.lang { display: inline-flex; gap: 2px; }
.lang a { padding: 4px 8px; border-radius: 6px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.lang a[aria-current="true"] { background: var(--stone); color: var(--ink); }

/* Prevent grid children from overflowing narrow screens */
.hero-grid > *, .two-col > *, .plans > * { min-width: 0; }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.calc input { min-width: 0; width: 100%; }

/* Logo */
.brand { display: inline-flex; align-items: center; }
.brand img { height: 48px; width: auto; display: block; }
.foot-logo { height: 110px; width: auto; display: block; margin-bottom: 12px; }
.opt-h { font-family: var(--sans); font-size: .95rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); margin: 56px 0 14px; display: flex; align-items: center; gap: 14px; }
.opt-h::before { content: ""; width: 14px; height: 14px; background: var(--sun); border-radius: 3px; flex: none; }
.opt-h::after { content: ""; flex: 1; height: 2px; background: var(--cobalt); opacity: .25; }

/* Info bubble and demo links */
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-left: .35em; border: 1px solid currentColor; border-radius: 50%; font: italic 700 .8em/1 var(--serif, serif); cursor: help; vertical-align: middle; }
.info-tip { display: none; position: absolute; right: -12px; bottom: calc(100% + 8px); width: min(17em, 78vw); padding: 10px 12px; border-radius: 8px; background: var(--ink, #111); color: #fff; font: normal 400 .85rem/1.4 var(--sans, sans-serif); text-align: left; z-index: 5; }
.info:hover .info-tip, .info:focus .info-tip, .info:focus-within .info-tip { display: block; }
.plan-demo { margin: 10px 0 0; text-align: center; font-size: .9rem; }

/* Stripe pay block */
.pay { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.12); text-align: center; }
.pay-label { margin: 0 0 8px; font-size: .88rem; }

/* Quiz page (quiz.html in each language) */
.quiz { max-width: 720px; }
.quiz-hero { padding: 40px 0 24px; }
.quiz-hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.quiz-body { padding-top: 24px; }
.quiz-progress { position: sticky; top: 0; z-index: 3; background: var(--stone); padding: 12px 0 10px; }
.quiz-bar { height: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; width: 0; background: var(--cobalt); transition: width .25s; }
.quiz-count { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.q { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px 18px; margin: 0 0 14px; }
.q-title { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-weight: 700; }
.q-num { flex: 0 0 1.9rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; color: var(--cobalt); }
.q-text { flex: 1; min-width: 0; }
.q-hint { margin: -6px 0 14px calc(1.9rem + 8px); font-size: .92rem; color: var(--muted); }
.q-opts { display: flex; gap: 10px; }
.q-opts label { flex: 1; position: relative; }
.q-opts input { position: absolute; opacity: 0; pointer-events: none; }
.q-opts span { display: block; text-align: center; padding: 13px 8px; border: 2px solid var(--line); border-radius: 8px; font-weight: 700; cursor: pointer; background: var(--white); }
.q-opts input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.q-opts input:checked + span.yes { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.q-opts input:checked + span.no { background: var(--sun); border-color: var(--sun); color: var(--ink); }
button.btn { font-family: inherit; font-size: inherit; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.quiz-actions { margin-top: 8px; }
.quiz-result { background: var(--cobalt); color: var(--white); border-radius: 14px; padding: 26px 24px; margin-top: 24px; }
.quiz-result[hidden] { display: none; }
.quiz-score { font-family: var(--serif); font-size: clamp(3rem, 12vw, 4.4rem); font-weight: 700; line-height: 1; color: var(--sun); font-variant-numeric: tabular-nums; }
.quiz-score small { font-size: 1.3rem; font-weight: 400; color: var(--cobalt-soft); }
.quiz-result h2 { font-size: 1.5rem; margin: 10px 0 8px; }
.quiz-result p { color: var(--cobalt-soft); }
.quiz-result ul { margin: 6px 0 18px; padding-left: 1.1em; }
.quiz-result .btn--ghost { border-color: var(--white); color: var(--white); }
.quiz-result .btn--ghost:hover { background: var(--white); color: var(--cobalt); }
.quiz-result .quiz-note { margin: 18px 0 0; font-size: .82rem; }

/* Home page promo band for the quiz */
.quiz-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; background: var(--cobalt); color: var(--white); border-radius: 14px; padding: 28px 26px; }
.quiz-promo .qp-text { flex: 1 1 320px; }
.quiz-promo h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 4vw, 1.8rem); }
.quiz-promo p { margin: 0; color: var(--cobalt-soft); max-width: 34em; }
@media (max-width: 520px) { .quiz-promo .btn { display: block; width: 100%; text-align: center; } }

/* Contact page form (contact.html in each language) */
.contact-hero { padding: 40px 0 24px; }
.contact-hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px 20px 12px; }
.contact-form .f { margin-bottom: 18px; }
.contact-form label.l { display: block; font-weight: 700; margin-bottom: 5px; }
.contact-form .opt { font-weight: 400; color: var(--muted); font-size: .9rem; }
.contact-form .help { font-size: .92rem; color: var(--muted); margin: -2px 0 8px; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form input[type=url], .contact-form select, .contact-form textarea { width: 100%; font: inherit; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid var(--cobalt-soft); border-color: var(--cobalt); }
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.contact-form .checks label { display: flex; gap: 9px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; }
.contact-form .checks input { accent-color: var(--cobalt); width: 18px; height: 18px; }
.contact-form .checks label:has(input:checked) { border-color: var(--cobalt); background: #eef3fd; }
.contact-form .consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.contact-form .consent input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--cobalt); flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-msg { display: none; border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; background: #fde8e6; color: #8a1c12; }
.form-done { display: none; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 36px 24px; text-align: center; }
.form-done .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--save); color: var(--white); font-size: 2rem; display: grid; place-items: center; margin: 0 auto 14px; }

/* Pricing page (pricing.html in each language) */
.cmp-wrap { overflow-x: auto; margin-top: 18px; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 600; }
.cmp thead th { background: var(--stone); font-family: var(--serif); font-size: 1.15rem; }
.cmp thead th small { display: block; font-family: var(--sans); font-weight: 400; font-size: .85rem; color: var(--muted); }
.cmp .main { background: #eef3fd; }
.cmp .no { color: var(--muted); }
.cmp .yes { color: var(--save); font-weight: 700; }
.cmp tbody th.grp { background: var(--stone); text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 20px 0 0; }
.feats li { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.feats strong { display: block; margin-bottom: 4px; }
.feats span { color: var(--muted); font-size: .96rem; }
.faq-q { margin: 22px 0 4px; font-size: 1.05rem; }

/* FAQ accordion (home options + pricing page) */
.faq-list { margin-top: 14px; max-width: 760px; }
.faq-list details { background: var(--white); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.faq-list summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cobalt); flex: 0 0 auto; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 3px solid var(--cobalt-soft); border-radius: 10px; }
.faq-list details p { padding: 0 16px 14px; margin: 0; color: var(--muted); }

.rows small { display: block; margin-top: 4px; font-size: .9rem; color: var(--muted); }

.measure--wide { max-width: 60em; }
.was { color: var(--muted); font-family: var(--sans); font-size: 1.15rem; font-weight: 400; margin-right: 6px; }
.cmp s.was { font-size: .9em; margin-right: 4px; }
@media (min-width: 760px) { .nowrap { white-space: nowrap; } }

/* Bouton « remonter en haut de page » */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--cobalt); color: #fff; box-shadow: 0 4px 14px rgba(15, 27, 45, .28); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s, background .15s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); }
.to-top:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Tableau comparatif : première année / années suivantes */
.cmp .nw { white-space: nowrap; }
.cmp thead .cmp-year th { background: var(--white); font-family: var(--sans); font-weight: 600; text-align: left; color: var(--ink); }
.cmp thead .cmp-year td { background: var(--stone); font-weight: 400; color: var(--ink); }
.cmp thead .cmp-year td.main { background: #eef3fd; }

/* Pages légales (privacy, legal, terms) */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { margin: 0 0 14px; padding-left: 1.25em; }
.legal li { margin-bottom: 7px; }
.legal code { background: var(--stone); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.legal-body { padding-top: 8px; }

/* FAQ : sous-catégories */
.faq-group { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; margin: 34px 0 12px; padding-left: 12px; border-left: 4px solid var(--sun); color: var(--ink); }
.faq-group:first-child { margin-top: 8px; }

/* bandeau du quiz placé juste sous une section claire */
.quiz-slot { padding-top: 0; }

/* Tableau comparatif : couleurs de la charte (version I) */
.cmp { border: 2px solid var(--cobalt); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.cmp .yes { font-size: 1.15rem; }
.cmp .main { background: #fff5da; }
.cmp thead tr:first-child td { background: var(--cobalt); border-bottom: 0; }
.cmp thead tr:first-child th { border-bottom: 0; }
.cmp thead tr:first-child th:nth-child(2) { background: var(--cobalt-soft); color: var(--cobalt); }
.cmp thead tr:first-child th:nth-child(3) { background: var(--sun); color: var(--ink); }
.cmp thead tr:first-child th:nth-child(4) { background: var(--ink); color: var(--white); }
.cmp thead .cmp-year th { background: var(--white); color: var(--cobalt); font-weight: 800; vertical-align: middle; }
.cmp thead .cmp-year td { background: #eef3fd; color: var(--cobalt); font-weight: 800; vertical-align: middle; }
.cmp thead .cmp-year td.main { background: #fde7a8; color: var(--ink); }
.cmp thead .cmp-year s.was { color: var(--muted); font-weight: 400; }
.cmp tbody th.grp { background: var(--stone); padding: 18px 14px 8px; border-bottom: 1px solid var(--line); }
.cmp tbody th.grp .g { display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: .95rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.cmp tbody th.grp .g::before { content: ""; width: 14px; height: 14px; background: var(--sun); border-radius: 3px; flex: none; }
.cmp tbody th.grp .g::after { content: ""; flex: 1; height: 2px; background: var(--cobalt); opacity: .25; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* premier titre de section (style « Options disponibles ») : pas de grand vide au-dessus */
.section > .wrap > .opt-h:first-child { margin-top: 0; }

/* Titre du tableau, en blanc dans la case bleue en haut à gauche */
.cmp thead td.cmp-title { text-align: left; vertical-align: middle; }
.cmp .cmp-h { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--sans); font-size: .95rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--white); line-height: 1.3; }
.cmp .cmp-h::before { content: ""; width: 14px; height: 14px; background: var(--sun); border-radius: 3px; flex: none; }
@media (max-width: 759px) { .foot-logo { height: 96px; } }


/* ===== CHARTE MARINE (toutes les pages) ===== */

:root{--navy:#0f1b2d;--navy2:#162842;--navyline:#2a3b57;--soft:#b9c5d6}
body,.section,.hero{background:var(--navy);color:#fff}
.section--stone{background:var(--navy2)}
.site-header{background:var(--navy);border-bottom-color:var(--navyline)}
h1,h2,h3,.rows strong,.price b,.plan h3{color:#fff}
.lede,.small,.rows span,.steps span,.price .what,.plan-what,.muted,.hero p{color:var(--soft)}
a{color:#fff}
.nav a{color:#fff} .nav a.btn{color:var(--navy)}
.lang a{color:var(--soft)} .lang a[aria-current="true"]{background:#1d3150;color:#fff}
.btn--ghost{border-color:#fff;color:#fff;background:transparent} .btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--primary{background:var(--sun);color:var(--navy)}
.rows,.rows li,.price,.price:first-of-type{border-color:var(--navyline)}
.steps li{border-top-color:var(--sun)} .steps li::before{color:var(--sun)}
.opt-h{color:var(--sun)} .opt-h::after{background:#fff;opacity:.2}
.tile-band{background:radial-gradient(circle at 50% 50%,var(--navy) 0 17%,transparent 18%),conic-gradient(from 45deg at 50% 50%,#fff 0 25%,var(--navy) 0 50%,#fff 0 75%,var(--navy) 0);background-size:22px 22px}
.plan,.feats li,.faq-list details{background:#14243c;border-color:var(--navyline);color:#fff}
.plan--main{border-color:var(--sun);box-shadow:none}
.plan-note,.plan-price .per{color:var(--soft);border-color:var(--navyline)}
.info-tip{background:#fff;color:var(--navy)}
.calc .field{background:#fff}
/* mix : calculateur jaune, bandeau quiz contour jaune */
.calc{background:var(--sun);color:var(--navy)}
.calc h2,.calc h3,.calc label,.calc p{color:var(--navy)}
.calc .out-text,.calc .totals dt,.calc .note{color:#4a3a0e}
.calc .out-num{color:var(--navy)}
.quiz-promo{background:transparent;color:#fff;border:2px solid var(--sun)}
.quiz-promo p{color:var(--soft)}
.section--stone{background:var(--navy)}
.section--stone .wrap{position:relative}

/* Retouches */
.faq-group{color:#fff}
.faq-list summary::after{color:var(--sun)}
.faq-list details p{color:var(--soft)}
.to-top{background:var(--sun);color:#0f1b2d;border:0}
.to-top:hover{background:#e9a82a}
.to-top svg{stroke:#0f1b2d}
.fine{color:#fff}

/* --- Marine : autres pages --- */
.was,.no,.cmp .no,.cmp thead th small,.rows small,.q-hint,.quiz-count,.contact-form .opt,.contact-form .help,.feats span,.measure,.legal p,.legal li{color:var(--soft)}
.legal h2,.legal strong,.q-title,.contact-form label.l,.feats strong,.rows strong{color:#fff}
.legal code{background:#14243c;color:#fff}
.legal a{color:var(--sun)}
.site-footer{border-top:1px solid var(--navyline)}
/* quiz */
.quiz-progress{background:var(--navy)}
.quiz-bar{background:var(--navy2);border-color:var(--navyline)}
.quiz-bar span{background:var(--sun)}
.q{background:#14243c;border-color:var(--navyline);color:#fff}
.q-num{color:var(--sun)}
.q-opts span{background:var(--navy);border-color:var(--navyline);color:#fff}
.q-opts input:checked + span.yes{background:#fff;border-color:#fff;color:var(--navy)}
.q-opts input:focus-visible + span{outline-color:var(--sun)}
.quiz-result{background:#14243c;border:2px solid var(--sun)}
.quiz-score small,.quiz-result p{color:var(--soft)}
.quiz-result .btn--ghost:hover{color:var(--navy)}
/* contact / formulaire */
.contact-form,.form-done{background:#14243c;border-color:var(--navyline);color:#fff}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form input[type=url],.contact-form select,.contact-form textarea{background:#fff;color:var(--navy);border-color:#fff}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline-color:var(--sun);border-color:var(--sun)}
.contact-form .checks label{border-color:var(--navyline)}
.contact-form .checks label:has(input:checked){border-color:var(--sun);background:rgba(244,182,63,.12)}
.contact-form .checks input,.contact-form .consent input{accent-color:var(--sun)}
.form-done .tick{background:var(--sun);color:var(--navy)}
/* tableau comparatif */
.cmp{background:#14243c;border:2px solid var(--navyline);color:#fff}
.cmp th,.cmp td{border-bottom-color:var(--navyline)}
.cmp thead th{background:var(--navy2);color:#fff}
.cmp thead tr:first-child td{background:var(--navy2);border-bottom:2px solid var(--sun)}
.cmp thead tr:first-child th{color:var(--sun)}
.cmp .main{background:rgba(244,182,63,.12)}
.cmp thead th.main{background:var(--sun);color:var(--navy)}
.cmp thead th.main small{color:#4a3a0e}
.cmp .yes{color:var(--sun)}
.cmp tbody th.grp{background:var(--navy2);color:var(--sun)}
.cmp thead .cmp-year th{background:#14243c;color:#fff}
.cmp thead .cmp-year td{background:#14243c;color:#fff}
.cmp thead .cmp-year td.main{background:rgba(244,182,63,.12)}
.cmp s.was{color:var(--soft)}
.cmp thead tr:first-child th:nth-child(2){background:#fff;color:var(--navy)}
.cmp thead tr:first-child th:nth-child(3){background:var(--sun);color:var(--navy)}
.cmp thead tr:first-child th:nth-child(4){background:#2a3b57;color:#fff}
.cmp thead .cmp-year th{background:#14243c;color:#fff}
.cmp thead .cmp-year td{background:#14243c;color:#fff}
.cmp thead .cmp-year td.main{background:#3a3220;color:#fff}
.cmp thead .cmp-year s.was{color:var(--soft)}
.cmp .main{background:#1f2a35}
.cmp tbody th.grp{background:var(--navy2);border-bottom:1px solid var(--navyline)}
.cmp tbody th.grp .g{color:var(--sun)}
.cmp tbody th.grp .g::after{background:#fff}

/* --- Page commissions --- */
.cm-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.cm-card{background:var(--card,#14243c);border:1px solid #2a3b57;border-radius:14px;padding:24px 22px}
.cm-card small{display:block;color:#b9c5d6;font-size:.9rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cm-card .n{font:700 2.6rem/1.1 "Iowan Old Style","Palatino Linotype",Georgia,serif;margin:8px 0 6px;color:#fff}
.cm-card p{margin:0;color:#b9c5d6;font-size:.98rem}
.cm-card.hl{border:2px solid #f4b63f}.cm-card.hl .n{color:#f4b63f}
.cm-card .neg{color:#ff9a8a;font-weight:700}
.cm-card .pos{color:#f4b63f;font-weight:700}
.cm-tbl{width:100%;border-collapse:collapse;background:#14243c;border:1px solid #2a3b57;border-radius:14px;overflow:hidden;font-size:.98rem}
.cm-tbl th,.cm-tbl td{padding:13px 14px;text-align:left;border-bottom:1px solid #2a3b57;vertical-align:top}
.cm-tbl thead th{background:#162842;color:#fff;font-size:.92rem;line-height:1.3}
.cm-tbl thead th small{display:block;color:#b9c5d6;font-weight:400;margin-top:3px}
.cm-tbl tbody th{color:#b9c5d6;font-weight:600;width:24%}
.cm-tbl td.me{background:#1f3a5f;border-bottom-color:#4a6590}.cm-tbl thead th.me{background:#f4b63f;color:#0f1b2d}.cm-tbl thead th.me small{color:#4a3a0e}
.cm-tbl tr.tot td,.cm-tbl tr.tot th{font-weight:800;color:#fff;font-size:1.08rem;border-bottom:0}
.cm-tbl tr.tot td.me{color:#f4b63f}
.cm-tbl .neg{color:#ff9a8a}.cm-tbl .pos{color:#f4b63f}.cm-tbl .dim{color:#b9c5d6}
.bars{display:grid;gap:14px;max-width:820px}
.bar{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:center}
.bar b{font-weight:600;font-size:.98rem;color:#fff}
.bar b small{display:block;color:#b9c5d6;font-weight:400;font-size:.85rem}
.bar .track{background:#162842;border-radius:8px;height:38px;position:relative}
.bar .fill{height:100%;border-radius:8px;background:#5b7090;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;font-weight:800;color:#fff}
.bar.me .fill{background:#f4b63f;color:#0f1b2d}
.bar.bad .fill{background:#8a5560}
.cm-note{color:#b9c5d6;font-size:.9rem;margin-top:14px}
.cm-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;counter-reset:s}
.cm-steps div{background:#14243c;border:1px solid #2a3b57;border-radius:14px;padding:22px 20px;counter-increment:s}
.cm-steps div::before{content:counter(s);display:inline-flex;width:34px;height:34px;border-radius:50%;background:#f4b63f;color:#0f1b2d;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.cm-steps h3{margin:0 0 6px;font-size:1.15rem}.cm-steps p{margin:0;color:#b9c5d6}
.cm-sum{background:#f4b63f;color:#0f1b2d;border-radius:14px;padding:28px 26px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.cm-sum h2{color:#0f1b2d;margin:0 0 6px;font-size:1.5rem}.cm-sum p{margin:0;color:#4a3a0e}
.cm-sum .big{font:700 3.4rem/1 "Iowan Old Style",Georgia,serif;color:#0f1b2d}.cm-sum .sub{color:#4a3a0e;font-size:.95rem}
@media(max-width:759px){.bar{grid-template-columns:1fr}.cm-sum{grid-template-columns:1fr}.cm-tbl{font-size:.88rem}}
.cm-wrap{overflow-x:auto}
.cm-link{color:#fff;text-decoration:underline;text-underline-offset:3px}
.feats a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* --- Blog --- */
.cm-back{margin:0 0 14px}.cm-back a{color:var(--soft);text-decoration:none;font-weight:600}.cm-back a:hover{color:#fff}
.blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.blog-card{display:flex;flex-direction:column;gap:10px;background:#14243c;border:1px solid #2a3b57;border-radius:14px;padding:26px 24px;color:#fff;text-decoration:none}
.blog-card:hover{border-color:#f4b63f}
.blog-card .tag{align-self:flex-start;font-size:12.8px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:3px 10px;background:#f4b63f;color:#0f1b2d}
.blog-card h2{margin:0;font-size:1.4rem;color:#fff}.blog-card p{margin:0;color:#b9c5d6}
.blog-card .meta{color:#b9c5d6;font-size:.9rem}.blog-card .more{margin-top:auto;color:#f4b63f;font-weight:700}
.cm-tbl tr.tot td.pos{color:#f4b63f}
.nav a[aria-current="page"]{text-decoration-skip-ink:none}

/* FAQ sur 2 colonnes */
.faq-list{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
@media (max-width:820px){.faq-list{grid-template-columns:1fr}.faq-col+.faq-col .faq-group:first-child{margin-top:34px}}

.foot-intl { margin-top: 6px; }
.foot-intl a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.nav--intl { gap: 4px 14px; }
.nav--intl .lang a { padding: 4px 6px; }
.nav--intl .btn { padding-left: 14px; padding-right: 14px; }
@media (min-width: 760px) { .nav--intl { font-size: .9rem; gap: 4px 12px; } }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; }
.foot-bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.foot-bottom .fine, .foot-bottom .foot-intl { margin: 0; padding: 0; border-top: 0; }
/* Logos en image de fond (evite que Safari/macOS detecte le texte du logo comme un lien) */
.logo-h { display: block; height: 48px; aspect-ratio: 395 / 120; background: url("assets/logo-h-dark.svg") no-repeat center / contain; }
.logo-f { display: block; height: 110px; aspect-ratio: 263 / 250; margin-bottom: 12px; background: url("assets/logo-dark.svg") no-repeat center / contain; }
@media (max-width: 759px) { .logo-f { height: 96px; } }

.contact-form .checks--opts { grid-template-columns: 1fr; }
.contact-form .checks--opts label { flex-wrap: wrap; }
.contact-form .checks .qty { display: none; box-sizing: border-box; width: 84px; height: 36px; margin-left: auto; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 6px; font: inherit; line-height: 1.2; color: #0f1b2d; background: #fff; }
.contact-form .checks label:has(input:checked) .qty { display: inline-block; }

.btn--sm { padding: 9px 16px; font-size: .95rem; }
.plan > .btn--sm { align-self: center; margin-top: 4px; }

/* ===== Bloc abonnement dans les cartes de packs ===== */
.plan-sub{background:#1b3050;border:1px solid var(--navyline);border-radius:10px;padding:12px 14px;margin:6px 0 14px}
.plan-sub-title{margin:0;font-weight:700;color:#fff;font-size:1rem}
.plan-sub-price{margin:2px 0 6px;color:var(--soft);font-size:.95rem}
.plan-sub-price .sub-amt{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--sun);margin-right:4px;white-space:nowrap}
.plan-sub ul{margin:0 0 8px;padding-left:1.1em;font-size:.95rem}
.plan-sub li{margin-bottom:2px}
.plan-sub-note{margin:0;color:var(--soft);font-size:.88rem}
/* ===== Choix du paiement de l'abonnement (formulaire de devis) ===== */
.abo-lead{margin:0 0 8px}
.abo-opt{display:block;position:relative;border:2px solid var(--navyline);border-radius:12px;padding:12px 14px 12px 42px;margin:10px 0;cursor:pointer;background:#14243c;color:#fff}
.abo-opt input{position:absolute;left:14px;top:16px;width:18px;height:18px;margin:0;accent-color:#f4b63f}
.abo-opt.on{border-color:var(--sun);background:#1b3050}
.abo-opt .ab-p{float:right;font-weight:700;white-space:nowrap;margin-left:10px}
.abo-opt .ab-t{font-weight:700}
.abo-opt small{display:block;color:var(--soft);font-size:.92rem;margin-top:2px;clear:both}
.abo-badge{position:absolute;right:12px;top:-11px;background:var(--sun);color:var(--navy);font-size:.78rem;font-weight:700;padding:1px 10px;border-radius:99px}

/* encadré abonnement, version soignée */
.plan-sub{position:relative;background:linear-gradient(160deg,#223a60,#182b4a);border:1px solid var(--navyline);border-left:4px solid var(--sun);border-radius:12px;padding:16px 16px 14px 18px;margin:8px 0 16px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.plan-sub .plan-sub-price{margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;color:var(--soft);font-size:1rem}
.plan-sub .sub-plus{font-family:var(--serif);font-size:1.5rem;color:var(--sun);font-weight:700;margin-right:-4px}
.plan-sub .sub-amt{font-family:var(--serif);font-size:2.1rem;line-height:1;font-weight:700;color:var(--sun);margin:0;white-space:nowrap}
.plan-sub .sub-per{font-size:1.05rem;font-weight:600;color:#fff;margin-left:-6px}
.plan-sub .sub-or{font-size:.9rem;opacity:.8}
.plan-sub .sub-alt{font-weight:700;color:#fff;font-size:1.1rem;white-space:nowrap}
.plan-sub .sub-badge{display:inline-block;background:var(--sun);color:#10213d;font-weight:700;font-size:.75rem;letter-spacing:.02em;border-radius:999px;padding:3px 10px;align-self:center;white-space:nowrap}
.plan-sub .plan-sub-text{margin:0 0 10px;color:#fff;font-size:.95rem;line-height:1.45}
.plan-sub .plan-sub-note{margin:0;padding-top:9px;border-top:1px dashed var(--navyline);color:var(--sun);font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.plan-sub .sub-year{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:8px;white-space:nowrap}
.plan-sub .sub-year .sub-badge{align-self:center}
.sub-badge--row{display:inline-block;background:var(--sun);color:#10213d;font-weight:700;font-size:.72rem;border-radius:999px;padding:2px 9px;margin-left:6px;white-space:nowrap;vertical-align:middle}
.cmp td .sub-amt--row,table .sub-amt--row{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--sun);white-space:nowrap}
table .sub-per--row{font-size:.85rem;font-weight:600;color:#fff;margin-left:2px;white-space:nowrap}
.sub-badge--cell{display:inline-block;background:var(--sun);color:#10213d;font-weight:700;font-size:.7rem;border-radius:999px;padding:2px 9px;margin-top:4px;white-space:nowrap}