/* Hallmark · audit + correctifs (antislop) · genre: editorial · theme: custom (vibe: « cocon, lin, terracotta, veillée »)
 * paper oklch(95.3% 0.016 74) · accent oklch(53.7% 0.126 40) terracotta · display: Iowan/Palatino (roman) + body: system sans
 * axes: light / classical-serif / warm · jetons dans tokens.css (OKLCH)
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */
/* ============================================================
   ici — direction artistique « cocon »
   Tons chauds (lin, terracotta, ocre), formes douces, typographie éditoriale.
   ============================================================ */
/* ---------- base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text); font: 16px/1.55 var(--sans); font-variation-settings: "SOFT" 100; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 600; font-style: normal; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 8px; }
h2 { font-size: 22px; line-height: 1.2; margin: 0 0 14px; }
h3 { font-size: 16px; margin: 0 0 8px; color: var(--text-2); }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.hint { font-size: 12.5px; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 28px 24px 96px; }
.spacer { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.section { margin-top: 28px; }
.section-title { margin: 28px 0 10px; }

/* ---------- barre du haut */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; background: var(--bg);
}
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; color: var(--accent); text-decoration: none; letter-spacing: -.03em; }
.wordmark span { color: var(--accent-2); }
.wordmark.big { font-size: 46px; margin-bottom: 18px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.usermenu { display: flex; align-items: center; gap: 12px; }
.top-link { color: var(--text-2); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 999px; }
.top-link:hover { background: var(--surface-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; text-decoration: none; font-family: var(--serif); font-size: 17px; }
.icon-btn { border: 0; background: var(--surface-2); color: var(--text-2); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 160ms var(--ease-out); }
.icon-btn:active { transform: scale(0.97); }
@media (max-width: 640px) { .top-link { display: none; } .topbar { padding: 10px 16px; } }
/* lien vers l'autre portail : reste visible sur téléphone */
.portal-link { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.portal-link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .portal-link:hover { background: var(--surface-3); } }
@media (max-width: 400px) { .portal-link { font-size: 13px; padding: 6px 10px; } .usermenu { gap: 8px; } .topbar-right { gap: 8px; } }
.sheet-quiet .portal-link { background: none; padding: 6px 0; font-size: 13.5px; font-weight: 500; }

/* ---------- en-tête de page + onglets */
.page-intro { margin: 6px 0 18px; }
.page-intro .back { font-size: 13.5px; color: var(--muted); text-decoration: none; }
.page-intro .back:hover { color: var(--accent); }
.page-intro h1 { margin-top: 8px; }
.intro-links a { margin-left: 10px; font-size: 13.5px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 5px; background: var(--surface-2); border-radius: 999px; margin-bottom: 24px; width: fit-content; max-width: 100%; }
.tabs a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--text-2); font-size: 14.5px; white-space: nowrap; transition: background 150ms var(--ease-out), color 150ms var(--ease-out); }
.tabs a:hover { color: var(--text); }
.tabs a.active { background: var(--surface); color: var(--accent); font-weight: 600; }
.tabs .tab-quiet { color: var(--muted); }
.page-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.month-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.sync-line { font-size: 13px; color: var(--muted); margin: -4px 0 14px; }
.sync-line a { color: var(--muted); }
.page-tools .sync-line { margin: 0; }

/* ---------- cartes */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 24px; min-width: 0; }
.card.narrow { max-width: 620px; }
.soft-card { background: var(--surface-2); box-shadow: none; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-head a { font-size: 13.5px; text-decoration: none; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g2, .g4 { grid-template-columns: 1fr; } h1 { font-size: 28px; } .card { padding: 18px; } }
.empty { text-align: center; padding: 42px 20px; }
.empty h2 { font-size: clamp(24px, 2.6vw, 32px); }
.empty .big { font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--accent); margin-bottom: 14px; }
.empty .big span { color: var(--accent-2); }
.danger-zone h2 { color: var(--bad); }

/* ---------- focus clavier : anneau visible tout de suite (jamais animé), contraste ≥ 3:1 */
:where(a, button, summary, label, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- boutons & champs */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center; border: 0;
  background: var(--surface-2); color: var(--text); padding: 10px 18px; border-radius: 999px; font: inherit; font-size: 14.5px;
  cursor: pointer; text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background 150ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--surface-3); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.round { width: 36px; height: 36px; padding: 0; font-size: 20px; }
