/* Deux Toits — feuille de style
   Fond minéral froid, encre graphite, et deux couleurs qui appartiennent
   aux parents (--pa, --pb, posées par l'application). Le seul élément
   expressif : le pignon de « Ce soir, chez … ». Le reste se tait. */

@font-face { font-family: "Bricolage"; src: url("/static/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/static/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/static/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fond: #eef1ef;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --encre: #1c2328;
  --encre-2: #4f5960;
  --discret: #7a848a;
  --trait: #d9dfdc;
  --trait-fort: #c3cbc7;
  --danger: #b3261e;
  --ok: #2e6b3f;
  --attention: #8a5a00;
  --pa: #1f5f6b;
  --pb: #c2861a;
  --pa-encre: #ffffff;
  --pb-encre: #1c2328;
  --pa-doux: color-mix(in srgb, var(--pa) 14%, var(--surface));
  --pb-doux: color-mix(in srgb, var(--pb) 16%, var(--surface));
  --vacances: #e4e9f5;
  --rayon-s: 8px;
  --rayon-m: 14px;
  --rayon-l: 22px;
  --ombre: 0 1px 0 rgba(28, 35, 40, .04), 0 6px 20px -12px rgba(28, 35, 40, .22);
  --display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --texte: "Atkinson", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --barre: 64px;
  --haut-sur: env(safe-area-inset-top, 0px);
  --bas-sur: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #151a1d;
    --surface: #1e2427;
    --surface-2: #242b2f;
    --encre: #e8ecea;
    --encre-2: #b6bfbb;
    --discret: #8c9692;
    --trait: #323a3e;
    --trait-fort: #434c50;
    --danger: #f2a49e;
    --ok: #8fd19e;
    --attention: #f0c36b;
    --pa-doux: color-mix(in srgb, var(--pa) 30%, var(--surface));
    --pb-doux: color-mix(in srgb, var(--pb) 30%, var(--surface));
    --vacances: #26304a;
    --ombre: 0 1px 0 rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 16px/1.5 var(--texte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--pa) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.2rem; line-height: 1.25; }
h3 { font-size: 1rem; line-height: 1.3; }
p { margin: 0 0 .75em; }
.discret { color: var(--discret); }
.petit { font-size: .875rem; }
.chiffres { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- démarrage ---------- */
.demarrage { min-height: 100dvh; display: grid; place-items: center; }
.logo-toit { width: 44px; height: 44px; background: var(--pa); clip-path: polygon(50% 8%, 100% 52%, 100% 100%, 0 100%, 0 52%); opacity: .85; }

/* ---------- coque ---------- */
.coque { min-height: 100dvh; padding-bottom: calc(var(--barre) + var(--bas-sur) + 16px); }
.entete {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: calc(12px + var(--haut-sur)) 16px 10px; background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.entete h1 { font-size: 1.35rem; flex: 1; }
.page { max-width: 680px; margin: 0 auto; padding: 4px 16px 24px; }

.barre-onglets {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barre) + var(--bas-sur)); padding-bottom: var(--bas-sur);
  background: var(--surface); border-top: 1px solid var(--trait);
}
.onglet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--discret); font-size: .72rem; position: relative;
}
.onglet svg { width: 24px; height: 24px; }
.onglet[aria-current="page"] { color: var(--encre); font-weight: 700; }
.onglet[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--encre);
}
.onglet .pastille { position: absolute; top: 8px; left: calc(50% + 6px); }

@media (min-width: 900px) {
  .coque { padding: 0 0 0 96px; }
  .barre-onglets {
    inset: 0 auto 0 0; width: 96px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 76px;
    align-content: start; padding: 88px 0 0; border-top: 0; border-right: 1px solid var(--trait);
  }
  .onglet[aria-current="page"]::before { top: 18px; left: 0; width: 3px; height: 40px; border-radius: 0 3px 3px 0; }
  .page { padding-top: 12px; }
}

