/* CheckSwiss — feuille de style
   Palette : papier #FCFCFA · encre #1A1D1F · secondaire #4A4F55 · lignes #DFDDD5
             brique #B23A2E · ardoise #445063 · vert #3D6B4F
   Typo : Space Grotesk (titres, chiffres) + Inter (texte courant) */

:root {
  --paper: #FCFCFA;
  --paper-2: #F4F3EE;
  --surface: #FFFFFF;
  --ink: #1A1D1F;
  --ink-2: #4A4F55;
  --line: #DFDDD5;
  --line-strong: #C9C6BC;
  --line-ctl: #8A867B; /* contour des champs et contrôles : contraste 3:1 minimum */
  --brick: #B23A2E;
  --brick-deep: #8C2A21;
  --brick-tint: #F6E7E4;
  --slate: #445063;
  --slate-tint: #E8EBF0;
  --green: #3D6B4F;
  --green-tint: #E5EEE8;
  --amber-tint: #F7EFD9;
  --amber-ink: #6B4E12;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --shadow-s: 0 1px 2px rgba(26, 29, 31, .05);
  --shadow-m: 0 1px 2px rgba(26, 29, 31, .04), 0 8px 24px rgba(26, 29, 31, .06);
  --shadow-l: 0 14px 34px rgba(26, 29, 31, .09);
  --shadow-brick: 0 12px 30px rgba(178, 58, 46, .12);
  --shadow-green: 0 10px 24px rgba(61, 107, 79, .14);
  --gutter: 16px;
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : hidden fait de body un conteneur de défilement qui ne défile
     jamais, et l'en-tête « sticky » s'y accrochait au lieu de rester en haut de l'écran. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--slate); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brick); }
button, input, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.12; margin: 0; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.12rem; }
p { margin: 0; }

.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brick-tint); color: var(--ink); }
input, textarea { caret-color: var(--brick); }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: var(--radius-s); z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(252, 252, 250, .92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
/* Symbole du logo (assets/brand/) : carré brique, croix en filigrane, coche. Rayon = 7/32 du côté. */
.brand-mark { flex: none; width: 30px; height: 30px; border-radius: 21.875%; background: var(--brick); display: block; overflow: hidden; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand b { color: var(--brick); font-weight: 700; }

.main-nav { display: none; gap: 4px; margin-left: 12px; }
.main-nav a { text-decoration: none; color: var(--ink-2); font-size: .92rem; padding: 6px 10px; border-radius: 6px; }
.main-nav a:hover { color: var(--ink); background: var(--paper-2); }


/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: .92rem; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brick); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.btn-primary:hover { background: var(--brick-deep); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 8px 10px; min-height: 36px; }
.btn-ghost:hover { color: var(--ink); background: var(--paper-2); }
.btn-small { min-height: 34px; padding: 6px 12px; font-size: .86rem; border-radius: 8px; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.section-head p { color: var(--ink-2); max-width: 62ch; margin-top: 6px; }
.eyebrow { font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brick); }

/* ---------- Accueil ---------- */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } }
.hero h1 { margin: 14px 0 18px; max-width: 16ch; }
.hero-text { font-size: 1.12rem; color: var(--ink-2); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.hero-scope { font-size: .86rem; color: var(--ink-2); }
.hero-scene { position: relative; perspective: 1100px; perspective-origin: 50% 42%; }
.scene-stage { position: relative; width: 100%; aspect-ratio: 5 / 4; max-height: 460px; transform-style: preserve-3d; transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, 0deg)); }
/* La transition n'adoucit que l'inclinaison au survol. Au défilement, --rx et --ry changent
   à chaque image : conservée partout, elle redémarrerait en continu et forcerait la
   re-rastérisation des six plans 3D — d'où les saccades au défilement rapide sur mobile. */
@media (hover: hover) and (pointer: fine) {
  .scene-stage { transition: transform .5s var(--ease-out); }
}
.scene-layer { position: absolute; inset: 0; will-change: transform; }
.scene-layer svg { width: 100%; height: 100%; display: block; }
.scene-layer.sky { border-radius: var(--radius-l); overflow: hidden; background: linear-gradient(178deg, #B3CFE8 0%, #D2E1EF 38%, #E9ECE9 72%, #F8F8F5 100%); transform: translateZ(-200px) scale(1.1); }
.sun { position: absolute; top: 14%; right: 16%; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 244, 222, .95), rgba(255, 233, 196, .35) 45%, transparent 72%); }

/* Massifs : roche, ombre portée, neige */
.peaks .rock { fill: #AFC0D2; }
.peaks.far .rock { fill: #C6D4E2; }
.peaks.far .snow { fill: #F3F7FB; }
.peaks.mid .rock { fill: #92A3B6; }
.peaks.mid .shade { fill: #7E8FA4; opacity: .55; }
.peaks.mid .snow { fill: #FBFCFD; }
.peaks.near .forest { fill: #3C4F4E; }
.peaks.near .ridge { fill: #F4F7F8; opacity: .9; }
.peaks.near .trees { fill: #2C3B3A; opacity: .9; }
.lake .glint { fill: #FFFFFF; opacity: .45; }
.bank .snowfield { fill: #FBFBF8; }
.bank .drift { fill: #EDEEEA; }
.bank .track-shadow { fill: none; stroke: rgba(68, 80, 99, .18); stroke-width: 3; }
.bank .rail { fill: none; stroke: #7E8489; stroke-width: 2; }
.bank .catenary path { fill: none; stroke: #9AA0A5; stroke-width: 1.4; }
.bank .village .wall { fill: #E7E3DC; }
.bank .village .roof { fill: #F7F7F4; }
.bank .village .spire { fill: #EFEBE3; }

/* Train régional rouge, il traverse la scène au défilement */
.scene-train { position: absolute; left: 0; bottom: 10%; width: 36%; will-change: transform; }
.scene-train svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 8px rgba(26, 29, 31, .18)); }
.scene-train .body { fill: #F7F5F0; }
.scene-train .band { fill: var(--brick); }
.scene-train .nosered { fill: var(--brick); }
.scene-train .win { fill: #2F3A42; opacity: .88; }
.scene-train .glass { fill: #2F3A42; opacity: .8; }
.scene-train .panto { fill: none; stroke: #6A7076; stroke-width: 1.6; stroke-linecap: round; }
.scene-train .bogies rect { fill: #3A4046; }

@media (max-width: 720px) {
  .scene-stage { max-height: 300px; }
  .scene-train { width: 48%; bottom: 11%; }
  .sun { width: 62px; height: 62px; }
  /* En fin de défilement le train affleure le bas du cadre, et son ombre portée déborde
     de 12 px. Sans cette marge il ne restait qu'un pixel avant la section suivante, et
     le train recouvrait son titre. */
  .hero-scene { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .scene-stage { transition: none; } .scene-train { transform: translateX(30%); } }

/* ---------- Choix de la langue ---------- */
/* Liste déroulante plutôt qu'un rang de boutons : au-delà de trois langues, la rangée
   déborde sur mobile et pousse les boutons d'action hors de l'écran. */
.lang-pick { position: relative; margin-left: auto; }
.lang-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.lang-btn:hover { background: var(--paper-2); }
.lang-btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 170px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-m); }
.lang-menu li { margin: 0; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: .9rem; text-align: left; cursor: pointer; }
.lang-menu button:hover { background: var(--paper-2); }
.lang-code { font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); min-width: 22px; }
.lang-name { flex: 1 1 auto; }
.lang-tick { display: inline-flex; color: var(--green); }
.lang-tick svg { width: 16px; height: 16px; }

/* ---------- Partenaire identifié ---------- */
.partner-note { margin: 10px 0 0; font-size: .82rem; color: var(--ink-2); line-height: 1.5; }
.partner-more { margin-top: 4px; }
.partner-more summary { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; cursor: pointer; list-style: none; font-size: .84rem; font-weight: 600; color: var(--ink); }
.partner-more summary::-webkit-details-marker { display: none; }
.partner-more summary svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.partner-more[open] summary svg { transform: rotate(180deg); }
.partner-more summary:hover { color: var(--brick); }
.partner-more .partner-note { margin-top: 6px; }
/* Prime mise en avant : le seul élément coloré de la carte, pour qu'il se voie d'un coup d'œil. */
/* Centré dans la carte : aligné à gauche, le bandeau paraissait décalé sous le titre. */
.partner-bonus { display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--green-tint); color: var(--green); font-size: .9rem; }
.partner-bonus svg { flex: 0 0 auto; width: 18px; height: 18px; }
.partner-bonus b { font-family: var(--font-display); font-weight: 600; }

/* ---------- Compte ---------- */
/* Bouton discret de l'en-tête : présent sans concurrencer « S'abonner ». */
.btn-quiet { background: transparent; color: var(--ink-2); border: 1px solid transparent; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-quiet:hover { color: var(--ink); background: var(--paper-2); border-color: var(--line); }
.header-account { display: inline-flex; align-items: center; gap: 7px; max-width: none; }
.header-account svg { width: 17px; height: 17px; flex: none; }
.header-account span { overflow: hidden; text-overflow: ellipsis; }
.header-account.is-signed svg { color: var(--green); }
/* Petits écrans : « Se connecter » / « Mon compte » en bouton icône, à côté du menu. */
@media (max-width: 1100px) {
  .header-account { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); max-width: none; }
  .header-account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-account svg { width: 19px; height: 19px; }
}

.wrap-narrow { max-width: 560px; }
.auth-card { padding: 26px 24px; display: grid; gap: 16px; }
.auth-card .field { display: grid; gap: 6px; }
.auth-card .btn { justify-self: start; }
.auth-who, .auth-sent { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.auth-who svg, .auth-sent svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--green); }
.auth-plan { margin: 0; color: var(--ink-2); }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-note { margin: 0; }

/* ---------- Formulaire ---------- */
/* Bandeau d'explication quand une page réservée renvoie vers le profil. */
.gate-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--brick); border-radius: 12px; background: var(--brick-tint); color: var(--ink); font-size: .92rem; line-height: 1.55; }
.gate-note svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--brick-deep); }
.gate-note strong { font-weight: 600; }

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); }
.form-block { padding: 26px 22px; border-top: 1px solid var(--line); display: grid; gap: 18px; }
.form-block:first-child { border-top: 0; }
@media (min-width: 860px) { .form-block { grid-template-columns: 200px 1fr; padding: 30px 32px; gap: 28px; } }
.form-block > header h3 { font-size: 1.06rem; }
.form-block > header .step { font-family: var(--font-display); color: var(--ink-2); font-size: .8rem; letter-spacing: .08em; }
.fields { display: grid; gap: 16px; min-width: 0; }
.row-2 { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .row-2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 0; }
  .row-2 > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .row-2 > .field > label { align-self: start; }
}
.field label, .field .label, fieldset legend { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.hint { font-size: .8rem; color: var(--ink-2); margin-top: 5px; }
.input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-ctl); border-radius: 10px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px var(--slate-tint); }
.field.invalid .input { border-color: var(--brick); }
.error { color: var(--brick-deep); font-size: .8rem; margin-top: 5px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.choice-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .choice-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.choice { position: relative; display: block; border: 1px solid var(--line-ctl); border-radius: 12px; padding: 12px 14px 12px 42px; cursor: pointer; background: var(--surface); transition: border-color .15s, background-color .15s; }
.choice:hover { border-color: var(--ink-2); }
.choice input { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; accent-color: var(--brick); margin: 0; }
.choice strong { display: block; font-weight: 600; font-size: .92rem; }
.choice span { display: block; color: var(--ink-2); font-size: .86rem; margin-top: 2px; }
.choice:has(input:checked) { border-color: var(--brick); background: var(--brick-tint); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brick); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brick); flex: none; }
.sub-options { display: grid; gap: 10px; padding: 4px 0 4px 14px; border-left: 2px solid var(--line); margin-top: 12px; }

/* Sélecteur de canton */
.canton-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.canton-tools .input { max-width: 320px; }
.canton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 10px; }
.canton { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; min-height: 76px; }
.canton:hover { border-color: var(--ink-2); box-shadow: var(--shadow-s); }
.canton[aria-pressed="true"] { border-color: var(--brick); background: var(--brick-tint); box-shadow: inset 0 0 0 1px var(--brick); }
.canton img { width: 40px; height: 48px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(26, 29, 31, .12)); }
.canton-name { font-weight: 600; font-size: .92rem; line-height: 1.2; display: block; }
.canton-meta { display: block; font-size: .72rem; color: var(--ink-2); line-height: 1.35; margin-top: 3px; }
.canton-meta .num { font-size: .78rem; color: var(--ink); }
.canton-empty { color: var(--ink-2); font-size: .92rem; padding: 12px 0; }
.data-note { font-size: .78rem; color: var(--ink-2); margin-top: 10px; }

.lang-prompt { margin-top: 14px; border: 1px solid var(--line); background: var(--paper-2); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.lang-prompt strong { font-family: var(--font-display); }
.lang-prompt .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-note { margin-top: 12px; font-size: .86rem; color: var(--ink-2); }

.form-foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 20px 22px; border-top: 1px solid var(--line); background: var(--paper-2); border-radius: 0 0 var(--radius-l) var(--radius-l); }
@media (min-width: 860px) { .form-foot { padding: 20px 32px; } }
.form-foot p { color: var(--ink-2); font-size: .86rem; max-width: 60ch; }

/* ---------- Tableau de bord ---------- */
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 24px; }
.dash-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.dash-head p { color: var(--ink-2); margin-top: 6px; }
.canton-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 14px 5px 6px; font-weight: 600; font-size: .92rem; }
.canton-chip img { width: 24px; height: 29px; object-fit: contain; }

.overview { display: grid; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px; box-shadow: var(--shadow-s); min-width: 0; }
.card h2, .card h3.card-title { font-size: 1rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

@media (min-width: 900px) { .overview { grid-template-columns: 1.15fr 1fr; } }
.score-card { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .overview .score-card { grid-template-columns: auto minmax(0, 1fr); } }
.ring { position: relative; width: 168px; height: 168px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: var(--paper-2); }
.ring .bar.is-zero { opacity: 0; }
.ring .bar { stroke: var(--brick); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .7, .2, 1); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label .num { font-size: 2.8rem; font-weight: 600; line-height: 1; }
.ring-label .num small { font-size: 1.12rem; color: var(--ink-2); margin-left: 1px; }
.ring-label span { font-size: .72rem; color: var(--ink-2); margin-top: 4px; }
.score-card p { color: var(--ink-2); font-size: .92rem; margin-top: 8px; }
.next-card { display: grid; align-content: start; gap: 10px; }
.next-date { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--brick); line-height: 1.1; }
.next-title { font-weight: 600; }
.next-meta { color: var(--ink-2); font-size: .86rem; }

.cats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cats > .cat { flex: 1 1 150px; }
.cat { display: grid; grid-template-rows: auto auto auto; gap: 6px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); padding: 12px 14px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cat:hover { border-color: var(--ink-2); box-shadow: var(--shadow-m); }
.cat[aria-pressed="true"] { border-color: var(--brick); box-shadow: inset 0 0 0 1px var(--brick); }
.cat img { width: 100%; max-width: 92px; height: 58px; max-height: 58px; object-fit: contain; margin: 0 auto; justify-self: center; }
.cat-name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.cat-meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-2); }
.meter { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .5s; }

.dash-grid { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 1040px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; row-gap: 16px; }
  .dash-grid > .list-head { grid-column: 1; grid-row: 1; }
  .dash-grid > .tasks { grid-column: 1; grid-row: 2; }
  .dash-grid > .side { grid-column: 2; grid-row: 2; }
}
.list-head { margin-bottom: 0; min-height: 44px; }
.dash-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dash-actions .btn { min-height: 40px; }