.btn:disabled { opacity: .5; cursor: default; }
select, input, textarea {
  font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; min-width: 0;
}
textarea { width: 100%; font-family: inherit; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 0; border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.notice { padding: 13px 16px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-size: 14.5px; }
.notice.info { background: var(--accent-soft); color: var(--text-2); }
.notice.soft { background: var(--surface-2); color: var(--text-2); margin-bottom: 16px; }
.notice.bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- accueil */
.home-hero { margin: 18px 0 26px; }
.home-hero h1 { font-size: clamp(40px, 6vw, 72px); }
.lede { font-size: 18px; color: var(--text-2); margin: 0; max-width: 48ch; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.home-card {
  display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none; color: inherit; transition: transform 160ms var(--ease-out), background .2s;
}
.home-card:hover { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
@media (hover: hover) and (pointer: fine) { .home-card:hover { transform: translateY(-2px); } }
.home-card:active { transform: scale(0.98); }
.home-card-top { display: flex; gap: 14px; align-items: center; }
.apt-title { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; }
.apt-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.apt-mini div { min-width: 0; overflow-wrap: anywhere; }
.apt-mini div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.apt-mini b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.apt-mini span { font-size: 13px; color: var(--text-2); }
.home-card.add { align-items: flex-start; justify-content: flex-end; min-height: 190px; border: 0; background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; font-family: var(--serif); font-size: 24px; font-weight: 600; text-align: left; }
.home-card.add span { font-size: 40px; font-weight: 400; line-height: 1; color: var(--accent); }
.home-card.add:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- aperçu */
.hero { background: var(--field); color: var(--field-ink); border-radius: var(--r-lg); padding: 34px 36px; margin-bottom: 18px; }
.hero p { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; letter-spacing: -.01em; margin: 0; color: var(--field-ink); max-width: 30ch; }
.hero b { color: var(--field-em); font-weight: 700; }
.hero a { color: inherit; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.list li { display: flex; gap: 12px; align-items: flex-start; }
.list .dot { margin-top: 7px; }
.quote { margin: 0 0 14px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r); font-family: var(--serif); font-size: 16px; line-height: 1.5; font-style: italic; color: var(--text); }
.quote footer { font-family: var(--sans); font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- KPI */
.kpi { padding: 18px 20px; }
.kpi .label { font-size: 13px; color: var(--text-2); }
.kpi .value { font-family: var(--serif); font-size: 40px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 16px; color: var(--muted); font-weight: 400; }
.kpi .sub { font-size: 13px; color: var(--muted); }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); }
.stars { color: var(--accent-2); letter-spacing: 1px; }
.metric-list { display: grid; gap: 10px; }
.metric { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-bottom: 6px; }
.metric:last-child { border-bottom: 0; padding-bottom: 0; }
.metric .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric.strong span:first-child { font-weight: 600; }

/* ---------- graphiques */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text { fill: var(--muted); font-size: 12px; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--border); stroke-width: 1; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.hit { fill: transparent; }
.hover-band { fill: var(--surface-2); opacity: 0; }
.bar-group:hover .hover-band { opacity: 1; }
.tooltip { position: fixed; z-index: 60; pointer-events: none; background: var(--text); color: var(--surface); font-size: 13px; padding: 9px 12px; border-radius: 12px; max-width: 300px; box-shadow: var(--float); }
.tooltip .t-title { font-weight: 700; margin-bottom: 4px; }
.tooltip .t-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.tooltip .t-row span:first-child { display: inline-flex; gap: 6px; align-items: center; opacity: .85; }
.hbar { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.hbar .track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 999px; }

/* ---------- tableaux */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* ---------- formulaires & réglages */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.field.full { grid-column: 1 / -1; }
.input-unit { position: relative; display: flex; }
.input-unit input { width: 100%; padding-right: 50px; text-align: right; }
.input-unit .u { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.calc { padding: 9px 0; font-weight: 600; color: var(--text); }
.coef-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 12px; }
@media (max-width: 640px) { .coef-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.settings { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.side-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 84px; }
.side-nav a { display: block; padding: 11px 14px; border-radius: 14px; text-decoration: none; color: var(--text-2); }
.side-nav a b { display: block; font-weight: 600; font-size: 14.5px; color: var(--text); }
.side-nav a span { font-size: 12.5px; color: var(--muted); }
.side-nav a:hover { background: var(--surface-2); }
.side-nav a.active { background: var(--surface); }
.side-nav a.active b { color: var(--accent); }
.config-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.config-layout.single { grid-template-columns: minmax(0, 1fr); }
.config-layout .sticky { position: sticky; top: 84px; }
@media (max-width: 960px) {
  .settings { grid-template-columns: 1fr; }
  .side-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .side-nav a { white-space: nowrap; } .side-nav a span { display: none; }
  .config-layout { grid-template-columns: 1fr; } .config-layout .sticky { position: static; }
}
.save-bar { position: sticky; bottom: 0; padding: 14px 0; display: flex; gap: 12px; align-items: center; background: var(--bg); margin-top: 12px; }
details.fold > summary, details.fold-inline > summary { cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker, details.fold-inline > summary::-webkit-details-marker { display: none; }
details.fold > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
details.fold > summary h2 { margin: 0; }
details.fold > summary::after { content: "＋"; margin-left: auto; color: var(--muted); }
details.fold[open] > summary::after { content: "－"; }
details.fold[open] > summary { margin-bottom: 14px; }
details.fold-inline { margin-top: 14px; }
details.fold-inline > summary { font-size: 13.5px; color: var(--accent); }
/* ouverture en douceur (navigateurs récents ; ailleurs, ça reste instantané) */
details.fold::details-content, details.fold-inline::details-content {
  opacity: 0; translate: 0 -4px;
  transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), content-visibility 200ms allow-discrete;
}
details.fold[open]::details-content, details.fold-inline[open]::details-content { opacity: 1; translate: 0 0; }
.key-ok { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--good-bg); color: var(--text); }
.key-ok > span:first-child { font-size: 22px; }

/* ---------- import */
.dropzone { display: block; border: 0; border-radius: var(--r-lg); padding: 34px 16px; text-align: center; color: var(--text-2); cursor: pointer; background: var(--surface-2); transition: background 150ms var(--ease-out), color 150ms var(--ease-out); }
.dropzone.over, .dropzone:hover { background: var(--accent-soft); color: var(--accent); }
.dz-icon { font-size: 30px; margin-bottom: 4px; }

/* ---------- calendrier */
.cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-head h2 { margin: 0; min-width: 8.5ch; text-align: center; text-transform: capitalize; }
.cal-occ { font-size: 14px; color: var(--text-2); }
/* bandeau du jour */
.cal-today { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.cal-today-day { font-size: 14px; color: var(--muted); }
.cal-today-day::first-letter { text-transform: uppercase; }
.cal-today-who { display: flex; align-items: flex-start; gap: 10px; font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; font-weight: 500; }
.cal-today-who b { font-weight: 600; }
.cal-today-who .dot { width: 12px; height: 12px; flex: none; margin-top: .45em; }
.dot.dot-empty { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
/* grille : des cases posées, 4 px d'écart ; les séjours sont des barres continues */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cal .dow { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 8px; }
.cal .day { position: relative; min-height: 92px; padding: 6px 0; background: var(--surface); border-radius: 12px; }
.cal .day.out { background: transparent; }
.cal .day.out .dnum { color: var(--muted); opacity: .55; }
.cal .day.today { background: var(--accent-soft); }
.cal .day.today .dnum { background: var(--accent); color: var(--accent-ink); animation: fade-in 300ms ease both; }
.cal .dnum { display: inline-block; font-size: 12.5px; font-weight: 600; margin: 0 6px 6px; min-width: 24px; padding: 2px 6px; border-radius: 999px; text-align: center; font-variant-numeric: tabular-nums; }
.cal .evrow { display: flex; flex-wrap: wrap; row-gap: 3px; }
.cal .ev { flex: 1 1 100%; height: 22px; padding: 0 8px; margin: 0 -2px; border: 0; font: 500 12px/22px var(--sans); color: var(--accent-ink); text-align: left; white-space: nowrap; min-width: 0; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; transition: filter 150ms ease; }
.cal .ev span { position: relative; z-index: 2; pointer-events: none; }
.cal .ev.start { flex: 0 0 50%; margin-left: auto; margin-right: -2px; border-radius: 999px 0 0 999px; z-index: 1; overflow: visible; }
.cal .ev.end { flex: 0 0 50%; margin-left: -2px; margin-right: 0; border-radius: 0 999px 999px 0; }
.cal .ev.start.end { border-radius: 999px; }
.cal .ev:active { filter: brightness(0.92); }
.cal .ev:focus-visible { outline: none; box-shadow: var(--focus); z-index: 3; }
.cal .ev.wk { margin-left: 0; }
.cal .day:nth-child(7n) .ev { margin-right: 0; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); margin-top: 14px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* changement de mois : le contenu glisse dans le sens du geste */
.cal.slide-next { animation: cal-next 220ms var(--ease-out) both; }
.cal.slide-prev { animation: cal-prev 220ms var(--ease-out) both; }
@keyframes cal-next { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes cal-prev { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
/* à venir */
.cal-next .list li { padding: 0; }
.stay-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform 160ms var(--ease-out); }
.stay-row:active { transform: scale(0.98); }
.stay-row .dot { margin-top: 7px; flex: none; }
.stay-row > span { display: flex; flex-direction: column; gap: 2px; }
.cal-empty { display: flex; align-items: center; gap: 16px; }
.cal-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: var(--gap-section); color: var(--muted); }
.cal-sources .notice { flex-basis: 100%; }
/* fiche de séjour */
.stay-sheet h2 { margin: 2px 0 2px; font-size: 26px; }
.stay-plat { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.stay-when { margin: 0 0 16px; color: var(--text-2); }
.stay-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.stay-facts div { background: var(--surface-2); border-radius: 14px; padding: 10px 14px; }
.stay-facts dt { font-size: 12.5px; color: var(--muted); }
.stay-facts dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 640px) {
  .cal { gap: 3px; }
  .cal .day { min-height: 62px; border-radius: 10px; padding-top: 4px; }
  .cal .dnum { margin: 0 2px 4px; font-size: 11.5px; min-width: 20px; padding: 1px 4px; }
  .cal .ev { font-size: 10.5px; padding: 0 4px; margin: 0 -1.5px; }
  .cal .ev.start { margin-right: -1.5px; } .cal .ev.end { margin-left: -1.5px; }
  .cal .dow { padding: 4px 0; font-size: 10px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cal.slide-next, .cal.slide-prev { animation: fade-in 200ms ease both; } }

/* ---------- avis */
.reviews { display: grid; gap: 12px; }
.review { border-radius: var(--r); padding: 16px 18px; background: var(--surface-2); }
.rv-lab { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 1px; }
.rv-lab.good { color: var(--good); } .rv-lab.bad { color: var(--bad); }
.review-txt { margin: 6px 0 0; white-space: pre-line; font-size: 14.5px; }

/* ---------- comptes */
.auth-wrap { max-width: 440px; margin: 40px auto; }
.auth-card { padding: 32px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .btn.primary { padding: 11px 18px; }
.auth-form input:not([type=checkbox]) { width: 100%; }
.meter { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; transition: transform 200ms var(--ease-out); transform-origin: left; }
body[data-route="auth"] .topbar { background: transparent; border-bottom-color: transparent; }

/* ---------- divers */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); padding: 11px 18px; border-radius: 999px; font-size: 14px; z-index: 70; box-shadow: var(--float);
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
@starting-style { .toast:not([hidden]) { opacity: 0; transform: translate(-50%, 100%); } }
.toast.leaving { opacity: 0; transform: translate(-50%, 100%); transition-duration: 200ms; }
.edit-table td { vertical-align: top; }

/* la photo de l'annonce n'est plus floutée en fond : elle est montrée en grand dans l'Aperçu */
#backdrop { display: none; }

/* =================================================================== photo de l'annonce */
.apt-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-card.has-img { padding: 0; overflow: hidden; gap: 0; }
.home-card.has-img .home-card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.home-photo { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .home-card.has-img:hover .apt-photo { transform: scale(1.03); } }
.home-photo .apt-photo { transition: transform 600ms var(--ease-out); }
.intro-row { display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.intro-row h1 { margin-top: 0; }
.intro-thumb { width: 76px; height: 76px; border-radius: 20px; overflow: hidden; flex: none; }
.hero.with-photo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: end; padding: 16px 40px 16px 16px; }
.hero.with-photo .hero-photo { aspect-ratio: 4 / 3; }
.hero.with-photo > div:last-child { padding-bottom: 20px; }
.hero-photo { aspect-ratio: 4 / 3; border-radius: calc(var(--r-lg) - 8px); overflow: hidden; }
.hero .hero-sub { font-family: var(--sans); font-size: 15px; color: var(--field-ink); opacity: .85; margin-top: 14px; }
@media (max-width: 720px) {
  .hero.with-photo { grid-template-columns: 1fr; padding: 12px 12px 20px; gap: 16px; }
  .hero.with-photo p { padding: 0 8px; }
  .intro-thumb { width: 58px; height: 58px; border-radius: 16px; }
}
.photo-edit { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center; }
.photo-edit .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-edit .ph { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 34px; }
@media (max-width: 640px) { .photo-edit { grid-template-columns: 1fr; } }

/* =================================================================== navigation : réglages en retrait */
.tabs-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.tabs-row .tabs { margin-bottom: 0; }
.intro-text { min-width: 0; flex: 1; }
.apt-menu { flex: none; width: 44px; height: 44px; border-radius: 50%; align-self: center; color: var(--text-2); background: var(--surface-2); }
.apt-menu.active { color: var(--accent); background: var(--accent-soft); }
.subnav, .bottom-nav, .sheet, .sheet-backdrop { display: none; }
/* feuille du bas (menu ⋯, fiche de séjour) : sur ordinateur, même geste, largeur limitée */
.sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); transition: opacity 300ms var(--ease-drawer); }
.sheet:not([hidden]) {
  display: block; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; margin-inline: auto; max-width: 480px; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: var(--float); transition: transform 300ms var(--ease-drawer);
}
@starting-style {
  .sheet:not([hidden]) { transform: translateY(100%); }
  .sheet-backdrop:not([hidden]) { opacity: 0; }
}
/* sortie : même bord, plus rapide que l'entrée */
.sheet.closing { transform: translateY(100%); transition: transform 200ms var(--ease-out); }
.sheet-backdrop.closing { opacity: 0; transition: opacity 200ms var(--ease-out); }
.sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 12px; position: relative; touch-action: none; cursor: grab; }
.sheet-grip::before { content: ""; position: absolute; inset: -14px -80px; } /* zone de prise plus large que le trait */
.sheet-item { display: block; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--text); background: var(--surface-2); margin-bottom: 8px; transition: transform 160ms var(--ease-out); }
.sheet-item:active { transform: scale(0.97); }
.sheet-item b { display: block; font-family: var(--serif); font-size: 17px; }
.sheet-item span { font-size: 13px; color: var(--muted); }
.sheet-item.active { background: var(--accent-soft); }
.sheet-item.active b { color: var(--accent); }
.sheet-quiet { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 6px 0; margin-top: 10px; }
.sheet-quiet a { font-size: 13.5px; color: var(--muted); text-decoration: none; padding: 6px 0; }
.sheet-quiet a.active { color: var(--accent); }
body.sheet-open { overflow: hidden; }

/* =================================================================== mode mobile simplifié */
@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  body[data-route="apt"] main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* en-tête compact */
  .page-intro { margin: 0 0 14px; }
  .page-intro .back:not(.back-g) { display: none; }
  .page-intro h1 { font-size: 30px; line-height: 1.05; }
  .page-intro .muted { font-size: 13px; }
  .intro-row { gap: 12px; margin-top: 0; }
  .intro-thumb { width: 52px; height: 52px; border-radius: 14px; border-width: 2px; }
  .intro-links { display: none; }

  /* les onglets du haut laissent la place à la barre du bas */
  .tabs-row { display: none; }

  /* sous-menus de page */
  .subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px 2px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--text-2); background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid transparent; }
  .subnav a.active { background: var(--surface); color: var(--accent); font-weight: 600; }
  .sec-off { display: none !important; }
  .subnav + * > .section:first-child, [data-sec].section { margin-top: 0; }

  /* barre de navigation du bas */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 40;
    left: 0; right: 0; bottom: 0; /* barre simple, posée en bas : ni flottante, ni verre */
    background: var(--surface-2); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 18px;
    font: inherit; font-size: 11px; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-out);
  }
  .bottom-nav a:active, .bottom-nav button:active { transform: scale(0.97); }
  .bottom-nav .active { color: var(--accent); font-weight: 600; }
  .bottom-nav a { position: relative; z-index: 1; }
  .nav-pill { position: absolute; z-index: 0; top: 6px; left: 8px; width: calc((100% - 16px) / 4); height: calc(100% - 12px - env(safe-area-inset-bottom)); }
  .nav-pill::before { content: ""; position: absolute; inset: 0 2px; border-radius: 18px; background: var(--accent-soft); }
  .nav-pill.moving { transition: transform 200ms var(--ease-out); }


  /* chiffres clés : 2 par ligne, plus compacts */
  .grid.g4, .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 14px 14px 12px; }
  .kpi .label { font-size: 13px; }
  .kpi .value { font-size: 28px; }
  .kpi .sub { font-size: 12.5px; line-height: 1.4; }
  .grid.g2 { gap: 12px; }
  .section { margin-top: 12px; }
  .hero { padding: 22px 20px; }
  .hero p { font-size: 22px; }
  .hero.with-photo { padding: 10px 10px 16px; }

  /* tableaux → fiches empilées */
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tfoot { display: block; }
  table.stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--grid); }
  table.stack td { display: flex; justify-content: space-between; gap: 8px; border: 0; padding: 2px 0; white-space: normal; font-size: 13.5px; text-align: left; }
  table.stack td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: 12px; }
  table.stack td.st-title { grid-column: 1 / -1; font-weight: 600; font-size: 15px; }
  table.stack td.st-sub { grid-column: 1 / -1; color: var(--muted); }
  table.stack td.st-strong { font-weight: 700; }
  table.stack td.st-wide { grid-column: 1 / -1; overflow-wrap: anywhere; }
  body[data-route="apt"] .save-bar { bottom: calc(78px + env(safe-area-inset-bottom)); }
  table.stack td:empty { display: none; }
  table.stack td:last-child:not([data-l]) { grid-column: 1 / -1; justify-content: flex-end; }
  table.stack tfoot tr { border-bottom: 0; background: var(--surface-2); border-radius: 14px; padding: 12px; margin-top: 8px; }

  /* calendrier : lecture au toucher */
  .cal-head { flex-wrap: wrap; gap: 8px; }
  .cal-head h2 { font-size: 18px; }
  .tooltip { max-width: calc(100vw - 32px); }
  .page-tools { gap: 8px; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* appli installée : respecte l'encoche du téléphone */
.topbar { padding-top: max(12px, env(safe-area-inset-top)); }
.install-hint .btn { margin-left: 6px; }

/* =================================================================== réglages : notifications */
.toggle-list { display: flex; flex-direction: column; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; }
.toggle-list > :last-child { border-bottom: 0; }
.toggle-row b { display: block; font-weight: 600; font-size: 15px; }
.toggle-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 1px; }
.toggle-row small em { font-style: normal; color: var(--warn); }
.toggle-row.off b { color: var(--text-2); }
.toggle-row.big { padding: 4px 0; border: 0; }
.toggle-row.big b { font-family: var(--serif); font-size: 18px; }
input.sw { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background 200ms var(--ease-out); margin: 0; }
input.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transition: transform 200ms var(--ease-out); }
input.sw:checked { background: var(--accent); border-color: var(--accent); }
input.sw:checked::after { transform: translateX(18px); }
input.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.push-device { padding: 0 0 12px; }
.notif-body.dim { opacity: .5; }
.notif-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.notif-log li { display: flex; gap: 12px; align-items: flex-start; }
.notif-log .ni { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 8px; }
.card-head { flex-wrap: wrap; }