/* ---------- briques ---------- */
.carte { background: var(--surface); border-radius: var(--rayon-m); padding: 16px; box-shadow: var(--ombre); }
.carte + .carte, .bloc + .bloc { margin-top: 12px; }
.bloc { margin-top: 28px; }
.bloc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.bloc-titre h2 { font-size: 1.05rem; }
.lien-discret { color: var(--encre-2); font-size: .875rem; text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.lien-discret:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent; background: var(--encre); color: var(--fond);
  font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .15s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn-plein { width: 100%; }
.btn-second { background: var(--surface); color: var(--encre); border-color: var(--trait-fort); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-petit { min-height: 36px; padding: 0 12px; font-size: .875rem; border-radius: 10px; }
.btn svg { width: 18px; height: 18px; }
.rangee-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.rangee-btn > .btn { flex: 1; }

.icone-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0;
  background: var(--surface); box-shadow: var(--ombre); cursor: pointer; color: var(--encre);
}
.icone-btn svg { width: 22px; height: 22px; }

.fab {
  position: fixed; right: 18px; bottom: calc(var(--barre) + var(--bas-sur) + 18px); z-index: 6;
  width: 58px; height: 58px; border-radius: 18px; border: 0; background: var(--encre); color: var(--fond);
  display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); cursor: pointer;
}
.fab svg { width: 26px; height: 26px; }
@media (min-width: 900px) { .fab { bottom: 28px; right: 28px; } }

.pastille { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
@media (prefers-color-scheme: dark) { .pastille { color: #2a0d0b; } }

.puce { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem;
  background: var(--surface-2); color: var(--encre-2); border: 1px solid var(--trait); white-space: nowrap; }
.puce.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.puce.attente { color: var(--attention); border-color: color-mix(in srgb, var(--attention) 35%, transparent); background: color-mix(in srgb, var(--attention) 8%, var(--surface)); }
.puce.ko { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }

.point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.point-a { background: var(--pa); } .point-b { background: var(--pb); }

/* ---------- liste ---------- */
.liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--rayon-m); box-shadow: var(--ombre); overflow: hidden; }
.liste > li + li { border-top: 1px solid var(--trait); }
.ligne { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 56px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; color: inherit; }
.ligne:hover { background: var(--surface-2); }
.ligne .corps { flex: 1; min-width: 0; }
.ligne .titre { display: block; font-weight: 700; overflow-wrap: anywhere; }
.ligne .sous { display: block; font-size: .85rem; color: var(--discret); overflow-wrap: anywhere; margin-top: 1px; }
.ligne .droite { text-align: right; flex: none; }
.ligne-statique { cursor: default; }
.ligne-statique:hover { background: none; }

/* ---------- formulaires ---------- */
.champ { display: block; margin-bottom: 16px; }
.champ > span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.champ > small { display: block; color: var(--discret); font-size: .8rem; margin-top: 5px; }
.saisie, select.saisie, textarea.saisie {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--trait-fort);
  background: var(--surface); font-size: 16px; appearance: none; -webkit-appearance: none;
}
textarea.saisie { min-height: 110px; resize: vertical; line-height: 1.45; }
select.saisie { background-image: linear-gradient(45deg, transparent 50%, var(--discret) 50%), linear-gradient(135deg, var(--discret) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.saisie:focus { outline: none; border-color: var(--encre-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--encre) 12%, transparent); }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.montant { font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.erreur { color: var(--danger); font-size: .9rem; margin: -4px 0 14px; }

.segments { display: flex; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); gap: 4px; }
.segments label { flex: 1; position: relative; }
.segments input { position: absolute; opacity: 0; inset: 0; }
.segments span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px; border-radius: 9px;
  font-weight: 700; font-size: .9rem; color: var(--encre-2); cursor: pointer; text-align: center; }
.segments input:checked + span { background: var(--surface); color: var(--encre); box-shadow: var(--ombre); }
.segments input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pa) 60%, transparent); }

.nuancier { display: flex; gap: 10px; flex-wrap: wrap; }
.nuancier label { position: relative; }
.nuancier input { position: absolute; opacity: 0; }
.nuancier span { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--trait-fort); cursor: pointer; }
.nuancier input:checked + span { box-shadow: 0 0 0 3px var(--encre); }
.nuancier input:disabled + span { opacity: .25; cursor: not-allowed; }