/* Liste des démarches */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: .86rem; cursor: pointer; color: var(--ink-2); min-height: 34px; }
.chip:hover { color: var(--ink); border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.tasks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.task { border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task-row { display: grid; gap: 12px 16px; padding: 18px 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .task-row { grid-template-columns: minmax(0, 1fr) 200px auto; } }
.task-title { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.task.is-done .task-title { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); letter-spacing: .01em; }
.tag.who-me { background: var(--slate-tint); color: var(--slate); }
.tag.who-partner { background: #EFE9F3; color: #5B4468; }
.tag.who-both { background: var(--green-tint); color: var(--green); }
.tag.who-household { background: var(--paper-2); color: var(--ink-2); }
.tag.pending { background: var(--amber-tint); color: var(--amber-ink); }
.tag.blocked { background: var(--brick-tint); color: var(--brick-deep); }
.tag svg { width: 12px; height: 12px; }

.task-dates { font-size: .86rem; }
.advised { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.01em; }
.advised small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--ink-2); letter-spacing: 0; text-transform: uppercase; }
.advised.urgent { color: var(--brick); }
.advised .rel { display: block; font-family: var(--font-body); font-weight: 500; font-size: .78rem; color: var(--ink-2); }
.advised.urgent .rel { color: var(--brick); }
.legal-line { display: block; color: var(--ink-2); font-size: .78rem; margin-top: 2px; }

.task-actions { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
@media (min-width: 760px) { .task-actions { justify-content: flex-end; } }
.status { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--paper-2); }
.status label { position: relative; cursor: pointer; }
.status input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.status span { display: block; padding: 5px 9px; font-size: .78rem; font-weight: 600; border-radius: 7px; color: var(--ink-2); white-space: nowrap; }
.status input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.status input[value="done"]:checked + span { background: var(--green); color: #fff; }
.status input[value="doing"]:checked + span { background: var(--slate); color: #fff; }
.status input:focus-visible + span { outline: 2px solid var(--brick); outline-offset: 1px; }
.expand { border: 1px solid var(--line); background: var(--surface); width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none; }
.expand:hover { color: var(--ink); border-color: var(--ink-2); }
.expand svg { width: 16px; height: 16px; transition: transform .2s; }
.expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.task-detail { padding: 4px 18px 22px; display: grid; gap: 18px; }
.task-detail .summary { color: var(--ink); max-width: 75ch; font-size: .92rem; }
.detail-grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .detail-grid { grid-template-columns: 1fr 1.2fr 1fr; } }
.detail-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--paper); min-width: 0; }
.detail-box h4 { font-family: var(--font-display); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; font-weight: 600; }
.detail-box ul { margin: 0; padding-left: 18px; font-size: .86rem; display: grid; gap: 4px; }
.detail-box ul.links { list-style: none; padding: 0; gap: 8px; }
.detail-box ul.links a { overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .86rem; }
.kv dt { color: var(--ink-2); }
.kv dt em { font-style: normal; font-size: .78rem; }
.kv dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.formula { font-size: .78rem; color: var(--ink-2); margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.compare-line { font-size: .86rem; display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--slate-tint); color: var(--slate); }
.compare-line a { color: var(--slate); font-weight: 600; }
.compare-line small { color: var(--ink-2); }

/* Barre latérale */
.side { display: grid; gap: 16px; }
.canton-card .arms { width: 64px; height: 78px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(26, 29, 31, .14)); }
.canton-card header { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.canton-card header h3 { font-size: 1.28rem; }
.canton-card header p { color: var(--ink-2); font-size: .86rem; margin-top: 3px; }
.facts { display: grid; gap: 12px; margin: 0; }
.fact { border-top: 1px solid var(--line); padding-top: 12px; }
.fact dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; margin-bottom: 3px; }
.fact dd { margin: 0; font-size: .92rem; }
.fact .big { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: -0.01em; }
.src { display: block; font-size: .72rem; color: var(--ink-2); margin-top: 4px; }
.src a { color: var(--ink-2); }
.src a:hover { color: var(--brick); }
.badge-ok, .badge-pending { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; vertical-align: 1px; letter-spacing: .02em; text-transform: none; }
.badge-ok svg, .badge-pending svg { width: 11px; height: 11px; }
.badge-ok { background: var(--green-tint); color: var(--green); }
.badge-pending { background: var(--amber-tint); color: var(--amber-ink); }

.rec-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.rec-list li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; }
.rec-date { border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 4px 0 5px; background: var(--paper); }
.rec-date b { display: block; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.1; }
.rec-date span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.rec-list strong { font-size: .86rem; display: block; line-height: 1.3; }
.rec-list p { font-size: .8rem; color: var(--ink-2); margin-top: 2px; }

/* ---------- Calendrier ---------- */
.icon-btn { border: 1px solid var(--line); background: var(--surface); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon-btn:hover { border-color: var(--ink-2); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Partenaires & abonnement ---------- */
.partners { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.partner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.partner .ph { font-size: .72rem; color: var(--ink-2); font-family: var(--font-display); letter-spacing: .04em; }
.partner p { color: var(--ink-2); font-size: .92rem; }
.partner .btn { margin-top: auto; }
.partner p + .btn { margin-top: auto; }
.partner p { margin-bottom: 8px; }
.partner.health { background: var(--slate-tint); border-color: transparent; grid-column: 1 / -1; }
.partner .btn { white-space: normal; text-align: left; }
@media (min-width: 860px) {
  .partner.health { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .partner.health > .ph, .partner.health > h3, .partner.health > p { grid-column: 1; }
  .partner.health > .btn { grid-column: 2; grid-row: 1 / span 4; justify-self: end; align-self: center; margin: 0; }
  .partner.health > p { margin-bottom: 0; }
}
.fine { font-size: .8rem; color: var(--ink-2); margin-top: 16px; }

.pricing { display: grid; gap: 24px; align-items: center; background: var(--ink); color: var(--paper); border-radius: var(--radius-l); padding: 32px 24px; }
@media (min-width: 860px) { .pricing { grid-template-columns: 1fr auto; padding: 40px 44px; } }
.pricing h2 { color: var(--paper); }
.pricing ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.pricing li { display: flex; gap: 10px; align-items: flex-start; color: #D9D8D2; }
.pricing li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #E07A6F; }
.price { font-family: var(--font-display); }
.price .amount { font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price .per { color: #B9B8B2; font-size: 1rem; margin-left: 4px; }
.price .billed { display: block; color: #B9B8B2; font-size: .86rem; margin: 8px 0 18px; font-family: var(--font-body); }
.pricing .note { font-size: .78rem; color: #9C9B95; margin-top: 10px; }

.lead { display: grid; gap: 16px; align-items: center; }
@media (min-width: 760px) { .lead { grid-template-columns: 1fr auto; } }
.lead p { color: var(--ink-2); margin-top: 4px; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 56px; background: var(--paper-2); font-size: .86rem; color: var(--ink-2); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1fr 1.4fr; } }
.site-footer h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 10px; }
.site-footer ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.site-footer ul.links { list-style: none; padding: 0; }
.site-footer a { color: var(--ink-2); }
.foot-bottom .btn-ghost { margin-right: -10px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-size: .86rem; box-shadow: var(--shadow-m); z-index: 60; max-width: calc(100% - 32px); }

/* Grilles à une colonne : jamais plus larges que leur conteneur (évite les débordements sur mobile) */
.hero-grid, .overview, .dash-grid, .cal-layout, .detail-grid, .foot-grid, .lead, .pricing, .choice-grid { grid-template-columns: minmax(0, 1fr); }
.hero-grid > *, .overview > *, .dash-grid > *, .cal-layout > *, .detail-grid > *, .foot-grid > *, .lead > *, .pricing > * { min-width: 0; }
@media (min-width: 900px) { .overview { grid-template-columns: 1.15fr 1fr; } }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 1040px) { .dash-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .dash-main { grid-column: 1; } .side { grid-column: 2; grid-row: 2; position: sticky; top: 92px; } }
@media (min-width: 820px) { .detail-grid { grid-template-columns: 1fr 1.2fr 1fr; } }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1fr 1.4fr; } .pricing { grid-template-columns: 1fr auto; } }
@media (min-width: 760px) { .lead { grid-template-columns: 1fr auto; } }
@media (min-width: 640px) { .choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .choice-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   Mouvement — suisse, épuré (voir assets/js/motion.js)
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* Anti-flash avant l'exécution du JS, avec filet de sécurité si le JS échoue */
@keyframes cs-failsafe-show { to { opacity: 1; } }
@keyframes cs-failsafe-hide { to { opacity: 0; visibility: hidden; } }
html.intro-pending body::after { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--paper); animation: cs-failsafe-hide .01s 3s forwards; }
/* Hauteur réservée dès le premier rendu : sans elle, la page est presque vide tant que le
   JavaScript n'a pas rempli la vue, le pied de page s'affiche en haut de l'écran puis est
   repoussé d'un coup (décalage de mise en page mesuré à 0,24 sur mobile). */
#main { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
html.motion-enter #main { opacity: 0; animation: cs-failsafe-show .01s 3.4s forwards; }
html.intro-on .site-header .brand-mark { opacity: 0; }

/* Intro */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; }
.intro-bg { position: absolute; inset: 0; background: var(--paper); }
.intro-grid { position: absolute; inset: 0; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.intro-grid i { border-left: 1px solid var(--line); transform-origin: top; }
.intro-grid i:last-child { border-right: 1px solid var(--line); }
.intro-stage { position: relative; display: grid; justify-items: center; gap: 24px; }
/* Même géométrie que le logo : croix de 20/32 à barres de 6/32, puis la coche par-dessus */
.intro-mark { position: relative; width: 88px; height: 88px; border-radius: 21.875%; background: var(--brick); will-change: transform; }
.intro-mark .bar { position: absolute; left: 50%; top: 50%; background: #fff; }
.intro-mark .bar.h { width: 62.5%; height: 18.75%; transform: translate(-50%, -50%); }
.intro-mark .bar.v { width: 18.75%; height: 62.5%; transform: translate(-50%, -50%); }
.intro-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-word { display: flex; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -.035em; line-height: 1; }
.intro-word span { display: block; overflow: hidden; padding-bottom: .12em; }
.intro-word b { display: block; font-weight: 700; }
.intro-word .swiss { color: var(--brick); }
.intro-meta { position: absolute; left: 0; right: 0; bottom: 34px; margin: 0; text-align: center; font-family: var(--font-display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

/* Rideau de transition */
.curtain { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: var(--brick); transform: translateY(100%); pointer-events: none; }
.curtain::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.35); }
.curtain-cross { position: relative; width: 72px; height: 72px; }
.curtain-cross i { position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; }
.curtain-cross i:first-child { width: 100%; height: 30%; transform: translate(-50%, -50%) scaleX(0); }
.curtain-cross i:last-child { width: 30%; height: 100%; transform: translate(-50%, -50%) scaleY(0); }

/* Grille typographique de l'accueil */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }

/* Mots des titres */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }

/* Filet rouge des titres de section (affiche suisse) */
.section-head h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--brick); transform-origin: left center; }
.section-head h2.rule-draw::before { animation: cs-rule .9s var(--ease-out) var(--rule-delay, 0ms) both; }
@keyframes cs-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* En-tête au défilement */
.site-header { transition: box-shadow .35s var(--ease-out), background-color .35s; }
.site-header.is-scrolled { box-shadow: var(--shadow-l); }

/* Sélecteur de langue : pastille qui glisse */

/* Survol & pression */
.btn { transition: background-color .2s, border-color .2s, color .2s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.btn:active { transform: scale(.98); }
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }
.canton, .cat, .partner, .expand, .icon-btn, .chip { transition: border-color .25s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out), background-color .25s; }
.canton:hover, .cat:hover { transform: translateY(-2px); }
.cat img { transition: transform .5s var(--ease-out); }
.cat:hover img { transform: translateY(-4px); }
.status span { transition: background-color .3s var(--ease-out), color .3s, box-shadow .3s; }
.meter i { transform-origin: left center; }
.expand svg { transition: transform .45s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html.motion-enter #main { opacity: 1 !important; }
  html.intro-pending body::after { display: none; }
  .canton:hover, .cat:hover { transform: none; }
}

/* =====================================================================
   Site multi-pages — en-tête, pages, catégories, partenaires, abonnement
   ===================================================================== */
.view.section { padding: 44px 0 80px; border-top: 0; }
.view { min-height: calc(100vh - 64px); }
.page-head { max-width: 760px; margin-bottom: 28px; }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: 10px 0 12px; letter-spacing: -.03em; }
.page-head > p { color: var(--ink-2); font-size: 1.06rem; }
h1:focus { outline: none; }