/* =================================================================== rentabilité : chiffres sources */
.src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.src-group { background: var(--surface-2); border-radius: 16px; padding: 14px 16px 6px; }
.src-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.src-head h3 { margin: 0; color: var(--text); font-size: 16px; }
.src-head a { margin-left: auto; font-size: 12.5px; text-decoration: none; }
.src-note { margin: 0 0 4px; }
.metric.sub span:first-child { padding-left: 12px; color: var(--muted); font-size: 13.5px; }
.metric.sub .v { color: var(--text-2); font-weight: 500; font-size: 13.5px; }
.src-title { margin: 22px 0 8px; color: var(--text); }
.formulas { display: grid; gap: 6px; margin-bottom: 14px; }
.formulas > div { display: grid; grid-template-columns: 150px 1fr auto 110px; gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.formulas > div > span { color: var(--muted); }
.formulas > div > b:last-child { text-align: right; color: var(--accent); }
@media (max-width: 720px) {
  .src-grid { grid-template-columns: 1fr; }
  .formulas > div { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .formulas > div > span:nth-child(2) { grid-column: 1 / -1; order: 3; font-size: 12.5px; }
  .formulas > div > span.num { order: 4; grid-column: 1 / -1; font-size: 12.5px; }
}

/* ---------- « ? » d'explication des formules */
.qmark { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: 1px;
  border-radius: 50%; border: 0; background: var(--surface-3); color: var(--text-2);
  font: 700 11px/1 var(--sans); cursor: help; transition: color 150ms var(--ease-out), background 150ms var(--ease-out); }
.qmark:hover, .qmark:focus-visible { color: var(--accent-ink); background: var(--accent); }
.tooltip { max-width: 320px; }
.tooltip .t-formula { font-weight: 600; margin: 2px 0 6px; }
.tooltip .t-calc { font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--surface) 14%, transparent); border-radius: 8px; padding: 5px 8px; margin-bottom: 6px; }
.tooltip .t-note { opacity: .8; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 720px) { .qmark { width: 22px; height: 22px; font-size: 12px; } }

/* =================================================================== mouvement */
/* « ici se réveille… » : le ☕ respire, pour montrer que l'appli n'est pas figée */
.wake h2 { animation: breathe 1.6s var(--ease-in-out) infinite alternate; }
@keyframes breathe { from { opacity: .55; transform: translateY(2px); } to { opacity: 1; transform: translateY(-2px); } }
@keyframes breathe-soft { from { opacity: .55; } to { opacity: 1; } }

