/* Prévoyance Genève - public site. Design by Alexandra Ducret (maquette LAMal, 30.10.2026):
   navy and cream, serif titles, amber call to action. System fonts only (the server's CSP
   loads nothing from elsewhere), text >= 16 px, colours checked for WCAG AA contrast. */
:root {
  --main: #12395f; --navy: #0b2a4a; --bg: #faf8f4; --card: #fff; --surface: #e8f1fa;
  --ink: #15202b; --muted: #5b6672; --accent: #f2a93b; --accent-dark: #e0962a; --on-accent: #0b2a4a;
  --line: #e3ded5; --field: #8a96a3; --err: #b3261e; --err-bg: #fdecea; --ok: #1e7b4f;
  --on-navy: #fff; --navy-muted: #d5e2f0;
  --radius: 14px; --shadow: 0 8px 24px rgba(11, 42, 74, .08);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--main);
  --serif: Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --main: #8db8e6; --navy: #07182b; --bg: #0e1722; --card: #16222f; --surface: #1b2c40;
    --ink: #eaf0f6; --muted: #a5b2c0; --line: #2a3a4c; --field: #5d6e80; --err: #ff8a80; --err-bg: #3a1c1c; --ok: #5cc796;
    --shadow: 0 8px 24px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 700; }
/* Coupures de texte (2 novembre 2026) : lignes équilibrées pour les titres, sous-titres et boutons
   (pas de mot seul sur la dernière ligne), coupures choisies pour les paragraphes et les listes. Les
   groupes qui ne doivent pas se séparer (24 h, 7 258 CHF, 3e pilier…) sont reliés par une espace
   insécable au rendu : assets/js/insecables.js. */
h1, h2, h3, .lead, .quiz-card .sub, .why b, .card h3, summary, .deadline, .badges li, .reminder p, .quiz-step, .quiz-after-question, button, .btn { text-wrap: balance; }
p, li, label, figcaption, .field-hint, .fine, .quiz-result, .quiz-exit, .quiz-message { text-wrap: pretty; }
@media (prefers-color-scheme: dark) { h1, h2, h3 { color: var(--ink); } }
a { color: var(--main); }
/* The ring is a shadow; the transparent outline is what forced-colours mode shows instead. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: 6px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--card); padding: 8px 12px; }
.skip:focus { left: 16px; z-index: 20; }
main:focus { outline: none; box-shadow: none; }

/* header */
.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 22px; padding: 12px 20px; min-height: 60px; }
/* Monogram and name (2 November 2026): 32 px high, width from the img's own ratio ; the dark
   version is a second file (<picture>), no filter. */
.logo { display: block; line-height: 0; flex: none; }
.logo picture { display: block; }
.logo img { display: block; height: 32px; width: auto; }
.tabs { display: flex; gap: 20px; flex: 1; flex-wrap: nowrap; justify-content: flex-end; }
.tabs a { white-space: nowrap; }
.tabs a { color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; font-size: 16px; }
.tabs a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--main); }
.tabs a:hover { border-bottom-color: var(--main); }
/* Five tabs: between the mobile layout and 1000 px they would wrap onto a second line; they scroll sideways instead, as on mobile. */
@media (max-width: 1000px) { .bar { gap: 14px; } .tabs { flex-wrap: nowrap; overflow-x: auto; min-width: 0; gap: 16px; scrollbar-width: thin; justify-content: flex-start; } .tabs a { flex: none; white-space: nowrap; } }