/* En-tête */
.header-row { gap: 14px; }
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
@keyframes cs-shine { to { transform: translateX(130%); } }
@media (max-width: 520px) { .brand-word { display: none; } }
.main-nav { position: relative; display: none; gap: 0; margin-left: 6px; }
@media (min-width: 1100px) { .main-nav { display: flex; } }
.main-nav a { position: relative; z-index: 1; padding: 8px 12px; }
.main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a:hover { background: transparent; }
.nav-indicator { position: absolute; left: 0; bottom: 1px; height: 2px; width: 0; border-radius: 2px; background: var(--brick); opacity: 0; pointer-events: none; transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-right .lang-pick { margin-left: 0; }
.header-cta { display: none !important; }
.header-sub { white-space: nowrap; }
.header-sub[aria-current="page"] { background: var(--brick-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.header-sub[aria-current="page"] { background: var(--brick-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
@media (max-width: 400px) { .header-sub { padding-left: 12px; padding-right: 12px; } }
@media (min-width: 760px) { .header-cta:not([hidden]) { display: inline-flex !important; } }
.menu-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.menu-btn i { position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--ink); transition: transform .45s var(--ease-out); }
.menu-btn i:nth-of-type(1) { transform: translateY(-4px); }
.menu-btn i:nth-of-type(2) { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] i:nth-of-type(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-of-type(2) { transform: rotate(-45deg); }
@media (min-width: 1100px) { .menu-btn { display: none; } .mobile-menu { display: none !important; } }
.mobile-menu { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 39; overflow: auto; padding: 18px var(--gutter) 40px; background: rgba(252,252,250,.97); backdrop-filter: blur(10px); }
.mobile-links { display: grid; max-width: 560px; }
.mobile-links a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.mobile-links a::after { content: "→"; color: var(--line-strong); transition: transform .4s var(--ease-out), color .3s; }
.mobile-links a:hover::after, .mobile-links a[aria-current="page"]::after { color: var(--brick); transform: translateX(4px); }
.mobile-links a[aria-current="page"] { color: var(--brick); }
/* Verrou de défilement sur <html>, pas sur <body> : html porte déjà overflow-x: clip, donc
   un overflow sur body ne remonte plus à la fenêtre. Body devenait alors sa propre zone
   de défilement, et l'en-tête « sticky », accroché à elle, repartait tout en haut du
   document : invisible, avec une bande vide au-dessus du menu. */
html.menu-open, html.drawer-open { overflow: hidden; }
.mobile-menu { overscroll-behavior: contain; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--brick); transform-origin: left center; transform: scaleX(0); }

/* Survols communs */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(178,58,46,.08), transparent 48%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.spot:hover::before { opacity: 1; }
.tilt { will-change: transform; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; }
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform .45s var(--ease-out); }
.link-arrow:hover { color: var(--brick); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow.light, .link-arrow.light:hover { color: #fff; }
.arrow-circle { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background-color .3s, color .3s, border-color .3s, transform .5s var(--ease-out); }
.arrow-circle svg { width: 16px; height: 16px; }
.btn-light { background: #fff; color: var(--brick-deep); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.btn-light:hover { background: var(--paper-2); color: var(--brick-deep); }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.hero-actions .btn-secondary { gap: 10px; }
.hero-scope { display: block; margin-top: 14px; }

/* Accueil : catégories */
.home-cats { }
.cat-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.cat-link { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-s); transition: transform .6s var(--ease-out), box-shadow .35s, border-color .25s; }
.cat-link:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-l); }
.cat-link-art { display: grid; place-items: center; height: 84px; padding: 6px; box-sizing: border-box; margin-bottom: 2px; border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.cat-link-art img { width: 108px; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; transition: transform .7s var(--ease-out); }
.cat-link:hover .cat-link-art img { transform: translateY(-3px) scale(1.03); }
.cat-link-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.cat-link-desc { color: var(--ink-2); font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.45em); }
.cat-link-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; color: var(--ink-2); font-size: .8rem; }
.cat-link:hover .arrow-circle, .upcoming a:hover .arrow-circle { background: var(--brick); border-color: var(--brick); color: #fff; transform: translateX(3px); }

/* Accueil : étapes & bandeau */
.band { position: relative; overflow: hidden; display: grid; gap: 22px; align-items: center; padding: 34px 28px; border-radius: var(--radius-l); background: var(--brick); color: #fff; }
@media (min-width: 860px) { .band { grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; padding: 40px 44px; } }
.band > * { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band h2::before { display: none; }
.band p { margin-top: 6px; color: rgba(255,255,255,.84); }
.band-cross { position: relative; width: 64px; height: 64px; }
.band-cross i { position: absolute; left: 50%; top: 50%; border-radius: 2px; background: #fff; }
.band-cross i:first-child { width: 100%; height: 30%; transform: translate(-50%, -50%); }
.band-cross i:last-child { width: 30%; height: 100%; transform: translate(-50%, -50%); }
.band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* Tableau de bord : catégories cliquables et « à faire bientôt » */
.cats > a.cat { color: var(--ink); text-decoration: none; }
.cats > a.cat:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-l); }
.upcoming { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.upcoming li + li { border-top: 1px solid var(--line); }
.upcoming a { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; color: var(--ink); text-decoration: none; transition: background-color .25s; }
.upcoming a:hover { color: var(--ink); background: var(--paper); }
.up-date { padding: 4px 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-align: center; }
.up-date b { display: block; font-family: var(--font-display); font-size: 1.28rem; line-height: 1.1; }
.up-date span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.up-date.urgent { border-color: var(--brick); }
.up-date.urgent b { color: var(--brick); }
.up-title { display: block; font-weight: 600; line-height: 1.3; }
.up-meta { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-2); }
.up-empty { padding: 18px; color: var(--ink-2); }
@media (min-width: 1040px) { .dash-grid > .upcoming { grid-column: 1; grid-row: 2; } .dash-grid > .list-head .link-arrow { margin-left: auto; } }

/* Démarches : onglets, bannière, liste */
.cat-tabs { position: relative; display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; color: var(--ink-2); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .35s; }
.cat-tab.all { padding-left: 14px; }
.cat-tab img { width: 34px; height: 28px; object-fit: contain; transition: transform .5s var(--ease-out); }
.cat-tab:hover { color: var(--ink); }
.cat-tab:hover img { transform: translateY(-2px) scale(1.08); }
.cat-tab[aria-current="page"] { color: #fff; background: var(--ink); } /* fond propre : le libellé reste lisible même si l'indicateur n'est pas encore placé */
.tab-count { padding: 1px 7px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); font-family: var(--font-display); font-size: .72rem; transition: background-color .35s, color .35s; }
.cat-tab[aria-current="page"] .tab-count { background: rgba(255,255,255,.18); color: #fff; }
.tab-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; width: 0; border-radius: 12px; background: var(--ink); opacity: 0; transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .3s; }
.cat-banner { position: relative; overflow: hidden; display: grid; gap: 16px; align-items: center; margin-bottom: 16px; padding: 18px 20px; border-radius: var(--radius-l); background: var(--paper-2); }
@media (min-width: 820px) { .cat-banner { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 26px; padding: 16px 28px; } }
.cat-banner-art img { width: 180px; height: auto; }
.mini-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 190px; }
.mini-art img { width: 62px; height: auto; }
.cat-banner h2 { font-size: 1.6rem; }
.cat-banner p { margin-top: 4px; color: var(--ink-2); max-width: 52ch; }
.banner-stats { display: grid; gap: 8px; min-width: 220px; }
.banner-score { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--ink-2); }
.banner-score .num { font-size: 1.8rem; font-weight: 600; color: var(--ink); }
.banner-stats .meter { height: 8px; background: rgba(26,29,31,.08); }
.banner-next { font-size: .8rem; color: var(--ink-2); }
.banner-next b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.banner-stats .btn { justify-self: start; }
.list-toolbar { margin-bottom: 14px; }
.preview-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 12px; background: var(--slate-tint); color: var(--slate); font-size: .92rem; }
.preview-lock svg { width: 18px; height: 18px; flex: none; }
.preview-lock span { flex: 1 1 260px; }
.preview-row { grid-template-columns: minmax(0, 1fr) auto !important; }
.tag.lock { background: var(--paper-2); color: var(--ink-2); }
.task-empty { padding: 20px 18px; color: var(--ink-2); }
.tasks { margin: 0; }
.task { transition: background-color .3s; }

/* Partenaires */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.chip { transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--ease-out); }
.chip:active { transform: scale(.96); }
.partner-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; }
.partner-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-s); transition: transform .6s var(--ease-out), box-shadow .35s, border-color .25s; }
.partner-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-l); }
.partner-art { display: grid; place-items: center; height: 150px; background: var(--paper-2); overflow: hidden; }
.partner-art img { width: 176px; height: auto; transition: transform .7s var(--ease-out); }
.partner-card:hover .partner-art img { transform: translateY(-6px) scale(1.05); }
/* Logo de marque : hauteur imposée, largeur libre, pour respecter ses proportions.
   Placé après « .partner-art img », qui fixe sinon une largeur de 176 px. */
.partner-art.has-logo { padding: 16px 24px; }
.partner-art.has-logo img.partner-logo { width: auto; height: 44px; max-width: 100%; object-fit: contain; }
.partner-body { display: grid; gap: 8px; padding: 18px 20px 12px; }
.partner-tag { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brick); }
.partner-desc { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.partner-points { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: .86rem; color: var(--ink-2); }
.partner-points li, .partner-rule { display: flex; gap: 8px; align-items: flex-start; }
.partner-points svg, .partner-rule svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--green); }
/* Nom et bouton sur la même ligne dans toutes les cartes : le nom se raccourcit s'il le faut,
   le bouton garde sa taille. */
.partner-foot { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.partner-foot .btn { flex: none; }
.partner-foot .ph { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--ink); }
.disclosure { margin-top: 28px; padding: 18px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-m); }
.disclosure h2 { margin-bottom: 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.disclosure ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .92rem; }