/* mouvement réduit : on garde les fondus, on retire les déplacements */
@media (prefers-reduced-motion: reduce) {
  .toast { transition-property: opacity; }
  @starting-style { .toast:not([hidden]) { transform: translateX(-50%); } }
  .toast.leaving { transform: translateX(-50%); }
  .sheet:not([hidden]), .sheet.closing { transition: opacity 150ms var(--ease-out); }
  @starting-style { .sheet:not([hidden]) { transform: none; opacity: 0; } }
  .sheet.closing { transform: none; opacity: 0; }
  details.fold::details-content, details.fold-inline::details-content { transition: opacity 150ms var(--ease-out), content-visibility 150ms allow-discrete; }
  .home-card:hover { transform: none; }
  .wake h2 { animation-name: breathe-soft; }
}

/* =================================================================== avis : suppression */
.review .rv-del { padding: 2px 8px; margin-left: 6px; font-size: 13px; opacity: .55; transition: opacity .15s, transform 160ms var(--ease-out); }
.review .rv-del:hover, .review .rv-del:focus-visible { opacity: 1; }

/* =================================================================== petites touches */
/* tuiles de chiffres : on les touche pour aller au détail */
.kpi-link { cursor: pointer; transition: background 150ms var(--ease-out), transform 160ms var(--ease-out); }
.kpi-link:active { transform: scale(0.98); }
.kpi .label { display: flex; align-items: center; gap: 6px; }
.kpi-go { margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; transition: transform 160ms var(--ease-out), color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .kpi-link:hover { background: color-mix(in oklch, var(--accent-soft) 45%, var(--surface)); }
  .kpi-link:hover .kpi-go { transform: translateX(3px); color: var(--accent); }
}
/* mois de la page Revenus : ‹ septembre 2026 › */
.month-step { display: inline-flex; align-items: center; gap: 4px; }
.month-step .btn.round { width: 40px; height: 40px; font-size: 24px; font-family: var(--serif); }
.month-step-label { font-family: var(--serif); font-size: 22px; font-weight: 600; min-width: 9.5ch; text-align: center; text-transform: capitalize; }
/* accueil : prochaine arrivée sur la carte du logement */
.home-next { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .kpi-link:hover .kpi-go { transform: none; } }

/* =================================================================== écran Aujourd'hui */
.page-intro.is-today .intro-row { align-items: center; }
.hello-word { margin: 0 0 2px; color: var(--text-2); font-size: 16px; }
.page-intro.is-today h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.page-intro .maison { flex: none; width: 72px; height: 72px; margin-left: auto; }
.page-intro.is-today .apt-menu { margin-left: 4px; }
.maison .m-win { transition: fill 600ms ease; }
.maison .m-flag { transform-origin: 36px 10px; }
.maison.wave .m-flag { animation: flag-wave 900ms var(--ease-out) 600ms 1 both; }
@keyframes flag-wave { 0% { transform: scaleX(0.6) rotate(-6deg); opacity: 0; } 40% { transform: scaleX(1.05) rotate(3deg); opacity: 1; } 70% { transform: scaleX(0.97) rotate(-1.5deg); } 100% { transform: none; } }

.today-page { display: grid; gap: var(--gap-section); }
@media (min-width: 721px) { .today-page { gap: var(--gap-section-lg); } }
@media (min-width: 1000px) { .today-page { grid-template-columns: 1fr 1fr; column-gap: 64px; } .today-block:first-child { grid-column: 1 / -1; } }
.today-page .lab { display: block; font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.today-page a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.home-now, .month-now, .say-now { display: block; transition: transform 160ms var(--ease-out); }
.home-now:active, .month-now:active, .say-now:active { transform: scale(0.98); }
.home-now:focus-visible, .month-now:focus-visible, .say-now:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-lg); }

.today-page .home-now { position: relative; background: var(--field); color: var(--field-ink); border-radius: 26px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; align-items: start; }
.home-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-title { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.home-detail { font-size: 15px; opacity: .88; }
.home-thumb { grid-column: 2; grid-row: 1; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-ink) 30%, transparent); }
.home-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-state { grid-column: 1 / -1; justify-self: start; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--field-ink) 16%, transparent); }
.home-state.on { background: var(--field-ink); color: var(--field); font-weight: 600; }
.now-next { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: .92; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--field-ink) 18%, transparent); }
.now-next .dot { box-shadow: 0 0 0 2px var(--field-ink); }

.big-num { display: block; font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.big-num small { font-size: 20px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.month-sub { display: block; font-size: 14.5px; color: var(--text-2); margin-top: 10px; }
#gaugeSlot { display: block; }
.say-head { display: flex; align-items: baseline; gap: 8px; }
.say-head .big-num { font-size: 44px; }
.say-meta { font-size: 14.5px; color: var(--text-2); }
.say-now .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.say-now .chips:empty { display: none; }
.say-quote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--text); }
.say-by { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.today-foot { margin-top: var(--gap-section); }
.today-foot .notice { font-size: 13.5px; background: none; padding: 0; color: var(--muted); }

/* 1re ouverture du jour : les blocs montent un à un */
.today-page.entering .today-block { animation: today-in 300ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes today-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* dépôt d'un PDF : la zone répond quand un fichier la survole */
.dropzone { transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.dropzone.over { transform: scale(1.01); }

@media (max-width: 720px) {
  .page-intro .maison { width: 64px; height: 64px; }
  .big-num { font-size: 48px; }
  .home-now { padding: 20px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .today-page.entering .today-block { animation: fade-in 200ms ease both; animation-delay: 0ms; }
  .maison.wave .m-flag { animation: fade-in 200ms ease both; }
  .home-now:active, .month-now:active, .say-now:active, .dropzone.over { transform: none; }
  .nav-pill.moving { transition: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* =================================================================== jauge d'objectif */
.gauge { position: relative; display: block; height: 14px; border-radius: 999px; background: var(--surface-3); margin: 18px 0 8px; overflow: hidden; }
.gauge-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(var(--p)); }
.gauge.is-done .gauge-fill { background: var(--good); }
.gauge-text { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--text-2); }
.gauge.is-done + .gauge-text > :first-child { color: var(--good); font-weight: 600; }
.gauge-goal { color: var(--muted); font-variant-numeric: tabular-nums; }
.gauge-set { display: inline-block; margin: 14px 0 4px; font-size: 14.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* 1re ouverture du jour : remplissage de 0 à p */
.gauge.is-filling .gauge-fill { animation: gauge-fill 1000ms var(--ease-out) 150ms both; }
@keyframes gauge-fill { from { transform: scaleX(0); } to { transform: scaleX(var(--p)); } }

/* objectif atteint, 1re fois du mois : la barre part en terracotta, se remplit, gonfle, un reflet la traverse, elle passe au vert */
.gauge.is-celebrating { overflow: visible; animation: gauge-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 1150ms both; }
.gauge.is-celebrating .gauge-fill { overflow: hidden; background: var(--accent); animation: gauge-fill 1000ms var(--ease-out) 150ms both, gauge-green 400ms ease 1150ms forwards; }
.gauge.is-celebrating:not(.is-filling) .gauge-fill { animation: gauge-green 400ms ease 300ms forwards; }
.gauge.is-celebrating:not(.is-filling) { animation-delay: 300ms; }
.gauge.is-celebrating .gauge-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, oklch(100% 0 0 / .55), transparent); transform: translateX(-100%); animation: gauge-shine 700ms var(--ease-out) 1250ms both; }
.gauge.is-celebrating:not(.is-filling) .gauge-fill::after { animation-delay: 400ms; }
@keyframes gauge-pop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } }
@keyframes gauge-green { to { background-color: var(--good); } }
@keyframes gauge-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .gauge.is-filling .gauge-fill, .gauge.is-celebrating, .gauge.is-celebrating .gauge-fill::after { animation: none; }
  .gauge.is-celebrating .gauge-fill, .gauge.is-celebrating:not(.is-filling) .gauge-fill { animation: gauge-green 200ms ease forwards; }
}

/* =================================================================== Revenus */
.rev-month { max-width: 640px; margin-bottom: var(--gap-section); }
.rev-month .gauge-set { display: block; }
.story { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.4; color: var(--text); }
.rev-tags { margin-top: 16px; }
.rev-month.slide-next { animation: cal-next 220ms var(--ease-out) both; }
.rev-month.slide-prev { animation: cal-prev 220ms var(--ease-out) both; }
.card.bare { background: none; padding-left: 0; padding-right: 0; }
@media (prefers-reduced-motion: reduce) { .rev-month.slide-next, .rev-month.slide-prev { animation: fade-in 200ms ease both; } }