.choix { display: grid; gap: 8px; }
.choix label { display: block; position: relative; }
.choix input { position: absolute; opacity: 0; }
.choix .option { display: block; padding: 13px 14px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--surface); cursor: pointer; }
.choix .option b { display: block; }
.choix .option small { color: var(--discret); }
.choix input:checked + .option { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.choix input:focus-visible + .option { outline: 3px solid color-mix(in srgb, var(--pa) 60%, transparent); }

/* ---------- le pignon : « Ce soir, chez … » ---------- */
.pignon {
  position: relative; margin: 6px 0 0; padding: 54px 22px 22px; color: var(--hote-encre, #fff); background: var(--hote, var(--pa));
  clip-path: polygon(0 26px, 50% 0, 100% 26px, 100% 100%, 0 100%); border-radius: 0 0 var(--rayon-l) var(--rayon-l);
}
.pignon .sur { font-size: .95rem; opacity: .9; margin: 0 0 2px; }
.pignon .chez { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 10vw, 3.1rem); line-height: 1; letter-spacing: -.02em;
  font-variation-settings: "wdth" 90; margin: 0 0 18px; overflow-wrap: anywhere; }
.pignon .passage { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hote-encre, #fff) 14%, transparent); }
.pignon .passage svg { width: 22px; height: 22px; flex: none; }
.pignon .passage b { display: block; }
.pignon.vide { background: var(--surface-2); color: var(--encre); }
.pignon.vide .passage { background: var(--surface); }

/* ---------- bande des nuits (14 jours) ---------- */
.bande { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.bande .nuit { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .7rem; color: var(--discret); min-width: 0; }
.bande .barre { width: 100%; height: 34px; border-radius: 6px; background: var(--trait); position: relative; }
.bande .barre.a { background: var(--pa); } .bande .barre.b { background: var(--pb); }
.bande .barre.vac::after { content: ""; position: absolute; inset: auto 3px 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .7); }
.bande .barre.exc { outline: 2px dashed var(--encre); outline-offset: -4px; }
.bande .nuit.aujourdhui { color: var(--encre); font-weight: 700; }
.bande .j { font-variant-numeric: tabular-nums; }
.bande .marque { height: 6px; width: 6px; border-radius: 50%; background: transparent; }
.bande .nuit.passage .marque { background: var(--encre); }
.legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- répartition ---------- */
.repartition { height: 10px; border-radius: 5px; display: flex; overflow: hidden; background: var(--trait); margin: 10px 0 8px; }
.repartition i { display: block; height: 100%; }

/* ---------- calendrier mensuel ---------- */
.mois-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.mois-nav h2 { flex: 1; text-align: center; font-size: 1.25rem; text-transform: none; }
.grille { display: grid; grid-template-columns: 22px repeat(7, 1fr); gap: 4px; }
.grille .jsem { text-align: center; font-size: .72rem; color: var(--discret); padding-bottom: 4px; }
.case {
  position: relative; aspect-ratio: 1 / 1.18; min-height: 54px; border-radius: 10px; background: var(--surface); border: 0;
  padding: 6px 4px 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; overflow: hidden; box-shadow: var(--ombre);
}
.case.hors { opacity: .38; }
.case .num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; line-height: 1.2; }
.case.aujourdhui .num { background: var(--encre); color: var(--fond); border-radius: 999px; padding: 0 7px; }
.case .nuit { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--trait); }
.case .nuit.a { background: var(--pa); } .case .nuit.b { background: var(--pb); }
.case .nuit.passage-ab { background: linear-gradient(90deg, var(--pa) 0 38%, var(--pb) 62%); }
.case .nuit.passage-ba { background: linear-gradient(90deg, var(--pb) 0 38%, var(--pa) 62%); }
.case.vac { background: var(--vacances); }
.case .marques { display: flex; gap: 3px; margin-top: 3px; }
.case .marques i { width: 5px; height: 5px; border-radius: 50%; background: var(--encre-2); }
.case .marques i.exc { background: transparent; box-shadow: inset 0 0 0 1.5px var(--encre); }
.case .marques i.ferie { background: var(--danger); }
.case:focus-visible { outline-offset: 1px; }

.resume-mois { display: flex; gap: 10px; margin-top: 14px; }
.resume-mois .carte { flex: 1; padding: 12px 14px; }
.resume-mois .carte + .carte { margin-top: 0; }
.resume-mois b { font-family: var(--display); font-size: 1.5rem; font-weight: 650; display: block; line-height: 1.1; }

.evts { list-style: none; margin: 0; padding: 0; }
.evts li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--trait); }
.evts li:first-child { border-top: 0; }
.evts .heure { width: 92px; flex: none; font-variant-numeric: tabular-nums; color: var(--encre-2); font-size: .9rem; }