/* Abonnement */
.pricing-head { margin-bottom: 28px; }
.values, .faq { margin-bottom: 44px; }
.value-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); transition: transform .6s var(--ease-out), box-shadow .35s; }
.value-card:hover { box-shadow: var(--shadow-l); }
.value-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px; background: var(--brick-tint); color: var(--brick); transition: transform .6s var(--ease-out); }
.value-card:hover .value-icon { transform: rotate(-8deg) scale(1.08); }
.value-icon svg { width: 22px; height: 22px; }
.value-card h3 { margin-bottom: 6px; }
.value-card p { color: var(--ink-2); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.5em); }
.faq-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 0; background: none; color: var(--ink); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .25s; }
.faq-q:hover { background: var(--paper); }
.faq-icon { position: relative; width: 24px; height: 24px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; transition: background-color .35s, border-color .35s, transform .5s var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .45s var(--ease-out), background-color .35s; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: var(--brick); border-color: var(--brick); transform: rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-icon::before, .faq-q[aria-expanded="true"] .faq-icon::after { background: #fff; }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 20px 18px; color: var(--ink-2); max-width: 72ch; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 22px; }
.foot-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.foot-nav a:hover { color: var(--brick); }
.site-footer .brand { margin-bottom: 4px; }

.cat-tab { gap: 6px; padding: 7px 10px 7px 6px; font-size: .86rem; }
.cat-tab.all { padding-left: 12px; }
.cat-tab img { width: 28px; height: 24px; }
@media (max-width: 1180px) { .cat-tab img { display: none; } .cat-tab { padding-left: 12px; } }

/* ================= Informations légales ================= */
.legal-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .legal-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; } .legal-aside { position: sticky; top: 96px; } }
.legal-docs { display: grid; gap: 4px; margin-bottom: 22px; }
.legal-docs a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; border: 1px solid transparent; transition: background-color .2s, border-color .2s, color .2s; }
.legal-docs a:hover { background: var(--paper-2); }
.legal-docs a[aria-current="page"] { border-color: var(--line); background: #fff; box-shadow: inset 3px 0 0 var(--brick); }
.legal-docs .link-arrow { display: inline-flex; width: 14px; height: 14px; opacity: .45; }
.legal-docs .link-arrow svg { width: 100%; height: 100%; }
.legal-toc-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: 0 0 8px 12px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc button { display: flex; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 12px; min-height: 36px; border-radius: var(--radius-s); color: var(--ink-2); font: inherit; font-size: .86rem; cursor: pointer; transition: color .2s, background-color .2s; }
.legal-toc button::before { content: counter(toc, decimal-leading-zero); font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--brick); font-size: .78rem; padding-top: 2px; }
.legal-toc button:hover { color: var(--ink); background: var(--paper-2); }
@media (max-width: 959px) { .legal-toc { display: none; } .legal-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; } .legal-docs a { padding: 8px 14px; min-height: 40px; border-color: var(--line); border-radius: 999px; font-size: .86rem; } .legal-docs a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; } .legal-docs .link-arrow { display: none; } }
.legal-prose { padding: clamp(20px, 4vw, 44px); max-width: 820px; }
.legal-section { padding: 6px 0 22px; scroll-margin-top: 96px; outline: none; }
.legal-section + .legal-section { border-top: 1px solid var(--line); padding-top: 24px; }
.legal-section h2 { display: flex; align-items: baseline; gap: 12px; font-size: 1.28rem; margin: 0 0 12px; }
.legal-num { font-size: .8rem; color: var(--brick); font-weight: 600; letter-spacing: .02em; }
.legal-section p, .legal-section li { color: var(--ink-2); line-height: 1.65; max-width: 68ch; }
.legal-section p { margin: 0 0 10px; }
.legal-section ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.legal-section li::marker { color: var(--brick); }
.legal-section a { color: var(--slate); text-underline-offset: 3px; overflow-wrap: anywhere; }
mark.placeholder { background: #FBEAD9; color: #7A2A21; border: 1px dashed #D9A38F; border-radius: 4px; padding: 0 4px; font-size: .95em; }
.consent { font-size: .8rem; line-height: 1.5; margin: 12px 0 0; opacity: .85; }
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8rem; }
.foot-legal a { color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-legal a:hover { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; }
.foot-guides { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; font-size: .8rem; }
.foot-guides a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
/* Audit du 16.10.2026 : sur mobile, des cibles tactiles assez hautes et espacées (Lighthouse « target-size »). */
@media (max-width: 640px) { .foot-guides { gap: 4px 20px; font-size: .86rem; } .foot-guides a { min-height: 32px; } }
.foot-guides a:hover { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal span { margin-left: auto; color: var(--ink-2); }
@media (max-width: 600px) { .foot-legal span { margin-left: 0; width: 100%; } }

/* ================= Tableau de bord : prochaine échéance ================= */
.next-card { gap: 18px; }
.next-main { display: grid; gap: 10px; min-width: 0; }
.next-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.next-stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.next-stats li { display: grid; gap: 2px; }
.next-stats .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.next-stats li span:last-child { font-size: .78rem; color: var(--ink-2); }
.next-stats .st-done .num { color: var(--green); }
.next-stats .st-doing .num { color: var(--slate); }

/* ================= Calendrier ================= */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-actions .btn { white-space: normal; text-align: left; }
.cal-actions .btn svg { width: 16px; height: 16px; }

/* couleurs par type d'événement */
.k-task { --k: var(--brick); --k-bg: var(--brick-tint); --k-ink: var(--brick-deep); }
.k-overdue { --k: var(--brick-deep); --k-bg: var(--brick); --k-ink: #fff; }
.k-done { --k: var(--green); --k-bg: var(--green-tint); --k-ink: var(--green); }
.k-renewal { --k: var(--ink); --k-bg: #ECEBE6; --k-ink: var(--ink); }
.k-rec { --k: var(--slate); --k-bg: var(--slate-tint); --k-ink: var(--slate); }
.k-milestone { --k: var(--amber-ink); --k-bg: var(--amber-tint); --k-ink: var(--amber-ink); }
.k-missing { --k: var(--amber-ink); --k-bg: var(--amber-tint); --k-ink: var(--amber-ink); }

.cal-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cal-summary li { display: inline-flex; }

.cal-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .cal-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.cal-card { padding: 18px; }
@media (min-width: 720px) { .cal-card { padding: 22px 24px; } }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.cal-title-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cal-toolbar h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); letter-spacing: -.02em; }
.cal-toolbar h2::first-letter, .cal-daycard h2::first-letter, .agenda-month h3::first-letter { text-transform: uppercase; }
.cal-count { font-size: .86rem; color: var(--ink-2); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav .btn-ghost { border: 1px solid var(--line); min-height: 38px; }

.cal-dows, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dows span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 0 8px 8px; }
.cal-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cal-cell { position: relative; min-width: 0; min-height: 124px; padding: 6px 6px 8px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; transition: background-color .2s; }

.cal-cell.wknd { background: #FAFAF7; }
.cal-cell.out { background: var(--paper-2); }
.cal-cell.out .cal-date span { color: var(--line-strong); }
.cal-cell.out .cal-chip { opacity: .55; }
.cal-cell.sel { background: #FBF6F4; box-shadow: inset 0 0 0 2px var(--brick); z-index: 1; }
.cal-date { align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink); border-radius: 999px; }
.cal-date span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .86rem; transition: background-color .2s, color .2s; }
.cal-date:hover span { background: var(--paper-2); }
.cal-cell.today .cal-date span { background: var(--brick); color: #fff; }
.cal-date:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.cal-chips { display: grid; gap: 3px; min-width: 0; }
.cal-chip { display: block; width: 100%; min-width: 0; text-align: left; border: 0; border-radius: 6px; padding: 3px 7px 3px 8px; background: var(--k-bg); color: var(--k-ink); font: inherit; font-size: .72rem; font-weight: 600; line-height: 1.3; cursor: pointer; box-shadow: inset 3px 0 0 var(--k); transition: transform .2s var(--ease-out), box-shadow .2s; }
.cal-chip span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.cal-chip.k-overdue { box-shadow: none; }
.cal-chip.k-done span { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-chip.k-renewal { background: repeating-linear-gradient(135deg, #ECEBE6 0 6px, #F4F3EF 6px 12px); }
.cal-chip:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--k), var(--shadow-l); }
.cal-chip:focus-visible, .cal-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-more { border: 0; background: none; padding: 1px 4px; font: inherit; font-size: .72rem; font-weight: 600; color: var(--ink-2); text-align: left; cursor: pointer; }
.cal-more:hover { color: var(--brick); }
.cal-dots { display: none; }
.legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .78rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--k-bg); box-shadow: inset 3px 0 0 var(--k); }
.legend i.k-overdue { background: var(--brick); }

@media (max-width: 759px) {
  .cal-card { padding: 14px 12px; }
  .cal-dows span { padding: 0 0 6px; text-align: center; font-size: .72rem; letter-spacing: .02em; }
  .cal-cell { min-height: 0; aspect-ratio: 1 / 1.05; padding: 3px; align-items: center; gap: 2px; }
  .cal-date { align-self: center; position: static; }
  .cal-date::after { content: ""; position: absolute; inset: 0; }
  .cal-date span { width: 26px; height: 26px; font-size: .8rem; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; gap: 2px; justify-content: center; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }
  .cal-cell.sel { box-shadow: inset 0 0 0 2px var(--brick); }
}

.cal-side { display: grid; gap: 16px; min-width: 0; }
.cal-side .card { padding: 18px; }
.cal-daycard h2 { margin-bottom: 12px; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cal-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.cal-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-m); transform: translateY(-1px); }
.cal-item:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.ci-bar { width: 4px; align-self: stretch; min-height: 32px; border-radius: 4px; background: var(--k); }
.ci-date { display: grid; place-items: center; width: 44px; padding: 4px 0; border-radius: 9px; background: var(--k-bg); color: var(--k-ink); line-height: 1.05; }
.ci-date b { font-family: var(--font-display); font-size: 1.06rem; }
.ci-date span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ci-text { display: grid; gap: 2px; min-width: 0; }
.ci-text strong { font-size: .86rem; line-height: 1.3; }
.cal-item.k-done strong { text-decoration: line-through; color: var(--ink-2); }
.ci-text small { font-size: .78rem; color: var(--ink-2); }
.ci-arrow { width: 16px; height: 16px; color: var(--ink-2); transition: transform .25s var(--ease-out), color .2s; }
.ci-arrow svg { width: 100%; height: 100%; }
.cal-item:hover .ci-arrow { transform: translateX(3px); color: var(--brick); }
.cal-empty { font-size: .86rem; color: var(--ink-2); padding: 8px 2px; }
.agenda-month + .agenda-month { margin-top: 14px; }
.agenda-month h3 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: 12px 0 8px; }
.cal-below { margin-top: 26px; }
.agenda-cols { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.agenda-cols.one-col { grid-template-columns: minmax(0, 520px); }
.agenda-cols .agenda-month + .agenda-month { margin-top: 0; }
.cal-undated-box { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.cal-undated-box .cal-sub { font-size: .92rem; margin: 0 0 2px; }
.cal-undated-box .hint { margin: 0 0 12px; }
.cal-undated-box .cal-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); display: grid; }
.cal-note { font-size: .78rem; color: var(--ink-2); margin: 0; }

/* ================= Réalisation & renouvellement ================= */
.done-box { display: grid; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #CFE0D5; border-radius: 12px; background: #F4F8F5; }
@media (min-width: 720px) { .task-detail .done-box { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.done-field { display: grid; gap: 6px; }
.done-field label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--green); }
.done-field label svg { width: 14px; height: 14px; }
.done-field input { font: inherit; font-size: .92rem; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-ctl); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.done-field input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.done-info { display: grid; gap: 10px; font-size: .86rem; color: var(--ink-2); min-width: 0; }
.done-info p { margin: 0; }
.done-hint { display: flex; gap: 8px; color: var(--amber-ink); }
.done-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.done-info .btn { justify-self: start; }
.renew-kv { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.renew-kv div { display: grid; gap: 1px; }
.renew-kv dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.renew-kv dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--ink); }
.tag.missing { background: var(--amber-tint); color: var(--amber-ink); }
.tag.renew { background: #ECEBE6; color: var(--ink); }

/* ================= Panneau de détail ================= */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(26, 29, 31, .36); backdrop-filter: blur(2px); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper); box-shadow: -24px 0 60px rgba(26, 29, 31, .18); display: flex; flex-direction: column; outline: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.drawer-kind { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.k-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.drawer-close { flex: none; width: 44px; height: 44px; }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 32px; display: grid; gap: 14px; align-content: start; }
.drawer-body h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -.02em; line-height: 1.15; }
.drawer-body .task-tags { margin-top: -4px; }
.drawer-when { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.drawer-when small { grid-column: 1 / -1; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.drawer-when .dw-date { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -.02em; color: var(--ink); }
.drawer-when .rel { font-size: .86rem; color: var(--ink-2); }
.drawer-when.urgent { border-color: var(--brick); background: var(--brick-tint); }
.drawer-when.urgent .dw-date, .drawer-when.urgent .rel { color: var(--brick-deep); }
.drawer-status { justify-self: start; }
.drawer-status span { padding: 8px 14px; font-size: .86rem; }
.drawer-body .summary { margin: 0; color: var(--ink-2); line-height: 1.6; }
.drawer-body .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.drawer-body .done-box { margin: 0; }
.drawer-body .src { margin: 0; font-size: .8rem; }
.drawer-actions, .drawer-body .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer-link { margin: 4px 0 0; font-size: .92rem; font-weight: 600; }
@media (max-width: 719px) {
  .drawer-panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; box-shadow: 0 -18px 50px rgba(26, 29, 31, .2); }
  .drawer-top { border-radius: 20px 20px 0 0; padding: 10px 14px 10px 18px; }
  .drawer-top::before { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--line-strong); }
  .drawer-body { padding: 18px 18px 28px; }
}

/* ================= Validation en un clic ================= */
.task-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.task-check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: transparent; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease-out); }
.task-check svg { width: 14px; height: 14px; stroke-width: 3; }
.task-check:hover { border-color: var(--green); color: #BFD4C6; transform: scale(1.06); }
.task-check[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.task-check:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.drawer-set { display: flex; align-items: center; gap: 12px; }
.drawer-set .task-check { width: 32px; height: 32px; margin: 0; }

.done-field { align-items: start; }
.done-label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--green); }
.done-label svg { width: 14px; height: 14px; }
.date-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-ctl); border-radius: 10px; background: var(--surface); font: inherit; font-size: .92rem; color: var(--ink-2); cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s; }
.date-btn svg { width: 16px; height: 16px; color: var(--green); }
.date-btn.filled { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.date-btn:hover { border-color: var(--green); box-shadow: var(--shadow-green); }
.date-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.datepick { position: fixed; z-index: 90; width: 268px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 44px rgba(26, 29, 31, .16); }
.dp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dp-top strong { font-family: var(--font-display); font-size: .92rem; }
.dp-top strong::first-letter { text-transform: uppercase; }
.dp-nav { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.dp-nav svg { width: 14px; height: 14px; transform: rotate(90deg); }
.dp-nav[data-pick-move="1"] svg { transform: rotate(-90deg); }
.dp-nav:hover:not([disabled]) { border-color: var(--ink-2); }
.dp-nav[disabled] { opacity: .35; cursor: default; }
.dp-dows, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dows span { text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--ink-2); padding-bottom: 4px; }
.dp-day { display: grid; place-items: center; height: 32px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .86rem; color: var(--ink); cursor: pointer; transition: background-color .15s, color .15s; }
.dp-day:hover:not([disabled]) { background: var(--paper-2); }
.dp-day.today { box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; }
.dp-day.sel { background: var(--green); color: #fff; font-weight: 600; }
.dp-day[disabled] { color: var(--line-strong); cursor: default; }
.dp-day:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.dp-foot { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-quick { flex: 1; min-height: 40px; border: 1px solid var(--line-ctl); border-radius: 9px; background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.dp-quick:hover { border-color: var(--green); color: var(--green); }
.dp-quick.ghost { flex: none; padding: 0 12px; color: var(--ink-2); font-weight: 500; }

/* ================= Page cantons ================= */
.cantons-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.cantons-bar .chip-row { margin-bottom: 0; }
.search-input { min-height: 44px; min-width: 220px; padding: 10px 14px; border: 1px solid var(--line-ctl); border-radius: 999px; background: var(--surface); font: inherit; font-size: .92rem; color: var(--ink); }
.search-input:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; border-color: var(--brick); }
.region + .region { margin-top: 40px; }
.region-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.region-head h2 { font-size: 1.32rem; letter-spacing: -.02em; }
.region-head p { color: var(--ink-2); font-size: .86rem; }
.region-count { margin-left: auto; font-family: var(--font-display); font-size: .8rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.canton-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* le navigateur ne recale plus le défilement quand une fiche se déplie */
#regions, .canton-rows, .canton-row, .cr-panel, .task, .task-detail, .foot-panel { overflow-anchor: none; }
.canton-row { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .25s, transform .25s var(--ease-out); }
.canton-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-m); }
.canton-row.is-open { border-color: var(--brick); box-shadow: var(--shadow-brick); }
.cr-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
@media (min-width: 720px) { .cr-head { grid-template-columns: 34px minmax(0, 1fr) 90px 130px 24px; } }
.cr-arms { width: 34px; height: 41px; object-fit: contain; }
.cr-id { display: grid; gap: 1px; min-width: 0; }
.cr-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.cr-capital { font-size: .8rem; color: var(--ink-2); }
.cr-langs { font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-2); }
.cr-pop { display: grid; gap: 1px; text-align: right; }
.cr-pop b { font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.cr-pop span { font-size: .72rem; color: var(--ink-2); }
.cr-chev { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink-2); transition: transform .3s var(--ease-out), color .2s; }
.cr-chev svg { width: 16px; height: 16px; }
.canton-row.is-open .cr-chev { transform: rotate(180deg); color: var(--brick); }
.cr-head:hover .cr-name { color: var(--brick); }
.cr-head:focus-visible { outline: 2px solid var(--brick); outline-offset: -3px; }
@media (max-width: 719px) { .cr-langs { display: none; } .cr-pop { display: none; } }
.cr-inner { display: grid; gap: 20px; padding: 4px 16px 20px; }
@media (min-width: 900px) { .cr-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 4px 20px 24px; } }
.canton-photo { margin: 0; display: grid; gap: 8px; }
.canton-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); background: var(--paper-2); transition: transform .6s var(--ease-out); }
.canton-photo:hover img { transform: scale(1.015); }
.canton-photo figcaption { display: grid; gap: 2px; font-size: .72rem; color: var(--ink-2); }
.canton-photo figcaption b { font-size: .8rem; color: var(--ink); font-weight: 600; }
.canton-photo .credit a { color: var(--ink-2); }
.cr-text { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cr-about { color: var(--ink-2); line-height: 1.6; margin: 0; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-actions .btn svg { width: 14px; height: 14px; }
.fact-note { display: block; margin-top: 3px; color: var(--ink-2); font-size: .86rem; }

/* Espace : fiche canton compacte */
.canton-card .link-arrow { margin-top: 12px; font-size: .86rem; }
.task-check { position: relative; }
.check-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--green); pointer-events: none; }

.credit-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; color: var(--ink-2); }
.credit-list b { color: var(--ink); font-weight: 600; }

/* ================= Finitions accessibilité (audit UI/UX) ================= */
/* Focus visible et homogène sur tout élément interactif, sans jamais masquer le repère */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, .task-check:focus-visible, .cal-item:focus-visible { outline-offset: 3px; }