/* =================================================================== Avis */
.avis-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--gap-section); }
.avis-head .big-num { font-size: 60px; }
.avis-head-meta { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; color: var(--text-2); }
.avis-head-meta b { font-weight: 600; color: var(--text); }
.avis-head.empty .maison { flex: none; }
.say-plats { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-bottom: var(--gap-section); }
.themes h2 { font-size: 20px; margin: 0 0 10px; }
.themes-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.themes.wait { display: flex; align-items: center; gap: 16px; }
.themes.wait p { margin: 0; color: var(--text-2); font-family: var(--serif); font-size: 19px; }
.theme-btn { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; -webkit-tap-highlight-color: transparent; }
.theme-btn:active { transform: scale(0.98); }
.theme-btn b { font-weight: 600; }
.theme-btn > span { font-size: 13px; color: var(--muted); }
.theme-btn.on { background: var(--accent-soft); }
.theme-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.theme-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.theme-bar > i { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--r)); }
.theme-btn.good .theme-bar > i { background: var(--good); }
.theme-btn.bad .theme-bar > i { background: var(--bad); }
.themes.growing .theme-bar > i { animation: bar-grow 400ms var(--ease-out) both; animation-delay: calc(150ms + var(--i) * 60ms); }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(var(--r)); } }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 14px; background: var(--surface); }
.chip.good { color: var(--good); } .chip.bad { color: var(--bad); }
.rv-filters { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 4px; }
.rv-theme { font-size: 14px; color: var(--text-2); }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.seg button { position: relative; z-index: 1; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-2); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.seg button.on { color: var(--accent); font-weight: 600; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--surface); }
.seg-thumb.moving { transition: transform 200ms var(--ease-out), width 200ms var(--ease-out); }
.reviews.fading .review { animation: fade-in 200ms ease both; }
.review mark { background: color-mix(in srgb, var(--accent-2) 38%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; animation: fade-in 300ms ease both; }
.review { transition: height 200ms var(--ease-out), opacity 150ms ease, padding 200ms var(--ease-out), margin 200ms var(--ease-out); }
.review.leaving { height: 0 !important; opacity: 0; padding-block: 0; margin-block: 0; overflow: hidden; }
@media (max-width: 720px) { .themes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .themes.growing .theme-bar > i { animation: fade-in 200ms ease both; }
  .seg-thumb.moving { transition: none; }
}

.rv-note { font-weight: 600; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }

/* =================================================================== Aujourd'hui · « carte postale »
   La photo du logement ouvre la page ; l'état du soir est posé dessus. Trois sections calmes en dessous. */
.today-page { display: block; }
.hero-photo { position: relative; margin: 0 0 20px; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-3); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text) 8%, transparent); pointer-events: none; }
.hero-pill { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 16px 9px 13px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.3; box-shadow: var(--float); }
.hero-pill .dot { flex: none; width: 9px; height: 9px; }
.hero-pill.solo { position: static; box-shadow: none; margin-bottom: 20px; }
@media (min-width: 721px) { .hero-photo { aspect-ratio: 21 / 9; max-height: 420px; } .hero-pill { left: 20px; bottom: 20px; font-size: 16px; } }

.today-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } }
.today-grid > .today-block { display: flex; flex-direction: column; }
.today-grid > .today-block > .now-sec, .today-grid > .today-block.now-sec { flex: 1; }
.now-sec { display: block; background: var(--surface); border-radius: 24px; padding: 20px 22px 22px; }
a.now-sec { color: inherit; text-decoration: none; transition: transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
a.now-sec:active { transform: scale(0.98); }
a.now-sec:focus-visible { outline: none; box-shadow: var(--focus); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-title { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--text); }
.sec-go { font-size: 13.5px; color: var(--accent); text-decoration: none; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { a.now-sec:hover .sec-go, .sec-go:hover { transform: translateX(3px); } }

/* « Chez toi » : trois lignes, ce soir puis les deux prochains séjours */
.stays { list-style: none; margin: 0; padding: 0; display: grid; }
.stays li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; }
.stays li + li { box-shadow: 0 -1px 0 var(--grid); }
.stay-when { font-size: 13.5px; color: var(--muted); }
.stays .tonight .stay-when { color: var(--accent); font-weight: 600; }
.stay-what { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--text-2); min-width: 0; }
.stay-what b { color: var(--text); font-weight: 600; }
.stay-what .dot { flex: none; }

.month-now .big-num, .say-now .big-num { font-size: 48px; }
.say-points { display: grid; gap: 8px; margin: 14px 0 2px; }
.pt { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; }
.pt-lab { font-size: 13px; font-weight: 600; }
.pt.good .pt-lab { color: var(--good); } .pt.bad .pt-lab { color: var(--bad); }
.pt-val { color: var(--text); font-weight: 500; }
.say-quote { -webkit-line-clamp: 3; }
.today-foot { margin-top: 24px; }
@media (max-width: 720px) { .hero-photo { border-radius: 24px; margin-bottom: 14px; } .now-sec { padding: 18px 18px 20px; } }
@media (prefers-reduced-motion: reduce) { a.now-sec:active { transform: none; } a.now-sec:hover .sec-go { transform: none; } }
.stay-what .dot { width: 9px; height: 9px; }
.today-grid > .today-block:first-child { grid-column: auto; }
@media (min-width: 721px) { .hero-photo { aspect-ratio: auto; height: clamp(280px, 30vw, 420px); max-height: none; } }
.today-page .sec-go { color: var(--accent); }

/* vidéo du séjour : posée sur la photo d'attente, elle apparaît en fondu dès qu'elle joue */
.hero-photo .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
.hero-photo.playing .hero-video { opacity: 1; }
/* pendant un séjour, le cadre prend le format de la vidéo : on la voit en entier, sans zoom */
/* et la photo prend le même format que la vidéo : libre ou occupé, le cadre ne bouge pas */
.hero-photo.has-video, .hero-photo.same-ratio, .today-page .hero-photo.same-ratio { aspect-ratio: var(--ratio, 2.35); height: auto; max-height: none; }
#vidPrev video { width: 100%; height: 100%; object-fit: cover; display: block; }
label.busy { opacity: .6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-photo .hero-video { transition: none; } }
@media (max-width: 720px) {
  .hero-photo.same-ratio .hero-pill { left: 10px; bottom: 10px; padding: 6px 11px 6px 9px; font-size: 13px; gap: 7px; }
  .hero-photo.same-ratio .hero-pill .dot { width: 7px; height: 7px; }
}

/* la pastille de présence se pose sous le cadre (photo ou vidéo), plus jamais dessus */
.hero-wrap { margin-bottom: 20px; }
.hero-wrap .hero-photo { margin-bottom: 12px; }
.hero-wrap .hero-pill, .hero-photo.same-ratio + .hero-pill { position: static; display: inline-flex; max-width: 100%; margin: 0; box-shadow: none; background: var(--surface); font-size: 15px; padding: 9px 16px 9px 13px; gap: 9px; }
.hero-wrap .hero-pill .dot { width: 9px; height: 9px; }
.hero-wrap .hero-pill.on { background: var(--accent-soft); }
@media (max-width: 720px) { .hero-wrap { margin-bottom: 14px; } .hero-wrap .hero-photo { margin-bottom: 10px; } .hero-wrap .hero-pill { font-size: 14.5px; } }
/* cadre de la photo / vidéo : 16:9 partout, en pleine largeur (plus grand que le panoramique de la vidéo) */
.hero-photo, .today-page .hero-photo, .hero-photo.has-video, .hero-photo.same-ratio, .today-page .hero-photo.same-ratio { aspect-ratio: 16 / 9; height: auto; max-height: none; }
.hero-photo.has-video img, .hero-photo.has-video .hero-video, .hero-photo.same-ratio img { object-position: 40% 50%; }

/* =================================================================== Rentabilité · rapport en une colonne
   Pas de cartes : des parties séparées par un filet, un titre en Fraunces, une phrase de lecture, un graphique sobre. */