/* ---------- argent ---------- */
.solde { text-align: left; }
.solde .qui { color: var(--encre-2); margin: 0 0 2px; }
.solde .somme { font-family: var(--display); font-size: 2.6rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.05; }
.solde .somme small { font-size: .9rem; font-weight: 500; font-family: var(--texte); color: var(--discret); margin-left: 6px; letter-spacing: 0; }
.solde.equilibre .somme { color: var(--ok); }

/* ---------- journal ---------- */
.note { background: var(--surface); border-radius: var(--rayon-m); padding: 14px 16px; box-shadow: var(--ombre); border-left: 4px solid var(--trait); }
.note.a { border-left-color: var(--pa); } .note.b { border-left-color: var(--pb); }
.note + .note { margin-top: 10px; }
.note .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--discret); margin-bottom: 6px; }
.note .texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.note .actions { display: flex; gap: 14px; margin-top: 8px; }
.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -16px; padding-left: 16px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtres button { border: 1px solid var(--trait-fort); background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; font-size: .875rem; }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* ---------- enfants ---------- */
.enfant-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.avatar { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display);
  font-weight: 700; font-size: 1.4rem; background: var(--surface-2); color: var(--encre); border: 1px solid var(--trait); flex: none; }
.cat-titre { font-size: .82rem; color: var(--discret); font-weight: 700; margin: 18px 2px 8px; }

/* ---------- feuille (bottom sheet) ---------- */
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(15, 20, 23, .45); display: flex; align-items: flex-end; justify-content: center;
  animation: fondu .18s ease; }
.feuille { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; background: var(--fond); border-radius: var(--rayon-l) var(--rayon-l) 0 0;
  padding: 10px 18px calc(22px + var(--bas-sur)); animation: monte .22s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
.feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--trait-fort); margin: 2px auto 14px; }
.feuille-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.feuille-tete h2 { flex: 1; font-size: 1.3rem; }
@media (min-width: 700px) { .voile { align-items: center; } .feuille { border-radius: var(--rayon-l); } }
@keyframes monte { from { transform: translateY(24px); opacity: .6; } }
@keyframes fondu { from { opacity: 0; } }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--barre) + var(--bas-sur) + 18px); transform: translate(-50%, 20px); z-index: 60;
  background: var(--encre); color: var(--fond); padding: 12px 18px; border-radius: 12px; font-weight: 700; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#toast.erreur { background: var(--danger); color: #fff; }

/* ---------- accueil (non connecté) ---------- */
.accueil { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 440px; margin: 0 auto;
  padding: calc(32px + var(--haut-sur)) 20px calc(32px + var(--bas-sur)); }