/* Cibles : au moins 24 px de haut, y compris pour les liens fléchés en fin de section */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.foot-nav a, .foot-legal a, .site-footer .links a { display: inline-block; min-height: 24px; padding-block: 2px; }
.consent a { display: inline-block; padding-block: 2px; }

/* Chiffres alignés partout où l'on compare des valeurs */
.num, .cr-pop b, .next-stats .num, .renew-kv dd, .cal-count, .ci-date b { font-variant-numeric: tabular-nums; }

/* ================= Pied de page en une ligne ================= */
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-bottom: 16px; }
.foot-row .brand { margin: 0; }
.foot-row .foot-nav { margin: 0; flex: 1 1 auto; }
.foot-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.foot-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.foot-toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.foot-toggle:hover { border-color: var(--ink-2); }
.foot-toggle[aria-expanded="true"] { border-color: var(--ink); }
.foot-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.foot-panel { display: grid; gap: 22px 40px; padding: 20px 0 4px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .foot-panel { grid-template-columns: 1.5fr 1fr; } }
.site-footer { padding: 26px 0 30px; }
.foot-bottom { margin-top: 18px; padding-top: 16px; }
.foot-bottom p { max-width: 68ch; font-size: .8rem; }
.foot-legal { margin: 0; padding: 0; border: 0; }

/* ================= Menu « ajouter au calendrier » ================= */
.popmenu { position: fixed; z-index: 90; width: 290px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-l); display: grid; gap: 2px; }
.popmenu button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .15s; }
.popmenu button:hover { background: var(--paper-2); }
.popmenu button:focus-visible { outline: 2px solid var(--brick); outline-offset: -2px; }
.pm-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); }
.pm-ico svg { width: 15px; height: 15px; }
.pm-text { display: grid; gap: 1px; min-width: 0; }
.pm-text b { font-size: .88rem; font-weight: 600; }
.pm-text small { font-size: .78rem; color: var(--ink-2); line-height: 1.35; }

/* compteurs du calendrier : un nombre puis son libellé, sur une ligne */

/* ================= Compteurs du calendrier : des raccourcis ================= */
.cal-summary button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: inherit; font-size: .86rem; color: var(--ink-2); cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .2s var(--ease-out), color .2s; }
.cal-summary button:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-m); }
.cal-summary .sum-dot { width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--k); }
.cal-summary b { font-weight: 600; font-size: .92rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-summary span { white-space: nowrap; }
.cal-summary .sum-arrow { display: inline-flex; width: 14px; height: 14px; margin-left: 2px; color: var(--line-strong); transition: transform .25s var(--ease-out), color .2s; }
.cal-summary .sum-arrow svg { width: 100%; height: 100%; }
.cal-summary button:hover .sum-arrow { transform: translateX(3px); color: var(--brick); }
.cal-summary .k-overdue b { color: var(--brick); }

/* Bouton d'ajout au calendrier : un contrôle, pas un appel à l'action */
.cal-add { gap: 8px; }
.cal-add .cal-add-chev { width: 14px; height: 14px; color: var(--ink-2); transition: transform .25s var(--ease-out); }
.cal-add[aria-expanded="true"] .cal-add-chev { transform: rotate(180deg); }
.cal-add[aria-expanded="true"] { border-color: var(--ink); }

/* ================= Les deux formules ================= */
.plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-s); transition: border-color .25s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.plan-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-l); transform: translateY(-2px); }
.plan-card.is-best { border-color: var(--brick); box-shadow: var(--shadow-brick); }
.plan-badge { position: absolute; top: -11px; left: 24px; padding: 3px 10px; border-radius: 999px; background: var(--brick); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.plan-tag { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.plan-card h3 { font-size: 1.28rem; letter-spacing: -.02em; }
.plan-desc { color: var(--ink-2); font-size: .92rem; min-height: 2.8em; }
.plan-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.plan-amount b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-amount span { color: var(--ink-2); font-size: .92rem; }
.plan-billed { color: var(--ink-2); font-size: .8rem; min-height: 1.2em; }
.plan-card .btn { justify-content: center; margin: 14px 0 4px; }
.plan-list { list-style: none; display: grid; gap: 8px; margin: 6px 0 0; padding: 0; }
.plan-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); }
.plan-list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--green); }
.plan-more { margin-top: 12px; font-size: .86rem; }
.plan-note { display: grid; gap: 4px; margin: 0 0 30px; font-size: .8rem; color: var(--ink-2); }
.plan-note .consent { margin: 0; }

/* Comparatif interactif */
.compare { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; margin-bottom: 44px; }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, 168px); align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.cmp-head .cmp-label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cmp-tab { min-height: 38px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.cmp-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cmp-rows { list-style: none; margin: 0; padding: 0; }
.cmp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, 168px); align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: .86rem; }
.cmp-rows li:first-child { border-top: 0; }
.cmp-rows li:nth-child(even) { background: #FBFBF8; }
.cmp-cell { display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 10px; transition: background-color .25s; }
.cmp-cell.is-active { background: var(--paper-2); }
.cmp-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; }
.cmp-mark svg { width: 16px; height: 16px; }
.cmp-cell.yes .cmp-mark { background: var(--green); color: #fff; }
.cmp-cell.no .cmp-mark { background: var(--brick-tint); color: var(--brick); }
.cmp-cell.no .cmp-mark svg { width: 13px; height: 13px; }
/* Mobile : les deux colonnes restent visibles, les noms des formules passent sur deux lignes. */
@media (max-width: 720px) {
  .cmp-head, .cmp-rows li { grid-template-columns: minmax(0, 1fr) repeat(2, 78px); gap: 6px; }
  .cmp-head { padding: 12px 14px; }
  .cmp-rows li { padding: 10px 14px; }
  .cmp-head .cmp-label { font-size: .72rem; }
  .cmp-tab { white-space: normal; min-height: 44px; padding: 6px 8px; border-radius: 12px; font-size: .74rem; line-height: 1.2; }
}

/* Accueil : ce que CheckSwiss vérifie */
.fact-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fact-card { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.fact-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brick-tint); color: var(--brick); }
.fact-icon svg { width: 17px; height: 17px; }
.fact-card h3 { font-size: 1rem; }
.fact-card p { color: var(--ink-2); font-size: .86rem; line-height: 1.5; }

/* Aperçu limité : flou puis proposition */
.tasks.is-locked { position: relative; }
.task-blur { position: relative; display: block; max-height: 190px; overflow: hidden; pointer-events: none; filter: blur(4px); opacity: .55; }
.task-blur .tasks { list-style: none; margin: 0; padding: 0; }
.task-blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252,252,250,0) 0%, var(--paper) 92%); }
.task-lock { display: grid; gap: 18px; padding: 26px 22px 24px; border-top: 1px solid var(--line); background: var(--paper); }
.lock-copy { display: flex; gap: 14px; align-items: flex-start; }
.lock-copy svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--brick); }
.lock-copy h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.lock-copy p { color: var(--ink-2); font-size: .92rem; margin-top: 4px; max-width: 60ch; }
.lock-plans { display: grid; gap: 14px; }
@media (min-width: 760px) { .lock-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lock-plans .plan-card { padding: 20px 18px 18px; }
.lock-plans .plan-card h3 { font-size: 1.12rem; }
.lock-plans .plan-desc { min-height: 0; }
.lock-all { justify-self: start; font-size: .88rem; }

/* Retour de paiement */
.thanks-card { display: grid; justify-items: start; gap: 12px; max-width: 620px; padding: 34px 32px; }
.thanks-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--green-tint); color: var(--green); }
.thanks-mark svg { width: 24px; height: 24px; }
.thanks-card h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.thanks-card p { color: var(--ink-2); }
.thanks-card .btn { margin-top: 6px; }