.renta { display: grid; gap: 0 64px; }
.renta-main { min-width: 0; max-width: 680px; }
.renta-aside { display: none; }
@media (min-width: 1100px) {
  .renta { grid-template-columns: minmax(0, 680px) minmax(240px, 300px); justify-content: space-between; }
  .renta-aside { display: grid; gap: 18px; position: sticky; top: 84px; align-self: start; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface-2); }
}
.aside-fig { display: grid; gap: 2px; }
.aside-fig > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.aside-fig b { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--text); }
.aside-fig b small { font-size: 15px; font-weight: 500; color: var(--muted); }
.renta-lead { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: clamp(23px, 3vw, 32px); line-height: 1.3; letter-spacing: -.01em; color: var(--text); margin: 0; max-width: 32ch; text-wrap: pretty; }
.renta-em { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.renta-lead-sub { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.renta-sec { margin-top: var(--gap-section); padding-top: 28px; border-top: 1px solid var(--grid); }
.renta-read { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.renta-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.renta-invite { max-width: 560px; padding: 24px 0; }
.renta-invite h2 { font-size: clamp(26px, 3vw, 34px); }
.renta.renta-invite { display: block; } /* pas la grille à deux colonnes de la page : titre, phrase et bouton l'un sous l'autre */
.renta-invite .btn { white-space: normal; text-align: center; text-wrap: balance; } /* texte entier, sur deux lignes s'il le faut */
.renta-nav { margin-bottom: 20px; }

/* cascade : libellé, barre, montant */
.cascade { display: grid; gap: 4px; }
.cascade-row { display: grid; grid-template-columns: minmax(96px, 11.5rem) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 0; font-size: 14.5px; }
.cascade-lbl { color: var(--text-2); overflow-wrap: anywhere; }
.cascade-track { display: block; width: 100%; height: 14px; overflow: visible; }
.cascade-bar { fill: var(--c-brut); transform-box: fill-box; transform-origin: left center; }
.cascade-row.sortie .cascade-bar { fill: var(--accent); opacity: .55; transform-origin: right center; }
.cascade-row.epargne .cascade-bar { fill: var(--good); transform-origin: right center; }
.cascade-row.epargne .cascade-lbl, .cascade-row.epargne .cascade-amt { color: var(--good); }
.cascade-row.reste .cascade-bar { fill: var(--accent); }
.cascade-row.reste.neg .cascade-bar { fill: var(--bad); }
.cascade-row.reste { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--grid); }
.cascade-row.reste .cascade-lbl, .cascade-row.reste .cascade-amt, .cascade-row.entree .cascade-amt { color: var(--text); font-weight: 600; }
.cascade-amt { text-align: right; white-space: nowrap; color: var(--text-2); }
.cascade-zero { stroke: var(--border); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cascade.growing .cascade-bar { animation: cascade-in 360ms var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 50ms); }
@keyframes cascade-in { from { transform: scaleX(0); } to { transform: none; } }
@media (max-width: 480px) { .cascade-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .cascade-track { grid-column: 1 / -1; grid-row: 2; } }

/* ce que vaut ton appartement */
.valeur-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 8px; }
.valeur-maj { font-size: 13.5px; color: var(--muted); }
.valeur-adr { margin: -2px 0 4px; font-size: 14.5px; color: var(--text-2); overflow-wrap: anywhere; }
.valeur-sub { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.valeur-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.valeur .chip { background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; }
.valeur-achat { max-width: 440px; margin-bottom: 16px; }
.valeur-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.valeur-wait { font-family: var(--serif); font-size: 24px; margin: 0; color: var(--text); animation: breathe-soft 1.4s var(--ease-in-out) infinite alternate; }
.valeur-invite { margin-top: 20px; padding: 18px 20px; border-radius: var(--r); background: var(--accent-soft); }
.valeur-invite .renta-read { margin-bottom: 12px; color: var(--text); }
.valeur .notice.soft { margin-bottom: 12px; }
.ventes-wrap { margin-top: 10px; }
table.ventes th, table.ventes td { padding: 8px 6px; font-size: 13.5px; }
.sheet-title { margin: 6px 0 4px; }

/* depuis la mise en location */
.passe-bar.pos { fill: var(--good); }
.passe-bar.neg { fill: var(--accent); }
.passe-bar.lancement { opacity: .35; stroke: var(--muted); stroke-dasharray: 3 2; }

/* projection */
.proj-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.proj-head h2 { margin: 0; }
.proj-figs { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0 0 20px; }
.proj-figs > div { display: grid; gap: 2px; }
.proj-figs dt { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.proj-figs dd { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--text); }
.proj-pat { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.proj-crd { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-dasharray: 5 4; }
.proj-rec { stroke: var(--good); stroke-width: 1.2; stroke-dasharray: 2 3; }
.proj-rec-lbl { fill: var(--good); font-size: 12px; }
.line-key { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--accent); }
.line-key.crd { border-top: 2px dashed var(--text-2); }
.proj-table { margin-top: 18px; font-size: 14px; font-variant-numeric: tabular-nums; }
.proj-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 6px; }
.proj-table th, .proj-table td { padding: 9px 8px; }
.proj-table thead th { white-space: normal; vertical-align: bottom; font-size: 12.5px; }
.proj-table tbody th { font-weight: 600; color: var(--text); }
@media (max-width: 480px) { .proj-table th, .proj-table td { padding: 8px 4px; font-size: 12.5px; } .proj-table thead th { font-size: 11.5px; } }

/* et si… ? : dans le flux sur téléphone, dans la colonne de droite collante sur ordinateur */
.renta-main > .renta-sim { margin-top: var(--gap-section); padding-top: 28px; border-top: 1px solid var(--grid); }
.renta-aside .renta-sim { margin-top: 2px; padding-top: 18px; border-top: 1px solid var(--border); }
.renta-sim h2 { margin: 0 0 4px; }
.renta-aside .renta-sim h2 { font-size: 22px; }
.renta-sim .sim-intro { margin: 0 0 14px; }
.sim-trio { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font-size: 13.5px; color: var(--text-2); }
.sim-trio b { margin-left: 4px; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--text); }
.sim-trio b small { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sim-trio .sim-mention, .aside-mention { font-size: 13px; color: var(--accent); }
.sim-trio .sim-mention { flex-basis: 100%; }
.aside-mention { margin: -8px 0 0; }
.renta-aside .sim-trio { display: none; }
.sim-rows { display: grid; gap: 12px; max-width: 520px; }
.sim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; }
.sim-row label { font-size: 14.5px; color: var(--text-2); }
.sim-row output { font-size: 14.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-row input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.sim-row input[type="range"]:focus { outline: none; }
.sim-row input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--border); }
.sim-row input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
.sim-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); transition: transform 150ms var(--ease-out); }
.sim-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); transition: transform 150ms var(--ease-out); }
.sim-row input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.sim-row input[type="range"]:active::-moz-range-thumb { transform: scale(1.15); }
.sim-row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.sim-row input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
#simReset { margin-top: 14px; }
@media (min-width: 1100px) { .renta-nav [data-goto="sim"] { display: none; } }
/* les chiffres changent tout de suite ; barres et courbe se redimensionnent en 150 ms */
.cascade-bar, .cascade-zero, .proj-plot, .proj-rec-g { transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); }
.proj-plot polyline { vector-effect: non-scaling-stroke; }

/* chiffres et hypothèses (repliée) */
.renta-hyp > summary h2 { margin: 0; }
.renta-hyp .src-card > p:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .cascade.growing .cascade-bar { animation: fade-in 200ms ease both; animation-delay: 0ms; }
  .cascade-bar, .cascade-zero, .proj-plot, .proj-rec-g { transition: opacity 150ms ease; }
  .sim-row input[type="range"]::-webkit-slider-thumb { transition: none; }
  .sim-row input[type="range"]::-moz-range-thumb { transition: none; }
  .valeur-wait { animation: none; }
}

/* =================================================================== parcours « Présente-moi ton appartement »
   Une question par écran dans la feuille ; glissement de 16 px dans le sens de la navigation (200 ms). */