/* buttons: amber with navy text (contrast 8:1) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.btn:hover { background: var(--accent-dark); }
.btn[disabled] { opacity: .7; cursor: default; }
.btn-secondary { background: var(--card); color: var(--main); border: 1.5px solid var(--main); box-shadow: none; }
.btn-secondary:hover { background: var(--surface); }
.btn-header { white-space: nowrap; min-height: 44px; padding: 0 18px; }
.bar-fixed { display: none; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* reassurance badges */
/* Each badge at its own width (2 November 2026): « Données hébergées en Suisse » stays on one line at 360 px instead of three. */
.badges { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.badges li { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 600; }
.badges li::before { content: ""; flex: none; width: 10px; height: 16px; margin: 0 6px 4px 4px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.skyline { display: block; width: 100%; max-width: 520px; height: auto; margin-top: 10px; color: var(--main); opacity: .5; }

/* home */
.hero { padding: 48px 0 32px; max-width: 760px; }
h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.15; margin: 0 0 16px; }
.lead { font-size: 18px; color: var(--muted); margin: 0 0 22px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; margin: 0 0 18px; }
section { padding: 0 0 48px; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 21px; }
.card p { margin: 0; color: var(--muted); flex: 1; }
.card .btn { align-self: flex-start; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.why li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.why b { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 19px; color: var(--navy); }
@media (prefers-color-scheme: dark) { .why b { color: var(--ink); } }
.why p { margin: 0; color: var(--muted); }
/* steps: a band of the surface colour, navy numbers */
.band { background: var(--surface); padding: 40px 0; margin: 0 0 48px; box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.steps li { counter-increment: s; color: var(--ink); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; margin-bottom: 12px; }
@media (prefers-color-scheme: dark) { .steps li::before { background: var(--main); color: var(--navy); } }

/* « Mon approche »: navy card with the two figures in amber */

/* landing page: text left, questionnaire right, first question above the fold */
.landing-hero { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto 1fr auto; grid-template-areas: "text quiz" "lead quiz" "more quiz" "more pic"; column-gap: 48px; align-items: start; padding: 40px 0 48px; }
.hero-text { grid-area: text; }
.hero-lead { grid-area: lead; }
.hero-more { grid-area: more; }
.quiz-card { grid-area: quiz; }
.hero-pic { grid-area: pic; padding-top: 24px; }
.hero-pic .hero-photo { max-width: none; margin: 0; }
/* the deadline: a note with a calendar drawn in CSS (no image to load) */
.deadline { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 600; }
.deadline::before { content: ""; flex: none; width: 16px; height: 14px; margin-top: 4px; border: 2px solid var(--main); border-top-width: 5px; border-radius: 3px; }
.benefits { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.benefits li { padding-left: 34px; position: relative; }
.benefits li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); }
.benefits li::after { content: ""; position: absolute; left: 8px; top: 8px; width: 6px; height: 10px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.quiz-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; min-height: 420px; scroll-margin-top: 16px; }
.quiz-card:focus { outline: none; }
.quiz-card.is-done > .sub { display: none; }
.quiz-card > h2 { font-size: 22px; margin: 0 0 4px; }
.quiz-card .sub { margin: 0 0 18px; color: var(--muted); }
.quiz-step { margin: 0 0 6px; color: var(--muted); font-size: 16px; font-weight: 600; }
.quiz-progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--surface); overflow: hidden; margin-bottom: 18px; appearance: none; -webkit-appearance: none; color: var(--main); }
.quiz-progress::-webkit-progress-bar { background: var(--surface); border-radius: 999px; }
.quiz-progress::-webkit-progress-value { background: var(--main); border-radius: 999px; }
.quiz-progress::-moz-progress-bar { background: var(--main); border-radius: 999px; }
.quiz-question { font-size: 20px; line-height: 1.3; margin: 0 0 14px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option { width: 100%; min-height: 52px; text-align: left; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.quiz-option:hover { border-color: var(--main); background: var(--surface); }
.quiz-option[aria-pressed="true"] { border-color: var(--main); background: var(--surface); font-weight: 600; }
.quiz-nav { margin-top: 14px; }
.quiz-back { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--main); text-decoration: underline; cursor: pointer; }
.quiz-back::before { content: "← "; }
.quiz-exit, .quiz-result { margin: 0 0 16px; }
.quiz-booking-intro { margin: 0 0 10px; font-weight: 600; }
.quiz-booking { display: block; width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.quiz-note { margin: 12px 0 0; color: var(--ok); font-weight: 600; }
.quiz-message:focus { outline: none; }
.quiz-note:focus { outline: none; box-shadow: none; }
.quiz-message:not(:empty) { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--err-bg); color: var(--err); }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin: 0 0 6px; }
.field-hint { margin: -2px 0 6px; color: var(--muted); font-size: 16px; }
.field-error { margin: 6px 0 0; color: var(--err); font-weight: 600; }
.field-error:empty, .tel-echo:empty { display: none; }
.tel-echo { margin: 6px 0 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tel-row { display: flex; gap: 8px; }
.tel-row select { flex: none; width: auto; }
input[type=text], input[type=tel], input[type=email], select { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--field); border-radius: 12px; font: inherit; color: var(--ink); background: var(--card); }
input[aria-invalid="true"] { border-color: var(--err); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 10px; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--main); }
.consent label { font-weight: 400; }
.consent-error { margin: -4px 0 10px 34px; }
.fine { color: var(--muted); margin: 10px 0; font-size: 16px; }
.quiz-submit { width: 100%; font-size: 18px; margin-top: 4px; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.deliverables { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--muted); margin: 10px 0 0; }
.sources { margin: 18px 0 0; padding: 14px 0 0 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.sources a { word-break: break-word; }
.source-ref { white-space: nowrap; display: inline-block; padding: 2px 0; }
.reminder { text-align: center; padding: 8px 0 56px; }
.reminder p { margin: 0 0 18px; color: var(--muted); font-size: 18px; }

/* text pages */
.prose { max-width: 760px; padding: 40px 0 56px; }
.prose h2 { font-size: 23px; margin: 30px 0 8px; }
.prose p, .prose li { color: var(--ink); }

/* footer: navy */
.site-footer { background: var(--navy); color: #c9d8e8; padding: 30px 0 40px; font-size: 16px; }
.site-footer p { margin: 0 0 8px; }
.site-footer a, .site-footer .linklike { color: #fff; }
.site-footer strong { color: #fff; font-family: var(--serif); }
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; padding: 18px 20px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(11, 42, 74, .25); z-index: 30; }
.cookie-banner h2 { font-size: 19px; margin: 0 0 6px; }
.cookie-banner p { margin: 0 0 12px; }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 820px) {
  .bar { flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
  .wrap { padding: 0 16px; }
  /* One line of tabs that scrolls sideways (the page itself never does):
     wrapped on two lines they pushed the first question below the fold. */
  .tabs { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 2px 2px 0; margin: 0 -2px; scrollbar-width: thin; justify-content: flex-start; }
  .tabs a { flex: none; white-space: nowrap; padding: 4px 0; }
  .btn-header { display: none; }
  .cards, .why, .steps { grid-template-columns: 1fr; }
  .steps { gap: 16px; }
  .steps li { display: flex; gap: 14px; align-items: flex-start; }
  .steps li::before { margin: 0; flex: none; width: 34px; height: 34px; }
  .skyline { display: none; }
  .hero { padding-top: 28px; }
  /* Title, then the questionnaire: its first question fits a 375 x 667 screen. */
  .landing-hero { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "text" "quiz" "lead" "more" "pic"; padding-top: 16px; }
  .hero-pic { padding-top: 8px; }
  .landing-hero h1 { font-size: 27px; margin-bottom: 12px; }
  .quiz-card { padding: 16px; margin-bottom: 24px; min-height: 0; }
  /* The intro ("5 questions, 1 minute…") goes under the answers, so that the first question fits 360 x 640. */
  .quiz-card { display: flex; flex-direction: column; }
  .quiz-card .sub { order: 2; margin: 14px 0 0; font-size: 16px; }
  /* The page title just above says it: the card's own title stays for screen readers only. */
  .quiz-card > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .quiz-option { padding: 11px 14px; min-height: 48px; }
  .quiz-progress { margin-bottom: 12px; }
  .quiz-options { gap: 8px; }
  .quiz-question { margin-bottom: 10px; font-size: 19px; }
  .grid2 { grid-template-columns: 1fr; }
  body { padding-bottom: 84px; }
  .site-footer { padding-bottom: 32px; }
  /* the two calls to action stay at the bottom of the screen, on a white strip: the questionnaire, the booking */
  .bar-fixed { display: flex; gap: 10px; position: fixed; left: 16px; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6; transition: opacity .15s; }
  .bar-fixed .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; }
  body:has(.bar-fixed)::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(72px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); z-index: 5; }
  body:has(.bar-fixed.is-hidden)::after { display: none; }
  .bar-fixed.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* page photos (Unsplash, served from the site) */
.hero-photo { margin: 6px 0 0; max-width: 520px; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.hero-photo figcaption { margin-top: 6px; font-size: 14px; color: var(--muted); }
.index-photo .hero-photo { max-width: none; margin: -8px 0 48px; }
.index-photo .hero-photo img { aspect-ratio: 21 / 8; }
@media (max-width: 820px) {
  .hero-photo { max-width: none; margin-top: 4px; }
  .index-photo .hero-photo img { aspect-ratio: 3 / 2; }
}

/* optional questions after the lead (§15.10) */
.quiz-after { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.quiz-after-title { font-size: 18px; margin: 0 0 12px; }
.quiz-after-question { font-weight: 600; margin: 0 0 10px; }
.quiz-after-nav { display: flex; gap: 18px; }
.quiz-skip::before, .quiz-end::before { content: none; }