/* ================= Accueil : aperçu du site ================= */
.tour-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.tour-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .35s var(--ease-out), transform .3s var(--ease-out); }
.tour-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-l); transform: translateY(-2px); }
.tour-art { display: grid; place-items: center; height: 92px; border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.tour-art img { max-width: 118px; max-height: 84px; object-fit: contain; }
.tour-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.tour-body { display: grid; gap: 4px; }
.tour-desc { color: var(--ink-2); font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.45em); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; color: var(--ink-2); font-size: .8rem; }
.tour-card:hover .arrow-circle { background: var(--brick); border-color: var(--brick); color: #fff; transform: translateX(3px); }
.mini-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 112px; }
.mini-month i { width: 100%; aspect-ratio: 1; border-radius: 3px; background: #E9E8E2; }
.mini-month i.dot { background: var(--brick-tint); box-shadow: inset 0 0 0 1px rgba(178,58,46,.35); }
.mini-month i.on { background: var(--brick); }
.mini-arms { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 12px; }
.mini-arms img { width: 24px; height: 29px; object-fit: contain; }
.tour-price { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; }
.tour-price b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.tour-price i { font-style: normal; font-size: .78rem; color: var(--ink-2); }

/* Petit aperçu flouté du calendrier dans l'encart d'accès */
.mini-cal { position: relative; max-width: 330px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); filter: blur(1.6px); opacity: .8; user-select: none; pointer-events: none; }
.mini-cal::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); background: linear-gradient(180deg, rgba(252,252,250,0) 55%, rgba(252,252,250,.75) 100%); }
.mc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mc-top b { font-family: var(--font-display); font-size: .92rem; }
.mc-top b::first-letter { text-transform: uppercase; }
.mc-top span { font-size: .72rem; color: var(--ink-2); }
.mc-dows, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mc-dows span { text-align: center; font-size: .6rem; font-weight: 600; color: var(--ink-2); padding-bottom: 3px; }
.mc-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--paper-2); font-size: .66rem; color: var(--ink-2); }
.mc-day.out { background: transparent; }
.mc-day.today { background: var(--brick); color: #fff; font-weight: 600; }
.mc-day i { position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--k, var(--brick)); }
.mc-list { list-style: none; display: grid; gap: 4px; margin: 10px 0 0; padding: 0; }
.mc-list li { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--ink-2); }
.mc-list i { width: 4px; height: 12px; border-radius: 3px; background: var(--k, var(--brick)); flex: none; }
.mc-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= Message d'abonnement posé sur le calendrier ================= */
.cal-card { position: relative; }
.cal-card.is-locked .cal-toolbar, .cal-card.is-locked .cal-dows, .cal-card.is-locked .cal-grid, .cal-card.is-locked .legend { filter: blur(5px); opacity: .7; pointer-events: none; user-select: none; transition: filter .3s var(--ease-out), opacity .3s; }
.cal-lock-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; background: rgba(252, 252, 250, .62); backdrop-filter: blur(2px); border-radius: var(--radius-l); }
.cal-lock-inner { position: relative; display: grid; justify-items: center; gap: 8px; max-width: 420px; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-l); text-align: center; }
.cal-lock-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-color: transparent; background: transparent; }
.cal-lock-close:hover { border-color: var(--line); }
.cal-lock-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brick-tint); color: var(--brick); }
.cal-lock-mark svg { width: 21px; height: 21px; }
.cal-lock-inner h2 { font-size: 1.22rem; letter-spacing: -.02em; }
.cal-lock-inner p { color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.cal-lock-free { font-size: .82rem !important; color: var(--green) !important; font-weight: 600; }
.cal-lock-actions { display: grid; justify-items: center; gap: 10px; margin-top: 8px; }
.cal-lock-actions .btn { white-space: normal; }
@media (max-width: 560px) { .cal-lock-inner { padding: 22px 18px 20px; } .cal-lock-inner h2 { font-size: 1.12rem; } }

/* Profil : région puis canton, en listes déroulantes */
.canton-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.select-field .label { display: block; margin-bottom: 6px; }
.input.select { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.canton-chosen { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
.canton-chosen:empty { display: none; }
.canton-chosen .canton { max-width: 420px; }
@media (max-width: 560px) { .canton-selects { grid-template-columns: minmax(0, 1fr); } }

/* Coût des démarches */
.tag.cost { background: var(--paper-2); color: var(--ink); }
.tag.cost svg { width: 12px; height: 12px; }
.tag.cost.free, .tag.cost.received { background: var(--green-tint); color: var(--green); }
.cost-box .cost-amount { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cost-box .cost-amount span { display: block; margin-top: 2px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cost-box .cost-note { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }

/* Page Sources */
.src-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.src-list li { font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.src-list b { font-weight: 600; color: var(--ink); }
.src-date { color: var(--ink-2); font-size: .82rem; }
.src-canton { border-top: 1px solid var(--line); padding: 10px 0; }
.src-canton summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; }
.src-canton .src-list { margin-top: 10px; }

/* ---------- Budget mensuel (abonnement) ---------- */
.budget-card { margin-top: 16px; padding: 26px; }
.budget-head { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; }
.budget-head > div:first-child { max-width: 620px; }
.budget-head .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px; }
.budget-head .eyebrow svg { width: 16px; height: 16px; }
.budget-head h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -.02em; margin: 0; }
.budget-head .hint { font-size: .9rem; margin: 6px 0 0; }
.budget-head .btn { margin-top: 14px; }
.budget-body { margin-top: 20px; }
.b-figs { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.b-fig { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-fig.is-main { background: var(--paper-2); }
.b-fig-label { font: 600 .72rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.b-fig b { font: 700 1.45rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.b-fig.is-main b { color: var(--brick); font-size: 1.9rem; }
.b-fig small { font-size: .78rem; color: var(--ink-2); }
.b-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; align-items: start; }
.b-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 196px; align-items: stretch; }
.b-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0 0; border: 0; border-radius: var(--radius-s); background: none; font: inherit; color: var(--ink-2); cursor: pointer; }
.b-bar:hover { background: var(--paper-2); }
.b-bar[aria-pressed="true"] { background: var(--slate-tint); color: var(--ink); }
.b-bar-val { font: 600 .66rem var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-bar-track { flex: 1; width: 62%; max-width: 30px; display: flex; align-items: flex-end; }
.b-bar-fill { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--slate); border-radius: 5px 5px 2px 2px; overflow: hidden; transition: height .5s var(--ease-out); }
.b-bar-fill i { display: block; width: 100%; background: var(--brick); }
.b-bar-m { font-size: .7rem; text-transform: capitalize; padding-bottom: 4px; }
.b-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: .78rem; color: var(--ink-2); }
.b-legend span { width: 10px; height: 10px; border-radius: 3px; background: var(--slate); }
.b-legend .k-once { background: var(--brick); margin-left: 8px; }
.b-month { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; }
.b-month h3 { font: 700 1rem var(--font-display); margin: 0 0 8px; text-transform: capitalize; }
.b-month ul { list-style: none; margin: 0; padding: 0; }
.b-month li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.b-month li:first-child { border-top: 0; }
.b-month li span { display: flex; flex-direction: column; min-width: 0; }
.b-month li strong { font-size: .88rem; font-weight: 600; }
.b-month li small { font-size: .75rem; color: var(--ink-2); }
.b-month li b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
.b-month li.is-once b { color: var(--brick); }
.b-total { display: flex; justify-content: space-between; margin: 6px 0 0; padding-top: 10px; border-top: 2px solid var(--ink); font-weight: 600; }
.b-total b { font: 700 1.1rem var(--font-display); font-variant-numeric: tabular-nums; }
.b-note { margin: 12px 0 0; font-size: .82rem; color: var(--ink-2); max-width: 820px; }
.b-note.is-empty { padding: 10px 12px; border-radius: var(--radius-s); background: var(--amber-tint); color: var(--amber-ink); }
.b-note.is-plus { color: var(--green); font-weight: 600; }
.budget-edit { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.budget-edit .b-edit-title { margin: 0 0 2px; font: 700 1.2rem var(--font-display); letter-spacing: -.01em; }
.budget-edit .hint { margin: 2px 0 12px; }
.b-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.b-field { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; font-weight: 600; }
.b-input { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-ctl); border-radius: var(--radius-s); background: var(--surface); }
.b-input:focus-within { outline: 2px solid var(--brick); outline-offset: 1px; }
.b-input i, .b-input em { font-style: normal; font-weight: 500; font-size: .8rem; color: var(--ink-2); flex: none; }
.b-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); padding: 8px 0; }
.b-input-num { max-width: 120px; }
.budget-card.is-locked .budget-head { align-items: center; }
.b-chart-fake { flex: none; width: min(340px, 42%); height: 150px; filter: blur(1.5px); opacity: .55; }
.b-chart-fake .b-bar { cursor: default; }
@media (max-width: 860px) {
  /* minmax(0, 1fr) : la colonne reste dans la carte au lieu de s'élargir avec le graphique. */
  .b-grid { grid-template-columns: minmax(0, 1fr); }
}
.b-grid > div { min-width: 0; }
@media (max-width: 640px) {
  .budget-card { padding: 20px 16px; }
  .b-figs { grid-template-columns: 1fr 1fr; }
  .b-fig.is-main { grid-column: 1 / -1; }
  .b-chart { gap: 2px; height: 170px; }
  /* Trop étroit pour douze montants lisibles : seul le mois choisi affiche le sien. */
  .b-bar-val { visibility: hidden; font-size: .72rem; }
  .b-bar[aria-pressed="true"] .b-bar-val { visibility: visible; }
  .b-bar { overflow: visible; }
  .b-bar-track { width: 70%; }
  .b-bar-m { font-size: .62rem; }
  .budget-head { flex-direction: column; align-items: stretch; }
  .b-chart-fake { width: 100%; height: 110px; }
}
@media (prefers-reduced-motion: reduce) { .b-bar-fill { transition: none; } }

/* Budget : navigation dans les mois et les années, enregistrement */
.b-nav { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.b-nav-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.b-nav-btn svg { width: 18px; height: 18px; }
.b-nav-btn:hover:not([disabled]) { border-color: var(--line-strong); background: var(--paper-2); }
.b-nav-btn[disabled] { opacity: .35; cursor: default; }
.b-nav-label { flex: 1; min-width: 0; text-align: center; font: 600 .9rem var(--font-display); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-nav-today { flex: none; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--brick); font: 600 .82rem var(--font-body); cursor: pointer; }
.b-nav-today:hover { background: var(--brick-tint); }
.b-save { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
.b-saved { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-2); }
.b-saved.is-ok { color: var(--green); font-weight: 600; }
.b-saved svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .b-nav { gap: 4px; }
  .b-nav-btn { width: 34px; height: 34px; }
  .b-nav-label { font-size: .8rem; }
  .b-nav { flex-wrap: wrap; }
  .b-nav-today { order: 6; flex-basis: 100%; min-height: 30px; padding: 0 6px; font-size: .78rem; text-align: right; }
}

/* Démarches : où faire la démarche */
.act-links { margin: 14px 0 4px; }
.act-links h4 { margin: 0 0 8px; font: 600 .74rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.act-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.act-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; line-height: 1.3; }
.act-link:hover { border-color: var(--brick); color: var(--brick); }
.act-link svg { width: 16px; height: 16px; flex: none; color: var(--brick); }

/* Budget : bande de mois défilante (glisser au doigt ou à la souris) */
.b-scroll { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 6px; cursor: grab; outline-offset: 4px; }
.b-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.b-strip { display: flex; gap: 4px; height: 218px; }
.b-strip .b-bar { flex: 0 0 50px; scroll-snap-align: start; }
.b-strip .b-bar-val { visibility: visible; font-size: .66rem; }
.b-strip .b-bar-track { width: 60%; max-width: 26px; }
.b-bar-y { min-height: 1.1em; font: 700 .7rem var(--font-display); color: var(--ink); }
.b-strip .b-bar.is-year { box-shadow: inset 1px 0 0 var(--line-strong); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.b-strip .b-bar.is-now .b-bar-m { color: var(--brick); font-weight: 700; }
.b-nav-label { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-transform: none; }
.b-nav-label b { font: 700 1.05rem var(--font-display); }
.b-nav-label span { font-size: .78rem; font-weight: 500; color: var(--ink-2); }
.b-legend em { margin-left: auto; font-style: normal; font-size: .74rem; color: var(--ink-2); }
.b-total-year { margin-top: 4px; border-top: 1px solid var(--line); font-weight: 500; color: var(--ink-2); }
.b-total-year b { font-size: 1rem; color: var(--ink); }
@media (max-width: 640px) {
  .b-strip { height: 200px; }
  .b-strip .b-bar { flex-basis: 46px; }
  .b-strip .b-bar-val { font-size: .62rem; }
  .b-nav { flex-wrap: nowrap; }
  .b-nav-today { order: 0; flex-basis: auto; }
  .b-legend em { flex-basis: 100%; margin-left: 0; }
}

.b-nav-label { overflow: visible; white-space: normal; }
.b-nav-label span { white-space: normal; text-align: center; }
@media (max-width: 640px) {
  .b-nav-label b { font-size: .98rem; }
  .b-nav-label span { font-size: .72rem; }
}

/* Démarches retirées (« Pas concerné·e ») */
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.skip-btn { margin-left: auto; max-width: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.task-skipped { list-style: none; border-top: 1px dashed var(--line-strong); }
.task-skipped details { padding: 12px 18px; }
.task-skipped summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; list-style: none; font-weight: 600; font-size: .88rem; color: var(--ink-2); }
.task-skipped summary::-webkit-details-marker { display: none; }
.task-skipped summary svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.task-skipped details[open] summary svg { transform: rotate(180deg); }
.task-skipped ul { list-style: none; margin: 6px 0 0; padding: 0; }
.task-skipped li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.task-skipped li span { text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* Budget : revenus, solde, abonnements */
.b-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-fig b.is-in { color: var(--green); }
.b-fig b.is-pos { color: var(--green); }
.b-fig b.is-neg { color: var(--brick); }
.b-bar-track { position: relative; }
.b-bar-in { position: absolute; left: -4px; right: -4px; height: 3px; border-radius: 2px; background: var(--green); z-index: 1; transform: translateY(1.5px); }
.b-bar-fill.is-over { background: #7A2A22; }
.b-legend .k-in { width: 14px; height: 3px; border-radius: 2px; background: var(--green); margin-left: 8px; }
.b-sub { margin: 14px 0 2px; font: 600 .72rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.b-sub:first-of-type { margin-top: 4px; }
.b-month li.is-sub b { color: var(--slate); }
.b-in-list li b { color: var(--green); }
.b-total-in b { color: var(--green); }
.b-balance { border-top: 2px solid var(--ink); }
.b-balance b.is-pos, .b-total-year b.is-pos { color: var(--green); }
.b-balance b.is-neg, .b-total-year b.is-neg { color: var(--brick); }
.b-group { margin: 22px 0 10px; font: 700 .95rem var(--font-display); }
.b-group:first-of-type { margin-top: 12px; }
.b-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.b-check input { width: 20px; height: 20px; accent-color: var(--brick); }
.sub-catalog { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.sub-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 600 .82rem var(--font-body); color: var(--ink); cursor: pointer; }
.sub-chip:hover { border-color: var(--line-strong); background: var(--paper-2); }
.sub-logo { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--c); color: #fff; }
.sub-logo svg { width: 16px; height: 16px; fill: currentColor; }
.sub-logo.is-text { font: 800 .62rem/1 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.sub-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sub-empty { font-size: .86rem; color: var(--ink-2); }
.sub-row { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(110px, .8fr) auto minmax(140px, auto) 36px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.sub-name { font-weight: 600; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-name input { width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line-ctl); border-radius: var(--radius-s); font: inherit; }
.sub-amount { min-height: 40px; }
.sub-per { min-height: 40px; padding: 0 8px; border: 1px solid var(--line-ctl); border-radius: var(--radius-s); background: var(--surface); font: 500 .85rem var(--font-body); color: var(--ink); }
.sub-date { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; font-weight: 600; color: var(--ink-2); }
.sub-date input { min-height: 38px; padding: 4px 8px; border: 1px solid var(--line-ctl); border-radius: var(--radius-s); font: 500 .85rem var(--font-body); color: var(--ink); background: var(--surface); }
.sub-del { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.sub-del:hover { background: var(--brick-tint); color: var(--brick); }
.sub-del svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .b-figs { grid-template-columns: 1fr 1fr; }
  .b-fig.is-main { grid-column: auto; }
}
@media (max-width: 640px) {
  .sub-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px; grid-template-areas: "logo name name del" "amount amount amount amount" "per per date date"; align-items: end; }
  .sub-row .sub-logo, .sub-row .sub-name, .sub-row .sub-del { align-self: center; }
  .sub-row .sub-per { width: 100%; }
  .sub-row .sub-logo { grid-area: logo; }
  .sub-row .sub-name { grid-area: name; }
  .sub-row .sub-del { grid-area: del; }
  .sub-row .sub-amount { grid-area: amount; }
  .sub-row .sub-per { grid-area: per; }
  .sub-row .sub-date { grid-area: date; }
}

/* Tarifs : abonnement mensuel ou annuel */
.plans.is-v2 { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
/* Mensuel / annuel : un seul curseur glisse sous l'option choisie (ressort amorti, sans rebond). */
.period-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.period-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-s); transition: transform .34s cubic-bezier(.22, 1, .36, 1); }
.period-switch[data-active="y"] .period-thumb { transform: translateX(calc(100% + 4px)); }
.period-switch button { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 16px; border: 0; border-radius: 9px; background: none; font: 600 .88rem var(--font-body); color: var(--ink-2); cursor: pointer; line-height: 1.15; transition: color .2s; -webkit-tap-highlight-color: transparent; }
.period-switch button[aria-checked="true"] { color: var(--ink); }
.period-switch button:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
/* La mention « 2 mois offerts » devient l'économie chiffrée : les deux textes réservent la même place. */
.period-switch button em { display: grid; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--green); padding: 1px 7px; border-radius: 999px; transition: background-color .25s; }
.period-switch button em i { grid-area: 1 / 1; font-style: normal; text-align: center; white-space: nowrap; transition: opacity .22s, transform .22s cubic-bezier(.22, 1, .36, 1); }
.period-switch button em i + i { opacity: 0; transform: translateY(5px); }
.period-switch[data-active="y"] button em { background: var(--green-tint); }
.period-switch[data-active="y"] button em i:first-child { opacity: 0; transform: translateY(-5px); }
.period-switch[data-active="y"] button em i + i { opacity: 1; transform: none; }
.plan-amount b .roll { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: pre; }
.plan-amount b .roll, .plan-amount b .roll > span { font-size: inherit; color: inherit; }
.plan-amount b .roll > span { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .period-thumb, .period-switch button em i, .period-switch button em { transition: none; }
}
.plan-was { margin-right: 10px; font: 600 1.1rem var(--font-display); color: var(--ink-2); text-decoration-thickness: 2px; text-decoration-color: var(--brick); }
.auth-restore { margin: 10px 0 4px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-m); }
.auth-restore .hint { margin: 0 0 10px; }
.auth-restore .hint[role="status"] { margin: 10px 0 0; }

/* Menu du compte (bonhomme) */
.acct-pick { position: relative; display: inline-flex; }
.acct-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 230px; max-width: calc(100vw - 24px); padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-m); }
.acct-who { margin: 0; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a, .acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 .9rem var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible { background: var(--paper-2); }
.acct-menu svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); }
.acct-menu p + a { margin-top: 4px; }

/* Pied de page : plus compact, « Effacer mes données » en simple lien discret */
.foot-reset { margin: 4px 0 0; padding: 4px 0; border: 0; background: none; font: 500 .78rem var(--font-body); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-reset:hover { color: var(--brick); }
@media (max-width: 640px) {
  .site-footer { padding: 22px 0 26px; }
  .foot-row { gap: 10px; padding-bottom: 12px; }
  .foot-row .foot-nav { flex-basis: 100%; gap: 4px 16px; }
  .foot-nav a { font-size: .88rem; }
  .foot-bottom { margin-top: 10px; padding-top: 12px; gap: 8px; }
  .foot-guides { gap: 2px 14px; }
  .foot-legal { gap: 2px 16px; margin-top: 8px; padding-top: 10px; }
  .foot-legal span { margin-top: 4px; }
}

.foot-copy { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.foot-copy .foot-reset { margin: 0; padding: 0; }
@media (max-width: 600px) { .foot-legal span.foot-copy { width: 100%; margin-left: 0; } }

/* Tarifs : quatre atouts, budget en premier */
@media (min-width: 760px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }

/* Espace personnel : résumé du budget */
.budget-summary { margin-top: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 28px; padding: 20px 24px; }
.budget-summary .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 4px; }
.budget-summary .eyebrow svg { width: 16px; height: 16px; }
.budget-summary h2 { margin: 0; font: 700 1.15rem var(--font-display); }
.bs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.bs-figs div { min-width: 0; }
.bs-figs dt { font: 600 .7rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.bs-figs dd { margin: 2px 0 0; font: 700 1.2rem var(--font-display); font-variant-numeric: tabular-nums; }
.bs-figs dd.is-in, .bs-figs dd.is-pos { color: var(--green); }
.bs-figs dd.is-neg { color: var(--brick); }
.budget-summary .btn { white-space: nowrap; }
.budget-summary .btn svg { width: 16px; height: 16px; }
.budget-summary.is-locked { display: block; }
@media (max-width: 860px) {
  .budget-summary { grid-template-columns: 1fr; }
  .budget-summary .btn { justify-self: start; }
}
@media (max-width: 480px) { .bs-figs dd { font-size: 1.02rem; } }

/* Page « Mon budget » */
.budget-card.is-page { margin-top: 8px; }
.budget-card.is-page .budget-body { margin-top: 0; }

/* Vignette de l'accueil */
.mini-budget { position: relative; display: flex; align-items: flex-end; gap: 5px; width: 120px; height: 78px; padding: 6px 4px 0; }
.mini-budget i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--slate); }