.sheet.sheet-pc { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.pc { min-height: min(440px, calc(100dvh - 80px)); display: flex; flex-direction: column; }
.pc-top { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-bottom: 14px; }
.pc-back { padding-inline: 8px; }
.pc-prog { flex: 1; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pc-prog[hidden] { display: block; visibility: hidden; }
.pc-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform 200ms var(--ease-out); }
.pc-stage { flex: 1; }
.pc-q { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.pc-q.from-next { transform: translateX(16px); opacity: 0; transition: none; }
.pc-q.from-prev { transform: translateX(-16px); opacity: 0; transition: none; }
.pc-q h2 { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.2; margin: 4px 0 18px; text-wrap: balance; }
.pc-sub { margin: -10px 0 14px; color: var(--muted); font-size: 14.5px; }
.pc-q h2 + .pc-sub { margin-top: -10px; }
.pc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pc-pill, .pc-toggle, .pc-card, .pc-choice, .pc-line, .pc-sugg button {
  border: 0; font: inherit; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.pc-pill:active, .pc-toggle:active, .pc-card:active, .pc-choice:active, .pc-line:active, .pc-sugg button:active { transform: scale(0.97); }
.pc-pill:focus-visible, .pc-toggle:focus-visible, .pc-card:focus-visible, .pc-choice:focus-visible, .pc-line:focus-visible, .pc-sugg button:focus-visible { outline: none; box-shadow: var(--focus); }
.pc-pill { min-width: 52px; height: 52px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); font-family: var(--serif); font-size: 19px; font-variant-numeric: tabular-nums; }
.pc-pill.on { background: var(--accent); color: var(--accent-ink); }
.pc-pills.big .pc-pill { flex: 1; min-width: 0; height: 60px; font-size: 21px; }
.pc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pc-card { display: grid; justify-items: start; gap: 2px; padding: 14px 14px 16px; border-radius: var(--r); background: var(--surface-2); text-align: left; }
.pc-card .pc-maison { margin-bottom: 8px; }
.pc-card b { font-family: var(--serif); font-weight: 600; font-size: 17px; }
.pc-card span { font-size: 13px; color: var(--muted); }
.pc-card.on { background: var(--accent-soft); }
/* DPE : sept lettres, du vert au rouge par mélange des jetons (paliers, pas de dégradé) */
.pc-dpe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.pc-dpe .pc-pill {
  --dpe: color-mix(in oklch, var(--bad) calc(var(--dpe-i) * 16.6%), var(--good));
  min-width: 0; padding: 0; height: 56px; border-radius: 14px; font-weight: 600;
  background: color-mix(in oklch, var(--dpe) 16%, var(--surface)); color: color-mix(in oklch, var(--dpe) 80%, var(--text));
}
.pc-dpe .pc-pill.on { background: var(--dpe); color: var(--surface); }
.pc-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pc-toggle { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 999px; background: var(--surface-2); font-size: 15.5px; }
.pc-toggle::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); transition: box-shadow 150ms ease, background-color 150ms ease; }
.pc-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pc-toggle[aria-pressed="true"]::before { background: var(--accent); box-shadow: inset 0 0 0 4px var(--accent-soft), inset 0 0 0 10px var(--accent); }
.pc-choices { display: grid; gap: 8px; margin-bottom: 20px; }
.pc-choice { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r); background: var(--surface-2); text-align: left; }
.pc-choice b { font-weight: 600; }
.pc-choice span { font-size: 13px; color: var(--muted); }
.pc-choice[aria-pressed="true"] { background: var(--accent-soft); }
.pc-choice[aria-pressed="true"] b { color: var(--accent); }
.pc-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pc-actions .btn, .pc-form > .btn { width: 100%; padding-block: 13px; font-size: 15.5px; }
.pc-form { display: grid; gap: 14px; }
.pc-form[hidden] { display: none; }
.pc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pc-field { display: grid; gap: 6px; min-width: 0; }
.pc-field > span:first-child { font-size: 13.5px; color: var(--text-2); }
.pc-field small { display: block; color: var(--muted); font-size: 12.5px; }
.pc-field input, .pc-field select { width: 100%; font-size: 16px; padding: 12px 14px; }
.pc-input { position: relative; display: flex; }
.pc-input input { padding-right: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.pc-input i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-size: 14px; pointer-events: none; }
.pc-field.big input { font-family: var(--serif); font-size: 28px; padding-block: 10px; }
.pc-sugg { display: grid; gap: 4px; margin-top: -8px; }
.pc-sugg[hidden] { display: none; }
.pc-sugg button { padding: 11px 14px; border-radius: var(--r-sm); background: var(--surface-2); text-align: left; font-size: 14.5px; overflow-wrap: anywhere; }
.pc-fin { display: grid; justify-items: start; }
.pc-fin .maison { margin-bottom: 6px; }
.pc-resume { font-family: var(--serif); font-size: 21px; line-height: 1.35; margin: -6px 0 10px; text-wrap: pretty; }
.pc-est { margin: 0 0 18px; color: var(--text-2); }
.pc-est b { font-family: var(--serif); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-fin .pc-actions { width: 100%; }
.pc-wait { color: var(--text); animation: breathe-soft 1.4s var(--ease-in-out) infinite alternate; }
.pc-recap { display: grid; margin-bottom: 14px; }
.pc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 4px; background: none; border-bottom: 1px solid var(--border); text-align: left; border-radius: 0; }
.pc-line:last-child { border-bottom: 0; }
.pc-line span { color: var(--text-2); font-size: 14.5px; flex: none; }
.pc-line b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pc-line b::after { content: "›"; margin-left: 10px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .pc-pill:hover, .pc-toggle:hover, .pc-card:hover, .pc-choice:hover, .pc-sugg button:hover { background: var(--surface-3); }
  .pc-pill.on:hover { background: var(--accent); }
  .pc-dpe .pc-pill:hover { background: color-mix(in oklch, var(--dpe) 26%, var(--surface)); }
  .pc-dpe .pc-pill.on:hover { background: var(--dpe); }
  .pc-toggle[aria-pressed="true"]:hover, .pc-choice[aria-pressed="true"]:hover, .pc-card.on:hover { background: var(--accent-soft); }
  .pc-line:hover b { color: var(--accent); }
}
@media (max-width: 360px) { .pc-cards { gap: 8px; } .pc-card { padding: 12px; } .pc-q h2 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) {
  .pc-q { transition: opacity 200ms var(--ease-out); }
  .pc-q.from-next, .pc-q.from-prev { transform: none; }
  .pc-prog > i { transition: none; }
  .pc-wait { animation: none; }
}
/* Page Logement → Logement : caractéristiques */
.corr-grid { margin-top: 10px; }

/* ouvrir un logement par son identifiant (administrateur du service) */
.open-id { margin: 0 0 22px; max-width: 520px; }
.open-id-row { display: flex; gap: 10px; flex-wrap: wrap; }
.open-id-row input { flex: 1 1 200px; min-width: 0; padding: 10px 14px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.open-id-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.open-id-msg { margin: 6px 4px 0; min-height: 1.3em; color: var(--bad); }
.settings.seul { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* =================================================================== portail gestionnaire : « Tes logements » et ajout d'un logement (GLOG)
   La terracotta (--terra) reste terracotta dans ce portail, dont l'accent est cacao et ocre. */
.gl-grille { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .gl-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gl-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-item { position: relative; display: flex; min-width: 0; }
.gl-item > .gl-card { flex: 1; min-width: 0; }
.gl-photo { aspect-ratio: 16 / 10; }
.gl-photo .apt-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-photo.vide { background: color-mix(in oklch, var(--accent-2) 55%, var(--surface)); }
.gl-card .home-card-body { gap: 3px; }
.gl-card .apt-title { font-size: 24px; overflow-wrap: anywhere; }
.gl-pieces { font-size: 15px; color: var(--text-2); }
.gl-adresse { overflow-wrap: anywhere; }
.gl-menu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); cursor: pointer; transition: transform 160ms var(--ease-out); }
.gl-menu:active { transform: scale(0.94); }
.gl-menu:focus-visible { outline: none; box-shadow: var(--focus); }
.gl-vide { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 14px; }
.gl-ajouter { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 168px; padding: 22px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--text); text-decoration: none; transition: transform 160ms var(--ease-out); }
.gl-ajouter:active { transform: scale(0.98); }
.gl-ajouter:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: hover) and (pointer: fine) { .gl-ajouter:hover { transform: translateY(-2px); } }
.gl-plus { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-size: 34px; font-weight: 400; line-height: 1; padding-bottom: 3px; }
.gl-ajouter-t { display: grid; gap: 2px; }
.gl-ajouter-t b { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.15; }
.gl-ajouter-t span { font-size: 15px; color: var(--muted); }
/* thème sombre : la carte en cacao plein, le + en ocre */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-ajouter { background: var(--field); color: var(--field-ink); } :root:not([data-theme="light"]) .gl-ajouter-t span { color: color-mix(in oklch, var(--field-ink) 75%, transparent); } :root:not([data-theme="light"]) .gl-plus { background: var(--field-em); color: var(--field); } }
:root[data-theme="dark"] .gl-ajouter { background: var(--field); color: var(--field-ink); }
:root[data-theme="dark"] .gl-ajouter-t span { color: color-mix(in oklch, var(--field-ink) 75%, transparent); }
:root[data-theme="dark"] .gl-plus { background: var(--field-em); color: var(--field); }
button.sheet-item { display: block; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }

/* panneau d'ajout : plein écran sur téléphone, 520 px à droite à partir de 1100 px (la liste reste visible) */
body.ajout-ouvert { overflow: hidden; }
.gl-ajout-fond { display: none; }
.gl-ajout { position: fixed; inset: 0; z-index: 65; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out); }
@starting-style { .gl-ajout { opacity: 0; transform: translateX(24px); } .gl-ajout-fond { opacity: 0; } }
#ajoutRacine.closing .gl-ajout { opacity: 0; transform: translateX(24px); transition-duration: 200ms; }
.gl-in { width: min(520px, 100%); margin-inline: auto; min-height: 100%; display: flex; flex-direction: column; padding: 14px 20px calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .gl-ajout-fond { display: block; position: fixed; inset: 0; z-index: 64; background: color-mix(in oklch, var(--scrim) 55%, transparent); transition: opacity 250ms var(--ease-out); }
  #ajoutRacine.closing .gl-ajout-fond { opacity: 0; transition-duration: 200ms; }
  .gl-ajout { left: auto; width: 520px; box-shadow: var(--float); }
  .gl-in { width: 100%; padding: 22px 32px 32px; }
}
.gl-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 18px; }
.gl-rond { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform 160ms var(--ease-out); }
.gl-rond:active { transform: scale(0.94); }
.gl-rond:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: hover) and (pointer: fine) { .gl-rond:hover { background: var(--surface-3); } }
.gl-scene { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gl-q { flex: 1; display: flex; flex-direction: column; min-width: 0; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.gl-q.vers-avant { transform: translateX(24px); opacity: 0; transition: none; }
.gl-q.vers-arriere { transform: translateX(-24px); opacity: 0; transition: none; }
.gl-q.fondu { opacity: 0; transition: none; }
.gl-q h2 { font-size: clamp(27px, 8.2vw, 32px); line-height: 1.12; letter-spacing: -.02em; margin: 2px 0 12px; text-wrap: balance; outline: none; }
.gl-sub { margin: -2px 0 20px; color: var(--muted); font-size: 16px; text-wrap: pretty; }
.gl-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); font-size: 14.5px; }
.gl-erreur { margin: 0; color: var(--bad); font-size: 14px; }
.gl-aide { margin: -8px 0 4px; font-size: 14.5px; }
.gl-aide a { color: var(--text-2); text-underline-offset: 3px; }
.gl-liste { display: grid; gap: 10px; margin: 18px 0; }
.gl-patiente i { display: block; height: 76px; border-radius: 20px; background: var(--surface-3); animation: breathe-soft 1.4s var(--ease-in-out) infinite alternate; }
.gl-form { display: grid; gap: 12px; margin: 18px 0 0; }
.gl-champ { display: grid; gap: 6px; }
.gl-etiq { font-size: 14px; font-weight: 500; color: var(--text-2); }
.gl-champ input { width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 16px; font-size: 17px; }
.gl-ajout .btn.gl-grand { width: 100%; min-height: 56px; border-radius: 20px; font-size: 17px; }
.gl-ajout .btn.primary { background: var(--terra); border-color: var(--terra); color: var(--terra-ink); }
.gl-ajout .btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
.gl-ajout .btn:disabled { opacity: .5; cursor: default; }
.gl-ajout .btn:active:not(:disabled) { transform: scale(0.98); }
.gl-discret { justify-self: center; margin: 14px auto 0; padding: 12px 8px; border: 0; background: none; font: 500 14.5px/1.3 var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center; }
.gl-discret:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .gl-discret:hover { color: var(--text); } }
.gl-lien-btn { border: 0; background: none; padding: 10px 4px; font: 600 15px/1.2 var(--sans); color: var(--terra); cursor: pointer; border-radius: 8px; }
.gl-lien-btn:focus-visible { outline: none; box-shadow: var(--focus); }
:root[data-theme="dark"] .gl-lien-btn { color: var(--terra-vif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-lien-btn { color: var(--terra-vif); } }
.gl-outils { display: flex; justify-content: flex-end; margin: -10px 0 4px; }

/* les logements Lodgify : cartes à cocher */
.gl-lcartes { display: grid; gap: 10px; margin: 0; }
.gl-lcarte { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 14px 10px 10px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out); }
.gl-lcarte:active:not(.deja) { transform: scale(0.98); }
.gl-lcarte:has(.gl-coche-in:focus-visible) { box-shadow: var(--focus); }
.gl-lcarte::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 2px var(--accent); opacity: 0; transition: opacity 160ms var(--ease-out); pointer-events: none; }
.gl-lcarte.on { background: var(--accent-soft); }
.gl-lcarte.on::after { opacity: 1; }
.gl-barre .btn.primary { background: var(--field); color: var(--field-ink); }
.gl-lcarte.deja { opacity: .6; cursor: default; }
.gl-coche-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gl-lphoto { flex: none; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--surface-3); }
.gl-lphoto.vide { background: color-mix(in oklch, var(--accent-2) 55%, var(--surface)); }
.gl-lphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-ltexte { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gl-ltexte b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; overflow-wrap: anywhere; }
.gl-ltexte span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.gl-ltexte .gl-deja { font-weight: 600; color: var(--text-2); }
.gl-coche { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--muted) 60%, transparent); display: grid; place-items: center; color: var(--accent-ink); }
.gl-lcarte.deja .gl-coche { visibility: hidden; }
.gl-coche::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.8); transition: transform 180ms var(--ease-out), opacity 140ms var(--ease-out); }
.gl-coche svg { position: relative; opacity: 0; transform: scale(0.8); transition: transform 180ms var(--ease-out), opacity 140ms var(--ease-out); }
.gl-lcarte.on .gl-coche::before, .gl-lcarte.on .gl-coche svg { opacity: 1; transform: none; }
/* bouton collant en bas de l'écran, sur le fond de la page */
.gl-barre { position: sticky; bottom: 0; margin: auto calc(-1 * var(--gl-gouttiere)) 0; padding: 12px var(--gl-gouttiere) 0; background: var(--bg); box-shadow: 0 -1px 0 var(--border); }
.gl-q { --gl-gouttiere: 20px; }
@media (min-width: 1100px) { .gl-q { --gl-gouttiere: 32px; } }
.gl-lcartes + .gl-discret { margin-bottom: 18px; }

/* l'import : barre d'avancement et une ligne par logement */
.gl-progres { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 4px 0 22px; }
.gl-progres i { display: block; height: 100%; width: 100%; background: var(--terra-vif); transform-origin: left center; transition: transform 300ms var(--ease-out); }
.gl-suivi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gl-suivi li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 16px; }
.gl-suivi li span { min-width: 0; overflow-wrap: anywhere; }
.gl-pastille { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--surface-3); font-style: normal; font-weight: 700; font-size: 14px; line-height: 1; }
.gl-pastille.cours { box-shadow: inset 0 0 0 2px var(--terra-vif); animation: breathe-soft 1s var(--ease-in-out) infinite alternate; }
.gl-pastille.ok { background: var(--terra); box-shadow: none; color: var(--terra-ink); }
.gl-pastille.ok svg { width: 14px; height: 14px; }
.gl-pastille.echec { background: var(--accent-2); box-shadow: none; color: oklch(24% 0.04 55); }

/* statut d'un logement dans la liste (EF-GLOG-24) */
.gl-statut { --statut-encre: oklch(24% 0.04 55); --statut-trait: var(--text-2); display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.gl-statut svg { flex: none; margin-top: 1px; }
.gl-statut b { font-weight: 600; color: var(--text); }
.gl-statut span { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .gl-ajout { transition: opacity 200ms var(--ease-out); }
  @starting-style { .gl-ajout { transform: none; } }
  #ajoutRacine.closing .gl-ajout { transform: none; }
  .gl-q.vers-avant, .gl-q.vers-arriere { transform: none; }
  .gl-ajouter:hover { transform: none; }
  .gl-patiente i, .gl-pastille.cours { animation: none; }
  .gl-lcarte, .gl-lcarte:active:not(.deja), .gl-coche::before, .gl-coche svg { transform: none; transition: opacity 140ms var(--ease-out); }
  .gl-coche::before, .gl-coche svg { transform: none; }
  .gl-progres i { transition: none; }
}

/* Portail gestionnaire : son nom à côté du logo, pour ne jamais confondre les deux portails (EF-SOC-33). */
:root[data-portail="gestionnaire"] .wordmark::after {
  content: "gestion";
  margin-left: 8px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* Présenter un logement (EF-GLOG-33) : tout se touche. Le cadran (gros chiffre et ses deux boutons) est l'élément marquant. */
.pr-qui { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 14.5px; color: var(--muted); }
.pr-qui span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-2); }
.pr-qui span + span { flex: none; font-variant-numeric: tabular-nums; }
.pr-h3 { margin: 26px 0 10px; font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.25; }
.pr-cadran { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 8px; margin: 6px 0 14px; padding: 10px; border-radius: var(--r-lg); background: var(--surface-2); }
.pr-pas { width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font: 500 30px/1 var(--sans); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--ease-out); }
.pr-pas:active { transform: scale(0.94); }
.pr-pas:focus-visible { outline: none; box-shadow: var(--focus); }
.pr-nombre { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; font-family: var(--serif); font-weight: 600; font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pr-nombre small { font-family: var(--sans); font-weight: 500; font-size: 17px; letter-spacing: 0; color: var(--muted); }
.pr-pills { margin-bottom: 4px; }
.pr-pills .pc-pill.pr-texte { font-family: var(--sans); font-size: 15.5px; }
.pr-deduit { margin: -6px 0 0; min-height: 1.4em; }
.pr-lien { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-bottom: 14px; }
.pr-coller { min-height: 48px; }
.pr-actions { display: grid; gap: 4px; margin-top: 28px; }
.pr-actions .gl-discret { margin-top: 4px; }
/* carte d'un logement à compléter : un bouton à portée de pouce, posé sur la carte */
.gl-completer-place { display: block; height: 44px; }
.gl-completer { position: absolute; left: 16px; bottom: 14px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 15px/1 var(--sans); cursor: pointer; transition: transform 160ms var(--ease-out); }
.gl-completer:active { transform: scale(0.97); }
.gl-completer:focus-visible { outline: none; box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { .pr-pas, .gl-completer { transition: none; } }

/* Portail gestion : titre-sélecteur et liste des logements */
.apt-switch { all: unset; cursor: pointer; display: inline; border-radius: 8px; }
.apt-switch-ch { display: inline-block; vertical-align: middle; margin-left: 6px; color: var(--accent); transition: transform 160ms var(--ease-out); }
.apt-switch:active .apt-switch-ch { transform: translateY(2px); }
.switch-list { display: grid; gap: 8px; }
.switch-item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: transform 160ms var(--ease-out); }
.switch-item:active { transform: scale(0.97); }
.switch-item.active { background: var(--accent-soft); }
.switch-photo { flex: 0 0 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--surface); }
.switch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.switch-t { min-width: 0; }
.switch-t b { display: block; font-family: var(--serif); font-size: 17px; overflow-wrap: anywhere; }
.switch-t span { font-size: 13px; color: var(--muted); }
.mv .mv-day { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: start; }
.mv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mv-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mv-k { font-size: 13px; font-weight: 600; }
.mv-k.in { color: var(--good); }
.mv-k.out { color: var(--accent); }