.marque-app { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
.marque-app .logo { width: 58px; height: auto; flex: none; color: var(--encre); }
.marque-app b { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.accueil h1 { font-size: 2rem; margin-bottom: 10px; }
.accueil .chapeau { color: var(--encre-2); font-size: 1.05rem; margin-bottom: 28px; }
.bascule { margin-top: 18px; text-align: center; color: var(--encre-2); }

/* ---------- assistant de création ---------- */
.etapes { display: flex; gap: 6px; margin: 4px 0 22px; }
.etapes i { flex: 1; height: 4px; border-radius: 2px; background: var(--trait); }
.etapes i.fait { background: var(--encre); }
.apercu-cycle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0 6px; }
.apercu-cycle button, .apercu-cycle div { height: 40px; border-radius: 8px; border: 0; font-size: .75rem; font-weight: 700; color: #fff; display: grid; place-items: center; }
.apercu-cycle .a { background: var(--pa); color: var(--pa-encre, #fff); } .apercu-cycle .b { background: var(--pb); color: var(--pb-encre, #fff); }
.apercu-cycle button { cursor: pointer; }
.apercu-cycle .jsem { background: none; color: var(--discret); height: auto; font-weight: 400; }

.vide-etat { text-align: center; padding: 34px 18px; color: var(--encre-2); }
.vide-etat h3 { margin-bottom: 6px; color: var(--encre); }
.vide-etat .btn { margin-top: 14px; }
.encart { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; font-size: .9rem; color: var(--encre-2); }
.encart b { color: var(--encre); }
.copie { display: flex; gap: 8px; }
.copie input { flex: 1; font-size: .85rem; }

.enfant + .enfant { border-top: 1px solid var(--trait); padding-top: 26px; }
.rangee-btn.trois > .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.icone-btn.plat { box-shadow: none; background: var(--surface-2); border: 1px solid var(--trait); width: 38px; height: 38px; }
.icone-btn.plat svg { width: 18px; height: 18px; }
.ligne > svg { width: 22px; height: 22px; flex: none; color: var(--encre-2); }
.lien-discret svg { width: 16px; height: 16px; vertical-align: -3px; }
.note .meta svg { width: 14px; height: 14px; }

.entete-titre { flex: 1; min-width: 0; }
.entete-titre h1 { font-size: 1.35rem; }
.choix-foyer { border: 0; background: none; padding: 2px 0; color: var(--encre-2); font-size: .85rem; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.choix-foyer svg { width: 14px; height: 14px; }

button.option { width: 100%; font: inherit; color: inherit; cursor: pointer; }
.lien-code { display: block; width: 100%; text-align: left; margin-bottom: 22px; cursor: pointer; font: inherit; line-height: 1.45; }
.lien-code b { display: block; margin-bottom: 2px; }

.code-liaison { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--trait-fort); text-align: center; }
.code-liaison b { display: block; font-family: var(--display); font-size: 1.9rem; letter-spacing: .12em; margin: 4px 0; }
.ardoise { border-left: 4px solid var(--attention); }

.apercu-cycle .ligne-sem { grid-column: 1 / -1; height: auto; background: none; color: var(--encre-2); font-weight: 700; justify-content: start; display: block; margin-top: 6px; font-size: .78rem; }

.grille .nsem { display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-size: .68rem; color: var(--discret); font-variant-numeric: tabular-nums; }
.grille .nsem.impaire { font-weight: 700; }

.droits { display: grid; gap: 8px; }
.droit { display: grid; grid-template-columns: 1fr minmax(150px, 46%); align-items: center; gap: 10px; font-size: .9rem; }
.droit .segments span { min-height: 34px; font-size: .82rem; }
.zone-lien:empty { display: none; }
.note.t { border-left-color: var(--encre-2); }

.case-a-cocher { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.case-a-cocher input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--encre); flex: none; }
.choix + .cat-titre { margin-top: 18px; }

.pourquoi { margin: 0; padding-left: 18px; color: var(--encre-2); font-size: .92rem; }
.pourquoi li + li { margin-top: 6px; }

.demande-frais { border-left: 4px solid var(--attention); }
.demande-frais + .demande-frais, .bloc .carte + .carte { margin-top: 12px; }

.passage-carte { border-left: 4px solid var(--encre-2); }
.stats-passages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stats-passages b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 650; line-height: 1.1; }
.stats-passages span { font-size: .75rem; color: var(--discret); }
.tableau { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .9rem; }
.tableau th, .tableau td { text-align: right; padding: 6px 4px; border-top: 1px solid var(--trait); }
.tableau th:first-child, .tableau td:first-child { text-align: left; color: var(--encre-2); }
.tableau tr:first-child th { border-top: 0; font-size: .8rem; color: var(--discret); }

.icone-btn.cloche { position: relative; margin-right: 6px; }
.icone-btn.cloche .pastille { position: absolute; top: -2px; right: -2px; }
.ligne.non-lue .titre::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 8px; vertical-align: 2px; }

.note.retiree { opacity: .75; }
.aide-urgence { margin-top: 12px; }
.aide-urgence summary { cursor: pointer; }
.aide-urgence a { color: var(--encre); font-weight: 700; }

/* Lecture du jugement */
.pile { display: grid; gap: 8px; }
.pile .case-a-cocher.carte { padding: 12px 14px; margin: 0; }
blockquote.citation { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--trait-fort, var(--trait)); background: var(--surface-2);
  border-radius: 0 10px 10px 0; font-size: .9rem; line-height: 1.45; color: var(--encre); }
blockquote.citation small { display: block; color: var(--encre-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.lien-discret[data-voir-jugement] { text-decoration: underline; display: inline-block; margin-top: 6px; }

/* Mise à jour disponible */
.bandeau-maj { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px;
  background: var(--encre); color: var(--fond); font-size: .92rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.bandeau-maj .btn { background: var(--fond); color: var(--encre); flex: none; }
@media (min-width: 720px) { .bandeau-maj { left: auto; width: 420px; } }

/* L'attribut hidden doit l'emporter sur les display posés par les classes (pastille de la cloche, etc.). */
[hidden] { display: none !important; }