/* Budget : légende du graphique */
.b-legend { flex-wrap: wrap; gap: 6px 16px; }
.b-legend .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.b-legend .lg i { width: 11px; height: 11px; border-radius: 3px; }
.b-legend .k-in { background: var(--green); }
.b-legend .k-rec { background: #D0584C; }
.b-legend .k-once { background: #8C2A21; }
.b-swipe { margin: 4px 0 0; font-size: .74rem; color: var(--ink-2); }
@media (max-width: 640px) { .b-legend { gap: 4px 12px; font-size: .74rem; } }

/* Pied de page : contact et Instagram */
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: 100%; margin: 0; font-size: .82rem; }
.foot-contact > span { font: 600 .72rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.foot-contact a { color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-contact a:hover { color: var(--brick); }
.foot-ig { display: inline-flex; align-items: center; gap: 6px; }
.foot-ig svg { width: 16px; height: 16px; }
.b-legend .lg { width: auto; height: auto; margin: 0; border-radius: 0; background: none; }
@media (max-width: 640px) {
  .b-legend { flex-wrap: wrap; gap: 4px 14px; font-size: .74rem; }
  .b-legend .lg { gap: 4px; }
  .b-legend .lg i { width: 9px; height: 9px; }
}

/* Budget : une seule colonne empilée par mois (dépenses en rouge, reste en vert) */
.b-stack { transform-origin: 50% 100%; display: flex; flex-direction: column; width: 62%; max-width: 30px; border-radius: 5px 5px 2px 2px; overflow: hidden; background: #D0584C; transition: height .5s var(--ease-out); }
.b-strip .b-bar-track { width: 100%; max-width: none; justify-content: center; }
.b-stack i { display: block; width: 100%; flex: none; }
.b-stack .s-left { background: var(--green); }
.b-stack .s-once { background: #8C2A21; }
.b-stack .s-rec { background: #D0584C; }
.b-stack.is-over { box-shadow: 0 -3px 0 #8C2A21; }
.mini-budget { gap: 5px; }
.mini-budget .mb-col { flex: 1; display: flex; flex-direction: column; height: 100%; border-radius: 3px 3px 1px 1px; overflow: hidden; }
.mini-budget .mb-col i { display: block; flex: none; border-radius: 0; }
.mini-budget .s-left { background: var(--green); }
.mini-budget .s-once { background: #8C2A21; }
.mini-budget .s-rec { background: #D0584C; }
@media (prefers-reduced-motion: reduce) { .b-stack { transition: none; } }

/* Grilles de six cartes : trois colonnes, pour ne jamais laisser une carte seule sur sa ligne. */
@media (min-width: 900px) {
  .cat-links:has(> :nth-child(6):last-child), .tour-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
  .cat-links:has(> :nth-child(5):last-child), .tour-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
}

/* Gerbe de croix suisses quand une démarche est faite */
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.burst i { position: absolute; display: block; will-change: transform, opacity; }
.burst-bit { width: 8px; height: 5px; border-radius: 1px; }
.burst-cross { width: 14px; height: 14px; border-radius: 3px; background: var(--brick); }
.burst-cross::before, .burst-cross::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.burst-cross::before { width: 62.5%; height: 18.75%; }
.burst-cross::after { width: 18.75%; height: 62.5%; }

/* Mon espace : message d'avancement et raccourcis */
.score-msg { margin: 10px 0 0 !important; color: var(--ink) !important; font-weight: 600; font-size: .95rem !important; }
.score-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.score-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .84rem; font-weight: 600; text-decoration: none; transition: border-color .2s, background-color .2s, transform .3s var(--ease-out); }
.score-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--slate); }
.score-pill.is-late { border-color: rgba(178, 58, 46, .35); background: var(--brick-tint); color: var(--brick-deep); }
.score-pill.is-late i { background: var(--brick); animation: late-pulse 2s ease-in-out infinite; }
.score-pill:hover { border-color: var(--line-strong); transform: translateY(-1px); }
@keyframes late-pulse { 50% { box-shadow: 0 0 0 5px rgba(178, 58, 46, .16); } }
@media (prefers-reduced-motion: reduce) { .score-pill.is-late i { animation: none; } }
/* Petit écran : anneau réduit, à côté du texte, au lieu d'occuper tout l'écran. */
@media (max-width: 519px) {
  .overview .score-card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
  .overview .score-card .ring { width: 104px; height: 104px; }
  .overview .score-card .ring-label .num { font-size: 1.9rem; }
  .overview .score-card .ring-label .num small { font-size: .85rem; }
  .overview .score-card [data-i18n="progressExplain"] { display: none; }
  .overview .score-card .score-pills { grid-column: 1 / -1; }
}

.cal-next-label { margin: 12px 0 6px; font: 600 .72rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); list-style: none; }

/* Cantons : le canton du profil, mis en avant */
.canton-row.is-mine { border-color: rgba(178, 58, 46, .4); box-shadow: 0 0 0 3px var(--brick-tint); }
.cr-mine { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--brick); color: #fff; font: 600 .66rem var(--font-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }

/* En-tête : libellés du menu sur une ligne ; entre 1100 et 1380 px, « Créer mon profil »
   cède sa place (le même bouton est en tête de l'accueil). */
.main-nav a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1379px) {
  .main-nav a { padding: 8px 9px; }
  .header-cta:not([hidden]) { display: none !important; }
}

.budget-lock-points { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.budget-lock-points li { display: flex; gap: 8px; align-items: flex-start; }
.budget-lock-points svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--green); }

/* Carte interactive des cantons */
.canton-map { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin: 0 0 22px; padding: 18px 18px 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-s); }
.cm-stage { position: relative; }
.cm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-canton { fill: var(--paper-2); stroke: var(--surface); stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: fill .25s, opacity .3s, stroke .2s; outline: none; }
.cm-canton:hover, .cm-canton:focus-visible { fill: var(--brick-tint); stroke: var(--brick); stroke-width: 2.2; }
.cm-canton.is-mine { fill: var(--green-tint); }
.cm-canton.is-sel { fill: var(--brick); stroke: var(--brick-deep); stroke-width: 2.4; }
.cm-canton.is-dim { opacity: .28; }
.cm-labels text { font: 600 15px var(--font-display); fill: var(--ink-2); text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .02em; transition: fill .25s, opacity .3s; }
.cm-labels text.is-small { font-size: 11px; }
.cm-labels text.is-sel { fill: #fff; }
.cm-labels text.is-dim { opacity: .35; }
.cm-caption { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 10px 0 0; font-size: .92rem; }
.cm-caption img { flex: none; }
.cm-caption b { font-family: var(--font-display); }
.cm-caption span { color: var(--ink-2); }
.cm-hint { color: var(--ink-2); }
.cm-credit { margin: 2px 0 0; font-size: .72rem; color: var(--ink-2); text-align: right; }
@media (max-width: 640px) {
  .canton-map { padding: 12px 10px 8px; }
  .cm-labels text { font-size: 22px; }
  .cm-labels text.is-small { display: none; }
  .cm-canton { stroke-width: 2.4; }
}
@media (prefers-reduced-motion: reduce) { .cm-canton, .cm-labels text { transition: none; } }

@media (min-width: 960px) {
  /* Le panneau prend toute la hauteur de la carte : son contenu est sorti du flux, c'est donc
     la carte qui fixe la hauteur ; une fiche longue défile à l'intérieur. */
  .canton-map { grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; }
  .cm-side { position: relative; padding: 0; }
  .cm-side-in { position: absolute; inset: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .cm-side-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
}
.cm-side { padding: 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.cm-side h2 { margin: 0; font-size: 1.3rem; }
.cm-side-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.cm-side-head p { margin: 2px 0 0; font-size: .86rem; color: var(--ink-2); }
.cm-side dl { margin: 0 0 14px; }
.cm-side-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-side-empty { text-align: center; padding: 18px 6px; }
.cm-side-empty img { margin: 0 auto 8px; display: block; }
.cm-side-empty h2 { font-size: 1.1rem; margin-bottom: 6px; }
.cm-side-empty p { margin: 0; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 959px) { .cm-caption { display: none; } }

/* Accueil : même respiration au-dessus du titre (56 px sous l'en-tête) et sous les boutons
   (56 px jusqu'au filet rouge de la section suivante). */
.home-tour { padding-top: 56px; }
/* Visiteur : les formules ressortent sur un fond teinté, juste après la visite. */
.home-offers { background: linear-gradient(180deg, var(--brick-tint) 0%, var(--paper) 100%); border-top: 1px solid rgba(178, 58, 46, .14); }
.home-offers .plan-card { box-shadow: var(--shadow-m, 0 10px 30px rgba(26, 29, 31, .08)); }
.home-offers .plan-card.is-best { transform: translateY(-4px); }
.scope-note { margin-top: 8px !important; font-size: .86rem; color: var(--ink-2); }
/* Mobile : l'illustration passe sous les boutons ; espaces resserrés au-dessus et au-dessous. */
@media (max-width: 959px) {
  .hero-grid { row-gap: 22px; }
  .home-tour { padding-top: 24px; }
}

/* Calendrier sans abonnement : faux mois grisé, comme l'aperçu du budget */
.cal-fake { flex: none; width: min(340px, 42%); filter: blur(1.5px); opacity: .6; }
.cf-head { display: block; width: 46%; height: 12px; margin-bottom: 10px; border-radius: 6px; background: var(--line-strong); }
.cf-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cf-day { position: relative; height: 30px; border-radius: 6px; background: #E9E7E1; }
.cf-day.out { opacity: .4; }
.cf-day.now { box-shadow: inset 0 0 0 2px var(--brick); background: var(--brick-tint); }
.cf-day i { position: absolute; left: 4px; right: 4px; bottom: 5px; height: 5px; border-radius: 3px; }
.cf-day .k-task { background: var(--brick); }
.cf-day .k-overdue { background: var(--brick-deep); }
.cf-day .k-renewal { background: var(--slate); }
.cf-day .k-rec { background: var(--green); }
.cf-day .k-milestone { background: var(--amber, #C98A1B); }
@media (max-width: 640px) { .cal-fake { width: 100%; } }

/* ---------- Transitions entre pages et interactions à ressort ---------- */
/* La carte cliquée grandit jusqu'à devenir la page (sous l'en-tête, qui reste en place) */
.cs-portal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--paper); pointer-events: none; box-shadow: 0 30px 60px -20px rgba(26, 29, 31, .25); }
/* La bille rouge qui saute d'un élément à l'autre */
.cs-ball { position: fixed; left: -9px; top: -9px; z-index: 60; width: 18px; height: 18px; border-radius: 50%; background: var(--brick); pointer-events: none; box-shadow: 0 6px 14px rgba(178, 58, 46, .35); }
.cs-ball.is-small { left: -6px; top: -6px; width: 12px; height: 12px; background: var(--green); box-shadow: 0 4px 10px rgba(61, 107, 79, .35); }
/* Pastille de statut qui glisse en s'étirant */
.status { position: relative; }
.status label { z-index: 1; }
.status-blob { position: absolute; z-index: 0; border-radius: 7px; pointer-events: none; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .cs-portal, .cs-ball, .status-blob { display: none; } }

/* Accueil : démarrage rapide (canton choisi dès le premier écran) */
.quick-start { margin-top: 28px; max-width: 560px; }
.qs-label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; }
.qs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.qs-row .input.select { min-height: 48px; }
.qs-hint { margin-top: 10px; min-height: 1.5em; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.quick-start + .hero-actions { margin-top: 18px; }
@media (max-width: 560px) { .qs-row { grid-template-columns: minmax(0, 1fr); } .qs-row .btn { width: 100%; justify-content: center; } }

/* Tableau de bord : inscription aux rappels par e-mail */
.mail-optin { margin-top: 20px; display: grid; gap: 14px; }
.mail-optin.is-first { margin: 0 0 20px; border-left: 4px solid var(--brick); }
.mail-optin h2 { font-size: 1.15rem; margin-bottom: 4px; }
.mail-optin p { color: var(--ink-2); line-height: 1.5; }
.mail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 620px; }
.mail-row .input { min-height: 48px; }
.mail-consent { font-size: .84rem; line-height: 1.45; color: var(--ink-2); max-width: 620px; margin-top: -4px; }
.up-lock .up-date { display: grid; place-items: center; background: var(--brick-tint); color: var(--brick); }
.up-lock .up-date svg { width: 20px; height: 20px; }
.up-lock .up-title { color: var(--brick-deep); }
.mail-status { min-height: 1.4em; font-size: .92rem; color: var(--ink); }
@media (max-width: 560px) { .mail-row { grid-template-columns: minmax(0, 1fr); } .mail-row .btn { width: 100%; justify-content: center; } }

/* Tableau de bord : espace entre « À faire bientôt » et « Après l’installation » */
.upcoming + .recurring-card { margin-top: 24px; }

/* Permis déduit du contrat, affiché sous la durée */
#permit-hint:empty { display: none; }
#permit-hint { display: inline-block; margin-top: 10px; padding: 6px 10px; border-radius: 6px; background: var(--green-tint); color: var(--green); font-weight: 600; font-size: .85rem; }

/* Après l'installation : échéances verrouillées sans abonnement */
.rec-lock a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; color: inherit; text-decoration: none; padding: 8px; margin: -8px; border-radius: 12px; transition: background .2s; }
.rec-lock a:hover { background: var(--brick-tint); }
.rec-lock .rec-date { display: grid; place-items: center; min-height: 46px; background: var(--brick-tint); border-color: transparent; color: var(--brick); }
.rec-lock .rec-date svg { width: 20px; height: 20px; }
.rec-lock strong { color: var(--brick-deep); }
.rec-lock p { color: var(--ink-2); font-size: .9rem; margin-top: 2px; }

/* Abonnement : code entreprise offert par un employeur */
.code-card { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 28px; align-items: center; }
.code-card[hidden] { display: none; }
.code-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.code-card p { color: var(--ink-2); line-height: 1.5; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.code-row .input { min-height: 48px; font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.code-status { grid-column: 1 / -1; min-height: 1.4em; font-size: .92rem; }
.code-status.is-ok { color: var(--green); font-weight: 600; }
.code-status.is-err { color: var(--brick-deep); }
.code-b2b { grid-column: 1 / -1; font-size: .9rem; }
.code-b2b a { color: var(--slate); }
@media (max-width: 760px) { .code-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .code-row { grid-template-columns: minmax(0, 1fr); } .code-row .btn { width: 100%; justify-content: center; } }

/* Coches : le logo CheckSwiss apparaît (pop), puis la coche blanche se dessine.
   Cases à cocher et boutons radio de l'application (profil, budget). */
.choice input, .check input, .b-check input {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none;
  border: 2px solid var(--line-ctl); border-radius: 6px; background: var(--surface) center / 100% 100% no-repeat;
  background-origin: border-box; cursor: pointer; transition: border-color .2s;
}
.check input, .b-check input { position: relative; }
.check input { margin-top: 1px; }
.choice input { top: 14px; }
.choice:hover input:not(:checked), .check:hover input:not(:checked), .b-check:hover input:not(:checked) { border-color: var(--brick); }
.choice input:checked, .check input:checked, .b-check input:checked {
  border-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23B23A2E'/%3E%3Crect x='12' y='26' width='40' height='12' fill='%238C2A21'/%3E%3Crect x='26' y='12' width='12' height='40' fill='%238C2A21'/%3E%3C/svg%3E");
  animation: csPop .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
.choice input:checked::after, .check input:checked::after, .b-check input:checked::after {
  content: ''; position: absolute; inset: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='27.298,50.666 54.168,23.795 46.107,15.734 27.298,34.544 17.893,25.139 9.832,33.200' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: csTick .32s .14s ease-out both;
}
.check input:focus-visible, .b-check input:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
@keyframes csPop { 0% { transform: scale(.2) rotate(-14deg); } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes csTick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .choice input:checked, .check input:checked, .b-check input:checked,
  .choice input:checked::after, .check input:checked::after, .b-check input:checked::after { animation: none; }
}

/* Démarche : raccourcis vers les guides statiques */
.guide-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 14px; font-size: .9rem; color: var(--ink-2); }
.guide-links svg { width: 16px; height: 16px; color: var(--brick); }
.guide-links a { color: var(--brick-deep); font-weight: 600; }

/* ---------------- Accueil, agencement d'octobre 2026 ----------------
   Fini le « texte à gauche, image en boîte à droite » : un grand titre et son texte à gauche,
   le billet (choix du canton) à droite, filet rouge en tête comme un titre de transport.
   Dessous, un panorama en pleine largeur (paysage doublé en miroir, voie plate) que le train
   traverse d'un bout à l'autre au défilement. Sur téléphone : titre, texte, billet, panorama. */
.hero { padding: 40px 0 48px; }
.hero-top { display: grid; gap: 24px; }
.hero-head h1 { margin: 12px 0 18px; max-width: 14ch; font-size: clamp(2.3rem, 5.8vw, 4.5rem); line-height: 1.02; letter-spacing: -.042em; }
.hero-head .hero-text { font-size: 1.02rem; line-height: 1.6; max-width: 52ch; margin: 0; padding-left: 18px; border-left: 2px solid var(--brick); }
.hero-ticket { position: relative; z-index: 2; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--brick); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.hero-ticket .quick-start { margin-top: 0; max-width: none; }
.hero-ticket .qs-row { grid-template-columns: minmax(0, 1fr); }
.hero-ticket .qs-row .btn { width: 100%; justify-content: center; }
.hero-ticket .quick-start + .hero-actions, .hero-ticket .hero-actions { margin-top: 12px; }
.hero-ticket .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
.hero-board { margin-top: 32px; }
.hero-board .hero-scene { margin: 0; }
.hero-board .scene-stage { aspect-ratio: 16 / 9; max-height: none; }
.hero-board .scene-train { width: 30%; bottom: 10.5%; }
@media (min-width: 960px) {
  .hero { padding: 56px 0 64px; }
  .hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: end; }
  .hero-ticket { padding: 26px; margin-bottom: 4px; }
  .hero-board { margin-top: 48px; }
  .hero-board .scene-stage { aspect-ratio: 5 / 2; }
  .hero-board .scene-train { width: 17%; bottom: 11%; }
}

/* ---------------- Composants d'octobre 2026 (inspirés d'Arc, refaits sans React) ---------------- */
/* Compte à rebours de la prochaine étape */
.countdown { display: flex; align-items: flex-end; gap: 12px; margin: 2px 0 0; line-height: 1; }
.countdown b { display: inline-block; min-width: 1.2ch; font: 700 clamp(3.2rem, 7vw, 4.4rem)/.9 var(--font-display); letter-spacing: -.05em; color: var(--brick); font-variant-numeric: tabular-nums; }
.countdown span { display: grid; gap: 4px; padding-bottom: 6px; font: 600 1.05rem var(--font-display); color: var(--ink); }
.countdown small { font: 500 .78rem var(--font-body); color: var(--ink-2); }
.countdown + .next-date { font-size: 1rem; color: var(--ink-2); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

/* Montants du budget : chiffres de largeur fixe, pour qu'ils ne sautent pas en défilant */
[data-count] { font-variant-numeric: tabular-nums; }

/* Jauge de l'aperçu gratuit : une case par démarche */
.lock-meter { margin-top: 14px; }
.lock-meter p { margin: 0 0 8px; font-size: .86rem; color: var(--ink-2); }
.lock-meter p b { color: var(--ink); font-weight: 600; }
.lm-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.lm-cells i { height: 10px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 6px); border: 1px solid var(--line); animation: lm-in .5s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.lm-cells i.is-on { background: var(--brick); border-color: var(--brick); }
@keyframes lm-in { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }

/* Cartes à choix : un anneau unique glisse vers la carte choisie */
.choice-grid { position: relative; }
.choice-ring { position: absolute; left: 0; top: 0; z-index: 1; border: 2px solid var(--brick); border-radius: 12px; pointer-events: none; opacity: 0; transition: transform .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1), height .38s cubic-bezier(.22, 1, .36, 1), opacity .2s; }
.choice-ring.on { opacity: 1; }
.choice-ring.jump { transition: opacity .2s; }
.choice-grid:has(.choice-ring.on) .choice:has(input:checked) { border-color: transparent; }

/* Barre d'étapes du profil, collée sous l'en-tête */
.form-steps { position: sticky; top: 64px; z-index: 30; margin: 0 0 16px; padding: 10px 12px 12px; background: rgba(252, 252, 250, .94); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px; }
.form-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.form-steps button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 .84rem var(--font-body); text-align: left; cursor: pointer; }
.form-steps button:hover { background: var(--paper-2); }
.form-steps button:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.fs-num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong, #C9C6BC); font: 700 .78rem var(--font-display); color: var(--ink-2); transition: background-color .25s, border-color .25s, color .25s; }
.fs-num svg { width: 14px; height: 14px; }
.form-steps li.is-done .fs-num { background: var(--green); border-color: var(--green); color: #fff; }
.form-steps li.is-current .fs-num { border-color: var(--brick); color: var(--brick); }
.form-steps li.is-current button { color: var(--ink); }
.fs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-bar { height: 3px; margin-top: 8px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.fs-bar i { display: block; height: 100%; background: var(--brick); transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.form-block { scroll-margin-top: 150px; }
@media (max-width: 560px) {
  .form-steps { top: 58px; padding: 8px 8px 10px; }
  .form-steps button { flex-direction: column; gap: 4px; padding: 4px 2px; font-size: .72rem; text-align: center; }
  .fs-label { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-ring, .fs-bar i, .fs-num { transition: none; }
  .lm-cells i { animation: none; }
}

/* Accueil sur téléphone : titre, panorama bord à bord avec le train, billet, puis le texte.
   Les blocs de l'en-tête deviennent des éléments d'une même grille (display: contents) pour
   pouvoir les réordonner. Le relief 3D est coupé : sur un écran étroit les plans ne
   s'alignaient plus (bande de neige qui débordait, cadre en trapèze). */
@media (max-width: 959px) {
  .hero { padding: 24px 0 36px; }
  .hero > .wrap { display: grid; }
  .hero-top, .hero-head { display: contents; }
  .hero-head .eyebrow { order: 1; }
  .hero-head h1 { order: 2; margin: 10px 0 18px; font-size: clamp(2.1rem, 9.4vw, 3rem); }
  .hero-board { order: 3; margin: 0 calc(-1 * var(--gutter)) 0; }
  .hero-ticket { order: 4; margin-top: -26px; box-shadow: var(--shadow-l); }
  .hero-head .hero-text { order: 5; margin-top: 22px; font-size: .97rem; }
  .hero-board .hero-scene { perspective: none; }
  .hero-board .scene-stage { aspect-ratio: 16 / 10; transform: none !important; overflow: hidden; border-radius: 0; }
  .hero-board .scene-layer { transform: none !important; }
  .hero-board .scene-layer.sky { border-radius: 0; }
  .hero-board .scene-train { width: 34%; bottom: 11.5%; }
}

/* Budget : salaire fixe ou variable */
.b-salmode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; grid-column: 1 / -1; }
.b-salmode-label { font-weight: 600; font-size: .9rem; }
.b-seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); }
.b-seg button { min-height: 38px; padding: 4px 14px; border: 0; border-radius: 8px; background: none; font: 600 .84rem var(--font-body); color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.b-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.b-seg button:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.b-salmonths { grid-column: 1 / -1; margin: 4px 0 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.b-salmonths .hint { margin: 0 0 10px; }
.b-salgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.b-salm > span:first-child { text-transform: capitalize; }

/* ---------------- Démarrage en deux clics (octobre 2026) ----------------
   Billet de l'accueil : 1. le canton, 2. la situation. Chaque situation est un grand bouton qui
   crée le profil et ouvre la checklist ; la flèche avance au survol, comme un départ. */
.hero-ticket .qs-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qs-num { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--brick); color: #fff; font-family: var(--font-display); font-size: .8rem; font-weight: 700; }
.hero-ticket #qs-canton { min-height: 50px; font-weight: 500; }
.hero-ticket #qs-canton.is-invalid { border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-tint); }
#qs-sit-label { margin-top: 18px; }
.qs-sits { display: grid; gap: 8px; }
.qs-sit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 10px 12px 10px 16px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 12px; cursor: pointer; touch-action: manipulation; transition: border-color .2s, background-color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.qs-sit > span { display: grid; gap: 1px; min-width: 0; }
.qs-sit strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.qs-sit small { font-size: .82rem; color: var(--ink-2); }
.qs-sit svg { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 50%; background: var(--brick-tint); color: var(--brick); transition: background-color .25s, color .25s, transform .35s var(--ease-out); }
.qs-sit:hover { border-color: var(--brick); box-shadow: var(--shadow-brick); }
.qs-sit:hover svg, .qs-sit:focus-visible svg { background: var(--brick); color: #fff; transform: translateX(3px); }
.qs-sit:active { transform: scale(.985); }
.qs-sit:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .qs-sit, .qs-sit svg { transition: none; } .qs-sit:hover svg, .qs-sit:focus-visible svg { transform: none; } .qs-sit:active { transform: none; } }

/* Formulaire complet : mention « facultatif » à côté du libellé. */
.opt { font-size: .8rem; font-weight: 400; color: var(--ink-2); }

/* Tableau de bord : date d'arrivée en un champ (profil créé en deux clics). */
.dash-refine { margin-bottom: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; border-left: 4px solid var(--slate); }
.dash-refine > .link-arrow { grid-column: 1 / -1; justify-self: start; }
.refine-copy { display: flex; gap: 14px; align-items: flex-start; }
.refine-copy svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--slate); }
.refine-copy h2 { font-size: 1.15rem; margin-bottom: 4px; }
.refine-copy p { color: var(--ink-2); line-height: 1.5; }
.refine-row { display: grid; grid-template-columns: 190px auto; gap: 10px; }
.refine-row .input { min-height: 48px; }
.dash-refine.is-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding-top: 14px; padding-bottom: 14px; }
.dash-refine.is-line p { color: var(--ink-2); font-size: .92rem; line-height: 1.5; max-width: 62ch; }
@media (max-width: 860px) { .dash-refine { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .refine-row { grid-template-columns: minmax(0, 1fr); } .refine-row .btn { width: 100%; } }

/* Tableau de bord, sans achat : le reste de la liste en chiffres, et l'achat en un clic. */
.dash-unlock { margin-top: 20px; display: grid; gap: 16px; border-top: 4px solid var(--brick); background: linear-gradient(180deg, var(--brick-tint), var(--surface) 140px); }
.unlock-copy { display: flex; gap: 14px; align-items: flex-start; }
.unlock-copy svg { width: 24px; height: 24px; flex: none; margin-top: 3px; color: var(--brick); }
.unlock-copy h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -.02em; }
.unlock-copy p { color: var(--ink-2); line-height: 1.5; margin-top: 4px; max-width: 62ch; }
.unlock-cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.unlock-cats li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .86rem; }
.unlock-cats b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--paper-2); font-family: var(--font-display); font-size: .8rem; }
.dash-unlock .lock-meter { margin-top: 0; }
.unlock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.unlock-note { font-size: .84rem; color: var(--ink-2); margin-top: -6px; }
@media (max-width: 560px) { .unlock-actions .btn { width: 100%; } }

/* Services utiles, rubrique Travail : lien vers le guide qui compare les sites d'emploi. */
.partner-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -4px 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brick); border-radius: var(--radius-m); background: var(--surface); }
.partner-guide img { flex: none; }
.partner-guide span { flex: 1 1 260px; color: var(--ink-2); line-height: 1.5; }

/* Cartes partenaires : un logo qui a son propre fond (pastille sombre de Yuh) le prolonge à tout
   le bloc ; les logos sans fond gardent le fond de la carte. Dans tous les cas, le logo prend la place. */
.partner-art.has-brand { background: var(--brand); }
.partner-art.has-logo img.partner-logo { height: 72px; max-width: 82%; }